@charset "utf-8";
/*------基本CSS（PC用記述記載）------*/
#slim_code{
width:1000px;
margin: 0 auto;
color: #000;
}
#slim_code img{
width: 100%;
height: auto;
}
#slim_code img.spBnr{
display: none;
}
#slim_code a {
font-size: 14px;
text-decoration: none;
display: block;
color: #000;
}
#slim_code a:hover{
text-decoration:none;
}
#slim_code .title{
margin-bottom: 20px;
}
#slim_code .navi_cont .navi{
display: flex;
width: 100%;
margin-bottom: 30px;
background-color: #fff;
justify-content: space-around;
}
#slim_code .navi_cont .navi li{
text-align: center;
width: 22%;
border: 1px solid #000;
position: relative;
background-color: #fff;
}
#slim_code .navi_cont .navi li:hover {
background-color: #f8f8f8;
}
#slim_code .navi_cont .navi li a {
padding: 8% 0;
}
#slim_code .navi_cont .navi li::after{
content: '';
width: 5px;
height: 5px;
border: 0px;
border-top: solid 1px #000;
border-right: solid 1px #000;
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
position: absolute;
left: 50%;
bottom: 13%;
}
#slim_code h2{
font-size: 36px;
text-align: center;
background-color: #eaeaea;
padding: 15px 0;
margin: 0;
font-family: 'Noto Serif JP', serif!important;
line-height: 1;
font-weight: normal;
}
#slim_code .troubleMain {
margin-bottom: 70px;
}
#slim_code .recoBox {
width: 100%;
overflow: hidden;
background-color: #f0f0f0;
}
#slim_code .recoTitle{
text-align: center;
font-size: 50px;
margin-bottom: 30px;
line-height: 1;
padding-top: 30px;
font-family: 'Noto Serif JP', serif;
}
#slim_code .recoBox .cont_wrap {
margin: 0px 100px 20px;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
#slim_code .recoBox img{
width: 380px;
height: 380px;
}
#slim_code .recoBox .btn {
text-align: center;
background-color: #000;
width: 70%;
margin: auto auto 30px;
border-radius: 52px;
position: relative;
clear: both;
}
#slim_code .recoBox .btn a {
color: #fff!important;
font-size: 15px;
display: block;
padding: 15px 20px;
box-sizing: border-box;
line-height: 1;
}
#slim_code .animationImg,#slim_code .animationImg2 {
	height: 380px;
    position: relative;
}
#slim_code .animationImg img {
    top: 0;
    left: 0;
    position: absolute;
    animation: photo 9s infinite;
    opacity: 0;
}
#slim_code .animationImg:hover img {
    animation-play-state: paused;
}
@keyframes photo{
	0%{ opacity: 0;}
	12.5%{ opacity: 1;}
	37.5%{ opacity: 1;}
	50%{ opacity: 0;}
}
#slim_code .animationImg img:nth-of-type(1){
    animation-delay: 0s;
}
#slim_code .animationImg img:nth-of-type(2){
    animation-delay: 3s;
}
#slim_code .animationImg img:nth-of-type(3){
    animation-delay: 6s;
}

#slim_code .animationImg2 img {
    top: 0;
    left: 0;
    position: absolute;
    animation: photo2 6s infinite;
    opacity: 0;
}
#slim_code .animationImg2:hover img {
    animation-play-state: paused;
}
@keyframes photo2{
	0%{ opacity: 0;}
	50%{ opacity: 1;}
	100%{ opacity: 0;}
}
#slim_code .animationImg2 img:nth-of-type(1){
    animation-delay: 0s;
}
#slim_code .animationImg2 img:nth-of-type(2){
    animation-delay: 3s;
}

#slim_code .arrow {
background: linear-gradient(to bottom left, #f0f0f0 50%, transparent 50%) top left/ 50% 100% no-repeat, linear-gradient(to bottom right, #f0f0f0 50%, transparent 50%) top right / 50% 100% no-repeat;
height: 70px;
}
#slim_code .itemBox {
width: 380px;
font-size: 15px;
display: flex;
flex-direction: column;
}
#slim_code .itemBox .point {
background-color: #fff;
padding: 30px;
border-radius: 10px;
margin-bottom: 55px;
}
#slim_code .itemBox .wearText {
line-height: 1.5;
}
#slim_code .itemBox .wear {
margin-bottom: 15px;
line-height: 1;
font-size: 25px;
text-align: center;
font-family: 'Noto Serif JP', serif;
}
#slim_code .code_box {
display: flex;
justify-content: center;
margin-top: 10px;
}
#slim_code .code_box .code_style .code_title {
font-size: 38px;
font-family: 'Noto Serif JP', serif;
}
#slim_code .recoBox .boxlink_sold{
width: 390px;
margin: 0 auto;
}
#slim_code .boxlink_sold .model,
#slim_code .boxlink_sold .itemBox{
display: none;
}
#slim_code .code_box .inner,
#slim_code .code_box .boxlink_sold {
width: 280px;
margin: 0 10px;
}
#slim_code .boxlink_sold .click{
display: none;
}

#slim_code .code_box .inner .itembox{
margin-top:10px;
}
#slim_code .itemname,
#slim_code .itemsize{
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.8;
margin: 0;
}
#slim_code .code_box .inner .price{
font-size: 14px;
}
#slim_code .code_box .click{
background-color: #333333;
width: 80%;
color: #fff;
padding: 10px 0;
margin: 15px auto 0;
border-radius: 15px;
text-align: center;
}
#slim_code .code_box .lineup {
text-align: center;
font-weight: bold;
font-size: 19px;
}
#slim_code .trouble_type{
margin-bottom: 70px;
padding-bottom: 40px;
border-bottom: 1px dashed #999;
}
#slim_code .trouble_type:last-of-type {
border: 0;
padding: 0;
}
#slim_code .trouble .type_title{
font-size: 36px;
line-height: 1;
text-align: center;
margin-bottom: 20px;
font-family: 'Noto Serif JP', serif;
}
#slim_code .trouble .type_title_1{
font-size: 36px;
line-height: 1;
text-align: center;
margin: 70px 0 20px 0;
font-family: 'Noto Serif JP', serif;
}
#slim_code .trouble .type_title .num {
margin-right: 10px;
border-right: 1px solid #000;
padding-right: 15px;
display: inline-block;
}
#slim_code .trouble .type_text{
text-align: center;
font-size: 15px;
margin-bottom: 30px;
line-height: 1.7;
}
#slim_code .trouble .troubleSub .itemname {
overflow: hidden;
white-space: nowrap;
font-size: 14px;
display: block;
text-overflow: ellipsis;
margin-top: 5px;
}
#slim_code .trouble .troubleSub .DisplayItem_size {
font-size: 14px;
display: block;
margin: 0 auto;
}
#slim_code .trouble .troubleSub .price {
font-size: 16px;
width: 80%;
}

#slim_code .trouble .troubleSub .moreTitle{
text-align: center;
margin-bottom: 20px;
font-size: 24px;
line-height: 1;
font-family: 'Noto Serif JP', serif;
}
#slim_code .trouble .troubleSub ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
margin: 0 20px;
}
#slim_code .trouble .troubleSub ul li {
width: 312px;
margin-bottom: 20px;
position: relative
}
#slim_code .trouble .trouble_type .more {
text-align: center;
width: 60%;
margin: 20px auto 30px;
border-radius: 70px;
position: relative;
background-color: #000;
}

#slim_code .trouble .trouble_type  .more a{
color: #fff!important;
font-size: 18px;
font-weight: 400;
display: block;
padding: 3% 5%;
box-sizing: border-box;
}
#slim_code .more.bl{
background-color: #f0f0f0!important;
}
#slim_code .btnBox .more.bl a {
color: #000!important;
}
#slim_code .more a:after{
content: '';
width: 8px;
height: 8px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
transform: rotate(45deg);
position: absolute;
top: 45%;
right: 30px;
}
#slim_code .more.bl a:after{
border-top: solid 1px #000;
border-right: solid 1px #000;
}
#slim_code .recoWrapUL{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 20px 0 70px;
}
#slim_code .recoWrapUL li {
position: relative;
width: 324px;
}

#slim_code .recoWrapUL .boxlink:hover,
#slim_code .trouble .trouble_type .more:hover,
#slim_code .code_box .click:hover{
opacity: 0.75;
}
#slim_code .recoWrapUL .itembox{
padding: 5px 5px 15px;
}

#slim_code .recoWrapUL li:before {
display: block;
width:30px;
height:30px;
position:absolute;
top:5px; left:5px;
content: "";
border-radius: 50%;
background-color:#fff;
border: #d9d9d9 solid 1px;
box-sizing:border-box;
display: flex;
justify-content: center;
align-items:center;
line-height: 10px;
z-index:1;
}
#slim_code .recoWrapUL #seq_0:before {
content: "1";
color:#fff;
background-color:#e5c800;
border:0;
}
#slim_code .recoWrapUL #seq_1:before {
content: "2";
color:#fff;
background-color:#afafaf;
border:0;
}
#slim_code .recoWrapUL #seq_2:before {
content: "3";
color:#fff;
background-color:#b89762;
border:0;
}
#slim_code .recoWrapUL #seq_3:before {
content: "4";
}

#slim_code .recoWrapUL #seq_4:before {
content: "5";
}

#slim_code .recoWrapUL #seq_5:before {
content: "6";
}

#slim_code .recoWrapUL #seq_6:before {
content: "7";
}

#slim_code .recoWrapUL #seq_7:before {
content: "8";
}

#slim_code .recoWrapUL #seq_8:before {
content: "9";
}
#slim_code .recoWrapUL #seq_9:before {
content: "10";
}
#slim_code .recoWrapUL .price {
font-size: 14px;
}
#slim_code .category{
display: flex;
flex-wrap: wrap;
margin: 20px 0 70px;
justify-content: initial;
}
#slim_code .category li{
width: 23%;
position: relative;
border: 1px solid #eaeaea;
box-sizing: border-box;
margin: 0 1% 1% 1%;
padding: 0.5% 2%;
display: flex;
align-items: center;
}
#slim_code .category_search{
    display: flex;
}
#slim_code .category_search img{
    width: 20%!important;
}
#slim_code .category_search a{
    margin: 7% 0 0 5%;
}
#slim_code .category li:hover{
background-color: #eaeaea;
}
#slim_code .category li a{
width: 100%;
box-sizing: border-box;
display: inline-block;
font-weight: normal;
}
#slim_code .category li a::after {
content: "";
height: 7px;
width: 7px;
position: absolute;
top: calc(50% - 3px);
right: 10px;
border-top: 1px solid #b3b3b3;
border-right: 1px solid #b3b3b3;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#slim_code .otherWrap {
margin-bottom: 60px;
}
#slim_code .codeText {
margin-top: 5px;
line-height: 1.5;
font-size: 12px;
}
#slim_code .concept p{
margin: 20px 150px 0;
line-height: 1.7;
}
#slim_code .concept p span {
text-align: right;
display: block;
}
#slim_code .saleprice{
color: #fb0000;
}
#slim_code .price_down {
line-height: 1.3;
color: #fb0000;
}

#slim_code .itembox .star img{
width: 13px;
}
#slim_code .star{
    align-items: unset!important;
}

/*------横幅が520px以下CSS（SP用記述記載）------*/
@media screen and (max-width: 520px) {

#slim_code{
max-width: 750px!important;
width: 100%;
}
#slim_code .recoBox img{
    width: 100%!important;
	height: auto;
}
#slim_code a{
color: #000;
text-decoration: none;
}
#slim_code .pcBnr{
display: none;
}
#slim_code img.spBnr{
width: 100%;
height: auto;
margin-bottom: 5%;
}
#slim_code .navi_cont {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 11;
}
#slim_code .navi_cont .navi{
margin-bottom: 8%;
}
#slim_code .navi_cont .navi li{
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
#slim_code .navi_cont .navi li a {
display: block;
padding: 20% 0;
}
#slim_code .navi_cont .navi li::after{
bottom: 10%;
}
#slim_code h2{
font-size: 22px;
color: #262626;
text-align: center;
clear: both;
display: block;
}
#slim_code .troubleMain {
margin-bottom: 15%;
}
#slim_code .recoBox .mainImg,
#slim_code .code_box .mainImg,
#slim_code .rankArea .mainImg{
width: 100%;
height: auto;
}
#slim_code .recoTitle{
font-size: 40px;
margin: 5% 0;
}
#slim_code .animationImg, #slim_code .animationImg2 {
    width: 100%;
    height: 345px;
    overflow: hidden;
    margin: 0 150px 0 auto;
}
#slim_code .recoBox .cont_wrap {
margin: 0 4% 5%;
display: block;
}

#slim_code .itemBox {
width: 100%;
font-size: 12px;
}
#slim_code .itemBox .point {
padding: 5%;
margin-bottom: 7%;
}
#slim_code .itemBox .wearText {
font-size: 15px;
}
#slim_code .itemBox .wear {
margin-bottom: 3%;
color: #333;
font-size: 23px;
}
#slim_code .recoBox .btn {
margin: auto auto 5%;
}

#slim_code .recoBox .btn a {
padding: 4% 12%;
}
#slim_code .recoBox .btn a:after {
content: '';
width: 6px;
height: 6px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
transform: rotate(45deg);
position: absolute;
top: 40%;
right: 14px;
}
#slim_code .trouble{
padding-top: 10%;
}

#slim_code .trouble_type{
margin-bottom: 15%;
padding-bottom: 15%;
}
#slim_code .trouble .type_title,
#slim_code .trouble .type_title_1{
font-size: 29px;
color: #000000;
margin-bottom: 5%;
}
#slim_code .trouble .type_title .num,
#slim_code .trouble .type_title_1 .num {
margin-right: 2%;
padding-right: 3%;
}
#slim_code .trouble .type_text{
margin-bottom:10%;
}
#slim_code .trouble .troubleSub a img {
width: 98%;
display: block;
margin: 0 auto;
}

#slim_code .trouble .troubleSub .itemname {
font-size: 11px;
display: block;
margin-top: 5px;
}
#slim_code .itemsize{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
}
#slim_code .trouble .troubleSub .DisplayItem_size {
color: #000000;
font-size: 12px;
display: block;
margin: 0 auto;
}
#slim_code .trouble .troubleSub .DisplayItem_price {
font-size: 14px;
width: 80%;
}
#slim_code .trouble .troubleSub .DisplayItem_tax {
font-size: 10px;
}
#slim_code .trouble .troubleSub .DisplayItem_btn {
text-align: center;
padding: 2%;
border: 1px solid #333;
width: 80%;
margin-top: 1%;
position: relative;
background-color: #fff;
box-sizing: border-box;
}
#slim_code .trouble .troubleSub .DisplayItem_btn::after {
content: '';
width: 8px;
height: 8px;
border-top: solid 1px #000000;
border-right: solid 1px #000000;
transform: rotate(45deg);
position: absolute;
top: 40%;
right: 13px;
}
#slim_code .trouble .troubleSub .moreTitle{
text-align: center;
margin-bottom: 5%;
font-size: 20px;
font-family: 'Noto Serif JP', serif;
}
#slim_code .trouble .troubleSub ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
margin: 0;
}
#slim_code .trouble .troubleSub ul li {
width: 32.5%;
margin-bottom: 5%;
}
#slim_code .trouble .troubleSub ul li .DisplayItem_name,
#slim_code .trouble .troubleSub ul li .DisplayItem_size,
#slim_code .trouble .troubleSub ul li .DisplayItem_price,
#slim_code .trouble .troubleSub ul li a img{
width: 100%;
height: 100%;
}
#slim_code .code_box {
overflow: hidden;
margin-top: 5%;
display: block;
}
#slim_code .code_box .inner {
width: 44%;
float: left;
margin: 0 3% 2%;
padding: 1% 2%;
position: relative;
background-color: #fff;
border-radius: 10px;
box-sizing: border-box;
}
#slim_code .code_box .inner .i_photo{
position: relative;
display: block;
}
#slim_code .code_box .inner .itembox{
margin-top:5px;
}
#slim_code .code_box .inner .itemname,
#slim_code .recoWrapUL .itemname{
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
line-height: 15px;
}
#slim_code .code_box .inner .price{
font-size: 14px;
}
#slim_code .code_box .click{
-webkit-border-radius: 45px;
background-color: #333333;
width: 40px;
height: 40px;
border: 0;
color: white;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: 108px;
right: 10px;
top: 100px;
}
#slim_code .more {
text-align: center;
background-color: #000;
width: 85%!important;
margin: 5% auto 0;
border-radius: 50px;
position: relative;
clear: both;
}
#slim_code .more a{
color: #fff;
font-size: 15px;
font-weight: 400;
display: block;
padding: 5% 12%;
box-sizing: border-box;
}

#slim_code .more a::after {
content: '';
width: 8px;
height: 8px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
transform: rotate(45deg);
position: absolute;
top: 45%;
right: 30px;
}
#slim_code .more.bl{
background-color: #f0f0f0;
}
#slim_code .more.bl a{
color: #000;
}
#slim_code .more.bl a:after{
border-top: solid 1px #000;
border-right: solid 1px #000;
}
#slim_code .recoWrapUL {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 5% 1% 10%;
}
#slim_code .recoWrapUL li{
width: 49.5%;
position: relative;
font-size: 11px;
letter-spacing: normal;
margin-bottom: 5%;
}
#slim_code .recoWrapUL .itembox{
padding: 5px 5px 15px;
}
#slim_code .category{
margin: 0 0 10% 0!important;
}
#slim_code .category li a{
width: 100%;
box-sizing: border-box;
display: inline-block;
}
#slim_code .category li:nth-of-type(even) {
border-right: 0;
}
#slim_code .otherWrap {
margin-bottom: 10%;
}
#slim_code .codeText {
margin: 1% 1% 0;
line-height: 1.5;
}

#slim_code .concept p{
margin: 5% 5% 0;
}

#slim_code .code_box .clear{
clear: both;
}
#slim_code .code_box .boxlink_sold{
width: 44%;
float: left;
margin: 0 3% 2%;
padding: 1% 2%;
position: relative;
background-color: #fff;
border-radius: 10px;
box-sizing: border-box;
}
#slim_code .recoBox .boxlink_sold {
    margin: 0 4% 5%;
    width: 92%;
}
#slim_code .code_box .boxlink_sold img{
width: 100%;
height: auto;
}
#slim_code .boxlink_sold .click{
display: none;
}
#slim_code .recoBox .boxlink_sold .itemBox{
display: none;
}
#slim_code .salepricebox .price,
#slim_code .price_down{
color: #fb0000;
}
#slim_code .trouble .troubleSub .price{
font-size: 14px;
}
#slim_code .category li{
    width: 50%;
    border-bottom: 1px dotted #eaeaea;
    border-right: 1px dotted #eaeaea;
    margin: 0;
}
}