@charset "UTF-8";
/* CSS Document */

body {margin:0;padding:0;font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;font-size: 62.5%;line-height:200%;color:#fff;overflow-x: hidden;-webkit-text-size-adjust: 100%;}
ol,ul,li {list-style:none;margin:0;padding:0;}
dl,dt,dd {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;margin:0;padding:0;}
p {margin:0 0 1em;padding:0;}
a { overflow: hidden; color:#333;text-decoration: none;border:none;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
a:hover,a:active { color: #999;border:none;outline:none;}

h1 {font-weight:normal;}
h2 {font-weight:normal;}
h3 {font-weight:normal;}
h4 {font-weight:normal;}
img {max-width: 100%;width:auto;height: auto;display:block;}

header:after,
article:after,
section:after,
div:after,
ul:after {
  content: "";
  display: block;
  clear: both;
}

.pc {display:none;}
.sp {display:block;}

body {background:url(../images/bg.png);}
#wrap {width: 100%;height:auto;margin:0 auto;}

#header {background:#fff url(../images/mainimg.jpg) no-repeat 0 0;background-size:contain;padding-top:100%;position: relative;}
#header h1 {padding:0 4%;}
#header .box {padding:0 4%;}
#header .box p {margin:2em auto;}
#header .box p.img02 {width:70%}
#header .box p.img03 {width:85%}
#header .box .photo {border:5px solid #e92c95;background:#fdeff7;padding:2em; border-radius:20px;}
#header .kikan {margin:3em auto 0;width:80%;padding-bottom:4em;}

#main {background:#331b0e;}
#main .item {padding:10% 5%;}
#main .item .details h2 {color:#fff000;font-size:1.8em;line-height:1.4;margin-bottom:1em;font-weight:bold;}
#main .item .details p {font-size:1.4em;line-height:1.6;}
#main .item .details p.size span {display:block;}
#main .item .details .price {font-size:1.8em;font-weight:bold;margin:1.5em 0;}
#main .item .details li {font-size:1.4em; list-style:disc;margin-left:20px;margin-bottom:.5em;}
#main .item .cart {margin-top:3em;}
#main .item .cart a {background:#e4007e;border:2px solid #fff;border-radius:10px;padding:1em;display:block;text-align:center;font-size:1.8em;color:#fff000;font-weight:bold;}
#main .item .cart a:hover {opacity:.7;}

/*販売終了*/
#main .item .cart {margin-top:3em;}
#main .item .cart a {background:rgba(228,0,126,0.1);border:2px solid #716057;border-radius:10px;padding:1em;display:block;text-align:center;font-size:1.8em;color:#fff000;font-weight:bold;}
#main .item .cart a:hover {opacity:1.0;}
/*販売終了*/

.relation {padding:10% 5%;margin-top:5%;border-top:1px solid #e92c95;}
.relation h2.headline {color:#fff000;font-size:1.8em;line-height:1.4;margin-bottom:1em;font-weight:bold;}
.relation_in {padding: 5% 0 0;}
.relation_in:first-child {padding:0;border-bottom: 1px dotted #713d1b;}

.relation_in h2 {font-size:1.8em;line-height:1.6;margin:1em 0;font-weight:bold;border-left:3px solid #e92c95;padding-left:10px;}
.relation_in h2 span {display:block;font-size:.8em;font-weight:normal;}
.relation_in p , .relation_in li {font-size:1.4em;line-height:1.5;}
.relation_in img {margin:0 auto;}
.relation_in small {display:block;line-height:1.5;margin-top:1em;font-size:1.1em;}
.relation_in .box h3 {font-size:1.5em;font-weight:bold;margin-bottom:.5em;color:#e92c95;}
.relation_in .box h3 span {display:block;}
.relation_in .price {font-size:1.8em;font-weight:bold;margin:0 0 1.5em 0;}

.relation_in .tokuten {margin:3em 0;}
.relation_in .track {margin-bottom:2em;}
.relation_in .track li {margin:.5em 0;}
.relation_in .track ol {counter-reset: my-counter;}
.relation_in .track ol li {padding-left: 30px;position: relative;}
.relation_in .track ol li:before {
  content: "M" counter(my-counter);
  counter-increment: my-counter;
  display: block;
  float: left;
  margin-left: -30px;
}
.relation_in .track ul li:before {content:"●";}
.relation_in .track ul li li {font-size:1em;list-style:disc;margin-left:2em;}
.relation_in .track ul li li:before {content:"";}

.relation_in .cart {margin:2em 0 4em;}
.relation_in .cart a {background:#e4007e;border:2px solid #fff;border-radius:10px;padding:1em;display:block;text-align:center;font-size:1.8em;color:#fff000;font-weight:bold;}
.relation_in .cart a:hover {opacity:.7;}


#footer {padding:8% 5%;text-align:center;background:#211005;}
#footer ul {letter-spacing:-.4em;}
#footer li {display:inline-block; vertical-align:top;box-sizing:border-box;letter-spacing:normal;}
#footer li:after {content:"｜";margin:0 .5em;}
#footer li:nth-child(2n):after {content:"";}
#footer li:last-child:after {content:"" !important;}
#footer li a {color:#fff;font-size:1.3em;line-height:2;}
#footer .back {margin:3em auto;}
#footer .back a {border:1px solid #fff;padding:1em ;font-size:1.4em;color:#fff;display:block;}
#footer a:hover {opacity:.6;}
#footer .copy {font-size:1.1em;opacity:.8;}

@media screen and (min-width:375px) {
.relation_in .box h3 {font-size:1.6em;}

#footer ul {padding:0 10%;}
}
@media screen and (min-width:568px) {
#header .box {max-width:520px;margin:0 auto;padding:4em 0;}
#header .kikan {max-width:480px;margin:0 auto;}
#main .item {padding:4em 5%;}
#main .item .details h2 br {display:none;}
#main .item .details.details p.size span {display: inline-block;margin-right:.5em;}

.relation_in h2 {font-size:1.8em;}
.relation_in h2 span {display:inline;}
.relation_in .box h3 span {display:inline;}
.relation_in .tokuten img {width:70%;margin:0 auto;}

#footer li:nth-child(2n):after {content:"｜";}
#footer li:nth-child(3n):after {content:"";}
#footer li a {font-size:1.3em;}
#footer .back {width:250px;}
}
@media screen and (min-width:667px) {
#footer ul {padding:0 15%;}
}
@media screen and (min-width:736px) {
#footer ul {padding:0 20%;}
}
@media screen and (min-width:768px) {
.pc {display:block;}
.sp {display:none;}
#header {padding-top:0; background: #fff url(../images/mainimg.jpg) no-repeat right 0;background-size: 59%;padding-bottom: 3em;}
#header h1 {padding: 3% 2% 2%;width: 50%;}
#header .box {max-width:450px;width:35%;margin: 0;padding: 0 3%;}
#header .box p {margin:1.5em auto;}
#header .box p.img02 {width:75%}
#header .box p.img03 {width:95%}
#header .kikan {max-width: inherit;margin: 0;width: 53%;padding: 0;position: absolute;bottom: 4em;left: 41%;}

#main .item .details {width:70%;float:left;}
#main .item .cart {width:200px;float:right;margin-top:0;}
#main .item .cart a {font-size:1.8em;}

.relation {margin-top:0;padding: 5%;}
.relation h2.headline {margin-bottom:.5em;}
.relation_in {width:47%;padding:0;}
.relation_in:first-child {float:left;border-bottom: none;}
.relation_in:last-child {float:right;}
.relation_in h2 {font-size:1.6em;}
.relation_in h2 span {display:block;}
.relation_in .box h3 {font-size:1.5em;}
.relation_in .box h3 span {display:block;}
.relation_in .cart {width:200px;margin:0 auto;}
.relation_in .cart a {font-size:1.8em;}

.relation .pc {display:none;}
.relation .sp {display:block;}

#footer ul {padding:0;}
#footer li:nth-child(3n):after {content:"｜";}
#footer .back {margin: 5em auto;}
}

@media screen and (min-width:1024px) {
#header .kikan {max-width: inherit;margin: 0;width: 50%;bottom: 3.6em;}
#main .item .details {width:60%;}
#main .item .cart {width:300px;}

.relation_in {width:100%;position:relative;}
.relation_in:first-child {float:none;}
.relation_in:last-child {float:none;}
.relation_in .jacket {float:left;width:30%;}
.relation_in .details_area {float:right;width:65%;}

.relation_in h2 {font-size:1.8em;}
.relation_in h2 span {display:inline;}
.relation_in .box h3 span {display:inline;}
.relation_in .tokuten { margin: 0 0 2em;}
.relation_in .tokuten img {width:300px;margin:0;}
.relation_in .track li {margin:.3em 0;}
.relation_in .cart {
    width: 100%;
    margin: 3em auto;
}
.relation_in .cart .text {margin-top:2em;}
.relation_in .cart .text p {margin-bottom:0;}
.relation_in:first-child {padding: 0 0 2%;border-bottom: 1px dotted #713d1b;margin-bottom:4%;}

.relation .pc {display:block;}
.relation .sp {display:none;}

#footer {padding: 5em 0;max-width: 1200px;margin: 0 auto;}
}

@media screen and (min-width:1280px) {
#header {max-width: 1200px;margin: 0 auto;background: #fff url(../images/mainimg.jpg) no-repeat right 0;background-size: 58%;padding-bottom:6em;}
#header .box {width:36%;}
#header .kikan {width: 55%;bottom:7.5em;left: 42%;}
#header .box p {margin:2em auto;}
#header .box p.img02 {width:65%}
#main {max-width: 1200px;margin: 0 auto;}
#main .item {padding: 6em 5% 8em;}
#main .item .details h2 , .relation h2.headline {font-size:2.2em;}
.relation_in h2 {font-size:2em;}
.relation_in .box h3 {font-size:1.6em;}
}

@media only screen
    and (min-device-width:320px)
    and (max-device-width:1024px){
#main .item .cart a:hover {opacity:1;}
#footer a:hover {opacity:1;}
}