* {
    margin: auto;
    padding: 0;
    border: 0;
    direction: ltr;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
    text-rendering: optimizeLegibility;
    outline: none;
    box-sizing: border-box;
    color: black;
    -webkit-text-size-adjust: none;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
           
html {
    background-color: white;
}
a, a:active, button {
    text-decoration: none;
    background-color: transparent;
}
div.mElmNav { text-align: right; }
div.mElmNav ul.mAction, div.mElmNav ul.mLink { display: inline-block; text-align: left; position: relative;  }
div.mElmNav a, button { display: inline-block; position: relative; letter-spacing: -0.02em; font-weight: 600; }
button.mLink { position: relative; }
div.mElmNav li {  }
div.mElmNav ul li { position: relative; }
div.mElmNav ul.mAction li::before, div.mElmNav ul.mLink li::before, button.mLink::before { font-size: 0.9em; content: "■"; position: relative; top: -0.02em; margin-right: 0.4em; }
button.mLink::before { margin-right: 0.5em; }
div.mElmNav a:hover, button.mLink:hover {  }
button.mSmall { font-size: 1em; }

a:hover, button:hover {
    text-decoration: underline;
    cursor: pointer;
}
div.mElmNav a, button { line-height: 2rem; min-height: 2rem; }
header nav a.mMain:hover, div.mElmNav a:hover, button:hover {
    text-decoration: none;
    background-image: linear-gradient(to right, rgb(31, 11, 3), rgb(31, 11, 3));
    background-position: 0 2.5rem;
    background-repeat: no-repeat;
    background-size: 5rem 1px;
}
button.mLink:hover, ul.mRadio li:hover { text-decoration: none; }

table {
    border-collapse: collapse;
    border-spacing: 0;
}
figure, picture, img {
    width: 100%;
    height: auto;
    margin: 0;
    vertical-align: top;
}
b { font-weight: 600; }
i { font-style: italic;  }
b > i, i > b { font-style: italic;  }
ul { list-style-type: none;}


/*
	BODY
*/

body {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    text-align: left;
}

.mBkg245 li.mPdtThumb figure, .mBkg245 figure, .mBkgLo img { filter: url("#mBkg245"); }



/*
	MAIN
*/

main {
    display: block;
    width: 100vw;
    min-height: 100vh;
    position: relative;
    text-align: center;
    padding-bottom: 2rem;
}
section {
    display: block;
    vertical-align: top;
}

main.mNoHero {  }

@media screen and (max-width: 767px) {
    main.mNoHero {
    
    
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    main.mNoHero {
    
        
    }
}
@media screen and (min-width: 1024px) {
    main.mNoHero {
    
        
    }
}


/*
	TITLES
*/


h1, h2, h3 {
    font-family: Italiana, sans-serif;
    line-height: 3rem;
    letter-spacing: 0.02em;
    text-align: center;
}
h1 {
    padding: 1.5rem 0;
    font-size: 3.4rem;
    line-height: 4rem;
    text-align: center;
}

h2 {
    padding: 1.25rem 0;
    font-size: 1.8rem;
    line-height: 3rem;
}
aside.mAction h2 {
    text-align: left; background-position: 0 4rem;
}
h2.mWhite { color: white; }

h3 {
    padding: 1rem 0;
    font-size: 1.2rem;
    line-height: 2rem;
}
h3.mLeft { text-align: left; }
h3:nth-child(n+2), div.Desc h3 {
    margin-top: 1rem;
}
h4 {
    font-size: 1rem;
    font-weight: bold;
    padding: 2rem 0 0.5rem 0;
    text-align: center;
}
p {
    line-height: 1.618em;
}
p:nth-of-type(n+2) {
    margin-top: 0.5rem;
}



/*
    MENUS
*/

header div.mLogo { text-align: center; }
header div.mLogo a { display: block; }
header div.mLogo a img { }
header div.mLogo img.mSeparator { position: relative; }


header a.mMain, header a.mMain b, header button {
    position: relative;
    letter-spacing: -0.01em;
}
header a.mMain b { text-transform: uppercase; }
header a.mMain:hover { text-decoration: none; }
header a.mMain.mSel, a.mMain.mSel b { color: red; }
header nav a.mMain, header nav button { border-bottom: solid 0px rgb(239, 235, 231); font-weight: 400; }

header nav {
    position: fixed; display: inline-block; z-index: 10;
    background-color: white;
    background-repeat: no-repeat; background-position: center center;
}

header nav div.mDrop { z-index: 9; display: block; background-color: white; position: fixed; padding: 1rem; text-align: left; box-shadow: -1rem 3rem 3rem 1rem rgba(0, 0, 0 ,0.1); }
header nav div.mDrop.mHide { display: none; }
header nav div.mDrop.mShow { transition: all 1s ease-in-out; }

header nav div.mDrop div.mEdito { background-color: rgb(245, 245, 245); padding: 0.5rem; margin-top: 1rem; }
header nav div.mDrop div.mEdito > a, header nav div.mDrop div.mEdito > button { border-bottom: solid 0px white; }

header nav a.mMain, header nav a.mLang, header nav button.mMain, header nav { display: block; width: 100%; line-height: 3rem; white-space: nowrap; text-align: left; }
header nav div.mDrop a.mMain br { display: none !important; }

header div.mNav nav a, header div.mNav nav button { color: white; font-weight: bold; font-size: 1.05em; letter-spacing: 0.02em; border-style: solid; }
header div.mNav nav a:hover, header div.mNav nav button:hover { text-decoration: none;  }
header div.mNav nav a.mSel { color: rgb(211, 218, 84); }
header div.mNav nav a.mSel:hover {  }

header div.mNav nav div.mDrop li { padding: 0.5rem; }

header div.mNav nav div.mSub button span { font-weight: normal; }
header div.mNav nav div.mSub a, header div.mNav nav div.mSub button > *, header div.mNav nav p { color: white; }

header nav.mUser p.mUserInitials, header nav.mBag p.mPdtQty {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    background-color: rgb(0, 95, 0);
    color: white;
    height: 1rem;
    width: 100%;
    font-size: 0.7rem;
    letter-spacing: -0.02em;
    line-height: 1rem;
    text-align: center;
}

header nav.mBag div.mElmNav { text-align: center; }
header div.mNav nav.mBag div.mProduct { border-bottom: solid rgb(191, 191, 191) 1px; position: relative; min-height: calc(3rem + 7px); padding-top: 0.25rem; }
header div.mNav nav.mBag div.mProduct > * { display: inline-block; vertical-align: middle; }
header div.mNav nav.mBag div.mProduct a { margin: 0; font-size: 0.9em; white-space: normal; line-height: 1rem; }
header div.mNav nav.mBag div.mProduct a.pImg { position: absolute; left: 0; top: 3px; border-width: 0; }
header div.mNav nav.mBag div.mProduct img { width: 3rem; height: 3rem; }
header div.mNav nav.mBag div.mProduct a.pName { height: 3rem; padding-left: 3.5rem; color: white; }
header div.mNav nav.mBag div.mProduct a.pName > * { color: white; }

header aside.mPunchLine {
    display: block;
    background-color: black;
    padding: 1rem;  margin-top: 1rem; height: 3rem;
}
header aside.mPunchLine p, header aside.mPunchLine p b { color: white; text-transform: uppercase; font-size: 1em; height: 1rem; line-height: 1rem; }

@media screen and (max-width: 767px) {
    header {  }
    
    header div.mLogo { padding-top: 1.7vw; }
    header div.mLogo a img { width: 55vw; height: calc(55vw / 1.614 / 1.614 / 1.614); }
    header div.mLogo img.mSeparator { top:-0.7vw; width: 15vw; height: 1.5vw; }
    
    header div.mDesk { display: none !important; }
    
    header nav { top: 2vw; width: 11vw; height: 11vw; background-size: 8vw 8vw; }
    header nav div.mDrop.mLeft { left: 0; }
    header nav div.mDrop.mRight { right: 0; }
    header nav.mBag { right: 2vw; }
    header nav.mSearch { left: 15vw; }
    header nav.mUser { right: 15vw; }
    header nav.mMain { left: 2vw; }
    
    header nav.mBag div.mDrop { padding-right: 0; }
    header nav.mBag div.mDrop div.mFooter { margin-right: 5vw; }
    header nav div.mDrop { top: 13vw; width: 100vw; }
    header nav div.mDrop a.mMain:nth-child(2)::before { width: 50vw; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    header {  }
    
    header div.mLogo { height: 13vw; padding: calc((13vw - calc(33vw / 1.614 / 1.614 / 1.614)) / 2) 0; }
    header div.mLogo a img { width: 33vw; height: calc(33vw / 1.614 / 1.614 / 1.614); }
    header div.mLogo img.mSeparator { top:-0.4vw; width: 9vw; height: 0.9vw; }
    
    header div.mDesk { display: none !important; }
    
    header nav { top: 3vw; width: 7vw; height: 7vw; background-size: 5vw 5vw; }
    header nav div.mDrop.mLeft { left: 3vw; }
    header nav div.mDrop.mRight { right: 3vw; }
    header nav.mBag { right: 3vw; }
    header nav.mSearch { left: 13vw; }
    header nav.mUser { right: 13vw; }
    header nav.mMain { left: 3vw; }
    
    header nav div.mDrop { top: 10vw; width: 50vw; }
    header nav div.mDrop a.mMain:nth-child(2)::before { width: 30vw; }
}
@media screen and (min-width: 1024px) {
    header { text-align: center; }
    
    header div.mLogo { height: 8vw; padding: calc((8vw - calc(25vw / 1.614 / 1.614 / 1.614)) / 2) 0; }
    header div.mLogo a img { width: 25vw; height: calc(25vw / 1.614 / 1.614 / 1.614); }
    header div.mLogo img.mSeparator { top:-0.4vw; width: 7vw; height: 0.7vw; }
    
    header nav { top: 2vw; width: 4vw; height: 4vw; background-size: 2.5vw 2.5vw; }
    header nav div.mDrop.mLeft { left: 0; }
    header nav div.mDrop.mRight { right: 0; }
    header nav.mBag { right: 2vw; }
    header nav.mSearch { left: 8vw; }
    header nav.mUser { right: 8vw; }
    header nav.mMain { left: 2vw; }
    
    header div.mDesk { padding: 0.75em 0; }
    header div.mDesk a.mMain { display: inline-block; margin: 0 1.25em; text-align: left; min-height: 2em; }
    header div.mDesk a.mMain:nth-child(2)::before { content: " "; width: 1px; background-color: black; height: 100%; position: absolute; top: 0; left: -1rem; }
    
    
    header nav div.mDrop { top: 6vw; width: 30rem; }
    header nav div.mDrop a.mMain:nth-child(2)::before { width: 24vw; }
    
    header div.mNav { right: 0; top: calc((8vw - 3.5rem) / 2); }
    header div.mNav div.mShop:after { font-size: 1.8rem; content: "•"; position: relative; top: 0.1em; }
    header div.mNav nav a.mMain { display: inline-block; vertical-align: middle; padding: 0.25rem 0; margin: 0.75rem; line-height: 1.5rem; }
    
    header div.mNav nav.mUser div.mDrop, header div.mNav nav.mBag div.mDrop { position: absolute; right: 0; top: 3rem; display: none; box-shadow: 0 0 10vh 1px rgba(0, 0, 0 ,0.2); }
    header div.mNav nav.mUser:hover div.mDrop, header div.mNav nav.mUser div.mDrop:hover, header div.mNav nav.mBag:hover div.mDrop, header div.mNav nav.mBag div.mDrop:hover { display: block; }
    
    header div.mNav nav div.mSub.mDrop { padding: 1rem; text-align: left; }
    header div.mNav nav div.mSub a, header div.mNav nav div.mSub button { display: inline-block; line-height: 2rem; margin: 0.5rem; margin-right: 10vw; white-space: nowrap; }
}


header nav.mBag.mBagEdit { animation: BagEdit 0.8s ease-in-out; animation-iteration-count: 1; }
@keyframes BagEdit {
    from { background-color: rgb(0, 95, 0); }
    5% { background-color: white; }
    6% { background-color: rgb(0, 95, 0); }
    10% { background-color: white; }
    35% { background-color: rgb(0, 95, 0); }
    to { background-color: white; }
}



/*
	BUTTONS: CTAs
 */


a.mCTA, p.mCTA, button.mCTA {
    display: inline-block;
    letter-spacing: 0.03em;
    font-size: 0.95em;
    text-align: left;
    padding: 0.5rem 1rem;
    border: solid rgb(53, 22, 9) 1px;
    line-height: 2rem;
    color: rgb(53, 22, 9);
}
a.mCTA:before, p.mCTA:before, button.mCTA:before { content: ""; }
a.mCTA.mSmall, p.mCTA.mSmall, button.mCTA.mSmall { padding: 0 1rem; font-size: 0.8rem; line-height: 1rem; }

.mCTA.mWhite { border-color: white; background-color: transparent; color: white; }
.mCTA.mBlack { border-color: black; background-color: transparent; color: black; }
.mCTA.mSolidBlack { background-color: rgb(0, 0, 0); border-color: rgb(0, 0, 0); color: white; }
.mCTA.mSolidGreen { background-color: rgb(0, 95, 0); border-color: rgb(0, 95, 0); color: white; }
.mCTA.mSolidWhite { background-color: white; border-color: white; color: rgb(0, 95, 0); }
.mCTA.mSolidRed { background-color: rgb(191, 0, 0); border-color: rgb(191,0,0); color: white; }
.mCTA:hover, .mCTA:active {
    background-position: 1rem calc(100% - 2px - 0.5rem) ;
    background-size: calc(100% - 2rem) 2px;
    background-repeat: no-repeat;
    text-decoration: none;
}
.mCTA.mSmall:hover  { background-position: 1rem calc(100% - 2px - 0.25rem) ;}
.mCTA.mWhite:hover, .mCTA.mWhite:active, .mCTA.mSolidBrown:hover, .mCTA.mSolidBrown:active, .mCTA.mSolidRed:hover, .mCTA.mSolidRed:active, .mCTA.mSolidGreen:hover, .mCTA.mSolidGreen:active { background-image: linear-gradient(to right, white, white); }
.mCTA.mSolidWhite:hover { background-image: linear-gradient(to right, rgb(0, 95, 0), rgb(0, 95, 0)); }

@media screen and (max-width: 1023px) {
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
}
@media screen and (min-width: 1280px) {
}



/* LOGO */


figure.mHeadLogo { position: absolute; left: 50%; transform: translate(-50%, -50%);  }

@media screen and (max-width: 767px) {
    figure.mHeadLogo, img.mHeadLogo { width: 45vw; height: calc(45vw / 1.618); }
    figure.mHeadLogo { top: calc(100vw / 1.618 / 1.618 / 2); }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    figure.mHeadLogo, img.mHeadLogo { width: 30vw; height: calc(30vw / 1.618 / 1.618); }
    figure.mHeadLogo { top: calc(100vw / 1.618 / 1.618 / 1.618 / 2); }
}
@media screen and (min-width: 1024px) {
    figure.mHeadLogo, img.mHeadLogo { width: 15vw; height: calc(15vw / 1.618 / 1.618); }
    figure.mHeadLogo { top: calc(100vw / 1.618 / 1.618 / 1.618 / 1.618 / 2); }
}



/*
	PRODUCT THUMBNAIL
 */

li.mPdtThumb
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    white-space: normal;
    margin: 0.5rem;
    background-color: rgb(245, 245, 245);
    padding-bottom: 1rem;
}

li.mPdtThumb * { z-index: 3; position: relative; }
li.mPdtThumb > * { display: block; text-align: center; }
li.mPdtThumb > a.mImage { position: relative; }
li.mPdtThumb > a.mImage img { filter: url("#mBkg245");  }
li.mPdtThumb a.mName { display: block; padding: 0; margin: 0.5rem 0; line-height: 1rem; }
li.mPdtThumb a.mName h3 span { line-height: 1.2rem; font-family: SilkaRegular, sans-serif; font-size: 0.8rem; font-weight: normal; }

li.mPdtThumb div.mPdtTags {
    position: absolute; top: 0; margin: 0 auto;
    display: inline-block; width: auto;
}
li.mPdtThumb div.mPdtTags > p { margin-top: 2px; min-width: 7rem; height: 1.2rem; line-height:  1.2rem; padding: 0 0.5rem; font-weight: 500; font-size: 0.8em; text-align: left;  }
li.mPdtThumb div.mPdtTags p.m031 { background-color: rgb(223, 0, 0); color: white; }
li.mPdtThumb div.mPdtTags p.m057 { background-color: rgb(255, 159, 32); color: white; }
li.mPdtThumb div.mPdtTags p.m004 { background-color: rgb(63, 159, 63); color: white; }


li.mPdtThumb > a.mName h3 {
    font-family: "Open Sans", sans-serif;
    font-size: 0.9rem; line-height: 1rem; letter-spacing: -0.01em;
    text-transform: uppercase;
    font-weight: bold;
    overflow: hidden;
    padding: 0;
}
@media screen and (max-width: 413px) { li.mPdtThumb > a.mName { height: 3rem; } }
@media screen and (min-width: 414px) { li.mPdtThumb > a.mName { height: 2rem; } }
li.mPdtThumb > p.mOneLiner {
    font-size: 0.9rem;
    line-height: 0.9rem;
    height: 1.8rem;
    overflow: hidden;
    margin: 0.25rem 0;
    letter-spacing: -0.02em;
}
li.mPdtThumb > a img.XOld { filter : drop-shadow(3px 5px 5px rgba(0,0,0,0.2)); }
li.mPdtThumb > div > p { display: inline-block; vertical-align: middle; line-height: 1rem; margin: 0; }
li.mPdtThumb > div > p.mPackaging { font-size: 0.85em; letter-spacing: -0.02em; }
li.mPdtThumb div.mAction { text-align: center; vertical-align: middle; }
li.mPdtThumb > div > p.mPrice { font-size: 0.85em; font-weight: bold;  }
li.mPdtThumb > div > p.mPrice span { font-size: 0.8em; font-weight: bold;  }
li.mPdtThumb > div > p.mPrice::before {
    content: "-";
    margin: 0 0.25em;
    font-weight: normal;
}
li.mPdtThumb button.mCTA { display: block; margin: 0.5rem auto; }
li.mPdtThumb > p.mCTA img { display: none !important; }
li.mPdtThumb > p.mAvailable { display: block; margin: 0.5rem 0; color: rgb(159,0,0); text-transform: uppercase; font-size: 0.7rem; line-height: 0.9rem; padding: 0.618rem 0;  }

@media screen and (max-width: 767px)
{
    li.mPdtThumb { flex: 0 0 75vw; }
    
    li.mPdtThumb > a { width: 75vw; }
    li.mPdtThumb > a.mImage { height: 75vw; }
    li.mPdtThumb > div { }
    li.mPdtThumb:first-of-type { margin-left: 1rem; }
    li.mPdtThumb:last-of-type { margin-right: 1rem; }
}
@media screen and (min-width: 768px) and (max-width: 1279px)
{
    li.mPdtThumb { flex: 0 0 calc((100vw - 5rem) / 4); }
    li.mPdtThumb > a { width: calc((100vw - 5rem) / 4); }
    li.mPdtThumb > a.mImage { height: calc((100vw - 5rem) / 4); }
    li.mPdtThumb > div {  }
    li.mPdtThumb:nth-of-type(4n+1) { margin-left: 1rem; }
    li.mPdtThumb:nth-of-type(4n), li.mPdtThumb:last-of-type { margin-right: 1rem; }
}
@media screen and (min-width: 1280px)
{
    li.mPdtThumb { flex: 0 0 calc((100vw - 5rem) / 4); }
    li.mPdtThumb > a { width: calc((100vw - 5rem) / 4); }
    li.mPdtThumb > a.mImage { height: calc((100vw - 5rem) / 4); }
    li.mPdtThumb > div { }
    li.mPdtThumb:nth-of-type(4n+1) { margin-left: 1rem; }
    li.mPdtThumb:nth-of-type(4n), li.mPdtThumb:last-of-type { margin-right: 1rem; }
}



/*
    HSCROLL
 */

.mPane { overflow: hidden; }

@media screen and (max-width: 767px) {
    .mPanel { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; overflow-x: auto; white-space: nowrap; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
    .mPanel { -webkit-overflow-scrolling: touch; scrollbar-width: none; /* for Firefox */ -ms-overflow-style: none; /* for Internet Explorer, Edge */ }
    .mPanel::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ }
    
    .mPane { flex: 0 0 75vw; vertical-align: top; scroll-snap-align: none center; white-space: normal; display: inline-block; }
}
@media screen and (min-width: 768px) {
    .mPanel { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; white-space: nowrap; scroll-snap-type: x mandatory; scroll-behavior: smooth; justify-content: center; }
    .mPanel { -webkit-overflow-scrolling: touch; scrollbar-width: none; /* for Firefox */ -ms-overflow-style: none; /* for Internet Explorer, Edge */ }
    .mPanel::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ }
    
    .mPane { flex: 0 0 25vw; vertical-align: top; scroll-snap-align: none center; white-space: normal; display: inline-block; }
}



/*
	RECENTLY VIEWED
 */

aside.mRecently { text-align: center; margin: 3rem 0;  }
aside.mRecently.mNone { display: none !important; }

@media screen and (max-width: 767px) {
    aside.mRecently > ul {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 0 1vw;
    }

    aside.mRecently > ul {
    }

    aside.mRecently > ul::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
    }

    aside.mRecently > ul > li {
        vertical-align: top;
        flex: 0 0 60vw;
        scroll-snap-align: none center;
        display: inline-block;
        margin: 1vw;
        white-space: normal;
    }
}

/*
	NAVIGATION GATES
*/

section.mGates {
    text-align: center;
}
div.mGate { display: inline-block; vertical-align: top; position: relative; margin-bottom: -3rem; }
div.mGate > * {
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
div.mGate > a { display: block; }
div.mGate { }
div.mGate > div { position: relative; top: -4.25rem; background-color: white; width: 90%; padding: 0 1rem 1rem 1rem; }
div.mGate img { }
div.mGate p { margin-bottom: 0.5rem; }
div.mGate div.mFooter { margin-top: 0; }

@media screen and (max-width: 767px) {
    section.mGates { margin-top: 1rem; }
    div.mGate { width: 100vw; }
    div.mGate > a { height: calc(100vw * 1.618); }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    section.mGates { margin-top: 1vw; }
    div.mGate { width: 32vw; margin: 0 0.5vw; }
    div.mGate > a { height: 32vw; }
}
@media screen and (min-width: 1024px) {
    section.mGates { margin-top: 1vw; }
    div.mGate { width: 32vw; margin: 0 0.5vw; }
    div.mGate > a { height: calc(32vw / 1.618); }
}

/*
	NAVIGATION ENTRIES
*/

section.mEntries {
    text-align: center;
}
section.mEntries > p { margin-bottom: 1rem; }
div.mEntry { background-color: rgb(245, 245, 245); margin: 0.5rem; padding-bottom: 2rem; }
div.mEntry > * {
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
div.mEntry > a { display: block; }
div.mEntry { }
div.mEntry > div {  }
div.mEntry h3 { font-family: "Open Sans", sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: 0.15em; padding: 2rem 0; }
div.mEntry img { }
div.mEntry p { font-size: 0.95em; }
div.mEntry div.mFooter { margin-top: 0; }

@media screen and (max-width: 767px) {
    section.mEntries {  }
    section.mEntries > p { width: 88vw; }
    section.mEntries div.mPanel { padding: 0 0.5rem; }
    div.mEntry > a { height: calc(75vw / 1.618); width: 75vw; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    section.mEntries {  }
    section.mEntries > p { width: 62vw; }
    section.mEntries div.mPanel { padding: 0 0.5rem; }
    div.mEntry.mPane { flex: 0 0 calc((100vw - 5rem) / 4 ); }
    div.mEntry > a { height: calc((100vw - 5rem) / 4 / 1.618); width: calc((100vw - 5rem) / 4 ); }
}
@media screen and (min-width: 1024px) {
    section.mEntries {  }
    section.mEntries > p { width: 38vw; }
    section.mEntries div.mPanel { padding: 0 0.5rem; }
    div.mEntry.mPane { flex: 0 0 calc((100vw - 5rem) / 4 ); }
    div.mEntry > a { height: calc((100vw - 5rem) / 4 / 1.618); width: calc((100vw - 5rem) / 4 ); }
}


/*
	FOOTER
 */

footer {
    position: relative;
    background-color: black;
    text-align: center;
    margin-top: 5rem;
}

footer > figure { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); display: block; }

footer div.mContact div.mElmNav { text-align: center; margin-bottom: 2rem; }
footer div.mContact div.mElmNav li::before { display: none; }
footer div.mContact div.mElmNav button { color: white; }

footer nav { padding: 1rem 0; text-align: center; }
footer nav a { color: white;}

footer div.mSocial a { display: inline-block; padding: 0 1rem; }
footer div.mSocial img { height: 2.5rem; width: 2.5rem; }

footer p.mChugu { margin-top: 1rem; padding: 2rem 0; }
footer p.mChugu, footer p.mChugu a { color: rgb(161, 140, 130); font-size: 0.8rem; }

@media screen and (max-width: 767px) {
    footer nav * { display: block; padding: 0.75rem 10vw; }
    footer > figure { width: 80vw; height: calc(80vw / 1.618); }
    footer { margin-top: calc(80vw / 1.618 / 2 + 8rem); padding-top: calc(80vw / 1.618 / 2 + 3rem); }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    footer nav * { display: inline-block; padding: 1rem;}
    footer > figure { width: 62vw; height: calc(62vw / 1.618); }
    footer { margin-top: calc(62vw / 1.618 / 2 + 8rem); padding-top: calc(62vw / 1.618 / 2 + 3rem); }
}
@media screen and (min-width: 1280px) {
    footer nav * { display: inline-block; padding: 1rem;}
    footer > figure { width: 38vw; height: calc(38vw / 1.618); }
    footer {  margin-top: calc(38vw / 1.618 / 2 + 8rem); padding-top: calc(38vw / 1.618 / 2 + 3rem); }
}



/*
	ASIDE ACTION
 */

aside.mAction.mM { position: fixed; top: 0; left: 0; }
aside.mAction.mB {
    z-index: 15;
    position : fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(127,127,127,0.5);
}

aside.mAction.mA {
    z-index: 16;
    position : fixed; top: 0; left: 0; right: 0;
    border-style: solid;
    border-color: rgb(223,223,223);
    border-width: 0;
    box-shadow: 0 0 10vw 0 rgba(95, 95, 95, 0.5);
    margin: 0 auto 0 auto;
    padding: 0.5vw;
    background-color: white;
    overflow: scroll;
}
@media screen and (max-width: 767px) { aside.mAction.mA { padding: 3vw; max-height: 83vh; } }
@media screen and (min-width: 768px) and (max-width: 1279px) { aside.mAction.mA { padding: 2vw; max-height: 83vh; } }
@media screen and (min-width: 1280px) { aside.mAction.mA { padding: 1vw;  max-height: 90vh; } }

aside.mAction.mA.mShow { transition: transform 0.15s ease-out; transform: scaleY(1); transform-origin: bottom;  }

aside.mAction h2, aside.mAction h2 * { text-align: left; margin-bottom: 1rem; }


aside.mAction form div.mElmNav { text-align: right; }
aside.mAction form div.mElmNav ul { display: inline-block; }
aside.mAction form div.mElmNav li { display: inline-block; margin-left: 2.5rem; }


/*
    INPUT
 */


label {
    display: block;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.9em;
    font-weight: 300;
    color: rgb(95, 95, 95);
}
label b {
    color: rgb(95, 95, 95);
    font-weight: 500;
}
input, textarea, select {
    display: block;
    width: 100%;
    height: 3rem;
    font-size: 1rem;
    letter-spacing: 0.01rem;
    background-color: rgb(245, 245, 245);
    border: solid rgb(229, 229, 229) 1px;
    padding: 0.5rem;
    border-radius: 3px;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    background-image: linear-gradient(45deg, transparent 50%, rgb(223, 223, 223) 50%) ,linear-gradient(135deg, rgb(223, 223, 223) 50%, transparent 50%);
    background-position: calc(100% - 10px) 1em ,calc(100% - 5px) 1em;
    background-size: 5px 5px ,5px 5px;
    background-repeat: no-repeat;
    padding-right: 2em;
}

input:focus ,textarea:focus ,select:focus {
    background-color: rgb(255, 250, 245);
    border: solid rgb(193, 181, 157) 1px;
}
input.InputError ,textarea.InputError ,select.InputError {
    border-color: red;
}
div.mFormInput {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 1px;
    text-align: left;
}
div.mFormInput span.mC { position: absolute; right: 0; top: 0; color: rgb(95, 95, 95); font-size: 0.7rem; line-height: 1rem; height: 1rem; }
span.InputError {
    display: block;
    color: red;
    font-size: 0.8em;
    height: 1rem;
}
span.FieldNote {
    display: block;
    font-size: 0.8em;
    height: 1rem;
    font-style: italic;
    color: rgb(95, 95, 95);
}
input[type="checkbox"] {
    display: none;
}
div.mCheckbox {
    vertical-align: top;
    padding: 1px;
    position: relative;
}
label.mCheckbox { height: 2.5rem; margin-top: 1rem; }
label.mCheckbox.mLeftCheck::before, label.mCheckbox.mRightCheck::after {
    position: relative;
    top: -0.01em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    color: rgb(127,127,127);
    width: 2.5rem;
    height: 2.5rem;
    border: solid rgb(127,127,127) 1px;
    border-radius: 0.1rem;
    font-weight: bold;
    font-size: 0.9em;
    line-height: calc(2.5rem - 2px);
    margin: 0 0.5rem;
    cursor: pointer;
}
label.mCheckbox.mLeftCheck::before {
    margin-right: 0.5rem;
    display: inline-block;
}
label.mCheckbox.mLeftCheck::after {
    margin-left: 0.5rem;
    display: inline-block;
}
label.mCheckbox.mFR.mLeftCheck::before, label.mCheckbox.mFR.mRightCheck::after { content: 'Non'; }
label.mCheckbox.mEN.mLeftCheck::before, label.mCheckbox.mEN.mRightCheck::after { content: 'No'; }
label.mCheckbox.mJA.mLeftCheck::before, label.mCheckbox.mJA.mRightCheck::after { content: 'いいえ'; }
input[type="checkbox"].mFR:checked + label.mCheckbox.mLeftCheck::before, input[type="checkbox"].mFR:checked + label.mCheckbox.mRightCheck::after { content: 'Oui'; }
input[type="checkbox"].mEN:checked + label.mCheckbox.mLeftCheck::before, input[type="checkbox"].mEN:checked + label.mCheckbox.mRightCheck::after { content: 'Yes'; }
input[type="checkbox"].mJA:checked + label.mCheckbox.mLeftCheck::before, input[type="checkbox"].mJA:checked + label.mCheckbox.mRightCheck::after { content: 'はい'; }
input[type="checkbox"]:checked + label.mCheckbox.mLeftCheck::before, input[type="checkbox"]:checked + label.mCheckbox.mRightCheck::after {
    color: rgb(0,127,0);
    border-color: rgb(0,127,0);
    color: white;
    background-color: rgb(0,127,0);
}
div.mFormInput.mHoneyTrap, div.mFormInput.mHoneyTrap * { display: none !important; }

ul.mRadio { width: 100%; }
ul.mRadio { display: block; }
ul.mRadio li { display: block; padding: 1rem; line-height: 1rem; border-width: 1px 0 1px 0; border-style: solid; border-color: rgb(239, 235, 231); }
ul.mRadio li:first-child { border-top-width: 2px; }
ul.mRadio li:last-child { border-bottom-width: 2px; }
ul.mRadio li:hover { cursor: pointer; }
ul.mRadio li.mOn { background-color: rgb(239, 235, 231); }
ul.mRadio li.mOff { }
form ul.mRadio li::before { display: none!important; }

form button div.mSpinner { display: none; }
form button.mClicked { position: relative; color: transparent !important; }
form button.mClicked div.mSpinner {
    display: block;
    position: absolute; top: calc(50% - 0.5rem); left: calc(50% - 2.5rem);
    width: 4.5rem; height: 1rem;
}
form button.mClicked div.mSpinner div {
    position: absolute;
    top: 0.25rem; width: 0.4rem; height: 0.4rem;
    border-radius: 50%;
    background-color: white;
    animation-timing-function: cubic-bezier(0, 1.5, 1, 0);
}
form button.mClicked div.mSpinner div:nth-child(1) { left: 0.5rem; animation: kfSpin1 0.6s infinite; }
form button.mClicked div.mSpinner div:nth-child(2) { left: 0.5rem; animation: kfSpin2 0.6s infinite; }
form button.mClicked div.mSpinner div:nth-child(3) { left: 2rem; animation: kfSpin2 0.6s infinite; }
form button.mClicked div.mSpinner div:nth-child(4) { left: 3.5rem; animation: kfSpin3 0.6s infinite; }
@keyframes kfSpin1 { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes kfSpin3 { 0% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes kfSpin2 { 0% { transform: translate(0, 0); } 100% { transform: translate(1.5rem, 0); } }



/*
	MESSAGES
*/


.mMsg {
    text-align: left;
    padding: 1.5rem;
    line-height: 1rem;
    font-weight: 600;
}
form .Msg {  }
aside.mMsg {
    display: block;
    text-align: center;
    margin-bottom: 1px;
}
@media screen and (max-width: 767px) {

}
@media screen and (min-width: 768px) and (max-width: 1279px) {

}
@media screen and (min-width: 1280px) {

}

body:has(aside.mMsg) { padding-top: 0; }
.mMsg, .mMsg b { color: white; }
.mMsg.mError { background-image: linear-gradient(180deg, rgb(159,0,0) 0, rgb(191,0,0) 100%); }
.mMsg.mSuccess { background-image: linear-gradient(180deg, rgb(0,127,0) 0, rgb(0,159,0) 100%); }
.mMsg.mInfo { background-image: linear-gradient(180deg, rgb(0,0,159) 0, rgb(0,0,191) 100%); }
.mMsg.mWarning { background-image: linear-gradient(180deg, rgb(223, 111, 0) 0, rgb(239, 127, 0) 100%); }



/*
    PAGE HERO
 */


section.mPageHero { position: relative; background-color: rgb(245, 245, 245); }
section.mPageHero > figure { position: absolute; left: 50%; transform: translate(-50%, -50%); display: block; }

section.mPageHero > div { padding: 3rem 0; }
section.mPageHero > div p {  }

@media screen and (max-width: 767px) {
    section.mPageHero > div { width: 90vw; padding-bottom: calc(62vw / 1.618 / 1.618 / 1.618 / 2 + 3rem); }
    section.mPageHero > figure { width: 62vw; height: calc(62vw / 1.618 / 1.618 / 1.618); }
    section.mPageHero { margin-bottom: calc(62vw / 1.618 / 1.618 / 1.618 / 2 + 3rem); }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    section.mPageHero > div { width: 62vw; padding-bottom: calc(38vw / 1.618 / 1.618 / 1.618 / 2 + 3rem); }
    section.mPageHero > figure { width: 38vw; height: calc(38vw / 1.618 / 1.618 / 1.618); }
    section.mPageHero { margin-bottom: calc(38vw / 1.618 / 1.618 / 1.618 / 2 + 3rem); }
}
@media screen and (min-width: 1280px) {
    section.mPageHero > div { width: 38vw; padding-bottom: calc(24vw / 1.618 / 1.618 / 1.618 / 2 + 3rem); }
    section.mPageHero > figure { width: 24vw; height: calc(24vw / 1.618 / 1.618 / 1.618); }
    section.mPageHero { margin-bottom: calc(24vw / 1.618 / 1.618 / 1.618 / 2 + 3rem); }
}



/*
	NEWSLETTER
 */

section.mNewsletter { background-color: rgb(67,42,25); padding-bottom: 1.5rem;  text-align: center; }
section.mNewsletter { background-color: rgb(0, 95, 0); }
section.mNewsletter * { color: white; }
section.mNewsletter div.mH2 * { border-color: white; }
section.mNewsletter div.mFormInput { margin-top: 1rem; }
section.mNewsletter button { margin-top: 1rem; }
section.mNewsletter { padding: 0 1.5rem 1rem 1.5rem; }
section.mNewsletter p { text-align: left; }

@media screen and (max-width: 767px) {
    section.mNewsletter div.mFormInput { width: 90vw; }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    section.mNewsletter { width: 80vw; margin-left: 10vw; }
    section.mNewsletter div.mFormInput { width: 62%; margin-right: 1rem; }
}

@media screen and (min-width: 1280px) {
    section.mNewsletter { width: 100vw; }
    section.mNewsletter p { width: 38vw; }
    section.mNewsletter div.mFormInput { width: 62%; margin-right: 1rem; }
}


/*
    CONTENT END
 */


div.mContentEnd { margin: 5rem 0; position: relative; }
div.mContentEnd p {
    font-family: Italiana, sans-serif;
    letter-spacing: 0.02em;
    text-align: left;
    font-size: 3.4rem;
    line-height: 5.5rem;
}
div.mContentEnd p.mQuote {
    font-family: Italiana, sans-serif;
    font-size: 8.9rem;
    line-height: 5.5rem;
    height: 5.5rem;
}
div.mContentEnd p.mQuote.mL { text-align: left; position: relative; left: -3rem; }
div.mContentEnd p.mQuote.mR { text-align: right; }
div.mContentEnd p.mSign {
    font-family: Italiana, sans-serif;
    letter-spacing: 0.02em;
    text-align: right;
    font-size: 1.3rem;
    line-height: 2.1rem;
    font-style: italic;
    color: rgb(127, 127, 127);
}


@media screen and (max-width: 767px) {
    div.mContentEnd p { padding: 0 10vw; }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    div.mContentEnd p { padding: 0 19vw; }
}
@media screen and (min-width: 1280px) {
    div.mContentEnd p { padding: 0 31vw; }
}



/*
    MINI BAG
 */


div.mMiniBagPH { margin-bottom: 1rem; }
div.mMiniBag {}
div.mMiniBag div.mProduct a { line-height: 1.5rem; }
div.mMiniBag div.mProduct a:hover { text-decoration: none; }

@media screen and (max-width: 767px) {
    div.mMiniBag div.mProduct {  flex: 0 0 55vw; margin: 2vw; }
    div.mMiniBag div.mProduct img { width: 55vw; height: 55vw; }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    div.mMiniBag div.mProduct { border-bottom: solid 1px rgb(239, 235, 231); }
    div.mMiniBag div.mProduct img { width: 10vw; height: 10vw; }
    div.mMiniBag div.mProduct a:nth-child(2) { width: calc(50vw - 3rem - 10vw); }
}
@media screen and (min-width: 1280px) {
    div.mMiniBag div.mProduct { border-bottom: solid 1px rgb(239, 235, 231); }
    div.mMiniBag div.mProduct img { width: 6vw; height: 6vw; }
    div.mMiniBag div.mProduct a:nth-child(2) { width: calc(30rem - 3rem - 6vw); }
}

div.mMiniBag div.mProduct a { display: inline-block; vertical-align: middle; }
div.mMiniBag div.mProduct a:first-child { margin-right: 1rem; }



/*
    TAGS
 */


section.mTags { display: table; margin: 2rem auto; }

a.mTag {
    display: inline-block;
    margin: 1rem 0.5rem;
    height: 3rem; padding: 1rem; line-height: 1rem;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    border-width: 1px 0;
    border-style: solid;
}
a.mTag.mBrown { border-color: rgb(67, 42, 25); }
a.mTag.mBlue { border-color: rgb(0, 0, 159); }
a.mTag.mPurple { border-color: rgb(111, 0, 111); }
a.mTag.mGreen { border-color: rgb(0 127 0); }


/*
    SEPARATOR
 */

hr {
    display: block;
  /*  background-image: url("/_images/decorations/separator.svg"); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    height: 1.5rem;
    margin: 1.5rem 0;
}


/*
    MISC
 */

    p.mSwitchCountry img { height: 0.8em; width: auto; margin-right: 0.2em; margin-left: 0.2em; margin-top: 0.4em; }