/* ================================
   Journal Top Page
   ../css/journal.css
   ================================ */

/* 全体の余白調整（他ページとのバランス次第で微調整可） */
.journal-intro,
.journal-articles {
  margin: 0 auto;
  margin-bottom:25px;
}

/* intro 部分 --------------------------------------- */

.journal-intro-lead {
  line-height: 1.7;
}

.journal-intro-text {
  margin-top: 8px;
  line-height: 1.7;
}

/* 記事リスト --------------------------------------- */

.journallist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* 各カード */
.journal-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* 全面リンク化 */
.journal-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* サムネイル */
.journal-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* テキスト部分 */
.journal-meta {
  padding: 16px 16px 18px 16px;
}

.journal-number {
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}

.journal-title {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 8px 0;
}

.journal-excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  opacity: 0.85;
}

/* hover効果（PC想定） */
.journal-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.journal-item:hover .journal-title {
  text-decoration: underline;
}

/* レスポンシブ --------------------------------------- */

@media (min-width: 600px) {
  .journal-articles {
    padding-top: 8px;
  }

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

@media (min-width: 960px) {
  .journallist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .journal-meta {
    padding: 18px 18px 22px 18px;
  }

  .journal-title {
    font-size: 1.1rem;
  }
}





/* Journal article title on detail pages */
.headtype_journal {
  font-weight: 900;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

/* Hero image area (type B：横100％／縦をトリミング) */
.journal-hero {
  margin-bottom: 10px;
}

.journal-hero-thumb {
  width: 100%;
  height: 200px;        /* スマホ時の縦幅を固定 */
  overflow: hidden;
}

.journal-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* はみ出した分をトリミング */
  object-position: center center; /* 上下左右とも中央基準にする */
  display: block;
}

@media (min-width: 768px) {
  .journal-hero-thumb {
    height: 250px;      /* PC幅のときの縦幅 */
  }
}


/* “Journal 0” のラベルを少し薄く・小さく */
.journal-article-header .number {
  font-size: 18px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom:0px;
}

/* 記事下の Articles リスト用（スマホ2列／PC4列） */
.journallist-article {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 1024px) {
  .journallist-article {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}