:root {
	--bodyWidth: calc(100% - 28rem);
	--typoWidth: calc(90*1em/1.618);
}
@font-face {
    font-family: fontL;
    src: url('fonts/SF-UI-Display-Light.otf');
}

@font-face {
    font-family: fontR;
    src: url('fonts/SF-UI-Display-Regular.otf');
}

@font-face {
    font-family: fontM;
    src: url('fonts/SF-UI-Display-Medium.otf');
}

@font-face {
    font-family: fontB;
    src: url('fonts/SF-UI-Display-Bold.otf');
}

/*
===================================
    TAGS
===================================
*/

* {
    font-family: fontR, tahoma, sans-serif, arial;
    font-weight: normal;

    color: #000;
    line-height: 1.6;
    letter-spacing: .03em;
    outline: none;
}

/**,
:before,
:after {
    box-sizing: border-box;
}*/


html {font-size: 62.5%;}


html, body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #fff;
}
body {
    font-size: 1.4rem;
}

a {text-decoration: none}



button.action {
    background: #000;
    color: #fff;
    border: none;
    padding: 0 5rem;
    box-sizing: border-box;
    text-transform: uppercase;
    transition: .5s ease-out;
}

button.action:hover {background: #333}



/*
===================================
    STANDARD CLASS
===================================
*/
.clear {
    clear: both !important;
    float: none !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}



[class*="cover-image"] {
    width: 100%;
    position: relative;
}

[class*="cover-image"] > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    object-fit: cover;
}

[class*="cover-image-1:1"] {
    aspect-ratio: 1/1
}
[class*="cover-image-3:2"] {
    aspect-ratio: 3/2
}
[class*="cover-image-4:3"] {
    aspect-ratio: 4/3
}
[class*="cover-image-16:9"] {
    aspect-ratio: 16/9
}



.icon-close,
[class*=icon-arrow] {
    position: relative;
}

.icon-close:before,
.icon-close:after,
[class*=icon-arrow]:before,
[class*=icon-arrow]:after {
	content: '';
    width: 100%;
    height: .1rem;
    background: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.icon-close:before,
.icon-arrow-down:before {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.icon-close:after,
.icon-arrow-down:after{
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}



[class*=icon-arrow]:before,
[class*=icon-arrow]:after {width: 30%}

[class*=icon-arrow]:before {left: calc(0px - (30% * 0.7071067812))}
[class*=icon-arrow]:after {right: calc(0px - (30% * 0.7071067812))}

.icon-arrow-down:before,
.icon-arrow-down:after {
    transform-origin: bottom;
    -moz-transform-origin: bottom;
    -webkit-transform-origin: bottom;
}


.icon-arrow-up:before {
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.icon-arrow-up:after {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.icon-arrow-up:before,
.icon-arrow-up:after {
    transform-origin: top;
    -moz-transform-origin: top;
    -webkit-transform-origin: top;
}


.paragraph ul {
    margin: auto;
    padding: auto;
}
.paragraph li {
    margin: 1em 0;
}
.paragraph img {
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.paragraph b,
.paragraph strong,
.paragraph h1 {
    font-family: fontB;
}
.paragraph p,
.paragraph h1 {
    margin: 1.5em 0;
}
.paragraph h2,
.paragraph h3 {
    margin: 1.5em 0 .7em 0;
	font-family: fontM;
	line-height: 1.3;
}
.paragraph h2 {
	font-size: calc(1em*1.618*1.2);
}
.paragraph h3 {
	font-size: calc(1em*1.618);
}
.paragraph h4,
.paragraph h5,
.paragraph h6 {
    margin: 1em 0 .5em 0;
	font-family: fontB;
	line-height: 1.3;
}
.paragraph ul {
    margin: 1em 0;
    padding-left: 3em;
    list-style: disc;
}
.paragraph li {
    margin: .5em 0;
    padding-left: 1em;
}


/*
===================================
    CONTENT
===================================
*/

.empty {
    width: 100%;
    height: 2rem;
    font-size: 2rem;
    color: #ccc;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}


body {
    padding: 0 4rem;
    box-sizing: border-box;
}



nav {
    width: 25rem;
    height: 100%;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    z-index: 100;
}
nav:hover {
	background: #fff;
}


nav .mobile-menu-close {display: none}


nav .logo {
	width: 100%;
	height: 10rem;
	background: url('image/logo.svg') center bottom no-repeat;
	display: block;
	margin-bottom: 5rem;
	background-size: contain;
	padding-top: 3rem;
	box-sizing: border-box;
	background-origin: content-box;
}

nav ul {
    width: inherit;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav>ul {
    width: 100%;
    height: calc(100vh - 15rem);
    height: -moz-calc(100vh - 15rem);
    height: -webkit-calc(100vh - 15rem);
    padding-left: 4rem;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    -webkit-scroll-width: 7px;
}

nav li {
    float: left;
    width: inherit;
}
nav > ul > li:last-child {
	margin: 2em 0;
}
nav > ul > li:last-child > a {
	font-family: fontL;
	letter-spacing: .2em;
}


nav li a {
    float: left;
    width: 100%;
    text-transform: uppercase;
    padding: .5em 0 .5em 1rem;
    box-sizing: border-box;
    position: relative;
	font-family: fontL;
    letter-spacing: .05em;
}


nav li.active > a {
    color: #000;
    font-family: fontB;
}

nav li.active>a:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .3rem;
    border-color: transparent;
    border-left-color: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

nav li.show > ul {
	max-height: 100%;
	margin-bottom: 1rem;
}


nav>ul>li>a {
    font-size: 1.8em;
    font-family: fontB;
}

nav ul ul {
    padding-left: 1em;
    max-height: 0;
    overflow: hidden;
    transition: .3s ease-out;
}

nav ul ul a {
	color: #666;
	padding: 1em 0 1em 1rem;
}
nav ul ul ul a {
	text-transform: capitalize
}


article {
    width: var(--bodyWidth);
    padding-top: 15rem;
    margin-left: auto;
}

article > * {
    width: 100%;
}



header {
    width: var(--bodyWidth);
    height: 10rem;
    background: #fff;
    padding-bottom: 5rem;
    position: fixed;
    top: 0;
    right: 4rem;
    z-index: 10;
    transition: .3s ease-out;
    transform: translateY(0);
}
header[hide] {
    transform: translateY(-100%);
}

header .mobile-menu-open {display: none}

header  > * {
    position: absolute;
    bottom: 5rem;
}


header .tool{right: 0}


header .tool>* {
    height: 4rem;
    float: left;
    border: none;
    border-bottom: dotted.1rem #000;
}

header .tool * {float: left}

header .tool form {width: 35rem; border: none}

header .tool input {
    width: 100%;
    height: inherit;
    border: none;
    padding: 0 1rem;
    box-sizing: border-box;
    font-size: 2em;
    font-family: fontL;
    color: #999;
    transition: .5s ease-out;
    border-bottom: dotted .1rem #000;
}

header .tool input:focus {
    color: #000;
    font-family: fontM;
    border-bottom-style: solid;
}


header .tool button {
    width: 3rem;
    background-position: center 0;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 2rem;
    margin-left: 2rem;
    float: left;
    display: block;
    transition: .3s ease-out;
    position: relative;
    cursor: pointer !important;
}

header .tool button:hover {
    border-bottom-style: solid;
    background-size: 2.2rem;
}

header .tool button.favourite {background-image: url('image/svg/heart.svg')}
header .tool button.basket {background-image: url('image/svg/bag.svg')}


header .tool button > label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    margin: auto;
    font-size: .9rem;
    cursor: pointer;
}



header .tool button[state=true]:after,
header .tool button[state=true]:before {
	content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .6rem;
    border-color: transparent;
    border-bottom-color: #ccc;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.1rem;
    margin: auto;
    z-index: 1;
}

header .tool button[state=true]:after {
	content: '';
    border-bottom-color: #fff;
    bottom: -1.2rem;
}


header .popup {
    width: 25rem;
    height: auto;
    background: #fff;
    border: solid .1rem #ccc;
    padding: 2rem;
    box-sizing: border-box;
    position: absolute;
    top: 5rem;
    right: 0;
    z-index: 1;
}

header .favourite .popup {right: -5rem}

header .popup * {float: left}

header .popup span:first-of-type {
    width: 20%;
}

header .popup span:last-of-type {
    width: 75%;
    float: right;
}

header .popup span:last-of-type>* {
    width: 100%;
    clear: both;
    text-align: left;
}

header .popup span:last-of-type label:first-of-type {
    text-transform: uppercase;
    font-family: fontM;
    font-size: 1.3rem;
    margin-bottom: .5rem
}

header .popup img {
    max-width: 100%;
    max-height: 100%;
}



header .lang {
    height: 1rem;
    right: 0;
    top: 1.5rem;
    display: none;
}

header .lang label {
    float: left;
    text-align: center;
    text-transform: uppercase;
    color: #666666;
    font-size: .9rem;
    cursor: pointer;
    letter-spacing: .1rem;
}

header .lang label:nth-of-type(2) {margin: 0 1rem}

header .lang label:hover {
    text-decoration: underline;
}

header .lang label.active {color: #000; font-family: fontM}



footer {
    margin: 10rem 0;
}
footer > * {
    width: 100%;
    border-top: solid thin #e5e5e5;
    padding-top: 5rem;
	text-align: center;
}
footer > :nth-child(n+2) {
    margin-top: 5rem;
}

footer .copyright {
    color: #666;
    font-size: 0.9rem;
    font-family: fontL;
    letter-spacing: 0.1rem;
	border-top: none;
}

footer .copyright code {
    color: #000000;
	text-transform: uppercase;
}


footer .info {
    list-style: none;
    padding: 0;
    margin: 0;
}
footer .info li {
    margin: 1em 0;
}
footer .info li.name {
    font-size: 5vw;
	font-family: fontL;
	letter-spacing: .1em;
    margin: 0;
	line-height: 1;
}
footer .info label {
    color: #666;
}
footer .info label:after {
    content: ':';
    margin: 0 .5em 0 .3em;
}

footer .info .brand {
	font-size: 1.6em;
	text-transform: uppercase;
	margin: .5em 0 2em 0;
}


main {
    min-height: calc(100vh - 28.5rem);
    min-height: -moz-calc(100vh - 28.5rem);
    min-height: -webkit-calc(100vh - 28.5rem);
    position: relative;;
}

main>* {
    width: 100%;
    /*float: left;*/
    /*clear: both;*/
}


main .mod-title {
    margin-bottom: 4rem;
}


main .mod-title div,
main .mod-title div * {
    float: left;
    line-height: 5rem;
}

main .mod-title div:nth-of-type(1) code {
    font-family: fontB;
    margin-right: .5rem;
}


main .mod-title div:nth-of-type(2) {
    float: right;
    font-size: 2rem;
    font-family: fontB;
    text-transform: uppercase;
}

/*
-----------------------------------
    User Interface
-----------------------------------
*/
#tpl-mobile {
    display: none;
}


/*
-----------------------------------
    CLASS
-----------------------------------
*/
.product-list {
    display: grid;
    grid-gap: 50px 25px;

}
.product-list.show-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.product-list.show-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 30px 10px;
}

.product-list a {
    transition: .5s ease-out;
	position: relative;
}

.product-list a > * {
    width: 100%;
    display: block;
    text-align: center;
    cursor: pointer;
}

.product-list a .price {
    margin-top: 1em;
    line-height: 1;
}
.product-list a .price-percent {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: #ff9152;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .7em;
	color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	transform: translate(50%, -50%);
	letter-spacing: .1em;
}

.product-list a .title {
    font-family: fontB;
    text-transform: uppercase;
	margin-top: 1em;
}
.product-list a:hover .title {
    text-decoration: underline
}

.product-list a button {
    width: 100%;
    min-height: 3rem;
    margin-top: 1rem;
    background: #fff;
    border: solid .1rem #000;
}

.product-list a .price-old {
	color: #999;
	text-decoration: line-through;
	font-size: .8em;
	letter-spacing: .1em;
}

.product-list.show-6 a * {
    font-size: 1rem
}




/*
-----------------------------------
    OBJECT
-----------------------------------
*/
#home {
    width: calc(100% - 9rem);
}

#home header {width: 100%}

#home .product > div > h2 {
    font-size: 5em;
    font-family: fontL;
    margin: 15rem 0 6rem 0;
    text-align: right;
    line-height: 1.1;
}



#banner {
    width: 100%;
    padding-bottom: calc(100%/16*9);
    margin-bottom: 5rem;
    position: relative;
}

#banner div {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 2;
}


#banner label {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: solid .1rem #fff;
    display: inline-block;
    margin: 0 1rem;
    position: relative;
}

#banner label[state=active]:before {
	content: '';
    width: .8rem;
    height: .8rem;
    border-radius: .4rem;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

#banner a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
    transition: 1.5s ease-out;
}

#banner a:first-of-type {
    opacity: 1;
    z-index: 1;
}



#product .panel{
    height: 4rem;
    line-height: 4rem;
    margin-bottom: 5rem;
}

#product .panel code {font-family: fontB; margin-right: .5rem}

#product .total,
#product .total * {
    float: left;
    line-height: inherit;
    text-transform: uppercase;
}



#product .tool {
    height: inherit;
    float: right;
    position: relative;
}

#product .tool > * {
    height: inherit;
    float: left;
}

#product .display {
    display: flex;
    justify-content: center;
    align-items: center;
}
#product .display label {
    cursor: pointer;
    padding: 0 1em;
    color: #999;
}
#product .display label[state=true] {
    font-family: fontB;
    color: #000;
}

#product .display label.show-3:before {
    content: '[ 3 ]'
}
#product .display label.show-6:before {
    content: '[ 6 ]'
}


#product span[class*=popup] {
    height: inherit;
    line-height: 4rem;
    text-transform: uppercase;
    text-align: right;
    padding-right: 2.5rem;
    background-repeat: no-repeat;
    background-position: right center;
    margin-left: 6rem;
    position: relative;
}

#product span[class*=popup]:hover {
    text-decoration: underline;
    cursor: pointer;
}

#product .popup-filter {background-image: url('image/icon-filter.png')}
#product .popup-sort {background-image: url('image/icon-sort.png')}

#product span[class*=popup][state=true]:after,
#product span[class*=popup][state=true]:before {
	content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .7rem;
    border-color: transparent;
    border-bottom-color: #ccc;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

#product span[class*=popup][state=true]:after {
    border-bottom-color: #fff;
    bottom: -.1rem;
}

#product span[class*=popup] + * {
    height: auto;
    background: #fff;
    border: solid .1rem #ccc;
    position: absolute;
    top: 4rem;
    right: 0;
    z-index: 5;
    visibility: hidden;
    opacity: 0;
    transition: .5s ease-out;
}

#product span[class*=popup][state=true] + * {
    visibility: visible;
    opacity: 1;
}



#product .popup-sort-content {
    padding: 2rem;
    margin: 0;
}

#product .popup-sort-content li {
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    text-transform: none;
    display: block;
    position: relative;
    padding-left: .5rem;
    box-sizing: border-box;
}

#product .popup-sort-content li:before {
	content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .3rem;
    border-color: transparent;
    border-left-color: #000;
    border-right: 0;
    position: absolute;
    left: -.4rem;
    top: 0;
    bottom: 0;
    margin: auto;
    display: none;
}

#product .popup-sort-content li:hover {
    text-decoration: underline;
    cursor: pointer;
}

#product .popup-sort-content li.active {
    font-family: fontB;
}

#product .popup-sort-content li.active:before {display: block}



#product .popup-filter-content {
    width: 40rem;
    padding: 4rem;
}

#product .popup-filter-content * {font-size: 1rem}

#product .popup-filter-content>* {
    width: 100%;
    float: left;
    clear: both;
    margin-bottom: 1.5rem;
}

#product .popup-filter-content .menu {
    margin-top: 2rem;
    margin-bottom: 0;
}

#product .popup-filter-content input[type=text] {
    border: none;
    border-bottom: dotted .1rem #999;
    margin-top: 1.4rem;
    padding-left: .5rem;
    box-sizing: border-box;
}

#product .popup-filter-content div * {float: left}


#product .popup-filter-content div>span:nth-of-type(1) {
    width: 8rem;
    height: 4rem;
    line-height: 4rem;
    text-align: right;
    text-transform: uppercase;
    margin-right: 2rem;
}


#product .popup-filter-content .sex input {display: none}

#product .popup-filter-content .sex label {
    margin-right: 4rem;
}

#product .popup-filter-content .sex label span {
    height: 4rem;
    line-height: 4rem;
    padding-left: 2.5rem;
    position: relative;
}

#product .popup-filter-content .sex label span:before,
#product .popup-filter-content .sex label span:after {
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#product .popup-filter-content .sex label span:before {
    width: 1.6rem;
    height: 1.6rem;
    margin: 1.2rem .5rem 1.2rem 0;
    border-radius: .8rem;
    border: solid .1rem #999;
    box-sizing: border-box;
    left: 0;
}

#product .popup-filter-content .sex label span:after {
    width: .8rem;
    height: .8rem;
    border-radius: .4rem;
    background: #000;
    left: .4rem;
    display: none;
}

#product .popup-filter-content .sex input:checked + span:after {display: block}


#product .popup-filter-content .price .value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 10rem);
}
#product .popup-filter-content .price .value input {
    text-align: center;
}

#product .popup-filter-content .price label {
    width: calc((100% - 10rem)/2);
    width: -moz-calc((100% - 10rem)/2);
    width: -webkit-calc((100% - 10rem)/2);
    float: left;
}

#product .popup-filter-content .price label span {
    float: left;
    line-height: 2rem;
    padding-left: 2rem;
    box-sizing: border-box;
    position: relative;
}

#product .popup-filter-content .price label span:before,
#product .popup-filter-content .price label span:after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#product .popup-filter-content .price label span:before {
    width: 1.2rem;
    height: 1.2rem;
    border: solid .1rem #999;
    border-radius: .6rem;
    left: 0;
}

#product .popup-filter-content .price label span:after {
    width: .6rem;
    height: .6rem;
    border-radius: .3rem;
    background: #000;
    left: .3rem;
    display: none;
}

#product .popup-filter-content .price label input:checked + span:after {display: block}


#product .popup-filter-content .price input[type=radio],
#product .popup-filter-content .price input[type=checkbox] {
    display: none
}



#product .popup-filter-content .stuff select {
    height: 3rem;
    margin-top: 0.5rem;
    border: solid .1rem #999;
    padding: 0 1rem;
    box-sizing: border-box;
}


#product .popup-filter-content .color input {display: none}

#product .popup-filter-content .color label {
    width: 1.5rem;
    height: 1.5rem;
    border: solid thin #999;
    margin-top: 1.2rem;
    margin-left: 1.8rem;
    position: relative;
}

#product .popup-filter-content .color label:first-of-type {margin-left: 0}

#product .popup-filter-content .color label:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .5rem;
    border-color: transparent;
    border-top-color: #000;
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    margin: auto;
    display: none;
}

#product .popup-filter-content .color input:checked+label {border-color: #000}
#product .popup-filter-content .color input:checked+label:before {display: block}


#product .popup-filter-content .color label[for*=black] {background: black}
#product .popup-filter-content .color label[for*=red] {background: red}
#product .popup-filter-content .color label[for*=green] {background: green}
#product .popup-filter-content .color label[for*=blue] {background: blue}
#product .popup-filter-content .color label[for*=cyan] {background: cyan}
#product .popup-filter-content .color label[for*=yellow] {background: yellow}
#product .popup-filter-content .color label[for*=magenta] {background: magenta}
#product .popup-filter-content .color label[for*=white] {background: white}


#product .popup-filter-content .menu > * {
    width: auto;
    height: 3rem;
    line-height: 3rem;
    padding: 0 2rem;
    float: left;
    background: #fff;
    border: solid .1rem #999;
    text-transform: uppercase;
    margin-left: 4rem;
}

#product .popup-filter-content .menu label:first-of-type {margin-left: 0}

#product .popup-filter-content .menu input {display: none}

/*
----------------------------------------------
    PRODUCT DETAIL
----------------------------------------------
*/
#product-detail + footer {
	width: var(--bodyWidth);
}


#product-detail .L {
    width: var(--bodyWidth);
}

#product-detail .L > * {
	width: 100%;
    float: none;
	max-width: 96rem;
	margin-left: auto;
	margin-right: auto;
}

#product-detail .R {
    width: 32rem;
    max-height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 0 4rem 3rem 3rem;
    background: #fff;
    position: fixed;
    right: 0;
    top: 15rem;
    transition: .5s ease-out;
}

#product-detail .R[state=move] {
    top: 0;
    padding-top: 3rem
}


#product-detail .gallery img {
    width: 100%;
    display: table;
    margin-bottom: 1px;
}

#product-detail .image {
    width: 100%;
    cursor: zoom-in;
}


#product-detail .images {
    column-count: 2;
    column-gap: 1px;
}


#product-detail .hr {
    margin-top: 8rem;
    padding-top: 3rem;
    border-top: solid thin #e5e5e5
}

#product-detail .other > * {
    display: block;
}

#product-detail .other > label {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.8em;
    margin-bottom: 5rem;
}

#product-detail .other .product-list {
    display: grid;
    grid-gap: 3rem 1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
#product-detail .other .product-list a * {
    font-size: 1rem
}



#product-detail .R img {
    max-width: 100%;
    height: auto;
}

#product-detail .R h1 {
    font-size: 1.3em;
    font-family: fontM;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 1rem;
}

#product-detail .R .sku {
	font-size: .8em;
}

#product-detail .R .price {
	margin-top: 3rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

#product-detail .R .price > :first-child label {
    font-size: 1.6rem;
    line-height: 2rem;
	display: block;
}

#product-detail .R .price .price-old {
    font-size: .8em !important;
    color: #999;
    text-decoration: line-through;
    font-family: fontL;
}
#product-detail .R .price .price-percent {
	font-size: .8em !important;
}

#product-detail .R .price span:last-of-type button {
    float: left;
    width: 2rem;
    height: 2rem;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    border:none;
    cursor: pointer;
}

#product-detail .R .price .share {
    background-image: url('image/svg/share.svg');
    background-size: auto 85%;
}
#product-detail .R .price .favourite {background-image: url('image/svg/heart.svg')}
#product-detail .R .price .favourite[state=active] {background-image: url('image/svg/heart_fill.svg')}

#product-detail .R .price .favourite {
    margin-right: 3rem;
}



#product-detail .R .info {
    margin-top: 3rem;
    text-align: center;
}

#product-detail .R .info,
#product-detail .R .info span {position: relative}

#product-detail .R .info span {
    height: 4rem;
    line-height: 4rem;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
}

#product-detail .R .info span:nth-of-type(1) {float: left}
#product-detail .R .info span:nth-of-type(3) {float: right}

#product-detail .R .info span[state=true],
#product-detail .R .info span:hover {
    text-decoration: underline;
    cursor: pointer;
}


#product-detail .R .info span[state=true]:after,
#product-detail .R .info span[state=true]:before {
	content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .6rem;
    border-color: transparent;
    border-bottom-color: #ccc;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

#product-detail .R .info span[state=true]:after {
    border-bottom-color: #fff;
    bottom: -.1rem;
}


#product-detail .R .info>div {
    width: 100%;
    height: auto;
    padding: 3rem;
    background: #fff;
    border: solid .1rem #ccc;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: .5s;
    position: absolute;
    top: 4rem;
    left: 0;
}

#product-detail .R .info>div>div {
    width: 100%;
    max-height: 26rem;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    padding-right: .5rem;
    box-sizing: border-box;
}

#product-detail .R .info>div>div * {float: none}

#product-detail .R .info span[state=true]+div {
    visibility: visible;
    opacity: 1;
}


#product-detail .R .buy > *,
#product-detail .R .buy {
    display: flex;
    align-items: center;
}
#product-detail .R .buy {
    justify-content: space-between;
}
#product-detail .R .buy > * {
    height: 5rem;
    background: #000;
    border: none;
    color: #fff;
    text-transform: uppercase;
    margin-top: 3rem;
    justify-content: center;
    font-size: .7em;
    cursor: pointer;
}

#product-detail .R .buy > :hover {
    background: #666
}
#product-detail .R .buy svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: #fff;
    margin-right: .5em;
}
#product-detail .R .buy .now {
    width: 45%;
}
#product-detail .R .buy .add {
    width: 52%;
}



#product-detail .R .contact {margin-top: 3rem}

#product-detail .R .contact > * {
    text-align: center;
    text-transform: uppercase;
	display: block
}
#product-detail .R .contact > label {
	letter-spacing: .15em;
}
#product-detail .R .contact a {
    font-size: 2.5rem;
    font-family: fontB;
    margin: .5em 0;
	line-height: 1;
}


#product-detail .R .utilities {
    margin-top: 3rem;
    text-align: left;
}



#article a {
    max-width: var(--typoWidth);
    margin: 4rem 0;
	display: flex;
	justify-content: space-between;
}

#article a > div:nth-of-type(1) {
    width: 10rem;
    height: 10rem;
}

#article a > div:nth-of-type(2) {
    width: calc(100% - 12rem);
    box-sizing: border-box;
}

#article a div:nth-of-type(2) > span {
    display: block;
}

#article a div:nth-of-type(2) > span:first-of-type {
    font-size: 1.6em;
    margin-bottom: .5rem;
	line-height: 1.2;
}

#article a div:nth-of-type(2) > span:last-of-type {
	color: #333;
	margin-top: 1em;
}


#article-detail {
    max-width: var(--typoWidth);
	margin: auto;
}
#article-detail .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
	margin-top: 5rem;
}
#article-detail .head h1 {
    width: calc(100% - 8rem);
    font-size: 3em;
    font-family: fontL;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

#article-detail .head .share {
    width: 4rem;
    height: 4rem;
    padding: 1rem;
    box-sizing: border-box;
    cursor: pointer;
}
#article-detail .paragraph {
    margin-top: 7rem;
}

#article-detail .embed {
    margin: 6rem 0;
}
#article-detail .embed .more {
    text-align: center;
    margin-top: 2em;
}
#article-detail .embed .more a {
    padding: .5em 2em;
    border: dashed 1px #000;
    text-transform: uppercase;
    font-family: fontL;
    display: inline-block;
}


#contact {
    width: 60rem;
    margin: 5rem;
    padding: 2rem;
    box-sizing: border-box;
}

#contact .left {
    width: 30%;
    float: left;
}

#contact .left>div,
#contact .left>div>span {
    float: left;
    clear: both;
    width: 100%;
    text-align: right;
}

#contact .left>div {margin-top: 2.3rem}

#contact .left > div:first-of-type {
	font-size:3em;
	text-transform: uppercase;
	letter-spacing: .5rem;
	margin-top: 0;
	padding-right: 0;
	border-right: none;
	line-height: 0.8;
	font-family: fontL
}
#contact .left>div{
    border-right: solid .5rem #000;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

#contact .left > div > span:first-of-type {
	font-size: .8em;
	margin-bottom: .3rem;
	letter-spacing: .1rem;
	color: #999;
}

#contact .left div:last-of-type a {
    width: 3rem;
    height: 3rem;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
}

#contact .left div:last-of-type .fanpage {background-image: url('image/contact-facebook.png')}
#contact .left div:last-of-type .youtube {background-image: url('image/contact-youtube.png')}

#contact .left div:last-of-type a:last-of-type {margin-left: 2rem}




#contact .right {
    width: 70%;
    float: right;
}

#contact form {
    width: 85%;
    float: right;
}

#contact form>* {
    float: left;
    clear: both;
    width: 100%;
}

#contact form div>* {
    float: left;
    clear: none;
}

#contact form div>input:nth-of-type(1) {width: 60%}
#contact form div>input:nth-of-type(2) {width: 38%; float: right}

#contact form input,
#contact form textarea {
    border: solid thin #d9d9d9;
    box-sizing: border-box;
    transition: .5s ease-out;
}

#contact form input:focus,
#contact form textarea:focus {
    color: #000;
    border-color: #000;
}

#contact form input {
    height: 4rem;
    margin-bottom: 2rem;
    padding: 0 1.5rem;
}

#contact form textarea {
    height: 10rem;
    padding: 2rem;
}

#contact form button {
    height: 6rem;
    margin-top: 3rem;
}



#contact.about .right {
    width: 60%;
    height: 32rem;
    float: right;
    text-align: left;
    overflow-y: auto;
}

#contact.about .right img {
    max-width: 100%;
    height: auto !important;
}




#basket .divTable {
    display: table;
    width: 100%;
}

#basket .divTable>div {display: table-row}
#basket .divTable>div>span {
    display: table-cell;
    padding: 1.5rem 1rem;
    vertical-align: middle;
}

#basket .divTable .head span {
    text-transform: uppercase;
    font-family: fontM;
    border-top: dotted .1rem #999;
    border-bottom: dotted .1rem #999;
    height: 3rem;
}


#basket .divTable span {text-align: right}
#basket .divTable span:nth-child(1) {width: 5rem; text-align: center}
#basket .divTable span:nth-child(2) {text-align: left}
#basket .divTable span:nth-child(3) {width: 8rem; white-space: nowrap}
#basket .divTable span:nth-child(4) {width: 8rem}
#basket .divTable span:nth-child(5) {width: 10rem}
#basket .divTable span:nth-child(6) {width: 5rem}

#basket .divTable img {
    max-width: 100%;
    max-height: 100%;
}

#basket .divTable a:hover span:first-of-type {text-decoration: underline}

#basket .divTable input {
    width: 4rem;
    border: none;
    border-bottom: dotted .1rem #000;
}

#basket .divTable span:nth-child(2) * {float: left}

#basket .divTable span:nth-child(2) span {
    float: left;
    clear: both;
    width: 100%;
    text-align: left;
}

#basket .divTable span:nth-child(2) span:first-of-type {
    text-transform: uppercase;
    margin-bottom: .5rem;
}

#basket .divTable span:nth-child(2) span:last-of-type {
    color: #666;
    font-size: 1rem;
}


#basket .divTable span:nth-child(6) label {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    cursor: pointer;
}

#basket .sum {
    padding: 4rem 0;
    border-top: dotted .1rem #999;
}

#basket .sum button {
    height: 5rem;
    float: right;
}

#basket .sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

#basket .sum .money > span {
    height: 5rem;
    line-height: 5rem;
    text-transform: uppercase;
}

#basket .sum .money > span:nth-of-type(2) {
    font-size: 2rem;
    font-family: fontM;
    margin-left: 2rem;
}

#basket-complete {
    padding: 6rem;
    box-sizing: border-box;
}

#basket-complete>span {
    width: 100%;
    float: left;
    clear: both;
    text-align: center;
    font-size: 1.4rem;
}

#basket-complete>span:first-of-type {
    text-transform: uppercase;
    font-family: fontB;
    margin-bottom: 1rem;
}




#payment {
    width: 65rem;
    padding: 6rem;
    box-sizing: border-box;
}

#payment>section>* {
    float: left;
    clear: both;
    width: 100%;
}

#payment>section>label {
    font-size: 2rem;
    text-transform: uppercase;
    font-family: fontB;
    margin-bottom: 3rem;
}


#payment .left {
    width: 40%;
    float: left;
}


#payment .left *:not(br) {
    float: left;
    text-align: left
}


#payment .left>div:not(:nth-of-type(1)) {margin-top: 2rem}

#payment .left>div>* {
    clear: both;
    width: 100%;
}

#payment .left>div>label {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    text-transform: uppercase;
    font-family: fontB;
    position: relative;
    box-sizing: border-box;
    margin-bottom: .5rem;
}


#payment .left .bank select {
    width: 100%;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
}

#payment textarea {
    font-size: 1em;
    padding: 1rem;
    box-sizing: border-box;
}

#payment .left .bank>div {
    clear: both;
    width: 100%;
    display: none;
}

#payment .left .bank>div[state=true] {display: block}

#payment .left .bank span {margin-bottom: .3rem}

#payment .left .bank span:first-of-type {color: #666}

#payment .left .bank span:first-of-type:after {
    content: ':';
    margin: 0 .5rem 0 .2rem;
}


#payment .right {
    width: 50%;
    float: right;
}

#payment .right label,
#payment .right>div:first-of-type {margin-top: 0}

#payment .right>* {
    float: left;
    clear: both;
    width: 100%;
    margin-top: 1rem;
}

#payment .right input {
    border: solid .1rem #999;
    padding: 1rem;
    box-sizing: border-box;
    transition: .5s ease-out;
}

#payment .right input:focus {
    border-color: #000;
    color: #000;
}


#payment .right div input {float: left; clear: none}
#payment .right div input:first-of-type {width: 55%}
#payment .right div input:last-of-type {width: 40%; float: right}

#payment .right button {
    height: 5rem;
    margin-top: 4rem;
}



#payment .sex * {float: left}

#payment .sex>span {
    width: 6rem;
    line-height: 3rem;
    text-align: left;
}

#payment .sex input {display: none}

#payment .sex label {margin-right: 1.8rem}
#payment .sex label:last-of-type {margin-right: 0}

#payment .sex label span {
    height: 3rem;
    line-height: 3rem;
    padding-left: 2.5rem;
    position: relative;
}

#payment .sex label span:before,
#payment .sex label span:after {
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#payment .sex label span:before {
	content: '';
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .8rem;
    border: solid .1rem #999;
    box-sizing: border-box;
    left: 0;
}

#payment .sex label span:after {
    width: .8rem;
    height: .8rem;
    border-radius: .4rem;
    background: #000;
    left: .4rem;
    display: none;
}

#payment .sex input:checked + span:after {display: block}





#request {
    width: 70rem;
    margin: 5rem;
    padding: 2rem;
    box-sizing: border-box;
}

#request>label {
    float: left;
    clear: both;
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    font-family: fontB;
    margin-bottom: 4rem;
    line-height: 1.5;
}

#request section {width: 45%}

#request section>* {
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 2rem;
}


#request input,
#request textarea {
    border: solid .1rem #ccc;
    box-sizing: border-box;
    transition: .5s ease-out;
}

#request input {
    height: 4rem;
    padding: 0 1.5rem;
}

#request textarea {
    height: 10rem;
    padding: 1rem 2rem;
    resize: none;
}


#request input:focus,
#request textarea:focus {
    color: #000;
    font-size: 1.4rem;
    border-color: #000;
}


#request .images>label {
    float: left;
    width: calc((100%/14) - .5rem);
    width: -moz-calc((100%/14) - .5rem);
    width: -webkit-calc((100%/14) - .5rem);
    height: 4rem;
    background-color: #ccc;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 .25rem .5rem .25rem;
    position: relative;
}

#request .images>label:first-of-type {
    background-color: #000;
    background-image: url('image/icon-image.png');
    background-size: auto 40%;
    cursor: pointer;
}

#request .images>label>span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    opacity: 0;
    transition: .5s ease-out;
}

#request .images>label>span:before,
#request .images>label>span:after {
	content: '';
    width: 1.6rem;
    height: .2rem;
    background: #fff;
}

#request .images>label:hover span {opacity: 1}


#request .images>label input {display: none}


#request button {
    width: 100%;
    height: 6rem;
    font-size: 1.4rem;
    font-family: fontL;
    margin-top: 4rem;
}

#request .left {float: left}

#request .right {float: right}

#request .right .name input {
    float: left;
    clear: none;
}

#request .right .name input:nth-of-type(1) {width: 57%}
#request .right .name input:nth-of-type(2) {width: 40%; float: right}