@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
///////////////////////////////// */
/* ///////////////////////////////////////////
  material.scss
  素材で選ぶ（クラリーノ エフ・レミニカ、牛革、コードバン）
/////////////////////////////////////////// */
/*=================================
  material
=================================*/
.page--material--detail .material--detail__intro {
  display: block;
  max-width: 1060px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro {
    padding: 50px 20px 0px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--material--detail .material--detail__intro {
    padding: 100px 30px 0px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--material--detail .material--detail__intro {
    padding: 100px 80px 0px;
  }
}
.page--material--detail .material--detail__intro > div {
  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;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: flex-start;
  text-align: left;
  margin: 0 auto;
}
.page--material--detail .material--detail__intro > div > * {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > div {
    margin-bottom: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > div {
    margin-bottom: 50px;
  }
}
.page--material--detail .material--detail__intro > div > h2 {
  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;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  margin-bottom: 20px;
  font-size: 2.4rem;
  white-space: nowrap;
}
.page--material--detail .material--detail__intro > div > h2 > * {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
.page--material--detail .material--detail__intro > div > h2 img {
  margin-right: 15px;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > div > h2 img {
    width: 30px;
    height: 30px;
  }
}
.page--material--detail .material--detail__intro > div > h2 span {
  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;
  background: #885d2c;
  color: #fff;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > div > h2 span {
    font-size: 1.4rem;
    text-align: center;
    margin-left: 10px;
    padding: 0 10px;
    line-height: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > div > h2 span {
    font-size: 1.6rem;
    margin-left: 20px;
    padding: 0 15px;
    line-height: 43px;
  }
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > div figure {
    width: 20%;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > div figure {
    width: 15%;
  }
}
.page--material--detail .material--detail__intro > div figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > div div {
    width: 80%;
    padding-left: 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > div div {
    width: auto;
    max-width: 85%;
    padding-left: 30px;
  }
}
.page--material--detail .material--detail__intro > div div h2 {
  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;
  line-height: 1.4;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  margin-bottom: 20px;
  font-size: 3.6rem;
}
.page--material--detail .material--detail__intro > div div h2 > * {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > div div h2 {
    padding-right: 15px;
  }
}
.page--material--detail .material--detail__intro > div div h2 img {
  margin-right: 15px;
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > div div h2 img {
    width: 50px;
    height: 50px;
  }
}
.page--material--detail .material--detail__intro > div div h2 span::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc((1 - 1.4) * 0.5em);
}
.page--material--detail .material--detail__intro > div div h2 span {
  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;
  background: #885d2c;
  color: #fff;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > div div h2 span {
    font-size: 1.4rem;
    text-align: center;
    margin-left: 10px;
    padding: 0 10px;
    line-height: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > div div h2 span {
    font-size: 1.6rem;
    margin-left: 20px;
    padding: 0 15px;
    line-height: 40px;
  }
}
.page--material--detail .material--detail__intro > div div ul {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > div div ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
  }
  .page--material--detail .material--detail__intro > div div ul > * {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
  }
  .page--material--detail .material--detail__intro > div div ul > * {
    width: 48%;
    margin: 0 4% 0 0;
  }
  .page--material--detail .material--detail__intro > div div ul > *:nth-child(2n) {
    margin-right: 0;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > div div ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    flex-wrap: nowrap;
    margin-top: 1em;
  }
  .page--material--detail .material--detail__intro > div div ul > * {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
  }
  .page--material--detail .material--detail__intro > div div ul > * {
    width: 23.5%;
    margin: 0 2% 0 0;
  }
  .page--material--detail .material--detail__intro > div div ul > *:nth-child(4n) {
    margin-right: 0;
  }
}
.page--material--detail .material--detail__intro > div div ul li {
  display: inline-block;
  text-align: center;
  background: #fff;
  border: 1px solid #3f3f3f;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > div div ul li {
    padding: 3px 5px;
  }
  .page--material--detail .material--detail__intro > div div ul li:nth-child(n+3) {
    margin-top: 4%;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > div div ul li {
    width: 120px;
    padding: 5px;
  }
}
.page--material--detail .material--detail__intro p {
  text-align: left;
  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;
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro p {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro p:nth-of-type(n+2) {
    margin-top: 10px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro p:nth-of-type(n+2) {
    margin-top: 20px;
  }
}
.page--material--detail .material--detail__intro > ul {
  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;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > ul {
    margin-top: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    margin-top: 40px;
  }
  .page--material--detail .material--detail__intro > ul > * {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
  }
  .page--material--detail .material--detail__intro > ul > * {
    width: 48%;
    margin: 0 4% 0 0;
  }
  .page--material--detail .material--detail__intro > ul > *:nth-child(2n) {
    margin-right: 0;
  }
}
.page--material--detail .material--detail__intro > ul li {
  background-color: #f5f2ef;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > ul li {
    padding: 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > ul li {
    padding: 20px 30px;
  }
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > ul li:nth-child(n+2) {
    margin-top: 20px;
  }
}
.page--material--detail .material--detail__intro > ul h3 {
  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;
  margin-bottom: 0.5em;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__intro > ul h3 {
    font-size: 1.8rem;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__intro > ul h3 {
    font-size: 2.4rem;
  }
}
.page--material--detail .material--detail__lineup {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  /*
        > ul {
          > li {
            display: flex;
            //background: #f8eef7;
            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;
              }
            }

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

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

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

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

            //ドリームラブ
            &.dreamlove {
              .text {
                h3 { max-width: 150px; }
              }
            }

            //レインボーフォース
            &.rainbowforce {
              .text {
                i {
                  color: $accentColor;
                  font-family: $accentFont;
                  font-style: normal;
                  text-align: center;
                  background: #b40034;
                  border: 1px solid #b40034;
                  display: inline-block;
                  @include smartphone {
                    font-size: 1.4rem;
                    padding: 0 10px;
                    margin-bottom: 15px;
                  }
                  @include screen {
                    font-size: 1.6rem;
                    padding: 0 15px;
                    margin-bottom: 20px;
                  }
                }
                h3 {
                  max-width: 230px;
                }
              }
            }

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

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

            //アンシェル
            &.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; }
              }
            }

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

            //サンシャイングラッド
            &.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;
              }

              h3 {
                @include smartphone {
                  margin-bottom: 15px;
                }
                @include screen {
                  margin-bottom: 20px;
                }

                img {
                  @include imgResponse;
                }

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

              ul {
                @include flexBox;
                margin-left: -5px;
                margin-right: -5px;
                @include smartphone {
                  margin-bottom: 15px;
                }
                @include screen {
                  margin-bottom: 20px;
                }
                li {
                  color: #4b4b4b;
                  font-size: 1.3rem;
                  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;
                    }
                  }
                }
              }

              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;
                }
              }
            }
            figure {
              position: relative;
              &:before{
                content:"";
                display: block;
                padding-top: 100%;
              }
              img {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                @include imgResponse;
                  max-width: none;
                @include smartphone {
                  border-radius: 6px 6px 0 0;
                }
                @include screen {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  border-radius: 12px 0 0 12px;
                }
              }
            }
          }
        }
        */
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__lineup {
    padding: 50px 20px 0px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--material--detail .material--detail__lineup {
    padding: 120px 30px 0px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--material--detail .material--detail__lineup {
    padding: 120px 80px 0px;
  }
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__lineup .mod__heading01 {
    margin-bottom: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__lineup .mod__heading01 {
    margin-bottom: 45px;
  }
}
.page--material--detail .material--detail__lineup .mod__heading01::after {
  display: none;
}
.page--material--detail .material--detail__lineup .mod__heading01 span {
  display: block;
}
.page--material--detail .material--detail__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--material--detail .material--detail__lineup > p {
    margin-bottom: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__lineup > p {
    font-size: 1.6rem;
    margin-bottom: 45px;
  }
}
.page--material--detail .material--detail__lineup--girls {
  /*
  > ul {
    > li {
      background: #f8eef7;
    }
  }
  */
}
.page--material--detail .material--detail__lineup--girls .mod__heading01 span {
  color: #e81956;
}
.page--material--detail .material--detail__lineup--boys {
  /*
  > ul {
    > li {
      background: #e0eff2;
    }
  }
  */
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__lineup--boys {
    padding-bottom: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__lineup--boys {
    padding-bottom: 100px;
  }
}
.page--material--detail .material--detail__lineup--boys .mod__heading01 span {
  color: #01668b;
}
.page--material--detail .material--detail__link {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__link {
    padding: 0 20px 50px 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--material--detail .material--detail__link {
    padding: 0 30px 100px 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--material--detail .material--detail__link {
    padding: 0 80px 100px 80px;
  }
}
.page--material--detail .material--detail__link ul {
  border-top: 1px solid #CCC;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__link ul {
    padding-top: 30px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__link ul {
    display: flex;
    justify-content: space-between;
    padding-top: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__link ul li:nth-child(n+2) {
    margin-top: 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__link ul li {
    width: 32.1429%;
    max-width: 360px;
  }
}
.page--material--detail .material--detail__link ul li a {
  width: 100%;
  max-width: 100%;
  height: 50px;
  color: #3f3f3f;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  border: 1px solid #3f3f3f;
  background-color: #f4efe4;
  cursor: pointer;
  transition: all 0.2s linear;
  position: relative;
  margin: 0 auto;
  background-color: #f4efe4;
  text-align: left;
  justify-content: flex-start;
  padding: 0 30px;
  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;
  border-width: 2px;
  /*
  line-height: 1.4;
  color: $mainColor;
  font-family: $accentFont;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0px 40px 0px 30px;
  background: #f5f2ef;
  border: 1px solid $mainColor;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  */
}
.page--material--detail .material--detail__link ul 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;
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__link ul li a:hover {
    color: #f4efe4;
    background-color: #3f3f3f;
    text-decoration: none;
  }
  .page--material--detail .material--detail__link ul li a:hover::after {
    border-color: transparent transparent transparent #f4efe4;
  }
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__link ul li a {
    height: 50px;
    padding: 0 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__link ul li a {
    height: 86px;
    font-size: 1.8rem;
  }
}
.page--material--detail .material--detail__link ul li a::before {
  display: block;
  content: "";
  background: url(../images/page/randoselu/leather/material-icon-clarino.png) center center no-repeat;
  background-size: contain;
}
@media only screen and (max-width: 768px) {
  .page--material--detail .material--detail__link ul li a::before {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--material--detail .material--detail__link ul li a::before {
    width: 40px;
    height: 40px;
    margin-right: 20px;
  }
}
.page--material--detail .material--detail__link ul li a.clarino::before {
  background-image: url(../images/page/randoselu/leather/material-icon-clarino.png);
}
.page--material--detail .material--detail__link ul li a.clarino:hover::before {
  background-image: url(../images/page/randoselu/leather/material-icon-clarino-white.png);
}
.page--material--detail .material--detail__link ul li a.cowhide::before {
  background-image: url(../images/page/randoselu/leather/material-icon-cowhide.png);
}
.page--material--detail .material--detail__link ul li a.cowhide:hover::before {
  background-image: url(../images/page/randoselu/leather/material-icon-cowhide-white.png);
}
.page--material--detail .material--detail__link ul li a.cordovan::before {
  background-image: url(../images/page/randoselu/leather/material-icon-cordovan.png);
}
.page--material--detail .material--detail__link ul li a.cordovan:hover::before {
  background-image: url(../images/page/randoselu/leather/material-icon-cordovan-white.png);
}/*# sourceMappingURL=material.css.map */