@charset "utf-8";


/* -- ul#menu -------------------------------------------------------------------------------- */

ul#menu {
	list-style-type: none;
	width: 100%;
	background: #454345;
	opacity: 0.9;
	position: absolute;
	left: 0px;
	top: 80px;
	z-index: 990;
	display: none;
}

ul#menu li {
	text-align: center;
	line-height:16px;
}

ul#menu li a {
	color:white;
	text-decoration: none;
	display: block;
	padding: 15px 0;
	margin:0px;
}

ul#menu li a:hover {
	background: #a9a9a9;
	opacity: 0.7;
}

div#wrap{
	display: flex;
	flex-flow: column;
	min-height: 100vh;
	margin:0px;
	width:100%;
}

div#pccentering{
	flex: 1;
	margin:0 auto;
	width:1000px;
	background-color:white;
	//border-left:dotted 1px;
	//border-right:dotted 1px;
	
}

div#footer{
	height:60px;
	width:1000px;
	border-top:thin solid #cccccc;
	text-align:center;
	color:#cccccc;
}
div#footerleft{
	width:90px:
	float:left;
	background-color: red;
}
div#footerright{
	width:90px:
	float:left;
	background-color: green;
}

pre{
	font-size:10px;
}

div.underconstruction{
	width:100%;
	color:#cccccc;
	text-align:center;
	
}
.summary{
	box-sizing:  content-box;
	width:70%;
	float:left;
	padding-left:5px;
	padding-top:0px;
	border-left: thin solid #cccccc;
	overflow-wrap : break-word;
	margin-bottom:30px;
	font-size:12px;
}
.items{
	width:20%;
	box-sizing:  content-box;
	float:left;
	padding-right:5px;
	padding-top:0px;
	text-align:right;
	font-size:12px;
}

.oneitem{
	clear:both;
	padding:5px;
	margin-bottom:10px;
}


div.centering{
	width:100%;
	text-align:center;
}

.onetitle{
	margin-top:10px;
	font-size:18px;
	font-weight:bold;
}
.onetext{
	font-size:14px;
}
	
	/* ------------------- contact ------------------------ */

	div.onecontact{
		margin:0 auto;
		border-left:solid thin #cccccc;
		border-right:solid thin #cccccc;
		border-top:solid thin #cccccc;
		padding:0px;
	}

	div.onecontactend{
		margin:0 auto;
		border-top:solid thin #cccccc;
	}
	span.comment{
		color:#7E86AB;
		font-size:12px;
	}
	
	div.contactbreak{
		clear:both;
	}
	
	div#formarea{
		padding-top:20px;
		padding-left:20px;
		padding-right:20px;
		color:#595959;
		background-color:white;
	}
	

	input.contactinput{
		height:30px;
		font-size:14px;
		margin-bottom:0px;
	}

	div#usertypelabel{
		height:100px;
		width:30%;
		border-right:solid thin #cccccc;
		float:left;
		
	}
	
	div#usertype{
		
		text-align:left;
		padding-top:5px;
		padding-bottom:5px;
		padding-left:10px;
		float:left;
		
	}
	
	div#categorylabel{
		padding-top:10px;
		background-color:white;
		border-right:solid thin #cccccc;
		width:30%;
		height:230px;
		float:left;
	}
	
	div#category{
		padding-left:10px;
		text-align:left;
		box-sizing: border-box;
		
		padding-right:5px;
		padding-right:5px;
		padding-top:5px;
		padding-bottom:10px;
		background-color:white;
		float:left;
	}

	td.categorytd{
		padding-top:2px;
		padding-bottom:2px;
	}
	
	label{
		padding-left:5px;
	}
	
	div#contactcontentlabel{
		border-right:solid thin #cccccc;
		padding-top:10px;
		width:30%;
		float:left;
		height:600px;
		background-color:white;
	}
	div#contactcontent{
		width:650px;
		padding-top:10px;
		padding-left:10px;
		padding-bottom:0px;
		text-align:left;
		float:left;
	}

	
	textarea{
		width:600px;
		padding:0px;
		padding-bottom:20px;
		font-size:14px;
		resize: none;
	}
	
		
	div#usernamelabel{
		border-right:solid thin #cccccc;
		width:30%;
		padding-top:10px;
		height:70px;
		float:left
	}
	
	div#username{
		text-align:left;
		padding-top:5px;
		padding-left:10px;
		float:left;
	}
	

	div#pronouncelabel{
		border-right:solid thin #cccccc;
		height:70px;
		padding-top:10px;
		width:30%;
		float:left;
	}	
	div#pronounce{
		text-align:left;
		padding-top:5px;
		padding-left:10px;
		float:left;
	}


	div#companylabel{
		border-right:solid thin #cccccc;
		height:50px;
		padding-top:10px;
		width:30%;
		float:left;
	}
	div#company{
		padding-top:10px;
		padding-left:10px;
		float:left;
	}
	
		
	div#mailaddresslabel{
		border-right:solid thin #cccccc;
		height:35px;
		padding-top:10px;
		width:30%;
		float:left;	
	}
	div#mailaddresslabel2{
		
		border-right:solid thin #cccccc;
		height:55px;
		padding-top:10px;
		width:30%;
		float:left;	
	}
	div#mailaddress{
		padding-top:10px;
		padding-left:10px;
		paddin-bottom:0px;
		float:left;
	}
	div#mailaddress2{
		text-align:left;
		
		padding-top:0px;
		padding-left:10px;
		float:left;
	}
	div#telephonelabel{
		border-right:solid thin #cccccc;
		height:50px;
		padding-top:10px;
		width:30%;
		float:left;	
	}
	div#telnum{
		padding-top:10px;
		padding-left:10px;
		float:left;
	}
		
	div.mailform{
		padding-top:10px;
		padding-bottom:10px;
	}
	div#ziplabel{
		border-right:solid thin #cccccc;
		height:50px;
		padding-top:10px;
		width:30%;
		float:left;	
	}
	div#zip{
		padding-top:10px;
		padding-left:10px;
		float:left;
	}
	
	div#statelabel{
		border-right:solid thin #cccccc;
		height:60px;
		padding-top:10px;
		width:30%;
		float:left;	
	}
	div#state{
		padding-top:10px;
		padding-left:10px;
		float:left;
	}

	div#address1label{
		border-right:solid thin #cccccc;
		height:50px;
		padding-top:10px;
		width:30%;
		float:left;	
	}
	div#address1{
		padding-top:10px;
		padding-left:10px;
		float:left;
	}
	
	div#address2label{
		border-right:solid thin #cccccc;
		height:50px;
		padding-top:10px;
		width:30%;
		float:left;	
	}
	div#address2{
		padding-top:10px;
		padding-left:10px;
		float:left;
	}	

	div#address3label{
		border-right:solid thin #cccccc;
		height:50px;
		padding-top:10px;
		width:30%;
		float:left;	
	}
	div#address3{
		padding-top:10px;
		padding-left:10px;
		float:left;
	}
		
	div#submitbtn{
		width:100%;
		margin-top:10px;
		text-align:center;
		margin-bottom:50px;
	}
	div#contactcontent{
		margin-bottom:30px;
	}

	

	div.centering{
		width:100%;
		text-align:center;
	}
	input.submitbtn{
		width:240px;
		height:80px;
		font-size:20px;
	}
	select#stateselect{
		width:200px;
		height:60px;
		font-size:20px;
	}
	input.contactinput{
		padding-left:5px;
		padding-bottom:0px;
	}
	
	span.require{
		background-color:red;
		color:white;
		font-size:11px;
		padding-left:4px;
		padding-right:4px;
		margin-left:3px;
	}
	
	//------------------------------------------------------------------------	
	
div#maintitle{
	//font-size:20px;
	margin-bottom:10px;
	font-weight:bold;
	color:#47474D;
}

div.subtitle{
	
	font-weight:bold;
	margin-bottom:10px;
	font-size:22px;
	padding:2px;
}
div#pagecontent{
	margin:0 auto;
	padding:10px;
	color:#6B6B6B;
	width:800px;

}

div.onetopic{
	padding-bottom:20px;
	
}
div.subtopic{
	font-weight:bold;
	background-color:#8A8A8A;
	color:white;
	padding-left:8px;
	padding-top:8px;
	padding-bottom:8px;
	margin-bottom:5px;
	font-size:20px;
}

div.telinfo{
	background-color:#FFEDF1;
	width:100%;
	text-align:center;
	margin-bottom:10px;
	margin-top:5px;
	padding-bottom:5px;
	padding-top:5px;
}
a.tel:link{
	text-decoration:none;
	color:#EA4900;
}

div#contents{
 	text-align:left;padding-left:10px;vertical-align:bottom;color:white; padding-top:10px;padding-bottom:10px;height:80px;
 }

div#toppagecontent{
	padding-top:0px;
}
div#icontext{
	padding-left:5px;
	padding-top:25px;
	
	float:left;
}
div#contenticon{
	float:left;
}

div#reformkitchen{
	width:50%;
	height:200px;
	background-color:black;
	background-image: url("/img/kitchen.jpg");
	
}
div.otherequipment{
	background-color:#B5B5BA;
	width:400px;
	color:white;
	height:30px;
	padding-top:10px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	margin-bottom:10px;
}
div#telephone{
	width:100%;
	text-align:center;
	font-family:'M PLUS Rounded 1c',;
	font-size:40px;
}

div#errormsg{
	color:red;
	padding-bottom:10px;
}

ul.standard{
margin:16px 0;

padding-left:20px;
}

li.standard{
		display:list-item;
}

.linkimg{
	border:thin solid #cccccc;
}
a:link{text-decoration:none; color:#FC4C2D;}

a:visited{text-decoration:none; color:#FC4C2D;}

div.onetrouble{
	width:100%;
	text-align:center;
	color:white;
	padding-top:35px;
	font-size:18px;
	text-decoration:none;
	margin-bottom:2px;
	background-color:#727EA3;
	box-sizing: border-box;
	height:100px;
}

div.dotline{
	width:100%;
	border-top:dotted;
	margin-bottom:30px;
	margin-top:20px;
}

p.comment{
	font-size:12px;
	
}

p.attention{
	text-decoration:underline;
	font-weight:bold;
}

div.underline{
	text-decoration:underline;
}

div.notebox{
width:90%;
background-color:#FCEDF7;
padding:10px;
margin:0 auto;
	
}

div.indent{
	padding-left:10px;
}
div#trouble1 {
	display:none;
}
div#trouble2 {
	display:none;
}
div#trouble3 {
	display:none;
}
div#trouble4 {
	display:none;
}

.curled-box {
	box-sizing: border-box;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	background-color:#6D88C2;
	color:white;
	text-align:center;
	padding-top:25px;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
}


.topic{
	height:100px;
	padding-top:25px;
	box-sizing: border-box;
	text-decoration:underline;
	font-weight:bold;
}


/* -- div#sp-icon -------------------------------------------------------------------------------- */

div#sp-icon {
	margin:0px;
	padding:0px;
	width: 70px;
	height: 70px;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	box-sizing: border-box;
	display:none;
}

div#sp-icon:hover {
	cursor: pointer;
	opacity: 0.7;
}

div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
	display: inline-block;
	width: 30px;
	height: 3px;
	background:#cccccc;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.3s;
}

div#sp-icon span {
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
}

div#sp-icon span:before {
	content: "";
	transform: translateY( -10px ) rotate( 0deg );
}

div#sp-icon span:after {
	content: "";
	transform: translateY( 10px ) rotate( 0deg );
}


div.sp-open span {
	background: transparent !important;
}

div.sp-open span:before {
	transform: rotate( 45deg ) !important;
}

div.sp-open span:after {
	transform: rotate( -45deg ) !important;
}

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

div#sitename{
		cursor:pointer;
		padding-top:15px;
		padding-left:40px;
		color:#949494;
		font-size:12px;
		line-height:20px;
		background-color:white;
		padding-bottom:0px;
		float:left;
		
}


div#leftcolumn{
	width:300px;
	float:left;
	background-color:white;
	margin-right:5px;
	height:800px;
	position:fixed;
	padding-left:10px;
}
div#pcmenu{
	margin-top:0px;
	padding-top:20px;
	padding-left:30px;
	position:relative;
	margin-bottom:10px;
	padding-bottom:0px;
	background-color:white;
	display: inline-block;
	float:left;
}

div#pcmenu1{
	width:100%;
	background-color:white;
	margin:0 auto;
	display: inline-block;
	text-align:center;
	margin-bottom:0px;
	padding-bottom:0px;
}
div#pcmenu2{
	padding-top:0px;
	margin:0 auto;
	background-color:white;
	display: inline-block;
	padding-left:90px;	
}

p.onemenu{
	font-size:11px;
	width:130px;
	text-align:center;
	float:left;
	white-space:nowrap;
	margin-left:2px;
	margin-right:2px;
	background-color:#686DAD;
	padding-top:5px;
	padding-bottom:5px;
	margin-bottom:2px;
	display: inline-block;
	color:#ffffff;
	//background: linear-gradient(45deg,#3B3F63,#7B85D1);
	border:thin solid;
}

p.onemenu a {
	color:#ffffff;
	position: relative;
	display: inline-block;
	transition: .3s;

}

p.onemenu a::after {
	color:#cccccc;
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #ffffff;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
p.onemenu a:hover::after {
  width: 100%;

}



body{
	font-family: 'Sawarabi Gothic', sans-serif;
	margin:0px;
	padding:0px;
	background-color:#cccccc;
}

div#swipeup{
	width:100%;
	padding-top:60px;
	text-align:center;
	box-sizing: border-box;
	display:none;
}

div#header{
	width:100%;
	/* background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); */
	background:white;
	//position:fixed;
	z-index:1;
	top:0;
	margin:0px;

}

div#contentsmenu{
	width:200px;
	height:100%;
	font-size:12px;
	background-color:white;
	padding:10px;
	text-align:right;
}
div.onecontentmenu{
	margin-top:10px;
	display: inline-block;
}


div#contents{
	margin-top:90px;
	z-index:0;

}

div#contentstitle{
	margin-top:0px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:30px;
	z-index:0;
	color:white;

}



#sitenametext{
		padding-top:8px;
		padding-left:20px;
		line-height:10px;
		padding-top:5px;
		font-size:18px;
		display:none;
}


.linkbtn{
	text-align:center;
	position:absolute;
	font-size:12px;
	font-weight:bold;
	width:100%;
	background-color:black;
	opacity:0.4;
	height:30px;
	padding-top:5px;
	text-align:center;
	box-sizing: border-box;
	margin:auto;
	cursor:pointer;
	bottom:40px;
}


.linkbtn2{
	
	position:absolute;
	font-size:12px;
	font-weight:bold;
	width:90%;
	background-color:black;
	opacity:0.4;
	height:30px;
	padding-top:5px;
	text-align:center;
	box-sizing: border-box;
	cursor:pointer;
	bottom:40px;
}

.linkbtn a:hover {
	background: #a9a9a9;
	opacity: 0.7;
}


/* -- DELIGHTERS -------------------------------------------------------------------------------- */

.topcolum.delighter {
	
	font-family: 'Lexend Giga', sans-serif;
	padding:18px;
	margin-top:50px;
	width:100%;
	height:150px;
	font-size:40px;
	background-color:#ffffff;
	color:#878387
	transition: all .3s ease-out;
	opacity: 1;
	box-sizing: border-box;
	float:left;
}

.topcolum.delighter.started {
      opacity: 1;
}

.topcolum.delighter.started.ended {
      opacity: 0.1;
}

/* -- REFORM -------------------------------------------------------------------------------- */
.reform.delighter {
	cursor:pointer;
	position:relative;
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding-top:30px;
	color:white;
	width:50%;
	height:580px;
	font-size:29px;
	background-color:#379DA1;
      transition: all .3s ease-out;
      opacity: 1;
      box-sizing: border-box;
    float:left;
}

.reform.delighter.started {
      opacity: 1;
}

.reform.delighter.started.ended {
      opacity: 1;
}


/* -- TROUBLE -------------------------------------------------------------------------------- */
.trouble.delighter {
	cursor:pointer;
	position:relative;
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding-top:30px;
	color:white;
	width:50%;
	font-size:26px;
	background-color:#D9114D;
	transition: all .3s ease-out;
	opacity: 1;
	box-sizing: border-box;
	float:left;
	height:580px;
    
}

.trouble.delighter.started {
      opacity: 1;
}

.trouble.delighter.started.ended {
      opacity: 1;
}

.pcbreak{
	clear:left;
}

.lpgas.delighter {
	cursor:pointer;
	position:relative;
	font-family: 'Lexend Giga', sans-serif;
	padding-top:30px;
	color:white;
	width:50%;
	
	font-size:32px;
	background-color:#FDA637;
      transition: all .3s ease-out;
      opacity: 1;
      box-sizing: border-box;
      text-align:center;
      float:left;
      height:580px;
}

.lpgas.delighter.started {
      opacity: 1;
}

.lpgas.delighter.started.ended {
      opacity: 1;
}

.equipment.delighter {
	cursor:pointer;
	position:relative;
	font-family: 'Lexend Giga', sans-serif;
	padding-top:30px;
	color:white;
	width:50%;
	font-size:20px;
	background-color:#64A108;
      transition: all .3s ease-out;
      opacity: 1;
      box-sizing: border-box;
      text-align:center;
      float:left;
      height:580px;
}

.equipment.delighter.started {
      opacity: 1;
}

.equipment.delighter.started.ended {
      opacity: 1;
}

.moving.delighter {
	cursor:pointer;
	position:relative;
	font-family: 'Lexend Giga', sans-serif;
	padding-top:30px;
	color:white;
	width:50%;
	font-size:28px;
	background-color:#EA4900;
      transition: all .3s ease-out;
      opacity: 1;
      box-sizing: border-box;
      text-align:center;
      float:left;
      height:580px;
}

.moving.delighter.started {
      opacity: 1;
}

.moving.delighter.started.ended {
      opacity: 1;
}

.disaster.delighter {
	cursor:pointer;
	position:relative;
	font-family: 'Lexend Giga', sans-serif;
	padding-top:30px;
	color:white;
	width:50%;
	font-size:24px;
	background-color:#AD50AC;
      transition: all .3s ease-out;
      opacity: 1;
      box-sizing: border-box;
      text-align:center;
      float:left;
      height:580px;
}

.disaster.delighter.started {
      opacity: 1;
}

.disaster.delighter.started.ended {
      opacity: 1;
}

.maintenance.delighter {
	cursor:pointer;
	position:relative;
	font-family: 'Lexend Giga', sans-serif;
	padding-top:30px;
	color:white;
	width:50%;
	font-size:16px;
	line-height:30px;
	background-color:#28AD74;
      transition: all .3s ease-out;
      opacity: 1;
      box-sizing: border-box;
      text-align:center;
      float:left;
      height:580px;
}

.maintenance.delighter.started {
      opacity: 1;
}

.maintenance.delighter.started.ended {
      opacity: 1;
}


.faq.delighter {
	cursor:pointer;
	position:relative;
	font-family: 'Lexend Giga', sans-serif;
	padding-top:30px;
	color:white;
	width:50%;
	font-size:30px;
	background-color:#958FCC;
      transition: all .3s ease-out;
      opacity: 1;
      box-sizing: border-box;
      text-align:center;
      float:left;
      height:580px;
}

.faq.delighter.started {
      opacity: 1;
}

.faq.delighter.started.ended {
      opacity: 1;
}

.company.delighter {
	cursor:pointer;
	position:relative;
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding-top:30px;
	color:white;
	width:50%;
	height:500px;
	font-size:24px;
	background-color:#C1C1C7;
      transition: all .3s ease-out;
      opacity: 1;
      box-sizing: border-box;
      float:left;
}

.company.delighter.started {
      opacity: 1;
}

.company.delighter.started.ended {
      opacity: 1;
}


.contact.delighter {
	cursor:pointer;
	position:relative;
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding-top:30px;
	color:white;
	width:50%;
	height:500px;
	font-size:24px;
	background-color:#E66EA4;
      transition: all .3s ease-out;
      opacity: 1;
      box-sizing: border-box;
      float:left;
}

.contact.delighter.started {
      opacity: 1;
}

.contact.delighter.started.ended {
      opacity: 1;
}

.delighter.right { transform-origin:0 0; transform:rotateZ(120deg); opacity:0; transition: all .5s ease-out .2s; }
.delighter.right.started { transform:none; opacity:0.5; }

.delighter.right2 { transform:translate(-100%); opacity:0; transition: all 1s ease-out .2s; }
.delighter.right2.started { transform:none; opacity:1; }

.delighter.left {transform:translate(60%); opacity:0; transition: all .8s ease-out .6s; }
.delighter.left.started { transform:none; opacity:1; }

.delighter.lefttitle {
	margin-top:10px;
	font-size:18px;
	font-weight:bold;
	transform:translate(60%);
	opacity:0;
	transition: all 1.8s ease-out .6s;
}
.delighter.lefttitle.started { transform:none; opacity:1; }


.delighter.linkbtn { opacity:0; transition: all .8s ease-out .6s; }
.delighter.linkbtn.started { transform:none; opacity:1; }
		
		
.delighter li { line-height:40px;list-style-type: none; opacity: 0; transform: translatey(600%); transition: all .7s ease-out; }
.delighter.started li { opacity: 1; transform: none; }
.delighter.started li:nth-child(1) { transition: all .7s ease-out .1s; }
.delighter.started li:nth-child(2) { transition: all .7s ease-out .3s; }
.delighter.started li:nth-child(3) { transition: all .7s ease-out .5s; }
.delighter.started li:nth-child(4) { transition: all .7s ease-out .7s; }
.delighter.started li:nth-child(5) { transition: all .7s ease-out .9s; }
.delighter.started li:nth-child(6) { transition: all .7s ease-out 1.1s; }
.delighter.started li:nth-child(7) { transition: all .7s ease-out 1.3s; }