@charset "utf-8";
/* CSS Document */
img {max-width:100%;}
a {color: #151515; display: block;}
.headttl, .tabbox li p:first-child {font-family: 'Barlow', sans-serif;}
.ttlbox {border-bottom: 3px solid #666666; color: #666666;}

/* PC用設定
-----------------------------*/
@media screen and (min-width:768px) {
.headerwrap {width: 200px; margin: 0 auto; text-align: center;}
main {font-size: 16px;}
.sp {display: none;}
.headbox {text-align: center; margin: 3rem auto;}
.headbox .headttl {font-size: 60px; margin: 0 auto 3rem;}

.ttlbox {width: 1000px; margin: 0 auto 3rem; font-size: 32px; padding-bottom: .5rem;}

.tabwrap {width: 1000px; margin: 3rem auto 0; overflow: hidden;}
.tabbox {width: 100%; margin: 0 auto 4rem; display: flex;}
.tabbox li {width: 100%;}
.tabbox li a {display: block; padding: 1rem 0; background: #e8e8e8; text-align: center;}
.tabbox li.current a {background: #ccc; position: relative;}
.tabbox li.current a:after {top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(204, 204, 204, 0); border-top-color: #cccccc; border-width: 15px; margin-left: -15px;}
.tabbox li p:first-child {font-size: 26px; margin-bottom: .5rem;}
.tabbox li p:last-child {font-size: 14px;}
.tabitem > div {clear: both; display: none;}
.tabitem .current {display: block;}

.catttl.lady {width: 100%; margin: 0 auto .5rem; padding-bottom: .3rem; font-weight: bold; color: #C16567; font-size: 18px;}
.catttl.men {width: 100%; margin: 0 auto .5rem; padding-bottom: .3rem; font-weight: bold; color: #4269A4; font-size: 18px;}
.catwrap.lady {border-left: 2px solid #C16567; padding: 1rem; margin-bottom: 3rem;}
.catwrap.men {border-left: 2px solid #4269A4; padding: 1rem; margin-bottom: 3rem;}

.catlist {width: 100%; margin: 0 auto 3rem; display: flex; flex-wrap: wrap; gap: 1rem; font-size: 14px;}
.catlist li {width: calc(33% - .5rem);}
.catlist li a {display: block; padding: 1.5rem 0 1.5rem 1rem; background: #e8e8e8; position: relative}
.catlist li a:after {content:"\03e"; position: absolute; top: 50%; right: 5%; margin-top: -5px; font-size: 14px;}
.catlist .top a {background: #D5D5D5;}

.pagetop {position: fixed; right: 3%; bottom: 3%; z-index: 999; background-color: rgba(0,0,0,0.1); border-radius: 5rem; font-size: 22px;}
.pagetop a {display: block; padding: 1rem;}

.footerwrap {width: 100%; margin: 0 auto; background: #f2f2f2; padding: 3rem 0;}
.footlist {width: 1000px; margin: 0 auto 2rem; font-size: 13px; display: flex;}
.footlist li {width: 100%; text-align: center;}
.footlist li a {display: block; padding: 1rem 0; border-bottom: 1px solid #151515;}
.copy {font-size: 12px; margin: 0 auto; text-align: center;}

}




/* スマホ用設定
-----------------------------*/
@media screen and (max-width:768px) {
.headerwrap {width: 40%; margin: 0 auto; text-align: center;}
.pc {display: none;}
.headbox {text-align: center; margin: 2rem auto 1rem;}
.headttl {font-size: 40px;}

.ttlbox {width: 90%; margin: 0 auto 2rem; font-size: 26px; padding-bottom: .5rem;}

.tabwrap {width: 100%; margin: 3rem auto 0; overflow: hidden;}
.tabbox {width: 100%; margin: 0 auto 4rem; display: flex;}
.tabbox li {width: 100%;}
.tabbox li a {display: block; padding: 1rem 0; background: #e8e8e8; text-align: center;}
.tabbox li.current a {background: #ccc; position: relative;}
.tabbox li.current a:after {top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(204, 204, 204, 0); border-top-color: #cccccc; border-width: 15px; margin-left: -15px;}
.tabbox li p:first-child {font-size: 20px; margin-bottom: .5rem;}
.tabbox li p:last-child {font-size: 12px;}
.tabitem > div {clear: both; display: none;}
.tabitem .current {display: block;}

.catttl.lady {width: 100%; margin: 0 auto .5rem; padding-bottom: .3rem; font-weight: bold; color: #C16567; font-size: 18px;}
.catttl.men {width: 100%; margin: 0 auto .5rem; padding-bottom: .3rem; font-weight: bold; color: #4269A4; font-size: 18px;}
.catwrap.lady {border-left: 2px solid #C16567; padding: 1rem; margin-bottom: 3rem;}
.catwrap.men {border-left: 2px solid #4269A4; padding: 1rem; margin-bottom: 3rem;}

.catlist {width: 100%; margin: 0 auto 3rem; font-size: 14px;}
.catlist li {margin-bottom: .5rem;}
.catlist li a {display: block; padding: 1.5rem 0 1.5rem 1rem; background: #e8e8e8; position: relative}
.catlist li a:after {content:"\03e"; position: absolute; top: 50%; right: 5%; margin-top: -5px; font-size: 14px;}
.catlist .top a {background: #D5D5D5;}

.pagetop {position: fixed; right: 3%; bottom: 3%; z-index: 999; background-color: rgba(255,255,255,0.8); border-radius: 5rem;}
.pagetop a {display: block; padding: .7rem;}

.footerwrap {width: 100%; margin: 0 auto; background: #f2f2f2; padding: 3rem 0;}
.footlist {width: 90%; margin: 0 auto 2rem; font-size: 13px; display: flex; flex-wrap: wrap;}
.footlist li {box-sizing: border-box; margin: 0; width: 50%; text-align: center;}
.footlist li a {display: block; padding: 1rem 0; border-bottom: 1px solid #151515;}
.copy {font-size: 12px; margin: 0 auto; text-align: center;}
}