@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-image: -moz-linear-gradient( 90deg, rgb(186,134,189) 0%, rgb(184,153,201) 15%, rgb(182,171,212) 25%, rgb(130,188,228) 50%, rgb(163,211,160) 75%, rgb(172,212,145) 100%, rgb(246,217,210) 100%, rgb(184,212,243) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(186,134,189) 0%, rgb(184,153,201) 15%, rgb(182,171,212) 25%, rgb(130,188,228) 50%, rgb(163,211,160) 75%, rgb(172,212,145) 100%, rgb(246,217,210) 100%, rgb(184,212,243) 100%); background-image: -ms-linear-gradient( 90deg, rgb(186,134,189) 0%, rgb(184,153,201) 15%, rgb(182,171,212) 25%, rgb(130,188,228) 50%, rgb(163,211,160) 75%, rgb(172,212,145) 100%, rgb(246,217,210) 100%, rgb(184,212,243) 100%);color: #4b5aa0; 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: 15px; 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(255, 255, 255, 0.5); position: absolute; z-index: 998;} /* 基本のlink color -------------------------------------------------------------*/ a:link, a:visited {color: #2391a3;} a {text-decoration: none;} p {margin: 0 0 24px;} #main p a:not(.button) {text-decoration: underline; color: #2391a3;} /* ボタンデザイン -------------------------------------------------------------*/ /*基本デザイン-下記クラスに加えpositive　negative等のクラスを合わせて付与する*/ a.button, .button {color:#fff; margin: 3px; display: block; text-align: center; padding: 10px; position: relative; transition: 0.2s; border-style: none; cursor: pointer; font-family: "ab-tombo-bold","sans-serif"; border-radius: 30px; font-weight: bold; margin: 0; color: #fff; background-size:200%; background-image: -moz-linear-gradient( 175deg, rgb(158,208,169) 0%, rgb(170,224,225) 25%, rgb(222,163,226) 50%, rgb(206,195,237) 80%, rgb(141,224,255) 100%); background-image: -webkit-linear-gradient( 175deg, rgb(158,208,169) 0%, rgb(170,224,225) 25%, rgb(222,163,226) 50%, rgb(206,195,237) 80%, rgb(141,224,255) 100%); background-image: -ms-linear-gradient( 175deg, rgb(158,208,169) 0%, rgb(170,224,225) 25%, rgb(222,163,226) 50%, rgb(206,195,237) 80%, rgb(141,224,255) 100%); box-shadow: 3px 5.196px 20px 0px rgba(45, 45, 45, 0.15); border: 2px solid #fff; transition:0.2s;} button.button {padding: 10px 10px 11px;} /*次へ・入力内容を確認する・注文する・ログイン・登録する・送信・検索・ご注文手続きへ進む等*/ .button.positive {background: #172675; border: 1px solid #172675; font-weight: normal; font-family: "Noto Sans JP", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif; border-radius:10px; opacity: .75; box-shadow: none;} /*戻る・クリア・削除・ログアウト等*/ a.negative, .negative {background: #fff; border: 1px solid #4B5A9F; color: #4B5A9F; border-radius: 10px; font-family: "Noto Sans JP", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif; box-shadow: none;} .negative::before {border-color: #fff;} .button.link.negative:after {background-image: url(../images/icon/blue/link_arrow.svg);} .button_area.back .back.button {padding-top: 7px; padding-bottom: 6px; font-size: 14px;} .button_area.back .back.button { max-width: 160px; } .button_area.top { flex-direction: column; align-items: center;} /*押せないボタン*/ .not_click, .button:disabled {border: none; background: #7c7c7c; color: #fff; pointer-events: none; border-radius: 10px;} .not_click::before, .button:disabled::before {border-color: #D0D0CE;} /*普通サイズの時にはクラスに下記を追加*/ .button.medium, input.medium {width: 314px; max-width: 314px; font-size: 16px;} /*小さいサイズの時にはクラスに下記を追加*/ .button.small {padding: 7px; width: fit-content;} /*ボタンエリア*/ .button_area {margin: 40px auto; 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: 16px;} .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: 16px; height: 16px; background: url(../images/icon/white/link_arrow.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: 18px; 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/white/link_arrow.svg);} /*矢印アイコン付きリンク*/ .inline_link {position: relative; padding: 0 0 0 25px; text-decoration: none!important;} .inline_link::before {content:""; background: url(../images/icon/link_arrow.svg) no-repeat center/contain; display: block; height: 16px; width: 16px; 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 25px; display: block;} .link_list a::before {content:""; background: url(../images/icon/link_arrow.svg) no-repeat center/contain; display: block; height: 16px; width: 16px; position: absolute; top: 4px; transition: 0.2s; left: 0;} /* 注釈インデント */ .indent {padding-left: 1em; text-indent: -1em;} /* 全件表示、表示数セレクトボックス -------------------------------------------------------------*/ #main .select_wrapper {display: flex; align-items: center; justify-content: end; gap: 10px; margin-left: auto; flex-grow:1;} /* 画像の縦横比調整 -------------------------------------------------------------*/ .box .img_box {position: relative; 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.svg) no-repeat center/contain; text-indent: 999px; overflow: hidden; white-space: nowrap;} .lity-close:hover {background: url(../images/icon/close.svg) no-repeat center/contain;} .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%;} html body:has( > #subwindow) {background: #fff;} #subwindow::-webkit-scrollbar { background: transparent; width:8px; } #subwindow::-webkit-scrollbar-thumb {background-color: #4b5aa0; border-radius: 9999px;} #subwindow::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, 0.24);} #subwindow { scrollbar-width: thin; scrollbar-color: #4b5aa0 rgba(0, 0, 0, 0.24); overflow: auto; background:#fff;} /* タイトルデザイン -------------------------------------------------------------*/ .large_title {position: relative; max-width: 888px; margin: 0 auto 56px; color: #4b5aa0; font-size: 28px; text-align: center; font-family: "ab-tombo-bold","sans-serif";} .large_title::after{position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); content: ""; background: url(../images/border_large_purple.svg) no-repeat center / 100%; display: block; width: 100%; height: 16px;} .medium_title { margin: 56px 0 62px; font-size: 26px; text-align: center;} .medium_title > span{position: relative; padding: 0 40px; display: inline-block;} .medium_title > span::before {position: absolute; top: 50%; transform: translateY(-50%); left: 0; content: ""; background: url(../images/icon/title_decoration_left.svg) no-repeat center/100%; display: block; width: 34px; height: 42px;} .medium_title > span::after {position: absolute; top: 50%; transform: translateY(-50%); right: 0; content: ""; background: url(../images/icon/title_decoration_right.svg) no-repeat center/100%; display: block; width: 34px; height: 42px;} .normal_title {position: relative; margin: 28px 0; font-size: 22px; color: #4b5aa0;} .normal_title:before{position: absolute; bottom: -3px; left: 0; content: ""; background: #4b5aa0; display: block; width: 100%; height: 1px;} .small_title {margin: 16px 0; color: #4b5aa0; font-size: 19px; font-weight: bold; font-family: "ab-tombo-bold","sans-serif";} .x_small_title {margin: 16px 0; color: #4b5aa0; font-size: 16px;} /* セクションタイトル */ .section .section_title {margin: 0 0 40px; padding: 40px 0 0; font-family: "showcard-gothic", "sans-serif"; font-size: 53px; text-align: center; position: relative; z-index: 10; font-weight: normal;} .section .section_title .inner{display: block; font-size: 25px; font-family: "ab-tombo-bold","sans-serif"; line-height: 1; margin: 14px 0 0;} /* パンくずリストwidth: 380px; max-width: 380px; -------------------------------------------------------------*/ #breadcrumbs + .main_inner { font-size: 15px; } #breadcrumbs { margin: -78px 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: 21px 0 9px; } #breadcrumbs .breadcrumbs_list li, #breadcrumbs .breadcrumbs_list li > span > span { color: #4b5aa0; opacity: .6; position: relative; } #breadcrumbs .breadcrumbs_list li::after, #breadcrumbs .breadcrumbs_list li > span > span::after { content: ""; width: 10px; height: 1px; background: #fff; opacity: .6; position: absolute; top: 50%; left: calc(100% + 6px); transform: translateY(-50%); } #breadcrumbs .breadcrumbs_list li > span >span { opacity: .6; } #breadcrumbs .breadcrumbs_list li > span { margin-right: 22px; } #breadcrumbs .breadcrumbs_list li > span:last-of-type > span { opacity: 1; } #breadcrumbs .breadcrumbs_list li:last-child { opacity: 1; } #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: 21px 6vw 9px; max-width: unset; } /* 共通スタイル -------------------------------------------------------------*/ .sp {display: none;} .pc {display: block;} /* カートフローチャート -------------------------------------------------------------*/ .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: 12px; width: 60px;} .cart_step li.done .no {border: 1px solid #4b5aa0; color: #4b5aa0;} .cart_step li.done + li::after {background-image: url(../images/icon/link_arrow.svg);} .cart_step li:after {position: absolute; content: ""; display: block; height: 16px; width: 16px; background: url(../images/icon/link_arrow_cartstep.svg) no-repeat center/contain; left: -21px; top: 14px;} .cart_step li:first-child::after {content: none;} .cart_step li .no {margin: 0 auto 4px; font-size: 24px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.7); width: 38px; height: 38px; border-radius: 9999px;} .cart_step li:nth-child(6) .no {font-size: 20px; line-height: 40px;} .cart_step li.active::before {position: absolute; content: ""; display: block; width: 30px; height: 30px; background: url(../images/footer_butterfly.png) no-repeat center/contain; top: -35px; left: 50%; transform: translateX(-50%); } .cart_step li.active .no {background: #4b5aa0; position: relative; color: #fff;} /* テーブルデザイン -------------------------------------------------------------*/ /* 入力形テーブル */ #main .input_table_wrapper {padding: 56px calc((100vw - 890px) / 2) 80px; width: 100vw; margin: 56px calc(50% - 50vw);} #main .input_table {position: relative; margin: 0 auto; font-size: 15px; max-width: 890px; border: none; box-shadow: none; border-collapse: separate;} #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: 2px; background: #4b5aa0;} #main .input_table tr::after {position: absolute; left: 0; bottom: 0; content: ""; display: block; width: 100%; height: 2px; background: #4b5aa0;} #main .input_table .title {min-width: 222px; padding: 20px 20px 20px 0; background-color: unset; color: #4B5AA0;} #main .input_table td {width: 100%; padding: 20px 0; background-color: unset;} #main .input_table .hissu, #main .apply_text .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;} #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: 13px;} #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: rgba(255,255,255,0.6); padding: 12px 16px; font-size: 95%; } #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: 8px 16px 7px; background-color: #4B5AA0; color: #fff; font-size: 15px;} #main dl.info_box dd {padding: 16px;} #main .button_area > .indent { margin-top: 12px; } /* テーブル（項目見出し横並び - SP時に各行縦並び） -------------------------------------------------------------*/ #main table.side_by_side{border-collapse: collapse;} #main table.side_by_side .data_row dt {display: none;} #main table.side_by_side th{font-weight: bold;} /* ローディング表示のスタイル -------------------------------------------------------------*/ #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: #fff; position: relative; box-shadow: 4px 4px 0px 0px #4b5aa0; border: 4px solid #4b5aa0;} .password_content #error { margin: 30px 0; } /* notice_area -------------------------------------------------------------*/ .notice_area { margin: 40px auto 0; padding: 24px 32px; background: rgba(255,255,255,0.6); font-size: 14px; } .notice_area .notice_title { color: #4b5aa0; 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: 50px;} .item_list.swiper-wrapper {flex-wrap: nowrap; gap: 0;} .item_list .box {width: calc((100% - 150px) / 4);} .item_list .box .img_box_wrap{position: relative; background: #fff;} .item_list .box .img_box{border:4px solid #3ab549; box-shadow: 4px 4px 0px 0px #3ab549; background: #fff;} .item_list .box > div {height: 100%;} .item_list .box a, .item_list .box .box_inner {display: flex; flex-direction: column; position: relative; height: 100%;} .item_list .box .text_box .name{color: #4b5aa0; font-size: 18px; margin-bottom: 10px;} .item_list .box .price {margin: auto 0 0; text-align: end; font-size: 18px; font-family: "ab-tombo-bold","sans-serif";position: absolute; bottom: -20px; left: -14px; background: #3ab549; padding: 5px 8px; color: #fff;z-index: 10;} .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: 15px;} .item_list .box .price .teika:has(+ .sale)::before {position: absolute; content: ""; display: block; height: 1px; width: 100%; background: #000; left: 0; top: 50%; transform: translateY(-50%);} .item_list .box .price .tax {font-size: 10px;} .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;} .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: 40px; height: 40px;} .swiper-button-prev::after, .swiper-button-next::after {content: ""; display: block; background: url(../images/icon/arrow_cercle.png) no-repeat center/100%; width: 34px; height: 34px; transition: 0.3s;} .swiper-button-prev {left: -66px;} .swiper-button-next {right: -68px; transform: rotate(180deg);} .swiper-button-disabled {display: none;} .swiper-container-wrapper {position: relative;} .swiper-container{padding: 22px; margin: 0 -22px;} /* 商品一覧、商品詳細ページアイコン類 -------------------------------------------------------------*/ .item_icon {color: #FFFFFF; display: inline-block; font-size: 14px; padding: 0 18px 1px; border-radius: 11px; line-height: 22px; margin: 0 4px 5px 0;} .item_icon.yellow {border-color: #DBA900; color: #DBA900;} .item_icon.purple {background-color: #86268e;} .item_icon.red {background-color: #d54448;} .item_icon.grey{background-color: #7c7c7c;} .item_icon.green{background-color: #12731d;} .item_icon.blue{background-color: #4941ab;} .item_icon.light_blue{color: #1d8dc1; background: #d7f3ff;} .item_icon.pink{background-color: #f9d0d7; color: #dd7089;} .item_icon.bluesky{background-color: #1d8dc1; color: #fff;} .item_icon .item_icon_list {margin: 10px 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_new {position: absolute; top: -5px; left: -8px; z-index: 11; font-size: 16px; color: #fff; font-family: "showcard-gothic", "sans-serif"; text-align: center; width: 57px; font-weight: bold; text-indent: -9999px;} .item_new::before{content: ""; background: url(../images/new.png) no-repeat center / contain; display: block; height: 55px; width: 57px; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.2s; z-index: -1;} .item_soldout {text-indent: -9999px; position: absolute; font-family: "showcard-gothic", "sans-serif"; font-size: 16px; content: ""; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.32); top: 0; left: 0; border: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; z-index: 10; font-weight: 400;}/*品切*/ .item_soldout::after{content: ""; background: url(../images/bg/bg_sp_soldout.png) no-repeat center / cover; display: block; height:100%; width: 100%; position: absolute; z-index: -1;} /* ================================================================= 3.コンテナ・サイドバー・メインコンテンツ =================================================================*/ /* container - サイドバー・メインコンテンツを格納するコンテナ -------------------------------------------------------------*/ #container {padding: 180px 0 0; flex: 1;} /* main - コンテナ内メインコンテンツ -------------------------------------------------------------*/ #main {padding: 80px 0;} #main table {margin: 8px auto; width: 100%; border-spacing: 0; box-shadow: 4px 4px 0px 0px #4b5aa0; border: 4px solid #4b5aa0;} #main th {padding: 7px 16px; text-align: left; background-color: #4b5aa0; color: #fff;} #main th.title {width: 222px;} #main td {vertical-align: middle; padding: 12px 16px; background-color: #fff; display: table-cell;} #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: #dba900;} #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: #d54448; min-width: fit-content;} /* リキャプチャー機能用 -------------------------------------------------------------*/ #main #reCAPTCHA{width: 304px; margin: 20px auto 0;} /* お問い合わせページ画像項目用 -------------------------------------------------------------*/ #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: 9px; border-radius: 10px; color: #000; font-size: 14px; border: 1px solid #645dbe;} select {padding: 10px 24px 10px 10px; vertical-align: middle; border: none; border-radius: 10px; color: #fff; -webkit-appearance: none; appearance: none; background: #fff url(../images/icon/select_arrow.svg) no-repeat right 6px top 19px; color: #675dc2; min-width: 64px; font-size: 15px; border: 1px solid #675dc2;} input,textarea, select, button {font-family: "Noto Sans JP", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif;} 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: 20px; height: 20px; border-radius: 9999px; background: #d7f3ff; position: absolute; top: 50%; transform: translateY(-50%); left: -26px;} input[type='radio']:checked + label:after, label:has(input[type='radio']:checked)::after {content: ''; display: inline-block; width: 12px; height: 12px; background: #1d8dc1; border-radius: 9999px; position: absolute; top: 50%; transform: translateY(-50%); left: -22px;} 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: 20px; height: 20px; background: #d7f3ff; position: absolute; top: 50%; margin-top: -10px; left: -26px; border-radius: 2px;} input[type='checkbox']:checked + label::before {background: #d7f3ff;} input[type='checkbox']:checked + label:after {content: ''; display: block; position: absolute; top: 50%; left: -22px; width: 10px; height: 5px; border-left: 2px solid #1d8dc1; border-bottom: 2px solid #1d8dc1; 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;} /* ================================================================= 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: #d54448; } #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: #2391a3; text-decoration: underline;} #ext th { min-width: 222px; vertical-align: top; padding: 16px; } #ext td { padding: 16px; } #ext td a { color: #2391a3; text-decoration: underline; } #ext tr + tr th {border-top:2px solid #fff;} #ext.guide,#ext.kiyaku,#ext.privacy { background: rgba(255,255,255,0.75); padding: 16px; border-radius:10px;} /* ご利用ガイド -------------------------------------------------------------*/ #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 #4b5aa0; position: relative; padding: 0 30px 0 12px; font-size: 14px; color: #4b5aa0; background: #fff; text-decoration: none; border-radius: 10px;} #ext.guide .guide_index li a::after {content:""; background: url(../images/icon/link_arrow.svg) no-repeat center/contain; display: block; height: 15px; width: 15px; 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: pointer; font-size: 16px; position: relative; background: #fff;} #ext.faq .faq_list dt span {position: absolute; left: 20px; top: 20px; font-size: 24px; font-family: "ab-tombo-bold","sans-serif"; } #ext.faq .faq_list dt::after, #ext.faq .faq_list dt::before {content: ""; background: #4b5aa0; 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: #fff;} #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.tokushou .tokushou_table td{border-bottom: 2px solid #4b5aa0;} /* 特集一覧 -------------------------------------------------------------*/ #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: #fff; border: 4px solid #4b5aa0; box-shadow: 4px 4px 0px 0px #4b5aa0;} #ext .feature_list .feature_item .feature_text {line-height: 1.3; margin: 12px auto 0; padding: 12px 24px; background-color: rgba(255,255,255,0.6); 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: #4b5aa0; 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;} /* お客様登録のメリット -------------------------------------------------------------*/ #main:has(#ext.membership) {padding-bottom: 0;} #ext.membership .membership_title {position: relative; max-width: 888px; margin: 0 auto 24px; background: linear-gradient(0deg, rgba(219, 169, 0, 1) 23%, rgba(245, 217, 116, 1) 47%, rgba(219, 169, 0, 1) 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 20px; text-align: center; font-weight: normal;} #ext.membership p img { margin: auto; max-width:100%; height: auto; display: block; } #ext.membership .title_section p { text-align: center; } #ext.membership .title_section .logo { margin: 0 0 56px; } #ext.membership .inner {padding: 0 16px; width: 100%; max-width: 922px; margin: 0 auto; max-width: 1232px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } #ext.membership .inner .text { width: calc(100% - 30% - 32px); } #ext.membership .inner > p { width: 30%; max-width: 420px; } #ext.membership .list_disc { margin-bottom: 8px; } #ext.membership .button { margin-left: auto; margin-right: auto; } #ext.membership .membership_normal_title {margin: 16px 0; color: #DBA900; font-size: 19px;} #ext.membership .merit { width: 100vw; margin: 0 calc(50% - 50vw); padding-top: 56px; padding-bottom: 56px; background: rgba(0, 0, 0, 0.4)} #ext.membership .house { width: 100vw; margin: 0 calc(50% - 50vw) 24px; padding-top: 56px; padding-bottom: 56px;} #ext.membership .house .inner { flex-direction: row-reverse; } #ext.membership .card { width: 100vw; margin: 0 calc(50% - 50vw); padding-top: 24px; padding-bottom: 24px; } #ext.membership .mypage { width: 100vw; margin: 24px calc(50% - 50vw); } #ext.membership .mypage .inner { background:#fff; padding: 24px 24px 36px; flex-wrap: wrap; justify-content: center; } #ext.membership .mypage .membership_normal_title { text-align:center; color: #8A2B2B; margin-bottom: 0; } #ext.membership .mypage ul{ display: flex; flex-wrap: wrap; justify-content: center; } #ext.membership .mypage li{ width:calc(100%/3); padding: 16px 16px; color:#8A2B2B; } #ext.membership .mypage li span{ display: block; text-align: center; } #ext.membership .mypage li img { margin: auto; max-width:100%; height: auto; display: block; } #ext.membership .enjoy { width: 100vw; margin: 56px calc(50% - 50vw) 0; padding: 56px 16px; background:rgba(0,0,0,0.4); text-align: center;} #ext.membership .enjoy .membership_title { margin-bottom: 16px; font-size: 24px; } #ext.membership .enjoy .list_disc { max-width: 375px; margin: 0 auto; text-align: left; width: fit-content;} /* お店について -------------------------------------------------------------*/ #main:has(#ext.about) {padding: 0;} #breadcrumbs:has( + #ext.about) {margin: 0;} #ext.about .section {margin: 0;} #ext.about .section .text_box {opacity: 0; visibility: hidden; transform: translateY(50px); transition: opacity 1s,visibility 1s, transform 1s;} #ext.about .section .text_box.animation_active {opacity: 1; visibility: visible; transform: translateY(0px);} #ext.about .about_top {width: 100%; height: calc(100vh - 120px); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 16px 56px; align-items: center; background: url(../images/bg/bg_about_top.jpg) no-repeat center/cover;} @keyframes floating { 0% {transform: translateY(0) rotate(90deg);} 100% {transform: translateY(-20px) rotate(90deg);} } #ext.about .about_top .scroll {animation: floating 1s ease-in-out infinite alternate-reverse; color: #4b5aa0; margin: 0; display: flex; gap: 8px; align-items: baseline;} #ext.about .about_top .scroll::after {content: ""; display: block; width: 40px; height: 18px; background: url(../images/icon/icon_next.svg) no-repeat center/contain;} #ext.about .about_top_inner {margin: auto; text-align: center; font-size: 18px;} #ext.about .about_top_inner p {line-height: 1.8;} #ext.about .about_top_inner img {width: 100%; max-width: 230px;} #ext.about .about_top_inner .large_title {margin: 16px 0 8px; font-size: 36px;} #ext.about .about_top_inner .large_title:after {content: none;} #ext.about .about_top_inner p {margin: 0;} #ext.about .about_lead {margin: -5% 0px 0; background: url(../images/bg/bg_default_dark_round.png) no-repeat top center/cover; } #ext.about .about_lead .text_box {text-align: center; max-width: 980px; margin: 0 auto; padding: 144px 8px 128px;} #ext.about .about_lead .text_box .medium_title {margin-top: 0;} #ext.about .about_lead .text_box p {margin: 0 auto; font-size: 18px; line-height: 1.8;} #ext.about .about_lead .text_box p span {opacity: 0; visibility: hidden; transition: opacity 1s,visibility 1s, transform 1s; transform: translateY(50px);} #ext.about .about_lead .text_box p span.animation_active {opacity: 1; visibility: visible; transform: translateY(0px);} #ext.about .about_main {padding: 40px 16px; background: url(../images/bg/bg_about_main_2.jpg) no-repeat center/cover; } #ext.about .about_main .section_inner {background:rgba(255,255,255,0.6); max-width: 980px; padding: 56px 16px; position: relative;} #ext.about .about_main p {line-height: 1.8;} #ext.about .about_main p:last-child {margin: 0;} #ext.about .about_main .concept_text {font-size: 26px; margin: 24px 0; display: inline-block;} #ext.about .about_main .text_box {margin: auto; text-align: center;} @keyframes yurayura { 0% , 80% {transform: rotate(0);} 85%{transform: rotate(-1deg);} 90%{transform: rotate(1deg);} 95%{transform: rotate(-1deg);} 100%{transform: rotate(0deg);} } #ext.about .about_last {margin: 200px 0 0; background: rgba(255,255,255,0.6); position: relative;} #ext.about .about_last:before {content: ""; position: absolute; width: 100%; height: 1px; background: #4b5aa0; top: 0; left: 0;} #ext.about .about_last:after {content: ""; position: absolute; width: 135px; height: 150px; background: url(../images/img_concept_hedwig_2.png) no-repeat left/contain; top: -141px; left: calc((100% - 1160px) / 2); animation: yurayura 2s linear infinite; transform-origin: right bottom;} #ext.about .about_last .text_box {padding: 48px 8px; max-width: 980px; margin: 0 auto; text-align: center;} #ext.about .about_last .text_box .button_area {margin-bottom: 0;} /* 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; background: linear-gradient(0deg, rgba(219, 169, 0, 1) 23%, rgba(245, 217, 116, 1) 47%, rgba(219, 169, 0, 1) 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 28px; text-align: center; justify-content: center; line-height: 1.5; font-weight: 400;} #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; margin: 0 -8px 16px; text-align: start; align-items: center; gap: 8px; padding: 0; font-family: 'Rosarivo', cursive; 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:before {content: ""; display: block; height: 1px; background: url(../images/border_yellow.svg) no-repeat left / cover; width: 25px;} #awoo-category-page .suggestion-tag-dropdown-v2:after {content: ""; display: block; height: 1px; background: url(../images/border_yellow.svg) no-repeat left/cover; width: calc(100% - 300px);} #awoo-category-page .suggestion-tag-dropdown-v2 svg {display: none;} #awoo-category-page .suggestion-tag-dropdown-v2 .suggestion-tag-title-v2 {background: linear-gradient(0deg, rgba(219, 169, 0, 1) 23%, rgba(245, 217, 116, 1) 47%, rgba(219, 169, 0, 1) 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.14; display: flex; align-items: center; gap: 8px; white-space: nowrap;} #awoo-category-page .suggestion-tag-dropdown-v2 .suggestion-tag-title-v2:after {content: '関連のキーワード'; font-size: 14px; } #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: rgba(0, 0, 0, 0.4); 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-wrapper-v2:before {position: absolute; content: ""; display: block; height: 100%; background: url(../images/border_yellow_vertical.svg) no-repeat top / cover; right:0; top: 8px; width: 1px;} #awoo-category-page .suggestion-tag-wrapper-v2:after {position: absolute; content: ""; display: block; height: 100%; background: url(../images/border_yellow_vertical.svg) no-repeat top / cover; left: 0; top: 8px; width: 1px;} #awoo-category-page .suggestion-tag-list-container-v2 {background: none; border-radius: 0; box-shadow: unset; margin: 0; padding: 0 24px 24px; gap: 14px;} #awoo-category-page .suggestion-tag-list-container-v2:after {content: ""; display: block; height: 1px; background: url(../images/border_yellow.svg) no-repeat left / cover; width: calc(100% + 16px); left: -8px; bottom: 0; position: absolute;} #awoo-category-page .suggestion-tag-list-container-v2 .awoo-tag {border: 0; position: relative; padding: 5px 10px; color: #fff; font-size: 12px; background: rgba(0, 0, 0, 0.5); border-radius: 9999px; transition: 0.3s; display: inline-block; margin: 0;} #awoo-category-page .suggestion-tag-list-container-v2 .awoo-tag::before {content: ""; display: block; width: calc(100% + 4px); height: calc(100% + 4px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #C0980B; border-radius: 9999px;} #awoo-category-page .right-block-v2 {position: relative; padding: 24px 0 15px; width: 100%; max-width: 1200px; margin: 0 auto;} #awoo-category-page .right-block-v2:before {content: ""; background-color: rgba(0, 0, 0, 0.4); width: 100vw; height: calc(100% + 15px + 115px); position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0;} #awoo-category-page .selector-group-v2 .select {background: #000 url(../images/icon/select_arrow_white.svg) no-repeat right 6px top 50%; border: 1px solid rgba(255, 255, 255, .5); border-radius: 2px; color: #fff; padding: 10px 24px 10px 10px; display: block; font-size: 15px; -webkit-appearance: none; height: 43px;} #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: #01215E; color: #fff; padding: 0; overflow: hidden; box-shadow: none; border-radius: 2px;} #awoo-category-page .selector-group-v2 .select-item:hover, #awoo-category-page .selector-group-v2 .select-item-focus {background: #DBA900; color: #000;} #awoo-category-page .products-wrapper-v2 {gap: 16px; 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; box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.4); overflow: hidden;} #awoo-category-page .products-wrapper-v2 .product-image {transition: 0.2s; background-size: 100%;} #awoo-category-page .products-wrapper-v2 .product-image:after {content: ""; display: block; background: url(../images/frames/item_frame.png) no-repeat center/100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 97%; height: 97%; z-index: 10;} #awoo-category-page .products-wrapper-v2 .out-of-stock {height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, .32);} #awoo-category-page .products-wrapper-v2 .product__name {margin: 0 0 8px;} #awoo-category-page .products-wrapper-v2 .product__name:hover {text-decoration: none;} #awoo-category-page .products-wrapper-v2 .product__price {text-align: end; font-family: 'Rosarivo', cursive; color: #000; margin: 0 0 0 auto;} #awoo-category-page .products-wrapper-v2 .product__price .product-price {font-size: 18px;} #awoo-category-page .products-wrapper-v2 .product__price .product-price .tax {font-size: 10px;} #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 {border-radius: 2px; width: 38px; height: 42px; display: inline-block; background: rgba(0, 0, 0, .5); position: relative; font-size: 15px;} #awoo-category-page .pagination-wrapper-v2 .awoo-pagination li a {color: #fff;} #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: #DBA900; color: #000000;} #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: rgba(0, 0, 0, 0.4); 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: none;} #awoo-search-result-page .awoo-tag-wrapper:after {content: ""; display: block; height: 1px; background: url(../images/border_yellow.svg) no-repeat left / cover; width: calc(100% + 16px); left: -8px; bottom: 0; position: absolute;} #awoo-search-result-page .suggestion-tag-wrapper:before {position: absolute; content: ""; display: block; height: 100%; background: url(../images/border_yellow_vertical.svg) no-repeat top / cover; right: 0; top: 8px; width: 1px;} #awoo-search-result-page .suggestion-tag-wrapper:after {position: absolute; content: ""; display: block; height: 100%; background: url(../images/border_yellow_vertical.svg) no-repeat top / cover; left: 0; top: 8px; width: 1px;} #awoo-search-result-page .suggestion-tag-wrapper .awoo-tag-wrapper {padding: 0 24px 24px; position: relative; gap: 14px;} #awoo-search-result-page .suggestion-tag-wrapper .awoo-tag-wrapper:before {content: "";display: block;height: 1px;background: url(../images/border_yellow.svg) no-repeat left / cover;width: calc(100% - 292px); position: absolute;top: -37px;right: -8px;} #awoo-search-result-page .suggestion-tag-wrapper .suggestion-tag-title {pointer-events: none; margin: 0 -8px 16px; font-family: 'Rosarivo', cursive; font-size: 36px; position: relative; z-index: 10; font-weight: normal; border: none; justify-content: flex-start; background: linear-gradient(0deg, rgba(219, 169, 0, 1) 23%, rgba(245, 217, 116, 1) 47%, rgba(219, 169, 0, 1) 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.14; display: flex; align-items: center; gap: 8px; white-space: nowrap;} #awoo-search-result-page .suggestion-tag-wrapper .suggestion-tag-title:before {content: ""; display: block; height: 1px; background: url(../images/border_yellow.svg) no-repeat left / cover; width: 25px;} #awoo-search-result-page .suggestion-tag-wrapper .suggestion-tag-title:after {content: '関連のキーワード'; font-size: 14px; } #awoo-search-result-page .suggestion-tag-wrapper .awoo-tag {border: 0; position: relative; padding: 5px 10px; color: #fff; font-size: 12px; background: rgba(0, 0, 0, 0.5); border-radius: 9999px; transition: 0.3s; display: inline-block; margin: 0;} #awoo-search-result-page .suggestion-tag-wrapper .awoo-tag:before {content: ""; display: block; width: calc(100% + 4px); height: calc(100% + 4px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #C0980B; border-radius: 9999px;} #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:before {content: ""; background-color: rgba(0, 0, 0, 0.4); width: 100vw; height: calc(100% + 15px + 115px); position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0;} #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 {background: #000 url(../images/icon/select_arrow_white.svg) no-repeat right 6px top 50%; border: 1px solid rgba(255, 255, 255, .5); border-radius: 2px; color: #fff; padding: 10px 24px 10px 10px; display: block; font-size: 15px; -webkit-appearance: none; height: 43px;} #awoo-search-result-page .control-wrapper .select {background: #000 url(../images/icon/select_arrow_white.svg) no-repeat right 6px top 50%; border: 1px solid rgba(255, 255, 255, .5); border-radius: 2px; color: #fff; padding: 10px 24px 10px 10px; display: block; font-size: 15px; -webkit-appearance: none; height: 43px;} #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: #01215E; color: #fff; padding: 0; overflow: hidden; box-shadow: none; border-radius: 2px;} #awoo-search-result-page .control-wrapper .select-item:hover, #awoo-search-result-page .control-wrapper .select-item-focus {background: #DBA900; color: #000;} #awoo-search-result-page .products-wrapper-v2 {padding: 0; gap: 16px; 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; border-radius: 4px; box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.4); overflow: hidden;} #awoo-search-result-page .products-wrapper-v2 .product-image {transition: 0.2s; background-size: 100%;} #awoo-search-result-page .products-wrapper-v2 .product-image:after {content: ""; display: block; background: url(../images/frames/item_frame.png) no-repeat center/100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 97%; height: 97%; z-index: 10;} #awoo-search-result-page .products-wrapper-v2 .out-of-stock {height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, .32);} #awoo-search-result-page .products-wrapper-v2 .product__name {margin: 0 0 8px;} #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; font-family: 'Rosarivo', cursive; color: #000; margin: 0 0 0 auto;} #awoo-search-result-page .products-wrapper-v2 .product__price .product-price {font-size: 18px;} #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 {border-radius: 2px; width: 38px; height: 42px; display: inline-block; background: rgba(0, 0, 0, .5); position: relative; font-size: 15px;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li a {color: #fff;} #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: #DBA900; color: #000000;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li.selected a {background: unset; color: inherit; display: block; line-height: 42px;} #awoo-search-result-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-search-result-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-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: rgba(0, 0, 0, 0.4); 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: linear-gradient(0deg, rgba(219, 169, 0, 1) 23%, rgba(245, 217, 116, 1) 47%, rgba(219, 169, 0, 1) 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.14; margin: 0 0 40px; padding: 40px 0 0; font-family: 'Rosarivo', cursive; font-size: 36px; text-align: center; position: relative; z-index: 10; font-weight: normal;} /* #awoo-search-result-page .no-data-wrapper-v2 .related-title:before {content: ""; display: block; background: url(../images/icon/section_title_deco.svg) no-repeat center/100%; width: 82px; height: 36px; position: absolute; top: 0; left: 50%; transform: translateX(-50%);} */ #awoo-search-result-page .no-data-wrapper-v2 .related-title:after {content: 'おすすめ'; font-size: 14px; display: block;} #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; box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.4); border-radius: 4px; overflow: hidden; } #awoo-search-result-page .no-data-wrapper-v2 .related-product-img:after {content: ""; display: block; background: url(../images/frames/item_frame.png) no-repeat center/100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 97%; height: 97%; z-index: 10;} #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; font-family: 'Rosarivo', cursive;} #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; } /* ================================================================= 7.トップページ 使用ファイル：top.xhtml =================================================================*/ /* top -------------------------------------------------------------*/ #top .scroll {opacity: 1; visibility: visible; transform: translateY(0px); z-index: 10; position: relative;} #top .section {padding: 80px 0;} .section .section_inner {margin: 0 auto; padding: 0 6vw; width: 100%;} #top .section .section_inner{padding: 0 16vw;} #top .button.medium,#top input.medium{width: 380px; max-width: 380px; font-size: 22px;} #top .button_area .multi_wrapper{gap: 62px;} /* importantInfo - 重要なお知らせ -------------------------------------------------------------*/ #top #importantInfo {background-color: rgba(21, 34, 97, 0.75); width: 100%; font-size: 18px;} #top #importantInfo a {color: #ffffff; padding: 17px; display: block; text-align: center;font-family: "ab-megadot9";} /* frame*/ #top #mainvisual.pc { display: block; position: relative;} #top #mainvisual.sp { display: none;} #top .frame_area{display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 1fr); place-items: center;} #top .frame_box{position: relative;} #top .frame .frame_comment{background: #3ab549; padding: 8px 15px; position: absolute; font-size: 1vw; font-family: "ab-tombo-bold","sans-serif"; max-width: 27vw; color: #fff;} #top .frame .frame_box:nth-of-type(1){margin-right: 8px;} #top .frame .frame_box:nth-of-type(1) .frame_comment{top: 10px; left: -50px;} #top .frame .frame_box:nth-of-type(2){grid-column-start: 3;grid-row-start: 1;} #top .frame .frame_box:nth-of-type(2) .frame_comment{top: 10px; right: -8vw;} #top .frame .frame_box:nth-of-type(3){grid-column-start: 1; grid-row-start: 2; margin-right: 8px; margin-top: -5%;} #top .frame .frame_box:nth-of-type(3) .frame_comment{bottom: 50px; left: -50px;} #top .frame .frame_box:nth-of-type(4){grid-column-start: 3;grid-row-start: 2; margin-top: -5%;} #top .frame .frame_box:nth-of-type(4) .frame_comment{bottom: 50px; right: -8vw;} #top .frame .frame_box:nth-of-type(5){grid-row: span 2 / span 2;grid-column-start: 2;grid-row-start: 1;display: flex;flex-direction: column;align-items: center;justify-content: center; font-size: 22px; text-align: center;} #top .frame_shadow{filter: drop-shadow(8px 8px #4b5aa0);} #top .frame_img{width: 100vw; height: 100vw; max-width: 25vw; max-height: 25vw;background: #4b5aa0;position: relative;} #top .frame_img>div{object-fit: cover; width: 100%; height: 100%; position: absolute; top: 4px; left: 4px; max-width: calc( 25vw - 8px); max-height: calc( 25vw - 8px);} #top .frame_img a:hover img{transform: scale(1.1);} #top .frame_img img{width: 100%; height: 100%; transition: 0.2s;} #top .frame_box:nth-of-type(1) .frame_img,#top .frame_box:nth-of-type(1) .frame_img > div,#top .frame_box:nth-of-type(2) .frame_img,#top .frame_box:nth-of-type(2) .frame_img > div {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);} #top .frame_box:nth-of-type(3) .frame_img,#top .frame_box:nth-of-type(3) .frame_img > div,#top .frame_box:nth-of-type(4) .frame_img,#top .frame_box:nth-of-type(4) .frame_img > div{clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);} #top .frame .frame_center img{max-width: 21.8vw;width:100%; margin-bottom:50px;} #top .frame .introduction +.introduction{margin-top: 40px;} #top #mainvisual .introduction{font-size: 1.15vw ; line-height: 1.59;text-align:center; color: #fff;} #top #mainvisual .mainvisual_wrapper{display: none;} #top #mainvisual{padding: 30px 0 270px; margin:0; background-image: -moz-linear-gradient( 90deg, rgb(162,111,165) 0%, rgb(172,141,189) 15%, rgb(182,171,212) 25%, rgb(130,188,228) 50%, rgb(163,211,160) 75%, rgb(172,212,145) 100%, rgb(246,217,210) 100%, rgb(184,212,243) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(162,111,165) 0%, rgb(172,141,189) 15%, rgb(182,171,212) 25%, rgb(130,188,228) 50%, rgb(163,211,160) 75%, rgb(172,212,145) 100%, rgb(246,217,210) 100%, rgb(184,212,243) 100%); background-image: -ms-linear-gradient( 90deg, rgb(162,111,165) 0%, rgb(172,141,189) 15%, rgb(182,171,212) 25%, rgb(130,188,228) 50%, rgb(163,211,160) 75%, rgb(172,212,145) 100%, rgb(246,217,210) 100%, rgb(184,212,243) 100%);} #top #mainvisual .section_inner{padding: 0 9vw;} #top #mainvisual .frame_img > .mainvisual_item.first_img { z-index: 3; } #top #mainvisual .frame_img > .mainvisual_item.second_img { z-index: 1; } #top #mainvisual .frame_img > .mainvisual_item.third_img { z-index: 0; } #top #mainvisual .frame_img > .mainvisual_item.active { z-index: 9; } #top #mainvisual .frame_img > .mainvisual_item.last-active { z-index: 8; } #top #mainvisual .frame_img > .mainvisual_item{position: absolute; width: 100%; height: 100%; z-index: 1;} /* 背景動き */ #top #mainvisual .sparkling_left{width:30vw; height:20vw; position: absolute;} #top #mainvisual .sparkling_right{width:30vw; height:20vw; position: absolute; right: 0; top: 20vw;} @media screen and (max-width: 1200px) and (min-width: 769px) { /* #top .frame_img{max-width: 25.05vw; max-height: 25.05vw;} #top .frame_img img{max-width: calc( 25.05vw - 8px); max-height: calc( 25.05vw - 8px);} #top .introduction{font-size: 16px;} #top .frame_area{column-gap: 20px;} */ } @media screen and (max-width: 768px) { #top #mainvisual.pc { display: none; } #top #mainvisual.sp { display: block; padding:20px 0 245px;} #top #mainvisual .section_title{margin-bottom: 20px; color: #fff;} #top #mainvisual .section_title .inner{margin:0;} #top #mainvisual .section_title img{width: 241px;} #top #mainvisual .introduction{line-height:1.69; font-size: 13px;} #top .frame_area{display: flex;flex-direction: column; padding-bottom: 24px; overflow: hidden;} #top #mainvisual .section_inner{padding: 0;} #top .frame .frame_comment{max-width: 90vw;} #top .frame_img{max-width: 90vw; max-height: 90vw;} #top .frame_img>div{max-width: calc( 90vw - 4px); max-height: calc( 90vw - 4px);} #top .frame_shadow{filter: drop-shadow(4px 4px #4b5aa0);} #top .frame_img>div{top: 2px; left: 2px;} #top .introduction +.introduction{margin-top: 25px;} #top .frame .frame_box:nth-of-type(2)::after{content: ""; display: block; background: url(../images/mainvisual_grogu.png) no-repeat center / 100%; position: absolute; width: 130px; height: 130px; bottom:-70px; right:-35px; z-index:2;} #top .frame .frame_box:nth-of-type(2n){margin:-15px auto 0 -4px;} #top .frame .frame_box:nth-of-type(2n) .frame_img,#top .frame .frame_box:nth-of-type(2n) .frame_img >div{clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);} #top .frame .frame_box:nth-of-type(2n) .frame_comment{top: 20px;right: -20px; bottom: auto;} #top .frame .frame_box:nth-of-type(2n-1){margin-left: auto; margin-right: -4px; margin-top: 25px;} #top .frame .frame_box:nth-of-type(2n-1) .frame_img,#top .frame .frame_box:nth-of-type(2n-1) .frame_img >div{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);} #top .frame .frame_box:nth-of-type(2n-1) .frame_comment{top: 10px; left: -20px; bottom: auto;} #top .frame .frame_box:nth-of-type(5),#top .frame .frame_box .frame_comment{font-size: 12px;} #top .frame .frame_box:nth-of-type(1){margin-top: 0px;} #top #mainvisual .frame{position: relative;} .sparkling_sp{height: 100%; width:100%; position: absolute; top: 0; bottom: 0;} } /* topics - トピックス -------------------------------------------------------------*/ #top #topics {margin:0; padding-top: 70px; background: #fad9e7; position: relative; padding-bottom: 30px;border-radius: 0 0 20px 20px;} #top #topics::before{content: ""; display: block; background: url(../images/topics_grogu.png) no-repeat center / 100%; position: absolute; width: 656px; height: 199px; top: -199px; left: 50%; transform: translateX(-50%);} #top #topics .section_title {position: absolute; left: 50%; transform: translateX(-50%); top: -64px; color:#904A9B; padding-top: 0;} #top #topics .section_title::before {content: none;} #top #topics .section_title img{display: block;} #top #topics .tabs {margin: 12px 0 33px; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 6px 8px; -ms-overflow-style: none; scrollbar-width: none; .content::-webkit-scrollbar: display:none;} #top #topics .tabs li::after{content: ""; background: url(../images/butterfly.svg) no-repeat center / contain; display: block; height: 21px; width: 21px; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.2s; left: 11px;} #top #topics .tabs li.active::after {background: url(../images/butterfly_active.svg) no-repeat center / contain;} #top #topics .tabs li {position: relative; padding: 1px 18px 1px 34px; border: 1px solid #675dc2; color: #675dc2; background: #fff; border-radius: 9999px; white-space: nowrap; font-size: 18px; cursor: pointer;} #top #topics .tabs li.active {background-color: #645dbe; color: #fff; position: relative; cursor: inherit;} #top #topics .tabs li.active::before {content: ""; display: block; height: calc(100% - 2px); width: calc(100% - 2px); border: 1px solid #645dbe; border-radius: 9999px; position: absolute; left: 0; top: 0;} #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 {width: calc((100% - 40px) / 2); padding: 12px 0; position: relative; display: none; opacity: 0; visibility: hidden; transform: translateY(50px); transition: opacity 1s,visibility 1s, transform 1s;} #top #topics .topics_list .box.animation_active {opacity: 1; visibility: visible; transform: translateY(0px);} #top #topics .topics_list .box.active {display: block;} #top #topics .topics_list .box a {display: flex; gap: 16px; align-items: center; justify-content: flex-start;} #top #topics .topics_list .img_box {padding: 0; width: 100%;min-width: 180px; max-width: 180px; height: 100%; min-height: 150px; border-radius: 0;} #top #topics .topics_list .info {display: flex; align-items: center; gap: 8px; font-size: 16px; flex-wrap: wrap;} #top #topics .topics_list .info .item_icon {font-size: 14px; margin: 0; border-radius: 15px; padding: 2px 12px; font-weight: normal;} #top #topics .topics_list .info .item_icon.purple{background: #fff; border: 1px solid #675dc2; color: #675dc2;} #top #topics .topics_list .info .date {font-family: 'Rosarivo', cursive;} #top #topics .topics_list .text {margin: 0; font-size: 18px; margin: 0 0 8px; color: #904a9b;} #top #topics .inline_link {color: #DBA900; margin: 0 0 0 auto; width: fit-content; display: block;} #top #topics .topics_list:not(.active) { display: none; } #top #topics .button_area {margin-top: 28px;} /* info - 臨時topics -------------------------------------------------------------*/ #top #information {margin:0; padding-top: 70px; background: #fad9e7; position: relative; padding-bottom: 30px;border-radius: 0 0 20px 20px;} #top #information::before{content: ""; display: block; background: url(../images/topics_grogu.png) no-repeat center / 100%; position: absolute; width: 656px; height: 199px; top: -199px; left: 50%; transform: translateX(-50%);} #top #information .section_title {position: absolute; left: 50%; transform: translateX(-50%); top: -64px; color:#904A9B; padding-top: 0;} #top #information .section_title::before {content: none;} #top #information .section_title img{display: block;} #top #information .tabs {margin: 12px 0 33px; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 6px 8px; -ms-overflow-style: none; scrollbar-width: none; .content::-webkit-scrollbar: display:none;} #top #information .tabs li::after{content: ""; background: url(../images/butterfly.svg) no-repeat center / contain; display: block; height: 21px; width: 21px; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.2s; left: 11px;} #top #information .tabs li.active::after {background: url(../images/butterfly_active.svg) no-repeat center / contain;} #top #information .tabs li {position: relative; padding: 1px 18px 1px 34px; border: 1px solid #675dc2; color: #675dc2; background: #fff; border-radius: 9999px; white-space: nowrap; font-size: 18px; cursor: pointer;} #top #information .tabs li.active {background-color: #645dbe; color: #fff; position: relative; cursor: inherit;} #top #information .tabs li.active::before {content: ""; display: block; height: calc(100% - 2px); width: calc(100% - 2px); border: 1px solid #645dbe; border-radius: 9999px; position: absolute; left: 0; top: 0;} #top #information .topics_list {margin: 0 0 16px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 0 40px;} #top #information .topics_list .box {width: calc((100% - 40px) / 2); padding: 12px 0; position: relative; /* display: none; opacity: 0; visibility: hidden; */ transform: translateY(50px); transition: opacity 1s,visibility 1s, transform 1s;} #top #information .topics_list .box.animation_active {opacity: 1; visibility: visible; transform: translateY(0px);} #top #information .topics_list .box.active {display: block;} #top #information .topics_list .box a {display: flex; gap: 16px; align-items: center; justify-content: flex-start;} #top #information .topics_list .img_box {padding: 0; width: 100%;min-width: 180px; max-width: 180px; height: 100%; min-height: 150px; border-radius: 0;} #top #information .topics_list .info {display: flex; align-items: center; gap: 8px; font-size: 16px; flex-wrap: wrap;} #top #information .topics_list .info .item_icon {font-size: 18px; margin: 0; border-radius: 15px; padding: 3px 15px; font-weight: normal;} #top #information .topics_list .info .item_icon.purple{background: #fff; border: 1px solid #675dc2; color: #675dc2;} #top #information .topics_list .info .date {font-family: 'Rosarivo', cursive;} #top #information .topics_list .text {margin: 0; font-size: 18px; margin: 0 0 8px; color: #904a9b;} #top #information .inline_link {color: #DBA900; margin: 0 0 0 auto; width: fit-content; display: block;} /* #top #information .topics_list:not(.active) { display: none; } */ #top #information .button_area {margin-top: 80px;} /* ピックアップ new - 新着商品 -------------------------------------------------------------*/ #top #new {background: url(../images/bg/bg_green.png) repeat center / 32px auto;padding-top: 0; margin:-26px 0 0 0; padding-bottom: 90px;} #top #new .section_title{color: #3ab549; text-align: left; display: inline-block; padding-top: 75px; margin-bottom: 60px;} #top #new .section_title .inner {text-align: center;} #top #new .section_title .main img{display: block;} #top #new .section_title::after{content: ""; background: url(../images/pickup_grogu.png) no-repeat center / contain; display: block; height: 142px; width: 302px; position: absolute; top: 59%; transform: translateY(-50%); right: -340px;} #top #new .item_list{gap: 0; row-gap: 50px;} #top #new .box:nth-of-type(4n){margin-right: 0;} #top #new .box {margin-right: 50px; position: relative; opacity: 0; visibility: hidden; transform: translateY(50px); transition: opacity 1s,visibility 1s, transform 1s;} #top #new .box .img_box {border-radius: 0;} #top #new .box.animation_active {opacity: 1; visibility: visible; transform: translateY(0px);} #top #new .button_area {margin: 90px auto 0;} #top #new .box:nth-of-type(6){margin-right:30px;} #top #new .box:nth-of-type(6),#top #new .box:nth-of-type(8){box-shadow: none; border: none; width: calc((100% + 70px) / 4); margin-left: -50px;} #top #new .box:nth-of-type(6) a,#top #new .box:nth-of-type(8) a{background: transparent;} #top #new .box:nth-of-type(6) .img_box,#top #new .box:nth-of-type(8) .img_box{clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%); background: #3ab549; height: 100%; border: none; box-shadow: none;} #top #new .box:nth-of-type(6) .img_box img,#top #new .box:nth-of-type(8) .img_box img{height: 100%;} #top #new .box:nth-of-type(6) .img_box >div,#top #new .box:nth-of-type(8) .img_box >div{object-fit: cover; clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%); width: 100%; height: 100%; position: absolute; top: 4px; left: 4px; max-width: calc(100% - 8px); max-height: calc(100% - 8px); margin: 0;} #top #new .box:nth-of-type(6),#top #new .box:nth-of-type(8){box-shadow: none; border: none;} #top #new .box:nth-of-type(6) .item_new,#top #new .box:nth-of-type(8) .item_new{top:-6px;left:14px} #top #new .box:nth-of-type(6) .img_box_shadow,#top #new .box:nth-of-type(8) .img_box_shadow{filter: drop-shadow(4px 4px #3ab549); flex: 1;} #top #new .img_trapezoid img{width: 100%; /* height: 100%; */} #top #new .item_list .box .first,#top #new .item_list .box .third{margin-top: -2%;} #top #new .item_list .box .second,#top #new .item_list .box .fourth {margin-bottom: 2%;} #top #new .item_list .box .second img,#top #new .item_list .box .fourth img{width: 94%;} #top #new .item_list .box .first,#top #new .item_list .box .second,#top #new .item_list .box .third,#top #new .item_list .box .fourth {height: 50%;} #top #new .item_list .box .first,#top #new .item_list .box .third{margin-bottom: 4%;} #top #new .item_list .box.img_trapezoid{border: none; box-shadow: none; width: calc((100% - 130px) / 4);} #top #new .img_area{width:250px; margin: 50px auto 0;} /* おすすめ recommend -------------------------------------------------------------*/ #recommend .section_title{color: #4b5aa0; text-align: left; display: inline-block;} #recommend .section_title img{display: block;} #top #recommend{background: url(../images/bg/bg_blue.png) repeat center / 32px auto; position:relative; margin:0; padding: 35px 0 115px;} #recommend{padding-bottom: 10px;} #top #recommend::after{content: ""; background: url(../images/recommend_grogu2.png) no-repeat center / contain; display: block; height: 91px; width: 285px; position: absolute; bottom:-9px; left: 50%; transform: translateX(-50%);} #recommend .section_title .inner{text-align: center;} #recommend .section_title::after{content: ""; background: url(../images/recommend_grogu.png) no-repeat center / contain; display: block; height: 153px; width: 250px; position: absolute; top: 54%; transform: translateY(-50%); right: -250px;} #top #recommend .box{opacity: 0; visibility: hidden; transform: translateY(50px); transition: opacity 1s, visibility 1s, transform 1s;} #recommend .img_box{border: 4px solid #4b5aa0; box-shadow: 4px 4px 0px 0px #4b5aa0; } #top #recommend .box.animation_active{opacity: 1; visibility: visible; transform: translateY(0px);} #recommend .item_list .box .price{background: #4b5aa0;} #recommend::after{width:285px; height: 91px;} #recommend .main_inner{max-width:1200px;} /* feature - 特集 -------------------------------------------------------------*/ #top #feature {padding-top: 64px; background: url(../images/bg/bg_default_round.png) no-repeat center top/cover; margin: -70px 0 0; z-index: 10; position: relative;} #top #feature .swiper-container-wrapper {padding: 0 8px; width: 100vw; margin: 0 calc(50% - 50vw); overflow: hidden;} #top #feature .swiper-container {width: 88vw; overflow: visible;} #top #feature .box img {opacity: 0; visibility: hidden; transition: opacity 1s,visibility 1s, transform 1s;} #top #feature .box.animation_active img {opacity: 1; visibility: visible;} #top #feature .swiper-button-prev, #top #feature .swiper-button-next {top: calc((100% - 60px) / 2);} #top #feature .swiper-wrapper .box .img_box {background: #000; box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.8); border-radius: 0;} #top #feature .swiper-wrapper .box .img_box::after {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 103.5%; height: 103.5%;} #top #feature .swiper-wrapper .box img {padding: 3%;} #top #feature .swiper-wrapper .box:nth-child(3n+1) .img_box::after {background: url(../images/frames/mainvisual_frame_a.png) no-repeat center/100%;} #top #feature .swiper-wrapper .box:nth-child(3n-1) .img_box::after {background: url(../images/frames/mainvisual_frame_b.png) no-repeat center/100%;} #top #feature .swiper-wrapper .box:nth-child(3n) .img_box::after {background: url(../images/frames/mainvisual_frame_c.png) no-repeat center/100%;} #top #feature .swiper-wrapper .box:nth-child(3n) img {padding: 2%;} #top #feature .box p {line-height: 1.3; margin: 12px auto 0; padding: 12px 24px; background-color: rgba(0, 0, 0, 0.4); text-align: center; max-width: 218px; position: relative; min-height: 60px; display: flex; align-items: center; justify-content: center; font-size: 14px;} #top #feature .box p::before, #top #feature .box p::after, #top #feature .box p span::before, #top #feature .box p span::after {content: ""; display: block; width: 2px; height: 2px; position: absolute; background: #DBA900; top: 4px; left: 3px; border-radius: 9999px;} #top #feature .box p::after {bottom: 4px; top: unset;} #top #feature .box p span::before {left: unset; right: 3px;} #top #feature .box p span::after {top: unset; bottom: 4px; left: unset; right: 3px;} #top #feature .box 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_title .inner {margin: 2px 0 0;} #top #ranking::before {content: ""; position: absolute; display: block; width: 100%; height: 100%; background: url(../images/bg/newspaper.png) repeat top left/1257px; top: 0; opacity: 0.15;} #top #ranking::after {content: ""; display: block; clip-path: polygon(0 0, 100% 0, 100% 31%, 0 46%); background: #8A2B2B; position: absolute; top: -1px; width: 100%; height: 100%;} #top #ranking .box {opacity: 0; visibility: hidden; transform: translateY(50px); transition: opacity 1s,visibility 1s, transform 1s;} #top #ranking .box.animation_active {opacity: 1; visibility: visible; transform: translateY(0px);} #top #ranking .box a {padding-top: 5px; color: #000;} #top #ranking .box a h3 {position: absolute; padding: 6px 3px 0 0; width: 37px; height: 48px; left: 16px; top: 0; z-index: 11; text-align: center; color: #fff; font-size: 28px; font-family: 'Rosarivo', cursive; line-height: 1} #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%; font-size: 23px;} #top #ranking .box:nth-child(n + 3) a h3 {background: url(../images/icon/ranking_no4.png) no-repeat center/100%; font-size: 20px; line-height: 1.3;} #top #ranking .box:nth-child(6) a h3, #top #ranking .box:nth-child(8) a h3, #top #ranking .box:nth-child(10) a h3 {font-size: 23px; line-height: 1.5;} /* 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 {margin-bottom: 0; font-size: 14px; border-collapse: collapse;} #main .cart_table tbody tr{border-top: 2px solid #4b5aa0;} #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; overflow: hidden; display: block; border: 2px solid #3ab549; box-shadow: 4px 4px 0px 0px #3ab549;} #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: 10px;} #main .cart_table .text_box .item_name {display: inline-block; line-height: 1.2; display: block; color: #4b5aa0;} #main .cart_table .other {margin: 8px 0 0; font-size: 11px;} #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 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 {display: block; font-size: 19px; margin: 0 auto; padding: 0; width: 19px; height: 19px; border-radius: 9999px; line-height: 19px;} #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: #fff; 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: 0 0 16px; padding: 14px 16px 32px; background-color: #fff; box-shadow: 4px 4px 0px 0px #4b5aa0; border: 4px solid #4b5aa0; margin-top: 10px;} #cartFlow .total_wrapper .button_box { width: 174px; margin: 3px 0 0; } #cartFlow .total_wrapper .button_box .button { width: 100%; } #cartFlow .total_wrapper .button_box .button::after { left: 8px; } #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 0 0; font-size: 18px; border-top: 2px solid #4b5aa0; color: #d54448;} #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; } #cartFlow .normal_title.border_none::before { content: unset; } /*ラッピング*/ #cartFlow .p-fiftTableWrap {display: none;} #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; color: #fff; padding: 0; font-size: 13px;} #cartFlow .p-giftList .ds-gift-error {margin: 16px 0; color: #d54448; font-size: 14px; text-shadow: 0 0 #d54448;} #cartFlow .p-giftList .ds-gift-error:empty {display: none;} #cartFlow #ds-gift-not-setted-error {display: none; margin: 0; color: #d54448; font-size: 14px; text-shadow: 0 0 #d54448; flex: 1; text-align: left;} #cartFlow .p-giftList.info_box { position: relative; box-shadow: 4px 4px 0px 0px #4b5aa0; border: 4px solid #4b5aa0; margin-top: 12px;} #cartFlow .p-giftListInner { display: flex; align-items: stretch; justify-content: flex-start;} #cartFlow .p-giftSetted .p-giftListInner{border-top: 2px solid #4b5aa0;} #cartFlow .p-giftListInner .c-ttl01 { display: flex; align-items: center; padding: 24px 16px; width: 222px; background-color: #4b5aa0; color: #fff; font-size: 14px; } #cartFlow .p-giftListInner .p-giftCheck, .p-giftSetted .p-giftListInner .button_area { padding: 17px 16px; width: calc(100% - 222px); background-color: #fff;} .p-giftSetted .p-giftListInner .button_area .button { width: 174px; } #cartFlow .p-giftTable tr:nth-of-type(n+2){border-top: 2px solid #4b5aa0;} #cartFlow .p-giftTable {margin-top: 0; box-shadow: none; border: none; border-top: 2px solid #4b5aa0;} #cartFlow .p-giftTable .box .img_box{border: none; box-shadow: none;} #cartFlow .p-giftTable tr.title { display: none; } #cartFlow .p-giftList.info_box .button_area {padding: 24px 16px; background-color: #fff; margin: 0; justify-content: flex-end; border-top: 2px solid #4b5aa0;} #cartFlow .p-giftList.info_box .button_area .button { width: 174px; } #cartFlow .p-giftList.info_box #p-giftWrapError { background-color: #fff; padding: 10px 16px; margin: 0; border-top: 2px solid #4b5aa0;} #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: #4b5aa0; border-radius: 9999px;} #ds-gift-popup #ds-gift-popup__inner::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, 0.24);} #ds-gift-popup #ds-gift-popup__inner { scrollbar-width: thin; scrollbar-color: #4b5aa0 rgba(0, 0, 0, 0.24); } #ds-gift-popup .medium_title { margin: 0 0 44px; } #ds-gift-popup .normal_title { margin: 20px 0 17px; } #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,.4);} #ds-gift-popup.show .section_title {position: relative; max-width: 888px; margin: 0 auto 12px; font-size: 18px; text-align: center;} #ds-gift-popup #p-giftItemError, #ds-gift-popup #p-giftPackError, #ds-gift-popup #p-giftMessageError {color: #d54448; font-size: 14px; text-shadow: 0 0 #d54448; 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: 33px 40px 40px; background: #fff; border-radius: 8px;} #ds-gift-popup #ds-gift-popup__close {position: absolute; background-image: url(../images/icon/close.svg); position: absolute; width: 32px; text-indent: -9999px; overflow: hidden; white-space: nowrap; border: 0; height: 40px; background-color: unset; background-repeat: no-repeat; background-position: center; display: block; cursor: pointer; top: 3px; right: 24px; background-size: contain;} #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;} #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; position: absolute; background: #3ab549; color: #fff; padding: 9px; bottom: -18px; right: -12px;} #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: 4px solid #3ab549; box-shadow: 4px 4px 0px 0px #3ab549; overflow: visible;} #ds-gift-popup .img_hidden .ds-gift-option__item-image{overflow: hidden;} #ds-gift-popup .ds-gift-option__item-image >div{width: 100%; height: 100%; position: relative; overflow: hidden;} #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; color: #4b5aa0;} #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 12px; display: inline-block; border: 1px solid #4b5aa0; border-radius: 2px; padding: 9px 10px 9px 37px; } #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: #4b5aa0; border-color: #4b5aa0;} #ds-gift-popup__inner .button_area.back .back.button.clear { max-width: none; width: auto; padding-left: 16px; padding-right: 16px; } #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; opacity: .72; transition: all .3s; background: #fff; border: 1px solid transparent; display: block; border-radius: 4px; color: #000000; font-size: 12px; margin: 0; padding: 0; } #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;} #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: 10px 0 10px; box-shadow: 4px 4px 0px 0px #4b5aa0; border: 4px solid #4b5aa0;} .p-giftSetted .normal_title {margin-top: 0;} .p-giftSetted .p-giftListInner .button_area { margin: 0; justify-content: flex-start; } .p-giftSetted .p-giftSettedList__item { display: flex; align-items: stretch; justify-content: flex-start;} .p-giftSetted .p-giftSettedList .p-giftSettedList__item:nth-of-type(n+2){border-top: 2px solid #4b5aa0;} .p-giftSetted .p-giftSettedList__item .c-ttl02 { display: flex; align-items: center; padding: 24px 16px; width: 222px; background-color: #4b5aa0; color: #fff; 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% - 222px); background-color: #fff; } .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: #4b5aa0; 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; } .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; 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: #d54448; font-size: 16px; text-shadow: 0 0 #d54448;} .p-giftSetted #ds-gift-setted-error:empty {display: none;} .p-giftSetted p-giftSettedList__item {margin: 0 0 24px;} #ds-gift-wrap__hidden {display: none;} #cartFlow.kessai .order_no {margin: 24px 0; font-size: 24px; text-align: center; color: #4b5aa0; padding: 23px; background: #fff;} /*アマゾンペイ選択エリア*/ #cartFlow .amazon_highlight_area { margin: 40px 0; padding: 32px; background: #fff; text-align: center; box-shadow: 4px 4px 0px 0px #4b5aa0; border: 4px solid #4b5aa0;} #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 { font-size: 19px; margin: 0 0 12px; } #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: #4b5aa0; 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; } #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; } /* 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:#d54448; text-shadow: 0 0 #d54448; 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_gold { color: #DBA900; text-shadow: 0 0 0 #DBA900; } #cartFlow .notice_area a { text-decoration: underline;} #cartFlow .total dl.discount {color: #d54448;} #cartFlow .cart_shopbag_wrap{background: rgba(255,255,255,0.6); padding: 32px;} /* 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: #4b5aa0; 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 >div{margin: 32px 0 0; padding: 24px 24px 12px; background: #fff; box-shadow: 4px 4px 0px 0px #4b5aa0; border: 4px solid #4b5aa0;} #cartLogin .nyuka_table td{border-bottom: 2px solid #4b5aa0;} /* クーポンラジオボタン制御に仕様 */ #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 #4b5aa0 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: rgba(255, 255, 255, 0.4);} #memberInput .ds-saved-card .saved_card_box + .saved_card_box {margin-top: 12px;} #memberInput .f-payOpt .pay + .pay {margin: 12px 0 0;} #memberInput #selectHouse {display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 8px;} #memberInput #selectHouse > span {width: 100%; max-width: calc((100% - (8px * 4)) / 5); position: relative; font-size: 11px;} #memberInput #selectHouse > span label {text-align: center; position: relative; opacity: .72; transition: all .3s; background: #fff; border: 1px solid transparent; display: block; border-radius: 4px; color: #000000; margin: 0; padding: 8px 0;} #memberInput #selectHouse > span input[type='radio']:checked + label {opacity: 1; border: 1px solid #DBA900;} #memberInput #selectHouse > span input[type='radio']:checked + label:after {width: 16px; height: 16px; background: url(../images/icon/check.svg) no-repeat center/contain; top: 6px; right: 6px; left: auto; bottom: auto; transform: none; border: none;} #memberInput #selectHouse > span input[type='radio'] + label:before {content: none;} #memberInput #selectHouse .selected_house_img {height: 140px; width: calc(100% - 12px); text-align: center; margin: 0 auto;} #memberInput #selectHouse .gry .selected_house_img {background: url(../images/gryffindor.png) no-repeat center/ contain; } #memberInput #selectHouse .sly .selected_house_img {background: url(../images/slytherin.png) no-repeat center/ contain;} #memberInput #selectHouse .rav .selected_house_img {background: url(../images/ravenclaw.png) no-repeat center/ contain;} #memberInput #selectHouse .huf .selected_house_img {background: url(../images/hufflepuff.png) no-repeat center/ contain;} #memberInput #selectHouse .non .selected_house_img {background: url(../images/hogwarts.png) no-repeat center/ contain;} /*確認画面*/ #memberInput #selectHouse:has(> .selected_house_img) {width: 100%; max-width: calc((100% - (8px * 4)) / 5); position: relative; font-size: 11px; text-align: center; background: #fff; border: 1px solid #DBA900; display: block; border-radius: 4px; color: #000000; margin: 0; padding: 8px 0;} #memberInput #selectHouse:has(> .selected_house_img):after {content:""; display; block; position: absolute; width: 16px; height: 16px; background: url(../images/icon/check.svg) no-repeat center/contain; top: 6px; right: 6px; left: auto; bottom: auto; transform: none; border: none;} #memberInput #selectHouse.gry .selected_house_img {background: url(../images/gryffindor.png) no-repeat center/ contain; } #memberInput #selectHouse.sly .selected_house_img {background: url(../images/slytherin.png) no-repeat center/ contain;} #memberInput #selectHouse.rav .selected_house_img {background: url(../images/ravenclaw.png) no-repeat center/ contain;} #memberInput #selectHouse.huf .selected_house_img {background: url(../images/hufflepuff.png) no-repeat center/ contain;} #memberInput #selectHouse.non .selected_house_img {background: url(../images/hogwarts.png) no-repeat center/ contain;} /* ================================================================= 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, =================================================================*/ /* topics -暫定topics -------------------------------------------------------------*/ #topics.main_inner {padding:20px 20px 10px;background: #fff;border-radius: 10px;} #topics h2 {text-align: center;padding:20px auto;font-family: "Noto Sans JP", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif;} #topics .buttonarea {text-align: center;} #topics .buttonarea a {margin:20px auto;} #topics #topicsList .box{padding:10px 0;border-bottom:1px dotted #675dc2} #topics #topicsList .box{display:flex;align-items: center;} #topics #topicsList .box .img_box{padding:10px;width:35%;} #topics #topicsList .box .img_box img{position: inherit;} #topics #topicsList, #topics .topicsDetail .date{font-size:80%;} /* awoo recommend -画像レコメンド -------------------------------------------------------------*/ .recommend_wrapper {padding: 36px 0 80px; background: url(../images/bg/bg_blue.png) repeat center / 32px auto; display: flex; flex-direction: column; gap: 80px;} .recommend_wrapper .section {margin:0 auto; width: 100%;} #itemList + .recommend_wrapper, #wishList + .recommend_wrapper, #errorPage + .recommend_wrapper, #error404 .recommend_wrapper {margin: 64px 0 0;} #awoo-keyword-popular-products .related-wrapper .related-title {color: #4b5aa0; text-align: left; font-family:"showcard-gothic", "sans-serif"; font-size: 53px; display: inline-block; position: relative; margin: 0 0 40px 0; padding: 40px 0 0;} #awoo-keyword-popular-products .related-wrapper .related-title:after {content: 'おすすめ'; font-size: 25px; font-family: "ab-tombo-bold","sans-serif"; display: block; text-align: center;} #awoo-keyword-popular-products .related-wrapper .related-title:before {content: ""; background: url(../images/recommend_grogu.png) no-repeat center / contain; display: block; height: 153px; width: 250px; position: absolute; top: 50%; transform: translateY(-50%); right: -240px;} #awoo-keyword-popular-products .related-wrapper .rec-slider-container {margin: 0;} #awoo-keyword-popular-products .related-wrapper .related-product-list {width: calc(100% + 16px);} #awoo-keyword-popular-products .related-wrapper .related-product {padding: 0; margin: 0 50px 0 0;} #awoo-keyword-popular-products .related-wrapper .slick-list{padding: 22px 0;} #awoo-keyword-popular-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {display: flex; align-items: stretch; justify-content: flex-start; flex-wrap:wrap; gap:50px;} #awoo-keyword-popular-products .related-wrapper:not(:has(.slick-initialized)) .related-product {margin: 0; width: calc((100% - 150px) / 4); position: relative;} #awoo-keyword-popular-products .related-wrapper .slick-slide.animation_active {opacity: 1; visibility: visible; transform: translateY(0px);} #awoo-keyword-popular-products .related-wrapper .related-product-img {border: 4px solid #4b5aa0; box-shadow: 4px 4px 0px 0px #4b5aa0; position: relative; padding-top: 100%; display: block; overflow: hidden; background: #fff;} #awoo-keyword-popular-products .related-wrapper .related-product-img img {display: block;} #awoo-keyword-popular-products .related-wrapper .related-product-name {display: none;} #awoo-keyword-popular-products .related-wrapper .related-product img{display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 100%; transition: 0.2s;} #awoo-keyword-popular-products .related-wrapper .product__price {margin: auto 0 0;text-align: end; font-size: 18px; font-family: "ab-tombo-bold","sans-serif"; position: absolute; bottom: -25px; right: -14px; background: #4b5aa0; padding: 9px; color: #fff; z-index: 10;} #awoo-keyword-popular-products .related-wrapper .product-price .tax {font-size: 10px;} #awoo-keyword-popular-products .related-wrapper .slick-arrow { width: 40px; height: 40px; left: -55px; top: calc((100% - 39px) / 2); opacity: 0.88; transition: 0.3s; 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: 34px; height: 34px; opacity: unset;} #awoo-keyword-popular-products .related-wrapper .slick-arrow.slick-next {transform: rotate(180deg); right: -15px; 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 .section .section_inner {padding: 0 calc(6vw - 8px);} /* awoo 画像レコメンド - 商品詳細 */ #awoo-related-products{margin-bottom: 50px;} #awoo-related-products .related-wrapper .related-title {display: none;} /* #awoo-related-products .related-wrapper .related-title:before {content: ""; display: block; background: url(../images/icon/section_title_deco.svg) no-repeat center/100%; width: 82px; height: 36px; position: absolute; top: 0; left: 50%; transform: translateX(-50%);} */ #awoo-related-products .related-wrapper .related-title:after {content: 'おすすめ'; font-size: 14px; display: block;} #awoo-related-products .related-wrapper .rec-slider-container {margin: 0;} #awoo-related-products .related-wrapper .related-product-list {width: calc(100% + 50px); display: none;} #awoo-related-products .related-wrapper .related-product-list.slick-initialized {display: flex;} #awoo-related-products .related-wrapper .related-product-list .slick-list{padding: 22px 0; margin: 0 -22px 0 0; width:100%;} #awoo-related-products .related-wrapper .related-product {padding: 0; margin: 0 50px 0 0; position: relative;} #awoo-related-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {gap: 16px; width: 100%;} #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; box-shadow: 3px 3px 6px 0px rgba(255, 255, 255, 0.4); overflow: hidden; border: 4px solid #4b5aa0; box-shadow: 4px 4px 0px 0px #4b5aa0;} #awoo-related-products .related-wrapper .related-product-img img {display: block;} #awoo-related-products .related-wrapper .related-product-name {display: none;} #awoo-related-products .related-wrapper .product-price {color: #fff; font-size: 18px; text-align: end; background: #4b5aa0; display: inline-block; font-family: "ab-tombo-bold","sans-serif";padding: 9px; position: absolute; bottom: -25px; right: -14px;} #awoo-related-products .related-wrapper .product-price .tax {font-size: 10px;} #awoo-related-products .related-wrapper .slick-arrow { width: 34px; height: 34px; left: -60px; top: calc((100% - 34px) / 2); opacity: 0.88; transition: 0.3s; z-index: 11; transform: none;} #awoo-related-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-related-products .related-wrapper .slick-arrow.slick-next {transform: rotate(180deg); right: -20px; left: unset; } #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 {background: linear-gradient(0deg, rgba(219, 169, 0, 1) 23%, rgba(245, 217, 116, 1) 47%, rgba(219, 169, 0, 1) 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.14; margin: 0 0 40px; padding: 40px 0 0; font-family: 'Rosarivo', cursive; font-size: 36px; text-align: center; position: relative; z-index: 10; font-weight: normal;} /* #awoo-favorite-related-products .related-wrapper .related-title:before {content: ""; display: block; background: url(../images/icon/section_title_deco.svg) no-repeat center/100%; width: 82px; height: 36px; position: absolute; top: 0; left: 50%; transform: translateX(-50%);} */ #awoo-favorite-related-products .related-wrapper .related-title:after {content: 'おすすめ'; font-size: 14px; display: block;} #awoo-favorite-related-products .related-wrapper .rec-slider-container {margin: 0;} #awoo-favorite-related-products .related-wrapper .related-product-list {width: calc(100% + 16px); 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 16px 0 0;} #awoo-favorite-related-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {gap: 16px; width: 100%;} #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; box-shadow: 3px 3px 6px 0px rgba(255, 255, 255, 0.4); border-radius: 4px; overflow: hidden; } #awoo-favorite-related-products .related-wrapper .related-product-img:after {content: ""; display: block; background: url(../images/frames/item_frame.png) no-repeat center/100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 97%; height: 97%; z-index: 10;} #awoo-favorite-related-products .related-wrapper .related-product-img img {display: block;} #awoo-favorite-related-products .related-wrapper .related-product-name {color: #fff; margin: 12px 4px 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: #fff; font-size: 18px; text-align: end; font-family: 'Rosarivo', cursive;} #awoo-favorite-related-products .related-wrapper .product-price .tax {font-size: 10px;} #awoo-favorite-related-products .related-wrapper .slick-arrow { width: 40px; height: 40px; left: -60px; top: calc((100% - 115px) / 2); opacity: 0.88; transition: 0.3s; z-index: 11; transform: none;} #awoo-favorite-related-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-favorite-related-products .related-wrapper .slick-arrow.slick-next {transform: rotate(180deg); right: -50px; left: unset; } #awoo-favorite-related-products .related-wrapper .slick-arrow.slick-disabled {display: none!important;} /* awoo 画像レコメンド - 404・エラーページ*/ #awoo-not-found-products .related-wrapper .related-title {background: linear-gradient(0deg, rgba(219, 169, 0, 1) 23%, rgba(245, 217, 116, 1) 47%, rgba(219, 169, 0, 1) 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.14; margin: 0 0 40px; padding: 40px 0 0; font-family: 'Rosarivo', cursive; font-size: 36px; text-align: center; position: relative; z-index: 10; font-weight: normal;} /* #awoo-not-found-products .related-wrapper .related-title:before {content: ""; display: block; background: url(../images/icon/section_title_deco.svg) no-repeat center/100%; width: 82px; height: 36px; position: absolute; top: 0; left: 50%; transform: translateX(-50%);} */ #awoo-not-found-products .related-wrapper .related-title:after {content: 'おすすめ'; font-size: 14px; display: block;} #awoo-not-found-products .related-wrapper .rec-slider-container {margin: 0;} #awoo-not-found-products .related-wrapper .related-product-list {width: calc(100% + 16px);} #awoo-not-found-products .related-wrapper .related-product {padding: 0; margin: 0 16px 0 0;} #awoo-not-found-products .related-wrapper:not(:has(.slick-initialized)) .related-product-list {gap: 16px; width: 100%;} #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; box-shadow: 3px 3px 6px 0px rgba(255, 255, 255, 0.4); border-radius: 4px; overflow: hidden; } #awoo-not-found-products .related-wrapper .related-product-img:after {content: ""; display: block; background: url(../images/frames/item_frame.png) no-repeat center/100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 97%; height: 97%; z-index: 10;} #awoo-not-found-products .related-wrapper .related-product-img img {display: block;} #awoo-not-found-products .related-wrapper .related-product-name {color: #fff; margin: 12px 4px 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; text-align: left;} #awoo-not-found-products .related-wrapper .product-price {color: #fff; font-size: 18px; text-align: end; font-family: 'Rosarivo', cursive;} #awoo-not-found-products .related-wrapper .product-price .tax {font-size: 10px;} #awoo-not-found-products .related-wrapper .slick-arrow { width: 40px; height: 40px; left: -60px; top: calc((100% - 115px) / 2); opacity: 0.88; transition: 0.3s; z-index: 11; transform: none;} #awoo-not-found-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-not-found-products .related-wrapper .slick-arrow.slick-next {transform: rotate(180deg); right: -50px; left: unset; } #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 .pc{display: inline-block;} #keyword .sp{display: none;} #keyword .section_title {margin: 0 0 15px 0; display: inline-block; gap: 8px; padding: 5px 20px 5px 10px; font-size:25px; clip-path: polygon(0 0, 100% 0, 97% 100%, 0% 100%); background: #4b5aa0; font-family: "showcard-gothic", "sans-serif"; color: #fff;} #keyword .section_title .inner{display: inline-block;} #keyword .section_title .main {white-space: nowrap;} #keyword .section_title .inner {margin: 0 0 0 4px; white-space: nowrap;} #keyword .popular-tags-wrapper{background: #fff; border: 4px solid #4b5aa0; box-shadow: 4px 4px #4b5aa0;} .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;} #awoo-keyword-popular-tags .popular-tags-title {font-size: 25px; clip-path: polygon(0 0, 100% 0, 97% 100%, 0% 100%);background: #4b5aa0;font-family: "showcard-gothic", "sans-serif";padding: 5px 20px 5px 10px; display: inline-block; margin-bottom: 15px; color: #fff;} #awoo-keyword-popular-tags .popular-tags-title:after {content: 'ちゅうもくのきーわーど'; font-size: 14px; font-family: "ab-tombo-bold","sans-serif";vertical-align: middle; margin-left: 10px;} .popular-tags-list-container{padding: 0 24px 24px;} #awoo-keyword-popular-tags .popular-tags{position: relative; background: #fff; border: 4px solid #4b5aa0; box-shadow: 4px 4px #4b5aa0; margin-top: 50px;} #awoo-keyword-popular-tags .awoo-tag-wrapper, #awoo-classify .awoo-tag-wrapper {position: relative; display: flex; gap: 6px; flex-wrap: wrap;} #awoo-keyword-popular-tags .awoo-tag, #awoo-classify .awoo-tag {border: 0; position: relative; padding: 3px 10px; color: #675dc2; font-size: 18px; background: #fff; border-radius: 9999px; transition: 0.3s; display: inline-block; margin: 0;border: 1px solid #675dc2;} #awoo-classify {margin: 0; position: relative; padding: 0 24px 24px;} .recommend_wrapper:has(#awoo-classify:empty) {display: none;} /* awoo キーワード - トップ */ #top #keyword {opacity: 0; visibility: hidden; transform: translateY(50px); transition: opacity 1s,visibility 1s, transform 1s; } #top #keyword.active {opacity: 1; visibility: visible; transform: translateY(0px);} #top #keyword .popular-tags-wrapper::after {width: calc(100% - 245px);} /* awoo キーワード - 商品詳細 */ #awoo-product-tags #recommend .section_title::after{content: none; background: none;} #awoo-product-tags {margin: 0; position: relative; padding: 0 24px 24px;} #awoo-product-tags .awoo-tag {border: 0; position: relative; padding: 3px 10px; color: #675dc2; font-size: 18px; background: fff; border-radius: 9999px; transition: 0.3s; display: inline-block; margin: 0; border: 1px solid #675dc2;} #awoo-product-tags .awoo-tag-wrapper {gap: 14px;} #awoo-product-tags .awoo-tag-wrapper{display: flex; gap: 6px; flex-wrap: wrap;} #keyword:has(.awoo-tag-wrapper:empty) {display: none;} /* narrowListCategory - 絞り込みカテゴリ -------------------------------------------------------------*/ #narrowListCategory {padding: 0 6px 0 0;} #narrowListCategory .siborikomi_button {position: relative; cursor: pointer; font-size: 18px; padding: 15px 13px 15px 40px; line-height: 18px; width: 100%; min-width: 160px; text-align: center; border: 1px solid #675dc2; background: #fff; border-radius: 10px; color: #675dc2;} #narrowListCategory .siborikomi_button::after {position: absolute; top: 50%; transform: translateY(-50%); content: ""; display: block; background: url(../images/icon/narrow_down.svg) no-repeat center/contain; width: 22px; height: 20px; left: 10px;} #narrowListCategory .siborikomi_box {background: #01215E; 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: 40px; top: 10px; right: 545px; border: 0; background: url(../images/icon/purple/close_purple.svg) no-repeat center/contain; text-indent: 999px; overflow: hidden; white-space: nowrap; padding: 0; z-index: 999; cursor: pointer;} #narrowListCategory .siborikomi_title {display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 11px 12px; text-align: center; font-size: 18px; background: #904a9b; color: #fff; position: fixed; top: 0; width: 530px; z-index: 999;} #narrowListCategory .siborikomi_title::before {content: ""; display: block; background: url(../images/icon/purple/narrow_down_purple.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%; background: url(../images/bg/bg_pink.png) repeat center / 32px auto;} #narrowListCategory .siborikomi_category_title {display: flex; margin: 0 0 12px; color: #645dbe; 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; gap: 8px;} #narrowListCategory .siborikomi_category_list li a {display: inline-block; border-radius: 9999px; padding: 5px 13px 5px; white-space: nowrap; font-size: 13px; color: #645dbe; background: #fff; min-width: 4em; text-align: center; border: 1px solid #645dbe;} #narrowListCategory .siborikomi_category_list li {position: relative; margin: 3px; font-size: 13px;} #narrowListCategory .siborikomi_category_list li:not(:has(a)){display: inline-block; border-radius: 9999px; padding: 4px 13px; white-space: nowrap; font-size: 13px; min-width: 4em; text-align: center; color: #fff; background: #645dbe;} #narrowListCategory:has(.selected) {position: relative;} #narrowListCategory:has(.selected) .siborikomi_button:after {content: ""; display: block; width: 16px; height: 16px; position: absolute; top: 50%; transform: translateY(-50%); background: url(../images/icon/purple/checked_purple.svg) no-repeat center/contain; z-index: 10; left: 13px;} /* 選択中カテゴリ */ #selectedCategory {display: none; width: 100%; margin: 8px 0 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: 10px 13px 9px; white-space: nowrap; font-size: 12px; background:#645dbe; color:#fff; position: relative;} #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/white/close_white.svg); z-index: 10; position: relative; height: 10px;} /* list - 一覧画面共通のメニュー -------------------------------------------------------------*/ .pager {margin: 32px 0; display: flex; gap: 15px; align-items: center; justify-content: center; text-align: center; font-size: 16px;} .pager a {padding: 10px 0; background: rgba(255, 255, 255, 0.2); border-radius: 50%; width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; text-align: center; border: 1px solid #fff; color: #fff;} .pager .current {background: #FFF; border-radius: 2px; width: 38px; height: 38px; display: inline-block; color: #4b5aa0; border-radius: 50%; display: flex; justify-content: center; align-items: center;} .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; background: none;} .pager a.next::before, .pager a.prev::before {background: url(../images/icon/link_arrow_white.svg) no-repeat center/100%; content: ""; display: block; width: 38px; height: 38px; 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; background: none;} .pager a.first::before, .pager a.last::before {background: url(../images/icon/link_arrow_last.svg) no-repeat center/100%; content: ""; display: block; width: 38px; height: 38px; 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: 1232px; padding: 0 16px;} #itemList .pageguide_wrapper {padding: 9px 0 0; position: relative; } #itemList .pageguide_wrapper .pageguide { gap: 8px; flex-wrap: wrap; } #itemList .pageguide_wrapper .pageguide.inner {padding: 0; flex: 1; margin: 0; position: relative;color: #4b5aa0;} #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; justify-content: space-between; margin: 15px 0 15px; font-size: 14px; } #main .pagenavi { display: flex; align-items: center; justify-content: flex-end; gap: 12px; position: relative; z-index: 3; } #itemList .pageguide{font-size: 22px;} #itemList .pageguide select{padding:11px 24px 11px 10px;font-size: 18px; width: 100%; background: #fff url(../images/icon/select_arrow.svg) no-repeat right 6px top 21px;} #itemList .item_list {position: relative; z-index: 3; margin-top: 50px;} #itemList .item_list .text_box{margin-top: 22px;} #itemList .item_list .item_new{left: -16px;} #itemList .sub_category_list_wrapper {margin: 48px 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: #fff; padding: 5px 10px; border-radius: 9999px; display: block; border: 1px solid #645dbe; color: #645dbe;} #itemList > .pager {margin-bottom: 64px;} #itemList .large_title >span{font-size: 22px; display: block; margin-top: 20px;font-family: "Noto Sans JP", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif;} #itemList .pageguide #sort_order{max-width: 240px;} #itemList .pageguide #SEARCH_MAX_ROW_LIST{max-width: 90px;} #itemList .large_title::after{content: none;} #itemList .entry-point_txt{color: #4b5aa0;} /* 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; border: 6px solid #fff; 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;} /* categoryInfo - カテゴリ情報（カテゴリ別テンプレート） -------------------------------------------------------------*/ #breadcrumbs:has(+ #itemList.house_category) {margin-bottom: 0;} #itemList.house_category #categoryInfo {margin: 0; padding: 24px 6vw 42px; flex-direction: column; gap: 16px; margin: 0 calc(50% - 50vw); position: relative; overflow: hidden;} #itemList.house_category #categoryInfo .img_box {border: 0; max-width: 115px; flex: none; min-height: unset;} #itemList.house_category #categoryInfo .img_box img {width: 100%; transform: none;} #itemList.house_category #categoryInfo .text_box {text-align: center; max-width: 888px; margin: 0 auto; width: 100%;} #itemList.house_category #categoryInfo .large_title {margin: 0 auto 40px; color: #fff; background: none; -webkit-text-fill-color: unset;} #itemList.house_category #categoryInfo::after {position: absolute; bottom: -147px; right: 6vw; content: ""; display: block; width: 382px; height: 530px; opacity: 0.08;} #itemList.house_category #categoryInfo.gry {background-color: #9D2235;} #itemList.house_category #categoryInfo.sly {background-color: #28724F;} #itemList.house_category #categoryInfo.rav {background-color: #003DA5;} #itemList.house_category #categoryInfo.huf {background-color: #FED141;} /* 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: pointer; 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: pointer;} #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: pointer; 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: pointer;} /* 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: pointer; 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: pointer;} /* itemDetail - 商品詳細・プレゼント詳細 -------------------------------------------------------------*/ #main.detail { padding-bottom: 0; } #main #itemDetail.main_inner { padding: 0 10vw; width: 100%; max-width: none; margin: 0 auto; } #itemDetail .item_wrap {display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;} #itemDetail .item_image_area {width: 41.33%;} /* 商品詳細メインスライダー */ #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: -22px; } #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; border: 4px solid #3ab549; box-shadow: 4px 4px 0px 0px #3ab549;} #itemDetail .item_image_area .main-slider .img-item {position: relative; height: 100%;background: #fff; } #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 { 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; width: calc(100% + 8px); } #itemDetail .item_image_area .thumbs .slick-list{padding-bottom: 12px;} #itemDetail .item_image_area #thumbnail-list:not(.slick-initialized) { display: flex; align-items: flex-start; justify-content: flex-start; } #itemDetail .item_image_area .thumbs.few_thumbs .slick-track { transform: unset !important; width: 100% !important; } #itemDetail .item_image_area .thumbs .slick-track { margin-left: 0; width: 100%; } #itemDetail .item_image_area .thumbs .img-item { box-sizing: border-box; max-width: calc(20% - 12px);position: relative; cursor: pointer; overflow: hidden; width: 100%; height: 100%; margin: 0 12px 0 0; padding: 0; border: 4px solid #3ab549; box-shadow: 4px 4px 0px 0px #3ab549;} #itemDetail .item_image_area .thumbs .img-item::before { display: block; padding-top: 100%; content: ""; background: #fff;} #itemDetail .item_image_area .thumbs .img-item:hover{opacity: .75;} #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 { opacity: 0.7;} #itemDetail .slick-next:before, #itemDetail .slick-prev:before{ content: none; } #itemDetail .slick-next, #itemDetail .slick-prev{ content:''; opacity: .88; width: 33px; height: 33px; background-image: url(../images/icon/arrow_cercle.png); background-size: contain; background-repeat: no-repeat; cursor: pointer; z-index: 15; } #itemDetail .slick-next{ transform: rotate(180deg); } #itemDetail .item_image_area .main-slider .slick-prev { left: -5px; } #itemDetail .item_image_area .main-slider .slick-next { right: -5px; top: calc(50% - 16px); } #itemDetail .item_image_area .thumbs .slick-prev { left: 0px; } #itemDetail .item_image_area .thumbs .slick-next { right: 10px; top: calc(50% - 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 .bg_white{background: #fff; padding: 24px 32px 56px;border-radius:10px;} #itemDetail .text_box .item_icon_list { gap: 8px; } #itemDetail .text_box .item_icon_list .item_icon { min-width: 40px; } .item_icon.white {border-color: 1px solid #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: 16px 0 24px; font-size: 24px; line-height: 1.291666666666667; border-bottom: 1px solid #4b5aa0; padding-bottom: 20px;} #itemDetail .text_box .time_sale {margin: 20px 0 30px -32px; padding: 16px 32px 10px; width: calc(100% + 64px); font-size: 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 {font-size: 15px; margin: 10px 0 26px; } #itemDetail .text_box .detail_note {font-size: 15px;} #itemDetail .text_box .item_price_box {font-size: 13px; margin: 0 0 35px; } #itemDetail .text_box .item_price_box .bg_green{background: #3ab549; color: #fff; display: inline-block; padding: 6px; font-family: "ab-tombo-bold","sans-serif"; line-height: 1.25;} #itemDetail .text_box .item_price_box .teika {margin: 0 0 8px; } #itemDetail .text_box .item_price_box .teika .price_en, #itemDetail .text_box .item_price_box .time-sale .other .price_en {font-size: 30px; font-weight: 700;} #itemDetail .text_box .item_price_box .teika .en_mark {font-size: 24px; font-weight: 700;} #itemDetail .text_box .item_price_box .teika .en_mark + .price_en {margin: 0 0 0 -5px;} #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: #fff; left: 0; top: 50%; transform: translateY(-50%);} #itemDetail .text_box .item_price_box .tax { font-size: 20px; display: inline-block; transform: translateY(-2px); margin: 0 0 0 4px;} #itemDetail .text_box .item_price_box .tax-rate {margin: 0 0 0 8px; font-size: 16px; display: inline-block; transform: translateY(-2px); color: #3ab549;} #itemDetail .text_box .item_price_box .time-sale { color: #fff;} #itemDetail .text_box .item_price_box .bg_green .time-sale .price_en { font-size: 22px; font-weight: 700; position: relative; opacity: 0.88;} #itemDetail .text_box .item_price_box .bg_green .time-sale .en_mark {font-size: 19px; opacity: 0.88; font-weight: 700;} #itemDetail .text_box .item_price_box .time-sale .price_en:before {content: ""; display: block; width: calc(100% + 65px); height: 1px; position: absolute; background: #fff; left: -16px; top: 50%; transform: translateY(-50%); opacity: 0.88;} #itemDetail .text_box .item_price_box .time-sale .tax-rate {opacity: 0.88; transform: translateY(-3px); display: inline-block;} #itemDetail .text_box .item_price_box .time-sale .tax_through { margin: 0 8px 0 4px; font-size: 12px; opacity: 0.88; transform: translateY(-3px); display: inline-block;} #itemDetail .text_box .item_price_box .time-sale .other { display: block; color: #d54448; margin-top: -4px; font-size: 15px; font-family: "ab-tombo-bold","sans-serif";} #itemDetail .text_box .item_price_box .time-sale .other .en_mark {margin-left: 4px; font-size: 24px; font-weight: 700;} #itemDetail .text_box .item_price_box .time-sale .other .en_mark + .price_en {margin: 0 0 0 -3px;} #itemDetail .text_box .item_price_box .discount .price_en { font-weight: 700; font-size: 24px; } #itemDetail .text_box .item_price_box .discount .en_mark {font-size: 21px; font-weight: 700;} #itemDetail .text_box .item_price_box .discount .en_mark + .price_en {margin: 0 0 0 -3px;} #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: 18px; display: flex; align-items: center; flex-wrap: wrap;} #itemDetail .text_box .about_point p {margin: 0;} #itemDetail .text_box .about_point .inline_link {color: #2391a3; text-decoration: none; vertical-align: middle;} #itemDetail .text_box .sales_period ~ .detail_btn-area .cart_button_area { margin-top: 10px; } #itemDetail .text_box .sales_period {color: #d54448; margin: 10px 0 25px; font-size: 20px;} #itemDetail .text_box .cart_button_area {margin: 20px 0 12px; display: flex; gap: 17px; align-items: center; justify-content: space-between;} #itemDetail .text_box .cart_button_area .item_amount {width: 90px; margin: 0;} #itemDetail .text_box .cart_button_area .item_amount_active { margin: 0; } #itemDetail .text_box select { width: 100%; } #itemDetail .text_box .cart_button_area .item_amount select { margin: 2px 0 0; min-width: 90px; height: 60px; background: #fff url(../images/icon/select_arrow.svg) no-repeat right 6px top 28px;} #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% - 50px - 90px - (17px * 2));} #itemDetail .text_box .cart_button_area .btn_cart_area .button { max-width: 100%; width: 100%; height: 60px; text-align: center; font-size: 18px; display: flex; align-items: center; justify-content: center;} #itemDetail .text_box .cart_button_area .btn_cart_area .button img { margin-right: 8px; vertical-align: middle;} #itemDetail .text_box .cart_button_area .button .cart_txt { vertical-align: middle; margin: 0 -3px 0 2px;} #itemDetail .text_box .cart_button_area .wishlist_btn { width: 50px; margin: 0; } #itemDetail .text_box .cart_button_area .wishlist_btn img { display: block; } #itemDetail .text_box .soryo_discount {background: #d7f3ff; border-radius: 15px; color: #1d8dc1; text-align: center; font-size: 12px; padding: 6px; font-family: "ab-tombo-bold","sans-serif"; position: relative; z-index: 1; width: calc(100% - 50px - 90px - (17px * 2)); margin-left: 107px;} #itemDetail .text_box .soryo_discount::before{content: ""; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); border: 15px solid transparent; border-bottom: 15px solid #d7f3ff; border-right: 8px solid transparent; border-left: 8px solid transparent; z-index: -1; } #itemDetail .text_box .soryo_discount .soryo_discount_inner{display: flex; align-items: center; justify-content: center;} #itemDetail .text_box .soryo_discount .soryo_discount_inner > span{position: relative; padding-left:25px;} #itemDetail .text_box .soryo_discount .soryo_discount_inner > span::before{content: ""; background: url(../images/icon/icon_sparkling.svg) no-repeat center / contain; display: block; height: 21px; width: 18px; position: absolute; top: 50%; transform: translateY(-50%); left: 0;} #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 9px; } #itemDetail .text_box .stock_notice .button img { margin-right: 8px; vertical-align: middle;} #itemDetail .text_box .stock_notice .button .cart_txt { vertical-align: middle; margin: 0 -3px 0 2px; font-size: 16px; } #itemDetail .about_btns {margin: 20px 0; 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: 5px; padding-bottom: 5px; font-size: 16px;} #itemDetail .about_btns .button::after{width: 18px; height: 18px;} #itemDetail .about_btns .button .pc_s { display: none; } #itemDetail .share_contact_btns .share_btn {background-color: rgba(255, 255, 255,0.6); display: flex; justify-content: center; align-items: center; font-size: 16px; gap: 10px; margin: 0; border-radius: 20px; padding: 5px; max-width: 480px; margin: 0 auto;} #itemDetail .share_contact_btns .share_btn >a{display:flex;} #itemDetail .contact_area .share_btn a:first-child {margin: 0 0 0 2px;} #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 > 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; border: 1px solid#645dbe; border-radius: 10px; width: 100%; } #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; border: 1px solid #645dbe; border-radius: 10px; width: 100%; } #itemDetail .item-option .option_input-area textarea:focus { outline: none; } #itemDetail #item_explanation {line-height: 1.53; font-size: 18px; width: 100vw; padding: 0 0 46px; margin: 76px calc(50% - 50vw) 0; background: #fad9e7; z-index: 10; position: relative; margin-top: 300px; color: #904a9b;} #itemDetail #item_explanation::before{content:""; display: block; position: absolute; width: 656px; height: 199px; top: -199px; left:50%; transform: translateX(-50%); background: url(../images/topics_grogu.png) no-repeat center / 100%;} #main #itemDetail .item_explanation_inner.main_inner { max-width: 1200px; width: 100%; margin: 0 auto; } #itemDetail #item_explanation .item_explanation_inner .medium_title:first-of-type { margin-top: 0; font-size: 26px; } #itemDetail #item_explanation .section_title{position: absolute; left: 50%; transform: translateX(-50%); top:-64px; color: #904A9B; padding-top: 0; text-align: center;} #itemDetail #item_explanation .section_title .main img{display: block;} #itemDetail #item_explanation .item_explanation_inner .item_explanation_inner{padding-top: 80px;} #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: #dba900;} #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 32px; } .hinban:after, .jan-code:after { content: ','; } #itemDetail .dt_category_list {background:#fff; border: 4px solid #904a9b; box-shadow: 4px 4px #904a9b; margin-bottom: 30px;} #itemDetail .dt_category_list h3 { font-size: 18px; margin: 0 0 23px; display: inline-block; background: #904a9b; color: #fff; clip-path: polygon(0 0, 100% 0, 97% 100%, 0% 100%); font-family: "ab-tombo-bold","sans-serif"; padding: 12px 20px 12px 17px;} #itemDetail .dt_category_list h3 >span{display: flex; align-items: center;} #itemDetail .dt_category_list h3 img{margin-right: 18px;} #itemDetail .dt_category_list .breadcrumbs_category{padding: 0 23px 23px;} #itemDetail .dt_category_list ul {display: inline;} #itemDetail .dt_category_list li { display: inline-block; margin: 0 8px 10px 0;} #itemDetail .dt_category_list li a { border: 1px solid #675dc2 ; border-radius: 9999px; padding: 0 15px; white-space: nowrap; font-size: 18px; color: #675dc2; display: inline-block;} #itemDetail .detail_note { font-size: 16px; } #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;} #itemDetail .inline_link::before{height: 20px; width: 20px; background: url(../images/icon/navy/link_arrow.svg) no-repeat center/contain;} #itemAccessLog {background: url(../images/bg/bg_green.png) repeat center / 32px auto; position: relative; margin: 0; padding: 30px 0 70px;} #itemAccessLog .section_title{color: #3ab549; display: inline-block;} #itemAccessLog .section_title::after{content: ""; background: url(../images/checkedItems_grogu.png) no-repeat center / contain; display: block; height: 165px; width: 216px; position: absolute; top: 56%; transform: translateY(-50%); right: -230px;} #itemAccessLog .section_title img{display: block;} #itemAccessLog .main_inner{max-width:1200px;} #itemAccessLog .box .price .sale + .teika::before {background: #000;} #itemAccessLog .swiper-button-prev, #itemAccessLog .swiper-button-next {top: 50%;} #itemAccessLog .swiper-container-wrapper{margin-top: 30px;} .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: url(../images/bg/footer.png) no-repeat center/cover; color: #fff; width: 90%; max-width: 550px; max-height: 100vh; overflow-y: auto; box-sizing: border-box; padding: 32px 40px; position: relative; border: 1px solid rgb(219 169 0 / 60%);} .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: #fff; width: 240px; z-index: 10; display: none; border: 1px solid #4b5aa0;} #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: pointer; 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: pointer;} /* itemDetail - 商品詳細お気に入りリストに入った報告ポップアップ -------------------------------------------------------------*/ #itemDetail .wishlistSubmitButton {position: relative;} #itemDetail .wishlistSubmitButton .wishlistMessage {position: absolute; top: -158px; left: 50%; transform: translateX(-50%); padding: 32px 16px 10px; background: url(../images/bg/footer.png); width: 240px; z-index: 10; display: none; background: #fff; border: 1px solid #4b5aa0;} #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; color: #4b5aa0;} #itemDetail .wishlistSubmitButton .wishlistMessage .mainclose{ cursor: pointer; 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: pointer;} #itemDetail .wishlistSubmitButton .wishlistDelMessage{position: absolute; top: -100px; left: 50%; transform: translateX(-50%); padding: 32px 16px 10px; background: url(../images/bg/footer.png); width: 240px; z-index: 10; display: none; background: #fff; border: 1px solid #4b5aa0;} #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; color: #4b5aa0;} #itemDetail .wishlistSubmitButton .wishlistDelMessage .mainclose{cursor: pointer; 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: pointer;} /* 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;} /* item_detail$image - 別レイアウト -------------------------------------------------------------*/ #itemDetail.image_content .item_image_area.horizontal_wrapper { position: relative; padding: 0 0 57px; z-index: 1; } #itemDetail.image_content ul.item_icon_list {margin: 0 0 12px; z-index: 1;} #itemDetail.image_content #thumbnail-cont .item_name {position: relative; max-width: 888px; margin: 0 auto 26px; background: linear-gradient(0deg, rgba(219, 169, 0, 1) 23%, rgba(245, 217, 116, 1) 47%, rgba(219, 169, 0, 1) 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 24px; text-align: center; font-weight: normal;} #itemDetail.image_content #thumbnail-cont .item_name::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: 8px;} #itemDetail.image_content .item_wrap::before { content: ""; position: absolute; width: 100vw; height: 100%; margin: 0 calc(50% - 50vw); top: 0; left: 0; background: rgba(255, 255, 255, 0.4); z-index: 0; pointer-events: none; } #itemDetail.image_content .item_wrap .item_name { width: 100%; } #itemDetail.image_content .item_wrap .item_name {position: relative; max-width: 888px; margin: 0 auto 32px; background: linear-gradient(0deg, rgba(219, 169, 0, 1) 23%, rgba(245, 217, 116, 1) 47%, rgba(219, 169, 0, 1) 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 24px; text-align: center; font-weight: normal;} #itemDetail.image_content .item_wrap .item_name::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: 8px;} #itemDetail.image_content .item_wrap .item_info01 { position: relative; z-index: 1; width: 65.39%; } #itemDetail.image_content .item_wrap .item_info01 .taC { text-align: center !important; margin: 10px auto; } #itemDetail.image_content .item_wrap .text_box { position: relative; z-index: 1; } #itemDetail.image_content .text_box { background: transparent; } #itemDetail.image_content .text_box .about_point { display: block; } #itemDetail.image_content .detail_links { width: 100%; overflow: hidden; } #itemDetail.image_content .share_contact_btns .share_btn { z-index: 1; position: relative; } /* ================================================================= 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 {padding: 26px 32px 32px; margin: 0 0 38px; } #history .history_search .section_title { color: #4b5aa0; 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/select_arrow_white.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: pointer;} #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; opacity: .6; background: #4b5aa0; 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: 320px; display: flex; align-items: flex-start; justify-content: flex-end; gap: 12px; } #history .history_order .buttons .button { width: 160px; } #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: #4b5aa0; } #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 3px;color:#fff; display:inline-block; width: 100%; text-align: center; border-radius:11px; } #history .history_order .status_icon.red{background: #d54448; border-color: #fff; border: 1px solid #d54448;} #history .history_order .status_icon.white{background:transparent; border-color: #fff; color: #fff;} #history .history_order .status_icon.blue{background: #4941ab;} #history .history_order .status_icon.gold{background:#DBA900; color: #8A2B2B; } #history .history_order .status_icon.gold_line{background:transparent; color: #DBA900;} #history .history_order .status_icon.blue_line{color: #1d8dc1; background: #d7f3ff;} #history .history_order .status_icon.bluesky{ background-color: #1d8dc1;} #history .history_order .status_icon.blue{background:#4b5aa0; color: #fff; border: 1px solid #4b5aa0;} .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; color: #fff; max-width:550px; background: url(../images/bg/footer.png) no-repeat center/cover; padding: 0 40px 40px; border: 1px solid rgb(219 169 0 / 60%);} .nouhinsho_content .nouhinsho_head { background: rgba(255, 255, 255, .4); 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 { width: 130px; 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: rgba(255, 255, 255, .56); 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 rgba(219, 169, 0 ,.6); color: #DBA900; 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: #d54448;} #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: 25px;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; overflow: hidden; background: #fff; 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: pointer; 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: pointer;} /* =================================================================== 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_wrapper { background: url(../images/bg/newspaper_blue.jpg) repeat top left/1257px; } #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;} #subwindow.coupon_popup table td{border-bottom: 2px solid #4b5aa0;} /* ================================================================= 15.エラーページ 使用ファイル：common/messages.xhtml =================================================================*/ #error {margin: 0 0 24px; width: 100%; padding: 12px; color: #4b5aa0; background-color: #fff; border: 4px solid #d54448; box-shadow: 4px 4px 0px 0px #d54448;} #error table {border: none !important; margin: 0!important; box-shadow: none;} #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: #4b5aa0; vertical-align: middle; line-height: 150%; float: none; background-color: unset;} #contents_access_error #error{border: 4px solid #d54448; box-shadow: 4px 4px 0px 0px #d54448;} /* #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: #d54448!important; text-shadow: 0 0 #d54448;} #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; } #main #credit table.side_by_side tr{border-bottom: 2px solid #4b5aa0;} /* ================================================================= 17.お気に入り 使用ファイル：wishlist.xhtml 　　　　　　　wishlist_edit.xhtml =================================================================*/ #main:has(#wishList) {padding-bottom: 0;} #wishList .box h2 {font-size: 16px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #4b5aa0;} #wishList .box {display: flex; align-items: center; gap: 24px; margin: 10px 0 0; padding: 18px 23px 21px; background-color: #fff; box-shadow: 4px 4px 0px 0px #4b5aa0; border: 4px solid #4b5aa0; } #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: #4b5aa0; 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 #4b5aa0;} #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:#fff; box-shadow: 4px 4px 0px 0px #4b5aa0; border: 4px solid #4b5aa0; } #addressList .box:first-child { margin: 0 0 0;} #addressList .box .text {flex: 1; margin-right: 20px; width: calc(100% - 182px - 24px); } #addressList .box .button_area {width: 200px; max-width: 182px; 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; line-height: 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 50px; display: flex; align-items: stretch; width: 100%; text-align: center; position: relative; overflow: hidden; border: 4px solid #4b5aa0; box-shadow: 4px 4px 0px 0px #4b5aa0; background: #fff;} #member.mypage .account_box #selectedHouseMypage {display: none;} #member.mypage .account_box p {margin: 0;} #member.mypage .account_box .account_area {padding: 0; width: 100%; text-align: left; color: #645dbe;} /* #member.mypage .account_box .account_area.gry {background: #9D2235;} #member.mypage .account_box .account_area.sly {background: #28724F;} #member.mypage .account_box .account_area.rav {background: #003DA5;} #member.mypage .account_box .account_area.huf {background: #FED141;} */ /* #member.mypage .account_box .account_area.non {background: #fff;} */ #member.mypage .account_box .account_area .section_title {margin: 0; font-size: 24px; padding: 12px 20px 12px 17px; display: inline-block; background: #4b5aa0; color: #fff; font-family: "ab-tombo-bold", "sans-serif"; clip-path: polygon(0 0, 100% 0, 97% 100%, 0% 100%);} #member.mypage .account_box .account_area .section_title .main{margin-right: 15px; font-family: "showcard-gothic", "sans-serif";} #member.mypage .account_box .account_area .section_title::before {width: 64px;} #member.mypage .account_box .account_area .section_title>span{display: flex; align-items: center;} #member.mypage .account_box .account_area .account_area_wrapper{padding: 40px; text-align: center;} /* #member.mypage .account_box .account_area .section_title::after {margin: 12px auto 4px; content: ""; display: block; height: 100px;} */ /* #member.mypage .account_box .account_area.gry .section_title::after {background: url(../images/gryffindor.png) no-repeat center/contain;} #member.mypage .account_box .account_area.sly .section_title::after {background: url(../images/slytherin.png) no-repeat center/contain;} #member.mypage .account_box .account_area.rav .section_title::after {background: ufrl(../images/ravenclaw.png) no-repeat center/contain;} */ /* #member.mypage .account_box .account_area.huf .section_title .main, #member.mypage .account_box .account_area.huf .section_title .inner {color: #dba900; background: none; -webkit-text-fill-color: unset;} #member.mypage .account_box .account_area.huf .section_title::before {background-image: url(../images/icon/section_title_deco_nograd.svg);} #member.mypage .account_box .account_area.huf .section_title::after {background: url(../images/hufflepuff.png) no-repeat center/contain;} */ /* #member.mypage .account_box .account_area.non .section_title::after {background: url(../images/mypage_grogu.png) no-repeat center/contain;} */ #member.mypage .account_box .account_area .section_title .inner {margin: 0; font-size: 12px; font-family: "ab-tombo-bold", "sans-serif"; } #member.mypage .account_box .account_area .name {margin: 0 0 8px; font-size: 16px;} #member.mypage .account_box .account_area .name::before{background: url(../images/mypage_grogu.png) no-repeat center/contain; margin: 12px auto 4px; content: ""; display: block; height: 100px;} #member.mypage .account_box #crosspointArea {padding: 74px 16px 43px; min-width: 50%; max-width: 50%; color: #645dbe; text-align: center; align-items: end; display: flex; justify-content: center;} #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 {margin: 24px 0; display: flex; gap: 12px; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;} #member.mypage .member_menu li {width: calc((100% - 24px) / 3);} #member.mypage .member_menu li .info_box {height: 100%; min-height: 150px; border: 4px solid #4b5aa0; box-shadow: 4px 4px 0px 0px #4b5aa0; background: #fff;} #member.mypage .member_menu li .info_box dt {text-align: center;} #member.mypage .member_menu li .info_box dd {height: calc(100% - 37px);} #member.mypage .logout .button {width: 180px; font-size: 14px;} #member.mypage .coupon_area {margin-bottom: 0;} #member.mypage .coupon_area table th.title {width: 284px; font-weight: bold;} #member.mypage .coupon_area table th:not(.title) {width: unset;} #member.mypage .coupon_area a {text-decoration: underline;} #member.mypage .coupon_area table td{border-bottom: 2px solid #4b5aa0;} #member.mypage .link_list a{color: #4b5aa0;} /* ================================================================= 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: url(../images/border_white_l.svg) no-repeat center/cover; opacity: .3; } #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: 4px;} #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: #4b5aa0; 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 #4b5aa0; } #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: #d54448; } #pointRecord .record_list td .point { font-size: 130%; color: #4b5aa0; 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: #4b5aa0; color: #fff; 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: #4b5aa0; margin-bottom: 5px; } #main .wishlist.present .appeal { font-size: 14px; } #main .wishlist.present .present_comment { background-color: rgba(0, 0, 0, 0.24); 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: #d54448;} #main .present_content .text {padding: 0; width: 50%; position: relative; background: rgba(255,255,255,0.6);; 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; font-family: 'Roboto', 'Noto Sans JP', sans-serif;} #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:#4b5aa0; 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: #4b5aa0; color: #fff;;} #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: #4b5aa0; 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: #d54448; 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; } #main .present_content .td_border td{border-bottom: 2px solid #4b5aa0;} #main .wishlist.present{margin-bottom: 20px;} /* ================================================================= プレゼントリスト =================================================================*/ #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: rgba(0, 0, 0, 0.24);} #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: #d54448; } #main .apply_text a { 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: #d54448 !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; } /* 1200px以下 - コンテンツ幅以下 -------------------------------------------------------------*/ @media screen and (max-width: 1200px) and (min-width: 769px) { /* #container {padding: 79px 0 0;} */ #main .main_inner.wide {padding: 0 8px;} .section .section_inner,#top .section .section_inner{padding: 0 16px;} /* パンくず -------------------------------------------------------------*/ #breadcrumbs { margin: -78px 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;} /* ================================================================= トップページ =================================================================*/ /* feature - 特集 -------------------------------------------------------------*/ #top #feature .swiper-container {width: 96vw;} /* キーワード -------------------------------------------------------------*/ #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 .slick-arrow, #awoo-favorite-related-products .related-wrapper .slick-arrow, #awoo-not-found-products .related-wrapper .slick-arrow, #awoo-related-products .related-wrapper .slick-arrow {left: -13px;} #awoo-keyword-popular-products .related-wrapper .slick-arrow.slick-next, #awoo-favorite-related-products .related-wrapper .slick-arrow.slick-next, #awoo-not-found-products .related-wrapper .slick-arrow.slick-next, #awoo-related-products .related-wrapper .slick-arrow.slick-next {right: 2px;} /* カート -------------------------------------------------------------*/ .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: 10px;} /* itemListDetail - 商品詳細一覧・プレゼント一覧 -------------------------------------------------------------*/ #itemList .pageguide_wrapper .pageguide {padding: 0;} #itemList #categoryInfo {gap: 16px;} #categoryInfo .img_box {min-height: 255px;} /* お客様登録のメリット -------------------------------------------------------------*/ #ext.membership .title_section p img { max-width: 300px; } #ext.membership .mypage .inner { width: calc(100% - 32px); } /* お店について -------------------------------------------------------------*/ #ext.about .about_last:after {left: 5vw;} /* 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 .bg_white{padding: 24px 16px;} #itemDetail .text_box .about_point { flex-direction: column; gap: 3px; align-items: flex-start; } #itemDetail .text_box .time_sale { margin-left: -16px; width: calc(100% + 32px); padding: 16px 16px 10px; } #itemAccessLog { padding-bottom: 140px; } #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 .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; } } /* 890px以下 - 狭いコンテンツ幅以下 -------------------------------------------------------------*/ @media screen and (max-width: 922px) { /* テーブルデザイン -------------------------------------------------------------*/ /* 入力形テーブル */ #main .input_table_wrapper {padding-left: 16px; padding-right: 16px;} } /* 769px以上 - スマホ以外 -------------------------------------------------------------*/ @media screen and (min-width: 769px){ /* 共通スタイル -------------------------------------------------------------*/ /* ボタンデザイン -------------------------------------------------------------*/ a.button:hover ,.button:hover{background-position:right center;} .button.positive:hover {opacity: 1; background: #172675;} .button.negative:hover {opacity: .75; background: #fff;} .inline_link:hover::before {left: 2px;} .link_list a:hover:before {left: 2px;} /* 画像の縦横比調整 -------------------------------------------------------------*/ .box form:hover .img_box img, .box a:hover .img_box img, .box a.img_box:hover img {transform: scale(1.1);} .swiper-button-prev:hover:after, .swiper-button-next:hover:after {opacity: 1;} /* ================================================================= 商品一覧 =================================================================*/ #itemList .item_list .box:has(a):hover .img_box img {transform: scale(1.1);} /* narrowListCategory - 絞り込みカテゴリ -------------------------------------------------------------*/ #selectedCategory .selected_category {cursor: pointer;} /* ================================================================= トップページ =================================================================*/ /* ブランドコンセプト -------------------------------------------------------------*/ #top #concept .text_box a:hover::after {right: 0;} /* 特集 -------------------------------------------------------------*/ #top #feature .swiper-wrapper .box.swiper-slide-duplicate {display: none;} #top #feature .swiper-wrapper .box .img_box:hover img {transform: scale(1.1);} /* 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 {transform: scale(1.1);} #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} #awoo-keyword-popular-tags .awoo-tag:hover, #awoo-classify .awoo-tag:hover {background: #000;} /* キーワード -------------------------------------------------------------*/ #top #keyword .awoo-tag:hover {background: #675dc2; color: #fff;} /* item_detail$image - 別レイアウト -------------------------------------------------------------*/ #itemDetail.image_content .item_image_area .thumbs { width: 100%; } #itemDetail.image_content .item_image_area.horizontal_wrapper { width: 100vw; margin: 0 calc(50% - 50vw) 0; padding: 0 6vw 56px; } #itemDetail.image_content .item_image_area.horizontal_wrapper::before { content: ""; position: absolute; width: 100vw; height: 100%; margin: 0 calc(50% - 50vw); top: 0; left: 0; background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.4) 100%); z-index: 0; pointer-events: none;} #itemDetail.image_content .item_image_area.horizontal_wrapper .slider-container { display: flex; align-items: center; justify-content: space-between; gap: 32px; } #itemDetail.image_content .item_image_area.horizontal_wrapper::after {content: ""; position: absolute; width: calc(100% - 12vw); height: 1px; background: url(../images/border_yellow.svg) no-repeat left/cover; bottom: 0; left: 50%; transform: translateX(-50%); } #itemDetail.image_content .item_image_area.horizontal_wrapper .item-detail-slider_inner { width: calc((100% - 32px) / 2); } #itemDetail.image_content .item_image_area.horizontal_wrapper #thumbnail-cont { flex: 1; width: calc((100% - 32px) / 2); } #itemDetail.image_content .item_image_area .thumbs { margin: 0; } #itemDetail.image_content .item_image_area.horizontal_wrapper #thumbnail-cont .slick-track { transform:unset!important; transform: unset !important; width: 100% !important; display: flex; justify-content: flex-start; flex-flow: row wrap; gap: 12px; } #itemDetail.image_content .item_image_area.horizontal_wrapper #thumbnail-cont .slick-slide { display: block!important; float: none !important; width: calc((100% - (12px * 4)) / 5) !important; max-width: none; } #itemDetail.image_content .item_image_area.horizontal_wrapper #thumbnail-cont .slick-next, #itemDetail.image_content .item_image_area.horizontal_wrapper #thumbnail-cont .slick-prev { display: none !important; } #itemDetail.image_content .item_image_area.horizontal_wrapper #thumbnail-cont .slick-track::before, .slick-track::after { display: none !important; } #itemDetail.image_content .item_image_area.horizontal_wrapper .thumbs .img-item { margin: 0; } #itemDetail.image_content .item_wrap { flex-wrap: wrap; max-width: 890px; margin: auto; position: relative; z-index: 1; padding-top: 56px; padding-bottom: 150px; position: relative; } #itemDetail.image_content .item_wrap .text_box { position: sticky; top: 120px; z-index: 1; width: calc( 100% - 65.39% - 32px); padding: 0 0 160px; background: transparent; } #itemDetail.image_content .text_box .time_sale { width: 100%; margin-left: 0; padding: 12px 16px 12px; } #itemDetail.image_content .text_box .item_price_box .teika .information { display: block; margin-top: 5px; } #itemDetail.image_content .text_box .item_price_box { margin: 6px 0 30px; } #itemDetail.image_content .text_box .sales_period { padding-left: 75px; position: relative; } #itemDetail.image_content .text_box .sales_period .sales_period_ttl { width: 80px; position: absolute; top: 0; left: 0; } #itemDetail.image_content .text_box .sales_period .sales_end { display: block; } #itemDetail.image_content .text_box .sales_period ~ .detail_btn-area .cart_button_area { margin-top: 2px; } #itemDetail.image_content .text_box .cart_button_area .item_amount { width: 100%; } #itemDetail.image_content .text_box .cart_button_area .item_amount select { width: 100%; max-width: 100%; height: 40px; padding: 7px 24px 7px 10px; background: #000 url(../images/icon/select_arrow_white.svg) no-repeat right 10px top 50%; } #itemDetail.image_content .text_box .cart_button_area { flex-wrap: wrap; } #itemDetail.image_content .text_box .cart_button_area .item_amount + .btn_cart_area { width: calc(100% - 36px - 20px); } #itemDetail.image_content .detail_links .about_btns { margin: 0 0 30px; } #itemDetail.image_content .detail_links .about_btns li {width: 100%; max-width: calc((100% - (8px * 3)) / 4); height: 36px; } #itemDetail.image_content .detail_links .about_btns li a { font-size: 14px; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2; } #itemDetail.image_content .detail_links .about_btns li a span { position: relative; line-height: 1.25; display: block; } #itemDetail.image_content .text_box .cart_button_area .btn_cart_area .cartSubmitButton .button:disabled img { display: inline-block; margin-left: -10px; } #itemDetail.image_content .text_box .cart_button_area .btn_cart_area .cartSubmitButton .button:disabled .cart_txt { line-height: 1.285714285714286; font-size: 14px; width: 125px; display: inline-block; } #itemDetail.image_content form + #item_explanation { margin-top: -80px; } #cartFlow .notice_area a:hover { opacity: .8;} #main .cart_table .img_box:hover img {transform: scale(1.1);} #wishList .box .text .img_box:hover img {transform: scale(1.1);} /*ラッピング*/ #ds-gift-popup .ds-gift-option label.box {cursor: pointer;} #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: pointer;} /* 新規会員登録 （768px以下） -------------------------------------------------------------*/ #memberInput #selectHouse > span label {cursor: pointer;} #memberInput #selectHouse > span label:hover {opacity: 1;} /* 6.extファイル用 （768px以下） -------------------------------------------------------------*/ #ext p a:not(.button):hover { color: #F0B323; } #ext.guide .guide_index li a:hover {opacity: .75;} #ext.guide .guide_img a:hover { opacity: .8;} #ext .feature_list .feature_item .img_box:hover img {transform: scale(1.1);} #awoo-category-page .products-wrapper-v2 .product__href:hover .product-image {background-size: 110%;} #awoo-category-page .suggestion-tag-list-container-v2 .awoo-tag:hover {background: #000;} #awoo-search-result-page .products-wrapper-v2 .product__href:hover .product-image {background-size: 110%;} #awoo-search-result-page .suggestion-tag-wrapper .awoo-tag:hover {background: #000;} #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: 60px 0 0;} #main {padding: 48px 0;} #main .main_inner.wide {padding: 0 8px;} section.section {margin: 40px 0;} .section .section_inner {padding: 0;} /* タイトルデザイン（768px以下） -------------------------------------------------------------*/ .large_title {font-size: 22px; margin: 0 8px 40px;} .medium_title {margin: 40px 0 60px; font-size: 20px; 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;} a.button, .button{border:1px solid #fff} a.negative, .negative{border: 1px solid #4B5A9F;} .button_area {margin: 32px auto; flex-direction: column; align-items: center; width: 100%; max-width: 320px; text-align: center;} .button_area .multi_wrapper {width: 100%; gap: 12px;} .button_area .multi_wrapper .button {width: 100%; max-width: 314px;} .button_area .button {display: inline-block; } .not_click, .button:disabled{border: none;} .button_area.back .back {max-width: 160px;} .button_area.reverse {flex-direction: column-reverse;} /* フォーム類部品 -------------------------------------------------------------*/ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea {padding: 7px 7px 8px;} /* パンくずリスト（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: 15px 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% - 1px); } #breadcrumbs.wide { padding: 0; } #breadcrumbs.wide .breadcrumbs_list { padding-left: 8px; padding-right: 8px; } /* 全件表示、表示数セレクトボックス（768px以下） -------------------------------------------------------------*/ #main .pageguide { flex-wrap: wrap; gap: 12px;} #itemList .pageguide{font-size: 11px; justify-content: start;} #main #itemList .pageguide select{font-size: 11px; padding: 8px 24px 8px 10px; background: #fff url(../images/icon/select_arrow.svg) no-repeat right 5px top 15px; background-size: 10px 5px;} #main .pagetotal { width: 100%; font-size: 12px; margin: 0; } #main .pagenavi { width: 100%; } #main .select_wrapper{gap: 5px; margin-left: 0;} /* テーブル （768px以下） -------------------------------------------------------------*/ #main th {padding: 12px;} #main th.title {width: 120px;} #main td {padding: 12px;} /* テーブル（項目見出し横並び - SP時に各行縦並び） （768px以下） -------------------------------------------------------------*/ #main table{border: 2px solid #4b5aa0;} /* #main table tr:nth-of-type(n+2){border: none;} */ #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: 32px; width: 100%; border: none; box-shadow: none;} #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;} #main table.side_by_side .title_row {display: none;} #main table.side_by_side .data_row { border-top: 0; position: relative; border: 2px solid #4b5aa0; box-shadow: 4px 4px 0px 0px #4b5aa0;} /* #main table.side_by_side .data_row::after { content:""; width: 100%; height: 1px; background: rgba(255,255,255,.32); position: absolute; bottom: -16px; left: 0; } */ #main table.side_by_side .data_row:last-of-type::after { content: unset; background: transparent; } #main table.side_by_side .data_row dt {display: block; padding: 9px 12px; color: #fff; background: #4b5aa0; font-weight: bold; text-align: center;} #main table.side_by_side .data_row dd {padding: 9px 12px; } /* カートフローチャート -------------------------------------------------------------*/ .cart_step {margin-bottom: 32px; gap: 32px 22px;} .cart_step li {font-size: 10px; width: 50px;} .cart_step li:after{top:10px; left: -20px;} .cart_step li .no {margin: 0 auto 2px; width: 32px; height: 32px; font-size: 18px;} .cart_step li:nth-child(n + 3) .no {font-size: 18px; line-height: 25px;} .cart_step li:nth-child(6) .no {font-size: 18px; line-height: 34px;} .cart_step li:nth-child(7) .no {font-size: 18px; line-height: 28px;} .cart_step li.active .no::before {width: 28px; height: 28px;} .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: 18px;} .small_title {font-size: 16px;} .section .section_title {margin: 0 0 32px; padding: 34px 0 0; font-size: 31px;} .section .section_title::before {width: 69px; height: 30px;} .section .section_title .inner {font-size: 15px; margin: 9px 0 0;} /* テーブルデザイン -------------------------------------------------------------*/ #main .input_table_wrapper {padding: 48px 16px 56px; margin: 40px calc(50% - 50vw);} #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%;} #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;} /* notice_area -------------------------------------------------------------*/ .notice_area { padding: 16px 16px 4px;} .login_boxes + .notice_area {margin: 0;} /* 商品一覧、商品詳細ページアイコン類 -------------------------------------------------------------*/ .item_icon {padding: 0 15px 1px; font-size: 9px; line-height: 15px;} .item_new {font-size: 12px;width:44px; left: -4px; top:-5px;} .item_new::before{width:42px; height:40px;} .item_soldout {font-size: 18px;} /* 商品一覧のスタイル -------------------------------------------------------------*/ .item_list {column-gap: 16px; row-gap: 25px;} .item_list .box, #itemList .item_list .box {width: calc((100% - 16px) / 2);} .item_list .box .text_box .name {font-size: 13px; margin-bottom: 8px;} .item_list .box .price{bottom:-18px; font-size: 12px; left: -8px;} .item_list .box .price .teika:has(+ .sale) {font-size: 10px;} .item_list .box .img_box{border: 2px solid #3ab549;} .swiper-button-prev, .swiper-button-next {width: 32px; height: 32px;} .swiper-button-prev::after, .swiper-button-next::after {width: 32px; height: 32px;} .swiper-button-prev {left: 4px;} .swiper-button-next {right: 4px; transform: rotate(180deg);} .swiper-container{padding: 22px 16px; margin:0 calc(50% - 50vw);} .swiper-button-prev,.swiper-button-next{display: none;} /* itemDetail - 商品詳細・プレゼント詳細 -------------------------------------------------------------*/ #main #itemDetail.main_inner { margin-top: -37px; padding: 32px 16px 0; } #itemDetail .item_wrap { flex-wrap: wrap; gap: 0; } #itemDetail .item_image_area { width: 100%; } #itemDetail .text_box { width: 100%; } #itemDetail .item_new::before{width: 57px; height: 55px;} #itemDetail #item-detail-slider {width: 100vw;margin: 0 -19px 0 -15px;padding: 0 19px 0 15px;} #itemDetail .item-detail-slider_inner { padding: 0 0; overflow: visible; } #itemDetail .item_image_area .main-slider{border: 2px solid #3ab549;} #itemDetail .item_image_area .thumbs .img-item{border: 2px solid #3ab549;} #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 .thumbs .slick-prev, #itemDetail .item_image_area .thumbs .slick-next { display: none !important; } #itemDetail .item-detail-slider_inner .item_new { font-size: 13px; padding: 35px 0 8px; width: 108px; top: -17px; left:-8px; } #itemDetail .item_image_area .thumbs { width: 100vw; margin: 14px -19px 0 -15px; } #itemDetail .item_image_area .thumbs .slick-list { margin-left: 12px; } #itemDetail .item_image_area .thumbs .img-item { margin: 0 4px; } #itemDetail .text_box { width: 100vw; margin: 0 calc(50% - 50vw) 0; padding: 0 16px 75px;} #itemDetail .bg_white{padding: 15px 12px 24px;} #itemDetail .inline_link::before{width: 14px; height: 14px;} #itemDetail .inline_link{padding-left: 20px;} #itemDetail .text_box .sales_period{font-size: 15px; margin-bottom: 16px;} #itemDetail .text_box .cart_button_area{gap: 10px;} #itemDetail .text_box .cart_button_area .item_amount{width: 60px;} #itemDetail .text_box .cart_button_area .item_amount select{height: 45px; background: #fff url(../images/icon/select_arrow.svg) no-repeat right 6px top 20px; font-size: 15px;} #itemDetail .text_box .cart_button_area .btn_cart_area .button{height: 45px;} #itemDetail .text_box .item_icon_list { gap: 6px;} #itemDetail .text_box > .item_icon_list{margin-bottom: 14px;} #itemDetail .text_box .item_icon_list .item_icon { min-width: 36px; font-size: 12px; padding: 2px 15px;} #itemDetail .text_box .time_sale { font-size: 15px; padding: 14px 32px 10px; margin: 16px 0 22px -32px; } #itemDetail .text_box .time_sale .time_sale_period { font-size: 13px; } #itemDetail .text_box .item_name { font-size: 18px; margin: 0 0 13px; padding-bottom: 16px;} #itemDetail .text_box .item_info01 { font-size: 13px; margin: 17px 0 13px; } #itemDetail .text_box .item_price_box .tax-rate{font-size: 13px;} #itemDetail .text_box .item_price_box { margin: 0 0 21px; } #itemDetail .text_box .item_price_box {font-size: 12px;} #itemDetail .text_box .item_price_box .teika .price_en, #itemDetail .text_box .item_price_box .time-sale .other .price_en { font-size: 21px; } #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: 22px;} #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: 12px;} #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: 12px;} #itemDetail .text_box .about_point { font-size: 13px; flex-direction: column; gap: 5px; align-items: flex-start; } #itemDetail .text_box .cart_button_area .item_amount select { min-width: 55px; } #itemDetail .item-option > div > label { font-size: 13px; } #itemDetail .item-option .option_input-area input{width: auto;} #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: 16px; } #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 .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 { line-height: 1.285714285714286; font-size: 14px; width: 125px; display: inline-block; } #itemDetail .text_box .cart_button_area .wishlist_btn { width: 35px; } /* #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;} .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: 15px 0 12px; } #itemDetail .about_btns ul { gap: 5px 8px; } #itemDetail .about_btns li { max-width: calc((100% - 8px) / 2); } #itemDetail .about_btns .button { padding: 7px 17px 7px 6px; font-size: 11px; } #itemDetail .about_btns .button.link::after { width: 14px; height: 14px; right: 8px; } #itemDetail .share_contact_btns .share_btn { font-size: 12px; } #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 { margin-top: 0;} #itemDetail #item_explanation { font-size: 13px; border-top-left-radius: 50% 25vw; border-top-right-radius: 50% 25vw; padding-bottom: 30px;} #itemDetail #item_explanation .section_title{padding-top: 45px; top:0;} /* #itemDetail #item_explanation .section_title .inner{margin: 0;} */ #itemDetail #item_explanation .section_title .main img{width: 192px; margin: 0 auto;} #itemDetail #item_explanation::before{width: 186px; height: 50px; top: -39px; background: url(../images/topics_sp_grogu.png) no-repeat center / 100%;} #itemDetail .text_box input[type="checkbox"] + label { margin: 6px 16px 6px 28px; } #itemDetail .text_box .soryo_discount { font-size: 12px; width: 100%; margin: 0 auto;} #itemDetail #item_explanation .variation-info, #itemDetail #item_explanation .variation-inner { font-size: 13px; margin: 0 0 30px; } #itemDetail #item_explanation .item_explanation_inner .item_explanation_inner{padding-top: 120px;} #itemDetail .dt_category_list { margin: 34px 0 38px; border: 2px solid #904a9b;} #itemDetail .dt_category_list h3 img{width:132px; margin-right: 8px;} #itemDetail .dt_category_list h3 { font-size: 16px; } #itemDetail .dt_category_list li{margin: 0 4px 6px 0;} #itemDetail .dt_category_list li a { padding: 1px 13px 1px; font-size: 11px;} #itemDetail .dt_category_list .breadcrumbs_category{padding: 0 13px 13px;} #itemDetail .detail_note { font-size: 12px; } #itemDetail .detail_note li { margin: 0 0 3px; } .detail .recommend_wrapper{padding: 16px 0;} .detail .swiper-container{padding: 22px 16px;} .detail #main .main_inner{padding:0 10px;} #itemAccessLog {padding: 16px 0 30px;} #itemAccessLog .section_title img{width: 232px;} #itemAccessLog::after { clip-path: polygon(0 0, 100% 0, 100% 46%, 0 46%); } #itemAccessLog .section_title::after{content: ""; background: url(../images/checkedItems_sp_grogu.png) no-repeat center / contain; display: block; height: 95px; width: 125px; position: absolute; top: 50%; transform: translateY(-50%); right: -135px;} #main #recommend .item_list { gap: 0; flex-wrap: nowrap; } #main #itemAccessLog .item_list { gap: 0; flex-wrap: nowrap; } #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 .box a h3 {font-size: 24px; padding: 6px 3px 0 0;} #itemAccessLog .swiper-button-prev, #itemAccessLog .swiper-button-next {top: calc((100% - 51px) / 2);} /* 別レイアウト（768px以下） -------------------------------------------------------------*/ #itemDetail.image_content .item_wrap { padding-bottom: 75px;} #itemDetail.image_content .item_wrap .item_info01 { width: 100%; } #itemDetail.image_content .item_wrap .text_box { width: 100%; margin: 11px 0 0; padding: 16px 0 0px; } #itemDetail.image_content .item_wrap .text_box::before {content: ""; display: block; height: 1px; width: 100%; top: 0; opacity: 0.6; left: 0; position: absolute; background: url(../images/border_yellow.svg) no-repeat center/cover;} #itemDetail.image_content .item_wrap .item_name { font-size: 20px; text-align: left; margin: 0 0 38px; width: 100%; } #itemDetail.image_content .item_image_area.horizontal_wrapper { padding: 0 0 29px; } #itemDetail.image_content .about_btns { margin: 27px 0 20px; } #itemDetail.image_content .about_btns ul { gap: 5px; } /* 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 { 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;} #ext .feature_list .feature_item .img_box{border: 2px solid #4b5aa0;} /* 特商（768px以下） -------------------------------------------------------------*/ #ext.tokushou .tokushou_table th { min-width: 0; padding: 10px 12px; width:100%; display: block; } #ext.tokushou .tokushou_table td { padding: 16px 12px; width:100%; display: block; font-size: 14px; border-bottom: none;} #ext.tokushou .tokushou_table td .small_title { font-size: 15px; } #ext.tokushou .tokushou_table td .x_small_title { font-size: 14px; } /* お客様登録のメリット -------------------------------------------------------------*/ #ext.membership .membership_title { font-size: 18px; } #ext.membership .title_section p img { max-width: 250px; } #ext.membership .title_section .logo {margin: 0 0 40px;} #ext.membership .inner { flex-direction: column-reverse; gap: 24px; } #ext.membership .inner .text { width: 100%; } #ext.membership .inner .text h3 { margin-bottom: 32px; } #ext.membership .merit, #ext.membership .house, #ext.membership .card { padding-top: 24px; padding-bottom: 24px; } #ext.membership .merit img, #ext.membership .house img, #ext.membership .card img { max-width: 250px; } #ext.membership .house { margin-bottom: 0; } #ext.membership .mypage .inner { width: calc(100% - 32px); flex-direction: column; padding: 16px 16px; gap: 12px;} #ext.membership .mypage .membership_normal_title { font-size: 17px; } #ext.membership .mypage .inner ul { flex-wrap: wrap; } #ext.membership .mypage .inner ul li { width: 100%; } #ext.membership .enjoy { padding-top: 24px; padding-bottom: 24px; } /* お店について -------------------------------------------------------------*/ #ext.about .about_top {height: calc(100vh - 86px); padding-bottom: 64px;} #ext.about .about_top_inner {font-size: 16px;} #ext.about .about_top_inner .large_title {font-size: 30px; } #ext.about .about_top .large_title::after {width: 69px; height: 30px;} #ext.about .about_lead .text_box {padding-bottom: 64px; padding-top: 128px;} #ext.about .about_lead .text_box p {font-size: 16px;} #ext.about .about_main p.main_text_section {margin: 0 0 45px;} #ext.about .about_main .concept_text {font-size: 18px; margin: 8px 0;} #ext.about .about_last {margin: 130px 0 0;} #ext.about .about_last:after {width: 88px; height: 95px; top: -90px; left: 5vw;} /* awoo AI item_list_awoo.xhtml -------------------------------------------------------------*/ #awoo-category-page {padding: 0 8px;} #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 {padding: 0 4px;} #awoo-category-page .suggestion-tag-dropdown-v2 {margin: 0 0 24px; font-size: 26px;} #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 12px 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: 0;} #awoo-category-page .products-wrapper-v2 {gap: 8px; grid-template-columns: repeat(2, 1fr);} #awoo-category-page .products-wrapper-v2 .product__name {font-size: 13px;} #awoo-category-page .products-wrapper-v2 .product__price .product-price {font-size: 15px;} #awoo-category-page .right-block-v2 {padding: 15px 8px;} #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: 32px; height: 36px; font-size: 12px;} /* awoo AI search_result_awoo.xhtml -------------------------------------------------------------*/ .main_inner:has(#awoo-search-result-page) {padding: 0 8px;} #awoo-search-result-page .suggestion-tag-wrapper .suggestion-tag-title {margin: 0 0 24px; font-size: 26px;} #awoo-search-result-page .suggestion-tag-wrapper .suggestion-tag-title:after {font-size: 12px;} #awoo-search-result-page .suggestion-tag-wrapper .suggestion-tag-title:before {position: absolute; width: 100%; top: 37px;} #awoo-search-result-page .suggestion-tag {padding: 48px 12px 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 {padding: 15px 8px; 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: 8px; grid-template-columns: repeat(2, 1fr);} #awoo-search-result-page .products-wrapper-v2 .product__name {font-size: 13px;} #awoo-search-result-page .products-wrapper-v2 .product__price .product-price {font-size: 15px;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination {margin-bottom: 56px;} #awoo-search-result-page .pagination-wrapper-v2 .awoo-pagination li {width: 32px; height: 36px; font-size: 12px;} #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;} /* 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: #fff; } #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 .history_order .status_icon{padding: 2px 4px;} /* カート情報 */ #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:#fff; } #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: 0 auto; background: #fff; font-size: 13px; padding: 16px 16px 16px; border-top: 2px solid #4b5aa0;} #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; display: block; } #main #credit table.side_by_side td.button_area dd { padding: 2px 12px 0; margin: 0 auto; max-width: 380px; } #main #credit table.side_by_side td.button_area.delete {padding: 8px 0 16px; margin:0;} #main #credit table.side_by_side td:has(+ .delete ) {margin: 0;} /* 18.アドレス帳 （768px以下） -------------------------------------------------------------*/ #addressList h3 { font-size: 15px; } #addressList h3 .kana { font-size: 12px; } #addressList .box {display: block; border: 2px solid #4b5aa0;} #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以下） -------------------------------------------------------------*/ .main_inner .box_wrapper{border: 2px solid #4b5aa0;} #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: 48px 0;} #top .section .section_inner {padding: 0 10px;} #top .button_area .multi_wrapper{gap: 28px;} #top .button_area .button {max-width: 181px; width:181px;} #top a.button, .button{padding:11px;} #top .button.medium,#top input.medium{font-size: 14px;} /* importantInfo - 重要なお知らせ -------------------------------------------------------------*/ #top #importantInfo{font-size: 11px;} #top #importantInfo a {padding: 7px 16px 6px; text-align: left;} /* topics - トピックス -------------------------------------------------------------*/ #top #topics{padding-top:72px; padding-bottom: 10px; margin:-180px 0 0; border-top-left-radius: 50% 25vw; border-top-right-radius: 50% 25vw;} #top #topics::before{width:186px; height:186px; top:-107px; background: url(../images/topics_sp_grogu.png) no-repeat center / 100%;} #top #topics .section_title{width:100%; padding-top: 45px; top:0;} #top #topics .section_title img{width: 213px; margin: 0 auto;} #top #topics .section_title .inner{margin: 10px 0 0;} #top #topics .tabs li{font-size: 11px; padding:1px 8px 1px 20px;} #top #topics .tabs li::after{width:12px; height:12px; left:6px;} #top #topics .section_inner {padding: 40px 16px 0;} #top #topics .tabs {flex-wrap: nowrap; overflow: auto; padding: 0 16px; margin-left: -16px; width: calc(100% + 32px); margin-bottom: 25px;} #top #topics .topics_list .box {width: 100%;} #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;} #top #topics .topics_list .info {font-size: 14px;} #top #topics .topics_list .info .item_icon {padding: 0 5px; font-size: 10px; line-height: 19px;} #top #topics .topics_list .text {font-size: 12px;} #top #topics .inline_link {font-size: 13px;} /* information - 臨時トピックス768 -------------------------------------------------------------*/ #top #information{padding-top:72px; padding-bottom: 10px; margin:-180px 0 0; border-top-left-radius: 50% 25vw; border-top-right-radius: 50% 25vw;} #top #information::before{width:186px; height:186px; top:-107px; background: url(../images/topics_sp_grogu.png) no-repeat center / 100%;} #top #information .section_title{width:100%; padding-top: 45px; top:0;} #top #information .section_title img{width: 213px; margin: 0 auto;} #top #information .section_title .inner{margin: 10px 0 0;} #top #information .tabs li{font-size: 11px; padding:1px 8px 1px 20px;} #top #information .tabs li::after{width:12px; height:12px; left:6px;} #top #information .section_inner {padding: 40px 16px 0;} #top #information .tabs {flex-wrap: nowrap; overflow: auto; padding: 0 16px; margin-left: -16px; width: calc(100% + 32px); margin-bottom: 25px;} #top #information .topics_list .box {width: 100%;} #top #information .topics_list .box.active:nth-child(n + 4) {display: none;} #top #information .topics_list .box a {gap: 12px;} #top #information .topics_list .img_box {min-height: 120px; max-width: 120px; min-width: 120px;} #top #information .topics_list .info {font-size: 14px;} #top #information .topics_list .info .item_icon {padding: 0 5px; font-size: 10px; line-height: 19px;} #top #information .topics_list .text {font-size: 12px;} #top #information .inline_link {font-size: 13px;} /* ピックアップ -------------------------------------------------------------*/ #top #new {padding: 25px 0 40px;} #top #new.section .section_inner{padding: 0 14px 0 10px; position: relative;} #top #new .section_title{margin-left: 30px; padding-top: 35px; margin-bottom: 35px;} #top #new .section_title .inner{margin: 7px 0 0;} #top #new .section_title img{width: 120px;} #top #new .item_list{column-gap:16px; row-gap:32px;} #top #new .box{margin-right: 0;} #top #new .button_area{margin-top:40px;} /* #top #new.section .section_inner::after{} */ #top #new .section_title::after{content: ""; background: url(../images/pickup_sp_grogu.png) no-repeat center / contain; display: block; width: 160px; height: 112px; position: absolute; top: 53%; right: -208px;} #top #new .img_area{width:160px;} #top #new .box:nth-of-type(8) .img_box >div{clip-path: none; top: 0; left: 0; max-width: none; max-height: none;} #top #new .box:nth-of-type(8){border: 2px solid #3ab549; box-shadow: 4px 4px 0px 0px #3ab549; width:calc((100% - 16px) / 2); margin-left:auto;} #top #new .box:nth-of-type(8) .img_box_shadow{filter: none; flex: auto;} #top #new .box:nth-of-type(8) .img_box{clip-path: none; background: #fff;} #top #new .box:nth-of-type(8) .img_box img,#top #new .box:nth-of-type(8) .img_box .item_soldout{clip-path: none; top: 0; left: 0; max-width: none; max-height: none;} #top #new .box:nth-of-type(6), #top #new .box:nth-of-type(11){width:calc((100% + 28px) / 2);} #top #new .box:nth-of-type(6) .price, #top #new .box:nth-of-type(11) .price{right: -8px;} #top #new .item_list .box.img_trapezoid{width:calc((100% - 20px) / 2);} #top #new .box:nth-of-type(6),#top #new .img_trapezoid:nth-of-type(12){margin-left:-20px;} #top #new .box:nth-of-type(11){box-shadow: none; border: none;} #top #new .box:nth-of-type(11) a{background: transparent;} #top #new .box:nth-of-type(11) .img_box{clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);; background: #3ab549; height: 100%; border: none; box-shadow: none;} #top #new .box:nth-of-type(6) .img_box>div{top: 2px; left: 2px; max-width: calc(100% - 4px); max-height: calc(100% - 4px);} #top #new .box:nth-of-type(6) .img_box>div img,#top #new .box:nth-of-type(11) .img_box>div img{height: 100%;} #top #new .box:nth-of-type(11) .img_box >div{object-fit: cover; clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); width: 100%; height: 100%; position: absolute; top: 2px; left: 2px; max-width: calc(100% - 4px); max-height: calc(100% - 4px); margin: 0;} #top #new .box:nth-of-type(11) .img_box_shadow{filter: drop-shadow(4px 4px #3ab549); flex: 1;} #top #new .box:nth-of-type(6){margin-right:0;} #top #new .item_list .box .fourth{margin-right: -1%;text-align: right;} #top #new .item_list .box .third{margin-top: -1%;} /* おすすめ -------------------------------------------------------------*/ #recommend .section_title img{width: 185px;} #top #recommend.section .section_title .inner{margin: 10px 0 0;} #recommend .section_title::after{width: 160px; height:98px; right: -170px; top: 66%;} #top #recommend{padding: 20px 0 98px;} #top #recommend::after{width: 185px; height:58px; bottom: -5px;} #recommend{padding-bottom: 10px;} #recommend .img_box{border: 2px solid #4b5aa0;} #top #recommend .swiper-container{padding: 22px 10px;} #recommend #keyword .section_title::after{content: none;} /* feature - 特集 -------------------------------------------------------------*/ #top #feature {margin: -100px 0 0; padding: 40px 0 52px; background: url(../images/bg/bg_default_round_sp.png) no-repeat center top/cover;} #top #feature .swiper-container {width: 100%;} #top #feature .box p {padding: 13px 28px 12px; font-size: 13px; max-width: 197px;} /* ranking - 人気商品ランキング -------------------------------------------------------------*/ #top #ranking {padding-bottom: 56px;} #top #ranking .swiper-container-wrapper {width: 100vw; margin: 0 calc(50% - 50vw); overflow: hidden;} #top #ranking .swiper-container {padding: 0 16px;} #top #ranking .box a h3 {font-size: 24px;line-height: 1.3; padding: 6px 3px 0 0;} #top #ranking .box:nth-child(n + 3) a h3 {font-size: 19px;} #top #ranking .box:nth-child(6) a h3, #top #ranking .box:nth-child(8) a h3, #top #ranking .box:nth-child(10) a h3 {line-height: 1.9;} /* recommend - おすすめ商品 -------------------------------------------------------------*/ .recommend_wrapper {padding: 48px 0px 56px; gap: 48px;} #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: 22px 10px; margin: 0 calc(50% - 50vw);} #awoo-keyword-popular-products .related-wrapper .related-title {font-size: 30px; margin: 0 0 32px; padding: 34px 0 0;} #awoo-keyword-popular-products .related-wrapper .related-title:after {font-size: 12px; margin-top: 10px;} #awoo-keyword-popular-products .related-wrapper .related-product-img{border: 2px solid #4b5aa0; box-shadow: 4px 4px 0px 0px #4b5aa0;} #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;} #awoo-keyword-popular-products .related-wrapper .product__price{right:-8px; bottom:-18px;} #awoo-keyword-popular-products .related-wrapper .product-price {font-size: 12px;} #awoo-keyword-popular-products .related-wrapper .slick-arrow {top: calc((100% - 114px) / 2); left: 4px; width: 32px; height: 32px; display: none!important;} #awoo-keyword-popular-products .related-wrapper .slick-arrow.slick-next {display: none;} #awoo-keyword-popular-products .related-wrapper .related-title:before{width: 160px; height: 98px; right: -170px; top: 66%;} /* 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: 30px; margin: 0 0 32px; padding: 34px 0 0;} #awoo-favorite-related-products .related-wrapper .related-title:after {font-size: 12px;} #awoo-favorite-related-products .related-wrapper .related-product {margin: 0 8px 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: 13px;} #awoo-favorite-related-products .related-wrapper .product-price {font-size: 16px;} #awoo-favorite-related-products .related-wrapper .slick-arrow {top: calc((100% - 114px) / 2); left: 4px; width: 32px; height: 32px;} #awoo-favorite-related-products .related-wrapper .slick-arrow.slick-next {right: 2px;} /* 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: 30px; margin: 0 0 32px; padding: 34px 0 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: 13px;} #awoo-related-products .related-wrapper .product-price {font-size: 12px;} #awoo-related-products .related-wrapper .related-product-list .slick-list{padding: 22px 16px; margin: 0 calc(50% - 50vw); width:auto;} #awoo-related-products .related-wrapper .slick-arrow {top: calc((100% - 114px) / 2); left: 4px; width: 32px; height: 32px;} #awoo-related-products .related-wrapper .slick-arrow.slick-next {right: 2px;} #awoo-related-products .related-wrapper .slick-arrow:before,#awoo-related-products .related-wrapper .slick-arrow:before{display: none;} #awoo-related-products .related-wrapper .related-product-img{border: 2px solid #4b5aa0;} /* 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: 30px; margin: 0 0 32px; padding: 34px 0 0;} #awoo-not-found-products .related-wrapper .related-title:after {font-size: 12px;} #awoo-not-found-products .related-wrapper .related-product {margin: 0 8px 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: 13px;} #awoo-not-found-products .related-wrapper .product-price {font-size: 16px;} #awoo-not-found-products .related-wrapper .slick-arrow {top: calc((100% - 114px) / 2); left: 4px; width: 32px; height: 32px;} #awoo-not-found-products .related-wrapper .slick-arrow.slick-next {right: 2px;} /* awooAI キーワード -------------------------------------------------------------*/ #keyword .pc{display: inline-block;} #keyword .sp{display: none;} #keyword::after {content: none;} #keyword .section_title::before, #keyword .section_title {padding: 6px 20px 6px 11px; font-size: 26px;} #keyword .section_title::after {position: absolute; left: 0; width: 100%; top: 38px;} #keyword .awoo-tag-wrapper {padding: 0;} #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;} #keyword .popular-tags-wrapper{border: 2px solid #4b5aa0;} #awoo-keyword-popular-tags::after {content: none;} #awoo-keyword-popular-tags {padding: 0;} #awoo-keyword-popular-tags .popular-tags-wrapper::before {top: 38px; right: unset; left: 0; width: 100%;} #awoo-keyword-popular-tags .popular-tags-wrapper::after {display: none;} #awoo-keyword-popular-tags .popular-tags-title {margin: 0 0 26px; font-size: 25px;} #awoo-keyword-popular-tags .popular-tags-title:after {font-size: 13px;} #awoo-classify, #awoo-product-tags{padding: 0 12px 20px 12px;} #awoo-product-tags .awoo-tag{font-size: 11px;} #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: 11px;} /* awooAI キーワード - トップ */ #top #keyword .popular-tags-wrapper::before {left: 0;} /* ================================================================= 会員登録・会員情報変更・退会 =================================================================*/ #memberInput input#ZIP, #memberInput input#TEL {max-width: unset;} #memberInput input#ZIP ~ .button, #memberInput input#TEL ~ .button {min-width: 108px;} #memberInput #selectHouse .gry .selected_house_img, #memberInput #selectHouse .sly .selected_house_img, #memberInput #selectHouse .rav .selected_house_img, #memberInput #selectHouse .huf .selected_house_img, #memberInput #selectHouse .non .selected_house_img {height: 126px; width: 106px;} #memberInput #selectHouse > span {max-width: calc((100% - (8px * 2)) / 3);} #memberInput .ds-saved-card {padding: 16px;} /* 確認画面 */ #memberInput #selectHouse:has(> .selected_house_img) {max-width: calc((100% - (8px * 1)) / 2);} /* 退会 */ #memberTaikai .important_text {flex-direction: column; align-items: flex-start;} /* ================================================================= 商品詳細・一覧、プレゼント詳細・一覧、トピックス詳細・一覧 =================================================================*/ /* list - 一覧画面共通のメニュー -------------------------------------------------------------*/ .pager {margin: 24px 0; font-size: 11px; gap: 10px;} .pager a {width: 25px; height: 25px;} .pager .current {width: 25px; height: 25px;} .pager a.next, .pager a.prev, .pager a.first, .pager a.last {width: 25px; height: 25px;} .pager a.first::before, .pager a.last::before,.pager a.next::before, .pager a.prev::before{width: 25px; height: 25px;} /* itemListDetail - 商品詳細一覧・プレゼント一覧 -------------------------------------------------------------*/ #itemList.main_inner {padding: 0 9px} #itemList .item_list{padding-right: 4px;} #itemList .pageguide_wrapper {padding: 1px 0 0;} #itemList .pageguide_wrapper::before { height: calc(100% + 15px + 90px); } #itemList .pageguide_wrapper .pageguide {align-items: center; column-gap: 5px; width: 100%; row-gap:20px;} #itemList .pageguide_txt{width: 100%;} #itemList .pageguide_wrapper + #error {width: calc(100% - 16px); margin: 0 auto 16px;} #itemList .item_list {margin: 36px 0 0;} #itemList .item_list .item_new{left: -2px;} #itemList .sub_category_list_wrapper {margin: 32px 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-bottom: 56px;} #itemList .large_title img{width: 126px;} #itemList .large_title >span{font-size: 13px; display: block; margin-top: 11px;} #itemList .large_title{margin-bottom: 11px;} /* narrowListCategory - 絞り込みカテゴリ -------------------------------------------------------------*/ #narrowListCategory{margin-left: 0; padding: 0;} #narrowListCategory .siborikomi_button {min-width:auto; font-size: 11px; padding: 8px 10px 8px 25px; height: 34px;} #narrowListCategory .siborikomi_box {width: 315px;} #narrowListCategory .siborikomi_title {width: 315px; padding: 8px 8px 7px; font-size: 15px;} #narrowListCategory .siborikomi_box #closeButton {width: 32px; height: 40px; right: 325px; top:5px;} #narrowListCategory .siborikomi_box_inner {padding: 62px 20px 24px; gap: 32px;} #narrowListCategory .siborikomi_category_title {font-size: 14px;} #narrowListCategory .siborikomi_category_list {gap: 6px;} #narrowListCategory .siborikomi_category_list li {font-size: 11px;} #narrowListCategory .siborikomi_category_list li a {padding: 3px 6px 3px;} #narrowListCategory .siborikomi_category_list li:not(:has(a)) {padding: 3px 6px;} #narrowListCategory .siborikomi_button::after{height: 14px; left: 3px;} #narrowListCategory:has(.selected) .siborikomi_button:after{left: 7px;} /* 選択中カテゴリ */ #selectedCategory {font-size: 12px; gap: 2px;} #selectedCategory .selected_category {font-size: 10px; gap: 5px; padding: 5px 11px 4px;} #selectedCategory .selected_category a {height: 9px;} /* categoryInfo - カテゴリ情報 -------------------------------------------------------------*/ #categoryInfo {flex-direction: column; margin: 0 auto 40px;} #categoryInfo .img_box {border: 0; width: 100vw; min-height: 210px;} #categoryInfo .img_box + .text_box .large_title {margin: 0 auto 34px; max-width: unset;} #categoryInfo .text_box {padding: 0 8px;} /* categoryInfo - カテゴリ情報（カテゴリ別テンプレート） -------------------------------------------------------------*/ #itemList.house_category #categoryInfo {padding: 16px 16px 36px; gap: 8px;} #itemList.house_category #categoryInfo .img_box {max-width: 96px;} #itemList.house_category #categoryInfo .large_title {margin: 0 auto 36px;} #itemList.house_category #categoryInfo::after {width: 226px; height: 313px; bottom: -88px; right: -22px;} /* ================================================================= マイページ =================================================================*/ #member.mypage .account_box {flex-direction: column; border:2px solid #4b5aa0;} #member.mypage .account_box .account_area .account_area_wrapper{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; border: 2px solid #4b5aa0;} #member.mypage .account_box .account_area .section_title{padding: 6px 20px 6px 5px;} #member.mypage .coupon_area table td{border-bottom: none;} /* ================================================================= カートの中身～注文完了まで、プレゼント応募～完了まで =================================================================*/ /* 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: 13px; 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: #FFF url(../images/icon/select_arrow.svg) no-repeat right 6px top 16px;} #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 {background: transparent; border: 1px solid #4b5aa0; padding: 0; line-height: 23px; font-size: 12px; width: 74px; color:#4b5aa0;} #main .cart_table .box .delete_button {font-size: 12px; display: inline-block; height: 13px; width: 13px; background: #fff; color: #000; line-height: 13px; margin: 0 3px 0 0; text-indent: -9999px; position: relative;} #main .cart_table .box .delete_button::before{position: absolute; content: ""; display: block; width: 15px; height: 15px; background: url(../images/icon/blue/close.svg) no-repeat center / contain; left: -3px; top: 50%; transform: translateY(-50%);} #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; line-height: 14px;} #cartFlow .important_text {flex-direction: column; gap: 3px;} #main #cartFlow .important_text .important { align-items: flex-start; justify-content: flex-start; } #cartFlow .p-giftList.info_box .button_area { max-width: none; padding: 16px 8px; flex-direction: column-reverse;} #cartFlow .p-giftList.info_box .button_area .button { width: calc(100% - 104px); max-width: 260px;} #cartFlow .button_area.sp { display: flex; } #cartFlow .total{width: 100%;} #cartFlow .total_wrapper {padding: 16px 8px; border: 2px solid #4b5aa0;} #cartFlow .total dl {font-size: 13px; width:calc(100% - 88px); margin-left: auto;} #cartFlow .total .syokei {margin: 8px 0 5px; } #cartFlow .total .syokei dl{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.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% - 100px); font-size: 14px; gap: 0; border-top: none;} #cartFlow #ds-gift-not-setted-error { font-size: 13px; } #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 .ds-gift-option__item-image{ padding-top: 100%; } #main #cartFlow .p-wrapTable__tr td:not(.itemname) { width: 100%; } #cartFlow .cart_shopbag_wrap{padding: 1px 12px 16px 12px;} #cartFlow .p-giftTable{border: none; border-top:2px solid #4b5aa0;} /*ラッピングのポップアップ*/ #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-left: -4px; } #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; font-size: 13px; } #cartFlow .p-giftList.info_box .button_area .button { width: 100%; font-size: 14px; max-width: 314px;} #cartFlow .p-giftList.info_box{border: 2px solid #4b5aa0;} /*設定済みラッピング*/ .p-giftSetted{border: 2px solid #4b5aa0;} #cartFlow .p-giftSetted .p-giftListInner, .p-giftSetted .p-giftSettedList__item { flex-wrap: wrap; border-bottom: none;} #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; max-width: 314px;} #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: pointer; } .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 #4b5aa0; 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:last-child { margin-bottom: 0; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_inner_wrapper"].none { border-top: 1px solid #4b5aa0; } .p-giftSetted .p-giftSettedList__item [class*="wrapping_inner_wrapper"] { max-width: 100%; width: 100%; border-bottom: 1px solid #4b5aa0; padding-bottom: 0; } .p-giftSetted .p-giftSettedList__item [class*="messagecard_wrapper"] { width: 100%; border-bottom: 1px solid #4b5aa0; 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: #4b5aa0; position: absolute; display: block; top: 50%; transform: translateY(-50%); right: 0; width: 17px; height: 1px; transition: 0.3s;} .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; background: #4b5aa0;} #cartLogin .login_boxes .box .medium_title {margin-top: 30px;} #cartLogin .login_boxes .box .amazon_box >div{border: 2px solid #4b5aa0;} /* 入荷お知らせ */ #cartLogin .nyuka_table th {display: block; width: 100%;} #cartLogin .nyuka_table td {display: block; width: 100%; border-bottom: none;} /* ================================================================= お気に入り =================================================================*/ #wishList .box {display: block; border: 2px solid #4b5aa0;} #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;} #subwindow.coupon_popup table td{border-bottom: none;} /* ================================================================= 15.エラーページ 使用ファイル：common/messages.xhtml =================================================================*/ #error{border: 2px solid #d54448;} #contents_access_error #error{border: 2px solid #d54448;} } /* 480px以下 - スマホ向け -------------------------------------------------------------*/ @media screen and (max-width: 480px) { /* 別レイアウト（480px以下） -------------------------------------------------------------*/ /* タイトルデザイン（480px以下） -------------------------------------------------------------*/ /* 特集一覧（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);} }