@charset "utf-8";
/* CSS Document */
/* ハンバーガー */
.hamburger{margin: 0; animation: bugfix infinite 1s; -webkit-animation: bugfix infinite 1s;}
@keyframes bugfix {from {padding: 0;} to {padding: 0;}}
@-webkit-keyframes bugfix {from {padding: 0;} to {padding: 0;}}
#overlay-button {position: absolute; right: 0.5em; top: 0.2em; padding: 20px 5px; z-index: 99; cursor: pointer; user-select: none;}
#overlay-button span {height: 3px; width: 30px; border-radius: 2px; background-color:#2c2319; position: relative; display: block; transition: all .2s ease-in-out;}
#overlay-button span:before {top: -8px; visibility: visible;}
#overlay-button span:after {top: 8px;}
#overlay-button span:before, #overlay-button span:after {height: 3px; width: 30px; border-radius: 2px; background-color: #2c2319; position: absolute; content: ""; transition: all .2s ease-in-out;}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {background:#abbaa9;}
input[type=checkbox] {display: none;}
input[type=checkbox]:checked ~ #overlay {visibility: visible;}
input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {background: transparent; position: fixed; right: 0.5em;}
input[type=checkbox]:checked ~ #overlay-button span:before {transform: rotate(45deg) translate(5px, 5px);}
input[type=checkbox]:checked ~ #overlay-button span:after {transform: rotate(-45deg) translate(6.5px, -6.5px);}
/* ハンバーガー黒 */
#overlay-button2 {position: absolute; right: 0.5em; top: 0.2em; padding: 20px 5px; z-index: 99; cursor: pointer; user-select: none;}
#overlay-button2 span {height: 3px; width: 30px; border-radius: 2px; background-color:#bbb; position: relative; display: block; transition: all .2s ease-in-out;}
#overlay-button2 span:before {top: -8px; visibility: visible;}
#overlay-button2 span:after {top: 8px;}
#overlay-button2 span:before, #overlay-button2 span:after {height: 3px; width: 30px; border-radius: 2px; background-color: #bbb; position: absolute; content: ""; transition: all .2s ease-in-out;}
#overlay-button2:hover span, #overlay-button2:hover span:before, #overlay-button2:hover span:after {background:#888;}
input[type=checkbox] {display: none;}
input[type=checkbox]:checked ~ #overlay {visibility: visible;}
input[type=checkbox]:checked ~ #overlay-button2:hover span, input[type=checkbox]:checked ~ #overlay-button2 span {background: transparent; position: fixed; right: 0.5em;}
input[type=checkbox]:checked ~ #overlay-button2 span:before {transform: rotate(45deg) translate(5px, 5px);}
input[type=checkbox]:checked ~ #overlay-button2 span:after {transform: rotate(-45deg) translate(6.5px, -6.5px);}

.sp-hidden-logo{display: block; margin: 0 auto 20px; width: 25%; max-width: 110px; padding: 40px 0 0;}
.sp-hidden-menu{padding: 0 10%;}
.sp-hidden-menu li{padding: 0.8em 0; border-bottom: 1px solid #888; font-size: 0.9em;}
.sp-hidden-menu li a{display: block;}
.sp-hidden-sns{display: flex; flex-flow: row; padding: 0 10%;}
.sp-hidden-sns li{margin: 30px 10px 0 0;}
.sp-hidden-terms{padding: 10% 10% 0; line-height: 1.9em; font-size: 0.8em;}
.sp-hidden-terms span{display: block;}
.flex-xl{display: none;}

/* Header */
#overlay {height: 100vh; width: 100vw; background-color: #eeebe6; z-index: 98; visibility: hidden; position: fixed; top: 0;}
header{padding: 10px 0 0; height:47px; width: 100%; margin: 0 auto;}
.kotei{position: fixed; z-index: 90; box-shadow: 0px 8px 8px -6px rgba(0,0,0,0.1); top:0; left: 0;}
.h-container{display: flex;}
.logo-area{width: 35%; margin-left: 0.5em;}
.logo-area img{width: 100%; margin: 3px 0 0; max-width: 120px;}
.nav-area{display: none;}
.top-sec{margin: 47px 0 0;}

/* header2nd */
.header2nd{position:sticky; position: -webkit-sticky; top: 0; z-index: 10; padding: 10px 0 0; height: 52px; width: 100%; box-shadow: 0px 8px 8px -6px rgba(0,0,0,0.1);}
.border-bc{border-bottom: 1px solid #ccc;}
.border-b7{border-bottom: 1px solid #777;}
.h2nd-left{margin: 5px 0 0; font-size: 1.05em;}
.h2nd-right{margin: 3px 0 0;}

/* パンくず */
.pankz{padding: 35px 0px 25px; border-top: 1px solid #ccc; overflow-x: scroll; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none;}
.pankz::-webkit-scrollbar{display: none;}
.pankz p{color: #2c2319;}
.pankz p a{color: #888;}
.pankz p a:hover{color: #2c2319;}
.pankz-bk{padding: 35px 0px 25px; border-top: 1px solid #554e46; overflow-x: scroll; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none;}
.pankz-bk::-webkit-scrollbar{display: none;}
.pankz-bk p{color: #edeae5;}
.pankz-bk p a{color: #aaa;}
.pankz-bk p a:hover{color: #fff;}


/* FOOTER */
footer{border-top: 1px solid #2c2319;}
.f-logo-area{padding: 65px 0;}
.f-logo-area img{display: block; margin: 0 auto 10px; width: 60%; max-width: 220px;}
.f-logo-area p{font-size: 0.9em; letter-spacing: 0.1em;}
.f-menu li dl{width: 90%; margin:0 auto 20px;}
.f-menu li dl dt{font-weight: bold; font-size: 1em; padding: 10px 0; border-bottom: 2px solid #2c2319;}
.f-menu li dl dd{font-size: 0.95em; padding: 15px 0; border-bottom: 1px dotted #aaa;}
.f-sns{max-width: 240px; margin: 50px auto;}
.invoice{margin: 30px auto 50px; font-size: 0.9em; text-align: center;}
.invoice span{display: block; font-size: 1.2em; font-weight: bold; margin-top: 5px; margin-right: 10px; letter-spacing: 0.06em;}
.copyright{text-align: center; font-size: 0.9em; padding: 10px 0; border-top: 1px solid #2c2319;}





@media screen and (min-width: 35.5em){
/* 568px */
/* Header */
.sp-hidden-logo{padding: 50px 0 0;}
.sp-hidden-menu li{padding: 1em 0; font-size: 0.95em;}
.sp-hidden-terms{padding: 15% 10% 0; font-size: 0.9em;}
.sp-hidden-terms span{display: inline;}
.logo-area img{margin: 1px 0 0; max-width: 130px;}
/* header2nd */
.h2nd-right{margin: 1px 0 0;}

/* FOOTER */
.f-logo-area img{max-width: 240px;}
.f-logo-area p{font-size: 0.95em;}
.f-menu li dl dd{font-size: 0.9em;}
.f-sns{max-width: 260px;}
.copyright{font-size: 0.9em;}


}

@media screen and (min-width: 48em){
/* 768px */
/* Header */
#overlay {height: 230px; box-shadow: 0px 20px 20px -15px rgba(0,0,0,0.2); border-bottom: 2px solid #2c2319;}
.flex-md{display: flex; margin-top: 25px;}
.flex-md2{display: flex; flex-direction: row-reverse; border-top: 1px solid #888; width: 94%; margin: 25px auto 0;}
.sp-hidden-logo{width: 60%; max-width: 85px; margin: 0 0 0 30%; padding: 30px 0 0;}
.sp-hidden-menu{padding: 10px 4% 0;}
.sp-hidden-menu li{padding: 0.5em 0; font-size: 0.85em; border: 0;}
.sp-hidden-sns{padding: 0 5%;}
.sp-hidden-sns li{margin: 20px 10px 0 0;}
.sp-hidden-terms{padding: 20px 0 0; font-size: 0.8em;}
/* header2nd */
.h2nd-left{margin: 4px 0 0; font-size: 1.1em;}

/* パンくず */
.pankz,.pankz-bk{padding: 40px 0 30px;}


/* FOOTER */
.f-menu li dl{width: 80%;}
.f-logo-area{padding: 80px 0;}
.f-logo-area img{max-width: 280px; margin: 0 auto 15px;}
.f-logo-area p{font-size: 1em;}



}

@media screen and (min-width: 64em){
/* 1024px */
/* ハンバーガー */
#overlay-button {padding: 23px 5px; right: 1em;}
.sp-hidden-menu li{font-size: 0.9em;}
.sp-hidden-terms{font-size: 0.85em;}
input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {right: 1em;}
/* ハンバーガー黒 */
#overlay-button2 {padding: 23px 5px; right: 1em;}
input[type=checkbox]:checked ~ #overlay-button2:hover span, input[type=checkbox]:checked ~ #overlay-button2 span {right: 1em;}
/* Header */
#overlay {height: 235px;}
header{height: 54px;}
.top-sec{margin: 54px 0 0;}
.logo-area{width: 20%;}
.logo-area img{margin: 4px 0 0; max-width: 150px; margin-left: 1em;}
.sp-hidden-menu li{font-size: 0.9em;}
.sp-hidden-terms{font-size: 0.85em;}
/* header2nd */
.header2nd{padding: 10px 0 0; height: 60px;}
.h2nd-left{margin: 7px 0 0; font-size: 1.25em;}
.h2nd-right{margin: 3px 0 0;}

/* パンくず */
.pankz,.pankz-bk{padding: 45px 0 35px;}

/* FOOTER */
.f-menu li dl{width: 90%;}
.f-logo-area{padding: 90px 0;}
.f-logo-area img{max-width: 300px;}
.f-logo-area p{font-size: 1.05em;}


}

@media screen and (min-width: 80em){
/* 1280px */
/* ハンバーガー */
#overlay-button {right: 2em;}
input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {right: 2em;}
/* ハンバーガー黒 */
#overlay-button2 {right: 2em;}
input[type=checkbox]:checked ~ #overlay-button2:hover span, input[type=checkbox]:checked ~ #overlay-button2 span {right: 2em;}
/* Header */
#overlay {height: 165px;}
.logo-area img{margin-left: 2em;}
.sp-hidden-logo{width: 55%; max-width: 90px; padding: 28px 0 0;}
.sp-hidden-menu{padding: 13px 4% 0;}
.sp-hidden-menu li{font-size: 0.93em;}
.flex-md{margin-top: 20px;}
.flex-md2{display: none;}
.flex-xl{display: block; position: absolute; top: 36px; right: 6%;}
.sp-hidden-sns{margin-left: 80px;}

/* パンくず */
.pankz,.pankz-bk{padding: 50px 0 40px;}

/* FOOTER */
.f-logo-area{padding: 110px 0;}
.f-logo-area img{max-width: 320px;}
.f-logo-area p{font-size: 1.2em;}
.f-menu li dl{width: 84%;}
.f-menu li dl dt{font-size: 1.05em;}
.f-menu li dl dd{font-size: 0.95em;}


}