/* ============================================================
   つたわるマンガ LP
   Design tokens (from Figma) — 1231px wide layout
   ============================================================ */
:root {
  --black: #242327;
  --accent: #e5004f;
  --white: #ffffff;
  --yellow: #f3e904;
  --font: "Noto Sans JP", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  /* base design is laid out at 1231px width; responsive rules at the
     bottom of this file restructure layout below 1040px */
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.icon-chevron {
  width: 17.25px;
  height: 17.25px;
  flex-shrink: 0;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10.06px 9.34px 10.06px 30.9px;
  background: var(--white);
  border-bottom: 2.5px solid var(--black);
}

/* anchored sections stop below the sticky header when jumped to */
[id] {
  scroll-margin-top: 60px;
}

.header__logo {
  display: block;
  width: 177.49px;
  height: 28.79px;
}

.header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 21.56px;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 21.56px;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

.header__nav a {
  transition: color 0.15s ease;
}

.header__nav a:hover {
  color: var(--accent);
}

.header__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7.19px;
  width: 166px;
  padding: 7.9px 2.16px 7.9px 17.25px;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.header__cta .icon-chevron {
  width: 17.25px;
  height: 17.25px;
}

.header__cta:hover {
  opacity: 0.85;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: var(--yellow);
  /* bottom line is owned by the next section (.logo-scroll) so the
     manga / badge can tuck UNDER the line instead of crossing over it */
  padding: 12px 7.9px 34px;
  overflow: visible;
}

.hero__box {
  position: relative;
  width: 975.14px;
  height: 381.58px;
  margin: 0 auto;
}

/* ---- left copy ---- */
.hero__left {
  position: absolute;
  left: 16.53px;
  top: 46.71px;
  width: 497px;
  display: flex;
  flex-direction: column;
  gap: 22.99px;
}

.hero__textgroup {
  display: flex;
  flex-direction: column;
  gap: 28.74px;
}

.hero__heading {
  display: flex;
  flex-direction: column;
  gap: 15.81px;
  font-weight: 900;
  /* 375px〜1231pxの間で26px〜41pxへ線形にスケール（デザイン基準幅1231px）。
     line-heightも同様に補間し、1231pxでは元のタイトな行送り(37px)、
     375pxではモバイルで読みやすいよう少し広めの行送りにする。 */
  font-size: clamp(26px, 19.429px + 1.7523vw, 41px);
  line-height: clamp(33.28px, 31.65px + 0.4346vw, 37px);
  letter-spacing: -0.29px;
}

/* two explicit lines — keep each on a single line */
.hero__heading span {
  white-space: nowrap;
}

.hero__lead {
  font-weight: 700;
  font-size: 15px;
  line-height: 24px;
}

/* ---- buttons ---- */
.hero__buttons {
  display: flex;
  gap: 11.5px;
}

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 237px;
  padding: 14.37px 11.5px;
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s ease;
  /* allow <button> elements to look identical to <a> buttons */
  font-family: inherit;
  border: none;
  cursor: pointer;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 0 var(--black);
}

/* text is centered, but the right-anchored chevron makes it read right-heavy,
   so nudge the label left to visually balance against the icon */
.btn span {
  transform: translateX(-10px);
}

.btn .icon-chevron {
  position: absolute;
  right: 8.62px;
}

.btn--accent {
  background: var(--accent);
  color: var(--white);
}

.btn--outline {
  background: var(--white);
  color: var(--black);
  border: 2.5px solid var(--black);
}

/* ---- notes row ---- */
.hero__notes {
  display: flex;
  gap: 21.56px;
  align-items: center;
  padding-top: 10.42px;
  border-top: 1.5px dashed var(--black);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.hero__notes li {
  display: flex;
  align-items: center;
  gap: 5.75px;
}

.check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15.81px;
  height: 15.81px;
  background: var(--black);
  border-radius: 50%;
  flex-shrink: 0;
}

.check svg {
  width: 11.5px;
  height: 11.5px;
}

/* ---- manga + badge ---- */
.hero__manga {
  position: absolute;
  left: 495.39px;
  top: 5.75px;
  width: 496.55px;
  height: 430.91px;
}

.hero__manga-img {
  position: absolute;
  left: 39.96px;
  top: 0;
  width: 456.59px;
  height: auto;
}

.hero__badge {
  position: absolute;
  left: 0;
  top: 251.6px;
  width: 206.8px;
  height: 151.71px;
  transform: rotate(-8.09deg);
}

.hero__badge-star {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__badge-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--white);
  text-align: center;
}

.hero__badge-sub {
  font-weight: 800;
  font-size: 15px;
  line-height: 17px;
}

.hero__badge-main {
  font-weight: 800;
  font-size: 18px;
  line-height: 24px;
}

/* ============================================================
   LOGO SCROLL
   (sits ON TOP of the hero: its black top-line and white background
    cover the manga / badge that overflow from the hero above)
   ============================================================ */
.logo-scroll {
  position: relative;
  z-index: 1;
  height: 92.95px;
  background: var(--white);
  border-top: 2.5px solid var(--black);
  border-bottom: 2.5px solid var(--black);
  overflow: hidden;
}

.logo-scroll__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: marquee 30s linear infinite;
}

/* all logos share a 252px-tall source canvas, so a single display height
   keeps them visually balanced. uniform right-margin = even spacing and a
   seamless -50% loop. */
.logo-scroll__track img {
  height: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 44px;
}

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

.logo-scroll:hover .logo-scroll__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .logo-scroll__track { animation: none; }
}

/* ============================================================
   PROBLEMS
   ============================================================ */
.problems {
  background: #f5f5f5;
  padding: 60px 80px;
}

.problems__inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
}

/* section badge (shared utility) */
.section-badge {
  align-self: flex-start; /* hug content, don't stretch to column width */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4.31px 12.94px;
  background: var(--black);
  color: #f5f5f5;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.problems__left {
  display: flex;
  flex-direction: column;
  gap: 28.74px;
  width: 336px;
  flex-shrink: 0;
  min-width: 0;
}

.problems__heading {
  font-weight: 900;
  font-size: clamp(22px, 18.495px + 0.9346vw, 30px);
  line-height: 1.3;
  color: var(--black);
  text-wrap: balance; /* 自動改行時（モバイルでbrを無効化した時など）に孤立文字を防ぐ */
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-width: 0;
}

.problems__heading .accent {
  color: #ec1e79;
}

.problems__list {
  display: flex;
  flex-direction: column;
  gap: 22.99px;
  width: 464px;
  flex-shrink: 0;
  padding-top: 4px; /* optical align with badge */
}

.problems__item {
  display: flex;
  align-items: center;
  gap: 7.91px;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: var(--black);
  white-space: nowrap;
}

.check-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24.43px;
  height: 24.43px;
  background: var(--white);
  border: 2.5px solid var(--accent);
  flex-shrink: 0;
}

.check-box img {
  width: 18.68px;
  height: 18.68px;
}

/* ============================================================
   SOLUTION
   ============================================================ */
.solution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34.49px;
  padding: 60px 80px;
  background: var(--white);
  border-top: 2.5px solid var(--black);
  border-bottom: 2.5px solid var(--black);
}

/* ---- title (arrows + text + logo) ----
   デザイン基準は1231px幅。各サイズは "1231pxで元の値に達する" 係数の
   vwを使ったclamp()にして、画面幅に応じて連続的にスケールさせる
   （固定pxをブレークポイントごとに切り替えると境界でサイズがジャンプするため）。
   最小値は375px幅でも矢印+テキスト+ロゴの合計が収まるよう逆算している。 */
.solution__title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* 万一計算が外れても矢印が折り返すだけで横スクロールにはならない安全網 */
  row-gap: 6px;
  gap: clamp(6px, 1.759px + 1.1308vw, 15.68px);
}

.solution__arrow {
  width: clamp(23px, 10.440px + 3.3493vw, 51.67px);
  height: clamp(17px, 7.625px + 2.5vw, 38.4px);
  flex-shrink: 0;
}

.solution__title-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  font-weight: 900;
  font-size: clamp(14.5px, 9.9px + 1.2266vw, 25px);
  line-height: 1.6;
}

.solution__title-logo {
  display: inline-block;
  height: clamp(18px, 12.743px + 1.4019vw, 30px);
  width: auto;
  margin: 0 4px;
  vertical-align: middle;
}

/* ---- body (two columns) ----
   Gridで「見出し+リード」「カード」「CTAボタン」の3領域を配置する。
   デスクトップは見出しの下にボタンが来る2x2配置、
   モバイル(900px以下)は「見出し→カード→ボタン」の縦積みに切り替える
   （CTAをセクション最下部に置きたいため、DOM順ではなくgrid-template-areasで並べ替える）。 */
.solution__body {
  display: flex;
  align-items: flex-start;
  column-gap: 32px;
}

.solution__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17.25px;
  width: 340px;
  flex-shrink: 0;
  min-width: 0;
}

.solution__heading {
  font-weight: 900;
  font-size: clamp(22px, 18.495px + 0.9346vw, 30px);
  line-height: 1.3;
  color: var(--black);
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-width: 0;
}

.solution__lead {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: var(--black);
}

/* ---- right cards ---- */
.solution__cards {
  display: flex;
  flex-direction: column;
  gap: 22.99px;
  width: 468px;
  flex-shrink: 0;
}

.solution__card {
  display: flex;
  flex-direction: column;
  gap: 11.5px;
  padding: 14.37px 20.84px;
  background: var(--white);
  border: 2.5px solid var(--black);
  box-shadow: 0 5px 0 0 var(--black);
}

.solution__card-title {
  font-weight: 900;
  font-size: clamp(16px, 13.810px + 0.5841vw, 21px);
  line-height: clamp(24.5px, 20.776px + 0.9930vw, 33px);
  color: var(--black);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.solution__card-text {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: var(--black);
}

.solution__card-img {
  width: 100%;
  padding: 1.44px;
  border: 2.5px solid var(--black);
  background: var(--white);
}

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

/* ============================================================
   COMPARE
   ============================================================ */
.compare {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 80px;
  background: var(--yellow);
  border-bottom: 2.5px solid var(--black);
}

/* Flexboxで「表」「見出し+リード+CTAボタン」の2カラムを配置する。
   モバイル(900px以下)は「見出し→表→ボタン」の縦積みに切り替える。 */
.compare__inner {
  display: flex;
  align-items: flex-start;
  column-gap: 32px;
}

/* ---- comparison table ---- */
.compare__left {
  display: flex;
  flex-direction: column;
  gap: 17.25px;
  width: 468px;
  flex-shrink: 0;
  min-width: 0;
}

.compare-table {
  border-collapse: collapse;
  background: var(--white);
  border: 2.5px solid var(--black);
  box-shadow: 0 5px 0 0 var(--black);
  font-weight: 700;
  font-size: clamp(13px, 10.810px + 0.5841vw, 18px);
  line-height: clamp(20px, 16.933px + 0.8178vw, 27px);
}

/* column widths (from Figma) */
.compare-table th:nth-child(1),
.compare-table td:nth-child(1) { width: 138px; }
.compare-table th:nth-child(2),
.compare-table td:nth-child(2) { width: 162px; }
.compare-table th:nth-child(3),
.compare-table td:nth-child(3) { width: 168px; }

/* header row */
.compare-table thead th {
  height: 43.12px;
  background: var(--black);
  color: var(--white);
  text-align: center;
  font-weight: 700;
}

.compare-table thead th.is-accent {
  background: var(--accent);
}

/* body cells */
.compare-table tbody th,
.compare-table tbody td {
  height: 57.49px;
  font-weight: 700;
}

/* row header (項目 column) */
.compare-table tbody th {
  background: #f5f5f5;
  color: var(--black);
  text-align: left;
  padding: 0 17.25px;
  border-right: 1.5px solid #dbdbdb;
}

/* 一般的な制作会社 column */
.compare-table td.col-general {
  text-align: center;
  color: #666;
}

/* つたわるマンガ column */
.compare-table td.col-ours {
  text-align: center;
  color: var(--accent);
  background: #fff9fb;
  border-left: 2.5px solid var(--accent);
}

/* horizontal dividers (not on the last row) */
.compare-table tbody tr:not(:last-child) th,
.compare-table tbody tr:not(:last-child) td.col-general {
  border-bottom: 1.5px solid #dbdbdb;
}
.compare-table tbody tr:not(:last-child) td.col-ours {
  border-bottom: 1.5px solid var(--accent);
}

.compare__note {
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: var(--black);
  text-align: right;
}

/* ---- right copy ---- */
.compare__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17.25px;
  width: 340px;
  flex-shrink: 0;
  min-width: 0;
}

/* STRONG POINTS badge — yellow lettering */
.compare__right .section-badge {
  color: var(--yellow);
}

.compare__heading {
  font-weight: 900;
  font-size: clamp(22px, 18.495px + 0.9346vw, 30px);
  line-height: 1.3;
  color: var(--black);
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-width: 0;
}

.compare__heading .accent {
  color: var(--accent);
}

.compare__lead {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: var(--black);
}

/* ============================================================
   CASES
   ============================================================ */
.cases {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 80px;
  background: #f5f5f5;
  border-bottom: 2.5px solid var(--black);
}

.cases__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30.18px;
}

/* ---- heading ---- */
.cases__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14.37px;
  width: 760px;
  min-width: 0;
}

/* badge is centered in this section (override the default flex-start) */
.cases__head .section-badge {
  align-self: center;
}

.cases__heading {
  font-weight: 900;
  font-size: clamp(22px, 18.495px + 0.9346vw, 30px);
  line-height: 1.3;
  color: var(--black);
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-width: 0;
}

.cases__lead {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: var(--black);
  text-align: center;
}

/* ---- cards row ---- */
.cases__grid {
  display: flex;
  gap: 15px;
  align-items: stretch;
}

.case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 270px;
  padding: 0 0 18px;
  background: var(--white);
  border: 2.5px solid var(--black);
  box-shadow: 0 5px 0 0 var(--black);
  overflow: hidden;
}

/* ---- card image ---- */
.case__img {
  position: relative;
  width: 100%;
  aspect-ratio: 418 / 261.25;
  border-bottom: 2.5px solid var(--black);
  overflow: hidden;
}

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

.case__num {
  position: absolute;
  left: 0;
  top: 0;
  padding: 4.31px 7.19px;
  background: var(--black);
  color: var(--white);
  font-weight: 900;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.46px;
}

/* ---- card body ---- */
.case__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10.78px;
  width: 233px;
  height: 100%; /* .cases__grid の align-items:stretch で揃った .case の高さいっぱいに広げる */
}

.case__title {
  width: 100%;
  padding-bottom: 8.9px;
  border-bottom: 2.5px solid var(--black);
  font-weight: 900;
  font-size: 15px;
  line-height: 20px;
  color: var(--black);
}

.case__row {
  display: flex;
  gap: 6.47px;
  align-items: flex-start;
  width: 100%;
}

.case__tag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  color: var(--white);
  font-weight: 900;
  font-size: 11px;
  line-height: 14px;
}

.case__tag--before {
  background: var(--black);
}

.case__tag--after {
  background: var(--accent);
}

.case__text {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: var(--black);
}

/* ---- 活用箇所 ---- */
.case__use {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  width: 100%;
  padding: 8.9px 10.18px;
  background: #f5f5f5;
}

.case__use-label {
  font-weight: 900;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.97px;
  color: #a5a5a5;
}

.case__use-value {
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: var(--black);
}

/* ---- card CTA ---- */
.case__cta {
  width: 100%;
  margin-top: auto; /* コンテンツ量が違ってもボタンをカード下端に揃える */
}

/* ============================================================
   STYLES
   ============================================================ */
.styles {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 80px;
  background: var(--white);
  border-bottom: 2.5px solid var(--black);
}

/* Gridで「絵柄サンプル」「見出し+リード」「CTAボタン」の3領域を配置する。
   デスクトップは見出しの下にボタンが来る2x2配置、
   モバイル(900px以下)は「見出し→サンプル→ボタン」の縦積みに切り替える。 */
.styles__inner {
  display: flex;
  align-items: flex-start;
  column-gap: 32px;
}

/* ---- left: style sample cards ---- */
.styles__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 20px;
  width: 468px;
  flex-shrink: 0;
}

.style-card {
  display: flex;
  flex-direction: column;
  width: 224px;
  height: 205.34px;
  background: var(--white);
  border: 2.5px solid var(--black);
  box-shadow: 0 5px 0 0 var(--black);
  overflow: hidden;
}

.style-card__img {
  width: 100%;
  aspect-ratio: 418 / 313.5;
  border-bottom: 2.5px solid var(--black);
  overflow: hidden;
  flex-shrink: 0;
}

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

.style-card__label {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 12.63px;
  font-weight: 900;
  font-size: 12px;
  line-height: 18px;
  color: var(--black);
}

/* ---- right: copy ---- */
.styles__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17.25px;
  width: 340px;
  flex-shrink: 0;
  min-width: 0;
}

.styles__heading {
  font-weight: 900;
  font-size: clamp(22px, 18.495px + 0.9346vw, 30px);
  line-height: 1.3;
  color: var(--black);
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-width: 0;
}

.styles__lead {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: var(--black);
}

/* ============================================================
   WORKS
   ============================================================ */
.works {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 80px;
  background: #f5f5f5;
  border-bottom: 2.5px solid var(--black);
}

.works__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30.18px;
}

.works__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14.37px;
  width: 760px;
  min-width: 0;
}

.works__head .section-badge {
  align-self: center;
}

.works__heading {
  font-weight: 900;
  font-size: clamp(22px, 18.495px + 0.9346vw, 30px);
  line-height: 1.3;
  color: var(--black);
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-width: 0;
}

.works__lead {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: var(--black);
  text-align: center;
}

/* ---- cards ---- */
.works__grid {
  display: flex;
  gap: 15px;
  align-items: stretch;
}

.work-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 270px;
  background: var(--white);
  border: 2.5px solid var(--black);
  box-shadow: 0 5px 0 0 var(--black);
  overflow: hidden;
  transition: transform 0.12s ease;
}

/* カードが記事へのリンク（<a>）の場合 */
a.work-card:hover {
  transform: translateY(-2px);
}

a.work-card:hover .work-card__title {
  color: var(--accent);
}

.work-card__img {
  width: 100%;
  height: 151.62px;
  border-bottom: 2.5px solid var(--black);
  overflow: hidden;
  flex-shrink: 0;
}

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

.work-card__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10.06px 11.5px;
}

.work-card__client {
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #a5a5a5;
}

.work-card__title {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: var(--black);
  transition: color 0.15s ease;
}

.work-card__more {
  margin-top: 8px;
  font-weight: 900;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.5px;
  color: var(--accent);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20.12px;
  padding: 60px 80px;
  background: var(--white);
  border-bottom: 2.5px solid var(--black);
}

.faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14.37px;
  width: 760px;
  min-width: 0;
}

.faq__head .section-badge {
  align-self: center;
}

.faq__heading {
  font-weight: 900;
  font-size: clamp(22px, 18.495px + 0.9346vw, 30px);
  line-height: 1.3;
  color: var(--black);
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-width: 0;
}

.faq__lead {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: var(--black);
  text-align: center;
}

/* ---- accordion list ---- */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 10.06px;
  width: 840px;
}

.faq-item {
  background: var(--white);
  border: 2.5px solid var(--black);
}

.faq-item__q {
  display: flex;
  align-items: center;
  gap: 10.06px;
  height: 49.22px;
  padding: 0 15.81px;
  cursor: pointer;
  list-style: none;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28.74px;
  height: 28.74px;
  background: var(--black);
  color: var(--yellow);
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: 13px;
}

.faq-item__q-text {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  color: var(--black);
}

/* plus icon that becomes a minus when the accordion is open */
.faq-item__toggle {
  position: relative;
  flex-shrink: 0;
  width: 17.25px;
  height: 17.25px;
}

.faq-item__toggle::before,
.faq-item__toggle::after {
  content: "";
  position: absolute;
  background: var(--black);
}

.faq-item__toggle::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 2.5px;
  transform: translateY(-50%);
}

.faq-item__toggle::after {
  left: 50%;
  top: 0;
  width: 2.5px;
  height: 100%;
  transform: translateX(-50%);
  transition: opacity 0.15s ease;
}

.faq-item[open] .faq-item__toggle::after {
  opacity: 0;
}

.faq-item__a {
  display: flex;
  align-items: flex-start;
  gap: 10.06px;
  padding: 4px 15.81px 20px;
}

.faq-item__a-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28.74px;
  height: 28.74px;
  background: #f5f5f5;
  color: var(--black);
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: 13px;
}

.faq-item__a-body {
  flex: 1;
  padding-top: 4px;
  font-weight: 700;
  font-size: 13px;
  line-height: 22px;
  color: var(--black);
}

.faq-item__a-body p {
  margin: 0;
}

.faq-item__a-body p + p {
  margin-top: 16px;
}

.faq-item__a-list {
  margin: 4px 0;
  padding-left: 1.4em;
  list-style: disc;
}

.faq-item__a-list li {
  margin: 2px 0;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26.59px;
  padding: 80px 80px;
  background: var(--yellow);
  border-bottom: 2.5px solid var(--black);
}

.final-cta__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86.35px;
  height: 24.5px;
  background: var(--black);
  color: var(--yellow);
  font-weight: 700;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.93px;
  text-align: center;
}

.final-cta__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 660px;
}

/* the heading is wider than its Figma "box" and stays on one line */
.final-cta__heading {
  width: max-content;
  max-width: none;
  font-weight: 900;
  /* 375px〜1231pxの間で連続的にスケール（900px以下ではnowrap解除に伴い
     widthとtext-wrapを上書きする） */
  font-size: clamp(24px, 18.743px + 1.4019vw, 36px);
  line-height: clamp(34.8px, 29.455px + 1.4252vw, 47px);
  color: var(--black);
  text-align: center;
  white-space: nowrap;
}

.final-cta__lead {
  font-weight: 500;
  font-size: 13px;
  line-height: 22px;
  color: var(--black);
  text-align: center;
}

.final-cta__buttons {
  display: flex;
  gap: 11.5px;
  align-items: center;
}

/* ============================================================
   COMPANY + FOOTER
   ============================================================ */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 54.61px;
  padding: 40px 40px 24px;
  background: var(--black);
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 840px;
}

/* ---- brand ---- */
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12.94px;
  width: 345px;
}

.footer__logo-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10.06px;
  /* widthを固定しない: ロゴ画像は .footer__logo 側で幅を持たせ、
     "POWERED BY ZEN." が窮屈な幅に押し込まれて2行折れするのを防ぐ */
  width: auto;
}

.footer__logo {
  display: block;
  width: 142px;
  height: auto;
}

.footer__powered {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.37px;
  color: var(--yellow);
  white-space: nowrap;
}

.footer__desc {
  font-weight: 500;
  font-size: 12px;
  line-height: 19px;
  color: rgba(255, 255, 255, 0.7);
}

/* ---- nav groups ---- */
.footer__nav-groups {
  display: flex;
  align-items: flex-start;
}

.footer__nav-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11.5px;
  width: 201px;
}

.footer__nav-title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.72px;
  color: var(--yellow);
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 12.22px;
  padding: 2.16px 0;
}

.footer__nav-list a {
  font-weight: 500;
  font-size: 12px;
  line-height: 19px;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.15s ease;
}

.footer__nav-list a:hover {
  color: var(--yellow);
}

/* ---- bottom bar ---- */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   FLOW
   ============================================================ */
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40.96px;
  padding: 60px 80px;
  background: var(--yellow);
  /* divider above is provided by the preceding WORKS section's border-bottom,
     so no border-top here (avoids a doubled 5px line) */
  border-bottom: 2.5px solid var(--black);
}

.flow__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14.37px;
  width: 760px;
  min-width: 0;
}

.flow__head .section-badge {
  align-self: center;
  color: var(--yellow);
}

.flow__heading {
  font-weight: 900;
  font-size: clamp(22px, 18.495px + 0.9346vw, 30px);
  line-height: 1.3;
  color: var(--black);
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-width: 0;
}

.flow__lead {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: var(--black);
  text-align: center;
}

/* ---- 4x2 card grid ---- */
.flow__grid {
  display: grid;
  grid-template-columns: repeat(4, 201px);
  grid-template-rows: repeat(2, fit-content(100%));
  gap: 18px 12px;
}

.flow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8.62px;
  padding: 17.97px 15.81px;
  background: var(--white);
  border: 2.5px solid var(--black);
  box-shadow: 0 5px 0 0 var(--black);
  overflow: visible;
}

.flow-card__num {
  position: absolute;
  right: -1.79px;
  top: -1.92px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22.15px;
  height: 19.04px;
  background: var(--black);
  color: var(--yellow);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.93px;
}

.flow-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30.62px;
  height: 30.62px;
  background: var(--yellow);
  border: 2.5px solid var(--black);
  flex-shrink: 0;
}

.flow-card__icon img {
  width: 17.25px;
  height: 17.25px;
}

.flow-card__title {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  color: var(--black);
}

.flow-card__text {
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: var(--black);
}

/* ============================================================
   MANGA VIEWER (modal)
   ============================================================ */
.manga-viewer {
  position: fixed;
  inset: 0;
  z-index: 200; /* above the sticky header (100) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.manga-viewer[hidden] {
  display: none;
}

.manga-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 22, 0.92);
}

.manga-viewer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(960px, calc(100vw - 100px));
  max-height: calc(100vh - 40px);
  /* no white panel box — the manga page sits directly on the dark backdrop */
}

/* ---- top bar ---- */
.manga-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.manga-viewer__title {
  font-weight: 900;
  font-size: 15px;
  color: var(--white);
}

.manga-viewer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--black);
  color: var(--yellow);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.manga-viewer__close:hover {
  opacity: 0.8;
}

.manga-viewer__close svg {
  width: 18px;
  height: 18px;
}

/* ---- stage (page + prev/next) ---- */
.manga-viewer__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 0;
}

.manga-viewer__page {
  display: block;
  max-width: calc(100vw - 200px);
  max-height: calc(100vh - 150px);
  height: auto;
  /* no frame — the page shows edge-to-edge on the dark backdrop */
}

.manga-viewer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--white);
  color: var(--black);
  border: 2.5px solid var(--black);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.manga-viewer__nav:hover:not(:disabled) {
  background: var(--black);
  color: var(--yellow);
}

.manga-viewer__nav:disabled {
  opacity: 0.25;
  cursor: default;
}

.manga-viewer__nav svg {
  width: 22px;
  height: 22px;
}

/* ---- page counter ---- */
.manga-viewer__counter {
  font-weight: 700;
  font-size: 13px;
  color: var(--white);
  text-align: center;
}

/* ============================================================
   RESPONSIVE
   基準デザインは1231px幅。
   〜1040px: セクション余白を圧縮し、ヒーローを縦積みに
   〜900px : 2カラムセクションを解除、ヘッダーのナビを非表示
   〜720px : マンガビューワーの送りボタンをオーバーレイ化
   〜640px : モバイル最適化（1カラム・タイポグラフィ調整）
   ============================================================ */

/* ---------- 〜1040px ---------- */
@media (max-width: 1040px) {
  /* セクション共通: 左右余白を圧縮 */
  .problems,
  .solution,
  .compare,
  .cases,
  .styles,
  .works,
  .flow,
  .faq {
    padding: 48px 24px;
  }

  .final-cta {
    padding: 56px 24px;
  }

  .footer {
    padding: 40px 24px 20px;
  }

  /* ヒーロー: 絶対配置 → 縦積み */
  .hero {
    padding: 36px 24px 56px;
  }

  .hero__box {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 620px;
    height: auto;
  }

  .hero__left {
    position: static;
    width: 100%;
  }

  .hero__heading {
    /* font-size/line-heightはbase側でclamp()により連続スケールする */
    gap: 10px;
    letter-spacing: -0.02em;
  }

  .hero__manga {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
  }

  .hero__manga-img {
    position: static;
    display: block;
    width: 100%;
  }

  .hero__badge {
    left: -10px;
    top: auto;
    bottom: -26px;
    width: 158px;
    height: 116px;
  }

  .hero__badge-sub {
    font-size: 12px;
    line-height: 14px;
  }

  .hero__badge-main {
    font-size: 14px;
    line-height: 19px;
  }
}

/* ---------- 〜900px ---------- */
@media (max-width: 900px) {
  .header__nav {
    display: none;
  }

  /* セクション見出し共通のfont-sizeはbase側でclamp()により
     375px〜1231pxの間を連続的にスケールするため、ここでの上書きは不要 */

  /* PROBLEMS: 見出しは他セクションと統一して中央揃えにする */
  .problems__inner {
    flex-direction: column;
    gap: 28px;
  }

  .problems__left {
    width: 100%;
    gap: 16px;
    align-items: center;
    text-align: center;
  }

  .problems__left .section-badge {
    align-self: center;
  }

  .problems__heading br {
    display: none;
  }

  .problems__list {
    width: 100%;
    padding-top: 0;
  }

  .problems__item {
    align-items: flex-start;
    white-space: normal;
  }

  /* SOLUTION: 縦積みでは「見出し→カード→ボタン」の順に並べ替え、
     見出しは他セクションと統一して中央揃えにする。
     .solution__left を display:contents で展開し、
     ボタン(CTA)だけ order で最後尾に送る。 */
  .solution__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 24px;
    width: 100%;
  }

  .solution__left {
    display: contents;
  }

  .solution__lead {
    text-align: center;
  }

  .solution__left .section-badge {
    align-self: center;
  }

  .solution__cards {
    width: 100%;
  }

  .solution__cta {
    order: 2;
  }

  /* COMPARE: 縦積みでは「見出し→表→ボタン」の順に並べ替え、
     見出しは他セクションと統一して中央揃えにする。
     .compare__right を display:contents で展開し、
     order で「見出し(1) → 表(2) → ボタン(3)」に並べ替える。 */
  .compare__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 28px;
    width: 100%;
  }

  .compare__right {
    display: contents;
  }

  .compare__lead {
    text-align: center;
    order: 1;
  }

  .compare__heading {
    order: 1;
  }

  .compare__right .section-badge {
    align-self: center;
    order: 1;
  }

  .compare__cta {
    order: 3;
  }

  .compare__left {
    width: 100%;
    order: 2;
  }

  .compare-table {
    width: 100%;
    table-layout: fixed;
  }

  .compare-table th:nth-child(1),
  .compare-table td:nth-child(1) {
    width: 30%;
  }

  .compare-table th:nth-child(2),
  .compare-table td:nth-child(2) {
    width: 35%;
  }

  .compare-table th:nth-child(3),
  .compare-table td:nth-child(3) {
    width: 35%;
  }

  /* CASES / WORKS: カードを折り返し */
  .cases__head {
    width: 100%;
  }

  .cases__grid {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .works__head {
    width: 100%;
  }

  .works__grid {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  /* STYLES: 縦積みでは「見出し→サンプル→ボタン」の順に並べ替え、
     見出しは他セクションと統一して中央揃えにする。
     .styles__copy を display:contents で展開し、
     order で「見出し(1) → サンプル(2) → ボタン(3)」に並べ替える。 */
  .styles__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 28px;
    width: 100%;
  }

  .styles__copy {
    display: contents;
  }

  .styles__lead {
    text-align: center;
    order: 1;
  }

  .styles__heading {
    order: 1;
  }

  .styles__copy .section-badge {
    align-self: center;
    order: 1;
  }

  .styles__cta {
    order: 3;
  }

  .styles__grid {
    width: 100%;
    max-width: 468px;
    margin: 0 auto;
    order: 2;
  }

  /* FLOW: 4列 → 2列 */
  .flow__head {
    width: 100%;
  }

  .flow__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 560px;
  }

  /* FAQ */
  .faq__head {
    width: 100%;
  }

  .faq__list {
    width: 100%;
  }

  .faq-item__q {
    height: auto;
    min-height: 49px;
    padding: 12px 16px;
  }

  /* FINAL CTA */
  .final-cta__copy {
    width: 100%;
    min-width: 0;
  }

  .final-cta__heading {
    /* font-size/line-heightはbase側でclamp()により連続スケールする */
    width: 100%;
    max-width: 640px;
    white-space: normal;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .final-cta__buttons {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* FOOTER */
  .footer__inner {
    width: 100%;
    max-width: 840px;
  }
}

/* ---------- マンガビューワー（〜720px） ---------- */
@media (max-width: 720px) {
  .manga-viewer__panel {
    width: calc(100vw - 24px);
  }

  .manga-viewer__stage {
    position: relative;
  }

  .manga-viewer__page {
    max-width: 100%;
    max-height: calc(100vh - 150px);
  }

  /* 送りボタンはページ画像の上に重ねる。半透明にして下のマンガのコマ・
     セリフが読めるようにする（枠とアイコンは視認性のため不透明のまま） */
  .manga-viewer__nav {
    position: absolute;
    top: 50%;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.55);
  }

  .manga-viewer__nav:hover:not(:disabled) {
    background: rgba(36, 35, 39, 0.7);
  }

  .manga-viewer__nav--prev {
    left: 6px;
  }

  .manga-viewer__nav--next {
    right: 6px;
  }
}

/* ---------- 〜640px ---------- */
@media (max-width: 640px) {
  .problems,
  .solution,
  .compare,
  .cases,
  .styles,
  .works,
  .flow,
  .faq {
    padding: 40px 16px;
  }

  .final-cta {
    padding: 48px 16px;
  }

  .hero {
    padding: 28px 16px 52px;
  }

  /* ヘッダー */
  .header {
    padding: 10px 10px 10px 14px;
  }

  .header__logo {
    width: 148px;
    height: 24px;
  }

  .header__cta {
    width: auto;
    gap: 4px;
    padding: 8px 6px 8px 14px;
    font-size: 12px;
  }

  /* ボタン: 全幅（中央寄せ） */
  .btn {
    width: 100%;
    max-width: 360px;
  }

  .hero__buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero__notes {
    flex-wrap: wrap;
    gap: 8px 16px;
    white-space: normal;
  }

  /* ロゴスクロール */
  .logo-scroll {
    height: 64px;
  }

  .logo-scroll__track img {
    height: 32px;
    margin-right: 28px;
  }

  /* SOLUTION: タイトル・カード見出しはbase側でclamp()により
     連続的にスケールするため、ここでの個別上書きは不要 */
  .solution__card-img img {
    height: 170px;
  }

  /* COMPARE: font-sizeはbase側でclamp()によりスケールする */

  .compare-table thead th {
    height: 38px;
  }

  .compare-table tbody th,
  .compare-table tbody td {
    height: 48px;
  }

  .compare-table tbody th {
    padding: 0 10px;
  }

  /* CASES: 1カラム表示になるここでは、PC/タブレットで複数カードの高さを
     揃えるための height:100% / margin-top:auto を解除する。
     揃える相手のカードが横に並ばないため、揃える必要がなく、
     揃えたままだとボタン上に不自然な余白ができてしまう。 */
  .case {
    width: 100%;
    max-width: 340px;
    height: auto;
  }

  .case__body {
    width: calc(100% - 37px);
    height: auto;
  }

  .case__cta {
    margin-top: 0;
  }

  /* STYLES */
  .styles__grid {
    gap: 16px;
  }

  .style-card {
    width: calc(50% - 8px);
    height: auto;
  }

  .style-card__label {
    padding: 8px 10px;
  }

  /* WORKS */
  .work-card {
    width: 100%;
    max-width: 340px;
  }

  /* FLOW */
  .flow__grid {
    gap: 14px 10px;
  }

  .flow-card {
    padding: 14px 12px;
  }

  /* FAQ */
  .faq-item__q-text {
    font-size: 14px;
  }

  /* FINAL CTA */
  .final-cta__buttons {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* FOOTER */
  .footer {
    gap: 36px;
  }

  .footer__inner {
    flex-direction: column;
    gap: 32px;
  }

  .footer__brand {
    width: 100%;
  }

  .footer__nav-groups {
    width: 100%;
  }

  .footer__nav-group {
    width: 50%;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}