@font-face {
    font-family: 'SilkaBold';
    src: url('/_fonts/silka-bold-webfont.woff2') format('woff2'), url('/_fonts/silka-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SilkaRegular';
    src: url('/_fonts/silka-regular-webfont.woff2') format('woff2'), url('/_fonts/silka-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: auto;
    padding: 0;
    border: 0;
    direction: ltr;
    font-family: SilkaRegular, sans-serif;
    font-weight: normal;
    font-size: 0.95rem;
    letter-spacing: -0.03em;
    text-rendering: optimizeLegibility;
    outline: none;
    box-sizing: border-box;
    color: rgb(31, 11, 3);
    -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: rgb(254,248,241);
}
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; font-family: Voltaire, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }
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: 1rem 2rem;
    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: bold; }
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;
}


/*
	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 {
        background: linear-gradient(to bottom, white, white 17vw, rgb(142, 112, 56) 17vw, rgb(142, 112, 56) calc(17vw + 0.5rem), transparent calc(17vw + 0.5rem));
        padding-top: calc(17vw + 0.5rem);
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    main.mNoHero {
        background: linear-gradient(to bottom, white, white 13vw, rgb(142, 112, 56) 13vw, rgb(142, 112, 56) calc(13vw + 0.5rem), transparent calc(13vw + 0.5rem));
        padding-top: calc(13vw + 0.5rem);
    }
}
@media screen and (min-width: 1024px) {
    main.mNoHero {
        background: linear-gradient(to bottom, white, white 6vw, rgb(142, 112, 56) 6vw, rgb(142, 112, 56) calc(6vw + 0.5rem), transparent calc(6vw + 0.5rem));
        padding-top: calc(6vw + 0.5rem);
    }
}


/*
	TITLES
*/


h1, h2, h3 {
    font-family: Voltaire, sans-serif;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.05em;
}
h1 {
    padding: 1.5rem 0;
    font-size: 2.5rem;
    line-height: 4rem;
    text-align: center;
    background-image: linear-gradient(to right, rgb(31, 11, 3), rgb(31, 11, 3));
    background-repeat: no-repeat;
    background-position: 50% 5rem;
    background-size: 8rem 3px;
}

h2 {
    padding: 1.25rem 0;
    font-size: 1.8rem;
    line-height: 3rem;
    background-image: linear-gradient(to right, rgb(31, 11, 3), rgb(31, 11, 3));
    background-repeat: no-repeat;
    background-position: 50% 4rem;
    background-size: 5rem 2px;
}
aside.mAction h2 {
    text-align: left; background-position: 0 4rem;
}
h2.mWhite { color: white; background-image: linear-gradient(to right, white, white); }

h3 {
    padding: 1rem 0;
    font-size: 1.2rem;
    line-height: 2rem;
    background-image: linear-gradient(to right, rgb(31, 11, 3), rgb(31, 11, 3));
    background-repeat: no-repeat;
    background-position: 50% 3rem;
    background-size: 3rem 1px;
}
h3.mLeft { text-align: left; background-position: 0 3rem; }
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 { position: relative; }

header div.mLogo { position: fixed; top: 0; background-color: white; z-index: 10; }
header div.mLogo a {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; height: auto; border-width: 0;
    background-image: url("/_images/logos/logo-blason-sepia-200903.svg");
    background-position: center center;
    background-size: 80%;
    background-repeat: no-repeat;
}
header div.mLogo img { width: 100%; height: auto; }

header a.mMain, header button {
    position: relative;
    font-family: Voltaire, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.15em;
    border-bottom: solid 1px rgb(239, 235, 231);
}
header a.mMain:hover { text-decoration: none; }
header a.mMain.mSel, a.mMain.mSel b { color: red; }

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; right: 0; 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(239, 235, 231); padding-top: 0.5rem; margin-top: 1rem; }
header nav div.mDrop div.mEdito > a, header nav div.mDrop div.mEdito > button { border-bottom: solid 1px white; }

header nav a.mMain, header nav a.mLang, header nav button.mMain, header nav { display: block; width: 100%; line-height: 2.5rem; margin: 0 0 0.5rem 0; padding-left: 1rem; 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.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; }

@media screen and (max-width: 767px) {
    header {  }
    header div.mLogo { left: 4vw; width: calc(17vw * 1.618); height: 17vw; }
    header div.mLogo a { width: 22vw; }
    header div.mDesk { display: none !important; }
    
    header nav { top: 2vw; width: 13vw; height: 13vw; background-size: 8vw 8vw; }
    header nav.mBag { right: 4vw; }
    header nav.mUser { right: 21vw; }
    header nav.mMain { right: 38vw; }
    
    header nav.mBag div.mDrop { padding-right: 0; }
    header nav.mBag div.mDrop div.mFooter { margin-right: 5vw; }
    header nav div.mDrop { top: 15vw; 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 { left: 6vw; width: 21vw; height: 13vw; }
    header div.mLogo a { width: 13vw; }
    header div.mDesk { display: none !important; }
    
    header nav { top: 3vw; width: 7vw; height: 7vw; background-size: 5vw 5vw; }
    header nav.mBag { right: 3vw; }
    header nav.mUser { right: 13vw; }
    header nav.mMain { right: 23vw; }
    
    header div.mDesk { display: none !important; }
    
    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 { left: 2vw; width: 13vw; height: 6vw; }
    header div.mLogo a { width: 8vw; }
    
    header nav { top: 1vw; width: 4vw; height: 4vw; background-size: 2.5vw 2.5vw; }
    header nav.mBag { right: 2vw; }
    header nav.mUser { right: 8vw; }
    header nav.mMain { right: 14vw; }
    
    header div.mDesk { height: 8vw;}
    header div.mDesk a.mMain { display: inline-block; margin: 0 1rem; text-align: left; padding-top: 2vw; }
    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: 5vw; 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; }
}



/*
	BUTTONS: CTAs
 */


a.mCTA, p.mCTA, button.mCTA {
    display: inline-block;
    font-family: Voltaire, sans-serif;
    letter-spacing: 0.05em;
    font-size: 0.95em;
    text-transform: uppercase;
    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.mSolidBrown { background-color: rgb(31, 11, 3); border-color: rgb(31, 11, 3); 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 PANES
 */


.mBkgHi { background-color: rgb(252, 248, 243); }
.mBkgDa { background-color: rgb(232, 228, 226); }
.mBkgLo { background-color: rgb(239, 235, 231); }

.mBkgHi li.mPdtThumb { filter: url("#mBkgHi"); }
.mBkgLo li.mPdtThumb { filter: url("#mBkgLo"); }
.mBkgDa li.mPdtThumb { filter: url("#mBkgDa"); }



/*
	PRODUCT THUMBNAIL
 */

li.mPdtThumb
{
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    white-space: normal;
    overflow: hidden;
}
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 {  }
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 > img.mUnder { position: absolute; top: 0; left: 0; z-index: 0; height: auto; }
li.mPdtThumb > img.mImgTag004 { position: absolute; z-index: 3; right: 1%;  height: 14%; width: auto; }

li.mPdtThumb > a.mName h3 {
    font-size: 1.1rem; line-height: 1rem; letter-spacing: 0.00em;
    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)
{
    .mPane { 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; }
    .mPdtThumb .mPane { padding: 0 1vw; }
    .mPane > * { vertical-align: top; scroll-snap-align: none center; display: inline-block; white-space: normal; }
    li.mPdtThumb { flex: 0 0 75vw; margin: 1vw; }
    
    .mPane { -webkit-overflow-scrolling: touch; scrollbar-width: none; /* for Firefox */ -ms-overflow-style: none; /* for Internet Explorer, Edge */ }
    .mPane::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ }

    li.mPdtThumb > a { width: 75vw; }
    li.mPdtThumb > a.mImage { height: 75vw; }
    li.mPdtThumb > img.mImgTag004 { top: calc(72vw - 15%); }
    li.mPdtThumb > div { }
}
@media screen and (min-width: 768px) and (max-width: 1279px)
{
    li.mPdtThumb { width: 23vw; margin: 1vw; }
    li.mPdtThumb > a { width: 23vw; }
    li.mPdtThumb > a.mImage { height: 23vw; }
    li.mPdtThumb > img.mImgTag004 { top: calc(23vw - 15%); }
    li.mPdtThumb > div {  }
}
@media screen and (min-width: 1280px)
{
    li.mPdtThumb { width: 20vw; margin: 0.5vw; height: auto; }
    li.mPdtThumb > a { width: 20vw; }
    li.mPdtThumb > a.mImage { height: 20vw; }
    li.mPdtThumb > img.mImgTag004 { top: calc(20vw - 15%); }
    li.mPdtThumb > div { }
}


/*
	RECENTLY VIEWED
 */

aside.mRecently { background-color: rgb(232, 228, 226); background-color: white; border-bottom: solid 0.5rem rgb(142, 112, 56);  text-align: center; }
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 {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* for Firefox */
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
    }

    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 {
    display: block;
    text-align: center;
    background-color: rgb(239, 235, 231);
    border-bottom: solid 0.5rem rgb(142, 112, 56);
}
section.mEntries > p { margin-bottom: 1rem; }
div.mEntry { display: inline-block; vertical-align: top; }
div.mEntry > * {
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
div.mEntry > a { display: block; }
div.mEntry { }
div.mEntry > div {  }
div.mEntry h3 { }
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 { padding: 5vw; }
    section.mEntries > p { width: 88vw; }
    div.mEntry { margin-bottom: 5vw; width: 90vw; }
    div.mEntry > a { height: calc(89vw / 1.618); }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    section.mEntries { padding: 2vw; }
    section.mEntries > p { width: 62vw; }
    div.mEntry { margin: 2vw; width: 44vw; }
    div.mEntry > a { height: calc(44vw / 1.618); }
}
@media screen and (min-width: 1024px) {
    section.mEntries { padding: 1vw; }
    section.mEntries > p { width: 38vw; }
    div.mEntry { margin: 1vw; width: 21vw; }
    div.mEntry > a { height: 13vw; }
}


/*
	FOOTER
 */

footer {
    background-color: white;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 10rem;
    background-size: 100vw auto; background-position: center top;
    margin-top: 5rem;
}

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 * { font-family: Voltaire, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }

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;}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    footer nav * { display: inline-block; padding: 1rem;}
}
@media screen and (min-width: 1280px) {
    footer nav * { display: inline-block; padding: 1rem;}
}



/*
	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.95em;
    font-weight: normal;
}
input, textarea, select {
    display: block;
    width: 100%;
    height: 3rem;
    font-size: 1rem;
    letter-spacing: 0.01rem;
    background-color: rgb(253, 246, 237);
    border: solid rgb(213, 201, 177) 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; padding-right: calc(5.5rem); }
label.mCheckbox::before, label.mCheckbox::after {
    position: absolute; top: -0.01em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 2.5rem;
    height: 2.5rem;
    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::before {
    right: calc(3rem);
    color: white;
    background-color: rgb(127,127,127);
    border: solid rgb(127,127,127) 1px;
}
label.mCheckbox::after {
    right: 0;
    color: rgb(127,127,127);
    border: solid transparent 1px;
}
label.mCheckbox.mFR::before { content: 'Non'; }
label.mCheckbox.mEN::before { content: 'No'; }
label.mCheckbox.mJA::before { content: 'いいえ'; }
label.mCheckbox.mDE::before { content: 'Nein'; }
label.mCheckbox.mFR::after { content: 'Oui'; }
label.mCheckbox.mEN::after { content: 'Yes'; }
label.mCheckbox.mJA::after { content: 'はい'; }
label.mCheckbox.mDE::after { content: 'Ja'; }
input[type="checkbox"]:checked + label.mCheckbox::before {
    color: rgb(127,127,127);
    background-color: transparent;
    border-color: transparent;
}
input[type="checkbox"]:checked + label.mCheckbox::after {
    border-color: rgb(0,127,0);
    background-color: rgb(0,127,0);
    color: white;
}
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: bold;
}
form .Msg {  }
aside.mMsg {
    position: fixed;
    z-index: 5;
    top: 7rem;
    display: block;
    text-align: center;
}
@media screen and (max-width: 767px) {
    aside.mMsg { width: 100vw; }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    aside.mMsg { width: 80vw; left: 10vw; }
}
@media screen and (min-width: 1280px) {
    aside.mMsg { width: 62vw; left: 19vw; }
}

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; margin-bottom: -4rem;}

section.mPageHero img  { display: block; width: 100vw; border-bottom: solid 0.5rem rgb(142, 112, 56); }

section.mPageHero > div { position: relative; background-color: white; left: 50%; transform: translate(-50%); padding-bottom: 1rem; top: -5rem; margin: 0; box-shadow: 0 0 3rem 1rem rgba(0, 0, 0 ,0.1); }
section.mPageHero > div p { padding: 0 1rem; margin-bottom: 1rem; }

@media screen and (max-width: 767px) {
    section.mPageHero img { height: calc(100vw / 1.618); }
    section.mPageHero > div { width: 94vw; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    section.mPageHero img { height: calc(100vw / 1.618 / 1.618); }
}
@media screen and (min-width: 1024px) {
    section.mPageHero img { height: calc(100vw / 1.618 / 1.618 / 1.618); }
}
@media screen and (min-width: 768px) and (max-width: 1279px) { section.mPageHero > div { width: 62vw; } }
@media screen and (min-width: 1280px) {   section.mPageHero > div { width: 38vw; } }



/*
	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; text-align: center; }
div.mContentEnd img { width: 13rem; height: 8rem }

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

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

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


/*
    MINI BAG
 */


div.mMiniBagPH { margin-bottom: 1rem; }
div.mMiniBag {}

@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: table-cell; overflow: hidden;
    width: 5rem; height: 5rem; padding: 1rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Voltaire, sans-serif;
    font-size: 0.8em;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
}
a.mTag.mBrown { background-image: url("/_images/tags/brown.svg"); color: rgb(67, 42, 25); }
a.mTag.mBlue { background-image: url("/_images/tags/blue.svg"); color: rgb(0, 0, 159); }
a.mTag.mPurple { background-image: url("/_images/tags/purple.svg"); color: rgb(111, 0, 111); }
a.mTag.mGreen { background-image: url("/_images/tags/green.svg"); 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; }