@charset "utf-8";
html{
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
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";/*文字詰め*/
font-size: 62.5%;/*相対基本フォントサイズ*/
}

body.appear{
    background:#fff;
}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
color:#000;
}

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

*{
    box-sizing: border-box
}


.inner{
    width:100%;
    margin:0 auto;
    padding:10px;
}

@media screen and (max-width:940px) {
.inner{
    padding:10px;
}
}

#section1,#section2,#section3,#section4,#section5,#section6,#section7,#section8{
  padding-top:150px;
  margin-top:-150px;
}

/* area */

#container{
position:relative;
display:block;
top:0;
}


/*Header company name*/
.companyname{
position:fixed;
right:175px;
top:20px;
z-index:9999;
font-size:1rem;
font-weight:bold;
}

/*Header TELEPHONE NUMBER*/
.telephone{
position:fixed;
right:175px;
top:39px;
z-index:9999;
font-size:1rem;
font-weight:bold;
}

/*Header URL*/
.ad{
position:fixed;
right:175px;
top:58px;
z-index:9999;
font-size:0.9rem;
font-weight:bold;
}


/*--======お問い合わせ======--*/
.button{
position:fixed;
right:10px;
top:22px;
z-index:9999;
display: inline-block;
width: 155px;
height: 58px;
text-align: center;
border-radius:10px;
font-size:1.1rem;
line-height: 54px;
font-weight:bold;
outline: none;
background: #cc3300;
color: #fff;
}
.button:hover{
color:#000;
background: #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;
}

/*--======TOP company Logo======--*/
.logo{
position:fixed;
display: block;
left:0;
top:0;
padding-left:10px;
background-color:#fff;
width:2000px;
height:100px;
z-index:1000;
}


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


/*--======ぱんくず=========--*/
.pagebread{
position:absolute;
top:150px;/*--top--*/
left:20px;/*--left--*/
font-size:0.9rem;
}
.pagebread a,.pagebread a:hover,.pagebread a:active{
color:#cc3300;
}

/*--======Update Area=========--*/
#update{
margin-left:auto;
margin-right:auto;
position:relative;
display:block;
top:200px;
width:80%;
font-size:1rem;
line-height:1.4;
}

/*--=========Update AREA DL形式============--*/
#update dl {
display: flex;
flex-flow: row wrap;
width: 100%;
}
#update dt {
flex-basis:20%;
padding: 10px;
background-color: #f1f1f1;
border-bottom: 1px dotted #ccc;
}
#update dt span {
background:#cc3300;
color:#fff;
font-size:0.8rem;
text-align:center;
padding:5px 10px;
margin-left:20px;
border-radius:10px;
}
#update dd {
flex-basis:80%;
padding: 10px;
background-color: #fff;
border-bottom: 1px dotted #ccc;
}

#update dd .prodetail{
font-size:1rem;
padding:20px;
}

#update dd img{
float:left;
width:50%;
padding-top:10px;
padding-right:20px;
}


/*--==========Company Area==========--*/

#company{
position:relative;
display:block;
top:200px;/*--top--*/
width:80%;
margin-left:auto;
margin-right:auto;
font-size:1rem;
line-height:1.3;
}

.companydetail{
text-align:left;
display:inline-block;
padding-bottom:20px;
font-size:1rem;
line-height:1.3;
}

.companyintro,
.companyintro2{
width:100%;
margin: 0 auto;
text-align:left;
padding:10px;
}
.companyintro img{
width:200px;
padding:20px;
float:left;
}

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

/*--=======会社沿革テーブル========--*/
table.ctbl {
width:100%;
  margin: 5px auto;
font-size:1rem;
line-height:1.2;
}
.ctbl th {
width:22%;
text-align:left;
  color: #000;
  padding: 5px;
margin-bottom:5px;
}
.ctbl td {
width:78%;
text-align:left;
  padding: 5px;
}

/*--==========Privacy Policy Area==========--*/
#pp{
position:relative;
display:block;
top:200px;
width:80%;
margin-left:auto;
margin-right:auto;
padding-bottom:100px;
font-size:1rem;
line-height:1.2;
}


/*--======SiteMAP Area=========--*/
#sitemap{
margin:0 auto;
position:relative;
display:block;
top:200px;
width:80%;
font-size:1rem;
line-height:1.4;
}

#sitemap p{
font-size:0.8rem;
line-height:1.4;
padding-left:10px;
}

#flexbox{
display:flex;
align-items:flex-start;
}
#flexbox ul{
width:100%;/*要素の幅*/
padding-bottom:20px;
}
#flexbox ul li.set{
width:100%;
border-bottom:1px dotted #000;/*要素の幅にあわせての下線*/
}

#flexbox ul li a{
color:#cc3300;
}
#flexbox ul li a:hover,
#flexbox ul li a:active,{
color:#cc3300;
}


/*--サイトマップ構成--*/
.listset1 {
display: flex;
flex-wrap:wrap;
flex-direction:row;
justify-content:flex-start;
width: 30%;
margin-left:10px;
}
.listset1 ul li{
width:100%;
list-style:none;
box-sizing:border-box;
}


/*--=====Abread Area=====--*/
#abroad{
position:relative;
display:block;
top:200px;
width:80%;
margin-left:auto;
margin-right:auto;
font-size:1rem;
}

/*--=====abroad Parent item Area1-2=====--*/
.abroad-parent{
display:flex;
flex-wrap:wrap;
width:80%;
font-size:1rem;
margin-left:auto;
margin-right:auto;
padding:10px;
}
.abroad-item{
width:45%;
padding:10px;
}
.abroad-item p{
color:#cc3300;
}

.abroad-parent2{
display:flex;
flex-wrap:wrap;
font-size:1rem;
margin-left:auto;
margin-right:auto;
padding:10px;
}
.abroad-item2{
width:50%;
padding:15px;
}
.abroad-item2 p{
color:#cc3300;
border-bottom:1px dotted #000;
margin-bottom:10px;
}
.abroad-item2 a{
color:#cc3300;
}


/*--========ACCORDION OPEN DETAILS=========--*/
details {
  margin: 0 auto 10px;
  width:100%;
}

summary {
  list-style: none;
  position: relative;
  padding: 10px 10px 10px 20px;/*アコーディオンタイトル箇所*/
  cursor: pointer;
  background-color: #cc3300;
font-size:1rem;
color:#fff;
}

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: 30px;
}

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

.answer {
  padding: 10px;
  background-color:#f0f0f0;
}


/*--==========Desctiption of the Specifi Area===========---*/
#trade{
position:relative;
display:block;
top:200px;
width:80%;
margin-left:auto;
margin-right:auto;
padding-bottom:100px;
font-size:1rem;
line-height:1.2;
}

/*--clean room--*/
.crimage{
width:100%;
text-align:center;
padding-top:10px;
}

.crimage span{
font-size:1.2rem;
}


/*--==========Service Products Area===========---*/
#products1{
position:relative;
display:block;
top:200px;
width:80%;
margin-left:auto;
margin-right:auto;
font-size:1rem;
line-height:1.5;
}

#products1 ul.image{
display:flex;
flex-wrap:wrap;
list-style:none;
margin-top:20px;
}

/*--=========Service COMP areadetail=============--*/
.areadetail-parent{
padding:10px;
display:flex;
flex-wrap:wrap;
}
.areadetail{
width:33%;
box-sizing:border-box;
padding:5px;
margin-bottom:10px;
}
.areadetail img{
width:auto;
height:170px;
text-align:top;
text-align:center;
}

.areadetail{
text-align:center;
}

.areadetail p{
height:50px;
text-align:center;
font-size:0.9rem;
line-height:1.2;
}

.areadetail span{
background-color:#cc0033;
border-radius:7px;
width:100%;
text-align:center;
display:inline-block;
padding:10px;
color:#fff;
margin-top:10px;
}

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


/*--=========Service COMP areadetail2=============--*/
.areadetail2-parent{
padding:10px;
display:flex;
flex-wrap:wrap;
}
.areadetail2{
width:48%;
box-sizing:border-box;
padding:5px;
margin-bottom:20px;
}

.areadetail2 span{
background-color:#cc0033;
border-radius:7px;
width:100%;
text-align:center;
display:inline-block;
padding:10px;
color:#fff;
margin-top:10px;
}

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


/*SOFTWARE FIT THUMBNAIL VOL1
.areadetail2 img{
width:100%;
    height: 200px;
    object-fit: cover;
}
*/

/*--SOFTWARE FIT THUMBNAIL VOL2 ASPECT比--*/
.areadetail2 .thumbnail{
background-size: cover;
  background-position: center center;
  padding-top: 56.25%;
  width: 100%;
}


/*---=======Software Area==========--*/
#software{
position:relative;
display:block;
top:200px;
width:80%;
margin-left:auto;
margin-right:auto;
font-size:1rem;
line-height:1.5;
}

/*--======Detail Area=======--*/
.detail{
width:100%;
margin:0 auto;
margin-left:auto;
margin-right:auto;

}
.detail img{
text-align:center;
padding:5px;
}

.detail ul{
list-style:none;
display:flex;
justify-content:center;
}
.detail ul li{
text-align:center;
}

.detail ul li img{
max-width:450px;
}

.detail dl {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.detail dt {
flex-basis: 20%;
padding: 10px;
background-color: #f1f1f1;
border-bottom: 1px dotted #ccc;
}
.detail dd {
flex-basis: 80%;
padding: 10px;
background-color: #fff;
border-bottom: 1px dotted #ccc;
font-size:1rem;
line-height:1.4;
}

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

.box {
    padding: 0.5em 1em;
    margin: 2em 0;
    background-color: #f1f1f1;
    border: dotted 1px #222;/*点線*/
}
.box p {
    margin: 0; 
    padding: 0;
}

/*--======Detail Area=======--*/

.detail ul.aconity li img{
max-width:250px;
}


/*--==========DetailPROT=================--*/
#depro{
position:relative;
display:block;
top:200px;
width:90%;
margin-left:auto;
margin-right:auto;
font-size:1rem;
line-height:1.5;
}
#depro img{
height:auto;
object-fit: cover;
}

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

table.tbl {
  margin: 10px auto;
}
.tbl th {
  background: #fff;
  border-right: dotted 1px #000;
  color: #000;
  padding: 10px;
margin-bottom:10px;
}
.tbl td {
  padding: 10px;
}

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

/*--=====Prod Area VBN=======--*/
#prod{
position:relative;
display:block;
top:200px;
width:80%;
margin-left:auto;
margin-right:auto;
font-size:1rem;/*--Eng行間少し狭く--*/
line-height:1.4;
}

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

.parent{
  width: 100%;
padding-bottom:30px;
}


/*--======Detail Area=======--*/
.detail2{
width:100%;
padding:10px;
margin:0 auto;
margin-left:auto;
margin-right:auto;
}
.detail2 img{
text-align:left;
width:90%;
padding:5px;
}

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

.detail2 dl {
display: flex;
flex-flow: row wrap;
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;
}


/*--======Detail Area=======--*/
.detail3{
width:100%;
padding:10px;
margin:0 auto;
margin-left:auto;
margin-right:auto;
}

.detail3 img{
text-align:left;
width:100%;
max-width:270px;
padding:5px;
}

.detail3 dl {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.detail3 dt {
flex-basis:30%;
padding: 10px;
border-bottom: 1px dotted #ccc;
font-size:1.2rem;
}
.detail3 dd {
flex-basis: 70%;
padding: 10px;
top-margin:20px;
background-color: #fff;
border-bottom: 1px dotted #ccc;
font-size:1rem;
line-height:1.5;
}

/*--=======NewsList1===========--*/
.news-list{
margin:0 auto;
width:100%;
}
.news-list li{
list-style:none;
padding:5px;
display:inline-block;
text-align:left;
}
.news-list li img{
width:100%;
}
.news-list a{
color:#000;
text-decoration:none;
}
.news-list span{
display:inline-block;
/*margin-right:20px;*/
padding:5px;
text-align:left;
}

.news-list p{
display:inline-block;
}
.news-list .new::after{
content:"NEW";
color:#cc3300;
font-size:0.8rem;
border:1px solid #d10606;
padding:4px 8px;
margin:0 0 0 20px;
display:inline-block;
line-height:1;
}
/*--======NewsList2=========--*/
.news-list2{
padding-bottom:100px;
}
.news-list2 .item{
display:flex;
flex-wrap:wrap;
border-bottom:1px dotted #000;
padding:20px 20px;
}
/*区切りドットライン*/
.news-list2 .item:first-child a{
border-top:1px dotted #000;
}
/*日付*/
.news-list2 .item .date{
margin:0;
min-width:100px;
color:#000;
font-size:1rem;
line-height:1.4;
}
/*カテゴリ*/
.news-list2 .item .category span{
background:#cc3300;
color:#fff;
font-size:0.8rem;
text-align:center;
/*display:inline-block;*/
padding:5px 10px;
border-radius:10px;
}
/*文章*/
.news-list2 .item .title{
font-size:1rem;
line-height:1.4;
padding-top:10px;
}
.prodetail{
font-size:1rem;
padding:20px;
}

/*写真*/
.news-list2 img{
float:left;
width:50%;
padding-top:10px;
padding-right:20px;
}
/*--======NewsList4=========--*/
.news-list4{
width:100%;
font-size:1rem;
line-height:1.2rem;
}
.news-list4 .item{
text-decoration:none;
list-style: none;
color:#000;
border-bottom:1px dotted #000;
padding:10px;
}
/*見出し*/
.news-list4 p.date{
padding-bottom:10px;
}
/*詳細*/
.news-list4 p.title{
font-size:0.9rem;
text-height:1.2;
}
/*--==========NewsList-3===========---*/
.news-list3{
list-style:none outside;
margin:0;
padding:0;
}
.news-list3 .item{
display:flex;
flex-wrap:wrap;
flex-wrap:norap;
text-decoration:none;
color:#000;
border-bottom:1px dotted #333;
padding:5px 5px;
}
.news-list3 .item:first-child a{
border-top:1px dotted #333;
}

.news-list3 .item .date{
margin:0;
min-width:140px;
color:#999;
padding:0 20px 0 0;
}

.news-list3 .item .category span{
background:#cc3300;
color:#fff;
text-align:center;
display:inline-block;
padding:5px 20px;
}
.news-list3 .item .title{
margin:0;
padding-top:10px;
width:100%;
}
.news-list3 .item a:hover .title{
color:#00f;
}
.news-list3 img{
width:50%;
padding-right:10px;
}


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

/*--=====Flexbox Catalogue=======--*/
.flexcatalog1{
width:70%;
display:block;
margin-left:auto;
margin-right:auto;
padding-top:30px;
}
.flexcatalog-item1{
width:50%;
background-color:#cc3300;
border-radius:10px;
padding:20px;
text-align:center;
color:#fff;
font-weight:bold;
}
<!--
.flexcatalog-item1 a{
color:#fff;
text-decoration:none;
font-weight:bold;
}
-->
.flexcatalog-item1:hover,
.flexcatalog-item1:active{
background-color:#ff0033;
}

/*--=======MV Area========--*/
.mv{
width:100%;
margin:0 auto;
margin-top:50px;
}

.mv ul li{
list-style:none;
display:list-item;
list-style-type:none;
text-transform:uppercase;
border-bottom:1px dotted #000;
padding:10px;
}

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

/*--=====Flexbox Catalogue3 NOT USE?=======--*/
.flexcatalog3{
width:80%;
display:flex;
flex-wrap:wrap;
margin-left:auto;
margin-right:auto;
padding-top:20px;
}
.flexcatalog-item3{
width:30%;
background-color:#cc3300;
border-radius:10px;
padding:10px;
margin:5px;
}
.flexcatalog-item3 a{
color:#fff;
text-decoration:none;
}
.flexcatalog-item3:hover,
.flexcatalog-item3:active{
background-color:#ff3300;
}

/*--=====Flexbox Catalogue4 NOT USE?=======--*/
.flexcatalog4{
width:80%;
display:flex;
flex-wrap:wrap;
margin-left:auto;
margin-right:auto;
padding-top:20px;
}
.flexcatalog-item4{
width:30%;
background-color:#cc3300;
border-radius:10px;
padding:10px;
margin:5px;
}
.flexcatalog-item4 a{
color:#fff;
text-decoration:none;
}
.flexcatalog-item4:hover,
.flexcatalog-item4:active{
background-color:#ff3300;
}

/*--=====Flexbox Catalogue5 NOT USE?=======--*/
.flexcatalog5{
width:80%;
display:block;
margin-left:auto;
margin-right:auto;
}
.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;
}




/*--======CATALOG BUTTON======--*/
.showcatalogue{
display:block;
margin:0 auto;
background:#cc3300;
width:60%;
max-width:500px;
border-radius:10px;
text-align:center;
color:#fff;
padding:20px 0;
left:0px;
box-shadow:1px 1px 5px #888;
margin-top:40px;
margin-bottom:40px;
}
.showcatalogue:hover,.showcatalogue:active{
background-color:#993333;
color:#fff;
}
/*--====================NOT USE?=====--*/
.showcatalogue2{
width:60%;
max-width:500px;
margin-top:40px;
margin-bottom:40px;
}
.showcatalogue2 ul{
display:flex;
flex-direction:row;
justify-content:center;
margin:-10px;
}
.showcatalogue2 ul li{
list-style:none;
background:#cc3300;
width:50%;
max-width:300px;
border-radius:10px;
font-size:0.8rem;
text-align:center;
color:#fff;
padding:20px 0;
box-shadow:1px 1px 5px #888;
margin-left:10px;
}
.showcatalogue2 ul li a{
color:#fff;
text-decoration:none;
}
.showcatalogue2 ul li:hover,
.showcatalogue2 ul li:active{
background-color:#993333;
color:#fff;
}
/*--===================NOT USE?======--*/
.showcatalogue3{
max-width:1000px;
margin-top:20px;
margin-bottom:40px;
}
.showcatalogue3 ul{
display:flex;
flex-direction:row;
justify-content:center;
}
.showcatalogue3 ul li{
list-style:none;
background:#cc3300;
border-radius:10px;
font-size:0.8rem;
text-align:center;
color:#fff;
padding:20px;
box-shadow:1px 1px 5px #888;
margin-left:10px;
}
.showcatalogue3 ul li a{
color:#fff;
text-decoration:none;
}
.showcatalogue3:hover,
.showcatalogue3:active{
background-color:#993333;
color:#fff;
}

.emp{
padding-bottom:100px;
}

.emp2{
padding-bottom:20px;
}

/*--============PAGE-TOP Button=======--*/
#page-top{
position:fixed;
z-index:999;
bottom:0;
right:0;
background:#333;
min-width:30px;
min-height:30px;
text-align:center;
color:#fff;
border-radius:20%;
bottom:5%;
right:15px;
}

/*--========FOTTER=========--*/
#footer{
position:relative;
display:block;
top:250px;
width:100%;
height:70px;
padding:10px;
background:#cc3300;
text-align:center;
}

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





/*--======詳細：横２列 ソフトウェアトップ・ rmpi===NOT USE?==--*/
.detail-parent{
display:flex;
flex-wrap:wrap;
}
.detail-item{
width:50%;
}
.detail-parent2{
padding:0 20px 20px 20px;
display:flex;
flex-wrap:nowrap;
flex-direction:row;
}
.detail-item2{
width:100%;
box-sizing:border-box;
font-size:0.8rem;
line-height:1.5;
}


/*nil tech--NOT USE?*/
.item3-inner{
border-bottom:1px dotted #000;
margin:10px;
}