@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');

/************************************************
 ブラウザリセット
************************************************ */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
}

table,
caption,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0px;
    empty-cells: show;
    text-align: left;
    font-weight: normal;
}

a img,
iframe {
    border: none;
}

ol,
ul,
li {
    list-style: none;
}

input,
textarea,
select,
button {
    font-size: 100%;
    font-family: inherit;
}

th,
td,
label,
p,
li,
dd,
dt {
    font-size: 102%;
}

/************************************************
 共通設定
************************************************ */

body {
    --ud-font-scale: 1;
    color: #333;
    font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #f5f5f5;
    font-size: calc(87.5% * var(--ud-font-scale));
    line-height: 1.75;
    letter-spacing: 0.04em;
}

html.ud-font-small,
body.ud-font-small {
    --ud-font-scale: 0.9;
}

html.ud-font-medium,
body.ud-font-medium {
    --ud-font-scale: 1;
}

html.ud-font-large,
body.ud-font-large {
    --ud-font-scale: 1.12;
}

/* 写真 */

img {
    &.picture {
        border: 1px solid #ccc;
    }

    max-width: 100%;
}

/* ==============================================
 フレーム
=============================================== */
/* 全体を包括 */

.frame_outer {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

/* コンテンツ */

#container {
    margin: 0 auto;
    padding: 0 0 30px;
    width: min(1180px, calc(100% - 24px));
    background: #fff;
    text-align: left;
}

/* ==============================================
 カラム指定
=============================================== */

/* メイン部
----------------------------------------------- */
@media (width > 980px), not screen {
    #main_column_frame {
        display: flex;
        justify-content: space-between;
        flex-direction: row;

        .colnum_order {
            &:nth-child(1) {
                order: 2;
            }

            &:nth-child(2) {
                order: 1;
            }

            &:nth-child(3) {
                order: 3;
            }
        }
    }
}

#main_column {
    padding: 10px 0 0;

    /* 1カラム時 */
    &.colnum1 {
        margin: 0 auto;
        width: 80%;
    }

    /* 2カラム時 (共通) */
    &.colnum2 {
        width: 78%;

        /* 2カラム時 (メイン部が左) */
        &.left {
            padding-left: 1.5%;
        }

        /* 2カラム時 (メイン部が右) */
        &.right {
            padding-right: 1.5%;
        }
    }

    /* 3カラム時 */
    &.colnum3 {
        padding-left: 0.5%;
        width: 59%;
    }
}

/* サイドカラム
----------------------------------------------- */
.side_column {
    padding: 10px 0 0;

    &#leftcolumn {
        width: 20%;
    }
    
    &#rightcolumn {
        width: 20%;
    }
}

/* 他
----------------------------------------------- */
/* ヘッダーとフッターの上下 */

#topcolumn,
#bottomcolumn,
#footerbottomcolumn {
    margin: 0px;
    background: #fff;
    text-align: left;
    clear: both;
}

/* 下層コンテンツ */

#undercolumn {
    width: 100%;
    margin: 0 0 30px 0;
}

.quick-order-page {
    margin-top: 10px;
}

.quick-order-intro {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #fff9ef;
    border: 1px solid #f2d6a6;
    line-height: 1.7;
}

.quick-order-table-wrap {
    overflow-x: auto;
}

.quick-order-table {
    width: 100%;
    table-layout: fixed;
}

.quick-order-col-product {
    width: 52%;
}

.quick-order-col-price {
    width: 16%;
}

.quick-order-col-qty {
    width: 16%;
}

.quick-order-table td,
.quick-order-table th {
    vertical-align: top;
    font-size: 116%;
    line-height: 1.45;
}

.quick-order-table td.quick-order-price-cell,
.quick-order-table td.quick-order-qty-cell {
    vertical-align: middle;
}

.quick-order-code-wrap {
    position: relative;
}

.quick-order-product-name {
    margin-top: 8px;
    word-break: break-word;
}

.quick-order-table .js-quick-code {
    width: 100%;
    box-sizing: border-box;
}

.quick-order-table input[type="number"] {
    width: 72px;
}

.quick-order-qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.quick-order-qty-wrap .js-quick-quantity {
    width: 62px;
    min-width: 0;
    margin: 0;
    text-align: center;
}

.quick-order-qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quick-order-qty-controls li {
    margin: 0;
    padding: 0;
}

.quick-order-qty-controls .ec-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

.quick-order-qty-controls .ec-qty-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.quick-order-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    display: none;
    width: 100%;
    min-width: 320px;
    background: #fff;
    border: 1px solid #d7d7d7;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.quick-order-suggest-list {
    margin: 0;
    padding: 0;
}

.quick-order-suggest-item + .quick-order-suggest-item {
    border-top: 1px solid #ececec;
}

.quick-order-suggest-item button {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.quick-order-suggest-item button:hover {
    background: #fff2da;
}

.quick-order-suggest-item button.is-active {
    background: #ffe6b8;
}

.quick-order-suggest-code,
.quick-order-suggest-name,
.quick-order-suggest-price {
    display: block;
}

.quick-order-suggest-code {
    font-weight: bold;
    color: #785022;
}

.quick-order-suggest-name {
    margin-top: 4px;
    color: #444;
}

.quick-order-suggest-price {
    margin-top: 4px;
    color: #8b5a2b;
    font-size: 92%;
}

@media screen and (max-width: 768px) {
    .quick-order-col-product,
    .quick-order-col-price,
    .quick-order-col-qty {
        width: auto;
    }

    .quick-order-suggest {
        min-width: 0;
        width: 100%;
    }

    .quick-order-table,
    .quick-order-table thead,
    .quick-order-table tbody,
    .quick-order-table tr,
    .quick-order-table th,
    .quick-order-table td {
        display: block;
        width: 100%;
    }

    .quick-order-table thead {
        display: none;
    }

    .quick-order-table tbody tr {
        margin-bottom: 16px;
        padding: 12px;
        border: 1px solid #e0d7c7;
        background: #fffdf9;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        box-sizing: border-box;
    }

    .quick-order-table tbody td {
        padding: 8px 0;
        border: 0;
        box-sizing: border-box;
    }

    .quick-order-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #8b5a2b;
        font-weight: bold;
    }

    .quick-order-table .js-quick-code {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    .quick-order-table input[type="number"] {
        width: 100%;
        max-width: 110px;
        box-sizing: border-box;
    }

    .quick-order-qty-wrap .js-quick-quantity {
        width: 110px;
    }
}

/* ==============================================
 ユーティリティ
=============================================== */
/* フロート回り込み解除
----------------------------------------------- */
.clearfix {
    &:after {
        display: block;
        clear: both;
        height: 0px;
        line-height: 0px;
        visibility: hidden;
        content: ".";
    }
}

.clear {
    clear: both;
}

/* リンク指定
----------------------------------------------- */
a {

    &:link,
    &:visited {
        color: #444;
        text-decoration: none;
    }

    &:link:hover,
    &[href]:hover {
        color: #111;
        text-decoration: underline;
    }
}

/* フォント
----------------------------------------------- */
h1,
h2,
h3,
h4,
h5 {
    font-size: 100%;
    line-height: 150%;
}

.sale_price {
    color: #f00;
}

.normal_price {
    font-size: 90%;
}

.point {
    color: #f00;
    font-weight: bold;
}

.user_name {
    font-weight: bold;
}

.recommend_level {
    color: #ecbd00;
}

.attention {
    color: #f00;
}

.attentionSt {
    color: #f00;
    font-weight: bold;
}

.st {
    font-weight: bold;
}

.mini {
    font-size: 90%;
}

/* 行揃え
----------------------------------------------- */
.alignC {
    text-align: center;
}

.alignR {
    text-align: right;
}

.alignL {
    text-align: left;
}

.pricetd em {
    font-weight: bold;
}

/* フォーム
----------------------------------------------- */
select {
    border: solid 1px #ccc;
}

input {

    &[type='text'],
    &[type='password'] {
        border: solid 1px #ccc;
        padding: 2px;
    }
}

#main_column input[type='text'],
#main_column input[type='password'],
#main_column input[type='email'],
#main_column input[type='tel'],
#main_column input[type='number'],
#main_column select,
#main_column textarea,
#undercolumn input[type='text'],
#undercolumn input[type='password'],
#undercolumn input[type='email'],
#undercolumn input[type='tel'],
#undercolumn input[type='number'],
#undercolumn select,
#undercolumn textarea {
    font-size: calc(16px * var(--ud-font-scale, 1));
    line-height: 1.4;
    box-sizing: border-box;
}

#main_column input[type='text'],
#main_column input[type='password'],
#main_column input[type='email'],
#main_column input[type='tel'],
#main_column input[type='number'],
#undercolumn input[type='text'],
#undercolumn input[type='password'],
#undercolumn input[type='email'],
#undercolumn input[type='tel'],
#undercolumn input[type='number'] {
    min-height: calc(40px * var(--ud-font-scale, 1));
    padding: calc(7px * var(--ud-font-scale, 1)) calc(10px * var(--ud-font-scale, 1));
}

#main_column select,
#undercolumn select {
    min-height: calc(40px * var(--ud-font-scale, 1));
    padding: calc(6px * var(--ud-font-scale, 1)) calc(8px * var(--ud-font-scale, 1));
}

#main_column textarea,
#undercolumn textarea {
    min-height: calc(140px * var(--ud-font-scale, 1));
    padding: calc(8px * var(--ud-font-scale, 1)) calc(10px * var(--ud-font-scale, 1));
}

.responsive-inline-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.responsive-inline-field {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 180px;
}

.responsive-inline-field-label {
    flex: 0 0 auto;
    color: #333;
    white-space: nowrap;
}

.responsive-inline-field input,
.responsive-inline-field select {
    flex: 1 1 auto;
    min-width: 0;
}

.box40 {
    width: 40px;
}

.box60 {
    width: 60px;
}

.box100 {
    width: 100px;
}

.box120 {
    width: 120px;
}

.box140 {
    width: 140px;
}

.box145 {
    width: 145px;
}

.box150 {
    width: 150px;
}

.box240 {
    width: 240px;
}

.box300 {
    width: 300px;
}

.box320 {
    width: 320px;
}

.box350 {
    width: 350px;
}

.box380 {
    width: 380px;
}

/* フォームが縦に重なり合う場合に併用する余白 */
/* FIXME 簡素な単語は、単独で、込み入った指定に使用しない */
.top {
    margin-bottom: 5px;
}

/* タイトル
----------------------------------------------- */
h2.title {
    margin-bottom: 2rem;
    padding: 8px;
    border-bottom: solid 1px #ccc;
    font-size: 170%;
}

#main_column .sub_area h3,
#undercolumn_login .login_area h3,
#undercolumn_shopping h3,
#mypagecolumn h3,
#undercolumn_cart h3 {
    margin: 0 0 10px 0;
    padding: 5px 0 10px;
    color: #666;
    background: url("img/background/line_01.gif") repeat-x left bottom;
    font-size: 120%;
}

#undercolumn_login .login_area h4 {
    padding-left: 15px;
    background: url("img/icon/ico_arrow_05.gif") no-repeat left;
}

/* ==============================================
 ヘッダー
=============================================== */
/* レイアウト
----------------------------------------------- */
#header_wrap {
    min-height: 82px;
    background: #eeeeee;
}

#header {
    margin: auto;
    width: min(1180px, calc(100% - 24px));
    display: flex;
    justify-content: space-between;
}

#header_utility {
    width: 60%;
}

#header_fontsize_control {
    display: flex;
    clear: both;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    padding: 4px 0 2px;
    font-size: 12px;
}

#header_fontsize_control .header-fontsize-label {
    color: #444;
    font-weight: bold;
}

#header_fontsize_control a.js-font-size-switch {
    display: inline-block;
    min-width: 2.2em;
    padding: 2px 6px;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #fff;
    color: #333 !important;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}

#header_fontsize_control a.js-font-size-switch:hover {
    background: #f6f6f6;
    text-decoration: none;
}

#header_fontsize_control a.js-font-size-switch.is-active {
    border-color: #666;
    background: #666;
    color: #fff !important;
}

#errorHeader {
    color: #F00;
    font-weight: bold;
    font-size: 12px;
    background-color: #FCC;
    text-align: center;
    padding: 5px;
}

/* ロゴ
----------------------------------------------- */
#logo_area {
    padding-left: 10px;
    width: 390px;
    text-align: left;
}

#site_description {
    font-size: 90%;
}

/* ヘッダーナビ
----------------------------------------------- */
#header_navi {
    ul {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        padding: 6px 0;

        li {
            display: block;
            min-width: 120px;
        }
    }

    a.nav_btn {
        display: block;
        padding: 8px 12px;
        border: 1px solid #aaa;
        border-radius: 4px;
        background: #666;
        color: #fff;
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    a.nav_btn:hover {
        background: #777;
        border-color: #777;
        color: #fff;
        text-decoration: none;
    }
}

/* ==============================================
 フッター
=============================================== */

#footer_wrap {
    margin: 0 auto;
    width: min(1180px, calc(100% - 24px));
    height: 80px;
    background: #fff;
}

#footer {
    margin: auto;
    padding-top: 10px;
    border-top: solid 1px #ccc;
    width: 100%;
}

#pagetop {
    width: 210px;
    text-align: right;
    position: fixed;
    bottom: 40px;
    right: 12px;
}

#copyright {
    width: auto;
    max-width: calc(100% - 230px);
    text-align: left;
    font-size: 97%;
}

/* ==============================================
 パーツ
=============================================== */
/* ボタン
----------------------------------------------- */
.btn_area {
    margin: 10px auto;
    width: 80%;

    ul {
        display: flex;
        justify-content: flex-end;
    }

    li {
        padding-right: 10px;
        flex-grow: 1;
        box-sizing: border-box;
        text-align: center;
    }
}

.ec-block-btn {
    display: inline-block;
    min-width: 140px;
    padding: 8px 14px;
    border: 1px solid #666;
    border-radius: 4px;
    background: #666;
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.ec-block-btn:hover {
    background: #777;
    border-color: #777;
    color: #fff;
    text-decoration: none;
}

a.ec-block-btn:visited,
a.ec-block-btn:active {
    color: #fff;
}

a.ec-block-btn:link,
a.ec-block-btn:visited,
a.ec-block-btn:hover,
a.ec-block-btn:active {
    color: #fff !important;
}

.ec-block-btn--search,
.ec-block-btn--cart {
    background: #666;
    border-color: #666;
}

.ec-block-btn--search:hover,
.ec-block-btn--cart:hover {
    background: #777;
    border-color: #777;
}

.ec-block-btn--login,
.ec-block-btn--logout {
    background: #666;
    border-color: #666;
}

.ec-block-btn--login:hover,
.ec-block-btn--logout:hover {
    background: #777;
    border-color: #777;
}

.ec-action-btn {
    display: inline-block;
    min-width: 150px;
    padding: 8px 14px;
    border: 1px solid #666;
    border-radius: 4px;
    background: #666;
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.ec-action-btn:hover {
    background: #777;
    border-color: #777;
    color: #fff;
    text-decoration: none;
}

a.ec-action-btn:visited,
a.ec-action-btn:active {
    color: #fff;
}

a.ec-action-btn:link,
a.ec-action-btn:visited,
a.ec-action-btn:hover,
a.ec-action-btn:active {
    color: #fff !important;
}

.ec-action-btn--detail,
.ec-action-btn--comment,
.ec-action-btn--confirm {
    background: #666;
    border-color: #666;
}

.ec-action-btn--detail:hover,
.ec-action-btn--comment:hover,
.ec-action-btn--confirm:hover {
    background: #777;
    border-color: #777;
}

a.ec-action-btn--comment:link,
a.ec-action-btn--comment:visited,
a.ec-action-btn--comment:hover,
a.ec-action-btn--comment:active {
    color: #fff !important;
}

.ec-action-btn--cartin {
    background: #d14a22;
    border-color: #b94421;
}

.ec-action-btn--cartin:hover {
    background: #df5931;
    border-color: #c6532e;
}

.ec-action-btn--favorite {
    background: #5a9fd3;
    border-color: #4e8fbf;
}

.ec-action-btn--favorite:hover {
    background: #6aaddc;
    border-color: #5a9ecf;
}

.ec-action-btn--entry-cancel {
    background: #979797;
    border-color: #8c8c8c;
}

.ec-action-btn--entry-cancel:hover {
    background: #a6a6a6;
    border-color: #9a9a9a;
}

.ec-action-btn--entry-agree {
    background: #666;
    border-color: #666;
}

.ec-action-btn--entry-agree:hover {
    background: #777;
    border-color: #777;
}

.ec-action-btn--back {
    background: #979797;
    border-color: #8c8c8c;
}

.ec-action-btn--back:hover {
    background: #a6a6a6;
    border-color: #9a9a9a;
}

.ec-action-btn--next,
.ec-action-btn--buystep,
.ec-action-btn--order-complete {
    background: #666;
    border-color: #666;
}

.ec-action-btn--next:hover,
.ec-action-btn--buystep:hover,
.ec-action-btn--order-complete:hover {
    background: #777;
    border-color: #777;
}

.ec-action-btn--complete,
.ec-action-btn--toppage,
.ec-action-btn--entry,
.ec-action-btn--search,
.ec-action-btn--add-address,
.ec-action-btn--add-address-complete,
.ec-action-btn--address-select,
.ec-action-btn--order-re,
.ec-action-btn--order-now {
    background: #666;
    border-color: #666;
}

.ec-action-btn--complete:hover,
.ec-action-btn--toppage:hover,
.ec-action-btn--entry:hover,
.ec-action-btn--search:hover,
.ec-action-btn--add-address:hover,
.ec-action-btn--add-address-complete:hover,
.ec-action-btn--address-select:hover,
.ec-action-btn--order-re:hover,
.ec-action-btn--order-now:hover {
    background: #777;
    border-color: #777;
}

.ec-action-btn--close,
.ec-action-btn--refuse-not {
    background: #979797;
    border-color: #8c8c8c;
}

.ec-action-btn--close:hover,
.ec-action-btn--refuse-not:hover {
    background: #a6a6a6;
    border-color: #9a9a9a;
}

.ec-action-btn--refuse,
.ec-action-btn--refuse-do {
    background: #bc3f3f;
    border-color: #a23636;
}

.ec-action-btn--refuse:hover,
.ec-action-btn--refuse-do:hover {
    background: #ca4f4f;
    border-color: #b24545;
}

.ec-action-btn--login {
    background: #666;
    border-color: #666;
}

.ec-action-btn--login:hover {
    background: #777;
    border-color: #777;
}

.ec-action-btn--address-input,
.btn_sub {
    min-width: 96px;
    padding: 3px 10px;
    border: 1px solid #8c8c8c;
    border-radius: 4px;
    background: #979797;
    color: #fff;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.ec-action-btn--address-input:hover,
.btn_sub:hover {
    background: #a6a6a6;
    border-color: #9a9a9a;
    color: #fff;
    text-decoration: none;
}

.ec-action-btn.is-current {
    background: linear-gradient(#f7f7f7, #e9e9e9);
    border-color: #d2d2d2;
    color: #666;
    cursor: default;
}

.ec-rss-btn {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid #666;
    border-radius: 3px;
    background: #666;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    vertical-align: middle;
}

.ec-rss-btn:hover {
    background: #777;
    color: #fff;
    text-decoration: none;
}

a.ec-rss-btn:visited,
a.ec-rss-btn:active {
    color: #fff;
}

a.ec-rss-btn:link,
a.ec-rss-btn:visited,
a.ec-rss-btn:hover,
a.ec-rss-btn:active {
    color: #fff !important;
}

.ec-qty-btn {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #8c8c8c;
    border-radius: 2px;
    background: #979797;
    color: #fff !important;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    text-align: center;
    text-decoration: none;
}

.ec-qty-btn:hover {
    background: #a6a6a6;
    color: #fff !important;
    text-decoration: none;
}

/* 完了メッセージ
----------------------------------------------- */
#complete_area {
    margin-bottom: 20px;

    .message {
        margin-bottom: 20px;
        line-height: 150%;
        font-weight: bold;
        font-size: 120%;
    }

    .shop_information {
        margin-top: 40px;
        padding: 20px 0 0 0;
        border-top: solid 1px #ccc;
    
        .name {
            margin-bottom: 10px;
            font-weight: bold;
            font-size: 140%;
        }
    }
}

/************************************************
 各ページコンテンツ用
************************************************ */
/* ==============================================
▼TOP
=============================================== */
/* メインイメージ
----------------------------------------------- */
#main_image {
    margin-bottom: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
}

#main_image.top-slider {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#main_image .top-slider__track {
    position: relative;
    width: 100%;
    aspect-ratio: 580 / 272;
    overflow: hidden;
    margin: 0 auto;
}

#main_image .top-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main_image .top-slider__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

#main_image .top-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    margin: 0 auto;
}

#main_image .top-slider__dots {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

#main_image .top-slider__dot {
    width: 10px;
    height: 10px;
    border: 1px solid rgb(255 255 255 / 95%);
    border-radius: 50%;
    background: rgb(255 255 255 / 50%);
    padding: 0;
    cursor: pointer;
}

#main_image .top-slider__dot.is-active {
    background: #dddddd;
    border-color: #fff;
}

/* ==============================================
▼下層
=============================================== */
/* ==============================================
▼ガイド
=============================================== */
/* ◎◎について
----------------------------------------------- */
#undercolumn_aboutus {
}

/* 特定商取引法
----------------------------------------------- */
#undercolumn_order {
}

/* お問い合わせ
----------------------------------------------- */
#undercolumn_contact {
    margin: 0 auto;
    width: 100%;
}

#undercolumn_contact .contact-form-list,
#undercolumn_aboutus .info-kv-list,
#undercolumn_order .info-kv-list {
    margin: 15px 0 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#undercolumn_contact .contact-form-row,
#undercolumn_aboutus .info-kv-row,
#undercolumn_order .info-kv-row {
    display: grid;
    grid-template-columns: 28% 72%;
    border-top: 1px solid #ccc;
}

#undercolumn_contact .contact-form-label,
#undercolumn_contact .contact-form-value,
#undercolumn_aboutus .info-kv-label,
#undercolumn_aboutus .info-kv-value,
#undercolumn_order .info-kv-label,
#undercolumn_order .info-kv-value {
    padding: 8px;
    box-sizing: border-box;
    word-break: break-word;
}

#undercolumn_contact .contact-form-label,
#undercolumn_aboutus .info-kv-label,
#undercolumn_order .info-kv-label {
    border-right: 1px solid #ccc;
    background: #f0f0f0;
    color: #333;
    font-weight: bold;
}

#undercolumn_contact .contact-form-value input[type="text"],
#undercolumn_contact .contact-form-value textarea,
#undercolumn_contact .contact-form-value select {
    max-width: 100%;
    box-sizing: border-box;
}

#undercolumn_entry .entry-form-table,
#undercolumn_entry .entry-confirm-table {
    margin: 15px 0 20px;
}

.zipimg img {
    vertical-align: middle;
}

/* ==============================================
▼MYページ
=============================================== */
/* 共通設定
----------------------------------------------- */
#mypagecolumn {
    width: 100%;
}

#mynavi_area {
    width: 100%;
}

#mycontents_area {
    width: 100%;
}

#mynavi_area {
    .mynavi_list {
        margin-bottom: 20px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        li {
            margin: 0 15px 5px 0;
            padding-left: 15px;
            background: url("img/icon/ico_arrow_01.gif") no-repeat left;
            font-size: 120%;
        }
    }

    div.point_announce {
        margin-bottom: 30px;
        padding: 10px;
        border: solid 1px #ccc;
        background-color: #eee;

        p {
            padding-left: 20px;
            background: url("img/icon/ico_point.gif") no-repeat left;
        }
    }
}

#mycontents_area p.inforamtion {
    margin-bottom: 20px;
}

#mypagecolumn h4 {
    margin: 10px auto;
    border-bottom: 1px solid #999;
    text-align: left;
    font-size: 120%;
}

/* 購入履歴一覧/詳細
----------------------------------------------- */
#mycontents_area div.mycondition_area {
    margin: 0 auto 20px 0;
    padding: 10px;
    border: solid 1px #ccc;
    width: 97%;
    background: #f9f9f9;

    .btn {
        width: 160px;
        margin-top: 15px;
    }
}

#mycontents_area .mypage-search-panel {
    margin: 15px 0 20px;
    padding: 12px;
    border: 1px solid #ccc;
    background: #fafafa;
}

#mycontents_area .mypage-search-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

#mycontents_area .mypage-search-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#mycontents_area .mypage-search-item label {
    color: #333;
    font-weight: bold;
}

#mycontents_area .mypage-search-item input[type="text"] {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

#mycontents_area .mypage-search-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

#mycontents_area .mypage-search-date-range span {
    flex-shrink: 0;
}

#mycontents_area .mypage-search-date-range input[type="text"] {
    width: calc((100% - 24px) / 2);
}

#mycontents_area .mypage-search-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

#mycontents_area .mypage-search-radio-group label {
    font-weight: normal;
}

#mycontents_area .mypage-order-list {
    margin: 15px 0 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#mycontents_area .mypage-order-list-header,
#mycontents_area .mypage-order-list-row {
    display: grid;
    grid-template-columns: 16% 18% 16% 16% 14% 12% 8%;
    align-items: stretch;
}

#mycontents_area .mypage-order-list-header {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

#mycontents_area .mypage-order-list-header > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}

#mycontents_area .mypage-order-list-header > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-order-list-row {
    border-bottom: 1px solid #ccc;
}

#mycontents_area .mypage-order-list-row > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    line-height: 1.5;
    word-break: break-word;
}

#mycontents_area .mypage-order-list-row > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-order-col-date,
#mycontents_area .mypage-order-col-payment,
#mycontents_area .mypage-order-col-status,
#mycontents_area .mypage-order-col-detail {
    text-align: center;
}

#mycontents_area .mypage-order-col-total {
    text-align: right;
    white-space: nowrap;
}

#mycontents_area .mypage-order-col-detail a {
    color: #2f6fb3;
    text-decoration: none;
}

#mycontents_area .mypage-order-col-detail a:hover {
    text-decoration: underline;
}

#mycontents_area .mypage-favorite-list {
    margin: 15px 0 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#mycontents_area .mypage-favorite-list-header,
#mycontents_area .mypage-favorite-list-row {
    display: grid;
    grid-template-columns: 12% 18% 50% 20%;
    align-items: center;
}

#mycontents_area .mypage-favorite-list-header {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

#mycontents_area .mypage-favorite-list-header > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}

#mycontents_area .mypage-favorite-list-header > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-favorite-list-row {
    border-bottom: 1px solid #ccc;
}

#mycontents_area .mypage-favorite-list-row > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    line-height: 1.5;
    word-break: break-word;
}

#mycontents_area .mypage-favorite-list-row > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-favorite-col-delete,
#mycontents_area .mypage-favorite-col-image {
    text-align: center;
}

#mycontents_area .mypage-favorite-col-price {
    text-align: right;
    white-space: nowrap;
}

#mycontents_area .mypage-biz-kv-list {
    margin: 15px 0 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#mycontents_area .mypage-biz-kv-row {
    display: grid;
    grid-template-columns: 30% 70%;
    border-top: 1px solid #ccc;
}

#mycontents_area .mypage-biz-kv-label,
#mycontents_area .mypage-biz-kv-value {
    padding: 8px;
    box-sizing: border-box;
    word-break: break-word;
}

#mycontents_area .mypage-biz-kv-label {
    border-right: 1px solid #ccc;
    background: #f0f0f0;
    color: #333;
    font-weight: bold;
}

#mycontents_area .mypage-delivery-list {
    margin: 15px 0 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#mycontents_area .mypage-delivery-list-header,
#mycontents_area .mypage-delivery-list-row {
    display: grid;
    grid-template-columns: 8% 16% 56% 10% 10%;
    align-items: stretch;
}

#mycontents_area .mypage-delivery-list-header {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

#mycontents_area .mypage-delivery-list-header > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}

#mycontents_area .mypage-delivery-list-header > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-delivery-list-row {
    border-bottom: 1px solid #ccc;
}

#mycontents_area .mypage-delivery-list-row > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    word-break: break-word;
}

#mycontents_area .mypage-delivery-list-row > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-delivery-col-no,
#mycontents_area .mypage-delivery-col-edit,
#mycontents_area .mypage-delivery-col-delete {
    text-align: center;
}

#mycontents_area .mypage-pdf-list {
    margin: 15px 0 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#mycontents_area .mypage-pdf-list-header,
#mycontents_area .mypage-pdf-list-row {
    display: grid;
    grid-template-columns: 24% 48% 28%;
    align-items: stretch;
}

#mycontents_area .mypage-pdf-list-header {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

#mycontents_area .mypage-pdf-list-header > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}

#mycontents_area .mypage-pdf-list-header > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-pdf-list-row {
    border-bottom: 1px solid #ccc;
}

#mycontents_area .mypage-pdf-list-row > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    word-break: break-word;
}

#mycontents_area .mypage-pdf-list-row > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-pdf-col-date,
#mycontents_area .mypage-pdf-col-downloaded {
    text-align: center;
}

#mycontents_area .mypage-history-product-list {
    margin: 15px 0 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#mycontents_area .mypage-history-product-header,
#mycontents_area .mypage-history-product-row {
    display: grid;
    grid-template-columns: 42% 18% 16% 8% 16%;
    align-items: stretch;
}

#mycontents_area .mypage-history-product-header {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

#mycontents_area .mypage-history-product-header > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}

#mycontents_area .mypage-history-product-header > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-history-product-row {
    border-bottom: 1px solid #ccc;
}

#mycontents_area .mypage-history-product-row > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    line-height: 1.5;
    word-break: break-word;
}

#mycontents_area .mypage-history-product-row > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-estimate-product-list .mypage-history-product-header,
#mycontents_area .mypage-estimate-product-list .mypage-history-product-row {
    grid-template-columns: 18% 42% 16% 12% 12%;
}

#mycontents_area .mypage-estimate-col-standard-price,
#mycontents_area .mypage-estimate-col-estimate-price,
#mycontents_area .mypage-estimate-col-quantity {
    text-align: center;
}

#mycontents_area .mypage-history-product-type,
#mycontents_area .mypage-history-product-qty {
    text-align: center;
}

#mycontents_area .mypage-history-product-price,
#mycontents_area .mypage-history-product-subtotal {
    text-align: right;
}

#mycontents_area .mypage-history-summary {
    background: #fafafa;
}

#mycontents_area .mypage-history-summary-row {
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #ddd;
}

#mycontents_area .mypage-history-summary-row:last-child {
    border-bottom: none;
}

#mycontents_area .mypage-history-summary-label,
#mycontents_area .mypage-history-summary-value {
    padding: 8px 10px;
    box-sizing: border-box;
}

#mycontents_area .mypage-history-summary-label {
    width: calc(100% - 220px);
    text-align: right;
    font-weight: bold;
}

#mycontents_area .mypage-history-summary-value {
    width: 220px;
    text-align: right;
}

#mycontents_area .mypage-history-summary-row.is-total .mypage-history-summary-label,
#mycontents_area .mypage-history-summary-row.is-total .mypage-history-summary-value {
    font-weight: bold;
}

#mycontents_area .mypage-history-kv-list {
    margin: 15px 0 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#mycontents_area .mypage-history-kv-row {
    display: grid;
    grid-template-columns: 30% 70%;
    border-top: 1px solid #ccc;
}

#mycontents_area .mypage-history-kv-label,
#mycontents_area .mypage-history-kv-value {
    padding: 8px;
    box-sizing: border-box;
    word-break: break-word;
}

#mycontents_area .mypage-history-kv-label {
    border-right: 1px solid #ccc;
    background: #f0f0f0;
    color: #333;
    font-weight: bold;
}

#mycontents_area .mypage-history-shipment-items {
    margin: 15px 0 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#mycontents_area .mypage-history-shipment-items-header,
#mycontents_area .mypage-history-shipment-items-row {
    display: grid;
    grid-template-columns: 64% 20% 16%;
    align-items: stretch;
}

#mycontents_area .mypage-history-shipment-items-header {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

#mycontents_area .mypage-history-shipment-items-header > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}

#mycontents_area .mypage-history-shipment-items-header > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-history-shipment-items-row {
    border-bottom: 1px solid #ccc;
}

#mycontents_area .mypage-history-shipment-items-row > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    word-break: break-word;
}

#mycontents_area .mypage-history-shipment-items-row > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-history-shipment-item-price,
#mycontents_area .mypage-history-shipment-item-qty {
    text-align: right;
}

#mycontents_area .mypage-history-qty-rule {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #666;
}

#mycontents_area .mypage-history-mail-list {
    margin: 15px 0 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#mycontents_area .mypage-history-mail-header,
#mycontents_area .mypage-history-mail-row {
    display: grid;
    grid-template-columns: 22% 22% 56%;
    align-items: stretch;
}

#mycontents_area .mypage-history-mail-header {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

#mycontents_area .mypage-history-mail-header > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}

#mycontents_area .mypage-history-mail-header > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-history-mail-row {
    border-bottom: 1px solid #ccc;
}

#mycontents_area .mypage-history-mail-row > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    word-break: break-word;
}

#mycontents_area .mypage-history-mail-row > div:last-child {
    border-right: none;
}

#mycontents_area .mypage-history-mail-date,
#mycontents_area .mypage-history-mail-template {
    text-align: center;
}

.add_address {
    margin-bottom: 20px;
}

/* 会員登録内容変更/退会
----------------------------------------------- */
#mycontents_area .message_area {
    margin: 30px auto;
    padding: 30px;
    border: 1px solid #ccc;
    text-align: center;

    p {
        margin-bottom: 20px;
    }
}

/* ==============================================
▼会員登録
=============================================== */
#undercolumn_entry {
    width: 100%;

    .kiyaku_text {
        margin: 20px auto;
        padding: 10px;
        border: solid 1px #ccc;
        width: 94%;
        background: #fff;
    }

    .message {
        margin-bottom: 20px;
        line-height: 150%;
        font-weight: bold;
        font-size: 120%;
    }
}

/* ==============================================
▼ログイン
=============================================== */
#undercolumn_login {
    margin: 0 auto;
    width: 100%;

    .login_area {
        margin-bottom: 30px;

        .inputbox {
            margin: 15px auto 15px auto;
            padding: 15px 20px 10px 20px;
            background: #f0f0f0;

            .btn_area {
                margin-top: 0;
            }
        }
    }
}

/* ==============================================
▼エラー
=============================================== */
#undercolumn_error {
    .message_area {
        width: 80%;
        margin: 30px auto;
        padding: 30px;
        border: 1px solid #ccc;
        text-align: center;

        .error {
            padding: 120px 0;
        }
    }
}

/* ==============================================
▼商品一覧
=============================================== */
/* ページ送り
----------------------------------------------- */
.pagenumber_area {
    padding-bottom: 10px;
    background: url("img/background/line_dot_01.gif") repeat-x bottom;
}

.pagecond_area {
    margin-bottom: 20px;
    padding: 10px;
}

.pagenumber_area {
    margin: 20px 0;
}

.pagecond_area {
    border: 1px solid #ccc;
}

.pagenumber_area {
    .navi {
        width: 100%;
        text-align: center;
        margin: 16px auto;

        li {
            display: inline;
        }
    }

    .change {
        text-align: right;
        white-space: nowrap;
    }
}

/* レイアウト
----------------------------------------------- */
div.list_area {
    padding: 0 0 30px 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

div.listphoto {
    float: left;
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8f8f8;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
}

div.listphoto a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

div.listphoto img.picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* メインカラム用 */
#main_column {
    /* 1カラム時 */
    &.colnum1 .listrightbloc {
        width: 74%;
    }

    /* 2カラム時*/
    &.colnum2 .listrightbloc {
        width: 80%;
    }

    /* 3カラム時*/
    &.colnum3 .listrightbloc {
        width: 74%;
    }
}

/* 商品情報 各種設定
----------------------------------------------- */
.listrightbloc {
    flex: 1 1 auto;
    min-width: 0;
    /* 商品ステータス */
    ul.status_icon {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        li {
            display: inline-block;
            padding: 3px 10px 4px;
            border: 1px solid #b7b7b7;
            border-radius: 999px;
            background: #e8e8e8;
            color: #333;
            font-size: 11px;
            font-weight: bold;
            line-height: 1.2;
            white-space: nowrap;
            margin-right: 5px;
        }
    }

    ul.status_icon li.status-icon--1 {
        border-color: #d67b39;
        background: #f5974a;
        color: #fff;
        text-shadow: 0 -1px 0 rgb(122 58 18 / 35%);
    }

    ul.status_icon li.status-icon--2 {
        border-color: #7a2f6e;
        background: #913982;
        color: #fff;
        text-shadow: 0 -1px 0 rgb(70 24 63 / 35%);
    }

    ul.status_icon li.status-icon--3 {
        border-color: #2f73ac;
        background: #388dd1;
        color: #fff;
        text-shadow: 0 -1px 0 rgb(23 66 101 / 35%);
    }

    ul.status_icon li.status-icon--4 {
        border-color: #6f9c1d;
        background: #80af20;
        color: #fff;
        text-shadow: 0 -1px 0 rgb(60 90 10 / 35%);
    }

    ul.status_icon li.status-icon--5 {
        border-color: #e34f77;
        background: #ff5983;
        color: #fff;
        text-shadow: 0 -1px 0 rgb(137 33 65 / 35%);
    }

    /* 商品名 */
    h3 {
        font-weight: bold;
        font-size: 120%;
    }

    /* コメント */
    .listcomment {
        margin: 0 0 10px 0;
        text-align: left;
    }

    /* 商品詳細を見る */
    .detail_btn {
        margin-bottom: 20px;
    }

    /* 価格 */
    .pricebox {
        margin: 0 0 10px 0;
    }

    /* 買い物カゴ */
    .cart_area {
        padding: 10px;
        border: 1px solid #cef0f4;
        background-color: #ecf5ff;
        width: 94%;
    }

    /* 規格 */
    .classlist {
        margin-bottom: 10px;
        padding-bottom: 10px;
        background: url("img/background/line_dot_02.gif") repeat-x bottom;
    }

    dl {
        width: 100%;
    }

    dt {
        display: inline-block;
        vertical-align: top;
    }

    dd {
        padding-bottom: 10px;
        display: inline-block;

        p.attention {
            margin-top: 5px;
        }
    }

    /* カゴに入れる */
    .cartin {
        margin: 0;
        display: flex;
        justify-content: space-between;

        .quantity {
            padding: 3px 10px 0 0;
            width: 150px;
            text-align: right;
            display: flex;
            justify-content: flex-start;
            width: 40%;
            padding: 0 4% 0 0;

            .box {
                width: 70px;
            }
        }
    }

    .cartin_btn {
        width: 160px;
    }
}

/* ==============================================
▼商品詳細
=============================================== */
/* レイアウト

    tplファイルのマークアップが同じ項目
        * 1カラム時
        * 2カラム時
        * 3カラム時

----------------------------------------------- */
#detailarea,
.sub_area {
    margin-bottom: 20px;
    width: 100%;
}

/* レイアウト
----------------------------------------------- */
#detailarea {
    display: flex;
    justify-content: space-between;
}

#detailphotobloc {
    margin-right: 16px;
}

#main_column {
    h3 {
        flex-grow: 1;
        box-sizing: border-box;
    }

    /* FIXME: .subtext を要素 (p または div) で分けている。もっと分かりやすくする。 */
    div {
        &.subtext,
        &.subphotoimg {
            flex-grow: 2;
            box-sizing: border-box;
        }
    }

    /* 1カラム用 */
    &.colnum1 {
        #detailphotobloc {
            width: 37%;
        }

        #detailrightbloc {
            width: 63%;
        }

        div {
            &.subtext {
                margin-bottom: 20px;
                width: 69%;
            }

            &.subphotoimg {
                width: 25%;
                text-align: right;
            }
        }

        p.subtext {
            margin-bottom: 20px;
        }
    }

    /* 2カラム用 */
    &.colnum2 {
        #detailphotobloc {
            width: 37%;
        }

        #detailrightbloc {
            width: 63%;
        }

        h3 {
            width: 100%;
        }

        div.subtext {
            margin-bottom: 20px;
            width: 73%;
        }

        p.subtext {
            margin-bottom: 20px;
        }

        div.subphotoimg {
            width: 25%;
            text-align: right;
        }
    }

    /* 3カラム用 */
    &.colnum3 {
        #detailphotobloc {
            width: 49%;
        }

        #detailrightbloc {
            width: 50%;
        }

        div.subtext {
            margin-bottom: 20px;
            width: 63%;
        }

        p.subtext {
            margin-bottom: 20px;
        }

        div.subphotoimg {
            width: 35%;
            text-align: right;
        }
    }
}

/* 商品情報 各種設定
----------------------------------------------- */
#detailrightbloc {
    h2 {
        margin: 0 0 10px 0;
        padding: 0 0 15px 0;
        color: #666;
        background: url("img/background/line_dot_01.gif") repeat-x bottom;
        font-weight: bold;
        font-size: 160%;
    }

    .point,
    .relative_cat {
        margin: 0 0 10px 0;
        padding: 0 0 10px 0;
        background: url("img/background/line_dot_01.gif") repeat-x bottom;
    }

    .main_comment {
        margin-bottom: 20px;
    }

    /* 商品コード */
    .product_code {
        margin: 0 0 10px;
        color: #444;
        font-size: 135%;
        font-weight: 500;
        line-height: 1.45;

        dt,
        dd {
            display: inline;
        }
    }

    .iri,
    .stock_status {

        dt,
        dd {
            display: inline;
        }
    }

    /* 商品ステータス */
    ul.status_icon {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        li {
            display: inline-block;
            padding: 3px 10px 4px;
            border: 1px solid #b7b7b7;
            border-radius: 999px;
            background: #e8e8e8;
            color: #333;
            font-size: 11px;
            font-weight: bold;
            line-height: 1.2;
            white-space: nowrap;
            margin-right: 5px;
            margin-bottom: 3px;
        }
    }

    ul.status_icon li.status-icon--1 {
        border-color: #d67b39;
        background: #f5974a;
        color: #fff;
        text-shadow: 0 -1px 0 rgb(122 58 18 / 35%);
    }

    ul.status_icon li.status-icon--2 {
        border-color: #7a2f6e;
        background: #913982;
        color: #fff;
        text-shadow: 0 -1px 0 rgb(70 24 63 / 35%);
    }

    ul.status_icon li.status-icon--3 {
        border-color: #2f73ac;
        background: #388dd1;
        color: #fff;
        text-shadow: 0 -1px 0 rgb(23 66 101 / 35%);
    }

    ul.status_icon li.status-icon--4 {
        border-color: #6f9c1d;
        background: #80af20;
        color: #fff;
        text-shadow: 0 -1px 0 rgb(60 90 10 / 35%);
    }

    ul.status_icon li.status-icon--5 {
        border-color: #e34f77;
        background: #ff5983;
        color: #fff;
        text-shadow: 0 -1px 0 rgb(137 33 65 / 35%);
    }

    /* 通常価格 */
    .normal_price {

        dt,
        dd {
            display: inline;
        }
    }

    /* 販売価格 */
    .sale_price {

        dt,
        dd {
            display: inline;
        }
    }

    /* ポイント */
    .point {

        dt,
        dd {
            display: inline;
        }
    }

    /* 規格 */
    div.classlist {
        margin-bottom: 10px;
        padding-bottom: 10px;
        width: 100%;
        background: url("img/background/line_dot_02.gif") repeat-x bottom;
    }

    .classlist {
        margin-bottom: 5px;
    }

    ul {
        margin-bottom: 10px;
        width: 100%;

        li {
            vertical-align: top;
        }
    }

    /* メーカー */
    .maker {

        dt,
        dd {
            display: inline;
        }
    }

    /* メーカーURL */
    .comment1 {

        dt,
        dd {
            display: inline;
        }
    }

    /* 関連カテゴリ */
    .relative_cat dd {
        margin-left: 1em;
    }

    /* 買い物カゴ */
    .cart_area {
        padding: 10px;
        background-color: #ecf5ff;
        border: 1px solid #cef0f4;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .quantity {
            display: flex;
            justify-content: flex-start;
            padding-top: 4px;
            width: 50%;
        }
    }

    .quantity {

        dt,
        dd {
            display: inline;
        }
    }

    .cartin {
        text-align: center;
        width: 50%;
    }

    .cartin_btn {
        text-align: right;
    }

    .favorite_btn {
        text-align: right;
        margin-top: 10px;
        width: 100%;
    }
}

.LC_Page_Products_Detail {
    .sub_area {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

/* お客様の声
----------------------------------------------- */
#customervoice_area {
    clear: both;
    padding: 35px 0 0 0;

    h2 {
        margin-bottom: 20px;
        padding: 6px 0 8px 10px;
        font-size: 14px;
    }

    h2.ec-bloc-title,
    h2.ec-bloc-title .title {
        color: #666;
        font-weight: bold;
    }

    .review_bloc {
        margin-bottom: 20px;
        padding: 10px;
        background-color: #f6f6f6;

        p {
            padding-top: 3px;
            margin-right: 10px;
        }

        .review_btn {
            margin: 0 0 0 auto;
            width: 160px;
        }
    }

    ul li {
        padding-bottom: 15px;
        margin-bottom: 15px;
        background: url("img/background/line_dot_01.gif") repeat-x bottom;
    }

    .voicetitle {
        margin-bottom: 5px;
        color: #333;
        font-weight: bold;
    }

    .voicedate {
        margin-bottom: 10px;
    }
}

/* 関連商品（商品部分はbloc.cssのおすすめ商品と共通）
----------------------------------------------- */
#whobought_area {
        clear: both;
        padding: 35px 0 0 0;

        h2 {
            padding: 5px 0 8px 10px;
            font-size: 14px;
        }
    }


/* ***********************************************
▼カートの中
/*********************************************** */
/* 現在のカゴの中
----------------------------------------------- */
#undercolumn_cart {
    .point_announce {
        padding: 20px;
        margin-bottom: 20px;
        border: solid 1px #ccc;
        background: #eee;
        font-size: 120%;
        text-align: center;
        line-height: 140%;
    }

    .totalmoney_area {
        margin-bottom: 20px;
    }

    p {
        margin: 10px 5px;
    }
}

#undercolumn {
    ul#quantity_level li {
        padding: 3px;
        display: inline;
    }

    .empty {
        text-align: left;
    }
}

#undercolumn_cart .cart-details {
    margin: 14px 0 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#undercolumn_cart .cart-details-header,
#undercolumn_cart .cart-item {
    display: grid;
    grid-template-columns: 8% 14% 35% 13% 14% 16%;
    align-items: center;
}

#undercolumn_cart .cart-details-header {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

#undercolumn_cart .cart-details-header > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: center;
}

#undercolumn_cart .cart-details-header > div:last-child {
    border-right: none;
}

#undercolumn_cart .cart-item {
    border-bottom: 1px solid #ccc;
}

#undercolumn_cart .cart-item.is-error {
    background-color: #fff4d8;
}

#undercolumn_cart .cart-item > div {
    min-height: 100%;
    padding: 8px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
}

#undercolumn_cart .cart-item > div:last-child {
    border-right: none;
}

#undercolumn_cart .cart-item .cart-cell-name {
    text-align: left;
    line-height: 1.45;
    word-break: break-word;
}

#undercolumn_cart .cart-item .cart-cell-price,
#undercolumn_cart .cart-item .cart-cell-subtotal {
    text-align: right;
}

#undercolumn_cart .cart-item .cart-cell-delete a {
    color: #d14a22;
    font-weight: bold;
    text-decoration: none;
}

#undercolumn_cart .cart-item .cart-cell-delete a:hover {
    text-decoration: underline;
}

#undercolumn_cart .cart-item .cart-cell-image img {
    max-width: 65px;
    max-height: 65px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

#undercolumn_cart .cart-item .cart-cell-quantity #quantity_level {
    display: inline-flex;
    gap: 4px;
    margin-left: 6px;
}

#undercolumn_cart .cart-item .cart-cell-quantity .cart-quantity-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#undercolumn_cart .cart-item .cart-cell-quantity .cart-quantity-value {
    display: inline-block;
}

#undercolumn_cart .cart-item .cart-cell-quantity .cart-quantity-rule {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: #666;
}

#undercolumn_cart .cart-item .cart-cell-quantity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

#undercolumn_cart .cart-summary {
    background: #fafafa;
}

#undercolumn_cart .cart-summary-row {
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #ddd;
}

#undercolumn_cart .cart-summary-row:last-child {
    border-bottom: none;
}

#undercolumn_cart .cart-summary-label,
#undercolumn_cart .cart-summary-value {
    padding: 8px 10px;
    box-sizing: border-box;
}

#undercolumn_cart .cart-summary-label {
    width: calc(100% - 170px);
    text-align: right;
    font-weight: bold;
}

#undercolumn_cart .cart-summary-value {
    width: 170px;
    text-align: right;
}

div.form_area {
    margin-bottom: 30px;
}

/* お客様情報入力
----------------------------------------------- */
.flow_area {
    margin: 0 0 20px 0;
}

.checkout-flow {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.checkout-flow__step {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: linear-gradient(#f8f8f8, #ededed);
    color: #666;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}

.checkout-flow__step.is-current {
    border-color: #777;
    background: #777;
    color: #fff;
}

#undercolumn_customer th em {
    color: #000;
    font-weight: bold;
}

/* お支払い方法・お届け時間等の指定
----------------------------------------------- */
#undercolumn_shopping {
    .pay_area {
        margin: 0 auto 30px;
        width: 100%;
    }

    .pay_area02 {
        margin: 40px auto 30px auto;

        .txtarea {
            margin: 5px 0 0 0;
            padding: 2px;
            border: 1px solid #ccc;
            width: 99%;
            height: 150px;
        }

        .select-msg {
            margin-bottom: 10px;
        }
    }

    .point_area {
        margin: 40px auto 0 auto;

        .point_announce {
            padding: 20px;
            border: 1px solid #ccc;
        }

        p {
            margin-bottom: 20px;
        }

        .point_announce li {
            margin-bottom: 5px;
        }
    }
}

/* お届け先の指定
----------------------------------------------- */
#address_area {
    margin-bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .information {
        width: 65%;
    }
}

#undercolumn_shopping .information {
    margin-bottom: 15px;
}

#address_area {
    .add_multiple {
        padding: 15px 10px;
        border: 1px solid #ffcc62;
        width: 30%;
        color: #555;
        background: #fffaf0;
        text-align: center;
        font-weight: bold;

        p {
            margin-bottom: 10px;
        }
    }

    p.addbtn {
        font-weight: bold;
        font-size: 10px;
    }
}

#undercolumn_shopping .deliv-list {
    margin: 15px auto 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#undercolumn_shopping .deliv-list-header,
#undercolumn_shopping .deliv-item {
    display: grid;
    grid-template-columns: 10% 20% 50% 10% 10%;
    align-items: center;
}

#undercolumn_shopping .deliv-list-header {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

#undercolumn_shopping .deliv-list-header > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}

#undercolumn_shopping .deliv-list-header > div:last-child {
    border-right: none;
}

#undercolumn_shopping .deliv-item {
    border-bottom: 1px solid #ccc;
}

#undercolumn_shopping .deliv-item:last-child {
    border-bottom: none;
}

#undercolumn_shopping .deliv-item > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
}

#undercolumn_shopping .deliv-item > div:last-child {
    border-right: none;
}

#undercolumn_shopping .deliv-cell-address {
    text-align: left !important;
    line-height: 1.5;
    word-break: break-word;
}

#undercolumn_shopping .deliv-cell-edit a,
#undercolumn_shopping .deliv-cell-delete a {
    color: #d14a22;
    font-weight: bold;
    text-decoration: none;
}

#undercolumn_shopping .deliv-cell-edit a:hover,
#undercolumn_shopping .deliv-cell-delete a:hover {
    text-decoration: underline;
}

#undercolumn_shopping .pay-select-list {
    margin: 15px auto 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#undercolumn_shopping .pay-select-header,
#undercolumn_shopping .pay-select-item {
    display: grid;
    grid-template-columns: 20% 80%;
    align-items: center;
}

#undercolumn_shopping .payment-select-list .pay-select-header,
#undercolumn_shopping .payment-select-list .pay-select-item {
    grid-template-columns: 20% 60% 20%;
}

#undercolumn_shopping .pay-select-header {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

#undercolumn_shopping .pay-select-header > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}

#undercolumn_shopping .pay-select-header > div:last-child {
    border-right: none;
}

#undercolumn_shopping .pay-select-item {
    border-bottom: 1px solid #ccc;
}

#undercolumn_shopping .pay-select-item:last-child {
    border-bottom: none;
}

#undercolumn_shopping .pay-select-item > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
}

#undercolumn_shopping .pay-select-item > div:last-child {
    border-right: none;
}

#undercolumn_shopping .pay-select-radio {
    text-align: center;
}

#undercolumn_shopping .pay-select-name label {
    display: block;
}

#undercolumn_shopping .pay-select-name p {
    margin: 6px 0 0;
}

#undercolumn_shopping .pay-select-image {
    text-align: center;
}

#undercolumn_shopping .pay-select-image img {
    max-width: 90px;
    height: auto;
}

#undercolumn_shopping .confirm-items {
    margin: 15px auto 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#undercolumn_shopping .confirm-items-header,
#undercolumn_shopping .confirm-item-row {
    display: grid;
    grid-template-columns: 10% 40% 20% 10% 20%;
    align-items: center;
}

#undercolumn_shopping .confirm-items-header--shipping,
#undercolumn_shopping .confirm-item-row--shipping {
    grid-template-columns: 10% 60% 10% 20%;
}

#undercolumn_shopping .confirm-items-header {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

#undercolumn_shopping .confirm-items-header > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}

#undercolumn_shopping .confirm-items-header > div:last-child {
    border-right: none;
}

#undercolumn_shopping .confirm-item-row {
    border-bottom: 1px solid #ccc;
}

#undercolumn_shopping .confirm-item-row > div {
    padding: 8px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
}

#undercolumn_shopping .confirm-item-row > div:last-child {
    border-right: none;
}

#undercolumn_shopping .confirm-cell-image {
    text-align: center;
}

#undercolumn_shopping .confirm-cell-name {
    word-break: break-word;
}

#undercolumn_shopping .confirm-cell-price,
#undercolumn_shopping .confirm-cell-qty,
#undercolumn_shopping .confirm-cell-subtotal {
    text-align: right;
}

#undercolumn_shopping .confirm-qty-rule {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #666;
}

#undercolumn_shopping .confirm-summary {
    background: #fafafa;
}

#undercolumn_shopping .confirm-summary-row {
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #ddd;
}

#undercolumn_shopping .confirm-summary-row:last-child {
    border-bottom: none;
}

#undercolumn_shopping .confirm-summary-label,
#undercolumn_shopping .confirm-summary-value {
    padding: 8px 10px;
    box-sizing: border-box;
}

#undercolumn_shopping .confirm-summary-label {
    width: calc(100% - 190px);
    text-align: right;
    font-weight: bold;
}

#undercolumn_shopping .confirm-summary-value {
    width: 190px;
    text-align: right;
}

#undercolumn_shopping .confirm-kv-list {
    margin: 15px auto 20px;
    border: 1px solid #ccc;
    border-top: none;
}

#undercolumn_shopping .confirm-kv-row {
    display: grid;
    grid-template-columns: 30% 70%;
    border-top: 1px solid #ccc;
}

#undercolumn_shopping .confirm-kv-label,
#undercolumn_shopping .confirm-kv-value {
    padding: 8px;
    box-sizing: border-box;
}

#undercolumn_shopping .confirm-kv-label {
    border-right: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
}

/* ==============================================
▼検索結果
=============================================== */

p.condition_area {
    margin: 0 auto;
    padding: 5px;
    border: solid 1px #333;
    width: 566px;
}

/************************************************
 tables
************************************************ */
/* デフォルトテーブル
----------------------------------------------- */
table {
    margin: 15px auto 20px auto;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    width: 100%;
    border-collapse: collapse;
    text-align: left;

    th {
        padding: 8px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        color: #333;
        background-color: #f0f0f0;
        font-weight: normal;
    }

    td {
        padding: 8px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
}

/* 見出し
----------------------------------------------- */
#undercolumn_shopping table {
    th[scope=col] {
        text-align: center;
    }

    &.delivname th {
        width: 155px;
    }
}

/* MYページ */

#mycontents_area table {
    th {
        text-align: left;

        &.alignR {
            text-align: right;
        }

        &.alignL {
            text-align: left;
        }

        &.alignC {
            text-align: center;
        }

        &.resulttd {
            text-align: right;
        }
    }

    caption {
        padding: 8px;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
        color: #000;
        background-color: #f0f0f0;
        text-align: left;
        font-weight: bold;
    }
}

/* その他
----------------------------------------------- */
table select {
    margin-bottom: 7px;
    border: solid 1px #ccc;
}

/************************************************
 ブロック用
************************************************ */
/*** 目次 ***

▼ブロック共通
リスト
タイトル
ヘッダー上、フッター下のブロックエリア

▼各機能ブロックの指定
-新着情報
-現在のカゴの中
-カテゴリ
-ガイドリンク
-ログイン（サイド用）
-検索
-カレンダー
-おすすめ商品
    * 商品詳細のオススメ商品   [whobought_area]
*/

/* ==============================================
ブロック共通
    * #container から指定することで、ヘッダー・フッターには適用していない。
/* ============================================= */

.side_column {
    overflow-x: hidden;

    /* IE6 表示乱れ防止 */
}

#main_column .block_body {
    border: solid 1px #eee;
    border-top: none;
}

.side_column .block_body .box {
    border: solid 1px #ccc;
    width: 145px;
}

/* 外枠
----------------------------------------------- */
#container {
    .block_outer {
        /* #container の背景色を欠けさせないため敢えて padding */
        padding: 0 15px 10px;
    }

    #main_column .block_outer {
        padding: 0 0 20px;
    }

    .side_column .block_outer {
        padding: 0 7% 10px;
    }
}

/* リスト
----------------------------------------------- */
/* ログイン 検索条件 */
.block_outer .block_body dl.formlist {
    margin-bottom: 8px;

    dd {
        margin-bottom: 5px;
    }

    dt {
        margin-bottom: 3px;
        padding-left: 15px;
        background: url("img/icon/ico_arrow_03.gif") no-repeat left;
        font-size: 90%;
    }

    span {
        vertical-align: top;
    }
}


/* タイトル
----------------------------------------------- */
h2 {
    /* タイトルの背景 白 */

    #login_area &,
    #search_area &,
    #calender_area &,
    #cart_area &,
    #cart & {
        padding: 5px 0 8px 10px;
        font-size: 14px;
    }

    #category_area & {
        background: transparent;
        padding: 5px 0 8px 10px;
        font-size: 14px;
    }

    /* タイトルの背景 オレンジ */

    #recommend_area &,
    #news_area & {
        padding: 5px 0 8px 10px;
        background: #EEEEEE;
    }
}

.ec-bloc-title {
    color: #666;
    font-weight: bold;
    letter-spacing: 0.04em;

    .title {
        display: inline-block;
    }
}

/* ***********************************************
▼各機能ブロックの指定
/*********************************************** */

/* ===============================================
▼新着情報
=============================================== */
#news_area {
    .news_contents {
        padding: 10px;
        max-height: 260px;
        height: auto !important;

        /* hack? */
        height: 260px;

        /* hack? */
        overflow: auto;
        overflow-y: scroll;
    }

    dl.newslist {
        background: url("img/background/line_dot_01.gif") repeat-x bottom;

        &:last-child {
            background: none;
        }

        dt {
            margin-bottom: 5px;
        }

        dd {
            margin-bottom: 10px;
            padding-bottom: 10px;
        }
    }
}

/* ===============================================
▼現在のカゴの中
=============================================== */

#cart_area {
    border: solid 1px #ccc;

    .information {
        padding: 10px;
    }

    .postage {
        margin-top: 10px;
        padding-top: 10px;
        background: url("img/background/line_dot_01.gif") repeat-x top;

        .point_announce {
            padding: 2px 0 2px 20px;
            background: url("img/icon/ico_price.gif") no-repeat left top;
        }
    }

    .btn {
        padding: 10px;
    }
}

/* ===============================================
▼カテゴリ
=============================================== */

#container #category_area .block_body {
}

#category_area {
    border: solid 1px #ccc;
}

#category_area li {
    padding-left: 5px;

    &.level1 {
        p {
            padding-left: 20px;
            margin: 7px 3px;
            background: url("img/icon/ico_arrow_01.gif") 2px 3px no-repeat;
        }

        li p {
            background: url("img/icon/ico_level.gif") 7px 7px no-repeat;
        }
    }

    a {
        display: block;
        padding: 0;
    }
}

a.onlink {
    &:link {
        color: #f00;
        text-decoration: underline;
    }

    &:visited,
    &:hover {
        color: #f00;
    }
}

/* ===============================================
▼ガイドリンク
=============================================== */

#guide_area {
    border: none;

    li {
        margin-bottom: 5px;
        letter-spacing: -0.05em;
    }
}

ul.button_like li {
    margin: 0;
    padding: 0 0 1px 0;

    a {
        margin: 0;
        padding: 10px 15px 10px 10px;
        border: 1px solid #ccc;
        display: block;
        background: url("img/icon/ico_arrow_02.gif") no-repeat right;
        text-decoration: none;
        outline: none;
    }
}

/* ===============================================
▼ログイン（サイド用）
※ヘッダー用はbloc_alpha.css内に記述
=============================================== */

#container {
    #login_area {
        border: solid 1px #ccc;
    }

    #login_area .block_body {
        padding: 10px;

        p {
            margin-bottom: 5px;
        }

        .btn {
            text-align: center;

            .ec-block-btn {
                width: 88%;
                max-width: 180px;
            }
        }
    }

    .login_area dl.formlist {
        margin-bottom: 8px;
        width: 450px;

        dt {
            margin-bottom: 3px;
            padding-left: 15px;
            color: #333;
            background: url("img/icon/ico_arrow_03.gif") no-repeat left;
            width: 120px;
            float: left;
            font-size: 90%;
        }

        dd {
            margin-bottom: 5px;
            float: right;
            width: 300px;
            vertical-align: bottom;
            text-align: left;
        }
    }

    #login_area .block_body .mini {
        margin-top: 5px;
        letter-spacing: -0.01em;
    }

    /* ===============================================
    ▼検索
    =============================================== */

    #search_area {
        border: solid 1px #ccc;
    }

    #search_area .block_body {
        padding: 10px;

        .btn {
            text-align: center;

            .ec-block-btn {
                width: 88%;
                max-width: 180px;
            }
        }
    }
}

/* ===============================================
▼カレンダー
=============================================== */

#calender_area {
    background-color: transparent;
    border: solid 1px #ccc;

    .block_body {
        padding: 10px 0;
        background-color: #f1f9fc;
    }

    table {
        background: #fff;
        border: none;
        width: 150px;
        margin: 0 auto 5px;
        font-size: 90%;

        td {
            padding: 1px 3px;
            border-top: 1px solid #ccc;
            border-right: none;
            text-align: center;
        }
    }

    th {
        padding: 1px 3px;
        background: #fff;
        border: none;
        text-align: center;
    }

    table .month {
        margin-bottom: 5px;
        padding-left: 12px;
        background: url("img/icon/ico_arrow_04.gif") no-repeat left;
        font-size: 120%;
    }

    .off {
        color: #f00;
    }

    .today {
        background-color: #FFF99D;
        font-weight: bold;
    }

    .information {
        margin-left: 10px;
        font-size: 90%;
    }
}

/* ===============================================
▼おすすめ商品
=============================================== */
/*
   tplファイルのマークアップが同じ項目
   メインカラム用
   サイドカラム用           [side_column]
   商品詳細のオススメ商品   [whobought_area]
=============================================== */
/* 共通
----------------------------------------------- */
#recommend_area .block_body,
#whobought_area .product_item {
    padding: 10px 0 10px;
    border: none;
    background: url("img/background/line_dot_01.gif") repeat-x bottom;
}

#recommend_area .block_body p,
#whobought_area .product_item p {
    margin: 0 0 5px 0;
}

#recommend_area .block_body img,
#whobought_area .product_item img {
    margin: 0 5px 0 0;
}

#recommend_area .block_body h3,
#whobought_area .product_item h3 {
    font-size: 100%;
    font-weight: normal;
}

/* サイドカラム用 */

.side_column #recommend_area .product_item {
    margin-bottom: 10px;
}

/* 画像
----------------------------------------------- */
/* メインカラム用 */

#main_column #recommend_area .block_body .productImage,
#whobought_area .product_item .productImage {
    margin-bottom: 10px;
    float: left;
    width: 90px;
}

/* サイドカラム用 */

.side_column #recommend_area .block_body .productImage {
    float: none;
    text-align: center;
    width: auto;
}

/* 左右の振り分け
----------------------------------------------- */
#main_column #recommend_area .product_item,
#whobought_area .product_item {
    float: left;
    width: 47.5%;
    padding-left: 1%;
    padding-right: 1%;
}

/* 商品説明テキスト
----------------------------------------------- */
/* メインカラム */

#main_column {

    /* 1カラム時 */
    &.colnum1 #recommend_area .block_body .productContents {
        float: right;
        width: 74%;
    }

    /* 2カラム時*/
    &.colnum2 {
        #recommend_area .block_body .productContents,
        #whobought_area .productContents {
            float: right;
            width: 74%;
        }
    }

    /* 3カラム時*/
    &.colnum3 {
        #recommend_area .block_body .productContents,
        #whobought_area .productContents {
            float: right;
            width: 67%;
        }
    }
}

/* サイドカラム用 */
.side_column #recommend_area .block_body .productContents {
    clear: both;
}

/************************************************
 インヘッダーブロック
************************************************ */

#headerInternalColumn {
    margin-top: 5px;
    float: right;
    width: 100%;
    max-width: 520px;
    height: auto;
}

/* ログイン（ヘッダー用）
----------------------------------------------- */
#header_login_area {
    padding: 8px 10px;
    border: solid 1px #ccc;
    background: #f5f5f5;
    letter-spacing: normal;
    box-sizing: border-box;

    ul.formlist {
        margin-top: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;

        li {
            float: none;

            &.mail {
                padding-left: 28px;
                width: 170px;
                background: url("img/common/ico_arrow_login.gif") no-repeat left;
                font-size: 90%;
            }

            &.password {
                padding-right: 0;
            }

            &.login_memory {
                padding-right: 0;
                font-size: 90%;
            }

            &.forgot {
                margin-top: 0;
                padding-right: 0;
                font-size: 90%;
            }

            &.btn {
                padding-right: 0;
                width: auto;
            }
        }
    }

    p.btn {
        padding: 0;
        vertical-align: middle;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;

        input[type=image] {
            vertical-align: middle;
        }
    }
}

#header_login_area .block_body {
    padding: 0;
}

#header_login_area input.box150 {
    width: 100%;
    max-width: 170px;
    box-sizing: border-box;
}

#header_login_area input.box100 {
    width: 110px;
    max-width: 110px;
    box-sizing: border-box;
}

#header_login_area .login_memory label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#header_login_area .forgot a {
    white-space: nowrap;
}

.ec-header-auth-btn {
    display: inline-block;
    min-width: 66px;
    padding: 4px 10px;
    border: 1px solid #666;
    border-radius: 4px;
    background: #666;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

.ec-header-auth-btn:hover {
    background: #777;
    color: #fff;
    text-decoration: none;
}

a.ec-header-auth-btn:link,
a.ec-header-auth-btn:visited,
a.ec-header-auth-btn:hover,
a.ec-header-auth-btn:active {
    color: #fff !important;
}

#undercolumn_shopping p.addbtn a.ec-action-btn--add-address:link,
#undercolumn_shopping p.addbtn a.ec-action-btn--add-address:visited,
#undercolumn_shopping p.addbtn a.ec-action-btn--add-address:hover,
#undercolumn_shopping p.addbtn a.ec-action-btn--add-address:active,
#mypagecolumn .add_address a.ec-action-btn--add-address:link,
#mypagecolumn .add_address a.ec-action-btn--add-address:visited,
#mypagecolumn .add_address a.ec-action-btn--add-address:hover,
#mypagecolumn .add_address a.ec-action-btn--add-address:active {
    color: #fff !important;
}

a.ec-action-btn,
a.ec-block-btn,
a.ec-rss-btn,
a.ec-header-auth-btn,
a.nav_btn {
    color: #fff !important;
}

a.ec-action-btn:link,
a.ec-action-btn:visited,
a.ec-action-btn:hover,
a.ec-action-btn:active,
a.ec-block-btn:link,
a.ec-block-btn:visited,
a.ec-block-btn:hover,
a.ec-block-btn:active,
a.ec-rss-btn:link,
a.ec-rss-btn:visited,
a.ec-rss-btn:hover,
a.ec-rss-btn:active,
a.ec-header-auth-btn:link,
a.ec-header-auth-btn:visited,
a.ec-header-auth-btn:hover,
a.ec-header-auth-btn:active,
a.nav_btn:link,
a.nav_btn:visited,
a.nav_btn:hover,
a.nav_btn:active {
    color: #fff !important;
}

/* ***********************************************
追加ブロック
************************************************ */
/* 共通
----------------------------------------------- */
#container .block_outer #banner_area .block_body {
    border: none;
}

/* 【メイン】バナーエリア_02
----------------------------------------------- */
#main_column .block_outer #banner_area .block_body ul {
    width: 100%;

    li {
        float: left;

        &.sub_01 {
            padding-right: 8px;
        }
    }
}

/* 【サイド】バナーエリア_01
----------------------------------------------- */
/* 【サイド】バナーエリア_02
----------------------------------------------- */
#leftcolumn .block_outer #banner_area .block_body ul li,
#rightcolumn .block_outer #banner_area .block_body ul li {
    margin-bottom: 8px;
}

/************************************************
 ポップアップウィンドウ
************************************************ */
/* 共通
----------------------------------------------- */
#windowcolumn {
    width: 560px;
    height: 100%;
    margin: 15px 15px 0 15px;
    background: #fff;

    h2 {
        margin-bottom: 10px;
        padding: 8px;
        border-bottom: solid 1px #ccc;
        color: #333;
        font-size: 170%;
    }
}

#window_area {
    margin: 15px auto 0 auto;
    padding-bottom: 20px;
    width: 540px;
    min-height: 300px;
    height: auto !important;

    p.information {
        margin-bottom: 20px;
    }

    .message {
        margin-bottom: 20px;
        color: #f60;
        line-height: 150%;
        font-weight: bold;
        font-size: 140%;
    }

    table {
        width: 540px;
    }

    /* お客様の声の書き込み、新しいお届け先の追加・変更
    ----------------------------------------------- */
    #forgot {
        margin: 0 auto;
        padding: 20px;
        width: 440px;
        border: 1px solid #ccc;
        text-align: left;

        .mailaddres {
            margin-bottom: 10px;
        }

        p {
            text-align: center;
        }
    }
}


/* 商品詳細拡大写真、カート拡大写真
----------------------------------------------- */
#bigimage,
#cartimage {
    margin-top: 15px;
    background-color: #fff;
    text-align: center;
}

#bigimage img,
#cartimage img {
    padding: 10px;
    background-color: #fff;
}

/* 郵便番号検索
----------------------------------------------- */
#zipsearchcolumn {
    margin: 15px auto 0 auto;
    width: 460px;
    background-color: #fff;

    h2 {
        margin: 0 0 15px 0;
        width: 460px;
    }
}

#zipsearch_area {
    margin: 15px auto 0 auto;
    width: 460px;
}

#zipsearchcolumn .btn {
    margin: 15px 0 30px 0;
    text-align: center;
}

#zipsearch_area #completebox p {
    padding: 60px 5px;
    text-align: center;
}

/* ==============================================
▼スマートフォン
=============================================== */
@media screen and (width <= 768px) {
    #container {
        margin: 0 auto;
        padding: 0 0 30px;
        width: 100%;
        background: #fff;
        text-align: left;

        .side_column {
            .block_outer {
                padding: 0;
                margin: 8px auto;
            }
        }
    }

    #main_column_frame {
        padding: 0 4%;
    }

    #main_column {
        /* 1カラム時 */
        &.colnum1 {
            margin: 0 auto;
            width: 100%;
        }

        /* 2カラム時 */
        &.colnum2 {
            width: 100%;

            /* メイン部が左 */
            &.left {
                padding-left: 0;
            }

            /* メイン部が右 */
            &.right {
                padding-right: 0;
            }
        }

        /* 3カラム時 */
        &.colnum3 {
            padding-left: 0;
            width: 100%;
        }
    }

    .checkout-flow {
        flex-wrap: wrap;
        gap: 6px;
    }

    .checkout-flow__step {
        flex: 1 1 calc(50% - 6px);
    }

    .box40 {
        width: 18%;
    }

    .box60 {
        width: 24%;
    }

    .box100,
    .box120 {
        width: 32%;
    }

    .box140,
    .box145,
    .box150,
    .box240,
    .box300,
    .box320,
    .box350,
    .box380 {
        width: 96%;
    }

    input,
    textarea,
    select,
    button {
        max-width: 100%;
    }

    .side_column {
        padding-top: 0;

        &#leftcolumn {
            width: 100%;
        }
        
        &#rightcolumn {
            width: 100%;
        }
    }

    #footer_wrap,
    #footer,
    #copyright {
        width: 100%;
        padding-top: 0;
    }

    #headerInternalColumn {
        width: 100%;
        padding-top: 0;
        height: auto;
        max-height: 35px;
    }

    #header {
        display: block;
        width: 100%;
    }

    #header_utility {
        width: 100%;
    }

    #header_fontsize_control {
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 6px 0;
    }

    #logo_area {
        width: 100%;
        padding-left: 0;
    }

    #header_navi ul,
    #main_column #recommend_area .product_item,
    #whobought_area .product_item {
        width: 100%;
    }

    #calender_area {
        .block_body {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        table {
            width: 48%;
            flex-grow: 1;
            box-sizing: border-box;
            margin: 0 1%;
        }
    }

    #main_column.colnum2 .listrightbloc {
        width: 72%;
    }

    .listphoto {
        width: 24%;
        margin-right: 4%;
    }

    .listrightbloc {
        .detail_btn {
            text-align: right;
        }

        .cartin {
            width: 100%;

            .quantity .box {
                width: 40%;
            }
        }

        .cartin_btn {
            width: 60%;
        }
    }

    #main_column {

        &.colnum1 div.subtext,
        &.colnum2 div.subtext,
        &.colnum3 div.subtext,
        &.colnum1 div.subphotoimg,
        &.colnum2 div.subphotoimg,
        &.colnum3 div.subphotoimg {
            width: 100%;
        }
    }

    #detailarea,
    .sub_area {
        display: block;
    }

    #main_column div.subphotoimg img,
    #undercolumn_cart .form_area tbody td img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    #main_column {
        #detailphotobloc img {
            width: auto !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }

        &.colnum1 #detailphotobloc,
        &.colnum2 #detailphotobloc,
        &.colnum3 #detailphotobloc {
            width: 100%;
            text-align: center;
            margin-bottom: 16px;
        }

        &.colnum1 #detailrightbloc,
        &.colnum2 #detailrightbloc,
        &.colnum3 #detailrightbloc {
            width: 100%;
        }
    }

    #detailrightbloc .cart_area .quantity {
        dt {
            width: 40%;
            text-align: right;
        }

        .box60 {
            width: 60%;
        }
    }

    #customervoice_area .review_bloc .review_btn {
        margin: 8px auto;
    }

    #detailrightbloc .favorite_btn {
        margin: 8px auto 0;
    }

    #mynavi_area .mynavi_list li {
        width: 40%;
        margin-right: 0;
    }

    #undercolumn_cart .form_area tbody {

        th:nth-child(2),
        td:nth-child(2) {
            padding: 4px 0;
            width: 16%;
        }

        th:nth-child(3),
        td:nth-child(3) {
            width: 20%;
        }

        th:nth-child(4),
        td:nth-child(4) {
            width: 16%;
        }

        th:nth-child(5),
        td:nth-child(5) {
            width: 20%;
        }

        th:nth-child(6) {
            width: 16%;
        }

        td {
            &:nth-child(6) {
                width: 16%;
            }

            .box3 {
                width: 20%;
            }
        }
    }

    #undercolumn_cart .form_area {
        overflow-x: visible;
    }

    #undercolumn_cart .cart-details {
        border: none;
    }

    #undercolumn_cart .cart-details-header {
        display: none;
    }

    #undercolumn_cart .cart-item {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }

    #undercolumn_cart .cart-item > div {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        width: 100% !important;
        padding: 8px 10px;
        border-left: none;
        border-right: none;
        box-sizing: border-box;
        text-align: right;
    }

    #undercolumn_cart .cart-item > div::before {
        content: attr(data-label);
        font-weight: bold;
        color: #333;
        text-align: left;
        min-width: 6.2em;
        flex-shrink: 0;
    }

    #undercolumn_cart .cart-item .cart-cell-image img {
        max-width: 72px !important;
        max-height: 72px !important;
    }

    #undercolumn_cart .cart-item .cart-cell-image {
        align-items: center;
    }

    #undercolumn_cart .cart-item .cart-cell-name {
        text-align: left;
    }

    #undercolumn_cart .cart-item .cart-cell-name,
    #undercolumn_cart .cart-item .cart-cell-delete,
    #undercolumn_cart .cart-item .cart-cell-quantity {
        text-align: right;
    }

    #undercolumn_cart .cart-item .cart-cell-quantity #quantity_level {
        display: inline-flex;
        gap: 6px;
        margin-left: 0;
    }

    #undercolumn_cart .cart-item .cart-cell-quantity .cart-quantity-rule {
        text-align: right;
    }

    #undercolumn_cart .cart-summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
    }

    #undercolumn_cart .cart-summary-label,
    #undercolumn_cart .cart-summary-value {
        width: auto !important;
    }

    #undercolumn_cart .cart-summary-label {
        padding-left: 0;
    }

    #undercolumn_cart .btn_area ul {
        flex-direction: column;
        gap: 8px;
    }

    #undercolumn_cart .btn_area li {
        padding-right: 0;
    }

    #undercolumn_cart .btn_area .ec-action-btn {
        width: 100%;
    }

    #undercolumn_shopping .deliv-list {
        border: none;
        margin: 10px 0 16px;
    }

    #undercolumn_shopping .deliv-list-header {
        display: none;
    }

    #undercolumn_shopping .deliv-item {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }

    #undercolumn_shopping .deliv-item > div {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        width: 100% !important;
        padding: 8px 10px;
        border-left: none;
        border-right: none;
        box-sizing: border-box;
        text-align: right;
    }

    #undercolumn_shopping .deliv-item > div::before {
        content: attr(data-label);
        min-width: 5.8em;
        color: #333;
        font-weight: bold;
        text-align: left;
        flex-shrink: 0;
    }

    #undercolumn_shopping .deliv-cell-address {
        text-align: right !important;
    }

    #undercolumn_shopping .deliv-cell-address::before {
        align-self: flex-start;
    }

    #undercolumn_shopping .pay-select-list,
    #undercolumn_shopping .confirm-items {
        border: none;
        margin: 10px 0 16px;
    }

    #undercolumn_shopping .pay-select-header,
    #undercolumn_shopping .confirm-items-header {
        display: none;
    }

    #undercolumn_shopping .pay-select-item,
    #undercolumn_shopping .confirm-item-row {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }

    #undercolumn_shopping .pay-select-item > div,
    #undercolumn_shopping .confirm-item-row > div {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        width: 100% !important;
        padding: 8px 10px;
        border-left: none;
        border-right: none;
        box-sizing: border-box;
        text-align: right;
    }

    #undercolumn_shopping .pay-select-item > div::before,
    #undercolumn_shopping .confirm-item-row > div::before {
        content: attr(data-label);
        min-width: 6em;
        color: #333;
        font-weight: bold;
        text-align: left;
        flex-shrink: 0;
    }

    #undercolumn_shopping .pay-select-name,
    #undercolumn_shopping .confirm-cell-name,
    #undercolumn_shopping .confirm-kv-value {
        text-align: right !important;
    }

    #undercolumn_shopping .confirm-cell-image {
        align-items: center;
    }

    #undercolumn_shopping .confirm-summary-row {
        justify-content: space-between;
    }

    #undercolumn_shopping .confirm-summary-label,
    #undercolumn_shopping .confirm-summary-value {
        width: auto !important;
    }

    #undercolumn_shopping .confirm-kv-row {
        grid-template-columns: 38% 62%;
        margin-bottom: 0;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-radius: 0;
    }

    #undercolumn_shopping .confirm-kv-list {
        border-top: none;
    }

    #address_area {
        .add_multiple {
            width: 84%;
            padding: 12px 8%;
        }

        display: block;
    }

    #window_area {
        width: 100%;
        margin: 0;

        table {
            width: 100%;
            margin: 0;
        }
    }

    #windowcolumn {
        width: 100%;
        margin: 0;
    }

    #window_area {

        #forgot,
        p,
        table {
            width: 92%;
            margin: 0 auto 16px;
        }

        #forgot {
            padding: 20px 0;
        }
    }

    #completebox .box300,
    #window_area #forgot .box300 {
        width: 60%;
    }
}

/************************************************
 印刷用
************************************************ */

@media print {
    body {
        zoom: 75%;
    }
}

/************************************************
 公開画面レスポンシブ補強
************************************************ */
@media screen and (width <= 980px) {
    #container {
        width: 100%;
        box-sizing: border-box;
    }

    #header,
    #footer {
        width: 100%;
        box-sizing: border-box;
    }

    #header {
        display: block;
    }

    #main_column_frame {
        padding: 0 16px;
        box-sizing: border-box;
    }

    #main_column {
        &.colnum1,
        &.colnum2,
        &.colnum3 {
            width: 100%;
            padding-left: 0;
            padding-right: 0;
            box-sizing: border-box;
        }
    }

    .side_column {
        &#leftcolumn,
        &#rightcolumn {
            width: 100%;
            box-sizing: border-box;
        }
    }

    #logo_area,
    #header_utility {
        float: none;
        width: 100%;
    }

    #header_navi ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        height: auto;
        padding: 6px 8px;
        gap: 8px;
        box-sizing: border-box;
    }

    #header_navi li {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 0;
    }

    #header_navi li.mypage,
    #header_navi li.entry {
        margin-top: 0;
    }

    #header_navi a.nav_btn {
        width: 100%;
        box-sizing: border-box;
    }
}

@media screen and (width <= 768px) {
    body {
        font-size: calc(87.5% * var(--ud-font-scale, 1));
        line-height: 1.6;
        letter-spacing: 0.02em;
    }

    #main_column_frame {
        padding: 0 12px;
    }

    #logo_area a img {
        width: min(320px, 92%);
        height: auto;
    }

    #site_description {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    #header_navi li {
        flex: 1 1 calc(50% - 8px);
    }

    #header_fontsize_control {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px 8px;
        font-size: 13px;
        justify-content: flex-start;
        padding: 6px 0 8px;
    }

    #header_fontsize_control .header-fontsize-label {
        flex: 0 0 100%;
        margin-bottom: 2px;
    }

    #header_fontsize_control a.js-font-size-switch {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 0;
        padding: 7px 4px;
        box-sizing: border-box;
    }

    #main_column table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #main_column th,
    #main_column td {
        word-break: break-word;
    }

    #main_column input[type="text"],
    #main_column input[type="email"],
    #main_column input[type="tel"],
    #main_column input[type="password"],
    #main_column textarea,
    #main_column select {
        max-width: 100%;
        box-sizing: border-box;
    }

    #mycontents_area .mypage-search-grid {
        grid-template-columns: 1fr;
    }

    #mycontents_area .mypage-search-date-range {
        gap: 6px;
    }

    #mycontents_area .mypage-order-list {
        border: none;
        margin: 10px 0 16px;
    }

    #mycontents_area .mypage-order-list-header {
        display: none;
    }

    #mycontents_area .mypage-order-list-row {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }

    #mycontents_area .mypage-order-list-row > div {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px;
        border-left: none;
        border-right: none;
        box-sizing: border-box;
        text-align: right;
    }

    #mycontents_area .mypage-order-list-row > div::before {
        content: attr(data-label);
        min-width: 6em;
        color: #333;
        font-weight: bold;
        text-align: left;
        flex-shrink: 0;
    }

    #mycontents_area .mypage-order-col-total {
        white-space: normal;
    }

    #mycontents_area .mypage-favorite-list {
        border: none;
        margin: 10px 0 16px;
    }

    #mycontents_area .mypage-favorite-list-header {
        display: none;
    }

    #mycontents_area .mypage-favorite-list-row {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }

    #mycontents_area .mypage-favorite-list-row > div {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px;
        border-left: none;
        border-right: none;
        box-sizing: border-box;
        text-align: right;
    }

    #mycontents_area .mypage-favorite-list-row > div::before {
        content: attr(data-label);
        min-width: 7em;
        color: #333;
        font-weight: bold;
        text-align: left;
        flex-shrink: 0;
    }

    #mycontents_area .mypage-favorite-col-image {
        align-items: center;
    }

    #mycontents_area .mypage-favorite-col-price {
        white-space: normal;
    }

    #mycontents_area .mypage-biz-kv-list,
    #mycontents_area .mypage-delivery-list,
    #mycontents_area .mypage-pdf-list,
    #mycontents_area .mypage-history-product-list,
    #mycontents_area .mypage-history-kv-list,
    #mycontents_area .mypage-history-shipment-items,
    #mycontents_area .mypage-history-mail-list {
        border: none;
        margin: 10px 0 16px;
    }

    #mycontents_area .mypage-biz-kv-row {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }

    #mycontents_area .mypage-biz-kv-label,
    #mycontents_area .mypage-biz-kv-value {
        display: block;
        border-right: none;
    }

    #mycontents_area .mypage-biz-kv-label {
        border-bottom: 1px solid #eee;
    }

    #mycontents_area .mypage-delivery-list-header,
    #mycontents_area .mypage-pdf-list-header,
    #mycontents_area .mypage-history-product-header,
    #mycontents_area .mypage-history-shipment-items-header,
    #mycontents_area .mypage-history-mail-header {
        display: none;
    }

    #mycontents_area .mypage-delivery-list-row,
    #mycontents_area .mypage-pdf-list-row,
    #mycontents_area .mypage-history-product-row,
    #mycontents_area .mypage-history-shipment-items-row,
    #mycontents_area .mypage-history-mail-row {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }

    #mycontents_area .mypage-delivery-list-row > div,
    #mycontents_area .mypage-pdf-list-row > div,
    #mycontents_area .mypage-history-product-row > div,
    #mycontents_area .mypage-history-shipment-items-row > div,
    #mycontents_area .mypage-history-mail-row > div {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px;
        border-left: none;
        border-right: none;
        box-sizing: border-box;
        text-align: right;
    }

    #mycontents_area .mypage-delivery-list-row > div::before,
    #mycontents_area .mypage-pdf-list-row > div::before,
    #mycontents_area .mypage-history-product-row > div::before,
    #mycontents_area .mypage-history-shipment-items-row > div::before,
    #mycontents_area .mypage-history-mail-row > div::before {
        content: attr(data-label);
        min-width: 7em;
        color: #333;
        font-weight: bold;
        text-align: left;
        flex-shrink: 0;
    }

    #mycontents_area .mypage-history-summary-row {
        justify-content: space-between;
    }

    #mycontents_area .mypage-history-summary-label,
    #mycontents_area .mypage-history-summary-value {
        width: auto;
    }

    #mycontents_area .mypage-history-kv-row {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }

    #mycontents_area .mypage-history-kv-label,
    #mycontents_area .mypage-history-kv-value {
        display: block;
        border-right: none;
    }

    #mycontents_area .mypage-history-kv-label {
        border-bottom: 1px solid #eee;
    }

    #undercolumn_contact .contact-form-list,
    #undercolumn_aboutus .info-kv-list,
    #undercolumn_order .info-kv-list {
        border: none;
        margin: 10px 0 16px;
    }

    #undercolumn_contact .contact-form-row,
    #undercolumn_aboutus .info-kv-row,
    #undercolumn_order .info-kv-row {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }

    #undercolumn_contact .contact-form-label,
    #undercolumn_aboutus .info-kv-label,
    #undercolumn_order .info-kv-label {
        border-right: none;
        border-bottom: 1px solid #eee;
        background: #f7f7f7;
    }

    #undercolumn_entry .entry-form-table,
    #undercolumn_entry .entry-confirm-table {
        border: none;
        margin: 10px 0 16px;
    }

    #undercolumn_entry .entry-form-table col,
    #undercolumn_entry .entry-confirm-table col {
        display: none;
    }

    #undercolumn_entry .entry-form-table tbody,
    #undercolumn_entry .entry-form-table tr,
    #undercolumn_entry .entry-form-table th,
    #undercolumn_entry .entry-form-table td,
    #undercolumn_entry .entry-confirm-table tbody,
    #undercolumn_entry .entry-confirm-table tr,
    #undercolumn_entry .entry-confirm-table th,
    #undercolumn_entry .entry-confirm-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #undercolumn_entry .entry-form-table tr,
    #undercolumn_entry .entry-confirm-table tr {
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }

    #undercolumn_entry .entry-form-table th,
    #undercolumn_entry .entry-confirm-table th {
        border-right: none;
        border-bottom: 1px solid #eee;
        background: #f7f7f7;
        font-weight: bold;
    }

    #undercolumn_entry .entry-form-table td,
    #undercolumn_entry .entry-confirm-table td {
        border-right: none;
        border-bottom: none;
    }

    #mycontents_area table.delivname {
        border: none;
        margin: 10px 0 16px;
    }

    #mycontents_area table.delivname col {
        display: none;
    }

    #mycontents_area table.delivname tbody,
    #mycontents_area table.delivname tr,
    #mycontents_area table.delivname th,
    #mycontents_area table.delivname td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #mycontents_area table.delivname tr {
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }

    #mycontents_area table.delivname th {
        border-right: none;
        border-bottom: 1px solid #eee;
        background: #f7f7f7;
        font-weight: bold;
    }

    #mycontents_area table.delivname td {
        border-right: none;
        border-bottom: none;
    }
}

/* ==============================================
 モダンデザインオーバーライド
 EC-CUBE固有の古いデザイン要素をリセット
=============================================== */

/* ヘッダー：白背景＋ボトムボーダー */
#header_wrap {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    min-height: 72px;
}

/* フッター */
#footer {
    border-top-color: #e5e5e5;
    color: #888;
}

/* コンテナ背景 */
#container {
    background: #fff;
}

/* h3 見出し：GIF仕切りをCSS borderに */
#main_column .sub_area h3,
#undercolumn_login .login_area h3,
#undercolumn_shopping h3,
#mypagecolumn h3,
#undercolumn_cart h3 {
    color: #222;
    background-image: none;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 8px;
    font-weight: 600;
}

/* h4 ログインエリア：GIFアイコン除去 */
#undercolumn_login .login_area h4 {
    background-image: none;
    padding-left: 0;
}

/* ページタイトル h2 */
h2.title {
    border-bottom-color: #e0e0e0;
    font-weight: 600;
    color: #222;
}

/* 商品詳細 商品名 h2 */
#detailrightbloc h2 {
    color: #222;
    background-image: none;
    border-bottom: 1px solid #e0e0e0;
}

/* 商品詳細 ポイント・関連カテゴリ区切り */
#detailrightbloc .point,
#detailrightbloc .relative_cat {
    background-image: none;
    border-bottom: 1px solid #ebebeb;
}

/* 商品詳細 規格区切り */
#detailrightbloc div.classlist,
.listrightbloc .classlist {
    background-image: none;
    border-bottom: 1px solid #ebebeb;
}

/* カートエリア：青みを除去してグレーに */
.listrightbloc .cart_area,
#detailrightbloc .cart_area {
    background-color: #f6f6f6;
    border-color: #e0e0e0;
}

/* レビューブロック背景 */
#customervoice_area .review_bloc {
    background-color: #f7f7f7;
}

/* レビューリスト区切り */
#customervoice_area ul li {
    background-image: none;
    border-bottom: 1px solid #e8e8e8;
}

/* 新着情報区切り */
#news_area dl.newslist {
    background-image: none;
    border-bottom: 1px solid #ebebeb;
}

/* ページ送りエリア区切り */
.pagenumber_area {
    background-image: none;
    border-bottom: 1px solid #e5e5e5;
}

/* おすすめ商品区切り */
#recommend_area .block_body,
#whobought_area .product_item {
    background-image: none;
    border-bottom: 1px solid #ebebeb;
}

/* カート サイドバー ポイントエリア区切り */
#cart_area .postage {
    background-image: none;
    border-top-color: #e5e5e5;
}

#cart_area .postage .point_announce {
    background-image: none;
    padding-left: 0;
}

/* カテゴリサイドバー アイコン矢印をCSS */
#category_area li.level1 p {
    background-image: none;
    padding-left: 10px;
    position: relative;
}

#category_area li.level1 p::before {
    content: '›';
    position: absolute;
    left: 0;
    color: #888;
}

#category_area li.level1 li p {
    background-image: none;
}

#category_area li.level1 li p::before {
    content: '–';
    color: #aaa;
}

/* ガイドリンクボタン風リスト：矢印アイコンをCSS */
ul.button_like li a {
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-color: #e5e5e5;
    color: #333;
    transition: background 0.15s;
}

ul.button_like li a:hover {
    background: #f5f5f5;
    text-decoration: none;
    color: #111;
}

ul.button_like li a::after {
    content: '›';
    font-size: 1.1em;
    color: #aaa;
}

/* フォームリスト dt アイコン */
.block_outer .block_body dl.formlist dt,
.login_area dl.formlist dt {
    background-image: none;
    padding-left: 0;
}

/* マイページ mynavi 矢印 */
#mynavi_area .mynavi_list li {
    background-image: none;
    padding-left: 0;
}

#mynavi_area .mynavi_list li a::before {
    content: '›';
    margin-right: 4px;
    color: #888;
}

/* マイページ ポイント告知 */
#mynavi_area div.point_announce p {
    background-image: none;
    padding-left: 0;
}

/* ログインエリア背景 */
#undercolumn_login .login_area .inputbox {
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}

/* カート サマリー背景 */
#undercolumn_cart .cart-summary,
#undercolumn_shopping .confirm-summary,
#mycontents_area .mypage-history-summary {
    background: #f8f8f8;
}

/* チェックアウトフロー：現在ステップ */
.checkout-flow__step.is-current {
    background: #444;
    border-color: #444;
}

/* ヘッダーナビボタン */
#header_navi a.nav_btn {
    background: #444;
    border-color: #444;
}

#header_navi a.nav_btn:hover {
    background: #333;
    border-color: #333;
}

/* ブロックタイトル */
.ec-bloc-title {
    color: #222;
}

/* onlink（カテゴリ選択中） */
a.onlink:link,
a.onlink:visited,
a.onlink:hover {
    color: #333;
    text-decoration: underline;
}

/* ヘッダーフォントサイズコントロール */
#header_fontsize_control a.js-font-size-switch.is-active {
    border-color: #444;
    background: #444;
}

/* カレンダー */
#calender_area .block_body {
    background-color: #f7f7f7;
}

#calender_area table .month {
    background-image: none;
    padding-left: 0;
}

/* テーブルヘッダー背景を統一 */
table th,
#mycontents_area .mypage-order-list-header,
#mycontents_area .mypage-favorite-list-header,
#mycontents_area .mypage-delivery-list-header,
#mycontents_area .mypage-pdf-list-header,
#mycontents_area .mypage-history-product-header,
#mycontents_area .mypage-history-shipment-items-header,
#mycontents_area .mypage-history-mail-header,
#mycontents_area .mypage-biz-kv-label,
#mycontents_area .mypage-history-kv-label,
#undercolumn_cart .cart-details-header,
#undercolumn_shopping .deliv-list-header,
#undercolumn_shopping .pay-select-header,
#undercolumn_shopping .confirm-items-header,
#undercolumn_shopping .confirm-kv-label,
#undercolumn_contact .contact-form-label,
#undercolumn_aboutus .info-kv-label,
#undercolumn_order .info-kv-label {
    background-color: #f3f3f3;
    color: #333;
}

/* テーブルborder色を統一 */
table,
table th,
table td {
    border-color: #e0e0e0;
}

/* カゴ削除リンク色 */
#undercolumn_cart .cart-item .cart-cell-delete a {
    color: #888;
}

#undercolumn_cart .cart-item .cart-cell-delete a:hover {
    color: #333;
}

/* 配送先編集・削除リンク */
#undercolumn_shopping .deliv-cell-edit a,
#undercolumn_shopping .deliv-cell-delete a {
    color: #888;
}

#undercolumn_shopping .deliv-cell-edit a:hover,
#undercolumn_shopping .deliv-cell-delete a:hover {
    color: #333;
}

/* マイページ注文詳細リンク */
#mycontents_area .mypage-order-col-detail a {
    color: #444;
}

#mycontents_area .mypage-history-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

#mycontents_area .mypage-history-action-row form,
#mycontents_area .mypage-history-action-row .btn {
    margin: 0;
}

body.is-modal-open {
    overflow: hidden;
}

.ec-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.45);
}

.ec-modal__dialog {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.ec-modal__header,
.ec-modal__body,
.ec-modal__footer {
    padding: 20px 24px;
}

.ec-modal__header {
    border-bottom: 1px solid #e5e5e5;
}

.ec-modal__header h4 {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
    color: #333;
}

.ec-modal__body {
    color: #444;
    line-height: 1.8;
}

.ec-modal__body p {
    margin: 0 0 10px;
}

.ec-modal__body p:last-child {
    margin-bottom: 0;
}

.ec-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #e5e5e5;
}

.instant-order-price-check {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #e4d8bf;
    background: #faf7ef;
    border-radius: 6px;
}

.instant-order-price-check__title {
    margin-bottom: 10px;
    font-weight: 700;
    color: #8a4b08;
}

.instant-order-price-check__item + .instant-order-price-check__item {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eadfc8;
}

.instant-order-price-check__name {
    margin-bottom: 6px;
    font-weight: 700;
    color: #333;
}

.instant-order-price-check__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
}

.instant-order-price-check__row.is-current {
    color: #b14d00;
    font-weight: 700;
}

.instant-order-price-check__label {
    flex: 1 1 auto;
}

.instant-order-price-check__value {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .ec-modal {
        padding: 16px;
    }

    .ec-modal__header,
    .ec-modal__body,
    .ec-modal__footer {
        padding: 16px;
    }

    .ec-modal__footer {
        flex-direction: column-reverse;
    }

    .instant-order-price-check__row {
        flex-direction: column;
        gap: 2px;
    }
}

/* クイックオーダー サジェスト：黄色みを除去 */
.quick-order-suggest-item button:hover {
    background: #f0f0f0;
}

.quick-order-suggest-item button.is-active {
    background: #e5e5e5;
}

.quick-order-suggest-code {
    color: #444;
    font-weight: 600;
}

.quick-order-suggest-price {
    color: #666;
}

/* クイックオーダー説明エリア */
.quick-order-intro {
    background: #f6f6f6;
    border-color: #e0e0e0;
}

/* モバイル クイックオーダーカード */
@media screen and (max-width: 768px) {
    .quick-order-table tbody tr {
        background: #fff;
        border-color: #e5e5e5;
    }

    .quick-order-table tbody td::before {
        color: #555;
    }
}

/* 複数配送先追加エリア */
#address_area .add_multiple {
    border-color: #e0e0e0;
    background: #f6f6f6;
    color: #444;
}

/* 会員登録 規約テキスト */
#undercolumn_entry .kiyaku_text {
    border-color: #e5e5e5;
}

/* エラーヘッダー */
#errorHeader {
    background-color: #f5f5f5;
    color: #c0392b;
    border-bottom: 1px solid #e0e0e0;
}

/* フォームborderを統一 */
select,
input[type='text'],
input[type='password'] {
    border-color: #d5d5d5;
}

/* ブロック外枠border色 */
#cart_area,
#category_area,
#login_area,
#search_area,
#calender_area {
    border-color: #e5e5e5;
}

#main_column .block_body {
    border-color: #e8e8e8;
}

/* h2 ブロックタイトル背景 */
h2 {
    #recommend_area &,
    #news_area & {
        background: #f3f3f3;
    }
}

/* 商品一覧 表示切替 */
.product-view-switch {
    display: inline-flex;
    gap: 6px;
    margin-left: 10px;
    vertical-align: middle;
}

.product-view-switch a,
.product-view-switch strong {
    display: inline-block;
    min-width: 4.8em;
    padding: 4px 10px;
    border: 1px solid #d8d8d8;
    border-radius: 999px;
    background: #fff;
    color: #555;
    font-size: 92%;
    text-align: center;
    box-sizing: border-box;
}

.product-view-switch a:hover {
    background: #f5f5f5;
    text-decoration: none;
}

.product-view-switch .is-current {
    border-color: #666;
    background: #666;
    color: #fff;
}

@media screen and (min-width: 768px) {
    #undercolumn_login .login_area .inputbox {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    #undercolumn_login .login_area dl.formlist {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    #undercolumn_login .login_area .btn_area {
        text-align: center;
    }

    #undercolumn_login .login_area .btn_area ul {
        display: inline-block;
    }
}

@media screen and (max-width: 767px) {
    #undercolumn_login .login_area .inputbox {
        padding: 14px 12px 10px;
        box-sizing: border-box;
    }

    #undercolumn_login .login_area dl.formlist {
        width: 100%;
        margin: 0 0 12px;
        box-sizing: border-box;
    }

    #undercolumn_login .login_area dl.formlist input.box300,
    #undercolumn_login .login_area dl.formlist input[type="text"],
    #undercolumn_login .login_area dl.formlist input[type="password"] {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    #undercolumn_login .login_area .btn_area ul,
    #undercolumn_login .login_area .btn_area li {
        width: 100%;
    }

    #undercolumn_login .login_area .btn_area .ec-action-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* 商品一覧 4列表示 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 16px;
    margin: 16px 0 30px;
    align-items: start;
}

.product-grid form,
.product-card,
.product-card__body {
    min-width: 0;
}

.product-grid form {
    display: flex;
    flex-direction: column;
}

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.product-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}

.product-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__image a,
.product-card__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.product-card__image img {
    object-fit: contain;
    border: none;
}

.product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px;
}

.product-card__body .status_icon {
    margin-bottom: 6px;
}

.product-code-label {
    margin-bottom: 6px;
    color: #444;
    font-size: 100%;
    font-weight: 500;
    line-height: 1.45;
    word-break: break-word;
}

.product-card__body h3 {
    margin-bottom: 6px;
    font-size: 100%;
    font-weight: 500;
    line-height: 1.45;
}

.product-card__body .pricebox {
    margin-bottom: 4px;
    font-size: 95%;
}

.product-card__body .listcomment {
    margin-bottom: 10px;
    color: #777;
    font-size: 88%;
    line-height: 1.5;
}

.product-card__body .detail_btn {
    margin-top: auto;
    margin-bottom: 8px;
}

.product-card__body .ec-action-btn--detail,
.product-card__body .cartin_btn .ec-action-btn--cartin {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.product-card__body .cart_area {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background-color: #f6f6f6;
    border-color: #e0e0e0;
}

.product-card__body .cartin {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-card__body .cartin .quantity,
.product-card__body .cartin .cartin_btn {
    width: 100%;
    padding: 0;
}

.product-card__body .cartin .quantity {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}

.product-card__body .cartin .quantity-unit {
    line-height: 1.4;
    color: #444;
}

.product-card__body .cartin .quantity-input {
    width: 108px;
    max-width: 108px;
    text-align: center;
    box-sizing: border-box;
}

.product-card__body select,
.product-card__body input[type='text'],
.product-card__body input[type='number'] {
    max-width: 100%;
    box-sizing: border-box;
}

/* 商品詳細 画像枠を固定 */
#detailphotobloc .photo {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8f8f8;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
}

#detailphotobloc .photo a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#detailphotobloc .photo img.picture {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    display: block;
}

#detailphotobloc .detail-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    max-width: 420px;
}

#detailphotobloc .detail-thumb {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8f8f8;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#detailphotobloc .detail-thumb.is-active {
    border-color: #666;
    box-shadow: 0 0 0 1px #666 inset;
}

#detailphotobloc .detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.subphotoimg {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8f8f8;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
}

.subphotoimg a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.subphotoimg img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    display: block;
}

@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    #detailphotobloc .detail-thumb {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 680px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
    }

    .product-card__body {
        padding: 10px;
    }

    .product-card__body h3 a,
    .product-card__body .pricebox,
    .product-card__body .listcomment {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .product-card__body .cart_area {
        padding: 8px 6px;
    }

    .product-card__body .cartin .quantity-input {
        width: 92px;
        max-width: 92px;
    }

    .product-card__body .box3,
    .product-card__body .box6 {
        width: 100% !important;
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-view-switch {
        display: flex;
        margin: 8px 0 0;
    }

    #detailphotobloc .photo {
        max-width: 100%;
    }

    .subphotoimg {
        width: 100%;
        max-width: 160px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 767px) {
    #main_column table,
    #undercolumn table,
    #mypagecolumn table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #main_column th,
    #main_column td,
    #undercolumn th,
    #undercolumn td,
    #mypagecolumn th,
    #mypagecolumn td {
        word-break: break-word;
    }

    #main_column input[type="text"],
    #main_column input[type="email"],
    #main_column input[type="tel"],
    #main_column input[type="password"],
    #main_column input[type="number"],
    #main_column input[type="date"],
    #main_column textarea,
    #main_column select,
    #undercolumn input[type="text"],
    #undercolumn input[type="email"],
    #undercolumn input[type="tel"],
    #undercolumn input[type="password"],
    #undercolumn input[type="number"],
    #undercolumn input[type="date"],
    #undercolumn textarea,
    #undercolumn select,
    #mypagecolumn input[type="text"],
    #mypagecolumn input[type="email"],
    #mypagecolumn input[type="tel"],
    #mypagecolumn input[type="password"],
    #mypagecolumn input[type="number"],
    #mypagecolumn input[type="date"],
    #mypagecolumn textarea,
    #mypagecolumn select {
        max-width: 100%;
        box-sizing: border-box;
    }

    .box40 {
        width: 64px;
        min-width: 64px;
    }

    .box60 {
        width: 84px;
        min-width: 84px;
    }

    .box100,
    .box120,
    .box140,
    .box145,
    .box150,
    .box240,
    .box300,
    .box320,
    .box350,
    .box380 {
        width: 100% !important;
        max-width: 100%;
    }

    .block_outer .block_body dl.formlist,
    .login_area dl.formlist {
        width: 100%;
        max-width: 100%;
    }

    #login_area .block_body dl.formlist {
        width: 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .block_outer .block_body dl.formlist dt,
    .block_outer .block_body dl.formlist dd,
    .login_area dl.formlist dt,
    .login_area dl.formlist dd {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .block_outer .block_body dl.formlist dt,
    .login_area dl.formlist dt {
        margin-bottom: 6px;
    }

    .block_outer .block_body dl.formlist dd,
    .login_area dl.formlist dd {
        margin-bottom: 12px;
    }

    #login_area .block_body dl.formlist dt,
    #login_area .block_body dl.formlist dd {
        display: block;
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
        text-align: left;
    }

    #login_area .block_body input[type="text"],
    #login_area .block_body input[type="password"] {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    #login_area .block_body .btn .ec-block-btn {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
    }

    #container #login_area .block_body .btn .ec-block-btn {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
    }

    .responsive-inline-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .responsive-inline-field {
        width: 100%;
    }

    #mycontents_area .mypage-search-date-range {
        flex-wrap: wrap;
    }

    #mycontents_area .mypage-search-date-range input[type="text"],
    #mycontents_area .mypage-search-date-range input[type="date"] {
        width: 100%;
    }

    #mycontents_area .mypage-history-kv-value input[type="text"],
    #mycontents_area .mypage-history-kv-value input[type="date"] {
        width: 100%;
        max-width: 100%;
    }

    .product-card__body .cartin .quantity-input {
        width: 100%;
        max-width: 100%;
    }
}