@charset "utf-8";
html{
/*-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
overflow:auto;/*
}
body{
background:#fff;
font-family:Roboto, "Segoe UI", "Helvetica Neue", sans-serif;
color: #000;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; 
word-wrap: break-word;
font-feature-settings: "palt";/*文字詰め*/
height:auto;
overflow:visible;
}


a{
color: #000;
text-decoration: none;
outline: none;
}



#container{
	position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
	display:block;
	top:-50px;
	z-index: 120;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
	width:100%;
 	 background:#fff;/*全体の背景色*/
	color:#000;
}

#header{
width:100%;
padding:5px;
z-index:200;
}

/*Header company name*/
.companyname{
display:none;
}

/*Header TELEPHONE NUMBER*/
.telephone{
display:none;
}
/*Header URL*/
.ad{
display:none;
}

/*--======お問い合わせ======--*/
.button {
position:fixed;
right:20px;
top:15px;
z-index:9999;
  display: inline-block;
  width: 120px;
  height: 35px;
  text-align: center;
border-radius:10px;
font-size:1rem;
  line-height: 35px;
  outline: none;
 background-color: #cc3300;
  color: #fff;
}
.button a:hover {
color:#000;
background-color: #cc3300;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}


/*--======LOGO箇所=========--*/
.logo{
position:fixed;
left:0;
top:0;
padding-left:10px;
background:#fff;
height:65px;
}
.logo img{
width:80px;
height:auto;
}



/*--======ぱんくず=========--*/
.pagebread{
display:none;
}

/*--======更新記録、アップデート、出展他=========--*/
#update{
position:relative;
display:block;
top:150px;
width:100%;
padding:5px;
font-size:1rem;
line-height:1.4;
}

/*--更新記録ページ構成 dl形式--*/
#update dl {
width: 100%;
flex-flow:column;
}

#update dt {
width:100%;
padding: 5px;
background-color: #f1f1f1;
border-bottom: 1px dotted #ccc;
}

#update dt span{
background:#cc3300;
color:#fff;
font-size:0.8rem;
text-align:center;
padding:5px 5px;
margin-left:5px;
border-radius:10px;
}
#update dd {
padding: 5px;
background-color: #fff;
border-bottom: 1px dotted #ccc;
}

#update dd .prodetail{
padding-left:10px;
font-size:1rem;
line-height:1.4;
}
#update dd .prodetail a:link{
color:#cc3300;
}

/*写真*/
#update dd img{
width:100%;
text-align:center;
}

/*--=======NewsList1===========--*/
.news-list{
margin:0 auto;
width:100%;
list-style:none outside;
}
.news-list li{
padding:5px;
display:block
font-size:1rem;
line-height:1.4;
}
.news-list li img{
width:100%;
}
.news-list a{
color:#000;
text-decoration:none;
}
.news-list span{
display:inline-block;
padding:5px;
text-align:left;
}

.news-list p{
display:inline-block;
}

/*--========NewsList2========--*/
.news-list2{
width:100%;
list-style:none outside;
padding-bottom:50px;
}
.news-list2 .item{
display:block
font-size:1rem;
line-height:1.4;
padding:5px;
}

.news-list2 .item .date{
margin:0;
min-width:500px;
color:#000;
}

.news-list2 .item .category span{
background:#cc3300;
color:#fff;
text-align:center;
display:inline-block;
font-size:0.8rem;
padding:5px;
border-radius:10px;
}
.news-list2 .item .title img{
float:none;
display:block;
width:100%;
}

.item::after{
border:1px dotted #ccc;
}
.item .title{
padding-top:10px;
}

.news-list2 .item:last-child{
border:none;
padding-bottom:50px;
}


/*=======COMPANY AREA==========*/

#company{
position:relative;
display:block;
top:150px;
width:100%;
padding:5px;
}

.companydetail{
text-align:left;
display:inline-block;
font-size:1rem;
line-height:1.4;
}

.companydetail a{
color:#000;
}
.companydetail a:hover,
.companydetail a:active{
color:#cc3300;
}

.companyintro,
.companyintro2{
width:100%;
margin: 0 auto;
text-align:left;
font-size:1rem;
line-height:1.4;
}

.companyintro img{
width:170px;
padding:5px;
float:left;
}

.companyintro2 .kakomi{
padding:0.5em 1em;
margin:2em 0;
background:#fff;
border:dotted 1px #222;
border-radius:10px;
}
.companyintro2 .kakomi p{
margin:0;
padding:0;
}

/*--=========ACCORDION OPEN DETAILS==========--*/
details {
  margin: 0 auto;
}

summary {
    padding: 10px 20px 10px 10px;
  }
summary::-webkit-details-marker {
  display: none;
}

summary:hover,
details[open] summary {
  background-color: #777;
color:#fff;
}

summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  transition: transform 0.5s;
  font-size: 1rem;
}

details[open] summary::after {
  transform: translateY(-50%) rotate(225deg);
}

summary::after {
    right: 20px;
    font-size: 1rem;
  }

  .answer {
    padding: 10px 20px;
font-size:0.9rem;
  }
}

details[open] .answer {
  animation: fadein 1s ease;
}

@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/*--=========GROUP AREA========--*/
#abroad{
position:relative;
display:block;
top:150px;
width:100%;
padding:5px;
font-size:1rem;
}

.abroad-parent2{
display:relative;
display:block;
font-size:1rem;
line-height:1.4;
padding:5px;
}
.abroad-item2{
width:100%;
padding:5px;
}
.abroad-item2 p{
color:red;
border-bottom:1px dotted #000;
margin-bottom:10px;
}
.abroad-item2 a{
color:#000;
}


/*--=========特定商取引========--*/
#trade{
position:relative;
display:block;
top:200px;
width:100%;
padding:5px;/*全体にパッディングをいれる*/
}

/*--=========注目製品========--*/
#feature{
position:relative;
display:block;
top:100px;
width:100%;
padding:5px;/*全体にパッディングをいれる*/
padding-bottom:150px;
}

/*--=========NEWSLIST3 Area========--*/
.news-list3{
width:100%;
margin:0 auto;
font-size:1rem;
line-height:1.4;
}
.news-list3 .item{
text-decoration:none;
border-bottom:1px dotted #000;
}
.news-list3 .item:first-child a{
border-top:1px dotted #000;
}

.news-list3 .item .date{
margin:0;
color:#999;
}
.news-list3 .item .category{
width:50%;
background:#cc3300;
color:#fff;
text-align:center;
border-radius:10px;
display:inline-block;
padding:5px;
margin-top:10px;
}
.news-list3 .item .title{
margin:0;
width:100%;
}
.news-list3 img{
width:70%;
}


/*--==========PRODUCTS Area===========---*/
#products1{
position:relative;
display:block;
top:150px;
width:100%;
padding:5px;
}

/*--======産業用製品 詳細=======*/
.areadetail-parent{
display:block;
width:100%;
}
.areadetail{
display: block;
width:100%;
text-align:center;
}

.areadetail p{
font-size:1rem;
text-align:center;
}

.areadetail img{
width:70%;
height:auto;
}

/*--====PRODUCTS DETAIL Area========---*/
#prod{
position:relative;
display:block;
top:150px;
width:100%;
padding:5px;
}

/*--======産業用ハードウェア 詳細ボタン======--*/
.areadetail span{
background-color:#cc3300;
width:100%;
border-radius:10px;
display:inline-block;
padding:10px;
color:#fff;
text-align:center;
}

.areadetail span a:hover,
.areadetail span a:active{
background-color:#cc3300;
color:#fff;
text-decoration:none;
}

/*--=========製品カタログ：鍵=============--*/
.areadetail2-parent{
psition:relative;
display:block;
width:100%;

}
.areadetail2{
width:100%;
text-align:center;
}
.areadetail2 img{
width:100%;
}
.areadetail2 span{
background-color:#cc0033;
border-radius:10px;
width:100%;
text-align:center;
display:inline-block;
color:#fff;
font-size:1rem;
}

.areadetail2 span:hover,
.areadetail2 span:active{
background-color:#cc3300;
color:#fff;
text-decoration:none;
}



/*--========赤タイトル=========--*/
.titlecenter{
font-size:1.2rem;
margin:0 auto;
text-align:left;
color:#cc3300;
padding-bottom:20px;
}

/*--======PRODUCTS DETAIL DLDTDD=======--*/
.detail{
padding:5px;
width:100%;
font-size:1rem;
line-height:1.4;
}

.detail img{
text-align:center;
width:100%;
padding:5px;
}
.detail ul{
list-style:none;
display:flex;
justify-content:center;
}
.detail ul li{
padding-left:20px;
}

.detail dl {
position:relative;
display:block;
width: 100%;
}
.detail dt {
background-color: #f1f1f1;
border-bottom: 1px solid #ccc;
}
.detail dd {
background-color: #fff;
border-bottom: 1px solid #ccc;
}

/*--======Detail Area=======--*/
.detail2{
width:100%;
padding:5px;
font-size:1rem;
line-height:1.4;
}
.detail2 img{
text-align:center;
width:100%;
padding:5px;
}

.detail2 ul{
list-style:none;
display:flex;
justify-content:center;
}
.detail2 ul li{
padding-right:5px;
text-align:center;
}

.detail2 dl {
position:relative;
display:block;
width: 100%;
}
.detail2 dt {
flex-basis: 20%;
padding: 10px;
background-color: #f1f1f1;
border-bottom: 1px dotted #ccc;
}
.detail2 dd {
flex-basis: 80%;
padding: 10px;
background-color: #fff;
border-bottom: 1px dotted #ccc;
font-size:1rem;
line-height:1.5;
}

.detail2 a,
.detail2 a:hover,
.detail2 a:active{
color:#cc3300;
}

/*--=========Arradiance=============--*/

.parent{
  display: relative;
display:block;
  width: 100%;
}
 
.child{
  box-sizing:border-box;
  flex-basis: 32%;  //33%の要素が3つ並ぶと100%を超え、flex-wrapが動作します
  padding: 15px;
}


/*--clean room--*/
.crimage{
width:100%;
padding-top:10px;
}
.crimage span{
font-size:1rem;
}
.crimage img{
text-align:center;
width:100%;
padding:5px;
}

/*---=======ソフトウェアページ==========--*/
#software{
position:relative;
display:block;
top:150px;
width:100%
margin:0 auto;
margin-left:auto;
margin-right:auto;
padding-bottom:150px;
}
/*=====SOFTWARE===========*/
.detailplus{
width:100%;
margin:0 auto;
}
.detailplus dt{
width:100%;
border-bottom:1px dotted #ccc;
padding-bottom:5px;
color:#cc3300;
}
.detailplus dt,
.detail dt{
width:100%;
}
.detailplus dd,
.detaul dd{
margin-left:5px;
}

/*========SOFTWARE=======*/
.detail2-parent{
display:block;
width:100%;
margin-left:auto;
margin-right:auto;
padding-bottom:5px;
}
.detail2-item{
width:100%;
padding-left:5px;
}

.detail2-item img{
padding-bottom:20px;
}

.detail2-item p{
font-weight:bold;
color:#cc3300;
padding-bottom:10px;
padding:10px;
}


/*--=======Detailprod==========--*/

#depro{
position:relative;
display:block;
top:150px;
padding:5px;
font-size:1rem;
line-height:1.2;
}
#depro img{
width:100%;
}

#depro .explain{
font-size:1rem;
line-height:1.4;
padding-bottom:40px;
}

.areadetail3{
width:100%;
padding:5px;
margin-bottom:10px;
}

  .last td:last-child {
    border-bottom:none;
    width: 100%;
  }
  .tbl {
    width: 100%;
  }
  .tbl th,
  .tbl td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
  .tbl th{
  border-right:none;
}
  .tbl a{
    color:#000;
  }
  .tbl a:hover,  .tbl a:active{
    color:#cc3300;
  }

/*--========YOUTUBE MOVIE==========--*/
.youtube{
width:100%;
aspect-ratio:16 /9;
}
.youtube iframe{
width:100%;
height:100%;
}


/*--=====Flexbox カタログダウンロードボタン 1列=======--*/
.flexcatalog1{
width:100%;
display:block;
margin-left:auto;
margin-right:auto;
padding-top:10px;
font-size:1rem;
line-height:1.4;
}
.flexcatalog-item1{
width:100%;
background-color:#cc3300;
border-radius:10px;
padding:20px;
text-align:center;
}
.flexcatalog-item1 a{
color:#fff;
text-decoration:none;
font-weight:bold;
}
.flexcatalog-item1:hover,
.flexcatalog-item1:active{
background-color:#ff0033;
}


/*--=====Flexbox カタログダウンロードボタン 3列 aac=======--*/
.showcatalogue3{
width:100%;
margin-top:20px;
margin-bottom:20px;
}
.showcatalogue3 ul{
display:block;
margin:10px;
}
.showcatalogue3 ul li{
width:100%;
list-style:none;
background:#cc3300;
border-radius:10px;
text-align:center;
color:#fff;
padding:10px
box-shadow:1px 1px 5px #888;
margin:5px;
}
.showcatalogue3 ul li:hover,
.showcatalogue3 ul li:active{
background:#993333;
color:#fff;
}

/*--=====Flexbox カタログダウンロードボタン 3列 arradiance=======--*/
.showcatalogue4{
width:100%;
margin-top:20px;
margin-bottom:20px;
}
.showcatalogue4 ul{
display:block;
margin:10px;
}
.showcatalogue4 ul li{
width:100%;
list-style:none;
background:#cc3300;
border-radius:10px;
font-size:0.8rem;
text-align:center;
color:#fff;
padding:10px
box-shadow:1px 1px 5px #888;
margin:5px;
}
.showcatalogue4 ul li:hover,
.showcatalogue4 ul li:active{
background:#993333;
color:#fff;
}

/*--=====Flexbox カタログダウンロードボタン 1列 arradiance=======--*/
.flexcatalog5{
width:80%;
display:block;
margin-left:auto;
margin-right:auto;
padding-top:10px;
}
.flexcatalog-item5{
width:100%;
background-color:#cc3300;
border-radius:10px;
padding:20px;
text-align:center;
}
.flexcatalog-item5 a{
color:#fff;
text-decoration:none;
font-weight:bold;
}
.flexcatalog-item5:hover,
.flexcatalog-item5:active{
background-color:#ff0033;
}






.pageexplain{
position:relative;
top:0px;
font-size:0.9rem;
}




#area1,#area2,#area3,#area4{
width:100%;
margin:0 0 0 auto;
}

#area5{
width:100%;
margin:0 0 0 auto;
}

#area1 h2,#area2 h2,#area3 h2,#area4 h3{
width:100%
}

#area5 h2{
width:100%
}


.detail img{
width:100%;
}
.detail ul{
list-style:none;
display:flex;
flex-wrap:wrap;/*横並び折り返しする*/
}
/*PHOTO subscription*/
.detail ul li{
padding-left:5px;
font-size:0.8rem;
}

/*Detail for rpmi */
.detail-parent{
display:block;
}
.detail-item{
width:100%;
font-size:1rem;
}
.detail-item:last-child{
width:100%;
border-bottom:none;
}

/*Detail for */
.detail-parent2{
display:flex;
flex-wrap:wrap;
flex-direction:row;
}
.detail-item2{
width:100%;
box-sizing:border-box;
}

/*Detail for vtec aac aconity nil pva solmates*/
.detail-parent3{
display:block;

}
.detail-item3{
width:100%;
font-size:1rem;
}







/*Flexbox catalog*/
.flexcatalog{
display:flex;
}
.flexcatalog-item{

}
/*FLEX BUTTON for ACC aconity*/
.flexcatalog3{
width:100%;
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.flexcatalog-item3{
width:95%;
}


/*CATALOG BUTTON*/
.showcatalogue{
display:block;
margin:0 auto;
background:#cc3300;
width:80%;
max-width:500px;
border-radius:10px;
text-align:center;
color:#fff;
padding:20px 0;
left:0px;
box-shadow:1px 1px 5px #888;
margin-top:20px;
margin-bottom:20px;
}

.showcatalogue:hover,.showcatalogue:active{
background-color:#993333;
color:#fff;
}

/*TWO CATALOG*/

.showcatalogue2{
width:100%;
max-width:430px;
margin-top:20px;
margin-bottom:20px;
}
.showcatalogue2 ul{
display:flex;
flex-direction:row;
justify-content:center;
}
.showcatalogue2 ul li{
width:100%;
list-style:none;
background:#cc3300;
border-radius:10px;
text-align:center;
color:#fff;
padding:20px;
box-shadow:1px 1px 5px #888;
}

.showcatalogue2 ul li:hover,.showcatalogue2 ul li:active{
background:#993333;
color:#fff;
}



/*========PAGE-TOP BUTTON==========*/
#page-top{
display:none;
}




/*===========VIDEO DOWNLOAD===========*/
.mv{
width:100%;
text-align:left;
font-size:1rem;
line-height:1.4;
}

.mv ul li{
list-style:none;
list-style-type:none;
border-bottom:1px dotted #000;
}

.mv ul li a,
.mv ul li a:hover{
text-decoration:none;
color:#000;
}

/*VIDEO DOWNLOAD for solmates products*/
.mv2{
width:90%;
margin:0 auto;
}

.mv2 ul li{
list-style:none;
display:list-item;
list-style-type:none;
text-transform:uppercase;
}

.mv2 ul li a,
.mv2 ul li a:hover{
text-decoration:none;
color:#cc3300;
font-size:0.8rem;
line-height:1.4;
}



/*--======サイトマップ=========--*/
#sitemap{
margin:0 auto;
position:relative;
display:block;
top:150px;
width:100%;
font-size:1rem;
line-height:1.4;
padding:5px;
}

#sitemap p{
font-size:0.8rem;
line-height:1.4;
}

#flexbox{
display:block;
padding:5px;
}
#flexbox ul{
padding-bottom:20px;
}
/*--サイトマップ構成--*/
.listset1 {
display:block;
width: 100%;
padding:5px;
}
.listset1 ul li {
width:100%;
list-style:none;
}

.listset1 ul li a{
color:#000;
}


.emp{
padding-bottom:50px;
}

.emp2{
padding-bottom:20px;
}

/*--=====FOOTER======--*/
#footer{
position:relative;
display:blosck;
width:100%;
height:30px;
padding:10px;
background:#cc3300;
text-align:center;
z-index:100;
}

#footer span{
color:#fff;
font-size:0.7rem;
}