@charset "UTF-8";

@media print, screen and (min-width:1000px) {

#topHead {
position: fixed;
background-color: #fff;
width: 100%;
height: 80px;
font-size: 1.4rem;
padding: 0;
border-bottom: 1px solid #A7A49E;
line-height: 1;
top: 0;
left: 0;
right: 0;
z-index: 501;
}

#topHead a, #topHead {
text-decoration: none;
}

#topHead #logo {
position: fixed;
background: #fff url("../img/logo.svg") no-repeat;
background-size: 200px;
width: 200px;
height: 37px;
top: 20px;
left: 30px;
z-index: 502;
}

#topHead #logo a span {
display: block;
width: 200px;
height: 37px;
font-size: 0;
text-indent: -10000px;
}

#topHead #globalNav ul {
position: relative;
max-width: 100%;
text-align: right;
margin: 0 auto;
padding-right: 90px;
white-space: nowrap;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
z-index: 501;
}

#topHead #globalNav li {
line-height: 80px;
transition: .3s;
}

#topHead #globalNav li:hover {
background-color: #806628;
color: #fff;
}

#topHead #globalNav ul li a {
display: block;
padding: 0 16px;
}

#topHead #globalNav ul li a:hover {
color: #fff;
}

.childMenu {
position: absolute !important;
background-color: #806628;
width: 100%;
min-height: 160px;
text-align: left !important;
top: 80px !important;
padding: 36px 2% 44px 15% !important;
display: flex !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
align-items: flex-start;
left: 0;
visibility: hidden;
opacity: 0;
transition: .1s;
}

.childMenu li {
width: 320px;
color: #fff !important;
margin: 0 30px 0 0 !important;
padding-right: 30px !important;
line-height: 26px !important;
}

.childMenu > li > a {
position: relative;
color: #fff !important;
padding: 0 !important;
display: table !important;
}
.childMenu > li > a:hover {
text-decoration: none !important;
}

.childMenu > li > a::after {
position: absolute;
content: "";
width: 100%;
height: 1px;
background-color: #fff;
bottom: 0;
left: 0;
transform: scale(0, 1);
transform-origin: left top;
transition: all 0.3s ease;
}

.childMenu > li > a:hover::after {
transform: scale(1, 1);
}

.menu:hover .childMenu {
visibility: visible;
opacity: 1;
}

.menu:hover a {
color: #fff !important;
}

.childMenu ul {
display: block !important;
margin-left: -10px !important;
margin-bottom: 10px;
}

.childMenu ul li a {
text-align: left !important;
transition: .3s;
}

.childMenu ul li a:hover {
opacity: .8;
}

#cartNav {
position: fixed;
background: url("../img/cart.svg") no-repeat 26px 10px;
background-size: 32px;
width: 90px;
height: 80px;
font-weight: 500;
padding: 12px 0 0;
border-left: 1px solid #A7A49E;
line-height: 86px;
right: 0;
top: 0;
z-index: 502;
transition: .3s;
}

#cartNav:hover {
background: #806628 url("../img/cart_h.svg") no-repeat 26px 10px;
background-size: 32px;
color: #fff;
font-weight: 600;
}

#cartNav span {
display: block;
}

.hamburger {
display: none;
}

}

@media print, screen and (max-width: 999px) {

#topHead {
position: fixed;
background-color: #fff;
width: 100%;
height: 56px;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: 1500;
border-bottom: 1px solid #A7A49E;
}

#topHead a, #topHead {
text-decoration: none;
}

#topHead #logo {
position: relative;
background: url("../img/logo.svg") no-repeat;
background-size: 142px;
width: 142px;
height: 26px;
padding: 0;
top: 14px;
left: 10px;
z-index: 1500;
}

#topHead #logo a span {
display: block;
width: 142px;
height: 26px;
font-size: 0;
text-indent: -10000px;
}

#contactNav {
background:  url("../img/icon_mail.png") no-repeat left 34px;
background-size: 22px;
padding-left: 26px;
}

#callNav {
position: fixed;
background-color: #13902F;
width: 100%;
font-size: 1.1rem;
font-weight: 500;
padding: 5px 0 10px;
line-height: 20px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1500;
}

#telCallL {
background:  url("../img/icon_tel.png") no-repeat left 4px;
background-size: 10px;
width: 170px;
margin: 0 auto;
padding-left: 14px;
font-size: 2.2rem;
line-height: 24px;
}

#telCallS {
position: relative;
display: flex;
justify-content: center;
top: 2px;
}

#telCallS div {
position: relative;
font-size: 1.6rem;
margin-left: 3px;
top: -1px;
}

#telCallL a:hover,
#telCallS a:hover {
color: #FFFA71;
}

.hamburger {
position: fixed;
background-color: #fff;
width: 55px;
height: 56px;
font-size: 1rem;
right: 0;
top: 0;
color: #000;
display: block;
cursor: pointer;
border-left: 1px solid #A7A49E;
border-bottom: 1px solid #A7A49E;
z-index: 1500;
line-height: 1;
}

.hamburger span {
position: absolute;
background-color: #000;
width: 14px;
height: 1px ;
display: block;
left: 0;
right: 0;
margin: auto;
transition: 0.3s ease-in-out;
}

.hamburger div {
position: absolute;
left: 0;
right: 0;
bottom: 11px;
margin: auto;
}

.hamburger span:nth-child(1) {
top: 14px;
}

.hamburger span:nth-child(2) {
top: 20px;
}

.hamburger span:nth-child(3) {
top: 26px;
}

.hamburger.active span:nth-child(1) {
top: 20px;
left: 0;
transform : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 20px;
transform : rotate(45deg);
}

#cartNav {
position: fixed;
background: #fff url("../img/cart.svg") no-repeat center 10px;
background-size: 20px;
width: 55px;
height: 56px;
font-size: 1rem;
font-weight: 500;
color: #000 !important;
padding: 0;
border-left: 1px solid #A7A49E;
border-bottom: 1px solid #A7A49E;
line-height: 78px;
right: 55px;
top: 0;
z-index: 1500;
transition: .3s;
}

#cartNav span {
display: block;
}

#globalNavSp {
position: fixed;
background-color: #fff;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: left;
padding: 55px 0;
transition: .3s;
z-index: -1;
opacity: 0;
visibility: hidden;
overflow-y: auto;
}

#globalNavSp.active {
opacity: 1;
display: block;
z-index: 1000;
visibility: visible;
}

#globalNavSp ul {
}

#globalNavSp li {
border-top: 1px solid #EFEADD;
}

#globalNavSp li a {
color: #000;
padding: 15px;
display: block;
}

#globalNavSp .accordion {
position: relative;
color: #000;
padding: 15px;
cursor: pointer;
}

#globalNavSp .panel {
margin: 0 auto;
max-height: 0;
padding: 0 15px;
overflow: hidden;
transition: max-height .5s ease;
border-top: 0 !important;
}

#globalNavSp .panel li {
border-top: 0 !important;
}

#globalNavSp .panel li:last-child {
padding-bottom: 20px;
}

#globalNavSp .panel li a {
padding: 0 !important;
}

#globalNavSp .symbol {
position: absolute;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
right: 15px;
top: 0;
bottom: 0;
margin: auto;
}

#globalNavSp .symbol span {
background-color: #000;
display: block;
width: 100%;
height: 1px;
transition: all 0.4s ease;
}

#globalNavSp .symbol span:nth-of-type(1) {
transform: translateX(15px);
}

#globalNavSp .symbol span:nth-of-type(2) {
transform: rotate(-90deg);
}

#globalNavSp .accordion.active .symbol span:nth-of-type(2) {
transform: rotate(0deg);
}

.cartBtnHam {
position: relative;
background-color: #fff;
width: 90%;
font-size: 1.6rem;
text-align: center;
margin: 30px auto;
border: 1px solid #000;
transition: .3s;
}

.cartBtnHam::after {
position: absolute;
background: url("../img/cart_ham.svg") no-repeat;
background-size: 22px;
width: 22px;
height: 20px;
content: "";
top: -5px;
bottom: 0px;
left: -140px;
right: 0;
margin: auto;
}

.cartBtnHam a {
display: block;
padding: 15px 20px 17px;
}

.cartBtnHam a:hover {
text-decoration: none;
}

.cartBtnHam .arrow {
position: absolute;
background-color: #000;
width: 24px;
height: 1px;
left: 0;
right: -150px;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
}

.cartBtnHam .arrow::before {
position: absolute;
background-color: #000;
width: 1px;
height: 5px;
content: "";
right: 10px;
top: -5px;
}

.cartBtnHam .arrow::after {
position: absolute;
background-color: #000;
width: 12px;
height: 1px;
content: "";
transform: rotate(30deg);
right: 0;
top: -3px;
}

#hamSns {
width: 90%;
margin: 30px auto;
display: flex;
justify-content: flex-start;
}

.fbBtnHam {
background-color: #fff;
width: 17%;
height: 50px;
font-size: 1.6rem;
text-align: center;
margin-right: 10px;
border: 1px solid #000;
}

.fbBtnHam a {
color: #000;
display: block;
padding: 10px;
}

.xBtnHam {
background-color: #fff;
width: 17%;
height: 50px;
font-size: 1.6rem;
text-align: center;
margin-right: 10px;
border: 1px solid #000;
}

.xBtnHam a {
color: #000;
display: block;
padding: 10px;
}

.blogBtnHam {
background-color: #fff;
width: 26%;
height: 50px;
font-size: 1.6rem;
text-align: center;
margin-right: 10px;
border: 1px solid #000;
}

.blogBtnHam a {
color: #000;
display: block;
text-decoration: none;
padding: 10px;
}

.lineBtnHam {
position: relative;
background-color: #fff;
width: 40%;
height: 50px;
font-size: 1.4rem;
text-align: center;
border: 1px solid #000;
}

.lineBtnHam::after {
position: absolute;
background: url("../img/icon_line_ham.svg") no-repeat 92% center;
background-size: 16px;
width: 16px;
height: 16px;
content: "";
top: 0px;
bottom: 0;
left: 0;
right: -76px;
margin: auto;
}

.lineBtnHam a {
color: #000;
display: block;
text-decoration: none;
padding: 11px 10px 12px 0px;
}

#hamNavSp ul {
width: 90%;
margin: 0 auto;
border: 0 !important;
}

#hamNavSp li {
border: 0 !important;
}

#hamNavSp {
font-size: 1.2rem;
}

#hamNavSp li a {
color: #806628;
padding: 0 !important;
text-decoration: underline;
}

}