@charset "UTF-8";
/* ///////////////////////////////////////////
  value.scss
  変数・mixinに関する設定
/////////////////////////////////////////// */
/*====================================
  カラー
=====================================*/
/*====================================
  ランドセルカラーバリエーション
====================================*/
/*====================================
  画像
=====================================*/
/*====================================
  font
=====================================*/
/*====================================
  レイアウト・パーツ
=====================================*/
/* ======================
波形（区切り）
====================== */
/* ======================
背景
====================== */
/* /////////////////////////////////
  Media Queries
///////////////////////////////// */
/*====================================
  要素のサイズセット
=====================================*/
/* ///////////////////////////////////////////
  page.scss
  下層ページに関する記述
/////////////////////////////////////////// */
main[class^=page--newitem] .newitem__mv {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__mv {
    height: 155.223880597svw;
    max-height: calc(100svh - 112px);
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__mv {
    max-height: 51.2445095168vw;
  }
}
main[class^=page--newitem] .newitem__mv__ttl {
  position: absolute;
  display: inline-block;
  z-index: 10;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__mv__ttl {
    top: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 70.6666666667vw;
    max-width: 400px;
    height: auto;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__mv__ttl {
    bottom: 70px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 360px;
    height: auto;
  }
}
main[class^=page--newitem] .newitem__mv__ttl__btn {
  position: relative;
  display: inline-block;
  padding-left: 45px;
  word-break: keep-all;
}
main[class^=page--newitem] .newitem__mv__ttl__btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  display: block;
  width: 30px;
  height: 30px;
  background: url(../images/common/btn_anchor--pink.svg) center no-repeat;
  background-size: contain;
}
main[class^=page--newitem] .newitem__mv__slider {
  width: 100%;
  height: 100%;
  z-index: 0;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__mv__slider {
    aspect-ratio: 375/520;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__mv__slider {
    aspect-ratio: 1366/683;
  }
}
main[class^=page--newitem] .newitem__mv__slider img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__mv__slider img {
    object-fit: cover;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__mv__slider img {
    object-fit: contain;
  }
}
main[class^=page--newitem] .newitem__mv__slide {
  position: relative;
  z-index: 0;
}
main[class^=page--newitem] .newitem__mv__slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;
  height: auto;
  z-index: -10;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__mv__slide::after {
    aspect-ratio: 375/520;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__mv__slide::after {
    aspect-ratio: 1366/683;
  }
}
main[class^=page--newitem] .newitem__mv__slide:has(.mv__slide01)::after {
  background: #ebddd5;
}
main[class^=page--newitem] .newitem__mv__slide:has(.mv__slide02)::after {
  background: #cfe2e9;
}
main[class^=page--newitem] .newitem__mv__slide:has(.mv__slide03)::after {
  background: #c7d7d7;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__mv__slide img {
    object-fit: contain;
  }
}
main[class^=page--newitem] .newitem__lineup {
  position: relative;
  background: url(./../images/common/bg_dots--purple.svg) center/24px repeat;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup {
    padding-top: 40px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup {
    padding-bottom: 40px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup {
    padding-top: 80px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup {
    padding-top: 160px;
  }
}
main[class^=page--newitem] .newitem__lineup__ttl {
  display: block;
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup__ttl {
    padding-inline: 20px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup__ttl {
    padding-inline: 80px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup__ttl {
    padding-top: 40px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup__ttl {
    padding-top: 80px;
  }
}
main[class^=page--newitem] .newitem__lineup__ttl .dots {
  position: relative;
  padding-bottom: 0.5em;
}
main[class^=page--newitem] .newitem__lineup__ttl .dots::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: url(./../images/common/parts_line-dots--colorful.svg) left center repeat-x;
}
main[class^=page--newitem] .newitem__lineup__list {
  display: flex;
  max-width: 1320px;
  margin-inline: auto;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup__list {
    padding-inline: 20px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup__list {
    padding-inline: 80px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup__list {
    padding-top: 40px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup__list {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup__list {
    padding-bottom: 20px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup__list {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup__list {
    gap: 30px 15px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup__list {
    gap: 60px 40px;
  }
}
main[class^=page--newitem] .newitem__lineup__list::before, main[class^=page--newitem] .newitem__lineup__list::after {
  content: "";
  position: absolute;
  top: 30px;
  aspect-ratio: 1440/110;
  background: url(../images/pages/newitem/newitem_ttl.svg) center no-repeat;
  background-size: contain;
  z-index: 0;
  animation: text-loop 15s linear infinite;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup__list::before, main[class^=page--newitem] .newitem__lineup__list::after {
    width: 200vw;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup__list::before, main[class^=page--newitem] .newitem__lineup__list::after {
    width: 100vw;
  }
}
main[class^=page--newitem] .newitem__lineup__list::before {
  left: 0;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup__list::after {
    left: 200%;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup__list::after {
    left: 100%;
  }
}
@keyframes text-loop {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-100%);
  }
}
main[class^=page--newitem] .newitem__lineup__item {
  z-index: 10;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup .card {
    width: 160px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup .card {
    width: 260px;
  }
}
main[class^=page--newitem] .newitem__lineup .caption {
  text-align: center;
}
main[class^=page--newitem] .newitem__lineup .caption .series {
  display: block;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup .caption .series {
    font-size: 1.6rem;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup .caption .series {
    font-size: 2.2rem;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__lineup .caption .color {
    font-size: 1.3rem;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__lineup .caption .color {
    font-size: 1.5rem;
  }
}
main[class^=page--newitem] .newitem__feature {
  display: grid;
  max-width: 1320px;
  margin-inline: auto;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__feature {
    padding-inline: 20px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__feature {
    padding-inline: 80px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__feature {
    margin-top: 60px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__feature {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__feature {
    gap: 40px;
    justify-content: center;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__feature {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}
main[class^=page--newitem] .feature {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 20px;
  max-width: 400px;
}
main[class^=page--newitem] .feature__ttl {
  position: relative;
  display: block;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .feature__ttl {
    padding-bottom: 1em;
    font-size: 1.8rem;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .feature__ttl {
    padding-bottom: 0.5em;
    font-size: 3.1rem;
  }
}
main[class^=page--newitem] .feature__ttl::before {
  content: "";
  display: block;
  aspect-ratio: 400/320;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .feature__ttl::before {
    margin-bottom: 20px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .feature__ttl::before {
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .feature__ttl::before {
    width: 100%;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .feature__ttl::before {
    width: 125%;
  }
}
main[class^=page--newitem] .feature__ttl::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: url(./../images/common/parts_line-dots--colorful.svg) left center repeat-x;
}
main[class^=page--newitem] .feature:nth-child(1) .feature__ttl::before {
  background: url(./../images/pages/newitem/feature01.webp) center no-repeat;
  background-size: contain;
}
main[class^=page--newitem] .feature:nth-child(2) .feature__ttl::before {
  background: url(./../images/pages/newitem/feature02.webp) center no-repeat;
  background-size: contain;
}
main[class^=page--newitem] .newitem__colors {
  display: block;
  max-width: 1320px;
  margin-inline: auto;
  position: relative;
  /* ======================
  カラーバリエーション
  ====================== */
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__colors {
    padding-inline: 20px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__colors {
    padding-inline: 80px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__colors {
    padding-top: 40px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__colors {
    padding-top: 80px;
  }
}
main[class^=page--newitem] .newitem__colors::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 100vw;
  height: 100%;
  background: url(./../images/common/bg_dots--purple.svg) center/24px repeat;
  z-index: -100;
}
main[class^=page--newitem] .newitem__colors__ttl {
  display: block;
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__colors__ttl {
    padding-inline: 20px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__colors__ttl {
    padding-inline: 80px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__colors__ttl {
    padding-top: 40px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__colors__ttl {
    padding-top: 80px;
  }
}
main[class^=page--newitem] .newitem__colors__ttl .dots {
  position: relative;
  padding-bottom: 1em;
}
main[class^=page--newitem] .newitem__colors__ttl .dots::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: url(./../images/common/parts_line-dots--colorful.svg) left center repeat-x;
}
main[class^=page--newitem] .newitem__colors__desc {
  font-weight: bold;
  text-align: center;
  line-height: 2;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__colors__desc {
    margin-top: 20px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__colors__desc {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__colors__desc {
    max-width: 305px;
    margin-inline: auto;
    word-break: auto-phrase;
  }
}
main[class^=page--newitem] .newitem__colors__container {
  position: relative;
  z-index: 10;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__colors__container {
    margin-top: 60px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__colors__container {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__colors__container {
    padding-top: 60px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__colors__container {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__colors__container {
    padding-bottom: 40px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__colors__container {
    padding-bottom: 80px;
  }
}
main[class^=page--newitem] .newitem__colors__container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -100%;
  width: 135px;
  height: 60px;
  background: url(./../images/home/illust_tiger.webp) center no-repeat;
  background-size: contain;
}
main[class^=page--newitem] .newitem__colors__container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 100vw;
  height: 100%;
  background: linear-gradient(135deg, rgba(224, 235, 128, 0.7) 0%, rgba(247, 226, 155, 0.7) 25%, rgba(201, 232, 251, 0.7) 50%, rgba(209, 188, 248, 0.7) 75%, rgba(255, 173, 202, 0.7) 100%);
  background-size: 200% 200%;
  z-index: -100;
  animation: gradientFlow 10s linear infinite;
}
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
main[class^=page--newitem] .newitem__colors__list {
  display: grid;
  max-width: 990px;
  margin-top: 50px;
  margin-inline: auto;
}
@media only screen and (max-width: 834px) {
  main[class^=page--newitem] .newitem__colors__list {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 30px 15px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__colors__list {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 40px 30px;
  }
}
@media print, screen and (min-width: 835px) {
  main[class^=page--newitem] .newitem__colors__list .mt {
    margin-top: -50px;
  }
}
main[class^=page--newitem] .newitem__colors__item a {
  display: block;
  width: 100%;
  height: 100%;
}
main[class^=page--newitem] .newitem__colors__item a:hover .colors__card__img {
  transform: translate(0, 0) scale(-1, 1);
}
main[class^=page--newitem] .newitem__colors__item a:hover .colors__card__img::before {
  opacity: 1;
  transition: trnslate(0, 0) scale(-1, 1) skew(0deg, 0deg);
}
main[class^=page--newitem] .newitem__colors__item a:hover .colors__card__img::after {
  opacity: 1;
  transition: trnslate(-50%, -50%) scale(-1, 1) skew(0deg, 0deg);
}
main[class^=page--newitem] .newitem__colors__btn {
  display: block;
  width: 100%;
  text-align: right;
}
main[class^=page--newitem] .newitem__colors .colors__card__img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.5s ease;
}
main[class^=page--newitem] .newitem__colors .colors__card__img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: trnslate(0, 0);
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  opacity: 0;
  transition: all 0.5s ease;
}
main[class^=page--newitem] .newitem__colors .colors__card__img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  display: block;
  width: 60%;
  height: 60%;
  background: url(./../images/common/btn_gray.svg) center no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  transition: all 0.5s ease;
}
main[class^=page--newitem] .newitem__colors .colors__card .caption {
  margin-top: 1em;
  font-weight: bold;
  text-align: center;
}
main[class^=page--newitem] .newitem__colors .black .colors__card__img::before {
  background-color: #22201f;
}
main[class^=page--newitem] .newitem__colors .blue .colors__card__img::before {
  background-color: #0f3784;
}
main[class^=page--newitem] .newitem__colors .green .colors__card__img::before {
  background-color: #164e2b;
}
main[class^=page--newitem] .newitem__colors .silver .colors__card__img::before {
  background-color: #b3b3b3;
}
main[class^=page--newitem] .newitem__colors .saxe .colors__card__img::before {
  background-color: #74c1e3;
}
main[class^=page--newitem] .newitem__colors .pink .colors__card__img::before {
  background-color: #d9024b;
}
main[class^=page--newitem] .newitem__colors .red .colors__card__img::before {
  background-color: #cc0000;
}
main[class^=page--newitem] .newitem__colors .purple .colors__card__img::before {
  background-color: #a689c6;
}
main[class^=page--newitem] .newitem__colors .pearl .colors__card__img::before {
  background-color: #e0e0c7;
}
main[class^=page--newitem] .newitem__colors .wine .colors__card__img::before {
  background-color: #990033;
}
main[class^=page--newitem] .newitem__colors .brown .colors__card__img::before {
  background-color: #793e1c;
}
main[class^=page--newitem] .newitem__colors .camel .colors__card__img::before {
  background-color: #c68056;
}
main[class^=page--newitem] .newitem__colors .white .colors__card__img::before {
  background-color: #ffffff;
  border: 1px solid #444444;
}
main[class^=page--newitem] .newitem__colors .yellow .colors__card__img::before {
  background-color: #ecc666;
}
main[class^=page--newitem] .newitem__colors .mint .colors__card__img::before {
  background-color: #b4d2d2;
}
main[class^=page--newitem] .newitem__colors .gray .colors__card__img::before {
  background-color: #7e7e7e;
}
main[class^=page--newitem] .slick-slider div {
  transition: none;
}
main[class^=page--newitem] .slick-slider .slick-list {
  height: 100%;
}
main[class^=page--newitem] .slick-slider .slick-track {
  height: auto;
  max-height: 100%;
}
main[class^=page--newitem] .slick-slider .slick-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 45px;
}
main[class^=page--newitem] .slick-slider .slick-dots li button {
  position: relative;
  display: block;
  width: 20px;
  height: 10px;
  background: transparent;
  border-radius: 50%;
  border: 0;
  color: #ffffff;
  outline: none;
  text-indent: -9999px;
}
main[class^=page--newitem] .slick-slider .slick-dots li button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 6px;
  height: 6px;
  background: #dcdcdc;
  border-radius: 50%;
  transition: all 0.3s ease;
}
main[class^=page--newitem] .slick-slider .slick-dots li:nth-of-type(n + 2) {
  margin-left: 12px;
}
main[class^=page--newitem] .slick-slider .slick-dots > .slick-active button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 10px;
  height: 10px;
  background: #a2d2ff;
  border-radius: 50%;
}
main[class^=page--newitem] .slick-slider .slick-dots > .slick-active:nth-of-type(n + 2) {
  margin-left: 12px;
}/*# sourceMappingURL=newitem.css.map */