@charset "utf-8";

/* CSS Document */

#main { position: relative; z-index: 0;}



#main > article { padding:10% 5% 5%;}



#main .title { margin:150px 0 ; text-align:center; min-height:200px;}

#main .title dt { font-size:50px; font-weight:bold; margin-bottom:50px; position:relative;}

#main .title dt:before { content:""; width:100px; height:100%; position:absolute; bottom:0; left:calc(50% - 100px); animation:line 2s; border-bottom:5px solid #ddd;}

#main .title dt:after { content:""; width:100px; height:100%; position:absolute; bottom:0; right:calc(50% - 100px); animation:line 2s; border-bottom:5px solid #ddd;}

@-webkit-keyframes line {

	0% { width:0; opacity:1; }

	80% { width:100px; opacity:1; }

	100% { opacity:0;}

}





#main .title dd { font-size:20px; margin-bottom:20px;}



#main .title2 {}

#main .title2 dt { font-size:20px; font-weight:bold; margin-bottom:20px;}

#main .title2 dd {}

#main .title2 .ID { padding:3px; font-size:small; background-color:#000; color:#fff; border-radius:3px; margin-right:5px;}





#path { font-size:small; /*display:flex;*/ padding:100px 5% 0; position:fixed; z-index:9;}

#path li { display:inline;} 

#path li:after { content:' ➡ '; margin:0 10px;display:inline-block;}

#path li:last-child:after { display:none;}

#path li a { display:inline-block; }

#path li a:hover { text-decoration:underline;}

/*------------------------------------------------------------------------------*/

#about, #news, #products-show, #contacts {background:url(../images/bg01.jpg) center top no-repeat; background-size:cover;background-attachment: fixed;}

#about picture { height:500px; width:100%; display:block; background:url(../images/p02.jpg) center bottom no-repeat;background-attachment: fixed; }



#about .plus dd {

	-moz-column-count: 4;

  -moz-column-gap: 1em;

  -webkit-column-count: 4;

  -webkit-column-gap: 1em;

  column-count: 4;

  column-gap: 1em;}

#about .plus dd span { padding:20px 0; margin-bottom:20px; display:block;  animation:item 0.5s infinite alternate ease-in-out; animation-duration:3s; }

#about .plus dd span:nth-child(2) { animation-delay:0.5s;}

#about .plus dd span:nth-child(3) { animation-delay:1s;}

#about .plus dd span:nth-child(4) { animation-delay:1.5s;}

#about .plus dd span:nth-child(5) { animation-delay:2s;}

#about .plus dd span:nth-child(6) { animation-delay:2.5s;}

#about .plus dd span:nth-child(7) { animation-delay:3s;}

#about .plus dd span:nth-child(8) { animation-delay:3.5s;}

@-webkit-keyframes item {

	from {background-color:#fff;}

	to {background-color:#F90;}

}

#about .t01 { display:flex;background:url(../images/p05.jpg) right bottom no-repeat; background-attachment: fixed; background-size:30%;}

#about .t01 img { margin-right:20px; width:50%; height:50%;}



#products, #download {background:url(../images/bg03.png) center top no-repeat; background-size:cover;background-attachment: fixed;padding:10% 0 5% !important;}

#products .list, #download .list { display:inline-block; vertical-align:top; width:calc(100%/3); /*padding:20px 5%;*/ margin:0 -2px 100px; /*height:300px;*/ overflow:hidden; position:relative;}

#products .list img, #download .list img {padding: 0 60px;}

#products .list p, #download .list p { text-align:center; /*position:absolute; bottom:0; left:0; right:0; background:#fff;*/ padding:20px;    margin-top: -2px; box-shadow:0 0 10px rgba(0, 0, 0, 0.35); }





#products-list {background:url(../images/bg04.png) center top no-repeat; background-size:cover;background-attachment: fixed;}

#products-list .list { display:flex; margin-bottom:100px;}

#products-list .list picture { width:30%; max-height:350px; margin-right:20px; overflow:hidden;}

#products-list .list dl { flex:1;}

#products-list .list dl dd { margin-bottom:20px; line-height:26px;}



#products-show .show, #news-show .show, #contacts .show { display:flex; margin:30px 0; }

#products-show #show-box, #news-show #show-box, #contacts iframe { width:400px; margin-right:20px;  }

#products-show .slider-for, #news-show .slider-for {max-height:350px; overflow:hidden; }

#products-show #show-box .slider-nav, #news-show #show-box .slider-nav { background-color:#FFF; cursor:pointer;border: 1px solid #ddd;}

#products-show #show-box .slider-nav img {border-right: 1px solid #ddd;}

#products-show #show-box .slider-nav .slick-prev, #products-show #show-box .slider-nav .slick-next { top: 50%; display:block !important; width: 15px;}

#products-show #show-box .slider-nav .slick-prev { left:0;}

#products-show #show-box .slider-nav .slick-next { right:0;}

#products-show .show dl, #news-show .show dl, #contacts .show dl { flex:1; position:relative;}

#products-show .show dl dd, #news-show .show dl dd, #contacts .show dl dd { margin-bottom:20px; line-height:26px; }

#products-show .show .intro li { display:flex; margin:20px 0;}

#products-show .show .intro span { display:block;}

#products-show .show .intro span:after { content:":"; display:inline; margin:0 10px;}

#products-show .show .btn { position:absolute; top:20px; left:70%; padding:20px 50px;}



#news {padding:10% 0 5% !important;}

#news:after { content:""; position:absolute; bottom:0; left:0; background:url(../images/bg02.png) center bottom no-repeat; width:100%; height:100%;}

.news-box { background:url(../images/icon01.png) left 3px repeat-x; display:flex; position:relative; z-index:1; overflow:visible;    margin-bottom: 60px;}

.news-box .slick-prev, .news-box  .slick-next { display:block !important;}

.news-box .title2 { padding:8% 5% 5%; background-color:#FFC; margin:26px auto; width:70%; position:relative;}

.news-box .title2 dt { font-style:italic; margin-bottom:50px;}

.news-box .title2:before {

	content: "";

    width: 100%;

    height: 40px;

    position: absolute;

    top: -26px;

    left: 0;

    background: url(../images/icon02.png) 10% top no-repeat, url(../images/icon02.png) 90% top no-repeat;

}

.news-box .title2:hover { box-shadow:0 10px 30px #ddd;}



#contacts a { display:inline;}

#contacts #from { border:2px solid #009985; padding:20px 20px 0;}

#contacts #from dt {color:#009985;}

#contacts #from dd { display:flex; flex:1; }

#contacts #from dd span { width:20%; background-color:#009985; text-align:right;}

#contacts #from input { padding:5px; border-bottom:1px solid #009985; width:100%;}

#contacts #from .button { padding:0 20%;}

#contacts #from button { padding:2px 10px; margin:auto; }





@media screen and (max-width:968px) {

	#contacts .show { display:block;}

	#contacts iframe { width:100%;}

}

@media screen and (max-width:768px) {

	#main > article {background-size:contain !important;}

	#path { padding: 2% 5%;}

	#main .title { margin: 50px 0; min-height: inherit; padding: 0 5%;}

	#main .title dt { font-size: 35px;}

	#main .title dd { font-size: 18px;}

	

	#about picture { height: 300px;background-size: inherit; background-position:center top;}

	#about .plus dd {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}

	

	#products .list, #download .list {width: calc(100%/2);}

	#products .list img, #download .list img {padding: 0 30px;}

	#products-list {background:url(../images/bg03.png) center top no-repeat;}

	

	#products-show .show, #news-show .show { display:block;}

	#products-show #show-box, #news-show #show-box, #contacts iframe { margin:0 auto 20px;  }

	#products-show .show .btn { top:0; right:0;left: inherit;padding: 10px 30px;} 

}

@media screen and (max-width:568px) {

	#about .t01 { display:block; background:none;}

	#about .t01 img { margin:0;width:100%;}

	

	#products .list, #download .list {width:100%;}

	

	#products-list .list { display:block;}

	

	#products-show #show-box, #news-show #show-box {  width: 100%;}

	

	.news-box .title2 {padding: 20% 5%;    width: 90%;}

}



@media screen and (max-width:368px) {

	

}