/** 関連リンク **/
.JustleDetailLink{
width: 100%;
max-width:1300px;
margin: auto;
}
.JustleDetailLink ul{
list-style: none;
}

.JustleDetailLink h2{
font-size: 1.15rem;
border-bottom: 2px solid #555555;
padding: 10px 0;
margin: 10px 0;
}
.JustleDetailLink h3{
font-size: 1rem;
}
.JustleDetailExtLink{
width: fit-content;
color: #888888;
margin: 0 0 0 auto;
}
.JustleDetailExtLink > li{
display:flex ;
width: fit-content;
font-size: 0.9rem;
}
.JustleDetailExtLink span p{
font-size: 0.9rem;
}
.JustleDetailExtLink span{
font-size: 0.9rem;
margin: 5px 0 5px auto;
}
.JustleDetailExtLink a{
display: block;
position: relative;
width: fit-content;
color: #0068b7;
text-decoration: none;
font-size: 0.85rem;
padding: 0 5px;
margin: 5px 20px!important;
}
.JustleDetailExtLink a::before{
content:"【";
position: absolute;
right: 100%;
color: #888888;
}
.JustleDetailExtLink a::after{
content:"】";
position: absolute;
left: 100%;
color: #888888;
}


    .JustleDetailExtLink a:hover{
text-decoration: underline;
}

.JustleDetailExtLink li::before{
content:"メーカーサイト：";
margin: 5px 0 5px auto;
}

.JustleDetailCatLink{
display: flex;
margin: 15px 0;
}

.JustleDetailCatLink > li{
width: 50%;
}
.JustleDetailCatLink a{
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #0068b7;
background-color: #EEEEEE;
border:1px solid #DDDDDD;
border-radius: 5px;
padding: 8px 10px;
}
.JustleDetailCatLink a:hover{
text-decoration: underline;
opacity: 0.8;
}
.JustleDetailLinkForm,
.JustleDetailLinkList{
display: flex;
width: fit-content;
list-style: none;
margin: auto;
}

.JustleDetailLinkForm{
width: 200px;
text-align: left;
}

.JustleDetailLinkForm > li{
width: calc(100% / 3);
margin: 5px 0;
text-align: center;
}
.JustleDetailLinkForm > li > figure{
position: relative;
width: fit-content;
margin: auto;
}
.JustleDetailLinkForm figcaption{
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: fit-content;
font-size: 0.7rem;
text-align: center;
white-space: nowrap;
font-weight: bold;
margin: auto;
}


.JustleDetailLinkForm img{
width: 45px;
padding-bottom: 15px;
}
.JustleDetailLinkList > li{
min-width: 80px;
margin: 0 5px;
}
.JustleDetailLinkList > li:first-child{
min-width: 120px;

}
.JustleDetailLinkList a{
display: block;
width: fit-content;
font-size: 0.85rem;
font-weight: bold;
color: #F0F0F0;
text-decoration: none;
border:1px solid #DDDDDD;
border-radius: 5px;
padding: 5px 10px;
margin: auto;
}
.JustleDetailLinkList a:hover{
opacity: 0.8;
}
table.JustleDetailProdLink{
width: 100%;

border-collapse: collapse;
text-align: center;
border-top:2px solid #DDDDDD;
border-bottom:2px solid #DDDDDD;
margin: auto;
}
table.JustleDetailProdLink thead th{
background-color: #EEEEEE;
border-bottom:1px solid #DDDDDD;
padding: 8px 10px;
}
.JustleDetailProdLink tr th{
text-align: center;
}
.JustleDetailProdLink tr td{
min-width: 100px;
}

.JustleDetailProdLink tr:has(> td:nth-child(3):last-child) td:first-child {
width: calc((100% - 550px) / 2);
}

.JustleDetailProdLink tr:has(> td:nth-child(4):last-child) td:nth-child(-n + 2){
width: calc((100% - 550px) / 3);
}

.JustleDetailProdLink tr:has(> td:nth-child(5):last-child) td:nth-child(-n + 3){
width: calc((100% - 550px) / 4);
}

.JustleDetailProdLink tr:has(> td:nth-child(6):last-child) td:nth-child(-n + 4){
width: calc((100% - 550px) / 5);
}

.JustleDetailProdLink tr th:nth-last-child(2),
.JustleDetailProdLink tr td:nth-last-child(2){
width: 20%;
max-width: 250px;
}

.JustleDetailProdLink th:last-child,
.JustleDetailProdLink td:last-child{
white-space: nowrap;
width: 30%;
max-width: 300px;
}

.JustleDetailProdLink tr:not(:last-child) th,
.JustleDetailProdLink tr:not(:last-child) td{
border-bottom:1px solid #CCCCCC;
}

/** 関連リンク **/