/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com *//* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* 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; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-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. */ ::-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 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { display: none; } [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border-color: #6b7280; border-width: 1px; border-radius: 0px; padding-top: 0.5rem; padding-right: 0.75rem; padding-bottom: 0.5rem; padding-left: 0.75rem; font-size: 1rem; line-height: 1.5rem; --tw-shadow: 0 0 #0000; } [type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-color: #2563eb; } input::-moz-placeholder, textarea::-moz-placeholder { color: #6b7280; opacity: 1; } input::placeholder,textarea::placeholder { color: #6b7280; opacity: 1; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-date-and-time-value { min-height: 1.5em; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { padding-top: 0; padding-bottom: 0; } select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; } [multiple],[size]:where(select:not([size="1"])) { background-image: initial; background-position: initial; background-repeat: unset; background-size: initial; padding-right: 0.75rem; -webkit-print-color-adjust: unset; print-color-adjust: unset; } [type='checkbox'],[type='radio'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; display: inline-block; vertical-align: middle; background-origin: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; flex-shrink: 0; height: 1rem; width: 1rem; color: #2563eb; background-color: #fff; border-color: #6b7280; border-width: 1px; --tw-shadow: 0 0 #0000; } [type='checkbox'] { border-radius: 0px; } [type='radio'] { border-radius: 100%; } [type='checkbox']:focus,[type='radio']:focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 2px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } [type='checkbox']:checked,[type='radio']:checked { border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } [type='checkbox']:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } @media (forced-colors: active) { [type='checkbox']:checked { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } } [type='radio']:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } @media (forced-colors: active) { [type='radio']:checked { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } } [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { border-color: transparent; background-color: currentColor; } [type='checkbox']:indeterminate { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } @media (forced-colors: active) { [type='checkbox']:indeterminate { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } } [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { border-color: transparent; background-color: currentColor; } [type='file'] { background: unset; border-color: inherit; border-width: 0; border-radius: 0; padding: 0; font-size: unset; line-height: inherit; } [type='file']:focus { outline: 1px solid ButtonText; outline: 1px auto -webkit-focus-ring-color; } html { width: 100%; font-size: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif; font-size: 1.3rem; width: 100%; height: 100%; position: relative; color: #222; overflow-x: hidden; background-size: cover; font-weight: 500; } #latte footer { font-weight: 600; } @media screen and (max-width: 768px) { #latte footer { font-weight: 400 } } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } .latte-text-3xl { font-size: 40px; } .latte-text-2xl { font-size: 32px; } @media (max-width: 767px) { .latte-text-2xl { font-size: 26px; } } .latte-text-xl { font-size: 25px; } @media (max-width: 767px) { .latte-text-xl { font-size: 18px; } } .latte-text-large { font-size: 20px; } @media (max-width: 767px) { .latte-text-large { font-size: 16px; } } .latte-text-middle { font-size: 18px; } @media (max-width: 767px) { .latte-text-middle { font-size: 16px; } } @media (min-width: 768) and (max-width: 1179px) { .latte-text-middle { font-size: 16px; } } .latte-text-normal { font-size: 16px; } @media (max-width: 767px) { .latte-text-normal { font-size: 14px; } } @media (min-width: 768) and (max-width: 1179px) { .latte-text-normal { font-size: 14px; } } .latte-text-tiny { font-size: 14px; } .latte-text-small { font-size: 12px; } .latte-text-xsmall { font-size: 10px; letter-spacing: -1px; } a { color: #9C8778; } .outline-text{ -webkit-text-stroke:1px #E66F89; color: #fff; } .latte-text-underline-white{ display: inline; background:linear-gradient(transparent 60%, #ffffff 0%); padding: 0 2px 4px; } .main-content { font-family: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif; color: #9C8778; position: relative; z-index: 2; padding: 0; --tw-bg-opacity: 1; background-color: rgb(247 243 239 / var(--tw-bg-opacity)); overflow-x: hidden; } @media screen and (max-width: 640px) { .main-content { /* padding: 45px 0 0; */ } } h2.border { color: #937D6E; position: relative; display: inline-block; font-size: 1.875rem; font-weight: 300; } h2.border span { position: relative; } h2.border span { z-index: 10; } h2.border span { letter-spacing: 0.05em; } h2.border:after{ content: ""; } h2.border:after { position: absolute; } h2.border:after { bottom: 0px; } h2.border:after { left: 0px; } h2.border:after { z-index: 0; } h2.border:after { height: 30px; } h2.border:after { width: 100%; } h2.border:after { --tw-bg-opacity: 1; background-color: rgb(245 220 225 / var(--tw-bg-opacity)); } h2.en { font-size: 6rem; letter-spacing: .08em; margin: 0 0 10px; line-height: 1; } @media screen and (max-width: 768px) { h2.en { font-size: 5rem; } } h3 { } @media screen and (max-width: 768px) { h3 { font-size: 1.6rem; } } h3 span img { padding: 0 7px 0 0; } /* #font-font -------------------------------------------------------------------------- */ .en { font-family: "Quicksand", sans-serif; font-weight: 300; } /* header -------------------------------------------------------------------------- */ header.hide { transform: translateY(-98px); } #navi { position: fixed; z-index: 100; width: 100%; height: 0; transform: translateY(93px); top: 0; transition: transform .4s cubic-bezier(0,.6,.4,1); background: #f8f5f2; } @media screen and (max-width: 640px) { #navi { transform: translateY(45px); } } #navi h1 { position: absolute; left: calc(100% * 128 / 1280 - 10px); top: 0; } @media screen and (max-width: 640px) { #navi h1 { position: absolute; left: 20px; top: 10px; } } #navi h1 a { width: 159px; height: 80px; } @media screen and (max-width: 640px) { #navi h1 a { width: 103px; height: 52px; } } #navi h1 a svg { width: 100%; height: auto; } #navi h1 a:hover path { fill: #d9d9d9; } #navi .instagram { top: 20px; right: calc(100% * 128 / 1280 - 10px + 62px); height: 43px; cursor: pointer; width: 43px; position: absolute; } #navi .onlineshop { width: 46px; position: absolute; top: 20px; right: calc(100% * 128 / 1280 - 10px + 130px); height: 44px; cursor: pointer; } #navi .onlineshop:after { position: absolute; content: ""; width: 1px; height: 6px; margin-top: -3px; top: 50%; right: -1.5px; background: #b19d8b; } #navi .onlineshop:hover path{ fill: #d9d9d9; } @media screen and (max-width: 768px) { #navi .instagram { position: absolute; top: 18px; right: 69px; height: 43px; } #navi .onlineshop { right: 116px; height: 43px; width: 44px; } } #navi .instagram:hover path { fill: #d9d9d9; } #navi .instagram:hover circle { fill: #d9d9d9; } #navi.upper { transition: transform 0.4s cubic-bezier(0, 0.6, 0.4, 1); transform: translateY(0); } #navi { position: fixed; z-index: 100; width: 100%; height: 0; transform: translateY(93px); transition: transform 0.4s cubic-bezier(0, 0.6, 0.4, 1); /* padding-top: 71px; padding-bottom:10px; */ } @media screen and (max-width: 640px) { #navi { transform: translateY(45px); padding: 0; } } #navi .container{ padding-top: 33px; padding-bottom: 28px; } @media screen and (max-width: 640px) { #navi .container{ padding-top:0; padding-bottom: 56px; overflow: auto; height: 100%; overscroll-behavior: auto; } } #navi .container ul li { display: flex; justify-content: center; flex-wrap: wrap; } @media screen and (max-width: 640px) { #navi .container ul li { margin-bottom: 13px; } } #navi .container ul.small { flex-direction: row; width: 100%; justify-content: center; } #navi .container ul.small li { margin-bottom: 0 } #navi .container ul.small li a { display: block; height: 30px } #navi .container ul.small li:first-of-type { display: flex } #navi .container ul.small li:first-of-type:after { content: ""; display: inline-block; width: 21px; height: 30px; background: url(../images/menuSlash.svg) no-repeat } #navi .container ul.small li.haircare a { width: 87px; background: url(/ma-me-latte/images/pc/common/menuHaircare.svg) no-repeat } @media screen and (max-width: 768px) { #navi .container ul.small li.haircare a { width: 84px; } } #navi .container ul.small li.skincare a { width: 102px; background: url(/ma-me-latte/images/pc/common/menuSkincare.svg) no-repeat } @media screen and (max-width: 768px) { #navi .container ul.small li.skincare a { width: 101px; } } #navi .container ul.small li.haircare a.hover { opacity: .6 } #navi footer { display: none; width: 667px; height: 50px; margin-top: 31px; background: url(../images/menuText.svg) no-repeat; } @media screen and (max-width: 768px) { #navi footer { margin: 23px auto; width: 333px; height: 58px; background: url(../images/menuText_sp.svg) no-repeat; } } #navi .hideText { text-indent: -99999px; overflow: hidden; } #navi ul { display: none; flex-direction: column; align-items: center; width: 100%; } #navi ul li { margin-bottom: 10px; opacity: 0; } @media screen and (max-width: 768px) { #navi ul li { margin-bottom: 16px; } } #navi ul li a { height: 51px; } @media screen and (max-width: 768px) { #navi ul li a { height: 45px; } } #navi ul li a svg { width: 100%; height: auto; fill:#323333 } #navi ul li a:hover svg{ fill:#ae9e8d; } #navi ul li a:hover svg path{ fill:#ae9e8d; } #navi li.community a { width: 255px; } @media screen and (max-width: 768px) { #navi li.community a { width: 216px; } } #navi li.\!media a { width: 145px !important; } #navi li.media a { width: 145px; } #navi ul li.about a { width: 156px; } @media screen and (max-width: 768px) { #navi ul li.about a { width: 134px; } } #navi ul li.product a { width: 211px; } @media screen and (max-width: 768px) { #navi ul li.product a { width: 178px; } } #navi ul li.\!media a { width: 145px !important; } #navi ul li.media a { width: 145px; } @media screen and (max-width: 768px) { #navi ul li.\!media a { width: 123px !important; } #navi ul li.media a { width: 123px; } } #navi ul li.gyaku { font-size: 30px; } @media screen and (max-width: 640px) { #navi ul li.gyaku { font-size: 26px; } } #navi ul li.gyaku a { color: #333; } #navi ul li.linkhair a { width: 139px; height: 36px; } @media screen and (max-width: 768px) { #navi ul li.linkhair a { width: 130px; height: 23px } } #navi ul li.seven53{ padding: 10px 0; } #navi ul li.seven53 a { width: 320px; height: 30px; } @media screen and (max-width: 768px) { #navi ul li.seven53 a { width: 277px; height: 26px } } #navi ul li.faq{ margin-bottom: 49px; position: relative; } #navi ul li.faq:after{ content: ""; width: 9px; height: 8px; background: url(../images/menuDot.svg) no-repeat; bottom: -28px; position: absolute; left: 50%; transform: translateX(-50%); } @media screen and (max-width: 768px) { #navi ul li.faq:after{ height: 9px; background: url(../images/menuDot.svg) no-repeat; bottom: -27px } } #navi ul li.faq a { width: 232px; height: 49px; } @media screen and (max-width: 768px) { #navi ul li.faq a { width: 201px; height: 40px } } #navi ul li.ladyphoto a{ width: 202px; height: 36px; } @media screen and (max-width: 768px) { #navi ul li.ladyphoto a{ width: 191px; height: 23px } } #navi ul li.hoppe a{ width: 139px; height: 36px; } @media screen and (max-width: 768px) { #navi ul li.hoppe a{ width: 134px; height: 23px } } #navi ul li.gyaku a{ width: 170px; height: 36px; } @media screen and (max-width: 768px) { #navi ul li.gyaku a{ width: 162px; height: 23px } } #navi .toggle { padding: 13px 10px; position: absolute; width: 27px; height: 17px; top: 20px; right: calc(100% * 128 / 1280 - 10px); cursor: pointer; box-sizing: content-box; } @media screen and (max-width: 768px) { #navi .toggle { top: 18px; right: 20px; } } #navi .toggle hr.top { top: 13px; background: #4c4c4c; transform-origin: 100% 1px; transform: rotate(0) scaleX(1); } #navi .toggle hr.\!top { top: 13px !important; background: #4c4c4c !important; transform-origin: 100% 1px !important; transform: rotate(0) scaleX(1) !important; } #navi .toggle hr.center { height: 1px; top: 21px; background: #b19d8b; transform-origin: center center; transform: rotate(0) scaleX(1); } #navi .toggle hr { position: absolute; width: calc(100% - 20px); height: 2px; border: none; border-radius: 1px; margin: 0; padding: 0; left: 10px; transition: transform .2s; } #navi .toggle hr.bottom { top: 28px; background: #4c4c4c; transform: scaleX(1); } #navi.opened { display: flex; justify-content: center; align-items: center; height: calc(100% - 93px); } #navi.opened.upper { height: 100dvh; } @media screen and (max-width: 768px) { #navi.opened { height: calc(100%); } } #navi.opened footer { display: block; } #navi.opened .toggle hr.top { transform: translateY(1.5px) rotate(-25.20112deg) scaleX(1.1); } #navi.opened .toggle hr.\!top { transform: translateY(1.5px) rotate(-25.20112deg) scaleX(1.1) !important; } #navi.opened .toggle hr.center { transform: rotate(25.20112deg) scaleX(1.1); } #navi.opened .toggle hr.bottom { transform: scaleX(0); } #navi.opened ul { display: flex; } #navi.opened.fade ul li { opacity: 1; } #navi.opened.fade ul li.about { transition: opacity .8s linear 0s; } #navi.opened.fade ul li.product { transition: opacity .8s linear 50ms; } #navi.opened.fade ul li.media { transition: opacity .8s linear .1s; } #navi.opened.fade ul li.\!media { transition: opacity .8s linear .1s !important; } #navi.opened.fade ul li.community { transition: opacity .8s linear .15s; } #navi.opened.fade ul li.faq { transition: opacity .8s linear .2s; } #navi.opened.fade ul li.gyaku { transition: opacity .8s linear .25s; } #navi.opened.fade ul li.hoppe { transition: opacity .8s linear .3s; } #navi.opened.fade ul li.linkhair { transition: opacity .8s linear .35s; } #navi.opened.fade ul li.ladyphoto { transition: opacity .8s linear .4s; } @media screen and (max-width: 768px) { #navi.opened .container-inner { overflow: auto; height: 100%; padding: 100px 0 0; scroll-behavior: smooth; } } html.modal-navi body { width: 100%; height: calc(100vh); overflow: hidden; /* position: fixed; */ } .hideText { text-indent: -99999px; overflow: hidden; display: block; } #shopList.show { display: block; } #shopList { position: fixed; width: 100%; left: 0; background: rgba(255,255,255,.8); z-index: 1000; display: none; height: calc(100% - 94px); top: 94px; &.upper{ height: 100%; top: 0; } } @media screen and (max-width: 768px) { #shopList { top: 45px; height: calc(100% - 45px) } } #shopList .inner { position: absolute; background: #f8f5f2; width: calc(100% - 100% * 128 * 2 / 1280); height: calc(100% - 60px); left: calc(100% * 128 / 1280); top: 30px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; } @media screen and (max-width: 768px) { #shopList .inner { width: calc(100% - 30px); height: calc(100% - 30px); border-radius: 4.5px; left: 15px; top: 15px } } #shopList .inner h1 { width: 280px; height: 85px; background: url(data:image/svg+xml;base64,PHN2ZyBpZD0icGFydHMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MCA4NSI+PHRpdGxlPnRpdGxlU2hvcDwvdGl0bGU+PHBhdGggZD0iTTE0LjY4OSw0MC4yNTJBMTAuMSwxMC4xLDAsMCwxLDcuNDI1LDM3LjRjLTIuNzcxLTIuNzcxLTIuOTgxLTUuMDgxLTIuOTgxLTEyLjM0NnMuMjEtOS41NzQsMi45ODEtMTIuMzQ2QTEwLjEsMTAuMSwwLDAsMSwxNC42ODksOS44NWExMC4xLDEwLjEsMCwwLDEsNy4yNjUsMi44NTVjMi43NzEsMi43NzEsMi45ODEsNS4wODEsMi45ODEsMTIuMzQ2cy0uMjEsOS41NzQtMi45ODEsMTIuMzQ2QTEwLjEsMTAuMSwwLDAsMSwxNC42ODksNDAuMjUyWm03Ljk3OS0xNS4yYzAtNi4zLS4xNjgtOC43MzQtMi4zMS0xMC44NzZhNy43NjQsNy43NjQsMCwwLDAtNS42NjktMi4zMSw3Ljc2NCw3Ljc2NCwwLDAsMC01LjY2OSwyLjMxYy0yLjE0MiwyLjE0Mi0yLjMxLDQuNTc3LTIuMzEsMTAuODc2cy4xNjgsOC43MzQsMi4zMSwxMC44NzZhNy43NjQsNy43NjQsMCwwLDAsNS42NjksMi4zMSw3Ljc2NCw3Ljc2NCwwLDAsMCw1LjY2OS0yLjMxQzIyLjUsMzMuNzg1LDIyLjY2OCwzMS4zNSwyMi42NjgsMjUuMDUxWiIgc3R5bGU9ImZpbGw6IzMzMyIvPjxwYXRoIGQ9Ik01NC40MzksMzkuODExYTEuMjg1LDEuMjg1LDAsMCwxLS44ODEuMzU3LDEuNTA4LDEuNTA4LDAsMCwxLTEuMjYtLjhMMzUuMzEzLDE0LjI1OVYzOC41OTNhMS43NjcsMS43NjcsMCwwLDEtLjI1MiwxLjE1NSwxLjEzNiwxLjEzNiwwLDAsMS0xLjc2NCwwLDEuNzY3LDEuNzY3LDAsMCwxLS4yNTItMS4xNTVWMTEuNTA4YTEuNTYyLDEuNTYyLDAsMCwxLC40LTEuMjE4LDEuMywxLjMsMCwwLDEsLjg4My0uMzU3LDEuNTExLDEuNTExLDAsMCwxLDEuMjYuOEw1Mi41NzEsMzUuODQzVjExLjUwOGExLjc3MywxLjc3MywwLDAsMSwuMjUyLTEuMTU1LDEuMTM2LDEuMTM2LDAsMCwxLDEuNzY0LDAsMS43NzMsMS43NzMsMCwwLDEsLjI1MiwxLjE1NVYzOC41OTNBMS41NjIsMS41NjIsMCwwLDEsNTQuNDM5LDM5LjgxMVoiIHN0eWxlPSJmaWxsOiMzMzMiLz48cGF0aCBkPSJNNjYuMDI3LDQwYTEuMTQ2LDEuMTQ2LDAsMCwxLTEuMzQ0LTEuMzQ0VjExLjUwOGExLjc2NywxLjc2NywwLDAsMSwuMjUyLTEuMTU1LDEuMTM2LDEuMTM2LDAsMCwxLDEuNzY0LDAsMS43NjcsMS43NjcsMCwwLDEsLjI1MiwxLjE1NVYzNy45ODRIODEuNTQzYTEuNywxLjcsMCwwLDEsMS4wNTEuMjEsMSwxLDAsMCwxLDAsMS42LDEuNywxLjcsMCwwLDEtMS4wNTEuMjFaIiBzdHlsZT0iZmlsbDojMzMzIi8+PHBhdGggZD0iTTg5LjU4OSwxMS41MDhhMS43NzMsMS43NzMsMCwwLDEsLjI1Mi0xLjE1NSwxLjEzNiwxLjEzNiwwLDAsMSwxLjc2NCwwLDEuNzczLDEuNzczLDAsMCwxLC4yNTIsMS4xNTVWMzguNTkzYTEuNzczLDEuNzczLDAsMCwxLS4yNTIsMS4xNTUsMS4xMzYsMS4xMzYsMCwwLDEtMS43NjQsMCwxLjc3MywxLjc3MywwLDAsMS0uMjUyLTEuMTU1WiIgc3R5bGU9ImZpbGw6IzMzMyIvPjxwYXRoIGQ9Ik0xMjMuMDI1LDM5LjgxMWExLjI5NCwxLjI5NCwwLDAsMS0uODgzLjM1NywxLjUxMSwxLjUxMSwwLDAsMS0xLjI2LS44TDEwMy45LDE0LjI1OVYzOC41OTNhMS43NzMsMS43NzMsMCwwLDEtLjI1MiwxLjE1NSwxLjEzNiwxLjEzNiwwLDAsMS0xLjc2NCwwLDEuNzczLDEuNzczLDAsMCwxLS4yNTItMS4xNTVWMTEuNTA4YTEuNTYyLDEuNTYyLDAsMCwxLC40LTEuMjE4LDEuMjg3LDEuMjg3LDAsMCwxLC44ODEtLjM1NywxLjUwOCwxLjUwOCwwLDAsMSwxLjI2LjhsMTYuOTg2LDI1LjExMVYxMS41MDhhMS43NjcsMS43NjcsMCwwLDEsLjI1Mi0xLjE1NSwxLjEzNiwxLjEzNiwwLDAsMSwxLjc2NCwwLDEuNzY3LDEuNzY3LDAsMCwxLC4yNTIsMS4xNTVWMzguNTkzQTEuNTYyLDEuNTYyLDAsMCwxLDEyMy4wMjUsMzkuODExWiIgc3R5bGU9ImZpbGw6IzMzMyIvPjxwYXRoIGQ9Ik0xMzQuNiw0MGExLjE0NywxLjE0NywwLDAsMS0xLjM0NC0xLjM0NFYxMS40NDVhMS4zMDksMS4zMDksMCwwLDEsLjMxNS0xLjAyOUExLjMwOSwxLjMwOSwwLDAsMSwxMzQuNiwxMC4xaDE1LjUxN2ExLjY5MSwxLjY5MSwwLDAsMSwxLjA0OS4yMSwxLDEsMCwwLDEsMCwxLjYsMS42OTEsMS42OTEsMCwwLDEtMS4wNDkuMjFIMTM1LjUyNHYxMS44aDEyLjI0MWExLjY5MSwxLjY5MSwwLDAsMSwxLjA0OS4yMSwxLDEsMCwwLDEsMCwxLjYsMS42OTEsMS42OTEsMCwwLDEtMS4wNDkuMjFIMTM1LjUyNFYzNy45ODRoMTQuNTkzYTEuNjkxLDEuNjkxLDAsMCwxLDEuMDQ5LjIxLDEsMSwwLDAsMSwwLDEuNiwxLjY5MSwxLjY5MSwwLDAsMS0xLjA0OS4yMVoiIHN0eWxlPSJmaWxsOiMzMzMiLz48cGF0aCBkPSJNMTc4LjI3OCwyNS43MjNhOS44ODgsOS44ODgsMCwwLDEtNS4zMzMtMi4yLDYuNzkzLDYuNzkzLDAsMCwxLTIuMzUyLTUuNDhjMC01LDMuNTY5LTguMTg4LDkuMjgtOC4xODhhMTEuNTE3LDExLjUxNywwLDAsMSw3LjUxNywyLjMzMWMuNDYyLjMzNi44NC43MTQuODQsMS4xNzZhLjg4Ny44ODcsMCwwLDEtLjIzLjY1MS45Mi45MiwwLDAsMS0uNzc3LjM1NywyLjM0NSwyLjM0NSwwLDAsMS0xLjItLjU2Nyw5LjE2LDkuMTYsMCwwLDAtNi4yNzctMS45OTVjLTQuMzI1LDAtNi45MjksMi4zNzMtNi45MjksNi4xNTJhNC44OSw0Ljg5LDAsMCwwLDEuNTU0LDMuOTQ3LDcuOTgsNy45OCwwLDAsMCw0LjQ1MSwxLjgwNmwzLjIzMy41YzIuODEzLjQ0MSw0LjExNS45MjQsNS4zNzUsMS45NzRhNy4zMTMsNy4zMTMsMCwwLDEsMi41NjIsNS43OTVjMCw1LjAzOS0zLjg2Myw4LjI3Mi0xMC4wNzgsOC4yNzJhMTIuNjgzLDEyLjY4MywwLDAsMS04Ljg2LTIuOTE4LDEuNzI5LDEuNzI5LDAsMCwxLS44LTEuMjE4QTEuMDc2LDEuMDc2LDAsMCwxLDE3MS4zMjgsMzVhMi4wOTMsMi4wOTMsMCwwLDEsMS4yLjYzLDEwLjIzNCwxMC4yMzQsMCwwLDAsNy41MTcsMi42YzQuNywwLDcuNjg1LTIuMjY4LDcuNjg1LTYuMTczYTUuMzgsNS4zOCwwLDAsMC0xLjYzOC00LjJjLTEuMDkyLS45NDUtMS45MTEtMS4yMTgtNC4zMjUtMS42WiIgc3R5bGU9ImZpbGw6IzMzMyIvPjxwYXRoIGQ9Ik0yMTcuOTY1LDM5Ljc0OGExLjEzNiwxLjEzNiwwLDAsMS0xLjc2NCwwLDEuNzY3LDEuNzY3LDAsMCwxLS4yNTItMS4xNTVWMjUuOTMzSDIwMC4zN1YzOC41OTNhMS43NzMsMS43NzMsMCwwLDEtLjI1MiwxLjE1NSwxLjEzNiwxLjEzNiwwLDAsMS0xLjc2NCwwLDEuNzczLDEuNzczLDAsMCwxLS4yNTItMS4xNTVWMTEuNTA4YTEuNzczLDEuNzczLDAsMCwxLC4yNTItMS4xNTUsMS4xMzYsMS4xMzYsMCwwLDEsMS43NjQsMCwxLjc3MywxLjc3MywwLDAsMSwuMjUyLDEuMTU1VjIzLjkxN2gxNS41NzlWMTEuNTA4YTEuNzY3LDEuNzY3LDAsMCwxLC4yNTItMS4xNTUsMS4xMzYsMS4xMzYsMCwwLDEsMS43NjQsMCwxLjc2NywxLjc2NywwLDAsMSwuMjUyLDEuMTU1VjM4LjU5M0ExLjc2NywxLjc2NywwLDAsMSwyMTcuOTY1LDM5Ljc0OFoiIHN0eWxlPSJmaWxsOiMzMzMiLz48cGF0aCBkPSJNMjM3LjQzLDQwLjI1MmExMC4xLDEwLjEsMCwwLDEtNy4yNjUtMi44NTVjLTIuNzcxLTIuNzcxLTIuOTgxLTUuMDgxLTIuOTgxLTEyLjM0NnMuMjEtOS41NzQsMi45ODEtMTIuMzQ2YTEwLjY2OSwxMC42NjksMCwwLDEsMTQuNTI5LDBjMi43NzEsMi43NzEsMi45ODEsNS4wODEsMi45ODEsMTIuMzQ2cy0uMjEsOS41NzQtMi45ODEsMTIuMzQ2QTEwLjEsMTAuMSwwLDAsMSwyMzcuNDMsNDAuMjUyWm03Ljk3OS0xNS4yYzAtNi4zLS4xNjgtOC43MzQtMi4zMS0xMC44NzZhOC4xMTIsOC4xMTIsMCwwLDAtMTEuMzM4LDBjLTIuMTQyLDIuMTQyLTIuMzEsNC41NzctMi4zMSwxMC44NzZzLjE2OCw4LjczNCwyLjMxLDEwLjg3NmE4LjExMiw4LjExMiwwLDAsMCwxMS4zMzgsMEMyNDUuMjQsMzMuNzg1LDI0NS40MDgsMzEuMzUsMjQ1LjQwOCwyNS4wNTFaIiBzdHlsZT0iZmlsbDojMzMzIi8+PHBhdGggZD0iTTI1Ni42NDIsMTEuNDQ1YTEuMzA5LDEuMzA5LDAsMCwxLC4zMTUtMS4wMjksMS4zMDksMS4zMDksMCwwLDEsMS4wMjgtLjMxNUgyNjcuNmM1LjE2NSwwLDkuMDI4LDMuMTQ5LDkuMDI4LDguNjA4cy0zLjg2Myw4LjYwOC05LjAyOCw4LjYwOGgtOC42OTJWMzguNTkzYTEuNzczLDEuNzczLDAsMCwxLS4yNTIsMS4xNTUsMS4xMzYsMS4xMzYsMCwwLDEtMS43NjQsMCwxLjc3MywxLjc3MywwLDAsMS0uMjUyLTEuMTU1Wk0yNjcuMzUsMjUuM2M0LjExNSwwLDcuMDEzLTIuMSw3LjAxMy02LjU5M3MtMi45LTYuNTkzLTcuMDEzLTYuNTkzaC04LjQ0VjI1LjNaIiBzdHlsZT0iZmlsbDojMzMzIi8+PC9zdmc+) no-repeat; margin-top: 0; } @media screen and (max-width: 768px) { #shopList .inner h1 { width: 167px; height: 70px; margin-top: 4px } } #shopList .inner ul{ display: flex; flex-wrap: nowrap; justify-content: center; margin-left: 0; margin-right: 0; width: auto; } @media screen and (max-width: 768px) { #shopList .inner ul{ flex-wrap: wrap; justify-content: center; margin-left: 23px; margin-right: 23px; width: calc(100% - 46px) } } #shopList .inner ul li{ position: relative; width: 215px; height: 75px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .05)); margin-bottom: 10px; margin-right: 7px; } @media screen and (max-width: 768px) { #shopList .inner ul li{ width: calc((100vw - 30px - 46px - 14px) / 2); height: calc(.3916083916 * (100vw - 30px - 46px - 14px) / 2); margin-bottom: 14px; margin-right: 14px } } #shopList .inner ul li a{ display: block; width: 100%; height: 100%; position: relative; border-radius: 3px; } @media screen and (max-width: 768px) { #shopList .inner ul li:nth-child(2n) { margin-right: 0 } } #shopList .inner ul li.amazon a { background: #fff url(data:image/svg+xml;base64,PHN2ZyBpZD0iMmNkOTg0Y2MtN2VkYS00NjRlLWE1YzMtMTVkYWNhNjYzNjc4IiBkYXRhLW5hbWU9InBhcnRzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjMgNDUiPjx0aXRsZT5hbWF6b248L3RpdGxlPjxwYXRoIGQ9Ik05NS4zMDgsMzYuMTQ5Yy02LjY3NCw0LjM2My0xNi4zNTIsNi42ODQtMjQuNjg0LDYuNjg0QTQ4LjA2LDQ4LjA2LDAsMCwxLDQwLjQ3MSwzMi42NDRjLS42MjUtLjUtLjA2Ny0xLjE4My42ODQtLjhhNjYuODE5LDY2LjgxOSwwLDAsMCwzMC4xNyw3LjA5MSw2Ni43NTIsNjYuNzUyLDAsMCwwLDIzLjAxMi00LjE3MUM5NS40NjYsMzQuMzQ0LDk2LjQxMiwzNS40MjcsOTUuMzA4LDM2LjE0OVoiIHN0eWxlPSJmaWxsOiNmOTA7ZmlsbC1ydWxlOmV2ZW5vZGQiLz48cGF0aCBkPSJNOTguMDg1LDMzLjM0MWMtLjg1NC0uOTY5LTUuNjQzLS40NTktNy43OTUtLjIzMS0uNjUyLjA2OS0uNzUzLS40MzQtLjE2NS0uOCwzLjgyLTIuMzc4LDEwLjA4MS0xLjY5LDEwLjgwOC0uOXMtLjE5Miw2LjM2My0zLjc3Miw5LjAxN2MtLjU1MS40MDgtMS4wNzUuMTktLjgzMS0uMzQ4Qzk3LjEzNSwzOC4zLDk4Ljk0LDM0LjMwOSw5OC4wODUsMzMuMzQxWiIgc3R5bGU9ImZpbGw6I2Y5MDtmaWxsLXJ1bGU6ZXZlbm9kZCIvPjxwYXRoIGQ9Ik05MC40NDIsMTUuNTE2di0yLjMxYS42MTMuNjEzLDAsMCwxLC42NjEtLjU4NkgxMDIuNzlhLjYyMS42MjEsMCwwLDEsLjY3NS41ODR2MS45ODFjMCwuMzMyLS4zMTkuNzY2LS44OCwxLjQ1NEw5Ni41MywyNC4zYTE0LjM2OCwxNC4zNjgsMCwwLDEsNi42NjYsMS4yNjgsMS4wNDMsMS4wNDMsMCwwLDEsLjYyLjlWMjguOTNhLjYxOC42MTgsMCwwLDEtLjg2LjUyOCwxNS4wMTEsMTUuMDExLDAsMCwwLTEyLjM0OC4wMi42MTMuNjEzLDAsMCwxLS44MzItLjUzNVYyNi42YTIuNTMzLDIuNTMzLDAsMCwxLC40MzUtMS41ODdMOTcuMjI0LDE2LjFIOTEuMTE4QS42MTkuNjE5LDAsMCwxLDkwLjQ0MiwxNS41MTZaIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQiLz48cGF0aCBkPSJNNDcuODExLDI5Ljk0M0g0NC4yNTZhLjY0MS42NDEsMCwwLDEtLjYzNi0uNTMzbDAtMTYuMTY1YS42MzkuNjM5LDAsMCwxLC42ODYtLjU4Mkg0Ny42MmEuNjQuNjQsMCwwLDEsLjY0Ni41NDN2Mi4xMWguMDY2YTQuNjgyLDQuNjgyLDAsMCwxLDQuNjgtMi45OTMsNC42ODEsNC42ODEsMCwwLDEsNC42MTMsMi45OTMsNS4wNzYsNS4wNzYsMCwwLDEsNC45MTItMi45OTMsNS4zMDcsNS4zMDcsMCwwLDEsNC4xMTUsMS43NjljMS4xMjksMS4zNi45LDMuMzMzLjksNS4wNjhsMCwxMC4yYS42NC42NCwwLDAsMS0uNjg2LjU4Mkg2My4zMDlhLjYzMS42MzEsMCwwLDEtLjYzOC0uNTgxVjIwLjc5M2ExOC4zNDIsMTguMzQyLDAsMCwwLS4xLTMuMDI3Yy0uMjY1LTEuMDg4LTEuMDYyLTEuMzk1LTIuMDkxLTEuMzk1QTIuMzY3LDIuMzY3LDAsMCwwLDU4LjM1NSwxNy43YTguNyw4LjcsMCwwLDAtLjMzMiwzLjF2OC41NjhhLjY0LjY0LDAsMCwxLS42ODYuNTgySDUzLjc4N2EuNjMxLjYzMSwwLDAsMS0uNjM4LS41ODFsMC04LjU2OWMwLTEuOC4zMzItNC40NTYtMi4xOS00LjQ1Ni0yLjU1NiwwLTIuNDU2LDIuNTg1LTIuNDU2LDQuNDU2bDAsOC41NjhBLjYzOS42MzksMCwwLDEsNDcuODExLDI5Ljk0M1oiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZCIvPjxwYXRoIGQ9Ik0xMTMuNTI0LDEyLjMyM2M1LjI3NywwLDguMTMxLDQuMDE0LDguMTMxLDkuMTE2LDAsNC45MzItMy4xNTIsOC44NDUtOC4xMzEsOC44NDUtNS4xNzcsMC04LTQuMDE0LTgtOS4wMTVDMTA1LjUyNiwxNi4yMzUsMTA4LjM4LDEyLjMyMywxMTMuNTI0LDEyLjMyM1ptLjAzMywzLjNjLTIuNjIyLDAtMi43ODgsMy4xNjMtMi43ODgsNS4xMzZzLS4wMzMsNi4xOTEsMi43NTUsNi4xOTFjMi43NTUsMCwyLjg4Ny0zLjQsMi44ODctNS40NzZhMTMuMzQyLDEzLjM0MiwwLDAsMC0uNTMxLTQuMjg2QTIuMiwyLjIsMCwwLDAsMTEzLjU1NywxNS42MjNaIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQiLz48cGF0aCBkPSJNMTI4LjUsMjkuOTQzaC0zLjU0MmEuNjMxLjYzMSwwLDAsMS0uNjM4LS41ODFsLS4wMDUtMTYuMTcxYS42NS42NSwwLDAsMSwuNjgzLS41MjdoMy4zYS42NjEuNjYxLDAsMCwxLC42MzIuNDUzdjIuNDcyaC4wNjdhNC43OTIsNC43OTIsMCwwLDEsNC44NDUtMy4yNjUsNC44NjUsNC44NjUsMCwwLDEsNC4xNDksMS45Yy45MywxLjI5My45MywzLjQ2OS45Myw1LjAzNFYyOS40MzRhLjY1Ni42NTYsMCwwLDEtLjY4Mi41MDloLTMuNTY0YS42NDYuNjQ2LDAsMCwxLS42MzMtLjUwOVYyMC42NTdjMC0xLjc2OS4yMzMtNC4zNTQtMi4yMjQtNC4zNTRhMi4zMzIsMi4zMzIsMCwwLDAtMi4wNTcsMS4yOTMsNi40NDksNi40NDksMCwwLDAtLjU2NSwzLjA2MnY4LjdBLjY1LjY1LDAsMCwxLDEyOC41LDI5Ljk0M1oiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZCIvPjxwYXRoIGQ9Ik04MS4xMjYsMjIuMjI0YTUuNTcxLDUuNTcxLDAsMCwxLS42NjUsMy4zNDFBMi45MywyLjkzLDAsMCwxLDc4LDI3YTIuMDcyLDIuMDcyLDAsMCwxLTIuMTYyLTIuMjg0YzAtMi42ODIsMi43MTYtMy4xNzEsNS4yODktMy4xNzFaTTg0LjcxLDI5LjlhLjgxNC44MTQsMCwwLDEtLjg0LjA3NCw4LjAyNCw4LjAyNCwwLDAsMS0yLjAzOC0yLjEsNy40OCw3LjQ4LDAsMCwxLTUuODYyLDIuMjljLTIuOTkzLDAtNS4zMjItMS42MzctNS4zMjItNC45MDlBNS4zODMsNS4zODMsMCwwLDEsNzQuNDQsMjAuMTFhMjcuNDMsMjcuNDMsMCwwLDEsNi42ODYtMS4wOTFWMTguNjFhMy42MzUsMy42MzUsMCwwLDAtLjQzMi0yLjI4NCwyLjUwNywyLjUwNywwLDAsMC0yLS44MThBMi42OCwyLjY4LDAsMCwwLDc1Ljg0LDE3LjRhLjcwOC43MDgsMCwwLDEtLjYxOC41NzlsLTMuNDQ2LS4zMzFjLS4yOTEtLjA1OC0uNjE1LS4yNjUtLjUzMS0uNjU4Ljc5Mi0zLjcsNC41NjgtNC44MjIsNy45NTEtNC44MjJhOC43NjcsOC43NjcsMCwwLDEsNS4zNTUsMS41NjhjMS43MywxLjQzMiwxLjU2MywzLjM0MSwxLjU2Myw1LjQydjQuOTA3YTQuMDczLDQuMDczLDAsMCwwLDEuMzQyLDIuOTE5Yy4yMjYuMjg3LjI3OC42MjctLjAxMi44MzctLjcyNy41MzktMi4wMTcsMS41MzItMi43MjcsMi4wOTJaIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQiLz48cGF0aCBkPSJNMzQuNTE2LDIyLjIyNGE1LjU2Nyw1LjU2NywwLDAsMS0uNjY1LDMuMzQxQTIuOTMsMi45MywwLDAsMSwzMS4zODksMjdhMi4wNzIsMi4wNzIsMCwwLDEtMi4xNjItMi4yODRjMC0yLjY4MiwyLjcxNi0zLjE3MSw1LjI4OC0zLjE3MVpNMzguMSwyOS45YS44MTMuODEzLDAsMCwxLS44NC4wNzQsOC4wMjEsOC4wMjEsMCwwLDEtMi4wMzgtMi4xLDcuNDgsNy40OCwwLDAsMS01Ljg2MiwyLjI5Yy0yLjk5NCwwLTUuMzIyLTEuNjM3LTUuMzIyLTQuOTA5QTUuMzg0LDUuMzg0LDAsMCwxLDI3LjgzLDIwLjExYTI3LjQyOCwyNy40MjgsMCwwLDEsNi42ODYtMS4wOTFWMTguNjFhMy42MzQsMy42MzQsMCwwLDAtLjQzMi0yLjI4NCwyLjUwOCwyLjUwOCwwLDAsMC0yLS44MThBMi42ODEsMi42ODEsMCwwLDAsMjkuMjMsMTcuNGEuNzA4LjcwOCwwLDAsMS0uNjE3LjU3OWwtMy40NDYtLjMzMWMtLjI5MS0uMDU4LS42MTUtLjI2NS0uNTMtLjY1OC43OTItMy43LDQuNTY3LTQuODIyLDcuOTUxLTQuODIyYTguNzY4LDguNzY4LDAsMCwxLDUuMzU1LDEuNTY4YzEuNzI5LDEuNDMyLDEuNTYzLDMuMzQxLDEuNTYzLDUuNDJ2NC45MDdhNC4wNzMsNC4wNzMsMCwwLDAsMS4zNDIsMi45MTljLjIyNy4yODcuMjc4LjYyNy0uMDEyLjgzNy0uNzI2LjUzOS0yLjAxNywxLjUzMi0yLjcyNywyLjA5MloiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZCIvPjwvc3ZnPg==) no-repeat center center; background-size: 163px 45px; } @media screen and (max-width: 768px) { #shopList .inner ul li.amazon a { background-size: 104px 30px } } #shopList .inner ul li.lohaco a { background: #fff url(data:image/svg+xml;base64,PHN2ZyBpZD0iNGRlNGVmNDQtZDA3My00MjE2LThjNTEtMmMwMzBhY2Y2Nzg3IiBkYXRhLW5hbWU9InBhcnRzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjMgNTUiPjx0aXRsZT5sb2hhY288L3RpdGxlPjxwYXRoIGQ9Ik04MC4wNjMsNTAuOTg5YS4yODMuMjgzLDAsMCwwLS4wMzgtLjEyLDE4LjQ3LDE4LjQ3LDAsMCwxLC4xLTMuMTI4Yy4wMzgtLjMzNi0uMDkzLS41NjktLjQzOS0uNmEuNjE5LjYxOSwwLDAsMC0uNzM0LjUzMiw3LjA5Myw3LjA5MywwLDAsMC0uMTExLjk0Yy0uMDExLjI0NS0uMS4zNDMtLjM1LjM0NGEzLjQxNSwzLjQxNSwwLDAsMC0xLjI2NS4xMTdjLS4zNjIuMDQ1LS41LS4xLS40MzUtLjQ2OWE1LjUsNS41LDAsMCwwLC4wNTMtLjg1MS41NjkuNTY5LDAsMCwwLS42LS42MzQuNTQuNTQsMCwwLDAtLjY0Ni41MjFjLS4xNzYuOTM0LS4wNDcsMS44NzktLjE2OCwyLjgxN2ExLjg0MiwxLjg0MiwwLDAsMCwuMzc1LDEuMy43MTIuNzEyLDAsMCwwLC44NzguM2MuMzEyLS4xNDcuMjcxLS40OC4xMy0uNzg5YTMuMzIsMy4zMiwwLDAsMS0uMjI3LS43NTNjLS4wNi0uMzE1LjAzNS0uNTA4LjQyMi0uNDg0LjIxMS4wMTMuNDU3LjExMS42NDctLjA5YTQuNzY0LDQuNzY0LDAsMCwwLC42MzQtLjAxMmMuMzktLjA1Ny41Ni4xLjYyMy40ODIuMDM4LjIzMi0uMDY0LjUwNS4xNS43LS4wMzIuMjQ4LjIxMi40LjIxNi42MzlhLjA1Ny4wNTcsMCwwLDAsLjA0Ni4wMjljLjAwOC4wOTUuMDg5LjEzOC4xNTUuMTkyQzgwLjE5Miw1MS45MzUsODAuMzA5LDUxLjc1Myw4MC4wNjMsNTAuOTg5WiIgc3R5bGU9ImZpbGw6IzFmMTgxNSIvPjxwYXRoIGQ9Ik05Mi43NDgsNTAuMzg0Yy0uMi0uMjM0LS40NDktLjE1OS0uNjc4LS4wMzgtLjI4LjE0OC0uNTUuMzE3LS44My40NjZhLjY2Ny42NjcsMCwwLDEtLjg3My0uMTI0LDEuOTA5LDEuOTA5LDAsMCwxLC40LTIuMTUxLDIuMDg1LDIuMDg1LDAsMCwxLDEuMjg1LS4yMmMuNDQ0LS4wMTkuNjExLS4zMDkuNDM0LS43MTMtLjE2MS0uMzY4LS40NzgtLjQyMi0uODIyLS40N2EyLjIzMiwyLjIzMiwwLDAsMC0yLjQyNiwxLjM1MmMtLjYzOCwxLjE3NC0uMzUsMy40MjUsMS40MTIsMy41NzEuMTUxLjAxMi4zMTQuMDg4LjQyOS0uMDg0YTIuMDcsMi4wNywwLDAsMCwxLjY1MS0uNzdBLjYuNiwwLDAsMCw5Mi43NDgsNTAuMzg0WiIgc3R5bGU9ImZpbGw6IzFhMTgxNSIvPjxwYXRoIGQ9Ik02OC4xLDUxLjIxNmEuNTQ3LjU0NywwLDAsMC0uNzA5LS4yOTUsNS4zMDgsNS4zMDgsMCwwLDEtMS41MzkuMDY4LjUxNC41MTQsMCwwLDEtLjU2OC0uNDkyLDYuNTM2LDYuNTM2LDAsMCwxLS4wMjUtMS45NjYsMy41NTEsMy41NTEsMCwwLDAsLjAxNi0xLjA2NS40NzYuNDc2LDAsMCwwLS41OTUtLjQ0NWMtLjM0NS4wMzUtLjQuMjIyLS40NTkuNTI0YTE1LjU0MywxNS41NDMsMCwwLDAsLjAyNSwzLjY2OC43MzQuNzM0LDAsMCwwLC43NDkuNzUyYy45MjcuMDA2LDEuODU1LS4wMSwyLjc4Mi0uMDE3LjI0Ny4wNTYuMjE2LS4yLjMyOS0uMjkzaDBBLjI2MS4yNjEsMCwwLDAsNjguMSw1MS4yMTZaIiBzdHlsZT0iZmlsbDojMjQxZTFjIi8+PHBhdGggZD0iTTk4LjA3NiwxNy42MjRhMS4yNDgsMS4yNDgsMCwwLDAtMS40NDYtLjA2NiwxMC4xMTYsMTAuMTE2LDAsMCwxLTEuNDI2LjY1MWMtLjI3Ni4xMTEtLjc2OC4wOS0uODEyLjU4NGwtLjEuMTExYS42LjYsMCwwLDAtLjYtLjA1Niw0MS45ODEsNDEuOTgxLDAsMCwxLTQuMDMsMS41NTcuMTc4LjE3OCwwLDAsMC0uMDQ3LjAyNSwxOC41NzYsMTguNTc2LDAsMCwxLTIuMzI1LDEuMDUxYy0uMzkzLjE2OC0uODA2LjI3NC0xLjE5NS40NjUtLjYzNC4zMTEtMS4zMDkuNTM3LTEuOTYuODE3YTE3Ljk3NCwxNy45NzQsMCwwLDAtMi4zNDksMS4wMjUsMS4xNjMsMS4xNjMsMCwwLDAtLjUsMS42Yy40MDcuOCwxLjA1Ljk3NCwyLjA4MS42MzYsMS4xLS4zNjEsMi4wOTItLjk2NSwzLjE4Ny0xLjM0OWEyNC42LDI0LjYsMCwwLDEsMi40NjQtLjg2Mi4yNjguMjY4LDAsMCwwLC4zMjctLjA5MUExNy43LDE3LjcsMCwwLDEsOTEuMzc1LDIyLjdjLjc1NS0uMywxLjQ5LS42NSwyLjI2NC0uOTA3YTEuNjA2LDEuNjA2LDAsMCwwLC41NTEtLjMsNC4zNyw0LjM3LDAsMCwxLDEuMzgzLS40NDhjLjMxMy0uMDIyLjQzMi4wNzcuNDUuNDE0LjAzLjU1My0uMTYzLDEuMDg3LS4xMSwxLjYzM2E4Ljk3Myw4Ljk3MywwLDAsMSwuMDEyLDIuMTQ4Yy0uMDI3LjE5LS4xLjQ1Ny4xMDguNjM4di4xMTFjLS4wMTEsMS4zMTItLjA1NywyLjYyNC0uMDIxLDMuOTM0YTEuNDczLDEuNDczLDAsMCwxLS45MiwxLjQzOCwxOS4zMzQsMTkuMzM0LDAsMCwwLTIuNzA4LDEuNTRBMTEuNDEyLDExLjQxMiwwLDAsMSw5MC41LDMzLjk5MWEyOC4yNzgsMjguMjc4LDAsMCwwLTIuOTk0LDEuNzU1LDEuMjc5LDEuMjc5LDAsMCwwLS41MTIuMjQzYy0uNjEuMzc2LTEuMjg5LjYyMi0xLjg4NCwxLjAzNC0xLjI0Ny44NjUtMi43MTQsMS4zOTMtMy44MSwyLjQ5MS0uMjIzLjEwNy0uNDA1LjI0Mi0uMzYxLjUzYS4xLjEsMCwwLDAsLjA0Ni4wNDguMTUuMTUsMCwwLDAsLjA4Ni4xNzhsLjAxOS4wMTRhLjUxMi41MTIsMCwwLDEtLjA3Mi4wNTJjLS4wNDYuNDE4LjI1Ny41NDUuNTYyLjY2OWwuMDM1LjAxYy4wMzIuMDc2LjEwNi4xMy4xNDYuMmExLjc1MiwxLjc1MiwwLDAsMCwuMy4wNzYsMS43MzEsMS43MzEsMCwwLDAsMS4yOS0uMjUzYy42NzgtLjM1LDEuMzktLjY0OCwyLjAyNy0xLjA2MSwxLjQ2OS0uOTUxLDMuMDUxLTEuNyw0LjUzMy0yLjYyNmEyNy4xNDgsMjcuMTQ4LDAsMCwwLDIuNDQ4LTEuNDcyLjkzNi45MzYsMCwwLDAsLjg0NS0uMzQ2Yy4xMTQtLjI1Ni40NzEtLjI0OS41NjktLjUyM2EuMS4xLDAsMCwwLC4wODYtLjAyMyw1LjYyNSw1LjYyNSwwLDAsMCwyLTEuMDU1Yy43Mi0uNDc0LDEuNjQyLS42NzEsMi4xMDktMS41bC4xODgtLjI0MWExLjU4MywxLjU4MywwLDAsMCwuNTQ4LTEuNDM4Yy0uMDI0LTEuNzcyLS4wNTYtMy41NDYuMDE2LTUuMzE1LjAzOC0uOTM3LjAyOC0xLjg4Mi4wMjgtMi44MTEsMC0xLjE0NC0uMDUxLTIuMjg2LjA0Ni0zLjQzMUExLjYxNywxLjYxNywwLDAsMCw5OC4wNzYsMTcuNjI0WiIgc3R5bGU9ImZpbGw6IzFlMTUxMiIvPjxwYXRoIGQ9Ik04MS4xLDIxLjM1MWMuMDQ0LS4xNC0uMDkxLS4yLS4xMzMtLjMwN2EuNjg1LjY4NSwwLDAsMC0uMDUzLS4yYy0uMzg4LS42MDktLjQ1NC0xLjM0Mi0uODYzLTEuOTc5YTYuMDEzLDYuMDEzLDAsMCwxLS42NTgtMS43MDUsMjEuOTUyLDIxLjk1MiwwLDAsMC0xLjI0NS0zLjA3OWMtLjM0NS0uODMxLS43MzktMS42NDktMS4wNzgtMi40ODdBMTkuMDk0LDE5LjA5NCwwLDAsMCw3NS42OSw4LjQ1M2ExLjUwNiwxLjUwNiwwLDAsMC0xLS43Yy0uMzc1LS4wODctLjkxNy4yOTQtLjkxOC42MTJhLjI2NS4yNjUsMCwwLDAtLjEuMDI3Yy0uMjU0LjA0MS0uMjE5LjI4Ny0uMzEyLjQ0MS0uNDYuNzY1LjM3NSwxLjIzNC40NzgsMS44OWE1LjQ3Nyw1LjQ3NywwLDAsMCwuNTU4LDEuMzMyYy41NzQsMS4xOCwxLjAyOCwyLjQxOSwxLjUyOSwzLjYzNC4wNjguMDkyLS4wMTguMjMuMDkzLjMxYTkuNzgzLDkuNzgzLDAsMCwxLC44NjMsMS44MjFjLjIyOC42LjQ1NSwxLjIuNjY0LDEuODEzLjExLjIzNS4xMzIuNTI0LjQuNjU5LjIyOC42MjYuNDgxLDEuMjQ0LjY3NywxLjg3OWEyLjM2OCwyLjM2OCwwLDAsMCwxLjAyMSwxLjIxOCwxLDEsMCwwLDAsMS4xODQtLjA4MkM4MS41NzYsMjIuNzA4LDgxLjYsMjIuMiw4MS4xLDIxLjM1MVoiIHN0eWxlPSJmaWxsOiMxZTE1MTIiLz48cGF0aCBkPSJNODkuMzQ4LDUuNzE0YS4wODUuMDg1LDAsMCwwLC4wMjMuMDg3Yy0uMTEyLjI5Mi4xNjMuMzc1LjI5LjUzOGEuNS41LDAsMCwwLC4yNDkuNTI5LDEuMzI5LDEuMzI5LDAsMCwxLC41MzkuNTVjLjksMS40NzksMS44NDcsMi45MzYsMi43MzEsNC40MjYuNDkyLjgyOSwxLjA2MiwxLjYsMS41MzIsMi40NTNBNS4zNzYsNS4zNzYsMCwwLDAsOTYuMSwxNi4xMTVjLjAyOS4yNi4yNTMuMjYuNDMuMzI0YS41Ni41NiwwLDAsMCwuODA4LjI2Yy4zNzMtLjI3Mi44MDYtLjU2Ni44My0xLjEyNGEuNzYzLjc2MywwLDAsMC0uMDI1LS44NTksMS41MjMsMS41MjMsMCwwLDAtLjEyMS0uMjg1Yy0uNTItLjc1OS0xLjEtMS40ODEtMS41NTgtMi4yNzctLjgtMS40MDgtMS42NTgtMi43OC0yLjYtNC4xbC0uMjE0LS4zMjVjLS41MTctLjg1MS0xLjAyOC0xLjctMS41NzEtMi41NGE2LjQ4Myw2LjQ4MywwLDAsMS0uNy0xLjE2Ny41MTIuNTEyLDAsMCwwLS4zMTctLjM2M2MtLjI4OS0uMjI0LS41MjItLjU0Ny0uOS0uNjIxYTEuNDcxLDEuNDcxLDAsMCwwLTEuNS45NjhBMS43MzQsMS43MzQsMCwwLDAsODkuMzQ4LDUuNzE0WiIgc3R5bGU9ImZpbGw6IzFlMTUxMiIvPjxwYXRoIGQ9Ik04MC4wMzQsMzkuNDA3YTIsMiwwLDAsMC0uMTA2LS44NTdBMTAuNTkyLDEwLjU5MiwwLDAsMCw4MCwzNi4wNjJjLS4wMzEtLjQ2Ny4wMTEtLjkyMS4wMTUtMS4zODEuMDEtMS4xMTgtLjAyOS0yLjIzNS0uMDc5LTMuMzUzQTE5LjU2NSwxOS41NjUsMCwwLDEsODAsMjguMTIxYTE4LjYsMTguNiwwLDAsMCwuMDQ0LTIuMjgzLDEuOTQ2LDEuOTQ2LDAsMCwwLS42NTUtMS42MTgsNS43ODUsNS43ODUsMCwwLDAtMS43NjctMS4wMDhjLS44NDctLjI4My0xLjQ4Ni0xLjA3LTIuNDY3LTEtLjM3MS0uNTQ2LTEuMDcxLS41LTEuNTIzLS44MjZhMjUuNzIyLDI1LjcyMiwwLDAsMC0yLjMyMi0xLjE0NEExOC4wNDIsMTguMDQyLDAsMCwwLDY4LjEsMTguNjgxaDBsLS4zMTYtLjIxNWgwYTguODgxLDguODgxLDAsMCwwLTEuMzgtLjY4MiwxLjU1NSwxLjU1NSwwLDAsMC0yLjA1OC45aDBhLjQxOC40MTgsMCwwLDAtLjEuNDMyaDBxMCwuNywwLDEuMzkzaDBhMi42MiwyLjYyLDAsMCwwLS4wMTMsMS4wNzJoMHEuMDA4LDEuNDQ5LjAxNSwyLjloMHYuMTEyaDBjMCwuNTc2LS4wMjMsMS4xNTUsMCwxLjcyNi4wNTYsMS43OTIuMDMyLDMuNTgxLS4wMSw1LjM3Mi0uMDEyLjUxLjEwNSwxLjA0LjA0MiwxLjUyYTEuNSwxLjUsMCwwLDAsLjU0NCwxLjQ3NSw5LjYyNCw5LjYyNCwwLDAsMCwyLjUxLDEuMjloMGMuMTQuMTY4LjM3NC4xMjguNTM4LjI0MWgwYy41OTQuNSwxLjQxNi41NzUsMiwxLjA2Ni40MjIuMzUzLjk2Ny4zNzcsMS40MTUuNjUzYTE2LjE4NywxNi4xODcsMCwwLDAsMi41MjcsMS4zNCwxNC41NzksMTQuNTc5LDAsMCwxLDEuODIuOTIxLDUuMzM4LDUuMzM4LDAsMCwwLDEuOS45NDVoMGExLjUsMS41LDAsMCwwLC42NS4xNzloMGwuMTA3LDBoMGEuODExLjgxMSwwLDAsMCwxLjEtLjNoMGEuMTY2LjE2NiwwLDAsMSwuMDg5LjAxOS42NzYuNjc2LDAsMCwwLC41NDMtLjYzOSwzLjE3OSwzLjE3OSwwLDAsMCwuMDA4LS44OTNabS0zLjk0Ni0xLjk4M2EzLjk4NiwzLjk4NiwwLDAsMC0xLjY1Ny0uN2gwbC0uMTMtLjExNGgwYTEzLjMxNSwxMy4zMTUsMCwwLDAtMS43MTItLjljLTEuMTc1LS42OC0yLjQtMS4yNzgtMy42LTEuOWEyLjEyNCwyLjEyNCwwLDAsMC0uMzQ5LS4xMTJjLjAxNS0uMTY4LS4wMDktLjI5LS4yMjItLjE4NS0uMTA4LS4wMDgtLjItLjA5MS0uMjgzLS4xMS0xLS4yMjYtMS4wODMtLjkxNS0xLjAyLTEuNzc1LjAzNy0uNTA5LS4xOTEtMS4wMTcsMC0xLjU1NC4xNC0uMzg1LS4wOTQtLjgtLjA5My0xLjIsMC0uNzQzLjA0Ni0xLjQ4My4wODgtMi4yMjVhMTkuODA4LDE5LjgwOCwwLDAsMC0uMS0yLjE2MnEwLS4yMTUsMC0uNDNoMGMuMDQyLS43MDcuMTExLTEuNDEzLjExNS0yLjEyLDAtLjQ1MS4yMTItLjUxMS41NjktLjQzMmExMC4xMzUsMTAuMTM1LDAsMCwxLDEuODQxLjgxMWMxLjE0My41LDIuMjM2LDEuMTE0LDMuNDE2LDEuNTMxLjE0OC4wNTIuMjE1LjI0Ny40LjIzNGgwYy4wNDQuMDk0LjEzOS4wNzkuMjE2LjFoMGMuOS40NiwxLjguOTE3LDIuNywxLjM4YTEuNTMzLDEuNTMzLDAsMCwxLDEuMDU3LDEuODE5LDkuMDcxLDkuMDcxLDAsMCwwLS4wMTcsMy4wOTQsMS4yMTIsMS4yMTIsMCwwLDEtLjA2Mi40NTFoMGwwLC4xMTJoMGMwLDEuMjguMDE0LDIuNTYtLjAxOCwzLjgzOWExMy45NzgsMTMuOTc4LDAsMCwxLC4wMTgsMS45NTdoMHYuMzIxaDBDNzcuMTUsMzcuNjExLDc2LjYzNCwzNy43MSw3Ni4wODksMzcuNDI0WiIgc3R5bGU9ImZpbGw6IzFlMTUxMiIvPjxwYXRoIGQ9Ik05OC43ODcsNDguNzMyYTEuNjY1LDEuNjY1LDAsMCwwLTEuMDQ3LTEuNTA2LDIuNDk0LDIuNDk0LDAsMCwwLTIuNTc1Ljk4LDIuODU2LDIuODU2LDAsMCwwLS40MjMsMi4yNTNjLjAzMi4zLjA2Ni42MDguMzk1Ljc1OGwuMjQ1LjIxMWgwYy4wMzYuMTkzLjIuMDkuMy4xMjhoMGMuMDA5LjA1MiwwLC4xMzYuMDMuMTUzYTEuOSwxLjksMCwwLDAsMi40ODktLjQ3NEEzLjA5MywzLjA5MywwLDAsMCw5OC43ODcsNDguNzMyWm0tMS4zNiwxLjZhLjg1OS44NTksMCwwLDEtMS4wMzUuNDE0Yy0uNDg4LS4xOTItLjUzNi0uNjY2LS41MzktMS4xYTEuNzMyLDEuNzMyLDAsMCwxLDEuMDEyLTEuMjE4Yy40Ny0uMTMyLjg3Mi4zMTguODY3LjlBMS42LDEuNiwwLDAsMSw5Ny40MjcsNTAuMzNaIiBzdHlsZT0iZmlsbDojMWQxMDBlIi8+PHBhdGggZD0iTTczLjMzOSw0OC42NDJoMGMtLjA0OC0uMTUyLS4wMy0uMzMzLS4yLS40MzJoMGExLjY1NCwxLjY1NCwwLDAsMC0yLjItLjg0LDIuNzY3LDIuNzY3LDAsMCwwLTEuMzg4LDMuNSwxLjYxNiwxLjYxNiwwLDAsMCwxLjYzOCwxLjEsMi40MTMsMi40MTMsMCwwLDAsMS42MzEtLjk4NWgwYy4yNi0uMTMzLjI2Mi0uNC4zMjEtLjYzMUExLjkzOCwxLjkzOCwwLDAsMCw3My4zMzksNDguNjQyWk03MC45ODYsNTAuNjhjLS4zNzEtLjE1LS4zODgtLjQ5NC0uNDM1LS44MTdhMSwxLDAsMCwxLC43LTEuMjQ4Yy42NjYtLjIuOTQzLS4wMjMsMS4wNTguNjY4aDBjLS4wMDguMTI0LS4wODIuMjYzLjA3OC4zNDlhLjMxNC4zMTQsMCwwLDAtLjIxMS4zOWgwYy0uMTM4LjA2OC0uMTY0LjIwOS0uMjE2LjMzM2gwQS44MjkuODI5LDAsMCwxLDcwLjk4Niw1MC42OFoiIHN0eWxlPSJmaWxsOiMxOTEzMTEiLz48cGF0aCBkPSJNODcsNTAuODg3aDBhLjg1MS44NTEsMCwwLDAtLjM1My0uNjM0LDEuMDE5LDEuMDE5LDAsMCwwLS4yMzQtLjY0NmgwYy0uMTgyLS4yMjktLjE1OC0uNTYxLS4zODQtLjc2OCwwLS4yMzMtLjI2My0uMzY3LS4yMjktLjYxM2EuMzM4LjMzOCwwLDAsMC0uMTgyLS4yMzUsMy40LDMuNCwwLDAsMC0uMjQ5LS40NTVjLS4yMTEtLjI3OS0uNDA2LS42MDYtLjg1LS40ODktLjItLjA1NC0uMzU1LS4wMjYtLjQzMy4xODlhMi45ODIsMi45ODIsMCwwLDAtLjY1NywxLjE4My4wOTQuMDk0LDAsMCwwLS4wODkuMTE0aDBhOS42ODIsOS42ODIsMCwwLDAtLjk5MiwyLjE4NiwyLjg3MiwyLjg3MiwwLDAsMC0uMS45ODNjLjAxMy4zMjEuMjE4LjQ3Mi41NS40ODVzLjQ0NC0uMTMuNDYzLS40MzVjLjAxNi0uMjQ3LjA3NS0uNDkuMTE1LS43MzVoMGwuMTc5LS4zMzloMGE0LjMwOSw0LjMwOSwwLDAsMCwuOS0uMDU0Yy43LS4xMzgsMS4zNDMtLjE0LDEuNjEuNzExYS45NzIuOTcyLDAsMCwwLC4xNC4yMTdoMGEuNS41LDAsMCwwLC43NzcuMjM5Qzg3LjQsNTEuNTQzLDg3LjE1NCw1MS4xOTUsODcsNTAuODg3Wm0tMi4wNTgtMS4wNjFjLS4zMTEtLjAxOC0uNjI1LDAtLjk3MSwwLC4wNzctLjMyNy4yODYtLjU1Mi4yNjItLjg0My4zLS4wNC4xMjgtLjMuMi0uNDM4aDBhLjEuMSwwLDAsMCwuMDg1LS4wMjFoMGEuMzI4LjMyOCwwLDAsMCwuMjkyLjE3OWwuMDIxLS4wMDdjLjAwNy4wNjcuMDEuMTM0LjA4NS4xNzNhLjgxLjgxLDAsMCwwLC4yNDIuNTI4aDBDODUuMzI1LDQ5LjY1NCw4NS4zODEsNDkuODUyLDg0Ljk0Niw0OS44MjZaIiBzdHlsZT0iZmlsbDojMmEyMTIwIi8+PC9zdmc+) no-repeat center center; background-size: 163px 55px; } @media screen and (max-width: 768px) { #shopList .inner ul li.lohaco a { background-size: 104px 40px } } #shopList .inner ul li.rakuten a { background: #fff url(data:image/svg+xml;base64,PHN2ZyBpZD0iYjYzZTg1MTctMWJhOS00ZGE5LTk2MjYtOWMwMzAxODdiNWJkIiBkYXRhLW5hbWU9InBhdGgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2MyIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDE2MyA0NSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5hYzhkODhmNC0wNTFlLTRhMTctOTNmOS0wZWM1NWUwY2I3NDQgewogICAgICAgIGZpbGw6ICNiZjAwMDA7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnPgogICAgPGc+CiAgICAgIDxwb2x5Z29uIGNsYXNzPSJhYzhkODhmNC0wNTFlLTRhMTctOTNmOS0wZWM1NWUwY2I3NDQiIHBvaW50cz0iOTUuNTkgMzMuNjIgNDAuMjkgMzMuNjIgNDQuNyAzOC4wMiA5NS41OSAzMy42MiIvPgogICAgICA8cGF0aCBjbGFzcz0iYWM4ZDg4ZjQtMDUxZS00YTE3LTkzZjktMGVjNTVlMGNiNzQ0IiBkPSJNNDUuNDEsMTUuOHYuNjdhNS41NCw1LjU0LDAsMCwwLTMuMjEtMWMtMy44NywwLTYuODEsMy41NC02LjgxLDcuODhzMi45NCw3Ljg3LDYuODEsNy44N2E1LjU0LDUuNTQsMCwwLDAsMy4yMS0xdi42N2gzLjQxdi0xNVpNNDIuMiwyNy41NmMtMS45MSwwLTMuMzEtMS44OC0zLjMxLTQuMjVzMS40LTQuMjYsMy4zMS00LjI2LDMuMjYsMS44OCwzLjI2LDQuMjZTNDQuMTIsMjcuNTYsNDIuMiwyNy41NloiLz4KICAgICAgPHBhdGggY2xhc3M9ImFjOGQ4OGY0LTA1MWUtNGExNy05M2Y5LTBlYzU1ZTBjYjc0NCIgZD0iTTcyLjY5LDE1Ljh2OC44MmEyLjgsMi44LDAsMSwxLTUuNTgsMFYxNS44aC0zLjR2OC44MmMwLDMuNjEsMi40Nyw2LjU2LDYuMDksNi41NmE1LjIxLDUuMjEsMCwwLDAsMi44OS0uOTN2LjU2SDc2LjF2LTE1WiIvPgogICAgICA8cGF0aCBjbGFzcz0iYWM4ZDg4ZjQtMDUxZS00YTE3LTkzZjktMGVjNTVlMGNiNzQ0IiBkPSJNMTA0LjQyLDMwLjgxVjIyQTIuOCwyLjgsMCwxLDEsMTEwLDIydjguODJoMy40MVYyMmMwLTMuNjEtMi40OC02LjU2LTYuMDktNi41NmE1LjIyLDUuMjIsMCwwLDAtMi45LjkzVjE1LjhIMTAxdjE1WiIvPgogICAgICA8cGF0aCBjbGFzcz0iYWM4ZDg4ZjQtMDUxZS00YTE3LTkzZjktMGVjNTVlMGNiNzQ0IiBkPSJNMjUuNTcsMzAuODFWMjVoMi41Mmw0LjM2LDUuODJoNC40NmwtNS4yNy03QTYuNDYsNi40NiwwLDAsMCwyNy45LDEyLjA2SDIyVjMwLjgxWm0wLTE1LjE5SDI3LjlhMi45MSwyLjkxLDAsMCwxLDAsNS44MUgyNS41N1oiLz4KICAgICAgPHBhdGggY2xhc3M9ImFjOGQ4OGY0LTA1MWUtNGExNy05M2Y5LTBlYzU1ZTBjYjc0NCIgZD0iTTg1LjI3LDI3LjI2YTIuMDYsMi4wNiwwLDAsMS0xLjEzLjM3LDEuNjgsMS42OCwwLDAsMS0xLjYxLTEuODRWMTkuMzZoMi45MVYxNS44SDgyLjUzVjEyLjA2SDc5LjEyVjE1LjhINzcuMzJ2My41NmgxLjgxdjYuNDhhNS4xMiw1LjEyLDAsMCwwLDUuMDYsNS4zNSw3LDcsMCwwLDAsMy4zMy0xWiIvPgogICAgICA8cG9seWdvbiBjbGFzcz0iYWM4ZDg4ZjQtMDUxZS00YTE3LTkzZjktMGVjNTVlMGNiNzQ0IiBwb2ludHM9IjU3LjI4IDIyLjg0IDYzLjEzIDE1LjggNTguMzUgMTUuOCA1NC4yNyAyMS4wMyA1NC4yNyAxMC44MiA1MC43NiAxMC44MiA1MC43NiAzMC44MSA1NC4yNyAzMC44MSA1NC4yNyAyNC42NCA1OS4yOSAzMC44MSA2NC4wNiAzMC44MSA1Ny4yOCAyMi44NCIvPgogICAgICA8cGF0aCBjbGFzcz0iYWM4ZDg4ZjQtMDUxZS00YTE3LTkzZjktMGVjNTVlMGNiNzQ0IiBkPSJNOTMuMTQsMTUuNDJjLTMuOTQsMC02Ljc3LDMuNDctNi43Nyw3Ljg5LDAsNC42NCwzLjU1LDcuODgsNy4xMSw3Ljg4YTcuMTIsNy4xMiwwLDAsMCw2LTMuMzZsLTMtMS43NGMtMi4zMiwzLjQzLTYuMiwxLjY5LTYuNjUtMS43NGg5LjgxQzEwMC41LDE5LDk3LDE1LjQyLDkzLjE0LDE1LjQyWm0zLDZIOTBBMy4wOSwzLjA5LDAsMCwxLDk2LjExLDIxLjM3WiIvPgogICAgPC9nPgogICAgPGc+CiAgICAgIDxwYXRoIGNsYXNzPSJhYzhkODhmNC0wNTFlLTRhMTctOTNmOS0wZWM1NWUwY2I3NDQiIGQ9Ik0xMTkuMDUsMjcuOGExNC4wNSwxNC4wNSwwLDAsMSw0LTUuNDhsMS4xOC0xYzItMS43NCwyLjU4LTIuNTEsMi41OC0zLjVhMi4wOSwyLjA5LDAsMCwwLTIuMzUtMiwzLjI1LDMuMjUsMCwwLDAtMy4xLDIuMTVsLTIuNTQtMS44OGE2LjEyLDYuMTIsMCwwLDEsNS42MS0zLjQ0YzMuNTMsMCw2LDIuMDgsNiw1LDAsMS43LS45MSwzLTMuODIsNS42NGwtMSwuOTJhMTEuNiwxMS42LDAsMCwwLTIuNzYsMy40Mmg3Ljc2djMuMTdIMTE5LjA1WiIvPgogICAgICA8cGF0aCBjbGFzcz0iYWM4ZDg4ZjQtMDUxZS00YTE3LTkzZjktMGVjNTVlMGNiNzQ0IiBkPSJNMTQyLjg3LDI3LjE0djMuNjdoLTMuNFYyNy4xNGgtNy41M1YyNGw2LjE4LTExaDQuNzVWMjRIMTQ1djMuMVpNMTM1LjY1LDI0aDMuODJWMTYuODJaIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K) no-repeat center center; background-size: 163px 45px; } @media screen and (max-width: 768px) { #shopList .inner ul li.rakuten a { background-size: 104px 29px } } #shopList .inner .remarks { font-size: 12px; bottom: 14px; position: absolute; width: 100%; text-align: center; color: #7f7f7f; } @media screen and (max-width: 768px) { #shopList .inner .remarks { font-size: 9px; bottom: 11px } } #shopList .inner .close { padding: 0; width: 62px; height: 32px; top: 75px; right: 136px; cursor: pointer; position: absolute; } @media screen and (max-width: 768px) { #shopList .inner .close { padding: 13px 9px; width: 27px; height: 17px; top: 3px; right: 14px; box-sizing: content-box } } #shopList .inner .close hr { width: 100%; height: 2px; border: none; border-radius: 1px; margin: 0; padding: 0; left: 0; transition: transform .2s; } @media screen and (max-width: 768px) { #shopList .inner .close hr { position: absolute; width: calc(100% - 20px); height: 2px; border: none; border-radius: 1px; margin: 0; padding: 0; left: 10px; transition: transform .2s } } #shopList .inner .close .bottom { display: none; } #shopList .inner .close .center{ height: 1px; top: 21px; background: #b19d8b; transform-origin: center center; transform: rotate(25.20112deg) scaleX(1.1); } #shopList .inner .close .top { top: 16px; background: #4c4c4c; transform-origin: center center; transform: rotate(-25.20112deg) scaleX(1.1); } @media screen and (max-width: 768px) { #shopList .inner .close .top { top: 13px; background: #4c4c4c; transform-origin: 100% 1px; transform: translateY(1.5px) rotate(-25.20112deg) scaleX(1.1) } } .products{ padding-top: 38px; padding-bottom: 78px; display: flex; justify-content: center; width: 100%; position: relative; } @media screen and (max-width: 768px) { .products{ padding-top: 35px; padding-bottom: 59px } } .products:before{ content: ""; height: 191px; position: absolute; width: 100%; top: 0; left: 0; background: #f8f5f2; } @media screen and (max-width: 768px) { .products:before{ height: 160px } } .products a { width: 772px; height: 75px; background: #fff url(data:image/svg+xml;base64,PHN2ZyBpZD0iZjJlY2E0OTItNDZiZC00MGM0LTg2NWQtYmNiMjk5MmE0YTdmIiBkYXRhLW5hbWU9InBhcnRzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzcgNzUiPjxkZWZzPjxzdHlsZT4uZTA1NjAwODYtYTIxZS00ZmNkLThlYTMtNTYxZmRiOTJkMDQ5e2ZpbGw6IzMzMzt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImUwNTYwMDg2LWEyMWUtNGZjZC04ZWEzLTU2MWZkYjkyZDA0OSIgZD0iTTEzLjUxLDM3LjA5YS44MS44MSwwLDAsMSwuMjguNjEuODUuODUsMCwwLDEtLjc5Ljg2Ljc0Ljc0LDAsMCwxLS40OS0uMiwxNS4yOSwxNS4yOSwwLDAsMC0xLjYzLTEuMTkuNy43LDAsMCwxLS4zOC0uNjIuODMuODMsMCwwLDEsLjgxLS44MS44OC44OCwwLDAsMSwuNC4xQTgsOCwwLDAsMSwxMy41MSwzNy4wOVptNi4zNi0xLjQ2YS43OS43OSwwLDAsMSwuOC43Ni45NC45NCwwLDAsMS0uMTIuNDRBMTQsMTQsMCwwLDEsMTIsNDMuNjhhMSwxLDAsMCwxLS4yOCwwLC43Ni43NiwwLDAsMS0uNzQtLjguODQuODQsMCwwLDEsLjYxLS44LDEyLjM5LDEyLjM5LDAsMCwwLDcuNTUtNi4wN0EuNzkuNzksMCwwLDEsMTkuODcsMzUuNjNabS00Ljc4LTEuNzFhLjgzLjgzLDAsMCwxLC4yOC42Mi44NC44NCwwLDAsMS0uNzguODQuNzQuNzQsMCwwLDEtLjQ5LS4yQTE2LjE2LDE2LjE2LDAsMCwwLDEyLjQ2LDM0YS42OS42OSwwLDAsMS0uMzctLjYyLjg1Ljg1LDAsMCwxLC44Mi0uODMuODkuODksMCwwLDEsLjQuMTFBOSw5LDAsMCwxLDE1LjA5LDMzLjkyWiIvPjxwYXRoIGNsYXNzPSJlMDU2MDA4Ni1hMjFlLTRmY2QtOGVhMy01NjFmZGI5MmQwNDkiIGQ9Ik0yNi40OSwzOC44YS43My43MywwLDAsMS0uNzkuNzIuNzQuNzQsMCwwLDEtLjgtLjcyVjMzLjI5YS43NS43NSwwLDAsMSwuOC0uNzQuNzQuNzQsMCwwLDEsLjc5Ljc0Wk0zMCwzMy4wNWEuNzQuNzQsMCwwLDEsLjgxLS43MS43Mi43MiwwLDAsMSwuNzguNzF2NC4xNmMwLDMuNTUtMS40Myw1LjY5LTQsN2ExLDEsMCwwLDEtLjQuMTEuODEuODEsMCwwLDEtLjI5LTEuNTVDMjkuMTMsNDEuNiwzMCwzOS45LDMwLDM3LjFaIi8+PHBhdGggY2xhc3M9ImUwNTYwMDg2LWEyMWUtNGZjZC04ZWEzLTU2MWZkYjkyZDA0OSIgZD0iTTQ2LjI0LDM3LjI3YS43My43MywwLDAsMSwuNzIuOC43NC43NCwwLDAsMS0uNzIuOEgzNi41M2EuNzQuNzQsMCwwLDEtLjcyLS44LjczLjczLDAsMCwxLC43Mi0uOFoiLz48cGF0aCBjbGFzcz0iZTA1NjAwODYtYTIxZS00ZmNkLThlYTMtNTYxZmRiOTJkMDQ5IiBkPSJNNTUuNDgsMzMuNjFjMSwwLDEuNTcuNDUsMS41NywxLjIxYTIuNTUsMi41NSwwLDAsMS0uMTUuNzUsMTMsMTMsMCwwLDEtMS44MiwzLjM1LDE5LjcyLDE5LjcyLDAsMCwxLDMuNTYsMy4zMiwxLDEsMCwwLDEsLjI2LjYzLjg3Ljg3LDAsMCwxLS44NS44NC44MS44MSwwLDAsMS0uNjQtLjMzLDIxLjI1LDIxLjI1LDAsMCwwLTMuMjgtMy4zLDE1LjQ3LDE1LjQ3LDAsMCwxLTQuMzMsMy40OC44Ny44NywwLDAsMS0uMzkuMS44MS44MSwwLDAsMS0uNzctLjgyLjc3Ljc3LDAsMCwxLC40NS0uNzEsMTMuMTgsMTMuMTgsMCwwLDAsNi4xNS02LjU3LjUyLjUyLDAsMCwwLDAtLjIyYzAtLjEzLS4xLS4xOS0uMzMtLjE5bC00Ljc2LjFhLjY5LjY5LDAsMCwxLS42Ny0uNzUuNzEuNzEsMCwwLDEsLjY1LS43OVptMS4yNS0xYS41NS41NSwwLDAsMSwuNTYtLjUyLjUzLjUzLDAsMCwxLC40LjIsOCw4LDAsMCwxLC45MywxLjMxLjc1Ljc1LDAsMCwxLC4wOS4zNC41Ni41NiwwLDAsMS0uNTQuNTYuNTIuNTIsMCwwLDEtLjQ2LS4zMSwxMCwxMCwwLDAsMC0uODgtMS4yN0EuNTQuNTQsMCwwLDEsNTYuNzMsMzIuNTlabTEuNDEtMWEuNTMuNTMsMCwwLDEsLjU0LS40OS42LjYsMCwwLDEsLjQ0LjJBNy4xMiw3LjEyLDAsMCwxLDYwLDMyLjU2YS43OS43OSwwLDAsMSwuMTIuMzguNTQuNTQsMCwwLDEtLjUzLjU1LjYuNiwwLDAsMS0uNDktLjMxLDE0LjU4LDE0LjU4LDAsMCwwLS44OC0xLjI2QS41MS41MSwwLDAsMSw1OC4xNCwzMS42MVoiLz48cGF0aCBjbGFzcz0iZTA1NjAwODYtYTIxZS00ZmNkLThlYTMtNTYxZmRiOTJkMDQ5IiBkPSJNNzIsMzcuMDdjLjQyLDAsLjYyLjM4LjYyLjc3cy0uMi43Ny0uNjIuNzdINjEuMjZhLjY5LjY5LDAsMCwxLS42Mi0uNzdjMC0uMzkuMjEtLjc3LjYyLS43N1oiLz48cGF0aCBjbGFzcz0iZTA1NjAwODYtYTIxZS00ZmNkLThlYTMtNTYxZmRiOTJkMDQ5IiBkPSJNODIuNTcsNDIuMzNWNDNjMCwuMjguMDcuMzQsMS4xNS4zNCwxLjM0LDAsMS41OC0uMTQsMS42Ni0uN2EuNi42LDAsMCwxLC42NC0uNTIuNjMuNjMsMCwwLDEsLjY2LjY5Yy0uMSwxLjEzLS42MiwxLjY0LTMsMS42NC0yLjE0LDAtMi40Mi0uMzEtMi40Mi0xLjJ2LS45M0g4MGEzLjU3LDMuNTcsMCwwLDEtMS4zMywxLjQyLDcuMjQsNy4yNCwwLDAsMS0zLjE5Ljk0LjU4LjU4LDAsMCwxLS42NC0uNi41Ni41NiwwLDAsMSwuNTMtLjU5LDQuNzIsNC43MiwwLDAsMCwzLjIxLTEuMTdoLS4zNWMtMS4wNiwwLTEuNDEtLjM3LTEuNDEtMS4yOVYzOC43OGMwLS44OS40LTEuMjYsMS40Ny0xLjI2aDQuODNjMS4wNiwwLDEuNDYuMzcsMS40NiwxLjI2VjQxYzAsMS4wNi0uNTUsMS4zLTEuNDYsMS4zMlptLTIuMy02LjIxYS40OS40OSwwLDAsMSwwLDFINzYuNDVjLTEuMSwwLTEuNDUtLjQtMS40NS0xLjE4VjMzLjA3YzAtLjguMzUtMS4xOSwxLjQ1LTEuMTloNGEuNDcuNDcsMCwwLDEsMCwuOTNINzguNjZ2LjU0aC42MWMuODcsMCwxLjExLjI5LDEuMTEuODR2LjZjMCwuNTItLjI0LjgtMS4xMS44aC0uNjF2LjUzWm0tMi44My0yLjc3di0uNTRoLS44NmMtLjI1LDAtLjMuMDctLjMuMjZ2LjI4Wk03OSwzNC43NmMuMTgsMCwuMjMsMCwuMjMtLjE4di0uMjRjMC0uMTQsMC0uMTctLjIzLS4xN0g3Ni4yOHYuNTlabS0xLjUyLjgzSDc2LjI4di4yOWMwLC4xNywwLC4yNC4zLjI0aC44NlptNS44MiwzLjEyYzAtLjE5LS4wNS0uMjYtLjM3LS4yNkg3OC41MWMtLjMyLDAtLjM3LjA3LS4zNy4yNnYuMmg1LjEyWm0tNS4xMiwxLjQ2aDUuMTJ2LS40OUg3OC4xNFptNC43NSwxLjI2Yy4zMiwwLC4zNy0uMDcuMzctLjI3di0uMjJINzguMTR2LjIyYzAsLjIsMCwuMjcuMzcuMjdabTMuMzctOC4yNGEuNTQuNTQsMCwwLDEsLjQ5LjZjMCwuMzEtLjE2LjYxLS40OS42MUg4Mi42MWMtLjE5LjMxLS4zOC42MS0uNTguODhhLjY4LjY4LDAsMCwxLTEuMjQtLjM4Ljc1Ljc1LDAsMCwxLC4xNy0uNDZBOS4yNyw5LjI3LDAsMCwwLDgyLjI1LDMyYS42Ny42NywwLDAsMSwuNjUtLjQ1LjY0LjY0LDAsMCwxLC42OC42My43OS43OSwwLDAsMSwwLC4zYy0uMDguMjItLjE5LjQ0LS4yOS42OFptLTMuNiwzLjMyYy0uMzIsMC0uNDctLjMxLS40Ny0uNnMuMTUtLjYuNDctLjZoMi44OGMuMzIsMCwuNDguMjkuNDguNmEuNTQuNTQsMCwwLDEtLjQ4LjZaIi8+PHBhdGggY2xhc3M9ImUwNTYwMDg2LWEyMWUtNGZjZC04ZWEzLTU2MWZkYjkyZDA0OSIgZD0iTTkyLjYyLDM2LjcxYTMsMywwLDAsMSwxLjE0LS4yNCwxLjY5LDEuNjksMCwwLDEsMS44NiwxLjMzQTM1LDM1LDAsMCwxLDk5LDM2LjU0YS44OC44OCwwLDAsMSwuMjcsMCwuNzEuNzEsMCwwLDEsLjY5Ljc1LjcyLjcyLDAsMCwxLS41My43MiwzNC44MywzNC44MywwLDAsMC0zLjQ2LDEuMjZjLjA2LjUyLjA5LDEuMTMuMTIsMS44NmEuNzIuNzIsMCwwLDEtLjc2LjczLjY2LjY2LDAsMCwxLS43MS0uNjRjMC0uNTMsMC0xLS4wNi0xLjM2LTEuMzkuNzQtMS43MSwxLjM3LTEuNzEsMS44OXMuNDguODcsMiwuODdhMTUuMiwxNS4yLDAsMCwwLDIuNTgtLjI0LjczLjczLDAsMCwxLC44Ny43Ni43NS43NSwwLDAsMS0uNjcuNzUsMTQuNjIsMTQuNjIsMCwwLDEtMi43Mi4yM2MtMi41MiwwLTMuNTgtLjg5LTMuNTgtMi4yNiwwLTEuMTIuNjItMi4yLDMtMy40NGEuODEuODEsMCwwLDAtLjkzLS42Myw1LjEyLDUuMTIsMCwwLDAtMi43MywxLjQ0LjguOCwwLDAsMS0uNDguMTguNzUuNzUsMCwwLDEtLjcyLS43NC44Ni44NiwwLDAsMSwuMzEtLjYyQTEyLjksMTIuOSwwLDAsMCw5MiwzNS4yOGMtLjUyLDAtMSwuMDYtMS40NC4wN2EuNzIuNzIsMCwxLDEsMC0xLjQ0Yy42MywwLDEuMzcsMCwyLjE0LS4xLjIzLS41Ni40My0xLjExLjU5LTEuNjNhLjczLjczLDAsMCwxLDEuNDEuMTQuNTEuNTEsMCwwLDEsMCwuMjEsMTAuMjcsMTAuMjcsMCwwLDEtLjQsMS4xMWMuNy0uMDcsMS4zNi0uMTcsMS45My0uMjhBLjY0LjY0LDAsMCwxLDk3LDM0YS42OS42OSwwLDAsMS0uNTguN2MtLjg0LjE1LTEuODQuMzEtMi44Mi40MS0uMzQuNTctLjY3LDEuMS0xLDEuNTVaIi8+PHBhdGggY2xhc3M9ImUwNTYwMDg2LWEyMWUtNGZjZC04ZWEzLTU2MWZkYjkyZDA0OSIgZD0iTTEwNy4wOSwzMi41MWExLjg0LDEuODQsMCwwLDEsLjQsMCwxLjE2LDEuMTYsMCwwLDEsMS4yOSwxLjIzLDIuMTEsMi4xMSwwLDAsMSwwLC4zNSwzMC41MywzMC41MywwLDAsMS0uNzEsMywxNS4wNSwxNS4wNSwwLDAsMSwyLjYuNjcsMTUuMTgsMTUuMTgsMCwwLDAsLjI1LTIuMTMuNjguNjgsMCwwLDEsLjc0LS42NS43My43MywwLDAsMSwuNzguNzgsMTcuOCwxNy44LDAsMCwxLS4zNiwyLjYyLDE2LjExLDE2LjExLDAsMCwxLDIsMS4xMy44My44MywwLDAsMSwuMzcuNy44LjgsMCwwLDEtLjc0Ljg0LjgxLjgxLDAsMCwxLS40Ny0uMTUsMTguMDgsMTguMDgsMCwwLDAtMS41Ny0xLDkuNzUsOS43NSwwLDAsMS0yLjEzLDMuNTguOS45LDAsMCwxLS42NS4zMi43OC43OCwwLDAsMS0uNzQtLjc5Ljc3Ljc3LDAsMCwxLC4yMi0uNTQsOC43MSw4LjcxLDAsMCwwLDEuOTMtMy4yNCwxMS40NSwxMS40NSwwLDAsMC0yLjYyLS43OCwxOC43MywxOC43MywwLDAsMS0uODIsMmMtLjY4LDEuNDItMS4zNywxLjg2LTIuMzMsMS44NnMtMS45Mi0uNzUtMS45Mi0yLjJjMC0xLjc1LDEuNTEtMy4xOSwzLjczLTMuMTloLjNhMjIuNjgsMjIuNjgsMCwwLDAsLjYzLTIuNzJjMC0uMjIsMC0uMjYtLjI1LS4yMmwtMS44Ny4zMmEuNjkuNjksMCwwLDEtLjgyLS43NC43Mi43MiwwLDAsMSwuNjItLjc0Wk0xMDUuNDMsNDBhMTUuNSwxNS41LDAsMCwwLC42OC0xLjYyYy0xLjM5LDAtMi4xMi44NC0yLjEyLDEuNzIsMCwuNS4yMi43My40OC43M1MxMDUuMDcsNDAuNywxMDUuNDMsNDBaIi8+PHBhdGggY2xhc3M9ImUwNTYwMDg2LWEyMWUtNGZjZC04ZWEzLTU2MWZkYjkyZDA0OSIgZD0iTTEyMS41MiwzNy4xYTQuMzQsNC4zNCwwLDAsMSwxLjY5LS4zNWMyLjA3LDAsMy40MywxLjE5LDMuNDMsMy4xNCwwLDIuNDUtMS42OCw0LTQuMjcsNC0xLjgyLDAtMy0xLTMtMi4yM2ExLjY5LDEuNjksMCwwLDEsMS44NS0xLjc5LDIuNjksMi42OSwwLDAsMSwyLjU1LDIuMywyLjQyLDIuNDIsMCwwLDAsMS4yOS0yLjI5LDEuODIsMS44MiwwLDAsMC0yLTEuNzksNi42LDYuNiwwLDAsMC00LjI4LDEuODIuOTMuOTMsMCwwLDEtLjU2LjIyLjc3Ljc3LDAsMCwxLS43NS0uNzcuODUuODUsMCwwLDEsLjMzLS42NUEzMC42NiwzMC42NiwwLDAsMCwxMjIuMywzNGMtLjc0LjEzLTEuNjUuMjMtMi43LjMxYS43LjcsMCwwLDEtLjcyLS43Ni42OS42OSwwLDAsMSwuNjUtLjczYzEuMDgtLjA3LDIuNDktLjIzLDMuNzctLjQ0YS44OS44OSwwLDAsMSwxLjEuODYsMS4yLDEuMiwwLDAsMS0uMjMuNjYsMzAsMzAsMCwwLDEtMi42OCwzLjE3Wm0tLjMxLDRhLjUuNSwwLDAsMC0uNDguNTRjMCwuNDYuNTEuODMsMS41Ni44M2guMTFDMTIyLjE3LDQxLjYxLDEyMS43Nyw0MS4xNCwxMjEuMjEsNDEuMTRaIi8+PC9zdmc+) no-repeat; z-index: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .05)); border-radius: 3px; } @media screen and (max-width: 768px) { .products a { width: calc(100% - 60px); height: 56px; background: #fff url(data:image/svg+xml;base64,PHN2ZyBpZD0iZjJlY2E0OTItNDZiZC00MGM0LTg2NWQtYmNiMjk5MmE0YTdmIiBkYXRhLW5hbWU9InBhcnRzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzcgNzUiPjxkZWZzPjxzdHlsZT4uZTA1NjAwODYtYTIxZS00ZmNkLThlYTMtNTYxZmRiOTJkMDQ5e2ZpbGw6IzMzMzt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImUwNTYwMDg2LWEyMWUtNGZjZC04ZWEzLTU2MWZkYjkyZDA0OSIgZD0iTTEzLjUxLDM3LjA5YS44MS44MSwwLDAsMSwuMjguNjEuODUuODUsMCwwLDEtLjc5Ljg2Ljc0Ljc0LDAsMCwxLS40OS0uMiwxNS4yOSwxNS4yOSwwLDAsMC0xLjYzLTEuMTkuNy43LDAsMCwxLS4zOC0uNjIuODMuODMsMCwwLDEsLjgxLS44MS44OC44OCwwLDAsMSwuNC4xQTgsOCwwLDAsMSwxMy41MSwzNy4wOVptNi4zNi0xLjQ2YS43OS43OSwwLDAsMSwuOC43Ni45NC45NCwwLDAsMS0uMTIuNDRBMTQsMTQsMCwwLDEsMTIsNDMuNjhhMSwxLDAsMCwxLS4yOCwwLC43Ni43NiwwLDAsMS0uNzQtLjguODQuODQsMCwwLDEsLjYxLS44LDEyLjM5LDEyLjM5LDAsMCwwLDcuNTUtNi4wN0EuNzkuNzksMCwwLDEsMTkuODcsMzUuNjNabS00Ljc4LTEuNzFhLjgzLjgzLDAsMCwxLC4yOC42Mi44NC44NCwwLDAsMS0uNzguODQuNzQuNzQsMCwwLDEtLjQ5LS4yQTE2LjE2LDE2LjE2LDAsMCwwLDEyLjQ2LDM0YS42OS42OSwwLDAsMS0uMzctLjYyLjg1Ljg1LDAsMCwxLC44Mi0uODMuODkuODksMCwwLDEsLjQuMTFBOSw5LDAsMCwxLDE1LjA5LDMzLjkyWiIvPjxwYXRoIGNsYXNzPSJlMDU2MDA4Ni1hMjFlLTRmY2QtOGVhMy01NjFmZGI5MmQwNDkiIGQ9Ik0yNi40OSwzOC44YS43My43MywwLDAsMS0uNzkuNzIuNzQuNzQsMCwwLDEtLjgtLjcyVjMzLjI5YS43NS43NSwwLDAsMSwuOC0uNzQuNzQuNzQsMCwwLDEsLjc5Ljc0Wk0zMCwzMy4wNWEuNzQuNzQsMCwwLDEsLjgxLS43MS43Mi43MiwwLDAsMSwuNzguNzF2NC4xNmMwLDMuNTUtMS40Myw1LjY5LTQsN2ExLDEsMCwwLDEtLjQuMTEuODEuODEsMCwwLDEtLjI5LTEuNTVDMjkuMTMsNDEuNiwzMCwzOS45LDMwLDM3LjFaIi8+PHBhdGggY2xhc3M9ImUwNTYwMDg2LWEyMWUtNGZjZC04ZWEzLTU2MWZkYjkyZDA0OSIgZD0iTTQ2LjI0LDM3LjI3YS43My43MywwLDAsMSwuNzIuOC43NC43NCwwLDAsMS0uNzIuOEgzNi41M2EuNzQuNzQsMCwwLDEtLjcyLS44LjczLjczLDAsMCwxLC43Mi0uOFoiLz48cGF0aCBjbGFzcz0iZTA1NjAwODYtYTIxZS00ZmNkLThlYTMtNTYxZmRiOTJkMDQ5IiBkPSJNNTUuNDgsMzMuNjFjMSwwLDEuNTcuNDUsMS41NywxLjIxYTIuNTUsMi41NSwwLDAsMS0uMTUuNzUsMTMsMTMsMCwwLDEtMS44MiwzLjM1LDE5LjcyLDE5LjcyLDAsMCwxLDMuNTYsMy4zMiwxLDEsMCwwLDEsLjI2LjYzLjg3Ljg3LDAsMCwxLS44NS44NC44MS44MSwwLDAsMS0uNjQtLjMzLDIxLjI1LDIxLjI1LDAsMCwwLTMuMjgtMy4zLDE1LjQ3LDE1LjQ3LDAsMCwxLTQuMzMsMy40OC44Ny44NywwLDAsMS0uMzkuMS44MS44MSwwLDAsMS0uNzctLjgyLjc3Ljc3LDAsMCwxLC40NS0uNzEsMTMuMTgsMTMuMTgsMCwwLDAsNi4xNS02LjU3LjUyLjUyLDAsMCwwLDAtLjIyYzAtLjEzLS4xLS4xOS0uMzMtLjE5bC00Ljc2LjFhLjY5LjY5LDAsMCwxLS42Ny0uNzUuNzEuNzEsMCwwLDEsLjY1LS43OVptMS4yNS0xYS41NS41NSwwLDAsMSwuNTYtLjUyLjUzLjUzLDAsMCwxLC40LjIsOCw4LDAsMCwxLC45MywxLjMxLjc1Ljc1LDAsMCwxLC4wOS4zNC41Ni41NiwwLDAsMS0uNTQuNTYuNTIuNTIsMCwwLDEtLjQ2LS4zMSwxMCwxMCwwLDAsMC0uODgtMS4yN0EuNTQuNTQsMCwwLDEsNTYuNzMsMzIuNTlabTEuNDEtMWEuNTMuNTMsMCwwLDEsLjU0LS40OS42LjYsMCwwLDEsLjQ0LjJBNy4xMiw3LjEyLDAsMCwxLDYwLDMyLjU2YS43OS43OSwwLDAsMSwuMTIuMzguNTQuNTQsMCwwLDEtLjUzLjU1LjYuNiwwLDAsMS0uNDktLjMxLDE0LjU4LDE0LjU4LDAsMCwwLS44OC0xLjI2QS41MS41MSwwLDAsMSw1OC4xNCwzMS42MVoiLz48cGF0aCBjbGFzcz0iZTA1NjAwODYtYTIxZS00ZmNkLThlYTMtNTYxZmRiOTJkMDQ5IiBkPSJNNzIsMzcuMDdjLjQyLDAsLjYyLjM4LjYyLjc3cy0uMi43Ny0uNjIuNzdINjEuMjZhLjY5LjY5LDAsMCwxLS42Mi0uNzdjMC0uMzkuMjEtLjc3LjYyLS43N1oiLz48cGF0aCBjbGFzcz0iZTA1NjAwODYtYTIxZS00ZmNkLThlYTMtNTYxZmRiOTJkMDQ5IiBkPSJNODIuNTcsNDIuMzNWNDNjMCwuMjguMDcuMzQsMS4xNS4zNCwxLjM0LDAsMS41OC0uMTQsMS42Ni0uN2EuNi42LDAsMCwxLC42NC0uNTIuNjMuNjMsMCwwLDEsLjY2LjY5Yy0uMSwxLjEzLS42MiwxLjY0LTMsMS42NC0yLjE0LDAtMi40Mi0uMzEtMi40Mi0xLjJ2LS45M0g4MGEzLjU3LDMuNTcsMCwwLDEtMS4zMywxLjQyLDcuMjQsNy4yNCwwLDAsMS0zLjE5Ljk0LjU4LjU4LDAsMCwxLS42NC0uNi41Ni41NiwwLDAsMSwuNTMtLjU5LDQuNzIsNC43MiwwLDAsMCwzLjIxLTEuMTdoLS4zNWMtMS4wNiwwLTEuNDEtLjM3LTEuNDEtMS4yOVYzOC43OGMwLS44OS40LTEuMjYsMS40Ny0xLjI2aDQuODNjMS4wNiwwLDEuNDYuMzcsMS40NiwxLjI2VjQxYzAsMS4wNi0uNTUsMS4zLTEuNDYsMS4zMlptLTIuMy02LjIxYS40OS40OSwwLDAsMSwwLDFINzYuNDVjLTEuMSwwLTEuNDUtLjQtMS40NS0xLjE4VjMzLjA3YzAtLjguMzUtMS4xOSwxLjQ1LTEuMTloNGEuNDcuNDcsMCwwLDEsMCwuOTNINzguNjZ2LjU0aC42MWMuODcsMCwxLjExLjI5LDEuMTEuODR2LjZjMCwuNTItLjI0LjgtMS4xMS44aC0uNjF2LjUzWm0tMi44My0yLjc3di0uNTRoLS44NmMtLjI1LDAtLjMuMDctLjMuMjZ2LjI4Wk03OSwzNC43NmMuMTgsMCwuMjMsMCwuMjMtLjE4di0uMjRjMC0uMTQsMC0uMTctLjIzLS4xN0g3Ni4yOHYuNTlabS0xLjUyLjgzSDc2LjI4di4yOWMwLC4xNywwLC4yNC4zLjI0aC44NlptNS44MiwzLjEyYzAtLjE5LS4wNS0uMjYtLjM3LS4yNkg3OC41MWMtLjMyLDAtLjM3LjA3LS4zNy4yNnYuMmg1LjEyWm0tNS4xMiwxLjQ2aDUuMTJ2LS40OUg3OC4xNFptNC43NSwxLjI2Yy4zMiwwLC4zNy0uMDcuMzctLjI3di0uMjJINzguMTR2LjIyYzAsLjIsMCwuMjcuMzcuMjdabTMuMzctOC4yNGEuNTQuNTQsMCwwLDEsLjQ5LjZjMCwuMzEtLjE2LjYxLS40OS42MUg4Mi42MWMtLjE5LjMxLS4zOC42MS0uNTguODhhLjY4LjY4LDAsMCwxLTEuMjQtLjM4Ljc1Ljc1LDAsMCwxLC4xNy0uNDZBOS4yNyw5LjI3LDAsMCwwLDgyLjI1LDMyYS42Ny42NywwLDAsMSwuNjUtLjQ1LjY0LjY0LDAsMCwxLC42OC42My43OS43OSwwLDAsMSwwLC4zYy0uMDguMjItLjE5LjQ0LS4yOS42OFptLTMuNiwzLjMyYy0uMzIsMC0uNDctLjMxLS40Ny0uNnMuMTUtLjYuNDctLjZoMi44OGMuMzIsMCwuNDguMjkuNDguNmEuNTQuNTQsMCwwLDEtLjQ4LjZaIi8+PHBhdGggY2xhc3M9ImUwNTYwMDg2LWEyMWUtNGZjZC04ZWEzLTU2MWZkYjkyZDA0OSIgZD0iTTkyLjYyLDM2LjcxYTMsMywwLDAsMSwxLjE0LS4yNCwxLjY5LDEuNjksMCwwLDEsMS44NiwxLjMzQTM1LDM1LDAsMCwxLDk5LDM2LjU0YS44OC44OCwwLDAsMSwuMjcsMCwuNzEuNzEsMCwwLDEsLjY5Ljc1LjcyLjcyLDAsMCwxLS41My43MiwzNC44MywzNC44MywwLDAsMC0zLjQ2LDEuMjZjLjA2LjUyLjA5LDEuMTMuMTIsMS44NmEuNzIuNzIsMCwwLDEtLjc2LjczLjY2LjY2LDAsMCwxLS43MS0uNjRjMC0uNTMsMC0xLS4wNi0xLjM2LTEuMzkuNzQtMS43MSwxLjM3LTEuNzEsMS44OXMuNDguODcsMiwuODdhMTUuMiwxNS4yLDAsMCwwLDIuNTgtLjI0LjczLjczLDAsMCwxLC44Ny43Ni43NS43NSwwLDAsMS0uNjcuNzUsMTQuNjIsMTQuNjIsMCwwLDEtMi43Mi4yM2MtMi41MiwwLTMuNTgtLjg5LTMuNTgtMi4yNiwwLTEuMTIuNjItMi4yLDMtMy40NGEuODEuODEsMCwwLDAtLjkzLS42Myw1LjEyLDUuMTIsMCwwLDAtMi43MywxLjQ0LjguOCwwLDAsMS0uNDguMTguNzUuNzUsMCwwLDEtLjcyLS43NC44Ni44NiwwLDAsMSwuMzEtLjYyQTEyLjksMTIuOSwwLDAsMCw5MiwzNS4yOGMtLjUyLDAtMSwuMDYtMS40NC4wN2EuNzIuNzIsMCwxLDEsMC0xLjQ0Yy42MywwLDEuMzcsMCwyLjE0LS4xLjIzLS41Ni40My0xLjExLjU5LTEuNjNhLjczLjczLDAsMCwxLDEuNDEuMTQuNTEuNTEsMCwwLDEsMCwuMjEsMTAuMjcsMTAuMjcsMCwwLDEtLjQsMS4xMWMuNy0uMDcsMS4zNi0uMTcsMS45My0uMjhBLjY0LjY0LDAsMCwxLDk3LDM0YS42OS42OSwwLDAsMS0uNTguN2MtLjg0LjE1LTEuODQuMzEtMi44Mi40MS0uMzQuNTctLjY3LDEuMS0xLDEuNTVaIi8+PHBhdGggY2xhc3M9ImUwNTYwMDg2LWEyMWUtNGZjZC04ZWEzLTU2MWZkYjkyZDA0OSIgZD0iTTEwNy4wOSwzMi41MWExLjg0LDEuODQsMCwwLDEsLjQsMCwxLjE2LDEuMTYsMCwwLDEsMS4yOSwxLjIzLDIuMTEsMi4xMSwwLDAsMSwwLC4zNSwzMC41MywzMC41MywwLDAsMS0uNzEsMywxNS4wNSwxNS4wNSwwLDAsMSwyLjYuNjcsMTUuMTgsMTUuMTgsMCwwLDAsLjI1LTIuMTMuNjguNjgsMCwwLDEsLjc0LS42NS43My43MywwLDAsMSwuNzguNzgsMTcuOCwxNy44LDAsMCwxLS4zNiwyLjYyLDE2LjExLDE2LjExLDAsMCwxLDIsMS4xMy44My44MywwLDAsMSwuMzcuNy44LjgsMCwwLDEtLjc0Ljg0LjgxLjgxLDAsMCwxLS40Ny0uMTUsMTguMDgsMTguMDgsMCwwLDAtMS41Ny0xLDkuNzUsOS43NSwwLDAsMS0yLjEzLDMuNTguOS45LDAsMCwxLS42NS4zMi43OC43OCwwLDAsMS0uNzQtLjc5Ljc3Ljc3LDAsMCwxLC4yMi0uNTQsOC43MSw4LjcxLDAsMCwwLDEuOTMtMy4yNCwxMS40NSwxMS40NSwwLDAsMC0yLjYyLS43OCwxOC43MywxOC43MywwLDAsMS0uODIsMmMtLjY4LDEuNDItMS4zNywxLjg2LTIuMzMsMS44NnMtMS45Mi0uNzUtMS45Mi0yLjJjMC0xLjc1LDEuNTEtMy4xOSwzLjczLTMuMTloLjNhMjIuNjgsMjIuNjgsMCwwLDAsLjYzLTIuNzJjMC0uMjIsMC0uMjYtLjI1LS4yMmwtMS44Ny4zMmEuNjkuNjksMCwwLDEtLjgyLS43NC43Mi43MiwwLDAsMSwuNjItLjc0Wk0xMDUuNDMsNDBhMTUuNSwxNS41LDAsMCwwLC42OC0xLjYyYy0xLjM5LDAtMi4xMi44NC0yLjEyLDEuNzIsMCwuNS4yMi43My40OC43M1MxMDUuMDcsNDAuNywxMDUuNDMsNDBaIi8+PHBhdGggY2xhc3M9ImUwNTYwMDg2LWEyMWUtNGZjZC04ZWEzLTU2MWZkYjkyZDA0OSIgZD0iTTEyMS41MiwzNy4xYTQuMzQsNC4zNCwwLDAsMSwxLjY5LS4zNWMyLjA3LDAsMy40MywxLjE5LDMuNDMsMy4xNCwwLDIuNDUtMS42OCw0LTQuMjcsNC0xLjgyLDAtMy0xLTMtMi4yM2ExLjY5LDEuNjksMCwwLDEsMS44NS0xLjc5LDIuNjksMi42OSwwLDAsMSwyLjU1LDIuMywyLjQyLDIuNDIsMCwwLDAsMS4yOS0yLjI5LDEuODIsMS44MiwwLDAsMC0yLTEuNzksNi42LDYuNiwwLDAsMC00LjI4LDEuODIuOTMuOTMsMCwwLDEtLjU2LjIyLjc3Ljc3LDAsMCwxLS43NS0uNzcuODUuODUsMCwwLDEsLjMzLS42NUEzMC42NiwzMC42NiwwLDAsMCwxMjIuMywzNGMtLjc0LjEzLTEuNjUuMjMtMi43LjMxYS43LjcsMCwwLDEtLjcyLS43Ni42OS42OSwwLDAsMSwuNjUtLjczYzEuMDgtLjA3LDIuNDktLjIzLDMuNzctLjQ0YS44OS44OSwwLDAsMSwxLjEuODYsMS4yLDEuMiwwLDAsMS0uMjMuNjYsMzAsMzAsMCwwLDEtMi42OCwzLjE3Wm0tLjMxLDRhLjUuNSwwLDAsMC0uNDguNTRjMCwuNDYuNTEuODMsMS41Ni44M2guMTFDMTIyLjE3LDQxLjYxLDEyMS43Nyw0MS4xNCwxMjEuMjEsNDEuMTRaIi8+PC9zdmc+) no-repeat } } .products a svg { width: 100%; height: 75px; } @media screen and (max-width: 768px) { .products a svg { width: 100%; height: 56px } } .latte-about { position: relative; } .latte-about:after{ content: ""; padding: 100px 0 0; box-sizing: content-box; } .latte-about:after { position: absolute; } .latte-about:after { left: 0px; } .latte-about:after { bottom: -16%; } .latte-about:after { height: 100%; } .latte-about:after { width: 80%; } .latte-about:after { border-top-right-radius: 0.5rem; } .latte-about:after { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } @media (max-width: 767px) { .latte-about:after { width: 91.666667%; } } .latte-main{ height: 100vh; height: calc(var(--vh, 1vh) * 96); } @media screen and (max-width: 768px) { .latte-main{ height: calc(var(--vh, 1vh) * 85.4) } } .latte_series{ background: url("../images/bg_series.svg") center top; } .latte_series ul li:before{ content: ""; } .latte_series ul li:before { position: absolute; } .latte_series ul li:before { top: 25%; } .latte_series ul li:before { width: 100%; } .latte_series ul li:before { border-radius: 9999px; } .latte_series ul li:before { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .latte_series ul li:before { padding-top: 100%; } .latte_can_do__frame img{ filter: drop-shadow(0 0 40px rgba(226,201,168,.64)); } @media screen and (max-width: 768px) { .latte_can_do__frame img{ filter: drop-shadow(0 0 20px rgba(226,201,168,.64)) } } .latte-toggle-content{ display: none; } .latte-toggle img { transform: translateY(-50%) rotate(0); transition: transform 0.4s cubic-bezier(0, 0.6, 0.4, 1); } .active.latte-toggle img{ transform: translateY(-50%) rotate(180deg); } /* footer -------------------------------------------------------------------------- */ footer.foot { position: relative; z-index: 1; background: #f8f5f2; } footer.foot ul.sns { display: flex; width: 100%; padding-left: 0; padding-right: 0; padding-bottom: 5px; height: 145px; justify-content: center; background: #fff; align-items: flex-end; } footer.foot ul.menu { display: flex; flex-wrap: wrap; width: 100%; padding-top: 8px; padding-bottom: 8px; justify-content: center; align-items: center; font-size: 12px; } @media screen and (max-width: 768px) { footer.foot ul.menu { flex-wrap: wrap; justify-content: flex-start; height: auto; padding: 10px 20px 8px } } footer.foot ul.menu li { height: 32px; margin-bottom: 0; margin-right: 9px; display: flex; align-items: center; } @media screen and (max-width: 768px) { footer.foot ul.menu li { height: 24px; margin-bottom: 2px; margin-right: 21px; position: relative } } footer.foot ul.menu li:after { content: ""; position: absolute; right: -5px; height: 6px; margin-top: -3px; border-radius: 0.5px; top: 50%; background: #b29e8c; width: 1px; } @media screen and (max-width: 768px) { footer.foot ul.menu li:after { right: -10px; width: 1px; height: 6px; margin-top: -3px; border-radius: 0.5px } } footer.foot ul.menu li a{ display: flex; align-items: center; color: #222; letter-spacing: 0; font-weight: 400 !important; } footer.foot ul.menu li a:after { content: ""; display: block; top: 5px; width: 22px; height: 22px; margin: 0 0 0 10px ; background: url(data:image/svg+xml;base64,PHN2ZyBpZD0icGFydHMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIyIDIyIj48dGl0bGU+Zm9vdEFycm93PC90aXRsZT48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSIxMSIgc3R5bGU9ImZpbGw6I2ZmZiIvPjxyZWN0IHg9IjEwLjgyOSIgeT0iOS45NTYiIHdpZHRoPSIwLjc4NiIgaGVpZ2h0PSI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjE3MyAyOS42MjYpIHJvdGF0ZSgtMTM1KSIvPjxyZWN0IHg9IjEwLjgyOSIgeT0iNi41NjQiIHdpZHRoPSIwLjc4NiIgaGVpZ2h0PSI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjI5OSAxMC42NjMpIHJvdGF0ZSgtNDUpIi8+PC9zdmc+); } footer.foot ul.menu li.about a { width: 98px; } footer.foot ul.menu li.linkhair a { width: 128px; } footer.foot ul.menu li.anoneofuro a { width: 128px; } @media screen and (max-width: 768px) { footer.foot ul.menu li.media:after { display: none; } } footer.foot ul.menu li.media a { width: 95px; } @media screen and (max-width: 768px) { footer.foot ul.menu li.media a { width: 89px } } footer.foot ul.menu li.product a { width: 117px; } @media screen and (max-width: 768px) { footer.foot ul.menu li.product a { width: 100px } } footer.foot ul.menu li.ladyphoto a { width: 173px; } @media screen and (max-width: 768px) { footer.foot ul.menu li.hoppe { margin-right: 0 } footer.foot ul.menu li.hoppe:after { display: none; } } footer.foot ul.menu li.hoppe a { width: 150px; } @media screen and (max-width: 768px) { footer.foot ul.menu li.gyaku { margin-right: 0 } footer.foot ul.menu li.gyaku:after { display: none; } } footer.foot ul.menu li.gyaku a { width: 150px; } footer.foot ul.menu li.faq a { width: 127px; } footer.foot ul.sns li a { height: 50px; } footer.foot ul.sns li a { width: 50px; height: 51px; } .js-step-up,.js-up-top{ visibility: hidden; } .latte-main-pc .latte-main-pc-image{ visibility: hidden; width:45% } .latte-main-pc .latte-main-pc-image { position: absolute; } .latte-main-pc .latte-main-pc-image { left: 50%; } .latte-main-pc .latte-main-pc-image { top: 50%; } @media screen and (max-width: 768px) { .latte-main-pc .latte-main-pc-image{ width:70% } } .latte-main-pc-01{ opacity: 0; } .latte-main-pc-02{ opacity: 0; } .latte-main-pc-03{ opacity: 0; } .latte-main-pc-04{ opacity: 0; } .latte-main-pc-04-image:before{ content: ""; padding-top: 140%; display: block; transition: padding-top .4s cubic-bezier(0,.6,.4,1); } .latte-main-pc .latte-main-pc-04.active .latte-main-pc-04-image:before{ content: ""; padding-top: 110%; display: block; } .latte-main-title-pc-title,.latte-main-title-pc-logo,.latte-main-title-pc-text,.latte-main-bg,.latte-main_gyu{ opacity: 0; } .latte-main-sub-pc .latte-main-sub-pc-image{ opacity: 0; } .latte-main-sub-pc .latte-main-sub-pc-01{ width: 30%; left: 45%; bottom: -18%; } @media screen and (max-width: 768px) { .latte-main-sub-pc .latte-main-sub-pc-01{ width: 40%; left: -5%; bottom: -7% } } .latte-main-sub-pc .latte-main-sub-pc-02{ width: 30%; bottom: -10%; right: -10%; } .latte-main-sub-pc .latte-main-sub-pc-03{ width: 30%; right: -6%; top: -11%; } .latte-scroll{ writing-mode: vertical-rl; margin: 0 0 100px; } @media screen and (max-width: 768px) { .latte-scroll{ writing-mode: horizontal-tb; margin: 0 0 30px } } .latte-scroll::after{ content: ""; height: 0; width:1px ; position: absolute; background: #626262; left: 50%; top: 43px; animation-duration: 2s; animation-iteration-count: infinite; animation-name: scrollAnimation; animation-timing-function: ease-in-out; z-index: 3; } @media screen and (max-width: 768px) { .latte-scroll::after{ top: 23px; animation-name: scrollAnimation_sp } } .latte-scroll::before{ content: ""; height: 0; width:3px ; position: absolute; background: #F7F3EF; left: calc(50% - 1.5px); top: 43px; animation-duration: 2s; animation-iteration-count: infinite; animation-name: scrollAnimation2; animation-timing-function: ease-in-out; z-index: 4; } @media screen and (max-width: 768px) { .latte-scroll::before{ top: 23px; animation-name: scrollAnimation2_sp } } @keyframes scrollAnimation { 0% { height:0; } 60% { height:100px; } 100% { height:100px; } } @keyframes scrollAnimation_sp { 0% { height:0; } 60% { height:50px; } 100% { height:50px; } } @keyframes scrollAnimation2 { 0% { height:0; } 60% { height:0; } 100% { height:100px; } } @keyframes scrollAnimation2_sp { 0% { height:0; } 60% { height:0; } 100% { height:50px; } } .tw-absolute { position: absolute !important; } .tw-relative { position: relative !important; } .tw-bottom-0 { bottom: 0px !important; } .tw-bottom-\[-30\%\] { bottom: -30% !important; } .tw-bottom-\[-6\%\] { bottom: -6% !important; } .tw-bottom-\[30px\] { bottom: 30px !important; } .tw-left-0 { left: 0px !important; } .tw-left-1\/2 { left: 50% !important; } .tw-left-10 { left: 2.5rem !important; } .tw-left-\[-30px\] { left: -30px !important; } .tw-left-\[0px\] { left: 0px !important; } .tw-right-10 { right: 2.5rem !important; } .tw-right-\[-2\%\] { right: -2% !important; } .tw-top-0 { top: 0px !important; } .tw-top-1\/2 { top: 50% !important; } .tw-z-10 { z-index: 10 !important; } .tw-z-20 { z-index: 20 !important; } .tw-mx-auto { margin-left: auto !important; margin-right: auto !important; } .tw-my-20 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .tw-mb-0 { margin-bottom: 0px !important; } .tw-mb-10 { margin-bottom: 2.5rem !important; } .tw-mb-20 { margin-bottom: 5rem !important; } .tw-mb-3 { margin-bottom: 0.75rem !important; } .tw-mb-4 { margin-bottom: 1rem !important; } .tw-mb-6 { margin-bottom: 1.5rem !important; } .tw-mb-\[10px\] { margin-bottom: 10px !important; } .tw-mb-\[15px\] { margin-bottom: 15px !important; } .tw-mb-\[20px\] { margin-bottom: 20px !important; } .tw-mb-\[50px\] { margin-bottom: 50px !important; } .tw-mb-\[60px\] { margin-bottom: 60px !important; } .tw-mb-\[6px\] { margin-bottom: 6px !important; } .tw-ml-2 { margin-left: 0.5rem !important; } .tw-ml-3 { margin-left: 0.75rem !important; } .tw-ml-\[2px\] { margin-left: 2px !important; } .tw-mr-2 { margin-right: 0.5rem !important; } .tw-mr-\[2px\] { margin-right: 2px !important; } .tw-mt-10 { margin-top: 2.5rem !important; } .tw-mt-20 { margin-top: 5rem !important; } .tw-mt-28 { margin-top: 7rem !important; } .tw-mt-32 { margin-top: 8rem !important; } .tw-mt-\[-20px\] { margin-top: -20px !important; } .tw-mt-\[-46px\] { margin-top: -46px !important; } .tw-mt-\[10\%\] { margin-top: 10% !important; } .tw-mt-\[10px\] { margin-top: 10px !important; } .tw-mt-\[30px\] { margin-top: 30px !important; } .tw-block { display: block !important; } .tw-flex { display: flex !important; } .tw-hidden { display: none !important; } .tw-h-\[106px\] { height: 106px !important; } .tw-h-\[110px\] { height: 110px !important; } .tw-h-\[120px\] { height: 120px !important; } .tw-h-\[13px\] { height: 13px !important; } .tw-h-\[26px\] { height: 26px !important; } .tw-h-auto { height: auto !important; } .tw-h-full { height: 100% !important; } .tw-w-1\/2 { width: 50% !important; } .tw-w-10\/12 { width: 83.333333% !important; } .tw-w-11\/12 { width: 91.666667% !important; } .tw-w-\[12px\] { width: 12px !important; } .tw-w-\[13px\] { width: 13px !important; } .tw-w-\[150px\] { width: 150px !important; } .tw-w-\[19\%\] { width: 19% !important; } .tw-w-\[22\%\] { width: 22% !important; } .tw-w-\[23\%\] { width: 23% !important; } .tw-w-\[23px\] { width: 23px !important; } .tw-w-\[24\%\] { width: 24% !important; } .tw-w-\[260px\] { width: 260px !important; } .tw-w-\[26px\] { width: 26px !important; } .tw-w-\[30\%\] { width: 30% !important; } .tw-w-\[31\%\] { width: 31% !important; } .tw-w-\[33\%\] { width: 33% !important; } .tw-w-\[35\%\] { width: 35% !important; } .tw-w-\[37\%\] { width: 37% !important; } .tw-w-\[40\%\] { width: 40% !important; } .tw-w-\[48\%\] { width: 48% !important; } .tw-w-\[58\%\] { width: 58% !important; } .tw-w-\[65\%\] { width: 65% !important; } .tw-w-\[70px\] { width: 70px !important; } .tw-w-\[80\%\] { width: 80% !important; } .tw-w-\[85px\] { width: 85px !important; } .tw-w-\[90px\] { width: 90px !important; } .tw-w-\[calc\(100\%-150px\)\] { width: calc(100% - 150px) !important; } .tw-w-auto { width: auto !important; } .tw-w-full { width: 100% !important; } .tw-max-w-\[1130px\] { max-width: 1130px !important; } .tw-max-w-\[550px\] { max-width: 550px !important; } .tw-max-w-\[700px\] { max-width: 700px !important; } .tw-max-w-\[800px\] { max-width: 800px !important; } .tw-max-w-\[820px\] { max-width: 820px !important; } .tw-max-w-\[950px\] { max-width: 950px !important; } .tw-max-w-max { max-width: 1280px !important; } .tw-translate-x-\[-100\%\] { --tw-translate-x: -100% !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .tw-translate-x-\[-70\%\] { --tw-translate-x: -70% !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .tw-translate-y-\[-1px\] { --tw-translate-y: -1px !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .tw-translate-y-\[-50\%\] { --tw-translate-y: -50% !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .tw-translate-y-\[1px\] { --tw-translate-y: 1px !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .tw-cursor-pointer { cursor: pointer !important; } .tw-flex-col { flex-direction: column !important; } .tw-flex-wrap { flex-wrap: wrap !important; } .tw-items-start { align-items: flex-start !important; } .tw-items-end { align-items: flex-end !important; } .tw-items-center { align-items: center !important; } .tw-justify-start { justify-content: flex-start !important; } .tw-justify-end { justify-content: flex-end !important; } .tw-justify-center { justify-content: center !important; } .tw-justify-between { justify-content: space-between !important; } .tw-overflow-hidden { overflow: hidden !important; } .tw-rounded-\[10px\] { border-radius: 10px !important; } .tw-rounded-\[12px\] { border-radius: 12px !important; } .tw-rounded-full { border-radius: 9999px !important; } .tw-rounded-bl-\[10px\] { border-bottom-left-radius: 10px !important; } .tw-rounded-br-\[10px\] { border-bottom-right-radius: 10px !important; } .tw-rounded-tl-\[10px\] { border-top-left-radius: 10px !important; } .tw-rounded-tr-\[10px\] { border-top-right-radius: 10px !important; } .tw-border { border-width: 1px !important; } .tw-border-b { border-bottom-width: 1px !important; } .tw-border-b-2 { border-bottom-width: 2px !important; } .tw-border-b-\[2px\] { border-bottom-width: 2px !important; } .tw-border-t { border-top-width: 1px !important; } .tw-border-solid { border-style: solid !important; } .tw-border-\[\#937D6E\] { --tw-border-opacity: 1 !important; border-color: rgb(147 125 110 / var(--tw-border-opacity)) !important; } .tw-border-\[\#E2C9A8\] { --tw-border-opacity: 1 !important; border-color: rgb(226 201 168 / var(--tw-border-opacity)) !important; } .tw-border-\[\#E66F89\] { --tw-border-opacity: 1 !important; border-color: rgb(230 111 137 / var(--tw-border-opacity)) !important; } .tw-border-white { --tw-border-opacity: 1 !important; border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important; } .tw-bg-\[\#937D6E\] { --tw-bg-opacity: 1 !important; background-color: rgb(147 125 110 / var(--tw-bg-opacity)) !important; } .tw-bg-\[\#AD8F67\] { --tw-bg-opacity: 1 !important; background-color: rgb(173 143 103 / var(--tw-bg-opacity)) !important; } .tw-bg-\[\#E66F89\] { --tw-bg-opacity: 1 !important; background-color: rgb(230 111 137 / var(--tw-bg-opacity)) !important; } .tw-bg-\[\#EFE7DF\] { --tw-bg-opacity: 1 !important; background-color: rgb(239 231 223 / var(--tw-bg-opacity)) !important; } .tw-bg-\[\#F7F3EF\] { --tw-bg-opacity: 1 !important; background-color: rgb(247 243 239 / var(--tw-bg-opacity)) !important; } .tw-bg-\[\#FCF9F5\] { --tw-bg-opacity: 1 !important; background-color: rgb(252 249 245 / var(--tw-bg-opacity)) !important; } .tw-bg-\[\#FFD1DA\] { --tw-bg-opacity: 1 !important; background-color: rgb(255 209 218 / var(--tw-bg-opacity)) !important; } .tw-bg-\[\#FFF0F3\] { --tw-bg-opacity: 1 !important; background-color: rgb(255 240 243 / var(--tw-bg-opacity)) !important; } .tw-bg-\[\#FFF0F4\] { --tw-bg-opacity: 1 !important; background-color: rgb(255 240 244 / var(--tw-bg-opacity)) !important; } .tw-bg-\[\#f8f5f2\] { --tw-bg-opacity: 1 !important; background-color: rgb(248 245 242 / var(--tw-bg-opacity)) !important; } .tw-bg-pink { --tw-bg-opacity: 1 !important; background-color: rgb(230 111 137 / var(--tw-bg-opacity)) !important; } .tw-bg-sub { --tw-bg-opacity: 1 !important; background-color: rgb(247 144 167 / var(--tw-bg-opacity)) !important; } .tw-bg-transparent { background-color: transparent !important; } .tw-bg-white { --tw-bg-opacity: 1 !important; background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important; } .tw-object-cover { -o-object-fit: cover !important; object-fit: cover !important; } .tw-px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .tw-px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .tw-px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .tw-px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } .tw-px-\[2\%\] { padding-left: 2% !important; padding-right: 2% !important; } .tw-px-\[28px\] { padding-left: 28px !important; padding-right: 28px !important; } .tw-px-\[3\%\] { padding-left: 3% !important; padding-right: 3% !important; } .tw-px-\[40px\] { padding-left: 40px !important; padding-right: 40px !important; } .tw-px-\[90px\] { padding-left: 90px !important; padding-right: 90px !important; } .tw-py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .tw-py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .tw-py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .tw-py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .tw-py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .tw-py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .tw-py-\[120px\] { padding-top: 120px !important; padding-bottom: 120px !important; } .tw-py-\[20px\] { padding-top: 20px !important; padding-bottom: 20px !important; } .tw-py-\[2px\] { padding-top: 2px !important; padding-bottom: 2px !important; } .tw-pb-10 { padding-bottom: 2.5rem !important; } .tw-pb-2 { padding-bottom: 0.5rem !important; } .tw-pb-20 { padding-bottom: 5rem !important; } .tw-pb-8 { padding-bottom: 2rem !important; } .tw-pb-\[100px\] { padding-bottom: 100px !important; } .tw-pb-\[120px\] { padding-bottom: 120px !important; } .tw-pb-\[4px\] { padding-bottom: 4px !important; } .tw-pl-0 { padding-left: 0px !important; } .tw-pl-6 { padding-left: 1.5rem !important; } .tw-pr-3 { padding-right: 0.75rem !important; } .tw-pr-\[40px\] { padding-right: 40px !important; } .tw-pr-\[6px\] { padding-right: 6px !important; } .tw-pt-10 { padding-top: 2.5rem !important; } .tw-pt-2 { padding-top: 0.5rem !important; } .tw-pt-\[120px\] { padding-top: 120px !important; } .tw-pt-\[15px\] { padding-top: 15px !important; } .tw-text-center { text-align: center !important; } .tw-text-\[10px\] { font-size: 10px !important; } .tw-text-\[12px\] { font-size: 12px !important; } .tw-font-bold { font-weight: 700 !important; } .tw-font-medium { font-weight: 500 !important; } .tw-leading-7 { line-height: 1.75rem !important; } .tw-leading-8 { line-height: 2rem !important; } .tw-tracking-\[-1\.8px\] { letter-spacing: -1.8px !important; } .tw-tracking-\[-1px\] { letter-spacing: -1px !important; } .tw-tracking-wider { letter-spacing: 0.05em !important; } .tw-tracking-widest { letter-spacing: 0.1em !important; } .tw-text-\[\#937D6E\] { --tw-text-opacity: 1 !important; color: rgb(147 125 110 / var(--tw-text-opacity)) !important; } .tw-text-\[\#E66F89\] { --tw-text-opacity: 1 !important; color: rgb(230 111 137 / var(--tw-text-opacity)) !important; } .tw-text-pink { --tw-text-opacity: 1 !important; color: rgb(230 111 137 / var(--tw-text-opacity)) !important; } .tw-text-pink_dark { --tw-text-opacity: 1 !important; color: rgb(147 125 110 / var(--tw-text-opacity)) !important; } .tw-text-white { --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; } @media (min-width: 768) and (max-width: 1179px) { .max-lg\:latte-text-small { font-size: 12px; } } @media (max-width: 767px) { .max-md\:tw-bottom-0 { bottom: 0px !important; } .max-md\:tw-left-1\/2 { left: 50% !important; } .max-md\:tw-left-\[80px\] { left: 80px !important; } .max-md\:tw-right-4 { right: 1rem !important; } .max-md\:tw-top-\[28\%\] { top: 28% !important; } .max-md\:tw-z-10 { z-index: 10 !important; } .max-md\:tw-mx-auto { margin-left: auto !important; margin-right: auto !important; } .max-md\:tw-my-10 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } .max-md\:tw-mb-0 { margin-bottom: 0px !important; } .max-md\:tw-mb-10 { margin-bottom: 2.5rem !important; } .max-md\:tw-mb-12 { margin-bottom: 3rem !important; } .max-md\:tw-mb-4 { margin-bottom: 1rem !important; } .max-md\:tw-mb-6 { margin-bottom: 1.5rem !important; } .max-md\:tw-mb-\[10\%\] { margin-bottom: 10% !important; } .max-md\:tw-mb-\[16px\] { margin-bottom: 16px !important; } .max-md\:tw-mb-\[18\%\] { margin-bottom: 18% !important; } .max-md\:tw-mb-\[40px\] { margin-bottom: 40px !important; } .max-md\:tw-mt-0 { margin-top: 0px !important; } .max-md\:tw-mt-10 { margin-top: 2.5rem !important; } .max-md\:tw-mt-16 { margin-top: 4rem !important; } .max-md\:tw-mt-4 { margin-top: 1rem !important; } .max-md\:tw-mt-6 { margin-top: 1.5rem !important; } .max-md\:tw-mt-8 { margin-top: 2rem !important; } .max-md\:tw-mt-\[20\%\] { margin-top: 20% !important; } .max-md\:tw-block { display: block !important; } .max-md\:tw-inline { display: inline !important; } .max-md\:tw-flex { display: flex !important; } .max-md\:tw-hidden { display: none !important; } .max-md\:tw-h-\[110px\] { height: 110px !important; } .max-md\:tw-h-\[120px\] { height: 120px !important; } .max-md\:tw-h-auto { height: auto !important; } .max-md\:tw-w-10\/12 { width: 83.333333% !important; } .max-md\:tw-w-11\/12 { width: 91.666667% !important; } .max-md\:tw-w-\[15px\] { width: 15px !important; } .max-md\:tw-w-\[230px\] { width: 230px !important; } .max-md\:tw-w-\[60\%\] { width: 60% !important; } .max-md\:tw-w-\[80\%\] { width: 80% !important; } .max-md\:tw-w-\[85px\] { width: 85px !important; } .max-md\:tw-w-\[90px\] { width: 90px !important; } .max-md\:tw-w-\[calc\(100\%-90px\)\] { width: calc(100% - 90px) !important; } .max-md\:tw-w-full { width: 100% !important; } .max-md\:tw-translate-x-\[-10px\] { --tw-translate-x: -10px !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .max-md\:tw-translate-x-\[-50\%\] { --tw-translate-x: -50% !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .max-md\:tw-items-center { align-items: center !important; } .max-md\:tw-justify-start { justify-content: flex-start !important; } .max-md\:tw-justify-center { justify-content: center !important; } .max-md\:tw-overflow-hidden { overflow: hidden !important; } .max-md\:tw-rounded-\[10px\] { border-radius: 10px !important; } .max-md\:tw-rounded-\[20px\] { border-radius: 20px !important; } .max-md\:tw-px-0 { padding-left: 0px !important; padding-right: 0px !important; } .max-md\:tw-px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .max-md\:tw-px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .max-md\:tw-px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } .max-md\:tw-px-\[10px\] { padding-left: 10px !important; padding-right: 10px !important; } .max-md\:tw-px-\[30px\] { padding-left: 30px !important; padding-right: 30px !important; } .max-md\:tw-py-0 { padding-top: 0px !important; padding-bottom: 0px !important; } .max-md\:tw-py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .max-md\:tw-py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .max-md\:tw-py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .max-md\:tw-py-\[60px\] { padding-top: 60px !important; padding-bottom: 60px !important; } .max-md\:tw-py-\[80px\] { padding-top: 80px !important; padding-bottom: 80px !important; } .max-md\:tw-pb-0 { padding-bottom: 0px !important; } .max-md\:tw-pb-10 { padding-bottom: 2.5rem !important; } .max-md\:tw-pb-4 { padding-bottom: 1rem !important; } .max-md\:tw-pb-5 { padding-bottom: 1.25rem !important; } .max-md\:tw-pb-8 { padding-bottom: 2rem !important; } .max-md\:tw-pt-10 { padding-top: 2.5rem !important; } .max-md\:tw-pt-4 { padding-top: 1rem !important; } .max-md\:tw-pt-\[40px\] { padding-top: 40px !important; } .max-md\:tw-pt-\[80px\] { padding-top: 80px !important; } .max-md\:tw-text-center { text-align: center !important; } .max-md\:tw-text-\[14px\] { font-size: 14px !important; } .max-md\:tw-text-\[16px\] { font-size: 16px !important; } .max-md\:tw-leading-6 { line-height: 1.5rem !important; } } @media (min-width: 768) and (max-width: 1179px) { .max-lg\:tw-hidden { display: none !important; } .max-lg\:tw-w-\[160px\] { width: 160px !important; } .max-lg\:tw-w-\[60px\] { width: 60px !important; } .max-lg\:tw-leading-6 { line-height: 1.5rem !important; } } /* section -------------------------------------------------------------------------- */ img{ width: 100%; } .pcOnly{ @media screen and (max-width: 768px) { display: none; } } .spOnly{ display: none; @media screen and (max-width: 768px) { display: block; } } .c-headingStyle1{ .subtit{ width: 300px; margin: 0 auto; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 300); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 230); } } .tit{ margin: 10px auto 0; @media screen and (max-width: 1366px) { margin: calc(100 / 1366 * 1vw * 10) auto 0; } @media screen and (max-width: 768px) { margin: calc(100 / 375 * 1vw * 15) auto 0; } img{ width: 100%; } } } .c-neumorphism{ position: relative; z-index: 2; filter: drop-shadow(0px 11px 46px rgba(196, 158, 130, 0.67)); &::before, &::after{ content: ""; position: absolute; inset: 0; border-radius: 125px; } &::before{ z-index: -1; background: linear-gradient(0deg, rgba(216,198,169,.34) 0%, rgba(242,240,229,.34) 100%); } &::after{ z-index: -2; background: #fff; } @media screen and (max-width: 768px) { &::before, &::after{ border-radius: 75px; } } } .c-buttonStyle{ position: relative; display: inline-flex; align-items: center; justify-content: center; background: #FF5167; color: #fff; width: 440px; height: 75px; border-radius: 18px; transition: .3s; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 440); height: calc(100 / 1366 * 1vw * 75); border-radius: calc(100 / 1366 * 1vw * 18); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 261); height: calc(100 / 375 * 1vw * 58); border-radius: calc(100 / 375 * 1vw * 14); } &:hover{ opacity: .7; } .txt{ font-size: 22px; font-weight: bold; line-height: 1; @media screen and (max-width: 1366px) { font-size: calc(100 / 1366 * 1vw * 22); } @media screen and (max-width: 768px) { font-size: calc(100 / 375 * 1vw * 18); } } .obj{ position: absolute; top: 50%; transform: translateY(-50%); right: 20px; border-radius: 100vmax; width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; background: #fff; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 27); height: calc(100 / 1366 * 1vw * 27); right: calc(100 / 1366 * 1vw * 20); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 21); height: calc(100 / 375 * 1vw * 21); right: calc(100 / 375 * 1vw * 13); } .icon{ width: 6px; height: 11px; line-height: 0; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 6); height: calc(100 / 1366 * 1vw * 11); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 5); height: calc(100 / 375 * 1vw * 9); /* margin-left: calc(100 / 375 * 1vw * 2); */ } svg{ width: 100%; height: 100%; } } } } .l-section { position: relative; z-index: 2; letter-spacing: -0.1rem; color: #8B6142; } .l-section--inner { padding: 120px 0 240px; max-width: 1080px; box-sizing: border-box; margin: 0 auto; @media screen and (max-width: 1366px) { padding: calc(100 / 1366 * 1vw * 120) 0 calc(100 / 1366 * 1vw * 240); width: calc(100 / 1366 * 1vw * 1080) ; } @media screen and (max-width: 768px) { padding: calc(100 / 375 * 1vw * 70) 0 calc(100 / 375 * 1vw * 100); width: 90%; } } .fixed__btn{ &.is-hide{ opacity: 0; } position: fixed; bottom: 20px; right: 20px; z-index: 100; transition: .3s; @media screen and (max-width: 1366px) { bottom: calc(100 / 1366 * 1vw * 20); right: calc(100 / 1366 * 1vw * 20); } @media screen and (max-width: 768px) { bottom: calc(100 / 375 * 1vw * 16); right: calc(100 / 375 * 1vw * 16); } .c-buttonStyle{ border-radius: 100vmax; width: 142px; height: 142px; border: 2px solid #fff; flex-direction: column; gap: 7px; padding-top: 10px; filter: drop-shadow(3px 4px 12px rgba(74, 31, 0, 0.39)); @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 142); height: calc(100 / 1366 * 1vw * 142); padding-top: calc(100 / 1366 * 1vw * 10); border: calc(100 / 1366 * 1vw * 2) solid #fff; gap: calc(100 / 1366 * 1vw * 7); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 77); height: calc(100 / 375 * 1vw * 77); padding-top: calc(100 / 375 * 1vw * 5); border: calc(100 / 375 * 1vw * 2) solid #fff; gap: calc(100 / 375 * 1vw * 3); } .txt{ line-height: 1.4; @media screen and (max-width: 768px) { font-size: calc(100 / 375 * 1vw * 12); } } .obj{ position: static; transform: none; @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 14); height: calc(100 / 375 * 1vw * 14); } .icon{ @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 4); height: calc(100 / 375 * 1vw * 6); } } } } } .l-section--point { .point__copy{ font-size: 12px; text-align: center; @media screen and (max-width: 1366px) { font-size: calc(100 / 1366 * 1vw * 12); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 303); margin: 0 auto; font-size: calc(100 / 375 * 1vw * 12); } } .point__tit{ margin-top: 46px; @media screen and (max-width: 1366px) { margin-top: calc(100 / 1366 * 1vw * 46); } @media screen and (max-width: 768px) { margin-top: calc(100 / 375 * 1vw * 30); } .tit{ width: 384px; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 384); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 270); } } } .point01, .point02, .point03{ position: relative; background: linear-gradient(0deg, rgba(255,255,250,1) 0%, rgba(248,235,216,1) 100%); &::before{ content: ""; position: absolute; top: -95px; left: 0; width: 100%; height: 95px; background: url(../images/section_bg_point.png) no-repeat top center / cover; } @media screen and (max-width: 1366px) { &::before{ top: calc(100 / 1366 * 1vw * -95); height: calc(100 / 1366 * 1vw * 95); } } @media screen and (max-width: 768px) { &::before{ top: calc(100 / 375 * 1vw * -45); height: calc(100 / 375 * 1vw * 45); background: url(../images/section_bg_point_sp.png) no-repeat top center / cover; } } } .point01{ background-size: 100% 1920px; @media screen and (max-width: 768px) { background-size: 100% calc(100 / 375 * 1vw * 1870); } .l-section--inner{ padding: 50px 0 240px; @media screen and (max-width: 1366px) { padding: calc(100 / 1366 * 1vw * 50) 0 calc(100 / 1366 * 1vw * 240); } @media screen and (max-width: 768px) { padding: calc(100 / 375 * 1vw * 35) 0 calc(100 / 375 * 1vw * 100); } } .point__box{ margin-top: 138px; @media screen and (max-width: 1366px) { margin-top: calc(100 / 1366 * 1vw * 138); } @media screen and (max-width: 768px) { margin-top: calc(100 / 375 * 1vw * 94); } } } .point02{ background-size: 100% 1780px; @media screen and (max-width: 768px) { background-size: 100% calc(100 / 375 * 1vw * 1815); } &::after{ content: ""; position: absolute; inset: 0; background: url(../images/point_bg.png) no-repeat top center / cover; } @media screen and (max-width: 768px) { &::after{ background: url(../images/point_bg_sp.png) no-repeat top center / cover; } } .point__item--img{ position: relative; left: 50px; width: 343px; margin: 23px auto 0; @media screen and (max-width: 1366px) { left: calc(100 / 1366 * 1vw * 50); width: calc(100 / 1366 * 1vw * 343); } @media screen and (max-width: 768px) { left: calc(100 / 1366 * 1vw * 110); width: calc(100 / 375 * 1vw * 259); } } } .point03{ background-size: 100% 2035px; @media screen and (max-width: 768px) { background-size: 100% calc(100 / 375 * 1vw * 2000); } .point__list{ margin-top: 100px; @media screen and (max-width: 1366px) { margin-top: calc(100 / 1366 * 1vw * 100); } } .point__list{ @media screen and (max-width: 768px) { gap: calc(100 / 375 * 1vw * 80); margin-top: calc(100 / 375 * 1vw * 95); } } .point__item--img{ position: relative; .deco{ position: absolute; &._01{ top: -100px; left: 0; width: 288px; mix-blend-mode: multiply; @media screen and (max-width: 1366px) { top: calc(100 / 1366 * 1vw * -100); width: calc(100 / 1366 * 1vw * 288); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 288); top: calc(100 / 375 * 1vw * -100); } } &._02{ top: -75px; left: 51%; transform: translateX(-50%); width: 148px; @media screen and (max-width: 1366px) { top: calc(100 / 1366 * 1vw * -75); width: calc(100 / 1366 * 1vw * 148); } @media screen and (max-width: 768px) { top: calc(100 / 375 * 1vw * -82); width: calc(100 / 375 * 1vw * 160); } } } } } .point__box{ border-radius: 125px; padding: 100px 130px; @media screen and (max-width: 1366px) { padding: calc(100 / 1366 * 1vw * 100) calc(100 / 1366 * 1vw * 130); } @media screen and (max-width: 768px) { border-radius: 75px; padding: calc(100 / 375 * 1vw * 80) calc(100 / 375 * 1vw * 15) calc(100 / 375 * 1vw * 35); } } .point__num{ position: absolute; top: -62px; left: 50%; transform: translateX(-50%); width: 124px; @media screen and (max-width: 1366px) { top: calc(100 / 1366 * 1vw * -62); width: calc(100 / 1366 * 1vw * 124); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 97); top: calc(100 / 375 * 1vw * -48); } } .point__txt1{ margin: 0 auto; &._01{ width: 666px; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 666); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 284); } } &._02{ width: 620px; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 620); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 256); } } &._03{ width: 640px; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 640); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 284); } } } .point__txt2{ font-size: 12px; margin-top: 15px; text-align: center; @media screen and (max-width: 1366px) { font-size: calc(100 / 1366 * 1vw * 12); margin-top: calc(100 / 1366 * 1vw * 15); } @media screen and (max-width: 768px) { font-size: calc(100 / 375 * 1vw * 12); margin-top: calc(100 / 375 * 1vw * 13); } } .point__list{ display: flex; justify-content: center; gap: 40px; width: 600px; margin: 50px auto 0; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 600); gap: calc(100 / 1366 * 1vw * 40); margin: calc(100 / 1366 * 1vw * 50) auto 0; } @media screen and (max-width: 768px) { flex-direction: column; gap: calc(100 / 375 * 1vw * 42); width: calc(100 / 375 * 1vw * 280); margin: calc(100 / 375 * 1vw * 46) auto 0; } } .point__detail{ position: relative; margin-top: 57px; background: #fffffa; border-radius: 60px; padding: 50px; @media screen and (max-width: 1366px) { margin-top: calc(100 / 1366 * 1vw * 57); padding: calc(100 / 1366 * 1vw * 50); } @media screen and (max-width: 768px) { margin-top: calc(100 / 375 * 1vw * 66); border-radius: 54px; padding: calc(100 / 375 * 1vw * 60) calc(100 / 375 * 1vw * 10) calc(100 / 375 * 1vw * 24); } } .point__detail--tit{ position: absolute; top: -25px; left: 50%; transform: translateX(-50%); width: 432px; @media screen and (max-width: 1366px) { top: calc(100 / 1366 * 1vw * -25); width: calc(100 / 1366 * 1vw * 432); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 258); top: calc(100 / 375 * 1vw * -36); } } .point__detail--txt{ width: 448px; margin: 0 auto; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 448); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 264); } } .point__detail--img{ &._02{ margin-top: 24px; @media screen and (max-width: 1366px) { margin-top: calc(100 / 1366 * 1vw * 24); } @media screen and (max-width: 768px) { margin-top: calc(100 / 375 * 1vw * 46); width: calc(100 / 375 * 1vw * 233); } } } } .l-section--about { position: relative; background: linear-gradient(180deg, rgba(255,255,250,1) 0%, rgba(248,235,216,1) 100%); /* background-size: 100% 1400px; @media screen and (max-width: 768px) { background-size: 100% calc(100 / 375 * 1vw * 1700); } */ &::before{ content: ""; position: absolute; top: -95px; left: 0; width: 100%; height: 95px; background: url(../images/section_bg_about.png) no-repeat top center / cover; } @media screen and (max-width: 1366px) { &::before{ top: calc(100 / 1366 * 1vw * -95); height: calc(100 / 1366 * 1vw * 95); } } @media screen and (max-width: 768px) { background: linear-gradient(180deg, rgba(255,252,250,1) 0%, rgba(247,234,212,1) 100%); &::before{ top: calc(100 / 375 * 1vw * -45); height: calc(100 / 375 * 1vw * 45); background: url(../images/section_bg_about_sp.png) no-repeat top center / cover; } } .about__tit{ .tit{ width: 528px; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 528); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 231); } } } .about__box{ margin-top: 92px; padding: 70px 80px; @media screen and (max-width: 1366px) { margin-top: calc(100 / 1366 * 1vw * 92); padding: calc(100 / 1366 * 1vw * 70) calc(100 / 1366 * 1vw * 80); } @media screen and (max-width: 768px) { margin-top: calc(100 / 375 * 1vw * 46); padding: calc(100 / 375 * 1vw * 46) calc(100 / 375 * 1vw * 15); } &.c-neumorphism{ &::before{ background: #fff; } } } .about__btn{ text-align: center; margin-top: 33px; } .about__list{ position: relative; display: flex; justify-content: center; &::after{ content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 250px; background: #fff; } @media screen and (max-width: 1366px) { &::after{ height: calc(100 / 1366 * 1vw * 250); } } @media screen and (max-width: 768px) { flex-direction: column; gap: calc(100 / 375 * 1vw * 48); &::after{ display: none; } } } .about__item{ width: 100%; } .about__item--name{ font-size: 20px; text-align: center; @media screen and (max-width: 1366px) { font-size: calc(100 / 1366 * 1vw * 20); } @media screen and (max-width: 768px) { font-size: calc(100 / 375 * 1vw * 19); } } .about__item--img { width: 264px; height: 273px; margin: 0 auto; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 264); height: calc(100 / 1366 * 1vw * 273); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 213); height: 100%; } } .about__item--type { width: 182px; margin: 20px auto 0; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 182); margin: calc(100 / 1366 * 1vw * 20) auto 0; } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 161); margin: calc(100 / 375 * 1vw * 20) auto 0; } } .about__item--content { font-size: 16px; letter-spacing: 0; text-align: center; margin-top: 12px; @media screen and (max-width: 1366px) { font-size: calc(100 / 1366 * 1vw * 16); margin-top: calc(100 / 1366 * 1vw * 12); } @media screen and (max-width: 768px) { font-size: calc(100 / 375 * 1vw * 14); margin-top: calc(100 / 375 * 1vw * 10); } } .about__info{ width: 100%; height: 250px; background: #f7f3ef; overflow: hidden; margin-top: 28px; @media screen and (max-width: 1366px) { height: calc(100 / 1366 * 1vw * 250); margin-top: calc(100 / 1366 * 1vw * 18); } @media screen and (max-width: 768px) { margin-top: calc(100 / 375 * 1vw * 23); min-height: none; height: auto; } &._01{ border-radius: 60px 0 0 60px; @media screen and (max-width: 768px) { border-radius: 55px; } } &._02{ border-radius: 0 60px 60px 0; @media screen and (max-width: 768px) { border-radius: 55px; } } } .about__info--tit{ text-align: center; color: #F7F3EF; padding: 19px 0 12px; @media screen and (max-width: 1366px) { padding: calc(100 / 1366 * 1vw * 19) 0 calc(100 / 1366 * 1vw * 12); } @media screen and (max-width: 768px) { padding: calc(100 / 375 * 1vw * 18) 0 calc(100 / 375 * 1vw * 15); } &.--green{ background: #00b3ad; } &.--purple{ background: #6368AD; } .txt{ display: inline-block; &._01{ width: 312px; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 312); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 262); } } &._02{ width: 351px; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 351); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 178); } } } } .about__info--list{ padding: 15px 30px 27px 80px; @media screen and (max-width: 1366px) { padding: calc(100 / 1366 * 1vw * 15) calc(100 / 1366 * 1vw * 30) calc(100 / 1366 * 1vw * 27) calc(100 / 1366 * 1vw * 80); } @media screen and (max-width: 768px) { padding: calc(100 / 375 * 1vw * 17) calc(100 / 375 * 1vw * 30) calc(100 / 375 * 1vw * 26) calc(100 / 375 * 1vw * 46); } >li{ position: relative; font-size: 16px; &::before{ content: ""; position: absolute; top: 3px; left: -30px; width: 20px; height: 20px; background: url(../images/about_check.svg) no-repeat center / 10px; border-radius: 50%; } @media screen and (max-width: 1366px) { font-size: calc(100 / 1366 * 1vw * 16); &::before{ top: calc(100 / 1366 * 1vw * 3); left: calc(100 / 1366 * 1vw * -30); width: calc(100 / 1366 * 1vw * 20); height: calc(100 / 1366 * 1vw * 20); } } @media screen and (max-width: 768px) { font-size: calc(100 / 375 * 1vw * 14); &::before{ top: calc(100 / 375 * 1vw * 3); left: calc(100 / 375 * 1vw * -30); width: calc(100 / 375 * 1vw * 20); height: calc(100 / 375 * 1vw * 20); } } &.--green{ &::before{ background-color: #00b3ad; } } &.--purple{ &::before{ background-color: #6368AD; } } &:nth-child(2){ margin-top: 23px; @media screen and (max-width: 1366px) { margin-top: calc(100 / 1366 * 1vw * 23); } @media screen and (max-width: 375px) { margin-top: calc(100 / 375 * 1vw * 16); } } } } } .l-section--bath { position: relative; background: url(../images/bath_bg.png) no-repeat top center / cover; background-color: #fffffa; .l-section--inner{ padding-bottom: 134px; @media screen and (max-width: 1366px) { padding-bottom: calc(100 / 1366 * 1vw * 134); } @media screen and (max-width: 768px) { padding:calc(100 / 375 * 1vw * 30) 0 calc(100 / 375 * 1vw * 60); } } &::before{ content: ""; position: absolute; top: -95px; left: 0; width: 100%; height: 95px; background: url(../images/section_bg_bath.png) no-repeat top center / cover; } @media screen and (max-width: 1366px) { &::before{ top: calc(100 / 1366 * 1vw * -95); height: calc(100 / 1366 * 1vw * 95); } } @media screen and (max-width: 768px) { &::before{ top: calc(100 / 375 * 1vw * -45); height: calc(100 / 375 * 1vw * 45); background: url(../images/section_bg_bath_sp.png) no-repeat top center / cover; } } .bath__tit{ .tit{ width: 490px; @media screen and (max-width: 1366px) { width: calc(100 / 1366 * 1vw * 490); } @media screen and (max-width: 768px) { width: calc(100 / 375 * 1vw * 303); } } } .bath__banner{ width: 820px; margin: 37px auto 0; >a{ position: relative; transition: .3s; z-index: 2; &:hover{ opacity: .7; } &::after{ content: ""; position: absolute; inset: 0; background: rgba(224,210,190,61%); filter: blur(29px); z-index: -1; } } @media screen and (max-width: 768px) { width: 100%; } } }