/*----------------------------------------

	SAGAMI MAGAZINE DETAIL CSS

-----------------------------------------*/
.c-title__wrap {
  border-block-end: 1px solid var(--color-americansilver);
}
@media screen and (min-width: 769px) {
  .c-title__wrap {
    padding-block: 240px 64px;
  }
}
@media screen and (max-width: 768px) {
  .c-title__wrap {
    padding-block: 31.25vw 7vw;
  }
}
.c-title__wrap .c-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}
@media screen and (min-width: 769px) {
  .c-title__wrap .c-box {
    gap: 20px;
    width: min(80vw, 1280px);
  }
}
@media screen and (max-width: 768px) {
  .c-title__wrap .c-box {
    gap: 5vw;
    padding-inline: 5vw;
  }
}
.c-title__wrap .c-title01 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .c-title__wrap .c-title01 {
    gap: 15px;
  }
}
@media screen and (max-width: 768px) {
  .c-title__wrap .c-title01 {
    gap: 1.25vw;
  }
}
.c-title__wrap .c-title01 .font50_30 {
  grid-column: 1/-1;
  font-weight: var(--font-medium);
  line-height: 1.5;
}
@media screen and (min-width: 769px) {
  .c-title__wrap .c-title01 .font50_30 {
    letter-spacing: 0.02em;
  }
}
@media screen and (max-width: 768px) {
  .c-title__wrap .c-title01 .font50_30 {
    letter-spacing: 0;
  }
}
.c-title__wrap .c-title01 .font14_12 {
  font-weight: var(--font-medium);
}
.c-title__wrap .c-title01 .tag-category02 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (min-width: 769px) {
  .c-title__wrap .c-title01 .tag-category02 {
    gap: 6px;
  }
}
@media screen and (max-width: 768px) {
  .c-title__wrap .c-title01 .tag-category02 {
    gap: 1.5vw;
  }
}

/*----------------------------------------
	- MAGAZINE
-----------------------------------------*/
@media screen and (min-width: 769px) {
  .magazine {
    margin-block-start: 150px;
  }
}
@media screen and (max-width: 768px) {
  .magazine {
    margin-block-start: 20vw;
    overflow: hidden;
  }
}
@media screen and (min-width: 769px) {
  .magazine .c-box {
    width: min(1100px, 90%);
  }
}
.magazine .magazine-item {
  display: grid;
  grid-template-columns: 1fr;
}
.magazine .magazine-item > div {
  display: grid;
  grid-template-columns: auto 1fr;
}
@media screen and (min-width: 769px) {
  .magazine .magazine-item > div {
    width: min(1100px, 90%);
    margin-inline: auto;
    -moz-column-gap: 28px;
         column-gap: 28px;
  }
}
@media screen and (max-width: 768px) {
  .magazine .magazine-item > div {
    width: 100%;
    padding-inline: 6vw;
    -moz-column-gap: 3vw;
         column-gap: 3vw;
  }
}
.magazine .magazine-item figure {
  grid-row: 2/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .magazine .magazine-item figure {
    aspect-ratio: 1600/700;
  }
}
@media screen and (max-width: 768px) {
  .magazine .magazine-item figure {
    aspect-ratio: 400/175;
  }
}
.magazine .magazine-item img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 769px) {
  .magazine .magazine-item .font18_16.barlow {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  .magazine .magazine-item .font18_16.barlow {
    font-size: 4.5vw;
  }
}
@media screen and (min-width: 769px) {
  .magazine .magazine-item p:has(.font18_16) {
    margin-block-start: 31px;
  }
}
@media screen and (max-width: 768px) {
  .magazine .magazine-item p:has(.font18_16) {
    margin-block-start: 3vw;
  }
}
@media screen and (min-width: 769px) {
  .magazine .magazine-item p:has(.font18_16) span {
    font-size: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .magazine .magazine-item p:has(.font18_16) span {
    font-size: 6vw;
  }
}
.magazine .magazine-item .font15_13 {
  color: var(--color-smokegray);
  line-height: 2;
}
@media screen and (min-width: 769px) {
  .magazine .magazine-item .font15_13 {
    margin-block-start: 40px !important;
  }
}
@media screen and (max-width: 768px) {
  .magazine .magazine-item .font15_13 {
    margin-block-start: 5vw !important;
  }
}
.magazine .magazine-item .font15_13:empty {
  margin-block-start: 0 !important;
}
.magazine .magazine-item.new::before {
  display: none;
}
.magazine .magazine-item.new > div {
  grid-template-columns: auto auto 1fr !important;
}
.magazine .magazine-item.new > div::before {
  content: "NEW";
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-primarydefault);
  font-family: "Barlow Semi Condensed", sans-serif;
  color: var(--color-white);
  font-weight: var(--font-medium);
  line-height: 1;
  flex-shrink: 0;
  border-radius: 50%;
  z-index: 1;
  grid-column: 1/2;
  grid-row: 1/4;
  margin-block: 0 auto;
}
@media screen and (min-width: 769px) {
  .magazine .magazine-item.new > div::before {
    width: 60px;
    height: 60px;
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 768px) {
  .magazine .magazine-item.new > div::before {
    width: 12vw;
    height: 12vw;
    font-size: 3.25vw;
  }
}
.magazine .magazine-item.new > div .font18_16.barlow {
  grid-column: 2/3;
  grid-row: 1/2;
}
.magazine .magazine-item.new > div .tag-category01 {
  grid-column: 3/4;
  grid-row: 1/2;
}
.magazine .magazine-item.new > div p:has(.font18_16) {
  grid-column: 2/4;
  grid-row: 2/3;
}
.magazine .magazine-item.new > div .font15_13 {
  grid-column: 2/4;
  grid-row: 3/4;
}
@media screen and (min-width: 769px) {
  .magazine .editor {
    margin-block-start: 100px;
  }
}
@media screen and (max-width: 768px) {
  .magazine .editor {
    margin-block-start: 20vw;
  }
}
@media screen and (min-width: 769px) {
  .magazine .pagination02 {
    margin-block-start: 140px;
  }
}
@media screen and (max-width: 768px) {
  .magazine .pagination02 {
    margin-block-start: 20vw;
  }
}