/** * Custom media queries * @example * @media (--mobile) { * styles for mobile viewport * } */ /** * for mobile viewoport */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /** * Swiper 4.5.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2019 Vladimir Kharlampidi * * Released under the MIT License * * Released on: September 13, 2019 */ .swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1} .swiper-container-no-flexbox .swiper-slide{float:left} .swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column} .swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box} .swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} .swiper-container-multirow>.swiper-wrapper{-ms-flex-wrap:wrap;flex-wrap:wrap} .swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto} .swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;transition-property:transform,-webkit-transform} .swiper-slide-invisible-blank{visibility:hidden} .swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto} .swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;transition-property:transform,height;transition-property:transform,height,-webkit-transform} .swiper-container-3d{-webkit-perspective:1200px;perspective:1200px} .swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d} .swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10} .swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top, left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top, right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom, left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y} .swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x} .swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat} .swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none} .swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto} .swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto} .swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")} .swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")} .swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")} .swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")} .swiper-button-lock{display:none} .swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10} .swiper-pagination.swiper-pagination-hidden{opacity:0} .swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%} .swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);transform:scale(.33);position:relative} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);transform:scale(1)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);transform:scale(1)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);transform:scale(.66)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);transform:scale(.33)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);transform:scale(.66)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);transform:scale(.33)} .swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2} button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none} .swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer} .swiper-pagination-bullet-active{opacity:1;background:#007aff} .swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)} .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block} .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:8px} .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-webkit-transition:.2s transform,.2s top;transition:.2s transform,.2s top;-webkit-transition:.2s transform,.2s top,.2s -webkit-transform;transition:.2s transform,.2s top,.2s -webkit-transform} .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px} .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap} .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-webkit-transition:.2s transform,.2s left;transition:.2s transform,.2s left;-webkit-transition:.2s transform,.2s left,.2s -webkit-transform;transition:.2s transform,.2s left,.2s -webkit-transform} .swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-webkit-transition:.2s transform,.2s right;transition:.2s transform,.2s right;-webkit-transition:.2s transform,.2s right,.2s -webkit-transform;transition:.2s transform,.2s right,.2s -webkit-transform} .swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute} .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;transform-origin:left top} .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;transform-origin:right top} .swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0} .swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0} .swiper-pagination-white .swiper-pagination-bullet-active{background:#fff} .swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)} .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff} .swiper-pagination-black .swiper-pagination-bullet-active{background:#000} .swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)} .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000} .swiper-pagination-lock{display:none} .swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)} .swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%} .swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%} .swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0} .swiper-scrollbar-cursor-drag{cursor:move} .swiper-scrollbar-lock{display:none} .swiper-zoom-container{width:100%;height:100%;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;text-align:center} .swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain} .swiper-slide-zoomed{cursor:move} .swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite} .swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat} .swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")} @-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} @keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} .swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000} .swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out} .swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;transition-property:opacity} .swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none} .swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-container-cube{overflow:visible} .swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%} .swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none} .swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;transform-origin:100% 0} .swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible} .swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} .swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0} .swiper-container-flip{overflow:visible} .swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1} .swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none} .swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} .swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} /** http://bourbon.io/docs/#timing-functions */ /** example @include transition(all 5s $ease-in-circ);*/ /** transition timing-function: ease - cubic-bezier(0.25, 0.1, 0.25, 1.0) を指定したのと同じ（開始と完了を滑らかにする）（初期値） linear - cubic-bezier(0.0, 0.0, 1.0, 1.0) を指定したのと同じ（一定） ease-in - cubic-bezier(0.42, 0, 1.0, 1.0) を指定したのと同じ（ゆっくり始まる） ease-out - cubic-bezier(0, 0, 0.58, 1.0) を指定したのと同じ（ゆっくり終わる） ease-in-out - cubic-bezier(0.42, 0, 0.58, 1.0) を指定したのと同じ（ゆっくり始まってゆっくり終わる） */ /** * text ellipsis for block multiline */ /* unsupport IE, Edge, Fx @mixin text-ellipsis-block($rows) { display: box; box-orient: vertical; line-clamp: $rows; overflow: hidden; } */ /* margin -------------------- */ /* font -------------------- */ /* link line -------------------- */ /** * element size */ /** * position layout */ /** * images */ /** * Variables */ /** extend */ /* == @import "../node_modules/normalize.css/normalize.css"; */ [v-cloak] { display: none; } html { font-size: 62.5%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif; font-size: 1.0rem; letter-spacing: 0.2em; color: #000000; } a { color: #000000; text-decoration: none; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } h1, h2, h3, h4, h5, h6, div, dl, dt, dd, p { margin: 0; padding: 0; } ul, ol, li { padding: 0; margin: 0; } li { list-style: none; } img { vertical-align: bottom; } figure { margin: 0; padding: 0; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } html, body { width: 100%; height: 100%; } /** * main.scss */ .l-footer-menu__inner { padding: 50px 0; position: absolute; right: 30px; top: 0;} .l-footer-menu__list { line-height: 1.8; } .l-footer-menu__list--shopping { height: 167px; } .l-footer-menu__list--products { height: 65px; } .l-footer-menu__list > ul > li { font-size: 1.6rem; } .l-footer-menu__list > ul > li:nth-of-type(n+2) { margin-top: 30px; } .l-footer-menu__list > ul > li a { position: relative; color: #AAA;} .l-footer-menu__list > ul > li a:hover { color: #FFF;} .l-footer-menu__list > ul > li a::before { background-color: #000; content: ""; height: 1px; position: absolute; left: 0; bottom: -3px; -webkit-transition: width .3s; transition: width .3s; width: 0; } .l-footer-menu__list > ul > li a span i { font-style: normal; } .l-footer-menu__list > ul > li ul { font-size: 1.3rem; margin-top: 5px; } .l-footer-menu__list > ul > li ul li { white-space: nowrap; margin-top: 10px; } .l-footer-menu__list > ul > li ul li::before { content: "-"; margin-right: 4px; } .l-footer { position: relative;margin-top: 20px;} .l-footer__inner { position: relative; padding-left: 30px; padding-right: 100px; color: #fff; padding-top: 50px; padding-bottom: 40px; background: url(/static/image/f_bg.jpg) no-repeat 50% 100%; background-size: cover; } .l-footer__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .l-footer__logo { width: 170px; } .l-footer__dtl { width: calc(100% - 170px); } .l-footer-about { font-size: 1.4rem; line-height: 2; } .l-footer-about__profile span { font-size: 85%; padding-left: 5px; } .l-footer-about__txt { font-size: 1.2rem; margin-top: 5px; } .l-fmenu { padding-left: 30px; padding-right: 30px; font-size: 1.4rem; line-height: 1.8; margin-top: 150px; border-top: 1px solid rgba(0, 0, 0, 0.15); position: relative; } .l-header { position: relative; z-index: 4000; height: 130px; width: 1260px; margin: 0 auto; -webkit-transition: width ease-out .2s; transition: width ease-out .2s; } .l-header__block { position: relative; } .l-header-logo { position: absolute; top: 30px; left: 20px; } .l-loading { position: fixed; height: 100%; width: 100%; z-index: 5001; overflow: hidden; } .l-loading__bg { position: relative; height: 100%; width: 100%; } .l-loading__bg span { background-color: #141414; position: absolute; top: 50%; left: 50%; margin: auto; height: 120%; width: 120%; -webkit-transform: skewY(0) translate(-50%, -50%); transform: skewY(0) translate(-50%, -50%); } .l-loading__loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 0; margin: auto; width: 100px; height: 100px; } .l-loading__loader span { display: block; opacity: 0; } .l-loading__loader span svg { width: 100px; fill: #fff; } /** * main.scss */ .l-main { font-size: 1.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; width: 1260px; margin: 0 auto; padding: 0 20px; } .l-main__contents { position: relative; width: 940px; } .s-top .l-main__contents { padding-top: 20px; } .l-main__side { position: relative; width: 240px; padding-top: 20px;} /** * main.scss */ .l-menu { /* オープンメニュー --------------------------------- */ } .l-menu__wrap { z-index: 4600; -webkit-transition: opacity ease-in-out 2s 1s, -webkit-transform ease-in-out 2s 1s; transition: opacity ease-in-out 2s 1s, -webkit-transform ease-in-out 2s 1s; transition: transform ease-in-out 2s 1s, opacity ease-in-out 2s 1s; transition: transform ease-in-out 2s 1s, opacity ease-in-out 2s 1s, -webkit-transform ease-in-out 2s 1s; } .l-menu-cart { position: absolute; top: 43px; right: 80px; font-size: 1.2rem; line-height: 1.1; background: url(../image/i_cart.svg) no-repeat 0% 0%; height: 40px; padding-top: 0px; font-size: 1.4rem; line-height: 1.8; line-height: 1.3; -webkit-transition: opacity ease-out .3s; transition: opacity ease-out .3s; } .l-menu-cart a { display: block; padding-left: 60px; } .l-menu-cart__score { font-size: 2rem; } .l-menu-cart__total { padding-left: 15px; } .l-menu-smtBtn { display: none; } .l-menu-smtBtn__item { text-align: center; margin-right: 7px; } .l-menu-smtBtn__item a { display: block; } .l-menu-smtBtn__item figure { height: 24px; 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; } .l-menu-smtBtn__item span { letter-spacing: 0; } .l-menu-smtBtn__item:nth-of-type(1) img { width: 18px; } .l-menu-smtBtn__item:nth-of-type(2) img { width: 16px; } .l-menu-smtBtn__item:nth-of-type(3) img { width: 24px; margin-top: 2px; } .l-menu-btn { position: absolute; right: 20px; top: 48px; width: 30px; height: 30px; margin: auto; } .l-menu-btn.on .l-menu-btn__border span { background-color: #000; } .activeMenu .l-menu-btn .l-menu-btn__border span { background-color: #000; } .l-menu-btn p { display: none; } .l-menu-btn__border { position: relative; width: 30px; height: 30px; cursor: pointer; } .l-menu-btn__border span { pointer-events: none; display: block; width: 30px; height: 2px; margin: auto; background-color: #000; -webkit-transition: background-color .5s, opacity ease-out .2s, -webkit-transform ease-out .1s; transition: background-color .5s, opacity ease-out .2s, -webkit-transform ease-out .1s; transition: background-color .5s, transform ease-out .1s, opacity ease-out .2s; transition: background-color .5s, transform ease-out .1s, opacity ease-out .2s, -webkit-transform ease-out .1s; } .l-menu-btn__border span:nth-of-type(1) { position: absolute; top: 0; bottom: 0; -webkit-transform: translate(0, 6px); transform: translate(0, 6px); } .l-menu-btn__border span:nth-of-type(2) { position: absolute; top: 0; bottom: 0; -webkit-transform: translate(0, -6px); transform: translate(0, -6px); } .l-menu-btn.active .l-menu-btn__border span { display: none; } .l-menu-openBtn { position: absolute; right: 20px; top: 48px; width: 30px; height: 30px; margin: auto; } .l-menu-openBtn p { display: none; } .l-menu-openBtn__border { position: relative; width: 30px; height: 30px; cursor: pointer; } .l-menu-openBtn__border span { pointer-events: none; display: block; width: 30px; height: 2px; margin: auto; background-color: #000; -webkit-transition: background-color .5s, opacity ease-out .2s, -webkit-transform ease-out .1s; transition: background-color .5s, opacity ease-out .2s, -webkit-transform ease-out .1s; transition: background-color .5s, transform ease-out .1s, opacity ease-out .2s; transition: background-color .5s, transform ease-out .1s, opacity ease-out .2s, -webkit-transform ease-out .1s; } .l-menu-openBtn__border span:nth-of-type(1) { position: absolute; top: 0; bottom: 0; -webkit-transform: translate(0, 0px) rotate(-45deg); transform: translate(0, 0px) rotate(-45deg); } .l-menu-openBtn__border span:nth-of-type(2) { position: absolute; top: 0; bottom: 0; -webkit-transform: translate(0, 0px) rotate(45deg); transform: translate(0, 0px) rotate(45deg); } .l-menu-open { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 4500; background-color: #fff; font-size: 1.5rem; } .l-menu-open__inner { width: 600px; margin: 0 auto; font-size: 1.4rem; line-height: 1.8; } .l-menu-open__list > ul { line-height: 1.5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .l-menu-open__list > ul > li { font-size: 1.8rem; margin: 0 15px; } .l-menu-open__list > ul > li a { display: inline-block; position: relative; } .l-menu-open__list > ul > li a::before { background-color: #000; content: ""; height: 1px; position: absolute; left: 0; bottom: -2px; -webkit-transition: width .3s; transition: width .3s; width: 0; } .l-menu-open__list > ul > li a span i { font-style: normal; } .l-menu-open__list2 { margin-top: 40px; } .l-menu-open__list2 > ul { line-height: 1.5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .l-menu-open__list2 > ul > li { margin: 0 10px; margin-bottom: 12px; } .l-menu-open__list2 > ul > li a { display: inline-block; position: relative; } .l-menu-open__list2 > ul > li a::before { background-color: #000; content: ""; height: 1px; position: absolute; left: 0; bottom: -2px; -webkit-transition: width .3s; transition: width .3s; width: 0; } .l-menu-open__list2 > ul > li a span i { font-style: normal; } .l-menu-open__logo { margin-bottom: 3%; } .l-menu-open__btn { margin-top: 3%; } .l-side-ttl { font-size: 1.8rem; display: inline-block; margin-bottom: 15px; } .l-side-list { margin-top: 60px; padding-bottom: 30px;} .l-side-list__list { font-size: 1.4rem; line-height: 1.8; line-height: 1.5; padding-left: 5px; } .l-side-list__list li + li { margin-top: 15px; } .l-side-list__list li ul { margin-top: 15px; margin-left: 30px; } .l-side-list__list li ul li a { padding-left: 6px; } .l-side-list__list li ul li a span { display: inline-block; position: relative; } .l-side-list__list li ul li a span::before { background-color: #000; content: ""; height: 1px; position: absolute; left: 0; bottom: -2px; -webkit-transition: width .3s; transition: width .3s; width: 0; } .l-side-search { margin-top: 60px; margin-bottom: 60px; } .l-side-tw { margin-top: 30px; } .p-article { /* labo ------------------------------ */ /* works ------------------------------ */ } .p-article-detail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 1070px; margin: 0 auto; padding-left: 30px; padding-right: 30px; } .p-article-contents { width: 720px; } .p-article-side { width: 300px; margin-left: 50px; } .p-article-sideBanner__item { margin-bottom: 40px; } .p-article-detail__works { padding-left: 30px; padding-right: 30px; max-width: 1000px; margin: 0 auto; -webkit-box-sizing: content-box; box-sizing: content-box; } .p-article-detail__works img { width: 100%; height: auto; } .p-billboard { width: 1260px; margin: 0 auto; margin-bottom: 30px; padding: 0 20px; font-size: 1.4rem; line-height: 1.8; line-height: 1.6; } .p-billboard__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; background-color: #fcf7e5; border: 1px solid #ccc; padding: 10px; } .p-billboard__ttl { padding: 10px 15px; background-color: #ca0d1b; color: #fff; min-width: 200px; text-align: center; } .p-billboard__dtl { padding: 5px 0; padding-left: 15px; } .p-cttList { margin-top: 160px; margin-bottom: 100px; padding-bottom: 100px; text-align: center; border-bottom: 2px solid rgba(0, 0, 0, 0.15); font-size: 1.4rem; line-height: 1.8; } .p-cttList h2 { font-size: 2.2rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; margin-bottom: 5px; } .p-cttList figure { position: relative; display: block; margin: 0 auto; margin-top: 20px; margin-bottom: 30px; width: 450px; height: 240px; 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; } .p-cttList__product img { position: absolute; opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); -webkit-transition: opacity ease-out .6s, -webkit-transform ease-out 1s; transition: opacity ease-out .6s, -webkit-transform ease-out 1s; transition: opacity ease-out .6s, transform ease-out 1s; transition: opacity ease-out .6s, transform ease-out 1s, -webkit-transform ease-out 1s; } .p-cttList__product img.p1 { left: 0; top: 0; -webkit-transition-delay: .0s; transition-delay: .0s; } .p-cttList__product img.p2 { right: 85px; top: 55px; -webkit-transition-delay: .1s; transition-delay: .1s; } .p-cttList__product img.p3 { right: 10px; bottom: 25px; -webkit-transition-delay: .2s; transition-delay: .2s; } .p-cttList__product img.p4 { left: 90px; bottom: 0px; -webkit-transition-delay: .3s; transition-delay: .3s; } .p-cttList__product.inview img { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } .p-cttList__recipe img { opacity: 0; -webkit-transition: opacity ease-out .6s, -webkit-transform ease-out 1s; transition: opacity ease-out .6s, -webkit-transform ease-out 1s; transition: opacity ease-out .6s, transform ease-out 1s; transition: opacity ease-out .6s, transform ease-out 1s, -webkit-transform ease-out 1s; } .p-cttList__recipe img:nth-of-type(n+2) { margin-left: 6px; } .p-cttList__recipe img:nth-of-type(odd) { margin-top: -30px; -webkit-transition-delay: .1s; transition-delay: .1s; -webkit-transform: translateY(-40px); transform: translateY(-40px); } .p-cttList__recipe img:nth-of-type(even) { margin-top: 30px; -webkit-transition-delay: .3s; transition-delay: .3s; -webkit-transform: translateY(40px); transform: translateY(40px); } .p-cttList__recipe.inview img { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } .p-detail-ttl { border-bottom: 1px solid #000; padding-bottom: 10px; margin-bottom: 30px; } .p-detail-ttl h2 { font-size: 3rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; margin-top: 10px; } .p-detail-inner { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .p-detail-inner a { text-decoration: underline; } .p-detail-dtl { width: calc(100% - 300px); padding-top: 80px; } .p-detail-pix { width: 260px; text-align: center; } .p-detail-pix .mini { display: block; text-align: center; margin: 5px 0; } .p-detail-sns { text-align: center; margin-top: 10px; } .p-detail-sns .addthis_toolbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-detail-code { width: calc(100% - 300px); position: absolute; left: 0; top: 0; } .p-detail-code dl { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1.6; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .p-detail-code dl + dl { margin-top: 5px; } .p-detail-code dl dt { width: 130px; background-color: #e4e4e4; text-align: center; padding: 0px 10px; margin-right: 10px; } .p-detail-code dl dd { width: calc(100% - 120px); } .p-detail-code dl dd span { display: inline-block; margin-right: 20px; } .p-detail-dtl__txt { font-size: 1.4rem; line-height: 1.8; } .p-detail-dtl__txt .comment1 { margin-top: 10px; } .p-detail-dtl__price { max-width: 500px; margin-top: 30px; border: 1px solid #f2f0d9; background-color: #fffde2; padding: 30px 50px; } .p-detail-dtl__price .price-n { margin-bottom: 10px; } .p-detail-dtl__price .price-n span { font-size: 120%; } .p-detail-dtl__price .price { font-size: 2rem; color: #ca0d1b; } .p-detail-dtl__price .price span { font-size: 120%; } .p-detail-dtl__price .favorite_btn { margin-top: 15px; } .p-detail-dtl__price .classlist { margin: 20px 0 20px; padding-bottom: 20px; border-bottom: 1px dotted #aaa; text-align: left; } .p-detail-dtl__price .classlist ul { margin-top: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-detail-dtl__price .classlist ul li:nth-of-type(1) { width: 100%; } .p-detail-dtl__price .classlist ul li + li { margin-top: 5px; } .p-detail-dtl__price .classlist ul select { border: 1px solid #ccc; } .p-detail-dtl__price .classlist ul input[type=text] { width: 100%; border: 1px solid #ccc; } .p-detail-form { margin-top: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .p-detail-form dd, .p-detail-form dt { margin-right: 5px; } .p-detail-form input[type=text], .p-detail-form input[type=password], .p-detail-form input[type=tel], .p-detail-form input[type=number], .p-detail-form input[type=email] { width: 120px; padding: 10px 10px; border: 1px solid #ddd; -webkit-transition: border ease-out .2s; transition: border ease-out .2s; background-color: #fff; } .p-detail-form input[type=text]:focus, .p-detail-form input[type=password]:focus, .p-detail-form input[type=tel]:focus, .p-detail-form input[type=number]:focus, .p-detail-form input[type=email]:focus { border: 1px solid #000; outline: 0; background-color: #fff; } .p-detail-form input[type=submit] { width: 160px; height: 38px; background: #7aab1a url(../image/i_cart2.svg) no-repeat 15% 40%; color: #fff; border-radius: 4px; border: none; -webkit-transition: background-color ease-out .2s; transition: background-color ease-out .2s; padding-left: 40px; } .p-detail-form input[type=submit]:hover { background-color: #666; } .p-detail-form .btn_add-cart { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 160px; height: 38px; background: #7aab1a url(../image/i_cart2.svg) no-repeat 15% 40%; color: #fff; border-radius: 4px; border: none; -webkit-transition: background-color ease-out .2s; transition: background-color ease-out .2s; padding-left: 55px; text-decoration: none; } .p-detail-form .btn_add-cart:hover { background-color: #666; } .p-detail-free { border-top: 1px solid #000; padding-top: 100px; margin-top: 100px; line-height: 1.5; } .p-detail-free p + p { margin-top: 50px; } .p-detail-free__inner { max-width: 650px; margin: 0 auto; } .p-detail-free a { text-decoration: underline; } .p-info-ctt { margin-top: 100px; } .p-info-ctt__split { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 100px; } .p-info-ctt__split .p-info { width: 47%; } .p-info__btn { text-align: right; margin-top: 50px; } .p-infoDetail__ttlArea { 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; border-bottom: 1px solid #000; padding-bottom: 20px; margin-bottom: 50px; } .p-infoDetail__ttl { font-size: 2rem; font-weight: normal; } .p-infoDetail__date { font-size: 1.4rem; } .p-lead { padding-left: 30px; padding-right: 30px; margin-top: 15px; font-size: 1.4rem; line-height: 2.7; } .p-lead__ttl { font-size: 2.2rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; text-align: center; padding-top: 50px; } .p-lead__free { font-size: 2.2rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; color: #fff; margin-top: 20px; padding: 10px 30px; display: inline-block; background-color: #a18344; border-radius: 30px; font-size: 2rem; } .p-lead-large { padding-left: 30px; padding-right: 30px; margin-top: 60px; font-size: 3rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; text-align: center; } .p-lead-recipe { margin-top: 60px; font-size: 3rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; text-align: center; } .p-lead-owner { margin-top: 60px; } .p-lead-owner__ttl { font-size: 3rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; text-align: center; margin-bottom: 55px; } .p-lead-owner__ttl span { font-size: 1.6rem; display: block; margin-top: 10px; } .p-lead-owner p { font-size: 1.4rem; line-height: 2.7; } .p-lead-gomayan { position: relative; padding-left: 30px; padding-right: 30px; margin-top: 30px; font-size: 1.4rem; line-height: 2.7; } .p-lead-gomayan p { position: relative; z-index: 1; } .p-lead-kura { padding-left: 30px; padding-right: 30px; margin-top: 20px; } .p-lead-kura dl { font-size: 1.4rem; line-height: 1.8; line-height: 1.4; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-lead-kura dl dt { background-color: #000; color: #fff; padding: 5px 10px; } .p-lead-kura dl dd { padding-left: 10px; } .p-lead-kura dl dd + dt { margin-left: 60px; } .p-lead-kura dl a { position: relative; position: relative; margin-left: 20px; display: inline-block; } .p-lead-kura dl a::before { background-color: #000; content: ""; height: 1px; position: absolute; left: 0; bottom: -2px; -webkit-transition: width .3s; transition: width .3s; width: 100%; } .p-list-ttl { border-bottom: 1px solid #000; padding-bottom: 10px; margin-bottom: 30px; } .p-list-ttl h2 { font-size: 3rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; margin-top: 10px; } .p-list__wrap { margin: 60px 0; } .p-list-number .attention { color: #ca0d1b; } .pagenumber_area { 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; margin: 20px 0px; } .pagenumber_area .change { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: right; } .pagenumber_area .change a, .pagenumber_area .change strong { margin-right: 10px; border: 1px solid #000; padding: 6px 10px; border-radius: 4px; } .pagenumber_area .change strong { background-color: #000; color: #fff; } .pagenumber_area .change a { -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } .pagenumber_area .change a:hover { border: 1px solid #ca0d1b; color: #ca0d1b; } .pagenumber_area select { margin-left: 5px; border: 1px solid #ccc; } .pagenumber_area .navi { text-align: left; } .pagenumber_area .navi a { -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } .pagenumber_area .navi a:hover { color: #ca0d1b; } .p-mainSlide { position: relative; min-width: 1260px; margin: 0 auto; margin-bottom: 10px; } .p-mainSlide__wrap { overflow: hidden; } .p-mainSlide__inner { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; padding-bottom: 40px; } .p-mainSlide__item { width: 1000px; height: 432px; overflow: hidden; } .p-mainSlide__item + .p-mainSlide__item { margin-left: 30px; } .p-mainSlide .swiper-pagination-bullet-active { opacity: 1; background: #ca0d1b; } .p-mainVs-pix { position: relative; padding-top: 110px; } .motion .p-mainVs-pix .p-mainVs-pix__bg { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .p-mainVs-pix__mv { width: 100%; height: 500px; overflow: hidden; position: relative; background-color: #000; } .p-recipeDetail .p-mainVs-pix__mv, .p-newsDetail .p-mainVs-pix__mv { height: 300px; } .p-mainVs-pix__bg { width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: cover; -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; -webkit-transition: opacity ease-out 3.5s, -webkit-transform ease-out 3s; transition: opacity ease-out 3.5s, -webkit-transform ease-out 3s; transition: transform ease-out 3s, opacity ease-out 3.5s; transition: transform ease-out 3s, opacity ease-out 3.5s, -webkit-transform ease-out 3s; } .p-mainVs-simple { padding-top: 150px; padding-bottom: 120px; text-align: center; } .p-mainVs-simple h2 { font-family: 'Archivo Narrow'; font-weight: 700; letter-spacing: 0.08em; letter-spacing: 0.8em; font-size: 6rem; -webkit-transition: letter-spacing ease-out 1s; transition: letter-spacing ease-out 1s; } .p-mainVs-simple.inview h2 { letter-spacing: 0.2em; } .p-modal { display: none; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 100000; width: 100%; height: 100%; overflow-y: auto; padding-bottom: 100px; -webkit-overflow-scrolling: touch; z-index: z-modal(0); } .p-modal__item { position: relative; width: 100%; padding-top: 56.2%; } .p-modal__item iframe { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100%; } .p-modal__close { padding: 60px 0; } .p-modal__close .btn { cursor: pointer; height: 16px; margin: 0 auto; width: 26px; position: relative; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .p-modal__close .btn span { background-color: #000; height: 2px; position: absolute; left: 0; right: 0; margin: auto; width: 100%; -webkit-transition: all .3s; transition: all .3s; } .p-modal__close .btn span:nth-of-type(1) { top: 0; } .p-modal__close .btn span:nth-of-type(2) { bottom: 0; } /* マイページ上部分 ----------------------- */ #mynavi_area { font-size: 1.4rem; line-height: 1.8; } #mynavi_area ul.mynavi_list { 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; margin-bottom: 50px; } #mynavi_area ul.mynavi_list li a { display: block; border-radius: 4px; border: 1px solid #000; padding: 10px 12px; -webkit-transition: color ease-out .2s, background-color ease-out .2s; transition: color ease-out .2s, background-color ease-out .2s; } #mynavi_area .point_announce { margin-bottom: 30px; padding: 20px 50px; border: solid 1px #ffcc62; background-color: #fffaf0; } /* マイページ下部分 ----------------------- */ #mycontents_area { font-size: 1.4rem; line-height: 1.8; margin-top: 80px; } #mycontents_area table.tbl_form { width: 100%; margin: 40px auto 40px auto; line-height: 1.8; border-collapse: collapse; border-spacing: 0; } #mycontents_area table.tbl_form a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #mycontents_area table.tbl_form td, #mycontents_area table.tbl_form th { font-weight: normal; border: 1px solid #ccc; padding: 10px 20px; } #mycontents_area table.tbl_form th { background-color: #f0f0f0; text-align: left; width: 290px; } #mycontents_area table.tbl { width: 100%; margin: 40px auto 40px auto; line-height: 1.8; border-collapse: collapse; border-spacing: 0; } #mycontents_area table.tbl a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #mycontents_area table.tbl td, #mycontents_area table.tbl th { font-weight: normal; border: 1px solid #ccc; padding: 5px; } #mycontents_area table.tbl th { background-color: #f0f0f0; width: 150px; } #mycontents_area table.tbl_recommend { width: 100%; margin: 40px auto 0px auto; line-height: 1.8; border-collapse: collapse; border-spacing: 0; } #mycontents_area table.tbl_recommend a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #mycontents_area table.tbl_recommend td, #mycontents_area table.tbl_recommend th { font-weight: normal; border: 1px solid #ccc; padding: 10px 20px; } #mycontents_area table.tbl_recommend th { background-color: #f0f0f0; } #mycontents_area table.tbl_recommend td:nth-of-type(1) { border-top: 1px solid #ccc; padding-top: 10px; } #mycontents_area table.tbl_recommend td:last-of-type { padding-bottom: 10px; } #mycontents_area table.tbl_delivery { width: 100%; margin: 40px auto 0px auto; line-height: 1.8; border-collapse: collapse; border-spacing: 0; } #mycontents_area table.tbl_delivery a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #mycontents_area table.tbl_delivery td, #mycontents_area table.tbl_delivery th { font-weight: normal; border: 1px solid #ccc; padding: 10px 20px; } #mycontents_area table.tbl_delivery th { background-color: #f0f0f0; } #mycontents_area table.tbl_delivery td:nth-of-type(1) { border-top: 1px solid #ccc; padding-top: 10px; } #mycontents_area table.tbl_delivery td:last-of-type { padding-bottom: 10px; } #mycontents_area table.tbl_history { width: 100%; margin: 40px auto 0px auto; line-height: 1.8; border-collapse: collapse; border-spacing: 0; } #mycontents_area table.tbl_history a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #mycontents_area table.tbl_history td, #mycontents_area table.tbl_history th { font-weight: normal; border: 1px solid #ccc; padding: 10px 20px; } #mycontents_area table.tbl_history th { background-color: #f0f0f0; } #mycontents_area table.tbl_history .sp_txt { display: none; } #mycontents_area table.tbl_history td:nth-of-type(1) { border-top: 1px solid #ccc; padding-top: 10px; } #mycontents_area table.tbl_history td:last-of-type { padding-bottom: 10px; } /* ============================================== ▼MYページ =============================================== */ #mycontents_area p.inforamtion { margin-bottom: 20px; } #mypagecolumn h4 { margin: 10px auto; border-bottom: 1px solid #999; text-align: left; font-size: 120%; } #mycontents_area div.mycondition_area { margin: 0 auto 20px 0; padding: 10px; border: solid 1px #ccc; width: 97%; background: #f9f9f9; } #mycontents_area div.mycondition_area p { float: left; } #mycontents_area div.mycondition_area .btn { width: 160px; margin-top: 15px; float: right; } /* 購入履歴一覧/詳細 ----------------------------------------------- */ .add_address { margin-bottom: 20px; } /* 会員登録内容変更/退会 ----------------------------------------------- */ #mycontents_area .message_area { margin: 30px auto; padding: 30px; border: 1px solid #ccc; text-align: center; } #mycontents_area .message_area p { margin-bottom: 20px; } .p-pagetop { display: block; width: 60px; height: 60px; background: #fff; border-radius: 50%; text-align: center; font-size: 1.0rem; padding-top: 22px; cursor: pointer; z-index: 3900; -webkit-transition: color ease-out .2s, background-color ease-out .2s; transition: color ease-out .2s, background-color ease-out .2s; position: absolute; right: 30px; top: 30px; } .p-pagetop.fixed { position: fixed; right: 30px; top: auto; bottom: 30px; } .p-pagetop::before { content: ""; position: absolute; right: 0px; left: 0; top: 10px; margin: auto; width: 10px; height: 10px; border-top: 1px solid; border-right: 1px solid; color: #000; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: color ease-out .2s,-webkit-transform ease-out .2s; transition: color ease-out .2s,-webkit-transform ease-out .2s; transition: color ease-out .2s,transform ease-out .2s; transition: color ease-out .2s,transform ease-out .2s,-webkit-transform ease-out .2s; } .p-pagetop-fix { pointer-events: all; display: block; width: 60px; height: 60px; background: #fff; border-radius: 50%; text-align: center; font-size: 1.0rem; padding-top: 22px; cursor: pointer; z-index: 3900; -webkit-transition: color ease-out .2s, background-color ease-out .2s; transition: color ease-out .2s, background-color ease-out .2s; position: absolute; top: 0; right: 30px; } .p-pagetop-fix::before { content: ""; position: absolute; right: 0px; left: 0; top: 10px; margin: auto; width: 10px; height: 10px; border-top: 1px solid; border-right: 1px solid; color: #000; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: color ease-out .2s,-webkit-transform ease-out .2s; transition: color ease-out .2s,-webkit-transform ease-out .2s; transition: color ease-out .2s,transform ease-out .2s; transition: color ease-out .2s,transform ease-out .2s,-webkit-transform ease-out .2s; } .p-policy-ctt__block { font-size: 1.4rem; line-height: 1.8; } .p-policy-ctt__block + .p-policy-ctt__block { margin-top: 50px; } .p-policy-ctt__ttl { font-size: 2.2rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; margin-bottom: 10px; } .p-productsList { padding: 0 10px; } .p-productsList__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-productsList__item { position: relative; height: 300px; margin: 10px; } .p-productsList__link { position: relative; background-color: #000; display: block; width: 100%; height: 300px; } .p-productsList__ttl { font-size: 1.6rem; line-height: 1.8; background-color: rgba(255, 255, 255, 0.8); padding: 5px 20px; -webkit-transition: opacity ease-out .2s,-webkit-transform ease-out .2s; transition: opacity ease-out .2s,-webkit-transform ease-out .2s; transition: transform ease-out .2s,opacity ease-out .2s; transition: transform ease-out .2s,opacity ease-out .2s,-webkit-transform ease-out .2s; } .p-productsList .p-productsList__pix { width: 100%; height: 100%; background-size: cover; -webkit-transition: opacity ease-out .2s,-webkit-transform ease-out 2s; transition: opacity ease-out .2s,-webkit-transform ease-out 2s; transition: transform ease-out 2s,opacity ease-out .2s; transition: transform ease-out 2s,opacity ease-out .2s,-webkit-transform ease-out 2s; } .p-productsList__pix--1 { background: url(https://gomayan.com/common/images/products/p1.jpg) no-repeat 50% 50%; } .p-productsList__pix--2 { background: url(https://gomayan.com/common/images/products/p2.jpg) no-repeat 50% 50%; } .p-productsList__pix--3 { background: url(https://gomayan.com/common/images/products/p3.jpg) no-repeat 50% 50%; } .p-productsList__pix--4 { background: url(https://gomayan.com/common/images/products/p4.jpg) no-repeat 50% 50%; } .p-productsList__pix--5 { background: url(https://gomayan.com/common/images/products/p5.jpg) no-repeat 50% 50%; } .p-productsList__pix--6 { background: url(https://gomayan.com/common/images/products/p6.jpg) no-repeat 50% 50%; } .p-productsList__pix--7 { background: url(https://gomayan.com/common/images/products/p7.jpg) no-repeat 50% 50%; } .p-productsList__pix--8 { background: url(https://gomayan.com/common/images/products/p8.jpg) no-repeat 50% 50%; } .p-productsList__pix--9 { background: url(https://gomayan.com/common/images/products/p9.jpg) no-repeat 50% 50%; } .p-productsList__pix--10 { background: url(https://gomayan.com/common/images/products/p10.jpg) no-repeat 50% 50%; } .p-productsList__pix--11 { background: url(https://gomayan.com/common/images/products/p11.jpg) no-repeat 50% 50%; } .p-productsList__pix--12 { background: url(https://gomayan.com/common/images/products/p12.jpg) no-repeat 50% 50%; } .p-productsList__pix--13 { background: url(https://gomayan.com/common/images/products/p13.jpg) no-repeat 50% 50%; } .p-productsList__dtl { width: 100%; height: 100%; padding: 70px 50px; font-size: 1.4rem; line-height: 1.8; color: #fff; -webkit-transition: opacity ease-out 1s,-webkit-transform ease-out .5s; transition: opacity ease-out 1s,-webkit-transform ease-out .5s; transition: transform ease-out .5s,opacity ease-out 1s; transition: transform ease-out .5s,opacity ease-out 1s,-webkit-transform ease-out .5s; } .p-productsList-slide__ttl { font-size: 1.8rem; margin-bottom: 5px; } .p-productsList-slide__btn { position: absolute; right: 50px; bottom: 30px; pointer-events: none; } .p-scroll { position: absolute; left: 50px; bottom: 30px; pointer-events: all; } .p-scroll a { position: relative; display: block; color: #fff; font-size: 1.3rem; letter-spacing: 0.3em; -webkit-transition: color ease-out .3s; transition: color ease-out .3s; } .p-scroll a::before { content: ""; position: absolute; top: -135px; left: 0; display: block; width: 1px; height: 120px; background-color: white; -webkit-transition: -webkit-transform ease-out .3s; transition: -webkit-transform ease-out .3s; transition: transform ease-out .3s; transition: transform ease-out .3s, -webkit-transform ease-out .3s; -webkit-transform-origin: left bottom; transform-origin: left bottom; } .p-scroll a::after { content: ""; position: absolute; bottom: 29px; left: 0; display: block; width: 1px; height: 20px; background-color: #ca0d1b; -webkit-transform: translate(0, 0px) scale(1, 1); transform: translate(0, 0px) scale(1, 1); -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transition: -webkit-transform ease-out .3s; transition: -webkit-transform ease-out .3s; transition: transform ease-out .3s; transition: transform ease-out .3s, -webkit-transform ease-out .3s; } .p-scroll a:hover { color: #ca0d1b; } .p-scroll a:hover::before { -webkit-transform: scaleY(0); transform: scaleY(0); } .p-scroll a:hover::after { -webkit-transform: scaleY(3); transform: scaleY(3); } @-webkit-keyframes scroll_down { 0% { -webkit-transform: translate(0, 0px); transform: translate(0, 0px); opacity: 0; } 20% { opacity: 1; } 50% { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); } 100% { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); opacity: 0; } } @keyframes scroll_down { 0% { -webkit-transform: translate(0, 0px); transform: translate(0, 0px); opacity: 0; } 20% { opacity: 1; } 50% { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); } 100% { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); opacity: 0; } } /* 共通設定 ----------------------------------------------- */ #undercolumn, #mypagecolumn { /* ボタン ----------------------------------------------- */ /* 行揃え ----------------------------------------------- */ } #undercolumn h2.title, #mypagecolumn h2.title { border-bottom: 1px solid #000; padding-bottom: 10px; margin-bottom: 30px; font-size: 3rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; margin-top: 10px; } #undercolumn .sale_price, #mypagecolumn .sale_price { color: #ca0d1b; } #undercolumn .point, #mypagecolumn .point { color: #ca0d1b; font-weight: bold; } #undercolumn .user_name, #mypagecolumn .user_name { font-weight: bold; } #undercolumn .attention, #mypagecolumn .attention { color: #ca0d1b; font-size: 90%; } #undercolumn .attentionSt, #mypagecolumn .attentionSt { color: #ca0d1b; font-weight: bold; } #undercolumn .st, #mypagecolumn .st { font-weight: bold; } #undercolumn .btn_area, #mypagecolumn .btn_area { margin-top: 40px; width: 100%; text-align: center; font-size: 0; } #undercolumn .btn_area p, #mypagecolumn .btn_area p { line-height: 1.5; font-size: 12px; margin-top: 10px; } #undercolumn .btn_area li, #mypagecolumn .btn_area li { line-height: 1; font-size: 12px; margin: 0 8px; display: inline; } #undercolumn input.btn_submit, #undercolumn input.btn_submit_back, #undercolumn .btn_link, #undercolumn .btn_back, #mypagecolumn input.btn_submit, #mypagecolumn input.btn_submit_back, #mypagecolumn .btn_link, #mypagecolumn .btn_back { display: inline-block; min-width: 130px; height: 47px; padding: 0 10px; font-size: 1.4rem; line-height: 47px; color: #fff; border-radius: 4px; border: none; text-decoration: none; -webkit-transition: background-color ease-out .2s; transition: background-color ease-out .2s; } #undercolumn input.btn_submit:hover, #undercolumn input.btn_submit_back:hover, #undercolumn .btn_link:hover, #undercolumn .btn_back:hover, #mypagecolumn input.btn_submit:hover, #mypagecolumn input.btn_submit_back:hover, #mypagecolumn .btn_link:hover, #mypagecolumn .btn_back:hover { background-color: #666; color: #fff; } #undercolumn input.btn_submit, #mypagecolumn input.btn_submit { background-color: #000; } #undercolumn input.btn_submit_back, #mypagecolumn input.btn_submit_back { background-color: #999; } #undercolumn .btn_link, #mypagecolumn .btn_link { background-color: #000; } #undercolumn .btn_back, #mypagecolumn .btn_back { background-color: #999; } #undercolumn .alignC, #mypagecolumn .alignC { text-align: center; } #undercolumn .alignR, #mypagecolumn .alignR { text-align: right; } #undercolumn .alignL, #mypagecolumn .alignL { text-align: left; } #undercolumn .pricetd em, #mypagecolumn .pricetd em { font-weight: bold; } #quantity_level { font-size: 0; } #quantity_level li { line-height: 1; font-size: 12px; padding: 3px; display: inline; } #one_maincolumn .sub_area h3, #two_maincolumn_right .sub_area h3, #two_maincolumn_left .sub_area h3, #three_maincolumn .sub_area h3, #undercolumn_login .login_area h3, #undercolumn_shopping h3, #mypagecolumn h3, #undercolumn_cart h3 { margin: 0 0 18px 0; padding: 0 0 10px; color: #ca0d1b; font-size: 120%; border-bottom: 1px solid rgba(0, 0, 0, 0.15); } #two_maincolumn_right .sub_area h3 { color: #912701; } /* フォーム ----------------------------------------------- */ #undercolumn_entry input[type=text], #undercolumn_entry input[type=password], #undercolumn_contact input[type=text], #undercolumn_contact input[type=password], #undercolumn_customer input[type=text], #undercolumn_customer input[type=password], #mypagecolumn input[type=text], #mypagecolumn input[type=password] { -webkit-transition: border ease-out .2s; transition: border ease-out .2s; border: solid 1px #ccc; padding: 4px 5px; } #undercolumn_entry input[type=text]:focus, #undercolumn_entry input[type=password]:focus, #undercolumn_contact input[type=text]:focus, #undercolumn_contact input[type=password]:focus, #undercolumn_customer input[type=text]:focus, #undercolumn_customer input[type=password]:focus, #mypagecolumn input[type=text]:focus, #mypagecolumn input[type=password]:focus { border: 1px solid #000; outline: 0; } #undercolumn_entry input[type=radio], #undercolumn_entry input[type=checkbox], #undercolumn_contact input[type=radio], #undercolumn_contact input[type=checkbox], #undercolumn_customer input[type=radio], #undercolumn_customer input[type=checkbox], #mypagecolumn input[type=radio], #mypagecolumn input[type=checkbox] { margin-right: 5px; } #undercolumn_entry textarea, #undercolumn_contact textarea, #undercolumn_customer textarea, #mypagecolumn textarea { border: 1px solid #ccc; -webkit-transition: border ease-out .2s; transition: border ease-out .2s; padding: 4px 5px; } #undercolumn_entry textarea:focus, #undercolumn_contact textarea:focus, #undercolumn_customer textarea:focus, #mypagecolumn textarea:focus { border: 1px solid #000; outline: 0; } #undercolumn_entry select, #undercolumn_contact select, #undercolumn_customer select, #mypagecolumn select { border: solid 1px #ccc; } #undercolumn_entry .zipimg, #undercolumn_contact .zipimg, #undercolumn_customer .zipimg, #mypagecolumn .zipimg { margin-top: 10px; } #undercolumn_entry .box40, #undercolumn_contact .box40, #undercolumn_customer .box40, #mypagecolumn .box40 { width: 40px; } #undercolumn_entry .box60, #undercolumn_contact .box60, #undercolumn_customer .box60, #mypagecolumn .box60 { width: 60px; } #undercolumn_entry .box100, #undercolumn_contact .box100, #undercolumn_customer .box100, #mypagecolumn .box100 { width: 100px; } #undercolumn_entry .box120, #undercolumn_contact .box120, #undercolumn_customer .box120, #mypagecolumn .box120 { width: 120px; } #undercolumn_entry .box140, #undercolumn_contact .box140, #undercolumn_customer .box140, #mypagecolumn .box140 { width: 140px; } #undercolumn_entry .box145, #undercolumn_contact .box145, #undercolumn_customer .box145, #mypagecolumn .box145 { width: 145px; } #undercolumn_entry .box150, #undercolumn_contact .box150, #undercolumn_customer .box150, #mypagecolumn .box150 { width: 150px; } #undercolumn_entry .box200, #undercolumn_contact .box200, #undercolumn_customer .box200, #mypagecolumn .box200 { width: 200px; } #undercolumn_entry .box240, #undercolumn_contact .box240, #undercolumn_customer .box240, #mypagecolumn .box240 { width: 240px; } #undercolumn_entry .box300, #undercolumn_contact .box300, #undercolumn_customer .box300, #mypagecolumn .box300 { width: 300px; } #undercolumn_entry .box320, #undercolumn_contact .box320, #undercolumn_customer .box320, #mypagecolumn .box320 { width: 320px; } #undercolumn_entry .box350, #undercolumn_contact .box350, #undercolumn_customer .box350, #mypagecolumn .box350 { width: 350px; } #undercolumn_entry .box380, #undercolumn_contact .box380, #undercolumn_customer .box380, #mypagecolumn .box380 { width: 380px; } #undercolumn_entry .mt10, #undercolumn_contact .mt10, #undercolumn_customer .mt10, #mypagecolumn .mt10 { margin-top: 10px; } #undercolumn_entry .hr-sp, #undercolumn_contact .hr-sp, #undercolumn_customer .hr-sp, #mypagecolumn .hr-sp { border: #fff; } /* 商品購入のナビゲーション ----------------------- */ .flow_area { margin-bottom: 40px; position: relative; } .flow_area::before { content: ""; position: absolute; top: 50px; right: 0; display: block; width: 100%; height: 1px; background-color: #ccc; } .flow_area ul { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .flow_area ul li { width: 23%; text-align: center; } .flow_area ul li.active .flow_area__sub { color: #ca0d1b; } .flow_area ul li.active .flow_area__ttl { background-color: #ca0d1b; color: #fff; border-color: #ca0d1b; } .flow_area ul li.active .flow_area__ttl::after { content: ""; position: absolute; bottom: -20px; left: 0; right: 0; display: block; width: 10px; height: 10px; border: 10px solid transparent; border-left: 10px solid #ca0d1b; margin: 0 auto; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .flow_area__sub { font-size: 1.3rem; margin-bottom: 4px; } .flow_area__ttl { position: relative; font-size: 1.3rem; background-color: #fff; border: 1px solid #ccc; padding: 10px 0; border-radius: 3px; } /* お店についてとは ----------------------- */ #undercolumn_aboutus table { font-size: 1.4rem; line-height: 1.8; line-height: 1.8; border-collapse: collapse; border-spacing: 0; } #undercolumn_aboutus table a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #undercolumn_aboutus table td, #undercolumn_aboutus table th { text-align: left; font-weight: normal; } #undercolumn_aboutus table th { width: 150px; } .undercolumn_aboutus_map { width: 100%; height: 500px; margin-bottom: 10px; margin-top: 20px; } /* ショッピングカート ----------------------- */ #undercolumn_cart { font-size: 1.4rem; line-height: 1.8; } #undercolumn_cart .point_announce { padding: 20px; margin-bottom: 20px; border: solid 1px #ffcc62; background: #fffaf0; text-align: center; font-size: 120%; } #undercolumn_cart .totalmoney_area { margin-bottom: 20px; } #undercolumn_cart table { margin: 40px auto 40px auto; line-height: 1.8; border-collapse: collapse; border-spacing: 0; } #undercolumn_cart table a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #undercolumn_cart table td, #undercolumn_cart table th { font-weight: normal; border: 1px solid #ccc; padding: 5px; } #undercolumn_cart table th { background-color: #f0f0f0; width: 150px; } #undercolumn_cart table.tbl_noshi { width: 100%; margin: 0; margin-bottom: 10px; font-size: 90%; line-height: 1.6; border-collapse: collapse; border-spacing: 0; } #undercolumn_cart table.tbl_noshi td, #undercolumn_cart table.tbl_noshi th { font-weight: normal; border: none; padding: 0; } /* 商品の購入 ----------------------- */ #undercolumn_shopping { font-size: 1.4rem; line-height: 1.8; } #undercolumn_shopping a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #undercolumn_shopping .pay_area { margin: 0 auto 30px; width: 100%; } #undercolumn_shopping .pay_area02 { margin: 40px auto 30px auto; } #undercolumn_shopping .pay_area02 .txtarea { margin: 5px 0 0 0; padding: 2px; border: 1px solid #ccc; width: 99%; height: 150px; } #undercolumn_shopping .pay_area02 .select-msg { margin-bottom: 10px; } #undercolumn_shopping .point_area { margin: 40px auto 0 auto; } #undercolumn_shopping .point_area .point_announce { padding: 20px; border: 1px solid #ccc; } #undercolumn_shopping .point_area p { margin-bottom: 20px; } #undercolumn_shopping .point_area .point_announce li { margin-bottom: 5px; } #undercolumn_shopping .information { margin-bottom: 15px; } #undercolumn_shopping .addbtn { margin-top: 10px; } #undercolumn_shopping table { width: 100%; margin: 30px auto 40px auto; line-height: 1.8; border-collapse: collapse; border-spacing: 0; } #undercolumn_shopping table td, #undercolumn_shopping table th { font-weight: normal; border: 1px solid #ccc; padding: 5px 10px; } #undercolumn_shopping table th { background-color: #f0f0f0; width: 150px; } #undercolumn_shopping table.tbl_noshi { width: 100%; margin: 0; margin-bottom: 10px; font-size: 90%; line-height: 1.6; border-collapse: collapse; border-spacing: 0; } #undercolumn_shopping table.tbl_noshi td, #undercolumn_shopping table.tbl_noshi th { font-weight: normal; border: none; padding: 0; } /* 商品購入　/ ログイン ----------------------- */ #undercolumn_login { font-size: 1.4rem; line-height: 1.8; } #undercolumn_login a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #undercolumn_login .login_area { margin-bottom: 30px; } #undercolumn_login .login_area .inputbox { margin: 15px auto 15px auto; padding: 25px 25px 25px 25px; background: #f0f0f0; } #undercolumn_login .login_area .inputbox .btn_area { margin-top: 0; } #undercolumn_login .formlist { display: -webkit-box; display: -ms-flexbox; display: flex; } #undercolumn_login .formlist dt { width: 150px; } #undercolumn_login .formlist dd { width: calc(100% - 150px); } #undercolumn_login .formlist + .formlist { margin-top: 20px; margin-bottom: 20px; } /* ログリンエラー ----------------------- */ #undercolumn_error { padding-top: 50px; } /* ご利用規約 特定商取引に関する法律に基づく表記 ----------------------- */ #undercolumn_entry, #undercolumn_order, #undercolumn_contact, #undercolumn_customer { font-size: 1.4rem; line-height: 1.8; } #undercolumn_entry a, #undercolumn_order a, #undercolumn_contact a, #undercolumn_customer a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #undercolumn_entry .kiyaku_text, #undercolumn_order .kiyaku_text, #undercolumn_contact .kiyaku_text, #undercolumn_customer .kiyaku_text { margin: 20px auto; padding: 10px; padding-right: 30px; border: solid 1px #ccc; width: 100%; line-height: 1.8; background: #fff; } #undercolumn_entry .shop_information, #undercolumn_order .shop_information, #undercolumn_contact .shop_information, #undercolumn_customer .shop_information { margin-top: 20px; } #undercolumn_entry table, #undercolumn_order table, #undercolumn_contact table, #undercolumn_customer table { width: 100%; margin: 40px auto 40px auto; line-height: 1.8; border-collapse: collapse; border-spacing: 0; } #undercolumn_entry table a, #undercolumn_order table a, #undercolumn_contact table a, #undercolumn_customer table a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #undercolumn_entry table td, #undercolumn_entry table th, #undercolumn_order table td, #undercolumn_order table th, #undercolumn_contact table td, #undercolumn_contact table th, #undercolumn_customer table td, #undercolumn_customer table th { font-weight: normal; border: 1px solid #ccc; padding: 10px 20px; } #undercolumn_entry table th, #undercolumn_order table th, #undercolumn_contact table th, #undercolumn_customer table th { background-color: #f0f0f0; text-align: left; width: 290px; } /* 個人情報 ----------------------- */ #undercolumn_privacy { font-size: 1.4rem; line-height: 1.8; } #undercolumn_privacy a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } #undercolumn_privacy .block { margin-top: 50px; } #undercolumn_privacy .message { font-size: 2rem; margin-bottom: 12px; } #undercolumn_privacy .p_text3 { text-align: right; margin-top: 20px; } #undercolumn_privacy ul li { text-indent: -1.5em; padding-left: 1.5em; } /* ▼ユーザー追加ページ共通 ----------------------- */ .user_pageArea .bloc_body { font-size: 1.4rem; line-height: 1.8; } .user_pageArea .bloc_body a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } .user_pageArea h3 { font-size: 140%; font-weight: normal; margin: 50px 0 25px; line-height: 1em; } .user_pageArea h4 { font-size: 120%; font-weight: normal; border-bottom: solid 1px #000; margin-top: 30px; margin-bottom: 15px; } .user_pageArea h4 span { color: #ca0d1b; } .user_pageArea h4.black { border-bottom: solid 1px #000; } .user_pageArea h5 { font-size: 1.4rem; color: #ca0d1b; font-weight: normal; } .user_pageArea p { margin-bottom: 15px; } .user_pageArea p strong { color: #ca0d1b; font-weight: normal; } /* お買い物について ----------------------- */ #shoppingabout_area .tel_box { 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; } #shoppingabout_area .tel_box div { margin: 0 20px; } #shoppingabout_area ul.haisou li { margin-bottom: 20px; } #shoppingabout_area ul.haisou li.li1 { color: #ca0d1b; } #shoppingabout_area table.table1 { margin: 15px 0; } #shoppingabout_area table.table1 th, #shoppingabout_area table.table1 td { text-align: center; font-size: 12px; color: #000; } #shoppingabout_area table.table1 th { background-color: #ca0d1b; color: #FFF; } #shoppingabout_area table.table1 th.th1 { width: 180px; } #shoppingabout_area table.table2 th { font-size: 12px; background-color: #FFF; width: 200px; text-align: center; color: #ca0d1b; } #shoppingabout_area table.table2 td { background-color: #FFF; font-size: 10px; color: #000; } #shoppingabout_area table.table2 td strong { color: #ca0d1b; font-weight: normal; } .c-block { position: relative; font-size: 1.4rem; line-height: 1.8; } .p-list + .c-block { margin-bottom: 50px; } .c-block + .c-block { margin-bottom: 100px; } .c-block__inner { margin-top: 25px; } .c-bread { margin-bottom: 40px; } .c-bread ol { font-size: 1.4rem; line-height: 1.8; font-size: 1.2rem; line-height: 1.4; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .c-bread ol li a { color: #999; } .c-bread ol li:nth-of-type(n+2):before { content: '>'; color: #999; margin: 0 15px; } .c-btn, .c-btn--footer, .c-btn--big { white-space: nowrap; font-size: 1.4rem; } .c-btn a, .c-btn--footer a, .c-btn--big a { position: relative; display: inline-block; height: 45px; padding: 0 20px 0 25px; border: 1px solid #000; -webkit-transition: color ease-out .3s; transition: color ease-out .3s; } .c-btn a > span, .c-btn--footer a > span, .c-btn--big a > span { 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; height: 100%; } .c-btn a > span b.shop, .c-btn--footer a > span b.shop, .c-btn--big a > span b.shop { background: url(https://gomayan.com/common/images/i_shop.svg) no-repeat 50% 50%; background-size: 100% auto; width: 26px; height: 26px; margin-right: 5px; -webkit-transform: translateY(-3px); transform: translateY(-3px); } .c-btn a > span i, .c-btn--footer a > span i, .c-btn--big a > span i { position: relative; display: block; width: 60px; height: 1px; background-color: rgba(0, 0, 0, 0.2); margin-left: 15px; overflow: hidden; } .c-btn a > span i::before, .c-btn--footer a > span i::before, .c-btn--big a > span i::before { content: ""; display: block; width: 20px; height: 1px; background-color: #ca0d1b; -webkit-transform: translate(40px, 0); transform: translate(40px, 0); } .c-btn a > span i::after, .c-btn--footer a > span i::after, .c-btn--big a > span i::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 1px; display: block; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right; transform-origin: right; background-color: #fff; -webkit-transition: -webkit-transform ease-out .3s; transition: -webkit-transform ease-out .3s; transition: transform ease-out .3s; transition: transform ease-out .3s, -webkit-transform ease-out .3s; } .c-btn a::before, .c-btn--footer a::before, .c-btn--big a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; display: block; width: 100%; height: 100%; background-color: #000; -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; -webkit-transform-origin: right; transform-origin: right; -webkit-transition: opacity ease-out .3s; transition: opacity ease-out .3s; } .c-btn--footer a { color: #fff; border: 1px solid #fff; height: 55px; } .c-btn--footer a > span i { background-color: rgba(255, 255, 255, 0.8); } .c-btn--footer a > span i::after { background-color: #ca0d1b; } .c-btn--footer a::before { background-color: #fff; } .c-btn--big { font-size: 2.6rem; } .c-btn--big a { height: 80px; padding: 0 30px 0 35px; } .c-btn-form { white-space: nowrap; font-size: 1.4rem; } .c-btn-form input { position: relative; display: inline-block; height: 60px; padding: 0 50px 0 50px; -webkit-transition: color ease-out .3s; transition: color ease-out .3s; background-color: #000; border: none; color: #fff; -webkit-transition: opacity ease-out .2s; transition: opacity ease-out .2s; } .c-btn-form input > span { 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; height: 100%; } /* text -------------------- */ .c-btn__txt, .c-btn__txt--white { white-space: nowrap; } .c-btn__txt a, .c-btn__txt--white a { position: relative; display: inline-block; -webkit-transition: color ease-out .3s; transition: color ease-out .3s; } .c-btn__txt a > span, .c-btn__txt--white a > span { 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; } .c-btn__txt a > span i, .c-btn__txt--white a > span i { position: relative; display: block; width: 60px; height: 1px; background-color: rgba(0, 0, 0, 0.2); margin-left: 15px; overflow: hidden; } .c-btn__txt a > span i::before, .c-btn__txt--white a > span i::before { content: ""; display: block; width: 20px; height: 1px; background-color: #ca0d1b; -webkit-transform: translate(40px, 0); transform: translate(40px, 0); } .c-btn__txt a > span i::after, .c-btn__txt--white a > span i::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 1px; display: block; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right; transform-origin: right; background-color: #ca0d1b; -webkit-transition: -webkit-transform ease-out .3s; transition: -webkit-transform ease-out .3s; transition: transform ease-out .3s; transition: transform ease-out .3s, -webkit-transform ease-out .3s; } .c-btn__txt--white a { color: #fff; } .c-btn__txt--white a > span i { background-color: white; } /* arrow -------------------- */ .c-btn-arrow::before { display: inline-block; content: "▼"; -webkit-transform: rotate(-90deg) translateX(2px) scale(0.8); transform: rotate(-90deg) translateX(2px) scale(0.8); font-size: 1rem; } .c-btn-arrow span { margin-left: 5px; display: inline-block; position: relative; } .c-btn-arrow span::before { background-color: #000; content: ""; height: 1px; position: absolute; left: 0; bottom: -2px; -webkit-transition: width .3s; transition: width .3s; width: 0; } .c-btn-arrow--side { position: relative; display: inline-block; padding-left: 10px; line-height: 1.4; } .c-btn-arrow--side::before { position: absolute; left: 0; top: 3px; display: inline-block; content: "▼"; -webkit-transform: rotate(-90deg) translateX(2px) scale(0.8); transform: rotate(-90deg) translateX(2px) scale(0.8); font-size: 1rem; } .c-btn-arrow--side span { margin-left: 5px; display: inline-block; position: relative; } .c-btn-arrow--side span::before { background-color: #000; content: ""; height: 1px; position: absolute; left: 0; bottom: -2px; -webkit-transition: width .3s; transition: width .3s; width: 0; } .c-btn-arrow--white { color: #fff; } .c-btn-arrow--white::before { display: inline-block; content: "▼"; -webkit-transform: rotate(-90deg) translateX(2px) scale(0.8); transform: rotate(-90deg) translateX(2px) scale(0.8); font-size: 1rem; } .c-btn-arrow--white span { color: #fff; margin-left: 5px; display: inline-block; position: relative; } .c-btn-arrow--white span::before { background-color: #fff; content: ""; height: 1px; position: absolute; left: 0; bottom: -2px; -webkit-transition: width .3s; transition: width .3s; width: 0; } .c-cartBox { position: relative; margin-top: 40px; margin-bottom: 40px; } .c-cartBox a { text-decoration: underline; -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } .c-cartBox-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; } .c-cartBox-head__t1 { width: 80%; padding-left: 9%; } .c-cartBox-head__t1--confirm { width: 80%; padding-left: 0; } .c-cartBox-head__t2 { width: 20%; text-align: right; } .c-cartBox-dtl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; border-bottom: 1px solid #ccc; } .c-cartBox-dtl:nth-of-type(2) { border-top: 1px solid #ccc; } .c-cartBox-dtl__delete { width: 8%; text-align: center; } .c-cartBox-dtl__ttl { font-size: 1.6rem; } .c-cartBox-dtl__pix { width: 12%; text-align: center; } .c-cartBox-dtl__pix img { width: 100px; } .c-cartBox-dtl__item { width: 68%; padding-left: 2%; } .c-cartBox-dtl__num { width: 8%; } .c-cartBox-dtl__total { text-align: right; width: 12%; } .c-cartBox-quantity { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 5px; } .c-cartBox-quantity li { margin-right: 6px; } .c-cartBox-quantity li:nth-of-type(1) { width: 40px; } .c-cartBox-quantity a { width: 25px; height: 25px; 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; background-color: #ddd; border: 1px solid #bbb; border-radius: 4px; text-decoration: none; } .c-cartBox-foot { text-align: right; margin-top: 30px; padding: 0 10px; } .c-cartBox-foot span { display: inline-block; width: 150px; } .c-cate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.2rem; line-height: 1.2; } .c-cate li { color: #fff; white-space: nowrap; } .c-cate li + li { margin-left: 5px; } .c-cate--new { background-color: #d6000f; } .c-cate--recommend { background-color: #e67c00; } .c-cate--limited { background-color: #4418c3; } .c-row { display: -webkit-box; display: -ms-flexbox; display: flex; } .c-form_lead .hissu, .c-form .hissu { color: #b80d00; padding-right: 5px; font-size: 80%; } .c-form_lead { text-align: center; font-size: 1.4rem; line-height: 1.8; } .c-form_thanks { text-align: center; } .c-form_thanks__ttl { font-size: 3rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; } .c-form_thanks__txt { font-size: 1.4rem; line-height: 1.8; margin-top: 40px; } .c-form { margin-top: 60px; } .c-form .error { font-size: 80%; color: #b80d00; margin-top: 5px; display: block; } .c-form__inner dl { display: -webkit-box; display: -ms-flexbox; display: flex; } .c-form__inner dl + dl { margin-top: 20px; } .c-form__inner dl dt { width: 200px; padding-top: 15px; } .c-form__inner dl dd { width: calc(100% - 200px); } .c-form__polcy { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-top: 40px; padding: 40px 0; } .c-form__polcy .polcy_btn { margin-top: 15px; margin-left: 0; } .c-form__btn_area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 40px; } .c-form__btn_area div + div { margin-left: 40px; } .c-form input[type=radio], .c-form input[type=checkbox] { margin-right: 5px; } .c-form .vertical-item + .vertical-item { margin-left: 20px; } .c-form .horizontal-item + .horizontal-item { margin-left: 20px; } .c-form label + label { display: inline-block; margin-left: 20px; } .c-form input[type=text], .c-form input[type=tel], .c-form input[type=number], .c-form input[type=email] { width: 100%; padding: 15px; border: 1px solid #ddd; -webkit-transition: border ease-out .2s; transition: border ease-out .2s; } .c-form input[type=text]:focus, .c-form input[type=tel]:focus, .c-form input[type=number]:focus, .c-form input[type=email]:focus { border: 1px solid #000; outline: 0; } .c-form textarea { width: 100%; padding: 10px; font-size: 1.6rem; border: 1px solid #ddd; -webkit-transition: border ease-out .2s; transition: border ease-out .2s; } .c-form textarea:focus { border: 1px solid #000; outline: 0; } .c-google-maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } .c-google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .js-inview-up { opacity: 0; -webkit-transform: translateY(120px); transform: translateY(120px); -webkit-transition: opacity ease-out 1.2s, -webkit-transform ease-out 1.6s; transition: opacity ease-out 1.2s, -webkit-transform ease-out 1.6s; transition: opacity ease-out 1.2s, transform ease-out 1.6s; transition: opacity ease-out 1.2s, transform ease-out 1.6s, -webkit-transform ease-out 1.6s; } .js-inview-up.inview { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .c-list__list--top { height: 300px; overflow: hidden; overflow-y: scroll; padding-right: 30px; } .c-list-photo__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;} .c-list-photo__item { position: relative; width: 32%; overflow: hidden; box-sizing: border-box; } .c-list-photo__item a { display: block; padding-bottom: 75px; } .c-list-photo__pix { overflow: hidden; background-color: #000; width: 100%; height: 65%;} .c-list-photo__pix figure { background: no-repeat 50% 50%; background-size: cover; display: block; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity ease-out .5s, -webkit-transform ease-out 1s; transition: opacity ease-out .5s, -webkit-transform ease-out 1s; transition: opacity ease-out .5s, transform ease-out 1s; transition: opacity ease-out .5s, transform ease-out 1s, -webkit-transform ease-out 1s; padding-top: 65%; width: 100%; height: 65%;} .c-list-photo__rank { position: absolute; z-index: 2; top: -5px; left: 8px; } .c-list-photo__cate { margin-top: 10px; height: 17px;} .c-list-photo__ttl { margin-top: 10px; line-height: 1.6; } .c-list-photo__price { padding-top: 10px; font-size: 1.8rem; line-height: 1.6; color: #ca0d1b; } .c-list-photo__date { margin-top: 5px; font-size: 1.2rem; } .c-list-photo__btn { margin-bottom: 30px; text-align: right; position: absolute; bottom: 20px; right: 0; } .c-list-photo__btn > div { position: relative; display: inline-block; -webkit-transition: color ease-out .3s; transition: color ease-out .3s; } .c-list-photo__btn > div > span { 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; } .c-list-photo__btn > div > span i { position: relative; display: block; width: 40px; height: 1px; background-color: rgba(0, 0, 0, 0.2); margin-left: 10px; overflow: hidden; } .c-list-photo__btn > div > span i::before { content: ""; display: block; width: 20px; height: 1px; background-color: #ca0d1b; -webkit-transform: translate(30px, 0); transform: translate(30px, 0); } .c-list-photo__btn > div > span i::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 1px; display: block; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right; transform-origin: right; background-color: #ca0d1b; -webkit-transition: -webkit-transform ease-out .3s; transition: -webkit-transform ease-out .3s; transition: transform ease-out .3s; transition: transform ease-out .3s, -webkit-transform ease-out .3s; } .c-listTbl { line-height: 1.6; } .c-listTbl dl dt { width: 120px; } .c-listTbl dl dd { width: calc(100% - 120px); } .c-listTbl-block { line-height: 1.6; } .c-listTbl-block dl dt { font-weight: bold; margin-bottom: 4px; } .c-listTbl-block dl dd + dt { padding-top: 15px; } .c-listTbl-simple, .c-listTbl-simple--short { line-height: 1.6; } .c-listTbl-simple > dl, .c-listTbl-simple--short > dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-listTbl-simple > dl > dt:nth-of-type(n+2), .c-listTbl-simple--short > dl > dt:nth-of-type(n+2), .c-listTbl-simple > dl > dd:nth-of-type(n+2), .c-listTbl-simple--short > dl > dd:nth-of-type(n+2) { margin-top: 15px; } .c-listTbl-simple > dl > dt, .c-listTbl-simple--short > dl > dt { width: 140px; } .c-listTbl-simple > dl > dd, .c-listTbl-simple--short > dl > dd { width: calc(100% - 140px); } .c-listTbl-simple > dl dl, .c-listTbl-simple--short > dl dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-listTbl-simple > dl dl dt, .c-listTbl-simple--short > dl dl dt, .c-listTbl-simple > dl dl dd, .c-listTbl-simple--short > dl dl dd { margin-top: 0; } .c-listTbl-simple > dl dl dt:nth-of-type(n+2), .c-listTbl-simple--short > dl dl dt:nth-of-type(n+2), .c-listTbl-simple > dl dl dd:nth-of-type(n+2), .c-listTbl-simple--short > dl dl dd:nth-of-type(n+2) { margin-top: 15px; } .c-listTbl-simple > dl dl dt, .c-listTbl-simple--short > dl dl dt { width: 200px; } .c-listTbl-simple > dl dl dd, .c-listTbl-simple--short > dl dl dd { width: calc(100% - 200px); } .c-listTbl-simple--short > dl > dt { width: 100px; } .c-listTbl-simple--short > dl > dd { width: calc(100% - 100px); } .c-listTbl-gomayan { line-height: 1.6; } .c-listTbl-gomayan > dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-listTbl-gomayan > dl > dt:nth-of-type(n+2), .c-listTbl-gomayan > dl > dd:nth-of-type(n+2) { margin-top: 15px; } .c-listTbl-gomayan > dl > dt { width: 180px; } .c-listTbl-gomayan > dl > dd { width: calc(100% - 180px); } .c-login { position: relative; font-size: 1.4rem; line-height: 1.8; margin-bottom: 30px; } .c-login dl + dl { margin-top: 10px; } .c-login__btn { text-align: right; margin-top: 15px; margin-bottom: 10px; } .c-login input[type=text], .c-login input[type=password], .c-login input[type=tel], .c-login input[type=number], .c-login input[type=email] { width: 100%; padding: 8px 10px; border: 1px solid #ddd; -webkit-transition: border ease-out .2s; transition: border ease-out .2s; background-color: #f3f3f3; } .c-login input[type=text]:focus, .c-login input[type=password]:focus, .c-login input[type=tel]:focus, .c-login input[type=number]:focus, .c-login input[type=email]:focus { border: 1px solid #000; outline: 0; background-color: #fff; } .c-login .login_btn { width: 47%; height: 47px; background-color: #000; color: #fff; border-radius: 4px; border: none; -webkit-transition: background-color ease-out .2s; transition: background-color ease-out .2s; } .c-login .login_btn:hover { background-color: #666; } .c-login .login_btn2 { width: 110px; height: 47px; background-color: #999; color: #fff; border-radius: 4px; border: none; -webkit-transition: background-color ease-out .2s; transition: background-color ease-out .2s; } .c-login .login_btn2:hover { background-color: #666; } .c-login .login_btn3 { display: inline-block; width: 110px; line-height: 47px; height: 47px; background-color: #000; text-align: center; color: #fff; border-radius: 4px; border: none; -webkit-transition: background-color ease-out .2s; transition: background-color ease-out .2s; margin: 10px 0; margin-right: 10px; } .c-login .login_btn3:hover { background-color: #666; } .c-login .login_btn_area { 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; } .c-pager__inner { border-top: 1px solid #000; margin-top: 100px; padding-top: 50px; 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; } .c-search { font-size: 1.4rem; line-height: 1.8; margin-bottom: 30px; } .c-search dl + dl { margin-top: 10px; } .c-search__btn { text-align: right; margin-top: 15px; margin-bottom: 10px; } .c-search input[type=text], .c-search input[type=password], .c-search input[type=tel], .c-search input[type=number], .c-search input[type=email] { width: 100%; padding: 8px 10px; border: 1px solid #ddd; -webkit-transition: border ease-out .2s; transition: border ease-out .2s; background-color: #f3f3f3; } .c-search input[type=text]:focus, .c-search input[type=password]:focus, .c-search input[type=tel]:focus, .c-search input[type=number]:focus, .c-search input[type=email]:focus { border: 1px solid #000; outline: 0; background-color: #fff; } .c-search input[type=submit] { width: 130px; height: 47px; background-color: #000; color: #fff; border-radius: 4px; border: none; -webkit-transition: background-color ease-out .2s; transition: background-color ease-out .2s; } .c-search input[type=submit]:hover { background-color: #666; } .c-search select { position: relative; width: 100%; padding: 8px 10px; -webkit-transition: border ease-out .2s; transition: border ease-out .2s; border-radius: 0; width: 100%; padding-right: 1em; cursor: pointer; text-overflow: ellipsis; border: none; outline: none; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; border: 1px solid #ddd; background: #f3f3f3 url(../image/i_arrow.svg) no-repeat 95% 50%; } .c-search select::-ms-expand { display: none; } .c-search select:focus { border: 1px solid #000; outline: 0; background: #fff url(../image/i_arrow.svg) no-repeat 95% 50%; } .c-title { font-size: 2.2rem; line-height: 1.4; font-weight: normal; letter-spacing: 0.15em; margin-bottom: 20px; padding-bottom: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #000; } .c-title i { display: block; width: 30px; height: 30px; margin-right: 8px; } /** * wordpress * WYSIWYG compatchble style */ .c-wp-post__article { font-size: 1.4rem; line-height: 1.8; } .c-wp-post__article a { text-decoration: underline; } .c-wp-post__article a:hover { text-decoration: none; } .c-wp-post__article > * { margin: 0 0 3em 0; } .c-wp-post__article strong { font-weight: bold; } .c-wp-post__article em { font-style: italic; } .c-wp-post__article ul { margin-left: 1em; display: block; list-style-type: disc !important; margin-before: 1em; margin-after: 1em; margin-start: 0px; margin-end: 0px; padding-start: 40px; } .c-wp-post__article ol { display: block; list-style-type: decimal !important; margin-before: 1em; margin-after: 1em; margin-start: 0px; margin-end: 0px; padding-start: 40px; } .c-wp-post__article li { display: list-item; text-align: match-parent; } .c-wp-post__article img { max-height: 100%; max-width: 100%; height: auto; width: auto; } .c-wp-post__article .alignleft { display: inline; float: left; } .c-wp-post__article .alignright { display: inline; float: right; } .c-wp-post__article .aligncenter { display: block; margin-right: auto; margin-left: auto; } .c-wp-post__article blockquote.alignleft, .c-wp-post__article .wp-caption.alignleft, .c-wp-post__article img.alignleft { margin: 0.4em 1.6em 1.6em 0; } .c-wp-post__article blockquote.alignright, .c-wp-post__article .wp-caption.alignright, .c-wp-post__article img.alignright { margin: 0.4em 0 1.6em 1.6em; } .c-wp-post__article blockquote.aligncenter, .c-wp-post__article .wp-caption.aligncenter, .c-wp-post__article img.aligncenter { clear: both; margin-top: 0.4em; margin-bottom: 1.6em; } .c-wp-post__article .wp-caption.alignleft, .c-wp-post__article .wp-caption.alignright, .c-wp-post__article .wp-caption.aligncenter { margin-bottom: 1.2em; } /** * clearfix micro */ .clearfix:after { content: ""; clear: both; display: block; } /** * text ellipsis., text... */ .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-hide { display: none; } .u-click { cursor: pointer; } /** * BrowserSync */ #__bs_notify__ { display: none !important; font-size: 8px !important; opacity: .25; max-height: 50px; } .__debug_mihon__ { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto 0 auto; z-index: 100000; pointer-events: none; cursor: none; width: 100%; overflow: hidden; text-align: center; -webkit-filter: invert(50); filter: invert(50); opacity: .5; } .__debug_mihon__ { padding-top: 0px; margin-top: 0px; -webkit-transform: translateY(0px); transform: translateY(0px); display: none; } @-webkit-keyframes __debug_mihon__ { 0% { opacity: 0; } 60% { opacity: .5; } 100% { opacity: .5; } } /* @example
*/ @media (min-width: 1041px) { .mediaQuerySetting { display: block; } .ex-link { opacity: 1; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .ex-link:hover { opacity: .5; } .l-menu-cart:hover { opacity: .8; } .l-menu-btn__border:hover span:nth-of-type(1) { -webkit-transform: translate(0, 4px); transform: translate(0, 4px); } .l-menu-btn__border:hover span:nth-of-type(2) { -webkit-transform: translate(0, -4px); transform: translate(0, -4px); } .l-menu-openBtn__border:hover span:nth-of-type(1) { -webkit-transform: translate(0, 4px); transform: translate(0, 4px); } .l-menu-openBtn__border:hover span:nth-of-type(2) { -webkit-transform: translate(0, -4px); transform: translate(0, -4px); } .l-menu-open__list > ul > li a:hover::before { width: 100%; } .l-menu-open__list2 > ul > li a:hover::before { width: 100%; } .l-side-ttl { pointer-events: none; } .l-side-ttl::after { content: ""; display: block; background-color: #000; width: 100%; height: 1px; margin-top: 10px; } .l-side-acd { display: block !important; } .l-side-list__list li ul li a span:hover::before { width: 100%; } .p-article-detail { -webkit-box-sizing: content-box; box-sizing: content-box; } .p-cttList { max-width: 1000px; margin-left: auto; margin-right: auto; -webkit-box-sizing: content-box; box-sizing: content-box; } .p-cttList { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .p-detail-code dl dd a { -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } .p-detail-code dl dd a:hover { color: #ca0d1b; } .p-info-ctt { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; -webkit-box-sizing: content-box; box-sizing: content-box; } .p-info-ctt__split { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; -webkit-box-sizing: content-box; box-sizing: content-box; } .p-newsList .p-info { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; -webkit-box-sizing: content-box; box-sizing: content-box; } .p-infoDetail { max-width: 800px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; -webkit-box-sizing: content-box; box-sizing: content-box; } .p-lead-owner { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; -webkit-box-sizing: content-box; box-sizing: content-box; } .p-lead-gomayan__pix { position: absolute; bottom: -50px; right: 5%; width: 45%; } .p-lead-gomayan__pix img { max-width: 100%; } .p-lead-kura dl a:hover::before { width: 0; } .p-modal__inner { max-width: 1000px; margin-left: auto; margin-right: auto; -webkit-box-sizing: content-box; box-sizing: content-box; } .p-modal__close .btn:hover span:nth-of-type(1) { -webkit-transform: rotate(45deg) translate(5px, 5px); transform: rotate(45deg) translate(5px, 5px); } .p-modal__close .btn:hover span:nth-of-type(2) { -webkit-transform: rotate(-45deg) translate(5px, -5px); transform: rotate(-45deg) translate(5px, -5px); } #mynavi_area ul.mynavi_list li a:hover { color: #fff; background-color: #000; } #mycontents_area table.tbl_form a:hover { color: #ca0d1b; } #mycontents_area table.tbl a:hover { color: #ca0d1b; } #mycontents_area table.tbl_recommend a:hover { color: #ca0d1b; } #mycontents_area table.tbl_delivery a:hover { color: #ca0d1b; } #mycontents_area table.tbl_history a:hover { color: #ca0d1b; } .p-pagetop:hover { color: #fff; background-color: #000; } .p-pagetop:hover::before { color: #fff; } .p-pagetop-fix:hover { color: #fff; background-color: #000; } .p-pagetop-fix:hover::before { color: #fff; } .p-policy-ctt { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; -webkit-box-sizing: content-box; box-sizing: content-box; } .p-productsList__item { overflow: hidden; width: calc(33% - 20px); } .p-productsList__item:nth-of-type(3n-1) { width: calc(34% - 20px); } .p-productsList__ttl { position: absolute; left: 0; top: 0; z-index: 1; } .p-productsList .p-productsList__pix { position: absolute; left: 0; top: 0; } .p-productsList__dtl { position: absolute; left: 0; top: 0; z-index: 15; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } .p-productsList__link:hover .p-productsList__ttl { opacity: 0; } .p-productsList__link:hover .p-productsList__dtl { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } .p-productsList__link:hover .p-productsList__pix { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: .3; } #undercolumn_aboutus table a:hover { color: #ca0d1b; } #undercolumn_cart table a:hover { color: #ca0d1b; } #undercolumn_shopping a:hover { color: #ca0d1b; } #undercolumn_login a:hover { color: #ca0d1b; } #undercolumn_entry a:hover, #undercolumn_order a:hover, #undercolumn_contact a:hover, #undercolumn_customer a:hover { color: #ca0d1b; } #undercolumn_entry table a:hover, #undercolumn_order table a:hover, #undercolumn_contact table a:hover, #undercolumn_customer table a:hover { color: #ca0d1b; } #undercolumn_privacy a:hover { color: #ca0d1b; } .user_pageArea .bloc_body a:hover { color: #ca0d1b; } .c-bread ol li a { -webkit-transition: color ease-out .2s; transition: color ease-out .2s; } .c-bread ol li a:hover { color: #ca0d1b; } .c-btn a:hover, .c-btn--footer a:hover, .c-btn--big a:hover { color: #fff; } .c-btn a:hover span i::after, .c-btn--footer a:hover span i::after, .c-btn--big a:hover span i::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left; transform-origin: left; } .c-btn a:hover::before, .c-btn--footer a:hover::before, .c-btn--big a:hover::before { opacity: 1; } .c-btn--footer a:hover { color: #000; } .c-btn-form input:hover { opacity: 0.8; } .c-btn__txt a:hover, .c-btn__txt--white a:hover { color: #ca0d1b; } .c-btn__txt a:hover span i::after, .c-btn__txt--white a:hover span i::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left; transform-origin: left; } .c-btn-arrow span:hover::before { width: 100%; } .c-btn-arrow--side span:hover::before { width: 100%; } .c-btn-arrow--white span:hover::before { width: 100%; } .c-cartBox a:hover { color: #ca0d1b; } .c-form_lead { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; -webkit-box-sizing: content-box; box-sizing: content-box; } .c-form_thanks { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; -webkit-box-sizing: content-box; box-sizing: content-box; } .c-form { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; -webkit-box-sizing: content-box; box-sizing: content-box; } .c-form input[type=radio], .c-form input[type=checkbox] { -webkit-transform: translateY(-2px); transform: translateY(-2px); } .c-list-photo__item a:hover figure { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.6; } .c-list-photo__item a:hover .c-list-photo__btn { color: #ca0d1b; } .c-list-photo__item a:hover .c-list-photo__btn span i::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left; transform-origin: left; } .c-listTbl dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-listTbl dl dt, .c-listTbl dl dd { border-top: 1px solid rgba(0, 0, 0, 0.15); padding: 24px 0; } .c-pager { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; -webkit-box-sizing: content-box; box-sizing: content-box; } .for-mobile { display: none; } .for-tablet { display: none; } .for-tablet-mobile { display: none; } } @media (max-width: 1040px) { .mediaQuerySetting { display: block; } .l-footer__inner { padding-left: 5%; padding-right: 5%; } .l-footer__logo { width: 80px; } .l-footer__logo img { width: 100%; } .l-footer__dtl { width: calc(100% - 110px); margin-left: 30px; } .l-footer-about__txt { font-size: 1rem; } .l-footer-menu__list:nth-of-type(n+2) { margin-left: 70px; } .l-footer-menu__list > ul > li a:hover::before { width: 100%; } .l-fmenu { padding-left: 5%; padding-right: 5%; } .l-fmenu { margin-top: 50px; } .l-header { width: 100%; } .l-main { width: auto; padding: 0; display: block; } .l-main__contents { width: 100%; margin: 0 auto; padding: 0 20px; } .l-main__side { border-top: 2px solid #000; padding: 0 20px; padding-top: 50px; margin-top: 30px; width: 100%; } .l-side-ttl { background-color: #000; font-size: 1.6rem; color: #fff; display: block; padding: 10px 4%; margin-bottom: 10px; } .l-side-ttl.js-accordion_ttl { position: relative; } .l-side-ttl.js-accordion_ttl::after { content: ""; position: absolute; bottom: 0; top: 0; right: 4%; margin: auto; display: block; width: 6px; height: 6px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 6px solid transparent; border-left: 6px solid #fff; -webkit-transform: rotate(90deg) translateX(3px); transform: rotate(90deg) translateX(3px); -webkit-transition: -webkit-transform ease-out .2s; transition: -webkit-transform ease-out .2s; transition: transform ease-out .2s; transition: transform ease-out .2s, -webkit-transform ease-out .2s; } .l-side-ttl.js-accordion_ttl.on::after { -webkit-transform: rotate(-90deg) translateX(3px); transform: rotate(-90deg) translateX(3px); } .l-side-acd { display: none; } .l-side-list { margin-top: 20px; } .l-side-search { margin-top: 20px; } .l-side-tw { display: none; } .p-article-detail { padding-left: 5%; padding-right: 5%; } .p-article-detail { width: 100%; display: block; } .p-article-contents { width: 100%; } .p-article-side { width: 100%; margin-left: 0; margin-top: 120px; padding-top: 120px; border-top: 1px solid rgba(0, 0, 0, 0.15); } .p-article-sideBanner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-article-sideBanner__item { margin-bottom: 0; } .p-article-sideBanner__item + .p-article-sideBanner__item { margin-left: 40px; } .p-article-detail__works { padding-left: 5%; padding-right: 5%; } .p-billboard { width: 100%; } .p-cttList figure { height: 240px; padding: 10px 0; } .p-cttList__block + .p-cttList__block { margin-top: 100px; } .p-detail-dtl__price { padding: 20px 30px; } .p-info-ctt { padding-left: 5%; padding-right: 5%; } .p-info-ctt__split { padding-left: 5%; padding-right: 5%; } .p-info-ctt__split .p-info { width: 100%; } .p-newsList .p-info { padding-left: 5%; padding-right: 5%; } .p-infoDetail { padding-left: 5%; padding-right: 5%; } .p-lead { padding-left: 5%; padding-right: 5%; } .p-lead-large { padding-left: 5%; padding-right: 5%; } .p-lead-recipe { font-size: 2.6rem; } .p-lead-owner { padding-left: 5%; padding-right: 5%; } .p-lead-gomayan { padding-left: 5%; padding-right: 5%; } .p-lead-gomayan__pix { width: 100%; text-align: right; } .p-lead-gomayan__pix img { max-width: 100%; } .p-lead-kura { padding-left: 5%; padding-right: 5%; } .p-lead-kura dl dt { width: 100px; margin-bottom: 10px; text-align: center; } .p-lead-kura dl dd { width: calc(100% - 100px); margin-bottom: 10px; } .p-lead-kura dl dd + dt { margin-left: 0; } .p-mainSlide { width: 100%; min-width: 0; } .p-mainSlide__item { width: 100%; height: auto; } .p-mainSlide__item img { width: 100%; } .p-mainSlide__item + .p-mainSlide__item { margin-left: 0; } .p-policy-ctt { padding-left: 5%; padding-right: 5%; } .p-productsList__item { width: calc(100% - 20px); height: 250px; } .p-productsList__link { background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 250px; } .p-productsList__ttl { display: none; } .p-productsList .p-productsList__pix { width: 50%; } .p-productsList__dtl { width: 50%; color: #000000; padding: 50px 30px; } .c-block { margin-bottom: 20px; } .c-block + .c-block { margin-top: 20px; } .c-form_lead { padding-left: 5%; padding-right: 5%; } .c-form_thanks { padding-left: 5%; padding-right: 5%; } .c-form { padding-left: 5%; padding-right: 5%; } .c-list-photo__price { font-size: 1.6rem; } .c-listTbl dl dt { width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.15); padding-top: 15px; font-weight: bold; margin-bottom: 5px; } .c-listTbl dl dd { width: 100%; padding-bottom: 15px; } .c-listTbl-simple > dl dl dt:nth-of-type(n+2), .c-listTbl-simple--short > dl dl dt:nth-of-type(n+2), .c-listTbl-simple > dl dl dd:nth-of-type(n+2), .c-listTbl-simple--short > dl dl dd:nth-of-type(n+2) { margin-top: 0; } .c-listTbl-simple > dl dl dt, .c-listTbl-simple--short > dl dl dt { width: 100%; margin-bottom: 5px; } .c-listTbl-simple > dl dl dd, .c-listTbl-simple--short > dl dl dd { width: 100%; padding-bottom: 15px; } .c-listTbl-gomayan > dl { display: block; } .c-listTbl-gomayan > dl > dt { width: 100%; font-weight: bold; margin-bottom: 5px; } .c-listTbl-gomayan > dl > dd { width: 100%; padding-bottom: 15px; } .c-pager { padding-left: 5%; padding-right: 5%; } } @media (max-width: 767px) { .mediaQuerySetting { display: block; } html, body { width: 100%; height: 100%; } h1, h2, h3, h4, h5, h6, div, dl, dt, dd, p { margin: 0; padding: 0; } img { height: auto; max-height: 100%; max-width: 100%; width: auto; } .l-footer { margin-top: 80px; } .l-footer__inner { padding-left: 5%; padding-right: 5%; } .l-footer__inner { padding-top: 50px; padding-bottom: 20px; } .l-footer__wrap { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .l-footer__logo { width: 100%; text-align: center; margin-top: 40px; } .l-footer__logo img { width: 60px; } .l-footer__dtl { width: 100%; margin-left: 0; } .l-footer-about { font-size: 1.3rem; } .l-footer-about { display: none; } .l-footer-info { display: block; margin-top: 0; text-align: center; } .l-footer-info p::before { display: none; } .l-footer-info__block { margin-right: 0; } .l-footer-info__block:nth-of-type(n+2) { margin-top: 30px; } .l-fmenu { padding-left: 5%; padding-right: 5%; } .l-fmenu { font-size: 1.3rem; } .l-header { top: 0; left: 0; position: fixed; width: 100%; height: 60px; background-color: #fff; } .l-header-logo { top: 10px; left: 3%; width: 100px;} .l-header-logo img{height:40px;} body { padding-top: 60px; } .s-top .l-main__contents { padding-top: 0; } .l-main__contents { padding: 0 4%; } .l-main__side { padding: 30px 0 0 0; margin-top: 20px; } .l-menu-cart { font-size: 1.3rem; } .l-menu-cart { display: none; } .l-menu-smtBtn { display: block; z-index: 4610; position: absolute; right: calc(3% + 42px); top: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: opacity ease-out .2s; transition: opacity ease-out .2s; } .activeMenu .l-menu-smtBtn { opacity: 0; pointer-events: none; } .l-menu-btn { right: 3%; top: 12px; width: 40px; } .l-menu-btn p { display: block; font-size: 1rem; letter-spacing: 0; } .l-menu-btn__border { width: 20px; height: 24px; } .l-menu-btn__border span { width: 20px; left: 8px; } .l-menu-btn__border span:nth-of-type(1) { -webkit-transform: translate(0, 4px); transform: translate(0, 4px); } .l-menu-btn__border span:nth-of-type(2) { -webkit-transform: translate(0, -4px); transform: translate(0, -4px); } .l-menu-openBtn { right: 3%; top: 12px; width: 40px; } .l-menu-openBtn p { display: block; font-size: 1rem; letter-spacing: 0; } .l-menu-openBtn__border { width: 20px; height: 24px; } .l-menu-openBtn__border span { width: 20px; left: 8px; } .l-menu-openBtn__border span:nth-of-type(1) { -webkit-transform: translate(0, 0px) rotate(-45deg); transform: translate(0, 0px) rotate(-45deg); } .l-menu-openBtn__border span:nth-of-type(2) { -webkit-transform: translate(0, 0px) rotate(45deg); transform: translate(0, 0px) rotate(45deg); } .l-menu-open__wrap { width: 100%; height: 100%; padding: 30px 20px 50px; overflow-y: auto; } .l-menu-open__inner { font-size: 1.3rem; } .l-menu-open__inner { width: 100%; } .l-menu-open__list > ul { display: block; } .l-menu-open__list > ul > li { font-size: 1.6rem; margin: 0; } .l-menu-open__list > ul > li + li { margin-top: 5px; } .l-menu-open__list2 { margin-top: 20px; } .l-menu-open__list2 > ul { display: block; } .l-menu-open__list2 > ul > li { margin: 0; } .l-menu-open__list2 > ul > li + li { margin-top: 5px; } .l-menu-open__logo img { width: 80px; margin-bottom: 20px; } .l-menu-open__btn { margin-top: 40px; } .l-side-wrap { padding: 0 4%; padding-bottom: 20px; } .l-side-list { margin-top: 0px; } .l-side-list__wrap { margin-top: 10px; } .l-side-list__list { font-size: 1.3rem; } .l-side-list__list { padding-bottom: 20px; } .l-side-search { margin-top: 0px; } .p-article-detail { padding-left: 5%; padding-right: 5%; } .p-article-side { margin-top: 70px; padding-top: 70px; } .p-article-detail__works { padding-left: 5%; padding-right: 5%; } .p-billboard { font-size: 1.3rem; } .p-billboard { padding: 0; margin-bottom: 10px; } .s-second .p-billboard { margin-bottom: 30px; } .p-billboard__inner { display: block; border-left: none; border-right: none; } .p-billboard__ttl { padding: 5px; } .p-billboard__dtl { padding-left: 0; padding-bottom: 0; } .p-cttList { font-size: 1.3rem; } .p-cttList { margin-top: 96px; margin-bottom: 80px; padding-bottom: 80px; } .p-cttList h2 { font-size: 2rem; } .p-cttList figure { width: 280px; height: 170px; -webkit-transform-origin: center center; transform-origin: center center; padding: 0; } .p-cttList__block { padding: 0 5%; } .p-cttList__product img.p1 { width: 144.9px; } .p-cttList__product img.p2 { width: 142.8px; right: 59.5px; top: 38.5px; } .p-cttList__product img.p3 { width: 121.1px; right: 7px; bottom: 17.5px; } .p-cttList__product img.p4 { width: 109.9px; left: 63px; } .p-cttList__recipe img { width: 50px; } .p-detail-ttl { margin-bottom: 20px; } .p-detail-ttl h2 { font-size: 2rem; } .p-detail-inner { display: block; } .p-detail-dtl { width: auto; padding-top: 0; margin-top: 20px; } .p-detail-pix { width: 100%; } .p-detail-code { width: auto; position: static; margin-bottom: 20px; } .p-detail-code dl { font-size: 1.2rem; } .p-detail-dtl__txt { font-size: 1.3rem; } .p-detail-dtl__price { max-width: none; text-align: center; padding: 20px 0; } .p-detail-dtl__price .price { font-size: 1.6rem; } .p-detail-dtl__price .classlist { padding: 0 10px 20px; } .p-detail-form { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-detail-form input[type=text], .p-detail-form input[type=password], .p-detail-form input[type=tel], .p-detail-form input[type=number], .p-detail-form input[type=email] { width: 80px; } .p-detail-form input[type=submit] { width: 140px; background: #7aab1a url(../image/i_cart2.svg) no-repeat 10% 40%; } .p-detail-form .btn_add-cart { width: 140px; font-size: 1.2rem; padding-left: 48px; background: #7aab1a url(../image/i_cart2.svg) no-repeat 10% 40%; } .p-detail-free { padding-top: 50px; margin-top: 50px; } .p-detail-free img { height: auto !important; max-height: 100% !important; max-width: 100% !important; width: auto !important; } .p-detail-free p + p { margin-top: 30px; } .p-info-ctt { padding-left: 5%; padding-right: 5%; } .p-info-ctt { margin-top: 0px; } .p-info-ctt__split { padding-left: 5%; padding-right: 5%; } .p-info-ctt__split { margin-top: 0px; } .p-newsList .p-info { padding-left: 5%; padding-right: 5%; } .p-info { margin-top: 50px; } .p-info__btn { margin-top: 30px; } .p-infoDetail { padding-left: 5%; padding-right: 5%; } .p-infoDetail__ttlArea { display: block; margin-bottom: 30px; } .p-infoDetail__ttl { font-size: 1.6rem; } .p-infoDetail__date { font-size: 1.2rem; margin-top: 8px; } .p-lead { padding-left: 5%; padding-right: 5%; } .p-lead { font-size: 1.3rem; line-height: 2; } .p-lead { margin-top: 15px; } .p-lead__ttl { font-size: 2rem; } .p-lead__free { font-size: 2rem; } .p-lead__free { font-size: 1.4rem; padding: 10px 10px; } .p-lead-large { padding-left: 5%; padding-right: 5%; } .p-lead-large { font-size: 2rem; } .p-lead-large { margin-top: 40px; font-size: 1.6rem; } .p-lead-recipe { font-size: 2rem; } .p-lead-recipe { margin-top: 40px; font-size: 1.6rem; } .p-lead-owner { padding-left: 5%; padding-right: 5%; } .p-lead-owner__ttl { font-size: 2rem; } .p-lead-owner__ttl { margin-bottom: 20px; } .p-lead-owner p { font-size: 1.3rem; line-height: 2; } .p-lead-owner { margin-top: 40px; font-size: 1.6rem; } .p-lead-gomayan { padding-left: 5%; padding-right: 5%; } .p-lead-gomayan { font-size: 1.3rem; line-height: 2; } .p-lead-gomayan { margin-top: 20px; } .p-lead-gomayan__pix { width: 80%; margin: 0 auto; margin-top: 10px; } .p-lead-kura { padding-left: 5%; padding-right: 5%; } .p-lead-kura { margin-top: 40px; font-size: 1.6rem; } .p-lead-kura dl { font-size: 1.3rem; } .p-list-ttl { margin-bottom: 20px; } .p-list-ttl h2 { font-size: 2rem; } .p-list__wrap { margin: 40px 0; } .pagenumber_area { display: block; } .pagenumber_area .change { font-size: 1.2rem; } .pagenumber_area .change { margin-top: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-mainSlide { margin-bottom: 20px; } .p-mainVs-pix { padding-top: 75px; } .p-mainVs-pix__mv { height: 250px; } .p-recipeDetail .p-mainVs-pix__mv, .p-newsDetail .p-mainVs-pix__mv { height: 200px; } .p-mainVs-simple { padding-top: 100px; padding-bottom: 60px; } .p-mainVs-simple h2 { font-size: 4rem; } .p-modal__close { padding: 23px 0; } .p-modal__close .btn span { height: 1px; } #mynavi_area { font-size: 1.3rem; } #mynavi_area ul.mynavi_list { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; } #mynavi_area ul.mynavi_list li { width: 45%; font-size: 1.1rem; text-align: center; margin: 3px 1%; } #mynavi_area ul.mynavi_list li a { padding: 10px 0px; } #mynavi_area .point_announce { padding: 15px 15px; } #mycontents_area { font-size: 1.3rem; } #mycontents_area { margin-top: 50px; } #mycontents_area table.tbl_form { border-bottom: 1px solid #ccc; margin: 20px auto 20px auto; } #mycontents_area table.tbl_form td, #mycontents_area table.tbl_form th { display: block; width: 100%; padding: 10px 4%; border-bottom: none; } #mycontents_area table.tbl { margin: 20px auto 20px auto; } #mycontents_area table.tbl td, #mycontents_area table.tbl th { font-size: 1rem; } #mycontents_area table.tbl_recommend { border-bottom: 1px solid #ccc; margin: 20px auto 0px auto; } #mycontents_area table.tbl_recommend td, #mycontents_area table.tbl_recommend th { display: block; width: 100%; padding: 2px 4%; border: none; border-left: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; } #mycontents_area table.tbl_recommend th { display: none; } #mycontents_area table.tbl_recommend td:nth-of-type(1) a.tdl_btn { width: 200px; padding: 5px; border-radius: 4px; background-color: #ddd; border: 1px solid #bbb; text-decoration: none; } #mycontents_area table.tbl_delivery { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; margin: 20px auto 0px auto; } #mycontents_area table.tbl_delivery td, #mycontents_area table.tbl_delivery th { display: block; width: 100%; padding: 2px 4%; border: none; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } #mycontents_area table.tbl_delivery a.tdl_btn { width: 200px; padding: 5px; border-radius: 4px; background-color: #ddd; border: 1px solid #bbb; text-decoration: none; } #mycontents_area table.tbl_history { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; margin: 20px auto 0px auto; } #mycontents_area table.tbl_history td, #mycontents_area table.tbl_history th { display: block; width: 100%; padding: 2px 4%; border: none; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } #mycontents_area table.tbl_history th { display: none; } #mycontents_area table.tbl_history .sp_txt { display: inline-block; } #mycontents_area table.tbl_history .alignC { text-align: left; } #mycontents_area table.tbl_history a.tdl_btn { width: 200px; padding: 5px; border-radius: 4px; background-color: #ddd; border: 1px solid #bbb; text-decoration: none; } .p-pagetop { right: 3%; top: -25px; width: 46px; height: 46px; } .p-pagetop span { display: none; } .p-pagetop.fixed { right: 3%; top: auto; bottom: 15px; } .p-pagetop::before { top: 18px; } .p-pagetop-fix { width: 50px; height: 50px; padding-top: 24px; } .p-pagetop-fix span { display: none; } .p-pagetop-fix::before { top: 18px; } .p-policy-ctt { padding-left: 5%; padding-right: 5%; } .p-policy-ctt { margin-top: 0px; } .p-policy-ctt__block { font-size: 1.3rem; } .p-policy-ctt__block + .p-policy-ctt__block { margin-top: 30px; } .p-policy-ctt__ttl { font-size: 2rem; } .p-productsList__item { height: auto; margin: 0 10px; } .p-productsList__link { height: auto; } .p-productsList__ttl { font-size: 1.3rem; } .p-productsList__ttl { font-size: 1.4rem; } .p-productsList .p-productsList__pix { width: 100%; height: 150px; } .p-productsList__dtl { font-size: 1.3rem; } .p-productsList__dtl { position: relative; width: 100%; padding: 10px 0px; padding-bottom: 30px; margin-bottom: 20px; height: auto; } .p-productsList-slide__ttl { font-size: 1.6rem; margin-bottom: 0; } .p-productsList-slide__btn { right: 0; bottom: 0; } .p-scroll { left: 6%; bottom: 20px; } #undercolumn h2.title, #mypagecolumn h2.title { font-size: 2rem; } #undercolumn h2.title, #mypagecolumn h2.title { margin-bottom: 20px; } #undercolumn .btn_area, #mypagecolumn .btn_area { margin-top: 30px; } #undercolumn .btn_area li, #mypagecolumn .btn_area li { margin: 0 3px; } #undercolumn input.btn_submit, #undercolumn input.btn_submit_back, #undercolumn .btn_link, #undercolumn .btn_back, #mypagecolumn input.btn_submit, #mypagecolumn input.btn_submit_back, #mypagecolumn .btn_link, #mypagecolumn .btn_back { min-width: 120px; font-size: 1.2rem; } #undercolumn_entry select[name=pref], #undercolumn_contact select[name=pref], #undercolumn_customer select[name=pref], #mypagecolumn select[name=pref] { margin-bottom: 6px; } #undercolumn_entry .box240, #undercolumn_contact .box240, #undercolumn_customer .box240, #mypagecolumn .box240 { width: 100%; } #undercolumn_entry .box300, #undercolumn_contact .box300, #undercolumn_customer .box300, #mypagecolumn .box300 { width: 100%; } #undercolumn_entry .box320, #undercolumn_contact .box320, #undercolumn_customer .box320, #mypagecolumn .box320 { width: 100%; } #undercolumn_entry .box350, #undercolumn_contact .box350, #undercolumn_customer .box350, #mypagecolumn .box350 { width: 100%; } #undercolumn_entry .box380, #undercolumn_contact .box380, #undercolumn_customer .box380, #mypagecolumn .box380 { width: 100%; } .flow_area { display: none; } #undercolumn_aboutus table { font-size: 1.3rem; } #undercolumn_aboutus table td, #undercolumn_aboutus table th { display: block; } #undercolumn_aboutus table th { font-weight: bold; } #undercolumn_aboutus table td { margin-bottom: 10px; } .undercolumn_aboutus_map { height: 300px; } #undercolumn_cart { font-size: 1.3rem; } #undercolumn_cart .point_announce { text-align: left; padding: 15px; font-size: 100%; } #undercolumn_cart table td, #undercolumn_cart table th { font-size: 1rem; } #undercolumn_cart table.tbl_noshi td, #undercolumn_cart table.tbl_noshi th { font-size: 90%; } #undercolumn_shopping { font-size: 1.3rem; } #undercolumn_shopping table td, #undercolumn_shopping table th { font-size: 1rem; padding: 5px 5px; } #undercolumn_shopping table.tbl_noshi td, #undercolumn_shopping table.tbl_noshi th { font-size: 90%; } #undercolumn_login { font-size: 1.3rem; } #undercolumn_error { padding-top: 30px; } #undercolumn_entry, #undercolumn_order, #undercolumn_contact, #undercolumn_customer { font-size: 1.3rem; } #undercolumn_entry .kiyaku_text, #undercolumn_order .kiyaku_text, #undercolumn_contact .kiyaku_text, #undercolumn_customer .kiyaku_text { margin-bottom: 0; } #undercolumn_entry table, #undercolumn_order table, #undercolumn_contact table, #undercolumn_customer table { border-bottom: 1px solid #ccc; } #undercolumn_entry table td, #undercolumn_entry table th, #undercolumn_order table td, #undercolumn_order table th, #undercolumn_contact table td, #undercolumn_contact table th, #undercolumn_customer table td, #undercolumn_customer table th { display: block; width: 100%; padding: 10px 4%; border-bottom: none; } #undercolumn_privacy { font-size: 1.3rem; } #undercolumn_privacy .block { margin-top: 25px; } #undercolumn_privacy .message { font-size: 1.6rem; margin-bottom: 8px; } .user_pageArea .bloc_body { font-size: 1.3rem; } .user_pageArea h3 { font-size: 1.6rem; } .user_pageArea h4 { font-size: 1.4rem; margin-top: 20px; } .user_pageArea h5 { font-size: 1.3rem; } #shoppingabout_area .tel_box div { margin: 10px 0; } #shoppingabout_area .tel_box div img { width: 250px; } #shoppingabout_area .tel_box { display: block; } .c-block { margin-bottom: 10px; } .c-block { font-size: 1.3rem; } .c-block + .c-block { margin-bottom: 60px; } .c-bread { padding: 10px 4%; margin-top: 40px; } .c-bread { display: none; } .c-bread ol { font-size: 1.3rem; } .c-bread ol li:before { content: '>'; color: #999; margin: 0; margin-right: 10px; } .c-bread ol li:nth-of-type(n+2) { margin-top: 5px; } .c-btn--big { font-size: 1.4rem; } .c-btn--big a { height: 50px; padding: 0 15px 0 20px; } .c-btn__txt, .c-btn__txt--white { font-size: 1.3rem; } .c-cartBox { margin-top: 20px; margin-bottom: 30px; } .c-cartBox-head { display: none; } .c-cartBox-dtl { display: block; text-align: center; padding-top: 20px; padding-bottom: 15px; } .c-cartBox-dtl__delete { width: 100%; margin-bottom: 10px; } .c-cartBox-dtl__ttl { font-size: 1.4rem; } .c-cartBox-dtl__pix { width: 100%; margin: 5px 0; } .c-cartBox-dtl__item { width: 100%; orphans: 0; } .c-cartBox-dtl__num { width: 100%; } .c-cartBox-dtl__total { width: 100%; text-align: center; margin-top: 15px; font-size: 120%; } .c-cartBox-quantity { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .c-cartBox-foot { margin-top: 20px; } .c-cartBox-foot span { width: 120px; } .c-cate { font-size: 1.1rem; } .c-form_lead { padding-left: 5%; padding-right: 5%; } .c-form_lead { font-size: 1.3rem; } .c-form_thanks { padding-left: 5%; padding-right: 5%; } .c-form_thanks__ttl { font-size: 2rem; } .c-form_thanks__txt { font-size: 1.3rem; } .c-form_thanks__txt { text-align: left; } .c-form_thanks__txt br { display: none; } .c-form { padding-left: 5%; padding-right: 5%; } .c-form { margin-top: 40px; } .c-form__inner dl { display: block; } .c-form__inner dl dt { width: auto; margin-bottom: 5px; } .c-form__inner dl dd { width: auto; } .c-form__polcy { padding: 20px; } .c-list__list--top { height: 200px; } .c-list-photo__list { display: block; width: 100%; } .c-list-photo__item { width: 100%; } .c-list-photo__item + .c-list-photo__item { margin-top: 30px; } .c-list-photo__item a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-bottom: 0; } .c-list-photo__pix { width: 100px; height: 65px; } .c-list-photo__dtl { width: calc(100% - 110px); } .c-list-photo__rank { width: 20px; top: -0px; left: 0px; } .c-list-photo__cate { height: auto; margin-top: 0; } .c-list-photo__cate li { margin-bottom: 10px; } .c-list-photo__ttl { margin-top: 0; } .c-list-photo__price { font-size: 1.4rem; margin-top: 3px; } .c-list-photo__btn { font-size: 1.3rem; margin-bottom: 0; bottom:0;} .c-listTbl-simple > dl, .c-listTbl-simple--short > dl { display: block; } .c-listTbl-simple > dl > dt:nth-of-type(n+2), .c-listTbl-simple--short > dl > dt:nth-of-type(n+2), .c-listTbl-simple > dl > dd:nth-of-type(n+2), .c-listTbl-simple--short > dl > dd:nth-of-type(n+2) { margin-top: 0; } .c-listTbl-simple > dl > dt, .c-listTbl-simple--short > dl > dt { width: 100%; font-weight: bold; margin-bottom: 5px; } .c-listTbl-simple > dl > dd, .c-listTbl-simple--short > dl > dd { width: 100%; padding-bottom: 15px; } .c-listTbl-simple > dl dl, .c-listTbl-simple--short > dl dl { display: block; } .c-listTbl-simple > dl dl dt:nth-of-type(n+2), .c-listTbl-simple--short > dl dl dt:nth-of-type(n+2), .c-listTbl-simple > dl dl dd:nth-of-type(n+2), .c-listTbl-simple--short > dl dl dd:nth-of-type(n+2) { margin-top: 0; } .c-listTbl-simple--short > dl > dt { width: 100%; } .c-listTbl-simple--short > dl > dd { width: 100%; } .c-listTbl-gomayan > dl > dt:nth-of-type(n+2), .c-listTbl-gomayan > dl > dd:nth-of-type(n+2) { margin-top: 0; } .c-login { font-size: 1.3rem; } .c-login { padding: 0 4%; } .c-pager { padding-left: 5%; padding-right: 5%; } .c-pager__inner { margin-top: 60px; padding-top: 40px; } .c-search { font-size: 1.3rem; } .c-search { padding: 0 4%; margin-bottom: 0; } .c-search__btn { margin-bottom: 0; } .c-title { font-size: 2rem; } .c-wp-post__article { font-size: 1.3rem; } .for-large { display: none; } .for-tablet { display: none; } .for-large-tablet { display: none; } } @media (min-width: 768px) and (max-width: 1040px) { .l-footer-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex;} .mediaQuerySetting { display: block; } .l-footer-menu__list:nth-of-type(n+2) { margin-left: 60px; } .l-side-wrap { margin-top: 20px; margin-bottom: 50px; } .l-side-wrapBtm { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .l-side-list__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; } .l-side-search { margin-bottom: 0; } .for-mobile { display: none; } .for-large { display: none; } } @media all and (-ms-high-contrast: none) { body { letter-spacing: 0.08em; } .p-cttList h2 { letter-spacing: 0.05em; } .p-detail-ttl h2 { letter-spacing: 0.05em; } .p-lead__ttl { letter-spacing: 0.05em; } .p-lead__free { letter-spacing: 0.05em; } .p-lead-large { letter-spacing: 0.05em; } .p-lead-recipe { letter-spacing: 0.05em; } .p-lead-owner__ttl { letter-spacing: 0.05em; } .p-list-ttl h2 { letter-spacing: 0.05em; } .p-mainVs-simple h2 { letter-spacing: 0em; } .p-policy-ctt__ttl { letter-spacing: 0.05em; } #undercolumn h2.title, #mypagecolumn h2.title { letter-spacing: 0.05em; } .c-form_thanks__ttl { letter-spacing: 0.05em; } .c-title { letter-spacing: 0.05em; } } @media (min-width: 1041px), (min-width: 768px) and (max-width: 1040px) { .l-menu-open__wrap { 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%; height: 100%; } #mynavi_area ul.mynavi_list li + li { margin-left: 10px; } .c-list-photo__item + .c-list-photo__item { margin-left: 2%; } .c-list-photo__item + .c-list-photo__item:nth-of-type(3n-2) { margin-left: 0; } .c-list-photo__item + .c-list-photo__item:nth-of-type(n+4) { margin-top: 15px; } .c-list-photo__price { position: absolute; bottom: 30px; left: 0; } .c-list-photo__btn { position: absolute; bottom: 0; right: 0; } } @media (min-width: 1041px), (max-width: 767px) { .l-side-list__list + .l-side-list__list { margin-top: 15px; } } @media (max-width: 1040px) and (max-width: 767px) { .p-article-sideBanner__item + .p-article-sideBanner__item { margin-left: 20px; } } @media (max-width: 767px) and (max-width: 767px) { .c-cartBox-dtl__delete a { width: 200px; padding: 5px; border-radius: 4px; background-color: #ddd; border: 1px solid #bbb; text-decoration: none; } } .l-menu-smtBtn__item figure > img{max-height:20px;} .pagination{display:inline-block; *display:inline;text-align:center; width:100%; padding: 40px 0 0 0;} .pagination>li{display:inline-block; *display:inline;} .pagination>li>a,.pagination>li>span{background-color:#FFF;border:1px solid #DDD;float:left;margin-left:1px;padding:10px 12px;font-size:1.6rem;position:relative;text-decoration:none;color:#666; border-radius:5px;} .pagination>li.active>a,.pagination>li.active>a:hover,.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{background-color:#E52028;border-color:#E52028;color:#fff} .div_clear{display: block; clear: both;} .goods_tag{margin-top:-20px;} .goods_tag_bottom{font-size: 2.8rem;} .goods_content{padding: 35px 0 45px 0; line-height: 1.7; border-top:1px solid #555;} .goods_content p{padding-top: 15px;} .goods_content img{max-width:100%;} .goods_box{padding: 40px 50px 60px 20px; display: block;} .goods_box .goods_image{width: 38.8%; float: left;} .goods_box .goods_image img{max-width: 100%;} .goods_box .goods_txt{width: 57.2%; float: right; line-height: 1.7;} .goods_box .goods_txt .b_box{background: #FFFDE2; border:1px solid #F2F0D9; margin-top:20px; padding: 20px 45px;} .goods_box .goods_txt .b_box h3{font-weight: normal; color: #CA0D1B;} .goods_box .goods_txt .b_box ul{list-style: none; padding: 15px 0 0 0;} .goods_box .goods_txt .b_box ul li{float: left; margin-right: 8px;} .goods_box .goods_txt .b_box ul li img{height: 38px; cursor: pointer;} .goods_box .goods_txt .b_box ul li input{border: 1px solid #DDDDDD; height: 38px; text-align: center; padding: 0 10px;} .pro_category{padding-top:5px; padding-bottom: 25px;} .pro_category dl{display: block; padding:10px 0 20px 0;} .pro_category dl dt{width:70px; float: left; background: #E5E5E5; text-align: center; line-height: 1.9; border-radius: 15px;} .pro_category dl dt h3{font-size: 1.4rem; font-weight: normal;} .pro_category dl dd{float: right; width: calc(100% - 90px);} .pro_category dl dd span{float: left; padding: 0 25px 0 15px; line-height: 1.9; position: relative;} .pro_category dl dd span a:hover{text-decoration: underline;} .pro_category dl dd span:before{ width: 0; height: 0; left: 0; top: 10px; content: ""; position: absolute; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #111; transform: rotate(90deg); } .btn_url_a{cursor: pointer;} @media (max-width: 768px) { .l-footer-menu__inner{display:none;} .pagination>li{display:none; width:50%; box-sizing: border-box; padding: 0 10px;} .pagination>li>a,.pagination>li>span{width:100%;} .pagination>li:first-child{display:inline-block;} .pagination>li:last-child{display:inline-block;} .goods_box{padding: 10px 10px 20px 10px;} .goods_box .goods_image{width: 100%; float: none;} .goods_box .goods_txt{width: 100%; float: none; line-height: 1.7;} .goods_box .goods_txt p{padding-top: 15px;} .goods_tag{margin-top:0;} } .cartEmptyBox{width:280px; background:url(/res/pc/images/cartEmptyBox.jpg) no-repeat 0px center; margin:0px auto; padding:65px 0px; padding-left:112px; box-sizing: border-box;} .cartEmptyBox p{text-align:left; font:normal 14px/31px ''} .cartEmptyBox a{color:#8CB812;} .cartListA{border-top:2px solid #93CC33; border-left:1px solid #EEE;} .cartListA td{border-bottom:1px solid #EEE; border-right:1px solid #EEE; vertical-align:middle; color:#666; font:normal 12px/21px 'Arial';} .cartListA .tTitle_a{background-color:#FAFAFA; border-top:1px solid #FFF; padding:5px 0px 5px 15px;} .cartListA .tTitle_a span{padding-right:50px;} .cartListA .tTitle_a input{vertical-align:middle;} .cartListA .tW_a{width:400px; text-align:left;} .cartListA .tW_b{width:100px; text-align:center;} .cartListA .tW_b .price_z{font-size:14px;} .cartListA .tW_c{width:200px; text-align:center;} .cartListA .tW_d{width:150px; text-align:center;} .cartListA .tW_d .price_x{font-size:18px; color:#F60;} .cartListA .tW_e{text-align:center;} .cartListA .tHead_a td{background-color:#F4FBDB; text-align:center; padding:5px 0px; color:#000;} .cartNumBoxA{width:110px; margin:auto auto; overflow:hidden;} .cartNumBoxA input{width:58px; height:23px; background-color:#FFF; border:1px solid #DDD; float:left; text-align:center;} .cartNumBoxA a{background-color:#EFEFEF; float:left; width:30px; height:30px; color:#000; text-decoration:none; font-size: 1.8rem; line-height: 30px; color:#666; text-align: center;} .cartNumBoxA a:hover{background-color:#DDD;} .cartNumBoxA a.J_reduceProductCountBtn{border:1px solid #DDD; border-left:none;} .cartNumBoxA a.J_addProductCountBtn{border:1px solid #DDD; border-left:none;} .J_showRemoveProductBox{display: block; width:50px; height:50px; line-height: 50px; background: #8CB812; color:#FFF; text-align: center; font-size: 2.4rem; border-radius: 25px;} .myCartListB_UL_A{list-style:none; margin:0px; width:100%;} .myCartListB_UL_A li{margin:0px; display:block; padding:10px 15px; line-height:1.3;} .myCartListB_UL_A li img{float:left; padding-right:10px;} .myCartListB_UL_A li a{color:#000;} .cartListB{background-color:#F4FBDB; border:1px solid #E1F4A2;} .cartListB .area_A{border-bottom:1px solid #E1F4A2; padding:5px 20px;} .cartListB .area_A .price_A{width:360px; float:right; text-align:right; font-size: 1.6rem; padding-top:15px;} .cartListB .area_A .price_A span.price_N{color:#F60; padding:0px 5px;} .cartListB .area_A .cartConfirmAdd{width:360px; float:left; padding:10px 0px;} .cartListB .area_A .cartConfirmAdd dl{display:block; padding: 10px 0;} .cartListB .area_A .cartConfirmAdd dl dt{display:block; text-align:left; padding-bottom:5px;} .cartListB .area_A .cartConfirmAdd dl dd{display:block; text-align:left;} .cartListB .area_A .cartConfirmAdd dl dd label{display:block; text-align:left; padding: 5px 0;} .cartListB .area_A .cartConfirmAdd dl dd label input,.cartListB .area_A .cartConfirmAdd dl dd label select{background-color:#FFF; border:1px solid #93CC33; padding:5px; font-size:1.4rem;} .cartListB .area_A .cartConfirmAdd dl:nth-child(2){border-top:1px dotted #DDD;} .cartListB .area_B{display:block; clear:both; padding:10px 20px; background-color:#FFF; text-align:centerl} .cartListB .area_B .A_L{float:left; text-align:left;} .cartListB .area_B .A_R{float:right; text-align:right;} .btnCart_a,.btnCart_b{width:99px; height:33px; text-align:center; font:normal 14px/33px 'Arial'; cursor:pointer; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} .btnCart_a{background-color:#FFF; border:1px solid #A0D24D; color:#7AAA2B;} .btnCart_a:hover{border:1px solid #7AAA2B;} .btnCart_b{background-color:#A0D24D; border:1px solid #A0D24D; color:#FFF;} .btnCart_b:hover{background-color:#7AAA2B; border:1px solid #7AAA2B;} .cartConfirmBoxA{border:1px solid #EFF4E1; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} .cartConfirmBoxA .headA{width:100%; height:33px; margin:0px auto; overflow:hidden; border-bottom:1px solid #EFF4E1; text-align:left; background-color:#F4FBDB;} .cartConfirmBoxA .headA h3{padding-left:15px; font:normal 16px/35px 'Microsoft Yahei'; color:#000;} .cartConfirmBoxA .contentA{width:98%; margin:0px auto; overflow:hidden; padding:10px 0px;} .cartPayA{list-style:none; margin:0px; padding:11px 0px 7px 0px;} .cartPayA li{float:left; width:300px; padding-right:65px; margin:0px; overflow:hidden;} .cartPayA li label{display:block;} .cartPayA li img{vertical-align:middle;} .cartListC{} .cartListC td{border-bottom:1px solid #EEE; vertical-align:middle; color:#666; font:normal 12px/21px 'Arial'; padding:5px 0px;} .cartListC .tTitle_a{background-color:#FAFAFA; border-top:1px solid #FFF; padding:5px 0px 5px 15px;} .cartListC .tTitle_a span{padding-right:50px;} .cartListC .tTitle_a input{vertical-align:middle;} .cartListC .tW_a{width:40%; text-align:center;} .cartListC .tW_b{width:20%; text-align:center;} .cartListC .tW_b .price_z{font-size:12px;} .cartListC .tW_c{width:15%; text-align:center;} .cartListC .tW_d{text-align:center;} .cartListC .tW_d .price_x{font-size:14px; color:#7AAA2B;} .cartListC .tHead_a td{background-color:#F4FBDB; text-align:center; color:#000;} .cartListC a{color:#000;} .cartListC img{vertical-align:middle; padding-right:3px;} .cartListC .tL{text-align:left;} .cartListC .tC{text-align:center;} .cartHeadB{} .cartHeadB h3{display:block; font:bold 16px/31px ''; color:#666; padding-bottom:3px;} .cartHeadC{border-top:2px solid #93CC33;} .cartHeadC h3{display:block; font:bold 14px/31px ''; color:#111; padding-bottom:3px;} .orderDetailUL{padding-bottom:5px;} .orderDetailUL,.orderDetailUL li{list-style:none; margin:0px;} .orderDetailUL li{font:normal 12px/21px '';} .myOrderListB{border-top:2px solid #93CC33; border-left:1px solid #EEE;} .myOrderListB td{border-bottom:1px solid #EEE; border-right:1px solid #EEE; vertical-align:middle; color:#666; font:normal 12px/21px 'Arial';} .myOrderListB .tTitle_a{background-color:#FAFAFA; border-top:1px solid #FFF; padding:5px 0px 5px 15px;} .myOrderListB .tTitle_a span{padding-right:50px;} .myOrderListB .tW_a{width:450px; text-align:left;} .myOrderListB .tW_b{width:150px; text-align:center;} .myOrderListB .tW_b .price_z{font-size:16px;} .myOrderListB .tW_c{width:150px; text-align:center;} .myOrderListB .tW_d{width:135px; text-align:center;} .myOrderListB .tW_e{text-align:center;} .myOrderListB .tHead_a td{background-color:#F4FBDB; text-align:center; padding:5px 0px; color:#000;} .myOrderListB a{color:#8CB812;} .myOrderListB_UL_B{list-style:none; margin:0px; width:100%;} .myOrderListB_UL_B li{margin:0px; display:block; border-bottom:1px solid #EEE; padding:10px 15px; line-height:1.5;} .myOrderListB_UL_B li img{float:left; padding-right:10px;} .myOrderListB_UL_B li a{color:#000;} .btn_z1{height:24px; padding:0px 15px; background-color:#A0D24D; font:bold 12px/21px ''; border:none; text-align:center; color:#FFF; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; cursor:pointer;} .btn_z1:hover{background-color:#7AAA2B;} .btn_z2{height:31px; padding:0px 20px; background-color:#A0D24D; font:bold 14px/31px ''; border:none; text-align:center; color:#FFF; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; cursor:pointer;} .btn_z2:hover{background-color:#7AAA2B;}