html,
body {
font-size: 15px;
}
@media screen and (max-width: 1100px) {
html,
body {
font-size: 13px;
}
}

.TESTMESSAGE {
display: none;
}

.JustleSearchPage02 {
width: 100%;
max-width: 100%;
line-height: 1.5em;
}
.JustleSearchPage02 h2 {
font-size: 1rem;
margin-bottom: 5px;
}

.JustleSearchPage02 h3 {
font-size: 1rem;
border-bottom: 1px solid #555555;
margin-top: 5px;
position: relative;
}
.JustleSearchPage02 > h3:nth-of-type(n + 2) {
margin-top: 40px;
}
.JustleSearchPage02 .JustleItemInfo {
font-size: 0.9rem;
}
.JustleSearchPage02 .JustleItemInfo * {
margin-bottom: 0;
}
.JustleSearchPage02 .JustleItemInfo > ul {
margin: 5px 0;
}
.JustleSearchPage02 .JustleItemInfo > p {
display: block;
width: calc(100% - 20px);
font-size: 0.9rem;
line-height: 1.5em;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
background-color: #eeeeee;
padding: 3px 5px;
margin: 0 10px;
}

.JustleSearchPage02 .JustleItemInfo > p:first-of-type {
border-top: 1px solid #cccccc;
}
.JustleSearchPage02 .JustleItemInfo > p:last-of-type {
border-bottom: 1px solid #cccccc;
}

.JustleSearchDiv {
position: relative;
margin-bottom: 20px;
}
div.JustleSearchDiv:not(:last-of-type)::before {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
display: block;
height: 2px;
background-color: #dddddd;
margin-top: 9px;
margin-bottom: 9px;
}

.JustleSearchDiv > a {
display: flex;
flex-wrap: wrap;
align-items: top;
}
.JustleSearchDiv > a:hover {
text-decoration: none;
}
.JustleSearchDiv > a:hover .JustleSearchDetails > h2{
text-decoration: underline;
color: #0068b7;
}

.JustleSearchImage {
width: 15%;
min-width: 200px;
max-width: 100%;
padding: 5px 10px;
}

.JustleSearchImage > span {
position: relative;
display: block;
width: fit-content;
height: fit-content;
}
.JustleSearchImage > span::after {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
width: 60%;
color: #f0f0f0;
font-weight: bold;
text-align: center;
padding: 5px 10px;
margin: auto;
}
span.JustleImgOdc::after {
content: 'オーダーカット';
background-color: #0068b7;
}
span.JustleImgA4::after {
content: 'A4サイズ';
background-color: #b63334;
}
span.JustleImg100m::after {
content: '100M巻';
background-color: #ed9e31;
}
.JustleSearchDetails {
flex-grow: 1;
width: 100%;
max-width: calc(100% - 200px);
padding: 5px 10px;
}


@media screen and (max-width: 1280px) {
.JustleSearchImage {
width: 100%;
max-width: 200px;
}
}
@media screen and (max-width: 600px) {
.JustleSearchDiv > a {
display: block;
}

.JustleSearchImage > span {
width: 100%;
max-width: 300px;
height: fit-content;
max-height: 150px;
overflow: hidden;
margin: auto;
}
.JustleSearchImage {
width: 100%;
max-width: 100%;
}

.JustleSearchImage img{
object-fit: cover;
object-position: 0 -85px;

}
.JustleSearchDetails{
max-width: 100%;
}

}

.SearchListPage {
display: flex;
list-style: none;
width: fit-content;
margin: 10px auto;
font-size: 1.15rem;
}
.SearchListPage > li > a {
display: block;
padding: 8px 15px;
border: 1px solid #555555;
text-decoration: none;
}
.SearchListPage > li:not(:last-child) {
margin-right: 5px;
}
.SearchListPage .SearchSelected {
background-color: #dddddd;
font-weight: bold;
}
.JustleSearchKeyword {
width: 100%;
}
.JustleSearchKeyword > div {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
max-width: 900px;
margin: 10px auto;
}

.JustleSearchKeyword > div > p {
width: 140px;
font-size: 0.9rem;
white-space: nowrap;
text-align: left;
padding: 0 5px;
}
@media screen and (max-width: 1100px) {
.JustleSearchKeyword > div > p {
width: 100%;
}
}
.JustleSearchKeyword > div > form {
display: flex;
flex-grow: 1;
}
.JustleSearchKeyword > div > form > label {
width: calc(100% - 80px);
}
.JustleSearchKeyword > div > form input::placeholder {
font-size: 0.8rem;
vertical-align: middle;
}

.JustleSearchKeyword input:first-child {
width: 100%;
font-size: 1rem;
border: 1px solid #aaaaaa;
border-radius: 5px 0 0 5px;
background-color: #ffffff;
padding: 5px;
}
.JustleSearchKeyword button {
display: inline-block;
white-space: nowrap;
width: 80px;
font-size: 0.9em;
font-weight: bold;
border: 1px solid #AAAAAA;
border-radius: 0 5px 5px 0;
color: #F0F0F0;
background-color: #AAAAAA;
border-left:none;
padding: 5px 15px;
cursor: pointer;
}

.JustleSearchRadioLabel {
display: block;
position: relative;
width: 100%;
height: 2.5rem;
}
.JustleSearchRadioLabel::before {
content: '';
display: block;
position: absolute;
top: 60%;
right: calc(50% + 70px);
width: 8px;
height: 8px;
z-index: 15;
transform: rotate(135deg);
margin: auto;
border-top: 2px solid #f0f0f0;
border-right: 2px solid #f0f0f0;
}

.JustleSearchRadioLabel::after {
content: '絞り込み検索を開く';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 10;
width: 140px;
text-align: center;
background-color: #0068b7;
color: #f0f0f0;
margin: 10px auto;
padding: 7px 15px;
padding-left: 30px;
}
.JustleSearchRadio {
position: relative;
overflow: hidden;
height: 0px;
}
.JustleSearchRadio::before {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: -webkit-linear-gradient(
top,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0.9) 50%,
#fff 100%
);
background: linear-gradient(
top,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0.9) 50%,
#fff 100%
);
content: '';
}
.JustleSearchRadioCheck {
display: none;
}
.JustleSearchRadioCheck:checked ~ .JustleSearchRadioLabel {
height: 0;
}
.JustleSearchRadioCheck:checked ~ .JustleSearchRadioLabel::before {
display: none;
}

.JustleSearchRadioCheck:checked ~ .JustleSearchRadioLabel::after {
content: '- 絞り込み検索を非表示';
width: fit-content;
right: 20px;
left: auto;
top: auto;
bottom: 0;
background-color: transparent;
color: #555555;
padding: 0px;
margin: 0;
}

.JustleSearchRadioCheck:checked ~ .JustleSearchRadio {
height: auto;
overflow: visible;
}
.JustleSearchRadioCheck:checked ~ .JustleSearchRadio::before {
display: none;
}

.JustleSearchRadio > h3 {
font-size: 1.2rem;
border-bottom: 1px solid #555555;
margin: 5px 0;
position: relative;
}

.JustleSearchRadio > form {
display: flex;
flex-wrap: wrap;
}

.JustleSearchRadio > form > p {
width: 100%;
padding: 3px;
font-size: 0.9rem;
font-weight: bold;
text-align: center;
border-top: 1px solid #555555;
border-bottom: 1px solid #555555;
background-color: #eeeeee;
color: #555555;
margin: 5px 0;
margin-top: 10px;
}

.JustleSearchRadioA,
.JustleSearchRadioB {
display: flex;
position: relative;
flex-wrap: wrap;
width: 100%;
}

.JustleSearchRadioA > span,
.JustleSearchRadioB > span {
position: absolute;
bottom: calc(100% + 8px);
right: 20px;
font-size: 0.8rem;
padding: 0;
margin: 0;
}

.JustleSearchRadioA input,
.JustleSearchRadioB input {
display: none;
}
.JustleSearchRadioA label,
.JustleSearchRadioB label {
display: block;
width: 100%;
padding: 3px 5px;
}

.JustleSearchRadioA > p,
.JustleSearchRadioB > p {
font-size: 0.9rem;
width: calc(100% / 3 - 10px);
font-weight: bold;
border: 1px solid #555555;
margin: 2px 5px;
}
@media screen and (max-width: 1100px) {
.JustleSearchRadioA > p {
width: calc(100% / 2 - 10px);
}
}
@media screen and (max-width: 600px) {
.JustleSearchRadioA > p {
width: calc(100% / 1 - 10px);
}
}

.JustleSearchRadioA label:hover,
.JustleSearchRadioB label:hover {
text-decoration: underline;
color: #0068b7;
cursor: pointer;
}
.JustleSearchRadioA label:has(input:checked),
.JustleSearchRadioB label:has(input:checked) {
background: #0068b7;
color: #f0f0f0;
}

.SearchNoMatch {
width: 90%;
text-align: center;
background-color: #eeeeee;
padding: 15px;
margin: 10px auto;
}
.SearchNoMatchIDCD {
width: 90%;
text-align: center;
background-color: #ffffff;
padding: 15px;
margin: 10px auto;
}
.SearchNoMatchIDCD a {
display: block;
width: fit-content;
margin: 10px auto;
}
.SearchNoMatchIDCD p {
max-width: 100%;
}
.SearchNoMatchIDCD span {
margin: 0 3px;
}
.SearchNoMatchIDCD img {
width: 100%;
max-width: 250px;
}
.SearchNoMatchIDCD figcaption {
font-size: 0.9rem;
}



.JustleSchLineup{
width: 100%;
max-width: 1000px;
margin: auto;
}

.JustleSchLineup > p{
width:100%;
max-width: 1000px;
font-size: 0.9rem;
padding: 3px 10px;
margin: auto;
border-top:0px solid #333333;
border-bottom:1px solid #333333;
}


.JustleSchLineup > ul{
display: flex;
flex-grow: 1;
flex-wrap: wrap;
list-style: none;
width:100%;
max-width: 1000px;
margin: auto;
background-color: #EEEEEE;
padding: 3px 10px;
}

.JustleSchLineup > ul > li{
position: relative;
white-space: nowrap;
font-size: 0.9rem;
padding: 3px 0;
}


.JustleSchLineupA4 li{
min-width: calc(100% / 4);
}

.JustleSchLineup100m li{
min-width: calc(100% / 3);
}

.JustleSchLineupOth li{
min-width: calc(100% / 4);
}

@media screen and (max-width: 1280px) {
.JustleSchLineupA4 li{
min-width: calc(100% / 3);
}

.JustleSchLineup100m li{
min-width: calc(100% / 2);
}

.JustleSchLineupOth li{
min-width: calc(100% / 3);
}

}



.JustleSchLineup > ul > li span{
}



.JustleODCRadioCheck,.JustleSchLineupCheck {
display: none;
}

.JustleSchODCTable,.JustleSchLineup{
position: relative;
overflow: hidden;
font-size: 0.9rem;
height: 0;
}
.JustleODCRadioLabel,.JustleSchLineupLabel {
position: relative;
display: block;
width: 100%;
max-width: 500px;
background-color: #eeeeee;
border: 1px solid #555555;
text-align: center;
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
padding: 0;
margin: auto;
}
.JustleODCRadioLabel::before,.JustleSchLineupLabel::before {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 20px;
width: 7px;
height: 7px;
transform: rotate(45deg);
margin: auto;
border-top: 1px solid;
border-right: 1px solid;
}
.JustleODCRadioLabel::after,.JustleSchLineupLabel::after {
display: inline-block;
text-align: center;
padding: 3px 10px;
z-index: 10;
}

.JustleODCRadioLabel::after{
content: 'オーダーカット商品の詳細（加工サイズ等）はこちらをクリック';
}

.JustleSchLineupLabel::after {
content: '商品ラインナップ (品番/厚み)はこちらをクリック';
}
@media screen and (max-width: 960px) {
.JustleODCRadioLabel::after{
content: 'オーダーカット商品の詳細（加工サイズ等）\aはこちらをクリック';
white-space: pre;
}
}


.JustleODCRadioCheck:checked ~ .JustleODCRadioLabel,
.JustleSchLineupCheck:checked ~ .JustleSchLineupLabel {
width: 100%;
max-width: 1000px;
position: relative;
background-color: transparent;
border: none;
margin: auto;
margin-bottom:2px;
}

.JustleODCRadioCheck:checked ~ .JustleODCRadioLabel::before,
.JustleSchLineupCheck:checked ~ .JustleSchLineupLabel::before{
position: absolute;
display: inline-block;
width: fit-content;
right: 0;
left: 0;
top: 5px;
bottom: auto;
border: none;
transform: rotate(0deg);
}

.JustleODCRadioCheck:checked ~ .JustleODCRadioLabel::before{
content: 'オーダーカット 加工サイズ一覧表';
} 

.JustleSchLineupCheck:checked ~ .JustleSchLineupLabel::before{
content: '商品ラインナップ';
}

.JustleODCRadioCheck:checked ~ .JustleODCRadioLabel::after,
.JustleSchLineupCheck:checked ~ .JustleSchLineupLabel::after{
content: '- 非表示';
position: absolute;
display: inline-block;
width: fit-content;
right: 10%;
left: auto;
top: 5px;
bottom: auto;
background-color: transparent;
font-weight: normal;
color: #555555;
padding: 0;
}

.JustleODCRadioCheck:checked ~ .JustleSchODCTable,
.JustleSchLineupCheck:checked ~ .JustleSchLineup{
height: auto;
}

.JustleODCRadioCheck:checked ~ .JustleSchODCTable table,
.JustleSchLineupCheck:checked ~ .JustleSchLineup{
border-top:2px solid #333333;
border-bottom:2px solid #333333;
}



.JustleODCRadioCheck:checked ~ .JustleSchODCTable::before {
display: none;
}

.JustleSchODCTable {
width: fit-content;
display: block;
font-size: 0.9rem;
margin: auto;
}
.JustleSchODCTable table {
position: relative;
width: 100%;
max-width: 1000px;
table-layout: fixed;
text-align: center;
margin: auto;
margin-top: 0px;
}
.JustleSchODCTable table::before {
display: block;
position: absolute;
bottom: 100%;
content: 'オーダーカット 加工サイズ一覧表';
width: fit-content;
text-align: center;
font-weight: bold;
}
.JustleSchODCTable table thead,
.JustleSchODCTable table tbody {
width: 100%;
}
.JustleSchODCTable table tbody tr:nth-child(even) td {
background-color: #eeeeee;
}

.JustleSchODCTable table tbody tr:nth-child(odd) td {
background-color: #ffffff;
}

.JustleSchODCTable table tbody {
position: relative;
width: 100%;
}
.JustleSchODCTable tr:not(:last-child) {
border-bottom: 1px solid #cccccc;
}
.JustleSchODCTable tr:last-child {
border-bottom: 0px solid #555555;
}
.JustleSchODCTable th {
text-align: center;
padding: 0px;
background-color: #cccccc;
border-top: 0px solid #555555;
border-bottom: 2px solid #555555;
}
.JustleSchODCTable td {
padding: 3px;
}
.JustleSchODCTable td ul:not(:last-child) {
padding-bottom: 3px;
}

.JustleSchODCTable th,
.JustleSchODCTable td {
border-left: 0px dotted #333333;
border-right: 0px dotted #333333;
}

.JustleSchODCTable th:first-child,
.JustleSchODCTable th:last-child,
.JustleSchODCTable td:first-child,
.JustleSchODCTable td:last-child {
width: calc((100% - 1000px) / 2 * 0);
}

.JustleSchODCTable td:nth-child(n + 2):nth-child(-n + 3),
.JustleSchODCTable th:nth-child(n + 2):nth-child(-n + 3) {
width: 12%;
}

.JustleSchODCTable ul {
position: relative;
list-style: none;
display: flex;
width: 100%;
margin: 0 auto;
}
.JustleSchODCTable ul > li {
width: 100%;
min-width: 70px;
padding: 0px 10px;
}
.JustleSchODCTable ul > li:nth-child(n + 5) {
width: 50%;
}

.JustleSchODCTable ul > li > p {
width: 70px;
text-align: right;
}

.JustleSchODCTable td ul > li:nth-child(1) > p {
position: relative;
margin: auto;
}
.JustleSchODCTable td:nth-child(n + 4):nth-child(-n + 6) ul {
width: calc(100% - 65px);
margin: 0 0 0 auto;
}

.JustleSchODCTable td:nth-child(n + 4):nth-child(-n + 6) ul::before {
position: absolute;
right: 100%;
width: 45px;
background-color: #ffffff;
/**border: 1px solid #555555;**/
outline: solid 1px #333333  ;
box-sizing:border-box;
font-size: 0.8rem;
font-weight: normal;
}
.JustleSchODCTable td:nth-child(n + 4):nth-child(-n + 6) ul:nth-child(1)::before {
content: '幅';
}
.JustleSchODCTable td:nth-child(n + 4):nth-child(-n + 6) ul:nth-child(2)::before {
content: '長さ';
}

@media screen and (max-width: 1480px) {
.JustleSchODCTable td:nth-child(n + 4):nth-child(-n + 6) ul > li:first-child {
padding-left: 0;
}
.JustleSchODCTable td:nth-child(n + 4):nth-child(-n + 6) ul:last-child {
padding-right: 0;
}
}

@media screen and (max-width: 1280px) {
.JustleSchODCTable {
overflow: scroll;
max-width: 100%;
max-height: 300px;
white-space: nowrap;
}
.JustleSchODCTable table {
width: auto;
border-collapse: separate;
border-spacing: 0;
}

.JustleSchODCTable td:nth-child(n + 4):nth-child(-n + 6) ul {
width: 100%;
max-width: auto;
}
.JustleSchODCTable td:nth-child(n + 4):nth-child(-n + 6) ul::before {
display: block;
width: 100%;
left: 0;
right: 0;
}
.JustleSchODCTable td:nth-child(n + 4):nth-child(-n + 6) ul > li {
padding-top: 25px;
}

.JustleSchODCTable ul > li > p {
padding-left: 0;
padding-right: 0;
}
.JustleSchODCTable thead tr {
position: sticky;
top: 0;
z-index: 50;
}

.JustleSchODCTable thead th:nth-child(2),
.JustleSchODCTable tbody td:nth-child(2) {
position: sticky;
min-width: 100px;
left: 0;
z-index: 30;
}

.JustleSchODCTable thead th:nth-child(3),
.JustleSchODCTable tbody td:nth-child(3) {
position: sticky;
min-width: 100px;
left: 100px;
z-index: 30;
}
.JustleSchODCTable td:nth-child(n + 4):nth-child(-n + 6) {
width: calc(100% - 200px);
min-width: 200px;
padding: 5px 20px;
}
.JustleSchODCTable th:first-child,
.JustleSchODCTable th:last-child,
.JustleSchODCTable td:first-child,
.JustleSchODCTable td:last-child {
display: none;
width: 0;
padding: 0;
margin: 0;
}
}
@media screen and (max-width: 960px) {
.JustleSchODCTable td:nth-child(n + 4):nth-child(-n + 6) {
width: calc(100% - 200px);
min-width: 0;
padding: 5px 2px;
}
}

.JustleSchODCTable td:nth-child(4) ul > li > p {
width: 100px;
padding-right: 30px;
}

.JustleSchODCTable td:nth-child(4) ul:nth-child(1) > li > p::after {
content: 'のみ';
position: absolute;
left: calc(100% - 35px);
white-space: nowrap;
}

.JustleSchODCTable td:nth-child(4) ul:nth-child(2) > li > p::after {
content: '～';
position: absolute;
left: calc(100% - 35px);
}

.JustleSchODCTable td:nth-child(n + 5):nth-child(-n + 6) ul > li:nth-child(1) > p {
position: relative;
margin: 0;
margin-left: auto;
}

.JustleSchODCTable td:nth-child(n + 5):nth-child(-n + 6) ul > li:first-child > p::after {
content: '～';
position: absolute;
left: calc(100%);
}

.JustleSchODCTable td:nth-child(n + 5):nth-child(-n + 6) ul > li:nth-child(2) > p {
margin: 0;
margin-right: auto;
}

.JustleSchODCTable p span {
display: inline-block;
min-width: 40px;
text-align: left;
white-space: nowrap;
padding: 0 5px;
margin: auto;
}

.JustleODCTblImp {
width: fit-content;
background-color: #dddddd;
border: 1px solid #555555;
padding: 5px 10px;
margin: auto;
}