@charset "UTF-8";
@font-face {
  font-family: "Kanata-kanji";
  src: url("../font/Kanata-kanji.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --scale: 0.0694444444vw;
  --max: 1;
}
@media screen and (max-width: 767px) {
  :root {
    --scale: 0.2666666667vw;
    --max: 10;
  }
}

/* ===============================
  よみもの・特集
=============================== */
/*------------------------------
一覧
------------------------------*/
.stories-archive {
  overflow-x: clip;
  overflow-y: visible;
}
.stories-archive ~ footer {
  background: transparent;
}
.stories-archive__button {
  margin-top: 5%;
  text-align: center;
}
.stories-archive__button a,
.stories-archive__button button {
  padding: 0.8em 3em;
}

.stories-archive__list {
  padding: 0 min(calc(44 * var(--scale)), calc(44px * var(--max)));
}
@media (max-width: 767px) {
  .stories-archive__list {
    padding: 0 2%;
  }
}

@media (max-width: 767px) {
  .js .stories-archive__list .stories-card:nth-child(n+5) {
    display: none;
  }
}
.stories-archive_noresult {
  font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  text-align: center;
  padding: 5em 0;
}
@media (max-width: 767px) {
  .stories-archive_noresult {
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  }
}

/* stories-cards
------------------------------*/
.stories-cards {
  display: flex;
  flex-wrap: wrap;
  gap: min(calc(42 * var(--scale)), calc(42px * var(--max))) min(calc(27 * var(--scale)), calc(27px * var(--max)));
}

.stories-card {
  width: calc(33.3% - min(calc(27 * var(--scale)), calc(27px * var(--max))) * 2 / 3);
  filter: drop-shadow(2px 4px 12px rgba(223, 203, 158, 0.3));
  position: relative;
}
@media (max-width: 767px) {
  .stories-card {
    width: 100%;
  }
}

.stories-card__thumbnail {
  border-radius: min(calc(16 * var(--scale)), calc(16px * var(--max))) min(calc(16 * var(--scale)), calc(16px * var(--max))) 0 0;
  background: #fff;
}
.stories-card__thumbnail img {
  aspect-ratio: 321/206;
  -o-object-fit: cover;
     object-fit: cover;
}

.stories-card__body {
  padding: min(calc(27 * var(--scale)), calc(27px * var(--max))) min(calc(16 * var(--scale)), calc(16px * var(--max))) min(calc(0 * var(--scale)), calc(0px * var(--max)));
  position: relative;
  background: #fff;
  border-radius: 0 0 min(calc(16 * var(--scale)), calc(16px * var(--max))) min(calc(16 * var(--scale)), calc(16px * var(--max)));
  aspect-ratio: 324/184;
}

.stories-card__theme {
  top: 0;
  left: 0;
  transform: translateY(-50%);
  position: absolute;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 11em;
  background: #a2c168;
  font-size: min(calc(15 * var(--scale)), calc(15px * var(--max)));
  line-height: 1.8666666667;
  color: #fff;
  text-align: center;
  padding: 0.2em 3em;
  padding-right: 2em;
  border-radius: 0 0.3em 0.3em 0;
}
.stories-card__theme::before {
  content: "";
  position: absolute;
  top: 0.9em;
  left: 1em;
  transform: translate(-50%, -50%);
  background: url(../img/common/icon_book02.png) no-repeat center center/contain;
  width: 3em;
  aspect-ratio: 41/33;
  top: 50%;
  width: auto;
  height: 109%;
}
@media (max-width: 767px) {
  .stories-card__theme {
    min-width: 10em;
  }
  .stories-card__theme::before {
    width: 2.8em;
    top: 0.9em;
    left: 0.7em;
    top: 50%;
    width: auto;
    height: 100%;
    transform: translate(-49%, -50%);
  }
}

.stories-card__area {
  display: block;
  position: relative;
  font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
  color: #dba326;
  padding-left: 1em;
}
.stories-card__area::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url(../img/common/icon_area.png) no-repeat center center/contain;
  width: 0.7em;
  aspect-ratio: 46/58;
}
@media (max-width: 767px) {
  .stories-card__area {
    font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
    letter-spacing: -0.03em;
  }
}

.stories-card__headline {
  font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  margin-top: 0.2em;
  line-height: 1.4;
  height: 2lh;
}
@media (max-width: 767px) {
  .stories-card__headline {
    font-size: min(calc(15 * var(--scale)), calc(15px * var(--max)));
    letter-spacing: -0.05em;
  }
}

.stories-card__tag {
  margin-top: min(calc(30 * var(--scale)), calc(30px * var(--max)));
  font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
  line-height: 1.7142857143;
  font-family: "TsukuARdGothicStd-R";
  color: #717171;
  padding-right: 20%;
}
.stories-card__tag span {
  display: block;
}
@media (max-width: 767px) {
  .stories-card__tag {
    line-height: 1.2;
  }
}

.stories-info {
  transform: translate(-35%, -35%);
  width: min(calc(58 * var(--scale)), calc(58px * var(--max)));
  right: 0;
  bottom: 0;
  top: unset;
}
@media (max-width: 767px) {
  .stories-info {
    transform: translate(-42%, -31%);
    width: min(calc(50 * var(--scale)), calc(50px * var(--max)));
    right: 0;
    bottom: 0;
    top: unset;
  }
}

/* featured
------------------------------*/
.featured {
  padding-top: min(calc(32 * var(--scale)), calc(32px * var(--max)));
}
.featured:not(:has(.featured__content .stories-card)) .featured__heading {
  display: none;
}
@media (max-width: 767px) {
  .featured {
    padding-top: 6%;
  }
}

@media (min-width: 768px) {
  .featured__inner {
    width: min(calc(1200 * var(--scale)), calc(1200px * var(--max)));
  }
}
@media (max-width: 767px) {
  .featured__inner {
    width: 100%;
  }
}

.featured__lead {
  font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  color: #00685f;
  text-align: center;
}

.featured__heading {
  margin-top: min(calc(40 * var(--scale)), calc(40px * var(--max)));
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: min(calc(35 * var(--scale)), calc(35px * var(--max)));
  color: #dba326;
  background: #fff;
  border-radius: 0 min(calc(233 * var(--scale)), calc(233px * var(--max))) min(calc(233 * var(--scale)), calc(233px * var(--max))) 0;
  box-shadow: 2px 4px 12px rgba(217, 217, 217, 0.3);
  padding: 1em 6.3em 1em 7.2em;
  transform: unset;
  position: relative;
  left: calc(min(calc(120 * var(--scale)), calc(120px * var(--max))) * -1);
}
.featured__heading::before {
  content: "";
  position: absolute;
  background: url(../img/request/dec01.png) no-repeat center center/100%;
  aspect-ratio: 88/85;
  transform: translate(-50%, -50%);
  width: 6%;
  left: 28%;
  top: 11%;
}
@media (max-width: 767px) {
  .featured__heading {
    margin-top: 1.5em;
    font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
    padding: 0.65em 1.4em 0.65em 3.9em;
    transform: unset;
    left: -1em;
    width: 18.3em;
  }
  .featured__heading::before {
    width: 11%;
    left: 95%;
  }
}

.featured__content {
  margin-top: min(calc(80 * var(--scale)), calc(80px * var(--max)));
  display: flex;
  flex-direction: column;
  gap: min(calc(108 * var(--scale)), calc(108px * var(--max))) 0;
}
@media (max-width: 767px) {
  .featured__content {
    margin-top: 8%;
  }
}

.featured__group {
  background: var(--bg-color);
  border-radius: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  padding: min(calc(40 * var(--scale)), calc(40px * var(--max))) min(calc(85 * var(--scale)), calc(85px * var(--max)));
  position: relative;
}
.featured__group:not(:has(.stories-card)) {
  display: none;
}
.featured__group--beginner {
  --bg-color: #f9f6e0;
  --title-bg: url(../img/stories/featured-label-bg_orange.png);
}
.featured__group--recommend {
  --bg-color: #ebf0e4;
  --title-bg: url(../img/stories/featured-label-bg_green.png);
}
@media (max-width: 767px) {
  .featured__group {
    padding: min(calc(40 * var(--scale)), calc(40px * var(--max))) min(calc(10 * var(--scale)), calc(10px * var(--max)));
    border-radius: min(calc(48 * var(--scale)), calc(48px * var(--max)));
  }
  .featured__group--beginner {
    width: 95%;
    margin-left: auto;
    padding: 6% 6% 11%;
    padding-right: 10%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .featured__group--beginner:not(:has(.stories-card)) + .featured__group--recommend {
    margin-top: 20%;
  }
  .featured__group--beginner .featured__list {
    margin-top: 35%;
  }
  .featured__group--recommend {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    --bg-color: #ebf0e4;
    --title-bg: url(../img/stories/featured-label-bg_green.png);
    width: 95%;
  }
  .featured__group--recommend .featured__title {
    top: -4.3em;
    left: 9.4em;
    text-align: center;
    padding-bottom: 0;
  }
}

.featured__title {
  position: absolute;
  top: -1.9em;
  left: -1.6em;
  aspect-ratio: 452/458;
  width: min(calc(226 * var(--scale)), calc(226px * var(--max)));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: min(calc(25 * var(--scale)), calc(25px * var(--max)));
  color: #fff;
  filter: drop-shadow(2px 4px 12px rgba(223, 203, 158, 0.3));
  background: var(--title-bg) no-repeat center center/cover;
  padding-bottom: 1em;
}
@media (max-width: 767px) {
  .featured__title {
    width: min(calc(180 * var(--scale)), calc(180px * var(--max)));
    font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
    top: -0.6em;
    left: -0.6em;
  }
}

.featured__description {
  font-size: min(calc(22 * var(--scale)), calc(22px * var(--max)));
  text-align: center;
}
@media (max-width: 767px) {
  .featured__description {
    display: none;
  }
}

.featured__list {
  margin-top: 2.7%;
}
@media (max-width: 767px) {
  .featured__list {
    margin-top: 7.7%;
  }
}

.storySwiper-wrap {
  position: relative;
}

@media (max-width: 767px) {
  .storySwiper {
    position: relative;
    width: min(calc(375 * var(--scale)), calc(375px * var(--max)));
    margin-left: calc(min(calc(17 * var(--scale)), calc(17px * var(--max))) * -1);
  }
  .storySwiper .swiper-slide {
    padding: 0px 16%;
    padding-left: 5%;
  }
  .storySwiper .swiper-button-next-story,
.storySwiper .swiper-button-prev-story {
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    margin: 0;
    height: auto;
    width: auto;
    position: absolute;
    background: url(../img/icon_arrow02.svg) no-repeat center center/100%;
    aspect-ratio: 9/15;
    width: 2.4%;
    top: 50%;
    z-index: 10;
  }
  .storySwiper .swiper-button-next-story::after,
.storySwiper .swiper-button-prev-story::after {
    display: none;
  }
  .storySwiper .swiper-button-prev-story {
    transform: translate(-50%, -50%) scale(-1, 1);
    left: -1%;
  }
  .storySwiper .swiper-button-next-story {
    transform: translate(50%, -50%);
    right: 13%;
  }
}

.swiper-pagination-story[class][class] {
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  display: flex;
  justify-content: center;
  gap: 0 min(calc(15 * var(--scale)), calc(15px * var(--max)));
  margin-top: 9%;
}
.swiper-pagination-story[class][class].swiper-pagination-lock {
  display: none;
}
.swiper-pagination-story[class][class] .swiper-pagination-bullet[class][class] {
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  width: unset;
  height: unset;
  margin: 0;
  opacity: 1;
  width: min(calc(6 * var(--scale)), calc(6px * var(--max)));
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #d9d9d9;
}
.swiper-pagination-story[class][class] .swiper-pagination-bullet[class][class].swiper-pagination-bullet-active {
  background: #036960;
}

@media (max-width: 767px) {
  .storySwiper01 {
    margin-top: 13%;
  }
}

@media (max-width: 767px) {
  .storySwiper02 .swiper-slide {
    padding: 0px 8%;
    padding-left: 13%;
  }
  .storySwiper02 .swiper-button-prev-story {
    left: 7%;
  }
  .storySwiper02 .swiper-button-next-story {
    right: 5%;
  }
}

/* filter
------------------------------*/
.filter__heading {
  margin-top: min(calc(90 * var(--scale)), calc(90px * var(--max)));
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: min(calc(35 * var(--scale)), calc(35px * var(--max)));
  color: #dba326;
  background: #fff;
  box-shadow: 2px 4px 12px rgba(217, 217, 217, 0.3);
  border-radius: 0 min(calc(233 * var(--scale)), calc(233px * var(--max))) min(calc(233 * var(--scale)), calc(233px * var(--max))) 0;
  transform: unset;
  position: relative;
  padding: 1em 3.3em 1em 7.2em;
}
.filter__heading::before {
  content: "";
  position: absolute;
  background: url(../img/experiences/dec01.png) no-repeat center center/100%;
  aspect-ratio: 396/242;
  transform: translate(-50%, -50%);
  width: 26%;
  left: 18.8%;
  top: 37%;
}
@media (min-width: 768px) {
  .filter__heading {
    margin-left: calc(min( 0 * var(--scale),0px) +  max(0px, (100vw - 1440px)/2));
  }
}
@media (max-width: 767px) {
  .filter__heading {
    font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
    transform: translateX(0%);
    margin-top: 19%;
    padding: 0.65em 1.4em 0.65em 3.9em;
    transform: unset;
    left: -1em;
    width: 18.3em;
  }
  .filter__heading::before {
    width: 35%;
    left: 83.8%;
    top: 7%;
  }
}

.filter__content {
  padding: min(calc(75 * var(--scale)), calc(75px * var(--max))) min(calc(0 * var(--scale)), calc(0px * var(--max))) 0;
  background: #fff;
  box-shadow: 2px 4px 12px rgba(217, 217, 217, 0.3);
  width: 95%;
  margin: -4% auto 0;
}
@media (max-width: 767px) {
  .filter__content {
    padding: min(calc(57 * var(--scale)), calc(57px * var(--max))) min(calc(20 * var(--scale)), calc(20px * var(--max)));
    text-align: center;
    width: 100%;
    padding: 11% 0% 0;
  }
}

.filter__lead {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-size: min(calc(22 * var(--scale)), calc(22px * var(--max)));
  background: linear-gradient(transparent 60%, #fbe7b2 60%);
}
@media (max-width: 767px) {
  .filter__lead {
    display: inline;
    font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  }
}

.filter__form {
  margin-top: 4.7%;
}
@media (max-width: 767px) {
  .filter__form {
    margin-top: 11.7%;
  }
}

.filter__items {
  display: flex;
  flex-direction: column;
}

.filter__item {
  display: flex;
  align-items: center;
  gap: 0 min(calc(35 * var(--scale)), calc(35px * var(--max)));
  padding-left: 37.5%;
  padding-right: 4%;
  position: relative;
}
.filter__item--mood {
  --icon: url("../img/common/icon_heart.png");
  --bg-color: #f5ccc9;
  --dot-color: #f5ccc9;
  --option-color: #e08f89;
}
.filter__item--theme {
  --icon: url("../img/common/icon_book.png");
  --bg-color: #c8df9e;
  --dot-color: #c8df9e;
  --option-color: #a2c168;
  margin-top: min(calc(50 * var(--scale)), calc(50px * var(--max)));
}
.filter__item--area {
  --icon: url("../img/common/icon_area.svg");
  --option-color: #f6cd5d;
  padding-bottom: min(calc(26 * var(--scale)), calc(26px * var(--max)));
}
.filter__item--area .filter__radio {
  border-radius: 1.1em;
}
.filter__item--area .filter__label {
  top: 1em;
  transform: translate(-4%, -50%);
}
.filter__item--area .filter__label::before {
  margin-right: 0;
}
.filter__item--area .filter__options {
  justify-content: flex-start;
}
@media (max-width: 767px) {
  .filter__item {
    flex-direction: column;
    gap: min(calc(12 * var(--scale)), calc(12px * var(--max))) 0;
    padding: 0 6%;
    padding: 0 0;
  }
  .filter__item--area {
    padding: 0 7.4%;
    padding-bottom: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  }
  .filter__item--area .filter__label {
    position: unset;
    top: unset;
    transform: unset;
    width: 100%;
    font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
    border-radius: unset;
    background: #fbfaf6;
    padding: 0.2em 0.7em;
  }
  .filter__item--area .filter__options {
    padding: 0;
    margin-top: min(calc(10 * var(--scale)), calc(10px * var(--max)));
  }
  .filter__item--area .filter__radio {
    border: 1px solid #dba326;
  }
}

.filter__label {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--bg-color);
  border-radius: min(calc(46 * var(--scale)), calc(46px * var(--max)));
  font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  padding: 1em 1.8em;
  padding-right: 1em;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-4%, -50%);
  width: min(calc(380 * var(--scale)), calc(380px * var(--max)));
}
.filter__label::before {
  display: inline-block;
  content: "";
  position: relative;
  background: var(--icon) no-repeat center center/contain;
  width: 1.3em;
  aspect-ratio: 1/1;
  margin-right: 0.4em;
}
.filter__label::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-100%, 10%);
  -webkit-mask-image: url(../img/stories/search-dots.png);
          mask-image: url(../img/stories/search-dots.png);
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--dot-color);
  width: 1.85em;
  aspect-ratio: 76/45;
}
@media (max-width: 767px) {
  .filter__label {
    width: 90%;
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
    transform: unset;
    top: 0;
    left: 0;
    top: unset;
    left: unset;
  }
}

.filter__options {
  display: flex;
  flex-wrap: wrap;
  gap: min(calc(12 * var(--scale)), calc(12px * var(--max))) min(calc(16 * var(--scale)), calc(16px * var(--max)));
}
.filter__options input[type=radio],
.filter__options input[type=checkbox] {
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  width: 0;
  height: 0;
}
@media (max-width: 767px) {
  .filter__options {
    justify-content: center;
    margin-top: 21%;
    gap: min(calc(16 * var(--scale)), calc(16px * var(--max))) min(calc(20 * var(--scale)), calc(20px * var(--max)));
    padding: 0 2%;
  }
}

.filter__radio {
  font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  cursor: pointer;
  color: #000;
  border: 1px solid var(--option-color);
  border-radius: 0.5em;
  padding: 0.3em 1.3em;
  box-shadow: 2px 4px 4px rgba(217, 217, 217, 0.2);
}
.filter__radio:has(input[type=radio]:checked) {
  background: var(--option-color);
}
@media (max-width: 767px) {
  .filter__radio {
    font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
    min-width: min(calc(100 * var(--scale)), calc(100px * var(--max)));
    border: 2px solid var(--option-color);
  }
}

.filter__toggle-wrap {
  position: relative;
  margin-top: min(calc(44 * var(--scale)), calc(44px * var(--max)));
}
@media (max-width: 767px) {
  .filter__toggle-wrap {
    margin-top: 8%;
  }
}

.filter__toggle {
  text-align: center;
  z-index: 10;
  font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  color: #dba326;
  text-align: center;
  background: transparent;
  padding-bottom: 0.5em;
  border-bottom: 0.5em solid #f6cd5d;
  position: absolute;
  bottom: 0%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, 100%);
  background: #fff;
}
@media (max-width: 767px) {
  .filter__toggle {
    padding-bottom: 1.1em;
  }
}

/* stories-archive__body
------------------------------*/
.stories-archive__body {
  margin-top: min(calc(60 * var(--scale)), calc(60px * var(--max)));
  margin-top: min(calc(104 * var(--scale)), calc(104px * var(--max)));
  padding-bottom: min(calc(70 * var(--scale)), calc(70px * var(--max)));
}
@media (max-width: 767px) {
  .stories-archive__body {
    margin-top: 19%;
    margin-top: 33%;
  }
}

.pickup__overview {
  z-index: 10;
  background: #fff;
  border-radius: 0 0 min(calc(83 * var(--scale)), calc(83px * var(--max))) 0;
  aspect-ratio: 608/206;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-left: 13.6%;
  width: min(calc(604 * var(--scale)), calc(604px * var(--max)));
}
.pickup__overview::before {
  content: "";
  position: absolute;
  background: url(../img/common/dec01.png) no-repeat center center/100%;
  aspect-ratio: 1/1;
  transform: translate(9%, -17%);
  width: 13%;
  right: 0%;
  top: 0%;
}
@media (max-width: 767px) {
  .pickup__overview {
    padding: 0% 8% 5%;
    padding-right: 0;
    width: 90%;
    border-radius: 0 0 min(calc(45 * var(--scale)), calc(45px * var(--max))) 0;
  }
}

.pickup__title {
  font-size: min(calc(33 * var(--scale)), calc(33px * var(--max)));
  color: #dba326;
}
@media (max-width: 767px) {
  .pickup__title {
    font-size: min(calc(24 * var(--scale)), calc(24px * var(--max)));
  }
}

.pickup__lead {
  font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
}

.pickup__group:not(:has(.selection__card)) {
  display: none;
}
@media (max-width: 767px) {
  .pickup__button {
    padding-right: 9%;
  }
}

.pickup {
  position: relative;
  padding-top: min(calc(160 * var(--scale)), calc(160px * var(--max)));
  padding-bottom: min(calc(75 * var(--scale)), calc(75px * var(--max)));
  background: #fff;
}
.pickup--experience {
  --pickup-bg: #f9f6e0;
  --pickup-color: #ecae25;
  --pickup-color-area: #dba326;
  --pickup-flag: url("../img/img-flag_orange.png");
  --pickup-label: url("../img/pickup-label-bg_orange.png");
  overflow-x: clip;
}
.pickup--experience:not(:has(.pickup__content .selection__card)) {
  display: none;
}
.pickup--experience::before, .pickup--experience::after {
  content: "";
  position: absolute;
  width: min(calc(692 * var(--scale)), calc(692px * var(--max)));
  aspect-ratio: 1/1;
  background: url(../img/blur/01.png) no-repeat center center/100%;
  pointer-events: none;
}
@media (max-width: 767px) {
  .pickup--experience::before, .pickup--experience::after {
    width: min(calc(400 * var(--scale)), calc(400px * var(--max)));
  }
}
.pickup--experience::before {
  left: 0;
  top: 0;
  transform: translateX(-40%);
}
@media (max-width: 767px) {
  .pickup--experience::before {
    transform: translate(-24%, -33%);
  }
}
.pickup--experience::after {
  right: 0;
  bottom: 0;
  transform: translateX(40%);
}
@media (max-width: 767px) {
  .pickup--experience::after {
    transform: translate(40%, 40%);
  }
}
.pickup--experience > * {
  position: relative;
}
.pickup--experience .pickup__content {
  width: min(calc(1180 * var(--scale)), calc(1180px * var(--max)));
  border-radius: 0 0 0 min(calc(94 * var(--scale)), calc(94px * var(--max)));
  margin-left: auto;
  padding: 2% min(calc(112 * var(--scale)), calc(112px * var(--max))) 4.1%;
  padding-right: 6.4%;
}
@media (max-width: 767px) {
  .pickup--experience .pickup__content {
    width: 93%;
    padding-right: 13.5%;
    border-radius: 0 0 0 min(calc(48 * var(--scale)), calc(48px * var(--max)));
    margin-top: -22%;
    padding: 25% 6% 18%;
  }
}
.pickup--experience .pickup__title {
  left: 0;
  transform: translateY(-24%);
}
@media (max-width: 767px) {
  .pickup--experience .pickup__title {
    transform: translateY(0%);
  }
}
@media (min-width: 768px) {
  .pickup--experience .pickup__group:nth-child(2) .pickup__cards {
    margin-top: -2%;
  }
}
.pickup--experience .pickup__cards {
  width: 90.6%;
}
@media (max-width: 767px) {
  .pickup--experience .pickup__cards {
    width: 100%;
  }
}
.pickup--experience .pickup__heading {
  text-align: right;
}
@media (max-width: 767px) {
  .pickup--experience .pickup__heading {
    text-align: center;
  }
}
.pickup--explore {
  margin-top: min(calc(200 * var(--scale)), calc(200px * var(--max)));
  --pickup-bg: #ebf0e4;
  --pickup-color: #00685f;
  --pickup-color-area: #5aaf7e;
  --pickup-flag: url("../img/img-flag_green.png");
  --pickup-label: url("../img/pickup-label-bg_green.png");
}
.pickup--explore::before {
  content: "";
  position: absolute;
  background: url(../img/line/03.png) no-repeat center center/100%;
  aspect-ratio: 2267/3017;
  transform: translate(7%, 4.3%);
  width: min(calc(1130 * var(--scale)), calc(1130px * var(--max)));
  left: 0%;
  top: 0%;
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 767px) {
  .pickup--explore::before {
    display: none;
  }
}
.pickup--explore > * {
  position: relative;
}
.pickup--explore .pickup__content {
  width: min(calc(1170 * var(--scale)), calc(1170px * var(--max)));
  border-radius: 0px 0px min(calc(93 * var(--scale)), calc(93px * var(--max))) 0px;
  padding: 0 6% 6.3%;
  padding-left: 14.4%;
}
@media (max-width: 767px) {
  .pickup--explore .pickup__content {
    overflow: hidden;
    width: 93%;
    padding: 18% 7%;
    padding-left: 13.8%;
    border-radius: 0px 0px min(calc(48 * var(--scale)), calc(48px * var(--max))) 0px;
  }
}
.pickup--explore .pickup__title {
  right: 0;
  transform: translateY(-54%);
}
@media (max-width: 767px) {
  .pickup--explore .pickup__title {
    transform: translateY(-40%);
  }
}
.pickup--explore .pickup__header {
  flex-direction: row-reverse;
  pointer-events: none;
}
@media (min-width: 768px) {
  .pickup--explore .pickup__header {
    margin-left: -10%;
  }
}
.pickup--explore .pickup__heading {
  text-align: left;
}
@media (max-width: 767px) {
  .pickup--explore .pickup__heading {
    text-align: center;
  }
}
.pickup--explore .pickup__button a {
  margin-right: 0;
  margin-top: 4%;
}
@media (max-width: 767px) {
  .pickup--explore .pickup__button a {
    font-size: min(calc(17 * var(--scale)), calc(17px * var(--max)));
    margin-top: 6%;
    letter-spacing: -0.1em;
    padding: 0.5em 0;
  }
}
.pickup--explore .pickup__group:nth-child(1) {
  z-index: 30;
}
@media (min-width: 768px) {
  .pickup--explore .pickup__group:nth-child(1) {
    margin-top: -7.5%;
  }
}
@media (min-width: 768px) {
  .pickup--explore .pickup__group:nth-child(1) .pickup__header {
    margin-bottom: -1%;
  }
}
.pickup--explore .pickup__group:nth-child(1) .pickup__cards {
  margin-top: 0;
}
@media (max-width: 767px) {
  .pickup--explore .pickup__group:nth-child(1) .pickup__cards {
    margin-top: 8%;
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .pickup--explore .pickup__group:nth-child(2) {
    margin-top: -7%;
  }
}
@media (min-width: 768px) {
  .pickup--explore .pickup__group:nth-child(2) .pickup__header {
    margin-bottom: -1%;
  }
}
@media (min-width: 768px) {
  .pickup--explore .pickup__group:nth-child(2) .pickup__cards {
    margin-top: -4%;
  }
}
@media (max-width: 767px) {
  .pickup--explore .pickup__group:nth-child(2) .pickup__cards {
    margin-top: 8%;
    flex-direction: row;
  }
}
.pickup--explore .pickup__area {
  position: relative;
}
.pickup--explore .pickup__area::before {
  content: "";
  position: absolute;
  background: url(../img/dec_pickup__area.png) no-repeat center center/100%;
  aspect-ratio: 88/98;
  transform: translate(-45%, -83%);
  width: 20.7%;
  left: 0%;
  top: 50%;
}
@media (max-width: 767px) {
  .pickup--explore .pickup__area::before {
    background: url(../img/dec_pickup__area_sp.png) no-repeat center center/100%;
    aspect-ratio: 86/67;
    transform: translate(-56%, -50%);
    width: 20.7%;
    left: 0%;
    top: 50%;
  }
}
@media (max-width: 767px) {
  .pickup--explore {
    margin-top: min(calc(112 * var(--scale)), calc(112px * var(--max)));
  }
}
@media (max-width: 767px) {
  .pickup {
    padding-top: 25%;
    overflow-y: clip;
  }
}

@media (min-width: 768px) {
  .pickup__wrapper {
    width: min(calc(1440 * var(--scale)), calc(1440px * var(--max)));
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .pickup__wrapper {
    z-index: 10;
  }
}

.pickup__content {
  box-shadow: 0 0 10px rgba(231, 208, 171, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--pickup-bg) no-repeat center/cover;
  margin-top: calc(min(calc(170 * var(--scale)), calc(170px * var(--max))) * -1);
}
@media (max-width: 767px) {
  .pickup__content {
    padding: min(calc(85 * var(--scale)), calc(85px * var(--max))) min(calc(25 * var(--scale)), calc(25px * var(--max)));
    gap: min(calc(55 * var(--scale)), calc(55px * var(--max))) 0;
  }
}

.pickup__group {
  z-index: 20;
}
@media (min-width: 768px) {
  .pickup__group:nth-child(n+2) {
    margin-top: min(calc(40 * var(--scale)), calc(40px * var(--max)));
  }
  .pickup__group:nth-child(n+2) .selection--stories {
    margin-top: -2.5%;
  }
}
@media (max-width: 767px) {
  .pickup__group:nth-child(n+2) {
    margin-top: min(calc(40 * var(--scale)), calc(40px * var(--max)));
  }
  .pickup__group:nth-child(n+2) .selection--stories {
    margin-top: 0;
  }
}

.pickup__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 min(calc(23 * var(--scale)), calc(23px * var(--max)));
}
@media (max-width: 767px) {
  .pickup__header {
    justify-content: center;
  }
}

.pickup__heading {
  position: relative;
  padding-left: min(calc(100 * var(--scale)), calc(100px * var(--max)));
}
.pickup__heading::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--pickup-flag) no-repeat center/cover;
  width: min(calc(100 * var(--scale)), calc(100px * var(--max)));
  aspect-ratio: 201/230;
  transform: translate(10%, 16%);
}
@media (max-width: 767px) {
  .pickup__heading {
    padding-left: 0;
    width: 100%;
    white-space: nowrap;
  }
  .pickup__heading::before {
    width: 27%;
    transform: translate(-48%, 24%);
  }
}

.pickup__heading-title {
  font-size: min(calc(32 * var(--scale)), calc(32px * var(--max)));
  font-family: "TsukuARdGothicStd-B";
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  .pickup__heading-title {
    position: relative;
    font-size: min(calc(24 * var(--scale)), calc(24px * var(--max)));
    color: var(--pickup-color);
    letter-spacing: normal;
    white-space: nowrap;
  }
}

.pickup__heading-lead {
  font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  font-family: "TsukuARdGothicStd-B";
}
@media (max-width: 767px) {
  .pickup__heading-lead {
    position: relative;
    font-size: min(calc(13 * var(--scale)), calc(13px * var(--max)));
  }
}

.pickup__label {
  width: min(calc(226 * var(--scale)), calc(226px * var(--max)));
  aspect-ratio: 452/458;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--pickup-label) no-repeat center/cover;
  padding-bottom: min(calc(30 * var(--scale)), calc(30px * var(--max)));
}
@media (max-width: 767px) {
  .pickup__label {
    display: none;
  }
}

.pickup__label-ja {
  display: block;
  font-size: min(calc(31 * var(--scale)), calc(31px * var(--max)));
  line-height: 1.2258064516;
  font-family: "TsukuARdGothicStd-B";
  color: #fff;
  position: relative;
}

.pickup__label-en {
  display: block;
  font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  font-family: "TsukuARdGothicStd-B";
  line-height: 1.5;
  color: #fff;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.pickup__cards {
  display: flex;
  gap: 0 min(calc(31 * var(--scale)), calc(31px * var(--max)));
  margin-top: 0.7%;
}
@media (max-width: 767px) {
  .pickup__cards {
    flex-direction: column;
    gap: min(calc(32 * var(--scale)), calc(32px * var(--max))) 0;
    margin-top: min(calc(30 * var(--scale)), calc(30px * var(--max)));
  }
}

.pickup__card {
  width: calc(33.3% - min(calc(31 * var(--scale)), calc(31px * var(--max))) * 2 / 3);
  background: #fff;
  box-shadow: 2px 4px 12px rgba(223, 203, 158, 0.3);
  border-radius: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  position: relative;
}
.pickup__card a {
  display: inline-block;
  padding: 9% min(calc(14 * var(--scale)), calc(14px * var(--max))) 5%;
  background: url(../img/dec_bg01.png) no-repeat center center/auto;
  border-radius: min(calc(16 * var(--scale)), calc(16px * var(--max)));
}
@media (max-width: 767px) {
  .pickup__card {
    width: 100%;
  }
}

.pickup__rank {
  position: absolute;
  top: calc(min(calc(14 * var(--scale)), calc(14px * var(--max))) * -1);
  right: min(calc(17 * var(--scale)), calc(17px * var(--max)));
  width: min(calc(44 * var(--scale)), calc(44px * var(--max)));
}

.pickup__body {
  padding: 3% min(calc(10 * var(--scale)), calc(10px * var(--max))) 0;
}

.pickup__area {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 10;
  position: relative;
  background: var(--pickup-color-area);
  color: #fff;
  font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
  letter-spacing: -0.05em;
  margin-top: -1.2em;
  margin-left: -1em;
  padding: 0.4em 1.7em;
  padding-right: 1em;
}

.pickup__headline {
  font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  font-family: "TsukuARdGothicStd-B";
  line-height: 1.2222222222;
  text-align: center;
  padding-bottom: 0.9em;
  position: relative;
  letter-spacing: 0.04em;
}
.pickup__headline::after {
  content: "";
  position: absolute;
  bottom: 0.16em;
  left: 0;
  border-bottom: min(calc(1 * var(--scale)), calc(1px * var(--max))) solid #3d3d3d;
  border-top: min(calc(1 * var(--scale)), calc(1px * var(--max))) solid #3d3d3d;
  width: 100%;
  aspect-ratio: 227/3;
}
.pickup__excerpt {
  margin-top: 0.4em;
  font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.5714285714;
  padding-left: 2.2em;
  position: relative;
}
.pickup__excerpt::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0.2em;
  background: url(../img/img-speech-bubble.png) no-repeat center center/contain;
  width: 1.1em;
  aspect-ratio: 32/32;
}

.pickup__link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
  font-family: "TsukuARdGothicStd-B";
  line-height: 2.4;
  color: var(--pickup-color);
  letter-spacing: -0.03em;
}
.pickup__link::after {
  display: inline-block;
  content: "";
  position: relative;
  background: var(--pickup-color);
  -webkit-mask: url(../img/img-arrow.png) center/100% no-repeat;
          mask: url(../img/img-arrow.png) center/100% no-repeat;
  width: 0.4em;
  aspect-ratio: 12/18;
  margin-left: 0.4em;
}

.pickup__button a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  font-family: "TsukuARdGothicStd-B";
  line-height: 1.95;
  color: var(--pickup-color);
  margin-left: auto;
  margin-top: 2em;
  margin-right: 9.8%;
}
@media (max-width: 767px) {
  .pickup__button a {
    background: var(--pickup-color);
    border-radius: min(calc(50 * var(--scale)), calc(50px * var(--max)));
    color: #fff;
    justify-content: center;
    position: relative;
    margin: -0.7em auto 0;
    padding: 0.3em 0;
  }
  .pickup__button a::before {
    display: none;
  }
  .pickup__button a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
    background: url(../img/img-arrow_white.png) no-repeat center center/contain;
    width: 0.35em;
    aspect-ratio: 15/24;
  }
}

@media (max-width: 767px) {
  .pickupSwiper {
    position: relative;
    width: min(calc(348.7 * var(--scale)), calc(348.7px * var(--max)));
    margin-left: calc(min(calc(50 * var(--scale)), calc(50px * var(--max))) * -1);
  }
  .pickupSwiper .swiper-slide {
    padding: 0 8%;
    padding-left: 14%;
  }
  .pickupSwiper .swiper-button-next-pickup,
.pickupSwiper .swiper-button-prev-pickup {
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    margin: 0;
    height: auto;
    width: auto;
    position: absolute;
    background: url(../img/icon_arrow02.svg) no-repeat center center/100%;
    aspect-ratio: 9/15;
    width: 2.4%;
    top: 57.4%;
    z-index: 10;
  }
  .pickupSwiper .swiper-button-next-pickup::after,
.pickupSwiper .swiper-button-prev-pickup::after {
    display: none;
  }
  .pickupSwiper .swiper-button-prev-pickup {
    transform: translate(-50%, -50%) scale(-1, 1);
    left: 9.3%;
  }
  .pickupSwiper .swiper-button-next-pickup {
    transform: translate(50%, -50%);
    right: 2.3%;
  }
}

.swiper-pagination-pickup[class][class] {
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  display: flex;
  justify-content: center;
  gap: 0 min(calc(15 * var(--scale)), calc(15px * var(--max)));
  margin-top: 9%;
}
.swiper-pagination-pickup[class][class].swiper-pagination-lock {
  display: none;
}
.swiper-pagination-pickup[class][class] .swiper-pagination-bullet[class][class] {
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  width: unset;
  height: unset;
  margin: 0;
  opacity: 1;
  width: min(calc(6 * var(--scale)), calc(6px * var(--max)));
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #d9d9d9;
}
.swiper-pagination-pickup[class][class] .swiper-pagination-bullet[class][class].swiper-pagination-bullet-active {
  background: #036960;
}

/*------------------------------
詳細
------------------------------*/
.stories-detail {
  background: #fbfaf6;
  position: relative;
}
.stories-detail + footer {
  background: #fff;
}

.stories-detail__container {
  margin-top: min(calc(40 * var(--scale)), calc(40px * var(--max)));
  padding-bottom: min(calc(110 * var(--scale)), calc(110px * var(--max)));
}
@media (max-width: 767px) {
  .stories-detail__container {
    padding-bottom: min(calc(90 * var(--scale)), calc(90px * var(--max)));
  }
}

.stories-detail__body {
  border: 1px solid #00685f;
  border-radius: min(calc(25 * var(--scale)), calc(25px * var(--max)));
  background: #fff;
  padding: min(calc(25 * var(--scale)), calc(25px * var(--max))) 10% min(calc(50 * var(--scale)), calc(50px * var(--max)));
  position: relative;
  margin: 0 auto;
  width: 92%;
}
@media (max-width: 767px) {
  .stories-detail__body {
    padding: min(calc(60 * var(--scale)), calc(60px * var(--max))) 7%;
    width: 100%;
  }
}

.stories-detail__area {
  position: absolute;
  top: -0.5em;
  left: 1.3em;
  font-size: min(calc(22 * var(--scale)), calc(22px * var(--max)));
  color: #fff;
  background: #00685f;
  padding: 0.7em;
  text-align: center;
}
.stories-detail__area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  background: #284341;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
          clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  width: 0.3em;
  aspect-ratio: 6/11;
}
@media (min-width: 768px) {
  .stories-detail__area {
    min-width: min(calc(272 * var(--scale)), calc(272px * var(--max)));
  }
}
@media (max-width: 767px) {
  .stories-detail__area {
    width: min(calc(206 * var(--scale)), calc(206px * var(--max)));
    font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
    left: 1.25em;
    padding: 0.3em 1.1em;
    text-align: center;
  }
}

.stories-detail__theme {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  padding: 0.25em 3.5em;
  border-radius: min(calc(50 * var(--scale)), calc(50px * var(--max)));
  color: #fff;
  background: #a2c168;
  position: relative;
  margin-left: auto;
  margin-right: -3.3em;
  max-width: 20em;
}
.stories-detail__theme::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  background: url(../img/common/icon_book04.png) no-repeat center center/contain;
  width: 2.6em;
  aspect-ratio: 52/41;
}
@media (max-width: 767px) {
  .stories-detail__theme {
    position: absolute;
    top: 1.6em;
    right: 4.025em;
    transform: translateY(-50%);
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
    width: min(calc(85 * var(--scale)), calc(85px * var(--max)));
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
  .stories-detail__theme::before {
    top: 0;
    left: 50%;
    transform: translate(-50%, -20%);
  }
}

.stories-detail__title {
  margin-top: min(calc(30 * var(--scale)), calc(30px * var(--max)));
  font-size: min(calc(34 * var(--scale)), calc(34px * var(--max)));
  text-align: center;
}
@media (min-width: 768px) {
  .stories-detail__title {
    width: calc(100% + 5em);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 767px) {
  .stories-detail__title {
    font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
    text-align: left;
    margin-top: 1em;
  }
}

@media (max-width: 767px) {
  .stories-detail__meta-wrapper {
    display: flex;
    flex-direction: column-reverse;
  }
}

.stories-detail__meta {
  max-width: 100%;
  width: min(calc(808 * var(--scale)), calc(808px * var(--max)));
  margin: min(calc(30 * var(--scale)), calc(30px * var(--max))) auto 0;
  display: flex;
  align-items: center;
  padding: min(calc(10 * var(--scale)), calc(10px * var(--max))) 0;
  background: #f8f8f8;
  border-radius: min(calc(5 * var(--scale)), calc(5px * var(--max)));
}
.stories-detail__meta:not(:has(*)) {
  display: none;
}
@media (max-width: 767px) {
  .stories-detail__meta {
    flex-direction: column;
    padding: min(calc(10 * var(--scale)), calc(10px * var(--max))) min(calc(24 * var(--scale)), calc(24px * var(--max)));
    margin-top: 9%;
  }
}

.stories-detail__group {
  display: flex;
  align-items: center;
  gap: 0 min(calc(20 * var(--scale)), calc(20px * var(--max)));
  padding: 0 min(calc(27 * var(--scale)), calc(27px * var(--max)));
  width: 50%;
}
.stories-detail__group:nth-child(2) {
  border-left: 1px solid #d9d9d9;
}
.stories-detail__group--mood {
  --icon: url(../img/common/icon_heart.svg);
  --ratio: 1/1;
}
.stories-detail__group--tag {
  --icon: url(../img/common/icon_mountain.svg);
  --ratio: 23/14;
}
.stories-detail__group dt {
  font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
  color: #00685f;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.stories-detail__group dt::before {
  display: inline-block;
  content: "";
  position: relative;
  background: #0e6f64;
  -webkit-mask: var(--icon) center/100% no-repeat;
          mask: var(--icon) center/100% no-repeat;
  width: 1.4em;
  aspect-ratio: var(--ratio);
  margin-right: 0.4em;
}
.stories-detail__group dd {
  font-weight: 400;
  font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  font-family: "TsukuARdGothicStd-R";
}
.stories-detail__group dd span {
  display: block;
  font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
}
@media (max-width: 767px) {
  .stories-detail__group {
    width: 100%;
    display: block;
    padding: min(calc(10 * var(--scale)), calc(10px * var(--max))) 0;
  }
  .stories-detail__group:nth-child(2) {
    border-left: none;
    border-top: 1px solid #d9d9d9;
  }
  .stories-detail__group dd {
    font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
    padding-left: 1.7em;
  }
}

.stories-detail__thumbnail {
  width: 100%;
  margin: 3.2% auto 0;
}
@media (max-width: 767px) {
  .stories-detail__thumbnail img {
    aspect-ratio: 375/240;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.stories-detail__content {
  margin-top: min(calc(40 * var(--scale)), calc(40px * var(--max)));
}
.stories-detail__content h2 {
  background: var(--heading-bg);
  color: var(--heading-color);
  font-size: calc(min(calc(24 * var(--scale)), calc(24px * var(--max))) * var(--heading-fontRate));
}
.stories-detail__content h3 {
  font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  margin-top: 0.3em;
}
.stories-detail__content p {
  margin-bottom: 1em;
  margin-bottom: 1.8em;
}
.stories-detail__content figure {
  margin: min(calc(10 * var(--scale)), calc(10px * var(--max))) 0;
}

/* writer
------------------------------*/
.writer {
  width: min(calc(823 * var(--scale)), calc(823px * var(--max)));
  margin: 0 auto;
  margin-top: min(calc(80 * var(--scale)), calc(80px * var(--max)));
  background: #f8f8f8;
  padding: min(calc(10 * var(--scale)), calc(10px * var(--max))) 0;
  border-radius: min(calc(5 * var(--scale)), calc(5px * var(--max)));
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;
}
.writer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-20%, -40%);
  background: url(../img/stories/writer-title.png) no-repeat center center/contain;
  width: min(calc(116 * var(--scale)), calc(116px * var(--max)));
  aspect-ratio: 248/143;
}
.writer:has(.writer__profile:empty) {
  display: none;
}
@media (max-width: 767px) {
  .writer {
    margin-top: min(calc(35 * var(--scale)), calc(35px * var(--max)));
    width: 100%;
    flex-direction: column;
    gap: min(calc(25 * var(--scale)), calc(25px * var(--max))) 0;
    padding: min(calc(20 * var(--scale)), calc(20px * var(--max)));
    padding-bottom: min(calc(40 * var(--scale)), calc(40px * var(--max)));
  }
  .writer::before {
    display: none;
  }
}

.writer__profile {
  padding-left: min(calc(55 * var(--scale)), calc(55px * var(--max)));
  width: calc(400 / 823 * 100%);
  display: flex;
  align-items: center;
  gap: 0 min(calc(20 * var(--scale)), calc(20px * var(--max)));
}
@media (max-width: 767px) {
  .writer__profile {
    width: 100%;
    padding-left: 0;
    gap: 0 min(calc(5 * var(--scale)), calc(5px * var(--max)));
  }
}

.writer__photo {
  width: min(calc(112 * var(--scale)), calc(112px * var(--max)));
  border: 1px solid #00685f;
  border-radius: 50%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.writer__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 767px) {
  .writer__photo {
    width: min(calc(100 * var(--scale)), calc(100px * var(--max)));
    position: relative;
  }
  .writer__photo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    background: url(../img/stories/writer-title.png) no-repeat center center/contain;
    width: min(calc(100 * var(--scale)), calc(100px * var(--max)));
    aspect-ratio: 248/143;
  }
}

.writer__name {
  font-size: min(calc(24 * var(--scale)), calc(24px * var(--max)));
}
@media (max-width: 767px) {
  .writer__name {
    font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.writer__details {
  border-left: 1px solid #d9d9d9;
  font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  color: #717171;
  width: min(calc(367 * var(--scale)), calc(367px * var(--max)));
  padding-left: 3.7em;
  padding-right: 2em;
}
@media (max-width: 767px) {
  .writer__details {
    font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
    padding: 0;
    border-left: none;
    width: 100%;
  }
}

.writer__updated {
  text-align: center;
  font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  font-family: "TsukuARdGothicStd-R";
}

.writer__notice {
  font-size: min(calc(13 * var(--scale)), calc(13px * var(--max)));
  margin-top: 1em;
  font-family: "TsukuARdGothicStd-R";
}
@media (max-width: 767px) {
  .writer__notice {
    font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
    margin-top: 0;
  }
}

/* recommend
------------------------------*/
.recommend {
  position: relative;
}
.recommend--experiences {
  background: #f9f4dc;
  --title-bg: url(../img/stories/recommend-title_orange.png);
  --accent-color: #dba326;
  --pickup-color: #dba326;
  padding: min(calc(50 * var(--scale)), calc(50px * var(--max))) min(calc(70 * var(--scale)), calc(70px * var(--max))) min(calc(40 * var(--scale)), calc(40px * var(--max)));
  margin-top: min(calc(70 * var(--scale)), calc(70px * var(--max)));
  width: 127.4%;
  margin-left: 50%;
  transform: translateX(-50%);
}
.recommend--experiences::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  background: #f9f4dc;
  -webkit-clip-path: polygon(50% 0, 0% 100%, 100% 100%);
          clip-path: polygon(50% 0, 0% 100%, 100% 100%);
  width: min(calc(80 * var(--scale)), calc(80px * var(--max)));
  aspect-ratio: 100/56;
}
.recommend--experiences .selection__card-area::before {
  display: none;
}
.recommend--stories {
  background: #ebf0e4;
  --title-bg: url(../img/stories/featured-label-bg_green.png.png);
  --accent-color: #0e6f64;
  --pickup-color: #0e6f64;
  --color: #0e6f64;
  width: min(calc(1238 * var(--scale)), calc(1238px * var(--max)));
  border-radius: 0 min(calc(80 * var(--scale)), calc(80px * var(--max))) min(calc(80 * var(--scale)), calc(80px * var(--max))) 0;
  padding: min(calc(100 * var(--scale)), calc(100px * var(--max))) min(calc(60 * var(--scale)), calc(60px * var(--max))) min(calc(100 * var(--scale)), calc(100px * var(--max))) min(calc(259 * var(--scale)), calc(259px * var(--max)));
  position: relative;
  z-index: 10;
  margin-left: calc(min( 0 * var(--scale),0px) +  max(0px, (100vw - 1440px)/2));
}
.recommend--stories .selection__card-area {
  background: #5aaf7e;
}
@media (max-width: 767px) {
  .recommend--stories {
    padding: 0;
  }
}
@media (max-width: 767px) {
  .recommend .selection__cards {
    gap: min(calc(27 * var(--scale)), calc(27px * var(--max))) 0;
  }
  .recommend--experiences {
    width: 116%;
    margin-top: 9%;
    padding: 21% 14% 15%;
    padding-right: 8%;
  }
  .recommend--experiences::before {
    width: min(calc(40 * var(--scale)), calc(40px * var(--max)));
  }
  .recommend--stories {
    width: 95%;
    padding: 63% 14% 24%;
    padding-right: 8%;
    border-radius: 0 min(calc(50 * var(--scale)), calc(50px * var(--max))) min(calc(50 * var(--scale)), calc(50px * var(--max))) 0;
  }
  .recommend--stories .recommend__cards {
    margin-top: 0;
  }
  .recommend--stories .recommend__link a {
    letter-spacing: -0.05em;
    justify-content: flex-start;
    padding-left: 0.7em;
  }
}

.recommend-wrapper {
  background: #fff;
  padding: min(calc(230 * var(--scale)), calc(230px * var(--max))) 0 min(calc(200 * var(--scale)), calc(200px * var(--max)));
  overflow-x: clip;
  position: relative;
}
.recommend-wrapper::before, .recommend-wrapper::after {
  content: "";
  position: absolute;
  aspect-ratio: 1/1;
  background: url(../img/blur/07_F9FFED.png) no-repeat center center/100%;
  pointer-events: none;
  width: min(calc(1038 * var(--scale)), calc(1038px * var(--max)));
}
@media (max-width: 767px) {
  .recommend-wrapper::before, .recommend-wrapper::after {
    width: min(calc(447 * var(--scale)), calc(447px * var(--max)));
  }
}
.recommend-wrapper::before {
  left: 0;
  top: 0;
  transform: translate(-40%, -20%);
}
@media (max-width: 767px) {
  .recommend-wrapper::before {
    transform: translate(-40%, -40%);
  }
}
.recommend-wrapper::after {
  right: 0;
  bottom: 0;
  transform: translate(40%, 30%);
}
.recommend-wrapper .recommend__title {
  background: url(../img/stories/featured-label-bg_green.png) no-repeat center center/100%;
  transform: translate(-40%, -70%);
  width: min(calc(230 * var(--scale)), calc(230px * var(--max)));
}
@media (max-width: 767px) {
  .recommend-wrapper {
    padding-top: 21%;
    padding-bottom: min(calc(160 * var(--scale)), calc(160px * var(--max)));
  }
  .recommend-wrapper .recommend__title {
    transform: translate(49%, -58%);
    width: min(calc(216 * var(--scale)), calc(216px * var(--max)));
    padding-bottom: 12%;
  }
}

@media (min-width: 768px) {
  .recommend-wrapper__inner {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .recommend-wrapper__inner {
    width: 100%;
  }
}

.recommend__container {
  background: var(--bg-color);
}

.recommend__title {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-20%, -20%);
  width: min(calc(260 * var(--scale)), calc(260px * var(--max)));
  aspect-ratio: 452/458;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(calc(22 * var(--scale)), calc(22px * var(--max)));
  background: var(--title-bg) no-repeat center center/cover;
}
@media (max-width: 767px) {
  .recommend__title {
    width: min(calc(210 * var(--scale)), calc(210px * var(--max)));
    transform: translate(-9%, 65%);
    font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  }
}

.recommend__lead {
  font-size: min(calc(24 * var(--scale)), calc(24px * var(--max)));
  text-align: center;
}
@media (max-width: 767px) {
  .recommend__lead {
    font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
    transform: translateX(-3%);
  }
}

.recommend__cards {
  margin-top: min(calc(40 * var(--scale)), calc(40px * var(--max)));
  display: flex;
  gap: 0 min(calc(30 * var(--scale)), calc(30px * var(--max)));
}
@media (max-width: 767px) {
  .recommend__cards {
    margin-top: min(calc(165 * var(--scale)), calc(165px * var(--max)));
  }
  .recommend__cards .selection__card-area {
    font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}

.recommend__card {
  width: calc(33.3% - min(calc(30 * var(--scale)), calc(30px * var(--max))) * 2 / 3);
  background: #fff;
  border-radius: min(calc(16 * var(--scale)), calc(16px * var(--max)));
  padding: min(calc(20 * var(--scale)), calc(20px * var(--max))) min(calc(10 * var(--scale)), calc(10px * var(--max)));
  box-shadow: 2px 4px 12px rgba(223, 203, 158, 0.3);
}

.recommend__card-thumbnail {
  aspect-ratio: 250/166;
}

.recommend__card-body {
  margin-top: min(calc(30 * var(--scale)), calc(30px * var(--max)));
}

.recommend__card-area {
  font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
  color: #fff;
  background: #dba326;
}

.recommend__card-title {
  font-size: min(calc(18 * var(--scale)), calc(18px * var(--max)));
  line-height: 1.3333333333;
}

.recommend__link a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: min(calc(20 * var(--scale)), calc(20px * var(--max)));
  font-family: "TsukuARdGothicStd-B";
  line-height: 1.95;
  color: var(--pickup-color);
  margin-left: auto;
  margin-top: 1.3em;
  margin-right: 1.8%;
}
@media (max-width: 767px) {
  .recommend__link {
    margin-top: min(calc(45 * var(--scale)), calc(45px * var(--max)));
  }
  .recommend__link a {
    background: var(--pickup-color);
    border-radius: min(calc(50 * var(--scale)), calc(50px * var(--max)));
    color: #fff;
    justify-content: center;
    position: relative;
    margin: -0.7em auto 0;
    padding: 0.5em 0;
    font-size: min(calc(17 * var(--scale)), calc(17px * var(--max)));
  }
  .recommend__link a::before {
    display: none;
  }
  .recommend__link a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
    background: url(../img/img-arrow_white.png) no-repeat center center/contain;
    width: 0.35em;
    aspect-ratio: 15/24;
  }
}

.recommend__heading {
  z-index: 10;
  background: #fff;
  color: #0e6f64;
  border-radius: 0 0 0 min(calc(83 * var(--scale)), calc(83px * var(--max)));
  aspect-ratio: 608/186;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 6.3%;
  padding-bottom: 3%;
  width: min(calc(630 * var(--scale)), calc(630px * var(--max)));
  position: absolute;
  font-size: min(calc(36 * var(--scale)), calc(36px * var(--max)));
  top: 0%;
  right: calc(min(calc(511 * var(--scale)), calc(511px * var(--max))) * -1);
  transform: translate(-50%, -50%);
}
.recommend__heading::before {
  content: "";
  position: absolute;
  background: #0e6f64;
  -webkit-mask: url(../img/common/dec01-2.png) center/100% no-repeat;
          mask: url(../img/common/dec01-2.png) center/100% no-repeat;
  aspect-ratio: 1/1;
  transform: translate(-11%, -47%);
  width: 13%;
  left: 0%;
  top: 0%;
}
@media (max-width: 767px) {
  .recommend__heading {
    aspect-ratio: 608/176;
    padding: 0% 6% 5%;
    padding-right: 0;
    width: 94%;
    right: unset;
    left: 0;
    font-size: min(calc(24 * var(--scale)), calc(24px * var(--max)));
    transform: translate(0%, -3%);
    border-radius: 0 0 min(calc(40 * var(--scale)), calc(40px * var(--max))) 0;
  }
  .recommend__heading::before {
    transform: translate(-11%, -47%) scale(-1, 1);
    width: 9%;
    left: 92%;
    top: 0%;
  }
}

.recommend__content {
  position: relative;
}

.selection--stories .selection__cards {
  margin-top: 0;
  width: 90.6%;
}
.selection--stories .selection__card {
  background: url(../img/dec_bg01.png) no-repeat center center/auto;
  border-radius: min(calc(16 * var(--scale)), calc(16px * var(--max)));
}
@media (max-width: 767px) {
  .selection--stories .selection__cards {
    margin-top: 10%;
  }
  .selection--stories .selection__card-area {
    padding: 0.2em 2em;
    font-size: min(calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}

/* search
------------------------------*/
.search {
  z-index: 10;
}

/* message
------------------------------*/
.message {
  background: #fff;
  padding: min(calc(285 * var(--scale)), calc(285px * var(--max))) 0 min(calc(390 * var(--scale)), calc(390px * var(--max)));
  position: relative;
}
.message::before, .message::after {
  content: "";
  position: absolute;
  width: min(calc(240 * var(--scale)), calc(240px * var(--max)));
  width: min(calc(520 * var(--scale)), calc(520px * var(--max)));
  aspect-ratio: 1/1;
  background: url(../img/blur/02_F9F6E0.png) no-repeat center center/100%;
}
.message::before {
  transform: translate(-140%, -40%);
  left: 50%;
  top: 0;
}
.message::after {
  transform: translate(50%, 20%);
  left: 50%;
  bottom: 0;
}
.message > .inner {
  position: relative;
  z-index: 10;
}
@media (max-width: 767px) {
  .message {
    padding: min(calc(127 * var(--scale)), calc(127px * var(--max))) 0 min(calc(256 * var(--scale)), calc(256px * var(--max)));
  }
  .message::before, .message::after {
    width: min(calc(400 * var(--scale)), calc(400px * var(--max)));
  }
  .message::before {
    transform: translate(-90%, -50%);
  }
  .message::after {
    transform: translate(-10%, 30%);
  }
}

.message__content {
  position: relative;
}
.message__content::before {
  content: "";
  position: absolute;
  aspect-ratio: 1/1;
  width: min(calc(800 * var(--scale)), calc(800px * var(--max)));
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  background: url(../img/blur/03_3CAAC8.png) no-repeat center center/100%;
  border-radius: 50%;
  pointer-events: none;
}
@media (max-width: 767px) {
  .message__content::before {
    width: min(calc(360 * var(--scale)), calc(360px * var(--max)));
    opacity: 0.8;
  }
}

.message__text__wrap {
  position: relative;
}
.message__text__wrap::before {
  content: "";
  position: absolute;
  background: url(../img/stories/message01.png) no-repeat center center/100%;
  aspect-ratio: 774/380;
  transform: translate(31%, -163%);
  width: min(calc(386 * var(--scale)), calc(386px * var(--max)));
  left: 50%;
  top: 50%;
}
.message__text__wrap::after {
  content: "";
  position: absolute;
  background: url(../img/stories/message02.png) no-repeat center center/100%;
  aspect-ratio: 584/168;
  transform: translate(-166%, 187%);
  width: min(calc(291 * var(--scale)), calc(291px * var(--max)));
  left: 50%;
  top: 50%;
}
@media (max-width: 767px) {
  .message__text__wrap::before {
    transform: translate(-13%, -263%);
    width: min(calc(190 * var(--scale)), calc(190px * var(--max)));
  }
  .message__text__wrap::after {
    transform: translate(-116%, 467%);
    width: min(calc(145 * var(--scale)), calc(145px * var(--max)));
  }
}

.message__text {
  font-size: min(calc(22 * var(--scale)), calc(22px * var(--max)));
  text-align: center;
  line-height: 1.5;
  position: relative;
  z-index: 10;
}
@media (max-width: 767px) {
  .message__text {
    font-size: min(calc(16 * var(--scale)), calc(16px * var(--max)));
    line-height: 1.5625;
  }
  .message__text::before {
    transform: translate(-13%, -263%);
    width: min(calc(190 * var(--scale)), calc(190px * var(--max)));
  }
  .message__text::after {
    transform: translate(-116%, 467%);
    width: min(calc(145 * var(--scale)), calc(145px * var(--max)));
  }
}
/*# sourceMappingURL=stories.css.map */