@charset "euc-jp";
/*������CSS*/
html{scroll-behavior: smooth; font-family: 'Roboto', sans-serif;}
*{ list-style:none; margin:0; padding:0;}
a{ text-decoration:none;}
a img{ border:none;}
img{ vertical-align:bottom;}
/*�ǹ���ɽ��*/
div.prices span.prdisp-taxin span > span{ display: none !important;}
/*�쥮��顼������*/
#metal div#regular{ background-color: #d5dfbe;}
/*�饤�ȥ�����*/
#metal div#light{ background-color: #e7f5ff;}
/*���顼������*/
#metal div#color{ background-color: #ede7e0;}
/*����¾*/
#metal div#other{ background-color: #fff9e5;}
/*��������Ĵ��*/
#metal div.content ul.item > li a ul.icon_box li.step3,
#metal div.content ul.item > li a ul.icon_box li.step4,
#metal div.content ul.item > li a ul.icon_box li.step5{ background-color: #795c3a;}
#metal div.content ul.item > li a ul.icon_box li.hook{ background-color: #9b8c36;}
#metal div.content ul.item > li a ul.icon_box li.half{ background-color: #443586;}
#metal div.content ul.item > li a ul.icon_box li.height_01{background-color: #3e8176;}
#metal div.content ul.item > li a ul.icon_box li.width_01{background-color: #333;}
#metal div.content ul.item > li a ul.icon_box li.depth_01{background-color: #91374e;}
/**�����Ф��ʶ��̡�**/
#metal div.content > h2.caster_yes{ background-color: #c1935d; color: #fff; }
#metal div.content > h2.caster_no{ background-color: #8b6a43; color: #fff; }
#metal div.content > h2.wardrobe{ background-color: #356285; color: #fff; }
/*���̡ʶ��̡�*/
/**�ѥ�����01**/
#metal div#color.content ul.colbox.colbox01 li:nth-child(1){ background-color: #fff;}
#metal div#color.content ul.colbox.colbox01 li:nth-child(2){background-color: #31241f; }
#metal div#color.content ul.colbox.colbox01 li:nth-child(3){background-color: #000; }
#metal div#color.content ul.colbox.colbox01 li:nth-child(4){background-color: #edb7b5; }
#metal div#color.content ul.colbox.colbox01 li:nth-child(5){background-color: #f277f2; }
/**�ѥ�����02**/
#metal div#color.content ul.colbox.colbox02 li:nth-child(1){ background-color: #fff;}
#metal div#color.content ul.colbox.colbox02 li:nth-child(2){background-color: #2f231e; }
#metal div#color.content ul.colbox.colbox02 li:nth-child(3){background-color: #000; }
/**�ѥ�����03**/
#metal div#color.content ul.colbox.colbox03 li:nth-child(1){ background-color: #fff;}
#metal div#color.content ul.colbox.colbox03 li:nth-child(2){background-color: #352725; }
#metal div#color.content ul.colbox.colbox03 li:nth-child(3){background-color: #000; }
#metal div#color.content ul.colbox.colbox03 li:nth-child(4){background-color: #edb7b5; }
/**�ѥ�����02�ʤ���¾��**/
#metal div#other.content ul.colbox.colbox02 li:nth-child(1){ background-color: #fff;}
#metal div#other.content ul.colbox.colbox02 li:nth-child(2){background-color: #2f231e; }
#metal div#other.content ul.colbox.colbox02 li:nth-child(3){background-color: #000; }
/*SMP*/
@media screen and (max-width: 640px){/*SMP-start*/
.smp_none{ display:none !important;}
#metal{ width:100%; margin:0 auto;}
#metal img{ max-width: 100%;}
img.mini_bn{ margin-bottom: 0;}
#metal div#regular{ margin-top: 5vw !important;}
/*����ƥ�Ķ���*/
#metal div.content{ width: 100%; margin-top: 10vw; }
#metal div.content h1{ width: 100%; padding: 1vw 0; text-align: center; background-color: #000; color: #fff; font-size: 5vw; margin: 3vw 0 2vw;}
#metal div.content h1:nth-of-type(n+2){margin-top: 5vw;}
#metal div.content h1 span{ font-size: 6.5vw; padding: 0 0.5vw;}
#metal div.content ul.item{ width: 99%; margin: 0 auto; overflow-x: scroll; -webkit-overflow-scrolling: touch; white-space: nowrap; padding-bottom: 3vw;}
#metal div.content ul.item > li{ width: 45%; display: inline-block; vertical-align: top;}
#metal div.content ul.item.item_light75{display: flex; justify-content: space-around;}
#metal div.content ul.item.item_light75 > li{ width: calc(98%/2);}
#metal div.content ul.item > li a{ display: block; border: 1px solid #b1b1b1; padding: 1vw; background-color: #fff; white-space: normal; position: relative;}
#metal div.content ul.item > li a::after{ position: absolute; font-family: "Font Awesome 5 Free"; content: '\f0da'; font-weight: 900; right: 1.5%; font-size: 5vw; color: #bfbfbf; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
#metal div.content ul.item > li a > p:nth-of-type(1){ margin: 1vw 0; font-size: 3.5vw; font-weight: bold; color: #666;}
#metal div.content ul.item > li a div.prices{ font-size: 5.5vw; color: #ab0208; text-align: center; font-weight: bold; position: relative;}
#metal div.content ul.item > li a div.prices::after{position: absolute; font-family: "Font Awesome 5 Free"; content: '\f101'; font-weight: 900; right: 0; font-size: 16px; color: #898989; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
/*��������Ĵ��*/
#metal div.content ul.item > li a ul.icon_box{ margin: 0.5vw 0 1vw;}
#metal div.content ul.item > li a ul.icon_box li{ display: inline-block; color: #fff; font-weight: bold; padding: 3%; border-radius: 8px; font-size: 4vw; margin-top: 0.5vw;}
/*��ɥ�����*/
#metal div.content ul.item.wardrobe > li a::after{ display: none;}
/*���顼���*/
#metal div.content > h2{width: 99%; padding: 5px 0; text-align: center; font-size: 5vw; font-weight: bold; margin: 10px auto 7px; border-radius: 5px;}
#metal div#color.content ul.colbox{ width: 100%; display: flex; margin-top: 2%;}
#metal div#color.content ul.colbox > li{ width: 5vw; height: 5vw; border: 1px solid #cfcfcf; margin-left: 1%;}
#metal div#color.content ul.colbox > li:nth-child(1){ margin-left: 0 !important;}
/*����¾����*/
#metal div#other.content div.title{ width: 100%; text-align: center; background-color: #38301f; color: #fff; margin-bottom: 1vw; padding: 2.5vw 0;}
#metal div#other.content div.title p:nth-child(1){ font-size: 3.5vw;}
#metal div#other.content div.title p:nth-child(2){ font-size: 5vw; margin-top: 1vw; font-weight: bold;}
#metal div#other.content div.title p:nth-child(2) span{ font-size: 4vw; padding: 0 1vw;}
#metal div#other.content ul.colbox{ width: 100%; display: flex; margin-top: 2%;}
#metal div#other.content ul.colbox > li{ width: 5vw; height: 5vw; border: 1px solid #cfcfcf; margin-left: 1%;}
#metal div#other.content ul.colbox > li:nth-child(1){ margin-left: 0 !important;}
/*�եå���*/
div#foot{width: 100%; margin: 7vw auto 5vw; border-top: 1px solid #666; padding-top: 5vw;}
div#foot ul{display: flex; justify-content: center;}
div#foot ul li:nth-child(2){margin: 0 5vw; border-left: 1px dashed #666; border-right: 1px dashed #666; padding: 0 5vw;}
/*��������ѡ���*/
div#osusume_bn{ width: 98%; margin: 7vw auto 0 !important;}
div#osusume_bn a{display: block; padding: 20px 0; text-align: left; background-color: #00a4b3; position: relative;}
div#osusume_bn a::after{ position: absolute; font-family: "Font Awesome 5 Free"; content: '\f144'; font-weight: 900; right: 3vw; font-size: 5vw; color: #fff; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
div#osusume_bn a p{ font-size: 5.5vw; color: #fff; font-weight: bold; padding-left: 5vw; }
}/*SMP-end*/
/*PC*/
@media print, screen and (min-width: 640px){/*PC-start*/
.pc_none{ display:none;}
a:hover img{ opacity:0.8;}
#metal{ width:750px; margin:0 auto; overflow: hidden;}
#metal img{ max-width: 100%;}
#metal img.mini_bn{ margin-bottom: 0;}
#metal > div:nth-of-type(n+2):nth-of-type(-n+4){ margin-top: 60px !important;}
/*����ƥ�Ķ���*/
#metal div.content{ width: 100%; margin-top: 25px; padding-bottom: 25px;}
#metal div.content h1{ width: 100%; padding: 10px 0; text-align: center; background-color: #000; color: #fff; font-size: 23px; margin: 15px 0 5px;}
#metal div.content h1:nth-of-type(n+2){margin-top: 25px;}
#metal div.content h1 span{ font-size: 25px; padding: 0 3px;}
#metal div.content ul.item{ width: 99%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding-bottom: 1px;}
#metal div.content ul.item > li{ width: calc(98%/4);}
#metal div.content ul.item > li a{ display: block; border: 1px solid #b1b1b1; padding: 3px; background-color: #fff; position: relative;}
#metal div.content ul.item > li a::after{ position: absolute; font-family: "Font Awesome 5 Free"; content: '\f0da'; font-weight: 900; right: 5px; font-size: 18px; color: #bfbfbf; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
#metal div.content ul.item > li a > p:nth-of-type(1){ margin: 5px 0; font-size: 15px; font-weight: bold; color: #666; text-align: left;}
#metal div.content ul.item > li a div.prices{ font-size: 20px; color: #333; text-align: center; font-weight: bold; position: relative;}
#metal div.content ul.item > li a div.prices::after{position: absolute; font-family: "Font Awesome 5 Free"; content: '\f101'; font-weight: 900; right: 0; font-size: 16px; color: #898989; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
/*��������Ĵ��*/
#metal div.content ul.item > li a ul.icon_box{ margin: 2.5px 0 5px; text-align: left;}
#metal div.content ul.item > li a ul.icon_box li{ display: inline-block; color: #fff; font-weight: bold; padding: 5px; border-radius: 8px; margin-top: 2.5px;}
/*��ɥ�����*/
#metal div.content ul.item.wardrobe > li a::after{ display: none;}
/*���顼���*/
#metal div.content > h2{width: 95%; padding: 5px 0; text-align: center; font-size: 20px; font-weight: bold; margin: 10px auto 7px; border-radius: 5px;}
#metal div.content > h2:nth-of-type(n+2){ margin-top: 15px !important;}
#metal div#color.content ul.item{ justify-content: center;}
#metal div#color.content ul.item > li{ width: calc(92%/3); text-align: center;}
#metal div#color.content ul.item_ward{ width: 99%; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: nowrap !important; padding-bottom: 1px;}
#metal div#color.content ul.item_ward > li{ width: calc(98%/4);}
#metal div#color.content ul.item_ward > li:nth-child(2){margin: 0 !important;}
#metal div#color.content ul.item > li:nth-child(2){margin: 0 10px;}
#metal div#color.content ul.item > li a > p:nth-of-type(1),
#metal div#color.content ul.item > li a ul.icon_box{margin-left: 20px;}
#metal div#color.content ul.item_ward > li a > p:nth-of-type(1),
#metal div#color.content ul.item_ward > li a ul.icon_box{margin-left: 0 !important;}
#metal div#color.content ul.colbox{ width: 100%; margin-left: 20px; display: flex; margin-top: 3px;}
#metal div#color.content ul.item_ward ul.colbox{margin-left: 0 !important;}
#metal div#color.content ul.colbox > li{ width: 20px; height: 20px; border: 1px solid #cfcfcf; margin-left: 2px;}
#metal div#color.content ul.colbox > li:nth-child(1){ margin-left: 0 !important;}
/*����¾����*/
#metal div#other.content div.title{ width: 100%; text-align: center; background-color: #38301f; color: #fff; margin-bottom: 10px; padding: 10px 0;}
#metal div#other.content div.title p:nth-child(1){}
#metal div#other.content div.title p:nth-child(2){ font-size: 25px; margin-top: 5px; font-weight: bold;}
#metal div#other.content div.title p:nth-child(2) span{ font-size: 20px; padding: 0 3px;}
#metal div#other.content ul.colbox{ width: 100%; display: flex; margin-top: 3px;}
#metal div#other.content ul.colbox > li{ width: 20px; height: 20px; border: 1px solid #cfcfcf; margin-left: 2px;}
#metal div#other.content ul.colbox > li:nth-child(1){ margin-left: 0 !important;}
/*��������ѡ���*/
div#osusume_bn{ width: 100%; margin-top: 30px !important;}
div#osusume_bn a{display: block; padding: 20px 0; text-align: center; background-color: #00a4b3; position: relative;}
div#osusume_bn a::after{ position: absolute; font-family: "Font Awesome 5 Free"; content: '\f144'; font-weight: 900; right: 25px; font-size: 35px; color: #fff; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
div#osusume_bn a:hover{ background-color: #00727d;}
div#osusume_bn a p{ font-size: 25px; color: #fff; font-weight: bold;}
/*�եå���*/
div#foot{width: 750px; margin: 30px auto 10px; border-top: 1px solid #666; padding-top: 15px;}
div#foot ul{display: flex; justify-content: center;}
div#foot ul li:nth-child(2){margin: 0 20px; border-left: 1px dashed #666; border-right: 1px dashed #666; padding: 0 20px;}
div#foot ul li a:hover span{ border-bottom: 1px solid #333;}
}/*PC-end*/
/*IE����*/
@media all and (-ms-high-contrast: none){
#metal div.content ul.item{
display: block;
flex-wrap: nowrap;
justify-content: space-around;
clear: both;
}
#metal div.content ul.item > li{
float: left;
margin-left: 3px;
}
#metal div.content h1{
clear: both;
}
#metal div.content h1.mida80{
float: left;
}
#metal div.content#color ul.item > li{
margin: 0 !important;
margin-left: 14.5px !important;
}
#metal div.content > h2:nth-of-type(n+2){
margin-top: 5px !important;
}
#metal div.content > h2{
float: left; margin-left: 18px;
}
#metal div.content#color ul.item44 > li:nth-child(1){
margin-left: 140px !important;
}
#metal div.content#color ul.item_ward{
display: block;
}
#metal div.content#color ul.item_ward > li{
margin-left: 3px !important;
}
#metal div.content#color ul.item_ward > li:nth-child(2){
margin-left: 3px !important;
}
}/*IE����*/