.recommendationArea {
  background-color: #F0F8FC;
}
@media screen and (max-width: 960.98px) {
  .recommendationArea {
    padding: clamp(0px, calc(0px + (74 * max(0px, ((100dvw - 0px) / (768))))), 74px) 0 clamp(0px, calc(0px + (88 * max(0px, ((100dvw - 0px) / (768))))), 88px);
  }
}
@media print, screen and (min-width: 961px) {
  .recommendationArea {
    padding: clamp(0px, calc(0px + (120 * max(0px, ((100dvw - 0px) / (960))))), 120px) 0 clamp(0px, calc(0px + (88 * max(0px, ((100dvw - 0px) / (960))))), 88px);
  }
}
.recommendationArea .recommendationArea_heading {
  font-size: clamp(2.3rem, calc(23px + (9 * max(0px, ((100dvw - 384px) / (384))))), 3.2rem);
  letter-spacing: .1em;
  font-weight: 700;
}
.recommendationArea .recommendationArea_summary {
  font-size: clamp(1.3rem, calc(13px + (3 * max(0px, ((100dvw - 384px) / (384))))), 1.6rem);
  line-height: 1.7;
  letter-spacing: .1em;
  margin-top: 2em;
}
.recommendationArea .l-contents {
  padding: clamp(25px, calc(25px + (31 * max(0px, ((100dvw - 384px) / (576))))), 56px) 0 80px;
}
.recommendationArea .l-contents .splide__list {
  align-items: stretch;
}
.recommendationArea .l-contents .splide__slide {
  display: flex;
  flex-direction: column;
}
.recommendationArea .recommendationArea_article {
  height: 50%;
}
@media screen and (max-width: 960.98px) {
  .recommendationArea .recommendationArea_article {
    width: clamp(0px, calc(0px + (300 * max(0px, ((100dvw - 0px) / (700))))), 300px);
    margin-left: clamp(0px, calc(0px + (24 * max(0px, ((100dvw - 0px) / (700))))), 24px);
  }
}
@media screen and (min-width: 961px) and (max-width: 1199.98px) {
  .recommendationArea .recommendationArea_article {
    width: 300px;
    margin: 0 12px;
  }
}
@media print, screen and (min-width: 1200px) {
  .recommendationArea .recommendationArea_article {
    width: clamp(0px, calc(0px + (360 * max(0px, ((100dvw - 0px) / (1440))))), 360px);
    margin: 0 clamp(0px, calc(0px + (16 * max(0px, ((100dvw - 0px) / (1440))))), 16px);
  }
}
@media screen and (max-width: 960.98px) {
  .recommendationArea .recommendationArea_article:first-child {
    margin-top: clamp(0px, calc(0px + (10 * max(0px, ((100dvw - 0px) / (700))))), 10px);
    margin-bottom: clamp(0px, calc(0px + (50 * max(0px, ((100dvw - 0px) / (700))))), 50px);
  }
}
@media screen and (min-width: 961px) and (max-width: 1199.98px) {
  .recommendationArea .recommendationArea_article:first-child {
    margin-top: 10px;
    margin-bottom: 50px;
  }
}
@media print, screen and (min-width: 1200px) {
  .recommendationArea .recommendationArea_article:first-child {
    margin-top: clamp(0px, calc(0px + (12 * max(0px, ((100dvw - 0px) / (1440))))), 12px);
    margin-bottom: clamp(0px, calc(0px + (60 * max(0px, ((100dvw - 0px) / (1440))))), 60px);
  }
}
.recommendationArea .recommendationArea_article ._thumbnail {
  max-width: 720px;
  max-height: 510px;
  height: auto;
  aspect-ratio: 720 / 510;
  overflow: hidden;
  position: relative;
  transition: transform 400ms;
}
.recommendationArea .recommendationArea_article ._thumbnail::after {
  box-sizing: border-box;
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: clamp(0px, calc(0px + (9.6 * max(0px, ((100dvw - 0px) / (1440))))), 0.96rem);
  border: clamp(0px, calc(0px + (2 * max(0px, ((100dvw - 0px) / (1440))))), 2px) solid #cccccc;
  overflow: hidden;
}
.recommendationArea .recommendationArea_article ._thumbnail[data-category=campaign] ._name {
  color: #F37118;
}
.recommendationArea .recommendationArea_article ._thumbnail[data-category=point-up] ._name {
  color: #34C0E1;
}
.recommendationArea .recommendationArea_article ._thumbnail[data-category=valuable] ._name {
  color: #F05990;
}
.recommendationArea .recommendationArea_article ._thumbnail[data-category=campaign] ._point {
  color: #FF0;
  background: url("/blog/assets/images/bg-campaign.svg") no-repeat 0 0;
}
.recommendationArea .recommendationArea_article ._thumbnail[data-category=point-up] ._point {
  color: #FFF;
  background: url("/blog/assets/images/bg-point-up.svg") no-repeat 0 0;
}
.recommendationArea .recommendationArea_article ._thumbnail[data-category=valuable] ._point {
  color: #FFF;
  background: url("/blog/assets/images/bg-valuable.svg") no-repeat 0 0;
}
.recommendationArea .recommendationArea_article ._thumbnail ._inner {
  box-sizing: border-box;
  width: 720px;
  height: 510px;
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
}
.recommendationArea .recommendationArea_article ._thumbnail ._name {
  font-size: 4.0rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
  box-sizing: border-box;
  height: 122px;
  padding: 0 .5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: clamp(0px, calc(0px + (19.2 * max(0px, ((100dvw - 0px) / (1440))))), 1.92rem) clamp(0px, calc(0px + (19.2 * max(0px, ((100dvw - 0px) / (1440))))), 1.92rem) 0 0;
}
.recommendationArea .recommendationArea_article ._thumbnail ._point {
  background-size: 100%;
  box-sizing: border-box;
  height: 384px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 0 0 clamp(0px, calc(0px + (19.2 * max(0px, ((100dvw - 0px) / (1440))))), 1.92rem) clamp(0px, calc(0px + (19.2 * max(0px, ((100dvw - 0px) / (1440))))), 1.92rem);
}
.recommendationArea .recommendationArea_article ._thumbnail ._point ._text1 {
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
  margin-bottom: .4em;
  display: inline-block;
}
.recommendationArea .recommendationArea_article ._thumbnail ._point ._text2 {
  font-size: 4.0rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
  margin-top: .2em;
  display: inline-block;
}
.recommendationArea .recommendationArea_article ._thumbnail ._point ._num {
  font-size: 17.2rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  letter-spacing: .05em;
  display: inline-block;
}
.recommendationArea .recommendationArea_article ._thumbnail ._point ._unit {
  font-size: 13.6rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: bottom;
  letter-spacing: .05em;
  padding-bottom: .06em;
  display: inline-block;
}
.recommendationArea .recommendationArea_article ._thumbnail ._point ._text-free {
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  margin-top: .2em;
  display: inline-block;
}
.recommendationArea .recommendationArea_article ._inner {
  transform: scale(var(--carouselRate));
}
.recommendationArea .recommendationArea_article a {
  color: #000;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  body:not([data-device="touchDevice"]) .recommendationArea .recommendationArea_article a:hover ._thumbnail {
    transform: scale(1.05);
  }
}
@media (hover: hover) and (pointer: fine) {
  .recommendationArea .recommendationArea_article a span.c-hover-line {
    background: linear-gradient(currentColor, currentColor) 0 100%/0% 1px no-repeat;
    transition: background 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
    /* easeOutQuart */
    padding-bottom: 0.2em;
  }
  .recommendationArea .recommendationArea_article a:hover span.c-hover-line {
    background: linear-gradient(currentColor, currentColor) 0 100%/100% 1px no-repeat;
  }
}
.recommendationArea .recommendationArea_article img {
  border-radius: clamp(0px, calc(0px + (19.2 * max(0px, ((100dvw - 0px) / (1440))))), 1.92rem);
  overflow: hidden;
  width: 100%;
}
.recommendationArea .recommendationArea_article_heading {
  font-size: clamp(1.3rem, calc(13px + (3 * max(0px, ((100dvw - 384px) / (576))))), 1.6rem);
  letter-spacing: .05em;
  line-height: 1.6;
  font-weight: 400;
  text-align: left;
  hyphens: auto;
  word-wrap: break-word;
  margin-top: .8em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recommendationArea .recommendationArea_linkAll {
  width: clamp(260px, calc(260px + (100 * max(0px, ((100dvw - 384px) / (576))))), 360px);
  margin: clamp(20px, calc(20px + (20 * max(0px, ((100dvw - 384px) / (576))))), 40px) auto 0;
  padding: 1.4em 2em;
}

/*# sourceMappingURL=recommendation.css.map */