@charset "UTF-8";

@media screen and (max-width: 640px) {
    .modal__inner {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000000;
        background-color: #FFF;
        padding: 50px 16px 16px;
        overflow: scroll;
        height: 100vh;
        -webkit-overflow-scrolling: touch;
    }
}

.modal__row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media screen and (max-width: 640px) {
    .modal__row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.modal__button--back {
    display: none;
}

@media screen and (max-width: 640px) {
    .modal__button--back {
        display: block;
        position: absolute;
        top: 16px;
        left: 12px;
        font-size: 13px;
        font-weight: 700;
    }
}

.modal__button--back::before {
    display: none;
}

@media screen and (max-width: 640px) {
    .modal__button--back::before {
        display: inline-block;
        content: "▲";
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        vertical-align: 1px;
    }
}

.modal__button--close {
    display: none;
}

@media screen and (max-width: 640px) {
    .modal__button--close {
        display: block;
        position: absolute;
        top: 16px;
        right: 10px;
        font-size: 36px;
        font-weight: 700;
    }
}

.modal__block {
    width: 19%;
}

@media screen and (max-width: 640px) {
    .modal__block {
        width: 100%;
    }
}

.modal__block h3 {
    font-size: 15px;
    font-weight: 700;
    background-color: #0055B8;
    margin-bottom: 8px;
    padding: 8px;
    color: #FFF;
}

@media screen and (max-width: 640px) {
    .modal__block h3 {
        font-size: 18px;
    }
}

.modal__list {
    margin-bottom: 10px;
}

.modal__list li {
    font-size: 14.5px;
    border-bottom: 1px solid #CCC;
    line-height: 1.3;
    position: relative;
}

@media screen and (max-width: 640px) {
    .modal__list li {
        font-size: 16px;
    }
}

.modal__list li::after {
    position: absolute;
    top: 38%;
    right: 3px;
    content: '';
    width: 6px;
    height: 6px;
    border-top: 2px solid #CCC;
    border-right: 2px solid #CCC;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.modal__list a {
    display: block;
    color: #333;
    padding: 4px;
}

@media screen and (max-width: 640px) {
    .modal__list a {
        padding: 8px 4px;
    }
}

.cg-title .title {
    font-size: 22px;
    font-weight: 700;
    background-color: #0055b8;
    width: 100%;
    color: #FFF;
    padding: 10px;
    box-sizing: border-box;
}

@media screen and (max-width: 640px) {
    .cg-title .title {
        font-size: 18px;
        padding: 8px;
    }
}

.button__filter {
    display: none;
}

@media screen and (max-width: 640px) {
    .button__filter {
        display: block;
        padding: 16px 16px 14px;
        text-align: center;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(85%, #fff),
            to(#f6f6f6));
        background-image: -webkit-linear-gradient(top, #fff 85%, #f6f6f6 100%);
        background-image: -o-linear-gradient(top, #fff 85%, #f6f6f6 100%);
        background-image: linear-gradient(to bottom, #fff 85%, #f6f6f6 100%);
        -webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
        border: solid 1px #dedcd7;
        margin-top: 8px;
        border-radius: 4px;
        font-size: 15px;
        font-weight: 700;
    }
}

@media screen and (max-width: 640px) {
    .cg-conditions {
        display: none;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000000;
        background-color: #FFF;
        padding: 50px 16px 16px;
        overflow: scroll;
        height: 100vh;
        -webkit-overflow-scrolling: touch;
    }
}

.filter__block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-top: 16px;
}

.filter__item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

@media screen and (max-width: 640px) {
    .filter__item {
        display: block;
    }
}

@media screen and (min-width: 640px) {
    .filter__item dd {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

@media screen and (max-width: 640px) {
    .filter__item--color {
        display: block;
    }
}

.filter__item--unit {
    margin: 0 4px;
}

@media screen and (max-width: 640px) {
    .filter__item--unit {
        display: none;
    }
}

.filter__item dt {
    width: 100px;
    font-weight: 700;
}

@media screen and (max-width: 640px) {
    .filter__item dt {
        font-size: 18px;
        margin-bottom: 4px;
    }
}

.filter__item--color dt {
    width: 100px;
    font-weight: 700;
}

@media screen and (max-width: 640px) {
    .filter__item--color dt {
        font-size: 18px;
        width: 100%;
        margin-bottom: 4px;
    }
}

.filter__item>dd {
    width: calc(100% - 100px);
}

@media screen and (max-width: 640px) {
    .filter__item>dd {
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 640px) {
    .filter__item .color_lst {
        width: 23%;
        height: 70px;
        border: 1px solid #CCC;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 11px;
    }
}

@media screen and (max-width: 640px) {
    .filter__item .color_lst:not(:nth-child(4n)) {
        margin-right: 2.6%;
    }
}

@media screen and (max-width: 640px) {
    .filter__item .color_lst:not(:nth-child(-n+4)) {
        margin-top: 10px;
    }
}

.filter__item .clrtip {
    overflow: visible;
}

@media screen and (max-width: 640px) {
    .filter__item .clrtip {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

.filter__title {
    display: none;
}

@media screen and (max-width: 640px) {
    .filter__title {
        display: block;
        font-size: 20px;
        font-weight: 700;
    }
}

.filter__item select {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #FFF),
        color-stop(90%, #F7F7F7));
    background: -webkit-linear-gradient(top, #FFF 10%, #F7F7F7 90%);
    background: -o-linear-gradient(top, #FFF 10%, #F7F7F7 90%);
    background: linear-gradient(to bottom, #FFF 10%, #F7F7F7 90%);
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #0C2245;
    font-size: 14px;
    padding: 4px;
    cursor: pointer;
    width: 198px;
}

@media screen and (max-width: 640px) {
    .filter__item select {
        width: 100%;
        font-size: 16px;
        padding: 8px;
        height: 44px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-bottom: 8px;
    }
}

.filter__button__block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #fff;
    margin-left: auto;
    position: absolute;
    top: 0;
    right: 0;
}

@media screen and (max-width: 640px) {
    .filter__button__block {
        margin-top: 16px;
        position: static;
    }
}

.filter__button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #EFEFEF;
    background-color: #FFF;
    border-radius: 4px;
    padding: 0 12px;
    margin: 0 4px;
    height: 44px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    text-decoration: none !important;
}

@media screen and (max-width: 640px) {
    .filter__button {
        height: 56px;
    }
}

.filter__button a, .filter__button a:hover {
    text-decoration: none !important;
}

.filter__button.filter__button--clear {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #FFF),
        color-stop(90%, #F7F7F7));
    background: -webkit-linear-gradient(top, #FFF 10%, #F7F7F7 90%);
    background: -o-linear-gradient(top, #FFF 10%, #F7F7F7 90%);
    background: linear-gradient(to bottom, #FFF 10%, #F7F7F7 90%);
    width: 140px;
}

@media screen and (max-width: 640px) {
    .filter__button.filter__button--clear {
        display: none;
    }
}

.filter__button.filter__button--clear:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #FFF),
        color-stop(90%, #e8e8e8));
    background: -webkit-linear-gradient(top, #FFF 10%, #e8e8e8 90%);
    background: -o-linear-gradient(top, #FFF 10%, #e8e8e8 90%);
    background: linear-gradient(to bottom, #FFF 10%, #e8e8e8 90%);
    border: 1px solid #DDD;
    text-decoration: none;
}

.filter__button.filter__button--clear input {
    background: none;
    cursor: pointer;
    border: none;
    padding: 0;
}

.filter__button.filter__button--search {
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    padding: 7px 20px 5px 20px;
    background-color: #0055b8;
    width: 250px;
}

@media screen and (max-width: 640px) {
    .filter__button.filter__button--search {
        width: 300px;
        -webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
    }
}

.filter__button.filter__button--search:hover {
    opacity: 0.7;
    text-decoration: none;
}

.freeword {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 16px;
    position: relative;
}

@media screen and (max-width: 640px) {
    .freeword {
        display: block;
    }
}

.freeword__inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@media screen and (max-width: 640px) {
    .freeword__inner {
        display: block;
    }
}

.freeword h4 {
    width: 100px;
}

@media screen and (max-width: 640px) {
    .freeword h4 {
        font-size: 16px;
        margin-bottom: 4px;
    }
}

.nininp_smart {
    width: 380px;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #7f9db9;
    background-color: #fff;
}

@media screen and (max-width: 640px) {
    .nininp_smart {
        width: 100%;
    }
}

.srch_panel {
    border: none;
    width: auto;
}

.color_check {
    display: none;
}

/*検索結果*/
.cg-result {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 8px;
}

.cg-result dt {
    font-size: 16px;
}

.cg-result__count {
    margin-left: 8px;
}

.cg-result__count--value {
    color: #EE3440;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.cg-result__count--unit {
    font-size: 14px;
    margin-left: 4px;
}

.cg-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media screen and (max-width: 640px) {
    .cg-list {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

.cg-list__item {
    width: 190px;
    position: relative;
}

@media screen and (max-width: 640px) {
    .cg-list__item {
        width: 49%;
    }
}

@media screen and (min-width: 640px) {
    .cg-list__item:not(:nth-child(-n+5)) {
        margin-top: 24px;
    }
}

@media screen and (min-width: 640px) {
    .cg-list__item:not(:nth-child(5n)) {
        margin-right: 12px;
    }
}

@media screen and (max-width: 640px) {
    .cg-list__item:not(:nth-child(-n+2)) {
        margin-top: 24px;
    }
}

.cg-list__item dt img {
    max-width: 100%;
    height: auto;
}

.cg-list__item dd {
    margin-top: 4px;
}

.cg-list__item-name--link {
    color: inherit;
}

.cg-list__item-name--maker {
    display: block;
    font-size: 12px;
    margin-left: 0;
}

.cg-list__item-name--model {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin-left: 0;
    color: #12c;;
}

.cg-list__item-txt {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 8px;
}

@media print, screen and (max-width:480px) {
    .cho_cobox li:nth-child(4n) {
      margin-right: 0%
    }
    .cho_color {
      float: left;
      width: 22%;
      margin-right: 4%;
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: center;
      border: 1px solid #1F3641;
      border-radius: 5px;
      background-size: cover;
      margin-bottom: 10px
    }
    .wht {
      background-color: #fff
    }
    .blk {
      background-color: #000;
      color: #fff
    }
    .glay {
      background-color: #ccc
    }
    .red {
      background-color: #EE3440;
      color: #fff
    }
    .blue {
      background-color: #3498DB;
      color: #fff
    }
    .green {
      background-color: #76B852;
      color: #fff
    }
    .yellow {
      background-color: #FD0
    }
    .brown {
      background-color: #BC8339
    }
    .orange {
      background-color: #F7941D
    }
    .pink {
      background-color: #F1A9A0
    }
    .purple {
      background-color: #942F86;
      color: #fff
    }
    .beige {
      background-color: #F5F5DC
    }
    .wine {
      background-color: #80273F;
      color: #fff
    }
    .perl {
      background-image: url(/common/v2/images/color/perl_sp-7f45c640ee05b0626ea688cccfd839b4.png);
      background-repeat: no-repeat
    }
    .silver {
      background-image: url(/common/v2/images/color/silver_sp-e2cab5b3aedb5da1cf118310850f445e.png);
      background-repeat: no-repeat
    }
    .gold {
      background-image: url(/common/v2/images/color/gold_sp-33dc4fabfc794a14b4ef05d792e79997.png);
      background-repeat: no-repeat
    }
}