@charset "UTF-8"; @import url("smoothness/jquery-ui-1.8.4.custom.css"); /* ======================================================================= CSSの名前：style.css -------------------------------------------------------------------------- 1.reset 2.base 3.コンテナ・サイドバー・メインコンテンツ 6.extファイル用 7.トップページ 8.カートの中身～注文完了まで、プレゼント応募～完了まで 9.会員登録・会員情報変更・退会 11.商品詳細・一覧、プレゼント詳細・一覧 12.レビュー 13.購入履歴 14.サブウインドウで表示するページ用 15.エラーページ 16.クレジットカード登録画面 17.お気に入り 18.アドレス帳 19.マイページ 19.マイページ 20.ログイン 22.キャンペーン 23.会員登録 27.ポイント履歴ページ 28.ポイント有効期限ページ ======================================================================= */ /* ================================================================= reset =================================================================*/ * {box-sizing: border-box;} body {background: url(../images/bg/bg.png) #f9efd2; color: #666666; line-height: 1.5; font-family: "Noto Sans JP", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif; word-wrap: break-word; position: relative; font-size: 16px; font-weight: 400; overflow-x: clip; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; height: 100%; word-wrap: break-word; word-break: break-word;} /* すべてのタグのマージン・パディングの設定をリセット -------------------------------------------------------------*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,hr {margin: 0; padding: 0; font-weight: 400;} li {list-style-type: none;} img {border: 0; max-width: 100%;} /* ================================================================= base =================================================================*/ /* overlay -------------------------------------------------------------*/ body.overlay {height: 100%; transition: 0.3s; overflow: hidden!important;} body.overlay::before {content: ""; display: block; width: 100vw; height: 100%; background-color: rgba(0, 0, 0, 0.4); position: absolute; z-index: 998;} /* 基本のlink color -------------------------------------------------------------*/ a:link, a:visited {color: #666666;} a {text-decoration: none;} a:hover {cursor:url(../images/cursor.cur),auto;} p {margin: 0 0 24px;} #main p a:not(.button) {text-decoration: underline; color: #00A0E9;} /* ボタンデザイン -------------------------------------------------------------*/ /*基本デザイン-下記クラスに加えpositive　negative等のクラスを合わせて付与する*/ a.button, .button {font-family: "M PLUS Rounded 1c", sans-serif; background: #FFFFFF; color: #00a0e9; display: block; text-align: center; padding: 7px 4px; position: relative; transition: 0.2s; border-style: none; cursor:url(../images/cursor.cur),auto; border-radius: 100px; border:1px solid #00a0e9;} /*次へ・入力内容を確認する・注文する・ログイン・登録する・送信・検索・ご注文手続きへ進む等*/ .button.positive {color: #FFFFFF; background-color: #00a0e9;} /*青いボタン*/ .button.border_blue{border: 1px solid #00a0e9; color: #00a0e9;} /*戻る・クリア・削除・ログアウト等*/ a.negative, .negative {background: #fff; color: #666666; border:1px solid #CFCFCF;} .negative::before {border-color: #fff;} .button.link.negative:after {background-image: url(../images/icon/link_arrow_black.svg);} .button_area.top { flex-direction: column; align-items: center;} /*押せないボタン*/ .not_click, .button:disabled {border: none; background: #777; border: 1px solid #777; color: #FFF; pointer-events: none;} .button.large, input.large {width: 320px; max-width: 320px; font-size: 16px;} /*普通サイズの時にはクラスに下記を追加*/ .button.medium, input.medium {width: 250px; max-width: 250px; padding: 7px 4px; font-size: 16px;} /*小さいサイズの時にはクラスに下記を追加*/ .button.small {padding: 7px; width: fit-content;} .button.zip{border-radius: 10px; font-size: 14px; font-family: "Noto Sans JP", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif; padding: 9px 7px;} /*ボタンエリア*/ .button_area {margin: 56px auto 40px; display: flex; align-items: flex-start; justify-content: center; gap: 12px; flex-wrap: wrap;} .button_area .multi_wrapper {display: flex; align-items: flex-start; justify-content: center; gap: 30px;} .button_area.back {flex-direction: column; align-items: center;} .button_area.bottom {margin-bottom: 0;} /*矢印アイコン付きボタン*/ .button.link {padding-right: 25px; padding-left: 25px;} .button.link::after {content:""; display: block; width: 15px; height: 12px; background: url(../images/icon/link_arrow.svg) no-repeat center/contain; position: absolute; top: 50%; right: 13px; transform: translateY(-50%);} .button.link.border_blue::after {content:""; display: block; width: 15px; height: 12px; background: url(../images/icon/link_arrow_blue.svg) no-repeat center/contain; position: absolute; top: 50%; right: 13px; transform: translateY(-50%);} .button.link.back::after {transform: translateY(-50%) scale(-1, 1); right: unset; left: 13px;} .button.link.small {padding-right: 24px; padding-left: 18px;} .button.link.small::after {right: 8px;} .links_area {display: flex; flex-direction: column; align-items: flex-start;} .links_area a {padding: 16px 24px 16px 8px; display: block; position: relative;} .links_area a::after {content:""; display: block; width: 8px; height: 12px; background: url(../images/icon/link_arrow.svg) no-repeat center/contain; position: absolute; top: 50%; right: 13px; transform: translateY(-50%);} .button.not_click.link::after, .button.link:disabled::after {background-image: url(../images/icon/link_arrow_black.svg);} /*矢印アイコン付きリンク*/ .inline_link {position: relative; padding: 0 0 0 14px; text-decoration: none!important;} .inline_link::before {content:""; background: url(../images/icon/link_arrow_black.svg) no-repeat center/contain; display: block; height: 12px; width: 8px; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.2s; left: 0;} .link_list {display: flex; flex-direction: column; gap: 8px;} .link_list a {position: relative; padding: 0 0 0 14px; display: block; color: #00A0E9;} .link_list a::before {content:""; background: url(../images/icon/link_arrow_black.svg) no-repeat center/contain; display: block; height: 12px; width: 8px; position: absolute; top: 5px; transition: 0.2s; left: 0;} /* 注釈インデント */ .indent {padding-left: 1em; text-indent: -1em;} /* 全件表示、表示数セレクトボックス -------------------------------------------------------------*/ #main .select_wrapper {display: flex; align-items: center; justify-content: space-between; gap: 8px;} /* 画像の縦横比調整 -------------------------------------------------------------*/ .box .img_box {position: relative; border-radius: 10px; padding-top: 100%; overflow: hidden; display: block;} .box .img_box img {display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 100%; transition: 0.2s;} /* モーダル -------------------------------------------------------------*/ .lity {background-color: rgba(0, 0, 0, 0.4);} .lity-content {position: relative; border-radius: 8px; overflow: hidden;} .lity-close {position: absolute; top: 9px; right: 24px; background: url(../images/icon/close_grey.svg) no-repeat center; text-indent: 999px; overflow: hidden; white-space: nowrap;} .lity-close:hover {background: url(../images/icon/close_grey.svg) no-repeat center;} .lity-container {padding: 0 16px; width: 100%; max-width: 922px!important; margin: 0 auto;} .lity-iframe-container {padding-top: 90vh;} html:has(> body > #subwindow) {height: 100%;} #subwindow::-webkit-scrollbar { background: transparent; width:8px; } #subwindow::-webkit-scrollbar-thumb {background-color: #0C3F64; border-radius: 9999px;} #subwindow::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, 0);} #subwindow { scrollbar-width: thin; scrollbar-color: #0C3F64 rgba(0, 0, 0, 0); overflow: auto;} /* タイトルデザイン -------------------------------------------------------------*/ .large_title {position: relative; max-width: 888px; margin: 0 auto 48px; font-size: 24px; text-align: center; color: #0c3f64; font-family: "M PLUS Rounded 1c", sans-serif; padding-bottom: 16px;} .large_title .inner{display: block; font-size: 14px; color: #00A0E9; margin-top: 4px;} .large_title::after {position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); content: ""; background: url(../images/border_large_title.svg) no-repeat center/100%; display: block; width: 100%; height: 16px;} .medium_title {position: relative; margin: 56px 0 62px; color: #0C3F64; font-size: 24px; text-align: center; font-family: "M PLUS Rounded 1c", sans-serif;} .normal_title { position: relative; margin: 28px 0; font-size: 18px; font-weight: bold; color: #0C3F64; border-bottom: 1px solid #DDDDDD; padding-bottom: 16px;} .small_title {margin: 16px 0; color: #00A0E9; font-size: 19px;} .x_small_title {margin: 16px 0; color: #00A0E9; font-size: 16px;} /* セクションタイトル */ .section .section_title {margin: 0 0 40px; font-size: 28px; text-align: center; z-index: 10; font-weight: normal; font-family: "M PLUS Rounded 1c", sans-serif;} .section .section_title .main {color: #0c3f64; position: relative; display: block; padding-bottom: 10px;} .section .section_title .main::before {content: ""; display: block; background: #f094a7; width: 6px; height: 6px; border-radius: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);} .section .section_title .inner {display: block; font-size: 16px; color:#00a0e9; line-height: 1; margin: 7px 0 0;} /* パンくずリスト -------------------------------------------------------------*/ #breadcrumbs{margin: -66px 0 52px;} #breadcrumbs .breadcrumbs_list img { display: block; } #breadcrumbs .breadcrumbs_list { font-size: 12px; display: flex; align-items: stretch; justify-content: flex-start; gap: 22px; max-width: 1200px; width: 100%; margin: 0 auto; padding: 11px 0 9px; } #breadcrumbs .breadcrumbs_list li, #breadcrumbs .breadcrumbs_list li > span > span { color: #666666; position: relative; } #breadcrumbs .breadcrumbs_list li::after, #breadcrumbs .breadcrumbs_list li > span > span::after { content: ""; width: 10px; height: 1px; background: #666666; position: absolute; top: 50%; left: calc(100% + 6px); transform: translateY(-50%); } #breadcrumbs .breadcrumbs_list li > span { margin-right: 22px; } #breadcrumbs .breadcrumbs_list li > span:last-of-type { margin: 0; } #breadcrumbs .breadcrumbs_list li > span:last-of-type > span::after, #breadcrumbs .breadcrumbs_list li:last-child::after { content: unset; background: none; } #breadcrumbs.wide .breadcrumbs_list { padding: 11px 6vw 9px; max-width: unset; } /* 共通スタイル -------------------------------------------------------------*/ .sp {display: none;} .pc {display: block;} .taC {text-align:center;} .flx {display:flex;} .mtcm {margin-top: clamp(1rem, 5vw, 3rem);} .mtnr {margin-top: clamp(0.5rem, 2vw, 1.5rem);} .bgwhite{background:#fff;} /* カートフローチャート -------------------------------------------------------------*/ .cart_step {margin: 73px auto 35px; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 8px 24px; } .cart_step li {position: relative; text-align: center; font-size: 14px; width: 70px;} .cart_step li:after {position: absolute; content: ""; display: block; height: 16px; width: 16px; background: url(../images/icon/link_arrow_black.svg) no-repeat center/contain; left: -20px; top: 12px;} .cart_step li:first-child::after {content: none;} .cart_step li .no {margin: 0 auto 4px; font-size: 20px; display: block; background: #FFFFFF; color: #A09E98; width: 38px; height: 38px; border-radius: 9999px; line-height: 38px; font-family: "M PLUS Rounded 1c", sans-serif;} .cart_step li.active::before {position: absolute; content: ""; display: block; width: 28px; height: 24px; background: url(../images/cart_step.png) no-repeat center/contain; top: -24px; left: 11px;} .cart_step li.active .no {background: #0C3F64; position: relative; color: #FFFFFF;} /* テーブルデザイン -------------------------------------------------------------*/ /* 入力形テーブル */ #main .input_table_wrapper {padding: 56px calc((100vw - 890px) / 2) 66px; width: 100vw; margin: 56px calc(50% - 50vw) 0; background: #F3E5B8;} #main .input_table {position: relative; margin: 0 auto; font-size: 16px; max-width: 890px; border-radius: 0; overflow: visible;} #main .input_table td p {margin: 0;} #main .input_table td p + p {margin: 8px 0 0;} #main .input_table tr {position: relative;} #main .input_table:before {position: absolute; left: 0; top: 0; content: ""; display: block; width: 100%; height: 1px; background: #FFFFFF;} #main .input_table tr::after {position: absolute; left: 0; bottom: 0; content: ""; display: block; width: 100%; height: 1px; background: #FFFFFF;} #main .input_table .title { min-width: 222px; padding: 20px; background-color: unset; color: #666666; font-weight: bold; border-bottom: none;} #main .input_table td {width: 100%; padding: 20px 0; background-color: unset; border-bottom: none;} #main .input_table .hissu {margin: 0 0 0 4px; /* display: inline-block; width: 12px; height: 12px; background: url(../images/icon/hissu.svg) no-repeat center/contain; text-indent: 100%; */ white-space: nowrap; overflow: hidden;font-size: 80%; color: #d33;} #main .input_table input[type="text"], #main .input_table input[type="email"], #main .input_table input[type="password"], #main .input_table input[type="tel"], #main .input_table input[type="number"], #main .input_table textarea {width: 100%; font-size: 15px;} #main .input_table input.medium {width: 100%; max-width: 334px;} #main .input_table input.small {width: 221px; max-width: 334px;} #main .input_table .data_wrapper {white-space: nowrap; display: flex; align-items: center; justify-content: flex-start; gap: 8px;} #main .input_table .caption {margin: 8px 0 0; font-size: 12px; color: #A09E98;} #main .input_table .caption b {text-shadow: 0 0 0 #fff; font-weight: 400;} #main .input_table .caption:empty {display: none;} #main .input_table .caption:has(+ input), #main .input_table .caption:has(+ .data_wrapper) {margin: 8px 0;} #main .input_table input[readonly] {background: #bcbcbc;} #main .input_table.payment .kessai_name + .kessai_comment { margin-top:12px;} #main .input_table.payment .kessai_comment { background-color: #FFFFFF; padding: 12px 16px; font-size: 95%;border-radius:6px;} #main #cartLogin .login_boxes .input_table .title { min-width: 140px; } #main .button_area > .indent { margin-top: 12px; } #cartFlow .small_title { font-size: 14px; margin-top: 16px; } /* 入力フォーム */ #main .main_inner .input_table .multi_input {display: flex; justify-content: flex-start; align-items: center;} #main .main_inner .input_table .multi_input input[type="text"], #main .main_inner .input_table .multi_input input[type="email"], #main .main_inner .input_table .multi_input input[type="password"], #main .main_inner .input_table .multi_input input[type="tel"], #main .main_inner .input_table .multi_input input[type="number"] {width: 100%;} #main .main_inner .input_table .multi_input .text {margin: 0 10px; white-space: nowrap;} #main .main_inner .input_table .multi_input .text:first-child {margin: 0 10px 0 0;} #main .main_inner .input_table .multi_input .text:last-child {margin: 0 0 0 10px;} /* テーブル型定義リスト */ #main dl.info_box dt {padding: 7px 16px; background-color: #0C3F64; color: #FFFFFF; font-size: 14px;} #main dl.info_box dd {padding: 16px; background-color: #FFFFFF; font-size: 16px; color: #00A0E9;} #main .button_area > .indent { margin-top: 12px; } /* テーブル（項目見出し横並び - SP時に各行縦並び） -------------------------------------------------------------*/ #main table.side_by_side .data_row dt {display: none;} #main table.side_by_side{border-radius: 10px; overflow: hidden;} #main table.side_by_side th{background: #0C3F64; border-bottom: none; color: #FFFFFF;} #main table.side_by_side td{border-bottom: none;} /* ローディング表示のスタイル -------------------------------------------------------------*/ #loading {position: fixed; top: 50%; left: 50%; padding-top: 100px; width: 100px; background-image: url("../images/loader_icon_pc.gif"); background-position: center center; background-repeat: no-repeat;} /* 下層ページボックスデザイン -------------------------------------------------------------*/ .main_inner .box_wrapper {margin: 0 auto 16px; width: 100%; padding: 18px 23px 14px; text-align: center; background-color: #FFFFFF; position: relative; border-radius: 10px;} .password_content #error { margin: 30px 0; } /* notice_area -------------------------------------------------------------*/ .notice_area { margin: 40px auto 0; padding: 24px 32px; background: #fff; font-size: 14px; border-radius: 10px;} .notice_area .notice_title { color: #00A0E9; font-size: 16px; margin-bottom: 12px; text-align: center;} /* circle_list -------------------------------------------------------------*/ .circle_list { padding-left: 20px; } .circle_list li { list-style-type: disc; margin: 0 0 10px; } /* 商品一覧のスタイル -------------------------------------------------------------*/ .item_list {display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; gap: 25px;} .item_list.swiper-wrapper {flex-wrap: nowrap; gap: 0;} .item_list .box {width: calc((100% - 75px) / 4);} .item_list .box > div {height: 100%;} .item_list .box a, .item_list .box .box_inner {display: flex; flex-direction: column; overflow: hidden; position: relative; height: 100%; color: #666666;} .item_list .box .text_box {display: flex; flex-direction: column; margin: 10px 0px 16px; height: 100%;} .item_list .box .text_box .name {margin: 0 0 8px; font-size: 14px; color: #666666; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} .item_list .box .price {margin: auto 0 0; text-align: end; font-size: 11px; color: #a09e98;} .item_list .box .price .teika {display: block; position: relative; width: fit-content; margin: 0 0 0 auto;} .item_list .box .price .teika:has(+ .sale) {font-size: 11px;} .item_list .box .price .teika:has(+ .sale)::before {position: absolute; content: ""; display: block; height: 1px; width: 100%; background: #a09e98; left: 0; top: 50%; transform: translateY(-50%);} .item_list .box .price .tax {font-size: 11px;} .item_list.small .box > a {background: transparent; box-shadow: none; color: #fff;} /* .item_list.small.swiper-wrapper .box a {padding-right: 5px;} */ .item_list.small .box .price {margin: 0;} .item_list.small .box .img_box {overflow: hidden;} .item_list.small .box .text_box {margin: 12px 4px 0; padding: 0; height: 104px;} .swiper-container:has(.item_list.small) ~ .swiper-button-next, .swiper-container:has(.item_list.small) ~ .swiper-button-prev {top: calc((100% - 104px) / 2);} .swiper-button-prev, .swiper-button-next {width: 61px; height: 55px;} .swiper-button-prev::after, .swiper-button-next::after {content: ""; display: block; background: url(../images/icon/arrow_cercle.png) no-repeat center/100%; width: 61px; height: 55px; transition: 0.3s;} .swiper-button-next::after{background: url(../images/icon/arrow_cercle_next.png) no-repeat center/100%;} .swiper-button-prev {left: -56px;} .swiper-button-next {right: -56px;;} .swiper-button-disabled {display: none;} .swiper-container-wrapper {position: relative;} /* 商品一覧、商品詳細ページアイコン類 -------------------------------------------------------------*/ .item_icon {color: #FFFFFF; display: inline-block; font-size: 10px; padding: 0 6px 0; border: 1px solid; border-radius: 9px; line-height: 18px; margin: 0 4px 5px 0; text-align: center;} .item_icon.light_blue{background-color: #00a0e9; border-color: #00a0e9;} .item_icon.line_light_blue{background-color: #fff; border-color: #00a0e9; color: #00a0e9;} .item_icon.pink{background-color: #f094a7; border-color: #f094a7;} .item_icon_list {margin: 0 0 4px; font-size: 0;} .item_icon_list .item_icon_list {width: fit-content; margin: 0; display: inline-block;} .item_icon_list:last-child .item_icon:last-child {margin-right: 0;} .item_soldout {position: absolute; font-size: 18px; content: ""; display: block; width: 100%; height: 100%; background: rgba(103, 116, 125, 0.3); top: 0; left: 0; border: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; z-index: 10; font-weight: 400; font-family: "M PLUS Rounded 1c", sans-serif;}/*品切*/ /*ポイント交換不可*/ .item_soldout.point {background: rgba(0, 0, 0, 0.5);} .item_soldout.point span{font-size: 20px;font-family: "M PLUS Rounded 1c", sans-serif;} /* ================================================================= 3.コンテナ・サイドバー・メインコンテンツ =================================================================*/ /* container - サイドバー・メインコンテンツを格納するコンテナ -------------------------------------------------------------*/ #container {padding: 156px 0 0; flex: 1;} /* main - コンテナ内メインコンテンツ -------------------------------------------------------------*/ #main {padding: 66px 0;} #main.pb0{padding-bottom: 0;} #main .pb{padding-bottom: 66px;} #main table {margin: 8px auto; width: 100%; border-spacing: 0; border-radius: 10px; overflow: hidden;} #main th {padding: 7px 16px; text-align: left; background-color: #edeff0; border-bottom: 1px solid #cfcfcf;} #main th.title {width: 222px;} #main td {vertical-align: middle; padding: 12px 16px; background-color: #FFFFFF; display: table-cell; border-bottom: 1px solid #cfcfcf;} #main tr:last-child th ,#main tr:last-child td{border-bottom: none;} #main .main_inner {padding: 0 16px; width: 100%; max-width: 922px; margin: 0 auto;} #main .main_inner.wide {max-width: unset; padding: 0 6vw;} #main .link_text {text-decoration: underline; color: #00A0E9;} #main .button_caption {width: 100%; text-align: center; display: block;} section.section {margin: 56px 0;} #main .important_text {display: flex; gap: 8px; align-items: center;} #main .important_text .important {color: #DA4636; min-width: fit-content;} /* リキャプチャー機能用 -------------------------------------------------------------*/ #main #reCAPTCHA{width: 304px;} /* お問い合わせページ画像項目用 -------------------------------------------------------------*/ #main .apply_area img{max-width: 100%;} /* フォーム類部品 -------------------------------------------------------------*/ input::placeholder {color: rgba(0, 0, 0, 0.4);} input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea {border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding: 10px; border-radius: 8px; font-size: 14px; border: 1px solid #CFCFCF;} select {padding: 10px 24px 10px 10px; vertical-align: middle; border: none; border-radius: 10px; background: url(../images/icon/link_arrow_below_black.svg) no-repeat right 6px top 17px / 10px; -webkit-appearance: none; appearance: none; background-color: #fff; color: #666666; min-width: 64px; font-size: 16px; border: 1px solid #CFCFCF;} input,textarea, select, button {} input[type='radio'] {display: inline-block; opacity: 0; position: absolute;} input[type='radio'] + label, label:has(input[type='radio']) {margin: 6px 16px 6px 28px; position: relative; display: inline-block;} input[type='radio'] + label:before, label:has(input[type='radio'])::before {content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 9999px; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); left: -26px; border: 1px solid #CFCFCF;} input[type='radio']:checked + label:after, label:has(input[type='radio']:checked)::after {content: ''; display: inline-block; width: 12px; height: 12px; background: #00A0E9; border-radius: 9999px; position: absolute; top: 50%; transform: translateY(-50%); left: -22px;} input[type='radio']:checked + label:before, label:has(input[type='radio']:checked)::before {border: 1px solid #00A0E9;} input[type='checkbox'] {display: inline-block; opacity: 0; position: absolute;} input[type='checkbox'] + label {margin: 0 16px 0 28px; position: relative; display: inline-block;} input[type='checkbox'] + label:before {content: ''; display: inline-block; width: 18px; height: 18px; background: #fff; position: absolute; top: 50%; margin-top: -10px; left: -26px; border-radius: 3px; border: 1px solid #CFCFCF;} input[type='checkbox']:checked + label::before {background: #00A0E9; border: 1px solid #00A0E9;} input[type='checkbox']:checked + label:after {content: ''; display: block; position: absolute; top: 50%; left: -22px; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(0, -75%) rotate(-45deg);} /* category - 商品カテゴリ -------------------------------------------------------------*/ #category{width: 190px; margin-bottom: 60px;} #category h2{background-image: url("../images/icon/black/icon_category.png"); background-size:17px 17px; background-repeat: no-repeat; background-position: left 1px; padding-left: 19px; margin-bottom: 10px; font-size: 15px;} #category li{display: inline;} #category .select{background: url("../images/marker_on.gif") 10px 10px no-repeat #C00; color: #FFF; text-decoration: none; display: block; padding: 5px 6px 6px 25px;} #category li a{display: block; padding: 5px 5px 5px 25px; background: url("../images/marker.gif") 10px 10px no-repeat; color: #333; font-size: 90%; text-decoration: none;} #category li a:link{display: block; overflow: hidden;} #category li a:hover{background: url("../images/marker.gif") 10px 10px no-repeat #CCC; color: #FFF; text-decoration: underline;} /* present - プレゼント枠 -------------------------------------------------------------*/ #present{width: 190px; margin-bottom: 60px;} #present h2{background-image: url("../images/icon/black/icon_present.png"); background-size:17px 17px; background-repeat: no-repeat; background-position: left 1px; padding-left: 19px; margin-bottom: 10px; font-size: 15px;} #present h3{display: block; padding: 0 10px 0 18px; background: url("../images/marker.gif") 6px 6px no-repeat; font-size: 90%; font-weight: normal;} #present .period{margin: 0 5px 10px 15px; font-size: 90%;} #present .all{margin: 10px 0px 0px 0px; text-align: right; font-size: 80%;} /* coupon - クーポン -------------------------------------------------------------*/ #coupon{width: 190px; margin-bottom: 60px;} #coupon h2{background-image: url("../images/icon/black/icon_coupon.png"); background-size:17px 17px; background-repeat: no-repeat; background-position: left 1px; padding-left: 19px; margin-bottom: 10px; font-size: 15px;} #coupon p{margin: 0 10px; font-size: 80%;} #coupon img{display: block; margin: 0 auto;} /* wpadmin debug */ .wp-admin input[type='checkbox']{opacity:1 !important;} .wp-admin .block-editor-iframe__html a{color:#00A0E9;text-decoration:underline;} /* ================================================================= 6.extファイル用 使用ファイル：ext/company.html 　　　　　　　ext/tokushou.html 　　　　　　　ext/guide.html =================================================================*/ #ext p { margin-bottom: 28px; line-height: 1.533333333333333; } #ext p:not([class]) + p:not([class]) { margin-top: -4px; } #ext p:not([class]) + ul , #ext p:not([class]) + ol { margin-top: -10px; } #ext ul + p, #ext ol + p { margin-top: 24px; } #ext .text_red { color: #DA4636; } #ext .text_bold { font-weight: bold; } #ext ul li, #ext ol li { margin-bottom: 2px; } #ext .list_disc > li { list-style-type: disc; margin-left: 20px; } #ext .list_decimal > li { list-style-type: decimal; margin-left: 20px; } #ext .list_parenthesis > li { counter-increment: cnt; position: relative; padding-left: 30px; } #ext .list_parenthesis > li::before { content: "(" counter(cnt) ") "; position: absolute; top: 0; left: 0; } #ext li a:not(.button) { color: #00A0E9; text-decoration: underline;} #ext th { min-width: 222px; vertical-align: top; padding: 16px; } #ext td { padding: 16px; } #ext td a { color: #00A0E9; text-decoration: underline; } /* ご利用ガイド -------------------------------------------------------------*/ #ext.guide .guide_index { margin: 40px auto 78px; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 8px; } #ext.guide .guide_index li { width: calc((100% - (8px * 3)) / 4); list-style-type: none; margin: 0; height: 50px; } #ext.guide .guide_index li a { display: flex; align-items: center; justify-content: flex-start; height: 100%; border: 1px solid #00A0E9; position: relative; padding: 0 30px 0 12px; font-size: 14px; background: #FFF; text-decoration: none;border-radius:25px;} #ext.guide .guide_index li a::after {content:""; background: url(../images/icon/link_arrow_blue.svg) no-repeat center/contain; display: block; height: 12px; width: 8px; position: absolute; top: 50%; right: 15px; transform: rotate(90deg) translateX(-50%);} #ext.guide .guide_index li a .button_text { position: relative; line-height: 1.25; display: block; } #ext span.indent { display: inline-block; } #ext .normal_title { margin: 40px 0 20px; } #ext .small_title { margin: 36px 0 12px; } #ext .x_small_title { margin: 32px 0 10px; } #ext .guide_img img { max-width: 100%; height: auto; margin: 10px 0; } #ext.guide .guide_content *:first-child > .medium_title:first-child { margin-top: 0; } #ext span.indent { display: inline-block; } #ext .normal_title { margin: 40px 0 20px; } #ext .small_title { margin: 36px 0 12px; } #ext .x_small_title { margin: 32px 0 10px; } #ext .guide_img img { max-width: 100%; height: auto; margin: 10px 0; } /* よくあるご質問 -------------------------------------------------------------*/ #ext.faq .faq_list dl { position: relative;} #ext.faq .faq_list dt { margin: 15px 0 0 ;padding: 25px 50px 25px 60px; cursor:url(../images/cursor.cur),auto; font-size: 16px; position: relative; background: #FFFFFF; border-radius: 10px; color: #00A0E9;} #ext.faq .faq_list dt span {position: absolute; left: 20px; top: 20px; font-size: 24px; } #ext.faq .faq_list dt::after, #ext.faq .faq_list dt::before {content: ""; background: #00A0E9; position: absolute; display: block; top: 50%; transform: translateY(-50%); right: 24px; width: 21px; height: 1.5px; transition: 0.3s;} #ext.faq .faq_list dt::before {transform: rotate(90deg);} #ext.faq .faq_list dt.open:before {opacity: 0;} #ext.faq .faq_list dt.open::before {transform: rotate(90deg);} #ext.faq .faq_list .answer {margin: 2px auto 25px; padding: 24px 32px 32px; display: none; position: relative; background: #FFFFFF; border-radius: 10px;} #ext.faq .faq_list .answer > *:last-child { margin-bottom: 0; } #ext.faq .faq_list .answer .link {margin-top: 5px;} /* 特商 -------------------------------------------------------------*/ #ext.tokushou .tokushou_table td *:first-child { margin-top: 0; } #ext.tokushou .tokushou_table td .small_title { font-size: 16px; } #ext.tokushou .tokushou_table td .x_small_title { font-size: 15px; } #ext.tokushou .tokushou_table td img { max-width: 100%; height: auto; margin: 10px 0; } /* 特集一覧 -------------------------------------------------------------*/ #ext.feature_list #featureListParent {gap: 24px; display: flex; flex-wrap: wrap; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0 6vw;} #ext .feature_list .feature_item {width: calc((100% - (24px * 3)) / 4); margin: 0;} #ext .feature_list .feature_item .img_box {background: #FFFFFF; border-radius: 10px;} #ext .feature_list .feature_item .img_box::after {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 103.5%; height: 103.5%;} #ext .feature_list .feature_item img {padding: 3%;} #ext .feature_list .feature_item .feature_text {line-height: 1.3; margin: 12px auto 0; padding: 12px 24px; background-color: #FFF; border-bottom: 10px; text-align: center; max-width: 300px; position: relative; min-height: 60px; display: flex; align-items: center; justify-content: center;} #ext .feature_list .feature_item .feature_text::before, #ext .feature_list .feature_item .feature_text::after, #ext .feature_list .feature_item .feature_text span::before, #ext .feature_list .feature_item .feature_text span::after {content: ""; display: block; width: 2px; height: 2px; position: absolute; background: #00a0e9; top: 4px; left: 3px; border-radius: 9999px;} #ext .feature_list .feature_item .feature_text::after {bottom: 4px; top: unset;} #ext .feature_list .bofeature_itemx .feature_text span::before {left: unset; right: 3px;} #ext .feature_list .feature_item .feature_text span::after {top: unset; bottom: 4px; left: unset; right: 3px;} /* 初めての方へ -------------------------------------------------------------*/ #ext.beginner .flx {justify-content:center;} #ext.beginner .flx p.taC{width:46%;padding:2%;} #ext.beginner .shortbtn{width:90%;max-width:380px;margin:auto;} #ext.beginner .full {margin: 0 calc(50% - 50vw);width: 100vw;} #ext.beginner .bgwhite{padding-top: clamp(0.5rem, 2vw, 1.5rem);padding-bottom: clamp(0.5rem, 2vw, 1.5rem);margin-bottom: clamp(0.5rem, 2vw, 1.5rem);} #ext.beginner .ttl{color:#00a0e9;font-size:120%;font-weight:bold;} #ext.beginner .bnr_area{display:flex;flex-wrap:wrap;} #ext.beginner .bnr_area > div{width:calc(50% - 20px);margin: 0 10px;} /* ショップについて -------------------------------------------------------------*/ #main:has(#ext.about_shop) {padding-top: 0;} #ext.about_shop .bg_img {background-image: linear-gradient(170deg, rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.8) 0%), url(../images/shopinfo_main.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;height: 35vh;margin-bottom: 60px;display: flex;justify-content: center;align-items: center;text-align: center;} #ext.about_shop .bg_img h2 {text-align: center;margin: 0;display: flex;flex-direction: column;align-items: center;} #ext.about_shop .bg_img h2 span {color: #FFF;text-align: center;display: flex;} #ext.about_shop .post-goods li {background-image: url(../images/shop/bg_post_detail.png);background-position: center top;background-size: 100%;background-repeat: no-repeat;padding: 2em;margin: 0 1em;aspect-ratio: 1/0.85;justify-content: center;align-items: center;font-size: 14px;} #ext.about_shop .post-goods li img {width: 100%;aspect-ratio: 4/2.6;-o-object-fit: cover;object-fit: cover;} #ext.about_shop .post-goods li p {margin-top: 10px;} @media screen and (max-width: 767px) { #ext.about_shop .post-goods li {padding: 1em;margin: 0 10px 0 0;font-size: 10px;} #ext.about_shop .post-goods li p {margin-top: 0;} } #ext.about_shop .full {margin: 0 calc(50% - 50vw);width: 100vw;} #ext.about_shop .map_btn{width:100%;max-width:380px;margin:auto;} /* awoo AI item_list_awoo.xhtml -------------------------------------------------------------*/ #main:has(#awoo-category-page) {padding-bottom: 0;} #awoo-category-page {margin: 0 auto; position: relative; width: 100%; max-width: 1232px; padding: 0 16px;} #awoo-category-page .category-page-h1-v2 {position: relative; max-width: 888px; margin: 0 auto 56px; color: #0c3f64; font-size: 28px; text-align: center; justify-content: center; line-height: 1.5; font-family: "M PLUS Rounded 1c", sans-serif;} #awoo-category-page .category-page-h1-v2:after {position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); content: ""; background: url(../images/border_large_title.svg) no-repeat center/100%; display: block; width: 100%; height: 8px;} #awoo-category-page .suggestion-tag-dropdown-v2 {pointer-events: none; text-align: start; align-items: center; gap: 8px; padding: 0; font-size: 36px; text-align: center; position: relative; z-index: 10; font-weight: normal; border: none; background: none; justify-content: flex-start;} #awoo-category-page .suggestion-tag-dropdown-v2 svg {display: none;} #awoo-category-page .suggestion-tag-dropdown-v2 .suggestion-tag-title-v2 {font-size: 20px; margin: 0; background: #FFFFFF; display: inline-block; padding: 10px 25px 0 25px; text-align: center; border-radius: 10px; color: #00a0e9; position: relative; left: 50%; transform: translateX(-50%); top: 10px; font-weight: normal;} #awoo-category-page .suggestion-tag-block-v2 {margin: 0;} #awoo-category-page .suggestion-tag-v2 {position: relative; padding: 80px 0;} #awoo-category-page .suggestion-tag-v2:before {content: ""; background-color: #f3e5b8; width: 100vw; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0;} #awoo-category-page .suggestion-tag-wrapper-v2 {position: relative;} #awoo-category-page .suggestion-tag-list-container-v2 {background: #FFFFFF; padding: 30px 20px; border-radius: 10px; margin-top: 0; gap: 6px 8px;} #awoo-category-page .suggestion-tag-list-container-v2 .awoo-tag { border: 0; position: relative; padding: 2px 14px; color: #00a0e9; border: 1px solid #00A0E9; font-size: 13px; background: #FFFFFF; border-radius: 9999px; transition: 0.3s; display: inline-block; margin: 0;} #awoo-category-page .right-block-v2 {position: relative; padding: 24px 0 15px; width: 100%; max-width: 1200px; margin: 0 auto;} #awoo-category-page .selector-group-v2 .select {border-radius: 10px; color: #00a0e9; border: 1px solid #00a0e9; background: url(../images/icon/link_arrow_below_blue.svg) no-repeat right 6px top 17px; background-color: #FFFFFF; background-size: 17px 9px; padding: 10px 24px 10px 10px;} #awoo-category-page .selector-group-v2 .select .select-name {padding: 0;} #awoo-category-page .selector-group-v2 .select .bottom-icon {display: none;} #awoo-category-page .selector-group-v2 .select-list {background: #FFF; color: #666666; padding: 0; overflow: hidden; box-shadow: none; border-radius: 10px; border: 1px solid #00a0e9;} #awoo-category-page .selector-group-v2 .select-item:hover, #awoo-category-page .selector-group-v2 .select-item-focus {background: #00a0e9; color: #fff} #awoo-category-page .products-wrapper-v2 {gap: 25px; padding: 0; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 1200px; margin: 0 auto;} #awoo-category-page .products-wrapper-v2 .product-detail-wrapper {padding: 12px 12px 16px;} #awoo-category-page .products-wrapper-v2 .product__href {background: #fff; display: block; border-radius: 4px; overflow: hidden;} #awoo-category-page .products-wrapper-v2 .product-image {transition: 0.2s; background-size: 100%; border-radius: 10px; overflow: hidden;} #awoo-category-page .products-wrapper-v2 .out-of-stock {height: 100%; display: flex!important; justify-content: center; align-items: center; background: rgba(103, 116, 125, 0.3); font-family: "M PLUS Rounded 1c", sans-serif;} #awoo-category-page .products-wrapper-v2 .product__name {margin: 0 0 8px; color: #666666;} #awoo-category-page .products-wrapper-v2 .product__name:hover {text-decoration: none;} #awoo-category-page .products-wrapper-v2 .product__price {text-align: end; margin: 0 0 0 auto;} #awoo-category-page .products-wrapper-v2 .product__price .product-price {font-size: 11px; color: #a09e98;} #awoo-category-page .products-wrapper-v2 .product__price .product-price .tax {font-size: 11px; } #awoo-category-page .pagination-wrapper-v2 .awoo-pagination {margin: 32px 0 64px; display: flex;gap: 8px;align-items: center;justify-content: center;text-align: center;} #awoo-category-page .pagination-wrapper-v2 .awoo-pagination li {background: #FFFFFF; border-radius: 100px; width: 38px; height: 38px; display: inline-block; position: relative; font-size: 18px;} #awoo-category-page .pagination-wrapper-v2 .awoo-pagination li a {color: #00a0e9;} #awoo-category-page .pagination-wrapper-v2 .awoo-pagination li svg {display: none;} #awoo-category-page .pagination-wrapper-v2 .awoo-pagination li.disabledBtn {display: none;} #awoo-category-page .pagination-wrapper-v2 .awoo-pagination li.selected {background: #00a0e9; color: #FFFFFF;} #awoo-category-page .pagination-wrapper-v2 .awoo-pagination li.selected a {background: unset; color: inherit; display: block;} #awoo-category-page .pagination-wrapper-v2 .awoo-pagination li.next:before {background: url(../images/icon/link_arrow_white.svg) no-repeat center / 100%; content: ""; display: block; width: 8px; height: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #awoo-category-page .pagination-wrapper-v2 .awoo-pagination li.previous:before {background: url(../images/icon/link_arrow_white.svg) no-repeat center / 100%; content: ""; display: block; width: 8px; height: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(-1, 1);} /* awoo AI search_result_awoo.xhtml -------------------------------------------------------------*/ #main:has(#awoo-search-result-page) {padding-bottom: 0;} .main_inner:has(#awoo-search-result-page) {max-width: 1232px;} #awoo-search-result-page {display: flex; flex-direction: column; width: 100%; max-width: 1200px; margin: 0 auto;} #awoo-search-result-page .suggestion-tag {position: relative;padding: 80px 0; order: 10;} #awoo-search-result-page .suggestion-tag:before {position: absolute; content: ""; background-color: #f3e5b8; width: 100vw; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0;} #awoo-search-result-page .suggestion-tag-wrapper {position: relative; padding: 0; background: transparent; border-radius: 10px;} #awoo-search-result-page .suggestion-tag-wrapper .awoo-tag-wrapper {position: relative; gap: 6px 8px;} #awoo-search-result-page .suggestion-tag-wrapper .suggestion-tag-title {font-size: 20px; margin: 0; background: #FFFFFF; display: inline-block; padding: 10px 25px 0 25px; text-align: center; border-radius: 10px; color: #00a0e9; position: relative; left: 50%; transform: translateX(-50%); top: 10px; font-weight: normal;} #awoo-search-result-page .suggestion-tag-wrapper .suggestion-tag-list-container{background: #FFFFFF; padding: 30px 20px; border-radius: 10px;} #awoo-search-result-page .suggestion-tag-wrapper .awoo-tag {border: 0; position: relative; padding: 2px 14px; color: #00a0e9; border: 1px solid #00A0E9; font-size: 13px; background: #FFFFFF; border-radius: 9999px; transition: 0.3s; display: inline-block; margin: 0;} #awoo-search-result-page .control-wrapper {margin: 0; position: relative; padding: 24px 0 15px; gap: 8px; justify-content: flex-end;} #awoo-search-result-page .control-wrapper .display-mode-wrapper {display: none;} #awoo-search-result-page .control-wrapper .selector-label {display: none;} #awoo-search-result-page .control-wrapper .left-block {display: none;} #awoo-search-result-page .control-wrapper .right-block {flex-direction: row; gap: 8px;} #awoo-search-result-page .control-wrapper .two-control {margin: 0;} #awoo-search-result-page .control-wrapper .select {border-radius: 10px; color: #00a0e9; border: 1px solid #00a0e9; background: url(../images/icon/link_arrow_below_blue.svg) no-repeat right 6px top 17px; background-color: #FFFFFF; background-size: 17px 9px; padding: 10px 24px 10px 10px;} #awoo-search-result-page .control-wrapper .select {border-radius: 10px; color: #00a0e9; border: 1px solid #00a0e9; background: url(../images/icon/link_arrow_below_blue.svg) no-repeat right 6px top 17px; background-color: #FFFFFF; background-size: 17px 9px; padding: 10px 24px 10px 10px;} #awoo-search-result-page .control-wrapper .select .select-name {padding: 0;} #awoo-search-result-page .control-wrapper .select .bottom-icon {display: none;} #awoo-search-result-page .control-wrapper .select-list {background: #FFF; color: #666666; padding: 0; overflow: hidden; box-shadow: none; border-radius: 10px; border: 1px solid #00a0e9;} #awoo-search-result-page .control-wrapper .select-item:hover, #awoo-search-result-page .control-wrapper .select-item-focus {background: #00a0e9; color: #fff} #awoo-search-result-page .products-wrapper-v2 {padding: 0; gap: 25px; grid-template-columns: repeat(4, 1fr);} #awoo-search-result-page .products-wrapper-v2 .product-detail-wrapper {padding: 12px 12px 16px;} #awoo-search-result-page .products-wrapper-v2 .product__href {background: #fff; display: block; overflow: hidden;} #awoo-search-result-page .products-wrapper-v2 .product-image {transition: 0.2s; background-size: 100%; border-radius: 10px; overflow: hidden;} #awoo-search-result-page .products-wrapper-v2 .out-of-stock {height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(103, 116, 125, 0.3); font-size: 18px;} #awoo-search-result-page .products-wrapper-v2 .product__name {margin: 0 0 8px; color: #666666;} #awoo-search-result-page .products-wrapper-v2 .product__name:hover {text-decoration: none;} #awoo-search-result-page .products-wrapper-v2 .product__price {text-align: end; color: #a09e98; font-size: 11px; margin: 0 0 0 auto;} #awoo-search-result-page .products-wrapper-v2 .product__price .product-price {font-size: 11px; color: #a09e98;} #awoo-search-result-page .products-wrapper-v2 .product__price .product-price .tax {font-size: 10px; } #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination {margin: 32px 0 64px; display: flex;gap: 8px;align-items: center;justify-content: center;text-align: center;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li {color: #00a0e9; border-radius: 100px; width: 38px; height: 38px; line-height: 38px; display: inline-block; background: #FFFFFF; position: relative; font-size: 18px;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li a {color: #00a0e9;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li svg {display: none;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li.disabledBtn {display: none;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li.selected {background: #00a0e9; color: #FFFFFF} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li.selected a {background: unset; color: inherit; display: block;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li.next:before {background: url(../images/icon/link_arrow_blue.svg) no-repeat center/100%; content: ""; display: block; width: 8px; height: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li.previous:before {background: url(../images/icon/link_arrow_blue.svg) no-repeat center/100%; content: ""; display: block; width: 8px; height: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #awoo-search-result-page .pagination-wrapper-v2 .total-count {display: none;} #awoo-search-result-page .no-data-wrapper-v2 {color: #fff; z-index: 1; position: relative; padding: 34px 0 0;} #awoo-search-result-page .no-data-wrapper-v2 .related-wrapper {margin: 187px 0 0;position: relative;padding: 80px 0;} #awoo-search-result-page .no-data-wrapper-v2 .related-wrapper:before {content: ""; background-color: #FFF; width: 100vw; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0;} #awoo-search-result-page .no-data-wrapper-v2 .related-title {background: #0c3f64; line-height: 1.14; margin: 0 0 40px; padding: 40px 0 0; font-size: 36px; text-align: center; position: relative; z-index: 10; font-weight: normal;} #awoo-search-result-page .no-data-wrapper-v2 .rec-carousel {height: 373.188px; width: calc(100% + 15px); margin: 0px -16px 0px 0px;} #awoo-search-result-page .no-data-wrapper-v2 .rec-slider-container {margin: 0;} #awoo-search-result-page .no-data-wrapper-v2 .related-product {margin: 0 16px 0 0; padding: 0;} #awoo-search-result-page .no-data-wrapper-v2 .related-product-img {width: 100%; height: auto; position: relative; border-radius: 4px; overflow: hidden; } #awoo-search-result-page .no-data-wrapper-v2 .related-product-img img {display: block; transition: 0.2s;} #awoo-search-result-page .no-data-wrapper-v2 .related-product-name {color: #fff; margin: 12px 4px 8px; text-align: left; line-height: 1.5; height: unset;} #awoo-search-result-page .no-data-wrapper-v2 .product-price {color: #fff; font-size: 18px; text-align: end;} #awoo-search-result-page .no-data-wrapper-v2 .carousel-arrow {content: ""; display: block; background: url(../images/icon/arrow_cercle.png) no-repeat center/100%; width: 40px; height: 40px; opacity: 0.88; transition: 0.3s; border: 0; left: -50px; top: calc((100% - 110px) / 2); z-index: 11; width: 40px; height: 40px;} #awoo-search-result-page .no-data-wrapper-v2 .carousel-arrow svg {display: none;} #awoo-search-result-page .no-data-wrapper-v2 .carousel-arrow.NEXT {transform: rotate(180deg); right: -52px; left: unset; } #awoo-search-result-page .liCpEx .lazyload-wrapper div{display:flex !important} /* ================================================================= 7.トップページ 使用ファイル：top.xhtml =================================================================*/ /* mainvisual - メインビジュアル -------------------------------------------------------------*/ /* #top #mainvisual .slider-thumbnail .swiper-slide:last-child {margin-right: 0!important;} */ #top #mainvisual {background: #FFFFFF;} #top #mainvisual .swiper {width: 100%; position: relative;} #top #mainvisual .swiper-slide img{display: block;} #top #mainvisual .swiper-slide-next,#mainvisual .swiper-slide-prev{ opacity: 0.25;} #top #mainvisual .swiper-button-next{right: calc(50% - 22.5vw);top: calc(50% - 28px);} #top #mainvisual .swiper-button-prev{left: calc(50% - 22.5vw);top: calc(50% - 28px);} #top #mainvisual .swiper-pagination{position: static; padding-top: 25px; background: url(../images/bg/bg.png) center / cover no-repeat;} #top #mainvisual .swiper-pagination-bullet{background: none; background-image: url("../images/icon/pagination.png"); background-repeat: no-repeat; background-size: contain; width: 29px; height: 27px;} #top #mainvisual .swiper-pagination-bullet.swiper-pagination-bullet-active{background-image: url("../images/icon/pagination_active.png");} #top #mainvisual .swiper-pagination-bullet{opacity: 1;} @media screen and (max-width: 768px) { #top #mainvisual .swiper-pagination-bullet{width: 20px; height: 19px;} #top #mainvisual .swiper-button-next{right: 4px; top: calc(50% - 16px);} #top #mainvisual .swiper-button-prev{left: 4px; top: calc(50% - 16px);} #top #mainvisual .swiper-pagination{padding-top: 10px;} } /* top -------------------------------------------------------------*/ #top .scroll {opacity: 1; visibility: visible; transform: translateY(0px); z-index: 10; position: relative;} #top .section {padding: 40px 0;} .section .section_inner {margin: 0 auto; padding: 0 16px; max-width: 1200px;} /* importantInfo - 重要なお知らせ -------------------------------------------------------------*/ #top #important_info {margin: 10px 0; padding: 20px 0;} #top #importantInfo {color: #666666; background: #fff; width: 100%; font-size: 16px; border-radius: 10px;} #top #importantInfo a {color: #666666; padding: 18px 20px; display: flex; gap: 20px; text-align: center;} /* topics - トピックス -------------------------------------------------------------*/ #top #topics {margin: 0 auto; padding-bottom: 20px;} #top #topics .section_inner {position: relative;} #top #topics .section_inner::after{position: absolute; content: ""; display: block; width: 106px; height: 121px; background: url(../images/gian.png) no-repeat center / contain; bottom: -65px; right: 0; z-index: 1;} #top #topics .tabs {margin: 12px 0 4px; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 6px 5px; -ms-overflow-style: none; scrollbar-width: none; .content::-webkit-scrollbar: display:none;} #top #topics .tabs li {padding: 1px 15px; border: 1px solid #00a0e9; border-radius: 9999px; white-space: nowrap; font-size: 14px; cursor:url(../images/cursor.cur),auto; color: #00a0e9; background: #fff;} #top #topics .tabs li.active {background-color: #0c3f64; border: 1px solid #0c3f64; color: #FFFFFF; position: relative; cursor: inherit;} #top #topics .topics_list {margin: 0 0 16px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 0 40px;} #top #topics .topics_list .box.animation_active{opacity: 1; visibility: visible; transform: translateY(0px);} #top #topics .topics_list .box {width: calc((100% - 40px) / 2); padding: 12px 0; position: relative; opacity: 0; visibility: hidden; transform: translateY(50px); transition: opacity 1s, visibility 1s, transform 1s;} #top #topics .topics_list .box a {display: flex; gap: 20px; align-items: center; justify-content: flex-start;} #top #topics .topics_list .img_box {padding: 0; width: 100%;min-width: 100px; max-width: 100px; height: 100%; min-height: 100px; border-radius: 10px;} #top #topics .topics_list .info {display: flex; align-items: center; gap: 5px; font-size: 16px; margin: 0 0 8px; flex-wrap: wrap;} #top #topics .topics_list .info .item_icon {font-size: 14px; margin: 0; border-radius: 12px; padding: 1px 15px; white-space: nowrap;} #top #topics .topics_list .text {margin: 0 0 10px 0; font-size: 14px;} #top #topics .topics_list:not(.active) { display: none; } /* ピックアップ new - 新着商品 -------------------------------------------------------------*/ #top #new {margin: 0; padding: 40px 60px 20px; background: #f3e5b8;} #top #new .section_inner{position: relative;} #top #new .section_inner::after{position: absolute; content: ""; display: block; width: 56px; height: 121px; background: url(../images/shizuka.png) no-repeat center / contain; bottom: -154px; right: -56px;} #top #new .section_inner::before{position: absolute; content: ""; display: block; width: 61px; height: 120px; background: url(../images/nobita.png) no-repeat center / contain; bottom: -157px; left: -61px; z-index: 1;} #top #new .box {position: relative;} /* ブランドコンセプト -------------------------------------------------------------*/ #top #concept {margin: 0; padding:0; position: relative; z-index: 10;background: url(../images/bg/shopinfo_main_bg.png) no-repeat center / cover;} #top #concept .section_inner {position: relative; display: flex;align-items: center; gap: 20px;} #top #concept .text_box {max-width: 510px; text-align: left; width: 100%;} #top #concept .text_box_inner {position: relative; height: 100%; width: 100%; padding: 50px 0 20px; display: flex; flex-direction: column; justify-content: center;} #top #concept .text_box .large_title{margin: 0 0 25px 0; text-align: left;} #top #concept .text_box .large_title::after{display: none;} #top #concept .text_box .large_title .inner {font-weight: bold; margin-top: 0; font-size: 24px; color:#0c3f64; display: block; font-family: "Noto Sans JP", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif;} #top #concept .text_box .large_title .main {display: block; font-size: 18px; color: #00a0e9; letter-spacing: 0.12em;} #top #concept .text_box p {margin: 0 0 8px; font-size: 14px; line-height: 1.75; color: #666666; } #top #concept .img_box {max-width: 686px; display: flex; flex: auto; position: relative; left: 100px;} #top #concept .img_box.sp{display: none;} #top #concept .img_box img.shop_img {width: 686px; max-width: none;} #top #concept .concept_txt + .concept_txt{margin-top: 10px; display: inline-block;} #top #concept .button_area{margin-top: 25px;} /* feature - 特集 -------------------------------------------------------------*/ #top #feature {margin:0 0 20px; position: relative;} #top #feature .feature_list{display: flex; flex-wrap: wrap; gap: 45px;} #top #feature .feature_list img{vertical-align: top;} #top #feature .swiper-container-wrapper{margin-top: 62px;} #top #feature .feature_lists{width: calc((100% - 90px) / 3);} #top #feature .feature_lists .img_box{padding: 0; width: 100%; border-radius: 0;} #top #feature .feature_lists p {margin: 5px 0; font-size: 14px;} #top #feature .feature_lists p::before, #top #feature .feature_lists p span {overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} #top #feature .button_area {margin-bottom: 0;} /* ranking - 人気商品ランキング -------------------------------------------------------------*/ #top #ranking {background: #fff; position: relative; margin: 0;} #top #ranking .section_inner{padding: 0 2vw; max-width: none;} #top #ranking .box a {padding-top: 36px; color: #000;} #top #ranking .box a h3 {position: absolute; padding: 14px 0 0 0; width: 46px; height: 32px; left: 0; top: 0; z-index: 11; text-align: center; color: #fff; font-size: 18px; line-height: 1; font-family: "M PLUS Rounded 1c", sans-serif;} #top #ranking .box .price .sale + .teika::before {background: #000;} #top #ranking .box#ranking_no1 a h3 {background: url(../images/icon/ranking_no1.png) no-repeat center/100%;} #top #ranking .box#ranking_no2 a h3 {background: url(../images/icon/ranking_no2.png) no-repeat center/100%;} #top #ranking .box:nth-child(3) a h3 {background: url(../images/icon/ranking_no3.png) no-repeat center/100%;} #top #ranking .box:nth-child(n + 4) a h3 {background: url(../images/icon/ranking_no4.png) no-repeat center/100%;} #top #ranking .swiper-button-next{right: calc(18vw - 50px); top: calc((100% - 68px) / 2);} #top #ranking .swiper-button-prev{left: calc(18vw - 50px); top: calc((100% - 68px) / 2);} /* free ranking access - アクセスランキング -------------------------------------------------------------*/ #access{margin-bottom: 20px; width: 100%;} #access ul{margin-top: 10px;} #access ul:after {content: ""; clear: both; display: block;}/* clearfix */ #access .box{float: left; width: 185px; margin: 0 10px 10px 0; border: #d4d4d4 1px solid; padding: 20px 0 0px;} #access h3{width: 45px; height: 20px; text-indent: -9999px; margin: 0 0 5px;} #access #ranking_no1 h3{background: url("../images/ranking_no01.gif") 0px 5px no-repeat;} #access #ranking_no2 h3{background: url("../images/ranking_no02.gif") 0px 5px no-repeat;} #access #ranking_no3 h3{background: url("../images/ranking_no03.gif") 0px 5px no-repeat;} #access #ranking_no4 h3{background: url("../images/ranking_no04.gif") 0px 5px no-repeat;} #access #ranking_no5 h3{background: url("../images/ranking_no05.gif") 0px 5px no-repeat;} #access #ranking_no6 h3{background: url("../images/ranking_no06.gif") 0px 5px no-repeat;} #access #ranking_no7 h3{background: url("../images/ranking_no07.gif") 0px 5px no-repeat;} #access #ranking_no8 h3{background: url("../images/ranking_no08.gif") 0px 5px no-repeat;} #access #ranking_no9 h3{background: url("../images/ranking_no09.gif") 0px 5px no-repeat;} #access #ranking_no10 h3{background: url("../images/ranking_no10.gif") 0px 5px no-repeat;} #access h4{margin: 0px 0px 10px; font-size: 90%; font-weight: normal; line-height: 140%; min-height: 60px;} #access .price{margin: 0px 0px 20px; font-size: 80%; color: #C00; text-align: right;} #access .text{width: 140px; margin: 0 auto;} #access .cart_button{margin-bottom: 10px;} #access .appeal{color: #F60; font-size: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} #access .img_box{width: 140px; height: 140px; margin: 0px auto 10px; text-align: center; position: relative;} #access .img_box img{width: auto; max-width: 140px; max-height: 140px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} /* itemAccessLog - 閲覧履歴 -------------------------------------------------------------*/ #itemAccessLog .box .price .teika:has(+ .sale)::before {background: #fff;} /* ================================================================= 8.カートの中身～注文完了まで、プレゼント応募～完了まで 使用ファイル：cart_index.xhtml, cart_login.xhtml 　　　　　　　cart_seisan.xhtml, cart_confirm.xhtml 　　　　　　　cart_pre.xhtml, cart_result.xhtml 　　　　　　　present_login.xhtml, present_input.xhtml 　　　　　　　present_confirm.xhtml, present_result.xhtml, 　　　　　　　member_estimate_order_input.xhtml, member_estimate_order_result.xhtml, =================================================================*/ #main.cart { padding-top: 53px; } /* cart_table - 買い物テーブル -------------------------------------------------------------*/ #main .cart_table {font-size: 14px; border-radius: 10px; overflow: hidden;} #main .cart_table th{background: #0C3F64; color: #FFFFFF;} #main .cart_table th,#main .cart_table td{border-bottom: none;} #main .cart_table .box {padding-right: 12px; } #main .cart_table .img_box {padding: 0; min-width: 80px; width: 80px; height: 80px; text-align: center; position: relative; border-radius: 4px; overflow: hidden; display: block;} #main .cart_table .img_box img {width: auto; max-width: 80px; max-height: 80px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #main .cart_table .text_box {padding-left: 0; vertical-align: middle;} #main .cart_table .text_box .code {margin: 8px 0 0; font-size: 12px;} #main .cart_table .text_box .item_name {display: inline-block; line-height: 1.2; display: block; font-weight: bold;} #main .cart_table .text_box .itam_name{display: inline-block; line-height: 1.2; display: block; font-weight: bold;} #main .cart_table .other {margin: 8px 0 0; font-size: 12px;} #main .cart_table .other:empty {display: none;} #main .cart_table .novelty_itemname {width: 120px;} #main .cart_table .novelty { width: calc(100% - 120px - 120px); } #main .cart_table .itemname {width: 108px;} #main .cart_table .amount {width: 120px;} #main .cart_table .price, #main .cart_table .subtotal {width: 160px;} #main .cart_table .delete {width: 64px;} #main .cart_table .tanka {width: 160px;} /* #main .cart_table tr:last-child td:first-child{border-bottom-left-radius: 10px;} #main .cart_table tr:last-child td:last-child{border-bottom-right-radius: 10px;} #main .cart_table tr th:first-child{border-top-left-radius: 10px;} #main .cart_table tr th:last-child{border-top-right-radius: 10px;} */ #main .cart_table .tanka {width: 160px;} #main .cart_table th .tax {font-size: 10px;} #main .cart_table td {vertical-align: middle;} #main .cart_table .point_caption {font-size: 10px;} #main .cart_table .point_caption_text {font-size: 12px;} #main .cart_table .delete_button {font-size: 19px; margin: 0 auto; padding: 0; width: 24px; height: 24px; border-radius: 9999px; line-height: 19px; border: none;} #main .cart_table .delete_button::before {content: none;} #main .cart_table .noverty_property_title { border-top: 1px solid rgba(255,255,255,.4); padding-top: 8px;margin-top: 12px; margin-bottom: 5px;} #main .cart_table .noverty_property_wrapper {display: flex; justify-content: flex-start; align-items: flex-start; gap: 16px; margin-bottom: 12px; } #main .cart_table .noverty_property { text-align: center; min-width: 60px; } #main .cart_table .noverty_property .img_box .img_wrapper:not(:first-child) {display: none; } #main .cart_table .noverty_property .img_box { margin-top: 8px; max-width: 60px; max-height: 60px; min-width: 60px; } #main .cart_table .noverty_property .img_box img { max-width: 60px; max-height: 60px; } #main .cart_table td p { margin-bottom: 0; } #main .cart_table td p.name a { color: #666666; text-decoration: none; } #main .cart_table.novelty th,#main .cart_table.novelty td { } #main .cart_table.novelty .other {margin: 5px 0 0;} section.novelty {margin-bottom: 0;} /* cartIndex - 買い物かごの中身 -------------------------------------------------------------*/ #cartFlow .important_text .important { display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: 4px; } #main #cartFlow .important_text { margin-bottom: 30px; } #cartFlow .total_wrapper {display: flex; align-items: flex-start; justify-content: space-between; margin: 8px 0 16px; padding: 14px 16px 32px; background-color: #FFFFFF; border-radius: 10px;} #cartFlow .total_wrapper .button_box { width: 174px; margin: 3px 0 0; } #cartFlow .total {margin: 0 0 0 auto; width: 320px; font-size: 14px;} #cartFlow .total dl {margin: 0 0 5px; padding: 0 8px; display: flex; align-items: flex-start; justify-content: space-between;} #cartFlow .total .syokei {position: relative; margin: 11px 0 5px; padding: 6px 8px 0; font-size: 18px; border-top: 1px solid #DDDDDD; color: #DA4636;} #cartFlow .total .tax {font-size: 10px;} #cartFlow .total .tax_rate {margin: 8px 0 0;} #cartFlow .total .button { margin-top: 27px; } #cartFlow .total dl dd { text-align:right; } #cartFlow .total dl dd .tax { display: block; margin-bottom: -2px;} #cartFlow #AmazonPayV2_area .login_amazonpay_btn{max-width: 230px; min-width: 200px; margin: 0 auto;} #cartFlow .login_amazonpay_btn{max-width: 200px; margin:0 auto;} #cartFlow .box .buttonarea.amazon_btn{margin: 10px; padding: 10px 0 0; text-align: center;} #cartFlow .box .buttonarea.amazon_btn .button.medium{max-width: 270px; width: 270px;} #cartFlow .box #AmazonPayButton{min-height: 50px;} #cartFlow .box #AmazonPayV2Button{max-width: 230px; min-width: 200px; margin: 0 auto;} #cartFlow #reCAPTCHA{margin: 20px auto 40px auto;} #cartFlow #reCAPTCHA iframe{width: 158px; height: 138px;} #cartFlow #reCAPTCHA .g-recaptcha{display: block; -webkit-transform: scale(1.19); -ms-transform: scale(1.19); transform: scale(1.19); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0;} #cartFlow .HTMLFORM_LABEL_GROUP {margin: 0 8px 0 0; width: 20px; height: 20px; display: inline-block; position: relative;} #cartFlow .HTMLFORM_LABEL_GROUP label {position: unset;} #cartFlow .HTMLFORM_LABEL_GROUP label:before {left: 0;} #cartFlow .HTMLFORM_LABEL_GROUP label:after {left: 4px;} #cartFlow input#ZIP, #cartFlow input#SEND_ZIP, #cartFlow input#SECURITY_CD {max-width: 220px;} #cartFlow input#ZIP ~ .button, #cartFlow input#SEND_ZIP ~ .button {width: 136px;} #cartFlow input#TEL, #cartFlow input#SEND_TEL {max-width: 334px;} #cartFlow #POINT_USE { width: 120px; margin-right: 10px; } #cartFlow .normal_title.border_none { margin-bottom: 16px; font-size: 19px; border: none;} #cartFlow .normal_title.border_none::before { content: unset; } #cartFlow .option_area{display: flex; align-items: center; gap:40px 5px;} #cartFlow .option_select{display: flex; align-items: center;} /*ラッピング*/ #cartFlow .p-fiftTableWrap {display: none; border-radius: 10px; overflow: hidden;} #cartFlow .p-giftList {margin: 8px 0;} #cartFlow .p-giftList .cart_table{margin: 8px 0 0 0; border-radius: 10px 10px 0 0;} #cartFlow .p-giftList .cart_table th.tanka, #cartFlow .p-giftList .cart_table th.amount, #cartFlow .p-giftList .cart_table th.price {width: 168px;} #cartFlow .p-giftList .cart_table .item_data dd, #cartFlow .p-giftList .cart_table .item_data dt {margin: 0; background: no-repeat; padding: 0; font-size: 13px;} #cartFlow .p-giftList .cart_table .item_name{font-weight: bold;} #cartFlow .p-giftList .ds-gift-error {margin: 16px 0; color: #DA4636; font-size: 14px;} #cartFlow .p-giftList .ds-gift-error:empty {display: none;} #cartFlow #ds-gift-not-setted-error {display: none; margin: 0; color: #DA4636; font-size: 12px; flex: 1; text-align: left;} #cartFlow .p-giftList.info_box { position: relative; border-radius: 10px; overflow: hidden;} #cartFlow .p-giftListInner { display: flex; align-items: stretch; justify-content: flex-start; border-radius: 10px; overflow: hidden;} #cartFlow .p-giftListInner .c-ttl01 { display: flex; align-items: center; padding: 24px 16px; width: 222px; background-color: #0C3F64; color: #FFFFFF; font-size: 14px; } #cartFlow .p-giftListInner .p-giftCheck, .p-giftSetted .p-giftListInner .button_area { padding: 17px 16px; width: calc(100% - 2px - 222px); background-color: #fff; } /* .p-giftSetted .p-giftListInner .button_area .button { width: 174px; } */ #cartFlow .p-giftTable tr.title { display: none; } #cartFlow .p-giftList.info_box .button_area {padding: 24px 16px; background-color: #FFFFFF; margin: 0; justify-content: flex-end; border-radius: 0 0 10px 10px; overflow: hidden; border-top: 1px solid #DDDDDD;} #cartFlow .p-giftList.info_box #p-giftWrapError { background: #FFFFFF; padding: 10px 16px; margin: 8px 0 0 0; border-radius: 10px; overflow: hidden;} #main .cart_table.p-giftTable .tanka { width: 170px; } #main .cart_table.p-giftTable .amount { width: 128px; } #main .cart_table.p-giftTable .subtotal { width: 170px; } #main .cart_table.p-giftTable .delete { width: 71px; } /*ラッピングのポップアップ*/ body.js_fixed { overflow: hidden; } .giftPack.delete > div { display: none !important; } #ds-gift-popup #ds-gift-popup__inner::-webkit-scrollbar { background: transparent; width:8px; } #ds-gift-popup #ds-gift-popup__inner::-webkit-scrollbar-thumb {background-color: #0C3F64; border-radius: 9999px;} #ds-gift-popup #ds-gift-popup__inner::-webkit-scrollbar-track {background-color: #0C3F64 rgba(0, 0, 0, 0);} #ds-gift-popup #ds-gift-popup__inner { scrollbar-width: thin; scrollbar-color: #0C3F64 rgba(0, 0, 0, 0); } #ds-gift-popup .medium_title { margin: 0 0 16px; } #ds-gift-popup .normal_title { margin: 20px 0 32px; padding-left: 12px; position: relative; color: #0C3F64; border-bottom: none; padding-bottom: 0;} #ds-gift-popup .normal_title::before{content: ""; background: #00A0E9; position: absolute; display: block; width: 4px; height: 22px; border-radius: 2px; left: 0px; top: 50%; transform: translateY(-50%);} #ds-gift-popup .normal_title::after{content: ""; background: #DDDDDD; position: absolute; display: block; width: 100%; height: 1px; left: 0px; bottom: -16px;} #ds-gift-popup .normal_title + p { margin: 0 0 16px; } #ds-gift-popup {display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index:999; width: 100%; height: 100%; align-items: center; justify-content: center;} #ds-gift-popup.show { z-index:9999; display:block; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:fixed;width:100%;height:100%;left:0;top:0;bottom:0;right:0;background:rgba(0,0,0,.5);} #ds-gift-popup.show .section_title {position: relative; max-width: 888px; margin: 0 auto 12px; font-size: 18px; text-align: center; color: #00A0E9;} #ds-gift-popup #p-giftItemError, #ds-gift-popup #p-giftPackError, #ds-gift-popup #p-giftMessageError {color: #DA4636; font-size: 14px; text-shadow: 0 0 #DA4636; margin: 0 0 16px;} #ds-gift-popup #p-giftItemError:empty, #ds-gift-popup #p-giftPackError:empty, #ds-gift-popup #p-giftMessageError:empty {display: none;} #ds-gift-popup .wrapping_box {margin: 0 0 40px;} #ds-gift-popup #ds-gift-popup__content {position: relative; width: 100%; height: 100%; max-width: 922px; max-height: 90vh; padding: 0 16px;} #ds-gift-popup #ds-gift-popup__inner {overflow: auto; max-height: 100%; padding: 32px 40px 40px; background: url(../images/bg/bg.png) center / cover no-repeat; border-radius: 10px;} #ds-gift-popup #ds-gift-popup__close {position: absolute; background-image: url(../images/icon/close_grey.svg); position: absolute; width: 32px; text-indent: -9999px; overflow: hidden; white-space: nowrap; border: 0; height: 32px; background-color: unset; background-repeat: no-repeat; background-position: center; display: block; cursor:url(../images/cursor.cur),auto; top: 10px; right: 24px;} #ds-gift-popup .ds-gift-option {display: flex; justify-content: flex-start; align-items: stretch; gap: 16px; flex-wrap: wrap;} #ds-gift-popup #ds-gift-target .ds-gift-option__item-inner {margin: 0; padding:0;} #ds-gift-popup .ds-gift-option__item {width: 100%; max-width: calc((100% - (16px * 4)) / 5); position: relative; overflow: hidden;} #ds-gift-popup .ds-gift-option__item p {margin: 0;} #ds-gift-popup .ds-gift-option__item .ds-gift-option__item-price {margin: 0 0 0; text-align: right;} #ds-gift-popup .ds-gift-option__item-inner {padding:0; height: 100%;} #ds-gift-popup .ds-gift-option__item-inner:before {left: -20px;} #ds-gift-popup .ds-gift-option__item-inner:after {left: -16px;} #ds-gift-popup .ds-gift-option__item-image {height: 146px; width: 100%; min-width: 146px; margin: 0 0 0; padding: 0; border-radius: 0 0 5px 5px;} #ds-gift-popup .ds-gift-option__item-title {padding: 11px 11px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} #ds-gift-popup .ds-gift-option__item p { padding: 11px 10px 8px; } #ds-gift-popup .ds-gift-option__item-text { padding: 11px 0 8px; } #ds-gift-popup .ds-gift-option__item-text p { padding: 0 10px; } #ds-gift-popup .ds-gift-option__item-text p + p { padding-top: 8px; } #ds-gift-popup #ds-giaft-want-message-card { margin: 0 0 12px; } #ds-gift-check-all-item__container { margin: 0; } #ds-gift-check-all-item__container label { margin-right: 0; } #ds-gift-check-all-item__container input[type="checkbox"] + label { margin: 0 0 16px; display: inline-block; border: 2px solid #FFFFFF; border-radius: 5px; padding: 11px 10px 9px 37px; font-size: 12px;} #ds-gift-check-all-item__container input[type="checkbox"] + label:before {left: 10px;} #ds-gift-check-all-item__container input[type="checkbox"] + label:after {left: 14px;} #ds-gift-check-all-item__container input[type="checkbox"]:checked + label {color: #00A0E9; border-color: #00A0E9;} #ds-gift-popup .ds-gift-option__item-input .HTMLFORM_LABEL_GROUP {display: none;} #ds-gift-popup .ds-gift-option__item-input .HTMLFORM_LABEL_GROUP label {position: relative;} #ds-gift-popup .ds-gift-option__item-input .HTMLFORM_LABEL_GROUP label:before {left: 0;} #ds-gift-popup .ds-gift-option__item-input .HTMLFORM_LABEL_GROUP label:after {left: 4px;} #ds-gift-popup .ds-gift-option label.box {position: relative; transition: all .3s; background: #fff; display: block; border-radius: 5px; font-size: 12px; margin: 0; padding: 0; overflow: hidden; border: 2px solid transparent;} #ds-gift-popup .ds-gift-option label.box:has(input[type='radio']:checked), #ds-gift-popup .ds-gift-option label.box:has(input[type='checkbox']:checked) {opacity: 1; transition: all .3s; border: 2px solid #00A0E9; } #ds-gift-popup .ds-gift-option label.box:has(input[type='radio']:checked)::after, #ds-gift-popup .ds-gift-option label.box:has(input[type='checkbox']:checked)::after {content:""; display: block; width: 16px; height: 16px; background: url(../images/icon/check.svg) no-repeat center/contain; position: absolute; top: 6px; right: 6px; left: auto; bottom: auto; transform: none; border: none;} #ds-gift-popup .ds-gift-option input[type='radio'] + label:before, #ds-gift-popup .ds-gift-option .ds-gift-option label:has(input[type='radio'])::before {content: none;} #ds-gift-popup .ds-gift-option input[type='radio'] + label:before, #ds-gift-popup .ds-gift-option label:has(input[type='radio'])::before {content: none;} #ds-gift-popup .ds-gift-option input[type='radio']:checked + label:after, #ds-gift-popup .ds-gift-option label:has(input[type='radio']:checked)::after .button.link::after {content:""; display: block; width: 16px; height: 16px; background: url(../images/icon/check.svg) no-repeat center/contain; position: absolute; top: 6px; right: 6px; transform: none; border: none; } #ds-gift-popup .ds-gift-option input[type="radio"]:checked + label::after, #ds-gift-popup .ds-gift-option label:has(input[type="radio"]:checked)::after {content:""; background: transparent; display: block; width: 16px; height: 16px; background: url(../images/icon/check.svg) no-repeat center/contain; position: absolute; top: 6px; right: 6px; transform: none; border: none; } #ds-gift-popup .ds-gift-option input[type='checkbox'] + label:before {content: none;} #ds-gift-popup .ds-gift-option input[type='checkbox']:checked + label::before {content:""; display: block; width: 16px; height: 16px; background: url(../images/icon/check.svg) no-repeat center/contain; position: absolute; top: 6px; right: 6px; transform: none; border: none; } #ds-gift-popup .ds-gift-option input[type='checkbox']:checked + label:after {content:""; display: block; width: 16px; height: 16px; background: url(../images/icon/check.svg) no-repeat center/contain; position: absolute; top: 6px; right: 6px; transform: none; border: none;} #ds-gift-popup .ds-gift-option label:has(input[type='checkbox']:checked)::after .button.link::after {content:""; display: block; width: 16px; height: 16px; background: url(../images/icon/check.svg) no-repeat center/contain; position: absolute; top: 6px; right: 6px; transform: none; border: none; } /*設定済ラッピング*/ .p-giftSetted {margin: 0 0 8px;} .p-giftSetted .normal_title {margin-top: 0;} .p-giftSetted .p-giftListInner .button_area { margin: 0; justify-content: flex-start; } .p-giftSetted .p-giftListInner { margin: 2px 0 0;} .p-giftSetted .p-giftSettedList__item { display: flex; align-items: stretch; justify-content: flex-start; border-radius: 10px; overflow: hidden;} .p-giftSetted .p-giftSettedList__item .c-ttl02 { display: flex; align-items: center; padding: 24px 16px; width: 222px; background-color: #0C3F64; color: #FFFFFF; font-size: 14px; } .p-giftSetted .p-giftSettedList__item [class*="item_wrapper"] { display: flex; align-items: stretch; justify-content: flex-start; gap: 16px; padding: 16px 16px 20px; width: calc(100% - 2px - 222px); background-color: #FFFFFF; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_wrapper"] { position: relative; padding-right: 16px; margin-right: 4px; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_wrapper"]::after { content: ""; height: 100%; width: 1px; display: block; background: #DDDDDD; position: absolute;top: 0; right: 0;} .p-giftSetted .x_small_title { font-size: 11px; margin: 0 0 7px;} .p-giftSetted .p-giftSettedList {display: flex; flex-direction: column; flex-wrap: wrap; gap: 8px;} .p-giftSetted .p-giftSettedList__item [class*="wrapping_inner_wrapper"] { max-width: 373px; } .p-giftSetted [class*="wrapping_inner_wrapper"] .p-giftSettedItem__container .p-giftSettedItem__item {width: 100%; max-width: 80px;} .p-giftSetted .p-giftSettedItem__container {max-width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 16px;} .p-giftSetted .p-giftSettedItem__container .p-giftSettedItem__item {width: 100%; max-width: 80px;} .p-giftSetted .p-giftSettedList__item [class*="wrapping_wrapper"] { width: calc(80px + 16px); } .p-giftSetted .p-giftSettedList__item [class*="messagecard_wrapper"] { width: calc(80px + 16px); } .p-giftSetted .p-giftSettedItem__itemInner { max-width: 80px; } .p-giftSetted .p-giftSettedItem__itemInner .name {font-size: 11px; margin: 0; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.2; } .p-giftSetted .p-giftSettedItem__itemInner .price {margin: 8px 0 0; display: none;} .p-giftSetted .img_box {min-width: 80px; width: 80px; height: 80px; padding: 0; border-radius: 5px; margin: 0 0 7px; line-height: 1.2; } .p-giftSetted .text { width: 100%; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_inner_wrapper"].none { max-width: none; } .p-giftSetted .alert {font-size: 10px;} .p-giftSetted #ds-gift-setted-error {margin: 16px 0; color: #DA4636; font-size: 16px; text-shadow: 0 0 #DA4636;} .p-giftSetted #ds-gift-setted-error:empty {display: none;} .p-giftSetted .p-giftListInner{margin-top: 8px;} #ds-gift-wrap__hidden {display: none;} #cartFlow.kessai .order_no {margin: 24px 0; font-size: 24px; text-align: center; color: #0c3f64; padding: 23px; background: #FFFFFF; border-radius: 10px;} /*アマゾンペイ選択エリア*/ #cartFlow .amazon_highlight_area { margin: 40px 0; padding: 32px; background: #FFFFFF; text-align: center; border-radius: 10px;} #cartFlow .amazon_highlight_area p { margin: 0 0 5px; } #main #cartFlow .amazon_highlight_area .important_text .important { font-size: 15px; width: 100%; } #main #cartFlow .amazon_highlight_area .important_text {margin: 0 0 24px; } #cartFlow .amazon_highlight_area .normal_title { margin: 0 0 12px; border-bottom: none; color: #666; font-size: 16px; padding-bottom: 0;} #cartFlow .amazon_highlight_area .normal_title::before { content: unset; } #cartFlow .amazon_highlight_area > div > div + .normal_title { margin-top: 32px; padding-top: 30px;} #cartFlow .amazon_highlight_area > div > div + .normal_title:before {position: absolute; bottom: 100%; left: 0; content: ""; background: #DDDDDD; display: block; width: 100%; height: 1px;} #main #cartFlow .amazon_highlight_area .button_area { margin: 0 auto; } #main #cartFlow .amazon_highlight_area .button_area .button { padding-top: 4px; padding-bottom: 4px; line-height: 1.2; font-size: 14px;} #main #cartFlow .amazon_highlight_area #AmazonPayV2Button.button_area {width: 320px; max-width: 320px; margin: 15px auto 0; } #main #cartFlow .amazon_highlight_area .amazon_text { font-size: 14px; color: #A09E98;} /* cartFlow - 買い物かご・プレゼント注文情報入力～注文完了まで -------------------------------------------------------------*/ #cartFlow .change_link.button {margin: -56px 0 24px auto; display: block; width: fit-content; padding-right: 24px; padding-left: 14px;} #cartFlow .input_table.newCreditCard {margin-bottom: 0;} #cartFlow .input_table.newCreditCard tr:last-child:after {content: none;} #cartFlow .input_table.newCreditCard tr:last-child, #cartFlow .input_table.newCreditCard tr:last-child th, #cartFlow .input_table.newCreditCard tr:last-child td {padding-bottom: 0;} #cartFlow #coupon_select_1 a { text-decoration: underline; } #cartFlow table.change_data{margin-top: -21px;} #cartFlow table.member_regist{margin-top: -21px;} #cartFlow table td.short input{width: 120px;} #cartFlow .sendCopyButton{margin-bottom: 24px;} #cartFlow .sendCopyButton .button{width: auto; display: inline-block; margin-right: 8px;} #cartFlow .gift_table > td {padding: 0;} #cartFlow .gift_table .gift_option_table .img_box_wrapper {margin: 6px 0 0 28px; display: flex; justify-content: flex-start; align-items: center; gap: 8px;} #cartFlow .gift_table .gift_option_table .img_box {width: 80px; height: 80px; border-radius: 4px; padding: 0;} #cartFlow .gift_table .gift_option_table {margin-bottom: 0;} #cartFlow .gift_table .gift_option_table tr:last-child::after {content: none;} #cartFlow .cartresult table{width: 920px; margin: 0 auto 20px;} #cartFlow .cartresult .total{width: 920px; margin: 0 10px 30px;} #cartFlow .card-supplement{ font-size:13px; color:#DA4636; margin-top: -10px;} #cartFlow .notice_area p { margin: 0 0 16px; } #cartFlow .notice_area .notice_title:first-child { margin: 0 0 24px; } #cartFlow .notice_area .notice_title:not(:first-child) { margin: 32px 0 16px; } #cartFlow .notice_area .text_blue { color: #00A0E9; } #cartFlow .notice_area a { text-decoration: underline; color: #00A0E9; } #cartFlow .total dl.discount {color: #DA4636;} /* cartLogin - 買い物かご・プレゼントログイン -------------------------------------------------------------*/ #cartLogin #error {margin-top: 0;} #cartLogin .cart_step + .login_boxes {margin: 74px 0 0;} #cartLogin .login_boxes {margin: 40px 0 0; display: flex; gap: 80px; align-items: stretch; justify-content: space-between; justify-content: center;} #cartLogin .login_boxes .box {padding: 16px 0; flex: 1; position: relative; max-width: 405px;} #cartLogin .login_boxes .box p {margin: 0 0 12px; font-size: 14px;} #cartLogin .login_boxes .box:first-child::after {content: ""; display: block; height: 100%; width: 1px; background: #DDDDDD; position: absolute; top: 0; right: -38px;} #cartLogin .login_boxes .box:only-child, #cartLogin .login_boxes .box:last-child::after {content: none;} #cartLogin .login_boxes .box .medium_title {margin-top: 0; font-size: 22px;} #cartLogin .login_boxes .box .input_table {margin: 32px 0;} #cartLogin .login_boxes .box .input_table::before {content: none;} #cartLogin .login_boxes .box .input_table tr {display: block; padding: 0 0 16px; font-size: 14px;} #cartLogin .login_boxes .box .input_table tr::after {content: none;} #cartLogin .login_boxes .box .input_table tr:last-child {padding: 0;} #cartLogin .login_boxes .box .input_table th {display: block; width: 100%; padding: 0 0 6px;} #cartLogin .login_boxes .box .input_table td {display: block; width: 100%; padding: 0;} #cartLogin .login_boxes .box .button_area {margin: 36px auto;} #cartLogin .login_boxes .box .amazon_box {margin: 32px 0 0; padding: 24px 24px 12px; background: #FFFFFF; border-radius: 10px;} /* クーポンラジオボタン制御に仕様 */ #main .input_table .couponHide {display: none;} #coupon_select_1 a { margin-right: 10px; } /* カートローディング */ #cartFlow .loading_spinner { width: 32px; height: 32px; clear: both; margin: 20px auto; border: 4px rgba(255, 255, 255, 0.08) solid; border-top: 4px #0c3f64 solid; border-radius: 50%; -webkit-animation: spCircRot 0.6s infinite linear; animation: spCircRot 0.6s infinite linear; } @-webkit-keyframes spCircRot { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @keyframes spCircRot { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /* cartResult - カート完了画面 -------------------------------------------------------------*/ #cartResult .number{margin: 30px 0px; text-align: center; line-height: 200%;} #cartResult .number strong{ font-size: 20px;} /* クロネコ代金後払いスマホタイプ -------------------------------------------------------------*/ #cartFlow .yamato_atobarai_auth_code{text-align: center;} #cartFlow .yamato_atobarai_auth_code input[type="text"]{width: 50px; height: 50px; font-size: 18px; text-align: center;} #cartFlow .yamato_atobarai_auth_code input[type="text"] + input[type="text"]{margin-left: 10px;} /* presentFlow - 買い物かご・プレゼント注文情報入力～注文完了まで -------------------------------------------------------------*/ #presentFlow #cartLogin table{width: 446px !important;} /* ================================================================= 9.会員登録・会員情報変更・退会 =================================================================*/ /* 会員登録・会員情報変更 */ #memberInput input#ZIP {max-width: 220px;} #memberInput input#TEL {max-width: 334px;} #memberInput input#ZIP ~ .button, #memberInput input#SEND_ZIP ~ .button {min-width: 130px;} #memberInput .ds-saved-card {padding: 24px; margin: 12px 0; background: #FFFFFF; border-radius: 10px;} #memberInput .ds-saved-card .saved_card_box + .saved_card_box {margin-top: 12px;} #memberInput .f-payOpt .pay + .pay {margin: 12px 0 0;} #memberInput .privacy_block,#memberTaikai .important_text{margin-top: 56px;} /* ================================================================= 11.商品詳細・一覧、プレゼント詳細・一覧、トピックス詳細・一覧 使用ファイル：item_list$detail.xhtml, item_list$image.xhtml 　　　　　　　item_list$simple.xhtml, item_detail.xhtml 　　　　　　　present_list.xhtml, present_detail.xhtml 　　topics_list.xhtml,topics_detail.xhtml 　　　　　　　item_list_awoo.xhtml, =================================================================*/ /* awoo recommend -画像レコメンド -------------------------------------------------------------*/ .recommend_wrapper {padding: 80px 0; background-color: #f3e5b8; display: flex; flex-direction: column; gap: 40px;} .recommend_wrapper .section {margin:0 auto; width: 100%;} #itemList + .recommend_wrapper, #wishList + .recommend_wrapper, #errorPage + .recommend_wrapper, #error404 .recommend_wrapper {margin: 64px 0 0;} #wishList + .recommend_wrapper .section_inner, #errorPage + .recommend_wrapper .section_inner, #error404 .recommend_wrapper .section_inner,.recommend_wrapper #recommend.section .section_inner{max-width: none; padding: 0 50px;} #awoo-keyword-popular-products .related-wrapper .related-title {color: #0c3f64; line-height: 1.14; margin: 0 0 40px; padding: 40px 0 0; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 28px; text-align: center; position: relative; z-index: 10;} #awoo-keyword-popular-products .related-wrapper .related-title:before {content: ""; display: block; background: #f094a7; width: 6px; height: 6px; border-radius: 100%; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);} #awoo-keyword-popular-products .related-wrapper .related-title:after {content: 'Recommend'; font-size: 16px; display: block; color: #00a0e9; margin-top: 10px;} #awoo-keyword-popular-products .related-wrapper .rec-slider-container {margin: 0;} #awoo-keyword-popular-products .related-wrapper .related-product-list {width: calc(100% + 52px);} #awoo-keyword-popular-products .related-wrapper .related-product {padding: 0; margin: 0 52px 0 0;} #awoo-keyword-popular-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {gap: 16px; width: 100%; display: flex;} #awoo-keyword-popular-products .related-wrapper:not(:has(.slick-initialized)) .related-product {margin: 0; width: calc((100% - 64px) / 5);} #awoo-keyword-popular-products .related-wrapper .related-product-img {width: 100%; height: auto; position: relative; border-radius: 10px; overflow: hidden; } #awoo-keyword-popular-products .related-wrapper .related-product-img img {display: block;} #awoo-keyword-popular-products .related-wrapper .related-product-name {color: #666666; font-size: 14px; margin: 20px 0px 8px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.5;height: auto;min-height: unset;} #awoo-keyword-popular-products .related-wrapper .product-price {color: #a09e98; font-size: 11px; text-align: end;} #awoo-keyword-popular-products .related-wrapper .product-price .tax {font-size: 10px;} #awoo-keyword-popular-products .related-wrapper .slick-arrow { width: 61px; height: 55px; left: calc(17.5vw - 52px); top: calc((100% - 115px) / 2); z-index: 11; transform: none;} #awoo-keyword-popular-products .related-wrapper .slick-arrow:before {content: ""; display: block; background: url(../images/icon/arrow_cercle.png) no-repeat center/100%; width: 100%; height: 100%; opacity: unset;} #awoo-keyword-popular-products .related-wrapper .slick-arrow.slick-next {transform: rotate(180deg); right: calc(17.5vw); left: unset; } #awoo-keyword-popular-products .related-wrapper .slick-arrow.slick-disabled {display: none!important;} /* awoo 画像レコメンド - トップ*/ #top #recommend .rec-carousel-item{opacity: 0; visibility: hidden; transform: translateY(50px); transition: opacity 1s,visibility 1s, transform 1s; } #top #recommend .rec-carousel-item.animation_active {opacity: 1; visibility: visible; transform: translateY(0px);} #top .recommend_wrapper {margin: 0; position: relative; padding-bottom: 60px;} #top .recommend_wrapper .section .section_inner {padding: 0 calc(6vw - 8px);} #top #recommend .section_inner{padding: 0 2vw; max-width: none;} /* awoo 画像レコメンド - 商品詳細 */ #awoo-related-products .related-wrapper .related-title {color: #0c3f64; line-height: 1.14; margin: 0 0 40px; padding: 40px 0 0; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 28px; text-align: center; position: relative; z-index: 10;} #awoo-related-products .related-wrapper .related-title:before {content: ""; display: block; background: #f094a7; width: 6px; height: 6px; border-radius: 100%; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);} #awoo-related-products .related-wrapper .related-title:after {content: 'Recommend'; font-size: 16px; display: block; color: #00a0e9; margin-top: 10px;} #awoo-related-products .related-wrapper .rec-slider-container {margin: 0;} #awoo-related-products .related-wrapper .related-product-list {width: calc(100% + 52px); display: none;} #awoo-related-products .related-wrapper .related-product-list.slick-initialized {display: flex;} #awoo-related-products .related-wrapper .related-product {padding: 0; margin: 0 52px 0 0;} #awoo-related-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {gap: 16px; width: 100%; display: flex;} #awoo-related-products .related-wrapper:not(:has(.slick-initialized)) .related-product {margin: 0; width: calc((100% - 64px) / 5);} #awoo-related-products .related-wrapper .related-product-img {width: 100%; height: auto; position: relative; border-radius: 10px; overflow: hidden;} #awoo-related-products .related-wrapper .related-product-img img {display: block;} #awoo-related-products .related-wrapper .related-product-name {color: #666666; font-size: 14px; margin: 20px 0px 8px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.5;height: auto;min-height: unset;} #awoo-related-products .related-wrapper .product-price {color: #a09e98; font-size: 11px; text-align: end;} #awoo-related-products .related-wrapper .product-price .tax {font-size: 10px; } #awoo-related-products .related-wrapper .slick-arrow { width: 61px; height: 55px; left: calc(17.5vw - 52px); top: calc((100% - 115px) / 2); z-index: 11; transform: none;} #awoo-related-products .related-wrapper .slick-arrow:before {content: ""; display: block; width: 100%; height: 100%; opacity: unset;} #awoo-related-products .related-wrapper .slick-arrow.slick-prev {background: url(../images/icon/arrow_cercle.png) no-repeat center/100%;} #awoo-related-products .related-wrapper .slick-arrow.slick-next {right: calc(17.5vw); left: unset; background: url(../images/icon/arrow_cercle_next.png) no-repeat center/100%;} #awoo-related-products .related-wrapper .slick-arrow.slick-disabled {display: none!important;} /* awoo 画像レコメンド - お気に入り*/ .recommend_wrapper:has(#awoo-favorite-related-products:empty) .recommend_wrapper:has(#awoo-favorite-related-products .related-wrapper:empty) {display: none;} #awoo-favorite-related-products .related-wrapper .related-title {color: #0c3f64; line-height: 1.14; margin: 0 0 40px; padding: 40px 0 0; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 28px; text-align: center; position: relative; z-index: 10;} #awoo-favorite-related-products .related-wrapper .related-title:before {content: ""; display: block; background: #f094a7; width: 6px; height: 6px; border-radius: 100%; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);} #awoo-favorite-related-products .related-wrapper .related-title:after{content: 'Recommend'; font-size: 16px; display: block; color: #00a0e9; margin-top: 10px;} #awoo-favorite-related-products .related-wrapper .rec-slider-container {margin: 0;} #awoo-favorite-related-products .related-wrapper .related-product-list {width: calc(100% + 52px); display: none;} #awoo-favorite-related-products .related-wrapper .related-product-list.slick-initialized {display: flex;} #awoo-favorite-related-products .related-wrapper .related-product {padding: 0; margin: 0 52px 0 0;} #awoo-favorite-related-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {gap: 16px; width: 100%; display: flex;} #awoo-favorite-related-products .related-wrapper:not(:has(.slick-initialized)) .related-product {margin: 0; width: calc((100% - 64px) / 5);} #awoo-favorite-related-products .related-wrapper .related-product-img {width: 100%; height: auto; position: relative; border-radius: 10px; overflow: hidden;} #awoo-favorite-related-products .related-wrapper .related-product-img img {display: block;} #awoo-favorite-related-products .related-wrapper .related-product-name {color: #666666; font-size: 14px; margin: 20px 0px 8px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.5;height: auto;min-height: unset;} #awoo-favorite-related-products .related-wrapper .product-price {color: #a09e98; font-size: 11px; text-align: end;} #awoo-favorite-related-products .related-wrapper .product-price .tax {font-size: 10px;} #awoo-favorite-related-products .related-wrapper .slick-arrow {width: 61px; height: 55px; left: calc(17.5vw - 52px); top: calc((100% - 115px) / 2); z-index: 11; transform: none;} #awoo-favorite-related-products .related-wrapper .slick-arrow:before {content: ""; display: block; width: 100%; height: 100%; opacity: unset;} #awoo-favorite-related-products .related-wrapper .slick-arrow.slick-prev{background: url(../images/icon/arrow_cercle.png) no-repeat center/100%;} #awoo-favorite-related-products .related-wrapper .slick-arrow.slick-next {right: calc(17.5vw); left: unset; background: url(../images/icon/arrow_cercle_next.png) no-repeat center/100%;} #awoo-favorite-related-products .related-wrapper .slick-arrow.slick-disabled {display: none!important;} /* awoo 画像レコメンド - 404・エラーページ*/ #awoo-not-found-products .related-wrapper .related-title {color: #0c3f64; line-height: 1.14; margin: 0 0 40px; padding: 40px 0 0; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 28px; text-align: center; position: relative; z-index: 10;} #awoo-not-found-products .related-wrapper .related-title:before {content: ""; display: block; background: #f094a7; width: 6px; height: 6px; border-radius: 100%; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);} #awoo-not-found-products .related-wrapper .related-title:after {content: 'Recommend'; font-size: 16px; display: block; color: #00a0e9; margin-top: 10px;} #awoo-not-found-products .related-wrapper .rec-slider-container {margin: 0;} #awoo-not-found-products .related-wrapper .related-product-list {width: calc(100% + 52px);} #awoo-not-found-products .related-wrapper .related-product {padding: 0; margin: 0 52px 0 0;} #awoo-not-found-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {gap: 16px; width: 100%; display: flex;} #awoo-not-found-products .related-wrapper:not(:has(.slick-initialized)) .related-product {margin: 0; width: calc((100% - 64px) / 5);} #awoo-not-found-products .related-wrapper .related-product-img {width: 100%; height: auto; position: relative; border-radius: 10px; overflow: hidden; } #awoo-not-found-products .related-wrapper .related-product-img img {display: block;} #awoo-not-found-products .related-wrapper .related-product-name {color: #666666; font-size: 14px; margin: 20px 0px 8px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.5;height: auto;min-height: unset;} #awoo-not-found-products .related-wrapper .product-price {color: #a09e98; font-size: 11px; text-align: end;} #awoo-not-found-products .related-wrapper .product-price .tax {font-size: 10px;} #awoo-not-found-products .related-wrapper .slick-arrow {width: 61px; height: 55px; left: calc(17.5vw - 52px); top: calc((100% - 115px) / 2); z-index: 11; transform: none;} #awoo-not-found-products .related-wrapper .slick-arrow:before {content: ""; display: block; width: 100%; height: 100%; opacity: unset;} #awoo-not-found-products .related-wrapper .slick-arrow.slick-prev{background: url(../images/icon/arrow_cercle.png) no-repeat center/100%;} #awoo-not-found-products .related-wrapper .slick-arrow.slick-next { right: calc(17.5vw); left: unset; background: url(../images/icon/arrow_cercle_next.png) no-repeat center/100%;} #awoo-not-found-products .related-wrapper .slick-arrow.slick-disabled {display: none!important;} /* awooAI キーワード -------------------------------------------------------------*/ #keyword {position: relative; width: 100%; margin: 0;} #keyword .section_inner {position: relative;} #keyword .section_title .main {white-space: nowrap;} #keyword .section_title .main{display: none;} #keyword .section_title .inner{width: 220px; background: #fff; text-align: center; border-radius: 10px; color: #00a0e9; font-size: 20px; font-family: "M PLUS Rounded 1c", sans-serif; line-height: 1.14; margin: 0 0 19px; padding: 10px 28px; position: absolute; left: 50%; transform: translateX(-50%); top: -32px; z-index: 1;} .recommend_wrapper:has(#awoo-classify .awoo-tag-wrapper:empty) {display: none;} #awoo-keyword-popular-tags, #awoo-classify {position: relative;} #awoo-keyword-popular-tags .popular-tags-wrapper {background: no-repeat; border-radius: 0; padding: 0; position: relative; background: #fff; padding: 32px; border-radius: 10px;} #awoo-keyword-popular-tags .popular-tags-title { width: 220px; background: #fff; text-align: center; border-radius: 10px; color: #00a0e9; font-size: 20px; font-family: "M PLUS Rounded 1c", sans-serif; line-height: 1.14; margin: 0 0 19px; padding: 10px 28px; position: absolute; left: 50%; transform: translateX(-50%); top: -32px;} #awoo-keyword-popular-tags {position: relative;} #awoo-keyword-popular-tags .awoo-tag-wrapper, #awoo-classify .awoo-tag-wrapper {position: relative; display: flex; gap: 5px; flex-wrap: wrap;} #awoo-keyword-popular-tags .awoo-tag, #awoo-classify .awoo-tag {border: 0; position: relative; padding: 2px 10px; border:1px solid #00a0e9; color: #00a0e9; font-size: 13px; background: #fff; border-radius: 9999px; transition: 0.3s; display: inline-block; margin: 0;} #awoo-classify {margin: 0; position: relative; padding: 30px 20px; background: #fff; border-radius: 10px;} .recommend_wrapper:has(#awoo-classify:empty) {display: none;} /* awoo キーワード - トップ */ #top #keyword {margin-top: 30px;} #top #keyword .popular-tags-wrapper::after {width: calc(100% - 245px);} #top #keyword .section_inner{padding-left: 60px; padding-right: 60px;} #top #keyword .section_inner::before{position: absolute; content: ""; display: block; width: 77px; height: 100px; background: url(../images/suneo.png) no-repeat center / contain; bottom: -63px; left: -17px; z-index: 1;} /* awoo キーワード - 商品詳細 */ #awoo-product-tags {margin: 0; position: relative; background: #fff; padding: 32px; border-radius: 10px;} #awoo-product-tags .awoo-tag {border: 0; position: relative; padding: 2px 10px; border:1px solid #00a0e9; color: #00a0e9; font-size: 13px; background: #fff; border-radius: 9999px; transition: 0.3s; display: inline-block; margin: 0;} #awoo-product-tags .awoo-tag-wrapper {display: flex; gap: 5px; flex-wrap: wrap;} #keyword:has(.awoo-tag-wrapper:empty) {display: none;} /* narrowListCategory - 絞り込みカテゴリ -------------------------------------------------------------*/ #narrowListCategory {margin: 0 0 0 auto;} #narrowListCategory .siborikomi_button {position: relative; cursor:url(../images/cursor.cur),auto; padding: 7px 8px 7px 35px; width: 100%; min-width: 200px; text-align: center; border-radius: 10px; margin: 0; font-family: "Noto Sans JP", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif;} #narrowListCategory .siborikomi_button::after {position: absolute; top: 50%; transform: translateY(-50%); content: ""; display: block; background: url(../images/icon/narrow_down_blue.svg) no-repeat center/contain; width: 23px; height: 20px; left: 10px;} #narrowListCategory .siborikomi_box {background: #FFFFFF; margin: 0 0 0 40px; opacity: 0; position: fixed; top: 0; right: -100%; height: 100%; width: 530px; transition: 0.3s; z-index: 999;} #narrowListCategory .siborikomi_box.open {right: 0; opacity: 1;} #narrowListCategory .siborikomi_box #closeButton {position: absolute; width: 40px; height: 50px; top: 0; right: 530px; border: 0; background: url(../images/icon/close.svg) no-repeat center; text-indent: 999px; overflow: hidden; white-space: nowrap; padding: 0; z-index: 999; cursor:url(../images/cursor.cur),auto;} #narrowListCategory .siborikomi_title {display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 11px 12px; text-align: center; font-size: 18px; background: #00a0e9; color: #fff; position: fixed; top: 0; width: 530px; z-index: 999;} #narrowListCategory .siborikomi_title::before {content: ""; display: block; background: url(../images/icon/narrow_down.svg) no-repeat center/contain; width: 19px; height: 17px;} #narrowListCategory .siborikomi_box_inner {padding: 83px 32px 32px; display: flex; flex-direction: column; gap: 40px; overflow-y: scroll; height: 100%;} #narrowListCategory .siborikomi_category_title {display: flex; margin: 0 0 12px; color: #00a0e9; font-size: 16px; align-items: center; gap: 8px;} #narrowListCategory .siborikomi_category_list {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;} #narrowListCategory .siborikomi_category_list li a {display: inline-block; border-radius: 9999px; padding: 4px 13px 4px; white-space: nowrap; font-size: 13px; color: #00a0e9; background: #FFFFFF; border: 1px solid #00a0e9; min-width: 4em; text-align: center;} #narrowListCategory .siborikomi_category_list li {position: relative; margin: 3px; font-size: 13px;} #narrowListCategory .siborikomi_category_list li:not(:has(a)) {padding: 5px 13px 5px; color: #FFFFFF; background: #00a0e9; border-radius: 9999px;} #narrowListCategory:has(.selected) {position: relative;} #narrowListCategory:has(.selected):before {content: ""; display: block; width: 16px; height: 16px; position: absolute; top: 50%; transform: translateY(-50%); background: url(../images/icon/check.svg) no-repeat center/contain; z-index: 10; left: 13px;} #narrowListCategory:has(.selected) .siborikomi_button::after{content: none;} /* 選択中カテゴリ */ #selectedCategory {display: none; width: 100%; margin: 8px 0; align-items: center; justify-content: flex-start; gap: 4px; flex-wrap: wrap;} #selectedCategory .selected_category {display: none; align-items: center; width: fit-content; border-radius: 9999px; margin: 3px 11px 3px 3px; padding: 6px 13px; white-space: nowrap; font-size: 12px; background: #00a0e9; position: relative; color: #FFFFFF;} #selectedCategory .selected_category:last-child {margin-right: 3px;} #selectedCategory .selected_category:has(a) {display: block;} #selectedCategory .selected_category span:empty {display: none;} #selectedCategory .selected_category a {padding: 0 0 0 8px; content: url(../images/icon/close.svg); z-index: 10; position: relative; height: 9px;} /* list - 一覧画面共通のメニュー -------------------------------------------------------------*/ .pager {margin: 32px 0; display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 18px; } .pager a {padding: 10px 0; background: #FFFFFF; width: 38px; height: 38px; display: inline-block; text-align: center; border-radius: 100px;color: #00a0e9; line-height: 18px; font-weight: bold;} .pager .current {padding: 10px 0; background: #00a0e9; color: #FFFFFF; width: 38px; height: 38px; display: inline-block; border-radius: 100px; line-height: 18px; font-weight: bold;} .pager a.next, .pager a.prev {position: relative; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; width: 38px; height: 38px; line-height: 38px; padding: 0; border-radius: 100px;} .pager a.next::before, .pager a.prev::before {background: url(../images/icon/link_arrow_blue.svg) no-repeat center/100%; content: ""; display: block; width: 18px; height: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .pager a.prev::before {transform: translate(-50%, -50%) scale(-1, 1);} .pager a.first, .pager a.last {position: relative; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; width: 38px; height: 38px; line-height: 38px; padding: 0; border-radius: 100px;} .pager a.first::before, .pager a.last::before {background: url(../images/icon/link_arrow_last.svg) no-repeat center/100%; content: ""; display: block; width: 21px; height: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .pager a.first::before {transform: translate(-50%, -50%) scale(-1, 1);} /* itemListDetail - 商品詳細一覧・プレゼント一覧 -------------------------------------------------------------*/ #main:has(#itemList) {padding-bottom: 0;} #itemList.main_inner {max-width: 1200px; padding: 0 16px;} #itemList .section .section_title{margin-bottom: 0px;} #itemList .pageguide_wrapper {padding: 9px 0 0; position: relative; } #itemList .pageguide_wrapper .pageguide { gap: 8px; flex-wrap: wrap; } #itemList .pageguide_wrapper .pageguide.inner {margin-left: auto;} #itemList .pageguide_wrapper .pageguide_inner{display: flex; align-items: center; width: 100%; flex-wrap: wrap;} #itemList .pageguide_wrapper + #error {margin: 0 0 16px; position: relative; z-index: 3;} #selectedCategory { position: relative; z-index: 3; } #main .pageguide { display: flex; align-items: center; margin: 15px 0 15px;} #main .pagenavi { display: flex; align-items: center; justify-content: flex-end; gap: 12px; position: relative; z-index: 3; } #main .pageguide select {border-radius: 10px; color: #00a0e9; border: 1px solid #00a0e9; background: url(../images/icon/link_arrow_below_blue.svg) no-repeat right 6px top 15px; background-color: #FFFFFF; background-size: 17px 9px; padding-right: 28px;} #itemList .item_list {position: relative; z-index: 3; margin: 40px 0 0;} #itemList .item_list .box {width: calc((100% - 75px) / 4);} #itemList .sub_category_list_wrapper {margin: 20px auto; width: 100%; max-width: 888px;} #itemList .sub_category_list_wrapper .sub_category_list.p-itemListCategory__parent {display: none;} #itemList .sub_category_list_wrapper .sub_category_list {display: flex; align-items: flex-start; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 12px; padding: 3px 0;} #itemList .sub_category_list_wrapper .sub_category_list li {display: block; white-space: nowrap;} #itemList .sub_category_list_wrapper .sub_category_list a {position: relative; background: #FFFFFF; border: 1px solid #00a0e9; color: #00a0e9; padding: 5px 10px; border-radius: 9999px; display: block;} #itemList > .pager {margin: 64px 0;} #itemList .shiborikomi_wrapper{display: flex; align-items: center;} .toggleButton__inner{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; margin-left: 50px;} .toggleButton__input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; cursor:url(../images/cursor.cur),auto;} .toggleButton__label {width: 50px; height: 24px; background: #BBBBBB; position: relative; display: inline-block; border-radius: 14px; transition: transform 0.2s; box-sizing: border-box;} input[type='checkbox'].toggleButton__input + .toggleButton__label:after {content: ""; position: absolute; width: 23px; height: 23px; border-radius: 100%; left: 1px; top: 50%; transform: translate(0,-50%); z-index: 2; background: #fff; transition: transform 0.2s; box-sizing: border-box;} input[type='checkbox'].toggleButton__input + label{margin: 0;} input[type='checkbox'].toggleButton__input + .toggleButton__label:before{content: none;} .toggleButton__input:checked + .toggleButton__label { background-color: #00a0e9;} input[type='checkbox'].toggleButton__input:checked + .toggleButton__label:after {transform: translate(25px,-50%);} .toggleButton {position: relative; width: 50px; height: 24px; margin-left: 5px;} .invisible{display: none;} /* categoryInfo - カテゴリ情報 -------------------------------------------------------------*/ #categoryInfo {display: flex; justify-content: center; align-items: center; gap: 32px;} #categoryInfo:not(:has(.large_title)) {display: none;} #categoryInfo:has(.img_box), #categoryInfo:has(.text_box) {margin: 0 auto 40px; } #categoryInfo .img_box {flex: 1; min-height: 334px; padding: 0; border-radius: 0;} #categoryInfo .text_box {flex: 1;} #categoryInfo .text_box p {margin: 0;} #categoryInfo .img_box + .text_box .large_title {margin: 0 auto 40px;} /* itemListDetail - 商品一覧お気に入りリストに入った報告ポップアップ -------------------------------------------------------------*/ #itemListDetail .wishlistSubmitButton{position: relative;} #itemListDetail .wishlistSubmitButton .wishlistMessage{position: absolute; top: -85px; left: 50%; margin-left: -122px; padding: 10px; background-color: #fff; border: #ccc 2px solid; width: 270px; z-index: 10; display: none;} #itemListDetail .wishlistSubmitButton .wishlistMessage:after{content: ""; display: block; position: absolute; top: 100%; left: 50%; margin-left: -3px; width: 6px; height: 5px;} #itemListDetail .wishlistSubmitButton .wishlistMessage .title{text-align: center; font-size: 100.0%; color: #000;} #itemListDetail .wishlistSubmitButton .wishlistMessage .mainclose{background-color: #fff; cursor:url(../images/cursor.cur),auto; text-align: center; margin-bottom: 0;} #itemListDetail .wishlistSubmitButton .wishlistMessage .link{background-color: #fff; text-align: center;} #itemListDetail .wishlistSubmitButton .wishlistMessage .close{position: absolute; top: 3px; right: 3px; cursor:url(../images/cursor.cur),auto;} #itemListDetail .wishlistSubmitButton .wishlistDelMessage{position: absolute; top: -85px; left: 50%; margin-left: -122px; padding: 10px; background-color: #fff; border: #ccc 2px solid; width: 270px; z-index: 10; display: none;} #itemListDetail .wishlistSubmitButton .wishlistDelMessage:after{content: ""; display: block; position: absolute; top: 100%; left: 50%; margin-left: -3px; width: 6px; height: 5px;} #itemListDetail .wishlistSubmitButton .wishlistDelMessage .title{text-align: center; font-size: 100.0%; color: #000;} #itemListDetail .wishlistSubmitButton .wishlistDelMessage .mainclose{background-color: #fff; cursor:url(../images/cursor.cur),auto; text-align: center; margin-bottom: 0;} #itemListDetail .wishlistSubmitButton .wishlistDelMessage .link{background-color: #fff; text-align: center;} #itemListDetail .wishlistSubmitButton .wishlistDelMessage .close{position: absolute; top: 3px; right: 3px; cursor:url(../images/cursor.cur),auto;} /* itemListDetail - 商品カートに入った報告ポップアップ -------------------------------------------------------------*/ #itemListDetail .cartSubmitButton{position: relative;} #itemListDetail .cartSubmitButton .cartMessage{position: absolute; top: -85px; left: 50%; margin-left: -122px; padding: 10px; background-color: #fff; border: #ccc 2px solid; width: 270px; z-index: 10; display: none;} #itemListDetail .cartSubmitButton .cartMessage:after{content: ""; display: block; position: absolute; top: 100%; left: 50%; margin-left: -3px; width: 6px; height: 5px;} #itemListDetail .cartSubmitButton .cartMessage .title{text-align: center; font-size: 100.0%; color: #000;} #itemListDetail .cartSubmitButton .cartMessage .mainclose{background-color: #fff; cursor:url(../images/cursor.cur),auto; text-align: center; margin-bottom: 0;} #itemListDetail .cartSubmitButton .cartMessage .link{background-color: #fff; text-align: center;} #itemL#itemListDetailistImage .cartSubmitButton .cartMessage .link a{display: inline-block;} #itemListDetail .cartSubmitButton .cartMessage .close{position: absolute; top: 3px; right: 3px; cursor:url(../images/cursor.cur),auto;} /* itemDetail - 商品詳細・プレゼント詳細 -------------------------------------------------------------*/ #main.detail { padding-bottom: 0; padding-top: 40px;} #main #itemDetail.main_inner { max-width: 1200px;} #itemDetail .item_wrap {display: flex; justify-content: space-between; align-items: flex-start; gap: 32px;} #itemDetail .item_image_area {width: 41.33%;} #itemDetail .limitedtxt {color:#dc030f;font-weight:700;font-size:110%;} #main.detail #breadcrumbs{margin: -40px 0 10px;} #main.detail #breadcrumbs .breadcrumbs_list{padding-left: 16px; padding-right: 16px;} /* 商品詳細メインスライダー */ #itemDetail #item-detail-slider { position: relative; } #itemDetail .item-detail-slider_inner {position: relative; } #itemDetail .item-detail-slider_inner .item_new { font-size: 18px; padding: 35px 0 8px; width: 140px; top: -10px; right: -50px; } #itemDetail .remodal-cancel { color: #fff; background: #CB000F; font-size: 1.8rem; border-radius: 0; margin-top: 10px; } #itemDetail .remodal-cancel:hover, .remodal-cancel:focus { background: #CB000F; } #itemDetail .item_image_area .main-slider { position: relative; margin: 0;padding: 0; } #itemDetail .item_image_area .main-slider .img-item {position: relative; height: 100%;} #itemDetail .item_image_area .main-slider .img-item::before { display: block; padding-top: 100%; content: ""; position: relative; overflow: hidden; } #itemDetail .item_image_area .main-slider .img-item img { border-radius: 10px; display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 100%; } #itemDetail .item_image_area .main-slider .img-item.video::after { content: none; } #itemDetail .item_image_area .thumbs { margin: 12px 0 0; } #itemDetail .item_image_area #thumbnail-list{ display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 14px;} #itemDetail .item_image_area .thumbs .img-item { box-sizing: border-box; width: calc((100% - 56px) / 5); border-radius: 10px; position: relative; cursor:url(../images/cursor.cur),auto; overflow: hidden; padding: 0; border: 1px solid transparent; } #itemDetail .item_image_area .thumbs .img-item::before { display: block; padding-top: 100%; content: ""; background: #fff;} #itemDetail .item_image_area .thumbs .img-item img { width: 100%; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto;} #itemDetail .item_image_area .thumbs .img-item.thumbnail-current { border: 1px solid #00a0e9;} #itemDetail .item_image_area .more_view{position: relative; height: 190px; overflow: hidden;} /* #itemDetail .item_image_area .more_view::after{content: ""; position: absolute; background: linear-gradient(0deg, rgba(247, 243, 224, 1) 25%, rgba(247, 243, 224, .5) 50%, rgba(247, 243, 224, 0) 75%); width: 100%; height: 200px; bottom: 0; left: 0; display: block; pointer-events: none;} */ #itemDetail .item_image_area .more_view::after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 8.2vw; pointer-events: none; background: url("../images/bg/bg.png") center / cover no-repeat; -webkit-mask-image: linear-gradient( to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%); mask-image: linear-gradient( to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);} #itemDetail .item_image_area .more_button{position: relative; display: none;} #itemDetail .item_image_area .more_button::before{content: ""; position: absolute; background-image: url(../images/icon/link_arrow_below_blue.svg); width: 37px; height: 19px; background-repeat: no-repeat;left: 50%; transform: translateX(-50%); bottom: 45px; background-size: contain;} #itemDetail .item_image_area .more_button.is-open::before{bottom: -50px;transform: translate(-50%, 0) rotate(180deg);} #itemDetail .slick-next:before, #itemDetail .slick-prev:before{ content: none; } #itemDetail .slick-next, #itemDetail .slick-prev{ content:''; width: 52px; height: 47px; background-image: url(../images/icon/arrow_cercle.png); background-size: contain; background-repeat: no-repeat; cursor:url(../images/cursor.cur),auto; z-index: 15; } #itemDetail .slick-next{ background-image: url(../images/icon/arrow_cercle_next.png); } #itemDetail .item_image_area .main-slider .slick-prev { left: -16px; } #itemDetail .item_image_area .main-slider .slick-next { right: -16px;} #itemDetail .slick-next.slick-disabled, #itemDetail .slick-prev.slick-disabled { display: none !important; } #itemDetail .slider video{ width: 100%; height: auto; } #itemDetail .main-slider .slick-slide iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #itemDetail .main-slider video { position: absolute; top: 0%; bottom: 0; right: 0; left: 0; margin: auto; width: 100%; object-fit: cover; } #itemDetail .text_box {flex: 1; width: calc(100% - 41.33% - 32px); } #itemDetail .text_box .bg_white{background: #FFFFFF;padding: 24px 16px;border-radius: 8px;} #itemDetail .text_box .item_icon_list { gap: 8px; } .item_icon.white {border-color: #fff; color: #fff;} #itemDetail .compare_btn .button { width: 100%; } #itemDetail .compare_btn .button { width: calc(100% - 8px); max-width: none;} #itemDetail .text_box .item_name {margin: 0 0 14px; font-size: 22px; line-height: 1.291666666666667; font-family: "M PLUS Rounded 1c", sans-serif; font-weight: bold; color: #00a0e9; border-bottom: 1px solid #00a0e9; padding-bottom: 18px;} #itemDetail .text_box .time_sale {margin-bottom: 16px;} #itemDetail .text_box .time_sale p {margin: 0;} #itemDetail .text_box .time_sale .time_sale_period {font-size: 14px; margin: 4px 0 0;} #itemDetail .text_box .item_info01 { margin: 13px 0 26px; } #itemDetail .text_box .detail_note {font-size: 15px;} #itemDetail .text_box .item_price_box {font-size: 30px; margin: 0 0 16px; color:#00a0e9;} #itemDetail .text_box .item_price_box .teika {margin: 0 0 8px; } #itemDetail .text_box .item_price_box .teika .if_sale {position: relative;} #itemDetail .text_box .item_price_box .teika:has(+ .time-sale) .if_sale::before {position: absolute; content: ""; display: block; height: 1px; width: 100%; background: #00a0e9; left: 0; top: 50%; transform: translateY(-50%);} #itemDetail .text_box .item_price_box .tax {font-size: 18px; display: inline-block; margin: 0 0 0 4px;} #itemDetail .text_box .item_price_box .tax-rate {margin: 0; font-size: 12px; display: inline-block; color: #FFFFFF; background: #999999; border-radius: 10px; padding: 4px 8px; line-height: 12px;} #itemDetail .text_box .item_price_box .time-sale > .price_en { font-size: 22px; font-weight: 700; position: relative;} #itemDetail .text_box .item_price_box .time-sale > .en_mark {font-size: 19px; font-weight: 700;} #itemDetail .text_box .item_price_box .time-sale > .price_en:before {content: ""; display: block; width: calc(100% + 40px); height: 1px; position: absolute; background: #00a0e9; left: 0; top: 50%; transform: translateY(-50%); opacity: 0.88;} #itemDetail .text_box .item_price_box .time-sale .tax-rate {transform: translateY(-3px); display: inline-block; font-size: 12px;} #itemDetail .text_box .item_price_box .time-sale .tax_through { margin: 0 0 0 4px; font-size: 12px; transform: translateY(-3px); display: inline-block;} #itemDetail .text_box .item_price_box .time-sale .other { display: block; color: #e91f2f; position: relative;} /* ポイント交換商品 */ #itemDetail .text_box .stock_notice_caution, #itemDetail .text_box .maximum_amount { font-size: 14px; margin: 12px 0 12px; } #itemDetail .text_box .about_point {margin: 8px 0 0; font-size: 14px; display: flex; align-items: center;} #itemDetail .text_box .about_point p {margin: 0;} #itemDetail .text_box .about_point .button {font-size: 12px; padding: 1px 25px 1px 9px;} #itemDetail .text_box .about_point .button.link.border_blue::after{right: 7px; width: 11px; height: 9px;} #itemDetail .text_box .zaiko_txt{color: #e91f2f; font-weight: bold;} #itemDetail .text_box .zaiko_txt_num{font-size: 20px;} #itemDetail .text_box .sales_period ~ .detail_btn-area .cart_button_area { margin-top: 10px; } #itemDetail .text_box .sales_period {color: #e91f2f;; margin: 10px 0; font-weight: bold;} #itemDetail .text_box .cart_button_area {margin: 20px 0 12px; display: flex; gap: 12px; align-items: center; justify-content: space-between;} #itemDetail .text_box .cart_button_area .item_amount {width: 57px; margin: 0;} #itemDetail .text_box .cart_button_area .item_amount_active { margin: 0; } #itemDetail .text_box select { width: 100%; border-radius: 10px; color: #00a0e9; border: 1px solid #00a0e9; background: url(../images/icon/link_arrow_below_blue.svg) no-repeat right 10px top 50%; background-color: #FFFFFF; background-size: 17px 9px;} #itemDetail .text_box .cart_button_area .item_amount select { margin: 2px 0 0; min-width: 57px; } #itemDetail .text_box .cart_button_area .btn_cart_area { width: calc(100% - 36px - (12px * 2)); margin: 0; } #itemDetail .text_box .cart_button_area .item_amount:not([style="display: none;"]) + .btn_cart_area { width: calc(100% - 36px - 57px - (12px * 2));} #itemDetail .text_box .cart_button_area .btn_cart_area .button { max-width: 100%; width: 100%; height: 50px; text-align: center; font-size: 20px; font-weight: bold; border-radius: 25px;} #itemDetail .text_box .cart_button_area .btn_cart_area .button.link::after{width: 20px; height: 17px;} #itemDetail .text_box .cart_button_area .btn_cart_area .button img { margin-right: 8px; vertical-align: middle;} #itemDetail .text_box .cart_button_area .btn_cart_area .button.detail_cart-btn_inactive.detail_cart-btn_disable{line-height: 34px;} #itemDetail .text_box .cart_button_area .wishlist_btn { width: 40px; margin: 0; } #itemDetail .text_box .cart_button_area .wishlist_btn img { display: block; } #itemDetail .text_box .soryo_discount {text-align: center; font-size: 14px; color: #00a0e9;} #itemDetail .text_box .soryo_discount_inner{display: flex; align-items: center; justify-content: center; gap: 4px;} #itemDetail .text_box .txt_red{color: #e91f2f;} #itemDetail .text_box .soryo_discount_img{width: 26px; height: 18px;} #itemDetail .text_box input[type="checkbox"] + label { margin: 6px 16px 6px 28px; } #itemDetail .text_box .stock_notice { margin: 17px 0 0; } #itemDetail .text_box .stock_notice .button { max-width: none; width: calc(100% - 8px); padding: 7px 10px; } #itemDetail .text_box .stock_notice .button img { margin-right: 8px; vertical-align: middle;} #itemDetail .text_box .stock_notice .button .cart_txt { vertical-align: middle; font-size: 16px; } #itemDetail .about_btns {margin: 20px 0 24px; position: relative;} #itemDetail .about_btns ul {margin: 0 auto 0; display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; gap: 8px;} #itemDetail .about_btns li {width: 100%; max-width: calc((100% - 8px) / 2);} #itemDetail .about_btns .button { padding-top: 7px; padding-bottom: 7px; font-family: "Noto Sans JP", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif;} #itemDetail .about_btns .button .pc_s { display: none; } #itemDetail .share_contact_btns .share_btn {display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0; background:rgba(255, 255, 255, 0.6); border-radius: 20px; max-width: 480px; margin: 0 auto; padding: 6px;} #itemDetail .share_contact_btns .share_btn a{display: flex; align-items: center; justify-content: center;} #itemDetail .propaty_area .variation_inner { margin: 0 0 20px; } #itemDetail .propaty_area .variation_inner + .variation_inner { margin-top: -10px; } #itemDetail .propaty_area .variation_inner .variation_ttl { font-size: 14px; margin: 0 0 6px; } #itemDetail .item-option {margin: 0 0 20px;} #itemDetail .item-option ~ .propaty_area { padding-top: 28px; margin-top: 28px; position: relative;} #itemDetail .item-option ~ .propaty_area::after {position: absolute; left: 0; top: 0; content: ""; display: block; width: 100%; height: 2px; background: #DDDDDD;} #itemDetail .item-option > div > label { font-size: 15px; margin: 0 0 6px; display: block; } #itemDetail .item-option .option_input-area { margin: 0 0 18px; } #itemDetail .item-option .option_input-area input { padding: 8px 32px 7px 10px; width: 100%; } #itemDetail .item-option .option_input-area input[type='checkbox']{width: auto;} #itemDetail .item-option .option_input-area input:focus { outline: none; } #itemDetail .item-option .option_input-area textarea { max-height: 150px; padding: 8px 32px 7px 10px; width: 100%; } #itemDetail .item-option .option_input-area textarea:focus { outline: none; } #itemDetail #item_explanation {line-height: 1.53; font-size: 14px; width: 100vw; padding: 43px 0 51px; margin: 76px calc(50% - 50vw) 0; background:#FFFFFF; z-index: 10; position: relative;} #main #itemDetail .item_explanation_inner.main_inner {max-width: 1200px; margin: 0 auto; margin: 0 auto; } #itemDetail #item_explanation .item_explanation_inner .medium_title:first-of-type { margin-top: 0; font-size: 26px; } #itemDetail #item_explanation .item_info02 { margin: 0 0 24px; } #itemDetail #item_explanation .item_info03 { margin: 0 0 24px; } #itemDetail .explanation1 a, #itemDetail .explanation2 a, #itemDetail .explanation3 a {text-decoration: underline; color: #00a0e9;} #itemDetail #item_explanation .item_appeal_msg { margin: 0 0 20px; } #itemDetail #item_explanation .variation-info_inner { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; margin: 0 0 2px; } #itemDetail #item_explanation .variation-info, #itemDetail #item_explanation .variation-inner { margin: 0 0 40px; } .hinban:after, .jan-code:after { content: ','; } #itemDetail .dt_category_list {margin: 41px 0 40px;} #itemDetail .dt_category_list h3 { font-size: 20px; margin: 0; background: #f9f0d3; display: inline-block; padding:5px 25px 0 25px; text-align: center; border-radius: 10px; color: #00a0e9; position: relative; left: 50%; transform: translateX(-50%); top: 10px; font-weight: normal; font-family: 'M PLUS Rounded 1c', sans-serif;} #itemDetail .dt_category_list .breadcrumbs_category{background: #f9f0d3; padding: 30px 20px; border-radius: 10px;} #itemDetail .dt_category_list ul {display: inline;} #itemDetail .dt_category_list li { display: inline-block; margin: 0 2px 6px 0;} #itemDetail .dt_category_list li a { border: 1px solid #00a0e9 ; display: inline-block; border-radius: 13px; padding: 2px 14px; white-space: nowrap; font-size: 13px; color: #00a0e9; background: #FFFFFF;} #itemDetail .detail_note { font-size: 13px; } #itemDetail .detail_note li { margin: 0 0 6px; } #itemDetail .hissu {margin: 0 0 0 6px; display: inline-block; width: 12px; height: 12px; background: url(../images/icon/hissu.svg) no-repeat center/contain; text-indent: 100%; white-space: nowrap; overflow: hidden;} #itemAccessLog {position: relative; margin: 0; padding: 80px 0 95px;} #itemAccessLog.section .section_inner{max-width: none; padding: 0 2vw; margin: 0 auto;} #itemAccessLog .box a {padding-top: 5px; color: #000;} #itemAccessLog .box .price .sale + .teika::before {background: #000;} #itemAccessLog .swiper-button-prev, #itemAccessLog .swiper-button-next {right: calc(18vw - 50px);} #itemAccessLog .swiper-button-prev{left: calc(18vw - 50px);} .ds-detail-modal { display: none; } .ds-detail-modal__overlay { z-index:9999; display:block; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:fixed;width:100%;height:100%;left:0;top:0;bottom:0;right:0;background:rgba(0,0,0,.4);} .ds-detail-modal__container { background: #FFFFFF; width: 90%; max-width: 550px; max-height: 100vh; overflow-y: auto; box-sizing: border-box; padding: 32px 40px; position: relative; border: 1px solid #00a0e9; border-radius: 10px;} .ds-detail-modal__content { font-size: 16px; } .ds-detail-modal__action { margin-top: 20px; display:block; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:justify; -webkit-justify-content:space-around; -ms-flex-pack:justify; justify-content:space-around; -webkit-column-gap:4%; -moz-column-gap:4%; column-gap:4%; } .ds-detail-modal__action.button_area { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: nowrap; text-align: center; margin: 32px auto 0; } #main p.ds-detail-ajax__success-title { font-size: 14px; text-align: center; } .ds-detail-ajax__success-action { display: flex; flex-wrap: nowrap; margin-top: 10px; } .ds-detail-ajax__success-action > div.close { flex: 0 0 auto; width: auto; padding-left: 5px; padding-right: 5px; } .ds-detail-ajax__success-action > div { flex: 0 0 auto; width: 100%; padding-left: 5px; padding-right: 5px; } .p-soldout { z-index: 1; } /* 商品画像の切り替え */ #itemDetail .property_image_area{ clear: both;} #itemDetail .propertyImg{width: 80px; float: left; margin-right: 15px;} #itemDetail .propertyImg .propertyimg_box{width: 80px; height: 80px; text-align: center; position: relative; margin: 0 10px 0px 0;} #itemDetail .propertyImg .propertyimg_box img{width: auto; max-width: 80px; max-height: 80px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #itemDetail .propertyImg p{margin: 0; text-align: center;} #itemDetail h3{display: block; margin: 10px 0px 5px 0; font-size: 105%;} #itemDetail .property_sale_price {color: #C00;} #itemDetail .property_normal_price {text-decoration:line-through} #itemDetail .propaty_area .button{max-width: none; width: 100%;} /* itemDetail - 商品詳細カートに入った報告ポップアップ -------------------------------------------------------------*/ #itemDetail .cartSubmitButton{position: relative;} #itemDetail .cartSubmitButton .cartMessage{position: absolute; top: -128px; left: 50%; transform: translateX(-50%); padding: 32px 16px 10px; background: #FFFFFF; width: 240px; z-index: 10; display: none; border: 1px solid #00A0E9; border-radius: 10px;} #itemDetail .cartSubmitButton .cartMessage:after{content: ""; display: block; position: absolute; top: 100%; left: 50%; margin-left: -3px; width: 6px; height: 5px;} #itemDetail .cartSubmitButton .cartMessage .title, #itemDetail .cartSubmitButton .cartMessage .ds-detail-ajax__success-title{margin: 0 0 15px; text-align: center; font-size: 15px;} #itemDetail .cartSubmitButton .cartMessage .button_area {margin: auto; } #itemDetail .cartSubmitButton .cartMessage .button_area .button { margin: auto; font-size: 14px; height: auto; } #itemDetail .cartSubmitButton .cartMessage .mainclose{cursor:url(../images/cursor.cur),auto; text-align: center; margin-bottom: 0; margin: 0 auto; display: none;} #itemDetail .cartSubmitButton .cartMessage .mainclose .button { margin: auto; } #itemDetail .cartSubmitButton .cartMessage .link{ text-align: center;} #itemDetail .cartSubmitButton .cartMessage .link .button{ margin: auto; font-size: 13px; width: 100%; } #itemDetail .cartSubmitButton .cartMessage .close{position: absolute; top: 8px; right: 5px; cursor:url(../images/cursor.cur),auto;} /* itemDetail - 商品詳細お気に入りリストに入った報告ポップアップ -------------------------------------------------------------*/ #itemDetail .wishlistSubmitButton {position: relative;} #itemDetail .wishlistSubmitButton .wishlistMessage {position: absolute; top: -158px; left: 50%; transform: translateX(-50%); padding: 32px 16px 10px; background: #FFFFFF; width: 240px; z-index: 10; display: none; border: 1px solid #00A0E9; border-radius: 10px;} #itemDetail .wishlistSubmitButton .wishlistMessage:after{content: ""; display: block; position: absolute; top: 100%; left: 50%; margin-left: -3px; width: 6px; height: 5px;} #itemDetail .wishlistSubmitButton .wishlistMessage .title{margin: 0 0 15px; text-align: center; font-size: 15px;} #itemDetail .wishlistSubmitButton .wishlistMessage .mainclose{ cursor:url(../images/cursor.cur),auto; text-align: center; margin-bottom: 0; margin: 0 auto; display: none;} #itemDetail .wishlistSubmitButton .wishlistMessage .mainclose .button { margin: auto; } #itemDetail .wishlistSubmitButton .wishlistMessage .link{text-align: center;} #itemDetail .wishlistSubmitButton .wishlistMessage .link a{ margin: auto; font-size: 13px; width: 100%; } #itemDetail .wishlistSubmitButton .wishlistMessage .close{position: absolute; top: 8px; right: 8px; cursor:url(../images/cursor.cur),auto;} #itemDetail .wishlistSubmitButton .wishlistDelMessage{position: absolute; top: -100px; left: 50%; transform: translateX(-50%); padding: 32px 16px 10px; background: #FFFFFF; width: 240px; z-index: 10; display: none; border: 1px solid #00A0E9; border-radius: 10px; } #itemDetail .wishlistSubmitButton .wishlistDelMessage:after{content: ""; display: block; position: absolute; top: 100%; left: 50%; margin-left: -3px; width: 6px; height: 5px;} #itemDetail .wishlistSubmitButton .wishlistDelMessage .title{margin: 0 0 15px; text-align: center; font-size: 15px;} #itemDetail .wishlistSubmitButton .wishlistDelMessage .mainclose{cursor:url(../images/cursor.cur),auto; text-align: center; margin-bottom: 0; margin: 0 auto; display: none;} #itemDetail .wishlistSubmitButton .wishlistDelMessage .mainclose .button { margin: auto; } #itemDetail .wishlistSubmitButton .wishlistDelMessage .link{text-align: center;} #itemDetail .wishlistSubmitButton .wishlistDelMessage .link a{ margin: auto; font-size: 13px; width: 100%; } #itemDetail .wishlistSubmitButton .wishlistDelMessage .close{position: absolute; top: 8px; right: 8px; cursor:url(../images/cursor.cur),auto;} /* itemDetail - トピックス詳細 -------------------------------------------------------------*/ #itemDetail .topics_img h3,#itemDetail .topics_noimg h3{margin: 10px 10px 5px 0px; display: block; font-size: 105%;} #itemDetail .topics_img p,#itemDetail .topics_noimg p{font-size: 90%; margin: 5px 0px;} #itemDetail .topics_img img{display: block;} #itemDetail .topics_img .img_box{width: 140px; height: 140px; margin: 10px 10px 10px 0; text-align: center; position: relative; float: left;} #itemDetail .topics_img .img_box img{width: auto; max-width: 140px; max-height: 140px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #itemDetail .topics_img .topics_text{overflow: auto;} #itemDetail .topics_img,#itemDetail .topics_noimg{padding: 10px;} #itemDetail .topics_noimg p img{float: right; margin: 0 0 10px 10px;} /* present_detail.xhtml - プレゼント詳細 -------------------------------------------------------------*/ #itemDetail.present .item_image_area .img_box{display:block; width: 268px; height: 268px;} /* ================================================================= 12.レビュー 使用ファイル：item_detail.xhtml, member_review.xhtml =================================================================*/ #review {} #review p{margin: 0 0px;} #review h3{float: left; margin: 0 10px 0 0; font-size: 80%;} #review .review_box{margin-bottom: 20px;} #review .box{margin: 10px 0 5px; padding: 10px; border: #CCC 1px solid;} #review .box p{margin: 0;} #review p.goodButton .button{margin-left: 5px; vertical-align: middle; display: inline-block; width: auto;} #review p.goodNumber{margin-bottom: 20px; color: #666; font-size: 75%;} #review .pageguide{ float: left; width: 570px; font-size: 85%; padding-top: 4px;} #review .rearrange{float: left; width: 200px; font-size: 85%; text-align: right;} #review .pagelink{ clear: both; font-size: 85%; padding: 10px 0;} #review ul.star{float: left;} #review ul.star li{display: block; float: left; width: 15px; height: 15px; text-indent: -9999px;} #review ul.star li.good{background: url("../images/review_good.gif") no-repeat;} #review ul.star li.bad{background: url("../images/review_bad.gif") no-repeat;} #review .contribution{margin-top: 10px; padding: 10px 10px 10px 10px; background: #F1F1F1;} #review .contribution #error{background: #F1F1F1;} #review .contribution table{margin: 0; border: none;} #review .contribution th{width: 140px; padding: 5px 10px; border: none; background: none; font-weight: normal; text-align: left;} #review .contribution td{padding: 5px 10px; border: none;} #review .contribution h3{float: none; margin:0 0 10px 0; padding:0px; font-size: 120%;} #review .review-image{padding-top: 20px;} #review .review-image:after {content: ""; clear: both; display: block;}/* clearfix */ #review .review-image .img_box{width: 80px; height: 80px; margin-right: 10px; margin-bottom: 10px; text-align: center; position: relative; float: left;} #review .review-image img{width: auto; max-width: 80px; max-height: 80px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} /* ================================================================= 13.購入履歴・見積履歴 使用ファイル：member_history.xhtml,member_estimate_recode.xhtml =================================================================*/ #history h3{display: block; margin: 30px 10px 10px; padding-bottom: 5px;} #history .history_search { background: #FFFFFF; border-radius: 10px; padding: 26px 32px 32px; margin: 0 0 38px; } #history .history_search .section_title { color: #0c3f64; font-size: 19px; margin-bottom: 9px; text-align: center; } #history .history_search .input_table::before, #history .history_search .input_table tr::after { content: unset; } #history .history_search .input_table tr { padding-bottom: 14px; display: block; } #history .history_search .input_table tr:last-child { padding-bottom: 0; } #history .history_search .input_table .title { display: block; width: 100%; padding: 0 0 6px; font-size: 14px; } #history .history_search .input_table td { display: block; width: 100%; padding: 0; } #history .history_search .input_table td input[type="checkbox"] + label { margin: 6px 16px 6px 28px;} #history .history_search .input_table .data_wrapper img { width: 19px; height: 22px; } .ui-datepicker { font-size: 14px; } .ui-datepicker .ui-datepicker-title { display: flex; align-items: center; gap: 4px; } #ui-datepicker-div { display: none; } #history .history_search .button_area { margin: 32px auto 0; } #history .history_search .button { max-width: 180px; height: 38px; line-height: 1; padding-top: 10px; } #history.main_inner .box_wrapper .input_table .caption { text-align: left; } #history .infoarea{display: block; margin: 0 10px 0; } #history .infoarea .status_icon{color: #FFFFFF; font-size: 12px;font-weight: normal; } #history .infoarea .button { padding: 3px 7px; font-size: 13px; } #history .cancel{float: right; margin-left: 10px;} #history .payment_change{float: right; margin-left: 10px;} #history .infoarea .date{clear: both; padding-top: 3px;} #history .infoarea.estimate{position: relative;} #history .infoarea.estimate .seikyu_price{ color:#C00; font-size: 16px;} #history .infoarea.estimate .estimate_number{color:#222; padding:0 0 0 10px;} #history .infoarea.estimate .button.estimate{width: 137px; display: inline-block; position: absolute; right:10px;} #history .preparing .status_icon{background: #336600; padding: 3px 5px;}/* 手配中 */ #history .delivered .status_icon{background: #ff9900; padding: 3px 5px;}/* 配送中 */ #history .delivering .status_icon{background: #000066; padding: 3px 5px;}/* 配送済 */ #history .canceled .status_icon{background: #cc0000; padding: 3px 5px;}/* 取消済 */ #history .yoyaku .status_icon{background: #000000; padding: 3px 5px;}/* 予約済 */ #history .teiki_together .status_icon{background: #996633; padding: 3px 5px;}/* 定期にまとめて */ #history table { table-layout: fixed; } #history .item {width: 100%;} #history .tanka {width: 160px; } #history .amount {width: 120px;} #history .shokei {width: 160px;} #history .noshi {width: 60px;} #history .hukuro {width: 60px;} #history .tax {font-size: 10px;} #history .tax_rate {margin: 8px 0 0; } #history .tax_rate dl {font-size: 14px;} #history .cart{width: 160px; text-align: center;} #history .cart .button{margin-bottom: 10px; width: auto; display: inline-block;} #history .cart .delivery_slip{margin-bottom: 0px;} #history .estimate_reply{line-height: 22px;} #history .property{display: block; color: #AAA; } #history .nolink{color: #999;} #history .reducedTax{ display: block; font-size: 11px; } #history .search .buttonarea{padding: 20px 0 40px;} #history h4.total_price{font-size: 105%; padding-left: 10px; color: #c00; margin-bottom: 20px;} #history .webmoney-usage-detail:after{content: ""; display: inline-block; background: url("../images/otherpage.png") no-repeat; width: 18px; height: 12px;} #history .message_card{display: inline-block; vertical-align: top;} #history .noshi_amount{width:50px;} #history .giftbag_amount{width: 80px; text-align: center;} #history .gift_accordion_container{position: relative;} #history .gift_accordion_title:after {content: ""; position: absolute; right: 2px; top: 30%; transition: all 0.2s ease-in-out; display: block; width: 12px; height: 8px; background: url(../images/icon/link_arrow_below_black.svg) center / contain; } #history .gift_accordion_title.open:after {-webkit-transform: rotate(-180deg); transform: rotate(-180deg); top: 45%;} #history .gift_accordion_content {display: none; padding: 20px 0 0;} #history .gift_accordion_title{position: relative; cursor:url(../images/cursor.cur),auto;} #history .history_order { margin-bottom: 24px; padding-bottom: 24px; display: block; position: relative; } #history .history_order::after {content: ""; position: absolute; width: 100%; height: 1.8px; background: #DDDDDD; bottom: 0; left: 0;} #history .history_order:last-child::after{ content: unset; } #history .history_order .infoarea{margin-bottom: 8px;margin-left:0;margin-right:0; display: flex; align-items: center; justify-content: flex-start; gap: 12px; } #history .history_order .infoarea .date{font-size: 14px;} #history .history_order .iconarea { min-width: 67px; } #history .history_order .buttons { width: 302px; display: flex; align-items: flex-start; justify-content: flex-end; gap: 12px; } #history .history_order .buttons .button { width: 145px; } #history .infoarea .order_info {display: flex; justify-content: flex-start; align-items: flex-start; width: calc(100% - 302px - 67px - 12px - 12px); } #history .infoarea .main_info { text-align: left; width: 100%; } #history .infoarea .main_info .number {margin: 0 15px 0 0; font-size: 15px; color: #0c3f64; } #history .infoarea .main_info .button {margin: 0 10px 0 0; width: auto;} #history .infoarea .sub_info {margin: 5px 0 0; display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 4px; font-size: 10px; } #history .infoarea .sub_info .sub { } #history .history_order .status_icon{font-size: 11px; font-weight: 700; padding:2px 4px;color:#fff; border: 1px solid #0c3f64; display:inline-block; width: 100%; text-align: center; border-radius: 3px; } #history .history_order .status_icon.red{background:#888; border-color: #888;} #history .history_order .status_icon.white{background:#FFFFFF; border-color: #888; color: #888;} #history .history_order .status_icon.gold{background:#0c3f64; color: #FFFFFF; } #history .history_order .status_icon.gold_line{background:#FFFFFF; color: #0c3f64;} .nouhinsho_popup{ display:none; } .nouhinsho_show{ z-index:9999; display:block; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:fixed;width:100%;height:100%;left:0;top:0;bottom:0;right:0;background:rgba(0,0,0,.4)} .nouhinsho_content{ width:90%; font-size: 13px; max-width:550px; background: #FFFFFF; padding: 0 40px 40px; border: 1px solid #00A0E9; border-radius: 10px;} .nouhinsho_content .nouhinsho_head {font-size: 16px; padding: 13px 40px; margin: 0 -40px 15px; text-align: center; } #main #history .nouhinsho_content .input_table .title { min-width: 100px; } #main #history .nouhinsho_content .input_table td { max-width: calc(100% - 160px); } #main #history .nouhinsho_content .input_table td span { display: block; } #main #history .nouhinsho_content .input_table { table-layout: auto; } #history .nouhinsho_content .nouhinsho_btn-area .button { display: block;} #history .nouhinsho_content .nouhinsho_btn-area .button.positive { width: 260px; margin: 20px auto 20px; } #history .nouhinsho_content .nouhinsho_btn-area .button.close { margin: 0 auto 0; } a.btn_receipt, a.btn_Nreceipt { font-size: 12px; padding: 6px 10px; white-space: nowrap } a.btn_receipt { background: #70a433; color: #fff } a.btn_Nreceipt { background: #D0D0CE; color: #a5a5a5; pointer-events: none; cursor: default; } #history .total_info {display: flex; justify-content: space-between; align-items: flex-start; gap: 35px; background: #FFFFFF; padding: 14px 16px 32px;} #history .total_info .total_box {margin: 0 0 0 auto; width: 320px; min-width: 320px; font-size: 14px; } #history .total_info .total_box dl {display: flex; justify-content: space-between; align-items: flex-start; margin: 0 0 10px; padding: 0 5px;} #history .total_info .total_box dl.total {padding: 10px 5px 0; border-top: dotted 1px #DDDDDD; color: #00a0e9; font-size: 18px; } #history .total_info .total_box dl.total dd { text-align: right;} #history .total_info .total_box dl.total dd span { display: block; } #history .total_info .total_box dl.discount {color: #DA4636;} #history .total_wrapper .other_box {margin: 0 auto 0 0; width: calc(100% - 320px); font-size: 12px; } #history .total_wrapper .other_box dl {display: flex; justify-content: flex-start; align-items: flex-start; margin: 0 0 4px; font-size: 12px;} #history .total_wrapper .other_box dl dt {min-width: 5em; white-space: nowrap;} #history .total_wrapper .other_box dl dt { line-height: 1.25; } #history .total_wrapper .other_box .buttonarea {margin: 15px auto 8px;} #history .total_wrapper .other_box .buttonarea .button {margin: 0; max-width: 205px;width: auto;padding-top: 5px;padding-bottom: 5px; font-size: 13px; padding-right: 19px;padding-left: 12px;} #history .total_wrapper .other_box .buttonarea a {position: relative; margin: 0 auto; max-width: 210px; display: block; width: fit-content;} #history .total_wrapper .other_box .buttonarea span { margin: auto; display: inline-block; width: 100%; } #history .total_wrapper .other_box .buttonarea a.not_click::before {content: ""; display: block; width: calc(100% + 4px); height: calc(100% + 4px); position: absolute; top: -3px; left: -3px; border: 1px solid #D0D0CE;} #main #history table { margin: 0; } #history .history_item {display: flex; justify-content: space-between; align-items: center; padding: 0 0;} #history .history_item .img_box {text-align: center; position: relative; border-radius: 4px; overflow: hidden; background: #fff; border-radius: 4px; margin: 0 15px 0 0; width: 80px; height: 80px; min-width: 80px; min-height: 80px;} #history .history_item .img_box a {display: block;} #history .history_item .img_box img {width: 100%; max-width: 100%; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; object-fit: contain; transition: 0.2s;} #history .history_item .text_box {width: calc(100% - 80px);} #history .history_item .text_box .item_name {margin: 0; } #history .history_item .text_box .code, #history .history_item .text_box .other {margin: 3px 0 5px; font-size: 11px;} #history .history_item .text_box .item_bundle_sale {margin: 10px 0 0;} #history .history_item .text_box .comment {margin: 10px 0 0; font-size: 12px;} #history .history_item .text_box .price {margin: 15px 0 0; width: auto;} #history .history_item .text_box .spec {display: flex; justify-content: flex-start; align-items: flex-start; margin: 15px 0 0; padding: 15px 0 0; border-top: dashed 1px #dadada; font-size: 13px;} #history .history_item .text_box .spec dt {display: block; white-space: nowrap;} #history .history_info-action { padding-left: 10px; padding-right: 10px; } /*estimateListDetail - 見積履歴 -------------------------------------------------------------*/ #history #estimateListDetail .box{margin-bottom: 30px;} #history #estimateListDetail .box:first-child{margin-top: 15px;} #history #estimateListDetail .status_icon{color: #333; float:none; background: #CCC; padding: 5px 5px;} #history #estimateListDetail th.total_price{width: 120px;} /* member_history - 商品カートに入った報告ポップアップ -------------------------------------------------------------*/ #history .cartSubmitButton{position: relative;} #history .cartSubmitButton .cartMessage{position: absolute; top: -85px; left: 50%; margin-left: -122px; padding: 10px; background-color: #fff; border: #ccc 2px solid; width: 270px; z-index: 10; display: none;} #history .cartSubmitButton .cartMessage:after{content: ""; display: block; position: absolute; top: 100%; left: 50%; margin-left: -3px; width: 6px; height: 5px;} #history .cartSubmitButton .cartMessage .title{text-align: center; font-size: 100.0%; color: #000;} #history .cartSubmitButton .cartMessage .mainclose{background-color: #fff; cursor:url(../images/cursor.cur),auto; text-align: center; margin-bottom: 0;} #history .cartSubmitButton .cartMessage .link{background-color: #fff; text-align: center;} #history .cartSubmitButton .cartMessage .link a{display: inline-block;} #history .cartSubmitButton .cartMessage .close{position: absolute; top: 3px; right: 3px; cursor:url(../images/cursor.cur),auto;} /* =================================================================== 14：サブウインドウで表示するページ用 使用ファイル：item_detail_other_image.xhtml 　　　　　　　item_friend_mail.xhtml,item_friend_mail_result.xhtml 　　　　　　　item_itemproperty_zaiko.xhtml 　　　　　　　present_friend_mail.xhtml,present_friend_mail_result.xhtml =================================================================== */ #subwindow #header {height: 80px; display: flex; justify-content: center; align-items: center; position: relative; } #subwindow #header a {display: block; width: 274px; height: 40px; background: url(../images/logo_main.png) no-repeat; background-position: center; text-indent: -9999px; background-size: 100%;} #subwindow #main {padding: 40px 0 80px;} #subwindow .subwindow_inner {width: 500px; margin: auto;} #subwindow .images {margin: 0 0 16px; text-align: center;} #subwindow .images img {width: 100%;} #subwindow #content .hissu{color: #CC0000;} #subwindow #content .close{margin: 10px 0; font-size: 80%; line-height: 150%; text-align: right;} #subwindow .buttonarea{text-align: center; margin: 10px; padding-top: 40px;} #subwindow .buttonarea .button{display: inline-block; margin: 0 10px;} #subwindow #content #products{width: 500px; position: relative;} #subwindow #content #products .slides_container{overflow: hidden; position: relative; border: 1px solid #ccc; margin: 10px 0 0 0;} #subwindow #content #products .slides_container .ima_box{width: 498px; height: 498px; position: relative; text-align: center;} #subwindow #content #products .slides_container img{width: auto; margin: auto; max-width: 498px; max-height: 498px; display: block; position: absolute; bottom: 0; left: 0; right: 0; top: 0;} #subwindow #content #products .slides_container a{width: 400px; height: 400px; display: block;} #subwindow #content #products .thumbox{clear: both; margin: 15px 0 0; padding: 0;} #subwindow #content #products .thumbox:after {content: ""; clear: both; display: block;}/* clearfix */ #subwindow #content #products .thumbox .pagination li{margin: 0 10px 10px 0; float: left;} #subwindow #content #products .thumbox .pagination li.last{margin-right: 0;} #subwindow #content #products .thumbox .img_box{border: 1px solid #ccc; width: 92px; height: 92px; display: block;} #subwindow #content #products .thumbox .img_box img{max-width: 90px; max-height: 90px;} #subwindow #content #products .thumbox .img_box img:hover{filter: alpha(opacity=60); -moz-opacity: .6; -khtml-opacity: .6; opacity: .6;} #subwindow #content #products .thumbox .current .img_box{border: 1px solid #cc3333; display: block; filter: alpha(opacity=100) !important; -moz-opacity: 1 !important; -khtml-opacity: 1 !important; opacity: 1 !important;} #subwindow #content #products .thumbox .current .img_box img:hover{cursor: default; filter: alpha(opacity=100) !important; -moz-opacity: 1 !important; -khtml-opacity: 1 !important; opacity: 1 !important;} #subwindow #content #products .prev{display: block; background: url(../images/detail_prev_button.png) no-repeat; text-indent: -9999px; width: 60px; height: 60px; top: 35%; left: -26px; position: absolute; z-index: 1000;} #subwindow #content #products .next{display: block; background: url(../images/detail_next_button.png) no-repeat; text-indent: -9999px; width: 60px; height: 60px; top: 35%; right: -26px; position: absolute; z-index: 1000;} #subwindow #content #products .arrowOn:hover .prev, #subwindow #content #products .arrowOn:hover .next{display: block;} #subwindow #content #products .arrowOn:hover .prev:hover, #subwindow #content #products .arrowOn:hover .next:hover{filter: alpha(opacity=80); -moz-opacity: .8; -khtml-opacity: .8; opacity: .8;} #content #reCAPTCHA{width: 304px; margin: 20px auto 0;} #subwindow #content #error { margin: 20px 0; } #subwindow #content .msg_box {margin: 20px 0; padding: 24px 24px; background:rgba(0, 0, 0, .4);} #subwindow #content .button_area { max-width: 100%; margin-top: 35px; } #subwindow #content .button_area.close { display: block; text-align: center; } #subwindow #content .button_area.close .button { margin: auto; } #subwindow #content .button_area.close .button + .button { margin-top: 30px; } #subwindow.coupon_popup .images img { max-width: 320px; margin: auto; } #subwindow.coupon_popup table .title {width: 222px;} /* ================================================================= 15.エラーページ 使用ファイル：common/messages.xhtml =================================================================*/ #error {margin: 0 0 24px; width: 100%; padding: 20px; color: #DA4636; border: 1px solid #DA4636; background-color: #FFFFFF; border-radius: 10px;} #error table {border: none !important; margin: 0!important;} #error td {padding:0 12px 0 0!important; border: none !important;} #error .ico{width: 48px; vertical-align: middle; text-align: center; background-color: unset;} #error td img {width: 32px;} #error .content {color: #DA4636; vertical-align: middle; line-height: 150%; float: none; background-color: unset;} /* #main:has(#errorPage) {padding-bottom: 0;} */ /* ================================================================= 16.クレジットカード登録画面 使用ファイル：member_credit_entry_input.xhtml =================================================================*/ #main #credit td.button_area{text-align: center; width: 212px; max-width: 212px; padding-right: 20px;} #main #credit td.button_area .button{display: inline-block; width: 100%;} #main .error, #main #credit .error {color: #DA4636!important; text-shadow: 0 0 #DA4636;} #main #credit .section:last-child {margin-bottom: 0;} #main #credit .button_area dd:empty {display: none;} #main .error:empty, #main #credit .error:empty {display: none;} #main #credit table.side_by_side td { vertical-align: middle; } /* ================================================================= 17.お気に入り 使用ファイル：wishlist.xhtml 　　　　　　　wishlist_edit.xhtml =================================================================*/ #wishList .box h2 {font-size: 16px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.32)} #wishList .box {display: flex; align-items: center; gap: 24px; margin: 10px 0 0; padding: 18px 23px 21px; background-color: #FFFFFF; border-radius: 10px; } #wishList .box:first-child { margin: 0 0 0;} #wishList .box .text {flex: 1; margin-right: 20px; width: calc(100% - 172px - 24px); display: flex; gap: 12px;} #wishList .box .text .img_box {width: 100%; height: 120px; max-width: 120px; padding-top: 120px;} #wishList .box .text .text_area {flex: 1;} #wishList .box .text .tax {font-size: 10px;} #wishList .box .text .price .teika {position: relative;} #wishList .box .text .price .teika:has(~ span .sale) {font-size: 12px;} #wishList .box .text .price .teika:has(~ span .sale)::before {position: absolute; content: ""; display: block; height: 1px; width: 100%; background: #666666; left: 0; top: 50%; transform: translateY(-50%);} #wishList .box .button_area {width: 200px; max-width: 172px; margin: 0; display: block; } #wishList .box .button_area div { width: 100%;} #wishList .box .button_area .button {margin: 0 0 12px; width: 100%; font-size: 14px; } #wishList .box .other {font-size: 11px;} #wishList .box .comment {font-size: 12px;} #wishList .box p {margin: 0 0 8px;} #wishList .box .explanation1 {margin: 0;} #wishList .box .explanation1 .button {margin-top: 10px; margin-bottom: 10px;} /* ================================================================= 18.アドレス帳 使用ファイル：address_add.xhtml 　　　　　　　address_input.xhtml =================================================================*/ #addressList h3 {font-size: 16px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #DDDDDD;} #addressList h3 .kana {font-weight: normal; font-size: 14px; margin-left: -3px;} #addressList .box {display: flex; align-items: center; gap: 24px; margin: 10px 0 0; padding: 18px 23px 21px; background-color: #FFFFFF; border-radius: 10px; } #addressList .box:first-child { margin: 0 0 0;} #addressList .box .text {flex: 1; margin-right: 20px; width: calc(100% - 172px - 24px); } #addressList .box .button_area {width: 200px; max-width: 172px; margin: 0; display: block; } #addressList .box .button_area div { width: 100%;} #addressList .box .button_area .button {margin: 0 0 12px; width: 100%; font-size: 14px; } #addressList .box .button_area .button:last-child {margin: 0;} /* ================================================================= 19.マイページ 使用ファイル：member_mypage.xhtml =================================================================*/ #breadcrumbs:has(+ #member.mypage ) {margin-bottom: 0;} #member.mypage .account_box {margin: 40px 0 0; width: 100%; text-align: center; position: relative; border-radius: 10px; overflow: hidden; background: #FFFFFF;} #member.mypage .account_box p {margin: 0;} #member.mypage .account_box .account_area {padding: 20px; width: 100%;} #member.mypage .account_box .account_area .section_title {margin: 0; font-size: 24px;} #member.mypage .account_box .account_area .section_title::before {width: 64px;} #member.mypage .account_box .account_area .section_title::after {margin: 12px auto 4px; content: ""; display: block; height: 100px;} #member.mypage .account_box .account_area .section_title .inner {margin: 0; font-size: 12px;} #member.mypage .account_box .account_area .name {margin: 0 0 8px; font-size: 16px;} #member.mypage .account_box #crosspointArea {padding: 20px 16px; min-width: 50%; max-width: 50%; background: #fff; text-align: center; align-items: center; display: flex; justify-content: center; margin: 0 auto;} #member.mypage .account_box #crosspointArea img {margin: 0 0 8px; width: 100%;} #member.mypage .account_box #crosspointArea .block-mypage-memberscard-id-number {margin: 0 0 8px;} #member.mypage .account_box #crosspointArea .block-mypage-memberscard-id-text {font-size: 13px;} #member.mypage .member_menu {padding: 24px 0; display: flex; gap: 16px; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;} #member.mypage .member_menu li {width: calc((100% - 32px) / 3);} #member.mypage .member_menu li .info_box {height: 100%; min-height: 150px; border-radius: 10px; overflow: hidden;} #member.mypage .member_menu li .info_box dt {text-align: center;} #member.mypage .member_menu li .info_box dd {height: calc(100% - 37px); min-height: 107px;} #member.mypage .member_menu .link_list a{padding-left: 24px;} #member.mypage .member_menu .link_list a::before{background: url(../images/icon/link_arrow_below_blue.svg) no-repeat center / contain; top: 6px; width: 15px; height: 15px; top: 50%; transform: translateY(-50%) rotate(270deg);} #member.mypage .coupon_area {margin-bottom: 0;} #member.mypage .coupon_area table th.title {width: 284px;} #member.mypage .coupon_area table th:not(.title) {width: unset;} #member.mypage .coupon_area a {text-decoration: underline;} .modalArea__img{text-align: center;} .modalArea__imgMessage{width: 46px; height: auto;} .modalArea__ButtonContent{display: -webkit-box; display: flex; -webkit-column-gap:14px; column-gap: 14px; margin-top: 30px;} .modalArea__Button.button {width: 50%; font-size: 14px; padding: 13px;} #member.mypage ul li a.modalArea__Button{padding: 13px;} .modalArea__title{font-size: 20px; text-align: center; margin: 10px 0;} .modalArea__attentionTxt{color: #FF5C5C; font-weight: bold; font-size: 26px;} .modalArea__txt{padding: 0 20px; font-size: 14px;} .modalArea {display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%;} .modalArea__overlay {width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2);} .modalArea__content {position: absolute; top: 50%; left: 50%; transform:translate(-50%,0); width: 100%; max-width: 500px; padding: 22px; background-color:#FFFFFF; border-radius: 10px; border: 1px solid #00A0E9; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s, transform 1s;} .modalArea__animationActive{opacity: 1; visibility: visible; transform:translate(-50%,-50%);} /* ================================================================= 22.キャンペーン 使用ファイル：top.xhtml,item_detail.xhtml,cart_index.xhtml,cart_seisan.xhtml,cart_confirm.xhtml,cart_confirm$amazon_payments.xhtml,cart_result.xhtml,member_history.xhtml =================================================================*/ /* member_history */ #history .campaign {line-height:1.5; display: inline-block; margin:0 5px 0 0;} /* top,item_detail,cart_index */ #mainCampaign, #cartCampaign {padding-top: 2px; margin-top: 80px; position: relative;} #mainCampaign:before, #cartCampaign:before {content: ""; width: 100%; height: 1px; display: block; position: absolute; top: 0; background: #DDDDDD; } #mainCampaign .campaign_list, #cartCampaign .campaign_list {margin: 16px 0 0; display: flex; gap: 16px; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap;} #mainCampaign .campaign_list .box, #cartCampaign .campaign_list .box {width: calc((100% - 64px) / 5); font-size: 12px;} #mainCampaign .campaign_list .box .img_box, #cartCampaign .campaign_list .box .img_box {margin: 0 0 12px; border-radius: 10px;} #mainCampaign .campaign_list .box img, #cartCampaign .campaign_list .box img {width: 100%;} #mainCampaign .campaign_list .box .name, #cartCampaign .campaign_list .box .name {margin: 0 0 8px; font-size: 14px;} #mainCampaign .campaign_list .box p, #mainCampaign .campaign_list .box h4, #cartCampaign .campaign_list .box p, #cartCampaign .campaign_list .box h4 {margin: 0 4px 4px;} /* ================================================================= 27.ポイント履歴 使用ファイル：member_point_record.xhtml =================================================================*/ #pointRecord { font-size: 15px; } #pointRecord .record_list { margin: 0 0 32px; } #pointRecord .record_list p {margin: 0;} #pointRecord .total p {margin: 0 0 8px;} #pointRecord .total .hold { font-size: 16px; border: 0; margin: 0 0 6px;} #pointRecord .total .hold + div {padding: 8px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.32);} #pointRecord .total .point { font-size: 24px; color: #0C3F64; margin-right: 4px; } #pointRecord .total .limit .point { font-size: 20px; } #pointRecord .total .other {display: inline-block; margin: 4px 0 0; font-size: 13px;} #pointRecord .total + #error {margin-top: 24px;} #pointRecord .link_point_right {text-align: right; } #pointRecord .record_list th {border: 2px solid transparent; width: 20%; } #pointRecord .record_list td {vertical-align: inherit; border: 2px solid transparent; } #pointRecord .record_list th.date {width: 18%;} #pointRecord .record_list th.order {width: 18%;} #pointRecord .record_list th.point_num {width: 24%;} #pointRecord .record_list .right {text-align: right;} #pointRecord .record_list .plus {} #pointRecord .record_list .limit { color: #DA4636; } #pointRecord .record_list td .point { font-size: 130%; color: #0C3F64; margin-right: 4px; } #pointRecord .point_limit_date{ font-size: 14px; text-align: left; line-height: 150%;} #pointRecord .limit_icon{ margin-bottom: 2px; margin-left: 5px;background-color: #0C3F64; color: #FFFFFF; border-radius: 3px; display: inline-block; font-size: 12px; line-height: 1; padding: 3px 5px; vertical-align: middle; font-weight: 700;} #pointRecord .point_kbn{display: inline-block;} /* プレゼント -------------------------------------------------------------*/ #main .wishlist.present .announce { color: #0c3f64; margin-bottom: 5px; } #main .wishlist.present .appeal { font-size: 14px; } #main .wishlist.present .present_comment { border: 1px solid #DDDDDD; border-radius: 10px; padding: 16px 24px; font-size: 13px; margin-top: 8px; } #main .present_content #error { margin: 30px 0; } #main .present_content .present_box {display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin: 0 auto 60px; padding: 0; max-width: 1048px; width: 100%;} #main .present_content .present_image_area {width: calc(50% - 40px);} #main .present_content .present_img_box .img_box {text-align: center; position: relative; padding-top: 100%; overflow: hidden; border-radius: 5px; width: auto; height: auto;} #main .present_content .present_img_box .img_box img {display: block; margin: auto; width: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; transition: all .2s;} #main .present_content .property_sale_price {color: #DA4636;} #main .present_content .text {padding: 0; width: 50%; position: relative; background: #FFFFFF; border-radius: 10px; padding: 24px 24px;} #main .present_content .text .text_inner {margin: 0 0 20px; padding: 0 95px 0 0;} #main .present_content .text p {margin: 0 0 8px;} #main .present_content .text .item_name {margin: 0 0 15px; font-size: 24px; line-height: 1.5;} #main .present_content .text .price {margin: 0 0 8px;} #main .present_content .text .price p {margin: 0;} #main .present_content .text .price .teika {font-size: 14px;} #main .present_content .text .price .teika .item_price {font-size: 26px; line-height: 1.5; } #main .present_content .text .announce { color: #0c3f64; margin-bottom: 5px; font-size: 16px; } #main .present_content .comment {margin:20px 0; padding: 10px 0;} #main .present_content .status { } #main .present_content .right{text-align: right;} #main #wishList.present_content .box .button_area .button { max-width: 160px; } #main .present_content .msg_box {margin: 20px 0; padding: 15px 20px 3px; background:#DA4636; color: #FFFFFF; border-radius: 10px;} #main .present_content .msg_box p {margin: 0 0 8px;} #main .present_content .msg_box dl {margin: 0 0 8px;} #main .present_content .msg_box dt {margin: 0 0 4px; font-weight: 700; text-align: center;} #main .present_content .msg_box dd {margin: 0 0 4px;} #main .present_content .msg_box .msg_title {margin: 0 0 4px; font-weight: 700; text-align: center;} #main .present_content .msg_box .main_msg {text-align: center;} #main .present_content .msg_box .number {color: #00a0e9; font-size: 20px; font-weight: 700; line-height: 1.5; text-align: center;} #main .present_content .wishlist_wrapper .text_box .item_name { font-size: 18px; } #main .present_content .wishlist_wrapper .text_box .appeal { color: #DA4636; margin: 0 0 12px; } #main .present_content .wishlist_wrapper .text_box .msg_box { padding: 12px 12px; } #main .present_content .wishlist_wrapper .text_box .explanation1 { border: none; font-size: 13px; margin: 0 0 15px; padding: 0;} #main .present_content .wishlist_wrapper .text_box .button_area { justify-content: flex-end; max-width: none; } /* ================================================================= プレゼントリスト =================================================================*/ #wishList.present_content .wishlist_wrapper {display: flex; flex-direction: column; gap: 24px;} #wishList.present_content .box {padding: 20px 20px; display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; gap: 12px; background-color: #FFFFFF;} #wishList.present_content .box .img_box {padding: 0; border-radius: 4px; min-width: 80px; width: 80px; height: 80px; text-align: center; position: relative;} #wishList.present_content .box .img_box img{width: auto; max-width: 80px; max-height: 80px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #wishList.present_content .box .text_box_wrapper {width: 100%; display: flex; gap: 16px; justify-content: space-between; align-items: flex-start;} #wishList.present_content .box .text_box {width: 100%;} #wishList.present_content .box .text_box ul.item_icon_list {margin: 0 0 8px;} #wishList.present_content .box .text_box .item_icon_list {position: unset; width: fit-content;} #wishList.present_content .box .text_box .item_name {margin: 0 0 12px; padding: 0 0 12px; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.32); } #wishList.present_content .box .text_box .date {font-size: 10px;} #wishList.present_content .box .text_box .price {margin: 0 0 3px;} #wishList.present_content .box .text_box .price .teika {position: relative; display: block; width: fit-content;} #wishList.present_content .box .text_box .price .sale {display: block;} #wishList.present_content .box .text_box .price .teika:has(~ span .sale)::before {position: absolute; content: ""; display: block; height: 1px; width: 100%; background: #fff; left: 0; top: 50%; transform: translateY(-50%);} #wishList.present_content .box .text_box .price .tax {font-size: 10px;} #wishList.present_content .box .text_box .explanation1 { margin: 8px 0 0; font-size: 12px; flex-direction: column; gap: 6px; display: flex;} #wishList.present_content .box .button_area {margin: auto; padding: 0; max-width: 144px; gap: 8px;} #wishList.present_content .box .button_area span {width: 100%;} #wishList.present_content .box .button_area span .button {width: calc(100% - 6px);} #wishList.present_content .box .button_area .button {width: 100%;} #wishList.present_content .box .button_area .property {margin: 0; font-size: 10px;} #wishList.present_content .rearrange select{margin-left: 10px;} #wishList.present_content .nolink{color: #999;} #wishList.present_content .buttonarea_submit{text-align: right;} #wishList.present_content .buttonarea_submit a.button{display: inline-block; width: auto; line-height:18px;} #main .apply_text .emphasize { color: #DA4636; text-shadow: 0 0 #DA4636;} #main .apply_text a { color: #00A0E9; text-decoration: underline; } #main .apply_area .f-files { margin-top: 12px; display:block; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; row-gap:10px; -webkit-column-gap:4%; -moz-column-gap:4%; column-gap:4%; row-gap:20px; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap } #main .apply_area .f-files__item { width:48% } #main .apply_area textarea { max-height: 200px; } #main .input_table .zip_area input[type="text"] { max-width: 220px; } #main .input_table .tel_area input{ max-width: 334px; } #main .input_table .zip_area input[type="text"] ~ .button { width: 136px; } .input_table #MEMBER_INPUT_ZIP_ADDRESS_MESSAGE_PANEL, .input_table #CART_SEISAN_ZIP_ADDRESS_MESSAGE_PANEL, .input_table [id$="ZIP_ADDRESS_MESSAGE_PANEL"] { color: #DA4636 !important; } /* ================================================================= 28.ポイント有効期限 使用ファイル：member_point_limit_manage.xhtml =================================================================*/ #pointLimit .summary {margin: 10px; border: 1px solid #CCC; font-size: 90%; line-height: 150%;} #pointLimit .summary h3 {font-weight: normal; font-size: 90%; background-color: #F6F6F6; padding: 10px;} #pointLimit .summary .detail {padding: 10px; position: relative;} #pointLimit .summary .detail .limit_date {} #pointLimit .summary .total {margin-bottom: 10px} #pointLimit .summary .total .point {color: #C00; } #pointLimit .summary .detail .link_point_right{position: absolute; top: 10px; right: 10px;} #pointLimit .limit_list td {vertical-align: inherit;} #pointLimit .limit_list .limit_date{display: inline-block;} #pointLimit .limit_list .right {text-align: right;} #pointLimit .limit_icon{ background-color: #C00; color: #FFFFFF; display: inline-block; font-size: 10px; font-weight: normal; line-height: 1; padding: 3px 5px; vertical-align: text-bottom; } .info__cartArea{background: #FFFFFF; margin: 30px 0; padding: 15px 32px 20px; border: 1px solid #00A0E9; border-radius: 10px;} .info__title,#cartIndex h3.info__title{text-align: center; font-size: 16px; color: #00A0E9; margin-bottom: 0; font-weight: bold;} .info__lists{border-bottom: 1px solid #CFCFCF; padding: 20px 0;} .info__lists:last-child{border-bottom: none; padding-bottom: 0;} .info__date{font-size: 16px;} .info__txt{font-size: 16px; margin-left: 24px;} .info__link{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;} /* 1200px以下 - コンテンツ幅以下 -------------------------------------------------------------*/ @media screen and (max-width: 1200px) and (min-width: 769px) { #main .main_inner.wide {padding: 0 8px;} .section .section_inner {padding: 0 16px;} /* パンくず -------------------------------------------------------------*/ #breadcrumbs { margin: -64px 0 56px; padding: 0 10px; } #breadcrumbs.wide { padding: 0; } #breadcrumbs.wide .breadcrumbs_list { padding-left: 8px; padding-right: 8px; } /* 商品一覧のスタイル -------------------------------------------------------------*/ .swiper-button-prev {left: -16px;} .swiper-button-next {right: -16px;} /* ================================================================= トップページ =================================================================*/ #top #concept .img_box{left: 0px;} /* feature - 特集 -------------------------------------------------------------*/ #top #feature .feature_list{gap: 15px;} #top #feature .feature_lists{width: calc((100% - 30px) / 3);} #top #new::after{right: 16px; } #top #new::before{left: 16px; } /* キーワード -------------------------------------------------------------*/ #keyword:after {width: calc(100% - 16px); left: 8px;} #keyword .section_inner::before {left: 16px;} #keyword .section_inner::after {right: 16px;} /* recommend - おすすめ商品 -------------------------------------------------------------*/ #awoo-keyword-popular-products .related-wrapper .related-product{margin: 0 20px 0 0;} #awoo-keyword-popular-products .related-wrapper .related-product-list{width: calc(100% + 20px);} /* カート -------------------------------------------------------------*/ .p-giftSetted .x_small_title { font-size: 10px; } #ds-gift-popup .ds-gift-option__item { max-width: calc((100% - (16px * 3)) / 4); } /*.p-giftSetted [class*="wrapping_inner_wrapper"] .p-giftSettedItem__container .p-giftSettedItem__item { width: calc((100% - (16px * 2)) / 3); }*/ #main .cart_table.p-giftTable .tanka { width: 18%; } #main .cart_table.p-giftTable .amount { width: 19%; } #main .cart_table.p-giftTable .subtotal { width: 18%; } #main .cart_table.p-giftTable .delete { width: 5%; } /* ================================================================= 商品詳細・一覧、プレゼント詳細・一覧、トピックス詳細・一覧 =================================================================*/ /* 商品一覧のスタイル -------------------------------------------------------------*/ /* 商品一覧、商品詳細ページアイコン類 -------------------------------------------------------------*/ .item_icon:not(.item_soldout) {font-size: 9px;} /* itemListDetail - 商品詳細一覧・プレゼント一覧 -------------------------------------------------------------*/ #itemList .pageguide_wrapper .pageguide {padding: 0;} #itemList #categoryInfo {gap: 16px;} #categoryInfo .img_box {min-height: 255px;} /* awoo AI item_list_awoo.xhtml -------------------------------------------------------------*/ #awoo-category-page .suggestion-tag-v2 {padding: 80px 8px;} #awoo-search-result-page .suggestion-tag {padding: 80px 8px;} #awoo-search-result-page .no-data-wrapper-v2 .related-wrapper {padding: 80px 8px;} #awoo-search-result-page .no-data-wrapper-v2 .related-wrapper .carousel-arrow { left: -8px;} #awoo-search-result-page .no-data-wrapper-v2 .related-wrapper .carousel-arrow.NEXT {left: unset; right: -8px;} /* itemDetail - 商品詳細・プレゼント詳細 -------------------------------------------------------------*/ #itemDetail .text_box .cart_button_area .btn_cart_area .button { font-size: 17px; } #main #itemDetail.main_inner { padding: 0 3vw; } #itemDetail .item_image_area .main-slider .slick-prev, #itemDetail .item_image_area .main-slider .slick-next { width: 32px; height: 32px; } #itemDetail .item_image_area .thumbs .slick-prev, #itemDetail .item_image_area .thumbs .slick-next { width: 32px; height: 32px; } #itemDetail .item_wrap { gap: 16px; } #itemDetail .item_image_area #thumbnail-list{gap: 5px;} #itemDetail .item_image_area .thumbs .img-item{width: calc((100% - 20px) / 5);} #itemDetail .text_box .about_point { flex-direction: column; gap: 3px; align-items: flex-start; } #itemDetail .text_box .time_sale {padding: 16px 16px 10px; } #itemDetail .text_box .cart_button_area .btn_cart_area .cartSubmitButton .button:disabled img{ width: 20px; margin-right: 5px; } #itemDetail .text_box .cart_button_area .btn_cart_area .cartSubmitButton .button:disabled .cart_txt { font-size: 13px; } #itemDetail .about_btns::before {width: calc(100% + 32px); left: -16px;} #itemDetail .about_btns .button .pc_s { display: block; } #itemDetail .wishlistSubmitButton .wishlistDelMessage, #itemDetail .wishlistSubmitButton .wishlistMessage {left: unset; right: -24px; transform: unset;} #itemDetail .about_btns ul { gap: 12px 8px;} #itemDetail .about_btns li { height: 36px; font-size:14px;} #itemDetail .about_btns li a { height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2; } #itemDetail .about_btns li a span { position: relative; line-height: 1.25; display: block; } #itemDetail .item_image_area .more_view{height: 15vw;} #itemDetail .item_image_area .more_button::before{bottom: 3vw;} } /* 890px以下 - 狭いコンテンツ幅以下 -------------------------------------------------------------*/ @media screen and (max-width: 922px) { /* テーブルデザイン -------------------------------------------------------------*/ /* 入力形テーブル */ #main .input_table_wrapper {padding-left: 16px; padding-right: 16px;} } /* 769px以上 - スマホ以外 -------------------------------------------------------------*/ @media screen and (min-width: 769px){ /* 共通スタイル -------------------------------------------------------------*/ /* ボタンデザイン -------------------------------------------------------------*/ .button.negative:hover,.button.border_blue:hover {background-color: #efefef;} .button.positive:hover {background-color: #4472C4; border-color: #4472C4;} /* 画像の縦横比調整 -------------------------------------------------------------*/ .box form:hover .img_box img, .box a:hover .img_box img, .box a.img_box:hover img {opacity: 0.5;} .swiper-button-prev:hover:after, .swiper-button-next:hover:after {opacity: 1;} /* ================================================================= 商品一覧 =================================================================*/ #itemList .item_list .box:has(a):hover .img_box img {opacity: 0.5;} /* narrowListCategory - 絞り込みカテゴリ -------------------------------------------------------------*/ #selectedCategory .selected_category {cursor:url(../images/cursor.cur),auto;} /* ================================================================= トップページ =================================================================*/ /* 特集 -------------------------------------------------------------*/ #top #feature .feature_lists a img:hover{opacity: 0.5;} /* recommend - おすすめ商品 -------------------------------------------------------------*/ #awoo-keyword-popular-products .related-wrapper .related-product:hover img, #awoo-favorite-related-products .related-wrapper .related-product:hover img, #awoo-related-products .related-wrapper .related-product:hover img {opacity: 0.5;} #awoo-keyword-popular-products .related-wrapper .related-product img, #awoo-favorite-related-products .related-wrapper .related-product img, #awoo-related-products .related-wrapper .related-product img {transition: 0.2s;} #awoo-keyword-popular-products .related-wrapper .slick-arrow:hover, #awoo-favorite-related-products .related-wrapper .slick-arrow:hover, #awoo-not-found-products .related-wrapper .slick-arrow:hover, #awoo-related-products .related-wrapper .slick-arrow:hover {opacity: 1} /* キーワード -------------------------------------------------------------*/ #top #keyword .awoo-tag:hover {opacity: 0.5;} #cartFlow .notice_area a:hover { opacity: .8;} #main .cart_table .img_box:hover img {opacity: .8;} #wishList .box .text .img_box:hover img {opacity: .8;} /*ラッピング*/ #ds-gift-popup .ds-gift-option label.box {cursor:url(../images/cursor.cur),auto;} #ds-gift-popup .ds-gift-option label.box:hover {opacity: 1;} #ds-gift-check-all-item__container, #ds-gift-check-all-item__container label {cursor:url(../images/cursor.cur),auto;} /* 6.extファイル用 （768px以下） -------------------------------------------------------------*/ #ext p a:not(.button):hover { opacity: .8; } #ext.guide .guide_index li a:hover {opacity: .8;} #ext.guide .guide_img a:hover { opacity: .8;} #ext .feature_list .feature_item .img_box:hover img {opacity: .8;} #awoo-category-page .products-wrapper-v2 .product__href:hover .product-image {background-size: 110%;} #awoo-search-result-page .products-wrapper-v2 .product__href:hover .product-image {background-size: 110%;} #awoo-search-result-page .no-data-wrapper-v2 .related-product:hover img {transform: scale(1.1);} #awoo-search-result-page .no-data-wrapper-v2 .carousel-arrow:hover {opacity: 1;} } /* 768px以下 - スマホ向け -------------------------------------------------------------*/ @media screen and (max-width: 768px) { /* ================================================================= base =================================================================*/ body {font-size: 14px;} #container {padding: 107px 0 0;} #main {padding: 48px 0;} #main .pb{padding-bottom: 48px;} #main .main_inner.wide {padding: 0 8px;} section.section {margin: 40px 0;} .section .section_inner {padding: 0;} /* タイトルデザイン（768px以下） -------------------------------------------------------------*/ .large_title {font-size: 16px; margin: 0 8px 40px;} .large_title .inner{font-size: 10px;} .medium_title {margin: 40px 0; font-size: 16px; text-align: center; } .medium_title::before { width: 32px; height: 26px; bottom: -30px; } .x_small_title {font-size: 14px; margin: 0 0 8px;} /* 共通スタイル -------------------------------------------------------------*/ .sp {display: block;} .pc {display: none;} .button_area {margin: 56px auto 25px; flex-direction: column; align-items: center; width: 100%; text-align: center;} .button_area .multi_wrapper {width: 100%; gap: 12px; flex-direction: column;} .button_area .multi_wrapper .button {width: 100%; margin: 0;} .button_area span{width: 100%;} .button_area .button {display: inline-block; width: 100%; max-width: none;} .button_area.reverse {flex-direction: column-reverse;} .button.zip{border-radius: 5px;} .button.large,input.large{font-size: 14px;} .button.medium, input.medium{font-size: 14px;} /* フォーム類部品 -------------------------------------------------------------*/ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea {padding: 11px 7px 11px;} /* パンくずリスト（768px以下） -------------------------------------------------------------*/ #breadcrumbs + .main_inner { font-size: 14px; } #breadcrumbs { margin: -79px 0 42px; line-height: 1.3; margin-top: -47px; overflow-x: scroll; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none;} #breadcrumbs::-webkit-scrollbar { display:none;} #breadcrumbs .breadcrumbs_list { padding: 10px 16px 8px; font-size: 10px; gap: 18px; width: auto; } #breadcrumbs .breadcrumbs_list li:first-child img { width: 12px; } #breadcrumbs .breadcrumbs_list li::after { width: 8px; left: calc(100% + 5px); top: calc(50%); } #breadcrumbs.wide { padding: 0; } #breadcrumbs.wide .breadcrumbs_list { padding-left: 8px; padding-right: 8px; } /* 全件表示、表示数セレクトボックス（768px以下） -------------------------------------------------------------*/ #main .pageguide { flex-wrap: wrap; gap: 12px; } #main .pagetotal { width: 100%; font-size: 12px; margin: 0; } #main .pagenavi { width: 100%; } #main .select_wrapper{gap: 4px;} /* テーブル （768px以下） -------------------------------------------------------------*/ #main th {padding: 12px;} #main th.title {width: 120px;} #main td {padding: 12px;} /* #main tr:last-child th{border-bottom: 1px solid #cfcfcf;} */ /* テーブル（項目見出し横並び - SP時に各行縦並び） （768px以下） -------------------------------------------------------------*/ #main table.side_by_side, #main table.side_by_side thead, #main table.side_by_side tbody, #main table.side_by_side tfoot {display: flex; flex-direction: column; justify-content: stretch; align-items: flex-start; gap: 16px; width: 100%; border: 0;} #main table.side_by_side tr, #main table.side_by_side th, #main table.side_by_side td {display: block; width: 100%; border: 0;} #main table.side_by_side th, #main table.side_by_side td {padding: 0 20px;} #main table.side_by_side .title_row {display: none;} #main table.side_by_side .data_row { position: relative; border-radius: 10px; overflow: hidden;} #main table.side_by_side .data_row dt {display: block; padding: 16px 12px 16px 0; width: 35%;} #main table.side_by_side .data_row dl{display: flex; border-bottom: 1px solid #CFCFCF;} #main table.side_by_side .data_row dd {padding: 16px 12px; width: 65%;} #main table.side_by_side .data_row td:last-of-type dl{border-bottom: none;} /* カートフローチャート -------------------------------------------------------------*/ .cart_step {margin-bottom: 32px; gap: 32px 22px;} .cart_step li {font-size: 10px; width: 50px;} .cart_step li .no {margin: 0 auto 2px; width: 32px; height: 32px; font-size: 16px; line-height: 32px;} .cart_step.kessai_flow li:first-child, .cart_step.kessai_flow li:nth-child(2) {display: none;} .cart_step.kessai_flow li:nth-child(3):after {content: none;} /* タイトルデザイン -------------------------------------------------------------*/ .normal_title {font-size: 14px;} .small_title {font-size: 12px;} .section .section_title {margin: 0 0 32px; font-size: 18px;} .section .section_title .inner {font-size: 11px; margin-top: 5px;} .section .section_title .main{padding-bottom: 4px;} .section .section_title .main::before{width: 4px; height: 4px;} /* テーブルデザイン -------------------------------------------------------------*/ #main .input_table_wrapper {padding: 48px 16px; margin: 40px calc(50% - 50vw) 0;} #main .input_table {font-size: 14px;} #main .input_table tr {display: block; padding: 16px 0;} #main .input_table .title {display: block; width: 100%; padding: 0 0 12px;} #main .input_table td {display: block; width: 100%; padding: 0;} #main .input_table .caption {font-size: 12px;} #main .input_table .data_wrapper {gap: 6px;} #main .input_table select {width: 100%; background-position: right 6px top 19px;} #main .input_table input.medium, #main .input_table input.small {max-width: unset;} #main .input_table input[type="text"], #main .input_table input[type="email"], #main .input_table input[type="password"], #main .input_table input[type="tel"], #main .input_table input[type="number"], #main .input_table textarea {font-size: 14px;} #main .input_table .sp_inner_td {padding: 0 0 0 34px;} /*テーブル型定義リスト*/ #main dl.info_box dt {font-size: 14px; padding: 7px 12px;} #main dl.info_box dd {padding: 16px 12px; font-size: 14px;} /* notice_area -------------------------------------------------------------*/ .notice_area { padding: 16px 16px 4px;} .login_boxes + .notice_area {margin: 0;} /* 商品一覧、商品詳細ページアイコン類 -------------------------------------------------------------*/ .item_icon {padding: 4px; font-size: 9px; line-height: 9px;} .item_new {padding: 20px 0 4px;} .item_soldout {font-size: 14px;} .item_soldout.point span {font-size: min(3.25vw, 16px);} /* 商品一覧のスタイル -------------------------------------------------------------*/ .item_list {gap: 13px;} .item_list .box, #itemList .item_list .box {width: calc((100% - 13px) / 2);} .item_list .box .text_box {margin-top: 8px;} .item_list .box .text_box .name {font-size: 12px;} .item_list .box .price .tax{font-size: 10px;} .item_list .box .price .teika:has(+ .sale) {font-size: 10px;} .item_list .box .text_box .price {font-size: 10px;} .swiper-button-prev, .swiper-button-next {width: 28px; height: 25px;} .swiper-button-prev::after, .swiper-button-next::after {width: 28px; height: 25px;} .swiper-button-prev {left: 4px;} .swiper-button-next {right: 4px;} /* itemDetail - 商品詳細・プレゼント詳細 -------------------------------------------------------------*/ #main.detail #breadcrumbs{margin-bottom: 0;} #main.detail #breadcrumbs .breadcrumbs_list{padding:10px 25px 20px;} #main #itemDetail.main_inner { padding: 0 25px; } #itemDetail .item_wrap { flex-wrap: wrap; gap: 0; } #itemDetail .item_image_area { width: 100%; } #itemDetail .text_box { width: 100%; } #itemDetail .item-detail-slider_inner { padding: 0 0; overflow: visible; } #itemDetail .item_image_area .main-slider .slick-prev, #itemDetail .item_image_area .main-slider .slick-next { width: 32px; height: 32px; } #itemDetail .item_image_area .main-slider .slick-prev { left: -4px; } #itemDetail .item_image_area .main-slider .slick-next { right: -4px; } #itemDetail .item_image_area #thumbnail-list{gap: 6px; margin: 10px 0 20px;} #itemDetail .item_image_area .thumbs .img-item{width: calc((100% - 24px) / 5);} #itemDetail .item_image_area .more_view{height: 26vw;} #itemDetail .item_image_area .more_view::after{height: 10vw; -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);} #itemDetail .item_image_area .more_button::before{width: 22px; height: 12px; bottom: 20px;} #itemDetail .item_image_area .more_button.is-open::before{bottom: 5px;} #itemDetail .text_box .bg_white{padding: 15px 15px 20px 15px;} #itemDetail .text_box .item_icon_list { gap: 6px;} #itemDetail .text_box .item_icon_list .item_icon { min-width: 36px; font-size: 10px; line-height: 10px;} #itemDetail .text_box .time_sale { font-size: 13px;margin-bottom: 8px;} #itemDetail .text_box .time_sale .time_sale_period { font-size: 13px; } #itemDetail .text_box .item_name { font-size: 18px; margin: 0 0 10px; padding: 0 10px 6px;} #itemDetail .text_box .item_info01 { font-size: 13px; margin: 15px 0 10px;} #itemDetail .text_box .item_price_box { padding: 14px 0 0; margin: 0 0 10px; } #itemDetail .text_box .item_price_box {font-size: 16px;} #itemDetail .text_box .item_price_box .teika .price_en, #itemDetail .text_box .item_price_box .time-sale .other .price_en { font-size: 26px; } #itemDetail .text_box .item_price_box .teika .en_mark {font-size: 22px; } #itemDetail .text_box .item_price_box .time-sale .price_en { font-size: 20px; } #itemDetail .text_box .item_price_box .time-sale > .en_mark {font-size: 17px; } #itemDetail .text_box .item_price_box .time-sale .other {font-size: 14px;} #itemDetail .text_box .item_price_box .discount .price_en {font-size: 26px;} #itemDetail .text_box .item_price_box .point{font-size: 18px;} #itemDetail .text_box .item_price_box .discount .en_mark {font-size: 18px;} #itemDetail .text_box .item_price_box .time-sale .tax_through {font-size: 10px; margin-right: 0;} #itemDetail .text_box .item_price_box .time-sale .tax-rate {font-size: 10px;} #itemDetail .text_box .item_price_box .tax-rate{font-size: 10px;} #itemDetail .text_box .item_price_box .time-sale .other .en_mark {font-size: 22px;} #itemDetail .text_box .stock_notice_caution, #itemDetail .text_box .maximum_amount { font-size: 13px; margin: 8px 0 12px; } #itemDetail .text_box .item_price_box .tax {font-size: 15px;} #itemDetail .text_box .about_point { flex-direction: column; gap: 3px; align-items: flex-start; } #itemDetail .text_box .about_point .button.link.border_blue::after{width: 9px; height: 7px;} #itemDetail .text_box .cart_button_area .item_amount select { min-width: 55px; background: url(../images/icon/link_arrow_below_blue.svg) no-repeat right 4px top 50%; background-size: 14px 7px;} #itemDetail .item-option > div > label { font-size: 13px; } #itemDetail .propaty_area .variation_inner .variation_ttl { font-size: 13px; } #itemDetail .text_box .cart_button_area .btn_cart_area { width: calc(100% - 32px - (12px * 2)); margin: 0; } #itemDetail .text_box .cart_button_area .item_amount:not([style="display: none;"]) + .btn_cart_area { width: calc(100% - 32px - 55px - (12px * 2));} #itemDetail .text_box .cart_button_area .btn_cart_area .button { font-size: 15px; height: 40px; padding: 6px 5px; } #itemDetail .text_box .cart_button_area .btn_cart_area .button.link::after{width: 12px; height: 10px; right: 8px;} #itemDetail .text_box .cart_button_area .btn_cart_area .button img { width: 24px; margin-right: 6px; } #itemDetail .text_box .cart_button_area .btn_cart_area .button.detail_cart-btn_inactive.detail_cart-btn_disable{line-height: 26px;} #itemDetail .text_box .cart_button_area .btn_cart_area .cartSubmitButton .button:disabled { padding-top: 9px; } #itemDetail .text_box .cart_button_area .btn_cart_area .cartSubmitButton .button:disabled img { display: inline-block; margin-left: -10px; } #itemDetail .text_box .cart_button_area .btn_cart_area .cartSubmitButton .button:disabled .cart_txt { font-size: 12px; display: inline-block; } #itemDetail .text_box .stock_notice .button{font-size: 15px;} /* #itemDetail .text_box .cart_button_area .wishlist_btn { width: 32px; } */ #itemDetail .text_box .cart_button_area .wishlist_btn img { width: 100%; } #itemDetail .wishlistSubmitButton .wishlistMessage { top: -143px; left: auto; right: 0; margin-left: auto; padding: 27px 16px 3px; transform: unset;} #itemDetail .wishlistSubmitButton .wishlistMessage .title { font-size: 13px; } #itemDetail .wishlistSubmitButton .wishlistDelMessage {top: -86px; left: auto; right: 0; margin-left: auto; padding: 27px 16px 3px; transform: unset;} #itemDetail .wishlistSubmitButton .wishlistDelMessage .title { font-size: 13px; } #itemDetail .cartSubmitButton .cartMessage {top: -136px;} #itemDetail .text_box .cart_button_area .btn_cart_area .cartSubmitButton .cartMessage .button{height: auto;} .ds-detail-modal__container { padding: 24px; } .ds-detail-modal__content { font-size: 14px; } .ds-detail-modal__action.button_area { margin: 24px auto 0; gap: 16px; } .ds-detail-modal__action.button_area .button { width: calc(100% - 8px); } #itemDetail .about_btns { margin: 16px 0 10px; } #itemDetail .about_btns ul { gap: 4px 8px; } #itemDetail .about_btns li { max-width: calc((100% - 8px) / 2); } #itemDetail .about_btns .button { padding:4px 17px 4px 6px;font-size: 12px; margin: 0;} #itemDetail .about_btns .button.link::after { width: 12px; height: 9px; right: 6px; } #itemDetail .share_contact_btns .share_btn { font-size: 12px; max-width: 270px;} #itemDetail .share_contact_btns .share_btn img{width: 20px;} #itemDetail .propaty_area .variation_inner { margin-bottom: 16px; } #itemDetail #item_explanation .item_explanation_inner .medium_title:first-of-type { font-size: 20px; margin: 0 0 52px; } #itemDetail #item_explanation {padding: 25px 0 42px; margin: 38px calc(50% - 50vw) 0;} #itemDetail #item_explanation { font-size: 14px; } #itemDetail .text_box input[type="checkbox"] + label { margin: 6px 16px 6px 28px; } #itemDetail .text_box .soryo_discount { font-size: 12px; } #itemDetail #item_explanation .variation-info, #itemDetail #item_explanation .variation-inner { font-size: 11px; margin: 0 0 30px; } #itemDetail .dt_category_list { margin: 34px 0 38px; } #itemDetail .dt_category_list h3 { font-size: 16px; padding: 5px 12px 10px;} #itemDetail .dt_category_list li{margin: 0 2px 4px 0;} #itemDetail .dt_category_list li a { font-size: 11px; line-height: 11px; padding: 3px 5px;} #itemDetail .dt_category_list .breadcrumbs_category{padding: 14px 8px;} #itemDetail .detail_note { font-size: 12px; } #itemDetail .detail_note li { margin: 0 0 3px; } #itemAccessLog {padding: 25px 0;} #itemAccessLog::after { clip-path: polygon(0 0, 100% 0, 100% 46%, 0 46%); } #main #recommend .item_list { gap: 0; flex-wrap: nowrap; } #main #itemAccessLog .item_list { gap: 0; flex-wrap: nowrap; } #main .item_list .box .text_box { margin-top: 12px !important; } #main .item_list .box .text_box .name { -webkit-line-clamp: 3; line-height: 1.230769230769231; } #itemAccessLog .swiper-container-wrapper {width: 100vw; margin: 0 calc(50% - 50vw); overflow: hidden;} #itemAccessLog .swiper-container {padding: 0 16px;} #itemAccessLog .box a h3 {font-size: 24px; padding: 6px 3px 0 0;} #itemAccessLog .swiper-button-next{right: calc(18vw);} #itemAccessLog .swiper-button-prev{left: calc(18vw);} /* 6.extファイル用 （768px以下） -------------------------------------------------------------*/ #ext p { margin-bottom: 24px; line-height: 1.5; } #ext p:not([class]) + p:not([class]) { margin-top: -8px; } #ext p:not([class]) + ul , #ext p:not([class]) + ol { margin-top: -6px; } #ext .list_parenthesis > li { padding-left: 25px; } /* ご利用ガイド（768px以下） -------------------------------------------------------------*/ #ext.guide .guide_wrapper { display: block; } #ext.guide .guide_index { max-width: none; margin: 40px auto 78px; border: none; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 8px; } #ext.guide .guide_index li { width: calc((100% - (8px * 1)) / 2); } #ext.guide .guide_index li a { font-size: 13px; padding: 0 24px 0 12px; } #ext.guide .guide_index li a::after { right: 8px; } #ext .normal_title { margin: 32px 0 16px; } #ext .small_title { margin: 32px 0 8px; } #ext .x_small_title { margin: 24px 0 8px; } #ext.guide .guide_index li a { border: 1px solid #00A0E9;font-size: 13px; padding: 0 24px 0 12px; } #ext.guide .guide_index li a::after { right: 8px; } #ext.guide .guide_content { width: 100%; } #ext .normal_title { margin: 32px 0 16px; } #ext .small_title { margin: 32px 0 8px; } #ext .x_small_title { margin: 24px 0 8px; } /* よくあるご質問（768px以下） -------------------------------------------------------------*/ #ext.faq .faq_list dt { font-size: 14px; padding: 16px 50px 16px 50px; } #ext.faq .faq_list dt span { font-size: 18px; top: 14px; } #ext.faq .faq_list dd { font-size: 14px; padding: 20px 16px 32px; } #ext.faq .faq_list .answer {margin-bottom: 16px;} #ext.faq .faq_list dt::after, #ext.faq .faq_list dt::before {width: 17px; height: 1px; } /* 特集一覧（768px以下） -------------------------------------------------------------*/ #ext.feature_list #featureListParent {width: 100%; margin: 0; padding: 0; gap: 16px;} #ext .feature_list .feature_item {width: calc((100% - (16px)) / 2);} #ext .feature_list .feature_item p {padding: 13px 28px 12px; font-size: 13px; max-width: 197px;} /* 特商（768px以下） -------------------------------------------------------------*/ #ext.tokushou .tokushou_table th { min-width: 0; padding: 10px 12px; width:100%; display: block; border-radius: 10px 10px 0 0; border-bottom: 1px solid #cfcfcf;} #ext.tokushou .tokushou_table td { padding: 16px 12px; width:100%; display: block; font-size: 14px; border-radius: 0 0 10px 10px; margin-bottom: 4px; border-bottom: none;} #ext.tokushou .tokushou_table td .small_title { font-size: 15px; } #ext.tokushou .tokushou_table td .x_small_title { font-size: 14px; } /* awoo AI item_list_awoo.xhtml -------------------------------------------------------------*/ #awoo-category-page {padding: 0 25px;} #awoo-category-page .category-page-h1-v2 {font-size: 22px; margin: 0 8px 40px;} #awoo-category-page .suggestion-tag-dropdown-v2 .suggestion-tag-title-v2{font-size: 16px;} #awoo-category-page .suggestion-tag-list-container-v2 .awoo-tag {font-size: 11px;} #awoo-category-page .suggestion-tag-dropdown-v2 .suggestion-tag-title-v2:after {font-size: 12px;} #awoo-category-page .suggestion-tag-dropdown-v2:after {font-size: 12px; position: absolute; width: 100%; bottom: -8px;} #awoo-category-page .suggestion-tag-v2 {padding: 48px 0 56px;} #awoo-category-page .suggestion-tag-wrapper-v2:before, #awoo-category-page .suggestion-tag-wrapper-v2:after, #awoo-category-page .suggestion-tag-dropdown-v2:before, #awoo-category-page .suggestion-tag-list-container-v2:after {display: none;} #awoo-category-page .suggestion-tag-list-container-v2 {padding: 14px 8px;} #awoo-category-page .products-wrapper-v2 {gap: 13px; grid-template-columns: repeat(2, 1fr);} #awoo-category-page .products-wrapper-v2 .product__name {font-size: 12px;} #awoo-category-page .products-wrapper-v2 .product__price .product-price {font-size: 10px;} #awoo-category-page .right-block-v2:before {height: calc(100% + 15px + 90px);} #awoo-category-page .right-block-v2 .selector-group-v2 {flex: 1;} #awoo-category-page .right-block-v2 .selector-group-v2 > div {width: 100%;} #awoo-category-page .pagination-wrapper-v2 .awoo-pagination {margin-bottom: 56px;} #awoo-category-page .pagination-wrapper-v2 .awoo-pagination li {width: 25px; height: 25px; line-height: 25px; font-size: 11px;} /* awoo AI search_result_awoo.xhtml -------------------------------------------------------------*/ .main_inner:has(#awoo-search-result-page) {padding: 0 25px;} #awoo-search-result-page .suggestion-tag-wrapper .suggestion-tag-title { font-size: 16px;} #awoo-search-result-page .suggestion-tag-wrapper .suggestion-tag-list-container{padding: 14px 8px;} #awoo-search-result-page .suggestion-tag {padding: 48px 0 56px;} #awoo-search-result-page .suggestion-tag-wrapper .awoo-tag {font-size: 11px;} #awoo-search-result-page .suggestion-tag-wrapper:before, #awoo-search-result-page .suggestion-tag-wrapper:after, #awoo-search-result-page .suggestion-tag-wrapper .awoo-tag-wrapper:before, #awoo-search-result-page .suggestion-tag-wrapper .awoo-tag-wrapper:after {display: none;} #awoo-search-result-page .suggestion-tag-wrapper .awoo-tag-wrapper {padding: 0;} #awoo-search-result-page .right-block-v2:before {height: calc(100% + 15px + 90px);} #awoo-search-result-page .control-wrapper {gap: 12px;} #awoo-search-result-page .control-wrapper .left-block {width: calc(100% - 4px);} #awoo-search-result-page .control-wrapper .left-block .price-interval-input {width: calc(100% - 4px);} #awoo-search-result-page .control-wrapper .right-block {width: 100%;} #awoo-search-result-page .control-wrapper .right-block > div {flex: 1;} #awoo-search-result-page .control-wrapper .right-block > div > div, #awoo-search-result-page .control-wrapper .right-block > div > div > div {width: 100%;} #awoo-search-result-page .products-wrapper-v2 {gap: 13px; grid-template-columns: repeat(2, 1fr);} #awoo-search-result-page .products-wrapper-v2 .product__name {font-size: 12px;} #awoo-search-result-page .products-wrapper-v2 .product__price .product-price {font-size: 10px;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination {margin-bottom: 56px;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li {width: 25px; height: 25px; line-height: 25px; font-size: 11px;} #awoo-search-result-page .related-wrapper .related-title {font-size: 30px; margin: 0 0 32px; padding: 34px 0 0;} #awoo-search-result-page .related-wrapper .related-title:after {font-size: 12px;} #awoo-search-result-page .no-data-wrapper-v2 .rec-slider-container {width: calc(100% - 8px);} #awoo-search-result-page .no-data-wrapper-v2 .related-wrapper {padding: 48px 8px 56px;} #awoo-search-result-page .no-data-wrapper-v2 .related-product {margin: 0 8px 0 0;} #awoo-search-result-page .related-wrapper .related-product-name {font-size: 13px;} #awoo-search-result-page .related-wrapper .product-price {font-size: 16px;} #awoo-search-result-page .no-data-wrapper-v2 .carousel-arrow.NEXT {width: 32px; height: 32px; right: -10px;} #awoo-search-result-page .no-data-wrapper-v2 .carousel-arrow {width: 32px; height: 32px; left: -8px;} #wishList + .recommend_wrapper .section_inner, #errorPage + .recommend_wrapper .section_inner, #error404 .recommend_wrapper .section_inner, .recommend_wrapper #recommend.section .section_inner{padding: 0;} #itemList + .recommend_wrapper .section_inner{padding: 0 25px;} /* 13.購入履歴・見積履歴 （768px以下） -------------------------------------------------------------*/ #history .history_search {padding: 16px 16px 28px;} #history .history_search .section_title {font-size: 16px; margin-bottom: 9px; } #history .history_search .input_table tr { padding: 0 0 14px; } #history .history_search .input_table .title { font-size: 13px; } #history .history_order {margin: 0 0 16px; padding-bottom: 16px;} #history .history_order .history_info { background: #FFFFFF; margin: 0 0 2px; } #history .history_order .infoarea { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 3px; position: relative;} #history .infoarea { position: relative; } #history .infoarea .iconarea{ max-width: 80px; min-width: 80px; text-align: center; width: 100%; } #history .infoarea .buttons{ display: block; width: 100%; display: flex; align-items: flex-start; justify-content: flex-end; gap: 16px; } #history .infoarea .buttons > div { margin: 0; width: calc(50% - 8px); } #history .infoarea .buttons > div .button { height: 30px; padding: 4px; width: 100%; max-width: 100%; } #history .infoarea .order_status {display: block; margin: 0; padding: 0; border: 0; position: absolute; top: 0; left: 0;} #history .infoarea .order_info { margin: 0 0 5px; width: calc(100% - 80px - 16px); } #history .infoarea .main_info {margin: 0 0 0; width: 100%; } #history .infoarea .main_info .number { font-size: 13px; margin: 0;} #history .infoarea .sub_info {margin: 0 0 0; width: 100%; gap: 1px; } #history .infoarea .sub_info .sub { font-size: 11px; } #history .history_order thead .title_row:not(.sp) { display: none !important; } #history .search .button_area { flex-direction: column-reverse; margin-top: 24px; } #history .search .button_area .button { width: 100%; margin-left: -4px; margin-right: -4px;} #history .search .button_area .button.positive { max-width: 100%; } #main #history .pagenavi select { margin-right: auto; } #history .message {margin: 0 0 5px; padding: 0 10px 0 15px; border: 0;} #history .infoarea .buttonarea {display: flex !important; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin: 0; width: 100%;} #history .infoarea .buttonarea .payment_change {width: calc(50% - (10px / 2));} #history .infoarea .buttonarea .button {margin: 5px 0;} #history .infoarea .buttonarea .cancel {width: calc(50% - (10px / 2));} #history .infoarea .buttonarea .cart_all {margin: 0; width: 100%;} #history .infoarea .buttonarea .cart_all .button {width: 100%; padding: 7px 10px; line-height: 1; top: auto; transform: none;} #history .history_order .history_info-product { padding-top: 12px; } #history .total_wrapper { flex-wrap: wrap; flex-direction: column-reverse; } #history .total_wrapper .other_box { width: 100%; } #history .inline_span.sp { display: inline-block; } #history.main_inner .history_order tbody{border-radius: 10px; overflow: hidden;} #history.main_inner .history_order tbody:first-of-type{border-radius: 0 0 10px 10px;} /* カート情報 */ #main .main_inner .history_order, #main .main_inner .history_order thead, #main .main_inner .history_order tbody, #main .main_inner .history_order tfoot, #main .main_inner .history_order tr, #main .main_inner .history_order th, #main .main_inner .history_order td {display: block; width: 100%;} #main .main_inner .history_order td {background: transparent; } #main .main_inner .history_order .title_row.pc {display: none;} #main .main_inner .history_order .title_row.sp {display: block;} #main .main_inner .history_order .data_row {padding: 15px 20px;} #main .main_inner .history_order .data_row td {padding: 0;} #main .main_inner .history_order .data_row dl {margin: 15px 0 0; display: flex; justify-content: space-between; align-items: flex-start;} #main .main_inner .history_order .data_row .amount dl {align-items: center;} #main .main_inner .history_order .data_row dt {display: block;} #main .main_inner .history_order .data_row dd {text-align: right;} #main .main_inner .history_order th.delete, #main .main_inner .history_order td.delete {display: none;} #main .main_inner .history_order .history_item { position: absolute; top: 0; left: 0; padding: 0 0 0 104px; position: relative;} #main .main_inner .history_order .history_item .img_box {position: absolute; top: 0; left: 12px;} #main .main_inner .history_order .delete a:before {left: 6px; transform: translate(0, -50%); transition: all .3s;} #main .main_inner .history_order .history_item .text_box {padding: 0 0 0; width: 100%; margin: 0 0 0; } #main .main_inner .history_order .history_item .text_box .price {margin: 6px 0 0;} #history .history_item { position: relative; } #main .main_inner .history_order .tanka {margin: 0 0 0 auto; width: calc(100% - 104px); padding: 4px 12px 4px 0;} #main .main_inner .history_order .amount {margin: 0 0 0 auto; width: calc(100% - 104px); padding: 4px 12px 4px 0;} #main .main_inner .history_order .price {margin: 0 0 0 auto; width: calc(100% - 104px); padding: 4px 12px 4px 0;} #history .cart .button { width: 100%; max-width: 320px; margin-right: auto; margin-left: 0;} #main .main_inner .history_order .putin {width: 100%;} #main .main_inner .history_order .putin dl {flex-wrap: wrap; padding: 15px 0 0; width: 100%; border-top: dashed 1px #dadada;} #main .main_inner .history_order .putin dt {margin: 0 0 8px; width: 100%; } #main .main_inner .history_order .putin .HTMLFORM_ELEMENT {display: inline-block;} #main .main_inner .history_order .putin label {margin: 5px 15px 5px 0;} #main .main_inner .history_order.confirm .putin {margin: 0 0 0 auto; width: calc(100% - 95px);} #main .main_inner .history_order.confirm .putin dl {flex-wrap: nowrap; padding: 0; border: 0;} #main .main_inner .history_order.confirm .putin dt {margin: 0; width: auto; font-weight: normal;} #main .main_inner .history_order .propertyimg_box {width: 60px; height: 60px;} #main #history .nouhinsho_content .input_table .title { width: 100%; } #main #history .nouhinsho_content .input_table td{ width: 100%; max-width: none; } #main .main_inner .history_order .total_wrapper {padding: 0; flex-wrap: wrap; flex-direction: column-reverse; background: transparent;} #main .main_inner .history_order .total_wrapper .total {padding: 16px 8px; margin: 0 auto; width:100%; background: #FFFFFF; border-radius: 10px;} #main .main_inner .history_order .total_wrapper .total dl { width: calc(100% - 88px); margin-left: auto; } #main .main_inner .history_order .total_wrapper .buttonarea .button {width: 100%; max-width: 100%; max-width: 320px; } #main .main_inner .history_order .total_wrapper .buttonarea.other {margin: 0 auto; width: calc(100% - 23px);} #main .main_inner .history_order .total_wrapper .buttonarea.other .button {margin: 15px 0 0; width: calc(100% - 100px); max-width: 320px;} #main .main_inner .history_order .total_wrapper .other_box {margin: 5px auto 0; background: #FFFFFF; border-radius: 10px; font-size: 13px; padding: 16px 16px 16px; } #main .main_inner .history_order .total_wrapper .other_box dl {font-size: 13px;} #main .main_inner .history_order .total_wrapper .other_box .buttonarea {margin: 15px 10px 8px;} #main .main_inner .history_order .total_wrapper .other_box .buttonarea .button {max-width: 100%; max-width: 320px; margin: 0 auto; } /* 16.クレジットカード登録画面 （768px以下） -------------------------------------------------------------*/ #main #credit table.side_by_side td.button_area, #main #credit table.side_by_side td.button_area dl, #main #credit table.side_by_side td.button_area span, #main #credit table.side_by_side td.button_area a { width: 100%; max-width: none; } #main #credit table.side_by_side td.button_area.delete {margin: 0;} #main #credit table.side_by_side td.button_area dt{text-align: left;} /* 18.アドレス帳 （768px以下） -------------------------------------------------------------*/ #addressList h3 { font-size: 15px; } #addressList h3 .kana { font-size: 12px; } #addressList .box {display: block;} #addressList .box .text {margin: 0; width: 100%; font-size: 13px; } #addressList .box .button_area { width: 100%; max-width: 100%; margin-top: 12px; } #addressList .box .button_area.wide { width: 100%; max-width: 100%; } #addressList .box .button_area div {display: flex; align-items: flex-start; justify-content: center; margin: 0 0 0; flex-direction: row-reverse; width:100%; max-width: 100%;} #addressList .box .button_area.wide div { margin: 8px 0 0; } #addressList .box .button_area .button { margin: 0 0 6px; } #addressList .box .button_area:not(.wide) .button:first-child {margin: 0;} #addressList .box .button_area:not(.wide) .button:last-child {margin: 0 10px 0 0;} #addressList .sentence {margin: 0;} /* 27.ポイント履歴 （768px以下） -------------------------------------------------------------*/ #pointRecord { font-size: 14px; } #pointRecord .record_list td .point { font-size: 110%;} #pointRecord .record_list thead { display: none; } #pointRecord .total { font-size: 14px; } #pointRecord .total .hold { font-size: 15px; } #pointRecord .total .point {font-size: 22px;} #pointRecord .total .limit .point {font-size: 18px;} /* present （768px以下） -------------------------------------------------------------*/ .password_content #error { margin: 20px 0; } #main .present_content .present_box {display: block; margin-bottom: 50px;} #main .present_content .present_image_area {margin: 0 0 30px; width: 100%;} #main .present_content .text { width: 100vw; margin: 0 -16px; padding: 24px 16px;} #main .present_content .text .text_inner {padding: 0; width: 100%;} #main .present_content .text p {margin: 0 0 6px;} #main .present_content .text .other { display: block; } #main .present_content .text .item_name {margin: 0 0 6px; font-size: 20px;} #main .present_content .text .price {margin: 0 0 6px;} #main .present_content .text .button_area .button {max-width: 100%;} #main .present_content .explanation {margin: 40px auto;} #main .present_content .wishlist_wrapper .text_box .button_area { border: none; } #main #wishList.present_content .box .button_area .button { max-width: 320px; } /* ================================================================= プレゼントリスト =================================================================*/ #main .wishlist.present .appeal { font-size: 13px; } #main .wishlist.present .present_comment { font-size: 12px; } #wishList.present_content .box .text_box_wrapper {flex-direction: column; gap: 12px;} #wishList.present_content .box .button_area {max-width: unset;} #wishList.present_content .box .button_area span {width: 100%;} #wishList.present_content .box .button_area {padding: 12px 0 0;font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.32);} #wishList.present_content .box .button_area .button {max-width: unset; width: calc(100% - 6px);} #main .apply_area .f-files__item { width:100% } #main .input_table .zip_area input[type="text"], #main .input_table .tel_area input {max-width: 100%; width: 100%;} #main .input_table .zip_area input[type="text"] ~ .button, #main .input_table .tel_area input ~ .button {width: 114px;} /* ================================================================= トップページ =================================================================*/ /* top -------------------------------------------------------------*/ #top .section {padding: 25px 0; margin: 20px 0;} #top .section .section_inner {padding: 0 25px;} #top .button_area .button{width: 190px; max-width: 190px;} /* importantInfo - 重要なお知らせ -------------------------------------------------------------*/ #top #important_info{padding: 0; margin: 10px 0;} #top #importantInfo a {padding: 10px 14px; text-align: left; flex-direction: column; font-size: 12px; gap: 5px;} #top #importantInfo a .date{font-size: 11px;} /* topics - トピックス -------------------------------------------------------------*/ #top #topics .tabs {flex-wrap: nowrap; overflow: auto; padding: 0 25px; margin: 0 0 10px -25px; width: calc(100% + 50px); gap:6px 4px;} #top #topics .section_inner::after{width: 73px; height: 83px; right: 10px; bottom: -40px;} #top #topics .tabs li{font-size: 12px;} #top #topics .topics_list .box {width: 100%; padding: 8px 0;} #top #topics .topics_list .box.active:nth-child(n + 4) {display: none;} #top #topics .topics_list .box a {gap: 12px;} #top #topics .topics_list .img_box {min-height: 120px; max-width: 120px; min-width: 120px; border-radius: 16px;} #top #topics .topics_list .info {font-size: 14px;} #top #topics .topics_list .info .item_icon {padding: 3px 5px; font-size: 11px; line-height: 11px;} #top #topics .topics_list .text {font-size: 13px;} #top #topics .inline_link {font-size: 13px;} #top #topics .button_area{margin:20px auto;} /* ピックアップ -------------------------------------------------------------*/ #top #new {padding: 25px 0px 20px; position: relative;} #top #new .section_inner::after,#top #new .section_inner::before{display: none;} #top #new::before{position: absolute; content: ""; background: url(../images/nobita.png) no-repeat center / contain; width: 44px; height: 82px; left: 25px; bottom: -2px; z-index: 1;} #top #new::after{position: absolute; content: ""; background: url(../images/shizuka.png) no-repeat center / contain; width: 40px; height: 82px; right: 25px; bottom: 1px;} #top #new .button_area{max-width: 190px;} /* ブランドコンセプト -------------------------------------------------------------*/ #top #concept .section_inner {padding: 0 25px; display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; background: url(../images/bg/shopinfo_main_bg_sp.png) no-repeat center / cover} #top #concept .text_box{max-width: fit-content;} #top #concept .img_box {width: 100%; left: auto;} #top #concept .img_box img.shop_img{max-width: 100%;} #top #concept .img_box.pc{display: none;} #top #concept .img_box.sp{display: block;} #top #concept .text_box {width: 100%;} #top #concept .text_box .large_title {margin: 25px 0 10px;} #top #concept .text_box .large_title .inner{font-size: 16px;} #top #concept .text_box .large_title .main{font-size: 12px;} #top #concept .text_box p {font-size: 12px; width: 100%;} #top #concept .button_area{margin-top: 10px;} #top #concept .text_box_inner {padding: 0; margin: 0 auto;} /* feature - 特集 -------------------------------------------------------------*/ #top #feature{padding-top: 10px;} #top #feature .feature_list{flex-direction: column; padding: 0 25px; gap: 15px;} #top #feature .feature_lists{width: 100%;} #top #feature .feature_lists p {font-size: 12px;} /* ranking - 人気商品ランキング -------------------------------------------------------------*/ #top #ranking .swiper-container-wrapper {width: 100vw; margin: 0 calc(50% - 50vw); overflow: hidden;} #top #ranking .swiper-container {padding: 0 25px;} #top #ranking .swiper-button-next{right: 18vw; top: calc((100% - 86px) / 2);} #top #ranking .swiper-button-prev{left: 18vw; top: calc((100% - 86px) / 2);} #top #ranking .box a{padding-top: 26px;} #top #ranking .box a h3 {font-size: 13px;width: 34px; height: 26px; padding-top: 12px;} #top #ranking .box#ranking_no1 a h3,#top #ranking .box#ranking_no2 a h3 {height: 25px;} /* recommend - おすすめ商品 -------------------------------------------------------------*/ #top .recommend_wrapper {padding: 48px 0 56px!important; margin: 0;} #top #recommend .section_inner {padding: 0;} .recommend_wrapper {padding: 25px 0px; gap: 25px;} #itemList + .recommend_wrapper, #wishList + .recommend_wrapper {margin: 56px 0 0;} #awoo-keyword-popular-products .related-wrapper .related-product-list {width: 100%;} #awoo-keyword-popular-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {gap: 8px; padding: 0 16px;} #awoo-keyword-popular-products .related-wrapper:not(:has(.slick-initialized)) .related-product {margin: 0; width: calc((100% - 8px) / 2); max-width: unset;} #awoo-keyword-popular-products .related-wrapper .slick-list {padding: 0;margin-right: -20px;} #awoo-keyword-popular-products .related-wrapper .slick-track{margin-right: -20px;} #awoo-keyword-popular-products .related-wrapper .related-title {font-size: 20px; margin: 0 0 32px; padding: 34px 0 0;} #awoo-keyword-popular-products .related-wrapper .related-title:after {font-size: 12px;} #awoo-keyword-popular-products .related-wrapper .related-product {margin: 0 20px 0 0;} #awoo-keyword-popular-products .related-wrapper .related-product:last-child {margin: 0;} #awoo-keyword-popular-products .related-wrapper .related-product-name {font-size: 13px; margin-top: 5px;} #awoo-keyword-popular-products .related-wrapper .product-price {font-size: 10px;} #awoo-keyword-popular-products .related-wrapper .slick-arrow {top: calc((100% - 75px) / 2); left: 65px; width: 28px; height: 25px;} #awoo-keyword-popular-products .related-wrapper .slick-arrow.slick-next {right: 65px;} /* awoo 画像レコメンド - お気に入り*/ #awoo-favorite-related-products .related-wrapper .related-product-list {width: 100%;} #awoo-favorite-related-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {gap: 8px; padding: 0 16px;} #awoo-favorite-related-products .related-wrapper:not(:has(.slick-initialized)) .related-product {margin: 0; width: calc((100% - 8px) / 2); max-width: unset;} #awoo-favorite-related-products .related-wrapper .slick-list {padding: 0 16px;} #awoo-favorite-related-products .related-wrapper .related-title {font-size: 20px; margin: 0 0 32px; padding: 0;} #awoo-favorite-related-products .related-wrapper .related-title:after {font-size: 12px;} #awoo-favorite-related-products .related-wrapper .related-product {margin: 0 20px 0 0;} #awoo-favorite-related-products .related-wrapper .related-product:last-child {margin: 0;} #awoo-favorite-related-products .related-wrapper .related-product-name {font-size: 12px; margin-top: 5px;} #awoo-favorite-related-products .related-wrapper .product-price {font-size: 10px;} #awoo-favorite-related-products .related-wrapper .slick-arrow {top: calc((100% - 75px) / 2); left: 65px; width: 28px; height: 25px;} #awoo-favorite-related-products .related-wrapper .slick-arrow.slick-next {right: calc(18vw + 10px);} /* awoo 画像レコメンド -商品詳細*/ #awoo-related-products .related-wrapper .related-product-list {width: 100%;} #awoo-related-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {gap: 8px; padding: 0 16px;} #awoo-related-products .related-wrapper:not(:has(.slick-initialized)) .related-product {margin: 0; width: calc((100% - 8px) / 2); max-width: unset;} #awoo-related-products .related-wrapper .slick-list {padding: 0 16px;} #awoo-related-products .related-wrapper .related-title {font-size: 20px; margin: 0 0 32px; padding: 0;} #awoo-related-products .related-wrapper .related-title:after {font-size: 12px;} #awoo-related-products .related-wrapper .related-product {margin: 0 20px 0 0;} #awoo-related-products .related-wrapper .related-product:last-child {margin: 0;} #awoo-related-products .related-wrapper .related-product-name {font-size: 12px; margin-top: 5px;} #awoo-related-products .related-wrapper .product-price {font-size: 10px;} #awoo-related-products .related-wrapper .slick-arrow {top: calc((100% - 75px) / 2); left: 65px; width: 28px; height: 25px;} #awoo-related-products .related-wrapper .slick-arrow.slick-next {right: calc(18vw + 10px);} /* awoo 画像レコメンド - 404・エラーページ*/ #awoo-not-found-products .related-wrapper .related-product-list {width: 100%;} #awoo-not-found-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {gap: 8px; padding: 0 16px;} #awoo-not-found-products .related-wrapper:not(:has(.slick-initialized)) .related-product {margin: 0; width: calc((100% - 8px) / 2); max-width: unset;} #awoo-not-found-products .related-wrapper .slick-list {padding: 0 16px;} #awoo-not-found-products .related-wrapper .related-title {font-size: 20px; margin: 0 0 32px; padding: 0;} #awoo-not-found-products .related-wrapper .related-title:after {font-size: 12px;} #awoo-not-found-products .related-wrapper .related-product {margin: 0 20px 0 0;} #awoo-not-found-products .related-wrapper .related-product:last-child {margin: 0;} #awoo-not-found-products .related-wrapper .related-product-name {font-size: 12px; margin-top: 5px;} #awoo-not-found-products .related-wrapper .product-price {font-size: 10px;} #awoo-not-found-products .related-wrapper .slick-arrow {top: calc((100% - 75px) / 2); left: 65px; width: 28px; height: 25px;} #awoo-not-found-products .related-wrapper .slick-arrow.slick-next {right: calc(18vw + 10px);} /* awooAI キーワード -------------------------------------------------------------*/ #keyword::after {content: none;} #keyword .section_title .inner{font-size: 16px; padding: 10px 25px 10px; top: -25px;} #keyword .section_title::before, #keyword .section_title {padding: 0 4px; margin: 0 0 24px; font-size: 26px; width: 100%;} #keyword .section_title::after {position: absolute; left: 0; width: 100%; top: 38px;} #keyword .awoo-tag-wrapper {padding: 24px 8px;} #keyword .section_title::before {content: none;} #top #keyword .section_inner, #keyword .section_inner {padding: 0 16px;} #keyword .section_inner::before {content: none;} #keyword .section_inner::after {content: none;} #awoo-keyword-popular-tags::after {content: none;} #awoo-keyword-popular-tags {padding: 0;} #awoo-keyword-popular-tags .popular-tags-wrapper{padding: 0px;} #awoo-keyword-popular-tags .popular-tags-title {margin: 0 0 26px; font-size: 16px;} #awoo-keyword-popular-tags .popular-tags-title:after {font-size: 12px;} #awoo-classify, #awoo-product-tags{padding: 0;} #awoo-product-tags .awoo-tag{font-size: 11px; line-height: 11px; padding: 3px 5px;} #awoo-keyword-popular-tags:after, #awoo-product-tags:after, #awoo-classify:after {content: none;} #awoo-keyword-popular-tags .awoo-tag, #awoo-classify .awoo-tag {font-size: 10px;} /* awooAI キーワード - トップ */ #top #keyword .popular-tags-wrapper::before {left: 0;} #top #keyword .section_inner{padding: 0 16px;} #top #keyword .section_inner::before{width: 50px; height: 65px; z-index: 1; left: 13px; bottom: -59px;} /* ================================================================= 会員登録・会員情報変更・退会 =================================================================*/ #memberInput input#ZIP, #memberInput input#TEL {max-width: unset;} #memberInput input#ZIP ~ .button, #memberInput input#TEL ~ .button {min-width: 108px;} #memberInput .ds-saved-card {padding: 16px;} /* 退会 */ #memberTaikai .important_text {flex-direction: column; align-items: flex-start;} /* ================================================================= 商品詳細・一覧、プレゼント詳細・一覧、トピックス詳細・一覧 =================================================================*/ /* list - 一覧画面共通のメニュー -------------------------------------------------------------*/ .pager {margin: 24px 0; font-size: 11px;} .pager a {width: 25px; height: 25px; padding: 4px 0;} .pager .current {width: 25px; height: 25px; padding: 4px 0;} .pager a.next, .pager a.prev, .pager a.first, .pager a.last {width: 25px; height: 25px;} .pager a.next::before, .pager a.prev::before{width: 11px; height: 10px;} .pager a.first::before, .pager a.last::before{width: 14px; height: 10px;} /* itemListDetail - 商品詳細一覧・プレゼント一覧 -------------------------------------------------------------*/ #itemList.main_inner {padding: 0 25px;} #itemList .section .section_title{margin-bottom: 10px;} #itemList .pageguide_wrapper .pageguide_inner{font-size: 11px;} #itemList .pageguide_wrapper .pageguide.inner{margin: 14px 0; gap: 4px;} #itemList .pageguide_wrapper {padding: 1px 0 0;} #itemList .pageguide_wrapper .pageguide { width: 100%;} #itemList .pageguide_wrapper .pageguide #sort_order {width: 100%;} #itemList .pageguide_wrapper select{font-size: 10px; background: url(../images/icon/link_arrow_below_blue.svg) no-repeat right 6px top 14px/ 12px 6px; background-color: #fff;} #itemList .pageguide_wrapper + #error {width: calc(100% - 16px); margin: 0 auto 16px;} #itemList .item_list {margin: 18px 0 0;} #itemList .sub_category_list_wrapper {margin: 16px auto; max-width: unset;} #itemList .sub_category_list_wrapper .sub_category_list {flex-wrap: nowrap; overflow: auto; padding: 3px 16px; min-width: 100vw; margin: 0 8px 0 -8px; justify-content: flex-start; font-size: 11px;} #itemList > .pager {margin: 30px 0 56px;} .toggleButton__inner{margin-left: 0;} .toggleButton__comment{font-size: 10px;} /* narrowListCategory - 絞り込みカテゴリ -------------------------------------------------------------*/ .shiborikomi_wrapper{display: -webkit-box; display: flex;} #narrowListCategory:has(.selected):before{left: 7px;} #narrowListCategory .siborikomi_button {min-width: 105px; font-size: 12px; padding-left: 30px; font-size: 10px; padding-top: 9px; padding-bottom: 9px;} #narrowListCategory .siborikomi_button::after{width: 17px; height: 14px; left: 7px;} #narrowListCategory .siborikomi_box {width: 315px;} #narrowListCategory .siborikomi_title {width: 315px; padding: 8px 8px 7px; font-size: 15px;} #narrowListCategory .siborikomi_box.open .siborikomi_title {right: 0;} #narrowListCategory .siborikomi_box #closeButton {width: 32px; height: 40px; right: 315px;} #narrowListCategory .siborikomi_box_inner {padding: 62px 20px 24px; gap: 32px;} #narrowListCategory .siborikomi_category_title {font-size: 14px;} #narrowListCategory .siborikomi_category_list li a {padding: 3px 6px 3px;} #narrowListCategory .siborikomi_category_list li:not(:has(a)){padding: 4px 13px 4px;} /* 選択中カテゴリ */ #selectedCategory {font-size: 12px; gap: 2px;} #selectedCategory .selected_category {font-size: 10px; gap: 5px; padding: 5px 11px 4px; margin-right: 5px;} #selectedCategory .selected_category a {height: 9px;} /* categoryInfo - カテゴリ情報 -------------------------------------------------------------*/ #categoryInfo {flex-direction: column; margin: 0 auto 40px;} #categoryInfo .img_box {border: 0; min-height: 210px;} #categoryInfo .img_box + .text_box .large_title {margin: 0 auto 34px; max-width: unset;} #categoryInfo .text_box {padding: 0 8px;} /* ================================================================= マイページ =================================================================*/ #member.mypage .account_box {flex-direction: column;} #member.mypage .account_box .account_area {padding: 24px 24px 16px;} #member.mypage .account_box #crosspointArea {padding: 16px 16px 24px; max-width: unset;} #member.mypage .account_box #crosspointArea img {max-width: 320px;} #member.mypage .member_menu {flex-direction: column;} #member.mypage .member_menu li {width: 100%;} #member.mypage .member_menu li .info_box {min-height: unset;} .modalArea__content{width: 95%;} /* ================================================================= カートの中身～注文完了まで、プレゼント応募～完了まで =================================================================*/ /* cart_table - 買い物テーブル -------------------------------------------------------------*/ #main .cart_table td {padding: 0 12px 8px 0; vertical-align: top;} #main .cart_table td:last-child {padding-bottom: 12px;} #main .cart_table td.text_box {padding-top: 12px; padding-bottom: 16px;} #main .cart_table .tanka, #main .cart_table .amount, #main .cart_table .price, #main .cart_table .subtotal, #main .cart_table .delete {display: none;} #main .cart_table .itemname {white-space: nowrap; width: 104px; max-width: 104px; } #main .cart_table td:not(.box) {display: block;} #main .cart_table td .code {margin: 0;} #main .cart_table .amount {width: 100%;} #main .cart_table td.delete {display: none!important;} #main .cart_table .text_box {width: 100%;} #main .cart_table dl.item_data:not(.pc) {display: flex; justify-content: space-between; align-items: flex-start; font-size: 14px; gap: 8px;} #main .cart_table dl.item_data dt {white-space: nowrap;} #main .cart_table dl.item_data dd {text-align: end;} #main .cart_table dl.item_data .tax {font-size: 10px;} #main .cart_table select {padding: 7px 24px 7px 10px; background: url(../images/icon/link_arrow_below_black.svg) no-repeat right 6px top 15px / 10px;} #main .cart_table .sp_box {margin: 16px 0 0;} #main .cart_table .box {position: relative; padding: 12px; width: 104px; max-width: 104px;} #main .cart_table .box .delete {position: absolute; top: 100px; display: block; } #main .cart_table .box .delete .button {padding: 5px; font-size: 14px; width: 80px; border-radius: 5px; margin: 0; display: flex; align-items: center; justify-content: center;} #main .cart_table .box .delete_button {height: 13px; width: 13px; display: block; margin: 0 4px 0 0; line-height: 13px} #main .cart_table .noverty_property {justify-content: space-between; align-items: center;} #main .cart_table .other { margin: 3px 0 0; } /* cartIndex - 買い物かごの中身 -------------------------------------------------------------*/ #cartFlow .change_link.button { margin: -24px 0px 14px auto; height: 32px; padding: 5px 24px 5px 14px; } #cartFlow .important_text {flex-direction: column; gap: 3px;} #main #cartFlow .important_text .important { align-items: flex-start; justify-content: flex-start; } #cartFlow .p-fiftTableWrap{margin-bottom: 8px;} #cartFlow .p-giftList.info_box .button_area { max-width: none; padding: 16px; flex-direction: column-reverse;} #cartFlow .button_area.sp { display: flex; } #cartFlow .total_wrapper {padding: 16px 8px;} #cartFlow .total {width: 100%;} #cartFlow .total dl {font-size: 13px;} #cartFlow .total .syokei {margin: 8px 0 5px; font-size: 16px;} #cartFlow input#ZIP, #cartFlow input#TEL, #cartFlow input#SECURITY_CD {max-width: 100%; width: 100%;} #cartFlow input#ZIP ~ .button, #cartFlow input#TEL ~ .button {width: 114px;} #cartFlow #POINT_USE { width: 100%; margin-right: 0; margin-bottom: 5px; } #main .input_table.payment .title { padding-bottom: 0; } #main .input_table.payment td { padding: 16px 0 12px; } #cartFlow .normal_title.border_none { font-size: 16px; } #cartFlow .option_select,#cartFlow .option_area{display: block; } #cartFlow.kessai .order_no {margin: 16px 0; font-size: 20px; padding: 15px 15px 14px;} #cartFlow .amazon_highlight_area {padding: 16px 12px; font-size: 13px; } #main #cartFlow .amazon_highlight_area .important_text .important { font-size: 13px; } #cartFlow .amazon_highlight_area .normal_title { font-size: 15px; } #main #cartFlow .amazon_highlight_area .amazon_text { font-size: 12px; } #main #cartFlow .amazon_highlight_area .important_text { margin: 0 0 16px; } #cartFlow .p-giftListInner .c-ttl01, .p-giftSetted .p-giftSettedList__item .c-ttl02 { width: 100px; padding: 24px 12px; font-size: 13px; } #cartFlow .p-giftListInner .p-giftCheck, .p-giftSetted .p-giftListInner .button_area, .p-giftSetted .p-giftSettedList__item [class*="item_wrapper"] { width: 100%; max-width: calc(100% - 2px - 100px); font-size: 14px; gap: 0; } #ds-gift-popup #ds-gift-popup__inner { padding: 16px 16px; } #ds-gift-popup.show .section_title { font-size: 14px; margin: 0 0 16px;} #ds-gift-popup__inner .button_area.back .back.button.clear{width: 100%;} #ds-gift-popup .ds-gift-option__item-image{ padding-top: 100%; } #main #cartFlow .p-wrapTable__tr td:not(.itemname) { width: 100%; } /*ラッピングのポップアップ*/ #cartFlow .p-giftList .cart_table th {display: none;} #ds-gift-popup .ds-gift-option { gap: 8px;} #ds-gift-popup .ds-gift-option__item {max-width: calc((100% - (8px * 2 )) / 3);} #ds-gift-popup .button_area .button { margin: 0; } #ds-gift-popup .button_area.back .c-btn03{width: 100%;} #ds-gift-check-all-item__container { font-size: 12px; padding: 8px 8px; } #ds-gift-popup .wrapping_box { margin: 0 0 32px; } #ds-gift-popup .normal_title + p { margin: 0 0 8px;} /*設定済みラッピング*/ #cartFlow .p-giftSetted .p-giftListInner, .p-giftSetted .p-giftSettedList__item { flex-wrap: wrap; } #cartFlow .p-giftSetted .p-giftListInner .c-ttl01, #cartFlow .p-giftSetted .p-giftListInner .button_area, #cartFlow .p-giftSetted .p-giftSettedList__item .c-ttl02, #cartFlow .p-giftSetted .p-giftSettedList__item [class*="item_wrapper"] { width:100%; max-width: 100%; padding: 12px; font-size: 14px; } #cartFlow .p-giftSetted .p-giftListInner .button_area {width: 100%; font-size: 13px; justify-content: center; flex-direction: column; align-items: center;} #cartFlow .p-giftSetted .p-giftListInner .button_area .button { width: 100%; font-size: 14px;} #cartFlow .p-giftListInner .c-ttl01, .p-giftSetted .p-giftSettedList__item .c-ttl02 { align-items: flex-start; } .p-giftSetted .p-giftSettedItem__container { gap: 8px; } .p-giftSetted .p-giftListInner .button_area { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; flex-direction: unset; gap: 8px 12px; } .p-giftSetted h4 { position: relative; cursor:url(../images/cursor.cur),auto; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_wrapper"] h4 { cursor: default; } .p-giftSetted .p-giftSettedList__item [class*="item_wrapper"] { flex-wrap: wrap; } .p-giftSetted .p-giftSettedList__item [class*="item_wrapper"] .p-giftSettedItem__itemInner { width: 100%; max-width: 80px; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_wrapper"] { width: 100%; border-bottom: 1px solid #DDDDDD; padding-bottom: 16px;} .p-giftSetted .p-giftSettedList__item [class*="wrapping_wrapper"]::after { content: unset; } /* .p-giftSetted .p-giftSettedList { display: block; } */ .p-giftSetted .p-giftSettedList__item { margin-bottom: 2px; } .p-giftSetted .p-giftSettedList__item:last-child { margin-bottom: 0; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_inner_wrapper"].none { border-top: 1px solid #DDDDDD; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_inner_wrapper"] { max-width: 100%; width: 100%; border-bottom: 1px solid #DDDDDD; padding-bottom: 0; } .p-giftSetted .p-giftSettedList__item [class*="messagecard_wrapper"] { width: 100%; border-bottom: 1px solid #DDDDDD; padding-bottom: 0; } .p-giftSetted [class*="wrapping_inner_wrapper"] .p-giftSettedItem__container .p-giftSettedItem__item:last-child { padding-bottom: 16px; } .p-giftSetted [class*="messagecard_wrapper"] .p-giftSettedItem__container .p-giftSettedItem__item:last-child { padding-bottom: 16px; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_wrapper"] .x_small_title { padding-top: 0; } .p-giftSetted [class*="wrapping_inner_wrapper"] .p-giftSettedItem__container .p-giftSettedItem__item { width: 100%; max-width: 80px; } .p-giftSetted [class*="wrapping_inner_wrapper"] .p-giftSettedItem__container .p-giftSettedItem__itemInner { width: 80px; max-width: 80px; } .p-giftSetted .x_small_title { font-size: 13px; padding: 12px 0 12px; margin: 0;} .p-giftSetted .p-giftSettedItem__itemInner { max-width: none; } .p-giftSetted .img_box { width: 80px; padding-top: 100%; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_wrapper"] { margin-right: 0; padding-right: 0; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_inner_wrapper"] h4::after, .p-giftSetted .p-giftSettedList__item [class*="wrapping_inner_wrapper"] h4::before, .p-giftSetted .p-giftSettedList__item [class*="messagecard_wrapper"] h4::after, .p-giftSetted .p-giftSettedList__item [class*="messagecard_wrapper"] h4::before {content: ""; background:#00A0E9; position: absolute; display: block; top: 50%; transform: translateY(-50%); right: 0; width: 17px; height: 2px; transition: 0.3s; border-radius: 100px;} .p-giftSetted .p-giftSettedList__item [class*="messagecard_wrapper"] h4::before, .p-giftSetted .p-giftSettedList__item [class*="wrapping_inner_wrapper"] h4::before {transform: rotate(90deg);} .p-giftSetted .p-giftSettedList__item [class*="wrapping_inner_wrapper"] h4.open:before, .p-giftSetted .p-giftSettedList__item [class*="messagecard_wrapper"] h4.open::before {opacity: 0;} #main table#cart-kessai:not(.amazonpay) tr td { display: none;} #main table#cart-kessai tr input[type="radio"] { display: none;} #main table#cart-kessai tr input[type="radio"] + label, #main #cart-kessai tr label:has(input[type="radio"]) { display: block;} #main table#cart-kessai tr.open td { display: block; } #main .cart_table.novelty .other { margin: 0; } /* cartLogin - 買い物かご・プレゼントログイン -------------------------------------------------------------*/ #cartLogin .cart_step + .login_boxes {margin: 32px 0 0;} #cartLogin .login_boxes {flex-direction: column; gap: 48px; justify-content: center;} #cartLogin .login_boxes .box {padding: 0; max-width: unset;} #cartLogin .login_boxes .box:first-child::after {width: 100%; height: 1px; left: 0; top: unset; bottom: -24px;} #cartLogin .login_boxes .box .medium_title {margin-top: 30px;} /* 入荷お知らせ */ #cartLogin .nyuka_table th {margin: 0; display: block; width: 100%; border-radius: 10px 10px 0 0;} #cartLogin .nyuka_table td {display: block; width: 100%; margin-bottom: 4px; border-radius: 0 0 10px 10px;} #cartLogin .nyuka_table td{border-bottom: none;} #cartLogin .nyuka_table tr:last-child th{border-bottom: 1px solid #cfcfcf;} /* ================================================================= お気に入り =================================================================*/ #wishList .box {display: block;} #wishList .box h2 {font-size: 15px;} #wishList .box .text {margin: 0; width: 100%; font-size: 13px;} #wishList .box .text .img_box {height: 80px; max-width: 80px; padding-top: 80px;} #wishList .box .button_area {margin: 12px 0 0; width: 100%; max-width: 100%;} /* ================================================================= キャンペーン =================================================================*/ #mainCampaign .campaign_list .box, #cartCampaign .campaign_list .box {width: calc((100% - 16px) / 2);} /* =================================================================== サブウインドウ =================================================================== */ #subwindow.coupon_popup table .title {width: 100%;} #subwindow.coupon_popup table tr {display: flex; flex-direction: column; margin: 0 0 2px; border-radius: 10px; overflow: hidden;} #subwindow.coupon_popup table td{border-bottom: none;} #subwindow.coupon_popup table tr:last-child th{border-bottom: 1px solid #cfcfcf;} .w-100{width: 100%;} .info__cartArea{padding: 20px;} .info__title,#cartIndex h3.info__title{font-size: 14px;} .info__lists{padding: 16px 0;} .info__txt{font-size: 14px;} .info__date{font-size: 10px;} .info__date, .info__txt{margin-left: 0; width: 100%;} .info__link{flex-direction: column;} } /* 480px以下 - スマホ向け -------------------------------------------------------------*/ @media screen and (max-width: 480px) { /* タイトルデザイン（480px以下） -------------------------------------------------------------*/ .large_title::after{background: url(../images/border_large_title_sp.svg) no-repeat center / 100%;} /* 特集一覧（480px以下） -------------------------------------------------------------*/ #ext.feature_list #featureListParent {gap: 24px;} #ext .feature_list .feature_item {width: 100%;} /* 27.ポイント履歴 （480px以下） -------------------------------------------------------------*/ #pointRecord .total .box_wrapper .box_wrapper_inner { text-align: left; } #pointRecord .total .box_wrapper .box_wrapper_inner .hold {text-align: center;} /* カートフロー （480px以下） -------------------------------------------------------------*/ #cartFlow .total dl dd { text-align:right; } #cartFlow .total dl dd .tax { display: block; } .p-giftSetted .p-giftSettedList__item [class*="item_wrapper"] .p-giftSettedItem__itemInner { width: 100%; max-width: 80px; } .p-giftSetted [class*="wrapping_inner_wrapper"] .p-giftSettedItem__container .p-giftSettedItem__item { width: 100%; max-width: 80px; } .p-giftSetted [class*="wrapping_inner_wrapper"] .p-giftSettedItem__container .p-giftSettedItem__itemInner { width: 80px; max-width: none; } #cartFlow .amazon_highlight_area p:not(.normal_title):not(.amazon_text) { text-align: left; } #ds-gift-popup .ds-gift-option__item {max-width: calc((100% - 8px) / 2);} }