app/template/default/Item/GoodsSetPurchase/main.twig line 1

Open in your IDE?
  1. <style>
  2.     .btn-v2 {
  3.         position: relative;
  4.         display: block;
  5.         padding: 1.30rem 1.00rem;
  6.         width: min(500px, 500 / 805 * 100vw);
  7.         margin: 1.00rem auto 1.00rem;
  8.         font-size: 2.6rem;
  9.         font-weight: bold;
  10.         border-radius: 0.75rem;
  11.         border: 2px solid transparent;
  12.         box-shadow: 0.15rem 0.2rem 0.1rem 0 rgba(0, 0, 0, 0.4);
  13.         box-sizing: border-box;
  14.     }
  15.     .btn-v2::after {
  16.         color: #333;
  17.         position: absolute;
  18.         content: attr(alt);
  19.         top: 116%;
  20.         left: 0;
  21.         width: 100%;
  22.         text-align: center;
  23.         font-size: 1.00rem;
  24.         font-weight: normal;
  25.     }
  26.     .btn-v2.forward {
  27.         color: white;
  28.         background: rgb(249,131,0);
  29.         background: linear-gradient(180deg, rgba(249,131,0,1) 0%, rgba(235,86,8,1) 50%);
  30.     }
  31.     .btn-v2.forward:hover {
  32.         color: rgba(235,86,8,1);
  33.         background: white;
  34.         border: 2px solid rgba(235,86,8,1);
  35.     }
  36.     .gsp-checkout-guide {
  37.         color: #333;
  38.         font-size: 1.5rem;
  39.         text-align: center;
  40.         line-height: 2.5rem;
  41.         margin: 2rem 0 8rem;
  42.     }
  44.     #cartin-button-guide {
  45.         position: relative;
  46.         background-image: url('https://img0.land-mark.biz/ut_img/public_images/itempage/goods-set-purchase/guidance.png');
  47.         background-size: cover;
  48.         width: min(751px, 751 / 805 * 100vw);
  49.         height: min(301px, 301 / 805 * 100vw);
  50.         margin: 0 auto;
  51.     }
  52.     #cartin-button-guide > button {
  53.         position: absolute;
  54.     }
  55.     #cartin-button-guide > button.guide_next_item {
  56.         left: min(405px, 405 / 805 * 100vw);
  57.         top: min(132px, 132 / 805 * 100vw);
  58.         width: min(202px, 202 / 805 * 100vw);
  59.         height: min(42px, 42 / 805 * 100vw);
  60.     }
  61.     #cartin-button-guide > button.guide_add_to_cart {
  62.         left: min(153px, 153 / 805 * 100vw);
  63.         top: min(197px, 197 / 805 * 100vw);
  64.         width: min(202px, 202 / 805 * 100vw);
  65.         height: min(42px, 42 / 805 * 100vw);
  66.     }
  67.     #label-get-started {
  68.         background-color: #118B0A;
  69.         color: white;
  70.         text-align: center;
  71.         font-size: min(23px, 23 / 805 * 100vw);
  72.         width: min(805px, 805 / 805 * 100vw);
  73.         height: min(50px, 50 / 805 * 100vw);
  74.         line-height: min(50px, 50 / 805 * 100vw);
  75.         margin: min(30px, 30 / 805 * 100vw) 0 min(7px, 7 / 805 * 100vw) 0;
  76.     }
  77.     @media screen and (max-width: 768px) {
  78.         .btn-v2 {
  79.             width: 98%;
  80.         }
  81.     }
  82. </style>
  84. {% include 'Item/NewCartArea/style.twig' with {} only %}
  86. <style>
  87.     .item-info > .item-row {
  88.         display: grid;
  89.         grid-template-columns : 120px auto;
  90.         padding: 0.75rem 1.0rem;
  91.     }
  92.     .item-info > .item-row > .item-col.head {
  93.         font-size: 14px;
  94.     }
  95.     .item-info > .item-row > .item-col,
  96.     .item-info > .item-row > .item-col.price .price-text {
  97.         font-size: 17px;
  98.     }
  99.     .item-info > .item-row > .item-col.price {
  100.         font-size: 23px;
  101.         color: red;
  102.     }
  103.     @media screen and (max-width: 768px) {
  104.         .item-info > .item-row {
  105.             grid-template-columns : 8.25rem 1fr;
  106.             padding: 0;
  107.         }
  108.         .item-info > .item-row > .item-col.head {
  109.             font-size: 1.1rem;
  110.         }
  111.         .item-info > .item-row > .item-col,
  112.         .item-info > .item-row > .item-col.price .price-text {
  113.             font-size: 1.25rem;
  114.         }
  115.         .item-info > .item-row > .item-col.price {
  116.             font-size: 1.85rem;
  117.             color: red;
  118.         }
  119.     }
  120. </style><style>
  121.     .sokujitsu-hassou-banner {
  122.         background-color: #EFFCFF;
  123.         border: 1px solid #C1C1C1;
  124.         font-size: 1.5rem;
  125.         padding: 2.0rem;
  126.         width: auto;
  127.         margin: 0.5rem auto;
  128.         margin-top: 1.5rem;
  129.     }
  130.     .sokujitsu-hassou-banner > .title,
  131.     .sokujitsu-hassou-banner > .description {
  132.         text-align: center;
  133.     }
  134.     .sokujitsu-hassou-banner > .title {
  135.         font-size: 1.75em;
  136.         color: #1026DB;
  137.     }
  138.     .sokujitsu-hassou-banner > .description {
  139.         font-size: 1.25em;
  140.         color: white;
  141.         background-color: #449ADC;
  142.         width: 85%;
  143.         margin: 0.75em auto;
  144.         padding: 0.5em;
  145.     }
  146.     .sokujitsu-hassou-banner > dl {
  147.         position: relative;
  148.         margin: 0;
  149.         overflow: hidden;
  150.         transition: all 0.5s linear;
  151.     }
  152.     .sokujitsu-hassou-banner > dl.closed {
  153.         height: 3.0em;
  154.     }
  155.     .sokujitsu-hassou-banner > dl.closed > dd {
  156.         opacity: 0.25;
  157.     }
  158.     .sokujitsu-hassou-banner > dl.opened {
  159.         height: auto;
  160.     }
  161.     .sokujitsu-hassou-banner > dl.closed > dt.overlay {
  162.         position: absolute;
  163.         display: inline-block;
  164.         cursor: pointer;
  165.         bottom: 0;
  166.         left: 50%;
  167.         transform: translate(-50%);
  168.         height: 2em;
  169.         color: white;
  170.         border-radius: 2rem;
  171.         padding: .5rem 5rem;
  172.         background: #1291DE;
  173.     }
  174.     .sokujitsu-hassou-banner > dl > dt:nth-of-type(n+2) {
  175.         margin-top: 1.0em;
  176.     }
  177.     .sokujitsu-hassou-banner > dl > dt,
  178.     .sokujitsu-hassou-banner > dl > dd {
  179.         font-weight: normal;
  180.     }
  181.     .sokujitsu-hassou-banner > dl > dt {
  182.         color: #1026DB;
  183.     }
  184.     .sokujitsu-hassou-banner > dl > dd {
  185.         color: #333;
  186.     }
  187.     @media screen and (max-width: 768px) {
  188.         .sokujitsu-hassou-banner {
  189.             font-size: 1.0rem;
  190.             padding: 1.0rem;
  191.         }
  192.     }
  193. </style>
  195. {% include 'Item/NewCartArea/script.twig' with {} only %}
  197. <div id="cartin-button-guide" class="anchor-wrapper"></div>
  199. <div id="label-get-started">セット商品を購入する</div>
  201. <div>
  203.     <form id="dummy"></form>
  205.     <form id="form-goods-set-purchase">
  207.         <input type="hidden" name="goodsId" value="{{ goods.goodsId }}">
  209.     {% for child in item.goods.childrenAsGoodsSetPurchase %}
  211.         {% set child = child.goodsChild.item %}
  213.         {% include 'Item/Common/new_main.twig' with { item: child, goods: child.goods } only %}
  215.         {% include 'Item/GoodsSetPurchase/new_cart_area.twig' with { loop: loop, parent: item, item: child, skuMap: skuMap, visibleSizes: visibleSizes } only %}
  217.     {% endfor %}
  219.     <div class="anchor-wrapper gsp-checkout-guide">
  220.         <a class="anchor"></a>
  221.         <div>
  222.             <p>セット商品の選択は以上です。</p>
  223.             <p>ご注文を進めるには下記からお進みください。</p>
  224.         </div>
  225.         <button type="button" class="btn-v2 forward btn_add_to_cart add-to-cart" alt="※まだご注文は確定しませんので、ご安心ください。"><span class="muji"></span>カートに入れる</button>
  226.     </div>
  228.     </form>
  230. </div>