body { font-family:brandon-grotesque, "Helvetica Neue",Helvetica,Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; font-style:normal; font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; -moz-font-feature-settings: "palt"; letter-spacing: 0.075em; display:block; font-weight:500; color: #000000; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size:16px;}
h1,h2,h3,h4,h5,h6,p { font-family: brandon-grotesque, sans-serif; font-weight: 500; font-style: normal; margin:0; color:#000000; line-height:1.7; font-weight:500;}
ol, ul { list-style: none; padding: 0;}
a, a:hover {text-decoration: none;}
small {font-size:80%;}
#loader img {position: absolute;top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 180px;}
a, td, td p {color:#000000;  transition: 0.5s;}
a:hover {color:#000000; }
.current {border-bottom:2px solid #000000;}
.background-keep{width:100%; height:100%; position:fixed; z-index:-2;}
section {padding:40px; position:relative;}
section:nth-of-type(1) {background:#ffffff; padding-bottom:40vh;}
section:nth-of-type(2) {padding-bottom:35vh}

.product-wrap {margin-top:-40vh;}
.product-bg {position: absolute; z-index: -1; height: 35vh; width: 100vw; top: 0; left: 0; background-color: #ffffff;}
h1 {text-align:left; font-size:4.5vw; line-height: 1; letter-spacing: 0.05em; font-weight: 700;}
.loader-left {background-image: url(/static/full/macpac/backpackstyling/2021FW/img/top.jpg); width: 100%; height: 100%; background-size: cover; background-position: center;}
.logo-title {position:relative;}
.macpac-logo {position:fixed; top:32px; right:24px;width: 200px; z-index:10000;}
.logo-title {position:fixed; bottom:48px; left:-77px; }
.logo-title p {font-size:21px; font-weight:400;line-height: 1;}
.logo-title h1 {text-align:left; font-size:4.5vw; line-height: 1; text-align:left;}
.logo-title h1 span {font-weight:700; font-size:6.6vw;}

.top-content {position:relative; margin: 80px 0;}
.top-content p {font-size: 21px; font-weight: 400; line-height: 1;margin-bottom: 12px;}
h2 {font-size:48px;}
h3 {font-size:90px; line-height: 1;}

.product-page section {position:relative; padding-top:80px; margin-bottom:120px;}
.product-page section:last-of-type {margin-bottom:0;}

.uk-grid>* { padding-left: 80px;}
.uk-grid { margin-left: -80px;}
.uk-grid>.uk-grid-margin { margin-top: 80px;}

footer { background-color: #ffffff; text-align: center; padding-top:120px;}
footer a.backto {border-bottom:1px solid #000000; padding:0 8px; font-weight:400; font-size:20px; line-height:1;}
footer a.backto span {font-weight:700;}
footer a.mcpc {width: 160px; display: block; margin: 80px auto;}
footer .copyright {background:#ffffff; padding:12px 0;}
footer .copyright p {font-size:12px; margin: 0; font-weight: 400;}
table {border-spacing: 0;}
.menu, .menu span { display: inline-block; -webkit-transition: all .4s; transition: all .4s; box-sizing: border-box;}
.menu.active p {color:#ffffff;}
.menu.active span {background-color:#000;}
.menu {    position: fixed; top: 16px; right: 16px; width: 64px; height: 64px; z-index: 10; border: none; background: transparent; padding: 0;}
.menu p { text-align: center; margin-top: -32px; font-size: 12px;   position: fixed;}
.menu span { position: absolute; right: 0; width: 100%; height: 2px; background-color: #000; z-index: 10;}
.menu span:nth-of-type(1) { top: 24px; width: 42px; right: 10px;}
.menu span:nth-of-type(2) { bottom: 25px; width: 28px; right: 10px;}
.menu span:nth-of-type(3) { bottom: 0px;}
.menu.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg);   top: 22px;}
.menu.active span:nth-of-type(2) { -webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg);   bottom: 30px; width: 42px;}
#nav { position: fixed; top: 0; right: 0; z-index: 10; width: 100%; height: 100vh; opacity: 0; background-color: #ffffff; transition: all 0.3s ease-in-out; visibility: hidden;   overflow-y: scroll;}
#nav.active { right: 0; opacity: 1; -moz-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); visibility: visible;}
#nav ul { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#nav ul li { list-style-type: none;}
#nav ul li a { display: block; margin: 20px 0; transition: all 0.2s ease-in-out; text-align: center; text-decoration: none; color: #ffffff; font-size: 26px; letter-spacing: 0.05em; line-height: 1.25; font-weight: 700;}
#nav ul li a img {    width: 90px; margin: 0 auto 0;}
#nav ul li a:hover {   opacity:0.5;}

.modal_open{display: block; position:relative; width: 84%; margin: 0 auto; padding-top: 94px;}
.modal_box {position: fixed; z-index: 7777; display: none; width: 100%; max-width: 100%; height:100vh; overflow-x:hidden; overflow-y:scroll; -ms-overflow-style: none; scrollbar-width: none margin: 0; padding: 160px 0 80px; text-align: center; background: #fff; box-sizing: border-box; top:0!important; left:0!important;}
.modal_box::-webkit-scrollbar {display:none;}
.modal_close {position: fixed; top: 24px; left: 24px; display: block; width: 112px; font-size: 46px; color: #000; line-height: 62px; text-align: center; z-index: 10000;}
.modal_close i {line-height: 62px; vertical-align: bottom;}
.modal_bg {position: fixed; top: 0; left: 0; z-index: 6666; display: none; width: 100vw; height: 120%; background-color: #fff;}
.link_area { overflow: hidden; max-width: 410px; margin: 60px auto 0; text-align: center;}
.link_area .modal_link {display: inline;}
.link_area .modal_link a { display: inline-block; width: 180px; color: #000; line-height: 2.5; text-decoration: none; margin: 0 10px; background: #e6e6e6;}
.link-area ul li.modal_link:first-child a {float: left;}
.link-area ul li.modal_link:last-child a {float: right;}

.modal-indide {width: 80%; max-width: 1000px; margin: 0 auto;}
.slick-dots {margin-left: -40px; bottom: -36px;}
.slick-track {margin-left: 0;}
.slick-dots li button {pointer-events: none;}

a.store_link {color:#ffffff; background-color:#000000; font-family:brandon-grotesque, sans-serif; font-size:14px; line-height:1; font-weight:700;  display: block; border-radius: 18px; padding: 10px 18px; margin-bottom: 8px;}
a.store_link:hover {color:#ffffff; opacity:0.5;}
.top-large-link .product-detail {display: flex; justify-content: flex-end; margin-top: 8px;}
.top-large-link:nth-of-type(even) .product-detail {justify-content: flex-start;}
.product-detail td, .product-detail th {vertical-align: top; font-family: futura-pt, sans-serif; font-weight:normal; text-align: right;}
.product-detail td a {font-weight:400; margin-top:32px; text-align: center;    font-size: 16px;}
.product-detail td p:nth-of-type(1) {font-size:12px; margin-left:24px; text-align:right;}
.main_visual {display:flex; flex-wrap:wrap;}
.link_area { overflow: hidden; max-width: 410px; margin: 60px auto 0; text-align: center;}
.link_area .modal_link { display: inline;}
.link_area .modal_link a { display: inline-block; width: 180px; color: #000; line-height: 2.5; text-decoration: none; margin: 0 10px; background: #e6e6e6;}
.link-area ul li.modal_link:first-child a { float: left;}
.link-area ul li.modal_link:last-child a { float: right;}
.product-page .title {position: absolute; right: 24px;}
.top-large-link:nth-of-type(even) {position:relative; padding-top:20vw!important;}
.top-large-link:nth-of-type(odd) {padding-top:20vw!important;}
.top-large-link:first-of-type {padding-top:0!important;}
.top-large-link:first-of-type {margin-top:0;}
.top-large-link:nth-of-type(2) {position:relative; padding-top:40vw!important;}
.top-large-link a img.main-image {width: 100%; transition: 1s; position:relative;}
.top-large-link a img.main-image:hover {filter: brightness(50%);}
.top-large-link h3 {line-height: 1; text-align:left; }
.top-large-link img.text-image {position: absolute; left: 16px; bottom: 16px; width: 16px;}
.top-large-link a .detail-link {transition: 1s; z-index: 1; opacity:0; border: 1px solid #ffffff; padding: 12px 40px; border-radius: 22px; position:absolute; pointer-events: none; top:calc(50% + 47px); left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.top-large-link a .detail-link p {font-size: 17px; color:#ffffff; line-height: 1; font-weight:700;}
.top-large-link a:hover .detail-link {opacity:1;}
.top-large-link table tr td p {font-size:11px; padding-left: 21px;}
.top-large-link table tr td h4 {font-size:26px; margin-left: 21px;}
.product-title {position: absolute; z-index: 2;}

.sp {display:none;}
.pc {display:initial;}
._sp {display:none;}
._pc {display:block;}

@media screen and (min-width: 700px) {
.slider-nav2 .slick-track { transform: unset !important;}
}

@media screen and (max-width: 769px) {
.modal_box {padding: 50px 2vw 40px;}
.modal_close {width: 40px; line-height: 40px; font-size: 30px;}
.modal_close i {line-height: 44px;}
.link_area {margin: 25px auto 0;}
.link_area .modal_link a {margin: 15px auto 0;}
.link_area ul li.modal_link:first-child a {float: none; margin-top: 0;}
.link_area ul li.modal_link:last-child a {float: none;}
}

@media screen and (max-width: 1399px) {

.product-detail td p {text-align: right;}
.product-detail tr:first-of-type {display: table-row;}
}

@media screen and (min-width: 640px) {
.top-large-link.rplus p {right:0;}
.top-large-link.rplus h3{bottom:0;}
.top-large-link.rplus img {margin:0 0 48px;}
.top-large-link.rplus img.text-image {right: 16px; left: initial;}
.product-page .top-large-link.rplus img {margin: 0;}
.product-page .top-large-link h3 {position: initial;}
.product-page .top-large-link:nth-of-type(2) .uk-card {margin-top:240px;}
.top-large-link:nth-of-type(even) .product-detail td, .top-large-link:nth-of-type(even) .product-detail th {text-align:left;}
.top-large-link:nth-of-type(even) .product-detail td a {text-align:left; margin-left:0;}
.top-large-link:nth-of-type(even) .product-detail td p {text-align:left; margin-left:0;}
.unset-on-large {animation: unset!important; opacity: 1!important;}
}

@media screen and (max-width: 959px) {
.pc {display:none;}
.sp {display:initial;}
._sp {display:block;}
._pc {display:none;}
}

@media screen and (max-width: 639px) {
#loader-bg #loader > div, #loader-bg #loader > div > div {height: 50vh!important; padding: 0; margin:0;}
.logo-title h1 {left:initial; font-size: 10.5vw;}
.logo-title p {font-size: 3.5vw; margin-bottom: 12px;}
h1 {font-size: 10.5vw;}
.slick-dots {width: 100%; max-width: 100vw;}
.macpac-logo {width: 25vw;}
.product-detail td a {margin-bottom: 80px;}
.top-content {margin: 80px 0 40px;}
section { padding: 40px 5%;}
.top-content p {font-size:3.5vw;margin-bottom: 12px;}
.logo-title {left: initial; bottom: initial; left: 50%; top: 24px; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); width: 90%;}
.fullscreenmenu #nav ul {margin-left:0; width: 100%;}
#nav ul li:last-of-type a {margin-top:120px}
.main-title h1 {font-size:14vw; line-height:1;}
#nav ul li a {width:100%;}
#nav ul li a h2 {font-size:6vw;}
.modal_switch {width:56px; height:56px; z-index:1;}
.main_visual {display:flex; flex-wrap:wrap;}
.modal-indide {width:100%; max-width: 100%; padding: 120px 24px; box-sizing: border-box;}
.modal_open{/** display: inline-block; margin: 0; float: left; **/ width: 90%;}
.modal_box { position: fixed; z-index: 7777; display: none; width: 100%; max-width: 100%; margin: 0; text-align: center; background: #fff; box-sizing: border-box; height:100%; padding:0;}
.modal_close { position: fixed; top: 24px; display: block; width: 25vw; line-height: 62px; }
.modal_close:hover {color:#000000;}
.modal-divider {position:relative;}
.modal_bg { position: fixed; top: 0; left: 0; z-index: 6666; display: none; width: 100%; height: 120%; background-color: #ffffff;}
.link_area { overflow: hidden; max-width: 410px; margin: 60px auto 0; text-align: center;}
.link_area .modal_link { display: inline;}
.link_area .modal_link a { display: inline-block; width: 180px; color: #000; line-height: 2.5; text-decoration: none; margin: 0 10px; background: #e6e6e6;}
.link-area ul li.modal_link:first-child a { float: left;}
.link-area ul li.modal_link:last-child a { float: right;}
.top-large-link:nth-of-type(even) .product-detail {justify-content: flex-end;}
.product-page .title {position: initial; right: 0;}
.product-page .title h3 { text-align: left; margin: 0 16px; line-height: 1; font-size: 12vw;}
.top-large-link .product-detail {margin:16px 16px 0}
.introduction {padding: 0 24px;}
.top-large-link h3 { font-size: 18vw;}
.scroll-animation-top {left: 16px;}
}

.slider-nav .slick-slide, .slider-nav2 .slick-slide {padding-right: 16px;}
.product-detail {text-align:left;}
.product-detail p:nth-of-type(1) {font-size:12px;}
.product-detail p:nth-of-type(2) {font-size:14px; font-weight: bold; margin-bottom: 14px;}
.product-detail p:nth-of-type(3) {font-size:27px; font-weight:bold; line-height: 1; margin-bottom: 32px;}
.product-detail p:nth-of-type(3) span {font-size:70%;}
.product-detail p:nth-of-type(4) {font-size:14px; font-weight:400;}
.product-detail h6 {font-size:27px; font-weight:700; line-height: 1.5;}
.modal_switch {margin:0 32px 0;}
.slider-nav, .slider-nav2 {margin-bottom: 40px;}
.full a {background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; margin: 0; text-decoration: none;}
.full a.img01 {background-image: url(/static/full/macpac/backpackstyling/2021FW/img/back_1.jpg);}
.full a.img02 {background-image: url(/static/full/macpac/backpackstyling/2021FW/img/back_2.jpg);}
.full a.img03 {background-image: url(/static/full/macpac/backpackstyling/2021FW/img/back_3.jpg);}
.full a.img04 {background-image: url(/static/full/macpac/backpackstyling/2021FW/img/back_4.jpg);}
.full a.img05 {background-image: url(/static/full/macpac/backpackstyling/2021FW/img/back_5.jpg);}
.full .slick-dots {bottom: 4%; z-index: +1;}