@charset "Shift_JIS"; /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); #mainContents { line-height: 1; } #mainContents div, #mainContents span, #mainContents object, #mainContents iframe, #mainContents h1, #mainContents h2, #mainContents h3, #mainContents h4, #mainContents h5, #mainContents h6, #mainContents p, #mainContents blockquote, #mainContents pre, #mainContents abbr, #mainContents address, #mainContents cite, #mainContents code, #mainContents del, #mainContents dfn, #mainContents em, #mainContents img, #mainContents ins, #mainContents kbd, #mainContents q, #mainContents samp, #mainContents small, #mainContents strong, #mainContents sub, #mainContents sup, #mainContents var, #mainContents b, #mainContents i, #mainContents dl, #mainContents dt, #mainContents dd, #mainContents ol, #mainContents ul, #mainContents li, #mainContents fieldset, #mainContents form, #mainContents label, #mainContents legend, #mainContents table, #mainContents caption, #mainContents tbody, #mainContents tfoot, #mainContents thead, #mainContents tr, #mainContents th, #mainContents td, #mainContents article, #mainContents aside, #mainContents canvas, #mainContents details, #mainContents figcaption, #mainContents figure, #mainContents footer, #mainContents header, #mainContents hgroup, #mainContents menu, #mainContents nav, #mainContents section, #mainContents summary, #mainContents time, #mainContents mark, #mainContents audio, #mainContents video { font-size: 100%; margin: 0; padding: 0; list-style: none; vertical-align: baseline; border: 0; outline: 0; background: transparent; } #mainContents article, #mainContents aside, #mainContents details, #mainContents figcaption, #mainContents figure, #mainContents footer, #mainContents header, #mainContents hgroup, #mainContents menu, #mainContents nav, #mainContents section { display: block; } #mainContents nav ul { list-style: none; } #mainContents blockquote, #mainContents q { quotes: none; } #mainContents blockquote:before, #mainContents blockquote:after, #mainContents q:before, #mainContents q:after { content: ''; content: none; } #mainContents a { font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; text-decoration: none; background: transparent; } #mainContents ins { text-decoration: none; color: #000; background-color: #ff9; } #mainContents mark { font-weight: bold; font-style: italic; color: #000; background-color: #ff9; } #mainContents del { text-decoration: line-through; } #mainContents abbr[title], #mainContents dfn[title] { cursor: help; border-bottom: 1px dotted; } #mainContents table { border-spacing: 0; border-collapse: collapse; } #mainContents hr { display: block; height: 1px; margin: 1em 0; padding: 0; border: 0; border-top: 1px solid #ccc; } #mainContents input, #mainContents select { vertical-align: middle; } #mainContents img, #mainContents video { font-size: 0; line-height: 0; } @media screen and (max-width: 767px) { .u-is-pc { display: none !important; } } @media screen and (min-width: 768px) { .u-is-sp { display: none !important; } } #mainContents .u-scrollbar__wrap { overflow: hidden; } #mainContents .u-scrollbar { position: relative; height: 6px; padding: 10px 0; } @media screen and (min-width: 768px) { #mainContents .u-scrollbar { margin-top: 4rem; } } @media screen and (max-width: 767px) { #mainContents .u-scrollbar { height: 4px; margin-top: 6.93333vw; } } #mainContents .u-scrollbar:hover { cursor: pointer; } #mainContents .u-scrollbar:before { position: absolute; top: 50%; right: 0; left: 0; height: 6px; content: ''; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #9f171d; } @media screen and (max-width: 767px) { #mainContents .u-scrollbar:before { height: 4px; } } #mainContents .u-scrollbar .swiper-scrollbar-drag { position: relative; height: 6px; background-color: #000; } @media screen and (max-width: 767px) { #mainContents .u-scrollbar .swiper-scrollbar-drag { height: 4px; } } #mainContents .u-scrollbar .swiper-scrollbar-drag:before, #mainContents .u-scrollbar .swiper-scrollbar-drag:after { position: absolute; top: 0; bottom: 0; content: ''; background-color: #9f171d; } #mainContents .u-scrollbar .swiper-scrollbar-drag:before { left: 0; } #mainContents .u-scrollbar .swiper-scrollbar-drag:after { right: 0; } #mainContents .swiper-scrollbar-drag-hide__left, #mainContents .swiper-scrollbar-drag-hide__right { position: absolute; top: 0; bottom: 0; background-color: #9f171d; } #mainContents .swiper-scrollbar-drag-hide__left { left: 0; } #mainContents .swiper-scrollbar-drag-hide__right { right: 0; } body.is-oh { overflow: hidden !important; } #mainContents .l-content--inr { max-width: 1216px; margin: 0 auto; padding-right: 11.46429vw; padding-left: 11.46429vw; } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .l-content--inr { padding-right: 123.81429px; padding-left: 123.81429px; } } @media screen and (max-width: 767px) { #mainContents .l-content--inr { padding-right: 5.33333vw; padding-left: 5.33333vw; } } .custom-select-options { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .custom-select-options select { display: none; } .custom-select-options__label { font-size: 18px; padding: 17px 19px; color: #fff; background: #be0023; } .custom-select-options__label.disabled { color: #acacac; background: #707070; } .custom-select-options .select-selected { font-size: 18px; width: 363px; height: 26px; padding: 17px 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-bottom: 1px solid #d4d4d4; background-color: #fff; } .custom-select-options .select-selected.disabled { color: #595959; border-bottom: none; background: #7f7f7f; } .custom-select-options .select-selected.disabled:after { display: none; } .custom-select-options .select-selected:after { position: absolute; top: 27px; right: 30px; display: inline-block; width: 0; height: 0; padding: 3px; content: ''; -webkit-transform: rotate(45deg); transform: rotate(45deg); border: solid #be0023; border-width: 0 3px 3px 0; } .custom-select-options .select-selected.select-arrow-active:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .custom-select-options .select-items { position: absolute; z-index: 99; top: 100%; right: 0; left: 0; overflow: scroll; height: 346px; padding-right: 10px; background-color: #fff; } .custom-select-options .select-items .select-option, .custom-select-options .select-items .select-selected, .custom-select-options .select-items .same-as-selected { padding: 8px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #000; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, .1) transparent; } .custom-select-options .select-items .select-option:hover, .custom-select-options .select-items .same-as-selected { background-color: rgba(0, 0, 0, .1); } .custom-select-options .select-hide { display: none; } .hover-opacity, #mainContents .sendopack__banner-nav li { display: inline-block; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out; opacity: 1; } @media (hover: hover) and (pointer: fine) { .hover-opacity:hover, #mainContents .sendopack__banner-nav li:hover { opacity: .5; } } .scroll-animation { -webkit-transition: all .6s cubic-bezier(.33, 1, .68, 1) 0s; transition: all .6s cubic-bezier(.33, 1, .68, 1) 0s; -webkit-transform: translateY(80px); transform: translateY(80px); opacity: 0; } .scroll-animation.fade-up { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .c-youtube-modal { position: fixed; z-index: 9999; top: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; opacity: 0; background: rgba(0, 0, 0, .8); } .c-youtube-modal.is-fadeIn { opacity: 1; } .c-youtube-modal.is-fadeOut { opacity: 0; } .c-youtube-modal--inr { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; min-height: 100%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @media screen and (min-width: 768px) { .c-youtube-modal--inr { padding: 80px 50px; } } @media screen and (max-width: 767px) { .c-youtube-modal--inr { padding: 0; } } .c-youtube-modal--inr--inr { width: 100%; } .c-youtube-modal--inr--inr--inr { width: 100%; margin: 0 auto; } @media screen and (min-width: 768px) { .c-youtube-modal--inr--inr--inr { max-width: 68vw; } } @media screen and (min-width: 1600px) { .c-youtube-modal--inr--inr--inr { max-width: 1088px; } } .c-youtube-modal_yholder { position: relative; top: 0; left: 0; width: 100%; padding-top: 56.25%; } .c-youtube-modal_yholder iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-youtube-modal_btn-close { position: absolute; top: 0; display: block; -webkit-transition: all .2s; transition: all .2s; } .c-youtube-modal_btn-close:hover { opacity: .8; } .c-youtube-modal_btn-close:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; content: ''; background: url('/products/beer/superdry/sendopack/assets/img/youtube-close.png') no-repeat center center/contain; } @media screen and (min-width: 768px) { .c-youtube-modal_btn-close { right: -4.35714vw; width: 2.92857vw; height: 2.92857vw; } } @media screen and (min-width: 1600px) { .c-youtube-modal_btn-close { right: -92.57143px; width: 69.71429px; height: 69.71429px; } } @media screen and (max-width: 1080px) and (min-width: 769px) { .c-youtube-modal_btn-close { width: 31.62857px; height: 31.62857px; } } @media screen and (max-width: 767px) { .c-youtube-modal_btn-close { top: -52px; right: 5.33333vw; width: 8.53333vw; height: 8.53333vw; } } .calendar-modal-wp { position: fixed; z-index: 9998; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .calendar-modal-wp.show { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .calendar-modal-wp__main { position: relative; padding: 5.71429vw 5.21429vw; color: #fff; background-color: black; } @media screen and (max-width: 878px) { .calendar-modal-wp__main { max-width: 85%; padding: 30px 20px; } } .calendar-modal-wp__btn-close { position: absolute; top: 0; right: -61px; display: block; width: 41px; height: 41px; cursor: pointer; background: url('/products/beer/superdry/sendopack/assets/img/youtube-close.png') no-repeat center center/contain; } @media screen and (max-width: 1024px) { .calendar-modal-wp__btn-close { top: -65px; right: 20px; } } @media screen and (max-width: 878px) { .calendar-modal-wp__btn-close { top: -50px; right: 20px; width: 32px; height: 32px; } } .calendar-modal-wp__content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } @media screen and (max-width: 878px) { .calendar-modal-wp__content { overflow-y: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-height: 55vh; } } .calendar-modal-wp__column { margin-inline: 15px; } @media screen and (max-width: 878px) { .calendar-modal-wp__column { margin-inline: 0; } } .calendar-modal-wp__row { padding-block: 8px; } @media screen and (max-width: 878px) { .calendar-modal-wp__row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } .calendar-modal-wp__label { font-family: 'Noto Sans JP',sans-serif; font-size: 14px; font-weight: 700; line-height: 28px; display: inline-block; width: 57px; height: 28px; margin-left: 83px; text-align: center; color: #000; background-color: #fff; } .calendar-modal-wp__label--red { margin-left: 67px; color: #fff; background-color: #be0023; } .calendar-modal-wp__text { font-family: 'Noto Sans JP',sans-serif; font-size: 16px; font-weight: 700; display: inline-block; min-width: 124px; } .calendar-modal-wp__text--ab { min-width: 81px; } .calendar-modal-wp__text--note { font-size: 12px; } /* 発売チェーン・店舗リスト */ @media screen and (min-width: 1600px) { #mainContents .not-pc-max { display: none !important; } } @media screen and (max-width: 767px) { #mainContents .not-pc-max { display: none !important; } } #mainContents .sendopack__banner-nav--wrapper { position: -webkit-sticky; position: sticky; z-index: 999; top: 0; overflow: hidden; background: #000; } #mainContents .sendopack__container { font-family: 'Noto Sans JP',sans-serif; position: relative; overflow: hidden; background: #000; } #mainContents .sendopack__banner { line-height: 0; width: 100%; } #mainContents .sendopack__banner img { width: 100%; height: auto; } #mainContents .sendopack__banner-nav { font-family: 'Noto Sans JP',sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0; padding: 1.07143vw 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 767px) { #mainContents .sendopack__banner-nav { padding: 2.66667vw 0; } } #mainContents .sendopack__banner-nav li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding-right: 32px; cursor: pointer; color: #fff; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #mainContents .sendopack__banner-nav li a { text-decoration: none; color: #fff; } #mainContents .sendopack__banner-nav li a:active, #mainContents .sendopack__banner-nav li a:focus, #mainContents .sendopack__banner-nav li a:target, #mainContents .sendopack__banner-nav li a:visited { text-decoration: none; color: #fff; } #mainContents .sendopack__banner-nav li:after { display: inline-block; margin-bottom: 3px; margin-left: 8px; padding: 3px; content: ''; -webkit-transform: rotate(45deg); transform: rotate(45deg); border: solid #be0023; border-width: 0 3px 3px 0; } #mainContents .sendopack__banner-intro-banner-agency { position: fixed; z-index: 999; right: 0; bottom: 100px; width: 310px; height: 88px; } #mainContents .sendopack__calendar { position: relative; width: 100%; padding: 4.28571vw 0; text-align: center; background-image: url('/products/beer/superdry/sendopack/assets/img/beer-background.jpg'); background-repeat: no-repeat; background-position: top left; background-size: cover; } #mainContents .sendopack__calendar-items { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } #mainContents .sendopack__calendar-items__inr .cldList { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } #mainContents .sendopack__calendar-items__inr .cldList li { width: calc(579/1400 * 100%); max-width: 616px; } #mainContents .sendopack__calendar-items__inr .cldList li img { width: 100%; max-width: 100%; height: auto; } #mainContents .sendopack__calendar-items__inr .cldList li:nth-child(1) { margin-right: -10px; } #mainContents .sendopack__calendar-items__inr .cldList li:nth-child(2) { margin-left: -10px; } @media screen and (max-width: 767px) { #mainContents .sendopack__calendar-items__inr .cldList { width: 136vw; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } #mainContents .sendopack__calendar-items__inr .cldList li { width: 70.4vw; } #mainContents .sendopack__calendar-items__inr .cldList li:nth-child(1) { margin-right: -2.66667vw; } #mainContents .sendopack__calendar-items__inr .cldList li:nth-child(2) { margin-left: -2.66667vw; } } @media screen and (max-width: 767px) { #mainContents .sendopack__calendar-items__inr { overflow-x: auto; width: 100%; } } #mainContents .sendopack__calendar-text { font-size: 12px; font-weight: 600; display: block; margin-top: -26px; padding-left: calc(160/1400 * 100%); text-align: left; } @media screen and (max-width: 767px) { #mainContents .sendopack__calendar-text { font-size: 3.2vw; position: absolute; bottom: 15px; left: 50%; width: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media screen and (min-width: 768px) { #mainContents .sendopack__calendar-button { position: absolute; right: 0; width: calc(143 / 1400* 100%); max-width: 143px; cursor: pointer; } #mainContents .sendopack__calendar-button img { width: 100%; max-width: 100%; height: auto; } } @media screen and (max-width: 767px) { #mainContents .sendopack__calendar-button img { width: 93.33333vw; height: auto; } } #mainContents .sendopack__superdry-beer-mobile { display: none; } #mainContents .sendopack__superdry-beer { position: relative; width: 100%; padding: 5.71429vw 0; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer { padding: 20vw 0 0; } } #mainContents .sendopack__superdry-beer:before { position: absolute; top: 0; right: 0; width: 100%; height: 430px; content: ''; background-image: url(/products/beer/superdry/sendopack/assets/img/superdry-beer-top.png); background-repeat: no-repeat; background-position: top right; background-size: contain; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer:before { height: 32vw; } } #mainContents .sendopack__superdry-beer:after { position: absolute; z-index: -1; bottom: 0; left: -6.78571vw; width: 100%; height: 0; content: ''; background-image: url('/products/beer/superdry/sendopack/assets/img/rain_sp_3.png'); background-repeat: no-repeat; background-position: bottom left; background-size: contain; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer:after { bottom: 37.33333vw; left: -20px; display: none; height: 66.66667vw; } } #mainContents .sendopack__superdry-beer--inner { position: relative; height: 32.14286vw; } #mainContents .sendopack__superdry-beer--inner.z-index { z-index: 998; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer--inner { height: 81.33333vw; } } #mainContents .sendopack__superdry-beer__image { position: absolute; z-index: 1; } #mainContents .sendopack__superdry-beer__image img { width: 100%; } #mainContents .sendopack__superdry-beer__image.is-01 { top: 0; left: 24vw; width: 31.5vw; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer__image.is-01 { top: 24vw; right: 0; left: auto; width: 56.8vw; } } #mainContents .sendopack__superdry-beer__image.is-02 { z-index: 2; bottom: 0; left: 0; width: 30.92857vw; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer__image.is-02 { width: 56.8vw; } } #mainContents .sendopack__superdry-beer__image.is-03 { top: 0; left: 24vw; width: 31.5vw; -webkit-transition: opacity .6s linear; transition: opacity .6s linear; opacity: 0; } #mainContents .sendopack__superdry-beer__image.is-03.fade-up { -webkit-animation: pulse 10s ease infinite 2s; animation: pulse 10s ease infinite 2s; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer__image.is-03 { top: 24vw; right: 0; left: auto; width: 56.8vw; } } #mainContents .sendopack__superdry-beer__image.is-04 { z-index: 2; bottom: 0; left: 0; width: 30.92857vw; -webkit-transition: opacity .6s linear; transition: opacity .6s linear; opacity: 0; } #mainContents .sendopack__superdry-beer__image.is-04.fade-up { -webkit-animation: pulse 10s ease infinite 2s; animation: pulse 10s ease infinite 2s; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer__image.is-04 { width: 56.8vw; } } #mainContents .sendopack__superdry-beer__image.is-05 { top: 12.28571vw; right: 8vw; width: 32vw; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer__image.is-05 { top: 0; right: auto; left: 5.33333vw; width: 75.2vw; } } #mainContents .sendopack__superdry-beer__image.is-06 { top: 7.85714vw; left: 6.14286vw; width: 30vw; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer__image.is-06 { top: 10.66667vw; left: 5.33333vw; width: 78.13333vw; } } #mainContents .sendopack__superdry-beer__image.is-07 { top: -2.14286vw; right: 4.28571vw; width: 49.5vw; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer__image.is-07 { top: auto; right: 0; bottom: -45.33333vw; width: 94.66667vw; } } #mainContents .sendopack__superdry-beer__image.is-08 { top: -2.14286vw; right: 4.28571vw; width: 49.5vw; -webkit-transition: opacity .6s linear; transition: opacity .6s linear; opacity: 0; } #mainContents .sendopack__superdry-beer__image.is-08.fade-up { -webkit-animation: pulse 10s ease infinite 2s; animation: pulse 10s ease infinite 2s; } @media screen and (max-width: 767px) { #mainContents .sendopack__superdry-beer__image.is-08 { top: auto; right: 0; bottom: -45.33333vw; width: 94.66667vw; } } #mainContents .sendopack__search-agents { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: 0; padding: 10.71429vw 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #mainContents .sendopack__search-agents .agents-inr { width: 76vw; margin: 0 auto; } @media screen and (max-width: 767px) { #mainContents .sendopack__search-agents .agents-inr { width: 100%; } } #mainContents .sendopack__search-agents .shop-ttl { display: block; width: 44.14286vw; margin: 0 auto 2.85714vw; } @media screen and (max-width: 767px) { #mainContents .sendopack__search-agents .shop-ttl { width: 73.6vw; margin: 16vw 0 0; } } #mainContents .sendopack__search-agents .shop-ttl img { width: 100%; } #mainContents .sendopack__search-agents-title { width: 43.92857vw; margin-inline: auto; } #mainContents .sendopack__search-agents-title img { width: 100%; height: auto; } #mainContents .sendopack__search-agents-select { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 4.28571vw; } #mainContents .sendopack__search-agents-select .custom-select-options:not(:last-child) { margin-right: 4vw; } #mainContents .sendopack__search-agents-description { font-size: .85714vw; font-weight: bold; line-height: 2; width: 100%; margin-top: 2.85714vw; margin-bottom: 5.71429vw; color: #fff; } #mainContents .sendopack__search-agents-description.last { margin-bottom: 0; } @media screen and (max-width: 767px) { #mainContents .sendopack__search-agents-description { font-size: 3.2vw; } } #mainContents .sendopack__search-agents-shops { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 40px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } #mainContents .sendopack__search-agents-shops img { width: 34.28571vw; height: auto; } #mainContents .sendopack__product { position: relative; margin-bottom: -11vw; padding-top: 156px; padding-bottom: 294px; background-image: url(/products/beer/superdry/sendopack/assets/img/product-ss/bg_pc.jpg); background-repeat: repeat-y; background-position: top center; background-size: 100%; } #mainContents .sendopack__product-content { padding-top: 150px; } #mainContents .sendopack__product:before { position: absolute; top: 0; left: 0; width: 0; height: 0; content: ''; border-width: 75px 50vw 75px 50vw; border-style: solid; border-color: black transparent transparent black; } @media screen and (max-width: 767px) { #mainContents .sendopack__product { padding: 38px 20px 112px; background-image: url(/products/beer/superdry/sendopack/assets/img/product-ss/bg_sp.jpg); } #mainContents .sendopack__product-content { padding-top: 80px; } #mainContents .sendopack__product:before { border-width: 20px 50vw 20px 50vw; } } #mainContents .sendopack__product img { width: 100%; } #mainContents .sendopack__product__ttl { width: 70.35714vw; margin: 0 auto; } @media screen and (max-width: 767px) { #mainContents .sendopack__product__ttl { width: 100%; padding-left: 3px; } } #mainContents .sendopack__product__sub-ttl { position: relative; width: 60.57143vw; margin: 83px auto 70px; padding-bottom: 15px; } #mainContents .sendopack__product__sub-ttl:after { position: absolute; right: 0; bottom: 0; width: 39.28571vw; height: 10px; content: ''; background-image: url(/products/beer/superdry/sendopack/assets/img/product-ss/bg-line.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } #mainContents .sendopack__product__sub-ttl--lg { width: 55.14286vw; margin: 92px auto 70px; } #mainContents .sendopack__product__sub-ttl--lg:after { width: 42.64286vw; } @media screen and (max-width: 767px) { #mainContents .sendopack__product__sub-ttl { width: 100%; margin: 33px auto 39px; padding-bottom: 7px; } #mainContents .sendopack__product__sub-ttl:after { width: 100%; height: 6px; } #mainContents .sendopack__product__sub-ttl--lg { width: 69.33333vw; margin: 43px 0 40px 0; } #mainContents .sendopack__product__sub-ttl--lg:after { left: 0; width: 61.6vw; } } #mainContents .sendopack__product__thumb { width: 55vw; margin: 0 auto; } @media screen and (max-width: 767px) { #mainContents .sendopack__product__thumb { width: 100%; } } #mainContents .sendopack__product__des { width: 59.28571vw; margin: 0 auto; } @media screen and (max-width: 767px) { #mainContents .sendopack__product__des { width: 100%; } } #mainContents .sendopack__product-main { width: 76vw; margin: 5.71429vw auto 0; } @media screen and (max-width: 767px) { #mainContents .sendopack__product-main { width: 100%; margin-top: 0; } } #mainContents .sendopack__timeline { width: 52vw; margin: 0 auto; } @media screen and (max-width: 767px) { #mainContents .sendopack__timeline { width: 100%; } } #mainContents .sendopack__timeline__number { position: relative; width: 65px; margin-left: 8px; } #mainContents .sendopack__timeline__number:before { position: absolute; z-index: 5; top: 0; left: 0; display: inline-block; width: 50px; height: 50px; content: ''; -webkit-transform: skewX(-19deg); transform: skewX(-19deg); background: #a2001e; } #mainContents .sendopack__timeline__number:after { position: absolute; z-index: 10; top: 0; left: 0; display: inline-block; width: 50px; height: 50px; content: ''; background: url(/products/beer/superdry/sendopack/assets/img/product-ss/step-1-number.png) no-repeat center; background-size: 17px; } @media screen and (max-width: 767px) { #mainContents .sendopack__timeline__number { width: 53px; margin-left: unset; } #mainContents .sendopack__timeline__number:before { width: 41px; height: 41px; -webkit-transform: skewX(-16deg); transform: skewX(-16deg); } #mainContents .sendopack__timeline__number:after { width: 41px; height: 41px; background-size: 14px; } } #mainContents .sendopack__timeline__note { font-size: 1vw; font-weight: 700; line-height: 2; padding-top: 14px; letter-spacing: .7px; color: #000; } @media screen and (max-width: 767px) { #mainContents .sendopack__timeline__note { font-size: 3.73333vw; padding-top: 6px; } } #mainContents .sendopack__timeline__tt { width: 16.85714vw; } @media screen and (max-width: 767px) { #mainContents .sendopack__timeline__tt { width: 51.73333vw; } } #mainContents .sendopack__timeline__steps { margin-bottom: 30px; } @media screen and (max-width: 767px) { #mainContents .sendopack__timeline__steps { margin-bottom: 10px; } } #mainContents .sendopack__timeline__step { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding-bottom: 43px; } #mainContents .sendopack__timeline__step:before { position: absolute; z-index: 5; top: 0; left: 28px; display: inline-block; width: 3px; height: 100%; content: ''; background: #000; } #mainContents .sendopack__timeline__step--two .sendopack__timeline__tt { width: 4.92857vw; } #mainContents .sendopack__timeline__step--two .sendopack__timeline__number:after { background: url(/products/beer/superdry/sendopack/assets/img/product-ss/step-2-number.png) no-repeat center; background-size: 28px; } #mainContents .sendopack__timeline__step--three .sendopack__timeline__tt { width: 9.85714vw; } #mainContents .sendopack__timeline__step--three .sendopack__timeline__number:after { background: url(/products/beer/superdry/sendopack/assets/img/product-ss/step-3-number.png) no-repeat center; background-size: 28px; } #mainContents .sendopack__timeline__step--for .sendopack__timeline__tt { width: 4.92857vw; } #mainContents .sendopack__timeline__step--for .sendopack__timeline__number:after { background: url(/products/beer/superdry/sendopack/assets/img/product-ss/step-4-number.png) no-repeat center; background-size: 31px; } #mainContents .sendopack__timeline__step--for:before { display: none; } @media screen and (max-width: 767px) { #mainContents .sendopack__timeline__step { padding-bottom: 23px; padding-left: 6px; } #mainContents .sendopack__timeline__step:before { left: 20px; } #mainContents .sendopack__timeline__step--two .sendopack__timeline__tt { width: 15.2vw; } #mainContents .sendopack__timeline__step--two .sendopack__timeline__number:after { background-size: 23px; } #mainContents .sendopack__timeline__step--three .sendopack__timeline__tt { width: 30.13333vw; } #mainContents .sendopack__timeline__step--three .sendopack__timeline__number:after { background-size: 25px; } #mainContents .sendopack__timeline__step--for .sendopack__timeline__tt { width: 15.2vw; } #mainContents .sendopack__timeline__step--for .sendopack__timeline__number:after { background-size: 26px; } } #mainContents .sendopack__timeline__main { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 767px) { #mainContents .sendopack__timeline__main { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } #mainContents .sendopack__timeline__detail { min-width: 310px; padding-top: 10px; padding-right: 1.71429vw; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 767px) { #mainContents .sendopack__timeline__detail { min-width: unset; padding-top: 8px; padding-right: 0; } } #mainContents .sendopack__timeline__thumb { max-width: 337px; } @media screen and (max-width: 767px) { #mainContents .sendopack__timeline__thumb { margin-top: 16px; } } #mainContents .sendopack__clients-feedback { position: relative; z-index: 5; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-top: 18.92857vw; padding-bottom: 23.71429vw; background-image: url(/products/beer/superdry/sendopack/assets/img/beer-background.png); background-repeat: no-repeat; background-position: top left; background-size: 100%; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #mainContents .sendopack__clients-feedback__ttl { width: 37.85714vw; margin: 0 auto; } #mainContents .sendopack__clients-feedback__ttl img { width: 100%; height: auto; } @media screen and (max-width: 767px) { #mainContents .sendopack__clients-feedback { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } #mainContents .sendopack__clients-feedback__ttl { width: 75.46667vw; margin: 0; } } @media screen and (max-width: 767px) { #mainContents .sendopack__clients-feedback img { margin: 0 auto; } } @media screen and (max-width: 767px) { #mainContents .sendopack__clients-feedback { padding: 32vw 5.33333vw; background-image: url(/products/beer/superdry/sendopack/assets/img/beer-background-sp.png); background-size: cover; } #mainContents .sendopack__clients-feedback > img { width: 75.46667vw !important; height: auto; } } #mainContents .sendopack__clients-feedback_title img { max-width: 100%; height: auto; } #mainContents .sendopack__clients-feedback-group { width: 76vw; margin: 5.71429vw auto 0; } @media screen and (max-width: 767px) { #mainContents .sendopack__clients-feedback-group { width: 100%; margin: 13.33333vw 0 0; } } #mainContents .sendopack__clients-feedback-group .feedbackList { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; row-gap: 2.14286vw; -webkit-column-gap: 2vw; -moz-column-gap: 2vw; column-gap: 2vw; } #mainContents .sendopack__clients-feedback-group .feedbackList-item { font-size: 2vw; font-weight: 900; line-height: 1.4; position: relative; z-index: 2; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: calc(50% - 1.14286vw); height: 11vw; text-align: center; color: #000; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #mainContents .sendopack__clients-feedback-group .feedbackList-item::after { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transform: skewX(-17deg); transform: skewX(-17deg); background: #fff; -webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, .16); box-shadow: 0 20px 20px rgba(0, 0, 0, .16); } #mainContents .sendopack__clients-feedback-group .feedbackList-item span { font-size: 2.57143vw; font-weight: 900; display: inline-block; } #mainContents .sendopack__clients-feedback-group .feedbackList-item span em { font-style: normal; letter-spacing: -2px; } #mainContents .sendopack__clients-feedback-group .feedbackList-item:first-child span { margin: 0 -5px; } @media screen and (max-width: 767px) { #mainContents .sendopack__clients-feedback-group .feedbackList { display: block; padding: 0 4vw; } #mainContents .sendopack__clients-feedback-group .feedbackList-item { font-size: 4.26667vw; width: 100%; height: 25.6vw; } #mainContents .sendopack__clients-feedback-group .feedbackList-item span { font-size: 5.86667vw; } #mainContents .sendopack__clients-feedback-group .feedbackList-item + .feedbackList-item { margin-top: 8vw; } #mainContents .sendopack__clients-feedback-group .feedbackList-item:first-child span { margin: 0 -10px; } } #mainContents .sendopack__clients-feedback-description { font-size: .85714vw; font-weight: 700; line-height: 2; margin-top: 4.28571vw; } @media screen and (max-width: 767px) { #mainContents .sendopack__clients-feedback-description { font-size: 3.2vw; margin-top: 13.33333vw; } } #mainContents .sendopack__line-up { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 150px 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 767px) { #mainContents .sendopack__line-up { padding: 21.33333vw 5.33333vw 32vw; } } #mainContents .sendopack__line-up__ttl { width: 47.78571vw; } #mainContents .sendopack__line-up__ttl img { width: 100%; height: auto; } @media screen and (max-width: 767px) { #mainContents .sendopack__line-up__ttl { width: 89.06667vw; } } #mainContents .sendopack__line-up-beers { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 53.42857vw; margin-top: 5.71429vw; margin-bottom: 11.42857vw; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 8vw; -moz-column-gap: 8vw; column-gap: 8vw; } #mainContents .sendopack__line-up-beers li img { width: auto; height: 100%; } #mainContents .sendopack__line-up-beers li:nth-child(1) { width: 21.42857vw; height: 21vw; } #mainContents .sendopack__line-up-beers li:nth-child(2) { width: 24vw; height: 21vw; } @media screen and (max-width: 767px) { #mainContents .sendopack__line-up-beers { display: block; width: 59.73333vw; margin: 13.33333vw auto 26.66667vw; } #mainContents .sendopack__line-up-beers li + li { margin-top: 10.66667vw; } #mainContents .sendopack__line-up-beers li img { width: 100%; height: auto; } #mainContents .sendopack__line-up-beers li:nth-child(1) { width: 100%; height: auto; } #mainContents .sendopack__line-up-beers li:nth-child(2) { width: 100%; height: auto; } } #mainContents .sendopack__line-up__bnr { width: 60vw; margin: 0 auto 4.28571vw; } #mainContents .sendopack__line-up__bnr img { width: 100%; height: auto; } @media screen and (max-width: 767px) { #mainContents .sendopack__line-up__bnr { width: 100%; margin-bottom: 8vw; } } #mainContents .sendopack__line-up-text { width: 76vw; margin: 0 auto 4.28571vw; } #mainContents .sendopack__line-up-text li { font-size: .85714vw; font-weight: bold; line-height: 2; position: relative; padding-left: .85714vw; color: #fff; } #mainContents .sendopack__line-up-text li:before { font-size: .85714vw; font-weight: bold; line-height: 2; position: absolute; left: 0; content: '◎'; color: #fff; } @media screen and (max-width: 767px) { #mainContents .sendopack__line-up-text { width: 100%; margin-bottom: 13.33333vw; } #mainContents .sendopack__line-up-text li { font-size: 3.2vw; padding-left: 3.2vw; } #mainContents .sendopack__line-up-text li:before { font-size: 3.2vw; } } #mainContents .sendopack__line-up__btn { line-height: 0; display: block; width: 37.28571vw; margin: 0 auto; -webkit-transition: all .3s ease; transition: all .3s ease; } #mainContents .sendopack__line-up__btn img { width: 100%; height: auto; } #mainContents .sendopack__line-up__btn:hover { opacity: .5; } @media screen and (max-width: 767px) { #mainContents .sendopack__line-up__btn { width: 100%; } } @media only screen and (max-width: 768px) { #mainContents .sendopack__banner { height: auto; } #mainContents .sendopack__banner-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow-x: auto; width: 100%; margin: 0; padding-left: 4vw; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } #mainContents .sendopack__banner-nav li { display: inline; white-space: nowrap; } #mainContents .sendopack__banner-intro-banner-agency { z-index: 999; right: 0; bottom: 20px; width: 304px; height: 65px; background-image: url('/products/beer/superdry/sendopack/assets/img/banner-agency-mb.png'); background-size: cover; } #mainContents .sendopack__calendar { height: auto; padding-top: 5.33333vw; padding-bottom: 16vw; background-position: center; background-size: cover; } #mainContents .sendopack__calendar > img { width: 335px; } #mainContents .sendopack__calendar-items { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } #mainContents .sendopack__superdry-beer-mobile { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 0 20px; background: url('/products/beer/superdry/sendopack/assets/img/rain_sp_3.png') no-repeat -21px 28%; background-size: contain; } #mainContents .sendopack__superdry-beer-mobile:after { position: absolute; top: 0; right: 0; width: 100%; height: 170px; content: ''; background-image: url(/products/beer/superdry/sendopack/assets/img/superdry-beer-top.png); background-repeat: no-repeat; background-position: top right; background-size: cover; } #mainContents .sendopack__superdry-beer-mobile:before { position: absolute; right: 0; bottom: 0; width: 100%; height: 350px; content: ''; background-image: url(/products/beer/superdry/sendopack/assets/img/superdry-beer-center.png); background-repeat: no-repeat; background-position: top right; background-size: cover; } #mainContents .sendopack__superdry-beer-mobile img { z-index: 998; margin-top: 40px; } #mainContents .sendopack__search-agents { padding: 21.33333vw 5.33333vw; } #mainContents .sendopack__search-agents-title { z-index: 998; width: 100%; margin-bottom: 5.33333vw; text-align: left; } #mainContents .sendopack__search-agents-title img { width: 82.13333vw; height: auto; } #mainContents .sendopack__search-agents-select { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; } #mainContents .sendopack__search-agents-select .custom-select-options { margin-right: 0 !important; margin-bottom: 8vw; } #mainContents .sendopack__search-agents-select .custom-select-options .select-selected { width: 100%; } #mainContents .sendopack__search-agents-description { font-weight: bold; margin-top: 8vw; margin-left: 0; white-space: normal; } #mainContents .sendopack__search-agents-shops { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: 0; } #mainContents .sendopack__search-agents-shops img { width: 100%; } #mainContents .sendopack__search-agents-shops img:last-of-type { margin-top: 30px; } #mainContents .sendopack__ss-web-movie { position: relative; padding-top: 26.66667vw !important; padding-bottom: 26.66667vw !important; padding-left: 5.33333vw !important; background: none !important; } #mainContents .sendopack__ss-web-movie::after { position: absolute; bottom: -54.13333vw; left: -2.66667vw; width: 190.4vw; height: 161.33333vw; content: ''; background: url('/products/beer/superdry/sendopack/assets/img/wm_bg_sp.png') no-repeat -63px -30px; background-size: cover; } #mainContents .sendopack__ss-web-movie .sendopack__ss-web-movie__title { position: relative; z-index: 1; } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__box { position: relative; z-index: 1; } #mainContents .sendopack__ss-web-movie a { color: #fff; } #mainContents .sendopack__ss-web-movie__title { margin-top: 150px; } #mainContents .sendopack__ss-web-movie__title img { width: 287px; } } #mainContents .sendopack__search-agents-time { font-family: 'Noto Sans JP',sans-serif; font-size: 5.71429vw; font-weight: 700; width: 44vw; margin: 60px auto 80px; padding-top: 20px; padding-bottom: 30px; text-align: center; color: #fff; border: 1px solid #808080; } @media screen and (max-width: 767px) { #mainContents .sendopack__search-agents-time { font-size: 10.66667vw; width: 100%; height: auto; padding: 35px 20px; text-align: left; } } #mainContents .sendopack__search-agents-time__content { line-height: 1.4; } @media screen and (max-width: 767px) { #mainContents .sendopack__search-agents-time__content { line-height: 1; } } #mainContents .sendopack__search-agents-time__content:first-child { line-height: 0; height: 35px; } @media screen and (max-width: 767px) { #mainContents .sendopack__search-agents-time__content:first-child { margin-bottom: 10px; } } #mainContents .sendopack__search-agents-time--medium { font-size: 2.85714vw; display: inline-block; margin-inline: -15px; } @media screen and (max-width: 767px) { #mainContents .sendopack__search-agents-time--medium { font-size: 8vw; margin-inline: -10px; } } #mainContents .sendopack__search-agents-time--small { font-size: 1.71429vw; } @media screen and (max-width: 767px) { #mainContents .sendopack__search-agents-time--small { font-size: 5.33333vw; } } @media (min-width: 767px) and (max-width: 1250px) { #mainContents #mainContents .sendopack__calendar-items { padding-right: 40px; } } #mainContents .supMain { position: relative; width: 100%; min-height: 32.14286vw; } #mainContents .supMain .supMainLoop { position: absolute; top: 5.71429vw; left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } #mainContents .supMain .supMainLoop::after { position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 105%; content: ''; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%); } #mainContents .supMain .supMainLoop img { width: auto; max-width: inherit; height: 18.85714vw; margin: 0; -webkit-animation: infinity-scroll-left 60s infinite linear .5s both; animation: infinity-scroll-left 60s infinite linear .5s both; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { #mainContents .supMain .supMainLoop { position: static; margin-top: -26.66667vw; } #mainContents .supMain .supMainLoop::after { z-index: 998; left: -10%; width: 120%; } #mainContents .supMain .supMainLoop img { height: 56.53333vw; } } #mainContents .supMain .supMainTxt { position: absolute; z-index: 101; left: 50%; margin-top: 21.42857vw; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; } #mainContents .supMain .supMainTxt img { width: 54vw; height: auto; margin: 0; padding: 0; } @media screen and (max-width: 767px) { #mainContents .supMain .supMainTxt img { width: 79.73333vw; } } @media screen and (max-width: 767px) { #mainContents .supMain .supMainTxt { position: relative; z-index: 998; width: 89.33333vw; margin-top: -5.33333vw; text-align: left; } } #mainContents .supBox { position: relative; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 76vw; margin: 0 auto; padding-top: 1.42857vw; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 4vw; -moz-column-gap: 4vw; column-gap: 4vw; } #mainContents .supBox img { width: 100%; height: auto; } #mainContents .supBox__img { width: 36vw; } #mainContents .supBox__txt { width: 36vw; } #mainContents .supBox__btn { font-size: 1.57143vw; font-weight: 700; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 35.92857vw; height: 70px; margin-top: 25px; padding-left: 50px; color: #fff; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #mainContents .supBox__btn:hover { opacity: .5; } #mainContents .supBox__btn:before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ''; -webkit-transform: skewX(-19deg); transform: skewX(-19deg); border: 1px solid #fff; } #mainContents .supBox__btn:after { position: absolute; top: 27px; right: 50px; display: block; width: 13.33px; height: 16px; content: ''; background: url(/products/beer/superdry/sendopack/assets/img/product-ss/ico-arrow-white.svg) no-repeat center; background-size: contain; } @media screen and (max-width: 767px) { #mainContents .supBox__btn { font-size: 4.26667vw; width: 84vw; padding-left: 28px; margin-inline: auto; } #mainContents .supBox__btn:after { right: 27px; } } @media screen and (max-width: 767px) { #mainContents .supBox { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin-top: 8vw; padding: 0 5.33333vw 0; } #mainContents .supBox__img { width: 100%; margin-bottom: 8vw; } #mainContents .supBox__txt { width: 100%; } } #mainContents .topBnr { width: 44vw; margin: 0 auto; } @media screen and (max-width: 767px) { #mainContents .topBnr { width: 89.33333vw; } } #mainContents .sendo__searchBox { position: relative; z-index: 1; } @-webkit-keyframes infinity-scroll-left { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes infinity-scroll-left { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @media (min-width: 769px) and (max-width: 1250px) { #mainContents #mainContents .sendopack__calendar-items { padding-right: 40px; } } @-webkit-keyframes pulse { 0% { opacity: 0; } 25% { opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } @keyframes pulse { 0% { opacity: 0; } 25% { opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } #mainContents .se_anchor { display: inline-block; width: 0; height: 0; margin-top: -100px; padding-top: 100px; } #mainContents .sendopack__ss-web-movie { overflow: hidden; padding-bottom: 150px; padding-left: 168px; background: url('/products/beer/superdry/sendopack/assets/img/bg.png') no-repeat center bottom/contain; } #mainContents .sendopack__ss-web-movie__title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: 167px; } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie__title { margin-top: 0; } } #mainContents .sendopack__ss-web-movie__title > img { max-width: 616px; } #mainContents .sendopack__ss-web-movie__title:after { display: block; margin-bottom: 48px; content: ''; } #mainContents .sendopack__ss-web-movie .p-top-cm__movie__thumb { display: none; } #mainContents .sendopack__ss-web-movie .p-top-cm { overflow: hidden; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm { margin-top: 10.71429vw; } } @media screen and (min-width: 1600px) { #mainContents .sendopack__ss-web-movie .p-top-cm { margin-top: 171.42857px; } } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .sendopack__ss-web-movie .p-top-cm { margin-top: 115.71429px; } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm { margin-top: 27.46667vw; } } #mainContents .sendopack__ss-web-movie .p-top-cm__inner { position: relative; overflow: visible; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm__inner { max-width: 1216px; margin-right: auto; margin-left: auto; padding-right: 2rem; padding-left: 2rem; } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm__inner { padding-right: 1.64474vw; padding-left: 1.64474vw; } } #mainContents .sendopack__ss-web-movie .p-top-cm__ttl { position: relative; overflow: visible; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm__ttl { width: 35.18857vw; min-width: 380.03657px; max-width: 563.01714px; height: 4.45714vw; min-height: 48.13714px; max-height: 71.31429px; margin-bottom: 7.31429vw; } } @media screen and (min-width: 1600px) { #mainContents .sendopack__ss-web-movie .p-top-cm__ttl { margin-bottom: 117.02857px; } } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .sendopack__ss-web-movie .p-top-cm__ttl { margin-bottom: 78.99429px; } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm__ttl { width: 88.67467vw; height: 11.232vw; margin-bottom: 13.76vw; } } #mainContents .sendopack__ss-web-movie .p-top-cm__ttl img { width: 100%; height: auto; } #mainContents .sendopack__ss-web-movie .p-top-cm__subttl-wrap { position: relative; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm__subttl-wrap { margin-bottom: 5vw; } } @media screen and (min-width: 1600px) { #mainContents .sendopack__ss-web-movie .p-top-cm__subttl-wrap { margin-bottom: 80px; } } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .sendopack__ss-web-movie .p-top-cm__subttl-wrap { margin-bottom: 54px; } } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm__subttl-wrap--web { margin-top: 7.31429vw; } } @media screen and (min-width: 1600px) { #mainContents .sendopack__ss-web-movie .p-top-cm__subttl-wrap--web { margin-top: 117.02857px; } } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .sendopack__ss-web-movie .p-top-cm__subttl-wrap--web { margin-top: 78.99429px; } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm__subttl-wrap--web { margin-top: 13.68vw; } } #mainContents .sendopack__ss-web-movie .p-top-cm__subttl { overflow: visible; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm__subttl--tv { width: 13.61786vw; min-width: 147.07594px; max-width: 217.89029px; height: 3.45429vw; min-height: 37.30629px; max-height: 55.26857px; } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm__subttl--tv { width: 32.8vw; height: 8.32vw; margin-bottom: 7.33333vw; } } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm__subttl--web { width: 17.52643vw; min-width: 189.28543px; max-width: 280.42286px; height: 3.45429vw; min-height: 37.30629px; max-height: 55.26857px; } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm__subttl--web { width: 42.19733vw; height: 8.32vw; margin-bottom: 7.33333vw; } } #mainContents .sendopack__ss-web-movie .p-top-cm__subttl img { width: 100%; height: auto; } #mainContents .sendopack__ss-web-movie .is-disabled { pointer-events: none; } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button { position: absolute; top: 0; right: 1rem; } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button { position: relative; overflow: visible; margin: 0 .3rem; -webkit-transition: all .2s; transition: all .2s; border: none; outline: none; background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button { padding: 2.35714vw 2.5vw 2vw; } } @media screen and (min-width: 1600px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button { padding: 37.71429px 40px 32px; } } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button { padding: 25.45714px 27px 21.6px; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button:before { position: absolute; top: 52%; left: 50%; width: 100%; height: 100%; content: ''; -webkit-transition: all .2s; transition: all .2s; -webkit-transform: translate(-50%, -50%) skew(-16deg); transform: translate(-50%, -50%) skew(-16deg); background-color: #000; } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button:hover { opacity: .5; } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button svg { position: relative; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button svg { width: 1.57143vw; height: 2.14286vw; } } @media screen and (min-width: 1600px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button svg { width: 25.14286px; height: 34.28571px; } } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button svg { width: 16.97143px; height: 23.14286px; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button.swiper-button-disabled:before { background-color: #8b001a; } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button button.swiper-button-disabled svg path { fill: #be0023; } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__button { right: -100%; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 100%; -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-margin-before: 0; margin-block-start: 0; -webkit-margin-after: 0; margin-block-end: 0; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; -webkit-padding-start: 0; padding-inline-start: 0; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__list { min-height: 401.14286px; max-height: 594.28571px; -webkit-transform-origin: top left; transform-origin: top left; scale: .9; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item { height: 100%; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item.swiper-slide { width: auto; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item .p-top-cm-contents__item__link { padding-right: 2.14286vw; } } @media screen and (min-width: 1600px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item .p-top-cm-contents__item__link { padding-right: 34.28571px; } } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item .p-top-cm-contents__item__link { padding-right: 23.14286px; } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item .p-top-cm-contents__item__link { padding-right: 5.33333vw; } } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item:last-child { width: 100%; padding-right: 2.14286vw; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item:last-child .p-top-cm-contents__item__inner { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item__inner { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; margin-right: auto; -webkit-transition: all .3s; transition: all .3s; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item__link { position: relative; display: block; width: 100%; -webkit-transition: all .4s ease-out; transition: all .4s ease-out; text-decoration: none; will-change: transform; } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item__link { max-width: 78.4vw; } } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item__link { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 42.14286vw; min-width: 455.14286px; max-width: 674.28571px; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } } @media screen and (min-width: 1600px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item__link { margin-bottom: 57.14286px; } } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__item__link { margin-bottom: 38.57143px; } } #mainContents .sendopack__ss-web-movie .p-top-cm__movie__thumb { -webkit-transition: all .2s; transition: all .2s; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__ttl { font-size: calc((21 / 1400) * 100vw); line-height: 1.42857; letter-spacing: 0; color: #fff; } } @media screen and (min-width: 1600px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__ttl { font-size: 24px; line-height: 1.63265; letter-spacing: 0; } } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__ttl { font-size: 16.2px; line-height: 1.10204; letter-spacing: 0; } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__ttl { font-size: calc((16 / 375) * 100vw); line-height: 1.5; letter-spacing: 0; color: #fff; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__ttl span { position: relative; display: inline-block; margin-bottom: 2px; padding-right: 20px; vertical-align: middle; } #mainContents .sendopack__ss-web-movie .p-top-cm__movie__thumb { line-height: 0; position: relative; display: block; overflow: hidden; margin-bottom: 1.5rem; -webkit-transition: all .2s; transition: all .2s; border-radius: 6px; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm__movie__thumb { margin-bottom: 1.89145vw; } } @media screen and (min-width: 1600px) { #mainContents .sendopack__ss-web-movie .p-top-cm__movie__thumb { margin-bottom: 26.28571px; } } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .sendopack__ss-web-movie .p-top-cm__movie__thumb { margin-bottom: 26.28571px; } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm__movie__thumb { margin-bottom: 1.23355vw; } } #mainContents .sendopack__ss-web-movie .p-top-cm__movie__thumb img { width: 100%; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm__movie__thumb:hover { opacity: .5; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__play-button { position: absolute; top: 50%; left: 50%; display: block; padding-top: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__play-button { width: calc(72 / 728 * 100%); padding-top: calc(72 / 728 * 100%); } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__play-button { width: 10.66667vw; padding-top: 10.66667vw; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__play-button svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__play-button svg circle, #mainContents .sendopack__ss-web-movie .p-top-cm-contents__play-button svg path { -webkit-transition: all .2s; transition: all .2s; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__scrollbar { margin-top: 0; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more { text-align: center; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more { margin-top: 4rem; } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more { margin-top: 3.28947vw; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more-link { position: relative; display: block; max-width: 396px; margin-right: auto; margin-left: auto; padding: 2.2rem 3rem; -webkit-transition: all .2s; transition: all .2s; text-align: left; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more-link { font-size: calc((18 / 1400) * 100vw); line-height: 1; max-width: 28.28571vw; padding: 2.28571vw 2.85714vw; letter-spacing: 0; } } @media screen and (min-width: 1600px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more-link { font-size: 20.57143px; line-height: 1.14286; max-width: 452.57143px; padding: 36.57143px 40px; letter-spacing: 0; } } @media screen and (max-width: 1080px) and (min-width: 769px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more-link { font-size: 13.88571px; line-height: .77143; max-width: 305.48571px; padding: 27px 38.57143px; letter-spacing: 0; } } @media screen and (max-width: 767px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more-link { font-size: calc((16 / 375) * 100vw); line-height: 1; max-width: 69.33333vw; margin-top: 8vw; padding: 5.33333vw 6.93333vw; letter-spacing: 0; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more-link::before { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; content: ''; -webkit-transition: all .2s; transition: all .2s; -webkit-transform: translate(-50%, -50%) skew(-18deg); transform: translate(-50%, -50%) skew(-18deg); background-color: #000; } @media screen and (min-width: 768px) { #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more-link:hover { opacity: .5; } } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more-link__inner { position: relative; display: block; white-space: nowrap; } #mainContents .sendopack__ss-web-movie .p-top-cm-contents__more-link__arrow { position: absolute; top: 50%; right: 0; -webkit-transition: all .2s; transition: all .2s; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media all and (-ms-high-contrast: none) and (min-width: 769px) { #mainContents .sendopack .p-top-cm__movie__thumb { position: relative; } #mainContents .sendopack .p-top-cm__movie__thumb:before { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; content: ''; -webkit-transition: all .2s; transition: all .2s; } } #mainContents .u-scrollbar__wrap { position: relative; overflow: visible; width: 76vw; margin-top: 20px; } @media screen and (min-width: 768px) { #mainContents .u-scrollbar__wrap { margin-top: -20px; } } @media screen and (max-width: 767px) { #mainContents .u-scrollbar__wrap { width: 89.33333vw; } } #mainContents .u-scrollbar--overflow { position: absolute; top: 50%; display: block; overflow: hidden; width: 100%; height: 6px; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 100px; } #mainContents .u-scrollbar { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; height: 2.85714vw; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 767px) { #mainContents .u-scrollbar { height: 10.66667vw; } } #mainContents .u-scrollbar:before { border-radius: 100px; background-color: #fff !important; } @media screen and (max-width: 767px) { #mainContents .u-scrollbar:before { height: 4px; } } #mainContents .u-scrollbar .swiper-scrollbar-drag { position: relative; height: 6px; -webkit-transition: width 1s; transition: width 1s; border-radius: 0; background-color: #9f171d; } #mainContents .u-scrollbar .swiper-scrollbar-drag:before { position: relative; position: absolute; z-index: 1; top: 0; bottom: 0; left: -73.57143vw; width: 73.57143vw; height: 100%; content: ''; border-radius: 100px 0 0 100px; background-color: #9f171d; } @media screen and (max-width: 767px) { #mainContents .u-scrollbar .swiper-scrollbar-drag:before { left: -80.26667vw; width: 80.26667vw; } } #mainContents .u-scrollbar .swiper-scrollbar-drag:after { position: absolute; z-index: 2; top: -1.14286vw; bottom: 0; left: 0; width: 2.57143vw; height: 2.57143vw; content: ''; background-color: transparent; background-image: url('/products/beer/superdry/sendopack/assets/img/icons/ico-slide.svg'); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; } @media screen and (max-width: 767px) { #mainContents .u-scrollbar .swiper-scrollbar-drag:after { top: -4.26667vw; width: 9.06667vw; height: 9.06667vw; } } @media screen and (max-width: 767px) { #mainContents .u-scrollbar .swiper-scrollbar-drag { height: 4px; } } #mainContents .searchBox__form { margin: 7vw 0 5vw; } #mainContents .searchBox__form form { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } @media screen and (max-width: 767px) { #mainContents .searchBox__form form { display: block; } } @media screen and (min-width: 768px) { #mainContents .searchBox__form { margin: 3vw 0 .8vw; } } #mainContents .sendSearch { position: relative; width: 36vw; margin-right: auto; margin-left: auto; background-color: #000; } @media screen and (max-width: 767px) { #mainContents .sendSearch { width: 89.33333vw; } } #mainContents .sendSearch + .sendSearch { margin-left: 4vw; } @media screen and (max-width: 767px) { #mainContents .sendSearch + .sendSearch { margin-top: 8vw; margin-left: 0; } } #mainContents .sendSearch-area { z-index: 11; } #mainContents .sendSearch-store { pointer-events: none; } #mainContents .sendSearch-store.select { pointer-events: all; } #mainContents .sendSearch-store .pullDoun::before, #mainContents .sendSearch-store .pullDoun::after { background-color: rgba(0, 0, 0, 0); } #mainContents .sendSearch-store.select .pullDoun::before, #mainContents .sendSearch-store.select .pullDoun::after { background-color: #be0023; } #mainContents .sendSearch__title { font-weight: 700; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #mainContents .sendSearch__title__icon { display: block; padding: 1.21429vw; color: #fff; background-color: #be0023; } @media screen and (max-width: 767px) { #mainContents .sendSearch__title__icon { padding: 4.8vw; } } #mainContents .sendSearch__title__text { padding: 1.21429vw 0 1.21429vw 2.07143vw; background-color: #fff; -webkit-box-flex: 2; -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; } @media screen and (max-width: 767px) { #mainContents .sendSearch__title__text { padding: 4.8vw 0 4.8vw 7.73333vw; } } #mainContents .areaList li { padding: 1vw 1.42857vw; cursor: pointer; } @media screen and (max-width: 767px) { #mainContents .areaList li { padding: 3.73333vw 5.33333vw; } } #mainContents .areaList li.active { background-color: #eee; } #mainContents .storeList { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 1vw; text-align: left; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 767px) { #mainContents .storeList { padding: 2.66667vw 5.33333vw; } } @media screen and (min-width: 768px) { #mainContents .storeList { padding: 1.2vw; } } #mainContents .storeList li { min-width: 50%; padding-bottom: 1.07143vw; } @media screen and (max-width: 767px) { #mainContents .storeList li { padding-bottom: 4vw; } } #mainContents .storeResult { padding: .71429vw 1.42857vw; text-align: left; border-top: 1px solid #ccc; } @media screen and (max-width: 767px) { #mainContents .storeResult { padding: 2.66667vw 5.33333vw; } } #mainContents .storeDetails_title { font-size: 20px; font-weight: bold; padding: 2.14286vw 0 1.42857vw; } @media screen and (max-width: 767px) { #mainContents .storeDetails_title { font-size: 16px; padding: 0 0 2.66667vw; } } #mainContents .storeResult__list li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 1.07143vw; } @media screen and (max-width: 767px) { #mainContents .storeResult__list li { font-size: 14px; line-height: calc(21/14); margin-bottom: 4vw; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } } #mainContents .storeResult__list li span:first-child { width: 7.85714vw; } @media screen and (max-width: 767px) { #mainContents .storeResult__list li span:first-child { width: 36.26667vw; } } #mainContents .storeResult__list li span:last-child { width: 25vw; } @media screen and (max-width: 767px) { #mainContents .storeResult__list li span:last-child { width: 36.26667vw; } } #mainContents .linkText { cursor: pointer; -webkit-transition: color .3s; transition: color .3s; text-decoration: underline; color: #000; } #mainContents .linkText:hover { color: #be0023; } #mainContents .sendSearch__salechain .sendSearch__title__icon { color: #808080; background-color: #595959; } #mainContents .sendSearch__salechain .sendSearch__title__text { color: rgba(0, 0, 0, .3); background-color: #808080; } #mainContents .sendSearch__salechain.active .sendSearch__title__icon { color: #fff; background-color: #be0023; } #mainContents .sendSearch__salechain.active .sendSearch__title__text { color: #000; background-color: #fff; } #mainContents .pullDoun { position: relative; } #mainContents .pullDoun::before, #mainContents .pullDoun::after { position: absolute; top: 50%; display: block; width: 1.8vw; height: 2px; content: ''; background-color: #be0023; } @media screen and (min-width: 768px) { #mainContents .pullDoun::before, #mainContents .pullDoun::after { width: 1.2vw; } } #mainContents .pullDoun::before { right: 2.6vw; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #mainContents .pullDoun::after { right: 3.8vw; -webkit-transform: rotate(45deg); transform: rotate(45deg); } @media screen and (min-width: 768px) { #mainContents .pullDoun::before { right: 1.5vw; } #mainContents .pullDoun::after { right: 2.2vw; } } #mainContents .pullDoun.active::before { width: 3vw; } #mainContents .pullDoun.active::after { right: 2.5vw; width: 3vw; } @media screen and (min-width: 768px) { #mainContents .pullDoun.active::before { right: 1.6vw; width: 1.7vw; } #mainContents .pullDoun.active::after { right: 1.6vw; width: 1.7vw; } } #mainContents .pullDounItem { font-weight: 700; position: absolute; z-index: 998; top: 100%; right: 0; overflow: auto; width: 100%; max-height: 346px; background-color: #fff; } #mainContents .pullDounItem.salechain { max-height: 600px; } @media screen and (max-width: 767px) { #mainContents .pullDounItem.salechain { z-index: 9; max-height: 426px; } } #mainContents .searchBox__form__list { margin-top: 7vw; } #mainContents .searchBox__form__list li { position: relative; } #mainContents .searchBox__form__list li span { position: absolute; left: 0; } @media screen and (min-width: 768px) { #mainContents .searchBox__form__list { width: 60vw; margin: 2.2vw auto 0; } } #mainContents .searchBox__shop { margin-top: 7vw; } #mainContents .searchBox__shop__title { font-size: 4vw; font-weight: bold; text-align: center; letter-spacing: -.5vw; } @media screen and (min-width: 768px) { #mainContents .searchBox__shop { margin-top: 2.5vw; } #mainContents .searchBox__shop__title { font-size: 2vw; letter-spacing: -.1vw; } } #mainContents .searchBox__shop__banner { display: block; width: 48vw; margin: .4vw auto 0; } #mainContents .searchBox__shop__banner:hover { opacity: .8; } @media screen and (min-width: 768px) { #mainContents .searchBox__shop__banner { width: 22vw; margin: .8vw auto 0; } } #mainContents .searchBox__shop__list li { position: relative; } #mainContents .searchBox__shop__list li span { position: absolute; left: 0; } @media screen and (min-width: 768px) { #mainContents .searchBox__shop__list { width: 60vw; margin: .5vw auto 0; } } #mainContents .sendo__searchprep { background-color: #7d7d7d; background-size: cover; } #mainContents .searchprep { padding: 9vw 0 6vw; color: #fff; } @media screen and (min-width: 768px) { #mainContents .searchprep { padding: 4vw 0; } } #mainContents .searchprep__title { font-size: 4.4vw; position: relative; text-align: center; color: #fff; } #mainContents .searchprep__title small { font-size: 3.4vw; } #mainContents .searchprep__title::before, #mainContents .searchprep__title::after { position: absolute; top: 50%; right: 1vw; display: block; width: 15.5vw; height: .5vw; content: ''; } #mainContents .searchprep__title::before { left: 1vw; background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0), #fff); background-image: linear-gradient(45deg, rgba(0, 0, 0, 0), #fff); } #mainContents .searchprep__title::after { right: 1vw; background-image: -webkit-linear-gradient(45deg, #fff, rgba(0, 0, 0, 0)); background-image: linear-gradient(45deg, #fff, rgba(0, 0, 0, 0)); } @media screen and (min-width: 768px) { #mainContents .searchprep__title { font-size: 2.8vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; /* width: 100vw; */ margin: 0 auto; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } #mainContents .searchprep__title small { font-size: 1.9vw; margin-left: 0; } #mainContents .searchprep__title::before, #mainContents .searchprep__title::after { top: calc(50% - .1vw); width: 28vw; height: .26vw; } #mainContents .searchprep__title::before { left: .5vw; } #mainContents .searchprep__title::after { right: .5vw; } } #mainContents .searchprep__shop { margin-top: 23vw; } #mainContents .searchprep__shop__title { font-size: 4vw; text-align: center; letter-spacing: -.5vw; } @media screen and (min-width: 768px) { #mainContents .searchprep__shop { margin-top: 7.8vw; } #mainContents .searchprep__shop__title { font-size: 1.8vw; text-align: center; letter-spacing: .1vw; } } #mainContents .searchprep__shop__banner { display: block; width: 48vw; margin: .4vw auto 0; } #mainContents .searchprep__shop__banner:hover { opacity: .8; } @media screen and (min-width: 768px) { #mainContents .searchprep__shop__banner { width: 22vw; margin: .8vw auto 0; } } #mainContents .searchprep__shop__list li { position: relative; } #mainContents .searchprep__shop__list li span { position: absolute; left: 0; } @media screen and (min-width: 768px) { #mainContents .searchprep__shop__list li { width: 60vw; margin: 0 auto; } } #mainContents .searchprep__info { margin-top: 18vw; text-align: center; } #mainContents .searchprep__info__text { font-size: 5vw; } #mainContents .searchprep__info__day { font-size: 9vw; font-weight: bold; } #mainContents .searchprep__info__day span { font-size: 11vw; letter-spacing: 1vw; } #mainContents .searchprep__info__day small { font-size: 7vw; } #mainContents .searchprep__info__textEnd { font-size: 5vw; } @media screen and (min-width: 768px) { #mainContents .searchprep__info { margin-top: 7vw; } #mainContents .searchprep__info__text { font-size: 1.9vw; } #mainContents .searchprep__info__day { font-size: 5vw; display: inline-block; } #mainContents .searchprep__info__day span { font-size: 6.5vw; line-height: 1; letter-spacing: 1px; } #mainContents .searchprep__info__day small { font-size: 4vw; } #mainContents .searchprep__info__textEnd { font-size: 2vw; display: inline-block; } }