.index-journal {
  background-image: url("https://aming.itembox.design/item/img/journal-bg.jpg");
}

.index-journal__inner {
  width: 100%;
  max-width: 153.6rem;
  /* レスポンシブなパディング（上下 / 左右を clamp で制御） */
  padding-block: clamp(20px, 3.5vw, 55px);
  padding-inline: clamp(16px, 4vw, 40px);
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 960px) {
  .index-journal__inner {
    padding-block: clamp(16px, 3.2vw, 32px);
    padding-inline: clamp(12px, 3.5vw, 20px);
  }
}

.index-journal__wrapper {
  border-radius: 4rem;
  background-color: #FFF; /* was mixin.cssV('color', 'white') */
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.05);
  /* wrapper のパディングも clamp で可変に */
  padding-block: clamp(28px, 4.5vw, 72px);
  padding-inline: clamp(20px, 6vw, 88px);
}
@media only screen and (max-width: 960px) {
  .index-journal__wrapper {
    padding-block: clamp(16px, 3.2vw, 48px);
    padding-inline: 0;
    border-radius: 2rem;
  }
}

@media only screen and (max-width: 960px) {
  .index-journal__archive {
    /* タブ以下では左右の余白を小さくする（既存の意図を維持） */
    padding-inline: clamp(12px, 4vw, 20px);
  }
}

.index-journal__archive-head {
  display: flex;
  gap: 2rem 6.3rem;
  align-items: center;
  /* 下部パディングは clamp で可変に */
  padding-bottom: clamp(12px, 2.2vw, 25px);
  background-image: repeating-linear-gradient(to right, #DCDCDC 0px 3px, transparent 3px 6px);
  background-position: bottom left;
  background-repeat: repeat-x;
  background-size: auto 2px;
  flex-wrap: wrap;
}
@media only screen and (max-width: 960px) {
  .index-journal__archive-head {
    gap: 0rem 2rem;
    padding-bottom: 1.8rem;
    flex-direction: column;
    background-image: none;
  }
}

.index-journal__title {
  display: flex;
  flex-direction: column;
}

.index-journal__title--en {
  font-family: "Cormorant Garamond", serif;
  color: #5A8663; /* was mixin.cssV('color', 'main') */
  font-size: 1.8rem;
  font-weight: 600;
}
@media only screen and (max-width: 960px) {
  .index-journal__title--en {
    font-size: 1.3rem;
  }
}

.index-journal__title--jp {
  font-family: "Shippori Mincho", "YuMincho", "游明朝", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "Noto Serif Japanese", "serif, Century";
  font-size: 3.2rem;
  font-weight: 500;
}
@media only screen and (max-width: 960px) {
  .index-journal__title--jp {
    font-size: 2rem;
  }
}

.index-journal__intro {
  font-family: "Shippori Mincho", "YuMincho", "游明朝", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "Noto Serif Japanese", "serif, Century";
  font-weight: 700;
  line-height: 1.5;
  color: #464646;
  font-size: 1.6rem;
}
@media only screen and (max-width: 960px) {
  .index-journal__intro {
    font-size: 1.3rem;
    margin-top: 1.9rem;
  }
}

.index-journal__article-card__thumbnail {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  margin: 0;
}
.index-journal__article-card__thumbnail .index-journal__article-card__new {
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 5rem;
}
@media only screen and (max-width: 960px) {
  .index-journal__article-card__thumbnail .index-journal__article-card__new {
    width: 3rem;
    height: 3rem;
  }
}
.index-journal__article-card__thumbnail .index-journal__article-card__new img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.index-journal__archive-body {
  margin-top: 5.2rem;
}
@media only screen and (max-width: 960px) {
  .index-journal__archive-body {
    margin-top: 2.4rem;
  }
}

.index-journal__archive-body__title,
.index-journal__buyer__title {
  font-family: "Shippori Mincho", "YuMincho", "游明朝", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "Noto Serif Japanese", "serif, Century";
  font-weight: 500;
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 4rem;
  color: #464646;
}
@media only screen and (max-width: 960px) {
  .index-journal__archive-body__title,
  .index-journal__buyer__title {
    font-size: 2rem;
    margin-bottom: 2.4rem;
  }
}

.index-journal__archive-body__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem 4rem;
  grid-template-areas: "large medium01" "large medium02" "large medium03";
}
@media screen and (max-width: 1200px) {
  .index-journal__archive-body__list {
    grid-template-columns: 1fr;
    grid-template-areas: "large" "medium01" "medium02" "medium03";
    gap: 2.4rem 1.6rem;
  }
}

.index-journal__article-card--large {
  grid-area: large;
}
@media screen and (max-width: 1200px) {
  .index-journal__article-card--large .index-journal__article-card__thumbnail {
    width: 100%;
  }
  .index-journal__article-card--large .index-journal__article-card__thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
.index-journal__article-card--large .index-journal__article-card__title {
  font-size: 1.8rem;
  margin-top: 1.7rem;
}
@media only screen and (max-width: 960px) {
  .index-journal__article-card--large .index-journal__article-card__title {
    font-size: 1.4rem;
    margin-top: 1.2rem;
  }
}
.index-journal__article-card--large .index-journal__article-card__body {
  margin-top: 1.9rem;
}
@media only screen and (max-width: 960px) {
  .index-journal__article-card--large .index-journal__article-card__body {
    margin-top: 1.2rem;
  }
}
.index-journal__article-card--medium01 {
  grid-area: medium01;
}
.index-journal__article-card--medium02 {
  grid-area: medium02;
}
.index-journal__article-card--medium03 {
  grid-area: medium03;
}
.index-journal__article-card--medium {
  display: flex;
}
.index-journal__article-card--medium .index-journal__article-card__link {
  width: 100%;
  display: flex;
  gap: 2rem;
}
.index-journal__article-card--medium .index-journal__article-card__thumbnail {
  width: 20rem;
  aspect-ratio: 16/9;
}
.index-journal__article-card--medium .index-journal__article-card__body {
  width: calc(100% - 20rem);
}
@media only screen and (max-width: 960px) {
  .index-journal__article-card--medium {
    display: block;
  }
  .index-journal__article-card--medium .index-journal__article-card__link {
    display: flex;
    gap: 1.2rem;
  }
  .index-journal__article-card--medium .index-journal__article-card__meta-category {
    display: none !important;
  }
  .index-journal__article-card--medium .index-journal__article-card__meta-series {
    display: none !important;
  }
  .index-journal__article-card--medium .index-journal__article-card__thumbnail {
    width: 11.9rem;
    aspect-ratio: 16/9;
    margin-bottom: 1.2rem;
  }
  .index-journal__article-card--medium .index-journal__article-card__body {
    width: calc(100% - 11.9rem);
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
  }
  .index-journal__article-card--medium .index-journal__article-card__meta-date {
    margin-top: 2rem;
  }
  .index-journal__article-card--medium .index-journal__article-card__title {
    font-size: 1.4rem;
    margin-top: 0;
  }
}

.index-journal__article-card__link {
  width: 100%;
  text-decoration: none;
}

.index-journal__article-card__meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.index-journal__article-card__meta > .index-journal__article-card__meta-date {
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: 400;
  color: #A0A0A0; /* was mixin.cssV('color', 'gray') */
  white-space: nowrap;
}
@media only screen and (max-width: 960px) {
  .index-journal__article-card__meta > .index-journal__article-card__meta-date {
    font-size: 1.1rem;
  }
}
.index-journal__article-card__meta > .index-journal__article-card__meta-category,
.index-journal__article-card__meta > .index-journal__article-card__meta-series {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.index-journal__article-card__meta-series {
  padding: 0.4rem 1.6rem;
  border: 1px solid #DCDCDC;
  border-radius: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: initial;
  color: #3C3C3C; /* was mixin.cssV('color', 'text') */
  font-size: 1.2rem;
}
@media only screen and (max-width: 960px) {
  .index-journal__article-card__meta-series {
    padding: 0.3rem 1rem;
    font-size: 9px;
    min-width: auto;
    height: auto;
  }
}

.index-journal__article-card__meta-date {
  font-size: 1.4rem;
  font-weight: 500;
  color: #A0A0A0; /* was mixin.cssV('color', 'gray') */
}
@media only screen and (max-width: 960px) {
  .index-journal__article-card__meta-date {
    font-size: 1.1rem;
  }
}

.index-journal__article-card__title {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 400;
  margin-top: 1.7rem;
  color: #3C3C3C; /* was mixin.cssV('color', 'text') */
}
@media only screen and (max-width: 960px) {
  .index-journal__article-card__title {
    font-size: 1.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1.2rem;
  }
}

.index-journal__article-card__meta-category {
  min-width: 11.2rem;
  height: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: initial;
  font-size: 1.2rem;
  color: #3C3C3C; /* was mixin.cssV('color', 'text') */
}
.index-journal__article-card__meta-category.category-living {
  background-color: #E6DAC2;
}
.index-journal__article-card__meta-category.category-work {
  background-color: #C1EAE7;
}
.index-journal__article-card__meta-category.category-food {
  background-color: #f8d2ac;
}
.index-journal__article-card__meta-category.category-beauty {
  background-color: #e4d6e8;
}
.index-journal__article-card__meta-category.category-fashion {
  background-color: #c9e3c6;
}
@media only screen and (max-width: 960px) {
  .index-journal__article-card__meta-category {
    padding: 0.3rem 1rem;
    font-size: 0.9rem;
    min-width: auto;
    height: auto;
  }
}

.index-journal__buyer {
  /* レスポンシブ padding に変更 */
  padding-block: clamp(20px, 4vw, 55px);
  padding-inline: clamp(12px, 4vw, 0px);
}
@media only screen and (max-width: 960px) {
  .index-journal__buyer {
    padding-block: clamp(16px, 3.2vw, 32px);
    padding-inline: 0;
  }
}

.index-journal__buyer__inner {
  background-color: #F8FAF5;
  /* 上下左右を clamp でレスポンシブ化（元の意図: 41px 100px 59px） */
  padding-block: clamp(20px, 3.5vw, 59px);
  padding-inline: clamp(16px, 6vw, 100px);
}
@media only screen and (max-width: 960px) {
  .index-journal__buyer__inner {
    padding-block: 2.4rem;
    padding-inline: 2rem;
  }
}

.index-journal__buyer__body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.2rem 4rem;
}
@media only screen and (max-width: 960px) {
  .index-journal__buyer__body {
    grid-template-columns: 1fr;
    gap: 3.2rem 1.6rem;
  }
  .index-journal__buyer__body .index-journal__buyer__card:not(:first-of-type) {
    display: none;
  }
}

.index-journal__buyer__card__link {
  text-decoration: none;
}

.index-journal__buyer__card__thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  margin: 0;
}
.index-journal__buyer__card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 960px) {
  .index-journal__buyer__card__thumbnail {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    margin-bottom: 1.2rem;
  }
}

.index-journal__buyer__card__body {
  margin-top: 1.6rem;
}
@media only screen and (max-width: 960px) {
  .index-journal__buyer__card__body {
    display: flex;
    flex-direction: column-reverse;
  }
}

.index-journal__buyer__card__meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.index-journal__buyer__card__meta > .index-journal__buyer__card__meta-date {
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: 400;
  color: #A0A0A0; /* was mixin.cssV('color', 'gray') */
  white-space: nowrap;
}
.index-journal__buyer__card__meta > .index-journal__buyer__card__meta-category,
.index-journal__buyer__card__meta > .index-journal__buyer__card__meta-series {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
@media only screen and (max-width: 960px) {
  .index-journal__buyer__card__meta {
    gap: 0.8rem;
  }
  .index-journal__buyer__card__meta > .index-journal__buyer__card__meta-date {
    margin-left: 0;
    order: 2;
    width: 100%;
    text-align: right;
    font-size: 1.1rem;
    margin-top: 1rem;
  }
  .index-journal__buyer__card__meta > .index-journal__buyer__card__meta-category,
  .index-journal__buyer__card__meta > .index-journal__buyer__card__meta-series {
    order: 1;
    display: none;
    white-space: nowrap;
  }
}

.index-journal__buyer__card__meta-category {
  display: inline-flex;
  align-items: center;
  min-width: 11.2rem;
  height: 2.7rem;
  justify-content: center;
  text-align: center;
  font-size: 1.2rem;
  color: #3C3C3C; /* was mixin.cssV('color', 'text') */
}
.index-journal__buyer__card__meta-category.category-living {
  background-color: #E6DAC2;
}
.index-journal__buyer__card__meta-category.category-work {
  background-color: #C1EAE7;
}
.index-journal__buyer__card__meta-category.category-food {
  background-color: #f8d2ac;
}
.index-journal__buyer__card__meta-category.category-beauty {
  background-color: #e4d6e8;
}
.index-journal__buyer__card__meta-category.category-fashion {
  background-color: #c9e3c6;
}
@media only screen and (max-width: 960px) {
  .index-journal__buyer__card__meta-category {
    padding: 0.3rem 1rem;
    font-size: 12px;
    min-width: auto;
    height: auto;
  }
}

.index-journal__buyer__card__meta-series {
  padding: 0.4rem 1.6rem;
  border: 1px solid #DCDCDC;
  border-radius: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: initial;
  color: #3C3C3C; /* was mixin.cssV('color', 'text') */
  font-size: 1.2rem;
}
@media only screen and (max-width: 960px) {
  .index-journal__buyer__card__meta-series {
    padding: 0.3rem 1rem;
  }
}

.index-journal__buyer__card__meta-date {
  font-size: 1.4rem;
  font-weight: 500;
  color: #A0A0A0; /* was mixin.cssV('color', 'gray') */
}
@media only screen and (max-width: 960px) {
  .index-journal__buyer__card__meta-date {
    font-size: 1.1rem;
  }
}

.index-journal__buyer__card__title {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
  margin-top: 1.7rem;
  color: #464646;
}
@media only screen and (max-width: 960px) {
  .index-journal__buyer__card__title {
    font-size: 1.3rem;
    margin-top: 0rem;
  }
}

.index-journal__more {
  margin: 0 auto;
  text-align: center;
}

.index-journal__more__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid #DCDCDC; /* was mixin.cssV('color', 'lightgray') */
  color: #666666;
  border-radius: 2.4rem;
  padding: 0.8rem;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: initial;
}
.index-journal__more__link img {
  width: 2.8rem;
  height: 1.6rem;
  margin-left: 0.8rem;
}
@media only screen and (max-width: 960px) {
  .index-journal__more__link {
    display: inline-block;
    margin: 0 auto;
  }
}

/*======================
	Fair Section
======================*/
.index-fair__inner {
  width: 100%;
  max-width: calc(1280px + 8rem);
  margin-right: auto;
  margin-left: auto;
  /* レスポンシブ padding */
  padding-block: clamp(20px, 3.5vw, 55px);
  padding-inline: clamp(16px, 4vw, 40px);
}
@media only screen and (max-width: 960px) {
  .index-fair__inner {
    padding-block: clamp(16px, 3vw, 30px);
    padding-inline: clamp(12px, 3.5vw, 20px);
  }
}

.index-fair__head {
  display: flex;
  align-items: center;
  gap: 0rem 6.3rem;
  border-bottom: none;
}
@media only screen and (max-width: 960px) {
  .index-fair__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.index-fair__title {
  display: flex;
  flex-direction: column;
}

.index-fair__title--en {
  font-family: "Cormorant Garamond", serif;
  color: #5A8663;
  font-size: 1.8rem;
  font-weight: 600;
}
@media only screen and (max-width: 960px) {
  .index-fair__title--en {
    font-size: 1.3rem;
  }
}

.index-fair__title--jp {
  font-family: "Shippori Mincho", "YuMincho", "游明朝", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "Noto Serif Japanese", "serif, Century";
  font-size: 3.2rem;
  font-weight: 500;
}
@media only screen and (max-width: 960px) {
  .index-fair__title--jp {
    font-size: 2rem;
  }
}

.index-fair__intro {
  font-family: "Shippori Mincho", "YuMincho", "游明朝", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "Noto Serif Japanese", "serif, Century";
  font-weight: 700;
  line-height: 1.5;
  color: #464646;
  font-size: 1.6rem;
}
@media only screen and (max-width: 960px) {
  .index-fair__intro {
    font-size: 1.3rem;
    margin-top: 1.6rem;
  }
}

.index-fair__list {
  margin-top: 5.2rem;
}
@media only screen and (max-width: 960px) {
  .index-fair__list {
    margin-top: 2.4rem;
  }
}

.index-fair__list-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.2rem 4rem;
}
@media only screen and (max-width: 960px) {
  .index-fair__list-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem 1.6rem;
  }
}

.index-fair__card__link {
  text-decoration: none;
}

.index-fair__card__thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  margin: 0;
}
.index-fair__card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index-fair__card__badge {
  display: inline-flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 500;
  color: #5A8663;
  border: 1px solid #5A8663;
  line-height: initial;
  padding: 0.35rem 0.5rem;
  gap: 0.5rem;
}
.index-fair__card__badge img {
  width: 1.6rem;
  height: 1.6rem;
}

.index-fair__card__body {
  margin-top: 1.6rem;
}

.index-fair__card__title {
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 400;
  color: #464646;
  margin-top: 0.8rem;
}
@media only screen and (max-width: 960px) {
  .index-fair__card__title {
    font-size: 1.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/*======================
Workshop Section
======================*/
.index-workshop__inner {
  width: 100%;
  max-width: calc(1280px + 8rem);
  margin-right: auto;
  margin-left: auto;
  /* レスポンシブ padding */
  padding-block: clamp(20px, 3.5vw, 55px);
  padding-inline: clamp(16px, 4vw, 40px);
}
@media only screen and (max-width: 960px) {
  .index-workshop__inner {
    padding-block: clamp(16px, 3vw, 32px);
    padding-inline: clamp(12px, 3.5vw, 20px);
  }
}

.index-workshop__title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index-workshop__title--en {
  font-family: "Cormorant Garamond", serif;
  color: var(--wp--preset--color--main);
  font-size: 1.8rem;
  font-weight: 600;
}
@media only screen and (max-width: 960px) {
  .index-workshop__title--en {
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 960px) {
  .index-workshop__title--en {
    font-size: 1.3rem;
  }
}

.index-workshop__title--jp {
  font-family: "Shippori Mincho", "YuMincho", "游明朝", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "Noto Serif Japanese", "serif, Century";
  font-size: 3.2rem;
  font-weight: 500;
}
@media only screen and (max-width: 960px) {
  .index-workshop__title--jp {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 960px) {
  .index-workshop__title--jp {
    font-size: 2rem;
  }
}

.index-workshop__list-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.2rem 4rem;
}
@media only screen and (max-width: 960px) {
  .index-workshop__list-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem 1.6rem;
  }
}

.index-workshop__card__link {
  text-decoration: none;
}

.index-workshop__card__thumbnail {
  width: 100%;
  aspect-ratio: 1/1;
  height: auto;
  margin: 0;
  clip-path: circle(50% at center);
}
.index-workshop__card__thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
@media only screen and (max-width: 960px) {
  .index-workshop__card__thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

.index-workshop__card__body {
  margin-top: 1.6rem;
}

.index-workshop__card__shop {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0rem;
  padding-bottom: 1.2rem;
  background-image: repeating-linear-gradient(to right, #DCDCDC 0px 3px, transparent 3px 6px);
  background-position: bottom left;
  background-repeat: repeat-x;
  background-size: auto 2px;
}

.index-workshop__card__shop-icon {
  display: flex;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
}
@media only screen and (max-width: 960px) {
  .index-workshop__card__shop-icon {
    width: 2rem;
    height: 2rem;
  }
}

.index-workshop__card__shop-text {
  color: #5A8663;
  font-size: 1.3rem;
}

.index-workshop__card__title {
  margin-top: 1.4rem;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 500;
  color: #464646;
}
@media only screen and (max-width: 960px) {
  .index-workshop__card__title {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 960px) {
  .index-workshop__card__title {
    /* 2行で省略する */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    font-size: 1.3rem;
  }
}