@charset "UTF-8";

 :root {
--main-font: "Outfit", "Gothic Medium BBB", sans-serif;
--color_font: #5A5A5A;
--color_secondary: #868E80;  
--color_white: #FFFFFF;
--color_black: #000000;
--color_background: #F5F5F5;
--color_link: #0CA2FF;
} html {
overflow-y: scroll;
}
body {
line-height: 1;
color: var(--color_font);
} html, body, div, span, object, iframe, header, footer,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
em {
font-weight: bold;
font-style: normal;
}
strong {
font-weight: normal;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ul {
list-style: none;
}
ul,
ol,
dl {
letter-spacing: -0.4em;
}
ul li,
ol li,
dl dt,
dl dd {
letter-spacing: normal;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
outline: none;
}
ins {
background-color: #ff9;
color: var(--color_black);
text-decoration: none;
}
mark {
background-color: #ff9;
color: var(--color_black);
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid var(--color_white);
}
input, select {
vertical-align: middle;
} body {
font: 16px/1.75 "Outfit", "Midashi Go MB31", "yu-gothic-pr6n", sans-serif;
*font-size: small;
*font: x-small;
} * html body {
font-size: 100%;
} *:first-child + html body {
font-size: 100%;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
} .fade {
opacity: 0.7;
-moz-opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}
.inline_block {
display: inline-block;
*display: inline;
*zoom: 1;
}
.table_cell {
display: table-cell;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.fr,
.imgR {
float: right;
margin-left: 10px;
}
.fl,
.imgL {
float: left;
margin-right: 10px;
}
.imgC,
.tC,
.btn {
text-align: center;
}
.imgC {
display: block;
margin-left: auto;
margin-right: auto;
}
.tR,
.sign {
text-align: right;
}
.tL {
text-align: left;
}
.box_size {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.ts_none {
-webkit-text-shadow: none !important;
-moz-text-shadow: none !important;
-ms-text-shadow: none !important;
-o-text-shadow: none !important;
text-shadow: none !important;
}
.bs_none {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
-ms-box-shadow: none !important;
-o-box-shadow: none !important;
box-shadow: none !important;
}
.att {
color: #F00;
}
.att a {
color: #F00;
}
.mb00 {
margin-bottom: 0 !important;
}
.size_s {
font-size: 82%;
}
.size_l {
font-size: 113%;
}
ul.disc li {
list-style: disc;
margin: 0 1.4em;
}
ul.decimal li {
list-style: decimal;
margin: 0 1.4em;
} .clearfix, ul.disc {
position: relative;
*zoom: 1;
}
.clearfix:after, ul.disc:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
} .fadeIn {
opacity: 0; transition: opacity 4s ease;;
}
.fadeIn.is-show { opacity: 1;
} 
.fadeInUp {
opacity: 0;
transform: translate(0, 20%);
transition: 2s;
}
.fadeInUp.is-show {
transform: translate(0, 0);
opacity: 1;
}
.slideInLeft {
opacity: 0;
transform: translateX(-10%);
transition: 2s;
}
.slideInLeft.is-show {
transform: translateX(0%);
opacity: 1;
}
.slideInRight {
opacity: 0;
transform: translateX(15%);
transition: 2s;
}
.slideInRight.is-show {
transform: translateX(0%);
opacity: 1;
} .fadeInDown {
opacity: 0;
transform: translate(0, -35%);
transition: 2s;
}
.fadeInDown.is-show {
transform: translate(0, 0);
opacity: 1;
} .inview .line {
display: block;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.inview.is-show .line {
opacity: 1;
transform: translateY(0);
} .inview.is-show .line:nth-child(1) { transition-delay: 0s; }
.inview.is-show .line:nth-child(2) { transition-delay: 1s; }
.inview.is-show .line:nth-child(3) { transition-delay: 2s; } .text-focus {
filter: blur(10px);
opacity: 0;
transition: filter 1.2s ease, opacity 1.2s ease;
}
.text-focus.is-visible {
filter: blur(0);
opacity: 1;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 17px;
} body {
color: var(--color_font);
font-family: var(--main-font);
font-weight: 300;
line-height: 1.64;
position: relative;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: var(--color_background);
}
* html body, * html input, * html textarea {
font-family: var(--main-font);
}
* {
box-sizing: border-box;
}
ul li, ol li, dl dt, dl dd {
letter-spacing: 0.05em;
}
a {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-decoration: none;
cursor: pointer;
transition: all 0.4s ease;
color: var(--color_font);
}
a img {
transition: all 0.4s ease;
}
a:hover, a:focus, a:active {
color: var(--color_font);
}
a:hover img {
opacity: 0.7;
}
img, picture, video {
width: auto;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
h1, h2, h3, h4, h5 {
margin: 0 auto;
}
sup {
font-size: 0.6em;
vertical-align: top;
}
strong {
font-weight: 700;
}
hr {
border-color: var(--color_border);
margin-top: 10px;
margin-bottom: 10px;
}
p:empty {
display: none;
}
@media screen and (max-width: 767px) {
.pc {
display: none;
}
}
@media screen and (min-width: 768px) {
.sp {
display: none;
}
}
.object_fit_img {
object-fit: contain;
font-family: "object-fit: contain;";
width: 100% !important;
height: 100% !important;
}
.object_fit_img_cover {
object-fit: cover;
font-family: "object-fit: cover;";
width: 100% !important;
height: 100% !important;
}
.container {
position: relative;
margin: 0 auto;
padding-left: 6.3636363636vw;
padding-right: 6.3636363636vw;
width: 1280px;
max-width: 100%;
}
@media screen and (min-width: 768px) {
.container {
padding-left: 40px;
padding-right: 40px;
}
}
.container--narrow {
width: 960px;
}
.link--arrow {
display: inline-block;
position: relative;
text-decoration: none;
} .link--arrow::before {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.link--arrow:hover::before {
transform: scaleX(1);
}
.link--arrow:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin-top: -5px;
margin-left: 16px;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M6.68742 18.3334L5.20825 16.8542L12.0624 10L5.20825 3.14585L6.68742 1.66669L15.0208 10L6.68742 18.3334Z" fill="%235A5A5A"/></svg>') no-repeat center center;
background-size: contain;
}
.link--external {
display: inline-block;
position: relative;
}
.link--external:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: 16px;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M8.33333 5V6.66667H4.16667V15.8333H13.3333V11.6667H15V16.6667C15 17.1269 14.6269 17.5 14.1667 17.5H3.33333C2.8731 17.5 2.5 17.1269 2.5 16.6667V5.83333C2.5 5.3731 2.8731 5 3.33333 5H8.33333ZM17.5 2.5V9.16667H15.8333L15.8333 5.34417L9.33925 11.8392L8.16074 10.6607L14.6541 4.16667H10.8333V2.5H17.5Z" fill="%235A5A5A"/></svg>') no-repeat center center;
background-size: contain;
}
.link--map {
display: inline-block;
position: relative;
}
.link--map:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
margin-top: -6px;
margin-right: 4px;
background: url(https://blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/images/ico_map.svg) no-repeat center center;
background-size: contain;
}
.language__switcher,
.language__switcher_nl {
display: flex;
font-size: calc(25 / 17 * 1rem);
}
.language__switcher a {
opacity: 0.5;
}
.language__switcher li + li:before,
.language__switcher_nl li + li:before {
content: "/";
display: inline-block;
margin-left: 4px;
margin-right: 4px;
}
.button_menu {
display: flex;
flex-direction: column;
row-gap: 15px;
}
.button_menu a {
border-radius: 10px;
border: 1px solid var(--color_white);
display: block;
text-align: center;
padding: 0.8em 1em;
font-size: calc(20 / 17 * 1rem);
font-weight: 300;
letter-spacing: 0.1em;
color: var(--color_white);
position: relative;
width: 410px;
}
@media screen and (max-width: 767px) {
.button_menu a { width: 100%;
}
}
.button_menu a:before {
content: "";
display: block;
width: 28px;
height: 28px;
margin-right: 10px;
opacity: 0.5;
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
}
.button_menu li:nth-child(1) a:before {
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g opacity="0.5"><path d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 7.23792L12.0718 14.338L4 7.21594V19H20V7.23792ZM4.51146 5L12.0619 11.662L19.501 5H4.51146Z" fill="white"/></g></svg>') no-repeat center center;
background-size: contain;
}
.button_menu li:nth-child(2) a:before {
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g opacity="0.5"><path d="M21.7267 2.95694L16.2734 22.0432C16.1225 22.5716 15.7979 22.5956 15.5563 22.1126L11 13L1.9229 9.36919C1.41322 9.16532 1.41953 8.86022 1.95695 8.68108L21.0432 2.31901C21.5716 2.14285 21.8747 2.43866 21.7267 2.95694ZM19.0353 5.09647L6.81221 9.17085L12.4488 11.4255L15.4895 17.5068L19.0353 5.09647Z" fill="white"/></g></svg>') no-repeat center center;
background-size: contain;
}
.sns_menu .instagram a {
display: inline-block;
font-size: calc(15 / 17 * 1rem);
font-weight: 300;
}
.sns_menu .instagram a:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 22px;
height: 22px;
margin-right: 10px;
opacity: 0.5;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14.0012 10.5C12.0675 10.5 10.5011 12.0669 10.5011 14C10.5011 15.9335 12.0681 17.5 14.0012 17.5C15.9347 17.5 17.5012 15.933 17.5012 14C17.5012 12.0665 15.9342 10.5 14.0012 10.5ZM14.0012 8.16665C17.2216 8.16665 19.8345 10.7766 19.8345 14C19.8345 17.2206 17.2245 19.8333 14.0012 19.8333C10.7806 19.8333 8.16781 17.2234 8.16781 14C8.16781 10.7794 10.7778 8.16665 14.0012 8.16665ZM21.5845 7.87399C21.5845 8.67912 20.9302 9.33235 20.1262 9.33235C19.321 9.33235 18.6678 8.67811 18.6678 7.87399C18.6678 7.06986 19.322 6.41665 20.1262 6.41665C20.9292 6.41563 21.5845 7.06986 21.5845 7.87399ZM14.0012 4.66665C11.1142 4.66665 10.6437 4.67429 9.30098 4.73408C8.38617 4.77702 7.77295 4.90006 7.20318 5.12126C6.69685 5.31764 6.3316 5.55212 5.94244 5.94129C5.55178 6.33195 5.31771 6.69622 5.12213 7.20278C4.90042 7.77385 4.77741 8.38611 4.73524 9.29966C4.67486 10.5877 4.66781 11.0379 4.66781 14C4.66781 16.8869 4.67545 17.3574 4.73523 18.7C4.7782 19.6145 4.9014 20.2286 5.12206 20.797C5.31895 21.304 5.55391 21.6701 5.9412 22.0575C6.3334 22.4491 6.69875 22.684 7.20051 22.8776C7.77722 23.1006 8.39006 23.2238 9.3008 23.2659C10.5889 23.3262 11.039 23.3333 14.0012 23.3333C16.8881 23.3333 17.3586 23.3256 18.7012 23.2659C19.6136 23.2231 20.2282 23.0995 20.7982 22.879C21.3038 22.6827 21.6711 22.4469 22.0586 22.0599C22.4509 21.6671 22.6852 21.3026 22.8791 20.7997C23.1015 20.2251 23.2249 19.6114 23.2671 18.7004C23.3274 17.4122 23.3345 16.962 23.3345 14C23.3345 11.1131 23.3268 10.6426 23.2671 9.29991C23.2241 8.38722 23.1006 7.77172 22.8798 7.20202C22.684 6.69709 22.4486 6.33072 22.0598 5.94129C21.6685 5.54999 21.3052 5.3164 20.7983 5.12097C20.2277 4.89944 19.6145 4.77627 18.7014 4.73409C17.4134 4.6737 16.9632 4.66665 14.0012 4.66665ZM14.0012 2.33331C17.1705 2.33331 17.5663 2.34498 18.8107 2.40331C20.0522 2.46068 20.8991 2.65706 21.6428 2.94581C22.4118 3.24234 23.0613 3.6429 23.7097 4.29136C24.3572 4.93985 24.7578 5.59123 25.0553 6.35831C25.343 7.1011 25.5395 7.94887 25.5978 9.1904C25.6532 10.4348 25.6678 10.8305 25.6678 14C25.6678 17.1695 25.6562 17.5651 25.5978 18.8096C25.5404 20.0511 25.343 20.8979 25.0553 21.6416C24.7588 22.4107 24.3572 23.0601 23.7097 23.7086C23.0613 24.3561 22.4089 24.7567 21.6428 25.0542C20.8991 25.342 20.0522 25.5383 18.8107 25.5967C17.5663 25.6521 17.1705 25.6667 14.0012 25.6667C10.8317 25.6667 10.436 25.655 9.19156 25.5967C7.95002 25.5393 7.10419 25.342 6.35947 25.0542C5.59141 24.7576 4.94099 24.3561 4.29252 23.7086C3.64406 23.0601 3.24447 22.4078 2.94697 21.6416C2.65822 20.8979 2.46281 20.0511 2.40447 18.8096C2.34906 17.5651 2.33447 17.1695 2.33447 14C2.33447 10.8305 2.34614 10.4348 2.40447 9.1904C2.46183 7.9479 2.65822 7.10206 2.94697 6.35831C3.24349 5.59026 3.64406 4.93985 4.29252 4.29136C4.94099 3.6429 5.59239 3.24331 6.35947 2.94581C7.10322 2.65706 7.94906 2.46165 9.19156 2.40331C10.436 2.3479 10.8317 2.33331 14.0012 2.33331Z" fill="white"/></svg>') no-repeat center center;
background-size: contain;
}
.section {
position: relative;
padding-top: 50px;
padding-bottom: 50px;
}
@media screen and (min-width: 768px) {
.section {
padding-top: 80px;
padding-bottom: 80px;
}
}
.section .section__title {
margin-bottom: calc(40px / 2);
}
@media screen and (min-width: 768px) {
.section .section__title {
margin-bottom: 40px;
}
} ul.other-option {
display: flex;
column-gap: 20px;
border-bottom: 1px solid #C3C3C3;
padding: 20px 0;
margin: 0;
}
ul.other-option:last-child {
border-bottom: none;
}
ul.other-option li {
list-style-type: none;
}
ul.other-option li:nth-child(1) {
width: 150px;
}
ul.other-option li:nth-child(2) {
width: calc(100% - 150px);
}
ul p {
margin: 0 0 5px 0;
}
.grayout {
opacity: 0.3;
}
@media screen and (max-width: 767px) {
ul.other-option {
flex-wrap: wrap;
}
ul.other-option li:nth-child(1) {
width: 100%;
margin-bottom: 10px;
}
ul.other-option li:nth-child(2) {
width: 100%;
}
}
#wrapper {
overflow: hidden;
}
#pageHeader {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 99;
}
#pageHeader .container {
width: 100%;
}
#pageHeader .header__contents,
#pageHeader .header__contents_nl {
display: flex;
justify-content: flex-end;
padding-top: 40px; 
}
#pageHeader .header__contents {
padding-right: 80px;
}
@media screen and (max-width: 767px) {
#pageHeader .header__contents,
#pageHeader .header__contents_nl {
padding-top: 6.3636363636vw;
}
}
#pageHeader .header__logo {
position: fixed;
left: 40px;
top: 40px;
}
#pageHeader .header__logo img {
width: 60px;
}
@media screen and (max-width: 767px) {
#pageHeader .header__logo {
top: 6.3636363636vw;
left: 6.3636363636vw;
}
}
#pageHeader .header__menu {
display: flex;
justify-content: flex-end;
align-items: center;
column-gap: 30px;
}
#pageHeader .header__menu .menu {
display: flex;
column-gap: 30px;
font-size: calc(25 / 17 * 1rem);
font-weight: 300;
}
@media screen and (max-width: 767px) {
#pageHeader .header__menu .menu {
display: none;
}
}
#pageHeader .header__menu .menu .sub-menu {
display: none;
}
@media screen and (max-width: 767px) {
#pageHeader .header__menu .language__switcher {
display: none;
}
}
#pageHeader .header__menu__open {
position: fixed;
top: 45px;
right: 40px;
}
#pageHeader .header__menu__open:before, #pageHeader .header__menu__open:after {
content: "";
display: block;
width: 55px;
height: 2px;
margin: 8px auto;
background: var(--color_font);
}
@media screen and (max-width: 767px) {
#pageHeader .header__menu__open:before, #pageHeader .header__menu__open:after {
width: 40px;
}
}
@media screen and (max-width: 767px) {
#pageHeader .header__menu__open {
top: 6.3636363636vw;
right: 6.3636363636vw;
}
}
#pageHeader .header__navigation {
position: fixed;
right: 0;
top: 0;
height: 100vh;
background: var(--color_secondary);
z-index: 999;
width: 40%;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
padding: 60px 80px 20px;
color: var(--color_white);
}
@media screen and (max-width: 767px) {
#pageHeader .header__navigation {
padding: 13.6363636364vw 6.3636363636vw 10px;
width: 100%;
}
}
#pageHeader .header__navigation.is-open {
transform: translateX(0);
}
#pageHeader .header__navigation__close {
position: absolute;
display: block;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="53" height="21" viewBox="0 0 53 21" fill="none"><rect x="0.684052" width="55" height="2" transform="rotate(20 0.684052 0)" fill="white"/><rect y="18.8111" width="55" height="2" transform="rotate(-20 0 18.8111)" fill="white"/></svg>') no-repeat right top;
background-size: contain;
width: 53px;
height: 21px;
right: 40px;
top: 40px;
cursor: pointer;
}
@media screen and (max-width: 767px) {
#pageHeader .header__navigation__close {
width: 40px;
right: 6.3636363636vw;
top: 6.3636363636vw;
}
}
#pageHeader .header__navigation a {
color: var(--color_white);
}
#pageHeader .header__navigation .menu {
color: var(--color_white);
font-size: calc(22 / 17 * 1rem);
font-weight: 300;
line-height: 2;
}
@media screen and (min-width: 768px) {
#pageHeader .header__navigation .menu {
line-height: 1.8;
}
}
@media screen and (max-width: 767px) {
#pageHeader .header__navigation .menu {
font-size: calc(22 / 17 * 1rem);
}
}
#pageHeader .header__navigation .menu__wrapper {
margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
#pageHeader .header__navigation .menu__wrapper {
margin-bottom: 15px;
}
}
#pageHeader .header__navigation .menu .sub-menu {
margin-left: 0.6em;
}
#pageHeader .header__navigation .menu .sub-menu li:before {
content: "-";
display: inline-block;
font-size: calc(22 / 17 * 1rem);
margin-left: -0.6em;
width: 1em;
text-align: left; opacity: 0.3;
}
@media screen and (max-width: 767px) {
#pageHeader .header__navigation .menu .sub-menu li:before {
font-size: calc(26 / 17 * 1rem);
}
}
#pageHeader .header__navigation .language__switcher {
font-size: calc(22 / 17 * 1rem);
font-weight: 400;
}
#pageHeader .header__navigation .language__switcher__wrapper {
margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
#pageHeader .header__navigation .language__switcher {
font-size: calc(22 / 17 * 1rem);
}
#pageHeader .header__navigation .language__switcher__wrapper {
margin-bottom: 15px;
}
}
#pageHeader .header__navigation .button_menu__wrapper {
margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
#pageHeader .header__navigation .button_menu__wrapper {
margin-bottom: 15px;
}
}
#pageFooter {
background: #3F3F3F;
color: var(--color_white);
padding-top: 80px;
padding-bottom: 60px;
}
#pageFooter .container {
width: 100%;
}
@media screen and (max-width: 767px) {
#pageFooter {
padding-top: 60px;
}
}
#pageFooter .footer__contents {
display: flex;
justify-content: space-between;
align-items: flex-start;
color: var(--color_white);
}
@media screen and (max-width: 767px) {
#pageFooter .footer__contents {
flex-direction: column;
row-gap: 6.3636363636vw;
}
}
#pageFooter .footer__contents a {
color: var(--color_white);
font-weight: 200;
}
#pageFooter .footer__logo {
flex-shrink: 0;
}
#pageFooter .footer__logo a {
display: block;
}
#pageFooter .footer__logo a:hover img {
opacity: 0.2;
}
#pageFooter .footer__logo img {
width: 200px;
opacity: 0.4;
}
@media screen and (max-width: 767px) {
#pageFooter .footer__logo img {
width: 160px;
}
}
#pageFooter .footer__menu {
display: flex;
justify-content: flex-end;
align-items: flex-start;
column-gap: 40px;
font-size: calc(20 / 17 * 1rem);
font-weight: 300;
}
#pageFooter .footer__menu .menu {
display: flex;
justify-content: flex-end;
align-items: flex-start;
column-gap: 40px;
}
#pageFooter .footer__menu .language__switcher,
#pageFooter .footer__menu .language__switcher_nl {
font-size: calc(20 / 17 * 1rem);
font-weight: 300;
}
@media screen and (max-width: 767px) {
#pageFooter .footer__menu {
display: block;
column-gap: 20px;
row-gap: 20px;
font-size: calc(22 / 17 * 1rem);
}
#pageFooter .footer__menu .menu {
display: block;
column-gap: 20px;
justify-content: flex-start;
}
#pageFooter .footer__menu .language__switcher,
#pageFooter .footer__menu .language__switcher_nl {
margin-top: 16px;
font-size: calc(22 / 17 * 1rem);
}
}
#pageFooter .footer__menu .menu .sub-menu {
margin-left: 0.6em;
}
#pageFooter .footer__menu .menu .sub-menu li:before {
content: "-";
display: inline-block;
font-size: calc(22 / 17 * 1rem);
margin-left: -0.6em;
width: 1em;
text-align: left; opacity: 0.3;
}
@media screen and (max-width: 767px) {
#pageFooter .footer__menu .menu .sub-menu li:before {
font-size: calc(26 / 17 * 1rem);
}
}
#pageFooter .footer__sns {
display: flex;
justify-content: flex-end;
margin-top: 30px;
}
@media screen and (max-width: 767px) {
#pageFooter .footer__sns {
display: block;
}
}
#pageFooter .footer__sns .sns_menu .instagram a {
text-indent: -1000px;
overflow: hidden;
width: 24px;
height: 24px;
position: relative;
}
#pageFooter .footer__sns .sns_menu .instagram a:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#pageFooter .footer__bottom {
margin-top: 30px;
border-top: 1px solid rgba(217, 217, 217, 0.3);
padding-top: 30px;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 767px) {
#pageFooter .footer__bottom {
flex-direction: column;
row-gap: 10px;
}
}
#pageFooter .footer__address {
opacity: 0.6;
font-size: calc(12 / 17 * 1rem);
}
#pageFooter .footer__address__map {
display: inline-block;
font-weight: 200;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 15.8188L3.75736 11.5762C1.41421 9.23296 1.41421 5.434 3.75736 3.09086C6.10051 0.747709 9.89947 0.747709 12.2427 3.09086C14.5858 5.434 14.5858 9.23296 12.2427 11.5762L8 15.8188ZM11.2998 10.6333C13.1223 8.8109 13.1223 5.85611 11.2998 4.03366C9.4774 2.21122 6.52261 2.21122 4.70017 4.03366C2.87772 5.85611 2.87772 8.8109 4.70017 10.6333L8 13.9332L11.2998 10.6333ZM8 8.66683C7.2636 8.66683 6.66667 8.0699 6.66667 7.3335C6.66667 6.59712 7.2636 6.00016 8 6.00016C8.7364 6.00016 9.33333 6.59712 9.33333 7.3335C9.33333 8.0699 8.7364 8.66683 8 8.66683Z" fill="white" /></svg>') no-repeat left center;
background-size: 16px auto;
padding-left: 20px;
margin-left: 10px;
color: var(--color_white);
}
@media screen and (max-width: 767px) {
#pageFooter .footer__address {
font-size: calc(14 / 17 * 1rem);
}
#pageFooter .footer__address__map {
margin-left: 0px;
}
}
#pageFooter .footer__copyright {
opacity: 0.6;
font-size: calc(15 / 17 * 1rem);
font-weight: 200;
}
#pageMain {
margin-top: 150px; }
@media screen and (max-width: 767px) {
#pageMain {
margin-top: 80px;
}
}
@keyframes mmfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mmfadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes mmslideIn {
from {
transform: translateY(15%);
}
to {
transform: translateY(0);
}
}
@keyframes mmslideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(-10%);
}
}
#pageMain .modal {
display: none;
}
#pageMain .modal.is-open {
display: block;
}
#pageMain .modal[aria-hidden=false] .modal-overlay {
animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#pageMain .modal[aria-hidden=false] .modal-container {
animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#pageMain .modal[aria-hidden=true] .modal-overlay {
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#pageMain .modal[aria-hidden=true] .modal-container {
animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#pageMain .modal-overlay {
align-items: center;
background: rgba(0, 0, 0, 0.6);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 100;
will-change: transform;
}
#pageMain .modal-close {
background: transparent;
border: 0;
width: 70px;
height: 70px;
background: var(--color_secondary);
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#pageMain .modal-close:before {
content: "";
display: block;
width: 33px;
height: 33px;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none"><path d="M8.8 26.125L6.875 24.2L14.575 16.5L6.875 8.8L8.8 6.875L16.5 14.575L24.2 6.875L26.125 8.8L18.425 16.5L26.125 24.2L24.2 26.125L16.5 18.425L8.8 26.125Z" fill="white"/></svg>') no-repeat center center;
background-size: contain;
}
@media screen and (max-width: 767px) {
#pageMain .modal-close {
width: 35px;
height: 35px;
}
#pageMain .modal-close:before {
width: 17px;
height: 17px;
}
}
#pageMain .modal-container {
background-color: var(--color_white);
border-radius: 30px;
width: 800px;
height: 600px;
max-width: 80%;
max-height: 90vh;
padding: 60px;
will-change: transform;
position: relative;
}
#pageMain .modal-container .modal-close {
position: absolute;
right: 20px;
top: 20px;
}
@media screen and (max-width: 767px) {
#pageMain .modal-container {
border-radius: 15px;
padding: 9.0909090909vw 4.5454545455vw 4.5454545455vw;
max-width: 90vw;
}
#pageMain .modal-container .modal-close {
right: 2.2727272727vw;
top: 2.2727272727vw;
}
}
#pageMain .modal-contents {
height: 100%;
overflow-y: auto;
}
#pageMain .flexslider {
margin: 0;
border-radius: 0;
border: none;
background: transparent;
}
#pageMain .flexslider__wrapper {
position: relative;
}
#pageMain .flexslider .flex-direction-nav .flex-prev, #pageMain .flexslider .flex-direction-nav .flex-next {
opacity: 0;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none"><path d="M20.6344 28.4166L22.9271 26.1239L12.3031 15.4999L22.9271 4.87596L20.6344 2.58325L7.71771 15.4999L20.6344 28.4166Z" fill="%231F1F1F"/></svg>') no-repeat center center rgba(255, 255, 255, 0.3);
border-radius: 50%;
width: 70px;
height: 70px;
text-indent: -1000px;
text-align: left;
overflow: hidden;
margin: 0;
transform: translateY(-50%);
}
#pageMain .flexslider .flex-direction-nav .flex-prev::before, #pageMain .flexslider .flex-direction-nav .flex-next::before {
display: none;
}
@media screen and (max-width: 767px) {
#pageMain .flexslider .flex-direction-nav .flex-prev, #pageMain .flexslider .flex-direction-nav .flex-next {
width: 46px;
height: 46px;
}
}
#pageMain .flexslider .flex-direction-nav .flex-next {
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="26" viewBox="0 0 16 26" fill="none"><path d="M2.29271 25.8333L0 23.5406L10.624 12.9167L0 2.29271L2.29271 0L15.2094 12.9167L2.29271 25.8333Z" fill="%231F1F1F"/></svg>');
}
#pageMain .flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 10px;
top: 50%; transition: unset;
}
#pageMain .flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 10px;
top: 50%; }
#pageMain .product_slider .product__block a {
display: block;
height: 100%;
position: relative;
transition: opacity 0.3s ease-in-out;
overflow: hidden;
aspect-ratio: 3/4;
}
#pageMain .product_slider .product__block a:after {
opacity: 0;
content: "View Product";
background: rgba(0, 0, 0, 0.7);
color: var(--color_white);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: calc(20 / 17 * 1rem);
font-weight: 300;
}
#pageMain .product_slider .product__block a:hover:after {
opacity: 1;
}
#pageMain .product_slider .product__block a:hover img {
transform: scale(1.1);
}
#pageMain .product_slider--gallery .product__block {
aspect-ratio: 3/4;
overflow: hidden;
}
#pageMain .pagination {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
} @media screen and (min-width: 768px) {
#pageMain .pagination a, #pageMain .pagination span {
font-size: calc(18 / 17 * 1rem);
line-height: 1.6;
}
}
@media screen and (max-width: 767px) {
#pageMain .breadcrumb {
margin-bottom: 20px;
}
}
#pageMain .breadcrumb ul {
display: flex;
gap: 10px;
overflow: hidden;
}
#pageMain .breadcrumb ul li {
font-size: calc(19 / 17 * 1rem);
font-weight: 200;
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
#pageMain .breadcrumb ul li {
font-size: calc(12 / 17 * 1rem);
}
}
#pageMain .breadcrumb ul li:after {
content: "/";
display: inline-block;
margin-left: 10px;
}
#pageMain .breadcrumb ul li:last-of-type:after {
display: none;
}
#pageMain .breadcrumb ul li a {
color: var(--color_link);
text-decoration: underline;
}
#pageMain .mention__list {
font-size: calc(12 / 17 * 1rem);
margin-left: 1em;
}
#pageMain .mention__list li:before {
content: "*";
display: inline-block;
width: 1em;
margin-left: -1em;
}
#pageMain .product__list {
display: flex;
column-gap: 32px;
row-gap: 76px;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
}
#pageMain .product__list > div {
width: calc((100% - 64px) / 3);
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
#pageMain .product__list {
column-gap: 2.6666666667vw;
row-gap: 8vw;
}
#pageMain .product__list > div {
width: calc((100% - 2.6666666667vw) / 2);
}
}
#pageMain .product__main {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
@media screen and (max-width: 767px) {
#pageMain .product__main {
flex-direction: column;
}
}
#pageMain .product__main--sold_out .product__price__price__amount {
text-decoration: line-through;
}
#pageMain .product__images {
width: 55%;
}
@media screen and (max-width: 767px) {
#pageMain .product__images {
width: 100%;
}
}
#pageMain .product__images .aside-visual {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-start;
}
#pageMain .product__images .slider {
width: calc(100% - 90px);
}
#pageMain .product__images .thumbnail {
width: 85px;
}
#pageMain .product__images .thumbnail .slides li {
float: none !important;
margin-bottom: 5px;
}
#pageMain .product__images .thumbnail:hover .flex-direction-nav .flex-prev {
opacity: 0.7;
left: 50%;
top: 10px;
transform: translate(-50%, 0);
transition: unset;
}
#pageMain .product__images .thumbnail:hover .flex-direction-nav .flex-next {
opacity: 0.7;
left: 50%;
transform: translate(-50%, 0);
bottom: unset;
right: unset;
top: unset;
}
#pageMain .product__images .thumbnail .flex-direction-nav {
display: none;
}
#pageMain .product__contents {
width: 38.3333333333%;
}
@media screen and (max-width: 767px) {
#pageMain .product__contents {
width: 100%;
}
}
#pageMain .product__contents h2 {
color: #5A5A5A;
font-size: calc(65 / 17 * 1rem);
font-weight: 300;
}
@media screen and (max-width: 767px) {
#pageMain .product__contents h2 {
font-size: calc(54 / 17 * 1rem);
}
}
#pageMain .product__contents h3 {
color: var(--color_secondary);
font-size: calc(41 / 17 * 1rem);
font-weight: 300;
}
@media screen and (max-width: 767px) {
#pageMain .product__contents h3 {
font-size: calc(30 / 17 * 1rem);
}
}
#pageMain .product__contents > div {
border-bottom: 1px solid #C3C3C3;
padding-bottom: 30px;
margin-bottom: 30px;
}
#pageMain .product__contents > div:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
#pageMain .product__specification dl {
display: flex;
column-gap: 20px;
font-size: calc(21 / 17 * 1rem);
}
#pageMain .product__specification dl dt {
width: 90px;
flex-shrink: 0;
}
#pageMain .product__specification dl dd {
flex-grow: 1;
}
#pageMain .product__label {
display: inline-block;
border-radius: 2px;
background: #9D9B7D;
color: var(--color_white);
font-size: calc(14 / 17 * 1rem);
font-weight: 300;
line-height: 1.4;
padding: 0 6px;
vertical-align: middle;
margin-left: 10px;
}
#pageMain .product__buttons {
text-align: center;
}
#pageMain .product__button {
display: inline-block;
border-radius: 10px;
background: var(--color_black);
border: 2px solid var(--color_black);
color: var(--color_white);
text-align: center;
font-size: calc(24 / 17 * 1rem);
font-weight: 300;
letter-spacing: 0.01em;
width: 460px;
max-width: 100%;
padding: 30px 0;
position: relative;
}
@media screen and (max-width: 767px) {
#pageMain .product__button {
font-size: calc(20 / 17 * 1rem);
padding-top: 1em;
padding-bottom: 1em;
}
}
#pageMain .product__button:before {
content: "";
display: block;
position: absolute;
left: 10.8695652174%;
top: 50%;
width: 21px;
height: 21px;
background: url(https://blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/images/ico_check.svg) no-repeat center center;
transform: translateY(-50%);
transition: left 0.3s ease-in-out;
}
#pageMain .product__button:hover, #pageMain .product__button:focus, #pageMain .product__button:active {
background: var(--color_white);
color: var(--color_black);
}
#pageMain .product__button:hover:before, #pageMain .product__button:focus:before, #pageMain .product__button:active:before {
left: 11.9565217391%;
}
#pageMain .product__button--cart:before {
width: 28px;
height: 28px;
background-image: url(https://blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/images/ico_cart.svg);
}
#pageMain .product__button + .product__button {
margin-top: 30px;
}
#pageMain .product__paypal, #pageMain .product__paypal form {
width: 100% !important;
}
#pageMain .product__paypal input[type=submit] {
width: 100% !important;
height: 80px !important;
border-radius: 10px !important;
}
#pageMain .product__paypal section {
display: flex;
align-items: center;
column-gap: 10px;
}
#pageMain .product__option h3 {
color: var(--color_secondary);
font-size: calc(41 / 17 * 1rem);
font-weight: 300;
}
@media screen and (max-width: 767px) {
#pageMain .product__option h3 {
font-size: calc(20 / 17 * 1rem);
}
}
#pageMain .product__option dl {
display: flex;
column-gap: 50px;
border-bottom: 1px solid #C3C3C3;
padding: 10px 0;
align-items: center;
}
#pageMain .product__option dl:before {
width: 40px;
content: "01";
display: block;
color: #C3C3C3;
font-size: calc(50 / 17 * 1rem);
font-size: 40px;
font-weight: 200;
letter-spacing: 0.05em;
flex-shrink: 0;
}
#pageMain .product__option dl dt {
width: 150px;
flex-shrink: 0;
font-size: calc(19 / 17 * 1rem); }
@media screen and (max-width: 767px) {
#pageMain .product__option dl {
flex-wrap: wrap;
column-gap: 20px;
}
#pageMain .product__option dl:before {
font-size: calc(25 / 17 * 1rem);
}
#pageMain .product__option dl dt {
width: auto;
}
#pageMain .product__option dl dd {
width: 100%;
padding-left: 60px;
}
}
#pageMain .product__option dl:nth-of-type(2):before {
content: "02";
}
#pageMain .product__option dl:nth-of-type(3):before {
content: "03";
}
#pageMain .product__option dl:nth-of-type(4):before {
content: "04";
}
#pageMain .product__option dl:nth-of-type(5):before {
content: "05";
}
#pageMain .product__option dl:nth-of-type(6):before {
content: "06";
}
#pageMain .product__sample h3 {
color: var(--color_secondary);
font-size: calc(41 / 17 * 1rem);
font-weight: 300;
}
@media screen and (max-width: 767px) {
#pageMain .product__sample h3 {
font-size: calc(20 / 17 * 1rem);
}
}
#pageMain .product__sample .slides a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;   	
aspect-ratio: 3/4;
}
#pageMain .product__sample .slides img {
display: block;
font-family: "object-fit: cover;";
width: 100% !important;
height: 100% !important;
aspect-ratio: 3/4;
object-fit: cover; } #pageMain .product__images .slides li {
aspect-ratio: 3/4;
}
#pageMain .product__images .slides li img {
object-fit: cover;
font-family: "object-fit: cover;";
width: 100% !important;
height: 100% !important;
}
#pageMain .product__thumbnail {
margin-bottom: 16px;
display: block;
height: 100%;
position: relative;
transition: opacity 0.3s ease-in-out;
overflow: hidden;
}
#pageMain .product__thumbnail:after {
opacity: 0;
content: "View Product";
background: rgba(0, 0, 0, 0.7);
color: var(--color_white);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: calc(20 / 17 * 1rem);
font-weight: 300;
}
#pageMain .product__thumbnail:hover:after {
opacity: 1;
}
#pageMain .product__thumbnail:hover img {
transform: scale(1.1);
}
#pageMain .product__block .product__title {
font-size: calc(19 / 17 * 1rem);
font-weight: 400;
}
@media screen and (max-width: 767px) {
#pageMain .product__block .product__title {
font-size: calc(16 / 17 * 1rem);
}
}
#pageMain .product__block .product__price__price {
color: #0CA2FF;
font-size: calc(24 / 17 * 1rem);
}
@media screen and (max-width: 767px) {
#pageMain .product__block .product__price__price {
font-size: calc(20 / 17 * 1rem);
}
}
#pageMain .product__block--sold_out .product__price__price {
text-decoration-line: line-through;
}
#pageContents {
padding-bottom: 300px;
}
@media screen and (max-width: 767px) {
#pageContents {
padding-bottom: 30vw;
}
}
#pageTitle {
padding-top: 30px;
}
#pageTitle h1 {
font-size: calc(110 / 17 * 1rem);
font-weight: 100;
}
@media screen and (max-width: 767px) {
#pageTitle h1 {
font-size: calc(50 / 17 * 1rem);
}
} #newsletter {
width: 100%;
margin: 0;
padding: 0;
}
#newsletter a {
position: relative;
display: block;
background: #0070E0;
padding-top: 40px;
padding-bottom: 40px;
}
#newsletter a:hover {
background-color: #045BB2;
}
#newsletter a .container {
width: 100%;
display: flex;
color: var(--color_white);
column-gap: 20px;
}
#newsletter a .container:after {
content: "";
display: block;
position: absolute;
right: 40px;
top: 50%;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3); background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M6.68742 18.3334L5.20825 16.8542L12.0624 10L5.20825 3.14585L6.68742 1.66669L15.0208 10L6.68742 18.3334Z" fill="white"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 20px; transform: translateY(-50%) translateZ(0); 
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);  backface-visibility: hidden;
perspective: 1000px ;
z-index: 10;
}
#newsletter a:hover .container:after {
transform: translateY(-50%) translateX(-10px) translateZ(0);
}
#newsletter .section__sp {
display: none;
}
@media screen and (max-width: 767px) {
#newsletter {
overflow: visible;
}	
#newsletter .container {
flex-direction: column;
}
#newsletter a .container:after {
display: none;
}
#newsletter .section__sp {
display: inline-block;
margin-top: 5px;
font-size: calc(17 / 17 * 1rem);
letter-spacing: 0.07em;
}
}
#newsletter .section__title { flex-shrink: 0;
flex-direction: row;
flex-wrap: wrap;
display: flex;
align-items: center;
column-gap: 30px;
margin-bottom: 0;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
transform: translateX(0) translateZ(0); 
text-align: left;
}
#newsletter a:hover .section__title,
.section__title a:hover .section__title_text {
transform: translateX(10px) translateZ(0);
}
#newsletter .section__title h2 {
font-size: calc(39 / 17 * 1rem);
font-weight: 200;
line-height: 1;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none"><g opacity="0.3"><path d="M2.51368 12.0324C1.83874 11.8075 1.8334 11.4445 2.52757 11.2131L27.1805 2.99541C27.8632 2.76787 28.2547 3.14995 28.0634 3.8194L21.0197 28.4725C20.8246 29.155 20.4312 29.1788 20.1428 28.5298L15.4999 18.0834L23.2499 7.75008L12.9166 15.5L2.51368 12.0324Z" fill="white"/></g></svg>') no-repeat left center;
background-size: 31px auto;
padding-left: 50px;
flex-shrink: 0;
margin: 0;
}
#newsletter .section__title p {
width: clamp(300px, 55vw, 900px);
font-size: calc(14 / 17 * 1rem);
margin: 5px 0 0;
}
#newsletter .section__title a {
color: var(--color_white);
}
@media screen and (max-width: 767px) {
#newsletter .section__title {
flex-direction: column;
width: 100%;
}
#newsletter .section__title h2 {
margin-left: 0;
font-size: calc(24 / 17 * 1rem);
margin-bottom: 20px;    
width: auto;
margin-left: 0;
margin-right: auto;
text-align: left;
}
#newsletter .section__title p {
width: 100%;  
font-size: calc(15 / 17 * 1rem);
}
}
#newsletter .section__contents {
flex-grow: 1;
}
@media screen and (max-width: 767px) {
#newsletter .section__contents {
width: 100%;
}
}
body.page .page__title {
text-align: center;
}
body.page .page__title h1 {
font-size: calc(20 / 17 * 1rem);
font-weight: 700;
} @media screen and (max-width: 767px) {
body.single #ez-toc-container, body.page #ez-toc-container {
width: 100%;
}
}
body.single #ez-toc-container .ez-toc-list li, body.page #ez-toc-container .ez-toc-list li {
padding-top: 0.5em;
}
body[class*=page_home] #wrapper {
overflow: unset;
}
body[class*=page_home] #pageHeader {
color: var(--color_white);
}
body[class*=page_home] #pageHeader a {
color: var(--color_white);
}
body[class*=page_home] #pageHeader .header__menu__open:before, body[class*=page_home] #pageHeader .header__menu__open:after {
background-color: var(--color_white);
}
body[class*=page_home] #pageMain {
margin-top: 0;
}
body[class*=page_home] .section {
overflow: hidden;
padding-top: 180px;
padding-bottom: 180px;
top: 0;
}
@media screen and (max-width: 767px) {
body[class*=page_home] .section {
padding-top: 100px;
padding-bottom: 100px;
}
}
body[class*=page_home] #mv {
position: sticky;
width: 100%;
height: 100vh;
padding: 0;
}
body[class*=page_home] #mv:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(32, 31, 28, 0.45);
z-index: 1;
}
body[class*=page_home] #mv .mv__bg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
height: 100%;
width: auto;
max-width: 1000vw;
z-index: 0;
display: block;
pointer-events: none; }
@media (min-aspect-ratio: 16/9) {
body[class*=page_home] #mv .mv__bg {
height: auto;
width: 100%;   
}
} @media (max-width: 767px) {
.pc-only { display: none !important; }
.sp-only { display: block !important; }
}
@media (min-width: 768px) {
.pc-only { display: block !important; }
.sp-only { display: none !important; }
} video::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none;
}
body[class*=page_home] #mv .container {
height: 100%;
width: 1560px;
position: relative;
z-index: 2;
}
body[class*=page_home] #mv .container .section__contents {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #mv .container .section__contents {
align-items: center;
padding-bottom: 13.6363636364vw;
}
}
body[class*=page_home] #mv h1 {
color: var(--color_white);
font-size: calc(90 / 17 * 1rem);
font-weight: 200;
line-height: 1.1;
margin: 0;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #mv h1 {
font-size: calc(50 / 440 * 100vw);
}
}
body[class*=page_home] #philosophy {
background: url(//blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/images/home/philosophy_bg_01.webp) no-repeat center center;
background-attachment: fixed;
position: relative;
transition: all 0.4s ease;
background-size: cover;
color: var(--color_white);
text-align: center;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #philosophy {
background-image: url(//blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/images/home/philosophy_bg_sp.webp);
background-position: center bottom;
padding-bottom: 40vw;
}
}
body[class*=page_home] #philosophy:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(122, 119, 84, 0.7);
}
body[class*=page_home] #philosophy:after {
content: "";
display: block;
position: absolute;
left: 38%;
top: 0;
width: 480px;
height: 1px;
background: var(--color_white);
transform: rotate(135deg);
}
@media screen and (max-width: 767px) {
body[class*=page_home] #philosophy:after {
width: 250px;
}
}
body[class*=page_home] #philosophy h2 {
font-size: calc(110 / 17 * 1rem);
font-weight: 200;
line-height: 1;
position: relative;
z-index: 1;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #philosophy h2 {
font-size: calc(50 / 17 * 1rem);
}
}
body[class*=page_home] #philosophy p + p {
margin-top: 2em;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #philosophy .section__title {
margin-bottom: 80px;
}
}
@media screen and (max-width: 767px) {
body[class*=page_home] #philosophy .section__contents {
font-size: calc(17 / 440 * 100vw);
}
}
body[class*=page_home] #philosophy .philosophy__block + .philosophy__block {
padding-top: 90px;
} body[class*=page_home] #philosophy .philosophy__block + .philosophy__block:nth-child(2) { transition-delay: 14.0s; }
body[class*=page_home] #philosophy .philosophy__block + .philosophy__block:nth-child(3) { transition-delay: 16.0s; }
body[class*=page_home] #philosophy .philosophy__block p {
position: relative;
z-index: 1;
opacity: 0; transform: translate(0, 10%);
transition: 2s;
}
body[class*=page_home] #philosophy .philosophy__block p.is-show {
opacity: 1;
}  body[class*=page_home] #philosophy .philosophy__block .philosophy__image {
opacity: 0;
transition: 2s;
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
display: block;
}
body[class*=page_home] #philosophy .philosophy__block .philosophy__image:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(122, 119, 84, 0.7);
}
body[class*=page_home] #philosophy .philosophy__block .philosophy__text {
margin-top: 60px;
}
body[class*=page_home] #philosophy .philosophy__block.is-show p {
transform: translate(0, 0);
opacity: 1;
}
body[class*=page_home] #philosophy .philosophy__block.is-show .philosophy__image {
opacity: 1;
z-index: 0;
}
body[class*=page_home] #profile {
background: #7B898B;
color: var(--color_white);
}
body[class*=page_home] #profile .container {
width: 1560px;
}
body[class*=page_home] #profile .section__contents {
display: flex;
justify-content: space-between;
column-gap: 100px;
align-items: flex-start;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #profile .section__contents {
flex-direction: column;
}
}
body[class*=page_home] #profile .section__contents p + p {
margin-top: 1em;
}
body[class*=page_home] #profile .profile__images {
flex-grow: 1;
}
body[class*=page_home] #profile .profile__images .profile__image {
opacity: 0;
transform: translateX(-50px);
transition: all 0.6s ease;
}
body[class*=page_home] #profile .profile__images .profile__image.is-show {
opacity: 1;
transform: translateX(0);
}
body[class*=page_home] #profile .profile__images .profile__image:nth-of-type(1).is-show {
transition-delay: 0s;
}
body[class*=page_home] #profile .profile__images .profile__image:nth-of-type(2).is-show {
transition-delay: 0.8s;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #profile .profile__images {
width: 100%;
}
}
body[class*=page_home] #profile .profile__image {
position: relative;
}
body[class*=page_home] #profile .profile__image:nth-of-type(1) { z-index: 1;
}
body[class*=page_home] #profile .profile__image:nth-of-type(1) img { margin-right: 0;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #profile .profile__image:nth-of-type(1) {
width: 59.0909090909vw;
margin: 0 auto;
}
}
body[class*=page_home] #profile .profile__image:nth-of-type(2) {
margin-top: -80px;
z-index: 0;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #profile .profile__image:nth-of-type(2) {
display: none;
}
}
body[class*=page_home] #profile .profile__contents {
width: 32.0512820513%;
flex-shrink: 0;
padding-top: 100px;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #profile .profile__contents {
width: auto; 
}
body[class*=page_home] #profile .profile__contents p {
font-size: calc(15 / 17 * 1rem); 
}
}
body[class*=page_home] #profile h2 {
font-size: calc(90 / 17 * 1rem);
font-weight: 200;
line-height: 1;
margin-bottom: 30px;
position: relative;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #profile h2 {
font-size: calc(50 / 17 * 1rem);
}
}
body[class*=page_home] #profile h2:before {
content: "";
display: block;
position: absolute;
width: 450px;
height: 1px;
transform: rotate(-45deg);
background: var(--color_secondary);
left: -64px;
top: -170px;
background: var(--color_white);
}
@media screen and (max-width: 767px) {
body[class*=page_home] #profile h2:before {
width: 80px;
left: 20px;
top: -50px;
}
}
body[class*=page_home] #profile .profile__name {
font-size: calc(26 / 17 * 1rem);
margin-bottom: 40px;
}
body[class*=page_home] #profile .profile__name__sub {
display: block;
font-size: calc(17 / 17 * 1rem);
}
body[class*=page_home] #products {
background: #DEDBD2;
}
body[class*=page_home] #products .container {
position: relative;
}
body[class*=page_home] #products .container:after {
content: "";
display: block;
position: absolute;
right: -190px;
top: -120px;
width: 280px;
height: 1px;
background: #5A5A5A;
transform: rotate(135deg);
}
body[class*=page_home] #products .section__title {
text-align: right;
}
body[class*=page_home] #products .section__title h2 {
font-size: calc(90 / 17 * 1rem);
font-weight: 200;
line-height: 1;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #products .section__title h2 {
font-size: calc(50 / 17 * 1rem);
}
}
body[class*=page_home] #products .product_slider {
position: absolute;
width: 100vw;
top: 0;
left: 50%;
transform: translateX(-50%);
}
body[class*=page_home] #products .product_slider__wrapper {
height: 413px;
position: relative;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #products .product_slider__wrapper {
height: 266.6666666667px;
}
}
body[class*=page_home] #products .product__links {
margin-top: 40px;
text-align: right;
font-size: calc(26 / 17 * 1rem);
font-weight: 200;
}
body[class*=page_home] #news {
background: url(//blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/images/home/news_bg.webp) no-repeat center center;
background-size: cover;
color: var(--color_white);
position: relative;
}
body[class*=page_home] #news:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
body[class*=page_home] #news:after {
content: "";
display: block;
position: absolute;
left: -20vw;
top: 0;
width: 100vw;
height: 1px;
background: var(--color_white);
transform: rotate(135deg);
}
body[class*=page_home] #news .container {
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 1280px;
column-gap: 100px;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #news .container {
flex-direction: column;
}
}
body[class*=page_home] #news .section__title {
text-align: left;
position: relative;
z-index: 1;
}
body[class*=page_home] #news .section__title img {
position: absolute;
right: 0;
width: 360px;
max-width: 100vw;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #news .section__title img {
display: none;
}
}
body[class*=page_home] #news .section__contents {
flex-grow: 1;
}
body[class*=page_home] #news h2 {
font-size: calc(90 / 17 * 1rem);
font-weight: 200;
line-height: 1;
text-align: right;
margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #news h2 {
font-size: calc(50 / 17 * 1rem);
}
}
body[class*=page_home] #news .news__list {
border-top: 1px solid #8297AA;
margin-bottom: 20px;
}
body[class*=page_home] #news .news__block {
border-bottom: 1px solid #8297AA;
}
body[class*=page_home] #news .news__block > a {
display: block;
position: relative;
font-size: calc(15 / 17 * 1rem);
font-weight: 400;
letter-spacing: 0.01em;
color: var(--color_white);
padding: 20px 30px 20px 0;
}
body[class*=page_home] #news .news__block > a:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 50%;
width: 20px;
height: 20px;
transform: translateY(-50%);
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M6.68742 18.3334L5.20825 16.8542L12.0624 10L5.20825 3.14585L6.68742 1.66669L15.0208 10L6.68742 18.3334Z" fill="white"/></svg>') no-repeat center center;
transition: all 0.4s ease;
}
body[class*=page_home] #news .news__block > a:hover:after {
right: 10px;
}
body[class*=page_home] #news .news__date {
font-size: calc(15 / 17 * 1rem);
font-weight: 400;
letter-spacing: 0.01em;
}
body[class*=page_home] #news .news__mention {
color: var(--color_white);
}
body[class*=page_home] #news .news__mention a {
color: var(--color_white);
}
body[class*=page_home] #news .news__article {
color: var(--color_font);
}
body[class*=page_home] #news .news__article__title {
font-size: calc(20 / 17 * 1rem);
text-align: left;
}
body[class*=page_home] #news .news__article__date {
font-size: calc(15 / 17 * 1rem);
color: #7B898B;
font-weight: 200;
letter-spacing: 0.01em;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #news .news__article__date {
font-size: calc(12 / 17 * 1rem);
}
}
body[class*=page_home] #news .news__article__contents {
margin-top: 24px;
font-size: calc(17 / 17 * 1rem);
line-height: 1.8;
}
body[class*=page_home] #news .news__article__contents a {
color: var(--color_link);
text-decoration: underline;
}
@media screen and (max-width: 767px) {
body[class*=page_home] #news .news__article__contents {
font-size: calc(15 / 17 * 1rem);
}
}
body.page_home_en #profile {
padding-bottom: 300px;
}
@media screen and (max-width: 767px) {
body.page_home_en #profile {
padding-bottom: 30vw;
}
}
body[class*=page_products] #pageTitle {
padding-bottom: 35px;
}
body[class*=page_products] #lead {
padding-top: 0;
}
@media screen and (min-width: 768px) {
body[class*=page_products] #lead {
width: 50%;
padding-bottom: 20px;
}
}
body[class*=page_products] #custom, body[class*=page_products] #cs_series, body[class*=page_products] #small_items {
display: flex;
align-items: flex-end;
}
@media screen and (min-width: 768px) {
body[class*=page_products] #custom, body[class*=page_products] #cs_series, body[class*=page_products] #small_items {
padding-top: 100px;
padding-bottom: 100px;
}
}
@media screen and (max-width: 767px) {
body[class*=page_products] #custom, body[class*=page_products] #cs_series, body[class*=page_products] #small_items {
flex-direction: column;
}
}
body[class*=page_products] #custom .section__title, body[class*=page_products] #cs_series .section__title, body[class*=page_products] #small_items .section__title {
padding: 0 6.3333333333%;
width: 33.3333333333%;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
body[class*=page_products] #custom .section__title, body[class*=page_products] #cs_series .section__title, body[class*=page_products] #small_items .section__title {
margin-bottom: 0;
}
}
body[class*=page_products] #custom .section__title h2, body[class*=page_products] #cs_series .section__title h2, body[class*=page_products] #small_items .section__title h2 {
font-size: calc(65 / 17 * 1rem);
font-weight: 200;
line-height: 1;
margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
body[class*=page_products] #custom .section__title, body[class*=page_products] #cs_series .section__title, body[class*=page_products] #small_items .section__title {
width: 100%;
padding-left: 0;
padding-right: 0;
}
body[class*=page_products] #custom .section__title h2, body[class*=page_products] #cs_series .section__title h2, body[class*=page_products] #small_items .section__title h2 {
font-size: calc(42 / 17 * 1rem);
}
}
body[class*=page_products] #custom .section__contents, body[class*=page_products] #cs_series .section__contents, body[class*=page_products] #small_items .section__contents {
width: calc(66.6666% + (100vw - 1200px) / 2);
}
@media screen and (max-width: 1200px) {
body[class*=page_products] #custom .section__contents, body[class*=page_products] #cs_series .section__contents, body[class*=page_products] #small_items .section__contents {
width: calc(66.6666% + 40px);
}
}
@media screen and (max-width: 767px) {
body[class*=page_products] #custom .section__contents, body[class*=page_products] #cs_series .section__contents, body[class*=page_products] #small_items .section__contents {
width: calc(100% + 12.7272727273vw);
margin-left: -6.3636363636vw;
margin-right: auto;
}
}
body[class*=page_products] #custom .product_slider__wrapper, body[class*=page_products] #cs_series .product_slider__wrapper, body[class*=page_products] #small_items .product_slider__wrapper {
width: calc(800px + (100vw - 1200px) / 2);
}
@media screen and (max-width: 1200px) {
body[class*=page_products] #custom .product_slider__wrapper, body[class*=page_products] #cs_series .product_slider__wrapper, body[class*=page_products] #small_items .product_slider__wrapper {
width: calc(100% + 40px);
}
}
@media screen and (max-width: 767px) {
body[class*=page_products] #custom .product_slider__wrapper, body[class*=page_products] #cs_series .product_slider__wrapper, body[class*=page_products] #small_items .product_slider__wrapper {
width: 100%;
}
}
body[class*=page_products] #custom .custom__links, body[class*=page_products] #cs_series .custom__links, body[class*=page_products] #small_items .custom__links {
margin-top: 40px;
}
body[class*=page_products] #custom .custom__links a, body[class*=page_products] #cs_series .custom__links a, body[class*=page_products] #small_items .custom__links a {
font-size: calc(26 / 17 * 1rem);
font-weight: 200;
}
@media screen and (max-width: 767px) {
body[class*=page_products] #custom .custom__links a, body[class*=page_products] #cs_series .custom__links a, body[class*=page_products] #small_items .custom__links a {
font-size: calc(18 / 17 * 1rem);
}
}
body[class*=page_products] #cs_series {
flex-direction: row-reverse;
}
body[class*=page_products] #cs_series .section__title {
position: relative;
}
body[class*=page_products] #cs_series .section__title:before {
content: "";
display: block;
position: absolute;
width: 288px;
height: 1px;
transform: rotate(-45deg);
background: var(--color_secondary);
top: -129.6px;
left: 34.4827586207%;
}
@media screen and (max-width: 767px) {
body[class*=page_products] #cs_series .section__title:before {
width: 100px;
left: auto;
top: -30px;
right: -30px;
}
}
@media screen and (max-width: 1200px) {
body[class*=page_products] #cs_series .product_slider__wrapper {
margin-left: -40px;
}
}
@media screen and (max-width: 767px) {
body[class*=page_products] #cs_series .product_slider__wrapper {
margin-left: auto;
}
}
@media screen and (max-width: 767px) {
body[class*=page_products] #cs_series {
flex-direction: column;
}
}
body[class*=page_products] #small_items .section__title {
position: relative;
}
body[class*=page_products] #small_items .section__title:before {
content: "";
display: block;
position: absolute;
width: 288px;
height: 1px;
transform: rotate(-45deg);
background: var(--color_secondary);
bottom: -129.6px;
left: -17.2413793103%;
}
@media screen and (max-width: 767px) {
body[class*=page_products] #small_items .section__title:before {
display: none;
}
}
body[class*=page_atelier] #pageTitle {
padding-bottom: 0;
}
body[class*=page_atelier] #pageContents {
padding-bottom: 0;
}
body[class*=page_atelier] #concept {
padding-top: 0;
}
body[class*=page_atelier] #concept:before {
content: "";
display: block;
position: absolute;
width: 218px;
height: 1px;
transform: rotate(-45deg);
background: var(--color_secondary);
top: -70px;
left: 30%;
}
@media screen and (max-width: 767px) {
body[class*=page_atelier] #concept {
padding-top: 20px;
}
body[class*=page_atelier] #concept:before {
width: 100px;
left: auto;
right: -30px;
}
}
body[class*=page_atelier] #concept .concept__block {
display: flex;
column-gap: 100px;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
body[class*=page_atelier] #concept .concept__contents {
width: 48.3333333333%;
flex-shrink: 0;
}
body[class*=page_atelier] #concept .concept__image img {
width: 720px;
max-width: 100vw;
}
@media screen and (max-width: 767px) {
body[class*=page_atelier] #concept .concept__block {
flex-direction: column;
}
body[class*=page_atelier] #concept .concept__contents {
width: auto;
margin-bottom: 60px;
}
body[class*=page_atelier] #concept .concept__image {
width: 100%;
}
body[class*=page_atelier] #concept .concept__image img {
width: 60vw;
margin-right: -6.3636363636vw;
}
}
body[class*=page_atelier] #concept .concept__bottom {
margin-top: -80px;
position: relative;
}
body[class*=page_atelier] #concept .concept__bottom img {
width: 1185px;
max-width: 100vw;
left: 50%;
transform: translateX(-18.3333333333%);
}
@media screen and (max-width: 767px) {
body[class*=page_atelier] #concept .concept__bottom {
margin-top: -9.0909090909vw;
}
}
body[class*=page_atelier] #info {
padding-bottom: 200px; }
@media screen and (max-width: 767px) {
body[class*=page_atelier] #info {
padding-bottom: 100px;
}
}
body[class*=page_atelier] #info .info__wrapper {
display: flex;
flex-direction: row-reverse; align-items: center;
}
body[class*=page_atelier] #info .info__wrapper > div {
flex: 1;
}
@media screen and (max-width: 767px) {
body[class*=page_atelier] #info .info__wrapper {
flex-direction: column;
}
}
body[class*=page_atelier] #info .info__info__title {
position: relative;
}
body[class*=page_atelier] #info .info__info__title:before {
content: "";
display: block;
position: absolute;
left: -20px;
bottom: 50px;
width: 916px;
height: 743px;
background: url(https://blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/images/atelier/info_bg.svg) no-repeat center center;
background-size: contain; }
body[class*=page_atelier] #info .info__info__title h2 {
font-size: calc(110 / 17 * 1rem);
font-weight: 200;
position: relative;
}
@media screen and (max-width: 767px) {
body[class*=page_atelier] #info .info__info__title {
margin-bottom: 20px;
}
body[class*=page_atelier] #info .info__info__title:before {
width: 80vw;
height: 64.8908296943vw;
left: 30vw;
top: -40vw;
}
body[class*=page_atelier] #info .info__info__title h2 {
font-size: calc(42 / 17 * 1rem);
}
}
body[class*=page_atelier] #info .info__info__contents {
border-top: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
padding: 30px 0;
}
body[class*=page_atelier] #info .info__info__contents a {
color: #0CA2FF;
text-decoration: underline;
}
body[class*=page_atelier] #info .info__info__contents dl {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
body[class*=page_atelier] #info .info__info__contents dl dt {
width: 110px;
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
body[class*=page_atelier] #info .info__info__contents dl dt {
width: 90px;
}
}
body[class*=page_atelier] #info .info__info__contents dl dd {
flex-grow: 1;
}
body[class*=page_atelier] #info .info__info__contents dl + dl {
margin-top: 1em;
}
body[class*=page_atelier] #info .info__schedule {
padding-right: 10%;
}
body[class*=page_atelier] #info .info__schedule__title {
text-align: center;
font-size: calc(22 / 17 * 1rem);
margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
body[class*=page_atelier] #info .info__schedule__title {
text-align: left;
font-size: calc(18 / 17 * 1rem);
}
}
@media screen and (max-width: 767px) {
body[class*=page_atelier] #info .info__schedule {
padding-right: 0;
margin-top: 40px;
}
}
body[class*=page_atelier] #map {
padding: 0;
height: 31.8287037037vw;
}
body[class*=page_atelier] #map .section__contents {
position: absolute;
width: 100vw;
height: 100%;
left: 50%;
transform: translateX(-50%);
top: 0;
}
body[class*=page_atelier] #map iframe {
width: 100%;
height: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
@media screen and (max-width: 767px) {
body[class*=page_atelier] #map {
height: 66.6666666667vw;
}
}
@media screen and (min-width: 768px) {
body.single-custom-order #pageTitle, body.single-cs-series #pageTitle {
padding-bottom: 50px;
}
}
body.single-custom-order #pageContents .modal-container, body.single-cs-series #pageContents .modal-container {
width: 580px;
height: 460px;
padding: 50px 60px;
}
@media screen and (max-width: 767px) {
body.single-custom-order #pageContents .modal-container, body.single-cs-series #pageContents .modal-container {
padding: 9.0909090909vw 4.5454545455vw 4.5454545455vw;
}
}
@media screen and (max-width: 767px) {
body.single-custom-order .product__contents, body.single-cs-series .product__contents {
margin-top: 30px;
}
}
body.single-custom-order .product__contents h2, body.single-cs-series .product__contents h2 {
line-height: 1;
}
body.single-custom-order .product__contents h3, body.single-cs-series .product__contents h3 {
margin-bottom: 10px;
}
body.single-custom-order .product__contents p + p, body.single-cs-series .product__contents p + p {
margin-top: 1em;
}
body.single-custom-order .product__price, body.single-cs-series .product__price {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
justify-content: flex-start;
align-items: center;
border-bottom: none !important;
}
body.single-custom-order .product__price__title, body.single-cs-series .product__price__title {
color: var(--color_secondary);
font-size: calc(27 / 17 * 1rem);
font-weight: 400;
}
body.single-custom-order .product__price__price, body.single-cs-series .product__price__price {
color: #0CA2FF;
font-size: calc(41 / 17 * 1rem);
}
body.single-custom-order .product__price__mention, body.single-cs-series .product__price__mention {
width: 100%;
color: #5A5A5A;
font-size: calc(14 / 17 * 1rem);
margin-top: 10px;
}
@media screen and (max-width: 767px) {
body.single-custom-order .product__price__title, body.single-cs-series .product__price__title {
font-size: calc(20 / 17 * 1rem);
}
body.single-custom-order .product__price__price, body.single-cs-series .product__price__price {
font-size: calc(25 / 17 * 1rem);
}
body.single-custom-order .product__price__mention, body.single-cs-series .product__price__mention {
font-size: calc(12 / 17 * 1rem);
}
}
body.single-custom-order .product__option, body.single-cs-series .product__option {
padding-top: 130px;
position: relative;
}
body.single-custom-order .product__option:before, body.single-cs-series .product__option:before {
content: "";
display: block;
position: absolute;
width: 218px;
height: 1px;
transform: rotate(-45deg);
background: var(--color_secondary);
top: 26px;
left: 38%;
}
body.single-custom-order .product__option__contents, body.single-cs-series .product__option__contents {
padding-bottom: 80px;
}
body.single-custom-order .product__option__contents__wrapper, body.single-cs-series .product__option__contents__wrapper {
position: relative;
max-height: 400px;
overflow: hidden;
transition: max-height 0.3s linear;
}
body.single-custom-order .product__option__contents__wrapper.is-open, body.single-cs-series .product__option__contents__wrapper.is-open {
max-height: 100vh;
}
body.single-custom-order .product__option__contents__wrapper.is-open .product__option__button:after, body.single-cs-series .product__option__contents__wrapper.is-open .product__option__button:after {
content: "Close";
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12" fill="none"><path d="M-2.98023e-07 10L1.775 11.775L10 3.55002L18.225 11.775L20 10L10 2.42386e-05L-2.98023e-07 10Z" fill="%230070E0"/></svg>');
}
body.single-custom-order .product__option__button, body.single-cs-series .product__option__button {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 170px;
cursor: pointer;
background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #F5F5F5 75%);
z-index: 1;
}
body.single-custom-order .product__option__button:after, body.single-cs-series .product__option__button:after {
content: "Read more";
display: block;
position: absolute;
text-align: center;
left: 0;
width: 100%;
bottom: 0;
padding-bottom: 20px;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12" fill="none"><path d="M0 1.775L1.775 0L10 8.225L18.225 0L20 1.775L10 11.775L0 1.775Z" fill="%230070E0"/></svg>') no-repeat center bottom;
font-weight: 300;
color: #0070E0;
}
@media screen and (max-width: 767px) {
body.single-custom-order .product__option, body.single-cs-series .product__option {
padding-top: 80px;
}
body.single-custom-order .product__option:before, body.single-cs-series .product__option:before {
width: 100px;
left: auto;
right: -30px;
top: 64px;
}
}
body.single-custom-order .product__option h3, body.single-cs-series .product__option h3 {
padding-bottom: 26px;
border-bottom: 1px solid #C3C3C3;
}
body.single-custom-order .product__sample, body.single-cs-series .product__sample {
padding-top: 130px;
position: relative;
}
@media screen and (max-width: 767px) {
body.single-custom-order .product__sample, body.single-cs-series .product__sample {
padding-top: 80px;
}
}
@media screen and (min-width: 768px) {
body.single-custom-order .product__sample h3, body.single-cs-series .product__sample h3 {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
padding-bottom: 26px;
padding-left: 40px;
}
}
body.single-custom-order .product__sample .flexslider, body.single-cs-series .product__sample .flexslider {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
}
body.single-custom-order .product__sample .slides a, body.single-cs-series .product__sample .slides a {
display: block;
height: 100%;
position: relative;
transition: opacity 0.3s ease-in-out;
overflow: hidden;
}
body.single-custom-order .product__sample .slides a:before, body.single-cs-series .product__sample .slides a:before {
content: "";
display: block;
position: absolute;
right: 20px;
bottom: 20px;
width: 30px;
height: 30px;
background: url(https://blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/images/ico_zoom.svg) no-repeat center center;
background-size: contain;
}
body.single-custom-order .product__sample .slides a:after, body.single-cs-series .product__sample .slides a:after {
opacity: 0;
white-space: pre;
content: "View \a customization \a details";
text-align: center;
background: rgba(0, 0, 0, 0.7);
color: var(--color_white);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: calc(20 / 17 * 1rem);
font-weight: 300;
}
body.single-custom-order .product__sample .slides a:hover:before, body.single-cs-series .product__sample .slides a:hover:before {
opacity: 0;
}
body.single-custom-order .product__sample .slides a:hover:after, body.single-cs-series .product__sample .slides a:hover:after {
opacity: 1;
}
body.single-custom-order .product__sample .slides a:hover img, body.single-cs-series .product__sample .slides a:hover img {
transform: scale(1.1);
}
body.single-custom-order .product__sample__dlg__title, body.single-cs-series .product__sample__dlg__title {
font-size: calc(20 / 17 * 1rem);
margin-bottom: 16px;
}
body.single-custom-order .product__sample__dlg__contents, body.single-cs-series .product__sample__dlg__contents {
border-top: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
padding: 30px 0;
}
body.single-custom-order .product__sample__dlg__contents a, body.single-cs-series .product__sample__dlg__contents a {
color: #0CA2FF;
text-decoration: underline;
}
body.single-custom-order .product__sample__dlg__contents dl, body.single-cs-series .product__sample__dlg__contents dl {
display: flex;
justify-content: flex-start;
align-items: flex-start;
column-gap: 30px;
font-size: calc(14 / 17 * 1rem);
}
body.single-custom-order .product__sample__dlg__contents dl dt, body.single-cs-series .product__sample__dlg__contents dl dt {
width: 100px;
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
body.single-custom-order .product__sample__dlg__contents dl dt, body.single-cs-series .product__sample__dlg__contents dl dt {
width: 90px;
}
}
body.single-custom-order .product__sample__dlg__contents dl dd, body.single-cs-series .product__sample__dlg__contents dl dd {
flex-grow: 1;
}
body.single-custom-order .product__sample__dlg__contents dl + dl, body.single-cs-series .product__sample__dlg__contents dl + dl {
margin-top: 1em;
}
body.single-custom-order .product__buttons--bottom, body.single-cs-series .product__buttons--bottom {
margin-top: 90px;
}
@media screen and (max-width: 767px) {
body.single-custom-order .product__buttons--bottom, body.single-cs-series .product__buttons--bottom {
margin-top: 40px;
}
}
body.single-custom-order .notice, body.single-cs-series .notice {
color: #999;
font-size: 80%;
}
body.page_custom-order #pageTitle h1, body.page_cs-series #pageTitle h1 {
position: relative;
}
body.page_custom-order #pageTitle h1:before, body.page_cs-series #pageTitle h1:before {
content: "";
display: block;
position: absolute;
width: 288px;
height: 1px;
transform: rotate(-45deg);
background: var(--color_secondary);
right: -42px;
top: 102px;
}
@media screen and (max-width: 767px) {
body.page_custom-order #pageTitle h1, body.page_cs-series #pageTitle h1 {
margin-top: 10vw;
}
body.page_custom-order #pageTitle h1:before, body.page_cs-series #pageTitle h1:before {
width: 20vw;
right: -8vw;
top: -5vw;
}
}
body.page_custom-order #pageContents > .container, body.page_cs-series #pageContents > .container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row-reverse;
column-gap: 72px;
}
@media screen and (max-width: 767px) {
body.page_custom-order #pageContents > .container, body.page_cs-series #pageContents > .container {
flex-direction: column;
}
}
body.page_custom-order #pageContents .page__contents__side, body.page_cs-series #pageContents .page__contents__side {
width: 210px;
border-top: 1px solid var(--color_border);
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
body.page_custom-order #pageContents .page__contents__side, body.page_cs-series #pageContents .page__contents__side {
display: none;
}
}
body.page_custom-order #pageContents .page__contents__main, body.page_cs-series #pageContents .page__contents__main {
flex-grow: 1;
}
@media screen and (min-width: 768px) {
body.page_custom-order #pageContents .side__product__list, body.page_cs-series #pageContents .side__product__list {
padding-top: 30px;
background: var(--color_background);
position: relative;
z-index: 100;
border-top: 1px solid #D9D9D9;
}
body.page_custom-order #pageContents .side__product__list.is-fixed, body.page_cs-series #pageContents .side__product__list.is-fixed {
position: fixed;
top: 0;
left: 0;
width: 210px;
}
}
body.page_custom-order #pageContents .side__product__item, body.page_cs-series #pageContents .side__product__item {
margin-bottom: 8px;
}
body.page_custom-order #pageContents .side__product__item a, body.page_cs-series #pageContents .side__product__item a {
position: relative;
padding-left: 24px;
font-size: calc(18 / 17 * 1rem);
transition: all 0.4s ease;
}
body.page_custom-order #pageContents .side__product__item a:before, body.page_cs-series #pageContents .side__product__item a:before {
content: "";
position: absolute;
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
left: 0;
top: 50%;
transform: translateY(-50%);
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3.34383 9.16665L2.60425 8.42706L6.03133 4.99998L2.60425 1.5729L3.34383 0.833313L7.5105 4.99998L3.34383 9.16665Z" fill="%23C3C3C3"/></svg>') no-repeat center center;
background-size: contain;
transition: all 0.4s ease;
}
body.page_custom-order #pageContents .side__product__item a:hover, body.page_cs-series #pageContents .side__product__item a:hover {
opacity: 0.7;
}
body.page_custom-order #pageContents .side__product__item a:hover:before, body.page_cs-series #pageContents .side__product__item a:hover:before {
left: 6px;
}
@media screen and (min-width: 768px) {
body.page_custom-order #pageContents .products_category__block--available .product__list, body.page_cs-series #pageContents .products_category__block--available .product__list {
column-gap: 90px;
}
body.page_custom-order #pageContents .products_category__block--available .product__list > div, body.page_cs-series #pageContents .products_category__block--available .product__list > div {
width: calc((100% - 90px) / 2);
}
}
body.page_custom-order #pageContents .products_category__block--archives .products_category__contents, body.page_cs-series #pageContents .products_category__block--archives .products_category__contents {
position: relative;
overflow: hidden;
transition: max-height 0.3s linear;
max-height: unset;
padding-bottom: 50px;
}
body.page_custom-order #pageContents .products_category__block--archives .products_category__contents.is-open .products_category__contents__button:after, body.page_cs-series #pageContents .products_category__block--archives .products_category__contents.is-open .products_category__contents__button:after {
content: "Close";
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12" fill="none"><path d="M-2.98023e-07 10L1.775 11.775L10 3.55002L18.225 11.775L20 10L10 2.42386e-05L-2.98023e-07 10Z" fill="%230070E0"/></svg>');
}
body.page_custom-order #pageContents .products_category__block--archives .products_category__contents__button, body.page_cs-series #pageContents .products_category__block--archives .products_category__contents__button {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
cursor: pointer;
background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #F5F5F5 25%);
z-index: 1;
}
@media screen and (max-width: 767px) {
body.page_custom-order #pageContents .products_category__block--archives .products_category__contents__button, body.page_cs-series #pageContents .products_category__block--archives .products_category__contents__button {
background: #F5F5F5;
}
}
body.page_custom-order #pageContents .products_category__block--archives .products_category__contents__button:after, body.page_cs-series #pageContents .products_category__block--archives .products_category__contents__button:after {
content: "Load more";
display: block;
position: absolute;
text-align: center;
left: 0;
width: 100%;
bottom: 0;
padding-bottom: 20px;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12" fill="none"><path d="M0 1.775L1.775 0L10 8.225L18.225 0L20 1.775L10 11.775L0 1.775Z" fill="%230070E0"/></svg>') no-repeat center bottom;
font-weight: 300;
color: #0070E0;
}
body.page_custom-order #pageContents .products_category__block--archives .products_category__contents .product__thumbnail, body.page_cs-series #pageContents .products_category__block--archives .products_category__contents .product__thumbnail {
aspect-ratio: 3/4;
overflow: hidden;
}
body.page_custom-order #pageContents .products_category__block--archives .products_category__contents .product__thumbnail img, body.page_cs-series #pageContents .products_category__block--archives .products_category__contents .product__thumbnail img {
object-fit: cover;
font-family: "object-fit: cover;";
width: 100% !important;
height: 100% !important;
}
body.page_custom-order .products_category__block, body.page_cs-series .products_category__block {
padding-top: 100px;
position: relative;
}
@media screen and (max-width: 767px) {
body.page_custom-order .products_category__block, body.page_cs-series .products_category__block {
padding-top: 40px;
}
}
body.page_custom-order .products_category__block:before, body.page_cs-series .products_category__block:before {
content: "";
display: block;
position: absolute;
width: 468px;
height: 1px;
transform: rotate(-45deg);
background: var(--color_secondary);
right: -210.6px;
top: 50px;
}
@media screen and (max-width: 767px) {
body.page_custom-order .products_category__block:before, body.page_cs-series .products_category__block:before {
width: 100px;
right: -36px;
top: 24px;
}
}
body.page_custom-order .products_category__block:nth-of-type(2):before, body.page_cs-series .products_category__block:nth-of-type(2):before {
display: none;
}
body.page_custom-order .products_category__description, body.page_cs-series .products_category__description {
margin-bottom: 30px;
}
body.page_custom-order .products_category__description .mention__list, body.page_cs-series .products_category__description .mention__list {
font-size: calc(14 / 17 * 1rem);
}
body.page_custom-order .products_category__title, body.page_cs-series .products_category__title {
position: relative;
}
body.page_custom-order .products_category__title:before, body.page_cs-series .products_category__title:before {
content: "";
display: block;
position: absolute;
right: 0;
top: 50%;
width: 100%;
height: 1px;
background: #5A5A5A;
transform: translateY(-50%);
}
body.page_custom-order .products_category__title h2, body.page_cs-series .products_category__title h2 {
font-size: calc(60 / 17 * 1rem);
font-weight: 200;
display: inline-block;
background: var(--color_background);
position: relative;
padding-right: 20px;
margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
body.page_custom-order .products_category__title, body.page_cs-series .products_category__title {
margin-bottom: 20px;
}
body.page_custom-order .products_category__title h2, body.page_cs-series .products_category__title h2 {
font-size: calc(40 / 17 * 1rem);
}
}
body.page_custom-order div[class*=products_category__block--available] .product__block .product__lead, body.page_cs-series div[class*=products_category__block--available] .product__block .product__lead {
display: block !important;
}
body.page_custom-order .cs_series__block, body.page_cs-series .cs_series__block {
position: relative;
}
body.page_custom-order .cs_series__contents, body.page_cs-series .cs_series__contents {
width: 36.63%;
margin-left: 0;
margin-right: auto;
font-size: calc(17 / 17 * 1rem);
}
body.page_custom-order .cs_series__contents p + p, body.page_cs-series .cs_series__contents p + p {
margin-top: 30px;
}
@media screen and (max-width: 767px) {
body.page_custom-order .cs_series__contents, body.page_cs-series .cs_series__contents {
width: auto;
}
}
@media screen and (max-width: 767px) {
body.page_custom-order .cs_series__images, body.page_cs-series .cs_series__images {
position: relative;
margin-top: 30px;
}
}
@media screen and (max-width: 767px) {
body.page_custom-order .cs_series__images img:nth-of-type(1), body.page_cs-series .cs_series__images img:nth-of-type(1) {
padding-top: 20vw;
width: 69.3333333333vw;
margin-left: 0;
}
body.page_custom-order .cs_series__images img:nth-of-type(2), body.page_cs-series .cs_series__images img:nth-of-type(2) {
position: absolute;
width: 37.3333333333vw;
top: 0;
right: 0;
}
}
@media screen and (min-width: 768px) {
body.page_custom-order .cs_series__images img:nth-of-type(1), body.page_cs-series .cs_series__images img:nth-of-type(1) {
position: absolute;
width: 43.60%;
bottom: 0;
left: 42.7325581395%;
transform: translateY(-45%);
}
body.page_custom-order .cs_series__images img:nth-of-type(2), body.page_cs-series .cs_series__images img:nth-of-type(2) {
position: absolute;
width: 28.34%;
bottom: 67.4418604651%;
left: 69.7674418605%;
transform: translateY(5%);
}
}
body[class*=term-cs_series] #pageTitle h1:before {
display: none;
} .policy {
margin: 0;
}
.policy > div {
margin: 25px 0;
}
.policy h2 {
font-size: 115%;
margin-bottom: 7px;
font-weight: 300;
}
.policy p {
font-size: 80%;
}
.policy ol,
.policy ul {
margin: 15px 0 15px 25px;
list-style-position: outside;
font-size: 80%;
}   .contact {
width: 800px;
margin: 0 auto;
}
.form-body {
padding: 70px 0;
}
.form-body p.note {
text-align: right;
font-size: 80%;
}
.form-body .policy {
display: flex;
justify-content: center;
margin: 20px 0;
font-size: 90%;
}
.form-body .mark {
color: #0CA2FF;
}
.form-body .form-list {
display: flex;
margin: 20px 0;
padding: 0;
}
.form-body .form-list div:nth-child(1) {
width: 20%;
}
.form-body .form-list div:nth-child(2) {
width: 80%;
} input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--color_black);
transition: background-color 5000s ease-in-out 0s;
font-family: inherit !important;
}
.form-body input, 
.form-body textarea, 
.form-body button {
font-family: inherit !important;
font-size: 16px;
color: var(--color_black);
}
.form-body input[type=text],
.form-body input[type=email],
.form-body input[type=tel],
.form-body textarea {
font-family: inherit !important;
font-size: 16px;
color: var(--color_black);
width: 100%;
padding: 20px;
border: none;
box-sizing: border-box;
border-radius: 6px;
}
#checkval {
appearance: none;
-webkit-appearance: none;
width: 24px;
height: 24px;
border: 2px solid #ccc;
border-radius: 4px;
vertical-align: middle;
cursor: pointer;
position: relative;
} #checkval:checked {
background-color: #0070E0; border-color: #0070E0;
} #checkval:checked::after {
content: '';
position: absolute;
left: 6px;
top: 1px;
width: 5px;
height: 11px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
#errmsg {
font-size: calc(16 / 17 * 1rem);
margin: 20px 0;
color: #0070E0;
} .contact-submit {
width: 460px;
margin: 60px auto;
position: relative;
}
.contact-submit:before {
content: "";
display: block;
position: absolute;
left: 10.8695652174%;
top: 50%;
width: 21px;
height: 21px;
background: url(//blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/images/ico_check.svg) no-repeat center center;
transform: translateY(-50%);
transition: left 0.3s ease-in-out;
}
.contact-submit > input[type=submit] {
width: 100%;
font-family: var(--main-font);
color: var(--color_white);
text-align: center;
font-size: calc(24 / 17 * 1rem);
font-weight: 300;
letter-spacing: 0.14em;
background: var(--color_black);
padding: 30px 0;
border: 2px solid var(--color_black);
border-radius: 10px;
}
.contact-submit > input[type=submit]:hover,
.contact-submit:hover, .contact-submit:focus, .contact-submit:active {
background: var(--color_white);
color: var(--color_black);
text-decoration: none;
}
.contact-submit:hover:before, .contact-submit:focus:before, .contact-submit:active:before {
left: 11.9565217391%;
}
@media screen and (max-width: 767px) {
.contact-submit {
max-width: 100%;
}
.contact-submit > input[type=submit] {
font-size: calc(20 / 17 * 1rem);
padding-top: 1.65em;
padding-bottom: 1.65em;
}
}
@media screen and (max-width: 810px) {
.contact {
width: 100%;
}
}
@media screen and (max-width: 767px) {
.form-body {
padding: 40px 0;
}
.form-body .form-list {
display: block;
}
.form-body .form-list div:nth-child(1) {
width: 100%;
margin-bottom: 7px;
}
.form-body .form-list div:nth-child(2) {
width: 100%;
margin-bottom: 15px;
}
} #newsletter-page .btn {
position: relative;
width: auto;
margin: 45px 0 0;
text-align: left;
}
#newsletter-page .btn a {
display: inline-block;
background-color: var(--color_black);
color: var(--color_white);
border-radius: 8px;
padding: 18px 40px;
font-size: 14px;
font-weight: 300;
letter-spacing: 0.07em;
cursor: pointer;
width: auto;
transition: background-color 0.3s ease;
}
#newsletter-page .btn a:hover {
background-color: #0CA2FF;
}
@media screen and (max-width: 767px) {
#newsletter-page .btn { width: 100%; }
} @media screen and (max-width: 767px) {
#mailpoet_form_1, #mailpoet_form_1 .mailpoet_paragraph.last {
width: 100% !important;
}
#newsletter-page .btn a {
width: 100%;
text-align: center;
padding: 20px;
}
}
html.is-locked {
overflow: hidden;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
}
html.is-locked .inview {
transition: none;
}
html.is-locked .inview.fadeInUp {
transform: translate(0, 0);
opacity: 1;
}
html.is-locked .inview.slideInLeft {
transform: translateX(0%);
opacity: 1;
}@font-face {
font-family: 'flexslider-icon';
src: url(//blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/js/flexslider/fonts/flexslider-icon.eot);
src: url(//blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/js/flexslider/fonts/flexslider-icon.eot?#iefix) format('embedded-opentype'), url(//blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/js/flexslider/fonts/flexslider-icon.woff) format('woff'), url(//blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/js/flexslider/fonts/flexslider-icon.ttf) format('truetype'), url(//blooperbackpacks.com/bbp_admin/wp-content/themes/bbp/assets/js/flexslider/fonts/flexslider-icon.svg#flexslider-icon) format('svg');
font-weight: normal;
font-style: normal;
} .flex-container a:hover,
.flex-slider a:hover {
outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flex-pauseplay span {
text-transform: capitalize;
} .flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
}
.flexslider .slides:after {
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .flexslider .slides {
display: block;
}
* html .flexslider .slides {
height: 1%;
}
.no-js .flexslider .slides > li:first-child {
display: block;
} .flexslider {
margin: 0 0 60px;
background: #fff;
border: 4px solid #fff;
position: relative;
zoom: 1;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
-o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}
.flexslider .slides {
zoom: 1;
}
.flexslider .slides img {
height: auto;
-moz-user-select: none;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
@-moz-document url-prefix() {
.loading .flex-viewport {
max-height: none;
}
}
.carousel li {
margin-right: 5px;
}
.flex-direction-nav {
*height: 0;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 40px;
height: 40px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-family: "flexslider-icon";
font-size: 40px;
display: inline-block;
content: '\f001';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
content: '\f002';
}
.flex-direction-nav .flex-prev {
left: -50px;
}
.flex-direction-nav .flex-next {
right: -50px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 0.7;
left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 0.7;
right: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
z-index: -1;
}
.flex-pauseplay a {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: #000;
}
.flex-pauseplay a:before {
font-family: "flexslider-icon";
font-size: 20px;
display: inline-block;
content: '\f004';
}
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-pauseplay a.flex-play:before {
content: '\f003';
}
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 0.9);
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
height: auto;
display: block;
opacity: .7;
cursor: pointer;
-moz-user-select: none;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
} @media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {
opacity: 1;
left: 10px;
}
.flex-direction-nav .flex-next {
opacity: 1;
right: 10px;
}
}.en {
font-weight: 300;
}
.note {
font-size: 80%;
text-align: right;
margin-bottom: 15px;
}
.description {
max-width: 1000px;
margin: 0 auto;
padding: 0 0 40px 0;
}
.description p {
margin: 0;
padding: 0;
}
h2 {
font-size: 170% !important;
font-weight: 200 !important;
margin: 0;
padding: 0 0 20px 0;
}
.pageContents hr {
border: none;
border-top: 1px solid #d9d9d9;
margin: 0;
padding: 0 0 40px 0;
}
#price { bottom: 0;
width: auto !important;
max-width: 1200px; margin: 0;
padding: 40px 0 60px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#price .fixed {
position: fixed;
left: 50%;
bottom: 0;
background-color: #fff;
margin: 0;
padding: 30px;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
transform: translateX(-50%);
}
#price .static {
position: relative;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#price .group {
display: block !important;
bottom: 0;
color: #fff;
font-size: 120%; text-align: center;
max-width: 1200px !important;
background-color: #0CA2FF;
border: 1px solid #0CA2FF;
margin: 0;
padding: 20px 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#price .group .totalprice {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#price .group .totalprice em {
font-size: 180%;
font-weight: 500;
}
#price .group .totalprice em small {
}
@media screen and (max-width: 1050px) {
}
@media screen and (max-width: 650px) {
.description {
margin: 0;
padding: 0 0 20px 0;
}
.description p {
text-align: left;
}
.pageContents h2 {
margin: 0;
padding: 0 0 10px 0;
}
.pageContents hr {
border: none;
border-top: 1px solid #d9d9d9;
margin: 0;
padding: 0 0 30px 0;
}
#price {
width: 100% !important;
}
#price .group {
font-size: 90%;
padding: 14px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#price .group.fixed {
width: calc(100% - (22px * 2)) !important;
}
#price .group .totalprice em {
font-size: 160%;
}
} .require {
position: absolute;
display: block;
right: 20px;
top: 20px;
color: #fff;
font-size: 9px;
line-height: 100%;
background-color: #c90702;
padding: 5px 8px 4px 8px;
}
form#order {
max-width: 1000px;
margin: 0 auto;
padding: 20px 0 40px 0;
}
.group {
display: table;
width: 100%;
padding: 0 0 30px;
}
.group:has(.control #option1, .control #option2, .control #option3, .control #option4, .control #option5, .control #option6) {
padding: 0 0 24px;
}
@media screen and (max-width: 767px) {
.group:has(.control #option1, .control #option2, .control #option3, .control #option4, .control #option5, .control #option6) { padding: 20px 0 24px; }
}
.group .label,
.group .control {
display: table-cell;
vertical-align: top;
}
.group .label {
position: relative;
font-weight: 300;
width: 220px;
padding: 0 30px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.group .control {
width: 780px;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.group .control span.error {
display: block;
color: #ff0000;
font-size: 86%;
font-weight: normal !important;
padding: 10px 0 0 0;
} input[type='text'],
input[type='email'],
input[type='tel'],
textarea,
select { font-size: 100%;
font-family: sans-serif;
font-weight: normal;
line-height: 1.5;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 10px;
padding: 16px 22px;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} input[type="radio"] {
display: none;
margin: 0;
padding: 0;
padding-block: 0;
padding-inline: 0;
}
textarea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
input.large {
width: 770px;
height: auto;
}
input.medium {
width: 200px;
height: auto;
}
input.small {
width: 80px;
height: auto;
}
input.x-small {
width: 50px;
height: auto;
}
textarea.large {
width: 780px;
height: 160px;
resize: vertical;
}
input:focus,
textarea:focus,
select:focus { }
input:focus,
textarea:focus,
select:focus {
outline: none;
}
input.error,
textarea.error,
select.error {
border: 1px solid #ff0000;
}
.elements li label,
.asked li label {
display: block;
position: relative;
background-color: #eee;
}
.elements li label.active,
.asked li label.active { background-color: #000;
}
.elements li label.disabled,
.asked li label.disabled {
}
.elements li label.disabled input,
.asked li label.disabled input {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}
.elements li label.disabled .display,
.asked li label.disabled .display {
opacity: 0.3;
}
.elements li label input[type='radio'],
.asked li label input[type='radio'] {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: transparent;
border: none;
padding: 0;
z-index: 1;
opacity: 0;
}
.elements li .display,
.asked li .display {
}
.elements li .display .item-name,
.asked li .display .item-name {
line-height: 1.3;
}
.elements li .display .item-price,
.asked li .display .item-price { }
p.option-title { margin-bottom: 7px; }
#body,
#fabric,
#waist,
#shoulder,
#pocket,
#zipper {
display: grid;
gap: 8px;
font-weight: normal;
_zoom: 1;
overflow: hidden;
}
#body {
grid-template-columns: repeat(4, 1fr);
}
#fabric,
#waist,
#shoulder,
#pocket {
grid-template-columns: repeat(4, 1fr);
}
#zipper {
grid-template-columns: repeat(5, 1fr);
}
#body li,
#fabric li,
#waist li,
#shoulder li,
#pocket li,
#zipper li {
width: 100%;
}
#body li label,
#body li label.active,
#fabric li label,
#fabric li label.active,
#waist li label,
#waist li label.active,
#shoulder li label,
#shoulder li label.active,
#pocket li label,
#pocket li label.active,
#zipper li label,
#zipper li label.active {
background-color: transparent;
}
#body li .display,
#fabric li .display,
#waist li .display,
#shoulder li .display,
#pocket li .display,
#zipper li .display {
display: grid;
justify-items: center;
margin: 0;
padding: 0;
}
#body li .display .item-image {
position: relative;
text-align: center;
aspect-ratio: 3 / 4;
//background-color: transparent;
margin: 0;
//padding: 10px;
padding: 6px;
border: 4px solid #f5f5f5;
background-color: #FFFFFF;
overflow: hidden;
}
#fabric li .display .item-image,
#waist li .display .item-image,
#shoulder li .display .item-image,
#pocket li .display .item-image,
#zipper li .display .item-image {
position: relative;
text-align: center;
aspect-ratio: 1 / 1;
margin: 0;
// padding: 10px;
padding: 6px;
border: 4px solid #f5f5f5;
background-color: #FFFFFF;
overflow: hidden;
}
#body li .display .item-image,
#fabric li .display .item-image,
#waist li .display .item-image,
#shoulder li .display .item-image,
#pocket li .display .item-image {
max-width: 175px; }
#zipper li .display .item-image {
max-width: 136px; }
#body li .display .item-image img,
#fabric li .display .item-image img,
#waist li .display .item-image img,
#shoulder li .display .item-image img,
#pocket li .display .item-image img,
#zipper li .display .item-image img {
display: block;
position: relative;
width: 100%;
height: auto;
object-fit: cover; margin: 0 auto;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#body li .display .item-image img,
#fabric li .display .item-image img,
#waist li .display .item-image img,
#shoulder li .display .item-image img,
#pocket li .display .item-image img,
#zipper li .display .item-image img {
}
#body li .display .item-name {
margin: 8px 0 0;
}
#fabric li .display .item-name,
#waist li .display .item-name,
#shoulder li .display .item-name,
#pocket li .display .item-name,
#zipper li .display .item-name {
margin: 8px 0 0;
}
@media screen and (max-width: 767px) {
#fabric li .display .item-name { font-size: 90%; }
#waist li .display .item-name,
#shoulder li .display .item-name,
#pocket li .display .item-name { font-size: 80%; }
}
#body li .display .item-name,
#fabric li .display .item-name,
#waist li .display .item-name,
#shoulder li .display .item-name,
#pocket li .display .item-name,
#zipper li .display .item-name,
#body li .display .item-price,
#fabric li .display .item-price,
#waist li .display .item-price,
#shoulder li .display .item-price,
#pocket li .display .item-price,
#zipper li .display .item-price {
text-align: center;
font-size: small;
}
#body li .active .display .item-image,
#fabric li .active .display .item-image,
#waist li .active .display .item-image,
#shoulder li .active .display .item-image,
#pocket li .active .display .item-image,
#zipper li .active .display .item-image {
border-color: #0CA2FF;
}
#body li .active .display .item-image img,
#fabric li .active .display .item-image img,
#waist li .active .display .item-image img,
#shoulder li .active .display .item-image img,
#pocket li .active .display .item-image img,
#zipper li .active .display .item-image img { }
#body li .active .display .item-name,
#fabric li .active .display .item-name,
#waist li .active .display .item-name,
#shoulder li .active .display .item-name,
#pocket li .active .display .item-name,
#zipper li .active .display .item-name,
#body li .active .display .item-price,
#fabric li .active .display .item-price,
#waist li .active .display .item-price,
#shoulder li .active .display .item-price,
#pocket li .active .display .item-price,
#zipper li .active .display .item-price {
color: #0CA2FF;
}
#option1,
#option2,
#option3,
#option4,
#option5,
#option6,
#size1,
#size2,
#sex {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
font-weight: normal;
width: max-content;
width: 100%;
}
#option1 li,
#option2 li,
#option3 li,
#option4 li,
#option5 li,
#option6 li,
#size1 li,
#size2 li,
#sex li {
display: grid;
width: 100%;
}
#option1 li label,
#option2 li label,
#option3 li label,
#option4 li label,
#option5 li label,
#option6 li label,
#size1 li label,
#size2 li label,
#sex li label {
display: grid;
text-align: center;
background-color: #ffffff;
margin: 0;
padding: 20px 0;
}
#sex li label {
padding: 8px 0;
}
#option1 li,
#option2 li,
#option3 li,
#option4 li,
#option5 li,
#option6 li,
#size1 li,
#size2 li,
#sex li {
}
#option1 li:nth-child(1) label,
#option2 li:nth-child(1) label,
#option3 li:nth-child(1) label,
#option4 li:nth-child(1) label,
#option5 li:nth-child(1) label,
#option6 li:nth-child(1) label,
#size1 li:nth-child(1) label,
#size2 li:nth-child(1) label,
#sex li:nth-child(1) label { -webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}
#size1 li:nth-child(2) label,
#size2 li:nth-child(2) label,
#sex li:nth-child(2) label { border-right: 2px solid #eee; border-left: 2px solid #eee;
}
#option1 li:nth-child(2) label,
#option2 li:nth-child(2) label,
#option3 li:nth-child(2) label,
#option4 li:nth-child(2) label,
#option5 li:nth-child(2) label,
#option6 li:nth-child(2) label,
#size1 li:nth-child(3) label,
#size2 li:nth-child(3) label,
#sex li:nth-child(3) label { -webkit-border-radius: 0 8px 8px 0;
-moz-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}
#option1 li label .display,
#option2 li label .display,
#option3 li label .display,
#option4 li label .display,
#option5 li label .display,
#option6 li label .display,
#size1 li label .display,
#size2 li label .display,
#sex li label .display {
display: grid;
align-content: center;
}
#option1 li label.active,
#option2 li label.active,
#option3 li label.active,
#option4 li label.active,
#option5 li label.active,
#option6 li label.active,
#size1 li label.active,
#size2 li label.active,
#sex li label.active {
color: #fff;
background-color: #0CA2FF;
border-color: #08acf1;
}
#option1 li .display,
#option2 li .display,
#option3 li .display,
#option4 li .display,
#option5 li .display,
#option6 li .display,
#size1 li .display,
#size2 li .display,
#sex li .display { }
#option1 li p,
#option2 li p,
#option3 li p,
#option4 li p,
#option5 li p,
#option6 li p,
#size1 li label p,
#size2 li label p,
#sex li label p {
margin: 0;
padding: 0;
}
#sex li label p { line-height: 2.3; }
.hide {
display: none;
} .btn {
width: 100%;
margin: 60px 0 0;
}
.btn_confirm {
display: flex;
width: 100%;
margin: 60px 0 0;
column-gap: 4%;
}
.btn .submit,
.btn .back,
.btn_confirm .submit {
max-width: 100%;
width: 48%;
margin: 0 auto;
position: relative;
}
.btn .submit:before,
.btn .back a:before,
.btn_confirm .submit:before {
content: "";
display: block;
position: absolute;
left: 10.8695652174%;
top: 50%;
width: 21px;
height: 21px;
background: url(//blooperbackpacks.com/order/form-en/assets/images/ico_check.svg) no-repeat center center;
transform: translateY(-50%);
transition: left 0.3s ease-in-out;
}
.btn .submit input[type="submit"],
.btn .back a,
.btn_confirm .submit input[type="submit"] {
display: block;
width: 100%;
font-family: "Outfit", sans-serif;
color: #ffffff;
text-align: center;
font-size: calc(24 / 17 * 1rem);
font-weight: 300;
letter-spacing: 0.14em;
background: #000000;
padding: 35px 0;
border: 2px solid #000000;
border-radius: 10px;
}
.btn .submit input[type="submit"]:hover,
.btn .submit:hover, .btn .submit:focus, .btn .submit:active,
.btn .back a:hover, .btn .back a:focus, .btn .back a:active,
.btn_confirm .submit:hover, .btn_confirm .submit:focus, .btn_confirm .submit:active {
background: #ffffff;
color: #000000;
text-decoration: none;
}
.btn .submit:hover:before, .btn .submit:focus:before, .btn .submit:active:before,
.btn .back a:hover:before, .btn .back a:focus:before, .btn .back a:active:before,
.btn_confirm .submit:hover:before, .btn_confirm .submit:focus:before, .btn_confirm .submit:active:before {
left: 11.9565217391%;
}
@media screen and (max-width: 767px) {
.btn .submit, .btn .back, .btn_confirm .submit { width: 100%; }
.btn_confirm { display: inline-block; }
.btn .submit input[type="submit"],
.btn .back a,
.btn_confirm .submit input[type="submit"] {
font-size: calc(20 / 17 * 1rem);
padding-top: 1.65em;
padding-bottom: 1.65em;
}
} .btn_confirm a.return {
display: inline-block;
border-radius: 10px;
background: #ffffff;
border: 2px solid #000000;
color: #000000;
text-align: center;
font-size: calc(24 / 17 * 1rem);
font-weight: 300;
letter-spacing: 0.14em;
width: 48%;
max-width: 100%;
padding: 30px 0;
position: relative;
}
.btn_confirm a.return:before {
content: "";
display: block;
position: absolute;
left: 10.8695652174%;
top: 50%;
width: 30px;
height: 30px;
background: url(//blooperbackpacks.com/order/form-en/assets/images/ico_back.svg) no-repeat center center;
transform: translateY(-50%);
transition: left 0.3s ease-in-out;
}
.btn_confirm a.return:hover, .btn_confirm a.return:focus, .btn_confirm a.return:active {
background: #000000;
color: #ffffff;
}
.btn_confirm a.return:hover:before, .btn_confirm a.return:focus:before, .btn_confirm a.return:active:before {
left: 11.9565217391%;
}
@media screen and (max-width: 767px) {
.btn_confirm .submit { width: 100%; }
.btn_confirm a.return {
width: 100%;
font-size: calc(20 / 17 * 1rem);
margin-bottom: 30px;
padding: 24px 0;
}
.btn_confirm .submit input[type="submit"] {
font-size: calc(20 / 17 * 1rem);
padding-top: 1.65em;
padding-bottom: 1.65em;
}
}
@media screen and (max-width: 1050px) {
.info .group .label { width: 24%; }
.info .group .control { width: 76%; }
.info input.large { width: 100%; }
}
@media screen and (max-width: 767px) {
.require {
right: 0px;
top: 0px;
font-size: 8px;
padding: 5px 8px 4px 8px;
}
form#order {
padding: 20px 0 60px 0;
}
.group {
display: block; padding: 15px 0;
}
.confirm .group { border-bottom: 1px dotted #d9d9d9; }
.group .label,
.group .control {
display: block;
}
.group .label {
position: relative;
font-weight: bold;
width: 100%;
padding: 0 0 2px 0;
}
.group .control {
font-weight: bold;
width: 100%;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.group .control span.error {
display: block;
color: #ff0000;
font-size: 86%;
padding: 10px 0 0 0;
}
.info .group .label { width: 100%; }
.info .group .control { width: 100%; }
input,
input[type='text'],
input[type='email'],
input[type='tel'],
textarea,
select {
font-size: 16px;
font-weight: normal;
padding: 16px 10px;
}
input.large {
width: 100%;
}
input.medium {
width: 100%;
}
input.small {
width: 100%;
}
input.x-small {
width: 100%;
}
textarea.large {
width: 100%;
height: 160px;
resize: vertical;
}
select.large {
width: 100%;
}
select.medium {
width: 100%;
}
select.small {
width: 100%;
}
#body,
#fabric,
#waist,
#shoulder,
#pocket,
#zipper {
grid-template-columns: unset;
grid-auto-flow: column;
grid-auto-columns: 1fr;
width: max-content;
padding: 10px 0;
}
#body { padding: 18px 0; }
#zipper { gap: 0px; }
#body li { }
#fabric li,
#waist li,
#shoulder li,
#pocket li {
width: 130px;
}
#zipper li {
width: 100px;
font-size: x-small;
} #body li.pc,
#fabric li.pc {
display: none;
}
#body li .display,
#fabric li .display,
#waist li .display,
#shoulder li .display,
#pocket li .display,
#zipper li .display {
margin: 0;
padding: 0;
}
#body li .display .item-name {
margin: 8px 0 0;
}
#body li .display .item-image,
#fabric li .display .item-image,
#waist li .display .item-image,
#shoulder li .display .item-image,
#pocket li .display .item-image,
#zipper li .display .item-image {
position: relative;
text-align: center;
width: 100%;
height: auto;
margin: 0;
// padding: 8px;
padding: 5px;
border-width: 3px;
}
#body li .display .item-image {
aspect-ratio: 3 / 4;
max-width: 130px;
}
#fabric li .display .item-image,
#waist li .display .item-image,
#shoulder li .display .item-image,
#pocket li .display .item-image {
max-width: 140px;
}
#zipper li .display .item-image {
max-width: 110px;
}
#body li .display .item-image img,
#fabric li .display .item-image img,
#waist li .display .item-image img,
#shoulder li .display .item-image img,
#pocket li .display .item-image img,
#zipper li .display .item-image img { }
#body li .display .item-image img {
width: 100%;
height: 100%;
object-fit: cover; }
#fabric li .display .item-image img,
#waist li .display .item-image img,
#shoulder li .display .item-image img,
#pocket li .display .item-image img,
#zipper li .display .item-image img {  }
#body li .active .display .item-image,
#fabric li .active .display .item-image,
#waist li .active .display .item-image,
#shoulder li .active .display .item-image,
#pocket li .active .display .item-image,
#zipper li .active .display .item-image {
}
#body li .active .display .item-image img,
#fabric li .active .display .item-image img,
#waist li .active .display .item-image img,
#shoulder li .active .display .item-image img,
#pocket li .active .display .item-image img,
#zipper li .active .display .item-image img { }
#option1,
#option2,
#option3,
#option4,
#option5,
#option6,
#size1,
#size2,
#sex {
grid-auto-flow: row;
grid-auto-rows: 1fr;
width: 100%;
}
#option1 li,
#option2 li,
#option3 li,
#option4 li,
#option5 li,
#option6 li,
#size1 li,
#size2 li,
#sex li {
}
#option1 li label,
#option2 li label,
#option3 li label,
#option4 li label,
#option5 li label,
#option6 li label,
#size1 li label,
#size2 li label,
#sex li label {
padding: 10px 0;
}
#option1 li,
#option2 li,
#option3 li,
#size1 li,
#size2 li,
#sex li {
width: 100%;
}
#option1 li:nth-child(1) label,
#option2 li:nth-child(1) label,
#option3 li:nth-child(1) label,
#option4 li:nth-child(1) label,
#option5 li:nth-child(1) label,
#option6 li:nth-child(1) label,
#size1 li:nth-child(1) label,
#size2 li:nth-child(1) label,
#sex li:nth-child(1) label {
border-top: 2px solid #eee;
border-right: 2px solid #eee;
border-bottom: 1px solid #eee;
border-left: 2px solid #eee;
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
#size1 li:nth-child(2) label,
#size2 li:nth-child(2) label,
#sex li:nth-child(2) label {
border-top: 1px solid #eee;
border-right: 2px solid #eee;
border-bottom: 1px solid #eee;
border-left: 2px solid #eee;
}
#option1 li:nth-child(2) label,
#option2 li:nth-child(2) label,
#option3 li:nth-child(2) label,
#option4 li:nth-child(2) label,
#option5 li:nth-child(2) label,
#option6 li:nth-child(2) label,
#size1 li:nth-child(3) label,
#size2 li:nth-child(3) label,
#sex li:nth-child(3) label {
border-top: 1px solid #eee;
border-right: 2px solid #eee;
border-bottom: 2px solid #eee;
border-left: 2px solid #eee;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.hide {
display: none;
}
.submit input,
.submit a {
padding: 13px 35px 13px 25px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
}
.submit a.back {
font-size: 16px;
line-height: 16px;
margin: 0 5px 10px 0;
padding: 13px 20px;
}
} .thanks {
border-top: 1px solid #ececec;
padding: 20px 0 80px 0;
}
.thanks h4 {
font-size: 26px;
text-align: center;
margin: 0 0 30px 0;
padding: 15px 10px;
}
.thanks p {
margin: 10px 0 20px 0;
}
@media screen and (max-width: 768px) {
.thanks {
padding: 20px 5% 40px 5%;
}
.thanks h4 {
font-size: 20px;
margin: 0 0 20px 0;
}
} .sample {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-indent: -9999px;
text-decoration: none;
overflow: hidden;
_zoom: 1;
overflow: hidden;
filter: alpha(opacity=30);
-webkit-opacity: 0.3;
-moz-opacity: 0.3;
opacity: 0.3;
-webkit-background-size: 30px auto;
-moz-background-size: 30px auto;
background-size: 30px auto;
-webkit-background-origin: content;
-moz-background-origin: content;
background-origin: content;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (min-width: 769px) {
}
@media screen and (min-width: 0px) and (max-width: 768px) {
}