@charset "UTF-8"; :root { --normal-font-family: "Montserrat", "Microsoft JhengHei", sans-serif; --title-font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; --main-color: rgb(0, 127, 136); --main-color-light: rgba(0, 127, 136, .5); --main-color-lighter: rgba(0, 127, 136, .1); --sub-color: rgb(242, 196, 76); --link-color: #1D1DFF; --link-color-fb: #3B599F; --link-color-line: #06C755; --status-success-color: #62B85E; --status-fail-color: #DD2121; --status-pending-color: #ad9f7a; --field-border-color: #777; --field-border-color-hover: #555; --field-background-color: #fff; --field-background-color-disabled: #eee; --field-placeholder-color: #999; } /* Remove all the styles of the "User-Agent-Style sheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio, table, thead, tbody, tfoot, th, tr, td, colgroup, col, .onePageShopping-info__content *):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ html, body { height: 100%; font-family: var(--normal-font-family); font-size: 16px; font-weight: 400; line-height: 1.7; word-wrap: break-word; } *:where(:not(.onePageShopping-info__content *)) { padding: 0; margin: 0; border: 0; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; -webkit-tap-highlight-color: transparent; } *:where(:not(.onePageShopping-info__content *))::before, *:where(:not(.onePageShopping-info__content *))::after { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { display: block; cursor: pointer; } /* Remove list styles (bullets/numbers) */ ol:where(:not(.onePageShopping-info__content *)), ul:where(:not(.onePageShopping-info__content *)), menu:where(:not(.onePageShopping-info__content *)) { list-style: none; } /* For images to not be able to exceed their container */ img:where(:not(.onePageShopping-info__content *)) { display: block; max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table:where(:not(.onePageShopping-info__content *)) { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } input::-ms-clear { display: none; } select::-ms-expand { display: none; } button { background-color: transparent; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .onePageShopping-footer { width: 100%; background-color: #483730; } @media (min-width: 1360px) { .onePageShopping-footer .onePageShopping__container { max-width: 1920px; padding: 0 40px; } } .onePageShopping-footer__info { width: 100%; background-color: #5c4940; } .onePageShopping-footer__infoBlock { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 15px 0; } @media (max-width: 991px) { .onePageShopping-footer__infoBlock { display: block; } } .onePageShopping-footer__infoBlock p { font-size: 15px; line-height: 1.2; color: #fff; } @media (max-width: 991px) { .onePageShopping-footer__infoBlock p { width: 100%; text-align: center; } } .onePageShopping-footer__infoBlock p:nth-child(n+2) { padding-left: 15px; margin-left: 15px; border-left: 1px solid rgba(255, 255, 255, 0.5); } @media (max-width: 991px) { .onePageShopping-footer__infoBlock p:nth-child(n+2) { padding: 10px 0 0; margin: 10px 0 0; border-left: none; border-top: 1px dotted rgba(255, 255, 255, 0.3); } } .onePageShopping-footer__infoBlock p a { display: inline; } .onePageShopping-footer__infoBlock p a:hover { opacity: 0.8; } .onePageShopping-footer__main { width: 100%; } .onePageShopping-footer__mainBlock { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 25px 0; } @media (max-width: 1199px) { .onePageShopping-footer__mainBlock { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (max-width: 991px) { .onePageShopping-footer__mainBlock { padding: 20px 0; } } .onePageShopping-footer__social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; width: 100%; margin-bottom: 20px; } @media (min-width: 992px) { .onePageShopping-footer__social { display: none; } } .onePageShopping-footer__social:empty { display: none; } .onePageShopping-footer__social-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; } .onePageShopping-footer__social-button img { width: 26px; } .onePageShopping-footer__social-button--fb { background-color: var(--link-color-fb); } .onePageShopping-footer__social-button--line { background-color: var(--link-color-line); } .onePageShopping-footer__links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 991px) { .onePageShopping-footer__links { -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } } @media (min-width: 992px) { .onePageShopping-footer__link:nth-child(n+2) { padding-left: 20px; margin-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.5); } } @media (max-width: 991px) { .onePageShopping-footer__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .onePageShopping-footer__link:nth-child(n+2) { padding-top: 10px; margin-top: 10px; border-top: 1px dotted rgba(255, 255, 255, 0.3); } } .onePageShopping-footer__link a, .onePageShopping-footer__link p { font-size: 13px; line-height: 1.2; color: #fff; } .onePageShopping-footer__link a:hover { opacity: 0.8; } @media (max-width: 1199px) { .onePageShopping-footer__copyright { margin-top: 15px; } } .onePageShopping-footer__copyright p { font-size: 11px; line-height: 1.4; color: rgba(255, 255, 255, 0.5); text-align: center; } .onePageShopping__main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; min-height: 100vh; min-height: 100dvh; } .onePageShopping__page { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; background-color: #fbfbfb; } .onePageShopping__box { width: 100%; } .onePageShopping__container { width: 100%; padding: 0 15px; margin: 0 auto; } @media (min-width: 1360px) { .onePageShopping__container { max-width: 1230px; } } @media (max-width: 1359px) and (min-width: 1200px) { .onePageShopping__container { max-width: 1190px; } } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping__container { max-width: 990px; } } @media (max-width: 991px) { .onePageShopping__container { max-width: 575px; padding: 0 10px; } } .onePageShopping-heading { width: 100%; padding: 30px 0; } @media (max-width: 991px) { .onePageShopping-heading { padding: 25px 0; } } @media (min-width: 992px) { .onePageShopping-heading .onePageShopping__container { max-width: 1920px; padding: 0 60px; } } @media (min-width: 992px) and (max-width: 1359px) { .onePageShopping-heading .onePageShopping__container { padding: 0 30px; } } .onePageShopping-heading__block { width: 100%; } .onePageShopping-heading__slider { width: 100%; } .onePageShopping-heading .swiper-wrapper { margin-bottom: 60px; } @media (max-width: 991px) { .onePageShopping-heading .swiper-wrapper { margin-bottom: 30px; } } .onePageShopping-heading .swiper-slide { border-radius: 40px; background-color: var(--main-color-lighter); overflow: hidden; } @media (max-width: 991px) { .onePageShopping-heading .swiper-slide { border-radius: 20px; } } .onePageShopping-heading .swiper-slide img { margin: 0 auto; } .onePageShopping-heading .swiper-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; top: calc(100% - 20px); bottom: auto; height: auto; } @media (max-width: 991px) { .onePageShopping-heading .swiper-pagination { gap: 6px; top: calc(100% - 15px); } } .onePageShopping-heading .swiper-pagination-bullet { display: block; width: 20px; height: 20px; margin: 0 !important; background-color: var(--main-color-light); border-radius: 10px; } @media (max-width: 991px) { .onePageShopping-heading .swiper-pagination-bullet { width: 15px; height: 15px; } } .onePageShopping-heading .swiper-pagination-bullet-active { width: 60px; background-color: var(--main-color); } @media (max-width: 991px) { .onePageShopping-heading .swiper-pagination-bullet-active { width: 30px; } } .onePageShopping-info { width: 100%; padding: 35px 0; background-color: #f5f5f5; } @media (max-width: 991px) { .onePageShopping-info { padding: 25px 0; } } .onePageShopping-info__block { width: 100%; } .onePageShopping-info__title { width: 100%; padding-bottom: 45px; border-bottom: 1px solid var(--main-color); } @media (max-width: 991px) { .onePageShopping-info__title { padding-bottom: 25px; } } .onePageShopping-info__title h1 { font-family: var(--title-font-family); font-size: 40px; font-weight: 700; line-height: 1.2; color: var(--main-color); text-align: center; } @media (max-width: 991px) { .onePageShopping-info__title h1 { font-size: 28px; } } .onePageShopping-info__image { position: relative; max-width: 1000px; padding: 30px; margin: 0 auto; } @media (max-width: 991px) { .onePageShopping-info__image { padding: 12px; } } .onePageShopping-info__image:nth-child(n+2) { margin-top: 50px; } @media (max-width: 991px) { .onePageShopping-info__image:nth-child(n+2) { margin-top: 30px; } } .onePageShopping-info__image::before { content: ""; position: absolute; top: 0; left: 0; width: calc(100% - 60px); height: calc(100% - 60px); background-color: var(--main-color); border-radius: 40px; z-index: 2; } @media screen and (max-width: 991px) { .onePageShopping-info__image::before { width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 20px; } } .onePageShopping-info__image::after { content: ""; position: absolute; bottom: 0; right: 0; width: calc(100% - 60px); height: calc(100% - 60px); background-color: var(--sub-color); border-radius: 40px; z-index: 2; } @media screen and (max-width: 991px) { .onePageShopping-info__image::after { width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 20px; } } .onePageShopping-info__image-box { position: relative; width: 100%; border-radius: 40px; overflow: hidden; z-index: 3; } @media screen and (max-width: 991px) { .onePageShopping-info__image-box { border-radius: 20px; } } .onePageShopping-info__image-box img { width: 100%; } .onePageShopping-info__content { width: 100%; padding-bottom: 45px; border-bottom: 1px solid var(--main-color); color: #333; } @media (max-width: 991px) { .onePageShopping-info__content { padding-bottom: 25px; } } .onePageShopping-info__content:nth-child(n+2) { margin-top: 50px; } @media (max-width: 991px) { .onePageShopping-info__content:nth-child(n+2) { margin-top: 30px; } } .onePageShopping-cart { width: 100%; padding: 35px 0; } @media (max-width: 991px) { .onePageShopping-cart { padding: 35px 0; } } @media (min-width: 992px) { .onePageShopping-cart--list .onePageShopping-cart__bar-list { display: -webkit-box; display: -ms-flexbox; display: flex; } } .onePageShopping-cart--list .onePageShopping-cart__list { gap: 20px; } .onePageShopping-cart--list .onePageShopping-cart__item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; padding: 20px 30px; } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-cart--list .onePageShopping-cart__item { padding: 20px; } } @media (max-width: 991px) { .onePageShopping-cart--list .onePageShopping-cart__item { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 10px; } } .onePageShopping-cart--list .onePageShopping-cart__image { width: 120px; border-radius: 10px; } @media (max-width: 991px) { .onePageShopping-cart--list .onePageShopping-cart__image { width: 60px; border-radius: 5px; } } .onePageShopping-cart--list .onePageShopping-cart__info { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: calc(100% - 465px); } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-cart--list .onePageShopping-cart__info { width: calc(100% - 435px); } } @media (max-width: 991px) { .onePageShopping-cart--list .onePageShopping-cart__info { width: calc(100% - 75px); padding-top: 6px; } } .onePageShopping-cart--list .onePageShopping-cart__info p { font-size: 20px; } @media (max-width: 991px) { .onePageShopping-cart--list .onePageShopping-cart__info p { font-size: 18px; } } .onePageShopping-cart--list .onePageShopping-cart__info p:nth-child(1) { width: calc(100% - 245px); } @media (min-width: 1360px) { .onePageShopping-cart--list .onePageShopping-cart__info p:nth-child(1) { padding-left: 25px; } } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-cart--list .onePageShopping-cart__info p:nth-child(1) { width: calc(100% - 215px); } } @media (max-width: 991px) { .onePageShopping-cart--list .onePageShopping-cart__info p:nth-child(1) { width: 100%; } } .onePageShopping-cart--list .onePageShopping-cart__info p:nth-child(2) { width: 230px; } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-cart--list .onePageShopping-cart__info p:nth-child(2) { width: 200px; } } @media (max-width: 991px) { .onePageShopping-cart--list .onePageShopping-cart__info p:nth-child(2) { width: 100%; font-size: 16px; } } .onePageShopping-cart--list .onePageShopping-cart__price { width: 200px; } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-cart--list .onePageShopping-cart__price { width: 170px; } } @media (max-width: 991px) { .onePageShopping-cart--list .onePageShopping-cart__price { width: 100%; margin-top: 15px; } } @media (max-width: 991px) { .onePageShopping-cart--list .onePageShopping-cart__price p { text-align: center; } .onePageShopping-cart--list .onePageShopping-cart__price p::before { content: "單價"; margin-right: 5px; font-size: 16px; color: #777; vertical-align: baseline; } } @media (min-width: 992px) { .onePageShopping-cart--list .onePageShopping-cart__price span { display: block; } } .onePageShopping-cart--list .onePageShopping-cart__price span:nth-child(1) { font-size: 28px; } @media (max-width: 1199px) { .onePageShopping-cart--list .onePageShopping-cart__price span:nth-child(1) { font-size: 24px; } } .onePageShopping-cart--list .onePageShopping-cart__price span:nth-child(2) { font-size: 20px; } @media (max-width: 1199px) { .onePageShopping-cart--list .onePageShopping-cart__price span:nth-child(2) { font-size: 16px; } } @media (max-width: 991px) { .onePageShopping-cart--list .onePageShopping-cart__price span:nth-child(2) { margin-left: 5px; } } .onePageShopping-cart--list .onePageShopping-cart__price span:nth-child(2)::before { content: "("; } .onePageShopping-cart--list .onePageShopping-cart__price span:nth-child(2)::after { content: ")"; } .onePageShopping-cart--list .onePageShopping-cart__quantity { width: 100px; } @media (max-width: 991px) { .onePageShopping-cart--list .onePageShopping-cart__quantity { width: 100%; margin-top: 15px; } } @media (min-width: 992px) { .onePageShopping-cart--card .onePageShopping-cart__bar-card { display: block; } } .onePageShopping-cart--card .onePageShopping-cart__list { gap: 40px; } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-cart--card .onePageShopping-cart__list { gap: 30px; } } @media (max-width: 991px) { .onePageShopping-cart--card .onePageShopping-cart__list { gap: 20px 10px; } } .onePageShopping-cart--card .onePageShopping-cart__item { width: calc((99.999% - 80px) / 3); padding: 20px 20px 162px; } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-cart--card .onePageShopping-cart__item { width: calc((99.999% - 60px) / 3); padding: 20px 15px 156px; } } @media (max-width: 991px) { .onePageShopping-cart--card .onePageShopping-cart__item { width: calc(50% - 5px); padding: 10px 10px 126px; } } .onePageShopping-cart--card .onePageShopping-cart__image { width: 100%; border-radius: 20px; } @media (max-width: 991px) { .onePageShopping-cart--card .onePageShopping-cart__image { border-radius: 10px; } } .onePageShopping-cart--card .onePageShopping-cart__info { width: 100%; margin-top: 20px; } @media (max-width: 991px) { .onePageShopping-cart--card .onePageShopping-cart__info { margin-top: 15px; } } .onePageShopping-cart--card .onePageShopping-cart__info p { font-size: 22px; text-align: center; } @media (max-width: 991px) { .onePageShopping-cart--card .onePageShopping-cart__info p { font-size: 18px; } } .onePageShopping-cart--card .onePageShopping-cart__price { position: absolute; bottom: 107px; left: 50%; width: calc(100% - 40px); -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-cart--card .onePageShopping-cart__price { width: calc(100% - 30px); } } @media (max-width: 991px) { .onePageShopping-cart--card .onePageShopping-cart__price { width: calc(100% - 20px); bottom: 65px; } } .onePageShopping-cart--card .onePageShopping-cart__price p { text-align: center; } @media (max-width: 991px) { .onePageShopping-cart--card .onePageShopping-cart__price span { display: block; } } .onePageShopping-cart--card .onePageShopping-cart__price span:nth-child(1) { font-size: 28px; } @media (max-width: 1199px) { .onePageShopping-cart--card .onePageShopping-cart__price span:nth-child(1) { font-size: 24px; } } @media (max-width: 991px) { .onePageShopping-cart--card .onePageShopping-cart__price span:nth-child(1) { font-size: 20px; } } .onePageShopping-cart--card .onePageShopping-cart__price span:nth-child(2) { font-size: 20px; } @media (max-width: 1199px) { .onePageShopping-cart--card .onePageShopping-cart__price span:nth-child(2) { font-size: 16px; } } @media (min-width: 992px) { .onePageShopping-cart--card .onePageShopping-cart__price span:nth-child(2) { margin-left: 10px; } } @media (max-width: 991px) { .onePageShopping-cart--card .onePageShopping-cart__price span:nth-child(2) { font-size: 14px; } } .onePageShopping-cart--card .onePageShopping-cart__quantity { position: absolute; bottom: 20px; left: 50%; width: calc(100% - 40px); -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-cart--card .onePageShopping-cart__quantity { width: calc(100% - 30px); } } @media (max-width: 991px) { .onePageShopping-cart--card .onePageShopping-cart__quantity { width: calc(100% - 20px); bottom: 10px; } } .onePageShopping-cart--card .onePageShopping-cart__quantity::before { content: "訂購數量"; display: block; width: 100%; margin-bottom: 5px; font-size: 16px; color: #555; text-align: center; } @media (max-width: 991px) { .onePageShopping-cart--card .onePageShopping-cart__quantity::before { content: none; } } .onePageShopping-cart__block { width: 100%; } .onePageShopping-cart__title { width: 100%; } .onePageShopping-cart__title p { font-family: var(--title-font-family); font-size: 40px; font-weight: 700; line-height: 1.2; color: #333; text-align: center; } @media (max-width: 991px) { .onePageShopping-cart__title p { font-size: 28px; } } .onePageShopping-cart__content { width: 100%; margin-top: 30px; } @media (max-width: 991px) { .onePageShopping-cart__content { margin-top: 30px; } } .onePageShopping-cart__tabs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .onePageShopping-cart__tab { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; width: 42px; height: 42px; } @media (max-width: 991px) { .onePageShopping-cart__tab { gap: 3px; width: 36px; height: 36px; } } .onePageShopping-cart__tab:nth-child(n+2) { margin-left: 30px; } @media (max-width: 991px) { .onePageShopping-cart__tab:nth-child(n+2) { margin-left: 20px; } } .onePageShopping-cart__tab i { background-color: #bbb; border-radius: 4px; } .onePageShopping-cart__tab--active i { background-color: var(--main-color); } .onePageShopping-cart__tab--list i { width: 100%; height: calc(50% - 2px); } @media (max-width: 991px) { .onePageShopping-cart__tab--list i { height: calc(50% - 1.5px); } } .onePageShopping-cart__tab--card i { width: calc(50% - 2px); height: calc(50% - 2px); } @media (max-width: 991px) { .onePageShopping-cart__tab--card i { width: calc(50% - 1.5px); height: calc(50% - 1.5px); } } .onePageShopping-cart__bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 38px; padding: 0 30px; margin-top: 25px; background-color: var(--sub-color); border-radius: 19px; } @media (max-width: 1199px) { .onePageShopping-cart__bar { padding: 0 20px; } } @media (max-width: 991px) { .onePageShopping-cart__bar { height: 36px; margin-top: 20px; border-radius: 18px; } } .onePageShopping-cart__bar p { font-size: 18px; line-height: 1; color: #333; } @media (max-width: 991px) { .onePageShopping-cart__bar p { font-size: 16px; } } .onePageShopping-cart__bar-card { display: none; width: 100%; } @media (max-width: 991px) { .onePageShopping-cart__bar-card { display: block; } } .onePageShopping-cart__bar-card p { width: 100%; text-align: center; } .onePageShopping-cart__bar-list { display: none; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .onePageShopping-cart__bar-list p:nth-child(1) { width: calc(100% - 575px); } @media (max-width: 1199px) { .onePageShopping-cart__bar-list p:nth-child(1) { width: calc(100% - 515px); } } .onePageShopping-cart__bar-list p:nth-child(2) { width: 230px; } @media (max-width: 1199px) { .onePageShopping-cart__bar-list p:nth-child(2) { width: 200px; } } .onePageShopping-cart__bar-list p:nth-child(3) { width: 200px; } @media (max-width: 1199px) { .onePageShopping-cart__bar-list p:nth-child(3) { width: 170px; } } .onePageShopping-cart__bar-list p:nth-child(4) { width: 100px; } .onePageShopping-cart__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; width: 100%; margin-top: 20px; } .onePageShopping-cart__item { position: relative; background-color: #fff; border-radius: 15px; border: 1px solid #ddd; } .onePageShopping-cart__image { position: relative; background-color: var(--main-color-lighter); overflow: hidden; } .onePageShopping-cart__image::before { content: ""; position: relative; display: block; width: 100%; padding-bottom: 100%; z-index: 1; } .onePageShopping-cart__image img { position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .onePageShopping-cart__info p { font-family: var(--title-font-family); font-weight: 500; line-height: 1.4; color: #333; } .onePageShopping-cart__price span:nth-child(1) { font-family: var(--title-font-family); font-weight: 700; line-height: 1.4; color: #333; } .onePageShopping-cart__price span:nth-child(2) { line-height: 1.4; color: #aaa; text-decoration: line-through; } .onePageShopping-cart__quantity .onePageShopping-form__select select { height: 40px; font-size: 16px; line-height: 38px; text-align: center; } .onePageShopping-cart__box { width: 100%; } .onePageShopping-cart__box:nth-child(n+2) { padding-top: 30px; margin-top: 40px; border-top: 1px solid #aaa; } @media (max-width: 991px) { .onePageShopping-cart__box:nth-child(n+2) { padding-top: 25px; margin-top: 25px; } } .onePageShopping-cart__discount { width: 100%; } .onePageShopping-cart__discount-title { width: 100%; font-family: var(--title-font-family); font-size: 20px; font-weight: 500; line-height: 1; color: #333; } .onePageShopping-cart__discount-list { width: 100%; margin-top: 20px; } @media (max-width: 991px) { .onePageShopping-cart__discount-list { margin-top: 15px; } } .onePageShopping-cart__discount-item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .onePageShopping-cart__discount-item:nth-child(n+2) { margin-top: 20px; } @media (max-width: 991px) { .onePageShopping-cart__discount-item:nth-child(n+2) { margin-top: 12px; } } .onePageShopping-cart__discount-item p:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; background-color: #eee; border-radius: 20px 20px 0 20px; } @media (max-width: 991px) { .onePageShopping-cart__discount-item p:nth-child(1) { width: 110px; } } .onePageShopping-cart__discount-item p:nth-child(1) span { color: #999; } .onePageShopping-cart__discount-item p:nth-child(1) span:nth-child(1) { display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 20px; height: 20px; margin-right: 5px; font-size: 24px; } @media (max-width: 991px) { .onePageShopping-cart__discount-item p:nth-child(1) span:nth-child(1) { width: 16px; height: 16px; font-size: 20px; } } .onePageShopping-cart__discount-item p:nth-child(1) span:nth-child(2) { font-family: var(--title-font-family); font-size: 20px; font-weight: 500; } @media (max-width: 991px) { .onePageShopping-cart__discount-item p:nth-child(1) span:nth-child(2) { font-size: 16px; } } .onePageShopping-cart__discount-item p:nth-child(2) { width: calc(100% - 160px); } @media (min-width: 992px) { .onePageShopping-cart__discount-item p:nth-child(2) { padding-top: 4px; } } @media (max-width: 991px) { .onePageShopping-cart__discount-item p:nth-child(2) { width: 100%; margin-top: 10px; } } .onePageShopping-cart__discount-item p:nth-child(2) span:nth-child(1) { font-family: var(--title-font-family); font-size: 24px; font-weight: 500; line-height: 1.2; color: #333; } @media (max-width: 991px) { .onePageShopping-cart__discount-item p:nth-child(2) span:nth-child(1) { font-size: 20px; } } .onePageShopping-cart__discount-item p:nth-child(2) span:nth-child(2) { margin-left: 5px; font-size: 18px; line-height: 1.4; color: var(--main-color); } @media (max-width: 991px) { .onePageShopping-cart__discount-item p:nth-child(2) span:nth-child(2) { display: block; width: 100%; margin: 3px 0 0; font-size: 16px; } } .onePageShopping-cart__discount-item--active p:nth-child(1) { background-color: var(--sub-color); } .onePageShopping-cart__discount-item--active p:nth-child(1) span { color: #333; } .onePageShopping-cart__discount-item--active p:nth-child(1) span:nth-child(1) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .onePageShopping-cart__discount-item--active p:nth-child(2) span:nth-child(2) { color: #777; } @media (max-width: 991px) { .onePageShopping-cart__discount-item--active p:nth-child(2) span:nth-child(2) { display: none; } } .onePageShopping-cart__total { width: 100%; text-align: center; } .onePageShopping-cart__total span:nth-child(1) { font-size: 20px; line-height: 1; color: #483730; } @media (max-width: 991px) { .onePageShopping-cart__total span:nth-child(1) { display: block; width: 100%; font-size: 16px; } } .onePageShopping-cart__total span:nth-child(1)::before { content: "商品"; } @media (max-width: 991px) { .onePageShopping-cart__total span:nth-child(1)::before { content: none; } } .onePageShopping-cart__total span:nth-child(2) { font-family: var(--title-font-family); font-size: 36px; font-weight: 700; line-height: 1; color: #333; } @media (max-width: 991px) { .onePageShopping-cart__total span:nth-child(2) { display: block; width: 100%; margin-top: 10px; font-size: 24px; } } .onePageShopping-cart__button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; max-width: 300px; height: 60px; margin: 30px auto 0; font-family: var(--title-font-family); font-size: 20px; font-weight: 500; line-height: 1; color: #fff; background-color: var(--main-color); border-radius: 30px; } @media (max-width: 991px) { .onePageShopping-cart__button { display: none; } } .onePageShopping-cart__button:hover { background-color: var(--main-color-light); } .onePageShopping-table { width: 100%; padding: 50px 0 30px; background-color: #f5f5f5; } @media (max-width: 991px) { .onePageShopping-table { padding: 35px 0 30px; } } .onePageShopping-table--query { padding: 45px 0; background-color: #fbfbfb; } @media (max-width: 991px) { .onePageShopping-table--query { padding: 35px 0; } } .onePageShopping-table__block { width: 100%; } .onePageShopping-table__title { width: 100%; } .onePageShopping-table__title p { font-family: var(--title-font-family); font-size: 40px; font-weight: 700; line-height: 1.2; color: #333; text-align: center; } @media (max-width: 991px) { .onePageShopping-table__title p { font-size: 28px; } } .onePageShopping-table__content { width: 100%; margin-top: 50px; } @media (max-width: 991px) { .onePageShopping-table__content { margin-top: 30px; } } .onePageShopping-table__box { width: 100%; padding: 30px; background-color: #fff; border-radius: 20px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-table__box { padding: 30px 20px; } } @media (max-width: 991px) { .onePageShopping-table__box { padding: 20px 10px; border-radius: 10px; } } .onePageShopping-table__box:nth-child(n+2) { margin-top: 30px; } @media (max-width: 991px) { .onePageShopping-table__box:nth-child(n+2) { margin-top: 20px; } } .onePageShopping-table__box-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .onePageShopping-table__box-title > p { width: calc(100% - 34px); font-family: var(--title-font-family); font-size: 28px; font-weight: 700; line-height: 1; color: #333; } @media (max-width: 991px) { .onePageShopping-table__box-title > p { font-size: 22px; font-weight: 500; } } .onePageShopping-table__box-title > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 24px; height: 24px; background-color: var(--main-color); border-radius: 5px; } .onePageShopping-table__box-title > a:hover { background-color: var(--main-color-light); } .onePageShopping-table__box-title > a span { font-size: 24px; color: #fff; } .onePageShopping-table__box-title > a span:nth-child(2) { display: none; } @media (max-width: 991px) { .onePageShopping-table__box-title:has(.onePageShopping-form__checkbox) { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .onePageShopping-table__box-title:has(.onePageShopping-form__checkbox) > p { width: auto; white-space: nowrap; } .onePageShopping-table__box-title .onePageShopping-form__checkbox { padding: 0 10px; } @media (max-width: 991px) { .onePageShopping-table__box-title .onePageShopping-form__checkbox { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; padding: 0 0 15px; } } .onePageShopping-table__box-content { width: 100%; padding-top: 20px; margin-top: 15px; border-top: 1px solid #ccc; } .onePageShopping-table__box--closed .onePageShopping-table__box-title a span:nth-child(1) { display: none; } .onePageShopping-table__box--closed .onePageShopping-table__box-title a span:nth-child(2) { display: block; } .onePageShopping-table__box--closed .onePageShopping-table__box-content { height: 0; padding: 0; margin: 0; border-top: none; overflow: hidden; } .onePageShopping-table__summary { width: 100%; margin-top: 20px; } .onePageShopping-table__summary-table { width: 100%; border-radius: 10px; border: 1px solid var(--sub-color); overflow: hidden; } .onePageShopping-table__summary-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; height: 36px; padding: 0 20px; background-color: var(--sub-color); } @media (max-width: 991px) { .onePageShopping-table__summary-head { display: none; } } .onePageShopping-table__summary-head p { font-family: var(--title-font-family); font-size: 16px; font-weight: 500; line-height: 1; color: #333; } .onePageShopping-table__summary-head p:nth-child(1) { width: calc(100% - 586px); } @media (max-width: 1199px) { .onePageShopping-table__summary-head p:nth-child(1) { width: calc(100% - 506px); } } .onePageShopping-table__summary-head p:nth-child(2) { width: 240px; } @media (max-width: 1199px) { .onePageShopping-table__summary-head p:nth-child(2) { width: 220px; } } .onePageShopping-table__summary-head p:nth-child(3) { width: 150px; } @media (max-width: 1199px) { .onePageShopping-table__summary-head p:nth-child(3) { width: 130px; } } .onePageShopping-table__summary-head p:nth-child(4) { width: 100px; } @media (max-width: 1199px) { .onePageShopping-table__summary-head p:nth-child(4) { width: 60px; } } .onePageShopping-table__summary-head p:nth-child(5) { width: 36px; } .onePageShopping-table__summary-list { width: 100%; } .onePageShopping-table__summary-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; padding: 10px 20px; } @media (max-width: 991px) { .onePageShopping-table__summary-item { padding: 15px 10px; } .onePageShopping-table__summary-item:nth-child(even) { background-color: #f9f9f9; } } .onePageShopping-table__summary-item:nth-child(n+2) { border-top: 1px solid var(--sub-color); } .onePageShopping-table__summary-item p { width: 100%; font-family: var(--title-font-family); font-size: 18px; font-weight: 500; line-height: 1.4; color: #333; } @media (min-width: 992px) { .onePageShopping-table__summary-item p:nth-child(1) { width: calc(100% - 586px); } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary-item p:nth-child(1) { width: calc(100% - 506px); } } @media (min-width: 992px) { .onePageShopping-table__summary-item p:nth-child(2) { width: 240px; } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary-item p:nth-child(2) { width: 220px; } } @media (min-width: 992px) { .onePageShopping-table__summary-item p:nth-child(3) { width: 150px; } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary-item p:nth-child(3) { width: 130px; } } @media (min-width: 992px) { .onePageShopping-table__summary-item p:nth-child(4) { width: 100px; } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary-item p:nth-child(4) { width: 60px; } } @media (max-width: 991px) { .onePageShopping-table__summary-item p { position: relative; padding-left: 40px; font-size: 16px; font-weight: 400; z-index: 1; } .onePageShopping-table__summary-item p:nth-child(n+2) { margin-top: 5px; } .onePageShopping-table__summary-item p::before { position: absolute; top: 0; left: 0; font-family: var(--normal-font-family); font-size: 16px; color: #999; } .onePageShopping-table__summary-item p:nth-child(1) { padding-right: 30px; } .onePageShopping-table__summary-item p:nth-child(1)::before { content: "商品"; } .onePageShopping-table__summary-item p:nth-child(2)::before { content: "規格"; } .onePageShopping-table__summary-item p:nth-child(3)::before { content: "單價"; } .onePageShopping-table__summary-item p:nth-child(4)::before { content: "數量"; } } .onePageShopping-table__summary-item a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 36px; height: 36px; font-size: 40px; color: #999; } @media (max-width: 991px) { .onePageShopping-table__summary-item a { position: absolute; top: 10px; right: 5px; width: 30px; height: 30px; font-size: 36px; } } .onePageShopping-table__summary-item a:hover { color: var(--status-fail-color); } @media (min-width: 992px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-head p:nth-child(1) { width: calc(100% - 535px); } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-head p:nth-child(1) { width: calc(100% - 455px); } } @media (min-width: 992px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-head p:nth-child(2) { width: 240px; } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-head p:nth-child(2) { width: 220px; } } @media (min-width: 992px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-head p:nth-child(3) { width: 100px; } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-head p:nth-child(3) { width: 60px; } } @media (min-width: 992px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-head p:nth-child(4) { width: 150px; } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-head p:nth-child(4) { width: 130px; } } @media (min-width: 992px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-item p:nth-child(1) { width: calc(100% - 535px); } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-item p:nth-child(1) { width: calc(100% - 455px); } } @media (min-width: 992px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-item p:nth-child(2) { width: 240px; } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-item p:nth-child(2) { width: 220px; } } @media (min-width: 992px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-item p:nth-child(3) { width: 100px; } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-item p:nth-child(3) { width: 60px; } } @media (min-width: 992px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-item p:nth-child(4) { width: 150px; } } @media (min-width: 992px) and (max-width: 1199px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-item p:nth-child(4) { width: 130px; } } @media (max-width: 991px) { .onePageShopping-table__summary--query .onePageShopping-table__summary-item p:nth-child(1) { padding-right: 0; } } .onePageShopping-table__subtotal { width: 100%; margin-top: 20px; } .onePageShopping-table__subtotal-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } @media (min-width: 992px) { .onePageShopping-table__subtotal-item { padding: 0 21px; } } .onePageShopping-table__subtotal-item:nth-child(n+2) { margin-top: 15px; } @media (max-width: 991px) { .onePageShopping-table__subtotal-item:nth-child(n+2) { margin-top: 12px; } } .onePageShopping-table__subtotal-item p:nth-child(1) { font-size: 18px; line-height: 1; color: #555; } @media (max-width: 991px) { .onePageShopping-table__subtotal-item p:nth-child(1) { font-size: 16px; } } .onePageShopping-table__subtotal-item p:nth-child(2) { font-family: var(--title-font-family); font-size: 22px; font-weight: 500; line-height: 1; color: #333; } @media (min-width: 992px) { .onePageShopping-table__subtotal-item p:nth-child(2) { width: 150px; } } @media (max-width: 991px) { .onePageShopping-table__subtotal-item p:nth-child(2) { font-size: 20px; } } .onePageShopping-table__subtotal-item p:nth-child(2) span { font-size: 16px; font-weight: 400; } .onePageShopping-table__subtotal-item--discount p:nth-child(2) { color: var(--status-fail-color); } .onePageShopping-table__subtotal-main { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; margin-top: 20px; padding-top: 20px; border-top: 1px solid #333; } @media (min-width: 992px) { .onePageShopping-table__subtotal-main { padding: 20px 21px 0; } } .onePageShopping-table__subtotal-main p { font-family: var(--title-font-family); } @media (max-width: 991px) { .onePageShopping-table__subtotal-main p { width: 100%; text-align: center; } } .onePageShopping-table__subtotal-main p:nth-child(1) { font-size: 24px; line-height: 1; color: #555; } @media (max-width: 991px) { .onePageShopping-table__subtotal-main p:nth-child(1) { font-size: 20px; } } .onePageShopping-table__subtotal-main p:nth-child(2) { font-size: 36px; font-weight: 700; line-height: 1; color: #333; } @media (max-width: 991px) { .onePageShopping-table__subtotal-main p:nth-child(2) { margin-top: 10px; font-size: 28px; } } .onePageShopping-table__notice { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 20px 30px; background-color: var(--main-color-lighter); border-radius: 20px; } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-table__notice { padding: 20px; } } @media (max-width: 991px) { .onePageShopping-table__notice { padding: 20px 10px; border-radius: 10px; } } .onePageShopping-table__notice:nth-child(n+2) { margin-top: 30px; } @media (max-width: 991px) { .onePageShopping-table__notice:nth-child(n+2) { margin-top: 20px; } } .onePageShopping-table__notice-title { width: 210px; } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-table__notice-title { width: 200px; } } @media (max-width: 991px) { .onePageShopping-table__notice-title { width: 100%; } } .onePageShopping-table__notice-title p { font-family: var(--title-font-family); font-size: 18px; font-weight: 500; line-height: 1.2; color: var(--main-color); } @media (max-width: 991px) { .onePageShopping-table__notice-title p { text-align: center; } } .onePageShopping-table__notice-list { width: calc(100% - 210px); padding-left: 30px; border-left: 1px solid #aaa; } @media (max-width: 1199px) and (min-width: 992px) { .onePageShopping-table__notice-list { padding-left: 20px; } } @media (max-width: 991px) { .onePageShopping-table__notice-list { width: 100%; padding: 15px 0 0; margin-top: 15px; border-left: none; border-top: 1px solid #aaa; } } .onePageShopping-table__notice-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .onePageShopping-table__notice-item:nth-child(n+2) { margin-top: 10px; } @media (max-width: 991px) { .onePageShopping-table__notice-item:nth-child(n+2) { margin-top: 6px; } } .onePageShopping-table__notice-item p:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; line-height: 1.4; color: #555; } .onePageShopping-table__notice-item p:nth-child(1)::after { content: "："; } .onePageShopping-table__notice-item p:nth-child(1) span { display: block; width: 80px; } .onePageShopping-table__notice-item p:nth-child(2) { width: calc(100% - 96px); font-family: var(--title-font-family); font-size: 16px; font-weight: 500; line-height: 1.4; color: #333; } .onePageShopping-table__notice-item p a:hover { opacity: 0.8; } .onePageShopping-table__checkbox { width: 100%; margin-top: 30px; } @media (max-width: 991px) { .onePageShopping-table__checkbox { margin-top: 20px; } } .onePageShopping-table__checkbox .onePageShopping-form__checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; } .onePageShopping-table__checkbox .onePageShopping-form__checkbox-item input:checked + p::before { background-color: var(--sub-color); background-image: url("/Images/OnePagePay/checkbox_check2.svg"); border-color: var(--sub-color); } .onePageShopping-table__checkbox .onePageShopping-form__checkbox-item input:checked:disabled + p::before { background-color: var(--sub-color); border-color: var(--sub-color); } @media (min-width: 992px) { .onePageShopping-table__checkbox .onePageShopping-form__checkbox-item p::before { width: 30px; min-width: 30px; height: 30px; min-height: 30px; } } @media (min-width: 992px) { .onePageShopping-table__checkbox .onePageShopping-form__checkbox-item p span:nth-child(1) { padding-top: 4px; } } .onePageShopping-table__query { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .onePageShopping-table__query-form { width: calc(100% - 130px); } @media (max-width: 991px) { .onePageShopping-table__query-form { width: 100%; } } .onePageShopping-table__query-submit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100px; height: 50px; background-color: var(--main-color); border-radius: 5px; } @media (max-width: 991px) { .onePageShopping-table__query-submit { width: 100%; height: 40px; margin-top: 20px; } } .onePageShopping-table__query-submit:not(:disabled):hover { background-color: var(--main-color-light); } .onePageShopping-table__query-submit:disabled { background-color: var(--main-color-lighter); cursor: not-allowed; } .onePageShopping-table__query-submit:disabled span:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; } .onePageShopping-table__query-submit span:nth-child(1) { display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 20px; height: 20px; margin-right: 5px; font-size: 20px; line-height: 1; color: #fff; -webkit-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media (max-width: 991px) { .onePageShopping-table__query-submit span:nth-child(1) { width: 18px; height: 18px; font-size: 18px; } } .onePageShopping-table__query-submit span:nth-child(2) { font-family: var(--title-font-family); font-size: 18px; font-weight: 500; line-height: 1; color: #fff; } @media (max-width: 991px) { .onePageShopping-table__query-submit span:nth-child(2) { font-size: 16px; } } .onePageShopping-table__query-box { width: 100%; } .onePageShopping-table__query-box:nth-child(n+2) { margin-top: 20px; } .onePageShopping-table__query-title { width: 100%; } .onePageShopping-table__query-title p span:nth-child(1) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 24px; height: 24px; margin-right: 5px; font-size: 18px; color: #fff; background-color: var(--sub-color); border-radius: 50%; vertical-align: middle; } .onePageShopping-table__query-title p span:nth-child(2) { font-family: var(--title-font-family); font-size: 18px; font-weight: 500; line-height: 1; color: #333; vertical-align: middle; } .onePageShopping-table__query-content { width: 100%; padding: 20px; margin-top: 10px; background-color: #f9f9f9; border-radius: 10px; } @media (max-width: 991px) { .onePageShopping-table__query-content { padding: 20px 10px; border-radius: 5px; } } .onePageShopping-buttons { width: 100%; padding: 0 0 65px; background-color: #f5f5f5; } @media (max-width: 991px) { .onePageShopping-buttons { padding: 0 0 35px; } } .onePageShopping-buttons__block { width: 100%; } .onePageShopping-buttons__content { width: 100%; padding-top: 50px; border-top: 1px solid #333; } @media (max-width: 991px) { .onePageShopping-buttons__content { padding-top: 30px; } } .onePageShopping-buttons__box { width: 100%; } @media (max-width: 991px) { .onePageShopping-buttons__box:has(.onePageShopping-buttons__list.is-floating) { height: 50px; } } @media (max-width: 991px) { .onePageShopping-buttons__list.is-floating { position: fixed; bottom: 10px; left: 50%; width: calc(100% - 20px); max-width: 555px; background-color: #fff; border-radius: 25px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 99; } } .onePageShopping-buttons__button { display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 50px; font-family: var(--title-font-family); font-size: 18px; font-weight: 500; line-height: 1; color: #fff; background-color: var(--main-color); border-radius: 25px; } @media (max-width: 991px) { .onePageShopping-buttons__button.is-active { display: -webkit-box; display: -ms-flexbox; display: flex; } } .onePageShopping-buttons__button:hover { background-color: var(--main-color-light); } .onePageShopping-buttons__submit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; max-width: 300px; height: 60px; padding: 4px; margin: 0 auto; background-color: var(--main-color); border-radius: 30px; overflow: hidden; } @media (max-width: 991px) { .onePageShopping-buttons__submit { display: none; max-width: none; height: 50px; border-radius: 25px; } .onePageShopping-buttons__submit.is-active { display: -webkit-box; display: -ms-flexbox; display: flex; } } .onePageShopping-buttons__submit:not(:disabled):hover { background-color: var(--main-color-light); } .onePageShopping-buttons__submit:disabled { background-color: var(--main-color-lighter); cursor: not-allowed; } .onePageShopping-buttons__submit:disabled p:nth-child(2) span:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; } .onePageShopping-buttons__submit p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50%; } .onePageShopping-buttons__submit p:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; font-family: var(--title-font-family); font-size: 22px; font-weight: 700; line-height: 1; color: #333; border-radius: 30px 0 0 30px; background-color: rgba(255, 255, 255, 0.95); } @media (max-width: 991px) { .onePageShopping-buttons__submit p:nth-child(1) { font-size: 20px; } } .onePageShopping-buttons__submit p:nth-child(2) span:nth-child(1) { display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 24px; height: 24px; margin-right: 5px; font-size: 24px; line-height: 1; color: #fff; -webkit-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; } @keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media (max-width: 991px) { .onePageShopping-buttons__submit p:nth-child(2) span:nth-child(1) { width: 20px; height: 20px; font-size: 20px; } } .onePageShopping-buttons__submit p:nth-child(2) span:nth-child(2) { font-family: var(--title-font-family); font-size: 20px; font-weight: 500; line-height: 1; color: #fff; } @media (max-width: 991px) { .onePageShopping-buttons__submit p:nth-child(2) span:nth-child(2) { font-size: 18px; } } .onePageShopping-form { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 20px 30px; width: 100%; } .onePageShopping-form__row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc(50% - 15px); } @media (max-width: 991px) { .onePageShopping-form__row { width: 100%; } } .onePageShopping-form__row--full { width: 100%; } .onePageShopping-form__row--error .onePageShopping-form__select select { border-color: var(--status-fail-color) !important; } .onePageShopping-form__row--error .onePageShopping-form__input input { border-color: var(--status-fail-color) !important; } .onePageShopping-form__row--error .onePageShopping-form__textarea textarea { border-color: var(--status-fail-color) !important; } .onePageShopping-form__row--error .onePageShopping-form__error { display: -webkit-box; display: -ms-flexbox; display: flex; } .onePageShopping-form__title { width: 140px; } @media (max-width: 991px) { .onePageShopping-form__title { width: 100%; } } .onePageShopping-form__title p { width: 100%; } .onePageShopping-form__title p span:nth-child(1) { font-family: var(--title-font-family); font-size: 18px; font-weight: 500; line-height: 1.2; } @media (max-width: 991px) { .onePageShopping-form__title p span:nth-child(1) { font-size: 16px; font-weight: 400; } } .onePageShopping-form__title p span:nth-child(2) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 2px 0 0 5px; font-size: 14px; color: #fff; background-color: #999; border-radius: 50%; } @media (max-width: 991px) { .onePageShopping-form__title p span:nth-child(2) { margin: 1px 0 0 5px; } } .onePageShopping-form__title > a { display: inline-block; padding: 3px 5px; font-size: 15px; line-height: 1; color: #333; background-color: var(--sub-color); border-radius: 3px; } @media (max-width: 991px) { .onePageShopping-form__title > a { margin-left: 10px; } } .onePageShopping-form__title > a:hover { opacity: 0.8; } @media (max-width: 991px) { .onePageShopping-form__title:has(> a) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .onePageShopping-form__title:has(> a) p { width: auto; } } @media (min-width: 992px) { .onePageShopping-form__title:not(:has(> a)) { margin-top: 14px; } } .onePageShopping-form__title--required p span:nth-child(1)::after { content: "*"; color: var(--status-fail-color); } .onePageShopping-form__field { width: calc(100% - 150px); } @media (max-width: 991px) { .onePageShopping-form__field { width: 100%; margin-top: 10px; } } .onePageShopping-form__error { display: none; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--status-fail-color); } .onePageShopping-form__error span:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 14px; height: 14px; margin-top: 2px; font-size: 14px; color: var(--status-fail-color); } .onePageShopping-form__error span:nth-child(2) { width: calc(100% - 17px); font-size: 14px; line-height: 1.4; color: var(--status-fail-color); } .onePageShopping-form__input { width: 100%; } .onePageShopping-form__input input { width: 100%; height: 50px; padding: 0 15px; font-size: 18px; line-height: 48px; color: #333; background-color: var(--field-background-color); border-radius: 5px; border: 1px solid var(--field-border-color); } @media (max-width: 991px) { .onePageShopping-form__input input { height: 40px; font-size: 16px; line-height: 38px; } } .onePageShopping-form__input input::-webkit-input-placeholder { color: var(--field-placeholder-color); } .onePageShopping-form__input input::-moz-placeholder { color: var(--field-placeholder-color); } .onePageShopping-form__input input:-ms-input-placeholder { color: var(--field-placeholder-color); } .onePageShopping-form__input input::-ms-input-placeholder { color: var(--field-placeholder-color); } .onePageShopping-form__input input::placeholder { color: var(--field-placeholder-color); } .onePageShopping-form__input input:disabled { background-color: var(--field-background-color-disabled); cursor: not-allowed; } .onePageShopping-form__input input:-moz-read-only { background-color: var(--field-background-color-disabled); } .onePageShopping-form__input input:read-only { background-color: var(--field-background-color-disabled); } .onePageShopping-form__input input:not(:disabled):not(:-moz-read-only):hover { border-color: var(--field-border-color-hover); } .onePageShopping-form__input input:not(:disabled):not(:read-only):hover { border-color: var(--field-border-color-hover); } .onePageShopping-form__input input:not(:disabled):not(:-moz-read-only):focus, .onePageShopping-form__input input:not(:disabled):not(:-moz-read-only):active { border-color: var(--sub-color); } .onePageShopping-form__input input:not(:disabled):not(:read-only):focus, .onePageShopping-form__input input:not(:disabled):not(:read-only):active { border-color: var(--sub-color); } .onePageShopping-form__textarea { width: 100%; } .onePageShopping-form__textarea textarea { display: block; width: 100%; min-width: 100%; max-width: 100%; min-height: 70px; padding: 10px 15px; font-size: 18px; color: #333; background-color: var(--field-background-color); border-radius: 5px; border: 1px solid var(--field-border-color); resize: vertical; } @media (max-width: 991px) { .onePageShopping-form__textarea textarea { padding: 7px 15px; font-size: 16px; } } .onePageShopping-form__textarea textarea::-webkit-input-placeholder { color: var(--field-placeholder-color); } .onePageShopping-form__textarea textarea::-moz-placeholder { color: var(--field-placeholder-color); } .onePageShopping-form__textarea textarea:-ms-input-placeholder { color: var(--field-placeholder-color); } .onePageShopping-form__textarea textarea::-ms-input-placeholder { color: var(--field-placeholder-color); } .onePageShopping-form__textarea textarea::placeholder { color: var(--field-placeholder-color); } .onePageShopping-form__textarea textarea:disabled { background-color: var(--field-background-color-disabled); cursor: not-allowed; } .onePageShopping-form__textarea textarea:-moz-read-only { background-color: var(--field-background-color-disabled); } .onePageShopping-form__textarea textarea:read-only { background-color: var(--field-background-color-disabled); } .onePageShopping-form__textarea textarea:not(:disabled):not(:-moz-read-only):hover { border-color: var(--field-border-color-hover); } .onePageShopping-form__textarea textarea:not(:disabled):not(:read-only):hover { border-color: var(--field-border-color-hover); } .onePageShopping-form__textarea textarea:not(:disabled):not(:-moz-read-only):focus, .onePageShopping-form__textarea textarea:not(:disabled):not(:-moz-read-only):active { border-color: var(--sub-color); } .onePageShopping-form__textarea textarea:not(:disabled):not(:read-only):focus, .onePageShopping-form__textarea textarea:not(:disabled):not(:read-only):active { border-color: var(--sub-color); } .onePageShopping-form__select { position: relative; width: 100%; } .onePageShopping-form__select select { position: relative; width: 100%; height: 50px; padding: 0 25px 0 15px; font-size: 18px; line-height: 48px; color: #333; background-color: var(--field-background-color); background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+); background-position: calc(100% - 5px) 50%; background-size: 20px 20px; background-repeat: no-repeat; border-radius: 5px; border: 1px solid var(--field-border-color); z-index: 1; } @media (max-width: 991px) { .onePageShopping-form__select select { height: 40px; font-size: 16px; line-height: 38px; } } .onePageShopping-form__select select:disabled { background-color: var(--field-background-color-disabled); cursor: not-allowed; } .onePageShopping-form__select select:not(:disabled):hover { border-color: var(--field-border-color-hover); } .onePageShopping-form__select select:not(:disabled):focus, .onePageShopping-form__select select:not(:disabled):active { border-color: var(--sub-color); } .onePageShopping-form__select select:has(option[value]:checked) + .onePageShopping-form__selectPlaceholder { display: none; } .onePageShopping-form__select select option:not([value]) { display: none; } .onePageShopping-form__selectPlaceholder { position: absolute; top: 0; left: 15px; width: calc(100% - 40px); height: 100%; font-size: 18px; line-height: 50px; color: var(--field-placeholder-color); white-space: nowrap; pointer-events: none; overflow: hidden; z-index: 2; } @media (max-width: 991px) { .onePageShopping-form__selectPlaceholder { font-size: 16px; line-height: 40px; } } .onePageShopping-form__checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc(100% + 20px); margin: -15px 0 0 -20px; padding: 13px 0; } @media (max-width: 991px) { .onePageShopping-form__checkbox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 8px 0; } } .onePageShopping-form__checkbox-item { display: block; min-width: 1px; margin: 15px 0 0 20px; cursor: pointer; } .onePageShopping-form__checkbox-item:hover input:not(:checked):not(:disabled) + p::before { border-color: var(--field-border-color-hover); } .onePageShopping-form__checkbox-item input { display: none; } .onePageShopping-form__checkbox-item input:checked + p::before { background-color: var(--main-color); background-image: url("/Images/OnePagePay/checkbox_check.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; border-color: var(--main-color); } .onePageShopping-form__checkbox-item input:checked:disabled + p::before { background-color: var(--main-color); border-color: var(--main-color); } .onePageShopping-form__checkbox-item input:disabled + p { cursor: not-allowed; } .onePageShopping-form__checkbox-item input:disabled + p::before { background-color: var(--field-background-color-disabled); } .onePageShopping-form__checkbox-item p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .onePageShopping-form__checkbox-item p::before { content: ""; display: block; width: 24px; min-width: 24px; height: 24px; min-height: 24px; margin-right: 10px; background-color: var(--field-background-color); border-radius: 5px; border: 1px solid var(--field-border-color); } .onePageShopping-form__checkbox-item p span:nth-child(1) { display: block; font-size: 18px; line-height: 1.4; color: #333; } @media (max-width: 991px) { .onePageShopping-form__checkbox-item p span:nth-child(1) { padding-top: 2px; font-size: 16px; } } .onePageShopping-form__checkbox-item p span:nth-child(1) a { display: inline; color: var(--link-color); text-decoration: underline; } .onePageShopping-form__checkbox-item p span:nth-child(1) a:hover { opacity: 0.8; } .onePageShopping-form__checkbox-item p span:nth-child(2) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 2px 0 0 5px; font-size: 14px; color: #fff; background-color: #999; border-radius: 50%; } @media (max-width: 991px) { .onePageShopping-form__checkbox-item p span:nth-child(2) { margin: 1px 0 0 5px; } } .onePageShopping-form__radio { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc(100% + 20px); margin: -15px 0 0 -20px; padding: 13px 0; } @media (max-width: 991px) { .onePageShopping-form__radio { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 8px 0; } } .onePageShopping-form__radio-item { display: block; min-width: 1px; margin: 15px 0 0 20px; cursor: pointer; } .onePageShopping-form__radio-item:hover input:not(:checked):not(:disabled) + p i { border-color: var(--field-border-color-hover); } .onePageShopping-form__radio-item input { display: none; } .onePageShopping-form__radio-item input:checked + p i::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background-color: var(--main-color); border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .onePageShopping-form__radio-item input:checked:disabled + p i { background-color: var(--main-color); } .onePageShopping-form__radio-item input:disabled + p { cursor: not-allowed; } .onePageShopping-form__radio-item input:disabled + p i { background-color: var(--field-background-color-disabled); } .onePageShopping-form__radio-item p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .onePageShopping-form__radio-item p i { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 24px; min-width: 24px; height: 24px; min-height: 24px; margin-right: 10px; background-color: var(--field-background-color); border-radius: 50%; border: 1px solid var(--field-border-color); } .onePageShopping-form__radio-item p span:nth-child(2) { display: block; font-size: 18px; line-height: 1.4; color: #333; } @media (max-width: 991px) { .onePageShopping-form__radio-item p span:nth-child(2) { padding-top: 2px; font-size: 16px; } } .onePageShopping-form__radio-item p span:nth-child(3) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 2px 0 0 5px; font-size: 14px; color: #fff; background-color: #999; border-radius: 50%; } @media (max-width: 991px) { .onePageShopping-form__radio-item p span:nth-child(3) { margin: 1px 0 0 5px; } } .onePageShopping-form__radio-children { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; position: relative; width: calc(100% - 5px); padding: 4px 14px; margin: 10px 0 0 5px; background-color: var(--main-color-lighter); border: 1px solid var(--main-color); border-radius: 5px; } @media (max-width: 991px) { .onePageShopping-form__radio-children { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; width: calc(100% - 20px); margin: 10px 0 0 20px; } .onePageShopping-form__radio-children::before { content: ""; position: absolute; top: -5px; left: 37px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid var(--main-color); border-top: none; } } .onePageShopping-form__radio-children:not(:has(*)) { display: none; } .onePageShopping-form__radio-childrenForm { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; position: relative; width: calc(100% + 130px); margin: 20px 0 0 -130px; } @media (max-width: 991px) { .onePageShopping-form__radio-childrenForm { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; width: calc(100% - 20px); padding: 14px; margin: 10px 0 0 20px; background-color: var(--main-color-lighter); border: 1px solid var(--main-color); border-radius: 5px; } .onePageShopping-form__radio-childrenForm::before { content: ""; position: absolute; top: -5px; left: 37px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid var(--main-color); border-top: none; } } .onePageShopping-form__radio-childrenForm:not(:has(*)) { display: none; } .onePageShopping-form__radio:has(.onePageShopping-form__radio-children) > .onePageShopping-form__radio-item, .onePageShopping-form__radio:has(.onePageShopping-form__radio-childrenForm) > .onePageShopping-form__radio-item { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } @media (max-width: 991px) { .onePageShopping-form__radio:has(.onePageShopping-form__radio-children) > .onePageShopping-form__radio-item:has(:checked), .onePageShopping-form__radio:has(.onePageShopping-form__radio-childrenForm) > .onePageShopping-form__radio-item:has(:checked) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .onePageShopping-form__radio:has(.onePageShopping-form__radio-children) > .onePageShopping-form__radio-item:has(:checked) ~ .onePageShopping-form__radio-item, .onePageShopping-form__radio:has(.onePageShopping-form__radio-childrenForm) > .onePageShopping-form__radio-item:has(:checked) ~ .onePageShopping-form__radio-item { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } } .onePageShopping-form__address { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 10px; width: 100%; } .onePageShopping-form__address .onePageShopping-form__select { width: calc(50% - 5px); } @media (min-width: 992px) { .onePageShopping-form__address .onePageShopping-form__select { width: 160px; } } .onePageShopping-form__address .onePageShopping-form__input { width: 100%; } @media (min-width: 992px) { .onePageShopping-form__address .onePageShopping-form__input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } .onePageShopping-form__map { width: 100%; } .onePageShopping-form__map button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 50px; background-color: var(--main-color); border-radius: 5px; } @media (max-width: 991px) { .onePageShopping-form__map button { height: 40px; } } .onePageShopping-form__map button span:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 20px; height: 20px; margin-right: 5px; font-size: 20px; line-height: 1; color: #fff; } .onePageShopping-form__map button span:nth-child(2) { font-size: 16px; line-height: 1; color: #fff; } .onePageShopping-form__map button:not(:disabled):hover { background-color: var(--main-color-light); } .onePageShopping-form__map button:disabled { background-color: var(--main-color-lighter); cursor: not-allowed; } .onePageShopping-form__map p { width: 100%; margin-top: 6px; font-size: 18px; line-height: 1.4; color: #555; } @media (max-width: 991px) { .onePageShopping-form__map p { font-size: 16px; } } .onePageShopping-form__map p:nth-child(2) { margin-top: 10px; } .onePageShopping-form__map p span { margin-left: 10px; font-weight: 700; color: #333; } .onePageShopping-form__text { width: 100%; padding: 12px 0; } @media (max-width: 991px) { .onePageShopping-form__text { padding: 0; } } .onePageShopping-form__text p { font-size: 18px; line-height: 26px; color: #333; } @media (max-width: 991px) { .onePageShopping-form__text p { font-size: 16px; line-height: 1.4; } } .onePageShopping-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 20px 30px; width: 100%; } .onePageShopping-list__row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc(50% - 15px); padding-bottom: 10px; border-bottom: 1px dotted #ccc; } @media (max-width: 991px) { .onePageShopping-list__row { width: 100%; } } .onePageShopping-list__row--full { width: 100%; } .onePageShopping-list__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 140px; } @media (min-width: 992px) { .onePageShopping-list__title { margin-top: 5px; } } .onePageShopping-list__title p { width: 100%; font-family: var(--title-font-family); font-size: 18px; font-weight: 500; line-height: 1.2; } @media (max-width: 991px) { .onePageShopping-list__title p { font-size: 16px; font-weight: 400; } } .onePageShopping-list__field { width: calc(100% - 150px); } @media (max-width: 991px) { .onePageShopping-list__field { width: 100%; margin-top: 10px; } } .onePageShopping-list__field p { width: 100%; font-size: 18px; color: #555; } .onePageShopping-list__field p span.price { font-weight: 700; color: var(--status-fail-color); } .onePageShopping-list__field p a { display: inline; color: var(--link-color); text-decoration: underline; } .onePageShopping-list__field p a:hover { opacity: 0.8; } .onePageShopping-list__status { display: inline-block; padding: 7px 10px; font-family: var(--title-font-family); font-size: 16px; line-height: 1; color: #fff; border-radius: 5px; } .onePageShopping-list__status--success { background-color: var(--status-success-color); } .onePageShopping-list__status--pending { background-color: var(--status-pending-color); } .onePageShopping-list__status--fail { background-color: var(--status-fail-color); } .onePageShopping-fixedButtons { position: fixed; bottom: 50px; right: 15px; -webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1)); z-index: 999; } @media (max-width: 991px) and (min-width: 576px) { .onePageShopping-fixedButtons { bottom: 70px; right: calc(50vw - 287.5px + 10px); } } @media (max-width: 575px) { .onePageShopping-fixedButtons { bottom: 70px; right: 10px; } } .onePageShopping-fixedButtons__button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 60px; height: 60px; border-radius: 50%; } @media (max-width: 991px) { .onePageShopping-fixedButtons__button { display: none; width: 50px; height: 50px; } } .onePageShopping-fixedButtons__button:nth-child(n+2) { margin-top: 10px; } .onePageShopping-fixedButtons__button--cart { background-color: var(--main-color); } .onePageShopping-fixedButtons__button--order { background-color: #483730; } .onePageShopping-fixedButtons__button--fb { background-color: var(--link-color-fb); } .onePageShopping-fixedButtons__button--line { background-color: var(--link-color-line); } .onePageShopping-fixedButtons__button--top { background-color: var(--sub-color); } @media (max-width: 991px) { .onePageShopping-fixedButtons__button.is-active { display: -webkit-box; display: -ms-flexbox; display: flex; } } .onePageShopping-fixedButtons__button span { font-size: 32px; color: #fff; } .onePageShopping-fixedButtons__button img { width: 36px; } .onePageShopping-fixedButtons__button:hover { -webkit-filter: brightness(1.1); filter: brightness(1.1); } .onePageShopping-dialog { position: fixed; top: 0; left: 0; width: 100vw; height: 0; background-color: rgba(0, 0, 0, 0.5); overflow-y: auto; z-index: 999; } .onePageShopping-dialog--showed { height: 100vh; height: 100dvh; } .onePageShopping-dialog--showed .onePageShopping-dialog__box { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .onePageShopping-dialog__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100vw; min-height: 100vh; min-height: 100dvh; padding: 10px; } .onePageShopping-dialog__box { width: 100%; max-width: 360px; padding: 30px; background-color: #fff; border-radius: 10px; border: 1px solid var(--main-color); -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition-property: opacity transform; transition-property: opacity transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } @media (max-width: 991px) { .onePageShopping-dialog__box { padding: 25px 20px; } } .onePageShopping-dialog__title { width: 100%; font-family: var(--title-font-family); font-size: 20px; font-weight: 500; line-height: 1.2; color: #333; text-align: center; } @media (max-width: 991px) { .onePageShopping-dialog__title { font-size: 18px; } } .onePageShopping-dialog__text { width: 100%; margin-top: 15px; font-size: 16px; color: #333; text-align: center; } .onePageShopping-dialog__text span { color: var(--status-fail-color); } .onePageShopping-dialog__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; margin-top: 15px; } .onePageShopping-dialog__submit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 40px; margin: 0 auto; background-color: var(--main-color); border-radius: 20px; } .onePageShopping-dialog__submit:not(:disabled):hover { background-color: var(--main-color-light); } .onePageShopping-dialog__submit:disabled { background-color: var(--main-color-lighter); cursor: not-allowed; } .onePageShopping-dialog__submit:disabled span:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; } .onePageShopping-dialog__submit span:nth-child(1) { display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 20px; height: 20px; margin-right: 5px; font-size: 20px; line-height: 1; color: #fff; -webkit-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; } @keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .onePageShopping-dialog__submit span:nth-child(2) { font-family: var(--title-font-family); font-size: 16px; line-height: 1; color: #fff; } .onePageShopping-dialog__cancel { margin-top: 10px; font-size: 15px; line-height: 1; color: #777; } .onePageShopping-dialog__cancel:not(:disabled):hover { color: #333; } .onePageShopping-dialog__cancel:disabled { color: #aaa; cursor: not-allowed; }