/* ============================================================
   single.css
   通常投稿・カスタム投稿 詳細ページ共通スタイル
   対象: lineup / case / post (is_single)
============================================================ */

.lineup-single { opacity: 1; }

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

@media (min-width: 768px) {
  .single .container {
    max-width: 840px !important;
    padding-inline: 1.25rem;
  }
  .single .breadcrumb .container {
    max-width: 1180px !important;
  }
}

/* ------------------------------------------------------------
   lineup ヘッダー：カテゴリ・タイトル・リード文
------------------------------------------------------------ */
.lineup-category {
  font-size: 1.2rem;
  font-weight: 900;
  line-height: calc(35 / 24);
  color: var(--color-blue);
  margin: 0;
}

.lineup-title {
  font-size: 1.75rem;
  font-weight: 900;
  line-height: calc(58 / 40);
  color: var(--color-blue);
  margin: 0;
}

.lineup-lead {
  font-size: 1.125rem;
  line-height: calc(29 / 20);
  font-weight: 500;
  margin: 0.5rem 0 0;
}

@media (min-width: 768px) {
  .lineup-category {
    font-size: 1.5rem;
  }

  .lineup-title {
    font-size: 2.5rem;
  }

  .lineup-lead {
    font-size: 1.25rem;
  }
}

/* ------------------------------------------------------------
   画像ギャラリー
------------------------------------------------------------ */
.lineup-gallery {
  margin: 1.5rem 0 0;
}

/* メイン画像 */
.lineup-gallery__main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lineup-main-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 5/3;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid #d8d8d8;
}

/* 2枚を重ねる */
#lineup-main-img,
#lineup-main-img-next {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 新画像は最初は非表示 */
#lineup-main-img-next {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* サムネイル一覧 */
.lineup-gallery__thumbs {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}

/* サムネイル wrapper */
.lineup-gallery__thumb-wrapper {
  position: relative;
  border: 0.1875rem solid transparent;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.lineup-gallery__thumb-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #00000040;
  transition: background-color 0.3s ease;
}

.lineup-gallery__thumb-wrapper:hover::after,
.lineup-gallery__thumb-wrapper.is-active::after {
  background-color: transparent;
}

.lineup-gallery__thumb-wrapper:hover,
.lineup-gallery__thumb-wrapper.is-active {
  border-color: var(--color-blue);
}

/* サムネイル img */
.lineup-gallery__thumb {
  aspect-ratio: 148/89;
}

@media (min-width: 768px) {
  .lineup-gallery__thumbs {
    margin-top: 0.75rem;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.9375rem;
  }
}

/* ============================================================
   lineup-spec：仕様テーブル
============================================================ */

.lineup-spec {
  padding: calc(50 / 16 * 1rem) 0 calc(35 / 16 * 1rem);
}

/* 見出し（.single-contents h2 のデフォルトを上書き） */
.lineup-spec .lineup-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: calc(35 / 24);
  color: var(--color-black);
  background-color: transparent;
  padding: 0;
  margin: 0;
}

.lineup-spec .lineup-section-title::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1.5625rem; /* 25px */
  height: 0.1875rem; /* 3px */
  background-color: var(--color-red);
}

/* テーブルラッパー */
.lineup-spec .table-responsive {
  margin: calc(12 / 16 * 1rem) 0 0;
  border-bottom: 0.125rem solid #dddddd;
  overflow-x: auto;
}

/* スクロールヒント */
.spec-scroll-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 0.5rem;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 10;
  white-space: nowrap;
}

.spec-scroll-hint__text {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* スクロールインジケーター（トラック＋サム） */
.spec-scroll-hint__track {
  position: relative;
  width: 3.5rem;
  height: 0.25rem;
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  overflow: hidden;
}

.spec-scroll-hint__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.25rem;
  height: 100%;
  background-color: #fff;
  border-radius: 999px;
  animation: scroll-hint-slide 1.2s ease-in-out infinite alternate;
}

@keyframes scroll-hint-slide {
  0% {
    left: 0;
  }
  100% {
    left: calc(100% - 1.25rem);
  }
}

.spec-scroll-hint.is-hidden {
  opacity: 0;
}

/* テーブル本体（.single-contents table のデフォルトを上書き） */
.lineup-spec__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: none !important;
}

/* thead / tbody を block 化してスクロール領域を分離 */
.lineup-spec__table thead,
.lineup-spec__table tbody {
  display: block;
  width: 100%;
  overflow-y: auto; /* scrollbar-gutter を有効化するために必要 */
  scrollbar-gutter: stable; /* thead / tbody でスクロールバー幅を共有 */
}

.lineup-spec__table thead {
  overflow-y: hidden; /* thead は実際にはスクロールさせない */
}

.lineup-spec__table tbody {
  max-height: calc(4.9 * 3rem);
}

.lineup-spec__table thead tr,
.lineup-spec__table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.lineup-spec__table th:nth-child(1),
.lineup-spec__table td:nth-child(1) {
  width: calc(180 / 16 * 1rem);
}
.lineup-spec__table th:nth-child(2),
.lineup-spec__table td:nth-child(2),
.lineup-spec__table th:nth-child(3),
.lineup-spec__table td:nth-child(3),
.lineup-spec__table th:nth-child(4),
.lineup-spec__table td:nth-child(4),
.lineup-spec__table th:nth-child(5),
.lineup-spec__table td:nth-child(5) {
  width: calc(96 / 16 * 1rem);
}
.lineup-spec__table th:nth-child(6),
.lineup-spec__table td:nth-child(6),
.lineup-spec__table th:nth-child(7),
.lineup-spec__table td:nth-child(7) {
  width: calc(84 / 16 * 1rem);
}

.lineup-spec__table tr {
  border: none;
}

.lineup-spec__table thead th {
  background-color: var(--color-light-blue);
  color: var(--color-black);
  font-weight: 700;
  font-size: 1rem;
  line-height: calc(20 / 14);
  padding: 0.5rem 0.75rem;
  text-align: left;
  border: none;
  box-shadow: inset 0 -0.125rem 0 var(--color-blue);
  white-space: nowrap;
}

.lineup-spec__table tbody td {
  padding: 0.5rem 0.75rem;
  border: none;
  font-size: 1rem;
  font-weight: var(--fw-400);
  line-height: calc(20 / 14);
  background-color: transparent;
  color: var(--color-black);
}

/* ファイルボタン共通 */
.spec-file-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(3 / 16 * 1rem);
  padding: calc(4 / 16 * 1rem) 0.5rem calc(5 / 16 * 1rem);
  border-radius: 0.25rem;
  border: 1px solid transparent;
  color: var(--color-white);
  font-size: calc(14 / 16 * 1rem);
  font-weight: 700;
  line-height: calc(17 / 12);
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.spec-file-btn--pdf {
  background-color: var(--color-pdf);
}

.spec-file-btn--pdf:hover {
  background-color: var(--color-white);
  color: var(--color-pdf);
  border-color: var(--color-pdf);
}

.spec-file-btn--ies {
  background-color: var(--color-ies);
}

.spec-file-btn--ies:hover {
  background-color: var(--color-white);
  color: var(--color-ies);
  border-color: var(--color-ies);
}

.spec-file-btn img {
  margin-top: calc(-2 / 16 * 1rem);
  width: calc(15 / 16 * 1rem);
  transition: filter 0.2s;
}

/* hover時：白アイコン → 赤(#d04352) */
.spec-file-btn--pdf:hover img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(78%) saturate(670%)
    hue-rotate(318deg) brightness(101%);
}

/* hover時：白アイコン → 青(#2d80d3) */
.spec-file-btn--ies:hover img {
  filter: brightness(0) saturate(100%) invert(39%) sepia(68%) saturate(573%)
    hue-rotate(184deg) brightness(97%);
}

/* 空ファイル（グレーアウト） */
.spec-file-btn--empty {
  background-color: var(--color-gray);
  cursor: default;
}

/* PDFを一括DLボタン */
.spec-bulk-pdf-wrap {
  margin: calc(26 / 16 * 1rem) 0 0;
  text-align: center;
}

.spec-bulk-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(6 / 16 * 1rem);
  padding: calc(12 / 16 * 1rem) calc(35 / 16 * 1rem) calc(12 / 16 * 1rem)
    calc(40 / 16 * 1rem);
  background-color: var(--color-pdf);
  color: var(--color-white);
  font-weight: 700;
  font-size: calc(16 / 16 * 1rem);
  line-height: calc(20 / 14);
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.spec-bulk-pdf-btn:hover {
  background-color: var(--color-white);
  color: var(--color-pdf);
  border-color: var(--color-pdf);
}

.spec-bulk-pdf-btn img {
  width: calc(15 / 16 * 1rem);
  transition: filter 0.2s;
}

/* hover時：白アイコン → 赤(#d04352) */
.spec-bulk-pdf-btn:hover img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(78%) saturate(670%)
    hue-rotate(318deg) brightness(101%);
}

@media (min-width: 768px) {
  .lineup-spec {
    padding: calc(80 / 16 * 1rem) 0 calc(65 / 16 * 1rem);
  }
  .lineup-spec .lineup-section-title {
    font-size: 1.5rem;
  }

  .lineup-spec__table tbody {
    max-height: calc(5.3 * 3rem); /* 5行分 */
  }

  .lineup-spec__table th:nth-child(1),
  .lineup-spec__table td:nth-child(1) {
    width: calc(238 / 16 * 1rem);
  }
  .lineup-spec__table th:nth-child(2),
  .lineup-spec__table td:nth-child(2),
  .lineup-spec__table th:nth-child(3),
  .lineup-spec__table td:nth-child(3),
  .lineup-spec__table th:nth-child(4),
  .lineup-spec__table td:nth-child(4),
  .lineup-spec__table th:nth-child(5),
  .lineup-spec__table td:nth-child(5),
  .lineup-spec__table th:nth-child(6),
  .lineup-spec__table td:nth-child(6),
  .lineup-spec__table th:nth-child(7),
  .lineup-spec__table td:nth-child(7) {
    width: calc(96 / 16 * 1rem);
  }

  .lineup-spec__table thead th,
  .lineup-spec__table thead td {
    font-size: 0.875rem;
  }

  .spec-file-btn {
    font-size: calc(12 / 16 * 1rem);
    padding: calc(2 / 16 * 1rem) 0.5rem calc(3 / 16 * 1rem);
  }
  .spec-file-btn img {
    margin-top: 0;
    width: calc(13 / 16 * 1rem);
  }
  .spec-bulk-pdf-btn {
    font-size: calc(14 / 16 * 1rem);
    padding: calc(12 / 16 * 1rem) calc(57 / 16 * 1rem) calc(12 / 16 * 1rem)
      calc(60 / 16 * 1rem);
  }
  .spec-bulk-pdf-btn img {
    width: calc(13 / 16 * 1rem);
  }
}

@media (max-width: 991px) {
  .spec-file-btn {
    padding: calc(4 / 16 * 1rem) 0.5rem calc(3 / 16 * 1rem);
  }
}

@media (min-width: 991px) {
  .lineup-spec__table th:nth-child(1),
  .lineup-spec__table td:nth-child(1) {
    width: calc(220 / 16 * 1rem);
  }
  .lineup-spec__table th:nth-child(2),
  .lineup-spec__table td:nth-child(2),
  .lineup-spec__table th:nth-child(3),
  .lineup-spec__table td:nth-child(3),
  .lineup-spec__table th:nth-child(4),
  .lineup-spec__table td:nth-child(4),
  .lineup-spec__table th:nth-child(5),
  .lineup-spec__table td:nth-child(5) {
    width: calc(96 / 16 * 1rem);
  }
  .lineup-spec__table th:nth-child(6),
  .lineup-spec__table td:nth-child(6),
  .lineup-spec__table th:nth-child(7),
  .lineup-spec__table td:nth-child(7) {
    width: calc(84 / 16 * 1rem);
  }
}

@media (min-width: 1200px) {
  .lineup-spec__table th:nth-child(1),
  .lineup-spec__table td:nth-child(1) {
    width: calc(248 / 16 * 1rem);
  }
}

/* ============================================================
   lineup-related：関連ページ
============================================================ */
.lineup-related {
  padding: calc(35 / 16 * 1rem) 0 calc(70 / 16 * 1rem);
}

.lineup-related .lineup-section-title {
  font-size: 1.625rem;
  font-weight: 900;
  line-height: 1.4375;
  color: var(--color-blue);
  text-align: center;
  margin: 0;
}

.lineup-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(16 / 16 * 1rem);
  margin-top: calc(24 / 16 * 1rem);
}

.lineup-related__item {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: var(--color-white);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); /* 16px */
  padding-bottom: 1rem;
  transition: opacity 0.3s;
}

.lineup-related__item:hover {
  opacity: 0.8;
}

.lineup-related__img {
  width: 100%;
  overflow: hidden;
}

.lineup-related__img img {
  aspect-ratio: 360/216;
  transition: transform 0.3s ease;
}

.lineup-related__item:hover .lineup-related__img img {
  transform: scale(1.05);
}

.lineup-related__cat,
.lineup-related__title {
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-blue);
  margin: 0;
  text-align: center;
}

.lineup-related__cat {
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .lineup-related {
    padding: calc(65 / 16 * 1rem) 0 calc(70 / 16 * 1rem);
  }
  .lineup-related .lineup-section-title {
    font-size: 2rem;
  }
  .lineup-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(29 / 16 * 1rem);
    padding-inline: calc(28 / 16 * 1rem);
  }
  .lineup-related__item {
    padding-bottom: 2rem;
  }
  .lineup-related__cat,
  .lineup-related__title {
    font-size: 1.25rem;
  }
}

/* ============================================================
   single-contents：本文エリア共通スタイル
============================================================ */

/* H2 */
.single-contents h2 {
  position: relative;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--color-white);
  background-color: var(--color-blue);
  padding: 0.625rem 1rem;
  margin: 2.5rem 0 0;
  line-height: calc(35 / 24);
}

.single-contents h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.3125rem;
  height: 1.5625rem;
  background-color: var(--color-red);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}

/* H3 */
.single-contents h3 {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: calc(26 / 18);
  padding-left: 0.75rem;
  margin: 0.5rem 0 0;
  position: relative;
}

.single-contents h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 0.1875rem;
  height: 1rem;
  background-color: var(--color-red);
}

/* ul */
.single-contents ul {
  padding-left: 0;
  list-style: none;
  margin: 0.5rem 0 0;
}

.single-contents ul li {
  position: relative;
  font-size: 1.125rem;
  font-weight: var(--fw-500);
  padding-left: 1.25rem;
  line-height: calc(24 / 16);
  margin: 0.5rem 0 0;
}

.single-contents ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-red);
}

/* p */
.single-contents p {
  font-size: 1.125rem;
  font-weight: var(--fw-400);
  margin: 0.5rem 0 0;
}

.single-contents p strong {
  font-weight: 700;
  color: var(--color-red);
}

/* 注釈テキスト */
.single-contents p.annotation {
  font-size: 0.875rem;
  font-weight: var(--fw-400);
  margin: 0.5rem 0 0;
  text-indent: -1em;
  padding-left: 1em;
}

/* 囲みボックス */
.single-contents .line-box,
.single-contents .is-style-line-box {
  border: 0.0625rem solid var(--color-blue);
  padding: 1rem 1.25rem;
  margin: 0.5rem 0 0;
  color: var(--color-blue);
}

.single-contents .line-box p:not(:first-of-type),
.single-contents .is-style-line-box p:not(:first-of-type) {
  margin: 0.5rem 0 0;
}

.single-contents .line-box p,
.single-contents .is-style-line-box p {
  margin-bottom: 0 !important;
  font-size: 1rem;
  font-weight: 500;
}

.single-contents .line-box ul,
.single-contents .is-style-line-box ul {
  margin: 0.5rem 0 0;
}

.single-contents .line-box ul li,
.single-contents .is-style-line-box li {
  font-size: 1rem;
}

/* table */
.single-contents table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 0;
}

.single-contents table tr {
  border-top: 0.0625rem solid #a8a8a8;
  border-bottom: 0.0625rem solid #a8a8a8;
}

.single-contents table td {
  padding: 1rem 1.25rem;
  vertical-align: middle;
  font-size: 1rem;
  line-height: calc(24 / 16);
  font-weight: var(--fw-400);
}

.single-contents table td:first-child {
  background-color: var(--color-light-blue);
  color: var(--color-blue);
  font-weight: var(--fw-700);
  width: 30%;
  white-space: nowrap;
}

/* a */
.single-contents a {
  font-size: 1.125rem;
  font-weight: var(--fw-500);
  line-height: calc(29 / 20);
  color: var(--color-blue);
  text-decoration: underline;
  transition:
    color 0.3s,
    opacity 0.3s;
}

.single-contents a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.single-contents * + * {
  margin-top: 0.5rem;
}

.single-contents .two-column {
  margin: calc(12 / 16 * 1rem) 0 0;
  gap: calc(16 / 16 * 1rem);
}

.single-contents .two-column figure {
  border-radius: calc(8 / 16 * 1rem);
  overflow: hidden;
}

.single-contents .two-column img {
  aspect-ratio: 392/236;
}

@media (min-width: 768px) {
  .single-contents h2 {
    font-size: 1.5rem;
    padding: 0.75rem 1.5rem 0.875rem 2rem;
  }

  .single-contents h3 {
    font-size: 1.125rem;
    padding-left: 0.625rem;
    border-width: 0.25rem;
  }

  .single-contents h3::before {
    top: 0.4375rem;
  }

  .single-contents li {
    font-size: 1rem;
  }

  .single-contents p {
    font-size: 1rem;
    font-weight: var(--fw-400);
    margin: 0.5rem 0 0;
  }

  .single-contents a {
    font-size: 1.25rem;
  }

  .single-contents p.annotation {
    font-size: 0.75rem;
  }

  .single-contents table td:first-child {
    width: 17.3125rem;
  }
}

/* ============================================================
   case-single：事例詳細ページ
============================================================ */

.case-single {
  padding: calc(30 / 16 * 1rem) 0 calc(50 / 16 * 1rem);
  opacity: 1;
}

@media (min-width: 768px) {
  .case-single {
    padding: calc(30 / 16 * 1rem) 0 calc(60 / 16 * 1rem);
  }
}

/* ヘッダー行：取引先名 / タクソノミー・日付 */
.case-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

/* 取引先名 */
.case-header__client {
  font-size: calc(20 / 16 * 1rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-blue);
  margin: 0;
}

/* 右側：タクソノミー・日付 */
.case-header__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* タクソノミー（case-type） */
.case-header__term {
  font-size: calc(16 / 16 * 1rem);
  font-weight: 700;
  line-height: 1.41666667;
  color: var(--color-blue);
  display: inline-block;
  padding: calc(3 / 16 * 1rem) calc(11 / 16 * 1rem) calc(2 / 16 * 1rem);
  border: 0.0625rem solid var(--color-blue);
}

/* 日付 */
.case-header__date {
  font-family: var(--open-sans);
  font-size: calc(16 / 16 * 1rem);
  font-weight: 400;
  line-height: 1.35714286;
  color: #666666;
}

/* 投稿タイトル */
.case-title {
  font-size: calc(24 / 16 * 1rem);
  font-weight: 900;
  line-height: calc(58 / 40);
  margin: 0.5rem 0 0;
}

/* アイキャッチ */
.case-eyecatch {
  margin: calc(16 / 16 * 1rem) 0 0;
  border-radius: calc(8 / 16 * 1rem);
  overflow: hidden;
}

.case-eyecatch__img {
  aspect-ratio: 800 / 480;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* 本文エリア */
.case-content {
  margin-top: calc(8 / 16 * 1rem);
}

@media (min-width: 768px) {
  .case-header {
    flex-direction: row;
    gap: 1rem;
  }
  .case-header__right {
    margin: 0;
  }
  .case-header__term {
    font-size: calc(12 / 16 * 1rem);
    padding: 0 calc(11 / 16 * 1rem) calc(2 / 16 * 1rem);
  }
  .case-header__date {
    font-size: calc(14 / 16 * 1rem);
  }
  .case-title {
    font-size: calc(32 / 16 * 1rem);
    margin: 0.125rem 0 0;
  }
  .case-eyecatch {
    margin-top: calc(20 / 16 * 1rem);
  }
}

/* ============================================================
   case-related：関連ページセクション
============================================================ */
.case-related {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: calc(70 / 16 * 1rem) 0 calc(50 / 16 * 1rem);
}

.case-related .container {
  max-width: 1180px !important;
  padding-inline: 1.25rem;
  margin-inline: auto;
}

/* セクションタイトル */
.case-related__title {
  font-size: calc(26 / 16 * 1rem);
  font-weight: 900;
  line-height: calc(46 / 32);
  color: var(--color-blue);
  text-align: center;
  margin: 0;
}

/* グリッド margin-top（case-card-grid のグリッドレイアウトは archive-case.css で定義） */
.case-related__grid {
  margin-top: calc(16 / 16 * 1rem);
}

@media (min-width: 768px) {
  .case-related {
    padding: calc(100 / 16 * 1rem) 0 calc(100 / 16 * 1rem);
  }
  .case-related__title {
    font-size: calc(32 / 16 * 1rem);
  }
  .case-related__grid {
    gap: calc(29 / 16 * 1rem);
    margin-top: calc(24 / 16 * 1rem);
  }
}

/* ============================================================
   post-single：通常投稿 詳細ページ
============================================================ */

.single-post .site-body {
  padding: calc(30 / 16 * 1rem) 0 calc(50 / 16 * 1rem);
  opacity: 1;
}

.post-title {
  font-size: calc(24 / 16 * 1rem);
  font-weight: 900;
  line-height: calc(46 / 32);
  color: var(--color-black);
  margin: 0;
}

.post-date {
  font-family: var(--open-sans);
  font-size: calc(16 / 16 * 1rem);
  font-weight: 400;
  line-height: calc(19 / 14);
  color: #666666;
  margin: 0;
}

.post-eyecatch {
  margin-top: calc(15 / 16 * 1rem);
}

.post-content {
  margin-top: calc(15 / 16 * 1rem);
}

@media (min-width: 768px) {
  .single-post .site-body {
    padding: calc(60 / 16 * 1rem) 0 calc(160 / 16 * 1rem);
  }
  .post-title {
    font-size: calc(32 / 16 * 1rem);
  }

  .post-date {
    font-size: calc(14 / 16 * 1rem);
  }

  .post-eyecatch {
    margin-top: calc(20 / 16 * 1rem);
  }

  .post-content {
    margin-top: calc(20 / 16 * 1rem);
  }
}

/* ============================================================
   スクロールアニメーション：lineup-header / lineup-gallery
   （single-product.js + Intersection Observer 連動）
   prefers-reduced-motion: reduce の場合は無効化
============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* --- ヘッダー：カテゴリ・タイトル・リード文 --- */
  html.js .lineup-category,
  html.js .lineup-title,
  html.js .lineup-lead {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.6s ease,
      transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  html.js .lineup-category.is-in-view,
  html.js .lineup-title.is-in-view,
  html.js .lineup-lead.is-in-view {
    opacity: 1;
    transform: none;
  }

  /* --- ギャラリー：メイン画像 --- */
  html.js .lineup-main-img-wrapper {
    opacity: 0;
    transform: scale(0.97);
    transition:
      opacity 0.75s ease,
      transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  html.js .lineup-main-img-wrapper.is-in-view {
    opacity: 1;
    transform: none;
  }

  /* --- ギャラリー：サムネイル（JS でスタッガー遅延を上書き） --- */
  html.js .lineup-gallery__thumb-wrapper {
    opacity: 0;
    transform: translateY(16px);
    /* border-color の transition は既存定義に加算 */
    transition:
      opacity 0.5s ease,
      transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      border-color 0.3s ease;
  }
  html.js .lineup-gallery__thumb-wrapper.is-in-view {
    opacity: 1;
    transform: none;
  }
  /* is-in-view 後は ::after / border-color の既存 hover を通常通り適用 */
}

/* ============================================================
   スクロールアニメーション：case-header / case-title / case-eyecatch
   （single-case.js + Intersection Observer 連動）
   prefers-reduced-motion: reduce の場合は無効化
============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* --- ヘッダー内要素：取引先名・タクソノミー行（JS で遅延上書き） --- */
  html.js .case-header__client,
  html.js .case-header__right {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.55s ease,
      transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  html.js .case-header__client.is-in-view,
  html.js .case-header__right.is-in-view {
    opacity: 1;
    transform: none;
  }

  /* --- 投稿タイトル --- */
  html.js .case-title {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.65s ease,
      transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  html.js .case-title.is-in-view {
    opacity: 1;
    transform: none;
  }

  /* --- アイキャッチ：スケール + フェードイン --- */
  html.js .case-eyecatch {
    opacity: 0;
    transform: scale(0.97);
    transition:
      opacity 0.75s ease,
      transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  html.js .case-eyecatch.is-in-view {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   スクロールアニメーション：post-title / post-date / post-eyecatch
   （single-post.js + Intersection Observer 連動）
   prefers-reduced-motion: reduce の場合は無効化
============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* --- タイトル --- */
  html.js .post-title {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.6s ease,
      transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  html.js .post-title.is-in-view {
    opacity: 1;
    transform: none;
  }

  /* --- 日付 --- */
  html.js .post-date {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.55s ease,
      transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  html.js .post-date.is-in-view {
    opacity: 1;
    transform: none;
  }

  /* --- アイキャッチ：スケール + フェードイン --- */
  html.js .post-eyecatch {
    opacity: 0;
    transform: scale(0.97);
    transition:
      opacity 0.75s ease,
      transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  html.js .post-eyecatch.is-in-view {
    opacity: 1;
    transform: none;
  }

  /* --- 本文 --- */
  html.js .post-content,
  html.js .case-content {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s ease,
      transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  html.js .post-content.is-in-view,
  html.js .case-content.is-in-view {
    opacity: 1;
    transform: none;
  }
}