@charset "utf-8";
/* CSS Document */



.main {
    background: url(imgs/main01.png) no-repeat center center;
    background-size: 100% auto;
}


.fastclean_flex {
width: 795px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}

.fastclean_flex a {
width: calc(50% - 3px);
margin-bottom: 6px;
}

.fastclean_flex a div {
display: table;
width: 100%;
box-sizing: border-box;
position: relative;
}

.fastclean_flex a div h3{
text-align: center;
display: table-cell;
height: 250px;
vertical-align: middle;
color: #fff;
z-index: 9;
}



.fastclean_flex a div.lineup{
background: #cecbc5;
background: url("imgs/c_lineup.png") no-repeat center center;
background-size: 100% auto;
}
.fastclean_flex a:hover div.lineup{
background: url(imgs/c_lineup.png) no-repeat center center;
background-color: rgba(255, 255, 255, 0.3); /* 白を70%透過 */
background-size: 100% auto;
}

.fastclean_flex a div.bio{
background: #cecbc5;
background: url("imgs/c_bio.png") no-repeat bottom center!important;
background-size: 100% auto;
}

.fastclean_flex a:hover div.bio{
background: url("imgs/c_bio.png") no-repeat bottom center!important;
background-color: rgba(255, 255, 255, 0.3)!important; /* 白を70%透過 */
background-size: 100% auto;
}


.fastclean_flex a div.bio{
background: #cecbc5;
}


.fastclean_flex a:nth-child(n+3) div{/*3番目以降*/
background: #fff ;
border: solid #333 1px;
}

.fastclean_flex a:nth-child(n+3) div h3{/*3番目以降*/
color: #333;
}
.fastclean_flex a:nth-child(n+3) div:hover{
background: #f0f0f0 ;
}

@media only screen and (max-width:840px){
.fastclean_flex {
	width: 96%;
	}
.fastclean_flex a div h3{
height: 150px;
}
}

@media only screen and (max-width:480px){
.fastclean_flex {
width: 90%;
display: block;
}
.fastclean_flex a div{
margin-bottom: 10px;
}
}






/* cleaning */

.cleaning .flexbox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.cleaning .flexbox div:nth-child(1){
width: calc( 100% - 20em );
margin-bottom: 40px;
}

.cleaning .flexbox div h3{
padding: 5px 1em;
border: solid #333 1px;
display: inline-block;
margin-bottom: 15px;
}


@media only screen and (max-width:880px){
.cleaning .flexbox {
display: block;
}
.cleaning .flexbox div:nth-child(1),
.cleaning .flexbox div{
	width: 100%;
	}

}





/*--- cleaning------------*/


.tbl_cleaning ,
.tbl_cleaning th,
.tbl_cleaning td{
margin-left: -20px;
border-spacing: 20px 10px!important;
border-collapse: separate!important;
/*box-sizing: border-box;*/
}
.tbl_cleaning th{
vertical-align: middle;
}
.tbl_cleaning td{
vertical-align: top;
}
.tbl_cleaning {
width: 100%;
table-layout: fixed;
}
.tbl_cleaning th:nth-child(2),
.tbl_cleaning th:nth-child(3){
border-top: solid 5px #333;
}
.tbl_cleaning th:nth-child(3){
border-top: solid 5px #8e8e8e;
color: #8e8e8e;
}

.tbl_cleaning th:nth-child(1),
.tbl_cleaning td:nth-child(1){
width: 5em;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.tbl_cleaning td:nth-child(1){
font-size: 20px;
vertical-align: bottom;
}

@media screen and (max-width: 480px) {
.tbl_cleaning td:nth-child(1){
font-size: 16px;
padding: 0;
}
}

.tbl_cleaning td:nth-child(2),
.tbl_cleaning td:nth-child(3){
position: relative;
/* width:calc( calc(100% - 5em) / 2 ); */
}
.tbl_cleaning td:nth-child(2) span,
.tbl_cleaning td:nth-child(3) span{
position: absolute;
text-align: center;
width: 4em;
color: #fff;
font-size: 20px;
display: block;
background:rgba(0,0,0,0.8);
top:0.5px;
left: 0;
z-index: 3;
padding: 5px;
}
.tbl_cleaning td:nth-child(2) img,
.tbl_cleaning td:nth-child(3) img{
object-fit: cover;
vertical-align: bottom;
}

.tbl_cleaning td:nth-child(2) p,
.tbl_cleaning td:nth-child(3) p{
text-align: left;
position: absolute;
color: #fff;
bottom:10px;
left:15px;
z-index:2;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
}

.tbl_cleaning td.end01{
text-align: center;
vertical-align: middle;
box-sizing: border-box;
}
.tbl_cleaning td.end01 div{
display: flex;
justify-content: center;
align-items: center;
border: solid 8px #d4d5d5;
aspect-ratio: 3 / 1.16;
box-sizing: border-box;
}

@media only screen and (max-width:1100px){
.tbl_cleaning td.end01 div p b.f200{
font-size: 1.1em;
}
}

.tbl_cleaning td.end01 p{
position: revert-layer;
color: #333;
text-align: center;
font-size:20px;
padding: 20px;
text-shadow : none;
}



@keyframes clarrow {
  50% {
    transform: translate(60px,0)
  }
}
@keyframes crarrow {
  50% {
    transform: translate(-60px,0)
  }
}


.sctxt {
display: none;
}

@media only screen and (max-width:880px){
.sctxt {
margin-top: 1em;
display: block;
background: #eee;
padding: 5px 1em;
width: 850px
}

.cl_arrow{
	display:inline-block;
	margin-left:0px;
  animation: clarrow 4s infinite;
}

.tbl_scroll{
overflow: auto;
overflow-x: scroll;
padding: 5px;
border-right: solid 1px #eee;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
.tbl_cleaning {
width:860px
}
.keika{
font-size: 10px;
}
.tbl_cleaning th:nth-child(1){
padding: 1px;
}
}

/*--- lineup------------*/










.tbl_lineup {
width: 100%;
border-top: solid 1px #ccc;
border-collapse:separate;
}
.tbl_lineup thead{
position: sticky;
z-index: 9;
top:80px;
left: 0;
background-color: #fff;
}
@media only screen and (max-width:450px){
.tbl_lineup thead{
top:63px;
}
}


.tbl_lineup th,
.tbl_lineup td{
border-bottom: dotted 1px #ccc;
border-left: solid 1px #ccc;
vertical-align: middle;
text-align: center;
padding: 5px;
}
.tbl_lineup th{
border-bottom: solid 1px #ccc;
text-align: center;
}

.tbl_lineup th{
line-height: 1.3em;
}
.tbl_lineup ,
.tbl_lineup th:nth-child(1), 
.tbl_lineup td:nth-child(1) {
text-align: left;
border-left: none;
}
.tbl_lineup td:nth-child(1) {
font-weight: 300;
}

.tbl_lineup td:nth-child(1) strong{
font-weight: 600;
font-size: 1.1em;
}


.tbl_lineup tr:nth-child(2) th:nth-child(1){
border-left: solid 1px #ccc;
text-align: center;
}

.tbl_lineup td:nth-child(2),
.tbl_lineup td:nth-child(3),
.tbl_lineup td:nth-child(4),
.tbl_lineup td:nth-child(5){
width:8%;
}

.tbl_lineup td:nth-child(1) img{
margin-top: 10px;
}
.tbl_lineup td:nth-child(1) a{
pointer-events:none; 
}



@media only screen and (max-width:600px){
.tbl_lineup{
font-size: 13px;
}
.tbl_lineup td:nth-child(1) {
width: 30%;
line-height: 1.3;
}
.tbl_lineup td:nth-child(1) a{
pointer-events:auto; 
}

.tbl_lineup td:nth-child(1) img{
border: solid 1px #111;
}
.tbl_lineup td:nth-child(1) a::after {
  content: "↑画像クリックで拡大されます";
		font-size:90%;
		line-height: 1.3em;
}

.tbl_lineup tr:nth-child(2) th{
/*縦書きにする*/
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
  word-break: break-all;
}
}

#cboxLoadedContent{ padding-top:40px; width: 100%;}
#cboxClose{ top:5px; right:5px; }

@media only screen and (max-width:450px){
#cboxContent::after {
content: "スクロールします→"!important;
position: absolute!important;
top: 5px;
right: 40px;
width: 9em;
font-size:90%;
}
}


/*--使⽤方法--*/

.ttl_howto{
background: #000;
padding:5px 15px;
color: #fff;
font-size: 1.2em;
}

.tbl_work_procedure{
border-spacing: 40px!important;
border-collapse: separate!important;
width: calc( 100% + 40px );
margin-left: -40px;
}
@media only screen and (max-width: 880px){
.tbl_work_procedure{
width: calc( 900px + 40px );
}
}
.tbl_work_procedure th{
width: 49%;
}

.tbl_work_procedure th h3{
width: 100%;
padding: 10px;
border: solid #ccc 1px;
vertical-align: middle;
}
.tbl_work_procedure td{
background: url("imgs/howto_bline.svg") no-repeat bottom center;
}
.tbl_work_procedure tr:last-child td{
background: none;
text-align: center;
padding: 0;
}
.tbl_work_procedure tr:last-child td p{
margin-top: -30px;
font-weight: 600;
font-size: 1.1em;
}

.tbl_work_procedure td div{
padding: 10px 0;
}
.tbl_work_procedure td div.bline{
background: url("imgs/howto_bline.svg") no-repeat bottom center;
margin-bottom: 20px;
}
.tbl_work_procedure td p.icon01{
position: relative;
padding-left: 15px;
}

.tbl_work_procedure td p.icon01::before {
content: "";
position: absolute;
top: 8px;
left: 0;
width: 10px;
height: 10px;
background-color: #999;
border-radius: 50%;
}

.tbl_work_procedure td p{
position: relative;
}

/*---*/

table.tbl_howto{
margin:15px 0;
width:45%;
}
table.tbl_howto th,
table.tbl_howto td {
border: 1px solid #CCC;
border-collapse: collapse;
padding:10px;
text-align:center;
vertical-align:middle;
}
table.tbl_howto th{
	background-color:#5a5a5a;
	color:#fff;
}


@media screen and (max-width: 450px) {
table.tbl_howto{
float: none;
margin:10px auto 15px;
width: 100%;
font-size:90%;
}
}

/*--メカニズム--*/

.mechanism_flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.mechanism_flex div:nth-child(1){
width: 62%;
}
.mechanism_flex div:nth-child(2){
width: 35%;
}

@media only screen and (max-width: 880px){
.mechanism_flex,
.mechanism_flex div:nth-child(1),
.mechanism_flex div:nth-child(2){
width: 100%;
display: block;
margin-bottom: 15px;
}

}