@charset "utf-8";
/* CSS Document for index.html (Ceramics Site) */

/*--------------------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;}

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_a1 {background:#E8F4FF url(../img/top/products_1.png) no-repeat center;}
ul.topbox3 li.li_a2 {background:#E8F4FF url(../img/top/products_2.png) no-repeat center;}
ul.topbox3 li.li_a3 {background:#E8F4FF url(../img/top/products_3.png) no-repeat center; margin-right:0;}
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 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.li_b1 {background:#FAFAFA url(../img/top/process_1.png) no-repeat left;}
ul.topbox3.tb3_h li.li_b2 {background:#FAFAFA url(../img/top/process_2.png) no-repeat center;}
ul.topbox3.tb3_h li.li_b3 {background:#FAFAFA url(../img/top/process_3.png) no-repeat center;}
ul.topbox3.tb3_h li.li_b4 {background:#FAFAFA url(../img/top/process_ml.png) no-repeat left;}
ul.topbox3.tb3_h li.li_b5 {background:#FAFAFA url(../img/top/process_hd.png) no-repeat left;}
ul.topbox3.tb3_h li.li_b6 {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;}
	
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:#090; margin-right:0.5em; font-weight:normal;}

/*トピックス・お知らせ*/
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:20s; -webkit-animation-duration:20s;	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;}
@keyframes slider {0%{opacity:0;} 5%{opacity:1; z-index:10;} 25%{opacity:1; z-index:10;} 30%{opacity:0;} 100%{opacity:0;}}
@-webkit-keyframes slider {0%{opacity:0;} 5%{opacity:1; z-index:10;} 25%{opacity:1; z-index:10;} 30%{opacity:0;} 100%{opacity:0;}}

/*--------------------Plastic.htm--------------------*/
.jushi_topmn {margin:15px 0;}
.jushi_topmn ul {font-size:0;}
.jushi_topmn ul li {display:inline-block; margin:0 5px 5px 0; height:100px; width:calc((100% - 25px) / 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% - 10px) / 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;}