@charset "UTF-8";
/* ///////////////////////////////////////////
  value.scss
  変数・mixinに関する設定
/////////////////////////////////////////// */
/*====================================
  カラー
=====================================*/
/*
$color1: #1f3134; //黒っぽい緑
$color2: #ff0033; //赤
$color3: #b40034; //エンジ色
$color4: #0f3784; //青

//2022～
$color5: #aac467; //黄緑
$color7: #595757; //濃グレー

$mainColor: $color1;
$accentColor: #fff; //白

//2022～
$fontColor: $color7;

$bgColor1: #f8eef7; //薄ピンク
$bgColor2: #e0eff2; //水色
$bgColor3: #f4efe4; //ベージュ
$bgColor4: #f5f2ef; //グレーっぽいベージュ
$bgColor5: #fffee6; //薄黄色

$bdColor1: #d5d7d6; //グレー

$pastelColor1: #e3a7c8;
$pastelColor2: #f3efa1;
$pastelColor3: #a8cae5;
$pastelColor4: #ed7986;

$pastelColor1-dark: #eca1ca;
$pastelColor2-dark: #e6d223;
$pastelColor3-dark: #7ebded;

$mkColor1: #f6d1e5; //薄ピンク
$mkColor2: #c6e0f6; //水色
$mkColor3: #faf3b1; //黄色

//2022～
$boysColor: #5aa7ab;
$girlsColor: #ab226d;
$boysBgColor: #d4e5e6;
$girlsBgColor: #eadfe4;

$btnColor: #9fa0a0;
*/
/*====================================
  画像
=====================================*/
/*====================================
  font
=====================================*/
/*--------------------
～2021用フォント設定
--------------------*/
@font-face {
  font-family: "HoshizoraMincho";
  src: url(./../images/font/StarSkyMincyou-Regular.woff2) format("woff2");
  src: url(./../images/font/StarSkyMincyou-Regular.woff) format("woff");
}
/*--------------------
2022～フォント設定
--------------------*/
/*====================================
  レイアウト・パーツ
=====================================*/
/* /////////////////////////////////
  Media Queries
///////////////////////////////// */
/* /////////////////////////////////
  Media Queries
///////////////////////////////// */
/* ///////////////////////////////////////////
  allitem.scss
  ランドセル一覧ページに関する記述
/////////////////////////////////////////// */
/*=================================
  allitem
=================================*/
.page--allitem {
  /* =========================
    2021年度カタログ請求受付中
  ========================= */
}
.page--allitem .allitem__anchor {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: flex-start;
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__anchor {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--allitem .allitem__anchor {
    padding: 0 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--allitem .allitem__anchor {
    padding: 0 80px;
  }
}
.page--allitem .allitem__anchor > * {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__anchor {
    margin-top: 30px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--allitem .allitem__anchor {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__anchor li {
    width: 100%;
    margin-top: 10px;
  }
  .page--allitem .allitem__anchor li:first-child, .page--allitem .allitem__anchor li:nth-child(2) {
    width: 48%;
    margin-top: 10px;
  }
  .page--allitem .allitem__anchor li:first-child a, .page--allitem .allitem__anchor li:nth-child(2) a {
    flex-wrap: wrap;
    height: auto;
    max-height: none;
  }
  .page--allitem .allitem__anchor li:first-child a::after, .page--allitem .allitem__anchor li:nth-child(2) a::after {
    display: none;
  }
  .page--allitem .allitem__anchor li:first-child a i, .page--allitem .allitem__anchor li:nth-child(2) a i {
    width: 100%;
    max-width: 100%;
  }
  .page--allitem .allitem__anchor li:first-child a span, .page--allitem .allitem__anchor li:nth-child(2) a span {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    position: relative;
  }
  .page--allitem .allitem__anchor li:first-child a span::after, .page--allitem .allitem__anchor li:nth-child(2) a span::after {
    width: 0;
    height: 0;
    content: "";
    display: inline-block;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #3f3f3f;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 17px;
    margin: auto 0;
    transform: rotate(90deg);
  }
}
@media print, screen and (min-width: 769px) {
  .page--allitem .allitem__anchor li {
    width: 23.5%;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--allitem .allitem__anchor li {
    width: 48%;
  }
  .page--allitem .allitem__anchor li:nth-child(n+3) {
    margin-top: 20px;
  }
}
.page--allitem .allitem__anchor li a {
  line-height: 1.4;
  color: #3f3f3f;
  font-family: "HoshizoraMincho", "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro W3", "HiraMinPro-W3", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 2px;
  background: #fff;
  border: 2px solid #3f3f3f;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__anchor li a {
    height: auto;
    max-height: 80px;
    min-height: 60px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--allitem .allitem__anchor li a {
    height: 86px;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--allitem .allitem__anchor li a {
    font-size: 1.8rem;
  }
}
@media print, screen and (min-width: 769px) and (min-width: 1220px) {
  .page--allitem .allitem__anchor li a {
    font-size: 1.8rem;
  }
}
.page--allitem .allitem__anchor li a:hover i img {
  transform: scale(1.1);
  transition-duration: 0.3s;
}
.page--allitem .allitem__anchor li a::after {
  width: 0;
  height: 0;
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #3f3f3f;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 17px;
  margin: auto 0;
  transform: rotate(90deg);
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__anchor li a::after {
    right: 10px;
  }
}
.page--allitem .allitem__anchor li a i {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__anchor li a i {
    width: 35%;
    max-width: 120px;
    height: 100%;
    margin-right: 8px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--allitem .allitem__anchor li a i {
    width: 113px;
    height: 78px;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--allitem .allitem__anchor li a i {
    margin-right: 15px;
  }
}
@media print, screen and (min-width: 769px) and (min-width: 1220px) {
  .page--allitem .allitem__anchor li a i {
    margin-right: 20px;
  }
}
.page--allitem .allitem__anchor li a i img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  max-width: none;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s ease;
}
.page--allitem .allitem__lineup {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  /*
        > ul {
          > li {
            display: flex;
            background: #e0eff2;
            border-left: 1px solid #e5e5e5;
            border-right: 1px solid #e5e5e5;
            border-bottom: 2px solid #e5e5e5;
            @include smartphone {
              flex-direction: column-reverse;
              justify-content: flex-end;
              border-radius: 6px;
            }
            @include screen {
              flex-direction: row-reverse;
              justify-content: space-between;
              border-radius: 12px;
            }
            &:nth-child(n+2) {
              @include smartphone {
                margin-top: 25px;
              }
              @include screen {
                margin-top: 50px;
              }
            }
            //プティハート
            &.petitheart {
              .text {
                h3 {
                  .logo {
                    max-width: 250px;
                  }
                  img {
                    max-width: 250px;
                  }
                }
              }
            }
            //クイーンズデコ
            &.queensdeco {
              .text {
                h3 {
                  .logo {
                    max-width: 250px;
                  }
                  img {
                    max-width: 250px;
                  }
                }
              }
            }
            //ドリームラブ
            &.dreamlove {
              .text {
                h3 {
                  .logo {
                    max-width: 150px;
                  }
                  img {
                    max-width: 150px;
                  }
                }
              }
            }

            //ラブハート
            &.loveheart {
              .text {
                h3 {
                  .logo {
                    max-width: 250px;
                  }
                  img {
                    max-width: 250px;
                  }
                }
              }
            }

            //サンシャインプリティ
            &.sunshinepretty {
              .text {
                h3 {
                  .logo {
                    max-width: 250px;
                  }
                  img {
                    max-width: 250px;
                   }
                 }
              }
            }

            //アップリカ
            &.aprica {
              .text {
                h3 { max-width: 200px; }
              }
            }

            //グレースランド
            &.graceland {
              .text {
                h3 { max-width: 250px; }
              }
            }

            //ブラックキャプスフラッシュ
            &.blackcaps-flash {
              .text {
                h3 {
                  .logo {
                    max-width: 230px;
                  }
                  img {
                    max-width: 230px;
                  }
                }
              }
            }
            //レインボーフォース
            &.rainbowforce {
              .text {
                h3 {
                  .logo {
                    max-width: 230px;
                  }
                  img {
                    max-width: 230px;
                  }
                }
              }
            }

            //ブラックキャップス
            &.blackcaps {
              .text {
                h3 {
                  .logo {
                    max-width: 220px;
                  }
                  img {
                    max-width: 220px;
                  }
                }
              }
            }

            //トラッド
            &.trad {
              .text {
                h3 {
                  .logo {
                    max-width: 150px;
                  }
                  img {
                    max-width: 150px;
                  }
                }
              }
            }

            //サンダーウィング
            &.thunderwing {
              .text {
                h3 {
                  max-width: 250px;
                }
              }
            }

            //アンシェル
            &.anciel {
              .text {
                h3 {
                  max-width: 200px;
                }
              }
            }

            //ブルークライスト
            &.bluechrist {
              .text {
                h3 {
                  max-width: 250px;
                }
              }
            }

            //ドリームクルー
            &.dreamcrew {
              .text {
                h3 {
                  max-width: 150px;
                }
              }
            }

            //ギャラクシー
            &.galaxy {
              .text {
                h3 {
                  max-width: 200px;
                }
              }
            }

            //ディライト
            &.delight {
              .text {
                h3 { max-width: 200px; }
              }
            }


            //サンシャイングラッド
            &.sunshineglad {
              .text {
                h3 { max-width: 250px; }
              }
            }

            //プレミアム
            &.premium {
              .text {
                h3 { max-width: 250px; }
              }
            }

            .text,
            figure {
              @include screen {
                width: 50%;
              }
            }
            .text {
              @include smartphone {
                padding: 30px 20px;
              }
              @include tablet {
                padding: 45px 30px;
              }
              @include desktop {
                padding: 45px 50px;
              }

              > i {
                color: $accentColor;
                font-family: $accentFont;
                font-style: normal;
                text-align: center;
                vertical-align: middle;
                background: #b40034;
                display: inline-block;
                @include smartphone {
                  font-size: 1.4rem;
                  padding: 0 10px;
                  margin-bottom: 5px;
                }
                @include screen {
                  font-size: 1.6rem;
                  padding: 0 15px;
                  margin-bottom: 5px;
                  height: 40px;
                  line-height: 40px;
                }
                span{
                  font-size: 0.8em;
                }
              }

              h3 {
                @include smartphone {
                  margin-bottom: 15px;
                }
                @include screen {
                  margin-bottom: 20px;
                }
                div {
                  @include flexBox ($wrap:nowrap, $justify:flex-start, $content:center);
                  .logo {
                     display: block;
                     width: auto;
                     flex-shrink: 1;
                     @include flexMiddle;
                     width: 100%;
                   }
                  .new,
                  .rank {
                     color: #fff;
                     font-family: $accentFont;
                     font-style: normal;
                     text-align: center;
                     background: #0f3784;
                     border-radius: 50%;
                     flex-shrink: 0;
                     @include flexMiddle;
                     @include smartphone {
                       margin-left: 20px;
                       width: 65px;
                       height: 65px;
                       font-size: 1rem;
                     }
                     @include tablet {
                       margin-left: 20px;
                       width: 70px;
                       height: 70px;
                       font-size: 1rem;
                     }
                     @include desktop {
                       margin-left: 30px;
                       width: 100px;
                       height: 100px;
                    }
                  }
                  .new {
                      background: $color3;
                      @include smartphone {
                        margin-right: -10px;
                      }
                      @include tablet {
                        margin-right: -10px;
                      }
                      @include desktop {
                        margin-right: -10px;
                        font-size: 1.5rem;
                      }
                    }
                }
                img {
                    @include imgResponse;
                    margin: 0;
                  }

                span {
                    color: $mainColor;
                    font-family: $accentFont;
                    display: block;
                    margin-top: 1.0em;
                    @include smartphone {
                      font-size: 1.6rem;
                    }
                    @include screen {
                      font-size: 1.8rem;
                    }
                  }
              }

              .spec {
                @include flexBox;
                margin-left: -5px;
                margin-right: -5px;
                @include smartphone {
                  margin-bottom: 5px;
                }
                @include screen {
                  margin-bottom: 10px;
                }
                li {
                  color: #4b4b4b;
                  font-size: 1.2rem;
                  display: flex;
                  align-items: center;
                  padding: 3px 5px;
                  background: $accentColor;
                  position: relative;
                  margin: 0 5px 5px;
                  &::before {
                    content: "";
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 5px;
                  }
                  &:nth-child(n+2) {
                    //margin-left: 5px;
                  }

                  //光るランドセル
                  &.bright {
                    &::before {
                      display: none;
                    }
                  }

                  //牛革 シボ
                  &.cowhide {
                    &::before {
                      width: 16px;
                      height: 14px;
                      background: url('../images/common/cowhide-icon.png') no-repeat;
                      background-size: contain;
                    }
                  }

                  //クラリーノ
                  &.clarino {
                    &::before {
                      width: 16px;
                      height: 16px;
                      background: url('../images/common/clarino-icon.png') no-repeat;
                      background-size: contain;
                    }
                  }

                  //色
                  &.color {
                    &::before {
                      width: 16px;
                      height: 15px;
                      background: url('../images/common/color-icon.png') no-repeat;
                      background-size: contain;
                    }
                  }

                  //重量
                  &.weight {
                    &::before {
                      width: 16px;
                      height: 17px;
                      background: url('../images/common/randoselu-icon.png') no-repeat;
                      background-size: contain;
                    }
                  }
                }
              }

              .color {
                @include flexBox ($wrap:nowrap);
                @include smartphone {
                  margin-bottom: 15px;
                }
                @include screen {
                  margin-bottom: 20px;
                }
                li {
                  @include smartphone {
                    width: 30px;
                    height: 36px;
                    margin-right: 5px;
                  }
                  @include screen {
                    width: 50px;
                    height: 60px;
                    margin-right: 10px;
                  }
                  img {
                    display: block;
                    width: 100%;
                    height: auto;
                    margin: 0 auto;
                  }
                }
              }

              p {
                font-family: $komorebi;
                @include screen {
                  font-size: 1.6rem;
                }

                //価格
                &.price {
                  line-height: 1.0;
                  @include smartphone {
                    margin: 25px 0 15px 0;
                  }
                  @include screen {
                    margin: 50px 0 25px 0;
                  }
                  span {
                    margin-left: 5px;
                    @include smartphone {
                      font-size: 2.4rem;
                    }
                    @include screen {
                      font-size: 3.0rem;
                    }
                  }
                }
              }

              > a {
                @include makeButton($color:$mainColor, $bdColor:$mainColor);
                &::after {
                  border-color: transparent transparent transparent $mainColor;
                }
                @include screen {
                  max-width: 300px;
                  margin: 0;
                }
              }
            }

            //カラーバリエーションスライダー全体
            .slider {
              @include screen {
                width: 50%;
              }
            }
            //スライド
            .slider__slide {
              width: 100%;
              height: 100%;
              opacity: 0;
              transition: opacity .3s linear;
              @include smartphone {
                @include aspectFix($pdTop:100%);

                > div {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  top: 0;
                  left: 0;
                }

              }
              &.slick-initialized{
                 opacity: 1;
              }
              div {
                height: 100%;
                transition: none;
              }
              li {
                &.model {
                  img {
                    object-fit: cover;
                    font-family: "object-fit: cover;";
                    padding: 0px;
                    border: none;
                    background-color: transparent;
                    @include smartphone {
                      border-radius: 6px 6px 0 0;
                    }
                    @include screen {
                      border-radius: 12px 0 0 12px;
                    }
                  }
                }
                img {
                  @include imgResponse;
                  max-width: none;
                  padding: 40px;
                  //background-color: #fff;
                  //border: 5px solid $bgColor2;
                  @include smartphone {
                    border-radius: 6px;
                  }
                  @include screen {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    font-family: "object-fit: contain;";
                    border-radius: 12px;
                  }
                }
              }
              //矢印
              .slick-arrow {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 23px;
                height: 41px;
                padding: 0;
                color: transparent;
                border-radius: 0;
                font-size: 0;
                border: none;
                z-index: 5;
                -webkit-appearance: none;
                @include smartphone{
                  width: 14px;
                  height: 25px;
                }
                @include screen {
                  display: none !important;
                }
                &.slick-next{
                  @include smartphone{
                    right: 15px;
                    background: url('../images/page/item/feature__slide__arrow-right-sp.png');
                    background-size: contain;
                  }
                }
                &.slick-prev{
                  @include smartphone {
                    left: 15px;
                    background: url('../images/page/item/feature__slide__arrow-left-sp.png');
                    background-size: contain;
                  }
                }
              }
            }
            //サムネイルPC用・SP用
            .slider__thumb-pc,
            .slider__thumb-sp {
              @include flexBox ($wrap:nowrap);
              @include smartphone {
                padding: 0 20px;
                margin-top: 15px;
              }
              @include screen {
                margin-bottom: 20px;
              }
              li {
                //overflow: hidden;
                position: relative;
                cursor: pointer;
                @include smartphone {
                  width: 44px;
                  height: 44px;
                  margin-right: 2px;
                  border:solid 2px $bgColor2;
                }
                @include screen {
                  width: 56px;
                  height: 56px;
                  margin-right: 5px;
                  border:solid 3px $bgColor2;
                }
                &.thumbnail-current {
                  border-color: $color4;
                }
                img {
                  display: block;
                  width: 100%;
                  height: auto;
                  margin: 0 auto;
                }
              }
            }
          }
        }

        //女の子
        &--girls {
          .mod__heading01 {
            border-top:none;
          }
          > ul {
            > li {
              background: #f8eef7;
              border-left: 1px solid #e5e5e5;
              border-right: 1px solid #e5e5e5;
              border-bottom: 2px solid #e5e5e5;
              .text {
                h3 {
                  div {
                    .rank {
                      color: #fff;
                      font-family: $accentFont;
                      font-style: normal;
                      text-align: center;
                      background: $color3;
                      border-radius: 50%;
                      flex-shrink: 0;
                      @include flexMiddle;
                      @include smartphone {
                        margin-left: 20px;
                        width: 65px;
                        height: 65px;
                        font-size: 1rem;
                      }
                      @include screen {
                        margin-left: 30px;
                        width: 100px;
                        height: 100px;
                      }
                    }
                  }
                }
              }
              .slider__thumb-pc,
              .slider__thumb-sp {
                li {
                  @include smartphone {
                    border-color: $bgColor1;
                  }
                  @include screen {
                    border-color: $bgColor1;
                  }
                  &.thumbnail-current {
                    border-color: $color3;
                  }
                }
              }
            }
          }

        }

        //男の子
        &--boys {
          > ul {
            > li {
              background: #e0eff2;
              border-left: 1px solid #e5e5e5;
              border-right: 1px solid #e5e5e5;
              border-bottom: 2px solid #e5e5e5;
            }
          }
        }

        //光るランドセル
        &--bright {
          > ul {
            > li {
              background: #f7f7f0;
              border-left: 1px solid #e5e5e5;
              border-right: 1px solid #e5e5e5;
              border-bottom: 2px solid #e5e5e5;
              .slider__thumb-pc,
              .slider__thumb-sp {
                li {
                  border-color: #f7f7f0;
                  &.thumbnail-current {
                    border-color: $color4;
                  }
                }
              }
              &.petitheart {
                .slider__thumb-pc,
                .slider__thumb-sp {
                  li {
                    &.thumbnail-current {
                      border-color: $color3;
                    }
                  }
                }
              }
            }
          }
        }
  */
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__lineup {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--allitem .allitem__lineup {
    padding: 0 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--allitem .allitem__lineup {
    padding: 0 80px;
  }
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__lineup {
    margin-bottom: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--allitem .allitem__lineup {
    margin-bottom: 100px;
  }
}
.page--allitem .allitem__lineup .mod__heading01 {
  border-top: 1px solid #ccc;
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__lineup .mod__heading01 {
    padding: 50px 0 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--allitem .allitem__lineup .mod__heading01 {
    padding: 100px 0 45px;
  }
}
.page--allitem .allitem__lineup .mod__heading01::after {
  display: none;
}
.page--allitem .allitem__lineup > p {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, Arial, sans-serif;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__lineup > p {
    margin-bottom: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--allitem .allitem__lineup > p {
    font-size: 1.6rem;
    margin-bottom: 45px;
  }
}
.page--allitem .allitem__lineup--girls .mod__heading01 {
  border-top: none;
}
.page--allitem .allitem__lineup--colors {
  position: relative;
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  /*
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    @include smartphone {}
    @include screen {}
    li {
      @include smartphone {
        width: 30%;
        &:nth-child(n+4) {
          margin-top: 15px;
        }
      }
      @include screen {
        width: 14.4643%;
        max-width: 162px;
        &:nth-child(n+7) {
          margin-top: 40px;
        }
      }
      &.black {
        a {
          p { background: #22201f; }
        }
      }
      &.blue {
        a {
          p { background: #0f3784; }
        }
      }
      &.green {
        a {
          p { background: #164e2b; }
        }
      }
      &.silver {
        a {
          p { background: #b3b3b3; }
        }
      }
      &.saxe {
        a {
          p { background: #74c1e3; }
        }
      }
      &.pink {
        a {
          p { background: #d9024b; }
        }
      }
      &.red {
        a {
          p { background: #cc0000; }
        }
      }
      &.purple {
        a {
          p { background: #a689c6; }
        }
      }
      &.pearl {
        a {
          color: #7b7b7b;
          p {
            background: #e0e0c7;
          }
        }
      }
      &.wine {
        a {
          p { background: #990033; }
        }
      }
      &.brown {
        a {
          p { background: #793e1c; }
        }
      }
      &.camel {
        a {
          p { background: #c68056; }
        }
      }

      a {
        color: $accentColor;
        text-decoration: none;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        &:hover {
          figure {
            @include smartphone {
              transform: translateY(-10px);
            }
            @include screen {
              transform: translateY(-20px);
            }
          }
        }
        p {
          @include lhCrop(1.2);
          line-height: 1.2;
          height: 50px;
          font-family: $accentFont;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 30px;
          margin-top: 5px;
          @include smartphone {
            width: 80%;
            font-size: 1.4rem;
          }
          @include screen {
            font-size: 1.6rem;
            @include tablet {
              width: 80%;
            }
            @include desktop {
              width: 130px;
            }
          }
        }
        figure {
          img {
            @include imgResponse;
          }
        }
      }
    }
  }
  */
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__lineup--colors {
    padding: 0px 20px 50px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--allitem .allitem__lineup--colors {
    padding: 0px 30px 100px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--allitem .allitem__lineup--colors {
    padding: 0px 80px 100px;
  }
}
.page--allitem .allitem__lineup--colors .mod__heading01 {
  position: relative;
  border-top: 1px solid #ccc;
}
@media only screen and (max-width: 768px) {
  .page--allitem .allitem__lineup--colors .mod__heading01 {
    padding: 50px 0 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--allitem .allitem__lineup--colors .mod__heading01 {
    padding: 100px 0 45px;
  }
}
.page--allitem .allitem__lineup--colors .mod__heading01::after {
  display: none;
}
.page--allitem .mod__catalog .boys__catalog__heading:after {
  display: none;
}/*# sourceMappingURL=allitem.css.map */