@import url("https://use.typekit.net/jva0gfb.css");

/********* ▽ setting ▽ *********/
@font-face {
  font-family: 'yumin';
  src: url("../font/yumin.woff");
}
@font-face {
  font-family: 'yuminl';
  src: url("../font/yuminl.woff");
  font-weight: bold;
}
@font-face {
  font-family: 'Hiragino Mincho ProN';
  src: url("../font/HiraKakuProN-W3-AlphaNum-01.woff");
}
@font-face {
  font-family: 'Noto Serif JP';
  font-weight: 400;
  src: url("../font/NotoSerifCJKjp-Regular.otf");
}
/********* △ setting △ *********/
html{
  font-size: 62.5%;
}
.archive_slider .slick-arrow {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  cursor: pointer;
  position: absolute;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  background-repeat: no-repeat;
  z-index: 2;
}
.archive_slider .slick-arrow::before,
.archive_slider .slick-arrow::after {
  content: "";
  display: block;
  position: absolute;
  background: 0;
}
.archive_slider button {
  background: initial;
  border: initial;
}
.archive_slider .slick-arrow.slick-prev {
  background-image: url(https://frayid.mash-cdn.com/Contents/ImagesPkg/fray/top/blog__btn-prev.svg);
}
.archive_slider .slick-arrow.slick-next {
  background-image: url(https://frayid.mash-cdn.com/Contents/ImagesPkg/fray/top/blog__btn-next.svg);
}
.archive_slider h4 {
  font-family: "baskerville-display-pt", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: .08em;
  text-align: center;
}
.archive_slider .white {
  color: #fff;
}
.archive_slider .blog__list--text {
  font-family: "baskerville-display-pt", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .08em;
}
.archive_slider .blog__list--text {
  position: absolute;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .archive_slider h4 {
    margin-top: 15.6rem;
    font-size: 2.6rem
  }
  .archive_slider .blog__list--area {
    width: 122rem;
    margin-inline: auto;
    margin-top: 3.7rem;
    margin-bottom: -2rem;
  }
  .archive_slider .blog__list--image {
    width: 60rem;
  }
  .archive_slider .blog__list {
    position: relative;
    margin-right: 2rem;
  }
  .archive_slider .blog__list--first {
    margin-right: 0rem;
  }
  .archive_slider .blog__list--text {
    left: 1rem;
    bottom: 0.8rem;
    font-size: 1.2rem;
  }
  .archive_slider .text--number {
    margin-left: 0.8rem;
    font-size: 1.4rem;
  }
  .archive_slider .slick-arrow {
    width: 1.5rem;
    height: 5rem;
    top: 15rem;
  }
  .archive_slider .slick-arrow.slick-prev {
    left: -4.5rem;
    transform: rotate(0deg);
  }
  .archive_slider .slick-arrow.slick-next {
    right: -4.5rem;
  }
}
@media screen and (max-width: 1400px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
  .archive_slider h4 {
    margin-top: calc(156*100vw/1400);
    font-size: calc(26*100vw/1400);
  }
  .archive_slider .blog__list--area {
    width: calc(1220*100vw/1400);
    margin-top: calc(37*100vw/1400);
    margin-inline: auto;
    margin-bottom: calc(-20*100vw/1400);
  }
  .archive_slider .blog__list--image {
    width: calc(600*100vw/1400);
  }
  .archive_slider .blog__list {
    position: relative;
    margin-right: calc(20*100vw/1400);
    margin-right: 2rem;
  }
  .archive_slider .blog__list--first {
    margin-right: 0rem;
  }
  .archive_slider .blog__list--text {
    left: calc(10*100vw/1400);
    bottom: calc(8*100vw/1400);
    font-size: calc(12*100vw/1400);
  }
  .archive_slider .text--number {
    margin-left: calc(8*100vw/1400);
    font-size: calc(14*100vw/1400);
  }
  .archive_slider .slick-arrow {
    width: calc(15*100vw/1400);
    height: calc(50*100vw/1400);
    top: calc(150*100vw/1400);
  }
  .archive_slider .slick-arrow.slick-prev {
    left: calc(-45*100vw/1400);
    transform: rotate(0deg);
  }
  .archive_slider .slick-arrow.slick-next {
    right: calc(-45*100vw/1400);
  }
}

@media only screen and (max-width: 767px) {
  .archive_slider {
    margin-bottom: calc(160*100vw/750);
  }
  .archive_slider h4 {
    margin-top: calc(230*100vw/750);
    font-size: calc(52*100vw/750);
  }
  .archive_slider .blog__list--area {
    width: calc(700*100vw/750);
    margin-top: calc(50*100vw/750);
    margin-inline: auto;
  }
  .archive_slider .blog__list--image {
    width: calc(700*100vw/750);
  }
  .archive_slider .blog__list {
    position: relative;
  }
  .archive_slider .blog__list--text {
    left: calc(20*100vw/750);
    bottom: calc(15*100vw/750);
    font-size: calc(24*100vw/750);
  }
  .archive_slider .text--number {
    margin-left: calc(15*100vw/750);
    font-size: calc(28*100vw/750);
  }
  .archive_slider .slick-arrow {
    width: calc(25*100vw/750);
    height: calc(85*100vw/750);
    top: calc(167*100vw/750);
  }
  .archive_slider .slick-arrow.slick-prev {
    left: calc(20*100vw/750);
  }
  .archive_slider .slick-arrow.slick-next {
    right: calc(20*100vw/750);
  }
}