/* kobo_add_cart */ .js-onCart.buyButton { display: block; visibility: hidden; margin: 10px 0 0 0; padding: 10px 0; width: 100%; border-radius: 4px; background: rgb(255, 150, 0); transition: all 0.5s ease 0s; border: none; text-align: center; } .js-onCart.buyButton.js-onCartEvent { visibility: visible; } .js-onCart.buyButton span{ display: inline-block; position: relative; color: #fff; font-size: 12px; font-weight: bold; padding-left: 18px; line-height: 1; } .js-onCart.buyButton span:before{ content: ''; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-54%); width: 14px; height: 14px; background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2013%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.133%209.252l-1.089-7.26A1.305%201.305%200%20001.746.875H.313v.875h1.433c.218%200%20.4.156.433.372l1.089%207.26A1.305%201.305%200%20004.566%2010.5h6.684v-.875H4.566a.435.435%200%2001-.433-.373zm-.758%202.998a.875.875%200%20111.75%200%20.875.875%200%2001-1.75%200zm6.125%200a.875.875%200%20111.75%200%20.875.875%200%2001-1.75%200zM4.092%203.062l-.131-.874h7.726l-.32%204.5A1.75%201.75%200%20019.62%208.312H4.88l-.132-.876H9.62c.457%200%20.84-.357.873-.812l.254-3.563H4.092z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E); background-repeat: no-repeat; } .js-onCart.buyButton:hover{ background: rgb(250, 80, 7); cursor: pointer; } .js-onCart.buyButton.add, .js-onCart.buyButton.added, .js-onCart.buyButton.alert, .js-onCart.buyButton.placeholder{ background: rgb(247, 247, 247); cursor: default; } .js-onCart.buyButton.add span, .js-onCart.buyButton.added span, .js-onCart.buyButton.alert span{ color: rgb(51, 51, 51); } .js-onCart.buyButton.add span:before{ transform: translateY(-50%); height: 10px; background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2210%22%20viewBox%3D%220%200%2014%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.125%201.24363L12.5064%200.625L4.8125%208.31844L1.49363%205L0.875%205.61862L4.8125%209.55612L13.125%201.24363Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E); background-size: contain; } .js-onCart.buyButton.added span:before, .js-onCart.buyButton.alert span:before{ transform: translateY(-50%); background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2213%22%20viewBox%3D%220%200%2014%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.62508%200.860018L13.9101%2011.97C13.969%2012.077%2013.9987%2012.1977%2013.9961%2012.3198C13.9935%2012.442%2013.9588%2012.5613%2013.8954%2012.6657C13.832%2012.7702%2013.7422%2012.8561%2013.6351%2012.9148C13.5279%2012.9735%2013.4072%2013.0029%2013.2851%2013H0.715076C0.592939%2013.0029%200.47221%2012.9735%200.365057%2012.9148C0.257905%2012.8561%200.168115%2012.7702%200.104738%2012.6657C0.0413601%2012.5613%200.00663452%2012.442%200.00406055%2012.3198C0.00148659%2012.1977%200.0311553%2012.077%200.0900764%2011.97L6.37508%200.860018C6.43908%200.75114%206.53042%200.660872%206.64005%200.598153C6.74967%200.535435%206.87378%200.502441%207.00008%200.502441C7.12637%200.502441%207.25048%200.535435%207.36011%200.598153C7.46973%200.660872%207.56107%200.75114%207.62508%200.860018ZM7.00008%201.78502L1.22008%2012H12.7801L7.00008%201.78502ZM6.63179%2010.9324C6.74868%2010.9796%206.87398%2011.0027%207.00004%2011C7.12683%2011.0025%207.25282%2010.9794%207.3705%2010.9321C7.48819%2010.8849%207.59516%2010.8145%207.68504%2010.725C7.77546%2010.6374%207.84736%2010.5325%207.89645%2010.4165C7.94555%2010.3006%207.97085%2010.1759%207.97085%2010.05C7.97085%209.92408%207.94555%209.79945%207.89645%209.68349C7.84736%209.56754%207.77546%209.46263%207.68504%209.375C7.50137%209.198%207.25509%209.10093%207.00004%209.105C6.87444%209.10255%206.74961%209.12516%206.63285%209.17152C6.51609%209.21788%206.40975%209.28706%206.32004%209.375C6.22962%209.46263%206.15773%209.56754%206.10864%209.68349C6.05954%209.79945%206.03424%209.92408%206.03424%2010.05C6.03424%2010.1759%206.05954%2010.3006%206.10864%2010.4165C6.15773%2010.5325%206.22962%2010.6374%206.32004%2010.725C6.40882%2010.8145%206.51489%2010.8851%206.63179%2010.9324ZM6.27004%204L6.37004%208.355H7.65004L7.77004%204H6.27004Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E); background-size: contain; } .js-onCart.buyButton.placeholder span{ color: rgb(247, 247, 247); } .js-onCart.buyButton.bundle { padding: 10px; } .js-onCart.buyButton.bundle span{ font-size: 24px; padding-left: 36px; } .js-onCart.buyButton.bundle span:before{ transform: translateY(-54%); width: 28px; height: 28px; } .js-onCart.buyButton.bundle.add span{ padding-left: 34px; } .js-onCart.buyButton.bundle.added span, .js-onCart.buyButton.bundle.alert span{ padding-left: 36px; } .js-onCart.buyButton.bundle.add span:before{ transform: translateY(-50%); } .js-onCart.buyButton.bundle.added span:before, .js-onCart.buyButton.bundle.alert span:before{ transform: translateY(-54%); } /* toast alert */ #js-toastAlertWrap{ display: block; position: fixed; top: 0; left: 0; padding: 10px 10px 0; z-index: 1060; } #js-toastAlertWrap .js-toastAlertBox{ display: block; position: relative; width: 300px; margin-bottom: 0.5em; border-radius: 3px; box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.03); transform-origin: center; } #js-toastAlertWrap .js-toastAlertBox.js-toastAlertIn{ animation: toastAlertIn .3s ease-out; } #js-toastAlertWrap .js-toastAlertBox.js-toastAlertOut{ animation: toastAlertOut .3s ease-in; } @keyframes toastAlertIn { 0% {transform: scale(0,0);} 100% {transform: scale(1,1);} } @keyframes toastAlertOut { 0% {transform: scale(1,1);} 100% {transform: scale(0,0);} } #js-toastAlertWrap .js-toastAlertBox .toastAlertBody{ display: flex; justify-content: space-between; align-items: stretch; border-radius: 3px; width: 300px; box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.03); box-sizing: border-box; background-color: #fff; color: #151515; font-size: 12px; } #js-toastAlertWrap .js-toastAlertBox .toastAlertTxt{ position: relative; font-size: 12px; padding: 10px 10px 10px 44px; line-height: 1.6; } #js-toastAlertWrap .js-toastAlertBox .toastAlertTxt::before{ content: ''; display: block; position: absolute; width: 24px; height: 24px; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20style%3D%22margin-right%3A%200px%3B%20min-width%3A%2024px%3B%22%3E%20%3Cpath%20d%3D%22M24.4811%2020.4219L13.7009%201.36577C13.5911%201.17902%2013.4345%201.02419%2013.2464%200.916609C13.0584%200.809032%2012.8455%200.752441%2012.6289%200.752441C12.4123%200.752441%2012.1994%200.809032%2012.0114%200.916609C11.8233%201.02419%2011.6667%201.17902%2011.5569%201.36577L0.776707%2020.4219C0.675644%2020.6055%200.624756%2020.8124%200.629171%2021.0219C0.633586%2021.2314%200.693148%2021.4361%200.801855%2021.6152C0.910561%2021.7944%201.06457%2021.9417%201.24836%2022.0424C1.43215%2022.143%201.63923%2022.1935%201.84872%2022.1886H23.4091C23.6186%2022.1935%2023.8257%2022.143%2024.0095%2022.0424C24.1932%2021.9417%2024.3473%2021.7944%2024.456%2021.6152C24.5647%2021.4361%2024.6242%2021.2314%2024.6286%2021.0219C24.6331%2020.8124%2024.5822%2020.6055%2024.4811%2020.4219V20.4219ZM2.71491%2020.4734L12.6289%202.95235L22.5429%2020.4734H2.71491Z%22%20fill%3D%22%23FF0040%22%20%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%22M12.6292%2018.758C12.413%2018.7626%2012.1981%2018.7231%2011.9976%2018.642C11.7971%2018.5609%2011.6152%2018.4399%2011.4629%2018.2863C11.3078%2018.136%2011.1845%2017.9561%2011.1003%2017.7572C11.016%2017.5583%2010.9727%2017.3445%2010.9727%2017.1286C10.9727%2016.9126%2011.016%2016.6988%2011.1003%2016.4999C11.1845%2016.301%2011.3078%2016.1211%2011.4629%2015.9708C11.6167%2015.82%2011.7991%2015.7013%2011.9994%2015.6218C12.1997%2015.5423%2012.4138%2015.5035%2012.6292%2015.5077C13.0667%2015.5007%2013.4891%2015.6672%2013.8042%2015.9708C13.9592%2016.1211%2014.0826%2016.301%2014.1668%2016.4999C14.251%2016.6988%2014.2944%2016.9126%2014.2944%2017.1286C14.2944%2017.3445%2014.251%2017.5583%2014.1668%2017.7572C14.0826%2017.9561%2013.9592%2018.136%2013.8042%2018.2863C13.65%2018.4398%2013.4665%2018.5606%2013.2646%2018.6416C13.0628%2018.7227%2012.8467%2018.7623%2012.6292%2018.758V18.758ZM11.5486%2014.2213L11.3771%206.75146H13.9499L13.7441%2014.2213H11.5486Z%22%20fill%3D%22%23FF0040%22%20%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E'); top: 50%; left: 10px; transform: translateY(-50%); } #js-toastAlertWrap .js-toastAlertBox .toastAlertDel{ display: block; width: 100px; background-image: url('data:image/svg+xml;charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23151515%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20style%3D%22margin-right%3A%200px%3B%20min-width%3A%2024px%3B%22%20%3E%20%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%3E%3C%2Fline%3E%20%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%3E%3C%2Fline%3E%20%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: center; background-color: #f3f3f3; transition: all .3s ease 0s; } #js-toastAlertWrap .js-toastAlertBox .toastAlertDel:hover{ background-color: #c3c3c3; } #js-toastAlertWrap .js-toastAlertBox .toastAlertRemain{ height: 2px; background-color: #bf0000; } #js-toastAlertWrap .js-toastAlertBox.js-toastAlertIn .toastAlertRemain{ animation: toastAlertRemain 3s linear; } @keyframes toastAlertRemain { 0% {width: 100%;} 100% {width: 0%;} } #js-toastAlertWrap .js-toastAlertBox.js-toastAlertOut .toastAlertRemain{ width: 0%; } /* kobo_add_cart */