@charset "utf-8";
/* CSS Document for index.html and plastic.htm (Plastic Site JP) */

/*--------------------index.html--------------------*/

/*TOPページのお知らせ*/
#hd3 .hd3_inn .box_topinfo {width:150px; height:158px; position:absolute; right:20px; top:20px; border:1px solid #F30; z-index:100; padding:10px; color:#F00; background:rgba(255,255,255,0.8);}
#hd3 .hd3_inn .box_topinfo:hover {background:rgba(255,255,255,0.5); transition:0.2s;}
#hd3 .hd3_inn .box_topinfo a {color:#F00;}
#hd3 .hd3_inn .box_topinfo p {line-height:1.6em;}
#hd3 .hd3_inn .box_topinfo p:first-child {margin-top:0;}
@media (max-width:599px) {#hd3 .hd3_inn .box_topinfo {visibility:visible; width:calc(100% - 20px); margin:0 10px; height:auto; position:static; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}}

ul.topbox3 {width:100%; overflow:hidden; list-style:none; margin:15px 0; padding:0; font-size:0;} 
ul.topbox3:after {content:""; display:block; clear:both;}
ul.topbox3 li {display:inline-block; width:calc((100% - 21px) / 3); height:150px; background:#E8F4FF; margin-right:10px; margin-bottom:10px; padding:0; text-align:center; font-size:14px; border-radius:5px; overflow:hidden; transition:0.2s;}
ul.topbox3[class] li[class]:hover {background-color:#FEE;}
ul.topbox3 li.li_pk {background:#E8F4FF url(../img/top/products_peek.png) no-repeat center;}/*PEEK素材*/
ul.topbox3 li.li_sn {background:#E8F4FF url(../img/top/products_sanitary2.png) no-repeat center;}/*PPSUサニタリー管*/
ul.topbox3 li.li_aw {background:#FFF7DB url(../img/top/products_award.png) no-repeat center;}/*PPSUサニタリー管受賞*/
ul.topbox3 li.li_sd {background:#E8F4FF url(../img/top/products_seiden.png) no-repeat center;}/*制電素材*/
ul.topbox3 li.li_sf {background:#E8F4FF url(../img/top/products_shaft.png) no-repeat center;}/*PEEKシャフト*/
ul.topbox3 li.li_bk {background:#E8F4FF url(../img/top/products_block.png) no-repeat center;}/*見える配管ブロック*/
ul.topbox3 li.li_hp {background:#E8F4FF url(../img/top/products_hippari.png) no-repeat center;}/*引っ張り棒*/
ul.topbox3 li.li_bp {background:#E8F4FF url(../img/top/products_bigpeek.png) no-repeat center;}/*PEEK大型極厚製品*/
ul.topbox3 li.li_pt {background:#E8F4FF url(../img/top/products_petpartition.png) no-repeat center;}/*PETパーテーション*/
ul.topbox3 li.li_ms {background:#E8F4FF url(../img/top/products_machining.png) no-repeat center;}/*精密切削製品*/
ul.topbox3 li a {width:100%; height:50px; display:block; padding:100px 0 0 0; color:#FFF; font-weight:bold;}
ul.topbox3 li[class]:nth-child(3n) {margin-right:0;}
ul.topbox3 li a div {width:100%; height:41px; background:rgba(0,51,102,0.7); padding-top:9px; line-height:17px;}
ul.topbox3 li a:hover div {background:rgba(0,51,102,0.9);}
ul.topbox3 li.li_aw a div {width:100%; height:41px; background:rgba(255,204,0,0.7); padding-top:9px; line-height:17px; color:#006;}
ul.topbox3 li.li_aw a:hover div {background:rgba(255,204,0,0.9);}
ul.topbox3 li div span {font-size:11px; font-weight:normal;}
ul.topbox3.tb3_h li {background:#FAFAFA;}
ul.topbox3.tb3_h li a div {background:rgba(102,102,102,0.7);}
ul.topbox3.tb3_h li a:hover div {background:rgba(102,102,102,1.0);}
ul.topbox3.tb3_h li[class^="dv_"] a div {background:rgba(51,153,153,0.7);}
ul.topbox3.tb3_h li[class^="dv_"] a:hover div {background:rgba(51,153,153,0.9);}
ul.topbox3.tb3_h li.dv_pm {background:#E8FFE8 url(../img/top/process_pm.png) no-repeat left;}
ul.topbox3.tb3_h li.dv_sm {background:#E8FFE8 url(../img/top/process_sm.png) no-repeat center;}
ul.topbox3.tb3_h li.dv_2b {background:#E8FFE8 url(../img/top/process_2b.png) no-repeat center;}
ul.topbox3.tb3_h li.dv_jm {background:#E8FFE8 url(../img/top/process_jm.png) no-repeat center;}
ul.topbox3.tb3_h li.dv_sb {background:#E8FFE8 url(../img/top/process_sb.png) no-repeat center;}
ul.topbox3.tb3_h li.li_mc {background:#FAFAFA url(../img/top/process_mc.png) no-repeat left;}
ul.topbox3.tb3_h li.li_ml {background:#FAFAFA url(../img/top/process_ml.png) no-repeat left;}
ul.topbox3.tb3_h li.li_hd {background:#FAFAFA url(../img/top/process_hd.png) no-repeat left;}
ul.topbox3.tb3_h li.li_ra {background:#FAFAFA url(../img/top/process_ra.png) no-repeat left;}


h3.h3_top {margin:20px 0 15px;}
	
h4.h4_top {padding-bottom:5px; margin:15px 0; font-size:16px; line-height:1.2em; border-bottom:2px solid #F0F0F0;}
h4.h4_top span {color:#09F; margin-right:0.5em; font-weight:normal; font-family:'fas_r';}
	
h3.h3_top_news {font-size:16px; border-bottom:1px dotted #666; padding:4px 0; margin:20px 0 15px;}
h3.h3_top_news span {color:#09F; margin-right:0.5em; font-weight:normal; font-family:'fas_r';}

/*トピックス・お知らせ*/
ul.news_top {margin:1em 0;}
ul.news_top li {height:16px; line-height:16px; padding:6px 0 6px 28px; background:url(../img/list/file1.gif) left no-repeat; margin:6px 0; position:relative; border-bottom:1px dotted #E6E6E6;}
ul.news_top li .text {width:calc(100% - 110px); text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
ul.news_top li .date {font-size:12px; text-align:right; width:105px; position:absolute; right:0; bottom:7px;}

@media (max-width:500px) {
ul.topbox3 li {display:block; width:calc((100% - 10px) / 2); float:left;}
ul.topbox3 li[class]:nth-child(2n) {margin-right:0;} ul.topbox3 li[class]:nth-child(2n+1) {margin-right:10px;}
h2.h2_lbb {display:none;}
}

@media (max-width:350px) {
ul.topbox3 li[class] {display:block; width:100%; clear:both;}	
}

/*-----TOP slider-----*/
.slider {margin:auto; background-color:white; position:relative;}
.slider img {width:100%; animation-name:slider; -webkit-animation-name:slider; animation-duration:35s; -webkit-animation-duration:35s;	animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; opacity:0;}
.slider img[class^="img"] {display:book; margin:0 auto; position:absolute; top:0; left:0;}
.slider a:hover img[class^="img"] {opacity:0;}
.slider .img1 {animation-delay:0s; -webkit-animation-delay:0s;}
.slider .img2 {animation-delay:5s; -webkit-animation-delay:5s;}
.slider .img3 {animation-delay:10s; -webkit-animation-delay:10s;}
.slider .img4 {animation-delay:15s; -webkit-animation-delay:15s;}
.slider .img5 {animation-delay:20s; -webkit-animation-delay:20s;}
.slider .img6 {animation-delay:25s; -webkit-animation-delay:25s;}
.slider .img7 {animation-delay:30s; -webkit-animation-delay:30s;}
@keyframes slider {0%{opacity:0;} 3%{opacity:1; z-index:10;} 17%{opacity:1; z-index:10;} 20%{opacity:0;} 100%{opacity:0;}}
@-webkit-keyframes slider {0%{opacity:0;} 3%{opacity:1; z-index:10;} 17%{opacity:1; z-index:10;} 20%{opacity:0;} 100%{opacity:0;}}

/*--------------------Plastic.htm--------------------*/
.jushi_topmn {margin:15px 0;}
.jushi_topmn ul {font-size:0; width:100%; overflow:hidden; font-size:0;}
.jushi_topmn ul li {display:inline-block; margin:0 5px 5px 0; height:100px; width:calc((100% - 26px) / 6); overflow:hidden; border-radius:3px;}
.jushi_topmn ul li:last-child {margin-right:0;}
.jushi_topmn ul li a {width:100%; height:100px; display:block; position:relative;}
.jushi_topmn ul li a img {position:absolute; top:0; bottom:0; left:-100%; right:-100%; margin:0 auto; z-index:-1;}
.jushi_topmn ul li a p {display:block; position:absolute; bottom:0; padding:10px 5px; text-align:center; font-size:14px; font-weight:bold; line-height:1em; background:rgba(0,0,51,0.3); color:#FFF; width:calc(100% - 10px); margin:0;}
.jushi_topmn ul li a:hover img {-moz-filter:grayscale(100%); -webkit-filter:grayscale(100%); filter:grayscale(100%);}
.jushi_topmn ul li a:hover p {background:rgba(0,0,51,0.6);}
@media (max-width:580px) {.jushi_topmn ul li {width:calc((100% - 11px) / 3);} .jushi_topmn ul li:nth-child(3n) {margin-right:0;}}

.jushi_topimg {float:left; margin:0 15px 15px 0; height:100px; width:150px; overflow:hidden; position:relative;}
.jushi_topimg img {margin:0 auto; position:absolute; top:0; bottom:0; left:-100%; right:-100%;}
.jushi_topimg a:hover img {-moz-filter:grayscale(100%); -webkit-filter:grayscale(100%); filter:grayscale(100%);}

.h3_yel14 {background:url(../img/dot/dot_c_yel14.png) left no-repeat; padding:0 0 0 20px; margin:5px 0;}
.h3_ml112 {margin-left:112px;}
.h3_yel14 a {color:#333;} .h3_yel14 a:hover {color:#F00; text-decoration:none;}
