@charset "UTF-8";
/* ==========================================================================
Custom Utility
========================================================================== */

/* 背景色 *******************************************************************/

/*ブラック*/
.u-bg-black {
    background-color: #000;
    border:solid 1px #000;
}
/*グレー*/
.u-bg-gray {
    background-color: #969998;
    border:solid 1px #969998;
}
/*ブルー*/
.u-bg-blue {
    background-color: #0A66BC;
    border:solid 1px #0A66BC;
}
/*ライトブルー*/
.u-bg-l-blue {
    background-color: #4ba4e1;
    border:solid 1px #4ba4e1;
}
/*ネイビー*/
.u-bg-navy {
    background-color: #33446a;
    border:solid 1px #33446a;
}
/*グリーン*/
.u-bg-green {
    background-color: #64a128;
    border:solid 1px #64a128;
}
/*ライトグリーン*/
.u-bg-l-green {
    background-color: #a4bf39;
    border:solid 1px #a4bf39;
}
/*イエロー*/
.u-bg-yellow {
    background-color: #fbed2f;
    border:solid 1px #fbed2f;
    color: #333!important;
}
/*トゥルーイエロー*/
.u-bg-true-yellow {
    background-color: #ffff00;
    border:solid 1px #ffff00;
    color: #333!important;
}
/*オレンジ*/
.u-bg-orange {
    background-color: #df513b;
    border:solid 1px #df513b;
}
/*レッド*/
.u-bg-red {
    background-color: #d33645;
    border:solid 1px #d33645;
}
/*ピンク*/
.u-bg-pink {
    background-color: #ea84ce;
    border:solid 1px #ea84ce;
}
/*ライトピンク*/
.u-bg-l-pink {
    background-color: #eab7dc;
    border:solid 1px #eab7dc;
}
/*パープル*/
.u-bg-purple {
    background-color: #4b0082;
    border:solid 1px #4b0082;
}
/*ホワイト*/
.u-bg-white {
    background-color: #e5dbdb;
    border:solid 1px #e5dbdb;
    color: #333!important;
}
/*カーキ*/
.u-bg-khaki {
    background-color: #a0a15e;
    border:solid 1px #a0a15e;
}
/*ブラウン*/
.u-bg-brown{
    background-color: #563029;
    border:solid 1px #563029;
}
/*ライトブラウン*/
.u-bg-l-brown{
    background-color: #ac603e;
    border:solid 1px #ac603e;
}
/*トゥルーホワイト*/
.u-bg-true-white {
    background-color: #fff;
    color: #333!important;
    border:solid 1px #ccc;
    padding-right: 2px!important;
    padding-left: 2px!important;
}
/*クリア*/
.u-bg-clear {
    background-color: #fff;
    color: #333!important;
    border:solid 1px #ccc;
    padding-right: 2px!important;
    padding-left: 2px!important;
}
/*シルバー*/
.u-bg-silver {
    background: #eeeeee; /* Old browsers */
    border:solid 1px #eeeeee;
    background: -moz-linear-gradient(-45deg,  #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #333!important;
}
/*ディープブルー*/
.u-bg-d-blue{
    background-color: #154A99;
}
/*ブルーメタリック*/
.u-bg-blue-metal{
    background: #3b679e; /* Old browsers */
    border:solid 1px #3b679e;
    background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

/*ダークブラウン*/
.u-bg-d-brown{
    background-color: #3F2621;
    border:solid 1px #3F2621;
}
/*ダークグリーン*/
.u-bg-d-green{
    background-color:#2a6800;
    border:solid 1px #2a6800;
}
/*ディープピンク*/
.u-bg-l-pink{
   background-color: #E83174;
    border:solid 1px #E83174;
}
/*ゴールド*/
.u-bg-gold{
  background: #f2e0ab; /* Old browsers */
    border:solid 1px #f2e0ab;
  background: -moz-linear-gradient(-45deg,  #fefcea 0%, #f1da36 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #fefcea 0%,#f1da36 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #fefcea 0%,#f1da36 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: #333!important;
}
/*ベージュ*/
.u-bg-beige{
   background-color: #e5c2a6;
    border:solid 1px #e5c2a6;
    color: #333!important;
}
/*ミックス(ブルー×オレンジ)*/
.u-bg-mix-blue-orange{
    background: #1e5799; /* Old browsers */
    border:solid 1px #1e5799;
    background: -moz-linear-gradient(-45deg,  #1e5799 0%, #2989d8 50%, #f77727 51%, #f46f22 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(-45deg,  #1e5799 0%,#2989d8 50%,#f77727 51%,#f46f22 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg,  #1e5799 0%,#2989d8 50%,#f77727 51%,#f46f22 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#f46f22',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/*ミックス(パープル×グリーン)*/
.u-bg-mix-purple-green{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8106e5+0,9e13f4+50,1ace35+51,17a527+100 */
    border:solid 1px #8106e5;
    background: #8106e5; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #8106e5 0%, #9e13f4 50%, #1ace35 51%, #17a527 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #8106e5 0%,#9e13f4 50%,#1ace35 51%,#17a527 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #8106e5 0%,#9e13f4 50%,#1ace35 51%,#17a527 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8106e5', endColorstr='#17a527',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/*ナカグロ*/
.u-bg-nakaguro{
    color: #333!important;
}

/*トリコロール*/
.u-bg-tricolor{
    border:solid 1px #ff616d;
  background:linear-gradient(90deg,#ff616d 33%,#ff616d 33%,#FFF 33%,#FFF 67%,#6c7cb6 67%,#6c7cb6 100%);
  background:-moz-linear-gradient(0deg,#ff616d 33%,#ff616d 33%,#FFF 33%,#FFF 67%,#6c7cb6 67%,#6c7cb6 100%);
  background:-webkit-linear-gradient(0deg,#ff616d 33%,#ff616d 33%,#FFF 33%,#FFF 67%,#6c7cb6 67%,#6c7cb6 100%);
  color: #333!important;
}
/*ボンドストライプ*/
.u-bg-bond-stripe{
    border:solid 1px #231815;
    background:linear-gradient(90deg,#231815 0%,#231815 33%,#6a6c72 33%,#6a6c72 67%,#231815 0%,#231815 10%);
    background:-moz-linear-gradient(0deg,#231815 0%,#231815 33%,#6a6c72 33%,#6a6c72 67%,#231815 0%,#231815 10%);
    background:-webkit-linear-gradient(0deg,#231815 0%,#231815 33%,#6a6c72 33%,#6a6c72 67%,#231815 0%,#231815 10%);
}
/*レガッタストライプ*/
.u-bg-regatta-stripe{
    border:solid 1px #003d7e;
    background:linear-gradient(90deg,#003d7e 0%,#003d7e 33%,#d3063d 33%,#d3063d 67%,#003d7e 67%,#003d7e 100%);
    background:-moz-linear-gradient(0deg,#003d7e 0%,#003d7e 33%,#d3063d 33%,#d3063d 67%,#003d7e 67%,#003d7e 100%);
    background:-webkit-linear-gradient(0deg,#003d7e 0%,#003d7e 33%,#d3063d 33%,#d3063d 67%,#003d7e 67%,#003d7e 100%);
}
/*しろちゃん/ホワイトフェイス*/
.u-bg-white-face {
    background-color: #e5dbdb;
    border:solid 1px #e5dbdb;
    color: #333!important;
}

/*カラーアイコンのテキスト部分*/
.p-product-color-list__item .p-product-color-list__title .p-product-type-tag.u-bg-nakaguro {
    font-size: 85%!important;
    border-radius: 2px! important;
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
    float: left;
    vertical-align: middle;
    margin-bottom: 5px;
    margin-right: 0!important;
    padding-right: 0!important;
    padding-left: 3px;
    line-height: 1;
    white-space: nowrap;
    min-width:auto!important;
    /*
    color: #fff;
    text-align: center;
    transition: opacity cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s;
    */
}


/**************************************
カラーコードで命名
****************************************/
.u-bg-4179be {
    background-color: #4179be;
}
.u-bg-339900 {
    background-color: #339900;
}
.u-bg-e87528 {
    background-color: #e87528;
}
.u-bg-e80224 {
    background-color: #e80224;
}
/* 要素の属性に関連して命名 */
.u-bg-reflect {
    background-color: #59853f;
}
.u-bg-fingerprint {
    background-color: #4179be;
}

/* 文字の長さ ****************************************************************/

.u-width-4char {
    width: 4em;
}
.u-width-6char {
    width: 6em;
}
.u-width-8char {
    width: 8em;
}
.u-width-10char {
    width: 10em;
}