@charset "utf-8";

/* common */
@media (min-width: 768px) {
  .container--l,
  .container--l_pc {
    padding-right: var(--container-padding-pc);
  }
  .container--r,
  .container--r_pc {
    padding-left: var(--container-padding-pc);
  }
  .home-txt-sup {
    font-size: 0.341em;
    vertical-align: text-top;
    display: inline-block;
    transform: translateY(40%);
  }
}
@media (max-width: 767px) {
  .container--l,
  .container--l_sp {
    padding-right: var(--container-padding-sp);
  }
  .container--r,
  .container--r_sp {
    padding-left: var(--container-padding-sp);
  }
  .home-txt-sup {
    font-size: 0.4em;
    vertical-align: text-top;
    display: inline-block;
    transform: translateY(30%);
  }
}
/* kv */
.kv-sub-ttl {
  font-weight: 700;
}
.kv-video-container {
  overflow: hidden;
  position: relative;
  line-height: 0;
}
.kv-video-container video {
  width: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity var(--transitions-long-time) ease-in;
}
.kv-video-container video.js-visible {
  opacity: 1;
}
.kv-video-btn {
  z-index: 10;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-image: url("/welfare/home/img/btn_video_play.png");
  transition: background-image var(--transitions-short-time) ease-in-out;
}
.kv-video-btn.js-play {
  background-image: url("/welfare/home/img/btn_video_stop.png");
}
.kv-txt-container--first,
.kv-txt-container--second {
  transition: opacity var(--transitions-long-time) ease-in-out;
  color: var(--color-txt-inverse);
}
.kv-txt-container--first {
  opacity: 1;
}
.kv-txt-container--second {
  opacity: 0;
}
.kv-video-container.js-change-txt .kv-txt-container--first {
  opacity: 0;
}
.kv-video-container.js-change-txt .kv-txt-container--second {
  opacity: 1;
}
.kv-notes {
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .kv-ttl-container {
    display: flex;
    align-items: end;
    align-items: flex-end;
    padding: 2.0833vw 0 2.0833vw 2.7778vw;
  }
  .kv-ttl {
    margin-right: 26.736vw;
  }
  .kv-sub-ttl {
    font-size: 2.319vw;
    line-height: 0.551;
  }
  .kv-logo {
    vertical-align: middle;
    display: flex;
    align-items: center;
    margin-top: 2.31875vw;
  }
  .kv-logo-txt {
    font-size: calc(0.457143rem + 1.488095vw);
    font-weight: 700;
    margin-right: 0.69444vw;
  }
  .kv-logo-img {
    width: 31.597vw;
  }
  .kv-anchor {
    transform: scale(0.9628);
  }
  .kv-video-container {
    margin-right: calc(13.001488vw - 66.2214px);
    height: 46.5278vw;
    max-height: calc(100dvh - var(--sticky-header-height));
    border-top-right-radius: 9.7222vw;
    /*101px*/
    --radius-tl: 0;
    --radius-tr: 7.2917vw;
    --radius-br: 0;
    --radius-bl: 0;
  }
  .kv-video-btn {
    bottom: 2.8756vw;
    right: 1.7784vw;
    width: 2.5375vw;
    height: 2.5375vw;
  }
  .kv-txt-container {
    display: flex;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    align-items: end;
    padding-left: 44.306vw;
    padding-right: 7.9861vw;
  }
  .kv-txt {
    position: absolute;
    bottom: 2.0833vw;
    left: 3.264vw;
    width: 100%;
  }
  .kv-video-ttl--sm {
    font-size: 0.591em;
    line-height: 1.3846;
    display: block;
  }
  .kv-txt-sup {
    font-size: 0.436em;
    vertical-align: text-top;
    display: inline-block;
    transform: translateY(30%) translateX(-10%);
  }
  .kv-notes {
    margin-bottom: 2.0833vw;
  }
  .kv-notes > p {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
  }
  .floating-cta.kv-floating-cta {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .kv-video-container {
    height: 48.1182vw;
    align-items: center;
    display: flex;
  }
}
@media (max-width: 767px) {
  .kv {
    position: relative;
  }
  .kv-ttl-container {
    padding: 20px 19px;
  }
  .kv-sub-ttl {
    font-size: 1.63rem;
    line-height: 0.5773;
  }
  .kv-logo {
    display: flex;
    align-items: center;
    margin-top: 12px;
  }
  .kv-logo-txt {
    font-size: 1.4rem;
    font-weight: 700;
    margin-right: 6px;
  }
  .kv-logo-img {
    width: 221.67px;
  }
  .kv-video-wrapper {
    margin-right: 5.128vw;
  }
  .kv-video-container {
    border-top-right-radius: 22.37vw; /*90px*/
    /*68px*/
    --radius-tl: 0;
    --radius-tr: 17.435vw;
    --radius-br: 0;
    --radius-bl: 0;
    position: relative;
  }
  .kv-video-container video {
    width: 100%;
    height: 135vw;
    max-height: calc(100dvh - 66px);
    object-fit: cover;
    object-position: top;
  }
  .kv-video-container.js-wide video {
    object-position: center;
  }
  .kv-video-btn {
    bottom: 14.1025vw; /*55px*/
    right: 2.915vw; /*11.37px*/
    width: 9.392vw; /*36.63px*/
    height: 9.392vw; /*36.63px*/
  }
  .kv-txt-container {
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 10.6179vw;
    left: 5.385vw;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  .kv-txt {
    position: relative;
    flex: 1;
    display: flex;
    margin-bottom: 6.63px;
    flex-direction: column;
    justify-content: end;
  }
  .kv-video-ttl--sm {
    font-size: 0.591em;
    line-height: 1.3846;
    display: block;
  }
  .kv-txt-sup {
    font-size: 0.45em;
    vertical-align: top;
    display: inline-block;
    transform: translateY(20%);
  }
  .kv-notes {
    padding-right: 17.436vw;
  }
  body.js-not-scrolled .floating-cta {
    bottom: calc(100dvh - var(--kv-height));
  }
  body.js-hide-floating-cta .floating-cta {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

/* pickup */
.pickup-date {
  font-size: 1.4rem;
  font-size: max(1.4rem, 0.97222vw);
  line-height: 2.257;
}
.pickup-swiper-btn {
  line-height: 0;
}
.pickup-not-swiper .pickup-swiper-btn {
  display: none;
}
.pickup-ttl > a {
  --underline-height: var(--base-underline-height);
  color: var(--color-link-txt);
  background-image: linear-gradient(var(--color-link-txt), var(--color-link-txt));
  background-size: 0 max(1px, var(--underline-height));
  background-repeat: no-repeat;
  background-position: 0% 100%;
}
@media (hover: hover) and (pointer: fine) {
  .pickup-item:has(.pickup-img:hover) .pickup-ttl a,
  .pickup-ttl a:hover {
    animation: var(--underline-animation-long);
  }
}
@media (min-width: 768px) {
  .pickup-container-1 {
    position: relative;
  }
  .pickup-not-swiper .swiper {
    padding-right: var(--container-padding-pc);
    padding-left: var(--container-padding-pc);
  }
  .pickup-not-swiper .pickup-container-3 {
    display: grid;
    gap: 2.5vw;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pickup-item {
    align-items: center;
  }
  .pickup-img {
    width: 15.9722vw;
    margin-right: 1.3889vw;
  }
  .pickup-date {
    font-size: calc(0.542857rem + 0.595238vw);
  }
  .pickup-ttl {
    font-size: calc(0.6864rem + 1.19vw);
    font-weight: 700;
    line-height: 1.5417;
    margin-bottom: 0.41667vw;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pickup-item {
    align-items: start;
  }
  .pickup-img {
    width: 18.951vw;
    margin-right: 2.016vw;
  }
}
@media (max-width: 767px) {
  .pickup-not-swiper .pickup-container-3 {
    margin-right: var(--container-padding-sp);
    margin-left: var(--container-padding-sp);
    display: grid;
    gap: 20px 5.128vw;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
  }
  .pickup-container-2 {
    margin-top: 20px;
  }
}
/* about */
@media (min-width: 768px) {
  .about-container1 {
    border-radius: 9.722vw 0 0 9.722vw; /*140px*/
    /*101px*/
    --radius-tl: 7.2917vw;
    --radius-tr: 0;
    --radius-br: 0;
    --radius-bl: 7.2917vw;
  }
  .about-container2 {
    overflow: hidden;
    width: 37.0139vw;
    margin-left: 3.944vw;
  }
  .about-container3 {
    width: 38.75vw;
    margin-right: 2.674vw;
  }
  .about-eyebrow {
    font-size: calc(1rem + 1.04167vw);
  }
  .about-img1 {
    border-radius: 9.0278vw 0 0 9.0278vw; /*130px*/
    /*94px*/
    --radius-tl: 6.5278vw;
    --radius-tr: 0;
    --radius-br: 0;
    --radius-bl: 6.5278vw;
  }
  .about-img2 {
    border-radius: 9.0278vw; /*130px*/
    /*94px*/
    --radius-tl: 6.5278vw;
    --radius-tr: 6.5278vw;
    --radius-br: 6.5278vw;
    --radius-bl: 6.5278vw;
  }
  .about-asp1 {
    aspect-ratio: 9/10;
  }
}
@media (max-width: 767px) {
  .about-container1 {
    border-radius: 10.256vw 0 0 10.256vw;
    /* smooth 30px相当 */
    --radius-tl: 7.692vw;
    --radius-tr: 0;
    --radius-br: 0;
    --radius-bl: 7.692vw;
  }
  .about-eyebrow {
    font-size: 1.8rem;
  }
  .about-img1 {
    border-radius: 20.5128vw 0 0 20.5128vw; /*80px*/
    /*60px*/
    --radius-tl: 15.3846vw;
    --radius-tr: 0;
    --radius-br: 0;
    --radius-bl: 15.3846vw;
  }
  .about-img2 {
    border-radius: 20.5128vw; /*80px*/
    --radius-tl: 15.3846vw; /*smooth 60px*/
    --radius-tr: 15.3846vw;
    --radius-br: 15.3846vw;
    --radius-bl: 15.3846vw;
    aspect-ratio: 1/1;
    display: block;
  }
  .about-asp1 {
    aspect-ratio: 15/16;
  }
}

/* appeal */
@media (min-width: 768px) {
  .appeal-container1 {
    border-radius: 0 9.722vw 9.722vw 0; /*140*/
    /*101px*/
    --radius-tl: 0;
    --radius-tr: 7.2917vw;
    --radius-br: 7.2917vw;
    --radius-bl: 0;
  }
}
@media (max-width: 767px) {
  .appeal-container1 {
    border-radius: 0 10.256vw 10.256vw 0; /*40*/
    /* smooth 30px相当 */
    --radius-tl: 0;
    --radius-tr: 7.692vw;
    --radius-br: 7.692vw;
    --radius-bl: ;
  }
}

/*----- products -----*/
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  background-color: transparent;
  border-bottom: none;
  padding: 0;
}
.products-swiper .swiper-button-prev,
.products-swiper .swiper-button-next {
  position: absolute !important;
  top: calc(50% - 1.736vw) !important;
  z-index: 30;
}
.products-swiper .swiper-pagination-bullet:nth-child(1),
.products-swiper .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active {
  background-color: #ecefa1;
}
.products-swiper .swiper-pagination-bullet:nth-child(2),
.products-swiper .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active {
  background-color: #a4b7ce;
}
.products-swiper .swiper-pagination-bullet:nth-child(3),
.products-swiper .swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active {
  background-color: #780000;
}
.products-swiper .swiper-pagination-bullet:nth-child(4),
.products-swiper .swiper-pagination-bullet:nth-child(4).swiper-pagination-bullet-active {
  background-color: #fff;
  border: solid 1px #a9a9a9;
}
.products-swiper .swiper-pagination-bullet {
  opacity: 0.7;
}
.products-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}
.products-price {
  line-height: 1.22;
  font-weight: 500;
}
.products-swiper .swiper-wrapper {
  height: auto;
}
@media (min-width: 768px) {
  .products-price-upper {
    font-size: 1.6rem;
    font-size: max(1.6rem, 0.11vw);
  }
  .products-price {
    font-size: 2.5vw;
    line-height: 1.778;
  }
  .products-swiper {
    padding-bottom: 3.4722vw;
  }
  .products-swiper .swiper-pagination-bullet {
    width: 1.3889vw;
    height: 1.3889vw;
  }
  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 0.486vw !important;
  }
  .products-swiper .swiper-button-prev {
    left: 0 !important;
    transform: translateY(-50%);
  }
  .products-swiper .swiper-button-next {
    transform: translateY(-50%) rotate(180deg);
    right: 0 !important;
  }
}
@media (max-width: 767px) {
  .products-price-upper {
    font-size: 1.7rem;
    font-weight: 500;
  }
  .products-price {
    font-size: 3.6rem;
  }
  .products-price-tax {
    font-size: 1.5rem;
    font-weight: 500;
  }
  .products-price-notes {
    font-size: 1.3rem;
    line-height: 1.846;
  }
  .products-swiper {
    padding-bottom: 60px;
  }
  .products-swiper .swiper-pagination-bullet {
    width: 24px;
    height: 24px;
  }
  .swiper-pagination-fraction,
  .swiper-pagination-custom,
  .swiper-container-horizontal > .swiper-pagination-bullets {
    margin-top: 27px !important;
  }
  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6.5px !important;
  }
  .products-swiper .swiper-pagination-bullet {
    border: 0.685px solid #a9a9a9;
  }
  .products-swiper .swiper-pagination-bullet:nth-child(4) {
    border: solid 2.74px #a9a9a9;
  }
  .products-swiper .swiper-button-prev {
    left: 8px !important;
    transform: translateY(-58px);
  }
  .products-swiper .swiper-button-next {
    transform: translateY(-58px) rotate(180deg);
    right: 8px !important;
  }
}

/*----- uservoice -----*/
.uservoice {
  position: relative;
  display: flex;
  background-color: var(--color-bg-neutral-0);
}
.uservoice-arrow {
  border: solid 1px #000;
}
.usersvoice-swiper {
  overflow: hidden;
}
.usersvoice-swiper .swiper-wrapper {
  align-items: stretch !important;
}
.usersvoice-swiper .swiper-button-next {
  transform: rotate(180deg);
}
@media (min-width: 768px) {
  .uservoice {
    min-height: 18.125vw;
  }
  .uservoice-icon {
    width: 5.556vw;
  }
}

@media (max-width: 767px) {
  .uservoice {
    padding: 5.128vw 5.128vw 10.769vw 5.128vw;
    height: 100%;
  }
  .uservoice-icon {
    width: 12.8205vw;
  }
  .usersvoice-swiper .swiper-slide {
    margin-right: 20px !important;
  }
}
.uservoice-txt {
  flex: 1;
  font-size: 1.6rem;
  line-height: 1.75;
}

@media (min-width: 768px) {
  .uservoice-txt {
    padding-bottom: 35px;
  }
}
@media (max-width: 767px) {
  .uservoice-txt {
    padding-bottom: 65px;
  }
}
.uservoice > .uservoice-btn {
  position: absolute;
  width: 100%;
  bottom: 30px;
  right: 30px;
  text-align: right;
}
@media (min-width: 768px) {
  .uservoice > .uservoice-btn {
    bottom: 2.0833vw;
    right: 2.0833vw;
  }
}
@media (max-width: 767px) {
  .uservoice > .uservoice-btn {
    bottom: 10.769vw;
    right: 5.128vw;
  }
}

/*----- page nav anchor -----*/

@media (min-width: 768px) {
  #appeal {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 4.5vw);
  }
  #products {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 9.5vw);
  }
  #usersvoice {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw);
  }
  #onsite {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw);
  }
  #support {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw);
  }
  #guide {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw);
  }
  #event {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw);
  }
  #faq {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw);
  }
}
@media (max-width: 767px) {
  #about {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 30px);
  }
  #appeal {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 70px);
  }
  #products {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 70px);
  }
  #usersvoice {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 70px);
  }
  #onsite {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 70px);
  }
  #support {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 50px);
  }
  #guide {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 50px);
  }
  #event {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 50px);
  }
  #faq {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 70px);
  }
}
