@charset "UTF-8";
/*
 * DH_HELP_DESK-6807 InsightX対応
 * お気に入りSKUモーダル(#favoriteSkuModal)専用スタイル。
 * itokin_item.css のSKUスタイル(SPサイズ)を #favoriteSkuModal 配下に限定して踏襲。
 */

/* お気に入りハート(素の状態)。favorite-with-text化されると下の::after付きで上書きされる */
#favoriteSkuModal #sku-favorite-button::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(/assets/images/common/icn_favorite.png) no-repeat;
    display: inline-block;
    background-size: contain;
    vertical-align: middle;
}
#favoriteSkuModal #sku-favorite-on-button::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(/assets/images/common/icn_favorite_on.png) no-repeat;
    display: inline-block;
    background-size: contain;
    vertical-align: middle;
}
/* SKU行レイアウト(SPサイズ相当) */
/*
 * itokin_item.css は Item コントローラ配下(検索含む)で読み込まれ、
 * SPで .parts-item-detail-item-variation__sku-list { display: none } になる。
 * 商品詳細の #skuModal は親ラッパーを含めず中身だけコピーするため問題にならないが、
 * 本モーダルは Ajax HTML にラッパーが含まれるため、ここで明示的に再表示する。
 * margin-top: 0 は商品詳細用の 40px 余白を打ち消し、border の二重感も防ぐ。
 */
#favoriteSkuModal .parts-item-detail-item-variation__sku-list {
    display: block;
    margin-top: 0;
}
#favoriteSkuModal .cartbox {
    border-top: 1px solid #e1e1e1;
    margin-bottom: 10px;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-list-row {
    display: flex;
    border-bottom: 1px solid #e1e1e1;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-list-row:last-child {
    border-bottom: none;
}
/*
 * itokin_item.css(PC) は行間に border-top + margin/padding を足す。
 * 本モーダルは border-bottom で区切るため、PCでも上線側を打ち消して1本にする。
 */
@media (min-width: 992px) {
    #favoriteSkuModal .parts-item-detail-item-variation__sku-list-row:not(:first-child) {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
}
#favoriteSkuModal .parts-item-detail-item-variation__imagearea {
    padding: 20px 0;
    max-width: 25%;
}
#favoriteSkuModal .parts-item-detail-item-variation__imagearea .color_container {
    margin-top: 3px;
    /* itokin_item.css(PC) の flex-direction:column を打ち消し、SP/PCとも1行表示 */
    display: block;
    flex-direction: row;
    line-height: normal;
}
#favoriteSkuModal .parts-item-detail-item-variation__imagearea .color_name {
    font-size: 12px;
    font-weight: normal;
    display: inline;
    margin: 0;
}
#favoriteSkuModal .parts-item-detail-item-variation__imagearea .color_code {
    font-size: 12px;
}
#favoriteSkuModal .parts-item-detail-item-variation__image {
    width: 100%;
    height: auto;
    padding-right: 5px;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-body {
    flex: 1;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-items {
    display: flex;
    flex-direction: column;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-item {
    display: flex;
    flex-direction: row;
    gap: 0 9px;
    padding: 20px 0;
    border-bottom: 1px solid #e1e1e1;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-item:last-child {
    border: none;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-list-row .sizebox {
    flex: 0 0 30%;
    max-width: 30%;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-list-row p {
    vertical-align: middle;
    white-space: nowrap;
    overflow: visible;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-list-row p.size {
    font-size: 20px;
    font-weight: bold;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-list-row p.stock {
    font-size: 12px;
    font-weight: normal;
    margin-top: 5px;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-list-row .arrival {
    white-space: initial;
    line-height: 1.5rem;
    font-size: 12px;
    font-weight: normal;
    margin-top: 5px;
}
/* お気に入りボタン(お気に入りに追加テキスト付き) */
#favoriteSkuModal .parts-item-detail-item-variation__sku-list-row p.favorite {
    display: flex;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-list-row p#favorite-with-text {
    width: 60%;
    flex: initial;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-list-row p#favorite-with-text a {
    height: 45px;
    line-height: 36px;
    border-radius: 5px;
    border: solid 2px #242d72;
    width: 100%;
    display: block;
    text-align: center;
}
#favoriteSkuModal .parts-item-detail-item-variation__sku-list-row p#favorite-with-text span {
    vertical-align: sub;
}
#favoriteSkuModal #favorite-with-text #sku-favorite-on-button::before,
#favoriteSkuModal #favorite-with-text #sku-favorite-button::before {
    width: 16px;
    height: 16px;
    margin-right: 3px;
}
#favoriteSkuModal #favorite-with-text #sku-favorite-button::before {
    background: url(/assets/images/common/icn_favorite_blue.png) no-repeat;
    background-size: contain;
}
#favoriteSkuModal #favorite-with-text #sku-favorite-button::after {
    content: 'お気に入りに追加';
    font-weight: 500;
    color: #242d72;
}
#favoriteSkuModal #favorite-with-text #sku-favorite-on-button::after {
    content: 'お気に入り登録済み';
    font-weight: 500;
    color: #242d72;
}
/* 説明テキストエリア */
#favoriteSkuModal .modal-text-area {
    padding: 20px 5px 25px;
    background: #f7f7f7;
    font-size: 14px;
}
#favoriteSkuModal .modal-text-area #icn-favorite {
    width: 19px;
    margin: 0 2px 2px 0;
}
#favoriteSkuModal .modal-text-area #top-text {
    font-weight: bold;
}
#favoriteSkuModal .modal-text-area .link-area {
    margin-top: 5px;
    line-height: 30px;
    font-size: 17px;
}
/* 閉じるアイコン/ボタン */
#favoriteSkuModal .parts-item-detail-item-variation__modal-close-container {
    position: relative;
    height: 50px;
}
#favoriteSkuModal .parts-item-detail-item-variation__modal-close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    bottom: 10px;
    width: 30px;
    background: none;
    border: none;
}
#favoriteSkuModal .parts-item-detail-item-variation__modal-close-icon:focus {
    outline: 0;
}
#favoriteSkuModal .parts-item-detail-item-variation__modal-close-icon .glyphicon-remove {
    -webkit-text-stroke: 6px white;
    font-size: 30px;
}
#favoriteSkuModal .parts-item-detail-item-variation__modal-close-button-frame {
    width: 150px;
    margin: auto;
    margin-top: 14px;
}
#favoriteSkuModal .parts-item-detail-item-variation__modal-close-button {
    color: #fff;
    display: inline-block;
    width: 100%;
    height: 40px;
    background-color: #525252;
    line-height: 30px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: normal;
    border: none;
}

/* カート・店舗在庫欄はSPモーダルには無いため非表示(.sku-stockのd-lg-blockに勝つため!important)。 */
#favoriteSkuModal .sku-stock,
#favoriteSkuModal .cart-button-container {
    display: none !important;
}

/* モーダル本体・お気に入りAjax受け皿(FavoriteModalContainer.ctpのインラインstyleから移動) */
#favoriteSkuModal .modal-body {
    padding: 5px;
    height: 100%;
}
#favoriteAjaxResponse {
    display: none;
}