@charset "utf-8";
/* CSS Document */

html{
	font-size: 100%;
}

body{
	position: relative;
	margin:4rem 0 0;
	font-size: 75%;
    font-family:neue-haas-grotesk-display, dnp-shuei-gothic-gin-std, sans-serif;
	font-weight: 500;
	line-height: 1.5;
	font-feature-settings: "palt";
	font-smoothing:auto;
	color:#000;
	background: #fff;
}


/* tablet */
@media screen and (min-width: 48rem) {

body {
	margin:5.625rem 0 0;
}	
	
}

/* tablet landscape */
@media screen and (min-width: 48rem) and (orientation: landscape){


body {
	font-size: 87.5%;
}	
	
}

/* PC */
@media screen and (min-width: 65rem) {

body {
	font-size: 100%;
	margin:7.125rem 0 0;
}	
	
}


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

div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

a:link, a:visited, a:active, a:hover {
    text-decoration: none;
	color: #000;
}

ul,ol{
	list-style: none;
	padding: 0;
}

h1,h2,h3,h4,h5{
	font-weight: 500;
    line-height: 1.5;
    font-size: inherit;
}

img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

[type="hidden"], [type="text"], [type="search"], [type="tel"], [type="url"], [type="email"], [type="password"], [type="datetime"], [type="date"], [type="month"], [type="week"], [type="time"], [type="datetime-local"], [type="number"], select, textarea, .fs-c-dropdown__menu {
    border: 1px solid #000;
    border-radius: 0;
    padding: 0.5rem 1rem;
    line-height:2;
    width: 100%;
    font-size: inherit;
}

.fs-c-dropdown__menu {
    padding: 0.5rem 2rem 0.5rem 1rem;
}
.fs-c-dropdown::after {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 1em;
    background: transparent;
    border-left: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-sizing: content-box;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    content: "\e90f";
    font-family: 'fs-icon' !important;
    font-size: 1.8rem;
    line-height: 1;
    padding: 0;
    pointer-events: none;
}



/* FS Reset */
.fs-l-main{
    padding: 0 1.5rem !important;
    margin: 0 !important;
    max-width: 100%;
}

.fs-l-pageMain {
    max-width: 100%;
    width: 100%;
}


/* tablet */
@media screen and (min-width: 48rem) {
.fs-l-main{
    margin: 0 !important;
    padding: 0 2rem !important;
}	
}

/* PC */
@media screen and (min-width: 65rem) {
  
.fs-l-main{
    margin: 0 auto  !important;
    padding: 0 2.5vw !important;
    max-width: 1200px;
}	    
    
#fs_Top .fs-l-main{
    padding: 0 10vw !important;
}	

.fs-body-top .fs-l-main,
.fs-body-category .fs-l-main,
.fs-body-product .fs-l-main,
.fs-body-search .fs-l-main,
.fs-body-bundle .fs-l-main,
.fs-body-couponProduct .fs-l-main,
.fs-body-my-wishlist .fs-l-main{
    max-width: 100%;
}    
    
}



/* Login Logout 切り替え */
.logout.is-loggedIn--false {
    display: none;
}
.login.is-loggedIn--true {
    display: none;
}
.regist.my-true {
    display: none;
}

/* Fade in */
.fadein{
    opacity : 0;
    transition : all 1.4s;
	transform: translateY(-50px);
}

.fadein.fadein-on{
    opacity : 1;
	transform: translateY(0);
}





/* Button */
.fs-c-button--primary {
    background: #333;
    border: 1px solid #333;
    border-radius: 0px;
    color: #ffffff !important;
    cursor: pointer;
    display: block;
    font-size: inherit;
    line-height: 3;
    text-decoration: none;
    text-align: center;
    padding: 0 1rem;
    box-shadow: none;
    max-width: 360px;
    width: 100%;
    margin: auto;
}

.fs-c-button--standard {
    background: #ebebeb;
    border: 1px solid #ebebeb;
    border-radius: 0px;
    color: #000000 !important;
    cursor: pointer;
    display: block;
    font-size: inherit;
    line-height: 3;
    text-decoration: none;
    text-align: center;
    box-shadow: none;
    max-width: 360px;
    width: 100%;
    padding: 0 1rem;
    margin: auto;
}

.fs-c-button--plain {
    background: transparent;
    border: 1px solid #000;
    border-radius: 0px;
    color: #000000 !important;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    padding: 0;
    width: 100%;
    line-height: 3;
    max-width: 360px;
    margin: auto;
    text-align: center;
}

.fs-c-button--secondary {
    background: #ffffff;
    border: 1px solid #000000;
    border-radius: 0px;
    color: #000000;
    cursor: pointer;
    display: block;
    font-size: inherit;
    line-height: 3;
    text-decoration: none;
    text-align: center;
    padding: 0 1rem;
    box-shadow: none;
    width: 100%;
    max-width: 360px;
    margin: auto;
}

/* form */

.fs-c-modal__header {
    background: #e6e6e6;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 1rem;
}

.fs-c-modal__contents {
    flex-grow: 1;
    max-height: calc(100% - 80px);
    overflow: auto;
    padding: 1rem;
}

.fs-c-modal__inner {
    border-radius: 0;
}


/* tablet */
@media screen and (min-width: 48rem){
.fs-c-modal__header,
.fs-c-modal__contents {
    padding: 2rem;
}
}

/* tablet */
@media screen and (min-width: 65rem){
.fs-c-modal__header {
    padding: 2rem 3rem;
}
}
    
    
/* Header Contents */



header {
    position: fixed;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    justify-content: space-between;
    top: 0;
    z-index: 1000;
    padding:1.25rem 1rem;
    width: 100%;
}

header.Simple_Header {
    grid-template-columns: 1fr;
}

.Header_Symbol_Mark {
    order: 2;
    padding: 0;
    line-height: 1;
    text-align: center;
    align-self: center;
}

.Header_Symbol_Mark svg {
    height: 1.5rem;
    width: auto;
    vertical-align: bottom;
}

.Header_Cart_Mypage{
    order: 3;
    display: flex;
    grid-gap: 1rem;
    align-items:center;
    justify-content: flex-end;
    line-height: 1;
}

.Header_Cart_Mypage img {
    height: 1rem;
    width: auto;
    vertical-align: bottom;
}


#hamburger {
    line-height: 1;
    order: 1;
    align-self: center;
}

#hamburger .btn-gNav{
    position: relative;
    width: 14px;
    height: 14px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.menu-trigger {
    background: none;
    border: none;
    appearance: none;
    cursor: pointer;
}

.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
}

.menu-trigger span:nth-of-type(1) {
    top: 0;
}
.menu-trigger span:nth-of-type(2) {
    top: 6px;
}
.menu-trigger span:nth-of-type(3) {
    bottom: 0;
}

.open span:nth-of-type(1),
.open span:nth-of-type(3) {
    width: 12px;
}
.open span:nth-of-type(1) {
    transform: translate(-3px,2px) rotate(-45deg);
}
.open span:nth-of-type(3) {
    transform: translate(-3px,-2px) rotate(45deg);
}


#gNav{
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #b2b2b2;
    box-sizing: border-box;
    z-index: 2;
    padding: 6rem 1.5rem 2rem;
    transition: .3s;
    display: grid;
}
#gNav.open{
    left: 0px;
}
#gNav .gNav-menu{
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-bottom: 2rem;
    grid-gap: 1.5rem;
}

#gNav .gNav-menu li{
    display: block;
    font-size: 1rem;
}
#gNav .gNav-menu li.site_title{
    font-size: 1.125rem;
}

#gNav .gNav-menu li:first-child{
    padding-bottom: 1.5rem;
}
#gNav .gNav-menu li:last-child{
    padding-top: 1.5rem;
}

.Bottom_Menu {
    align-self: end;
    display: grid;
    grid-gap: 2rem;
}

header .Social{
    display: flex;
    justify-content: flex-start;
    grid-gap:1.5rem;
    align-items: center;
}

header .Social img {
    width: 1.25rem;
    height: auto;
}

.Bottom_Menu copy {
    font-size: 0.625rem;
}



/* tablet */
@media screen and (min-width: 48rem){

    header {
        padding: 2rem;
    }   
    
   #hamburger .btn-gNav{
        width: 1.5rem;
        height: 1.5rem;
    }        
    
    .menu-trigger span {
        height: 2px;
    }
    
    .menu-trigger span:nth-of-type(2) {
        top: 11px;
    }  
    
    .open span:nth-of-type(1),
    .open span:nth-of-type(3) {
        width: 16px;
    }
    
    .open span:nth-of-type(1) {
        transform: translate(-3px,6px) rotate(-45deg);
    }  
    
    .open span:nth-of-type(3) {
        transform: translate(-3px,-6px) rotate(45deg);
    }   
    
    .Header_Cart_Mypage img {
        height: 1.5rem;
        width: auto;
    } 
    
    #gNav{
        left: -50vw;
        width: 50vw;
        padding: 8rem 2rem 2rem;
    }
    
}

/* tablet landscape */
@media screen and (min-width: 48rem) and (orientation: landscape){
 
    
    #gNav{
        left: -35vw;
        width: 35vw;
        padding: 8rem 2rem 2rem;
    }

}

/* PC */
@media screen and (min-width: 65rem) {

    header{
        padding: 2.5rem;
    }
    
    #hamburger .btn-gNav{
        width: 1rem;
        height: 1rem;
    }    
    .menu-trigger span:nth-of-type(2) {
        top: 7px;
    }  
    .menu-trigger span {
        height: 2px;
    }
    .open span:nth-of-type(1),
    .open span:nth-of-type(3) {
        width: 9px;
    }    
    .open span:nth-of-type(1) {
        transform: translate(0,4px) rotate(-45deg);
    }  
    .open span:nth-of-type(3) {
        transform: translate(0,-4px) rotate(45deg);
    }

    
    .Header_Symbol_Mark svg {
        height: 2rem;
        width: auto;
    }    
    
    .Header_Cart_Mypage img {
        height: 1.25rem;
    } 
    
    #gNav{
        padding: 8rem 2.5rem 3rem;
    }
    
    
}



/* Page Title */

.Page_Title_Block {
    padding: 1rem 1.5rem 2.5rem;
}

.Page_Title_h1{
    font-size: inherit;
}


/* tablet */
@media screen and (min-width: 48rem){
.Page_Title_Block {
   padding: 1rem 2rem 2.5rem;
}  
	
}

/* tablet landscape */
@media screen and (min-width: 48rem) and (orientation: landscape){
 
.Page_Title_h1{
    font-size: inherit;
}  
	
}

/* PC */
@media screen and (min-width: 65rem) {
    
.Page_Title_Block {
    padding: 1rem 2.5rem 2.5rem;
}  

    
}


.fs-c-panel--error .fs-c-panel__contentList {
    margin: 0;
}


.fs-c-breadcrumb {
    font-size: 0.625rem;
    padding: 6rem 1.5rem 1rem;
}

.fs-c-breadcrumb__list {
    padding: 0;
}
/* tablet */
@media screen and (min-width: 48rem){
.fs-c-breadcrumb {
    font-size: 0.75rem;
    padding: 8rem 2rem 1rem;
    text-align: center;
}
}

/* tablet landscape */
@media screen and (min-width: 48rem) and (orientation: landscape){
.fs-c-breadcrumb {
    font-size: 0.75rem;
    padding: 10rem 2rem 1rem;
}	
}

/* PC */
@media screen and (min-width: 65rem) {
    
.fs-c-breadcrumb {
    font-size: 0.875rem;
    padding: 12rem 2.5rem 1rem;
}
    
}



/* section contents */

.Section_Block{
    margin-bottom: 4rem;
}
.Section_Block:last-child{
    margin-bottom: 0;
}

.Section_Title{
    font-size:inherit;
    margin: 1rem 0 2.5rem;
}

.Section_Title span{
    font-size:0.75rem;
}

.Section_Title span:before{
    content: "-";
    display: inline-block;
    padding: 0 0.25rem;
}

/* tablet */
@media screen and (min-width: 48rem){
    
.Side_Padding{
    padding: 0 3.5rem;
}    
    
}

/* PC */
@media screen and (min-width: 65rem){
.Side_Padding {
    padding: 0 7rem;
}
    
.Section_Block{
    margin-bottom: 8rem;
}
    
.Section_Title{
    font-size:inherit;
    margin-bottom: 4rem;
}    
 .Section_Title span{
    font-size:1.5rem;
}

.Section_Title span:before{
    padding: 0 1rem;
}   
}


/* footer contents */

.Footer_Symbol_Mark_Block{
    text-align: center;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom:3.5rem;
}

.Footer_Symbol_Mark svg{
    width: 30vw;
    display: block;
    margin: 0 auto 0.625rem;
}


footer{
	padding: 12rem 2rem 1.5rem;
}



.Footer_Links {
	display: grid;
    line-height: 2;
    grid-template-columns: 1fr 1fr;
    font-size: 0.75rem;
    margin-bottom: 2rem;
}

footer .Social{
    display: flex;
    justify-content: center;
    grid-gap:1.5rem;
    margin-bottom: 3.5rem;
}

footer .Social img {
    width: 1.25rem;
    height: auto;
}


footer copy{
    font-size: 0.625rem;
    text-align: center;
    display: block;
    line-height: 1;
}

/* tablet */
@media screen and (min-width: 48rem) {
    
.Footer_Symbol_Mark_Block{
    margin-bottom: 5rem;
}

.Footer_Symbol_Mark svg{
    width: 18vw;
    max-width: 140px;
}   
    
footer {
    padding:  10rem 2rem 2rem;
}
    
.Footer_Links {
    display: flex;
    font-size: 0.75rem;
    width: 75vw;
    margin: 0 auto 3rem;
    flex-flow: wrap;
    grid-gap: 1rem;
    justify-content: center;
}
	
footer .Social {
    justify-content: center;
    grid-gap: 2rem;
    margin-bottom: 5rem;
}
    
footer copy {
    font-size: 0.75rem;
}

	
}


/* tablet landscape */
@media screen and (min-width: 48rem) and (orientation:landscape) {

.Footer_Links {
    width: 100%;
    grid-gap: 1.5rem;
}	
	
	
}




/* PC */
@media screen and (min-width: 65rem) {
    

    
.Footer_Symbol_Mark svg{
    max-width: 140px;
    margin-bottom: 2rem;
}      
    
footer {
    padding:  15rem 2.5rem 2.5rem;
}
    
.Footer_Symbol_Mark_Block{
    margin-bottom: 10rem;
    font-size: 1rem;
}

footer .Social img {
    width: 1.8rem;
}
    
.Footer_Links {
    margin-bottom: 5rem;
}
	
}




.header_attention {
    position: absolute;
    right: 1rem;
    font-size: 0.625rem;
}


.header_attention:empty{
    display: none;
}


/* tablet */
@media screen and (min-width: 48rem) {
.header_attention {
    right: 2rem;
    font-size: 0.625rem;
}
    
}

/* PC */
@media screen and (min-width: 65rem) {
.header_attention {
    right: 2.5rem;
    font-size: 0.75rem;
}    
}