/*上書き*/ #maincontents {padding: 0 0 50px 0;background: url("../images/bg2.png") repeat-y;background-size: 100% auto;} @media only screen and (max-width: 768px) {#maincontents {padding: 0 0 30px 0;}} .cwrap01 {background: #fff;margin-bottom: 70px;} .cwrap01 #productwrap {padding: 7% 10% 1% 10%;} /**/ .ntwrap ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-ms-flex-wrap: wrap;flex-wrap: wrap;} .ntwrap li{-ms-flex-preferred-size: 27%;flex-basis: 27%;margin-bottom: 8%;text-align: center;} .ntwrap li a{position:relative;display: block;color: #333;letter-spacing: 0.08em} .limage {display: block;width: 100%;margin: 0 auto 14px auto;background: url("../index/pbg.png") no-repeat ;background-size: cover;} .ltext {padding: 0 0 2px 30px;background: url("../images/p.png") no-repeat;background-position: 0 2px;background-size: 20px;white-space: nowrap;} .new {position:absolute;top: 0;left: 0;} /*#information*/ #information {padding: 40px 30px 100px 30px;} #information .cwrap01 {background: none} #information .wrapper {margin: 0 8%;} #information ul {border-top: 1px dotted #ccc;} #information ul li{display:-webkit-box;display:-ms-flexbox;display:flex;padding: 20px 10px;line-height: 160%;border-bottom: 1px dotted #ccc;} #information .date{-ms-flex-preferred-size: 75px;flex-basis: 75px;font-size: 12px;} #information .ctgry {-ms-flex-preferred-size: 65px;flex-basis: 65px;margin-right: 20px;text-align: center;color:#c70075;border: 1px solid #c70075;font-size: 12px;height: 18px;line-height: 18px;} #information .cmnt{-ms-flex-preferred-size: calc(100% - 160px);flex-basis: calc(100% - 160px);} /*#ranking*/ #ranking {max-width: 900px;margin: 0 auto;padding: 18px;background:#e0c4dd;text-align: center;box-sizing: border-box;} #ranking .categorytitle{color: #fff;margin: 0 0 18px 0;} #ranking .wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;margin: 0 auto;} #ranking a{text-decoration: none;font-size: 70%;} #ranking .itemname {display: block;border: none;height:auto;margin: 0;padding: 0;line-height: 170%} #ranking .price {display: block;border: none;padding: 0;line-height: 170%;} /*1*/ .rankingblockleft {-ms-flex-preferred-size: 345px;flex-basis: 345px;margin-right: 2.4%;} /*2.3.4.5block*/ .rankingblockright {-ms-flex-preferred-size: 505px;flex-basis: 505px;} /*2*/ .rankingblock2 a {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;} .rankingblock2 p {margin: 0;} /*3.4.5*/ .rankingblock{-ms-flex-preferred-size: 162px;flex-basis: 162px;margin-top: 4.8%;margin-right: 4.4%;} /*3.4.5block*/ .rankingblockrightbottom {display:-webkit-box;display:-ms-flexbox;display:flex;background:#e0c4dd;} .rankingblockrightbottom .rankingblock:last-child {margin-right: 0} /*ランキングの背景を白に*/ .rankingblockleft, .rankingblock, .rankingblock2 {position: relative;background: #fff;text-align: left} /*ランキングナンバー*/ .rankingblockleft .number, .rankingblock .number, .rankingblock2 .number {position: absolute;top: 0;left: 0;width: 74px;z-index: 3;} .rankingblock .number {width: 60px;} /*各ブロックwrapper*/ .rbinner {display: block;padding: 15px;} #ranking .r2 .rbinner {padding: 30px;} /*各ブロック商品写真*/ #ranking .itemphoto {display: block;} #ranking .r1 {text-align: center} #ranking .r1 .itemphoto{margin: 0 auto;padding: 72px 0 60px 0;width: 98px;} #ranking .r2 .itemphoto{width: 118px;margin-left: 110px;padding: 5px 0 1px 0;} #ranking .r3 .itemphoto, #ranking .r4 .itemphoto, #ranking .r5 .itemphoto{width: 118px;padding: 19px 0;} @media screen and (max-width:767px) { .souryou_add { margin-top: 100px !important; } } @media screen and (max-width: 959px) and (min-width: 768px) { .souryou_add { margin-top: 23px !important; } } @media only screen and (max-width: 960px) { #maincontents {margin-top: 0px;} /*ランキングナンバー重なり対策で追記*/ .rankingblockleft .number, .rankingblock .number, .rankingblock2 .number{z-index: 0;} } @media only screen and (max-width: 900px) { #ranking .wrapper,.rankingblockrightbottom,.rankingblock2 a {display:block;} #ranking .wrapper {overflow: hidden;} .rankingblockleft {margin-right:0;} .rankingblockright,.rankingblockrightbottom {display:inline;} .rankingblockleft, .rankingblock, .rankingblock2 {background: none} .rankingblock2 {float: left;width: 48%;} .rankingblock{float: left;width: 48%;margin-top: 0;margin-right: 0;} .rankingblock2.r2,.rankingblock.r4{margin-right: 3%;} .rankingblock.r3,.rankingblock.r5{float: right} .rankingblockleft .number, .rankingblock .number, .rankingblock2 .number {width: 50px;} #ranking p {text-align: center} .rankingblockleft, .rankingblock, .rankingblock2 {margin: 0;padding: 0;} .rbinner a{display:block;} .rbinner {text-align: center} #ranking .r1 .itemphoto{width: 100%;padding: 0;text-align: center}/*1222 - width: 246px;*/ #ranking .r1 .itemphoto img{width: 98px;height: auto;margin-bottom: 5px;}/*1222 - width: 246px;*/ #ranking .r2 .itemphoto{margin-left: 0;padding: 0;} #ranking .r1 .rbinner, #ranking .r2 .rbinner, #ranking .r3 .rbinner, #ranking .r4 .rbinner, #ranking .r5 .rbinner{background: #fff;} #ranking .r1 .rbinner{margin-bottom: 20px;} #ranking .r2 .rbinner, #ranking .r3 .rbinner, #ranking .r4 .rbinner, #ranking .r5 .rbinner{height: 200px;margin-bottom: 20px;padding: 20px 0;} #ranking .r1 .itemphoto, #ranking .r2 .itemphoto, #ranking .r3 .itemphoto, #ranking .r4 .itemphoto, #ranking .r5 .itemphoto{margin:0 auto;padding: 0;} #ranking .r2 .itemphoto, #ranking .r3 .itemphoto, #ranking .r4 .itemphoto, #ranking .r5 .itemphoto{height: 150px;} #ranking .r3 .itemphoto img{margin-top:0;} } @media only screen and (max-width: 480px) { /*ランキング画像サイズ設定*/ #ranking .r1 .itemphoto img{width: 44px;height: auto;margin-top: 20px;} #ranking .r2 .itemphoto img{width: 80px;height: auto;margin-top: 15px;} #ranking .r3 .itemphoto img{width: 80px;height: auto;margin-top: 15px;} #ranking .r4 .itemphoto img{width: 80px;height: auto;margin-top: 15px;} #ranking .r5 .itemphoto img{width: 80px;height: auto;margin-top: 15px;} } @media only screen and (max-width: 1100px) { #information .cwrap01 {margin: 0 3%;padding: 0;font-size: 80%;} #information {padding: 30px 0;} #information .wrapper {margin: 0} } @media only screen and (max-width: 960px) { .cwrap01 #productwrap {padding: 12% 3%;} } @media only screen and (max-width: 950px) { .ntwrap li{-ms-flex-preferred-size: 30%;flex-basis: 30%;} .ltext {white-space: wrap} } @media only screen and (max-width: 768px) { .cwrap01 {background: #fff;margin-bottom: 40px;} .limage {margin: 0 auto 4px auto;} .ltext {background-position: 0 7px;background-size: 14px;padding: 5px 0 5px 19px;font-size: 12px} #information ul li{-ms-flex-wrap: wrap;flex-wrap: wrap;} #information .cmnt{-ms-flex-preferred-size: 100%;flex-basis: 100%;} } @media only screen and (max-width: 700px) { .ntwrap li{-ms-flex-preferred-size: 40%;flex-basis: 40%;margin:0 0 5% 6%;} .ntwrap li:nth-child(2n){margin:0 6% 5% 0} .ltext {font-size: 10px} } @media only screen and (max-width: 375px) { .new {width: 40px;} } /*360px以上でお願いしているのにきいてもらえないので追記*/ @media only screen and (max-width: 320px) { .ntwrap li{-ms-flex-preferred-size: 46%;flex-basis: 46%;margin:0 0 5% 0;} .ntwrap li:nth-child(2n){margin:0 0 5% 0} } @media only screen and (max-width: 960px) { #language {display: none} } @media only screen and (max-width: 1100px) { #product {margin-top: -30px;padding-top: 30px;} } @media only screen and (max-width: 960px) { #product {margin-top: -100px;padding-top: 100px;} }