@charset "UTF-8";
/* ============================
  default
 ============================*/
/* CSS Document */
/*
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, p, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
	font-family: "メイリオ","Meiryo","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif !important;
}
*/

#contWrap a, #contWrap h2, #contWrap h3, #contWrap h4, #contWrap b, #contWrap span, #contWrap p, #contWrap div, #contWrap li {
    font-family: "メイリオ","Meiryo","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
}
/*
#contWrap a, #contWrap h2, #contWrap h3, #contWrap h4, #contWrap b, #contWrap span, #contWrap p, #contWrap div, #contWrap li {
    font-family: "游明朝", YuMincho, serif, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝" !important;
    font-weight: 1000;
}
*/
.serif, .serif span, .serif small {
    font-family: "游明朝", YuMincho, serif, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝" !important;
    font-weight: 1000;
}

body { padding-top: 0 !important; }
/* ==================== ==================== */
.container-fluid { padding: 0; }
main.col-md-12 { padding: 0; float: inherit; }

#wrap { margin: 0 auto !important; width: 100% !important; min-width: 100% !important; }
#feature { width: 100vw; padding-top: 10px; margin: 0 auto; max-width: 100%; overflow: hidden; }
#wrapper {
    width: 100%;
    font-size: 16px;
    line-height: 1.3em;
    margin: 0 auto 20px;
    padding: 150px 0 0;
    clear: both;
}
@media screen and (min-width:769px) {
    #wrapper { padding: 180px 0 0; }
}
@media screen and (min-width:1281px) {
    #wrapper { padding: 250px 0 0; }
}

#wrapper #topicpass { font-size: 14px; margin: 0 auto 0.5em; padding: 0 1.5em 0.5em; }
#wrapper #topicpass a { color: #0077BB; text-decoration: underline; }

.bgColor { background: center 10%/100% url(//navibirdcdn.azureedge.net/jshoppers/images/feature/01/common/bgImg.jpg) repeat-y; }

#contWrap p, #contWrap b, #contWrap span, #contWrap div, #contWrap pre, #contWrap address, #contWrap h1, #contWrap h2, #contWrap h3, #contWrap h4, #contWrap h5, #contWrap h6 { font-size: inherit; line-height: inherit; }
#contWrap li, #contWrap dt, #contWrap dd { font-size: inherit; line-height: inherit; }
#contWrap ol li, #contWrap ul li { list-style: none; }
#contWrap p { line-height: 1.5em; }
#contWrap small { font-size: 85% !important; }
#contWrap img { width: 100%; vertical-align:top !important; }
#contWrap { width: 100vw; max-width: 100%; margin: 0; overflow: hidden; font-size: 14px; }

.contWrapInr { width: 100%; margin: 0; }

/* ==================== ==================== */

a { text-decoration: none; color: inherit; transition: all 0.3s; }
a:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";  /* ie 8 */
	-moz-opacity: 0.8;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.8;             /* Safari 1.x */
	text-decoration: none;
}

.posiAb { position: absolute; }
.posiRe { position: relative; }
.txtRed { display: block; }
.indent { padding-left: 1em; text-indent: -1em; }
.cRED { color: #ff0000; }
.cYLW { color: #FFFF00; }
.cORG { color: #ffd700; }
.bold { font-weight: bold; }
.alL { text-align: left; }
.alC { text-align: center; }
.alR { text-align: right; }
.flL { float: left; }
.flR { float: right; }
.both { clear: both; }
.ov { overflow: hidden; }
.opa70, a img, .cateLinkBtn a, .btnBASE a { transition: all 0.3s; }
.opa70:hover, a img:hover,.cateLinkBtn a:hover, .btnBASE a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    text-decoration: none;
    transition: all 0.3s;
}

.brRES { display: none; }
@media screen and (min-width:769px) { .brRES { display: block; } }

@media screen and (min-width:769px) { .resBR { display: none; } }
@media screen and (max-width:979px) { .br { display: none; } }

.mgb5 { margin-bottom: 1vw; }
@media screen and (min-width: 769px) { .mgb5 { margin-bottom: 5px !important; } }
.mgb10 { margin-bottom: 2.5vw; }
@media screen and (min-width: 769px) { .mgb10 { margin-bottom: 10px !important; } }
.mgb20 { margin-bottom: 3vw; }
@media screen and (min-width: 769px) { .mgb20 { margin-bottom: 20px !important; } }
.mgb30 { margin-bottom: 4.5vw; }
@media screen and (min-width: 769px) { .mgb30 { margin-bottom: 30px !important; } }
.mgb40 { margin-bottom: 5.5vw; }
@media screen and (min-width: 769px) { .mgb40 { margin-bottom: 40px !important; } }

	#contWrap .ft12 { font-size: 12px; }
	#contWrap .ft14 { font-size: 14px; }
	#contWrap .ft16 { font-size: 16px; line-height: 1.3em !important; }
	#contWrap .ft18 { font-size: 18px; line-height: 1.3em; }
	#contWrap .ft20 { font-size: 20px; line-height: 1.3em; }
	#contWrap .ft30 { font-size: 30px; line-height: 1.3em; }

.clearfix:after { display: block; clear: both; height: 0px; visibility: hidden; content: "."; }
.clearfix { min-height: 1px; /*IE6、7対策*/}

/* ======================================== Main ============================== */
#contMain { margin: 0 auto; }
.topMainWrap { width: 100%; margin: 0 auto; padding: 0 0; position: relative; }

.mainTTL {
    background: 10% 50%/50% #f4b6c3 url(//navibirdcdn.azureedge.net/jshoppers/images/feature/01/common/bgTtlImg01.png) no-repeat;
    padding: 5vw;
}
.logoImg { width: 20% !important; max-width: 160px; margin: 0 0 3vw 5px; position: relative; z-index: 100; }
.mainTTL h2 {
    width: 80%;
    font-size: 9.066vw !important;
	color: #422D38;
	line-height: 1.1em !important;
	font-weight: bold;
    letter-spacing: 3px;
    position: relative;
    z-index: 100;
	text-shadow: 0 0 0.3em #ffffff, 0.05em 0.05em 0.2em #ffffff, 0.05em 0.05em 0.2em #ffffff, 0.05em 0.05em 0.2em #ffffff, 0.05em 0.05em 0.2em #ffffff;
}
@media screen and (min-width:769px) {
    .logoImg { margin-bottom: 15px; }
    .mainTTL { background: 40% 50%/40% #f4b6c3 url(//navibirdcdn.azureedge.net/jshoppers/images/feature/01/common/bgTtlImg01.png) no-repeat; }
    .mainTTL h2 { font-size: 66px !important; }
    .ch .mainTTL h2, .gb .mainTTL h2 { font-size: 86px !important; }
}
@media screen and (min-width:1281px) {
    .mainTTL { background: 40% 50%/25% #f4b6c3 url(//navibirdcdn.azureedge.net/jshoppers/images/feature/01/common/bgTtlImg01.png) no-repeat; padding: 3vw 12vw; }
    .mainTTL h2 { width: 100%; }
}

.mainTTLsub {
    background-color: #e60063;
    padding: 5vw;
    margin-bottom: 5vw;
}
.mainTTLsub p {
    font-size: 6.933vw !important;
	color: #FFFFFF;
	line-height: 1.2em !important;
	font-weight: bold;
    letter-spacing: 3px;
    position: relative;
    z-index: 100;
}
@media screen and (min-width:769px) {
    .mainTTLsub { margin-bottom: 50px; }
    .mainTTLsub p { width: 52%; font-size: 4.421vw !important; }
}
@media screen and (min-width:1040px) {
    .mainTTLsub p { font-size: 44px !important; }
}
@media screen and (min-width:1281px) {
    .mainTTLsub { padding: 3vw 18vw; }
}

.bgImg02Txt {
    font-size: 2.6666vw !important;
    line-height: 1em !important;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 15%;
    right: 2%;
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    z-index: 100;
}
.bgImg02Txt span { font-family: Arial !important; font-size: 22px !important; }
.bgImg02 { width: 30% !important; max-width: 300px; position: absolute; top: 25%; right: 0; z-index: 10; }
.bgImg03 { width: 40% !important; max-width: 400px; position: absolute; top: 5%; left: 35%; z-index: 1; }
@media screen and (min-width:769px) {
    .bgImg02Txt { font-size: 14px !important; top: 15%; right: 3%; }
    .bgImg02 { top: 15%; right: 0; }
}

@media screen and (min-width:1281px) {
    .bgImg02Txt { font-size: 18px !important; top: 10%; right: 2%; }
    .bgImg02 { width: 20% !important; max-width: 420px; top: 15%; right: 0; }
    .bgImg03 { top: 3%; left: 45%; }
}

.secMainItemBox { width: 100%; margin: 0 auto; max-width: 1280px; }
.secMainItemBox .itemImgWrap { padding: 5px 5px 5px; }
.secMainItemBox ul li img.btn_cart, .secItemBox ul li img.btn_cart { border-radius: 50px !important; border: solid 2px #FFF; }
.secMainItemBox li.itemImgWrap { width: 96%; margin: 0 2%; position: relative; }
@media screen and (max-width:479px) {
    .secMainItemBox li.itemImgWrap { width: 88%; margin: 0 auto 20px; }
}
@media screen and (min-width:769px) {
    .secMainItemBox ul { display: flex; }
}

/* ==================== section ==================== */
.sp_secWrap { width: 100%; }
.sp_secInr { margin: 0 0 50px; padding: 0 0; max-width: 100%; }
@media screen and (min-width:480px) { .sp_secInr { margin: 0 8% 50px; } }
@media screen and (min-width:769px) { .sp_secInr { margin: 0 4% 50px; } }
@media screen and (min-width:1281px) { .sp_secInr { max-width: 1280px; margin: 0 auto 50px; } }

/* ==================== item ==================== */
.itemImgWrap { position: relative; transition: 0.3s; }

.itemCap {
    width: 85%;
    margin: 0 auto;
    border: solid 2px #e60063;
    border-radius: 10px;
    position: relative;
}
.itemCap p { font-size: 16px !important; color: #e60063; font-weight: bold; padding: 1em 0.8em; }
.jp .itemCap p, .ch .itemCap p, .gb .itemCap p { text-align: justify; }
@media screen and (min-width: 769px) {
    .itemCap p { font-size: 18px !important; }
}

.itemCap:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 25%;
    margin-left: -5px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 20px 10px 0px 10px;
    border-color: #e60063 transparent transparent transparent;
    z-index: 100;
}
.itemImg { margin: 20px auto; max-width: 450px; }

.itemInfo { align-items: center; margin-bottom: 20px; display: flex; }
.itemInfo li { font-size: 12px !important; text-align: center; }
@media screen and (min-width:480px) {
    .itemInfo li { font-size: 14px !important; }
}

.itemInfo li:nth-of-type(1) small { color: #FFFFFF; }
.itemInfo li:nth-of-type(1) {
    color: #FFFFFF;
    font-weight: bold;
    background-color: #e60063;
    border-radius: 10px;
    padding: 1em;
    margin: 0 5% 0 0;
}
.itemInfo li:nth-of-type(2) small { color: #f3b197; }
.itemInfo li:nth-of-type(2) p {
    background-color: #f3b197;
    border-radius: 50px;
    font-weight: bold;
    text-align: center;
    padding: 0.6em;
    margin: 0.1em auto;
    line-height: 1.2em !important;
}

.itemName, .itemPrice { font-size: 16px !important; line-height: 1.3em !important; font-weight: bold; margin: 0 auto 0.5em; }
.itemName { border-top: dotted 5px #e60063; padding: 0.6em 0 0; }
.itemPrice { text-align: right; }
.itemInfoImg { position: relative; z-index: 50; }
@media screen and (min-width:769px) {
    .itemName, .itemPrice { font-size: 18px !important; }
    .jp .itemInfoImg { margin-top: -28vw; }
    .eg .itemInfoImg { margin-top: -32vw; }
    .ch .itemInfoImg { margin-top: -20vw; }
    .gb .itemInfoImg { margin-top: -20vw; }
}
@media screen and (min-width:1040px) {
    .jp .itemInfoImg { margin-top: -20vw; }
    .eg .itemInfoImg { margin-top: -28vw; }
    .ch .itemInfoImg { margin-top: -16vw; }
    .gb .itemInfoImg { margin-top: -16vw; }
}
@media screen and (min-width:1281px) {
    .jp .itemInfoImg { margin-top: -16vw; }
    .eg .itemInfoImg { margin-top: -20vw; }
    .ch .itemInfoImg { margin-top: -16vw; }
    .gb .itemInfoImg { margin-top: -16vw; }
}
@media screen and (min-width:1920px) {
    .jp .itemInfoImg { margin-top: -290px; }
    .eg .itemInfoImg { margin-top: -340px; }
    .ch .itemInfoImg { margin-top: -300px; }
    .gb .itemInfoImg { margin-top: -300px; }
}

.itemInfoTtl { margin-bottom: 20px; }
.itemInfoTtl p { text-align: center; }

.itemInfoTtl p:nth-of-type(1) { font-size: 30px !important; line-height: 1.1em !important; margin: 15px 0; }
.itemInfoTtl p:nth-of-type(2) { font-size: 24px !important; line-height: 1.2em !important; }
@media screen and (min-width:769px) {
    .itemInfoTtl p:nth-of-type(1) { font-size: 36px !important; }
}

.pointWrapInr { margin: 0 auto 30px; }
.pointWrapInr:last-child { margin: 0 auto 0; }
.icoPointImg { max-width: 60px; margin-right: 10px; }
.pointTtl {
    font-size: 18px !important;
    line-height: 1.3em !important;
    font-weight: bold;
    color: #FFFFFF;
    margin-top: 0.5em;
    padding: 0.5em 1.5em;
    border-radius: 50px;
    background-color: #e60062;
    display: inline-block;
}

.pointTxt { font-size: 14px !important; margin: 0.5em auto 1em; }
.point3List { display: flex; }
.point3List li {
    font-size: 12px !important;
    line-height: 1.4em !important;
    text-align: center;
    width: 25%;
    padding: 0.5em;
    margin: 0 !important;
}

.makerInfoWrap { background-color: #115424; padding: 10px; }
@media screen and (max-width:768px) {
    .makerInfoWrap { margin: 2vw auto 8vw; }
}
.makerInfoWrapInr { background-color: #FFFFFF; border-radius: 10px; padding: 10px; }

.makerInfoWrap h3 { font-size: 16px !important; font-weight: bold; margin: 0.5em 0; }
.makerInfoWrap p.makerInfo { font-size: 14px !important; margin-bottom: 10px; }
.makerInfoWrap p.makerInfo span { color: #e60062; font-weight: bold; padding-top: 0.3em; display: block; }

.makerInfoItemWrap { overflow: hidden; display: block !important; }
.makerInfoItemWrap li { width: 50%; text-align: center; float: left; }
.makerInfoItemWrap li img { max-width: 100px; margin: 0 auto; }
.makerInfoItemWrap li:nth-of-type(3) { width: 100%; margin: 0 auto; }
.makerInfoItemWrap li:nth-of-type(3) p { color: #e60062; font-size: 13px !important; line-height: 1.2em !important; text-align: center; }
.makerInfoItemWrap li:nth-of-type(3) p:nth-of-type(2) {
    font-size: 16px !important;
    font-weight: bold;
    margin: 0.3em auto;
    padding: 1em 1.5em;
    border: dashed 1px #e60062;
    border-radius: 6px;
    background-color: #fbfaf5;
    display: inline-block;
}
@media screen and (min-width:480px) and (max-width:768px) {
    .makerInfoItemWrap { display: flex; }
    .makerInfoItemWrap li { width: 25%; }
    .makerInfoItemWrap li:nth-of-type(3) { width: 50%; margin-top: 10px; }
    .makerInfoItemWrap li img { max-width: 120px; }
}
@media screen and (min-width:960px) {
    .makerInfoItemWrap { display: flex; }
    .makerInfoItemWrap li { width: 25%; }
    .makerInfoItemWrap li:nth-of-type(3) { width: 50%; margin-top: 10px; }
    .makerInfoItemWrap li img { max-width: 120px; }
}

/* ========== Bottom Links ========== */
.btmBox { padding-top: 20px; border-top: dotted 5px #e60063; }

/* ========== ボタン ========== */
.btnWrap { width: 100%; text-align: center; }
.btnWrap2pc { width: 100%; text-align: center; }
.btnBASE { text-align: center; margin: 0 auto 30px; }
.btnWrap2pc .btnBASE { text-align: center; margin: 0 3% 30px; display: inline-block; }

.btnBASE a {
	font-size: 16px;
	line-height: 1.3em;
	color: #fff;
	text-decoration: none;
    margin: 0 auto;
    padding: 0.5em 1.3em 0.4em 2em;
    display: block;
	position: relative;
	border-radius: 6px;
    letter-spacing: 1px;
}
.btnWrap button { border-bottom: solid 2px #115424; border-radius: 8px; transition: all 0.3s; }
.btnBASE.btnCART a { color: #115424; font-weight: bold; padding: 1em 1.5em 0.9em 2.5em; }

.btnWHT a { color: #010101; background-color: #FFFFFF; transition: all 0.5s; }
.btnRED a { background-color: #970005; }
.btnGRN a { background-color: #4faa99; border-bottom: solid 2px #31695e; transition: all 0.3s; }
.btnBLK a { background-color: #010101; }
.btnCART a { background-color: #f7c114; border: solid 2px #115424; transition: all 0.3s; }

.btnBASE a:hover { color: #FFFFFF; text-decoration: none; }
.btnBASE a:before {
    width: 0.3em;
    height: 0.3em;
	position: absolute;
	top: 44%;
	left: 1em;
	display: block;
	content: '';
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.btnBASE.btnCART a:before { border-top: 1px solid #115424; border-right: 1px solid #115424; }
.btnBASE.btnCART a:hover { color: #115424; }
.btnWrap button:hover { border-bottom: solid 2px transparent; transition: all 0.3s; }

/* -============================= sold out =====================- */
.soldout { position: relative; }
.soldout:before {
    content: "Sold Out";
    font-size: 16px;
    line-height: 1.1em;
    font-weight: bold;
    position: absolute;
    top: 10%;
    left: 0;
    display: block;
    height: auto;
    padding: 0.5em 1em;
    background-color: #666666;
    filter:alpha(opacity=80); /* IE 6,7*/
    -ms-filter: "alpha(opacity=80)"; /* IE 8,9 */
    -moz-opacity: 0.8; /* FF , Netscape */
    -khtml-opacity: 0.8; /* Safari 1.x */
    opacity: 0.8;
    color: #FFFFFF;
    z-index: 100;
}
.soldout a { cursor: default; }
.soldout a img.btn_cart { display: none; }
.soldout img { filter:alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; }
.soldout a:hover { filter:alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
.soldout .opa70:hover { filter:alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
.secItemBox .soldout .itemImgWrap:hover { background-color: inherit !important; }
/* -============================= // sold out =====================- */