@charset "UTF-8";
/*TOPscss 野津作成　編集基本的に不可*/
/***** 全体 *****/
body > main {
  height: auto;
  overflow: hidden;
}

/***** loadingアニメ *****/
body #header,
body > main,
body #footer {
  transition: opacity 0.3s 0.3s, margin-top 0.5s 0.3s;
}

body.notload #header,
body.notload > main,
body.notload #footer {
  opacity: 0;
  margin-top: 5vh;
}

#loading {
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--vh) * 100);
  background-color: var(--color_bg_base);
  color: transparent;
  text-indent: -100%;
  overflow: hidden;
  border-bottom: 3px solid var(--color_base);
  opacity: 1;
  transition: height 0.5s, opacity 0.3s 0.3s;
}
#loading.slideout {
  height: 0;
  opacity: 0;
}

/***** MV *****/
.mv {
  padding-right: var(--pad_ss);
  margin-bottom: var(--pad_m);
  position: relative;
  min-height: 420px;
  max-height: 965px;
  height: calc(100vh - var(--header_sp));
}
@media screen and (min-width: 375px) {
  .mv {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .mv {
    padding-right: var(--pad_sm);
  }
}
@media screen and (min-width: 835px) {
  .mv {
    margin-bottom: var(--pad_ll);
  }
}
@media screen and (min-width: 835px) {
  .mv {
    height: calc(100vh - var(--header_pc));
  }
}
.mv::before {
  content: "";
  display: block;
  background-color: var(--color_base);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100px;
}
@media screen and (min-width: 835px) {
  .mv::before {
    width: 134px;
  }
}

.mv__swiper {
  box-sizing: border-box;
  height: calc(100% - var(--pad_l));
}
@media screen and (min-width: 835px) {
  .mv__swiper {
    height: calc(100% - var(--pad_xxxl));
  }
}
.mv__swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: url(../img/top/mask.png);
  mask-image: url(../img/top/mask.png);
  -webkit-mask-position: 0 50%;
  mask-position: 0 50%;
  -webkit-mask-size: 200% 200%;
  mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.mv__swiper .swiper-wrapper .swiper-slide-active,
.mv__swiper .swiper-wrapper .swiper-slide-duplicate-active {
  z-index: 2;
}
.mv__swiper .swiper-wrapper .swiper-slide-active img,
.mv__swiper .swiper-wrapper .swiper-slide-duplicate-active img {
  animation: sw_mask 1s linear forwards;
}
.mv__swiper .sw_control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1em;
  padding-right: calc(100px + var(--pad_ss));
  height: var(--pad_l);
}
@media screen and (min-width: 835px) {
  .mv__swiper .sw_control {
    padding-right: calc(134px + var(--pad_s));
    height: var(--pad_xxxl);
  }
}
.mv__swiper .sw_control .sw_prev,
.mv__swiper .sw_control .sw_next {
  font-family: "icon";
  font-size: 10px;
  cursor: pointer;
}
.mv__swiper .sw_control .sw_page {
  font-family: var(--font_point);
  font-weight: 700;
}
@media screen and (max-width: 834px) {
  .mv__swiper .sw_control .sw_page {
    font-size: 1.2rem;
  }
}
.mv__swiper .sw_control .sw_progress {
  position: relative;
  width: 40%;
  max-width: 160px;
  height: 1px;
  background: var(--color_light);
  border-radius: 1px;
  overflow: hidden;
}
.mv__swiper .sw_control .sw_progress span {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--color_base);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition-timing-function: linear;
}

@keyframes sw_mask {
  0% {
    -webkit-mask-position: 0 200%;
    mask-position: 0 200%;
  }
  100% {
    -webkit-mask-position: 0 50%;
    mask-position: 0 50%;
  }
}
.mv__catch {
  position: absolute;
  z-index: 10;
  color: #ffffff;
  mix-blend-mode: overlay;
  font-weight: 500;
  font-size: clamp(1.5rem, 2vw, 2.4rem);
  left: var(--pad_ss);
  bottom: calc(var(--pad_ss) + var(--pad_l));
}
@media screen and (min-width: 375px) {
  .mv__catch {
    left: var(--pad_s);
    bottom: calc(var(--pad_s) + var(--pad_l));
  }
}
@media screen and (min-width: 835px) {
  .mv__catch {
    bottom: calc(var(--pad_s) + var(--pad_xxxl));
  }
}
@media screen and (min-width: 1140px) {
  .mv__catch {
    left: var(--pad_sm);
    bottom: calc(var(--pad_sm) + var(--pad_xxxl));
  }
}

.mv__ttl {
  font-family: var(--font_point);
  font-weight: 700;
  line-height: 0.833;
  font-size: clamp(5rem, 10vw, 12rem);
  margin-bottom: clamp(10px, 1vw, 20px);
}

/***** 全体 *****/
body > main {
  padding-bottom: var(--pad_xxl);
}
@media screen and (min-width: 835px) {
  body > main {
    padding-bottom: var(--pad_6l);
  }
}
body > main > article:not(:last-child) {
  border-bottom: 1px solid var(--color_base);
  margin-bottom: var(--pad_xxxl);
}
@media screen and (min-width: 835px) {
  body > main > article:not(:last-child) {
    margin-bottom: var(--pad_5l);
  }
}

/***** NEW ARTICLES *****/
.topnew {
  position: relative;
}
.topnew .btn__more {
  padding-right: var(--pad_ss);
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateY(150%);
}
@media screen and (min-width: 375px) {
  .topnew .btn__more {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topnew .btn__more {
    padding-right: var(--pad_sm);
  }
}

.topnew__ttl {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  display: flex;
  position: relative;
  font-family: var(--font_point);
  line-height: 1.2;
  padding-bottom: 0.3em;
  font-size: 3.6rem;
}
@media screen and (min-width: 375px) {
  .topnew__ttl {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topnew__ttl {
    padding-left: var(--pad_sm);
  }
}
@media screen and (min-width: 375px) {
  .topnew__ttl {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topnew__ttl {
    padding-right: var(--pad_sm);
  }
}
@media screen and (min-width: 835px) {
  .topnew__ttl {
    font-size: 4.8rem;
  }
}
.topnew__ttl::after {
  content: "";
  height: 1px;
  background-color: var(--color_base);
  display: block;
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.topnew__ttl > * {
  min-width: 0.3em;
}

.topnew__list {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  display: flex;
  gap: var(--pad_xxxs);
  padding-top: var(--pad_s);
  padding-bottom: var(--pad_s);
}
@media screen and (min-width: 375px) {
  .topnew__list {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topnew__list {
    padding-left: var(--pad_sm);
  }
}
@media screen and (min-width: 375px) {
  .topnew__list {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topnew__list {
    padding-right: var(--pad_sm);
  }
}
@media screen and (max-width: 834px) {
  .topnew__list {
    overflow: auto;
  }
}
@media screen and (min-width: 835px) {
  .topnew__list {
    padding-top: var(--pad_m);
    padding-bottom: var(--pad_m);
  }
}
.topnew__list > li {
  width: calc((100% - var(--pad_xxxs) * 3) / 4);
}
@media screen and (max-width: 834px) {
  .topnew__list > li {
    min-width: 180px;
  }
}
.topnew__list > li a img {
  transition: all 1s;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 835px) {
  .topnew__list > li a:hover img {
    transform: scale(1.1, 1.1);
  }
}
.topnew__list > li .topnew__list-ttl,
.topnew__list > li time {
  width: 95%;
}
.topnew__list > li time {
  display: block;
  font-family: var(--font_point);
  margin-top: 0.5em;
  font-size: 1rem;
}
@media screen and (min-width: 835px) {
  .topnew__list > li time {
    font-size: 1.4rem;
  }
}

.topnew__list-img {
  aspect-ratio: 1/1;
  margin-bottom: 1em;
  overflow: hidden;
}
.topnew__list-img picture {
  height: 100%;
}

.topnew__list-ttl {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  height: calc(var(--line_base) * 2em);
}

/***** SERVICE *****/
.topserv {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  position: relative;
  padding-bottom: var(--pad_m);
}
@media screen and (min-width: 375px) {
  .topserv {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topserv {
    padding-left: var(--pad_sm);
  }
}
@media screen and (min-width: 375px) {
  .topserv {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topserv {
    padding-right: var(--pad_sm);
  }
}
.topserv .btn__more {
  padding-right: var(--pad_ss);
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateY(150%);
}
@media screen and (min-width: 375px) {
  .topserv .btn__more {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topserv .btn__more {
    padding-right: var(--pad_sm);
  }
}
@media screen and (min-width: 835px) {
  .topserv {
    padding-bottom: var(--pad_ll);
  }
}

.topserv__ttl {
  display: flex;
  position: relative;
  font-family: var(--font_point);
  line-height: 1.2;
  padding-bottom: 0.3em;
  font-size: 3.6rem;
  margin-bottom: var(--pad_s);
}
@media screen and (min-width: 835px) {
  .topserv__ttl {
    font-size: 4.8rem;
  }
}
.topserv__ttl::after {
  content: "";
  height: 1px;
  background-color: var(--color_base);
  display: block;
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.topserv__ttl > * {
  min-width: 0.3em;
}
@media screen and (min-width: 835px) {
  .topserv__ttl {
    margin-bottom: var(--pad_m);
  }
}

.topserv__swwrap {
  overflow: hidden;
  margin-bottom: var(--pad_l);
}
@media screen and (min-width: 835px) {
  .topserv__swwrap {
    margin-bottom: var(--pad_xxxl);
  }
}

.topserv__swiper {
  width: 60%;
  max-width: 410px;
}
.topserv__swiper .swiper-wrapper .swiper-slide {
  text-align: center;
}
@media screen and (min-width: 640px) {
  .topserv__swiper .swiper-wrapper .swiper-slide br {
    display: none;
  }
}

.topserv__swiper-icon {
  aspect-ratio: 1/1;
  background-color: var(--color_base);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: var(--font-point);
  text-align: center;
  line-height: 1;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  transition: all 1s;
  margin-bottom: 0.5em;
}
.topserv__swiper-icon i {
  font-family: "icon";
  font-weight: normal;
  font-size: clamp(45px, 10vw, 85px);
  margin-bottom: 0.1em;
  transition: all 1s;
}
@media screen and (min-width: 835px) {
  .topserv__swiper-icon:hover {
    font-size: 2.8rem;
  }
  .topserv__swiper-icon:hover i {
    transform: scale(1.1, 1.1);
  }
}

.topserv__bnr {
  overflow: hidden;
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: var(--pad_m) var(--pad_ss);
  z-index: 0;
}
.topserv__bnr img {
  transition: all 1s;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 835px) {
  .topserv__bnr:hover img {
    transform: scale(1.1, 1.1);
  }
}
@media screen and (max-width: 834px) {
  .topserv__bnr {
    text-align: center;
  }
}
@media screen and (min-width: 835px) {
  .topserv__bnr {
    height: 23.5vw;
    max-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: calc(53% + 45px);
  }
}
@media screen and (min-width: 1140px) {
  .topserv__bnr {
    padding-left: calc(55% + 65px);
  }
}

.topserv__bnr-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
@media screen and (max-width: 834px) {
  .topserv__bnr-bg img {
    object-position: left center;
  }
}

.topserv__bnr-logo {
  display: block;
  width: 72px;
}
@media screen and (max-width: 834px) {
  .topserv__bnr-logo {
    margin: 0 auto 1em;
  }
}
@media screen and (min-width: 835px) {
  .topserv__bnr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
  }
}
@media screen and (min-width: 1140px) {
  .topserv__bnr-logo {
    width: 130px;
  }
}
.topserv__bnr-logo img {
  width: 100%;
  transform: none !important;
}

.topserv__bnr-ttl {
  font-family: var(--font_point);
  display: flex;
  font-size: 3rem;
  margin-bottom: 0.5em;
  align-items: center;
  column-gap: 0.5em;
}
@media screen and (max-width: 1239px) {
  .topserv__bnr-ttl {
    flex-direction: column;
  }
}
@media screen and (min-width: 835px) and (max-width: 1240px) {
  .topserv__bnr-ttl {
    align-items: flex-start;
  }
}
.topserv__bnr-ttl span {
  font-family: var(--font_base);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0.1em 1em;
  border: 1px solid;
  border-radius: 1em;
  height: 2em;
}

.topserv__bnr-list {
  text-align: left;
  margin-top: 0.5em;
}
@media screen and (max-width: 834px) {
  .topserv__bnr-list {
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
  }
}
.topserv__bnr-list > li {
  line-height: 1.2em;
  padding-left: 1em;
  text-indent: -1em;
}
.topserv__bnr-list > li:not(:last-child) {
  margin-bottom: 0.5em;
}
.topserv__bnr-list > li::before {
  content: "・";
  display: inline-block;
  text-indent: 0;
  width: 1em;
  text-align: center;
}

/***** PRODUCT RANKING *****/
.toprank {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  position: relative;
}
@media screen and (min-width: 375px) {
  .toprank {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .toprank {
    padding-left: var(--pad_sm);
  }
}
@media screen and (min-width: 375px) {
  .toprank {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .toprank {
    padding-right: var(--pad_sm);
  }
}
.toprank .btn__more {
  padding-right: var(--pad_ss);
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateY(150%);
}
@media screen and (min-width: 375px) {
  .toprank .btn__more {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .toprank .btn__more {
    padding-right: var(--pad_sm);
  }
}

.toprank__ttl {
  display: flex;
  position: relative;
  font-family: var(--font_point);
  line-height: 1.2;
  padding-bottom: 0.3em;
  font-size: 3.6rem;
}
@media screen and (min-width: 835px) {
  .toprank__ttl {
    font-size: 4.8rem;
  }
}
.toprank__ttl::after {
  content: "";
  height: 1px;
  background-color: var(--color_base);
  display: block;
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.toprank__ttl > * {
  min-width: 0.3em;
}

.toprank__list {
  counter-reset: toprank;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pad_m) var(--pad_xxxs);
  padding-top: var(--pad_s);
  padding-bottom: var(--pad_s);
}
@media screen and (min-width: 835px) {
  .toprank__list {
    gap: var(--pad_l) var(--pad_xxxs);
    padding-top: var(--pad_m);
    padding-bottom: var(--pad_m);
  }
}
.toprank__list > li {
  counter-increment: toprank;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  width: calc((100% - var(--pad_xxxs)) / 2);
}
@media screen and (min-width: 835px) {
  .toprank__list > li {
    width: calc((100% - var(--pad_xxxs) * 2) / 3);
  }
}
.toprank__list > li::before, .toprank__list > li::after {
  position: absolute;
  line-height: 1;
  top: 0;
  left: 0;
}
.toprank__list > li::after {
  display: flex;
  align-items: center;
  justify-content: center;
  content: counter(toprank);
  position: absolute;
  color: #ffffff;
  font-family: var(--font_point);
  aspect-ratio: 1/1;
  font-size: 1.8rem;
  width: 30px;
}
@media screen and (min-width: 835px) {
  .toprank__list > li::after {
    font-size: 2rem;
    width: 40px;
  }
}
.toprank__list > li:first-child::before, .toprank__list > li:first-child::after {
  top: var(--pad_xxs);
  left: var(--pad_xxs);
}
@media screen and (min-width: 835px) {
  .toprank__list > li:first-child::before, .toprank__list > li:first-child::after {
    top: var(--pad_ss);
    left: var(--pad_ss);
  }
}
.toprank__list > li:first-child::before {
  content: "👑";
  font-family: "icon";
  color: var(--color_rank01);
  position: absolute;
  left: var(--pad_xxs);
  font-size: 40px;
}
@media screen and (min-width: 835px) {
  .toprank__list > li:first-child::before {
    left: var(--pad_ss);
    font-size: 50px;
  }
}
.toprank__list > li:first-child::after {
  box-sizing: border-box;
  padding-top: 0.5em;
  width: 40px;
}
@media screen and (min-width: 835px) {
  .toprank__list > li:first-child::after {
    width: 50px;
  }
}
.toprank__list > li:not(:first-child)::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: var(--color_base) transparent transparent transparent;
  border-width: 45px 60px 0 0;
}
@media screen and (min-width: 835px) {
  .toprank__list > li:not(:first-child)::before {
    border-width: 65px 80px 0 0;
  }
}

.toprank__list-img {
  max-width: 300px;
  aspect-ratio: 1/1;
}
.toprank__list-img picture,
.toprank__list-img img {
  width: 100%;
  height: 100%;
}
.toprank__list-img img {
  object-fit: cover;
}

.toprank__list-ttl {
  overflow: hidden;
}
@media screen and (min-width: 480px) {
  .toprank__list-ttl br {
    display: none;
  }
}

.toprank__list-btn {
  display: block;
  height: 2em;
  width: 80%;
  max-width: 160px;
  border-radius: 1em;
  border: 1px solid;
  margin-top: auto;
}
@media screen and (max-width: 834px) {
  .toprank__list-btn span:not(:first-child) {
    display: none;
  }
}
@media screen and (min-width: 835px) {
  .toprank__list-btn {
    display: block;
    overflow: hidden;
  }
  .toprank__list-btn span {
    transition: all var(--hover_time);
    display: flex;
    align-items: center;
    height: 100%;
  }
  .toprank__list-btn:hover span {
    transform: translateY(-100%);
  }
}
.toprank__list-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 0.1em;
  height: 100%;
}

/***** ONLINE STORE *****/
.topstore {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  padding-bottom: var(--pad_m);
}
@media screen and (min-width: 375px) {
  .topstore {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topstore {
    padding-left: var(--pad_sm);
  }
}
@media screen and (min-width: 375px) {
  .topstore {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topstore {
    padding-right: var(--pad_sm);
  }
}
@media screen and (min-width: 835px) {
  .topstore {
    padding-bottom: var(--pad_ll);
  }
}

.topstore__ttl {
  display: flex;
  position: relative;
  font-family: var(--font_point);
  line-height: 1.2;
  padding-bottom: 0.3em;
  font-size: 3.6rem;
  margin-bottom: var(--pad_m);
}
@media screen and (min-width: 835px) {
  .topstore__ttl {
    font-size: 4.8rem;
  }
}
.topstore__ttl::after {
  content: "";
  height: 1px;
  background-color: var(--color_base);
  display: block;
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.topstore__ttl > * {
  min-width: 0.3em;
}
@media screen and (min-width: 835px) {
  .topstore__ttl {
    margin-bottom: var(--pad_l);
  }
}

@media screen and (min-width: 835px) {
  .topstore__cont {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: max-content 1fr;
    row-gap: var(--pad_l);
    align-items: center;
  }
}
.topstore__cont:not(:last-child) {
  margin-bottom: var(--pad_m);
}
@media screen and (min-width: 835px) {
  .topstore__cont:not(:last-child) {
    margin-bottom: var(--pad_ll);
  }
}

.topstore__cont-ttl {
  font-weight: 500;
  font-size: 2rem;
}
@media screen and (max-width: 834px) {
  .topstore__cont-ttl {
    margin-bottom: 0.5em;
  }
}
@media screen and (min-width: 835px) {
  .topstore__cont-ttl {
    font-size: 2.4rem;
    padding-right: 1em;
    margin-right: 1em;
    border-right: 1px solid;
  }
}

@media screen and (max-width: 834px) {
  .topstore__cont-txt {
    margin-bottom: 1em;
  }
}

.topstore__guest,
.topstore__close {
  grid-column: 1/3;
}

.topstore__guest {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 0;
  color: #ffffff;
  font-weight: 700;
  font-family: var(--font_point);
  font-size: 3rem;
  aspect-ratio: 1/0.5;
}
@media screen and (min-width: 835px) {
  .topstore__guest {
    font-size: 4rem;
    aspect-ratio: 1/0.305;
  }
}
.topstore__guest img {
  transition: all 1s;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 835px) {
  .topstore__guest:hover img {
    transform: scale(1.1, 1.1);
  }
}
.topstore__guest i {
  font-family: "icon";
  font-weight: normal;
  line-height: 0.5;
  font-size: 120px;
}
@media screen and (min-width: 835px) {
  .topstore__guest i {
    font-size: 175px;
  }
}

.topstore__guest-img {
  overflow: hidden;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.topstore__close {
  display: flex;
  gap: var(--pad_xxs);
}
@media screen and (max-width: 639px) {
  .topstore__close {
    flex-direction: column;
  }
}
.topstore__close > li {
  flex: 1;
}
.topstore__close > li a {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color_base);
  border: 1px solid var(--color_base);
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  color: #ffffff;
  line-height: 1;
  transition: var(--hover_time);
  height: 90px;
  font-size: 1.6rem;
}
@media screen and (min-width: 835px) {
  .topstore__close > li a {
    height: 130px;
    font-size: 1.8rem;
  }
}
.topstore__close > li a::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: var(--color_bg_base);
  width: 0;
  transition: var(--hover_time);
}
.topstore__close > li a:hover {
  color: var(--color_base);
}
.topstore__close > li a:hover::before {
  width: 100%;
}
.topstore__close > li a span {
  font-weight: 700;
  font-family: var(--font_point);
  font-size: 133.3%;
}

/***** GALLERY *****/
.topgall {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  padding-bottom: var(--pad_m);
}
@media screen and (min-width: 375px) {
  .topgall {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topgall {
    padding-left: var(--pad_sm);
  }
}
@media screen and (min-width: 375px) {
  .topgall {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topgall {
    padding-right: var(--pad_sm);
  }
}
@media screen and (min-width: 835px) {
  .topgall {
    padding-bottom: var(--pad_ll);
  }
}

.topgall__ttl {
  display: flex;
  position: relative;
  font-family: var(--font_point);
  line-height: 1.2;
  padding-bottom: 0.3em;
  font-size: 3.6rem;
  margin-bottom: var(--pad_s);
}
@media screen and (min-width: 835px) {
  .topgall__ttl {
    font-size: 4.8rem;
  }
}
.topgall__ttl::after {
  content: "";
  height: 1px;
  background-color: var(--color_base);
  display: block;
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.topgall__ttl > * {
  min-width: 0.3em;
}
@media screen and (min-width: 835px) {
  .topgall__ttl {
    margin-bottom: var(--pad_m);
  }
}

.topgall__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.topgall__list > li {
  width: calc((100% - 2px) / 2);
}
@media screen and (min-width: 835px) {
  .topgall__list > li {
    width: calc((100% - 6px) / 4);
  }
}
@media screen and (max-width: 834px) {
  .topgall__list > li.topgall__list-nav {
    width: 100%;
    margin-bottom: var(--pad_s);
  }
}
@media screen and (max-width: 834px) {
  .topgall__list > li:last-child {
    display: none;
  }
}
.topgall__list > li > a img {
  transition: all 1s;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 835px) {
  .topgall__list > li > a:hover img {
    transform: scale(1.1, 1.1);
  }
}

@media screen and (min-width: 835px) {
  .topgall__list-nav {
    box-sizing: border-box;
    padding: 3% 0;
  }
}
@media screen and (min-width: 1140px) {
  .topgall__list-nav {
    padding: 5% 3%;
  }
}
.topgall__list-nav ul {
  display: flex;
  gap: 1em 1.5em;
  margin-bottom: var(--pad_s);
}
@media screen and (min-width: 835px) {
  .topgall__list-nav ul {
    margin-bottom: 1.5em;
    max-width: 180px;
    flex-wrap: wrap;
  }
}
.topgall__list-nav ul li {
  font-family: var(--font_point);
  text-decoration: underline;
  font-size: 1.8rem;
}
@media screen and (min-width: 835px) {
  .topgall__list-nav ul li {
    flex: 1 1 auto;
    width: calc((100% - 1.5em) / 2);
  }
}
@media screen and (min-width: 1140px) {
  .topgall__list-nav ul li {
    font-size: 2rem;
  }
}

.topgall__list-img {
  overflow: hidden;
  aspect-ratio: 1/1.312;
}

/***** RECRUIT *****/
.toprecr {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  padding-bottom: var(--pad_m);
}
@media screen and (min-width: 375px) {
  .toprecr {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .toprecr {
    padding-left: var(--pad_sm);
  }
}
@media screen and (min-width: 375px) {
  .toprecr {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .toprecr {
    padding-right: var(--pad_sm);
  }
}
@media screen and (min-width: 835px) {
  .toprecr {
    padding-bottom: var(--pad_ll);
  }
}
@media screen and (min-width: 835px) {
  .toprecr {
    display: grid;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: 48% 1fr;
    align-items: start;
  }
}

.toprecr__ttl {
  display: flex;
  position: relative;
  font-family: var(--font_point);
  line-height: 1.2;
  padding-bottom: 0.3em;
  font-size: 3.6rem;
  margin-bottom: var(--pad_m);
}
@media screen and (min-width: 835px) {
  .toprecr__ttl {
    font-size: 4.8rem;
  }
}
.toprecr__ttl::after {
  content: "";
  height: 1px;
  background-color: var(--color_base);
  display: block;
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.toprecr__ttl > * {
  min-width: 0.3em;
}
@media screen and (min-width: 835px) {
  .toprecr__ttl {
    margin-bottom: var(--pad_xxl);
    grid-row: 1;
    grid-column: 1/3;
  }
}

.toprecr__sub {
  text-align: right;
  max-width: max-content;
  line-height: 1;
  font-weight: 500;
  font-size: 2.5rem;
}
@media screen and (max-width: 834px) {
  .toprecr__sub {
    margin-bottom: var(--pad_m);
  }
}
@media screen and (min-width: 835px) {
  .toprecr__sub {
    font-size: 4rem;
    grid-row: 2/5;
    grid-column: 1;
  }
}
.toprecr__sub span {
  display: block;
  margin-bottom: 0.3em;
  font-weight: 700;
  font-family: var(--font_point);
  font-size: clamp(5rem, 6.5vw, 9rem);
}

.toprecr__catch {
  font-weight: 500;
  margin-bottom: 0.5em;
  font-size: 2.1rem;
}

.toprecr__txt {
  margin-bottom: var(--pad_s);
}
@media screen and (min-width: 835px) {
  .toprecr__txt {
    margin-bottom: var(--pad_m);
  }
}

.toprecr__list {
  display: flex;
  gap: 3%;
}
@media screen and (max-width: 834px) {
  .toprecr__list {
    margin-bottom: var(--pad_m);
  }
}
@media screen and (min-width: 835px) {
  .toprecr__list {
    margin-top: var(--pad_m);
    grid-row: 5;
    grid-column: 1/3;
  }
}
.toprecr__list > li {
  width: 31.3333333333%;
}
@media screen and (min-width: 835px) {
  .toprecr__list > li {
    width: 22.75%;
  }
}
@media screen and (max-width: 834px) {
  .toprecr__list > li:last-child {
    display: none;
  }
}

.toprecr__list-img {
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}
.toprecr__list-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/***** One and Only. *****/
.topone {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 375px) {
  .topone {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topone {
    padding-left: var(--pad_sm);
  }
}
@media screen and (min-width: 375px) {
  .topone {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1140px) {
  .topone {
    padding-right: var(--pad_sm);
  }
}
.topone::before {
  content: "";
  display: block;
  background-color: var(--color_base);
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 48px;
  height: calc(60px + 282px);
}
@media screen and (min-width: 835px) {
  .topone::before {
    width: 134px;
    height: calc(170px + 643px);
  }
}

.topone__deco {
  margin-bottom: var(--pad_m);
  position: relative;
}
@media screen and (min-width: 835px) {
  .topone__deco {
    margin-bottom: var(--pad_ll);
  }
}

.topone__deco-img {
  height: 282px;
}
@media screen and (min-width: 835px) {
  .topone__deco-img {
    height: 643px;
  }
}
.topone__deco-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.topone__deco-txt {
  overflow: hidden;
  display: flex;
  position: absolute;
  z-index: 10;
  bottom: 0;
  color: #ffffff;
  mix-blend-mode: overlay;
  font-family: var(--font_point);
  font-size: 3rem;
}
@media screen and (min-width: 835px) {
  .topone__deco-txt {
    font-size: 6rem;
  }
}
.topone__deco-txt span {
  display: block;
  white-space: nowrap;
  animation: txt_loop 10s linear infinite;
}

@keyframes txt_loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.topone__cont {
  width: calc(98% - 48px);
  margin-left: auto;
}
@media screen and (min-width: 835px) {
  .topone__cont {
    width: calc(95% - 134px);
    display: grid;
    column-gap: 5%;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1140px) {
  .topone__cont {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--mw_s);
    width: calc(95% - 268px);
  }
}
@media screen and (min-width: 835px) {
  .topone__cont .btn__more {
    grid-row: 3;
    grid-column: 2;
  }
}

.topone__cont-ttl {
  font-weight: 700;
  font-family: var(--font_point);
  line-height: 0.9;
  font-size: 2.4rem;
}
@media screen and (min-width: 835px) {
  .topone__cont-ttl {
    font-size: 3rem;
    margin-bottom: 0.3em;
  }
}
.topone__cont-ttl span {
  margin-top: 0.1em;
  display: block;
  font-size: 6rem;
}
@media screen and (min-width: 835px) {
  .topone__cont-ttl span {
    font-size: 9rem;
  }
}

.topone__cont-sub {
  font-weight: 500;
  font-size: 1.5rem;
}
@media screen and (min-width: 375px) {
  .topone__cont-sub {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 480px) {
  .topone__cont-sub {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 835px) {
  .topone__cont-sub {
    font-size: 2.1rem;
    grid-row: 2;
    grid-column: 1;
  }
}
@media screen and (min-width: 400px) {
  .topone__cont-sub br {
    display: none;
  }
}

.topone__cont-txt {
  margin-bottom: 2em;
}
@media screen and (max-width: 834px) {
  .topone__cont-txt {
    margin-top: 2em;
  }
}
@media screen and (min-width: 835px) {
  .topone__cont-txt {
    grid-row: 1/3;
    grid-column: 2;
    align-self: end;
  }
}

.guest_links {
  display: grid;
  grid-template-columns: repeat(2, minmax(50%, 1fr));
  gap: 10px;
  grid-column: 1/3;
}
@media screen and (max-width: 834px) {
  .guest_links {
    display: block;
    margin: 10px 0;
  }
  .guest_links a:not(:last-child) {
    margin-bottom: 10px;
    display: block;
  }
}
.guest_links img {
  width: 100%;
}
.guest_links picture {
  display: block;
}

/* .scroll_banner {
  position: fixed;
  right: 0;
  background: #222222;
  color: #fff;
  letter-spacing: 0.05em;
  font-size: 15px;
  font-size: 1.5rem;
  height: 250px;
  width: 85px;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 100;
  writing-mode: vertical-rl;
  top: 380px;
} */

.topstore__cont-txtbox {
  display: grid;
  grid-template-columns: auto 25%;
  column-gap: 20px;
  align-items: end;
}

.topstore__cont-txt_img {
  display: flex;
  align-items: center;
  gap: 30px;
}
.topstore__cont-txt_img picture {
  width: 50px;
  position: relative;
}
.topstore__cont-txt_img picture:first-child::after {
  content: "";
  margin: auto;
  top: 0;
  bottom: 0;
  position: absolute;
  right: -30px;
  background-image: url("/assets/img/top/chain.jpg");
  width: 30px;
  height: 30px;
  display: block;
  background-size: contain;
}
.topstore__cont-txt_img picture img {
  width: 100%;
  display: block;
}/*# sourceMappingURL=top.css.map */