@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;
	box-sizing:  content-box;
}

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

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

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



body{
	font-family : Arial,'ＭＳ Ｐゴシック',sans-serif ;
	margin:0px;
	padding:0px;
}


div#footer{
	border-top:thin solid #cccccc;
	padding-top:10px;
	text-align:center;
	padding-bottom:20px;
	color:#cccccc;
}

div#pccentering{
	
}
.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#formarea{
		padding-top:20px;
		margin-left:20px;
		margin-right:20px;
		color:#595959;
		background-color:white;
	}
	
	input.contactinput{
		height:30px;
		font-size:14px;
	}
	div#custommertype{
		width:100%;
		text-align:center;
		border:solid thin gray;
		padding-top:5px;
		padding-bottom:5px;
	}
	
	div#categorylabel{
		margin-top:20px;
		margin-bottom:5px;
	}
	div#category{
		width:100%;
		box-sizing: border-box;
		border:solid thin gray;
		padding-left:5px;
		padding-right:5px;
		padding-top:5px;
		padding-bottom:5px;
	}


	div#contactcontentlabel{
		margin-top:20px;
		margin-bottom:5px;
	}	
	div#contactcontent{
		margin-bottom:30px;
	}
	
	
	td.categorytd{
		padding-top:2px;
		padding-bottom:2px;
	}
	
	textarea{
		font-family : inherit;
		font-size   : 100%;
		width:100%;
		height:300px;
	}
	
	div#username{
		margin-bottom:10px;
	}
	div#pronounce{
		margin-bottom:10px;
	}
	div#company{
		margin-bottom:10px;
	}
	div#submitbtn{
		width:100%;
		margin-top:10px;
		text-align:center;
		margin-bottom:10px;
	}

	div#telephonelabel{
		margin-top:10px;
	}

	div#ziplabel{
		margin-top:10px;
	}
	
	div#statelabel{
		margin-top:10px;
	}

	div#address1label{
		margin-top:10px;
	}
	div#address2label{
		margin-top:10px;
	}
	div#address3label{
		margin-top:10px;
	}
	
	div#errormsg{
		width:100%;
		text-align:center;
		color:red;
		padding-bottom:10px;
	}
		
	input.submitbtn{
		width:200px;
		height:50px;
		font-size:14px;
	}
	select#stateselect{
		width:200px;
		height:45px;
		font-size:14px;
	}
	input.contactinput{
		padding-left:5px;
	}
	
	span.require{
		background-color:red;
		color:white;
		font-size:11px;
		padding-left:4px;
		padding-right:4px;
		margin-left:3px;
	}

//-------------------------------------------

	.onetitle{
		margin-top:10px;
		font-size:18px;
		font-weight:bold;
	}
	.onetext{
		font-size:14px;
	}
	
div.illustration{
	width:100%;
	text-align:center;
	background-color:white;
}
	
div#maintitle{
	//font-size:20px;
	margin-bottom:10px;
	font-weight:bold;
	color:#47474D;
}

div.subtitle{
	margin-bottom:10px;
	font-size:20px;
	padding:2px;
}
div#pagecontent{

	padding:10px;
	color:#6B6B6B;

}

div.onetopic{
	padding-bottom:20px;
	
}
div.subtopic{
	font-weight:bold;
	background-color:gray;
	color:white;
	padding-left:5px;
	padding-top:2px;
	padding-bottom:2px;
	margin-bottom:5px;
}

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:20px;padding-bottom:10px;height:80px;
 }

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

div.otherequipment{
	background-color:#B5B5BA;
	color:white;
	height:30px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	margin-bottom:5px;
}
div#telephone{
	width:100%;
	text-align:center;
	font-family:'M PLUS Rounded 1c',;
	font-size:40px;
}

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:25px;
	font-size:18px;
	text-decoration:none;
	margin-bottom:2px;
	background-color:#727EA3;
	box-sizing: border-box;
	height:80px;
}

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.attention{
	color:#A32E37;
}
div.underline{
	text-decoration:underline;
}

li.companyli{
	padding-left:5px;
}

div.notebox{
background-color:#FCEDF7;
padding: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;
}

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#pcmenu{
	display:none;
}

div#pcmenu2{
	display:none;
}

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

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

div#header{
	width:100%;
	height:80px;
	background-color:white;
	position:fixed;
	z-index:1;
	top:0;
	
}


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

}

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

}

div#sitename{
		cursor:pointer;
		padding-top:15px;
		padding-left:10px;
		color:#949494;
		font-size:12px;
		line-height:20px;
}

span#sitenametext{
		margin-top:10px;
		padding-top:30px;
		padding-left:10px;
		line-height:5px;
		font-size:12px;
		color:white;
		display:none;
}
div#wrap{
	position:relative;
	width:100%;
	margin:0px;
	padding:0px;
	box-sizing: border-box;
}

.linkbtn{
	
	font-size:12px;
	font-weight:bold;
	width:100%;
	background-color:black;
	opacity:0.4;
	height:30px;
	padding-top:10px;
	text-align:center;
	margin-top:100px;
	margin-bottom:50px;
}


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

div.underconstruction{
	width:100%;
	color:#cccccc;
	text-align:center;
	
}

/* -- 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: 0.1;
	box-sizing: border-box;
}

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

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

/* -- REFORM -------------------------------------------------------------------------------- */
.reform.delighter {
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding:18px;
	color:white;
	width:100%;
	font-size:29px;
	background-color:#379DA1;
      transition: all .3s ease-out;
      opacity: 0.5;
      box-sizing: border-box;
}

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

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


/* -- TROUBLE -------------------------------------------------------------------------------- */
.trouble.delighter {
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding:18px;
	color:white;
	width:100%;
	font-size:26px;
	background-color:#D9114D;
      transition: all .3s ease-out;
      opacity: 0.5;
      box-sizing: border-box;
}

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

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

/* -- LPGAS -------------------------------------------------------------------------------- */
.lpgas.delighter {
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding:18px;
	color:white;
	width:100%;
	
	font-size:32px;
	background-color:#FDA637;
      transition: all 2s ease-out;
      opacity: 0.5;
      box-sizing: border-box;
}

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

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

/* -- EQUIPMENT -------------------------------------------------------------------------------- */
.equipment.delighter {
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding:18px;
	color:white;
	width:100%;
	font-size:20px;
	background-color:#64A108;
      transition: all .8s ease-out;
      opacity: 0.5;
      box-sizing: border-box;
}

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

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

/* -- MOVING -------------------------------------------------------------------------------- */
.moving.delighter {
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding:18px;
	color:white;
	width:100%;
	font-size:28px;
	background-color:#EA4900;
      transition: all .3s ease-out;
      opacity: 0.5;
      box-sizing: border-box;
}

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

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

/* -- DISASTER -------------------------------------------------------------------------------- */
.disaster.delighter {
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding:18px;
	color:white;
	width:100%;
	font-size:24px;
	background-color:#AD50AC;
      transition: all .3s ease-out;
      opacity: 0.5;
      box-sizing: border-box;
}

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

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

/* -- MAINTENANCE -------------------------------------------------------------------------------- */
.maintenance.delighter {
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding:18px;
	color:white;
	width:100%;
	font-size:16px;
	line-height:30px;
	background-color:#28AD74;
      transition: all .3s ease-out;
      opacity: 0.5;
      box-sizing: border-box;
}

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

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

/* -- FAQ -------------------------------------------------------------------------------- */
.faq.delighter {
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding:18px;
	color:white;
	width:100%;
	font-size:30px;
	background-color:#958FCC;
      transition: all .3s ease-out;
      opacity: 0.5;
      box-sizing: border-box;
}

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

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

/* -- COMPANY -------------------------------------------------------------------------------- */
.company.delighter {
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding:18px;
	color:white;
	width:100%;
	font-size:24px;
	background-color:#C1C1C7;
      transition: all .3s ease-out;
      opacity: 0.5;
      box-sizing: border-box;

}

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

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

/* -- CONTACT -------------------------------------------------------------------------------- */
.contact.delighter {
	text-align:center;
	font-family: 'Lexend Giga', sans-serif;
	padding:18px;
	color:white;
	width:100%;
	font-size:24px;
	background-color:#E66EA4;
      transition: all .3s ease-out;
      opacity: 0.5;
      box-sizing: border-box;

}

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

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



.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 .5s 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 .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; }