/* Otonacica JOURNAL一覧ページ専用CSS */

.journal-page {
  --journal-green: #35483d;
  --journal-green-dark: #26382f;
  --journal-coral: #e57c65;
  --journal-paper: #f7f3eb;
  --journal-muted: #74766f;
  --journal-line: #dedbd2;
  background: var(--journal-paper);
}

.journal-page .header { color: var(--journal-green-dark); }
.journal-page .header .login { border-color: rgba(38, 56, 47, .25); }
.journal-main { padding-bottom: 100px; }

.journal-hero {
  position: relative;
  padding: 87px 20px 91px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(229, 124, 101, .16), transparent 24rem),
    radial-gradient(circle at 86% 78%, rgba(53, 72, 61, .13), transparent 28rem),
    #f5f1e8;
  text-align: center;
}

.journal-hero::after {
  position: absolute;
  right: 7%;
  bottom: -62px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(53, 72, 61, .13);
  border-radius: 50%;
  content: "";
}

.journal-hero__label,
.journal-section-heading > p {
  margin: 0 0 12px;
  color: var(--journal-coral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;
}

.journal-hero h1 {
  margin: 0 0 18px;
  color: var(--journal-green-dark);
  font: 500 42px/1.45 Georgia, "Times New Roman", "Noto Serif JP", serif;
  letter-spacing: .08em;
}

.journal-hero__lead {
  margin: 0;
  color: var(--journal-muted);
  font-size: 14px;
  line-height: 2;
}

.sp-only { display: none; }
.journal-content { padding-top: 76px; }
.journal-feature { margin-bottom: 88px; }
.journal-section-heading { margin-bottom: 28px; text-align: center; }
.journal-section-heading--left { text-align: left; }

.journal-section-heading h2 {
  margin: 0;
  color: var(--journal-green-dark);
  font: 500 27px/1.5 Georgia, "Times New Roman", "Noto Serif JP", serif;
  letter-spacing: .07em;
}

.feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr);
  min-height: 430px;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 45px rgba(38, 56, 47, .09);
}

.feature-card__image { overflow: hidden; background: #e8e4dc; }
.feature-card__image img,
.article-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .55s ease;
}

.feature-card:hover .feature-card__image img,
.article-card:hover .article-card__image img { transform: scale(1.035); }

.feature-card__body {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.article-category {
  width: fit-content;
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 20px;
  color: var(--journal-green);
  background: rgba(53, 72, 61, .09);
  font-size: 11px;
  font-weight: 700;
}

.feature-card time {
  margin: 17px 0 12px;
  color: #99988f;
  font: 10px Georgia, serif;
  letter-spacing: .08em;
}

.feature-card h3 {
  margin: 0 0 19px;
  color: var(--journal-green-dark);
  font: 500 25px/1.65 Georgia, "Times New Roman", "Noto Serif JP", serif;
}

.feature-card__body > p {
  margin: 0;
  color: #686a65;
  font-size: 13px;
  line-height: 1.95;
}

.article-more {
  margin-top: 27px;
  color: var(--journal-coral);
  font: 700 10px Georgia, serif;
  letter-spacing: .17em;
}

.article-more i { margin-left: 9px; font-style: normal; }
.journal-filter { margin-bottom: 82px; }

.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 8px;
  padding-top: 3px;
}

.category-filter a {
  display: inline-flex;
  min-height: 37px;
  padding: 0 15px;
  align-items: center;
  border: 1px solid var(--journal-line);
  border-radius: 20px;
  color: #62645f;
  background: rgba(255, 255, 255, .52);
  font-size: 12px;
  transition: .2s ease;
}

.category-filter a:hover,
.category-filter a:focus-visible,
.category-filter a.is-current {
  border-color: var(--journal-green);
  color: #fff;
  background: var(--journal-green);
}

.journal-archive__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--journal-line);
}

.journal-archive__head .journal-section-heading { margin-bottom: 21px; }
.journal-count { margin: 0 0 23px; color: #8a8a83; font-size: 11px; }

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 54px 28px;
}

.article-card { min-width: 0; }
.article-card__image {
  height: 220px;
  display: block;
  overflow: hidden;
  border-radius: 11px;
  background: #e8e4dc;
}

.article-card__body { padding: 17px 3px 0; }
.article-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.article-card__meta time { flex: 0 0 auto; color: #99988f; font: 10px Georgia, serif; letter-spacing: .05em; }

.article-card h3 {
  margin: 15px 0 10px;
  color: var(--journal-green-dark);
  font: 500 18px/1.65 Georgia, "Times New Roman", "Noto Serif JP", serif;
}

.article-card h3 a:hover { color: var(--journal-coral); }
.article-card__body > p { margin: 0; color: #777872; font-size: 12px; line-height: 1.8; }

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 74px;
}

.pagination a,
.pagination span {
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  border: 1px solid var(--journal-line);
  border-radius: 50%;
  color: #656761;
  background: rgba(255, 255, 255, .55);
  font-size: 12px;
}

.pagination a:hover,
.pagination .is-current { border-color: var(--journal-green); color: #fff; background: var(--journal-green); }
.pagination__next { margin-left: 7px; }

@media (max-width: 900px) {
  .feature-card { grid-template-columns: 1.15fr 1fr; }
  .feature-card__body { padding: 38px 34px; }
  .feature-card h3 { font-size: 22px; }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .journal-page .menu { border-color: rgba(38, 56, 47, .25); background: transparent; }
  .journal-page .menu i { background: var(--journal-green-dark); }
  .journal-main { padding-bottom: 65px; }
  .journal-hero { padding: 59px 18px 61px; }
  .journal-hero h1 { font-size: 29px; letter-spacing: .04em; }
  .journal-hero__lead { font-size: 13px; }
  .sp-only { display: block; }
  .journal-content { padding-top: 48px; }
  .journal-feature { margin-bottom: 62px; }
  .journal-section-heading { margin-bottom: 21px; text-align: left; }
  .journal-section-heading h2 { font-size: 23px; }
  .feature-card { display: block; min-height: 0; border-radius: 13px; }
  .feature-card__image { height: 235px; }
  .feature-card__body { padding: 27px 23px 31px; }
  .feature-card time { margin: 14px 0 10px; }
  .feature-card h3 { margin-bottom: 13px; font-size: 20px; }
  .feature-card__body > p { font-size: 12px; }
  .article-more { margin-top: 20px; }
  .journal-filter { margin: 0 -16px 61px; }
  .journal-filter .journal-section-heading { padding: 0 16px; }
  .category-filter {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .category-filter::-webkit-scrollbar { display: none; }
  .category-filter a { flex: 0 0 auto; }
  .journal-archive__head { margin-bottom: 23px; }
  .journal-archive__head .journal-section-heading { margin-bottom: 17px; }
  .journal-count { margin-bottom: 19px; }
  .article-grid { grid-template-columns: 1fr; gap: 38px; }
  .article-card__image { height: min(64vw, 300px); }
  .article-card__body { padding-top: 14px; }
  .article-card h3 { margin-top: 13px; font-size: 17px; }
  .pagination { margin-top: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  .journal-page *,
  .journal-page *::before,
  .journal-page *::after { transition: none !important; }
}