@charset "utf-8";

/* 下記 productページ */
.product {
    padding: 100px 20px;
    margin: auto;
    width: 90%;
    max-width: 960px;
}

.product figure img {
    width: 400px;
    height: 400px;
    background-color: #333;
    display: block;
}

.product dl {
    width: 400px;
    background-color: #fff;
}

.product dt {
    float: left;
    width: 100px;
}

dt,
dd {
    padding: 20px;
    border-top: 1px solid #333;
}

.product dl img {
    width: 60px;
}

/* .back {
    line-height: 30px;
}

.back:hover a {
    color: #4b6f9a;
} */

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 180px;
    height: 45px;
}

/* WebKit ブラウザで、input type="number" のスピンボタンを非表示にする。 */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

/* Firefox で、input type="number" のスピンボタンを非表示にする。また、入力欄の値表示を中央寄せにし、高さをボタンのサイズに合わせる。 */
input[type="number"] {
    text-align: center;
    height: 100%;
    width: 80px;
    border: #666 1px solid;
    -moz-appearance: textfield;
}

/*ボタンのサイズを 44 × 44 CSS ピクセルにする。*/
button.btn-number {
    width: 45px;
    height: 100%;
    /* background-color: #fff;
    border: #666 1px solid; */
    padding: 0;
}

/* ステッパーコンポーネントの横幅を指定する。 */
.sr-only {
    display: none;
}

dl dd:last-of-type {
    font-size: 2.0em;
    text-align: right;
}

.category {
    padding: 5px 20px;
    margin-bottom: 20px;
    border: #66569d 1px solid;
    width: fit-content;
    background-color: #edebf6;
    color: #66569d;
}

button[type="submit"] {
    display: block;
    margin: auto;
}

@media screen and (max-width :960px) {
    main .flex {
        display: block;
    }

    .product {
        margin: auto;
        padding: 100px 30px;
        /* width: fit-content; */
        width: 100%;
        max-width: 440px;
    }

    .product figure img,
    .product dl {
        /* width: 100%; */
        /* height: auto; */
        margin: 30px auto 0;
        width: 100%;
        height: auto;
    }

    dl dt {
        margin-right: 0;
        width: 100%;
        padding: 20px 0;
    }

    dl dd {
        width: calc(100% - 40px);
    }

}