@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
///////////////////////////////// */
/* /////////////////////////////////
  margin-top
///////////////////////////////// */
/* ///////////////////////////////////////////
  colors.scss
  カラーで選ぶに関する記述
/////////////////////////////////////////// */
/*=================================
  colors--index（トップ）
=================================*/
.page--colors--index .page__title {
  background-image: url("../images/common/pagetitle-bg_d.png");
}
@media only screen and (max-width: 768px) {
  .page--colors--index .page__title {
    height: 125px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .page__title {
    height: 210px;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--index .page__title span {
    margin-bottom: 25px;
    font-size: 2rem;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .page__title span {
    margin-bottom: 50px;
    font-size: 3rem;
  }
}
.page--colors--index .colors--index__heroheader {
  width: 100%;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__heroheader {
    height: 580px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--index .colors--index__heroheader {
    padding: 20px 30px 30px;
    height: 650px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--colors--index .colors--index__heroheader {
    padding: 20px 50px 50px;
    height: 800px;
  }
}
.page--colors--index .colors--index__heroheader__img {
  width: 100%;
  height: 100%;
  background-color: #d4e5e6;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: flex-end;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__heroheader__img {
    border: 20px solid #fff;
    padding: 40px 20px 30px;
  }
}
.page--colors--index .colors--index__heroheader__img img {
  display: block;
  margin: 0 auto;
  position: relative;
}
.page--colors--index .colors--index__heroheader__img img.hideSP {
  width: 100%;
  height: 100%;
  object-fit: contain;
  font-family: "object-fit: contain;";
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__heroheader__img img.hideSP {
    object-fit: cover;
    font-family: "object-fit: cover;";
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--index .colors--index__heroheader__img img.hideSP {
    width: 1000px;
  }
}
.page--colors--index .colors--index__heroheader__img img.top, .page--colors--index .colors--index__heroheader__img img.bottom {
  width: 600px;
  height: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.page--colors--index .colors--index__heroheader__img img.top {
  top: 30px;
}
.page--colors--index .colors--index__heroheader__img img.bottom {
  bottom: 30px;
}
.page--colors--index .colors--index__heroheader__slider {
  position: absolute;
  top: 150px;
  height: auto;
  z-index: 2;
  opacity: 0;
}
.page--colors--index .colors--index__heroheader__slider.slick-initialized {
  opacity: 1;
}
.page--colors--index .colors--index__heroheader__slider img {
  display: block;
  width: auto;
  height: 340px;
}
.page--colors--index .colors--index__heroheader .slick-list {
  width: 100%;
  height: 100%;
}
.page--colors--index .colors--index__heroheader .slick-track {
  transition: none;
}
.page--colors--index .colors--index__heroheader__btn {
  display: block;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  align-content: flex-start;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
}
.page--colors--index .colors--index__heroheader__btn > * {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__heroheader__btn {
    bottom: 70px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--index .colors--index__heroheader__btn {
    bottom: 95px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--colors--index .colors--index__heroheader__btn {
    bottom: 130px;
  }
}
.page--colors--index .colors--index__heroheader__btn li {
  width: 100px;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__heroheader__btn li {
    width: 125px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__heroheader__btn li {
    width: 130px;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__heroheader__btn li:nth-child(2) {
    margin-left: 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__heroheader__btn li:nth-child(2) {
    margin-left: 30px;
  }
}
.page--colors--index .colors--index__heroheader__btn li.girls a {
  background-color: #f5b6ad;
  color: #fff;
}
.page--colors--index .colors--index__heroheader__btn li.girls a:hover {
  background: #fff;
  color: #f5b6ad;
}
.page--colors--index .colors--index__heroheader__btn li.boys a {
  background-color: #5ec2cc;
  color: #fff;
}
.page--colors--index .colors--index__heroheader__btn li.boys a:hover {
  background: #fff;
  color: #5ec2cc;
}
.page--colors--index .colors--index__heroheader__btn li a {
  font-size: 1.2em;
  width: 100%;
}
.page--colors--index .colors--index__content {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__content {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--index .colors--index__content {
    padding: 0 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--colors--index .colors--index__content {
    padding: 0 80px;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__content {
    margin-top: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__content {
    margin-top: 100px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__content .heading {
    display: flex;
    justify-content: center;
  }
}
.page--colors--index .colors--index__content .mod__heading01 {
  text-align: left;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__content .mod__heading01 {
    font-size: 2rem;
    margin-bottom: 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__content .mod__heading01 {
    font-size: 3.2rem;
    line-height: 1.8;
    letter-spacing: -0.05em;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--index .colors--index__content .mod__heading01 {
    font-size: 2.8rem;
  }
}
.page--colors--index .colors--index__content .mod__heading01::after {
  display: none;
}
.page--colors--index .colors--index__content--2col {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
}
.page--colors--index .colors--index__content--2col > * {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__content--2col {
    flex-direction: column;
  }
}
.page--colors--index .colors--index__content--2col:first-child {
  margin-top: 20px;
}
.page--colors--index .colors--index__content--2col > * {
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__content--2col > * {
    width: 100%;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__content--2col > * {
    width: 46%;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__content--2col > *:nth-child(2n) {
    margin-top: 20px;
  }
}
.page--colors--index .colors--index__content--2col--left {
  flex-direction: row-reverse;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__content--2col--left:first-child {
    margin-top: 20px;
  }
}
.page--colors--index .colors--index__content figure img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}
.page--colors--index .colors--index__content 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;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__feature {
    margin-bottom: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__feature {
    margin-bottom: 150px;
  }
}
.page--colors--index .colors--index__feature figure img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}
.page--colors--index .colors--index__feature__opening {
  background: url("../images/page/colors/opening-bg.jpg") center top no-repeat;
  background-size: cover;
  background-position: center 70%;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__feature__opening {
    height: 200px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__feature__opening {
    height: 640px;
  }
}
.page--colors--index .colors--index__feature__opening 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;
  background-color: #fff;
  border: 1px solid #3f3f3f;
  position: absolute;
  top: 0;
  left: 50%;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__feature__opening h2 {
    padding: 3px;
    font-size: 1.8rem;
    top: -25px;
    transform: translateX(-50%);
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__feature__opening h2 {
    padding: 5px;
    font-size: 3.6rem;
    top: -50px;
    transform: translateX(-50%);
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--index .colors--index__feature__opening h2 {
    font-size: 2.8rem;
  }
}
.page--colors--index .colors--index__feature__opening h2 .wrap {
  display: block;
  border: 1px solid #3f3f3f;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__feature__opening h2 .wrap {
    padding: 15px 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--index .colors--index__feature__opening h2 .wrap {
    padding: 20px 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--colors--index .colors--index__feature__opening h2 .wrap {
    padding: 50px 60px;
  }
}
.page--colors--index .colors--index__feature__opening h2 .em {
  color: #ff9300;
}
.page--colors--index .colors--index__feature__colors > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
}
.page--colors--index .colors--index__feature__colors > div > * {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__feature__colors > div {
    flex-direction: column;
  }
}
.page--colors--index .colors--index__feature__colors > div figure {
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__feature__colors > div figure {
    width: 100%;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__feature__colors > div figure {
    width: 46%;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__feature__colors > div figure:nth-child(2n) {
    margin-top: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__feature__lineup {
    margin-top: 150px;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__feature__lineup ul {
    margin-top: 30px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__feature__lineup ul {
    margin-top: 30px;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__pride {
    margin-bottom: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__pride {
    margin-bottom: 100px;
  }
}
.page--colors--index .colors--index__pride__heading {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__pride__heading {
    margin: 50px 10px 0 10px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__pride__heading {
    margin-top: 150px;
  }
}
.page--colors--index .colors--index__pride__heading h2 {
  background-color: #faf3b1;
  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;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__pride__heading h2 {
    padding: 20px;
    font-size: 1.8rem;
    text-align: center;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__pride__heading h2 {
    padding: 30px 80px 40px;
    font-size: 3.6rem;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--index .colors--index__pride__heading h2 {
    font-size: 3.2rem;
  }
}
.page--colors--index .colors--index__pride__heading h2 span {
  display: block;
  padding: 0 20px;
  color: #fff;
  background-color: #fff;
  color: #fff;
  text-shadow: 1px 1px 0px #3f3f3f, -1px 1px 0px #3f3f3f, 1px -1px 0px #3f3f3f, -1px -1px 0px #3f3f3f, 1px 0px 0px #3f3f3f, 0px 1px 0px #3f3f3f, -1px 0px 0px #3f3f3f, 0px -1px 0px #3f3f3f;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__pride__heading h2 span {
    margin-top: 10px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__pride__heading h2 span {
    margin-top: 10px;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__pride__embroidery {
    margin-top: 30px;
  }
}
.page--colors--index .colors--index__pride__seate figure img {
  max-width: 100%;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__pride__seate p {
    margin-top: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__pride__seate p {
    margin-top: 30px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__pride__message {
    margin-top: 150px;
  }
}
.page--colors--index .colors--index__pride__message .text {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__pride__message .text {
    margin: 0px 10px;
  }
}
.page--colors--index .colors--index__pride__message .text p {
  background-color: #faf3b1;
  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;
}
@media only screen and (max-width: 768px) {
  .page--colors--index .colors--index__pride__message .text p {
    padding: 15px 20px;
    font-size: 1.8rem;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--index .colors--index__pride__message .text p {
    padding: 30px 50px;
    font-size: 3.6rem;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--index .colors--index__pride__message .text p {
    font-size: 3.2rem;
  }
}
.page--colors--index .colors--index__pride__message figure img {
  max-width: 100%;
}

/*=================================
  colors--detail（色別詳細）
=================================*/
.page--colors--detail .page__title {
  background-image: url("../images/common/pagetitle-bg_d.png");
}
.page--colors--detail.page--colors--red .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--red .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--red .colors--detail__blog .mod__heading01 {
  color: #cc0000;
}
.page--colors--detail.page--colors--black .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--black .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--black .colors--detail__blog .mod__heading01 {
  color: #22201f;
}
.page--colors--detail.page--colors--blue .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--blue .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--blue .colors--detail__blog .mod__heading01 {
  color: #0f3784;
}
.page--colors--detail.page--colors--green .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--green .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--green .colors--detail__blog .mod__heading01 {
  color: #164e2b;
}
.page--colors--detail.page--colors--silver .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--silver .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--silver .colors--detail__blog .mod__heading01 {
  color: #b3b3b3;
}
.page--colors--detail.page--colors--saxe .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--saxe .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--saxe .colors--detail__blog .mod__heading01 {
  color: #74c1e3;
}
.page--colors--detail.page--colors--pink .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--pink .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--pink .colors--detail__blog .mod__heading01 {
  color: #d9024b;
}
.page--colors--detail.page--colors--purple .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--purple .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--purple .colors--detail__blog .mod__heading01 {
  color: #a689c6;
}
.page--colors--detail.page--colors--pearl .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--pearl .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--pearl .colors--detail__blog .mod__heading01 {
  color: #7b7b7b;
}
.page--colors--detail.page--colors--wine .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--wine .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--wine .colors--detail__blog .mod__heading01 {
  color: #990033;
}
.page--colors--detail.page--colors--brown .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--brown .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--brown .colors--detail__blog .mod__heading01 {
  color: #793e1c;
}
.page--colors--detail.page--colors--camel .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--camel .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--camel .colors--detail__blog .mod__heading01 {
  color: #c68056;
}
.page--colors--detail.page--colors--white .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--white .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--white .colors--detail__blog .mod__heading01 {
  display: inline-block;
  color: #ffffff;
  text-shadow: 1px 1px 1px #666666, -1px 1px 1px #666666, 1px -1px 1px #666666, -1px -1px 1px #666666, 1px 0px 1px #666666, 0px 1px 1px #666666, -1px 0px 1px #666666, 0px -1px 1px #666666;
}
.page--colors--detail.page--colors--white .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--white .colors--detail__blog .mod__heading01 {
  display: block;
}
.page--colors--detail.page--colors--gray .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--gray .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--gray .colors--detail__blog .mod__heading01 {
  color: #807e83;
}
.page--colors--detail.page--colors--mint .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--mint .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--mint .colors--detail__blog .mod__heading01 {
  color: #b8d0cb;
}
.page--colors--detail.page--colors--yellow .colors--detail__intro .text .mod__heading01,
.page--colors--detail.page--colors--yellow .colors--detail__lineup .mod__heading01,
.page--colors--detail.page--colors--yellow .colors--detail__blog .mod__heading01 {
  color: #f7f49b;
}
.page--colors--detail .colors--detail__intro {
  display: flex !important;
  background: #f5f2ef;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__intro {
    flex-direction: column-reverse;
    justify-content: flex-end;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__intro {
    flex-direction: row-reverse;
    justify-content: flex-end;
    position: relative;
  }
  .page--colors--detail .colors--detail__intro::after {
    width: 50%;
    height: 100%;
    content: "";
    background: #fff;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__intro .text {
    padding: 20px;
    background: #fff;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__intro .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__intro .text {
    width: 50%;
    padding: 30px;
  }
}
@media print, screen and (min-width: 769px) and (min-width: 1220px) {
  .page--colors--detail .colors--detail__intro .text {
    max-width: 640px;
    padding: 50px 80px 50px 50px;
  }
}
.page--colors--detail .colors--detail__intro .text .mod__heading01 {
  text-align: left;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__intro .text .mod__heading01 {
    line-height: 0.8;
    font-size: 3rem;
    margin-bottom: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__intro .text .mod__heading01 {
    line-height: 0.65;
    font-size: 6rem;
    margin-bottom: 45px;
  }
}
.page--colors--detail .colors--detail__intro .text .mod__heading01::after {
  display: none;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__intro .text .mod__heading01 span {
    font-size: 1.6rem;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__intro .text .mod__heading01 span {
    font-size: 1.8rem;
  }
}
.page--colors--detail .colors--detail__intro .text p {
  color: #3f3f3f;
  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--colors--detail .colors--detail__intro .text p {
    font-size: 1.6rem;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__intro figure {
    width: 50%;
  }
}
.page--colors--detail .colors--detail__intro figure img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  max-width: none;
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__intro figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.page--colors--detail .colors--detail__lineup {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__lineup {
    padding: 0 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--colors--detail .colors--detail__lineup {
    padding: 0 80px;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup {
    padding-top: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup .mod__heading01 {
    margin-bottom: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup .mod__heading01 {
    margin-bottom: 45px;
  }
}
.page--colors--detail .colors--detail__lineup .mod__heading01::after {
  display: none;
}
.page--colors--detail .colors--detail__lineup ul {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul {
    padding-bottom: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup ul {
    padding-bottom: 100px;
  }
}
.page--colors--detail .colors--detail__lineup ul li {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li {
    width: 30%;
    margin-right: 5%;
  }
  .page--colors--detail .colors--detail__lineup ul li:nth-child(3n) {
    margin-right: 0;
  }
  .page--colors--detail .colors--detail__lineup ul li:nth-child(n+4) {
    margin-top: 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup ul li {
    width: 17.5%;
    max-width: 196px;
    margin-right: 3.125%;
  }
  .page--colors--detail .colors--detail__lineup ul li:nth-child(5n) {
    margin-right: 0;
  }
  .page--colors--detail .colors--detail__lineup ul li:nth-child(n+6) {
    margin-top: 40px;
  }
}
.page--colors--detail .colors--detail__lineup ul li.few figure::before {
  display: block;
  content: "残り\aわずか";
  white-space: pre;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  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;
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background-color: #ef4396;
  position: absolute;
  top: -10px;
  left: 0px;
  transform-origin: left top;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.few figure::before {
    transform: scale(0.6);
    top: -10px;
    left: -10px;
    min-width: 60px;
    min-height: 60px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__lineup ul li.few figure::before {
    transform: scale(0.8);
  }
}
.page--colors--detail .colors--detail__lineup ul li.add figure::before {
  display: block;
  content: "追加生産\a決定";
  white-space: pre;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  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;
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background-color: #ef4396;
  border: solid 1px #ef4396;
  position: absolute;
  top: -10px;
  left: 0px;
  transform-origin: left top;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.add figure::before {
    transform: scale(0.6);
    top: -10px;
    left: -10px;
    min-width: 60px;
    min-height: 60px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__lineup ul li.add figure::before {
    transform: scale(0.8);
  }
}
.page--colors--detail .colors--detail__lineup ul li.soldout figure::before {
  display: block;
  content: "完売\a御礼";
  white-space: pre;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  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;
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: center;
  color: #3f3f3f;
  background-color: #ccc;
  border: solid 2px #ccc;
  position: absolute;
  top: -10px;
  left: 0px;
  transform-origin: left top;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.soldout figure::before {
    transform: scale(0.6);
    top: -10px;
    left: -10px;
    min-width: 60px;
    min-height: 60px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__lineup ul li.soldout figure::before {
    transform: scale(0.8);
  }
}
.page--colors--detail .colors--detail__lineup ul li.limited20 figure::before {
  display: block;
  content: "";
  width: 70px;
  height: 70px;
  background: url(../images/common/rabel_limited20.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: -10px;
  left: 0px;
  transform-origin: left top;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.limited20 figure::before {
    transform: scale(0.6);
    top: -10px;
    left: -10px;
    min-width: 60px;
    min-height: 60px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__lineup ul li.limited20 figure::before {
    transform: scale(0.8);
  }
}
.page--colors--detail .colors--detail__lineup ul li.limited30 figure::before {
  display: block;
  content: "";
  width: 70px;
  height: 70px;
  background: url(../images/common/rabel_limited30.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: -10px;
  left: 0px;
  transform-origin: left top;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.limited30 figure::before {
    transform: scale(0.6);
    top: -10px;
    left: -10px;
    min-width: 60px;
    min-height: 60px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__lineup ul li.limited30 figure::before {
    transform: scale(0.8);
  }
}
.page--colors--detail .colors--detail__lineup ul li.preparation figure::after {
  display: block;
  content: "只今\a限定追加\a準備中";
  white-space: pre;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  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;
  font-size: 1.3rem;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background-color: #7ebded;
  position: absolute;
  bottom: 0px;
  right: -10px;
  transform-origin: right bottom;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.preparation figure::after {
    transform: scale(0.6);
    bottom: -5px;
    right: -10px;
    min-width: 60px;
    min-height: 60px;
    font-size: 1.25rem;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__lineup ul li.preparation figure::after {
    transform: scale(0.8);
  }
}
.page--colors--detail .colors--detail__lineup ul li.new {
  /*
  &::after {
    display: block;
    content: "2022年度\A NEW \Aカラー";
    white-space: pre;
    position: absolute;
    color: #fff;
    //font-size: 1.4rem;
    font-size: 1.15rem;
    line-height: 1.4;
    font-family: $accentFont;
    font-style: normal;
    text-align: center;
    background: $color3;
    border-radius: 50%;
    margin-top: 0;
    //width: 90px;
    //height: 90px;
    width: 70px;
    height: 70px;
    top: -10px;
    right: 0px;
    transform-origin:right top;
    @include flexMiddle;
    @include smartphone{
      //transform: scale(0.45);
      //top: -8px;
      //right: -5px;
      //min-width: 90px;
      //min-height: 90px;
      transform:scale(0.6);
      top: -10px;
      right: -10px;
      //width: 50%;
      min-width: 60px;
      //height: 50%;
      min-height: 60px;
      font-size: 1.2rem;
    }
    @include tablet{
      transform: scale(0.8);
    }
  }
  */
}
.page--colors--detail .colors--detail__lineup ul li.new figure::after {
  display: block;
  content: "2022年度\aNEW \aカラー";
  white-space: pre;
  position: absolute;
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  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;
  font-style: normal;
  text-align: center;
  background: #c9ebf8;
  border-radius: 50%;
  margin-top: 0;
  width: 70px;
  height: 70px;
  top: -10px;
  right: 0px;
  transform-origin: right top;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.new figure::after {
    transform: scale(0.6);
    top: -10px;
    right: -10px;
    min-width: 60px;
    min-height: 60px;
    font-size: 1.1rem;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__lineup ul li.new figure::after {
    transform: scale(0.8);
  }
}
.page--colors--detail .colors--detail__lineup ul li a {
  color: #3f3f3f;
  text-decoration: none;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li a:hover figure {
    transform: translateY(-10px);
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup ul li a:hover figure {
    transform: translateY(-20px);
  }
}
.page--colors--detail .colors--detail__lineup ul li a p {
  width: 100%;
  line-height: 1.25;
  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;
  display: block;
  margin-top: 10px;
}
.page--colors--detail .colors--detail__lineup ul li a p::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc((1 - 1.25) * 0.5em);
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup ul li a p {
    font-size: 1.6rem;
  }
}
.page--colors--detail .colors--detail__lineup ul li a p span {
  display: block;
  margin: 0 auto 5px auto;
}
.page--colors--detail .colors--detail__lineup ul li a p span:nth-child(n+2) {
  margin: 3px auto;
  font-size: 0.8em;
}
.page--colors--detail .colors--detail__lineup ul li a p span img {
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  font-family: "object-fit: contain;";
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li a p span img {
    height: 30px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup ul li a p span img {
    height: 50px;
  }
}
.page--colors--detail .colors--detail__lineup ul li a figure {
  width: 100%;
  height: 100%;
  position: relative;
}
.page--colors--detail .colors--detail__lineup ul li a figure img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}
.page--colors--detail .colors--detail__lineup ul li.ph-md a p span img {
  height: auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.ph-md a p span img {
    width: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup ul li.ph-md a p span img {
    width: 70px;
  }
}
.page--colors--detail .colors--detail__lineup ul li.fujitabag a p span img {
  height: auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.fujitabag a p span img {
    width: 65px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup ul li.fujitabag a p span img {
    width: 90px;
  }
}
.page--colors--detail .colors--detail__lineup ul li.blackcaps-flash a p span img {
  height: auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.blackcaps-flash a p span img {
    width: 65px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup ul li.blackcaps-flash a p span img {
    width: 90px;
  }
}
.page--colors--detail .colors--detail__lineup ul li.dreamlove a p span {
  width: 110px;
}
.page--colors--detail .colors--detail__lineup ul li.trad-flash a p span img {
  height: auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.trad-flash a p span img {
    width: 65px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup ul li.trad-flash a p span img {
    width: 90px;
  }
}
.page--colors--detail .colors--detail__lineup ul li.trad a p span {
  width: 110px;
}
.page--colors--detail .colors--detail__lineup ul li.tripleheart a p span img {
  height: auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__lineup ul li.tripleheart a p span img {
    width: 65px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__lineup ul li.tripleheart a p span img {
    width: 90px;
  }
}
.page--colors--detail .colors--detail__blog {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__blog {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__blog {
    padding: 0 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--colors--detail .colors--detail__blog {
    padding: 0 80px;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__blog {
    padding-top: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__blog {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__blog .mod__heading01 {
    margin-bottom: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__blog .mod__heading01 {
    margin-bottom: 45px;
  }
}
.page--colors--detail .colors--detail__blog .mod__heading01::after {
  display: none;
}
.page--colors--detail .colors--detail__blog .mod__heading01 span {
  font-size: 0.8em;
}
.page--colors--detail .colors--detail__blog .mod__blogList {
  border-bottom: 1px solid #ccc;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__blog .mod__blogList {
    padding-bottom: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__blog .mod__blogList {
    padding-bottom: 100px;
  }
}
.page--colors--detail .colors--detail__blog .mod__blogList li {
  margin-right: 0;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__blog .mod__blogList li {
    border: none;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__blog .mod__blogList li {
    width: 48%;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__blog .mod__blogList li {
    padding: 20px;
  }
}
.page--colors--detail .colors--detail__blog .mod__blogList li:nth-child(n+4) {
  margin-top: 0px;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__blog .mod__blogList li .post__cover .post__meta {
    padding: 0 0 0 10px;
  }
}
.page--colors--detail .colors--detail__blog .mod__blogList li .post__content {
  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--colors--detail .colors--detail__blog .mod__blogList li .post__content {
    margin: 1em 0 0 0;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__blog .mod__blogList li a {
    padding-right: 20px;
  }
}
.page--colors--detail .colors--detail__list {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__list {
    padding: 50px 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__list {
    padding: 100px 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--colors--detail .colors--detail__list {
    padding: 100px 80px;
  }
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__list .mod__heading01 {
    margin-bottom: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__list .mod__heading01 {
    margin-bottom: 45px;
  }
}
.page--colors--detail .colors--detail__list .mod__heading01::after {
  display: none;
}
.page--colors--detail .colors--detail__list ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__list ul li {
    width: 30%;
  }
  .page--colors--detail .colors--detail__list ul li:nth-child(n+4) {
    margin-top: 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__list ul li {
    width: 14.4643%;
    max-width: 162px;
  }
  .page--colors--detail .colors--detail__list ul li:nth-child(n+7) {
    margin-top: 40px;
  }
}
.page--colors--detail .colors--detail__list ul li.black a p {
  background: #22201f;
}
.page--colors--detail .colors--detail__list ul li.blue a p {
  background: #0f3784;
}
.page--colors--detail .colors--detail__list ul li.green a p {
  background: #164e2b;
}
.page--colors--detail .colors--detail__list ul li.silver a p {
  background: #b3b3b3;
}
.page--colors--detail .colors--detail__list ul li.saxe a p {
  background: #74c1e3;
}
.page--colors--detail .colors--detail__list ul li.pink a p {
  background: #d9024b;
}
.page--colors--detail .colors--detail__list ul li.red a p {
  background: #cc0000;
}
.page--colors--detail .colors--detail__list ul li.purple a p {
  background: #a689c6;
}
.page--colors--detail .colors--detail__list ul li.pearl a {
  color: #7b7b7b;
}
.page--colors--detail .colors--detail__list ul li.pearl a p {
  background: #e0e0c7;
}
.page--colors--detail .colors--detail__list ul li.wine a p {
  background: #990033;
}
.page--colors--detail .colors--detail__list ul li.brown a p {
  background: #793e1c;
}
.page--colors--detail .colors--detail__list ul li.camel a p {
  background: #c68056;
}
.page--colors--detail .colors--detail__list ul li.white a p {
  color: #666;
  background: #fff;
  border: 1px solid #666;
}
.page--colors--detail .colors--detail__list ul li a {
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__list ul li a:hover figure {
    transform: translateY(-10px);
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__list ul li a:hover figure {
    transform: translateY(-20px);
  }
}
.page--colors--detail .colors--detail__list ul li a p {
  line-height: 1.2;
  height: 50px;
  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-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  margin-top: 5px;
}
.page--colors--detail .colors--detail__list ul li a p::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc((1 - 1.2) * 0.5em);
}
@media only screen and (max-width: 768px) {
  .page--colors--detail .colors--detail__list ul li a p {
    width: 80%;
    font-size: 1.4rem;
  }
}
@media print, screen and (min-width: 769px) {
  .page--colors--detail .colors--detail__list ul li a p {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--colors--detail .colors--detail__list ul li a p {
    width: 80%;
  }
}
@media print, screen and (min-width: 769px) and (min-width: 1220px) {
  .page--colors--detail .colors--detail__list ul li a p {
    width: 130px;
  }
}
.page--colors--detail .colors--detail__list ul li a figure img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}

/*=================================
  randoselu__pagelink（ページリンク）
=================================*/
.randoselu__pagelink {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .randoselu__pagelink {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .randoselu__pagelink {
    padding: 0 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .randoselu__pagelink {
    padding: 0 80px;
  }
}
@media only screen and (max-width: 768px) {
  .randoselu__pagelink {
    margin-bottom: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .randoselu__pagelink {
    margin-bottom: 100px;
  }
}
.randoselu__pagelink ul {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #cacaca;
}
@media only screen and (max-width: 768px) {
  .randoselu__pagelink ul {
    flex-wrap: wrap;
    padding-top: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .randoselu__pagelink ul {
    padding-top: 100px;
  }
}
.randoselu__pagelink ul li {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}
@media only screen and (max-width: 768px) {
  .randoselu__pagelink ul li {
    width: calc(50% - 7.5px);
  }
  .randoselu__pagelink ul li:nth-child(n+3) {
    margin-top: 20px;
  }
  .randoselu__pagelink ul li:last-child {
    margin: 20px auto 0 auto;
  }
}
@media print, screen and (min-width: 769px) {
  .randoselu__pagelink ul li {
    width: 24%;
    max-width: 360px;
  }
}
.randoselu__pagelink ul li div h2 {
  line-height: 1.4;
  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-align: center;
  margin-bottom: 5px;
}
.randoselu__pagelink ul li div h2::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc((1 - 1.4) * 0.5em);
}
@media only screen and (max-width: 768px) {
  .randoselu__pagelink ul li div h2 {
    font-size: 1.6rem;
  }
}
@media print, screen and (min-width: 769px) {
  .randoselu__pagelink ul li div h2 {
    font-size: 1.8rem;
  }
}
.randoselu__pagelink ul li div h2 a {
  color: #ffd8d6;
  text-decoration: none;
}
.randoselu__pagelink ul li div h2 a span {
  color: #3f3f3f;
  display: block;
  text-decoration: underline;
}
.randoselu__pagelink ul li div h2 a:hover span {
  text-decoration: none;
}
.randoselu__pagelink ul li div p {
  color: #3f3f3f;
  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) {
  .randoselu__pagelink ul li div p {
    font-size: 1.6rem;
  }
}
.randoselu__pagelink ul li > a {
  display: block;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .randoselu__pagelink ul li > a {
    margin-bottom: 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .randoselu__pagelink ul li > a {
    margin-bottom: 20px;
  }
}
.randoselu__pagelink ul li > a:hover img {
  transform: scale(1.1);
  transition-duration: 0.3s;
}
.randoselu__pagelink ul li > a img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  transition: all 0.3s ease;
}
.randoselu__pagelink > a {
  width: 100%;
  max-width: 150px;
  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: #fff;
  cursor: pointer;
  transition: all 0.2s linear;
  position: relative;
  margin: 0 auto;
  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;
}
.randoselu__pagelink > 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) {
  .randoselu__pagelink > a:hover {
    color: #fff;
    background-color: #3f3f3f;
    text-decoration: none;
  }
  .randoselu__pagelink > a:hover::after {
    border-color: transparent transparent transparent #fff;
  }
}
@media only screen and (max-width: 768px) {
  .randoselu__pagelink > a {
    margin-top: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .randoselu__pagelink > a {
    margin-top: 50px;
  }
}
.randoselu__pagelink > a::after {
  border-color: transparent transparent transparent #3f3f3f;
}

/*=================================
  mod__pagelink（ページリンク）
=================================*/
.mod__pagelink ul {
  justify-content: center;
}
@media print, screen and (min-width: 769px) {
  .mod__pagelink ul li:not(:first-child) {
    margin-left: 50px;
  }
}
.mod__pagelink ul li:nth-child(3) {
  display: none;
}/*# sourceMappingURL=colors.css.map */