/* Reset */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Source+Sans+Pro:wght@400;600&display=swap');

html{font-size: 62.5%; overflow-x: hidden;}
body{line-height: 1.5; word-spacing: 0; color: #404040; font-size: 1.6rem; letter-spacing: 0.01em; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; font-family: 'Source Sans Pro', sans-serif;}

*{margin: 0; padding: 0; box-sizing: border-box; border: 0;}
h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: 500;}
ol, ul{list-style: none;}
table{border-collapse: collapse; border-spacing: 0;}
th{text-align: left; font-weight: normal;}
a{color: inherit; text-decoration: none;}
img{vertical-align: bottom; max-width: 100%;}

@media only screen and (min-width: 1024px){
    a[href^="tel:"]{pointer-events: none;}
    
    .container{max-width: 1550px; margin: 0 auto; width: calc(100% - 50px);}
}

@media only screen and (max-width: 1023px){
    .container{margin: 0 auto; width: calc(100% - 30px);}
}

    
/* Header */
#region{background: #766A5E; color: #fff; padding: 9px 0 0; text-align: center; font-size: 1.4rem; height: 41px;}

header{position: relative; top: 0; left: 0; width: 100%; z-index: 700;}
.header-sticky header{position: -webkit-sticky; position: sticky; top: 0;}

.header-wrap{position: relative; width: 100%; background-color: #fff; z-index: 700; box-shadow: 0 1px 4px rgba(128,128,128,.25);}

.header-partner{margin: 4px 0 0 0;}
.header-partner a{display: flex; align-items: center;}
.header-partner a:nth-of-type(1){margin: 0 0 14px;}
.header-partner figure{margin: 0 10px 0 0;}
.header-partner p{font-size: 1.1rem; line-height: 1.4;}
.header-partner span{font-family: 'Playfair Display', serif; display: block; font-size: 1.2rem;}

.header-user{display: flex; align-items: center;}
.header-user a{margin: 0 30px 0 0;}
.header-user a:last-of-type{margin: 0;}
.header-cart{position: relative; margin: 0;}
.header-cart span{position: absolute; top: -15px; right: -5px; width: 20px; height: 20px; border-radius: 100%; background: #404040; color: #fff; text-align: center; line-height: 1.4; font-weight: 600; font-size: 1.4rem;}

@media (min-width: 1024px){
    h1{transition: margin-left .15s cubic-bezier(0, 0, .2, 1);}
    
    .btn-menu{position: absolute; width: 40px; height: 40px; top: 47px; left: -10px; z-index: 100; transition: opacity .15s cubic-bezier(0, 0, .2, 1); display: none;}
    .btn-menu span{position: absolute; width: 70%; height: 2px; left: 15%; background: #404040;}
    .btn-menu span:nth-of-type(1){top: 10px;}
    .btn-menu span:nth-of-type(2){top: 19px;}
    .btn-menu span:nth-of-type(3){top: 28px;}

    .header-nav-open .btn-menu span:nth-of-type(1){top: 19px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
    .header-nav-open .btn-menu span:nth-of-type(2){opacity: 0;}
    .header-nav-open .btn-menu span:nth-of-type(3){top: 19px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
    
    .header-main{padding: 20px 0; display: flex; flex-wrap: wrap; align-items: flex-start; position: relative; z-index: 200; background: #fff;}
    
    .header-search{width: 34%; border-bottom: 2px solid #58595B; position: relative; margin: 13px 6% 0 6%;}
    .header-search input{width: 100%; padding: 8px 40px 8px 0; font-size: 1.4rem;}
    .header-search button{padding: 5px; background: none; position: absolute; top: 0; right: 0; cursor: pointer;}
    
    .header-user{position: absolute; top: 50%; right: 0; margin: -15px 0 0 0;}
    
    .header-nav{position: relative; transition: margin-top .15s cubic-bezier(0, 0, .2, 1);}
    .header-nav ul.container{display: flex;}
    .header-nav a.parent{padding: 0 0 10px; display: block; font-weight: 600; cursor: pointer;}
    .header-nav a.parent:after{content: ''; width: 10px; height: 5px; background: url("../img/common/ic_arrow_down.svg") no-repeat top left/100% 100%; margin: 0 0 0 6px; display: inline-block; vertical-align: middle; position: relative; top: -2px;}

    .header-nav li .navmenu{color: #fff; position: absolute; top: 100%; padding: 15px 0; z-index: 1; opacity: 0; pointer-events: none;}
    .header-nav li .navmenu:after{content: ''; background: #000; position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: -1;}
    .header-nav li .navmenu a{padding: 3px 20px; display: block; color: #ababab;}
    .header-nav li .navmenu a:hover{color: #fff;}

    .header-nav li:hover .navmenu{opacity: 1; pointer-events: auto;}
    .header-nav li:hover .navmenu:after{height: 100%; transition: height 75ms cubic-bezier(0, 0, .2, 1);}

    .header-nav li.navsingle{position: relative; margin: 0 40px 0 0;}
    .header-nav li.navsingle .navmenu{width: 240px; left: -20px;}
    .header-nav li.navsingle .navmenu li{opacity: 0; transform: translateY(-5px); -webkit-transform: translateY(-5px);}
    .header-nav li.navsingle:hover .navmenu li{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); transition: all .2s .1s cubic-bezier(0, 0, .2, 1);}

    .header-nav li.navfull{margin: 0 40px 0 0;}
    .header-nav li.navfull .navmenu{width: 100%; left: 0;}
    .header-nav li.navfull .container{display: flex; flex-wrap: wrap;}
    .header-nav li.navfull .navmenu-item{opacity: 0; transform: translateY(-5px); -webkit-transform: translateY(-5px);}
    .header-nav li.navfull:hover .navmenu-item{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); transition: all .2s .1s cubic-bezier(0, 0, .2, 1);}

    .header-nav li .navmenu-item{width: 19%; margin: 0 1.25% 0 0;}
    .header-nav li .navmenu-item:nth-of-type(5){margin: 0;}
    .header-nav li .navmenu-item p{padding: 3px 0 5px;}
    .header-nav li .navmenu-item ul{display: block;}
    .header-nav li .navmenu-item li{margin: 0;}
    .header-nav li .navmenu-item a{padding: 3px 0;}    
    
    .header-sticky-scrolled .header-nav{margin-top: -34px; position: relative; z-index: 100;}
    .header-sticky-scrolled h1{margin-left: 70px;}
    .header-sticky-scrolled .btn-menu{display: block;}
        
    .header-nav-open .header-nav{margin-top: 0;}
    
    .header-mobile{display: none;}
}

@media (max-width: 1199px) and (min-width: 1024px){
    .header-partner{display: none;}
    .header-search{width: 43%; margin: 13px 0 0 10%;}
}

@media (max-width: 1023px){
    .header-pc{display: none;}
    .header-main{padding: 8px 0 8px;}
    h1{text-align: center;}
    
    .header-search{border-bottom: 1px solid #58595B; position: relative;}
    .header-search input{width: 100%; padding: 6px 40px 6px 0; font-size: 1.4rem;}
    .header-search button{padding: 5px; background: none; position: absolute; top: 0; right: 0;}
            
    .btn-menu-mobile{position: absolute; width: 40px; height: 40px; top: 20px; left: 10px; z-index: 100; transition: opacity .15s cubic-bezier(0, 0, .2, 1);}
    .btn-menu-mobile span{position: absolute; width: 70%; height: 2px; left: 15%; background: #404040;}
    .btn-menu-mobile span:nth-of-type(1){top: 10px;}
    .btn-menu-mobile span:nth-of-type(2){top: 19px;}
    .btn-menu-mobile span:nth-of-type(3){top: 28px;}
    
    .btn-close-mobile{position: absolute; width: 40px; height: 40px; top: 20px; right: 5px;}
    .btn-close-mobile span{position: absolute; width: 70%; height: 2px; left: 15%; background: #404040;}
    .btn-close-mobile span:nth-of-type(1){top: 19px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
    .btn-close-mobile span:nth-of-type(2){top: 19px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
    
    .header-overlay{position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 1; opacity: 0; background-color: rgba(0,0,0,.5); transition: opacity .35s cubic-bezier(.1, .1, 0, 1);}
    
    .header-sub{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 800; visibility: hidden; transition: .35s}
    .header-inner{position: relative; z-index: 100; max-width: 325px; margin: 0; width: 96%; height: 100%; background: #fff; display: block; overflow-x: hidden; overflow-y: scroll; transform: translateX(-100%); -webkit-transform: translateX(-100%); transition: transform .35s cubic-bezier(.1, .1, 0, 1); -webkit-overflow-scrolling: touch;}
    
    .header-user{padding: 25px 20px 35px;}
    .header-cart span{top: -12px;}
    .header-sub-open{visibility: visible;}
    .header-sub-open .header-overlay{opacity: 1;}
    .header-sub-open .header-inner{transform: translateX(0); -webkit-transform: translateX(0);}
    
    .header-nav{font-size: 1.7rem;}
    .navmenu-tit{padding: 8px 20px; display: block; position: relative; color: #000;}
    .navmenu-tit span{position: absolute; top: 9px; right: 10px; width: 30px; height: 30px; border-radius: 4px; display: flex; justify-content: center; align-items: center;}
    .navmenu-tit span:after{content: ''; width: 12px; height: 6px; background: url("../img/common/ic_arrow_down.svg") no-repeat top left/100% 100%;}    
    .navmenu-tit-open span{background: #e6e6e6;}
    .navmenu-tit-open span:after{background: #404040; width: 10px; height: 2px;}
    
    .navmenu-tit2{padding: 8px 20px; display: block; position: relative;}
    .navmenu-tit2 span{position: absolute; top: 7px; right: 10px; width: 30px; height: 30px; border-radius: 4px; display: flex; justify-content: center; align-items: center;}
    .navmenu-tit2 span:after{content: ''; width: 12px; height: 6px; background: url("../img/common/ic_arrow_down.svg") no-repeat top left/100% 100%;}
    
    .navmenu-tit-open2 span{background: #ccc;}
    .navmenu-tit-open2 span:after{background: #404040; width: 10px; height: 2px;}
    
    .navmenu{background: #e6e6e6; padding: 10px 0; display: none;}
    .navmenu a{padding: 5px 20px; display: block;}
    
    .navmenu2{display: none;}
    .navmenu2 a{padding: 5px 20px 5px 30px; display: block;}
    
    .header-partner{margin: 0; padding: 30px 10px 30px 20px;}
    .header-partner a:nth-of-type(1){margin: 0 0 25px;}
    .header-partner span{font-size: 1rem;}
}


/* Main */
#breadcrumb{display: flex; flex-wrap: wrap; padding: 10px 0;}
#breadcrumb a{margin: 0 15px 0 0;}
#breadcrumb a:after{content: ''; border: solid #404040; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; margin: 0 0 0 15px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: relative; top: -2px;}
#breadcrumb a:last-of-type{margin: 0;}
#breadcrumb a:last-of-type:after{display: none;}
#breadcrumb a[href]:hover{color: #000;}

.main-mv{position: relative; text-align: center; color: #fff;}
.main-mv-inner{background-color: rgba(0,0,0,.4); font-size: 2.5rem; position: absolute; top: 50%; left: 0; right: 0; max-width: 640px; width: 90%; padding: 30px 0; margin: 0 auto; transform: translateY(-50%); -webkit-transform: translateY(-50%);}

.main-mv h2{font-size: 4rem; line-height: 1.4; font-weight: 600;}
.main-mv h2.main-h2{position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.main-mv h2.left{text-align: left; left: 5%; width: 95%;}

main h3{font-size: 3.4rem; font-family: 'Playfair Display', serif; margin: 0 0 25px;}
.main-h3{text-align: center;}
.main-h3:after{content: ''; width: 110px; height: 2px; margin: 20px auto 0; background: #404040; display: block;}
.main-txt{font-size: 2rem; text-align: center;}

@media (max-width: 1023px){
    .main-mv-img{height: 400px; object-fit: cover;}
}

@media (max-width: 767px){
    .main-mv-inner{font-size: 1.6rem;}
    .main-mv-img{height: 300px;}
    .main-mv h2{font-size: 3rem;}
    
    main h3{font-size: 2.4rem;}
    .main-txt{font-size: 1.8rem;}
}


/* Form */
input, 
textarea,
select,
option,
optgroup,
button{-webkit-appearance: none; appearance: none; border-radius: 0; outline: none; font-size: 1.6rem; line-height: 1.5; font-family: 'Source Sans Pro', sans-serif;}
::placeholder{color: #bbb; opacity: 1;}

.field-checkbox{position: relative; padding: 0 0 0 30px; display: inline-block; cursor: pointer;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.field-checkbox input{position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.field-checkbox span{position: absolute; top: 2px; left: 0; height: 20px; width: 20px; background-color: #EEEFF0; border: 1px solid #B1B3B4; border-radius: 3px;}
.field-checkbox span:after{content: ""; position: absolute; display: none; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #404040; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.field-checkbox input:checked ~ span:after{display: block;}

.field-select{position: relative; border: 1px solid #B1B3B4; border-radius: 5px;}
.field-select:before{content: ''; position: absolute; top: 12px; bottom: 12px; right: 40px; width: 1px; background: #B1B3B4; z-index: 0;}
.field-select:after{content: ''; position: absolute; top: 19px; right: 13px; width: 14px; height: 9px; background: url("../img/common/ic_arrow_down.svg") no-repeat top left/100% 100%; z-index: 0;}
.field-select select{width: 100%; padding: 13px 10px; position: relative; z-index: 10; background: none;}
.field-select select:required:invalid{color: #bbb;}
.field-select option{color: #404040;}

.field-radio{position: relative; padding: 0 0 0 25px; display: inline-block; cursor: pointer;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.field-radio input{position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.field-radio span{position: absolute; top: 4px; left: 0; height: 16px; width: 16px; background-color: #EEEFF0; border: 1px solid #B1B3B4; border-radius: 100%;}
.field-radio span:after{content: ""; position: absolute; display: none; left: 3px; top: 3px; width: 8px; height: 8px; border-radius: 100%; background: #404040;}
.field-radio input:checked ~ span:after{display: block;}

.field-input{border: 1px solid #B1B3B4; border-radius: 5px; padding: 13px; width: 100%;}
.field-textarea{border: 1px solid #B1B3B4; border-radius: 5px; padding: 13px; width: 100%; height: 100px; resize: none;}

.pss-eye{position: relative;}
.pss-eye span{background: url("../img/common/ic_eye.svg") no-repeat center center/22px 14px; width: 30px; height: 30px; display: block; position: absolute; top: 50%; right: 10px; margin-top: -15px;}

.form-btn{background: #3F4041; font-size: 2.5rem; font-weight: 600; color: #fff; text-align: center; padding: 17px 0; border-radius: 5px; display: block; width: 100%; cursor: pointer;}
.form-btn:hover{background: #766A5E;}

.form-btn-brown{background: #766A5E}
.form-btn-brown:hover{background: #3F4041;}

.form-btn-gray{background: #BBBBBB;}
.form-btn-gray:hover{background: #766A5E;}

@media only screen and (max-width: 1023px){
    .form-btn{font-size: 2rem;}
}


/* Footer*/
footer{background: #F0F1F2; padding: 70px 0 40px; border-top: 1px solid #E1E1E1;}
#footer-wrap{display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 1.5rem;}
.footer-tit{font-weight: 600; margin: 0 0 10px;}

#footer-logo{width: 16%; margin: 0 4% 0 0;}
#footer-nav1{width: 20%;}
#footer-nav2{width: 16%;}
.footer-nav li{margin: 0 0 5px;}
.footer-nav a:hover{color: #000;}

#footer-sns{width: 15%;}
#footer-sns ul{display: flex;}
#footer-sns li{margin: 0 15px 0 0;}
#footer-sns a:hover{opacity: .6;}

#footer-contact{width: 29%; text-align: right;}
#footer-contact p:nth-of-type(1){margin: 0 0 5px; font-weight: 600;}
#footer-signup{display: flex; justify-content: space-between; margin: 20px 0 0 0;}
#footer-signup .field-input{width: calc(100% - 150px);}
#footer-signup .form-btn{width: 140px; font-size: 1.6rem; padding: 13px 0;}

#copyright{padding: 20px 0 0 0; font-size: 1.3rem;}

@media (min-width: 1024px){
    .footer-tit{pointer-events: none;}
    #footer-contact{max-width: 360px;}
}

@media (max-width: 1023px){
    footer{padding: 40px 0 30px;}
    #footer-wrap{display: block;}
    .footer-tit{margin: 0; padding: 12px 0; position: relative;}
    
    #footer-logo{width: 120px; margin: 0 auto 30px;}
    
    #footer-nav1{border-top: 1px solid #ddd;}    
    .footer-nav{width: 100% !important; border-bottom: 1px solid #ddd;}    
    .footer-nav .footer-tit:after{content: ''; position: absolute; top: 22px; right: 5px; width: 12px; height: 6px; background: url("../img/common/ic_arrow_down.svg") no-repeat top left/100% 100%;}        
    .footer-nav .footer-tit-open:after{background: #404040; width: 10px; height: 2px;}
    .footer-nav ul{padding: 0 0 7px; display: none;}
    
    #footer-sns{width: 100%; border-bottom: 1px solid #ddd; padding: 0 0 15px;}
    
    #footer-contact{width: 100%; text-align: left; border-bottom: 1px solid #ddd; padding: 15px 0;}
    #footer-signup{max-width: 480px;}
    
    #copyright{padding: 30px 0 0 0; text-align: center;}
}

@media (max-width: 767px){
    #footer-signup .field-input{width: calc(100% - 130px);}
    #footer-signup .form-btn{width: 120px;}
}