@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-black{
    background: #000; /* Old browsers */
    border:solid 1px #000;
    background: -moz-linear-gradient(-45deg,  #1e5799 0%, #2989d8 50%, #000 51%, #000 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(-45deg,  #1e5799 0%,#2989d8 50%,#000 51%,#000 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg,  #1e5799 0%,#2989d8 50%,#000 51%,#000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/*ミックス(ブルー×オレンジ)*/
.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-mix-red-balck{
    /* https://colorzilla.com/gradient-editor/*/
    background: #d33645; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #d33645 0%, #d33645 49%, #000000 51%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #d33645 0%,#d33645 49%,#000000 51%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #d33645 0%,#d33645 49%,#000000 51%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d33645', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

/*ミックス(シルバー×ブラック)*/
.u-bg-mix-silver-balck{
    /* https://colorzilla.com/gradient-editor/*/
    background: #aaaaaa; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #aaaaaa 6%, #969998 49%, #000000 51%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #aaaaaa 6%,#969998 49%,#000000 51%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #aaaaaa 6%,#aaaaaa 49%,#000000 51%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

/*ミックス(ゴールド×ブラック)*/
.u-bg-mix-gold-balck{
    /* https://colorzilla.com/gradient-editor/*/
    background: #d8c74e; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #d8c74e 0%, #f2dd42 49%, #000000 51%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #d8c74e 0%,#f2dd42 49%,#000000 51%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #d8c74e 0%,#d8c74e 49%,#000000 51%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

/*ミックス(フレンチグレー×リーフグリーン)*/
.u-bg-mix-fgray-rgreen{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cfd4d7+0,cfd4d7+49,cacd9f+52,cacd9f+100 */
    background: #cfd4d7; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #cfd4d7 0%, #cfd4d7 49%, #cacd9f 52%, #cacd9f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #cfd4d7 0%,#cfd4d7 49%,#cacd9f 52%,#cacd9f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #cfd4d7 0%,#cfd4d7 49%,#cacd9f 52%,#cacd9f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfd4d7', endColorstr='#cacd9f',GradientType=0 ); /* IE6-9 */
    color: #333!important;
}
/*ミックス(モスグリーン×ナチュラルベージュ)*/
.u-bg-mix-mgreen-nbeige{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b1c5c3+1,b1c5c3+49,d2d5d4+52,d2d5d4+100 */
    background: #b1c5c3; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #b1c5c3 1%, #b1c5c3 49%, #d2d5d4 52%, #d2d5d4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #b1c5c3 1%,#b1c5c3 49%,#d2d5d4 52%,#d2d5d4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #b1c5c3 1%,#b1c5c3 49%,#d2d5d4 52%,#d2d5d4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1c5c3', endColorstr='#d2d5d4',GradientType=0 ); /* IE6-9 */
    color: #333!important;
}
/*ミックス(スカイブルー×レモンイエロー)*/
.u-bg-mix-sblue-ryellow{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#afc4d1+0,afc4d1+49,cbc89a+52,cbc89a+100 */
    background: #afc4d1; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #afc4d1 0%, #afc4d1 49%, #cbc89a 52%, #cbc89a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #afc4d1 0%,#afc4d1 49%,#cbc89a 52%,#cbc89a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #afc4d1 0%,#afc4d1 49%,#cbc89a 52%,#cbc89a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afc4d1', endColorstr='#cbc89a',GradientType=0 ); /* IE6-9 */
    color: #333!important;
}

/*ナカグロ*/
.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;
}