:root {
  --color-accent: #009999;
  --color-text: #1a1a1a;
  --color-text-sub: #333333;
  --color-text-weak: #666666;
  --color-text-mute: #a0a0a0;
  --color-border: #e5e5e5;
  --color-thumb-bg: #d4d9df;
  --color-bg-soft: #f4f5f4;
  --color-white: #ffffff;
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --hover-transition: 0.25s ease; /* ホバー系アニメーションの共通タイミング */
}

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

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

.inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 0;
  top: -48px;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 12px 20px;
  font-size: 0.85rem;
  z-index: 100;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-white);
  height: 80px;
}

.header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo img {
  width: 176px;
  height: auto;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header__link {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color var(--hover-transition);
}

.header__sns {
  display: flex;
  align-items: center;
  transition: color var(--hover-transition);
}

/* 未実装ページのため、EN以外のグロナビ項目は無効化しておく */
.header__link,
.header__sns {
  opacity: 0.4;
  pointer-events: none;
}

.header__extra {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header__lang {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 4px 10px;
  transition: color var(--hover-transition), border-color var(--hover-transition);
}

@media (hover: hover) {
  .header__link:hover,
  .header__sns:hover {
    color: var(--color-accent);
  }

  .header__lang:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }
}

.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.header__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--hover-transition), opacity var(--hover-transition);
}

.header__toggle.is-active .header__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__toggle.is-active .header__toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header__toggle.is-active .header__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* MV */
.mv__img {
  width: 100%;
  height: auto;
}

/* Intro */
.intro {
  padding: 72px 0 56px;
}

.intro__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.intro__body {
  margin-top: 28px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* 見出しの1文字ずつ表示（.char はJSが生成。JS無効時は通常表示のまま） */
.intro__heading .char {
  opacity: 0;
}

.intro__heading.is-animated .char {
  animation: fade-in 0.5s ease forwards;
  animation-delay: calc(var(--char-index) * 0.06s); /* 間隔はJSのCHAR_INTERVALと同期 */
}

/* リード文：見出しの文字送りが終わってからフェードイン（.is-waiting はJSが付与） */
.intro__body.is-waiting {
  opacity: 0;
}

.intro__body.is-animated {
  animation: fade-in 0.8s ease forwards;
  animation-delay: var(--intro-delay, 2.5s);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Articles */
.articles {
  padding-bottom: 96px;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.6rem;
  padding-left: 14px;
  border-left: 4px solid var(--color-accent);
  line-height: 1;
}

.article-list {
  list-style: none;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
}

.article-card {
  position: relative;
  display: flex;
  gap: 24px;
}

.article-card:nth-child(n + 3) {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

.article-card:nth-child(n + 5) {
  display: none;
}

/* 公開準備中のダミー記事：サムネはロゴを薄く表示、テキストはComing Soonのみ */
.article-card--soon {
  pointer-events: none;
}

.article-card--soon .article-card__thumb {
  background-image: url('../img/common/logo.png');
  background-size: 45%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.45;
}

.article-card--soon .article-card__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.article-card--soon .article-card__title {
  color: var(--color-text-mute);
}

/* スクロールで1件ずつ表示（.is-hidden / .is-visible はJSが付与。JS無効時は通常表示） */
.article-card.is-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.article-card.is-hidden.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.article-card__thumb {
  flex: 0 0 185px;
  width: 185px;
  aspect-ratio: 185 / 194; /* デザインのサムネイル実寸（185×194px）に合わせた比率 */
  /* align-self で stretch を止めないと、Safari が引き伸ばされた高さと
     aspect-ratio から最小幅を逆算してサムネイルが横に膨張する（iPad で崩れる） */
  align-self: flex-start;
  position: relative;
  overflow: hidden;
  background-color: var(--color-thumb-bg);
  background-size: cover;
  background-position: center;
}

/* 画像本体（ズーム用）。background: inherit で親のサムネイル画像を引き継ぐ */
.article-card__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transition: transform 0.4s ease;
}

/* ホバーで右下にフェードインする矢印 */
.article-card__thumb::after {
  content: "→";
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--hover-transition), transform var(--hover-transition);
}

.article-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.article-card__date {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text-mute);
}

.article-card__title {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.5;
  transition: color var(--hover-transition);
}

/* カード全体をクリック可能にする stretched link */
.article-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (hover: hover) {
  .article-card:hover .article-card__thumb::before {
    transform: scale(1.05);
  }

  .article-card:hover .article-card__thumb::after {
    opacity: 1;
    transform: translateX(0);
  }

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

.article-card__excerpt {
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--color-text-weak);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.articles__more {
  display: none;
  margin-top: 56px;
  text-align: center;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 0.95rem;
  transition: background-color var(--hover-transition), color var(--hover-transition);
}

.btn-outline .arrow { transition: transform var(--hover-transition); }

@media (hover: hover) {
  .btn-outline:hover {
    background: var(--color-accent);
    color: var(--color-white);
  }

  .btn-outline:hover .arrow { transform: translateX(4px); }
}

/* Footer */
.footer {
  border-top: 1px solid var(--color-border);
  padding: 28px 0;
}

nav.footer__breadcrumb.inner {
  max-width: 1200px;
  padding: 0 40px 24px;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer__logo img { width: 130px; }

.footer__copy {
  font-size: 0.8rem;
  color: var(--color-text-sub);
}

/* Back to top */
/* .to-top is the last child of <main>, so position: sticky can only travel as
   far as main's bottom edge. On desktop, main's bottom edge is the footer
   border only on pages with no breadcrumb (e.g. top page) — bottom: 58px +
   translateY(50%) centers the button on it. On pages where a breadcrumb nav
   (41px tall) sits between </main> and <footer>, that 41px is added back
   below (kept in sync between bottom and translateY so the 32px visual gap
   while scrolling is unaffected) to land the button's center on the footer
   border instead of on main's bottom edge. */
.to-top {
  position: sticky;
  bottom: 58px;
  display: block;
  width: 52px;
  height: 52px;
  margin-left: auto;
  margin-right: 32px;
  transform: translateY(50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibility も transition に含めないと、非表示になる瞬間 hidden が
     即時適用されてフェードアウトせずパッと消える */
  transition: opacity var(--hover-transition), visibility var(--hover-transition);
}

main:has(+ .footer__breadcrumb) .to-top {
  bottom: 99px;
  transform: translateY(calc(50% + 41px));
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.to-top__diamond {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-white);
  transform: rotate(45deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background-color var(--hover-transition), color var(--hover-transition);
}

/* 親の rotate(45deg) と打ち消し合うので、translateY は画面上そのまま上方向に効く */
.to-top__diamond svg {
  transform: rotate(-45deg);
  transition: transform var(--hover-transition);
}

@media (hover: hover) {
  .to-top:hover .to-top__diamond {
    background: var(--color-white);
    color: var(--color-accent);
  }

  .to-top:hover .to-top__diamond svg {
    transform: rotate(-45deg) translateY(-3px);
  }
}

/* ------------------------- */
/* Article                   */
/* ------------------------- */
.article__inner {
  max-width: 1000px;
  padding-top: 48px;
  padding-bottom: 96px;
}

/* MV：斜めカットの扉演出（H2-1手前、記事全体で唯一の特別演出） */
.article {
  overflow-x: hidden;
}

.article-mv {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

/* 背景は白パネルのみ（斜線の疑似要素は2026-07-09に廃止）。
   上下の罫線はこのパネルのborderで、白の範囲と罫線の先端が常に一致する。 */
.article-mv::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  pointer-events: none;
  z-index: 1;
}

.article-mv__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 40px 48px;
  min-height: 520px;
}

.article-mv__breadcrumb {
  max-width: 50%;
  font-size: 0.75rem;
  color: var(--color-text-mute);
  overflow-wrap: anywhere;
}

.article-mv__breadcrumb ol {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 区切り文字はCSS生成コンテンツにして、スクリーンリーダーに「>」が読み上げられないようにする */
.article-mv__breadcrumb li:not(:first-child)::before {
  content: ">";
  margin-right: 8px;
}

.article-mv__breadcrumb li[aria-current] {
  overflow-wrap: anywhere;
}

.article-mv__breadcrumb a {
  transition: color var(--hover-transition);
}

@media (hover: hover) {
  .article-mv__breadcrumb a:hover {
    color: var(--color-accent);
  }
}

.article-mv__meta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-text-weak);
}

.article-mv__meta time {
  color: var(--color-accent);
  font-weight: 500;
}

/* タグは枠なし・細い縦線区切り（D案準拠） */
.article-mv__tag {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--color-border);
}

.article-mv__body {
  margin-top: 20px;
  max-width: min(480px, 44%); /* タブレット幅で右のMV画像に重ならないよう可変 */
}

.article-mv__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  line-height: 1.45;
}

/* 英語版：JP版より1文あたりの文字数が多く同じ折り返し位置だと行数が増えるため、
   デスクトップ幅ではJP版と同じ4行に収まる縮小版のclampを充てる（SPは共通ルールのまま） */
.article-mv__title--en {
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
}

/* 1文が長い記事タイトル用の縮小版（例：1-1「インストールと日本語化」を1行に収める） */
.article-mv__title--compact {
  font-size: clamp(1.7rem, 3.3vw, 2.5rem);
}

/* サブタイトル的な語句（【完全ガイド】等）を一段小さく見せる */
.article-mv__title-sub {
  display: inline-block;
  margin-top: 0.15em;
  font-size: 0.62em;
}

.article-mv__share {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--color-text-mute);
}

.article-mv__share a {
  display: flex;
  padding: 9px;
  margin: -9px;
  transition: color var(--hover-transition);
}

@media (hover: hover) {
  .article-mv__share a:hover {
    color: var(--color-accent);
  }
}

/* 画像は右端までブリード。左辺だけ斜めカット、下辺はまっすぐ */
.article-mv__visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  z-index: 2;
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
}

.article-mv__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-lead {
  max-width: 1000px;
  padding-top: 48px;
  padding-bottom: 8px;
}

.article-lead__body {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--color-text-sub);
}

.article-lead__body p + p {
  margin-top: 1em;
}

.article-lead__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-section {
  padding: 56px 0;
  border-bottom: 1px solid var(--color-border);
}

.article-lead + .article__inner .article-section:first-child {
  padding-top: 24px;
}

.article-section__title {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.4;
}

.article-section__num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-accent);
  flex-shrink: 0;
}

.article-section__body {
  margin-top: 24px;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--color-text-sub);
}

.article-section__body p + p {
  margin-top: 1.4em;
}

/* 本文中のインラインリンク（外部サイト・補足コラムへの導線など）
   ただしCTAボタン（.article-cta）は独自の配色（白文字＋アクセント背景）を持つため対象外 */
.article-section__body a:not(.article-cta),
.article-column__body a:not(.article-cta),
.article-notice a:not(.article-cta) {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover: hover) {
  .article-section__body a:not(.article-cta):hover,
  .article-column__body a:not(.article-cta):hover,
  .article-notice a:not(.article-cta):hover {
    text-decoration-color: transparent;
  }
}

/* 新規タブで開く外部リンクには、サイトの線画アイコン（to-topの矢印等）と同じ細線スタイルのアイコンを添える
   ただしCTAボタン（.article-cta）は独自の矢印アイコンを持つため対象外 */
.article-section__body a[target="_blank"]:not(.article-cta)::after,
.article-column__body a[target="_blank"]:not(.article-cta)::after,
.article-notice a[target="_blank"]:not(.article-cta)::after,
.article-faq__a a[target="_blank"]:not(.article-cta)::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.article-section__lead-sentence {
  margin-top: 1.4em;
  font-weight: 700;
  color: var(--color-text);
}

/* 手順リスト（H2-7）：ティールの丸数字 */
.article-section__list {
  margin-top: 1.6em;
  list-style: none;
  counter-reset: step;
}

.article-section__list li {
  position: relative;
  padding-left: 36px;
  counter-increment: step;
}

.article-section__list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.article-section__list li + li {
  margin-top: 0.9em;
}

.article-section__list + p {
  margin-top: 1.4em;
}

/* ダウンロードCTA（H2-7） */
.article-cta {
  display: block;
  width: fit-content;
  margin: 40px auto 0;
  padding: 14px 40px;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-white);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  transition: background var(--hover-transition), color var(--hover-transition);
}

.article-cta__arrow {
  display: inline-block;
  margin-left: 0.5em;
  transition: transform var(--hover-transition);
}

@media (hover: hover) {
  .article-cta:hover {
    background: var(--color-white);
    color: var(--color-accent);
  }

  .article-cta:hover .article-cta__arrow {
    transform: translateX(4px);
  }
}

/* 2カラム（H2-4）：左本文＋右チェックリストパネル */
.article-section__cols {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
}

.article-section__cols .article-section__body {
  margin-top: 24px;
}

.article-aside {
  margin-top: 32px;
  padding: 28px 24px;
  background: var(--color-bg-soft);
  border-radius: 8px;
}

.article-aside__title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.article-aside__list {
  margin-top: 16px;
  list-style: none;
}

.article-aside__list li {
  position: relative;
  padding-left: 30px;
  font-size: 0.85rem;
  line-height: 1.7;
}

.article-aside__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  border-radius: 50%;
  color: var(--color-white);
  font-size: 0.65rem;
}

.article-aside__list li + li {
  margin-top: 14px;
}

/* 作例ギャラリー（H2-1） */
.gallery {
  margin-top: 32px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* 見出し直下・2枚だけを大きめ表示するバリエーション */
.gallery--lead {
  margin-top: 24px;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-thumb-bg);
}

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

/* 作例クレジット（CC BY表記） */
.gallery-credit {
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--color-text-mute);
}

.gallery-credit a {
  text-decoration: underline;
  transition: color var(--hover-transition);
}

@media (hover: hover) {
  .gallery-credit a:hover {
    color: var(--color-accent);
  }
}

/* 実演タイムライン（H2-2）：STEPラベル→キャプション→画像の順で中央揃え、ティールの▶で接続 */
.timeline {
  margin-top: 32px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  row-gap: 32px;
}

.timeline__step {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto; /* キャプションの行数差を吸収して画像の天地を揃える */
  text-align: center;
}

.timeline__step:not(:last-child)::after {
  content: "▶";
  position: absolute;
  grid-row: 3;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);
  font-size: 0.6rem;
}

.timeline__step:nth-child(2n)::after {
  display: none;
}

.timeline__step-label {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  font-weight: 700;
}

.timeline__step img {
  margin-top: 10px;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-thumb-bg);
}

.timeline__caption {
  margin-top: 4px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-sub);
}

.wf-quote {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-accent);
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--color-text-sub);
}

/* 手順内の小見出し（H2-2「Windowsの場合」等・補足コラム内の小見出しにも流用） */
.article-section__subtitle {
  margin-top: 40px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

.article-section__subtitle:first-child {
  margin-top: 0;
}

.article-section__subtitle + .article-section__body,
.article-section__subtitle + .article-section__list {
  margin-top: 16px;
}

/* 補足コラムは項目数が多く文字が詰まって見えるため、小見出しに下線を添えて区切りを目立たせる
   （リンクの下線と紛らわしくならないよう、テキスト幅に合わせたアクセントカラーの太めの線にする） */
.article-column__body .article-section__subtitle {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-accent);
}

/* 安心材料・注意点の吹き出し（公式サイトの見分け方／セキュリティ警告など） */
.article-notice {
  margin-top: 24px;
  padding: 18px 22px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-text-sub);
}

.article-notice strong {
  color: var(--color-text);
}

/* 手順のスクリーンショット（1画面1枚）：本文幅いっぱいだと圧迫感が出るため、やや狭めて中央寄せ */
.article-shot {
  margin: 24px auto 0;
  max-width: 700px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-thumb-bg);
}

/* 手順リストの各項目に画像を添える場合：文章との結びつきが強いので上マージンを詰める（中央揃えは維持） */
.article-section__list .article-shot {
  margin-top: 12px;
}

.article-shot img {
  width: 100%;
  height: auto;
  display: block;
}

/* 箇条書きリストの各項目に画像を添える場合（.article-section__listと同じ詰め方） */
.article-bullet-list .article-shot {
  margin-top: 12px;
}

/* リスト内に置いた画像は、liのpadding-leftの内側でauto中央揃えされるため
   中央軸がインデントの半分だけ右へずれる。半分だけ左へ戻し、本文直下の画像と中央軸を揃える
   （子セレクタ限定＝.article-compare内の.article-shotに二重適用させない） */
.article-section__list li > .article-shot,
.article-section__list li > .article-compare {
  position: relative;
  left: -18px; /* li padding-left 36px の半分 */
}

.article-bullet-list li > .article-shot,
.article-bullet-list li > .article-compare {
  position: relative;
  left: -9px; /* li padding-left 18px の半分 */
}

/* キーボードショートカット表示（G・R・S・Ctrl+R等、モデリング系記事で多用） */
kbd {
  display: inline-block;
  padding: 1px 7px;
  font-family: inherit;
  font-size: 0.92em;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  white-space: nowrap;
}

/* 同時押し（Ctrl+R等）と連続押し（G→Z等）を記号で区別する */
.kbd-plus,
.kbd-arrow {
  display: inline-block;
  margin: 0 3px;
  color: var(--color-text-weak);
  font-size: 0.85em;
  font-weight: 700;
}

/* before/after・3択などの比較画像を横並びにするレイアウト */
.article-compare {
  display: grid;
  grid-template-columns: repeat(var(--compare-cols, 2), 1fr);
  gap: 12px;
  margin: 24px auto 0;
  max-width: 700px;
}

.article-compare .article-shot {
  margin: 0;
  max-width: none;
}

/* 横並び時は1枚あたりが縮小されるため、単体表示（本文幅そのまま）とは違いモーダル拡大の対象にする */
.article-compare img {
  cursor: zoom-in;
}

.article-compare figcaption {
  margin-top: 6px;
  padding: 0 8px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-sub);
  text-align: center;
}

/* 画像拡大モーダル（ライトボックス） */
.img-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 26, 26, 0.86);
}

.img-modal.is-open {
  display: flex;
}

.img-modal__figure {
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
}

.img-modal__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 6px;
}

.img-modal__close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
}

/* 比較表（補足コラムA：配布チャネルの比較など） */
.article-table-wrap {
  margin-top: 24px;
  overflow-x: auto;
}

.article-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.article-table th,
.article-table td {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  text-align: left;
  line-height: 1.7;
  color: var(--color-text-sub);
}

.article-table th {
  background: var(--color-bg-soft);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

/* 箇条書き（補足コラムの動作環境・セキュリティ警告対処など、順序を問わないリスト） */
.article-bullet-list {
  margin-top: 16px;
  list-style: none;
}

.article-bullet-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--color-text-sub);
}

.article-bullet-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.article-bullet-list li + li {
  margin-top: 6px;
}

/* 補足コラムへの誘導リンク（本編各所） */
.article-jump-link {
  position: relative;
  margin-top: 28px;
  padding-left: 22px;
  font-size: 0.85rem;
  font-weight: 700;
}

.article-jump-link::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.article-jump-link a {
  color: var(--color-accent);
  text-decoration: underline;
  transition: opacity var(--hover-transition);
}

@media (hover: hover) {
  .article-jump-link a:hover {
    opacity: 0.7;
  }
}

/* 6工程の図解（H2-3）：角丸カードをティールの「›」で接続 */
.process {
  margin-top: 32px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.process__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-align: center;
}

.process__item:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);
  font-size: 1.2rem;
  font-weight: 700;
}

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

.process__name {
  font-size: 0.8rem;
  font-weight: 700;
}

.process__desc {
  font-size: 0.7rem;
  color: var(--color-text-weak);
}

/* 属性別カード（H2-6）：横長リスト型（画像＋名前＋説明文） */
.persona {
  margin-top: 32px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.persona__item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.persona__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  background: var(--color-thumb-bg);
}

.persona__name {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
}

.persona__desc {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-text-weak);
}

.article-faq {
  padding: 56px 0 0;
}

/* FAQ：グレーバー＋「＋」のアコーディオン（details/summary・JS不要） */
.article-faq__list {
  margin-top: 32px;
}

.article-faq__item + .article-faq__item {
  margin-top: 10px;
}

.article-faq__q {
  position: relative;
  display: block;
  padding: 15px 48px 15px 20px;
  background: var(--color-bg-soft);
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--hover-transition);
}

.article-faq__q::-webkit-details-marker {
  display: none;
}

.article-faq__q::after {
  content: "＋";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 1em;
  transform: translateY(-50%);
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 400;
  text-align: center;
}

.article-faq__item[open] .article-faq__q::after {
  content: "－";
}

@media (hover: hover) {
  .article-faq__q:hover {
    background: var(--color-border);
  }
}

.article-faq__a {
  padding: 14px 20px 8px;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--color-text-sub);
}

.article-faq__a a {
  color: var(--color-accent);
  text-decoration: underline;
}

.article-faq__panel {
  overflow: hidden;
  transition: height 0.25s ease;
}

/* 補足コラム（本編を止めない任意到達ブロック・FAQの後ろ＝記事の最後に配置）：details/summaryのアコーディオン
   .article-noticeと同じ「枠線で囲む」文法を流用し、本編とは別枠の補足であることを一目でわかるようにする */
.article-columns {
  padding: 40px 32px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
}

/* セクションタイトル（01〜06）よりサイズは抑えめにしつつ、メインカラーで補足コラムの目印にする */
.article-columns__title {
  margin-bottom: 20px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-accent);
}

/* FAQの最後の項目のすぐ下に罫線が来ないよう、直後に補足コラムが続く場合だけ余白を足す
   （FAQが最後のセクションのページ＝getting-startedでは不要なので.article-faq側には持たせない） */
.article-faq + .article-columns {
  margin-top: 56px;
}

.article-column + .article-column {
  margin-top: 16px;
}

.article-column__q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 48px 20px 24px;
  background: var(--color-bg-soft);
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
  transition: background var(--hover-transition);
}

.article-column__q::-webkit-details-marker {
  display: none;
}

.article-column__q-text {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}

.article-column__q::after {
  content: "＋";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 1em;
  transform: translateY(-50%);
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
}

.article-column[open] .article-column__q::after {
  content: "－";
}

@media (hover: hover) {
  .article-column__q:hover {
    background: var(--color-border);
  }
}

.article-column__panel {
  overflow: hidden;
  transition: height 0.25s ease;
  /* ヘッダー高さ(80px)+開閉バー(約61px)+余白 分を確保し、ジャンプ後も見出しバーが見えるようにする */
  scroll-margin-top: 160px;
}

.article-column__body {
  padding: 32px 4px 8px;
}

/* ------------------------- */
/* Responsive (SP)           */
/* ------------------------- */
@media (max-width: 767px) {
  .inner,
  .header__inner {
    padding: 0 20px;
  }

  .header {
    height: 60px;
  }

  .article-column__panel {
    /* ヘッダー高さ(60px)+開閉バー(約52px)+余白 */
    scroll-margin-top: 130px;
  }

  .header__logo img {
    width: 130px;
  }

  .header__toggle {
    display: flex;
  }

  .header__nav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 4px 20px 24px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--hover-transition), transform var(--hover-transition), visibility var(--hover-transition);
  }

  .header__nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .header__link {
    width: 100%;
    padding: 14px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-border);
  }

  .header__extra {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
    gap: 20px;
  }

  .header__sns {
    padding: 10px;
    margin: -10px;
  }

  .header__sns svg {
    width: 22px;
    height: 22px;
  }

  .header__lang {
    font-size: 0.9rem;
    padding: 10px 18px;
  }

  .intro {
    padding: 40px 0 40px;
  }

  .intro__heading {
    font-size: 1.35rem;
    line-height: 1.6;
  }

  .intro__body {
    margin-top: 20px;
    font-size: 0.85rem;
    line-height: 1.85;
  }

  .u-hide-sp {
    display: none;
  }

  .articles {
    padding-bottom: 64px;
  }

  .section-title {
    font-size: 1.25rem;
  }

  .article-list {
    grid-template-columns: 1fr;
    margin-top: 24px;
    padding-top: 24px;
  }

  .article-card {
    gap: 16px;
  }

  .article-card:nth-child(n + 3) {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .article-card:nth-child(n + 2) {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
  }

  .article-card__thumb {
    flex-basis: 110px;
    width: 110px;
  }

  .article-card__title {
    font-size: 0.95rem;
  }

  .article-card__excerpt {
    font-size: 0.75rem;
    -webkit-line-clamp: 2;
  }

  .articles__more {
    margin-top: 40px;
  }

  .footer__inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .to-top {
    bottom: 42px;
    width: 44px;
    height: 44px;
    transform: translateY(50%);
    margin-right: 20px;
  }

  /* SPではパンくずナビがdisplay:noneで高さ0のため、PC用の41px補正を打ち消す
     （セレクタはPC側と同じ詳細度に揃えないと上書きできない） */
  main:has(+ .footer__breadcrumb) .to-top {
    bottom: 42px;
    transform: translateY(50%);
  }

  .article__inner {
    padding-top: 32px;
    padding-bottom: 64px;
  }

  .article-mv {
    display: flex;
    flex-direction: column;
  }

  .article-mv::after {
    display: none;
  }

  .article-mv__inner {
    display: contents;
  }

  .article-mv__breadcrumb {
    display: none;
  }

  .article-mv__body {
    display: contents;
    max-width: none;
  }

  .article-mv__meta {
    order: 0;
    padding: 0 20px;
  }

  .article-mv__title {
    order: 1;
    padding: 0 20px;
    margin-top: 20px;
    font-size: 1.7rem;
  }

  .article-mv__visual {
    order: 2;
    position: static;
    width: auto;
    margin: 24px 0;
    clip-path: none;
  }

  .article-mv__visual img {
    height: auto;
  }

  .article-mv__share {
    order: 3;
    padding: 0 20px 32px;
    margin-top: 0;
  }

  .article-lead {
    padding-top: 32px;
    padding-bottom: 0;
  }

  .article-lead__body {
    font-size: 1rem;
  }

  .article-section {
    padding: 40px 0;
  }

  .article-section__title {
    font-size: 1.2rem;
    gap: 10px;
  }

  .article-section__num {
    font-size: 1.9rem;
  }

  .article-section__body {
    margin-top: 18px;
    font-size: 0.875rem;
  }

  .article-section__cols {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .article-aside {
    margin-top: 28px;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery--lead {
    grid-template-columns: 1fr;
  }

  .timeline {
    row-gap: 24px;
  }

  .process {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .process__item:nth-child(3)::after {
    display: none;
  }

  .process__item:not(:last-child)::after {
    right: -12px;
  }

  .persona__item {
    grid-template-columns: 1fr;
  }

  .article-cta {
    margin-top: 32px;
    padding: 13px 24px;
    text-align: center;
  }

  .article-notice,
  .article-shot {
    margin-top: 20px;
  }

  .article-compare {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .img-modal__close {
    top: -14px;
    right: 4px;
  }

  .article-columns {
    padding: 28px 20px;
  }

  .article-column__q {
    gap: 10px;
    padding: 16px 40px 16px 16px;
  }

  .article-column__q-text {
    font-size: 0.85rem;
  }

  .article-column__body {
    padding: 24px 0 4px;
  }

}

.error-404 {
  padding: 120px 0 140px;
  text-align: center;
}

.error-404__code {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 5rem;
  color: var(--color-accent);
  line-height: 1;
}

.error-404__heading {
  margin-top: 24px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 1.6rem;
}

.error-404__body {
  margin-top: 20px;
  font-size: 0.95rem;
  line-height: 1.9;
}

.error-404__actions {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .error-404 {
    padding: 64px 0;
  }

  .error-404__code {
    font-size: 3rem;
  }

  .error-404__heading {
    font-size: 1.15rem;
    letter-spacing: -0.02em;
  }

  .error-404__body {
    font-size: 0.85rem;
    line-height: 1.85;
  }

  .error-404__actions {
    margin-top: 32px;
  }
}