.pcOnly {display: inline-block !important;}
.spOnly {display: none !important;}

#special{ margin: 0 auto; max-width: 1256px; width: 100%; position: relative; background: #fff; text-align: center;}

#social-wrap { position: absolute; right: 0; top: 15px; overflow: hidden; z-index: 9; }
#social-wrap a.fb { background-position: 0 0; }
#social-wrap a.tw { background-position: -36px 0; }
#social-wrap a { display: block; width: 36px; height: 36px; background: url(../img/social_bt.png) no-repeat left top; margin: 0 10px 0 0; float: left; text-indent: -9999px; }

/*sec01*/
#sec01 { width: 100%; max-width: 1256px; opacity: 1; position: relative;}
#sec01 .keyVusial{ position: relative;}
#sec01 .lead{ font-size: 2.6rem; line-height: 2; font-weight: bold; margin: 50px 0 100px;}

.item{ display: block;}
.item .lead{ font-size: 1.8rem; font-weight: bold; text-align: center; margin: -10px auto 30px; line-height: 2;}
.item.cosmetics h2{ position: absolute; top: -50px; width: 1156px; background: #2d7cb6; color: #fff; padding: 12px; border-radius: 20px; text-align: center; font-size: 6.6rem; font-weight: normal; font-family: 'MQ'; line-height: 1;}
.item.cosmetics .area{ position: relative; padding: 80px 50px 100px; text-align: left; background: #c8dff0;}
.item.fashion h2{ position: absolute; top: -50px; width: 1156px; background: #734e21; color: #fff; padding: 12px; border-radius: 20px; text-align: center; font-size: 6.6rem; font-weight: normal; font-family: 'MQ'; line-height: 1;}
.item.fashion .area{ position: relative; padding: 80px 50px 100px; text-align: left; background: #fee8d0;}
.item .area dl{ background: #fff; margin: 0 auto 20px; padding: 40px 0 40px 40px; width: 100%; text-align: left; border-radius: 30px;}
.item .area dl dt{ width: 480px; display: inline-block; vertical-align: top;}
.item .area dl dt img{ width: 100%;}
.item .area dl dd{ display: inline-block; width: calc(100% - 540px); margin: 8px 0 20px 40px;}
.item .area dl dd .detail:nth-of-type(n+2){ margin-top: 30px;}
.item .area dl h3{ font-size: 5.8rem; font-weight: normal; font-family: 'MQ'; color: #2d7cb6; display: flex; align-items: center; gap: 18px; line-height: 1.2;}
.item .area dl h3 span{ font-size: 1.5rem; color: #000; border: #000 1px solid; padding: 7px 8px; font-weight: bold; line-height: 1; position: relative; top: 6px;}
.item .area dl .name{ font-size: 1.7rem; margin-top: 0; color: #2d7cb6; font-weight: bold;}
.item .area dl .lead{ margin: 10px 0 0; padding-left: 16px; border-left: #000 1px solid; font-size: 1.5rem; line-height: 1.8; text-align: left; font-weight: normal;}
.item .area dl .lead span{ font-size: 1.2rem; display: block; margin-top: 4px;}
.item .area dl .lead span.sub{ color: #555555;}
.item .area dl .lead sup{ font-size: 0.6em; vertical-align: super;}
.item .copy{ margin: 50px auto 40px; text-align: center;}
.item .btn{ margin: auto; text-align: center;}
.item .btn img:hover{ opacity: 0.8;}
.item .notice{ font-size: 1.6rem; color: #555555; text-align: center; margin: 40px auto -10px;}
#fashion{padding-top: 200px; margin-top: -40px;}
.fashion dl dd .detail{ display:flex; flex-direction:column; justify-content:center; height:100%;}
.fashion dl dd .detail h3{ margin-top: 90px; font-size:2rem; line-height:1.5; font-weight:700; color: #000;}
.fashion dl dd .detail h3.mt110{ margin-top: 110px;}
.fashion dl dd .detail ul{ display:grid; gap:8px;}
.fashion dl dd .detail ul li{ font-size:1.7rem; line-height:1.8; color: #734e21; font-weight: bold;}

@media screen and (max-width: 768px){

.pcOnly {display: none !important;}
.spOnly {display: inline-block !important;}

#special { max-width: 100%;}
#social-wrap {top: 10px;}

/*sec01*/
#sec01 { width: 100%; height: auto;}
#sec01 .keyVusial{ position: inherit;}
#sec01 .lead{ font-size: 1.8rem; margin: 40px 0 70px; line-height: 1.8;}

.item{ width: 100%; margin: 30px auto;}
.item .lead{ font-size: 1.2rem; margin: -8px auto 16px;}
.item.cosmetics h2,.item.fashion h2{ top: -35px; width: 92%; padding: 12px; border-radius: 15px; font-size: 4.4rem;}
.item.cosmetics .area,.item.fashion .area{ padding: 55px 15px 50px; text-align: left;}
.item .area dl{ padding: 15px; border-radius: 20px;}
.item .area dl dt{ width: 100%; display: block;}
.item .area dl dd{ display:block; width: 100%; margin: 15px 0 0; padding: 0 2px;}
.item .area dl dd .detail:nth-of-type(n+2){ margin-top: 20px;}
.item .area dl h3{ font-size: 4rem; gap: 12px;}
.item .area dl h3 span{ font-size: 1.1rem; padding: 4px;}
.item .area dl .name{ font-size: 1.2rem;}
.item .area dl .lead{ margin: 6px 0 10px; padding-left: 10px; font-size: 1.1rem;}
.item .area dl .lead span{ font-size: 0.9rem;}
.item .copy{ margin: 25px auto;}
.item .copy img{ width: 170px;}

.item .notice{ font-size: 1.2rem; margin: 20px auto -10px;}
#fashion{padding-top: 100px; margin-top: -30px;}
.fashion dl dd .detail{ padding: 0 5px 10px;}
.fashion dl dd .detail h3{ margin-top: 10px; font-size:1.5rem;}
.fashion dl dd .detail h3.mt110{ margin-top: 10px;}
.fashion dl dd .detail ul{ display:grid; gap:10px;}
.fashion dl dd .detail ul li{ font-size:1.4rem; line-height:1.5;}

}