@charset "UTF-8"; @import url("smoothness/jquery-ui-1.8.4.custom.css"); /* ================================================================= 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;text-shadow: none;} 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:calc(100% - 8px); 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; display: inherit; width: auto; height: auto; background-image: none} .section .section_title .inner{display: block; font-size: 25px; font-family: "ab-tombo-bold","sans-serif"; line-height: 1; margin: 14px 0 0;background: none;background-clip: inherit;-webkit-background-clip: inherit;-webkit-text-fill-color: inherit;position: relative; top: 0em;} /* パンくずリスト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: 120px 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;} #error table{box-shadow:none;} /* リキャプチャー機能用 -------------------------------------------------------------*/ #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;} /* ================================================================= 7.トップページ 使用ファイル：top.xhtml =================================================================*/ /* 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;} } /* itemAccessLog - 閲覧履歴 -------------------------------------------------------------*/ #itemAccessLog .box .price .teika:has(+ .sale)::before {background: #fff;} /* ================================================================= 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, =================================================================*/ /* おすすめ recommend -------------------------------------------------------------*/ #recommend .section_title{color: #4b5aa0; text-align: left; display: inline-block;width: auto;height: auto;background-image: none;} #recommend .section_title img{display: block;} #recommend{padding-bottom: 10px;} #recommend .section_title .inner{text-align: center;background: none;background-clip: inherit;-webkit-background-clip: inherit;-webkit-text-fill-color: inherit;position: relative;top: 0em;} #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;} #recommend .img_box{border: 4px solid #4b5aa0; box-shadow: 4px 4px 0px 0px #4b5aa0; } #recommend .item_list .box .price{background: #4b5aa0;} #recommend::after{width:285px; height: 91px;} #recommend .main_inner{max-width:1200px;} /* 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;} /* 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;text-align:center;font-size:110%;} #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: -198px; 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: #4b5aa0;} #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: rgba(255,255,255,.9); color: #4b5aa0; width: 90%; max-width: 550px; max-height: 100vh; overflow-y: auto; box-sizing: border-box; padding: 32px 40px; position: relative; border: 1px solid #172675;border-radius:10px;} .ds-detail-modal__content { font-size: 16px; } .ds-detail-modal__action { margin-top: 20px; display:block; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:justify; -webkit-justify-content:space-around; -ms-flex-pack:justify; justify-content:space-around; -webkit-column-gap:4%; -moz-column-gap:4%; column-gap:4%; } .ds-detail-modal__action.button_area { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: nowrap; text-align: center; margin: 32px auto 0; } #main p.ds-detail-ajax__success-title { font-size: 14px; text-align: center; } .ds-detail-ajax__success-action { display: flex; flex-wrap: nowrap; margin-top: 10px; } .ds-detail-ajax__success-action > div.close { flex: 0 0 auto; width: auto; padding-left: 5px; padding-right: 5px; } .ds-detail-ajax__success-action > div { flex: 0 0 auto; width: 100%; padding-left: 5px; padding-right: 5px; } .p-soldout { z-index: 1; } /* 商品画像の切り替え */ #itemDetail .property_image_area{ clear: both;} #itemDetail .propertyImg{width: 80px; float: left; margin-right: 15px;} #itemDetail .propertyImg .propertyimg_box{width: 80px; height: 80px; text-align: center; position: relative; margin: 0 10px 0px 0;} #itemDetail .propertyImg .propertyimg_box img{width: auto; max-width: 80px; max-height: 80px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #itemDetail .propertyImg p{margin: 0; text-align: center;} #itemDetail h3{display: block; margin: 10px 0px 5px 0; font-size: 105%;} #itemDetail .property_sale_price {color: #C00;} #itemDetail .property_normal_price {text-decoration:line-through} #itemDetail .propaty_area .button{max-width: none; width: 100%;} /* itemDetail - 商品詳細カートに入った報告ポップアップ -------------------------------------------------------------*/ #itemDetail .cartSubmitButton{position: relative;} #itemDetail .cartSubmitButton .cartMessage{position: absolute; top: -128px; left: 50%; transform: translateX(-50%); padding: 32px 16px 10px; background: #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;} /* =================================================================== 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;} /* 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;} /* 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;} /* ================================================================= 商品詳細・一覧、プレゼント詳細・一覧、トピックス詳細・一覧 =================================================================*/ /* 商品一覧、商品詳細ページアイコン類 -------------------------------------------------------------*/ .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;} /* 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;} #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);} } /* 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; } /* タイトルデザイン -------------------------------------------------------------*/ .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{padding-top:calc(100% - 4px);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; } /* 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;} /* 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;} /* ================================================================= 商品詳細・一覧、プレゼント詳細・一覧、トピックス詳細・一覧 =================================================================*/ /* 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;} } /* 480px以下 - スマホ向け -------------------------------------------------------------*/ @media screen and (max-width: 480px) { /* 別レイアウト（480px以下） -------------------------------------------------------------*/ /* タイトルデザイン（480px以下） -------------------------------------------------------------*/ } /*================================================================= common 共通処理 =================================================================*/ #header *, #footer * {box-sizing: border-box; margin: 0; padding: 0;} #header li, #footer li {list-style-type: none;} #header img, #footer img {border: 0;} #header a:link, #header a:visited, #footer a:link, #footer a:visited {color: #14729b;} #header a, #footer a {text-decoration: none;} #header .sp, #footer .sp {display: none;} #header .pc, #footer .pc {display: block;} /*-- 共通パーツ --*/ #header .inline_link, #footer .inline_link {position: relative; padding: 0 0 0 14px;} #header .inline_link::before, #footer .inline_link::before {content:""; background: url(../images/icon/navy/link_arrow.svg) no-repeat center/contain; display: block; height: 20px; width: 20px; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.2s; left: 0;} #header .link_list, #footer .link_list {display: flex; flex-direction: column; gap: 10px; font-size: 18px;} #header .link_list a, #footer .link_list a {position: relative; padding: 0 0 0 27px; display: block;} #header .link_list a::before, #footer .link_list a::before {content:""; background: url(../images/icon/navy/link_arrow.svg) no-repeat center/contain; display: block; height: 20px; width: 20px; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.2s; left: 0;} #header .links_area, #footer .links_area {display: flex; flex-direction: column; align-items: flex-start;} #header .links_area a, #footer .links_area a {padding: 16px 24px 16px 8px; display: block; position: relative;} /*================================================================= header - ヘッダ =================================================================*/ #header {display: flex;border-bottom: 1px solid #fff; background-image: -moz-linear-gradient( 175deg, rgb(222,163,226) 0%, rgb(214,179,232) 31%, rgb(206,195,237) 52%, rgb(141,224,255) 100%); background-image: -webkit-linear-gradient( 175deg, rgb(222,163,226) 0%, rgb(214,179,232) 31%, rgb(206,195,237) 52%, rgb(141,224,255) 100%); background-image: -ms-linear-gradient( 175deg, rgb(222,163,226) 0%, rgb(214,179,232) 31%, rgb(206,195,237) 52%, rgb(141,224,255) 100%); font-size: 13px; top: 0; left: 0; z-index: 997; width: 100%; height: 120px; position: fixed;} #header a {color: #FFFFFF;} #header .button::before {top: -3px;} #header .header_logo {overflow: hidden; width: 236px;} #header .header_logo a {display: block; width: 100%; max-width: 236px; height: 126px; background: url(../images/logo.png) no-repeat center/contain; text-indent: -9999px;position: absolute;top: 10px;left: 10px;} #header .inner {margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; width: 100%;} #header .logo{position: relative;} #header .logo img{max-width: 236px; position: relative; top: 10px; left: 10px;} #header .search_form_area{flex-grow: 1; display: flex; justify-content: end; margin-left: 40px;} #header .search_form_area.sp{display: none;} #header .search_form_area form{position: relative; max-width: 300px; width: 100%;} #header .search_form_area input{border:2px solid rgb(58, 181, 73); border-radius: 10px; background-color: #fff; padding: 6px 40px 10px 6px; width: 100%; font-size:18px} #header .search_form_area input::placeholder{color: #b2b2b2;} #header .search_button{position: absolute; right: 11px; content: ""; background: url(../images/icon/search.svg) no-repeat center/contain; width: 23px; height: 23px; border: none; cursor: pointer; top: 50%; transform: translateY(-50%);} #header .guide{display: flex; align-items: center; margin-left: auto;} #header .guide_area {display: flex; column-gap: 30px; margin-left: 50px;} #header .guide_area .header_link{display: flex; flex-direction: column; cursor: pointer;} #header .guide_area .header_link .header_link_txt{color: #4b5aa0;text-align: center;font-weight: bold;font-size: 14px;font-family: "ab-tombo-bold";padding-top: 5px;height: 40px;display: flex;align-items: center; justify-content: center; line-height: 1.25;} #header .guide_area .header_link .header_link_area{display: flex; align-items: end;flex-grow: 1;justify-content: center;} #header .guide_area .header_link.guide img{width: 47px;} #header .guide_area .header_link.info img{width: 55px;} #header .guide_area .header_link.search img{width: 81px;} #header .guide_area .header_link.mypage img{width: 52px;} #header .guide_area .header_link.cart img{width: 62px;} #header .guide_area .header_link.menu img{width: 52px;} #header .guide_area .header_link_area img.active{display: none;} #header .guide_area .header_link:hover img.active{display: block;} #header .guide_area .header_link:hover img.default{display: none;} #header .guide_area .search_block .search_block_inner_wrapper {position: relative; overflow-y: auto; max-height: calc(100vh - 220px); scrollbar-width: thin; } #header .header_info .search_block {opacity: 0; visibility: hidden; position: absolute; z-index:-1; transition: 0.3s; left: 0; top: 120px; width: 100%; background: url(../images/bg/bg_green.png) repeat center / 32px auto; overflow-x: hidden;} #header .header_info .search_block .search_block_inner {margin: 0 auto; width: 100%; max-width: 1400px; padding: 57px 16px 100px; height: 100%;} #header .header_info .search_block .bnr_head {margin: 0 0 70px; display: flex; flex-wrap: nowrap; gap: 16px; align-items: end;} #header .header_info .search_block .bnr_head img {width: 100%;} #header .header_info .search_block .button_area .multi_wrapper{gap: 38px;} #header .header_info .search_block .search_detail {display: flex; flex-wrap: nowrap; gap: 32px;} #header .header_info .search_block .search_detail > dl {flex: 1;} #header .header_info .search_block .search_detail .category_list {padding: 0 4px; display: flex; align-items: flex-start; gap: 36px; color: #14729b;} #header .header_info .search_block .search_detail .category_list dl {flex: 1;} #header .header_info .search_block .search_detail .category_list dt {margin: 0 0 20px; font-size: 22px;} #header .header_info .search_block .search_block_inner.menu{display: flex; max-width: 1200px; gap: 20px;} #header .header_info .search_block .menu_list{width: 100%;} #header .header_info .search_block .menu_list a{font-size: 18px; display: block; width: 100%; max-width: 420px; border-bottom: 1px solid #14729b; position: relative; padding: 14px 40px 14px 10px;} #header .header_info .search_block .guide_link_area{margin-left: auto;} #header .header_info .search_block .menu_list a::after{content:""; background: url(../images/icon/navy/link_arrow.svg) no-repeat center/contain; display: block; height: 20px; width: 20px; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.2s; right: 10px;} #header .header_info .search_block .guide_links {margin: 20px 0 38px; font-size: 18px; display: flex; justify-content: center; align-items: center; gap: 75px;} #header .header_info .search_block .guide_links a{display: flex; justify-content: center; align-items: center; flex-direction:column; gap: 9px;} #header .header_info .search_block .guide_links a>div{color: #14729b;} #header .header_info .search_block .guide_link_area .button_area{gap: 37px;} #header .header_info .search_block .guide_link_area .button.small{width: 260px; padding: 8px; color:#fff; font-size: 20px;} #header .header_info .guide .search {position: relative;} #header .header_info .guide .search input[type="submit"] {position: absolute; top: 50%; transform: translateY(-50%); right: 0; text-indent: -9999px;} #header .header_info .guide .mypage::before {background-image: url(../images/icon/mypage.svg); width: 18px; height: 20px;} #header .header_info .guide .mypage + .hover_block .button {width: 190px;} #header .header_info .guide .mypage + .hover_block .button + .inline_link {margin: 0 auto;} #header .header_info .guide .mypage + .hover_block .button + .inline_link {margin-top: 8px;} #header .header_info .guide .wishlist + .hover_block, #header .header_info .guide .cart + .hover_block {padding: 12px 16px;} #header .header_info .guide .wishlist::before {background-image: url(../images/icon/wishlist.svg); width: 22px; height: 21px;} #header .header_info .guide .cart::before {background-image: url(../images/icon/cart.svg); width: 24px; height: 20px;} #header .header_info .guide .cart {position: relative;} #header .header_info .guide .cart .cart_item_count {position: absolute; color: #fff; background: #4941ab; width: 14px; height: 14px; font-size: 10px; top: 10px; right: 0; border-radius: 9999px; text-align: center; font-family: 'Noto Serif JP', serif; line-height: 14px; text-indent: 0;} #header .header_info .guide .support::before {background-image: url(../images/icon/support.svg); width: 15px; height: 22px;} #header .header_info .guide .support + .hover_block {right: -5px; gap: 12px; transform: none; left: unset;} #header .header_info .guide .support + .hover_block:before {right: 15px; left: unset; transform: none;} #header .header_info .guide .support + .hover_block a {display: flex; align-items: center; justify-content: flex-start; gap: 8px;} #header .header_info .guide .support + .hover_block a::before {content: ""; display: block; width: 36px; height: 36px; background-repeat: no-repeat; background-size: contain;} #header .header_info .guide .support + .hover_block .shopping::before {background-image: url(../images/icon/guide.png);} #header .header_info .guide .support + .hover_block .faq::before {background-image: url(../images/icon/faq.png);} #header .header_info .guide .support + .hover_block .contact::before {background-image: url(../images/icon/contact.png);} .common_sparkling_left{width:25vw; height:20vw; position: absolute; top: 120px; z-index: -1;} .common_sparkling_right{width:25vw; height:20vw; position: absolute; right: 0; top: calc(20vw + 120px); z-index: -1;} .star01 {fill:#fff;transform-origin:center; animation:star01 1s linear; stroke-width:0;} @keyframes commonAnimation { from { transform: scale(0); opacity: 0; stroke-width: 30; } 50% { transform: scale(1); opacity: 0.8; stroke-width: 14; } to { transform: scale(0); opacity: 0; } } .star01,.star02,.circle,.circle02 {fill: #fff; transform-origin: center; animation: commonAnimation 1.7s linear; stroke-width: 0;} .star02 {fill: #e2dbc7;} #header .hd_bnr{background:linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(68, 68, 68, 1) 100%);padding:8px;position:fixed;width:100%;top:0;display:block;color:#fff;text-align:center;} /*================================================================= footer - フッタ =================================================================*/ #footer {color: #fff; font-size: 13px; background:#fff;} #footer .footer_top{background: url(../images/bg/footer_top.png) center bottom; padding: 66px 16px;} #footer .footer_top:after {content: none;} #footer .sns{display: block; gap:15px;margin: 12px 0 30px;} #footer .sns h4{text-align:center;color: #4b5aa0;font-size:16px;margin:auto auto 8px;} #footer .sns div{display: flex; justify-content: center;} #footer .sns img{width: 45px; height: 45px;} #footer .footer_menu{display: flex; gap:18px; background: rgba(23, 38, 117, 0.75); border-radius: 10px; padding:27px 0; font-size: 18px; justify-content: center; margin: 0 auto; max-width: 1200px; flex-wrap: wrap;} #footer .footer_menu ul.footer_cat{display:flex;flex-wrap:wrap;width:40%;column-count: inherit;column-gap: normal;} #footer .footer_menu ul.footer_cat li{width:50%;} #footer .footer_menu > *{background:none;} #footer .footer_menu a{color: #fff;} #footer .footer_menu a:hover{text-decoration: underline;} #footer .footer_bottom{background: url(../images/bg/footer_bottom.png) no-repeat center center/cover; padding: 0 16px; font-size: 17px; text-align: center; height: 570px; position: relative;} #footer .copyright_area{position: absolute; bottom: 25px; left: 50%;transform: translateX(-50%);width: 100%; line-height: 1.25;padding-block: inherit;} #footer .copyright_txt{margin-bottom: 30px;} #footer a {color: #fff;} #footer .bnr_area {margin: 34px 10px; padding: 16px 2vw; display: flex; justify-content: center; align-items: center; gap: 32px;} #footer .bnr_area li {width: 100%; max-width: 300px;} #footer .bnr_area img {width: 100%;} #footer .footer_grogu{width: 190px; position: absolute; bottom: 160px; right: 0; left: 250px; margin: auto;} #footer .footer_butterfly{width: 55px; position: absolute; bottom: 400px; right: 0; left: 115px; margin: auto;} @keyframes footerGroguImage { 0% { transform: rotate(0deg); } 50% { transform: rotate(1deg); } 100% { transform: rotate(0deg); } } .footer_grogu { animation: footerGroguImage 0.8s infinite; } @keyframes footer_butterfly { 0% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } 100% { transform: rotate(0deg); } } .footer_butterfly { animation: footer_butterfly 0.8s infinite; } /* トップへ戻る */ @keyframes pagetophorizontal { 0% { transform:translateX( -3px); } 100% { transform:translateX( 0px); } } @keyframes pagetopvertical { 0% { transform:translateY(-10px); } 100% { transform:translateY( 0px); } } #topBtn {position:fixed; bottom:10px; right:18px; display:block; z-index: 996;} #topBtn a {width: 120px; height: 100px; display: block; animation: pagetopvertical .7s ease-in-out infinite alternate;} #topBtn a img {animation: pagetophorizontal .7s ease-in-out infinite alternate; width: 100%;} /* 1200px以下 - コンテンツ幅以下 -------------------------------------------------------------*/ @media screen and (max-width: 1200px) and (min-width: 768px) { /* ------------------------------------------------------------- header - ヘッダ -------------------------------------------------------------*/ #header {font-size: 10px;} #header .header_info .guide .header_link .hover_block {padding: 16px;} #header .header_logo, #header .header_logo a {max-width: 210px;} #header .inner { padding: 0 10px;} #header .header_info .info .header_link > a {padding: 22px 5px; gap: 3px; flex-direction: column;} #header .logo img{max-width: 186px;} #header .header_info .guide .header_link > a {width: 30px;} #header .header_info .guide .mypage + .hover_block .button {width: 130px;} #header .guide_area .header_link .header_link_txt{font-size: 10px; letter-spacing:-1px;} #header .guide_area{margin-left: 10px; gap: 10px;} /* ------------------------------------------------------------- footer - フッタ -------------------------------------------------------------*/ #footer .footer_top .footer_menu .site_menu_wrapper {gap: 8px;} #footer .footer_top .search_detail_wrapper {gap: 8px;} #footer .footer_top .logo_area > img {min-width: 210px; max-width: 210px;} } /* 769px以上 - スマホ以外 -------------------------------------------------------------*/ @media screen and (min-width: 768px){ /*================================================================= 共通処理 =================================================================*/ /* ------------------------------------------------------------- header - ヘッダ -------------------------------------------------------------*/ #header .header_info .search.header_link:hover + .hover_block, #header .header_info .menu.header_link:hover + .hover_block, #header .header_info .hover_block:hover, #header .header_info .guide .header_link > a:hover + .hover_block, #header .header_info .guide .header_link .hover_block:hover {opacity: 1; visibility: visible;} #header .header_info .search_block .search_detail .house_list a:hover p::after {right: -8px;} #header .header_info .search_block .search_detail .category_list dt {pointer-events: none;} #header .header_info .search_block .search_detail .house_list {display: block!important;} #header .header_info .search_block .search_detail .link_list{display: flex!important; flex-wrap: wrap; flex-direction: row;} #header .header_info .search_block .search_detail .link_list >div{width: calc((100% - 40px)/5);} } /* 768px以下 - スマホ向け -------------------------------------------------------------*/ @media screen and (max-width: 768px) { /*================================================================= 共通処理 =================================================================*/ #header .sp, #footer .sp {display: block;} #header .pc, #footer .pc {display: none;} /* ------------------------------------------------------------- header - ヘッダ -------------------------------------------------------------*/ #header {height: 60px;top:47px;} #container{padding: 108px 0 0;} #header .header_logo{width: 93px;} #header .inner {padding: 0 10px; font-size: 14px; gap: 8px;} #header .header_logo a {background: url(../images/logo_sp.png) no-repeat center / contain; max-width: 93px; height: 63px; top: 5px; left: 5px;} #header .search_form_area{max-width: 100%; margin:0 0 20px 0;} #header .search_form_area.sp{display: flex;} #header .search_form_area form{max-width: 100%;} #header .search_form_area input{padding: 8px 40px 8px 10px; width: 100%;} #header .header_info .guide .header_link > a {width: 31px;} #header .header_info .guide li.search {width: unset;} #header .header_info .guide li.search {position: relative; background: url(../images/icon/search.svg) no-repeat center/100%;} #header .header_info .guide #awoo-search {height: 20px; width: 20px;} #header .header_info .guide #awoo-search:after {display: none;} #header .header_info .guide .mypage {width: 30px;} #header .header_info .guide .wishlist {width: 34px;} #header .header_info .guide .cart {width: 36px;} #header .header_info .guide #searchBtnClose, #header .header_info .guide #spMenuBtn, #header .header_info .guide #spMenuBtnClose {padding: 0; width: 31px; height: 60px; background-color: unset; background-repeat: no-repeat; background-position: center; text-indent: -9999px; overflow: hidden; white-space: nowrap; border: 0; display: flex; justify-content: center; align-items: center;} #header .header_info .guide #spMenuBtn {width: 36px; color: transparent;} #header .header_info .guide #spMenuBtn::before {content: ""; display: block; background: url(../images/icon/menu.svg) no-repeat center/100%; width: 24px; height: 20px; position: absolute;} #header.huf .header_info .guide #spMenuBtn::before {background-image: url(../images/icon/menu_bright.svg)} #header .header_info .guide #searchBtnClose, #header .header_info .guide #spMenuBtnClose {background: url(../images/icon/close.svg) no-repeat center/100%;; right: 5px; top: 5px; width: 32px; height: 32px; position: fixed; z-index: 99;} #header .header_info .guide #spMenuBtn.open + .sp_menu_block {opacity: 1; visibility: visible;} #header .guide .guide_area .search_block, #header .guide .guide_area .sp_menu_block {opacity: 0; transition: 0.3s; position: fixed; top: 0; left: 0; width: 100vw; min-height: 100vh; visibility: hidden; background: url(../images/bg/bg_green.png) repeat center / 32px auto; z-index: 999;} #header .header_info .guide .search .search_block {padding: 140px 0 0;} #header .guide .search_block.open {opacity: 1; visibility: visible;} #header .guide .sp_menu_block .sp_menu_block_inner {padding: 60px 16px 140px;} awoo-site-search {display: none;} #header.open ~ awoo-site-search {display: block;} #header .header_info .guide .cart .cart_item_count{top:2px;} #header .link_list a::before{right: 6px; left: auto; width: 18px; height: 18px;} #header .header_info .search_block .search_block_inner{padding: 20px 24px 100px;} #header .header_info .search_block .search_block_inner.menu{flex-direction:column} #header .header_info .search_block .menu_list a{font-size: 15px; padding: 8px 40px 8px 10px; max-width: 100%;} #header .header_info .search_block .guide_links{font-size: 11px; gap: 23px;} #header .header_info .search_block .guide_links img{width: 50px; height: 50px;} #header .header_info .search_block .guide_link_area{margin: 0 auto;} #header .header_info .search_block .guide_link_area .button.small{font-size: 14px; padding: 13px;} #header .header_info .guide .search_block .menu_logo{text-align: center; margin-bottom: 17px;} #header .header_info .guide .search_block .menu_logo img{width: 131px;} #header .header_info .guide .search_block .bnr_head {margin: 0 0 40px; gap:2%; flex-wrap: wrap;} #header .header_info .guide .search_block .bnr_head li:nth-of-type(1){width: 100%;} #header .header_info .guide .search_block .bnr_head li:nth-of-type(2),#header .header_info .guide .search_block .bnr_head li:nth-of-type(3){width: 49%;} #header .header_info .guide .search_block .bnr_head img {width: 100%; display: block;} #header .header_info .guide .search_block .bnr_head a {display: block; margin: 0 0 8px;} #header .header_info .search_block .search_detail .category_list{display: block;} #header .header_info .guide .search_block .search_detail {font-size: 16px; position: relative; padding: 0 0 123px;} #header .header_info .guide .search_block .search_detail > dl {position: relative;} #header .header_info .guide .search_block .search_detail .title {position: relative; font-size: 14px;} #header .header_info .guide .search_block .search_detail .title::after{content: ""; background: url(../images/icon/accordion_open.svg) no-repeat center/contain; position: absolute; display: block; top: 50%; transform: translateY(-50%); right: 6px; width: 18px; height: 18px;} #header .header_info .guide .search_block .search_detail .title.open::after{background: url(../images/icon/accordion_close.svg) no-repeat center/contain;} #header .header_info .guide .search_block .search_detail .category_list dt {padding: 10px 24px 10px 0; position: relative; font-size: 15px; border-bottom: 1px solid #14729b; margin: 0;} #header .header_info .guide .search_block .search_detail .category_list dt.open + .link_list{background: rgba(178, 237, 167,0.43);} #header .guide_area .search_block .search_block_inner_wrapper{padding: 0 0 140px; position: relative; overflow-y: scroll; height: 100vh; min-height: 100vh;} #header .header_info .guide .search_block .search_detail .category_list dd {gap: 0; display: none;} #header .header_info .guide .search_block .search_detail .category_list dd a {position: relative; padding: 10px 24px 10px 13px; font-size: 15px; border-bottom: 1px solid #14729b;} #header .header_info .guide .search_block .search_detail .category_list dl:last-child .link_list div:last-child a::after {opacity: 1;} #header .header_info .guide .sp_menu_block .guide_links {margin: 48px 0; font-size: 10px; display: flex; justify-content: center; align-items: center; gap: 18px;} #header .header_info .guide .sp_menu_block .button_area {gap: 22px;} #header .header_info .guide .sp_menu_block .inline_link {margin: 0 auto; display: block; width: fit-content;} #header .guide_area{margin-left: 0;} #header .guide_area .header_link .header_link_txt{font-size: 8px; height: 20px; padding-top: 0; line-height:1.06; letter-spacing: -1px;} #header .guide_area .header_link.guide img{width: 26px;} #header .guide_area .header_link.info img{width: 30px;} #header .guide_area .header_link.search img{width: 43px;} #header .guide_area .header_link.mypage img{width: 25px;} #header .guide_area .header_link.cart img{width: 33px;} #header .guide_area .header_link.menu img{width: 28px;} #header .guide_area .header_link.guide .header_link_area{margin-bottom: 3px;} #header .guide_area .header_link.info .header_link_area{margin-bottom: 3px;} #header .guide_area .header_link.mypage .header_link_area{margin-bottom: 3px;} #header .guide_area .header_link.cart .header_link_area{margin-bottom: 3px;} #header .guide_area .header_link.menu .header_link_area{margin-bottom: 3px;} #header .guide_area{column-gap: 7px;} #header .button_area, #footer .button_area {margin: 0 auto;} #header .button_area .button, #footer .button_area .button {max-width: 314px; width: 100%; margin: 0 auto;} #header .header_info .button_area span, #header .header_info .button_area div {width: 100%; flex-direction: column;} #header .header_info .search_block .button_area .multi_wrapper{gap:10px;} /* ------------------------------------------------------------- footer - フッタ -------------------------------------------------------------*/ #footer .footer_top{padding: 23px 10px; background: url(../images/bg/footer_top.png) center bottom;} #footer .bnr_area{gap:5px; margin: 9px 5px 2px; flex-wrap: wrap;} #footer .bnr_area li {width: 48%;} #footer .sns{margin: 12px 0;} #footer .sns h4{font-size:.9rem;} #footer .sns img{width: 30px; height: 30px;} #footer .footer_menu{display:block;background: transparent; gap: 6px; padding: 0;} #footer .footer_menu li{background: rgba(23, 38, 117, 0.75);width: calc(50% - 4px); border-radius: 10px; font-size: 13px; text-align: center;margin:2px;} #footer .footer_menu li a{display: block; padding: 10px;} #footer .footer_menu ul {display:flex;flex-wrap:wrap} #footer .footer_menu ul.footer_cat{width:auto;} #footer .footer_menu ul.footer_cat li{width:calc(50% - 4px);} #footer .footer_bottom{height: 350px; background: url(../images/bg/footer_sp_bottom.png) no-repeat center center/cover;} #footer .footer_grogu{bottom: 120px; width: 94px; left: 190px;} #footer .footer_butterfly{bottom: 240px; width: 28px; left: 100px;} #footer .copyright_area{font-size: 8px; bottom: 12px;} #footer .copyright_txt{margin-bottom: 13px;} .common_sparkling_left{width:70vw; height:40vw; position: absolute; top: 60px; z-index: -1;} .common_sparkling_right{display: none;} } /* togglebutton */ .toggleButton__inner{ display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } .toggleButton__inner_sp{ display: none; } @media screen and (max-width: 768px) { .toggleButton__inner{ margin-left: 0; } .toggleButton__inner_pc{ display: none; } .toggleButton__inner_sp{ display: -webkit-box; display: flex; position: relative; z-index: 3; } } .toggleButton__input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; cursor: pointer; } .toggleButton__label { width: 46px; height: 24px; background: #BBBBBB; position: relative; display: inline-block; border-radius: 14px; transition: transform 0.2s; box-sizing: border-box; } input[type='checkbox'].toggleButton__input + .toggleButton__label:after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 100%; left: 1px; top: 50%; transform: translate(0,-50%); z-index: 2; background: #fff; transition: transform 0.2s; box-sizing: border-box; border: none; } input[type='checkbox'].toggleButton__input + label{ margin: 0; } input[type='checkbox'].toggleButton__input + .toggleButton__label:before{content: none;} .toggleButton__input:checked + .toggleButton__label { background-color: #675dc2; } input[type='checkbox'].toggleButton__input:checked + .toggleButton__label:after { transform: translate(22px,-50%); } .toggleButton { position: relative; width: 46px; height: 24px; margin-left: 5px; } .toggleButton__comment{ font-size: 18px; margin-left: 7px; color: #675dc2; } .modalArea__img{ text-align: center; } .modalArea__imgMessage{ width: 46px; height: auto; } .modalArea__ButtonContent{ display: -webkit-box; display: flex; -webkit-column-gap:14px; column-gap: 14px; margin-top: 30px; } .modalArea__Button.button { width: 50%; font-size: 14px; padding: 13px; } .modalArea__ButtonRed.negative{ background: #d54448; opacity: 0.85; border: none; } .modalArea__ButtonRed.negative:hover{ background-color: rgba(199, 0, 0, 0.8); opacity: 1; } .modalArea__ButtonRed::before{ border-color: #C70000; } .button.link.negative.modalArea__ButtonRed::after{ background-image: url(../images/icon/white/link_arrow.svg); } #member.mypage ul li a.modalArea__Button{ color: #fff; padding: 13px; } .modalArea__title{ font-size: 20px; text-align: center; margin: 10px 0; color: #d54448; } .modalArea__attentionTxt{ color: #d54448; font-weight: bold; font-size: 26px; font-family: "ab-tombo-bold", "sans-serif"; } .modalArea__txt{ padding: 0 20px; font-size: 14px; } .modalArea { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; } .modalArea__overlay { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); } .modalArea__content { position: absolute; top: 50%; left: 50%; transform:translate(-50%,0); width: 100%; max-width: 500px; padding: 22px; background-color:#fff7b2; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s, transform 1s; } .modalArea__animationActive{ opacity: 1; visibility: visible; transform:translate(-50%,-50%); } .info__cartArea{ background: #fff7b2; margin: 30px 0; padding: 15px 32px 20px; border: 4px solid #dd6f88; box-shadow: 4px 4px 0px 0px #dd6f88; } .info__title,#cartIndex h3.info__title{ text-align: center; font-size: 18px; color: #4b5aa0; font-weight: bold; margin-bottom: 0; } .info__lists{ border-bottom: 1px solid #dd6f88; padding: 20px 0; } .info__lists:last-child{ border-bottom: none; padding-bottom: 0; } .info__date{ color: #4b5aa0; font-size: 12px; font-weight: bold; } .info__txt{ color: #4b5aa0; font-size: 16px; margin-left: 24px; } .info__link{ display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } @media screen and (max-width: 768px) { .toggleButton__comment{font-size: 11px; margin-left: 0; line-height: 1.25;} .info__cartArea{ padding: 15px 23px; } .info__title,#cartIndex h3.info__title{ font-size: 16px; margin-bottom: 0; } .info__lists{ padding: 15px 0; } .info__txt{ font-size: 14px; } .info__date,.info__txt{ display: block; margin-left: 0; width: 100%; } .info__link{ flex-direction: column; } } .invisible{display: none;}