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

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

.journal__wide {
  position: absolute;
  z-index: 0;
  top: var(--journal-wide-top);
  left: 0;
  width: 1439px;
  height: 800px;
  max-width: none;
  object-fit: cover;
}

.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: 88px;
  height: 23px;
  margin-left: 0;
  padding-top: 3px;
  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: center;
}

.journal-card h3 {
  width: 229px;
  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: center;
  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: center;
}

.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: visible;
}

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

.journal-card__carousel img: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-wide-h: 526.3px;
    --journal-head-x: 5%;          /* 40/800 */
    --journal-strip-pad: 221px;    /* 先頭画像の左オフセット */
  }

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

  .journal__wide {
    position: static;
    display: block;
    width: 100%;
    height: var(--journal-wide-h);
  }

  /* Figma 倉ジャーナル: 見出し（左）＋ 破線紋の橙ブロック（右）を1行に並べ、
     カルーセルはその下へ流す。in-flow のため重なりが起きない。 */
  .journal__title-jp {
    display: flex;
    align-items: center;
    gap: 3%;
    position: relative;
    top: auto;
    left: auto;
    width: 90%;
    margin: 176px 0 0 var(--journal-head-x);
    font-size: var(--fs-26);
    line-height: 37.7px;
    letter-spacing: 2.6px;
    white-space: nowrap;
  }

  .journal__title-jp::after {
    content: "";
    flex: 1 1 auto;
    align-self: stretch;
    /* Figma 倉ジャーナル: 橙ブロックは縦長の正方形寄り（現状の横帯より高い）。
       in-flow flex のためリフローのみで重なりなし。紋(contain)も追従して拡大 */
    min-height: 300px;
    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__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) {
    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-wide-h: 246.7px;
    --journal-head-x: 8%;          /* 30/375 */
    --journal-strip-pad: 202px;    /* 先頭画像 x202 */
  }

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

  /* 見出しは狭い左カラムに押し込んで「倉 ジャーナ / ル」の2行折返しを維持しつつ、
     右側の橙ブロックが残り幅を占める（tablet と同一構成・寸法のみ mobile 値） */
  .journal__title-jp {
    width: 84%;
    gap: 5%;
    text-align: left;
    white-space: normal;
    margin-top: 150px;
  }

  .journal__title-jp::after {
    flex: 1 0 56%;
    min-height: 130px;
  }
}