:root {
  --h-journal: 2058px;
  --journal-x: 180px;
  --journal-top: 100px;
  --journal-card-w: 1079px;
  --journal-card-h: 532px;
  --journal-card-first-gap: 70px;
  --journal-card-gap: 70px;
}

.journal {
  height: var(--h-journal);
  background: var(--c-bg);
  overflow: hidden;
}

/* 007: トップの JOURNAL セクションは非表示（ナビには残して Coming soon 表記） */
.journal {
  display: none;
}

.journal__inner {
  position: relative;
  z-index: 1;
  width: var(--journal-card-w);
  margin-left: var(--journal-x);
  padding-top: var(--journal-top);
}

.journal-card {
  position: relative;
  width: var(--journal-card-w);
  height: var(--journal-card-h);
  margin-top: var(--journal-card-gap);
}

.journal-card:first-of-type {
  margin-top: var(--journal-card-first-gap);
}

.journal-card__meta {
  position: absolute;
  top: 20px;
  left: 0;
  width: 539.5px;
  height: 122px;
}

.journal-card__number {
  width: fit-content;
  margin-left: 0;
  padding: 5px 2px;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  color: #000;
  font-family: var(--font-grotesk);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 17.4px;
  letter-spacing: 1.2px;
  text-align: left;
}

.journal-card h3 {
  width: 300px;
  margin-top: 15px;
  color: #000;
  font-family: var(--font-serif);
  font-size: var(--fs-21);
  font-weight: 500;
  line-height: 30.5px;
  letter-spacing: 2.1px;
  text-align: left;
  font-feature-settings: "palt";
}

.journal-card__category,
.journal-card time {
  display: block;
  width: max-content;
  color: #000;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 17.4px;
  letter-spacing: 1.2px;
  text-align: left;
}

.journal-card__category {
  margin-top: 10px;
}

.journal-card time {
  margin-top: 10px;
  color: var(--c-line);
}

.journal-card__view {
  position: absolute;
  top: 125px;
  left: 982px;
}

.journal-card__carousel {
  position: absolute;
  top: 162px;
  left: 0;
  display: flex;
  gap: 5px;
  width: var(--journal-card-w);
  height: 370px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}

.journal-card__carousel::-webkit-scrollbar {
  display: none;
}

.journal-card__carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.journal-card__carousel img,
.journal-card__placeholder {
  scroll-snap-align: start;
  -webkit-user-drag: none;
  user-select: none;
}

.journal-card__carousel img,
.journal-card__placeholder {
  flex: 0 0 auto;
  width: 493px;
  height: 370px;
  max-width: none;
  background: var(--c-bg-alt);
}

.journal-card__carousel img {
  object-fit: cover;
}

.journal-card__placeholder {
  display: block;
  background:
    var(--c-accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-dasharray='1.4 8.5' stroke-linecap='round'%3E%3Cellipse cx='118' cy='64' rx='46' ry='24' transform='rotate(0 100 100)'/%3E%3Cellipse cx='118' cy='64' rx='46' ry='24' transform='rotate(60 100 100)'/%3E%3Cellipse cx='118' cy='64' rx='46' ry='24' transform='rotate(120 100 100)'/%3E%3Cellipse cx='118' cy='64' rx='46' ry='24' transform='rotate(180 100 100)'/%3E%3Cellipse cx='118' cy='64' rx='46' ry='24' transform='rotate(240 100 100)'/%3E%3Cellipse cx='118' cy='64' rx='46' ry='24' transform='rotate(300 100 100)'/%3E%3C/g%3E%3C/svg%3E")
    no-repeat center / contain;
}

.journal-card__carousel img:nth-child(2),
.journal-card__placeholder:nth-child(2) {
  width: 494px;
}

/* ===== Tablet/Mobile 共通（Figma 1:490 / 1:727 倉ジャーナル 実測）
       全幅写真 → 見出し「倉 ジャーナル」左 ＋ 右へ流れる横スクロールカルーセル。
       カード = 画像3枚(493×370, gap0) ＋ 画像下のメタ（次カード側へ张り出す） ===== */
@media (max-width: 1024px) {
  :root {
    --h-journal: auto;
    --journal-head-x: 5%;          /* 40/800 */
    --journal-strip-pad: 221px;    /* 先頭画像の左オフセット */
  }

  .journal {
    height: auto;
    padding-bottom: 200px;
  }


  .journal__inner {
    display: flex;
    width: auto;
    margin: 60px 0 0;
    padding: 0 0 0 var(--journal-strip-pad);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .journal__inner::-webkit-scrollbar {
    display: none;
  }

  .journal__inner > .section-title {
    display: none;                  /* 英字 JOURNAL は使わない */
  }

  .journal-card {
    flex: 0 0 auto;
    width: 1079px;                  /* 画像2枚ぶん + メタ張り出し領域 */
    height: 567px;                  /* 370 + メタ 197 */
    margin: 0;
  }

  .journal-card:first-of-type {
    margin-top: 0;
  }

  .journal-card__carousel {
    top: 0;
    gap: 0;
    width: 1479px;                  /* 493×3 */
    height: 370px;
  }

  .journal-card__carousel img,
  .journal-card__carousel img:nth-child(2),
  .journal-card__placeholder,
  .journal-card__placeholder:nth-child(2) {
    width: 493px;
    height: 370px;
  }

  .journal-card__meta {
    top: 393px;
    left: 544.5px;
    width: 229px;
    height: auto;
  }

  .journal-card h3 {
    margin-top: 47px;
  }

  .journal-card__view {
    top: 530px;
    left: 442.5px;
    right: auto;
  }
}

/* ===== Mobile ≤560（Figma 1:727。構成は tablet と同一、寸法のみ） ===== */
@media (max-width: 560px) {
  :root {
    --journal-head-x: 8%;          /* 30/375 */
    --journal-strip-pad: 202px;    /* 先頭画像 x202 */
  }

  /* mobile 総高を ref(7064) へ寄せる。倉ジャーナル末尾の過大余白を圧縮（下パディングのみ＝重なりリスクなし） */
  .journal {
    padding-bottom: 90px;
  }

}