/* ===========================================
 * FRONT-PAGE CSS
 * ======================================== */
/* ===========================================
 * p-pagetop
 * ======================================== */
.p-pagetop {
  background-color: #f2f2f2;
}
.p-pagetop__title {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 900;
}
.p-pagetop__text {
  font-size: 1.75rem;
  margin: 0;
}

/* p-pagetop ( 768 px < ) */
/* ======================================== */
/* p-pagetop ( 992 px < ) */
/* ======================================== */
/* p-pagetop ( 1200 px < ) */
/* ======================================== */
/* ===========================================
 * p-mv
 * ======================================== */
.p-mv {
  width: 100%;
  height: 150vw;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
}
.p-mv::before {
  content: "";
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  background: url(../img/dot.svg) right bottom repeat;
  background-size: 2px;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.p-mv::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  bottom: 0;
  left: 0;
  z-index: 2;
}
.p-mv__catch {
  color: #fff;
  text-shadow: 0 0 0.3125rem #000;
  text-align: center;
  margin-bottom: 0;
  position: relative;
  z-index: 3;
}
.p-mv__catch-title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 900;
}
.p-mv__catch-text {
  font-size: 1.75rem;
  margin: 0;
}
.p-mv__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.p-mv__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-mv__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-mv__slide li {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  transition: clip-path 0.6s ease 0s;
  clip-path: polygon(0 -20%, 100% 0, 100% 120%, 0 100%);
}
.p-mv__slide li img {
  transform: scale(1);
  transition: transform 5s linear 0s;
}
.p-mv__slide li.is-active {
  z-index: 0;
  clip-path: polygon(0 -20%, 100% 0, 100% 120%, 0 100%);
}
.p-mv__slide li.is-active img {
  transform: scale(1.05);
}
.p-mv__slide li:has(+ .is-active) {
  z-index: 1;
  clip-path: polygon(0 40%, 100% 60%, 100% 60%, 0 40%);
}
.p-mv__slide li:has(+ .is-active) img {
  transform: scale(1.05);
}
.p-mv__slide:has(li:first-child.is-active) li:last-child {
  opacity: 1;
  z-index: 0;
  clip-path: polygon(0 40%, 100% 60%, 100% 60%, 0 40%);
}
.p-mv__slide:has(li:first-child.is-active) li:last-child img {
  transform: scale(1.05);
}
.p-mv__video {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  z-index: 1;
}
.p-mv__search {
  box-sizing: border-box;
  width: 100%;
  padding: 7vw;
  position: relative;
  z-index: 3;
}
.p-mv__scroll {
  display: none;
}

/* p-mv ( 768 px < ) */
/* ======================================== */
@media (min-width: 768px) {
  .p-mv {
    width: 100%;
    height: 100dvh;
    max-height: 75vw;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 8.75rem;
  }
  .p-mv::before {
    display: block;
  }
  .p-mv__video {
    display: block;
  }
  .p-mv__slide {
    display: none;
  }
  .p-mv__catch {
    margin: 0 auto;
  }
  .p-mv__catch-title {
    font-size: 3.75rem;
    font-weight: 900;
    margin-bottom: 1em;
  }
  .p-mv__search {
    max-width: 40rem;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
    padding: 2.5rem 0;
  }
  .p-mv__scroll {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    color: #fff;
    z-index: 3;
  }
  .p-mv__scroll-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9375rem;
  }
  .p-mv__scroll-link:hover {
    color: #fff;
  }
  .p-mv__scroll-line {
    width: 0.125rem;
    height: 2.5rem;
    position: relative;
    overflow: hidden;
  }
  .p-mv__scroll-line::before, .p-mv__scroll-line::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .p-mv__scroll-line::before {
    background-color: rgba(255, 255, 255, 0.2);
  }
  .p-mv__scroll-line::after {
    background-color: #fff;
    animation: 1.7s 1s infinite scroll-animation;
  }
  @keyframes scroll-animation {
    0% {
      height: 0;
      transform: translateY(0);
    }
    50% {
      height: 2.5rem;
      transform: translateY(0);
    }
    100% {
      height: 2.5rem;
      transform: translateY(100%);
    }
  }
}
/* p-mv ( 992 px < ) */
/* ======================================== */
/* p-mv ( 1200 px < ) */
/* ======================================== */
/* ===========================================
 * top-search
 * ======================================== */
/* top-search ( 768 px < ) */
/* ======================================== */
@media (min-width: 768px) {
  .p-top-search__pref {
    padding-bottom: 1em;
  }
  .p-top-search__pref-container {
    margin-top: 1.5em;
  }
}
/* top-search ( 992 px < ) */
/* ======================================== */
/* top-search ( 1200 px < ) */
/* ======================================== */
/* ===========================================
 * p-top-companion
 * ======================================== */
.p-top-companion__type {
  padding-bottom: 1em;
  border-bottom: solid 1px #555;
}
.p-top-companion__type-text {
  font-weight: 400;
  line-height: 2;
}
.p-top-companion__type-imagelist {
  font-weight: 700;
}
.p-top-companion__type-imagelist figure {
  aspect-ratio: 41/28;
}
.p-top-companion__theme-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.p-top-companion__theme-slide {
  flex-basis: 43.5%;
  border-radius: 2.1875rem;
  overflow: hidden;
}
.p-top-companion__theme-list {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  width: 100%;
  height: 100%;
}
.p-top-companion__theme-list:has(li:first-child.is-active) li:last-child {
  z-index: 1;
}
.p-top-companion__theme-list:not(:has(li:first-child.is-active)) li:last-child:not(.is-active) {
  z-index: -1;
}
.p-top-companion__theme-item {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease 0s;
}
.p-top-companion__theme-item a {
  display: block;
  width: 100%;
  height: 100%;
}
.p-top-companion__theme-item.is-active {
  z-index: 2;
  opacity: 1;
}
.p-top-companion__theme-item:has(+ .is-active) {
  z-index: 1;
}
.p-top-companion__theme-image {
  width: 100%;
  height: 100%;
}
.p-top-companion__theme-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-top-companion__theme-image figcaption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1.5;
  font-weight: 900;
  box-sizing: border-box;
  padding: 5%;
}
.p-top-companion__theme-thumb {
  flex-basis: 54.5%;
}

/* p-top-companion ( 768 px < ) */
/* ======================================== */
@media (min-width: 768px) {
  .p-top-companion__type-text {
    font-weight: 400;
  }
  .p-top-companion__type-imagelist ul {
    margin-bottom: 0;
  }
  .p-top-companion__theme-wrapper {
    align-items: stretch;
    justify-content: center;
    -moz-column-gap: 3.75rem;
         column-gap: 3.75rem;
  }
  .p-top-companion__theme-slide {
    flex-basis: 50%;
    border-radius: 1.25rem;
  }
  .p-top-companion__theme-thumb {
    flex-basis: 50%;
  }
}
/* p-top-companion ( 992 px < ) */
/* ======================================== */
/* p-top-companion ( 1200 px < ) */
/* ======================================== */
/* ===========================================
 * top-ranking
 * ======================================== */
.p-top-ranking__text {
  font-weight: 400;
  margin-bottom: 2em;
}
.p-top-ranking__slider-item {
  margin: 0 auto 5vw;
}
.p-top-ranking__slider-header {
  border-top: 1px solid #ccc;
  padding: 1.25rem 0 0.625rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1080px;
}
.p-top-ranking__slider-header h3 {
  margin-top: 0;
  font-size: 1.75rem;
  font-weight: 500;
}
.p-top-ranking__slider-header time {
  justify-content: flex-end;
  font-size: 1.375rem;
}
.p-top-ranking__slider-content .slick-arrow {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background-color: #ccc;
  background-size: 1.5rem;
  font-size: 0;
  color: transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
  cursor: pointer;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  transition: all 0.4s ease 0s;
}
.p-top-ranking__slider-content .slick-arrow::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: url(../img/arrow.svg) center center no-repeat;
  background-size: contain;
  position: absolute;
  top: 1.125rem;
  left: 0;
  right: 0;
  margin: auto;
  filter: invert(1);
}
.p-top-ranking__slider-content .slick-arrow:hover {
  background-color: #eb6877;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.75);
}
.p-top-ranking__slider-content .slick-prev {
  left: 1vw;
}
.p-top-ranking__slider-content .slick-prev::before {
  transform: rotate(90deg);
}
.p-top-ranking__slider-content .slick-next {
  right: 1vw;
}
.p-top-ranking__slider-content .slick-next::before {
  transform: rotate(-90deg);
}
.p-top-ranking__slider-content .slick-disabled {
  opacity: 0.1;
  pointer-events: none;
}
.p-top-ranking__slider-content .slick-list {
  padding: 0 3.75vw;
}
.p-top-ranking__slider-content .slick-track {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.p-top-ranking__slider-content .slick-slide {
  margin: 0.625rem;
}
.p-top-ranking__slider-footer {
  padding: 1.25rem;
}
.p-top-ranking__slider .slick-dots {
  margin: 3.125rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}
.p-top-ranking__slider .slick-dots li button {
  text-indent: -9999px;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #ccc;
  border-radius: 0.75rem;
}
.p-top-ranking__slider .slick-dots li.slick-active button {
  background-color: #eb6877;
}
.p-top-ranking__slider-footer {
  width: 90%;
  margin: auto;
  text-align: center;
}

/* top-ranking ( 768 px < ) */
/* ======================================== */
@media (min-width: 768px) {
  .p-top-ranking__text {
    font-weight: 400;
  }
  .p-top-ranking__slider-item {
    margin: 0 auto 3.125rem;
  }
  .p-top-ranking__slider-header {
    border-top: 1px solid #ccc;
    padding: 1.25rem 0 0.625rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1080px;
  }
  .p-top-ranking__slider-header h3 {
    margin-bottom: 0;
    font-size: 1.1em;
  }
  .p-top-ranking__slider-header time {
    font-size: 0.85em;
  }
  .p-top-ranking__slider-content {
    display: flex;
    flex-wrap: wrap;
  }
  .p-top-ranking__slider-content .slick-list {
    width: 90%;
    max-width: 1080px;
    margin: auto;
    padding: 0;
  }
  .p-top-ranking__slider-content .slick-slide {
    margin: 0.625rem 1.25rem 0.625rem 0;
  }
  .p-top-ranking__slider-content .slick-arrow {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1.25rem;
    background-size: 1rem;
  }
  .p-top-ranking__slider-content .slick-arrow::before {
    width: 1rem;
    height: 1rem;
    top: 0.75rem;
  }
  .p-top-ranking__slider-content .slick-prev {
    left: 1.5625rem;
  }
  .p-top-ranking__slider-content .slick-next {
    right: 1.5625rem;
  }
  .p-top-ranking__slider-footer {
    text-align: center;
  }
}
/* top-ranking ( 992 px < ) */
/* ======================================== */
/* top-ranking ( 1200 px < ) */
/* ======================================== */
@media (min-width: 1200px) {
  .p-top-ranking__slider-content {
    width: 100%;
  }
  .p-top-ranking__slider-content .slick-prev {
    left: calc(50vw - 36rem);
  }
  .p-top-ranking__slider-content .slick-next {
    right: calc(50vw - 36rem);
  }
}
/* ===========================================
 * top-news
 * ======================================== */
.p-top-news__title {
  margin-bottom: 0;
}
.p-top-news__button {
  text-align: center;
}

/* top-news ( 768 px < ) */
/* ======================================== */
/* top-news ( 992 px < ) */
/* ======================================== */
/* top-news ( 1200 px < ) */
/* ======================================== */
/* ===========================================
 * top-review
 * ======================================== */
.p-top-review__title {
  margin-bottom: 2.5rem;
}
.p-top-review__button {
  text-align: center;
  margin-top: 2.5rem;
}
.p-top-review__list {
  width: 111.1111111111%;
  margin: 0 -5.5555555556%;
}
.p-top-review__list .c-card-review {
  width: 90vw;
  margin: 0 1.25vw;
  height: auto;
}
.p-top-review__list .slick-list {
  padding: 0 3.75vw;
}
.p-top-review__list .slick-track {
  display: flex;
  align-items: stretch;
}
.p-top-review__list .slick-arrow {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background-color: #ccc;
  background-size: 1.5rem;
  font-size: 0;
  color: transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
  cursor: pointer;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  transition: all 0.4s ease 0s;
}
.p-top-review__list .slick-arrow::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: url(../img/arrow.svg) center center no-repeat;
  background-size: contain;
  position: absolute;
  top: 1.125rem;
  left: 0;
  right: 0;
  margin: auto;
  filter: invert(1);
}
.p-top-review__list .slick-arrow:hover {
  background-color: #eb6877;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.75);
}
.p-top-review__list .slick-prev {
  left: 1vw;
}
.p-top-review__list .slick-prev::before {
  transform: rotate(90deg);
}
.p-top-review__list .slick-next {
  right: 1vw;
}
.p-top-review__list .slick-next::before {
  transform: rotate(-90deg);
}
.p-top-review__list .slick-disabled {
  opacity: 0.1;
  pointer-events: none;
}

/* top-review ( 768 px < ) */
/* ======================================== */
@media (min-width: 768px) {
  .p-top-review__list {
    width: 100%;
    margin: auto;
  }
  .p-top-review__list .c-card-review {
    width: auto;
    margin: 0 0.625rem;
  }
  .p-top-review__list .slick-list {
    padding: 0;
  }
  .p-top-review__list .slick-arrow {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1.25rem;
    background-color: #ccc;
    background-size: 1rem;
    font-size: 0;
    color: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    cursor: pointer;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease 0s;
  }
  .p-top-review__list .slick-arrow::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background: url(../img/arrow.svg) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0.75rem;
    left: 0;
    right: 0;
    margin: auto;
    filter: invert(1);
  }
  .p-top-review__list .slick-arrow:hover {
    background-color: #eb6877;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.75);
  }
  .p-top-review__list .slick-prev {
    left: -1.25rem;
  }
  .p-top-review__list .slick-prev::before {
    transform: rotate(90deg);
  }
  .p-top-review__list .slick-next {
    right: -1.25rem;
  }
  .p-top-review__list .slick-next::before {
    transform: rotate(-90deg);
  }
}
/* top-review ( 992 px < ) */
/* ======================================== */
/* top-review ( 1200 px < ) */
/* ======================================== */
/* ===========================================
 * top-column
 * ======================================== */
/* top-column ( 768 px < ) */
/* ======================================== */
@media (min-width: 768px) {
  .p-top-column__button {
    margin-top: 2.5rem;
    text-align: center;
  }
}
/* top-column ( 992 px < ) */
/* ======================================== */
/* top-column ( 1200 px < ) */
/* ======================================== */
/* ===========================================
 * top-flow
 * ======================================== */
.p-top-flow__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3.125rem;
}
.p-top-flow__list-header {
  margin-bottom: 1em;
  line-height: 1.5;
}
.p-top-flow__list-item {
  display: block;
  width: 100%;
  max-width: 50rem;
  margin: auto;
}
.p-top-flow__list-num {
  color: #eb6877;
  margin-bottom: 0;
  font-size: 2.375rem;
}
.p-top-flow__list-num span {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-weight: 400;
}
.p-top-flow__list-num strong {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-weight: 700;
}
.p-top-flow__list-title {
  margin: 0.5em 0;
}
.p-top-flow__list-content *:first-child {
  margin-top: 0;
}
.p-top-flow__list-text {
  font-weight: 400;
  margin: 0;
}

/* top-flow ( 768 px < ) */
/* ======================================== */
@media (min-width: 768px) {
  .p-top-flow__list {
    margin-top: 1.875rem;
    gap: 1.875rem;
  }
  .p-top-flow__list-header {
    display: flex;
    align-items: flex-start;
  }
  .p-top-flow__list-num {
    flex-basis: 7.5rem;
    font-size: 1.5rem;
    line-height: 1;
  }
  .p-top-flow__list-title {
    flex-basis: calc(100% - 7.5rem);
    margin: 0;
  }
  .p-top-flow__list-content {
    flex-basis: 44.375rem;
  }
  .p-top-flow__list-text {
    font-weight: 400;
  }
}
/* top-flow ( 992 px < ) */
/* ======================================== */
/* top-flow ( 1200 px < ) */
/* ======================================== */
/* ===========================================
 * top-faq
 * ======================================== */
.p-top-faq__title {
  margin-bottom: 0.5em;
}
.p-top-faq__button {
  text-align: center;
  margin-top: 0.5em;
}

/* top-faq ( 768 px < ) */
/* ======================================== */
/* top-faq ( 992 px < ) */
/* ======================================== */
/* top-faq ( 1200 px < ) */
/* ======================================== */
/* ===========================================
 * main
 * ======================================== */
/* sub ( 768 px < ) */
/* ======================================== */
@media (min-width: 768px) {
  .p-top-about__content {
    max-width: 50rem;
    margin: 0 auto;
  }
}
/* sub ( 992 px < ) */
/* ======================================== */
/* sub ( 1200 px < ) */
/* ======================================== */
/* ===========================================
 * top-reason
 * ======================================== */
.p-top-reason__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
.p-top-reason__list-item {
  display: block;
  width: 100%;
  max-width: 50rem;
  margin: auto;
}
.p-top-reason__list-header {
  line-height: 1.5;
  margin-bottom: 1em;
}
.p-top-reason__list-num {
  color: #eb6877;
  margin-bottom: 0;
  font-size: 2.375rem;
}
.p-top-reason__list-num span {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-weight: 400;
}
.p-top-reason__list-num strong {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-weight: 700;
}
.p-top-reason__list-title {
  margin: 0.5em 0;
}
.p-top-reason__list-content *:first-child {
  margin-top: 0;
}
.p-top-reason__list-text {
  margin: 0;
  text-align: justify;
}

/* top-reason ( 768 px < ) */
/* ======================================== */
@media (min-width: 768px) {
  .p-top-reason__list {
    gap: 3.125rem;
  }
  .p-top-reason__list-item {
    justify-content: center;
    gap: 1.875rem;
  }
  .p-top-reason__list-header {
    display: flex;
    align-self: flex-start;
  }
  .p-top-reason__list-num {
    flex-basis: 9.375rem;
    font-size: 1.5rem;
    line-height: 1;
  }
  .p-top-reason__list-title {
    flex-basis: calc(100% - 9.375rem);
    margin: 0;
  }
  .p-top-reason__list-content {
    flex-basis: 44.6875rem;
  }
}
/* top-reason ( 992 px < ) */
/* ======================================== */
/* top-reason ( 1200 px < ) */
/* ======================================== *//*# sourceMappingURL=front-page.css.map */