@charset "UTF-8";
/* ============================================================
   ONLINE FACE — Shared stylesheet
   ------------------------------------------------------------
   Structure (order of appearance in this file):
     1. Design tokens (CSS variables)
     2. Reset / base
     3. Shared layout & utilities
        (heading tabs / centered headings / graph-paper background /
         white cards / MORE DETAILS button / yellow marker)
     4. Header (global nav / dropdowns / SP drawer)
     5. Main visual (MV / splash / face scan)
     6. OUR CLIENTS (client-logo marquee)
     7. NEWS (top page)
     8. VISION (puzzle animation, patent/award slider)
     9. TECHNOLOGY (top page)
    10. SERVICES (top page)
    11. CUSTOMER REVIEWS (slider)
    12. CASE STUDIES (top page)
   12b. CASE STUDIES (use-case page)
   12c. SERVICES full-package content accordion
    13. MEDIA (press-coverage marquee)
    14. CONTACT (form)
   14b. Shared sub-pages (page title / POINT box / fn-item /
        FACE BADGE diagram / pricing table / side vertical label, etc.)
   14c. NEWS page (article list / pagination)
   14d. SERVICES / CASE STUDIES / REVIEWS / ABOUT US pages
   14e. SERVICES page (full package / numbered bands / 2-column benefits)
   14f. CSR / Privacy Policy (document pages)
   14g. ABOUT US company history (timeline / patents / awards)
    15. Footer
    16. Animation (scroll fade-in / slide-in)
    17. Responsive notes (breakpoints: 1180 / 900 / 820 / 700px)
   ============================================================ */

/* ------------------------------------------------------------
   1. Design tokens (values extracted from the live site)
------------------------------------------------------------ */
:root {
  --color-navy: #003364;       /* Brand navy (text / rules) */
  --color-navy-dark: #002752;
  --color-yellow: #fff100;     /* Marker / accent */
  --color-red: #c11a2e;        /* Form submit button */
  --color-white: #fff;
  --color-gray-band: #e9e8e3;  /* Heading band / form background */
  --color-grid-bg: #eae9e3;    /* Graph-paper background base color */
  --color-gold: #a99257;       /* Gold band */

  --font-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;

  --width-content: 1200px;
  --header-height: 86px;
}

/* ------------------------------------------------------------
   2. Reset / base
------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  overflow-x: hidden;
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 2;
  color: var(--color-navy);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.7;
}

ul,
ol {
  list-style: none;
}

input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

/* ------------------------------------------------------------
   3. Shared layout & utilities
------------------------------------------------------------ */
.l-inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 32px;
}

.l-section {
  padding: 80px 0;
}

/* Yellow marker (slides in from the left on scroll) */
.mark {
  padding: 1px 2px;
  background-image: linear-gradient(var(--color-yellow), var(--color-yellow));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size 0.9s ease 0.25s;
}

.mark.is-marked {
  background-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .mark { background-size: 100% 100%; transition: none; }
}

/* Left-aligned tab-style heading (VISION / NEWS / TECHNOLOGY etc.)
   Top/bottom rules extend full-bleed to the left edge of the screen */
.c-tab-title {
  position: relative;
  display: inline-block;
  border-top: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  padding: 7px 56px 7px 0;
  margin-bottom: 48px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--color-navy);
  background: var(--color-white);
}

.c-tab-title::before,
.c-tab-title::after {
  content: "";
  position: absolute;
  right: 100%;
  width: 100vw;
  height: 2px;
  background: var(--color-navy);
}

.c-tab-title::before { top: -2px; }
.c-tab-title::after { bottom: -2px; }

/* Don't add a white background on top of the graph-paper background
   (keeps the same look as VISION/NEWS etc.) */
.bg-grid .c-tab-title {
  background: transparent;
}

.c-tab-title small {
  margin-left: 14px;
  font-size: 13px;
  font-weight: 700;
  vertical-align: 6px;
}

/* Large centered heading (OUR CLIENTS / CUSTOMER REVIEWS / MEDIA) */
.c-center-title {
  margin-bottom: 44px;
  text-align: center;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--color-navy);
}

.c-center-title small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
}

/* Graph-paper background section */
.bg-grid {
  background-color: var(--color-grid-bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* White bordered card */
.c-frame {
  background: var(--color-white);
  border: 1px solid var(--color-navy);
  padding: 72px 88px;
}

/* MORE DETAILS button */
.c-more {
  display: inline-block;
  min-width: 300px;
  padding: 16px 40px;
  border: 2px solid var(--color-navy);
  background: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-navy);
}

/* Horizontal rule within a section */
.c-rule {
  border: 0;
  border-top: 2px solid var(--color-navy);
  margin: 48px 0;
}

/* ------------------------------------------------------------
   4. Header
------------------------------------------------------------ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-height);
  background: var(--color-white);
  border-bottom: 1px solid rgba(0, 51, 100, 0.12);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  height: 100%;
  padding: 0 24px;
}

.gnav__list {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.gnav__link {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--color-navy);
  text-transform: uppercase;
  white-space: nowrap;
}

/* SERVICES dropdown */
.gnav__item--has-sub {
  position: relative;
}

.gnav__item--has-sub:hover > .gnav__link {
  background: var(--color-yellow);
}

/* Menu display for the currently open page */
.gnav__link.is-current {
  background: var(--color-yellow);
}

.gnav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 39, 82, 0.15);
  padding: 10px 18px;
  z-index: 120;
}

.gnav__item--has-sub:hover .gnav__sub {
  display: block;
}

.gnav__sub a {
  display: block;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
}

/* Pin the width and wrap to 2 lines for dropdowns with long items (CASE STUDIES) */
.gnav__sub--wrap {
  width: 252px;
}

.gnav__sub--wrap a {
  white-space: normal;
  line-height: 1.7;
}

/* JP / EN switch */
.header__lang {
  display: flex;
}

.header__lang span {
  display: inline-block;
  width: 36px;
  padding: 5px 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.header__lang .is-active {
  background: var(--color-navy);
  color: var(--color-white);
}

.header__lang .is-inactive {
  background: #b5b5b5;
  color: var(--color-white);
}

/* Language switch link (JP<->EN)
   The link itself stretches full-height as a flex item, so the span
   inside it looks the same as the span right below it
   (display:contents isn't used because older Safari has cases where
   the link becomes unclickable) */
.header__lang a.lang-link {
  display: block;
  text-decoration: none;
  color: inherit;
  line-height: inherit;
}

.header__lang a.lang-link .is-inactive {
  display: block;
  height: 100%;
}

.header__lang a.lang-link:hover .is-inactive {
  background: var(--color-navy);
}

/* Hamburger (SP) */
.header__menu-button {
  display: none;
  position: relative;
  z-index: 110;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.header__menu-button span {
  position: absolute;
  left: 12px;
  width: 24px;
  height: 3px;
  background: var(--color-navy);
  transition: transform 0.3s, opacity 0.3s;
}

.header__menu-button span:nth-child(1) { top: 16px; }
.header__menu-button span:nth-child(2) { top: 24px; }
.header__menu-button span:nth-child(3) { top: 32px; }

.header__menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header__menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ------------------------------------------------------------
   5. Main visual (MV)
   Plays the opening video once, fading in the copy and logo near the end
------------------------------------------------------------ */
.mv {
  position: relative;
  margin-top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}

.mv__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv__video--sm { display: none; }

/* Opening splash (white background + logo appears rotating) */
.mv__splash {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  transition: opacity 0.7s ease;
  perspective: 900px;
}

.mv__splash img {
  width: clamp(160px, 14vw, 230px);
  animation: mv-logo-intro 1.8s ease-out forwards;
  backface-visibility: visible;
}

/* Appears while spinning horizontally (Y-axis spin) */
@keyframes mv-logo-intro {
  0% { opacity: 0; transform: rotateY(540deg) scale(0.9); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}

.mv__splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.mv__overlay {
  position: absolute;
  left: 22%;
  bottom: 5%;
  z-index: 2;
  pointer-events: none;
}

/* Slides in left to right: copy (2 lines), then the logo box */
.mv__overlay .mv__copy span,
.mv__overlay .mv__logo {
  opacity: 0;
  transform: translateX(-56px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Matches the reference recording: shows logo, then line 1, then line 2 */
.mv__overlay.is-shown .mv__logo { opacity: 1; transform: translateX(0); transition-delay: 0.1s; }
.mv__overlay.is-shown .mv__copy span:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.6s; }
.mv__overlay.is-shown .mv__copy span:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.75s; }

.mv__overlay.is-shown {
  pointer-events: auto;
}

/* Yellow scanning light that loops after the video ends */
.mv__scan {
  position: absolute;
  /* Precisely overlaid on the video's drawn area via JS, scanning only inside the head-outline mask */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("../img/common/head_scan_mask.png");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("../img/common/head_scan_mask.png");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  mix-blend-mode: screen; /* Composited as light over the video below (white areas stay as-is; only colored areas are knocked out white) */
}

.mv__overlay.is-shown + .mv__scan {
  opacity: 1;
}

.mv__scan::before {
  content: "";
  position: absolute;
  left: -20%;
  top: 0;
  width: 140%;
  height: 46%;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 241, 0, 0.6) 22%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 241, 0, 0.6) 78%,
    rgba(255, 255, 255, 0) 100%);
  transform: rotate(-10deg) translateY(-130%);
  opacity: 0;
  animation: mv-scan 5.5s ease-in-out infinite;
}

/* Light that scans top to bottom over the mask (invisible on white; only colored areas are knocked out white) */
@keyframes mv-scan {
  0%   { transform: rotate(-8deg) translateY(-70%); opacity: 0; }
  4%   { opacity: 1; }
  30%  { transform: rotate(-8deg) translateY(225%); opacity: 1; }
  33%  { opacity: 0; }
  100% { transform: rotate(-8deg) translateY(225%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mv__scan::before { animation: none; opacity: 0; }
}

/* White-bar catchcopy */
.mv__copy {
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
}

.mv__copy span {
  position: relative;
  display: table;
  background: var(--color-white);
  padding: 0.5em 0.7em 0.5em 0.2em;
  font-size: clamp(14px, 1.15vw, 19px);
  letter-spacing: 0.1em;
}

/* Extend the white bar to the left edge of the screen */
.mv__copy span::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  width: 100vw;
  height: 100%;
  background: var(--color-white);
}

.mv__copy span + span {
  margin-top: 0.9em;
}

/* Logo (white box + corner brackets) */
.mv__logo {
  position: relative;
  display: table;
  margin-top: 1.2em;
  background: var(--color-white);
  padding: clamp(12px, 2.2vw, 34px) 12px;
  text-align: center; /* White-bar width matched to the 2nd copy line via JS; logo is centered */
}

/* Extend the logo's white background to the left edge of the screen */
.mv__logo::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  width: 100vw;
  height: 100%;
  background: var(--color-white);
}

.mv__logo img {
  width: clamp(140px, 12.5vw, 205px);
}

/* ------------------------------------------------------------
   6. OUR CLIENTS
------------------------------------------------------------ */
.clients {
  background: var(--color-white);
}

.clients__marquee {
  overflow: hidden;
  display: grid;
  gap: 18px;
}

/* Tighten the spacing between OUR CLIENTS and NEWS */
.clients.l-section {
  padding-top: 52px;
  padding-bottom: 40px;
}

.news.l-section {
  padding-top: 40px;
}

.clients__row {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  animation: clients-scroll 22s linear infinite;
}

/* Alternating slide: odd rows left-to-right, even rows right-to-left */
.clients__row:nth-child(odd) {
  animation-name: clients-scroll-right;
}

.clients__row:nth-child(2) {
  animation-duration: 25s;
}

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes clients-scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.clients__row li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 202px; /* All logos share the same cell width, so spacing stays even */
  flex-shrink: 0;
  white-space: nowrap;
}

.clients__row img {
  /* Fill the cell as much as possible (keep ratio, no squashing) */
  max-height: 64px;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* ------------------------------------------------------------
   7. NEWS
------------------------------------------------------------ */
.news {
  background: var(--color-white);
}

.news__list {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 16px;
  scrollbar-color: var(--color-navy) #e9e8e3;
  scrollbar-width: thin;
}

.news__list::-webkit-scrollbar { width: 8px; }
.news__list::-webkit-scrollbar-track { background: #e9e8e3; }
.news__list::-webkit-scrollbar-thumb { background: var(--color-navy); }

.news__item {
  border-bottom: 1px solid rgba(0, 51, 100, 0.15);
}

.news__link {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 14px 8px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.news__link:hover {
  text-decoration: underline;
}

.news__date {
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   8. VISION
------------------------------------------------------------ */
.vision {
  position: relative;
  background: var(--color-white);
}

/* Puzzle background: left/right piece groups scatter into view with staggered timing as you scroll */
.vision::before,
.vision::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

/* Left-side piece group */
.vision::before {
  background:
    url("../img/common/vision_bg_md_2x.png") calc(50% - 460px) 140px / 780px auto no-repeat;
  transition-delay: 0.15s;
}

/* Right-side piece group (middle + bottom rows) */
.vision::after {
  background:
    url("../img/common/vision_bg_md_2x.png") calc(50% + 460px) 700px / 780px auto no-repeat,
    url("../img/common/vision_bg_sm_2x.png") calc(50% + 330px) calc(100% - 240px) / 365px auto no-repeat;
  transition-delay: 0.6s;
}

/* Loop where pieces gather in the center then open outward */
.vision::before {
  animation: vision-gather-a 9s ease-in-out infinite;
}

.vision::after {
  animation: vision-gather-b 9s ease-in-out infinite;
}

@keyframes vision-gather-a {
  0%   { transform: translate(0, 0) scale(1); }
  42%  { transform: translate(30px, 0) scale(0.965); }
  55%  { transform: translate(30px, 0) scale(0.965); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes vision-gather-b {
  0%   { transform: translate(0, 0) scale(1); }
  42%  { transform: translate(-30px, 0) scale(0.965); }
  55%  { transform: translate(-30px, 0) scale(0.965); }
  100% { transform: translate(0, 0) scale(1); }
}

.vision.is-visible::before,
.vision.is-visible::after {
  opacity: 1;
}

.vision > .l-inner {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .vision::before,
  .vision::after { opacity: 1; transform: none; transition: none; animation: none; }
}

/* Title through body text is a centered, left-aligned column */
.vision__col {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.vision__title {
  margin: 24px auto 20px;
}

.vision__title img {
  width: min(475px, 88%);
}

.vision__catch {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.8;
}

.vision__faces {
  max-width: 900px;
  margin: 48px auto 0;
  text-align: center;
}

.vision__body {
  max-width: 700px;
  margin: 56px auto 0;
  font-weight: 700;
}

.vision__body p + p {
  margin-top: 1.8em;
}

.is-underlined {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 10px;
}

/* Patent/award band (medal + text) */
.vision__badge-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  max-width: 700px;
  margin: 64px auto 0;
}

.vision__badge-row img {
  width: 185px;
  flex-shrink: 0;
}

.vision__badge-row p {
  font-size: 19px;
  font-weight: 700;
  line-height: 2;
}

/* Patent certificate grid */
/* Step slider (slides one card right-to-left, then pauses) */
.step-slider {
  overflow: hidden;
  max-width: 850px;
  margin: 56px auto 0;
}

.step-slider__track {
  display: flex;
  transition: transform 0.9s ease;
}

.step-slider__track li {
  flex: 0 0 calc((100% - 90px) / 4);
  margin-right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Award badge */
/* Patent certificate slider: shows 5 cards (slightly smaller) */
.step-slider--five .step-slider__track li {
  flex: 0 0 calc((100% - 120px) / 5);
  margin-right: 30px;
}

/* Mixed patent-certificate x international-award slider (TECHNOLOGY page) */
.step-slider--mixed {
  margin: 44px auto 0;
}

.step-slider--mixed .step-slider__track li {
  flex: 0 0 calc((100% - 96px) / 5);
  margin-right: 24px;
}

.tech-intro__slider img {
  width: auto;
  height: auto;
  max-height: 155px;
  max-width: 100%;
}

/* Award logos keep their original aspect ratio, slightly smaller than the patent certificates */
.tech-intro__slider img.award {
  max-height: 120px;
}

.vision__awards img {
  height: 170px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* TECHNOLOGY page intro: network video background */
.tech-intro {
  position: relative;
  overflow: hidden;
  margin: 24px 0 48px;
  padding: 60px 40px;
}

.tech-intro__inner {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   9. TECHNOLOGY
------------------------------------------------------------ */
.tech__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 20px 0;
  font-size: 23px;
  font-weight: 700;
}

/* Top/bottom horizontal rules: drawn in from the left on scroll (subtle animation) */
.tech__head::before,
.tech__head::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s ease 0.15s;
}

.tech__head::before { top: 0; }
.tech__head::after { bottom: 0; transition-delay: 0.4s; }

.tech__head.is-visible::before,
.tech__head.is-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .tech__head::before,
  .tech__head::after { transform: scaleX(1); transition: none; }
}

.tech__head .badge {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 2px 20px;
  font-size: 22px;
}

.tech__head img {
  height: 40px;
  width: auto;
}

.tech__lead {
  margin: 40px auto;
  font-size: 18px;
  font-weight: 700;
  line-height: 2.2;
}

.tech__medal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin: 40px 0 56px;
}

.tech__medal .face { width: 170px; }
.tech__medal .medal { width: 210px; }
.tech__medal .award { width: 185px; }

/* Closing description text for the intro (caption below the logo)
   The block stays centered while its lines are left-aligned to each other */
.tech-intro__note {
  display: table;
  margin: 0 auto;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  line-height: 2;
  color: rgba(0, 51, 100, 0.85);
  margin-bottom: 0;
}

/* Gold band */
.tech__gold {
  background: var(--color-gold);
  color: var(--color-white);
  text-align: center;
  padding: 12px 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Navy version of the gold band */
.tech__gold--navy {
  background: var(--color-navy);
}

.tech__gold img {
  height: 22px;
  width: auto;
  vertical-align: -3px;
  margin: 0 6px;
}

/* Numbered item */
.tech__item {
  margin-top: 64px;
}

.tech__item-title {
  background: var(--color-gray-band);
  padding: 16px 28px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.6;
}

.tech__item-title small {
  font-size: 16px;
  margin-left: 8px;
}

.tech__item-body {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  margin-top: 40px;
}

.tech__item-text {
  flex: 1.3;
  font-size: 18px;
  font-weight: 700;
  line-height: 2.4;
}

.tech__item-image {
  flex: 0 0 300px;
  text-align: center;
}

.tech__item-image img {
  max-height: 250px;
  width: auto;
  max-width: 100%;
}

.tech__item .c-more {
  margin-top: 40px;
}

/* ------------------------------------------------------------
   10. SERVICES
------------------------------------------------------------ */
.svc__item {
  padding: 56px 0;
}

.svc__item + .svc__item {
  padding-top: 24px;
}

.svc__title {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--color-navy);
  margin-bottom: 36px;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.4;
}

.svc__label {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 4px 20px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.svc__body {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.svc__text {
  flex: 1.3;
  font-size: 20px;
  font-weight: 700;
  line-height: 2.4;
}

.svc__gold {
  display: table;
  margin: 24px 0 0;
}

.svc__gold img {
  height: 44px;
  width: auto;
}

.svc__image {
  flex: 1;
}

.svc__image img {
  max-width: 100%;
  height: auto;
}

/* Centered catch text within the body (styling for when extra bottom margin is needed) */
.svc__catch--spaced {
  margin-top: 64px;
}

/* Medium-size body text (LIVE / ONLINE EXAM descriptions) */
.svc__text-md {
  font-size: 17px;
  line-height: 2.2;
}

/* Full-width illustration (e.g. multi-device monitoring image) */
.svc__wide-illust {
  margin-top: 40px;
  text-align: center;
}

.svc__wide-illust--lg {
  margin-top: 48px;
}

.svc__wide-illust img {
  max-width: 100%;
  height: auto;
}

.svc__text .c-more {
  margin-top: 40px;
}

/* ------------------------------------------------------------
   11. CUSTOMER REVIEWS
------------------------------------------------------------ */
.reviews {
  background: var(--color-white);
}

.reviews__slider {
  overflow: hidden;
}

.reviews__list {
  display: flex;
  transition: transform 0.7s ease;
}

.reviews__item {
  flex: 0 0 calc((100% - 80px) / 3);
  margin-right: 40px;
}

.reviews__item-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f2f2f2;
}

.reviews__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Make the entire top-page slider card a link */
.reviews__card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.reviews__item-title {
  position: relative;
  margin: 20px 0 12px;
  padding: 8px 16px 8px 24px;
  background: var(--color-gray-band);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.reviews__item-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: var(--color-yellow);
}

.reviews__item-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
}

/* Carousel dots (decorative) */
.reviews__dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 48px;
}

.reviews__dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e0e0e0;
}

.reviews__dots .is-active {
  background: var(--color-yellow);
}

/* ------------------------------------------------------------
   12. CASE STUDIES
------------------------------------------------------------ */
.case__item {
  padding: 56px 0;
}

.case__item + .case__item {
  border-top: 2px solid var(--color-navy);
}

.case__title {
  padding-bottom: 18px;
  border-bottom: 2px solid var(--color-navy);
  margin-bottom: 36px;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.5;
}

.case__body {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.case__text {
  flex: 1.3;
  font-size: 20px;
  font-weight: 700;
  line-height: 2.4;
}

.case__image {
  flex: 1;
  text-align: center;
}

.case__text .c-more {
  margin-top: 40px;
}


/* ------------------------------------------------------------
   12b. CASE STUDIES (use-case page)
------------------------------------------------------------ */
.cs-frame {
  padding: 64px 88px 56px;
}

.cs-design {
  margin-bottom: 12px;
}

.cs-titlebar {
  display: flex;
  align-items: center;
  gap: 28px;
  border-top: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  padding: 12px 0;
}

.cs-titlebar__en {
  display: inline-block;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 22px;
}

.cs-titlebar__jp {
  font-size: 24px;
  font-weight: 700;
}

.cs-title {
  border-top: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  padding: 16px 0;
  margin-bottom: 36px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cs-section {
  margin-top: 64px;
}

.cs-section:first-of-type .cs-title {
  border-top: 0; /* Just an underline directly below the title bar */
}

.cs-section:first-of-type {
  margin-top: 40px;
}

.cs-lead {
  font-size: 15px;
  font-weight: 700;
  line-height: 2.4;
}

/* National certifications: Diet building -> -> online course */
.cs-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 44px;
}

.cs-flow__gov { width: 44%; }
.cs-flow__arrow { width: 54px; }
.cs-flow__meeting { width: 36%; }

/* Numbered items (1, 2, 3) */
.cs-num {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 100px;
  margin-top: 56px;
}

.cs-num h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 14px;
}

.cs-num__text p {
  font-size: 15px;
  font-weight: 700;
  line-height: 2.1;
}

.cs-num__circle img { width: 175px; }
.cs-num__illust img { width: 330px; }

/* (3) Keep the illustration at a fixed position next to the description without shrinking or overflowing on long text */
.cs-num__circle,
.cs-num__illust { flex-shrink: 0; }
.cs-num .cs-num__text { flex: 1 1 auto; min-width: 0; }

.cs-num--column {
  display: block;
}

.cs-num__strip {
  margin-top: 8px;
}

.cs-num__strip img { width: 560px; max-width: 100%; }

/* Banded list (school / cram school / home / public institution / clinic / SNS) */
.cs-section--list .cs-band-item + .cs-band-item {
  margin-top: 56px;
}

.cs-band-item {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.cs-band-item__main {
  flex: 1;
  min-width: 0;
}

.cs-band-item__head {
  background: var(--color-gray-band);
  border-left: 10px solid var(--color-yellow);
  padding: 12px 24px;
  font-size: 20px;
  font-weight: 700;
}

.cs-band-item__head span {
  font-size: 15px;
  margin-left: 4px;
}

.cs-band-item__text {
  margin-top: 26px;
  font-size: 15px;
  font-weight: 700;
  line-height: 2.1;
}

.cs-band-item__photo {
  flex: 0 0 235px;
}

.cs-band-item__photo img {
  width: 235px;
  height: 156px;
  object-fit: cover;
}

.cs-endrule {
  border: 0;
  border-top: 2px solid var(--color-navy);
  margin: 72px 0 20px;
}

.cs-logo { line-height: 0; }

/* Top (1): stacked illustration of form -> verification -> ID */
.tech__item-image--vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Full package: illustrations side by side, 4 language patterns */
.svc-feature__image--row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.svc-feature__image--row img {
  max-width: 200px;
}

.svc-feature__image--langs {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.svc-feature__image--langs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.svc-feature__image--langs .bubble { width: 90px; }
.svc-feature__image--langs .teacher { width: 74px; }

/* SERVICES: operations support desk / track-record band / pricing table */
.u-underline {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Pinned to 1 line (wrapping allowed on mobile -> see responsive notes) */
.u-nowrap {
  white-space: nowrap;
}

/* General-purpose utility */
.u-center {
  text-align: center;
}

.u-flex-none {
  flex: none;
}

.u-mt-32 {
  margin-top: 32px;
}

.u-mt-40 {
  margin-top: 40px;
}

/* Section with reduced top margin (e.g. case-study list) */
.l-section--tight {
  padding-top: 56px;
}

.svc-support__illust {
  text-align: center;
  margin: 32px 0 48px;
}

.svc-badge-band {
  background: var(--color-gray-band);
  border-left: 10px solid var(--color-yellow);
  padding: 12px 24px;
  margin-top: 20px;
  font-size: 20px;
  font-weight: 700;
}

.svc-badge-band small {
  font-size: 14px;
  font-weight: 700;
  margin-left: 8px;
}

.cm-price {
  margin-top: 48px;
}

.cm-price__list {
  padding: 20px 8px 8px;
}

.cm-price__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 700;
}

.cm-price__row dd {
  white-space: nowrap;
}

.cm-price__row small {
  font-size: 13px;
  font-weight: 700;
}

.cm-price__note {
  font-size: 14px;
  font-weight: 700;
  padding: 0 8px;
}

.cm-price__caution {
  font-size: 14px;
  font-weight: 700;
  padding: 12px 8px 0;
}

/* Image within a NEWS archive article (references the live site's published image) */
.article__news-img {
  margin: 20px 0;
}

.article__news-img img {
  max-width: 320px;
  height: auto;
}

/* ------------------------------------------------------------
   12c. SERVICES full-package content accordion
------------------------------------------------------------ */
.fn-band--acc {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-right: 56px;
}

.fn-band--acc::after {
  content: "＋";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 700;
}

.fn-band--acc.is-open::after {
  content: "−";
}

.svc-feature.svc-feature--acc {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin: 0;
  transition: max-height 0.6s ease, opacity 0.5s ease, margin 0.4s ease;
}

.svc-feature.svc-feature--acc.is-open {
  max-height: 1400px;
  opacity: 1;
  margin: 28px 0 44px;
}

/* Stacked accordion body content (e.g. usage flow) */
.svc-feature--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}

.svc-feature--stack.svc-feature--acc.is-open {
  max-height: 9000px;
}

/* ------------------------------------------------------------
   13. MEDIA
------------------------------------------------------------ */
.media {
  background: var(--color-white);
}

.media__row li {
  width: 162px;
}

.media__row img {
  /* Fill the cell as much as possible (keep ratio, no squashing) */
  max-height: 61px;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* ------------------------------------------------------------
   14. CONTACT (form)
------------------------------------------------------------ */
.contact__label {
  display: table;
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: 700;
}

.contact__label em {
  font-style: normal;
  padding: 2px 10px;
}

.form-table {
  width: 100%;
}

.form-table th,
.form-table td {
  vertical-align: top;
  text-align: left;
}

.form-table th {
  width: 300px;
}

.form-table input[type="text"],
.form-table input[type="email"],
.form-table input[type="tel"],
.form-table select,
.form-table textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #b5b5b5;
  background: var(--color-white);
  font-size: 15px;
}

.form-table textarea {
  min-height: 140px;
  resize: vertical;
}

/* Step bar */
.contact__steps {
  display: flex;
  gap: 32px;
  background: var(--color-gray-band);
  padding: 14px 24px;
  margin-bottom: 32px;
  font-size: 16px;
  font-weight: 700;
}

.contact__steps .is-active {
  border-bottom: 3px solid var(--color-navy);
}

.contact__lead {
  margin-bottom: 40px;
  font-size: 20px;
  font-weight: 700;
  line-height: 2.2;
}

.form__group-title {
  margin: 32px 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.form__row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
  background: var(--color-gray-band);
  padding: 18px 24px;
}

.form__row + .form__row {
  border-top: 1px solid rgba(0, 51, 100, 0.15);
}

.form__label {
  font-size: 16px;
  font-weight: 700;
  padding-top: 6px;
}

.form__required {
  display: inline-block;
  margin-left: 10px;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 12px;
  padding: 1px 8px;
  vertical-align: 2px;
}

.form__field input[type="text"],
.form__field input[type="email"],
.form__field input[type="tel"],
.form__field select,
.form__field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #b5b5b5;
  background: var(--color-white);
  font-size: 15px;
}

.form__field select { max-width: 320px; }
.form__field textarea { min-height: 140px; resize: vertical; }

.form__field--zip { display: flex; gap: 12px; }
.form__field--zip input { max-width: 180px; }
.form__field--zip select { max-width: 160px; }

.form__field .sub + .sub { margin-top: 10px; }

.form__privacy {
  margin-top: 32px;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}

.form__privacy a {
  text-decoration: underline;
}

.form__submit {
  margin-top: 32px;
  text-align: center;
}

.form__submit button,
.form__submit input[type="submit"] {
  min-width: 380px;
  padding: 16px 48px;
  border: 0;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* By phone */
.contact__tel {
  margin-top: 64px;
}

.contact__tel-label {
  display: table;
  padding: 6px 20px;
  font-size: 20px;
  font-weight: 700;
}

.contact__tel-number {
  display: block;
  margin-top: 16px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: var(--color-navy);
}

.contact__caution {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
}

.contact__caution img { width: 22px; }
.contact__caution a { text-decoration: underline; }

/* ------------------------------------------------------------
   14b. Shared across sub-pages
------------------------------------------------------------ */
/* Page title band */
.page-title {
  margin-top: var(--header-height);
  background: var(--color-gray-band);
  padding: 40px 0;
}

.page-title h1 {
  font-size: 29px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-navy);
}

.page-title h1 small {
  margin-left: 20px;
  font-size: 16px;
  font-weight: 700;
}

/* POINT! box (yellow tab + gray border) */
.point-box {
  margin: 48px 0;
}

.point-box__tab {
  display: table;
  background: var(--color-yellow);
  color: #000;
  font-style: italic;
  padding: 3px 24px 3px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.point-box__body {
  position: relative;
  margin-top: 12px;
  background: var(--color-gray-band);
  padding: 42px 48px;
  text-align: center;
}

.point-box__body::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 7px;
  background: var(--color-yellow);
}

.point-box__body::after {
  content: '';
  position: absolute;
  inset: 13px;
  border: 1px solid #c6c6c6;
  pointer-events: none;
}

.point-box__body p {
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  line-height: 2.4;
}

.point-box__body p span {
  border-bottom: 2px solid var(--color-navy);
  padding-bottom: 6px;
}

/* Down arrow */
.c-down-arrow {
  margin: 40px auto;
  text-align: center;
}

.c-down-arrow img {
  height: 64px;
}

/* Caption card with X mark (3 columns) */
.x-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 48px 0;
}

.x-cards li {
  padding: 0 24px;
  text-align: center;
}

.x-cards li + li {
  border-left: 2px dotted rgba(0, 51, 100, 0.4);
}

.x-cards .illust {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.x-cards .illust img {
  max-height: 100%;
  width: auto;
}

.x-cards .caption {
  position: relative;
  margin-top: 20px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.x-cards .caption::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: url("../img/common/benefit_X.svg") center / contain no-repeat;
  opacity: 0.9;
  z-index: -1;
}

/* In-house development banner row */
.dev-band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 20px 0;
  border-top: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  margin: 64px 0 24px;
  font-size: 26px;
  font-weight: 700;
}

.dev-band .badge {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 4px 24px;
  font-size: 22px;
}

/* Anti-fraud course-taking features 01-05 */
.fn-item {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 48px 0;
}

.fn-item + .fn-item {
  border-top: 2px dotted rgba(0, 51, 100, 0.4);
}

.fn-item--reverse {
  flex-direction: row-reverse;
}

.fn-item__text {
  flex: 1.2;
  min-width: 0; /* Keeps long headings from breaking out of the column width */
}

.fn-item__image {
  flex: 1;
  text-align: center;
}

.fn-item__image img {
  max-height: 240px;
  max-width: 100%;
  width: auto;
  height: auto;
}

.fn-item__title {
  position: relative;
  display: table;
  margin-bottom: 24px;
  padding-right: 80px;
  font-size: 30px;
  font-weight: 700;
}

.fn-item__title .num {
  background: var(--color-yellow);
  padding: 0 10px;
  margin-right: 10px;
}

/* Item 05 "phone while multitasking" / "phone while walking" is shown on one line without wrapping */
/* Pinned to 1 line only on wide screens (wraps on narrow screens to avoid overflow) */
@media (min-width: 1181px) {
  .fn-item__title--nowrap {
    white-space: nowrap;
  }
}

.fn-item__title::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  background: url("../img/common/benefit_X.svg") center / contain no-repeat;
}

.fn-item__text p {
  font-size: 17px;
  font-weight: 700;
  line-height: 2.4;
}

.fn-item__note {
  margin-top: 12px;
  font-size: 15px;
}

/* FACE BADGE authenticity check */
.fb-heading {
  display: table;
  margin: 64px auto 32px;
  border: 2px solid var(--color-navy);
  padding: 10px 32px;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-navy);
}

.fb-lead {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 2.2;
}

.fb-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 48px 0 0;
}

.fb-steps li {
  padding: 0 7.4%; /* Ratio relative to the column width (=28px/378.7px) */
  text-align: center;
}

.fb-steps li + li {
  border-left: 2px dotted rgba(0, 51, 100, 0.4);
}

.fb-steps .step-en {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.fb-steps .step-label {
  display: table;
  margin: 8px auto 16px;
  border: 2px solid var(--color-navy);
  padding: 2px 18px;
  font-size: 18px;
  font-weight: 700;
}

.fb-steps .step-text {
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
  text-align: left;
}

.fb-steps .step-image {
  margin-top: 24px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fb-steps .step-image img {
  width: 100%;
  max-width: 250px;
  height: auto;
}

.fb-diagram {
  margin-top: 56px;
}

.fb-diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Connector line from the STEP03 card to the verdict panel */
.fb-card {
  position: relative;
  display: inline-block;
  width: 77.5%; /* Fixed as a ratio of the content width to prevent the connector line from misaligning */
  line-height: 0;
}

.fb-card > img {
  width: 100%;
}

.fb-conn {
  position: absolute;
  pointer-events: none;
}

/* QR code -> top edge of the panel (downward) */
.fb-conn--qr {
  left: 24%;
  top: 92%;
  height: calc(8% + 56px);
  border-left: 1.5px solid var(--color-navy);
}

/* Master photo -> to the right */
.fb-conn--photo-h {
  left: 96%;
  top: 43%;
  width: calc(4% + 26px);
  border-top: 1.5px solid var(--color-navy);
}

/* -> downward (a single line to the height of the verdict diagram) */
.fb-conn--photo-v {
  left: calc(100% + 26px);
  top: 43%;
  height: calc(57% + 56px);
  border-left: 1.5px solid var(--color-navy);
}

/* -> to the left (to the right edge of the verdict panel; positioned via JS measurement) */
.fb-conn--photo-h2 {
  border-top: 1.5px solid var(--color-navy);
}

/* Row of 3 navigation buttons at the bottom of the page */
.c-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 72px 0 48px;
}

.c-trio a {
  display: block;
  border: 2px solid var(--color-navy);
  background: var(--color-white);
  padding: 28px 16px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-navy);
}

/* Counterfeit-product warning (above the footer) */
.caution-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
  font-size: 15px;
  font-weight: 700;
}

.caution-line img { width: 22px; }
.caution-line a { text-decoration: underline; }

/* ------------------------------------------------------------
   14c. NEWS page
------------------------------------------------------------ */
.news-page {
  position: relative;
}

/* Page that offsets its body by the fixed header's height */
.news-page--offset {
  margin-top: var(--header-height);
}

.page-side,
.news-page__side {
  position: absolute;
  left: 8px;
  top: 24px;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.article__date {
  background: var(--color-gray-band);
  padding: 24px 0;
  font-size: 34px;
  font-weight: 700;
  color: var(--color-navy);
}

/* English label to the right of the band title (ABOUT US / HISTORY / CASE STUDIES) */
.article__date-en {
  font-size: 0.5em;
  margin-left: 16px;
}

/* Supplementary label for the band title (the case-studies' "customer voice") */
.article__date-note {
  font-size: 0.55em;
}


.article__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}

.article__title {
  overflow-wrap: break-word;
  margin-bottom: 48px;
  font-size: 28px;
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.1em;
}

.article__title span {
  border-bottom: 2px solid var(--color-navy);
  padding-bottom: 8px;
}

.article__body p {
  overflow-wrap: break-word;
  font-size: 17px;
  font-weight: 700;
  line-height: 2.2;
}

.article__body p + p {
  margin-top: 1.6em;
}

.article__image {
  margin: 40px 0;
}

.article__image img {
  max-width: min(380px, 100%);
}

.article__image--logo img {
  max-width: min(440px, 100%);
}

.article__photo img {
  max-width: 220px;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 40px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
}

.pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-yellow);
}


/* ------------------------------------------------------------
   14d. SERVICES / CASE STUDIES / REVIEWS / ABOUT US pages
------------------------------------------------------------ */
/* SERVICES: supplementary illustrations / photos */
.svc__sub-illust {
  margin-top: 40px;
  text-align: center;
}

.svc__illust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin-top: 40px;
}

.svc__illust-row img {
  max-height: 220px;
  width: auto;
}

.howto__lead {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 32px;
}

.howto__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: center;
}

.howto__grid li {
  background: var(--color-white);
  border: 1px solid var(--color-gray-band);
  padding: 12px;
  text-align: center;
}

.cm__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.cm__grid img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* CASE STUDIES: heading supplement / use-case list */
.case__title-sub {
  font-size: 20px;
  margin-left: 8px;
}

.case__scene-list {
  margin-top: 8px;
}

/* REVIEWS: archive list */
.reviews__archive {
  max-width: 980px;
  margin: 0 auto;
}

.reviews__archive-item {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  align-items: start;
  padding: 40px 0;
}

.reviews__archive-item + .reviews__archive-item {
  border-top: 2px solid var(--color-navy);
}

.reviews__archive-item .reviews__item-title {
  margin-top: 0;
}

/* ABOUT US */
.about__message {
  max-width: 880px;
  margin: 0 auto 72px;
  font-size: 18px;
  font-weight: 700;
  line-height: 2.4;
}

.about__table.about__table--center {
  margin: 0 auto;
}

.about__table {
  max-width: 980px;
  margin: 0 0 80px;
  border-top: 1px solid rgba(0, 51, 100, 0.25);
}

.about__row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 22px 16px;
  border-bottom: 1px solid rgba(0, 51, 100, 0.25);
}

.about__row dt {
  font-weight: 700;
}

.about__row dd {
  font-weight: 700;
}

.about__row dd small {
  font-size: 13px;
  font-weight: 400;
}

/* ------------------------------------------------------------
   14e. SERVICES page (full package / numbered bands / 2-column benefits)
------------------------------------------------------------ */
.svc__title small {
  font-size: 15px;
  margin-left: 12px;
}

/* English version: keep the service-title body text on 1 line */
.svc__title .svc__title-text {
  white-space: nowrap;
}

/* English version: don't wrap the patent number mid-way within the title
   (if it doesn't fit, the whole parenthetical moves to the next line; wraps normally on mobile) */
.tech__item-title small.ttl-patent {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .tech__item-title small.ttl-patent { white-space: normal; }
}

@media (max-width: 760px) {
  .svc__title .svc__title-text { white-space: normal; }
}

/* English version: fit the full-package catch text on 1 line (font size adjusted since the English text is long)
   NOTE: specified with a doubled class to override the later .fullpkg__catch { font-size: 23px } */
.fullpkg__catch.fullpkg__catch--en {
  font-size: 21px;
}

.svc__catch {
  padding: 24px 0 28px;
  border-bottom: 2px solid var(--color-navy);
  margin-bottom: 40px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.9;
}

.svc__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.svc__photos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Side-by-side pair of photos (CONTENTS MAKING) */
.svc__photos--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin: 40px auto 0;
}

.svc__note-band {
  margin-top: 5px;
  background: var(--color-yellow);
  text-align: center;
  padding: 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
}

/* On-demand: center catch text */
.svc__center-catch {
  margin: 48px 0 0;
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  color: var(--color-navy);
}

/* Full-package heading (logo + text, top/bottom rules) */
.fullpkg__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-top: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  font-size: 20px;
  font-weight: 700;
}

.fullpkg__head img {
  height: 42px;
  width: auto;
}

.fullpkg__catch {
  margin: 28px 0 14px;
  font-size: 23px;
  font-weight: 700;
}

.fullpkg__lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 2.2;
}

/* Numbered feature band */
.fn-band {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
  background: var(--color-yellow);
  padding: 16px 28px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
}

/* Band with extra spacing from the previous block (how-to-use) */
.fn-band--gap {
  margin-top: 56px;
}

.fn-band__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-white);
  font-size: 17px;
  flex-shrink: 0;
}

.svc-feature {
  display: flex;
  align-items: center;
  gap: 56px;
  margin-top: 40px;
}

.svc-feature__text {
  flex: 1.4;
  font-size: 19px;
  font-weight: 700;
  line-height: 2.4;
}

.svc-feature__image {
  flex: 1;
  text-align: center;
}

.svc-feature__image img {
  max-height: 220px;
  width: auto;
}

/* SERVICES: 2-column benefits / comparison / step list / account list */
.svc__merit-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-top: 28px;
}

.svc__merit-head {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 47px;
  margin-left: 19px;
  padding: 8px 20px;
  background: var(--color-gray-band);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-navy);
}

.svc__merit-head::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 0;
  bottom: 0;
  width: 15px;
  background: var(--color-yellow);
}

.svc__merit-illust {
  position: relative;
  margin: 30px 0 24px;
  text-align: center;
}

.svc__merit-illust > img:first-child {
  max-height: 235px;
  width: auto;
  max-width: 100%;
}

.svc__merit-badge {
  position: absolute;
  left: 4%;
  top: 0;
  width: 68px;
}

.svc__merit-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 2.1;
}

.svc__account-list {
  margin-top: 20px;
  border-top: 1px solid rgba(0, 51, 100, 0.25);
}

.svc__account-list li {
  padding: 10px 4px;
  border-bottom: 1px solid rgba(0, 51, 100, 0.25);
  font-size: 16px;
  font-weight: 700;
}

.svc__other-note {
  margin-top: 48px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
}

.svc__compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
}

.svc__compare-box {
  text-align: center;
}

.svc__compare-box .illust {
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.svc__compare-box .illust > img {
  max-height: 100%;
  width: auto;
}

.svc__compare-box .label {
  position: relative;
  margin-top: 20px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--color-navy);
}

.svc__compare-box .label .stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 105px;
}

.svc__compare-box .label span {
  position: relative;
}

.svc__compare-arrow {
  margin-bottom: 36px;
}

.svc__compare-arrow img {
  width: 70px;
}

.howto-steps {
  max-width: 860px;
  margin: 48px auto 0;
}

.howto-steps li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 2px dotted rgba(0, 51, 100, 0.4);
}

.howto-steps .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-yellow);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
}

.howto-steps p {
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  margin-bottom: 12px;
}

.howto-steps img {
  max-width: 420px;
  border: 1px solid var(--color-gray-band);
}

.howto-steps .note {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
}

/* ------------------------------------------------------------
   14f. CSR / Privacy Policy (document pages)
------------------------------------------------------------ */
.doc__lead {
  margin-bottom: 56px;
  font-size: 22px;
  font-weight: 700;
}

.doc__block {
  max-width: 980px;
  margin-bottom: 56px;
  font-weight: 700;
  line-height: 2.2;
}

.doc__block p + p {
  margin-top: 1.2em;
}

.doc__subtitle {
  margin-bottom: 16px;
  padding-left: 14px;
  border-left: 6px solid var(--color-yellow);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-navy);
}

.doc__list {
  margin: 12px 0 12px 8px;
}

.doc__list li {
  font-weight: 700;
}

/* ------------------------------------------------------------
   14g. ABOUT US company history
------------------------------------------------------------ */
.history {
  max-width: 900px;
}

.history__year-block {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0 40px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 51, 100, 0.2);
}

.history__year {
  grid-row: 1 / span 20;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-navy);
  border-right: 1px solid rgba(0, 51, 100, 0.2); /* Match the thickness of the horizontal rule */
  padding-right: 24px;
}

.history__entry {
  grid-column: 2;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 20px 0;
}

/* Separated by a horizontal line per month/item */
.history__entry + .history__entry {
  border-top: 1px dashed rgba(0, 51, 100, 0.25);
}

/* Even out spacing: first item of the year hugs the top, last item hugs the bottom */
.history__year + .history__entry {
  padding-top: 0;
}

.history__entry:last-child {
  padding-bottom: 0;
}

.history__month {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-navy);
}

.history__items li {
  font-weight: 700;
  line-height: 2;
}

.history__items li + li {
  margin-top: 10px;
}

.history__accent {
  color: #c11a2e;
}

.history__certificate {
  max-width: 210px;
  margin-top: 8px;
  border: 0; /* Unified with no border */
}

/* Row that shows award certificates etc. side by side, wrapping as needed */
.history__cert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.history__cert-row .history__certificate {
  margin-top: 0;
  max-width: 200px; /* Width that fits 3 items side by side on 1 row */
}

.history__certificate--badge {
  border: 0;
}

/* Service logo / diagram in the company history (no border, blends with the background) */
.history__media {
  margin-top: 8px;
  max-width: 100%;
}


/* ------------------------------------------------------------
   14h. Case-study detail page
------------------------------------------------------------ */
.rvs__company {
  margin: 0 0 24px;
}

.rvs__lead {
  font-size: 21px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 2;
}

.rvs__summary {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.1;
}

.rvs__photos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}

.rvs__photos li {
  flex: 1 1 320px;
  max-width: 480px;
}

.rvs__photos img {
  width: 100%;
  height: auto;
}

.rvs__info {
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
  line-height: 2.1;
}

.rvs__info a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}

.rvs__body {
  margin-top: 48px;
}

.rvs__h {
  margin: 48px 0 20px;
  font-size: 21px;
  font-weight: 700;
  color: var(--color-navy);
}

.rvs__h--gray {
  background: var(--color-gray-band);
  padding: 13px 24px;
}

.rvs__h--line {
  border-bottom: 2px solid var(--color-navy);
  padding-bottom: 8px;
}

.rvs__h--blue {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 13px 24px;
}

.rvs__course {
  margin: 26px 0 14px;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-navy);
}

.rvs__text p {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.2;
}

.rvs__imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  margin: 30px 0;
}

.rvs__imgs img {
  max-width: min(100%, 440px);
  max-height: 640px;
  width: auto;
  height: auto;
}

.rvs__back {
  margin-top: 56px;
  font-size: 17px;
  font-weight: 700;
}

.rvs__back a {
  color: var(--color-navy);
}

/* Article link in the archive list (makes the whole row a link) */
.reviews__archive-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------------
   15. Footer
------------------------------------------------------------ */
.footer__nav {
  padding: 10px 0 30px;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(0, 51, 100, 0.2);
}

.footer__nav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.footer__nav a {
  display: flex;
  flex-direction: column; /* Icon above the title */
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  white-space: nowrap;
}

/* Icon matched to each menu item (simple single-color navy line, no background) */
.footer__nav a.fn-i-top::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 10 L10 4.6 L16 10 M6.2 9.2 V15.4 H13.8 V9.2" stroke="%23003364" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.footer__nav a.fn-i-news::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="5.2" y="4.4" width="9.6" height="11.2" stroke="%23003364" stroke-width="1.4" fill="none" stroke-linejoin="round"/><path d="M7.6 8 H12.4 M7.6 10.6 H12.4 M7.6 13.2 H10.8" stroke="%23003364" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg>'); }
.footer__nav a.fn-i-tech::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="2.4" stroke="%23003364" stroke-width="1.4" fill="none"/><path d="M10 4.2 V6 M10 14 V15.8 M4.2 10 H6 M14 10 H15.8" stroke="%23003364" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg>'); }
.footer__nav a.fn-i-svc::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7.6 5.8 L14.4 10 L7.6 14.2 Z" stroke="%23003364" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.footer__nav a.fn-i-rev::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4.6 5.4 H15.4 V12.4 H9.4 L6.6 15 V12.4 H4.6 Z" stroke="%23003364" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.footer__nav a.fn-i-case::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="8.4" r="3.4" stroke="%23003364" stroke-width="1.4" fill="none"/><path d="M8.5 13.6 H11.5 M9 15.5 H11" stroke="%23003364" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg>'); }
.footer__nav a.fn-i-contact::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="4.2" y="5.6" width="11.6" height="8.8" stroke="%23003364" stroke-width="1.4" fill="none" stroke-linejoin="round"/><path d="M4.4 6 L10 10.6 L15.6 6" stroke="%23003364" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.footer__nav a.fn-i-about::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="6" y="4.4" width="8" height="11.2" stroke="%23003364" stroke-width="1.4" fill="none" stroke-linejoin="round"/><path d="M8.4 7.4 H9.4 M10.6 7.4 H11.6 M8.4 9.8 H9.4 M10.6 9.8 H11.6 M9.4 15.6 V13 H10.6 V15.6" stroke="%23003364" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg>'); }

/* Default icon (thin-line chevron) */
.footer__nav a::before {
  content: '';
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  opacity: 0.85;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8 5 L13 10 L8 15" stroke="%23003364" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

.footer__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer {
  border-top: 2px solid var(--color-navy);
  background: var(--color-white);
  padding: 48px 0 0;
}

.footer__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.footer__left {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.footer__left img {
  width: 210px;
  margin-top: 4px;
}

.footer__company-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.footer__company-address {
  font-size: 13px;
  font-weight: 700;
}

.footer__right {
  flex: 1 1 0;
  max-width: 620px;
  margin-top: -5px; /* Align the start of line 1 with the height of the logo/company name */
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
}

.footer__links {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
}

.footer__copyright {
  display: block;
  margin-top: 40px;
  padding: 16px 0;
  border-top: 1px solid rgba(0, 51, 100, 0.3);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   16. Animation (scroll fade-in)
------------------------------------------------------------ */
.js-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slides in from left/right on scroll (js-slide-l: left-to-right / js-slide-r: right-to-left) */
.js-slide-l,
.js-slide-r {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.js-slide-l { transform: translateX(-72px); }
.js-slide-r { transform: translateX(72px); }

.js-slide-l.is-visible,
.js-slide-r.is-visible {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-fade,
  .js-slide-l,
  .js-slide-r { transition: none; transform: none; opacity: 1; }
}

/* ------------------------------------------------------------
   17. Responsive notes
------------------------------------------------------------ */
/* Tablet landscape (up to 1180px): shrink the nav to fit on 1 row */
@media (max-width: 1180px) {
  .gnav__list { gap: 22px; }
  .gnav__link { font-size: 15px; }
}

/* Up to 1180px: since there are now 3 language buttons (JP/EN/KO),
   shrink one step earlier so it doesn't overlap the nav */
@media (max-width: 1180px) {
  .header__inner { gap: 18px; }
  .header__lang span { width: 33px; padding: 5px 0; font-size: 11px; }
}

/* Up to 1024px: shrink the nav one step earlier to reserve width for the 3 language buttons */
@media (max-width: 1024px) {
  .header__inner { padding: 0 12px 0 16px; }
  .gnav__list { gap: 13px; }
  .gnav__link { font-size: 12.5px; letter-spacing: 0.02em; }
}

/* Tablet portrait (up to 900px): shrink further while still keeping the full nav, matching the live site */
@media (max-width: 900px) {
  :root { --header-height: 80px; }
  .header__inner { padding: 0 10px 0 14px; }
  .gnav__list { gap: 11px; }
  .gnav__link { font-size: 12px; letter-spacing: 0.01em; }
  .header__lang span { width: 31px; padding: 4px 0; font-size: 10.5px; }
}

/* Tablet (up to 900px): shrink the footer nav to keep it on 1 line */
@media (max-width: 900px) {
  .footer__nav ul { gap: 8px; }
  .footer__nav a { font-size: 11.5px; letter-spacing: 0.02em; gap: 7px; }
  .footer__nav a::before { width: 25px; height: 25px; }
}

/* Small tablet (up to 740px): footer nav wraps and centers */
@media (max-width: 740px) {
  .footer__nav ul { flex-wrap: wrap; justify-content: center; gap: 16px 26px; }
}

/* Small tablet portrait (up to 820px): shrink the nav to its minimum size so it doesn't overflow */
@media (max-width: 820px) {
  .header__inner { padding: 0 8px 0 10px; }
  .gnav__list { gap: 7px; }
  .gnav__link { font-size: 11px; letter-spacing: 0; }
  .header__lang span { width: 29px; padding: 4px 0; font-size: 10px; }
}

/* Up to 740px: compress further for the 4 language buttons (the band just before the 700px drawer switch) */
@media (max-width: 740px) {
  .gnav__list { gap: 6px; }
  .header__lang span { width: 27px; padding: 4px 0; font-size: 9.5px; }
}

@media (max-width: 900px) {
  .c-frame { padding: 48px 40px; }
  .c-center-title { font-size: 36px; }
  .c-tab-title { font-size: 26px; }
  .svc__title, .case__title { font-size: 27px; }
  .tech__item-title { font-size: 22px; }
  .vision__awards img { height: 140px; }
}

/* Smartphone (up to 700px): drawer menu + 1 column */
@media (max-width: 700px) {
  :root { --header-height: 64px; }

  body { font-size: 15px; }

  .l-section { padding: 56px 0; }
  .l-inner { padding: 0 20px; }
  .c-frame { padding: 40px 20px; }
  .c-tab-title { font-size: 22px; padding-right: 32px; margin-bottom: 40px; }
  .c-center-title { font-size: 30px; }
  .c-more { min-width: 240px; font-size: 17px; }

  /* Header: drawer menu (button on the left, language switch on the right) */
  .header__inner { padding: 0 16px; justify-content: space-between; }
  .header__menu-button { display: block; }

  /* MV: switch to the portrait video */
  .mv__video--lg { display: none; }
  .mv__video--sm { display: block; }
  .mv__overlay { left: 8%; bottom: 8%; }
  .mv__copy span { font-size: 15px; }
  .mv__logo { margin-top: 0.8em; padding: 12px 20px; }
  .mv__logo img { width: 150px; }

  .header__nav-area {
    position: fixed;
    inset: 0;
    z-index: 105;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: rgba(255, 255, 255, 0.98);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
  }

  .header__nav-area.is-open {
    opacity: 1;
    visibility: visible;
  }

  .gnav__list {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .gnav__link { font-size: 17px; max-width: none; }

  /* MV */
  .mv__scan { display: none; } /* Scan effect isn't supported on mobile since it uses the portrait video */

  /* Each section becomes 1 column */
  .news__link { grid-template-columns: 1fr; gap: 0; }

  .vision__badge-row { flex-direction: column; gap: 24px; text-align: center; }
  .vision__badge-row p { font-size: 17px; }
  .step-slider__track li { flex: 0 0 calc((100% - 20px) / 2); margin-right: 20px; }
  .step-slider--mixed .step-slider__track li { flex: 0 0 calc((100% - 20px) / 2); margin-right: 20px; }
  .vision__badge-row img { width: 150px; }
  .vision__awards img { height: 140px; }
  .tech-intro__slider img { height: 120px; }

  .tech__head { font-size: 19px; }
  .tech__item-title { font-size: 20px; padding: 14px 18px; }
  .tech__item-body { flex-direction: column; gap: 28px; }
  .tech__item-text { font-size: 16px; line-height: 2.2; }
  .tech__medal { flex-direction: column; gap: 24px; }

  .svc__title { font-size: 23px; flex-wrap: wrap; gap: 12px; }
  .svc__label { font-size: 18px; }
  .svc__body { flex-direction: column; gap: 28px; }
  .svc__text { font-size: 16px; line-height: 2.2; }

  .reviews__item { flex: 0 0 100%; margin-right: 20px; }

  .case__title { font-size: 23px; }
  .case__body { flex-direction: column; gap: 28px; }
  .case__text { font-size: 16px; line-height: 2.2; }
  .case__image img { max-width: 320px; }

  .clients__row { gap: 24px; }
  .clients__row li { width: 140px; }
  .clients__row img { max-height: 44px; }
  .media__row li { width: 116px; }
  .media__row img { max-height: 40px; }
  .step-slider--five .step-slider__track li { flex: 0 0 calc((100% - 20px) / 2); margin-right: 20px; }

  .form__row { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .form__submit button,
  .form__submit input[type="submit"] { min-width: 0; width: 100%; }

  .form-table, .form-table tbody, .form-table tr, .form-table th, .form-table td {
    display: block;
    width: 100%;
  }
  .form-table th { padding-bottom: 6px; }
  .form-table td { padding-bottom: 18px; }
  .contact__tel-number { font-size: 30px; }

  .footer__nav { padding: 4px 0 22px; margin-bottom: 36px; }
  .footer__nav ul { flex-wrap: wrap; justify-content: center; gap: 18px 24px; }
  .footer__nav a { font-size: 12px; gap: 7px; }
  .footer__nav a::before { width: 26px; height: 26px; }
  .footer__grid { flex-direction: column; }
  .footer__left { flex-direction: column; }
  .footer__links { justify-content: flex-start; }

  /* Sub-pages */
  .page-title h1 { font-size: 24px; }
  .point-box__body { padding: 24px 20px; }
  .point-box__body p { font-size: 18px; line-height: 2.2; }
  .x-cards { grid-template-columns: 1fr; }
  .x-cards li + li { border-left: 0; border-top: 2px dotted rgba(0, 51, 100, 0.4); padding-top: 24px; margin-top: 24px; }
  .x-cards .caption { font-size: 18px; }
  .dev-band { font-size: 19px; }
  .fn-item, .fn-item--reverse { flex-direction: column; gap: 24px; }
  .fn-item__title { font-size: 22px; }
  .fn-item__title { padding-right: 56px; }
  .fn-item__title::after { width: 48px; height: 48px; }
  .fb-heading { font-size: 20px; }
  .fb-steps { grid-template-columns: 1fr; }
  .fb-conn, .fb-svg-conn { display: none; }
  .fb-steps li + li { border-left: 0; border-top: 2px dotted rgba(0, 51, 100, 0.4); padding-top: 24px; margin-top: 24px; }
  .cs-frame { padding: 40px 24px; }
  .cs-flow { flex-direction: column; }
  .cs-flow__gov, .cs-flow__meeting { width: 100%; }
  .cs-flow__arrow { transform: rotate(90deg); }
  .cs-num { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cs-band-item { flex-direction: column; }
  .cs-band-item__photo { flex: none; }
  .cs-titlebar__en { font-size: 18px; }
  .cs-titlebar__jp { font-size: 20px; }
  .cs-title { font-size: 20px; }
  .c-trio { grid-template-columns: 1fr; gap: 16px; margin: 48px 0 24px; }
  .c-trio a { font-size: 19px; padding: 18px 12px; }
  .page-side,
.news-page__side { display: none; }
  .howto__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cm__grid { grid-template-columns: 1fr; }
  .svc__illust-row { flex-direction: column; gap: 24px; }
  .reviews__archive-item { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .about__row { grid-template-columns: 1fr; gap: 4px; }
  .svc__catch { font-size: 19px; }
  .svc__photos { grid-template-columns: 1fr; }
  .fullpkg__head { font-size: 18px; flex-wrap: wrap; }
  .fullpkg__catch { font-size: 20px; }
  .fn-band { font-size: 19px; padding: 10px 16px; }
  .svc-feature { flex-direction: column; gap: 24px; }
  .svc-feature__text { font-size: 16px; line-height: 2.2; }
  .about__table { margin-bottom: 48px; }
  .case__title-sub { display: block; font-size: 15px; margin-left: 0; }
  .svc__merit-cols { grid-template-columns: 1fr; }
  .svc__compare { grid-template-columns: 1fr; }
  .svc__compare-arrow { text-align: center; margin-bottom: 0; }
  .svc__compare-arrow img { transform: rotate(90deg); width: 48px; }
  .howto-steps img { max-width: 100%; }
  /* Line breaks tuned for desktop width are removed on mobile, allowing natural wrapping */
  .cs-lead br,
  .fullpkg__lead br,
  .tech__lead br,
  .tech__item-text br,
  .fn-item__text p br,
  .reviews__item-text br { display: none; }
  .cm-price__row { flex-direction: column; gap: 4px; align-items: flex-start; }
  .cm-price__row dd { white-space: normal; }
  .u-nowrap { white-space: normal; }
  .article__date { font-size: 24px; }
  .history__year-block { grid-template-columns: 1fr; }
  .history__year { grid-row: auto; border-right: 0; border-bottom: 1px solid rgba(0, 51, 100, 0.2); display: table; padding: 0 12px 4px 0; font-size: 30px; }
  .history__entry { grid-column: 1; grid-template-columns: 44px 1fr; }
  .article__title { font-size: 20px; }
  .rvs__lead { font-size: 18px; }
  .rvs__h { font-size: 19px; }
  .rvs__photos li { flex-basis: 100%; }
  .rvs__imgs img { max-width: 100%; }
  .article__inner { padding: 32px 24px 48px; }
}


/* ------------------------------------------------------------
   18. RTL (Arabic) support
   Pages under ar/ carry <html dir="rtl">.
   Components where direction is meaningful (sliders, diagrams, etc.)
   are pinned to dir="ltr" on the HTML side.
------------------------------------------------------------ */
[dir="rtl"] .tech-intro__note { text-align: right; }
/* Heading-tab decorative rule: extends left from the title to the screen edge
   in RTL too, same as the Japanese version (left-side overflow is absorbed by
   html[dir=rtl]'s overflow-x) */
[dir="rtl"] .c-tab-title { padding: 7px 0 7px 56px; }
[dir="rtl"] .c-tab-title::before,
[dir="rtl"] .c-tab-title::after { right: 100%; left: auto; }
/* Service title: nowrap is removed for Arabic so it wraps naturally */
[dir="rtl"] .svc__title .svc__title-text { white-space: normal; }
[dir="rtl"] .gnav__sub { left: auto; right: 0; }
[dir="rtl"] .svc__title small { margin-left: 0; margin-right: 12px; }
[dir="rtl"] .page-title h1 small { margin-left: 0; margin-right: 20px; }
[dir="rtl"] .point-box__body { text-align: right; }
[dir="rtl"] .cm-price__row dd { text-align: left; }
[dir="rtl"] .doc__list, [dir="rtl"] .doc__block { text-align: right; }
[dir="rtl"] .rvs__info { text-align: right; }
/* MV is pinned to dir="ltr", but since the copy text is Arabic it's shown right-aligned */
[dir="ltr"] .mv__copy span[lang] { direction: rtl; }

/* -- 18b. RTL support (addendum): animation direction --
   On Arabic pages, the yellow marker fill and the heading-rule slide
   both run "right to left" to match the reading direction */
[dir="rtl"] .mark {
  background-position: right center;
}
[dir="rtl"] .tech__head::before,
[dir="rtl"] .tech__head::after {
  transform-origin: right center;
}

/* RTL pages: safeguard against a scrollbar appearing from the MV video etc.
   overflowing left of the viewport (in RTL, left-side overflow becomes
   scrollable area) */
html[dir="rtl"], [dir="rtl"] body { overflow-x: hidden; }

/* RTL pages: reverse the spacing between the English heading and its small
   label for right-to-left writing (fixes margin-left landing on the
   opposite side in RTL, which made the small label stick to the heading) */
[dir="rtl"] .c-tab-title small { margin-left: 0; margin-right: 14px; }
[dir="rtl"] .tech__item-title small { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .article__date-en { margin-left: 0; margin-right: 16px; }

/* Fade at both ends of the logo slide (so logos don't cut off abruptly at the edge)
   NOTE: implemented with an overlaid white gradient instead of mask-image,
   since mask-image risks compositing glitches on WebKit browsers */
.clients__marquee {
  position: relative;
}
.clients__marquee::before,
.clients__marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 1;
  pointer-events: none;
}
.clients__marquee::before {
  left: 0;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.clients__marquee::after {
  right: 0;
  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}

/* Sliders on RTL pages run on physical LTR coordinates (prevents rows from drifting off-screen) */
[dir="rtl"] .clients__marquee,
[dir="rtl"] .step-slider,
[dir="rtl"] .reviews__slider {
  direction: ltr;
}

/* Full-package band: position of the open/close icon (guards against padding overrides, and moves to the opposite side in RTL so it doesn't overlap the number) */
.fn-band--acc { padding-right: 56px; }
[dir="rtl"] .fn-band--acc { padding-right: 28px; padding-left: 56px; }
[dir="rtl"] .fn-band--acc::after { right: auto; left: 20px; }

/* RTL: mirror the position of the X icon / number in the anti-fraud feature (1-5) titles */
[dir="rtl"] .fn-item__title { padding-right: 0; padding-left: 80px; }
[dir="rtl"] .fn-item__title::after { right: auto; left: 0; }
[dir="rtl"] .fn-item__title .num { margin-right: 0; margin-left: 10px; }
@media (max-width: 700px) {
  [dir="rtl"] .fn-item__title { padding-left: 56px; }
}

/* RTL: the FACE BADGE diagram (STEP01-03 + verdict diagram) is pinned to
   the same LTR layout as the JP version, and the connector line between
   the certificate card and the verdict diagram is also shown as in the JP version */
[dir="rtl"] .fb-steps { direction: ltr; }
[dir="rtl"] .fb-steps > li { direction: rtl; }
[dir="rtl"] .fb-steps .step-text { text-align: right; }

/* RTL: allow wrapping so long titles don't overlap the X mark */
[dir="rtl"] .fn-item__title--nowrap { white-space: normal; }

/* RTL: the full-package 1-10 expanded content is pinned to the same layout
   as the JP version (description on the left / illustration on the right,
   with the illustration column order also matching the JP version) */
[dir="rtl"] .svc-feature:not(.svc-feature--stack) { flex-direction: row-reverse; }
[dir="rtl"] .svc-feature__image--row,
[dir="rtl"] .svc-feature__image--langs { direction: ltr; }

@media (max-width: 700px) {
  [dir="rtl"] .svc-feature:not(.svc-feature--stack) { flex-direction: column; }
}

/* ===== Full-package bands 4-7: reproducing the original design ===== */
/* Band 4: notice/ad-distribution composite illustration (2 screens + STEP circle + instructor) */
.svc-notice-illust { position: relative; width: 100%; max-width: 800px; aspect-ratio: 800 / 250; margin: 8px auto 0; direction: ltr; }
.svc-notice-illust img { position: absolute; height: auto; margin: 0; }
.svc-notice-illust .sn-s1 { left: 4%; top: 0; width: 33%; z-index: 1; }
.svc-notice-illust .sn-s2 { left: 30.5%; top: 30%; width: 33%; z-index: 2; }
.svc-notice-illust .sn-man { left: 71.5%; top: 16%; width: 28%; }
.svc-notice-illust .sn-step { position: absolute; z-index: 3; background: var(--color-yellow); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 700; color: var(--color-navy); padding: 1.6%; line-height: 1.35; }
.svc-notice-illust .sn-step small { font-size: 11px; letter-spacing: .06em; }
.svc-notice-illust .sn-step > span { font-size: 12px; }
.svc-notice-illust .sn-step1 { left: 0; top: 26%; width: 14.5%; aspect-ratio: 1 / 1; }
.svc-notice-illust .sn-step2 { left: 55.5%; top: -8%; width: 15%; aspect-ratio: 1 / 1; }

/* Band 5: overlay the speech text inside the balloon */
.svc-feature__image--langs { justify-content: center; gap: 14px; }
.svc-feature__image--langs span { position: relative; display: block; }
.svc-feature__image--langs .teacher { width: 176px; max-width: 100%; display: block; }
.svc-feature__image--langs .bubble { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

/* Band 6: Q/A mark */
.svc-qa { position: relative; display: inline-block; line-height: 0; max-width: 100%; padding-top: 12px; }
.svc-qa > img:first-child { max-height: 220px; max-width: 100%; width: auto; height: auto; display: block; }
.svc-qa .svc-qa__q { position: absolute; left: 36.5%; top: 0; width: 12%; max-height: none; }
.svc-qa .svc-qa__a { position: absolute; left: 45%; top: 14%; width: 17%; max-height: none; }

/* Band 7: center the illustration below the body text */
.svc-feature__image--center { justify-content: center; }
.svc-feature--stack .svc-feature__image { text-align: center; }

@media (max-width: 700px) {
  .svc-notice-illust { max-width: 420px; aspect-ratio: auto; height: auto; }
  .svc-notice-illust img, .svc-notice-illust .sn-step { position: static; width: 100%; }
  .svc-notice-illust .sn-step { width: 120px; aspect-ratio: 1 / 1; margin: 8px auto; }
  .svc-notice-illust .sn-s1, .svc-notice-illust .sn-s2, .svc-notice-illust .sn-man { width: 100%; margin-bottom: 8px; }
}

/* ============================================================
   Company history: description text for each item (added in the final version)
============================================================ */
.history__items li.history__desc {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.9;
  margin-top: 4px;
}