.jsFadeinFromBottom { opacity: 1 !important; transform: none !important; transition: none !important; }

/* =========================================================
   Promotool - COMPANY pages mockup
   Based on design comp (260326_会社案内.pdf)
   ========================================================= */

:root {
  /* Match the main promotool.jp site typography (e.g. /aroma_business/, /aroma_business/branding/):
     primary font is Yu Mincho (游明朝体), body text #444 at 16px/1.6,
     headings #2b3736 with slight letter-spacing, teal accent #55968f. */
  --color-accent: #55968f;          /* teal accent (subtitle, MORE button, CTA) */
  --color-accent-dark: #3f7d77;
  --color-logo: #b8125f;            /* PROMOTOOL logo pink */
  --color-text: #444444;            /* body copy */
  --color-heading: #2b3736;         /* H1/H2 and nav text */
  --color-text-light: #666666;
  --color-border: #dcdcdc;
  --color-bg: #ffffff;
  --color-bg-cream: #f2f1ee;
  --color-bg-light: #f9f7f3;
  --color-breadcrumb-bg: #f5f5f5;
  /* Primary: Yu Mincho (matches main promotool.jp stack). Fallback to Noto Serif JP
     (loaded as a web font in every HTML ) so devices without Yu Mincho still
     render in Mincho/Serif and never fall through to a gothic sans-serif. */
  --font-serif: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Noto Serif JP", "Noto Serif CJK JP", "MS P明朝", "MS PMincho", serif;
  --font-sans: var(--font-serif);   /* reference site uses the Mincho stack for nav/UI as well */
  --max-width: 1180px;
  --gutter: 24px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

a:hover {
  opacity: 0.7;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: static;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid #eee;
}

.site-header__inner {
  /* Reference /aroma_business/ header: full-width, 56px tall, logo flush at
     left 20px (196x38 SVG), contact button flush at right 20px, nav centered
     vertically with viewport-connected horizontal padding on each `<a>`.
     Header height = 9px + 38px logo + 9px = 56px (vertical padding 9px top/
     bottom; actual reference uses top=9/bottom=9 from body.height=56).
     No `gap` — the inter-element spacing comes entirely from the viewport-
     connected padding on `.site-header__nav a`. */
  max-width: none;
  margin: 0;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  /* Mirrors the reference `.header__wrap` which is also flex with
     justify-content: space-between and three children: header__left (logo),
     header__center (nav), header__right (contact). Inter-item spacing is
     created by space-between — no `gap`. */
  justify-content: space-between;
  gap: 0;
}

.site-header__logo {
  /* Uses the same SVG logo (assets/logo.svg, 196x38) as the reference
     /aroma_business/ header. The reference `<a>` has no padding/margin and
     sits flush at left: 20px. */
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 1;
}

.site-header__nav {
  /* Do NOT grow to fill available space. On /aroma_business/ the nav takes
     only its natural content width (~730px at 1280, ~1140px at 1920) and the
     parent `.site-header__inner` distributes the remaining space via
     `justify-content: space-between` so the nav sits in the middle-right of
     the header. Using flex: 1 here would stretch the nav to the full header
     width and push NEWS to the very left / ONLINE STORE to the very right,
     which is not how the reference header looks on wide monitors. */
  flex: 0 1 auto;
}

.site-header__nav ul {
  /* Cluster items to the right of the nav (same as the reference
     `.header__center.flex-end` which uses justify-content: flex-end).
     Do NOT use gap here — on the reference the inter-item spacing is created
     entirely by the horizontal padding on the `a` element (see below). */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.site-header__nav a {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--color-heading);
  display: block;
  /* Horizontal padding scales linearly with viewport, matching the reference
     /aroma_business/ header: 11.2px at 1280, 62.4px at 2560. This is what
     makes the nav grow proportionally with the viewport on wide monitors,
     so NEWS/ONLINE STORE track the edges of the centered card grid instead
     of clustering tightly in the middle. Formula: (100vw - 1000px) / 25. */
  padding: 8px max(0px, calc((100vw - 1000px) / 25));
}

.site-header__contact {
  /* Matches reference /aroma_business/ header contact button: ~139x36,
     padding 5px 10px, font-size 16px. */
  background: var(--color-accent);
  color: #fff;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 2px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.site-header__contact::before {
  content: "2709";
  margin-right: 6px;
}

/* =========================================================
   Breadcrumb
   ========================================================= */
.breadcrumb {
  background: var(--color-breadcrumb-bg);
  font-size: 12px;
  color: var(--color-text-light);
  padding: 10px 0;
  letter-spacing: normal;
}

.breadcrumb__inner {
  /* Reference `/aroma_business/` breadcrumb lives inside `<div class="container">`
     which is 1000px wide and horizontally centered (margin auto). At viewport
     1280/1920/2560 the breadcrumb text thus starts at left=133/453/773 — the
     same alignment as the h2 title and card grid. */
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

.breadcrumb a {
  color: var(--color-text-light);
}

.breadcrumb .sep {
  margin: 0 8px;
}

/* =========================================================
   Page titles
   ========================================================= */
.page-title {
  text-align: center;
  padding: 56px var(--gutter) 16px;
}

.page-title__ja {
  font-family: var(--font-serif);
  font-size: 24px;
  letter-spacing: 2px;
  margin: 0 0 10px;
  font-weight: 500;
  color: var(--color-heading);
  line-height: 1.4;
}

.page-title__en {
  /* Matches the inner <span> on https://www.promotool.jp/aroma_business/ h2:
     `<h2>サービス内容<span>SERVICE</span></h2>` — 14px / letter-spacing 1px
     / weight 500 / teal / block, with NO decorative horizontal lines. */
  font-family: var(--font-serif);
  color: var(--color-accent);
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 500;
  margin: 0;
  display: block;
}

/* =========================================================
   COMPANY menu page — 3 cards
   ========================================================= */
/* Card grid width matches the h2 title width on /aroma_business/
   (exactly 1000px at viewport 1280). 3 x 300px cards with 36px gaps =
   972px total sits inside a 1000px max-width, matching the reference. */
/* Pixel-matched to the 3-card service row on /aroma_business/ (.flex-between
   container, 1000px wide, 3 cards of 323px each, flex justify-content:
   space-between). Inside each card:
     - image  : 300×160 (aspect 15:8), centered with ~11.5px side padding
     - h4     : 18px / 400 / #444 / margin 30px 0 10px / text-align center
     - MORE   : ~284×52, 1px solid #55968f, 18px, padding 10px 0, margin
                0 ~19.5px to inset from the 300px image column edges. */
.company-menu {
  max-width: 1000px;
  margin: 0 auto;
  padding: 48px 0 96px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0;
}

.company-menu__item {
  display: block;
  color: inherit;
  text-align: center;
  width: 323px;
  padding: 0 11.5px;
  box-sizing: border-box;
}

.company-menu__thumb {
  width: 300px;
  aspect-ratio: 15 / 8;
  background: #e9e4dc;
  background-size: cover;
  background-position: center;
  margin: 0 auto;
}

.company-menu__thumb--1 {
  background-image: url('https://www.promotool.jp/wp-content/uploads/menu_our_roots.jpg');
}

.company-menu__thumb--2 {
  background-image: url('https://www.promotool.jp/wp-content/uploads/menu_vision_team.png');
}

.company-menu__thumb--3 {
  background-image: url('https://www.promotool.jp/wp-content/uploads/menu_corporate_profile.jpg');
}

.company-menu__title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  margin: 30px 0 6px;
  letter-spacing: normal;
  color: var(--color-text);
  text-align: center;
}

.company-menu__title-en {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--color-accent);
  text-align: center;
  margin: 0 0 14px;
}

.company-menu__btn {
  /* Match reference MORE button: ~284×52 inset from the 300px image column
     by ~8px each side (ref margin is 0 19.5px inside the 323 card; image
     padding is 11.5px so effective inset from image edge is 8px). */
  display: block;
  box-sizing: border-box;
  margin: 0 8px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  padding: 10px 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 3px;
  text-align: center;
  position: relative;
  font-family: var(--font-serif);
}

.company-menu__btn::after {
  /* Match /aroma_business/ .btn-more which uses FontAwesome fa-chevron-right
     (content "f054") — a thick, V-shaped chevron. Re-create with a CSS arrow
     (rotated 45deg borders) so we don't need to load FontAwesome. */
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 10px;
  vertical-align: 2px;
}

.company-menu__btn:hover {
  background: var(--color-accent);
  color: #fff;
  opacity: 1;
}


  .company-menu__item {
    width: 100%;
    max-width: 323px;
  }
  .company-menu__thumb {
    width: 100%;
    max-width: 300px;
  }
}

/* =========================================================
   Shared content container
   ========================================================= */
.content {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
}

.content p {
  margin: 0 0 1.2em;
}

/* =========================================================
   OUR ROOTS (founding story)
   ========================================================= */
.roots-lead {
  text-align: center;
  padding: 8px 24px 16px;
  font-family: var(--font-serif);
}

.roots-lead__headline {
  font-size: 24px;
  line-height: 1.6;
  margin: 10px 0 28px !important;
  letter-spacing: 2px;
  font-weight: 500;
  color: var(--color-heading);
}

.roots-lead__text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  letter-spacing: normal;
  margin: 0 auto;
  max-width: 720px;
}

/* Episode layout mirrors the 「プロモツールが選ばれる理由」 section on
   /aroma_business/branding/: a 1000px container with a text column flexing
   to fill the remaining space and a 450×282 landscape image on the other
   side (alternating left/right). Reference aspect ratio is 450/282 ≈ 1.595
   (natural image 1180×740).
   NOTE: `.episode` uses its own full 1000px width and MUST NOT be nested
   inside `.content` (which caps width at 880px), otherwise the text column
   is crushed and butts up against the image. On our-roots.html the four
   `<article class="episode">` elements are placed directly under `<main>`. */
.episode {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 450px;
  column-gap: 60px;
  row-gap: 0;
  align-items: start;
  box-sizing: border-box;
}

.episode--top &gt; .episode__label {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: start;
}

.episode--top &gt; .episode__title-text {
  grid-column: 1 / -1;
  grid-row: 2;
}

.episode--top &gt; .episode__body {
  grid-column: 1 / 2;
  grid-row: 3;
}

.episode--top &gt; .episode__figure {
  grid-column: 2 / 3;
  grid-row: 3;
}

.episode--top.episode--reverse &gt; .episode__label {
  grid-column: 2 / 3;
  justify-self: start;
}

.episode--top.episode--reverse &gt; .episode__title-text {
  grid-column: 2 / 3;
  text-align: left;
}

.episode--top.episode--reverse &gt; .episode__body {
  grid-column: 2 / 3;
  grid-row: 3;
}

.episode--top.episode--reverse &gt; .episode__figure {
  grid-column: 1 / 2;
  grid-row: 3;
}

.episode--reverse {
  grid-template-columns: 450px 1fr;
}

.episode--flow {
  display: block;
  overflow: hidden;
}

.episode__figure--float {
  float: right;
  width: 450px;
  margin: 0 0 24px 60px;
  aspect-ratio: 450 / 282;
}

.episode--flow &gt; p:not(.episode__meta) + .episode__meta {
  border-top: 1px solid var(--color-border);
  padding-top: 18px;
  margin-top: 22px;
}

.episode__closing {
  grid-column: 1 / -1;
  margin-top: 22px;
}

.episode__meta-section {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-border);
  padding-top: 18px;
  margin-top: 22px;
}

.episode__meta-section .episode__meta {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
}

.episode--reverse .episode__body {
  order: 2;
}

.episode__label {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 12px;
  letter-spacing: normal;
  color: #ffffff;
  background: #2b2b2b;
  padding: 6px 20px;
  display: inline-block;
}

.episode__title-text {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 16px;
  letter-spacing: normal;
  color: var(--color-heading);
}

.episode__detail-link {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--color-heading);
}

.episode__detail-link a {
  color: inherit;
}

.episode__subtitle {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--color-heading);
}

.episode__figure {
  /* Landscape frame matching the reference image (450×282). When a real image
     is present it fills the frame; the text-only placeholder variant keeps
     its centered fallback styling for backward compatibility. */
  width: 450px;
  aspect-ratio: 450 / 282;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-light);
  font-size: 13px;
  line-height: 1.6;
  background: var(--color-bg-light);
  box-sizing: border-box;
}

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

.episode__figure--logo {
  background: #ffffff;
  width: 450px;
  aspect-ratio: 450 / 282;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  box-sizing: border-box;
}

.episode__figure--logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.episode__logo-koudou {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
  margin: 8px 0 0;
  color: #2b2b2b;
}

.episode__subtitle {
  /* Subtitle in quotes under the Episode title, per PDF design. */
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-heading);
  margin: -12px 0 18px;
  line-height: 1.6;
  letter-spacing: 1px;
}

.episode__meta {
  /* Date list under the body paragraph, per PDF design. */
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
  font-feature-settings: "palt";
}

/* Thin divider only between the body paragraph and the first year row.
   Applies when a non-.episode__meta <p> is followed by .episode__meta;
   consecutive .episode__meta + .episode__meta won't match, so subsequent
   year rows stay clean (separated by spacing only). */
.episode__body &gt; p:not(.episode__meta) + .episode__meta {
  border-top: 1px solid var(--color-border);
  padding-top: 18px;
  margin-top: 22px;
}

.episode__body p:not(.episode__label) {
  /* Match reference body paragraph (16px / 400 / #444 / line-height 1.6). */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 1.2em;
}

.episode__meta {
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-text-light);
}

/* Wrap layout: single-column flow with image between text blocks */
.episode--wrap {
  display: block;
  max-width: 1000px;
  margin: 80px auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.episode--wrap .episode__figure--inline {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 450 / 282;
  margin: 24px auto;
}

@media (max-width: 768px) {
  .episode,
  .episode--reverse {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 40px 0;
  }
  .episode--reverse .episode__body {
    order: 0;
  }
  .episode__figure {
    width: 100%;
    aspect-ratio: 450 / 282;
  }
  .episode--flow {
    overflow: visible;
  }
  .episode__figure--float {
    float: none;
    width: 100%;
    margin: 0 0 24px 0;
  }
}

/* =========================================================
   HISTORY (年表)
   User requested removal of the circle-dot markers on the timeline; without
   the dots the vertical connector line looked like a stray stroke with no
   purpose, so it is also removed. The `.history__dot` column in each row is
   collapsed to 0 width so any existing markup keeps rendering correctly but
   takes no visual space.
   ========================================================= */
.history {
  /* padding-bottom is tightened here because a .chairman section now sits
     between .history and .contact; the chairman block itself provides the
     larger bottom spacing before the CONTACT block. */
  max-width: 880px;
  margin: 32px auto 0;
  padding: 56px var(--gutter) 32px;
}

.history__title {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 24px;
  margin: 0 0 8px;
  letter-spacing: 2px;
  font-weight: 500;
  color: var(--color-heading);
}

.history__subtitle {
  text-align: center;
  color: var(--color-accent);
  font-size: 13px;
  letter-spacing: 3px;
  margin: 0 0 40px;
  font-weight: 700;
  font-family: var(--font-serif);
}

.history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.history__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0;
  align-items: start;
  padding: 14px 0;
  position: relative;
}

.history__year {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding-right: 24px;
  text-align: right;
  color: var(--color-heading);
}

/* Hidden but kept in the markup so existing HTML does not need to be
   rewritten in the Sanity import / WordPress port later. */
.history__dot {
  display: none;
}

.history__body {
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  border-left: 1px solid var(--color-border);
}

.history__body strong {
  font-weight: 700;
}

@media (max-width: 768px) {
  .history {
    padding-bottom: 64px;
  }
  .history__item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }
  .history__year {
    text-align: left;
    padding: 0;
  }
  .history__body {
    padding-left: 0;
    border-left: none;
  }
}

/* =========================================================
   CHAIRMAN MESSAGE (our-roots.html)
   ========================================================= */
.chairman {
  display: block;
  max-width: 1000px;
  margin: 80px auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
  overflow: hidden;
}

.chairman__body {
}

.chairman__figure {
  float: right;
  width: 380px;
  margin: 0 0 20px 40px;
  position: static;
}

.chairman__figure img {
  width: 100%;
  height: auto;
  display: block;
}

.chairman__title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  text-align: left;
  margin: 0 0 4px;
  letter-spacing: 2px;
  color: var(--color-heading);
}

.chairman__en {
  text-align: left;
  color: var(--color-accent);
  font-size: 13px;
  letter-spacing: 3px;
  margin: 0 0 40px;
  font-weight: 700;
  font-family: var(--font-serif);
}

.chairman__role {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 2.2;
  text-align: right;
  margin: 32px 0 8px;
  color: var(--color-heading);
}

.chairman__name-line {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  text-align: right;
  margin: 16px 0 8px;
  color: var(--color-heading);
}
.chairman__name-real {
  font-size: 13px;
  font-weight: 400;
}
.chairman__name-img {
  display: block;
  margin-left: auto;
  margin-bottom: 4px;
}

.chairman__signature {
  text-align: right;
  margin: 8px 0 0;
}

.chairman__signature img {
  height: 60px;
  width: auto;
}

@media (max-width: 768px) {
  .chairman {
    margin: 40px 0;
  }
  .chairman__figure {
    float: none;
    width: 100%;
    margin: 0 0 24px 0;
  }
}

/* =========================================================
   VISION &amp; TEAM
   ========================================================= */
.section-heading {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  margin: 80px 0 24px;
  padding-bottom: 0;
  border-bottom: none;
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--color-heading);
}

/* English-label variant (matches /about/ .about24__h2.-en — serif 2em) */
.section-heading--en {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ----- Scroll-triggered fade-in-from-bottom (matches live site's
   .jsFadeinFromBottom). Elements start below their natural position and
   fade up when they scroll into view. ----- */
.jsFadeinFromBottom {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
  .jsFadeinFromBottom {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.section-heading--center {
  text-align: center;
  border-bottom: none;
  margin-top: 64px;
}

.vision-intro {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.6;
  text-align: left;
  margin: 20px 0 32px;
  letter-spacing: 0.05em;
  color: var(--color-heading);
  font-weight: 700;
}

.signature {
  text-align: right;
  margin-top: 32px;
  font-size: 14px;
  line-height: 1.8;
}

.vision-quote {
  text-align: left;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.8;
  margin: 24px 0 40px;
  letter-spacing: 0.05em;
  color: var(--color-heading);
  font-weight: 700;
}

/* ----- バリュー: left values list + right circle diagram (matches
   /about/ .value24__grid + .circle24). Color theme swapped from the live
   site's magenta to the site-wide teal accent. ----- */
.value24__grid {
  display: flex;
  align-items: flex-start;
  gap: 5%;
  margin: 24px 0 40px;
}

.value24__left {
  flex: 0 0 55%;
}

.value24__right {
  flex: 0 0 40%;
  margin-top: 2em;
  display: flex;
  justify-content: center;
}

.value24__h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 2em 0 0.4em;
  letter-spacing: 0.05em;
  color: var(--color-heading);
}

.value24__h3 .-en {
  font-family: var(--font-serif);
  margin-right: 0.25em;
}

.value24__desc {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  color: var(--color-text);
}

.circle24 {
  color: var(--color-accent);
  position: relative;
  font-size: 14px;
}

.circle24__lg {
  position: relative;
  margin: 0 auto;
  border: solid 0.25em var(--color-accent);
  border-radius: 50%;
  width: 18.75em;
  height: 18.75em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle24__sm {
  position: absolute;
}

.circle24__sm.-c1 {
  top: -5em;
  left: 50%;
  transform: translateX(-50%);
}

.circle24__sm.-c1:before {
  left: 50%;
  bottom: -1.25em;
  transform: translateX(-50%) rotate(90deg);
}

.circle24__sm.-c2 {
  top: 16.25em;
  left: -4.5em;
}

.circle24__sm.-c2:before {
  right: -2.8em;
  top: -0.1em;
  transform: rotate(315deg);
  width: 2.5em;
}

.circle24__sm.-c3 {
  top: 16.25em;
  right: -3em;
}

.circle24__sm.-c3:before {
  left: -3.3em;
  top: -0.4em;
  transform: rotate(45deg);
  width: 2.5em;
}

.circle24__sm:before {
  position: absolute;
  content: '';
  display: block;
  width: 1.875em;
  height: 0.25em;
  background-color: var(--color-accent);
}

.circle24__txt {
  text-align: center;
  line-height: 1.3;
  margin: 0;
  font-size: 1.5em;
}

.circle24__txt.-lg {
  font-weight: 700;
  font-size: 1.75em;
  /* Nudge down so the Japanese text sits at the optical center of the
     big circle (flex centering puts the box centered, but multi-line
     Japanese text's visual mass sits slightly above the box's center). */
  transform: translateY(0.9em);
}

.circle24__txt.-en {
  font-family: var(--font-serif);
}

.team {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0 48px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.team__photo {
  aspect-ratio: 1;
  background: #e9e4dc;
  border-radius: 50%;
  overflow: hidden;
}

.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.team__photo--inoue img {
  width: auto;
  height: 280px;
  max-width: none;
  object-fit: fill;
  margin-left: -84%;
  filter: grayscale(0.8) brightness(1.1);
}

.team__role {
  font-size: 16px;
  color: var(--color-text);
  margin: 0 0 4px;
  letter-spacing: normal;
}

.team__name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: normal;
  color: var(--color-text);
}

.team__bio {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 768px) {
  .values {
    grid-template-columns: 1fr;
  }
  .team {
    grid-template-columns: 140px 1fr;
    gap: 0 24px;
  }
}

/* =========================================================
   CORPORATE PROFILE
   ========================================================= */
.profile-block {
  background: #ffffff;
  padding: 56px var(--gutter);
  margin-bottom: 32px;
}

.profile-block__inner {
  max-width: 880px;
  margin: 0 auto;
}

.profile-block__title {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 32px;
  padding-bottom: 18px;
}

.profile-block__title::after {
  content: "";
  display: block;
  width: 82px;
  height: 1px;
  background-color: #959595;
  margin: 14px auto 0;
  letter-spacing: 2px;
  color: var(--color-heading);
}

.profile-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

.profile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.profile-table th,
.profile-table td {
  padding: 14px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e5ddcd;
  line-height: 1.8;
}

.profile-table th {
  width: 130px;
  font-weight: 700;
  color: var(--color-heading);
  white-space: nowrap;
  letter-spacing: normal;
}

.profile-map {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 110px;
}

.profile-map__iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  display: block;
}

.profile-map__link {
  text-align: right;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
}

.profile-map__link::before {
  content: "1F4CD";
  margin-right: 4px;
}

@media (max-width: 768px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
  .profile-table th {
    width: 100px;
  }
}

/* =========================================================
   Contact section
   ========================================================= */
.contact {
  background: var(--color-bg-cream);
  padding: 48px var(--gutter);
  text-align: center;
}

.contact__label-ja {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 6px;
  letter-spacing: 2px;
  color: var(--color-heading);
}

.contact__label-en {
  color: var(--color-accent);
  font-size: 13px;
  letter-spacing: 3px;
  margin: 0 0 18px;
  font-weight: 700;
  font-family: var(--font-serif);
}

.contact__text {
  font-size: 14px;
  margin: 0 0 20px;
}

.contact__tel {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: 1px;
  color: var(--color-heading);
}

.contact__tel::before {
  content: "260E";
  color: var(--color-accent);
  margin-right: 8px;
}

.contact__hours {
  font-size: 12px;
  color: var(--color-text-light);
  margin: 0 0 20px;
}

.contact__btn {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: 14px 40px;
  font-size: 14px;
  letter-spacing: 3px;
  font-weight: 700;
  border-radius: 2px;
  font-family: var(--font-serif);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: #2b2b2b;
  color: #ccc;
  padding: 24px var(--gutter);
  text-align: center;
  font-size: 12px;
  letter-spacing: normal;
  font-family: var(--font-serif);
}

@media (max-width:768px){
  .episode,.episode--reverse{grid-template-columns:1fr !important;gap:16px !important;margin:40px 0 !important;}
  .episode--top &gt; .episode__label,
  .episode--top &gt; .episode__title-text,
  .episode--top &gt; .episode__body,
  .episode--top &gt; .episode__figure,
  .episode--top.episode--reverse &gt; .episode__label,
  .episode--top.episode--reverse &gt; .episode__title-text,
  .episode--top.episode--reverse &gt; .episode__body,
  .episode--top.episode--reverse &gt; .episode__figure{grid-column:1/-1 !important;grid-row:auto !important;justify-self:start !important;text-align:left !important;}
  .episode--top &gt; .episode__label,.episode--top.episode--reverse &gt; .episode__label{order:1 !important;}
  .episode--top &gt; .episode__title-text,.episode--top.episode--reverse &gt; .episode__title-text{order:2 !important;}
  .episode--top &gt; .episode__figure,.episode--top.episode--reverse &gt; .episode__figure{order:3 !important;}
  .episode--top &gt; .episode__body,.episode--top.episode--reverse &gt; .episode__body{order:4 !important;}
  .episode__closing,.episode__meta-section{order:5 !important;}
  .episode--reverse .episode__body{order:4 !important;}
  .episode__figure{width:100% !important;aspect-ratio:450/282;}
  .episode__figure--logo{aspect-ratio:450/282 !important;height:auto !important;width:100% !important;}
  .episode--flow{overflow:visible !important;}
  .episode__figure--float{float:none !important;width:100% !important;margin:0 0 24px 0 !important;}
  .chairman--flow{padding-bottom:64px;}
  .chairman__figure--float{float:none;width:100%;margin:0 0 24px 0;}
}