app/template/default/Item/NewCartArea/style.twig line 1

Open in your IDE?
  1. <style>
  2.     /**
  3.      *
  4.      */
  5.     .cart_area {
  6.         position: relative;
  7.     }
  8.     .anchor-wrapper {
  9.         position: relative;
  10.     }
  11.     a.anchor {
  12.         position: absolute;
  13.         top: -200px;
  14.     }
  15.     /**
  16.      *
  17.      */
  18.     .image-holder {
  19.         position: relative;
  20.         padding: 2%;
  21.     }
  22.     .image-holder.sokujitsu-hassou:after {
  23.         position: absolute;
  24.         display: inline-block;
  25.         bottom: 0;
  26.         right: 0;
  27.         content: '';
  28.         background-image: url('https://img0.land-mark.biz/ut_img/public_images/itempage/chokusou/icon-common.webp');
  29.         background-size: contain;
  30.         background-repeat: no-repeat;
  31.         background-position-y: bottom;
  32.     }
  33.     /**
  34.      *
  35.      */
  36.     .new-cart-area {
  37.         display: grid;
  38.         grid-template-columns: 250px auto;
  39.         gap: 5px;
  40.         margin-top: 10px;
  41.         padding-bottom: 3.0rem;
  42.         border-bottom: 1px solid #2a2a2a;
  43.     }
  44.     .new-cart-area img {
  45.         max-width: 100%;
  46.     }
  47.     .new-cart-area:nth-child(n+2) {
  48.         margin-top: 30px;
  49.         padding-top: 10px;
  50.     }
  51.     /**
  52.      * 選択中のカラー
  53.      */
  54.     .new-cart-area .current-sku-info .title {
  55.         padding: 0.5rem;
  56.         font-size: 1.25rem;
  57.         text-align: center;
  58.     }
  59.     .new-cart-area .current-sku-info .current-color {
  60.         border: 2px solid #dcdcdc;
  61.         border-bottom: none;
  62.         /*
  63.          height: 400px;
  64.          */
  65.     }
  66.     .new-cart-area .current-sku-info .current-color img {
  67.         max-width: 100%;
  68.         max-height: 100%;
  69.     }
  70.     .image-holder:after {
  71.         width: 25%;
  72.         height: 25%;
  73.         padding-top: 25%;
  74.     }
  75.     .new-cart-area .current-sku-info .current-color .tile-name,
  76.     .new-cart-area .select-color-panel .color-selector .color-tile .tile-name {
  77.         text-align: center;
  78.     }
  79.     .new-cart-area .current-sku-info .current-color .tile-name {
  80.         background-color: white;
  81.         padding: 1rem;
  82.     }
  83.     .new-cart-area .current-sku-info .current-color .title {
  84.         background-color: #dcdcdc;
  85.     }
  86.     /**
  87.      * カラーを選択する
  88.      */
  89.     .new-cart-area .select-sku-panel .select-color-panel .title,
  90.     .new-cart-area .select-sku-panel .select-size-panel .title {
  91.         padding: 0.5rem;
  92.         height: 4.0rem;
  93.         font-size: 1.60rem;
  94.         text-align: left;
  95.         color: #333;
  96.         background: transparent;
  97.     }
  98.     .new-cart-area .select-sku-panel .select-color-panel .title:before,
  99.     .new-cart-area .select-sku-panel .select-size-panel .title:before {
  100.         content: ' ';
  101.         display: inline-block;
  102.         vertical-align: middle;
  103.         height: 100%;
  104.         margin-right: 1.00rem;
  105.         border: 2px solid #118B0A;
  106.         border-radius: 2px;
  107.     }
  108.     .new-cart-area .select-sku-panel .select-color-panel .title.required:after,
  109.     .new-cart-area .select-sku-panel .select-size-panel .title.required:after {
  110.         content: '必須';
  111.         height: 100%;
  112.         padding: 0.45rem 0.25rem;
  113.         margin-left: 0.75rem;
  114.         color: #F9EEEF;
  115.         font-size: 1.10rem;
  116.         vertical-align: text-bottom;
  117.         background-color: #CA000B;
  118.         border-radius: 2px;
  119.     }
  120.     .new-cart-area .select-color-panel .color-selector {
  121.         background-color: white;
  122.     }
  123.     .new-cart-area .select-color-panel .color-selector.horizontal-menu {
  124.         grid-template-columns: repeat(auto-fit, minmax(min(110px, 110 / 490 * 98vw), 1fr));
  125.     }
  126.     .new-cart-area .select-color-panel .color-selector.horizontal-menu > .menu-item > .color-tile {
  127.         position: relative;
  128.         border: 1px solid #dcdcdc;
  129.     }
  130.     .new-cart-area .select-color-panel .color-selector.horizontal-menu > .menu-item:nth-of-type(n+2) > .color-tile {
  131.         border-left-width: 0.5px;
  132.     }
  133.     .new-cart-area .select-color-panel .color-selector.horizontal-menu > .menu-item:nth-last-of-type(n+2) > .color-tile {
  134.         border-right-width: 0.5px;
  135.     }
  136.     .new-cart-area .select-color-panel .color-selector.horizontal-menu > .menu-item > .color-tile:hover {
  137.         border-color: #f8a402;
  138.     }
  139.     .new-cart-area .select-color-panel .color-selector.horizontal-menu > .menu-item > .color-tile.active:after {
  140.         position: absolute;
  141.         content: ' ';
  142.         top: 0;
  143.         left: 0;
  144.         right: 0;
  145.         bottom: 0;
  146.         width: 100%;
  147.         height: 100%;
  148.         border: 4px solid #f8a402;
  149.     }
  150.     .new-cart-area .select-color-panel .color-selector .color-tile {
  151.         cursor: pointer;
  152.         /**
  153.          * flexボックス
  154.          */
  155.         align-items: center;
  156.         height: auto;
  157.         min-height: min(100px, 100 / 490 * 98vw);
  158.         width: 100%;
  159.     }
  160.     .new-cart-area .select-color-panel .color-selector .color-tile:hover {
  161.         border-color: #fbd817;
  162.     }
  163.     .new-cart-area .select-color-panel .color-selector .color-tile .image-holder {
  164.         width: min(106px, 106 / 550 * 100vw);
  165.     }
  166.     .new-cart-area .select-color-panel .color-selector .color-tile img {
  167.         max-width: 100%;
  168.         max-height: 100%;
  169.     }
  170.     .new-cart-area .select-color-panel .color-selector .color-tile .tile-name {
  171.         font-size: 1.10rem;
  172.         /**
  173.          * flexボックス
  174.          */
  175.         flex-grow: 1;
  176.         width: 100%;
  177.     }
  178.     .new-cart-area .select-color-panel .color-selector .color-tile.active .tile-name {
  179.         background: #f8a402;
  180.     }
  181.     /**
  182.      * サイズを選択する
  183.      */
  184.     .new-cart-area .select-sku-panel .select-size-panel .size-row {
  185.         display: grid;
  186.         grid-template-columns: 1fr 1fr 1fr 1fr;
  187.     }
  188.     .new-cart-area .select-sku-panel .select-size-panel .size-row.head {
  189.         /**
  190.          background-color: #dcdcdc;
  191.          */
  192.     }
  193.     .new-cart-area .select-sku-panel .select-size-panel .size-row > * {
  194.         text-align: center;
  195.         padding: 0.5rem 0.1rem;
  196.         /**
  197.         border: 1px solid #dcdcdc;
  198.          */
  199.     }
  201.     .new-cart-area .select-sku-panel .select-size-panel .size-selector {
  202.         display: none;
  203.     }
  205.     .new-cart-area .select-sku-panel .select-size-panel .size-selector.active {
  206.         display: block;
  207.     }
  209.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table {
  210.         border-collapse: collapse;
  211.         width: 100%;
  212.         margin-top: 1rem;
  213.         margin-bottom: 2rem;
  214.     }
  215.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > colgroup > col.size {
  216.         width: 17.8%;
  217.     }
  218.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > colgroup > col.price {
  219.         width: 26.6%;
  220.     }
  221.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > colgroup > col.quantity {
  222.         width: 27.1%;
  223.     }
  224.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > colgroup > col.stock {
  225.         width: 28.5%;
  226.     }
  227.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > thead > tr > th,
  228.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > th {
  229.         background-color: #E9E9E9;
  230.     }
  231.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > thead > tr > th,
  232.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > thead > tr > td,
  233.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > th,
  234.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td {
  235.         border: 1px solid #D4D4D4;
  236.         padding: .5rem .8rem;
  237.     }
  238.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > thead > tr > th,
  239.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td {
  240.         text-align: center;
  241.         font-weight: normal;
  242.     }
  243.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td {
  244.         height: 5.30rem;
  245.     }
  246.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table span.price {
  247.         color: #D70008;
  248.     }
  249.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table .zaiko_comment {
  250.         display: block;
  251.         margin: 0;
  252.     }
  253.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table .zaiko_comment > .rest {
  254.         margin: 0;
  255.     }
  256.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table .zaiko_number {
  257.         display: block;
  258.         margin: 0;
  259.     }
  260.     .new-cart-area input {
  261.         text-align: right;
  262.     }
  263.     .new-cart-area input.kazu {
  264.         width: 8.0rem;
  265.         height: 2.75rem;
  266.         padding: 0 0.5rem;
  267.     }
  268.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > thead > tr > th,
  269.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > thead > tr > td,
  270.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > th,
  271.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td {
  272.         vertical-align: middle !important;
  273.         font-size: 1.60rem;
  274.     }
  275.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td.stock > span.zaiko {
  276.         vertical-align: middle;
  277.         margin: 0;
  278.     }
  279.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td.stock > span.zaiko > span.zaiko_number {
  280.         font-size: 1.4rem;
  281.     }
  282.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td.stock > span.zaiko > span.zaiko_number.sokujitsu,
  283.     .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td.stock > span.zaiko > div.nyuka-yotei {
  284.         font-size: 1.25rem;
  285.     }
  286.     .new-cart-area .kazu.reservation {
  287.         border: 2px solid red;
  288.         border-radius: 2px;
  289.         outline: none;
  290.     }
  291.     .new-cart-area .zaiko_number.low-stock,
  292.     .new-cart-area .zaiko_number.sokujitsu {
  293.         color: red;
  294.     }
  295.     .new-cart-area .zaiko_number.low-stock:before {
  296.         content: '残り';
  297.         margin-right: .5rem;
  298.     }
  299.     .new-cart-area .zaiko_number.sokujitsu:before {
  300.         content: '(即日発送 ';
  301.     }
  302.     .new-cart-area .zaiko_number.sokujitsu:after {
  303.         content: ')';
  304.     }
  305.     .new-cart-area .nyuka-yotei {
  306.         color: #138a19;
  307.     }
  309.     .btn-up-down {
  310.         display: inline-block;
  311.         vertical-align: sub;
  312.         margin-left: 0.25rem;
  313.     }
  314.     .btn-up-down > .btn-up,
  315.     .btn-up-down > .btn-down {
  316.         display: block;
  317.         height: 12px;
  318.         width: 12px;
  319.         font-size: 7px;
  320.         line-height: 1.55;
  321.         transform: scaleX(1.5);
  322.         color: #6A6A6A;
  323.         background: #EDEDED;
  324.         border: .5px solid #CCCCCC;
  325.         border-radius: 2px;
  326.         margin-left: 8px;
  327.         margin-top: 1px;
  328.         box-sizing: border-box;
  329.         text-decoration: none;
  330.         cursor: pointer;
  331.         user-select: none;
  332.     }
  333.     /**
  334.      * flexボックス
  335.      */
  336.     .horizontal-menu {
  337.         /**
  338.          * flex-boxの廃止
  339.          *
  340.         display: flex;
  341.         justify-content: flex-start;
  342.         flex-wrap: wrap;
  343.          */
  344.         display: grid;
  345.         margin: 1rem 0 2rem 0;
  346.     }
  347.     .horizontal-menu .menu-item {
  348.         display: flex;
  349.         justify-content: center;
  350.     }
  351.     .horizontal-menu .menu-item:only-child {
  352.         flex-grow: 1;
  353.         text-align: center;
  354.     }
  355.     .horizontal-menu .menu-item > * {
  356.         display: flex;
  357.         flex-direction: column;
  358.     }
  359.     .new-cart-area span.size_name {
  360.         display: block;
  361.     }
  362.     .new-cart-area span.size_name.sokujitsu:after {
  363.         vertical-align: bottom;
  364.         content: '即日発送';
  365.         display: block;
  366.         height: 1.8rem;
  367.         margin: 0 auto;
  368.         margin-top: -0.5rem;
  369.         font-size: 1rem;
  370.         color: #fff;
  371.         border-radius: 0.9rem;
  372.         background: #1090DD;
  373.         width: 6rem;
  374.     }
  375.     {% if isMobile() %}
  376.     #item-detail #shopping-cart .new-cart-area .goods-icon-wrapper {
  377.         margin: 0 .75rem;
  378.     }
  379.     #item-detail #shopping-cart .new-cart-area .goods-icon-wrapper > ul {
  380.         display: grid !important;
  381.         grid-template-columns: 1fr;
  382.         row-gap: 1.1rem;
  383.     }
  384.     #item-detail #shopping-cart .new-cart-area .goods-icon-wrapper > ul > li {
  385.         width: auto;
  386.         padding: 0.10rem;
  387.         margin: 0;
  388.         font-size: 1.4rem;
  389.     }
  390.     #item-detail #shopping-cart .new-cart-area .goods-icon-wrapper > ul > li.goods-icon-unisex {
  391.         background-color: #009907;
  392.     }
  393.     #item-detail #shopping-cart .new-cart-area .goods-icon-wrapper > ul > li.goods-icon-color {
  394.         background-color: #666;
  395.     }
  396.     #item-detail #shopping-cart .new-cart-area .goods-icon-wrapper > ul > li.goods-icon-ss {
  397.         background-color: #26b7ff;
  398.     }
  399.     @media screen and (max-width: 768px) {
  400.         .new-cart-area input.kazu,
  401.         .new-cart-area select.kazu {
  402.             width: 90%;
  403.             height: 3.50rem;
  404.             font-size: 1.33rem;
  405.         }
  406.         .new-cart-area {
  407.             display: grid;
  408.             grid-template-columns: repeat(auto-fit, 100%);
  409.         }
  410.         .new-cart-area .current-sku-info {
  411.             display: grid;
  412.             grid-template-columns: 1fr 3.2fr;
  413.         }
  414.         .new-cart-area .current-sku-info > .goods-label-list {
  415.             order: 1;
  416.         }
  417.         .new-cart-area .current-sku-info > .current-color {
  418.             order: 2;
  419.             display: grid;
  420.             grid-template-columns: 1fr 1.5fr;
  421.         }
  422.         .new-cart-area .current-sku-info .current-color .tile-name {
  423.             display: flex;
  424.             align-items: center;
  425.         }
  426.         .new-cart-area .current-sku-info > .current-color .title {
  427.             grid-column: span 2;
  428.         }
  429.         #cartin-button-guide > button {
  430.             font-size: 0.8rem;
  431.             line-height: 0.2;
  432.             padding-left: 0;
  433.             padding-right: 0;
  434.         }
  435.         #cartin-button-guide > button.guide_next_item {
  436.             left: min(405px, 405 / 805 * 100vw);
  437.             top: min(115px, 115 / 805 * 100vw);
  438.             width: min(202px, 202 / 805 * 100vw);
  439.             height: min(42px, 42 / 805 * 100vw);
  440.         }
  441.         #cartin-button-guide > button.guide_add_to_cart {
  442.             left: min(153px, 153 / 805 * 100vw);
  443.             top: min(180px, 180 / 805 * 100vw);
  444.             width: min(202px, 202 / 805 * 100vw);
  445.             height: min(42px, 42 / 805 * 100vw);
  446.         }
  447.         .new-cart-area .select-color-panel .color-selector.horizontal-menu {
  448.             grid-template-columns: repeat(auto-fit, minmax(min(95px, 95 / 490 * 98vw), 1fr));
  449.         }
  450.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table {
  451.             font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  452.             letter-spacing: normal;
  453.         }
  454.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > colgroup > col.size {
  455.             width: 17.8%;
  456.         }
  457.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > colgroup > col.price {
  458.             width: 34.4%;
  459.         }
  460.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > colgroup > col.quantity {
  461.             width: 19.1%;
  462.         }
  463.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > colgroup > col.stock {
  464.             width: 28.7%;
  465.         }
  466.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td {
  467.             padding: 0.9rem .2rem !important;
  468.         }
  469.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table span.price {
  470.             color: #D70008;
  471.             font-size: 1.40rem !important;
  472.         }
  473.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table span.size_name {
  474.             font-size: 1.4rem;
  475.         }
  476.         .new-cart-area input.kazu[type="number"] {
  477.             width: 5.0rem;
  478.         }
  479.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > thead > tr > th,
  480.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > thead > tr > td {
  481.             font-size: 1.40rem;
  482.             padding: 0.8em 0;
  483.         }
  484.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td.stock > span.zaiko > span.zaiko_number {
  485.             font-size: 1.60rem;
  486.         }
  487.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td.stock > span.zaiko > span.zaiko_number.sokujitsu,
  488.         .new-cart-area .select-sku-panel .select-size-panel .size-selector > table > tbody > tr > td.stock > span.zaiko > div.nyuka-yotei {
  489.             font-size: 1.20rem;
  490.         }
  491.         .new-cart-area span.size_name.sokujitsu:after {
  492.             width: 5.8rem;
  493.             height: 1.959rem;
  494.             line-height: 1.9;
  495.             margin-top: 0.2rem;
  496.             font-size: 0.98rem;
  497.         }
  498.     }
  499.     {% endif %}
  500. </style>