@charset "utf-8";
/* Basic */
body{
	font-family:  "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	line-height:1.6;
	font-size:16px;
	position: relative;
	min-height: 100vh;
	color: #666;
	width:100%;
	overflow-x:hidden;
}
body,body *{
	box-sizing:border-box;
	margin:0;
	padding:0;
}
.nopc{
	display:none;
}
.nosp{
	display:block;
}
p {
	line-height: 1.6;
	letter-spacing: 0.1em;
	font-feature-settings: "palt";
	text-align: justify;
}
body#service section > p,
section.leader > p{
	margin:2em; 
}

p span.challenged {
	display: block;
	margin: 0.5em 0 1em;
	letter-spacing: 0;
}
h1,h2,h3,h4,h5{
	font-feature-settings: "palt";
	letter-spacing: 0.1em;
	position:relative;
}
h5+h3{
	margin-top:1em;
}
.wrap{
	max-width:1200px;
	margin:1.5em auto;
}
@media only screen and (max-width: 1200px)  {
	body{
		font-size:14px;
	}
	br.nopc{
		display:block;
	}
	br.nosp{
		display:none;
	}
	p span.challenged {
		font-size: 12px;
	}
	.wrap{
		margin:0 auto;
		max-width:100vw;
		width:100%;
		overflow:hidden;
	}
}
@media only screen and (max-width: 320px)  {
	body{
		letter-spacing: -0.5px;
		font-size:12px;
	}
}
a{
	color:#345;
	text-decoration: none;
}
body#company strong {
	background: linear-gradient(transparent 30%, #ff99cccc 100%);
	color:#000;
}
/* Header */

header,footer {
	left: 0;
	width: 100%;
}
header {
	position: relative;
/*	overflow:hidden;*/
	top: 0;
	padding:0;
}
header .inner{
	max-width:1200px;
	min-height: auto;
	margin:2.25em auto 2em;
}
header .inner.top{
	height:50vmin;
	min-height: 540px;
	background-color: #eee;
	position:relative;
	/* overflow:hidden; */
}
body#home header {
	background: linear-gradient(180deg, rgba(204,230,245,1) 5%, rgba(255,255,255,1) 70%) ;
	width:100%;
	height:100%;
	position:relative;
}
body#home header .cloud{
	background-image: url(images/cloud.png) ;
	background-repeat: repeat-x;
	background-position: 0% 0%;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	animation: cloud_move 30s linear 0s infinite normal forwards ;
}
@keyframes cloud_move {
	0% {background-position: 0% 0; opacity:0;}
	10% {background-position: 10% 0; opacity:1;}
	80% {background-position: 80% 0; opacity:1;}
	90% {background-position: 90% 0; opacity:0;}
	100% {background-position: -10% 0; opacity:0;}
}
body#home header .inner.top {
	background: url(images/illust_layer-0002.png) no-repeat 50% 80% / contain
}
body#home header .inner.top .truck{
	background: url(images/truck.png) no-repeat 0 0 / contain;
	width:120px;
	height:60px;
	position:absolute;
	bottom:14.5%;
	left:22.5%;
	opacity:1;
	animation: truck_go 20s linear 0s infinite normal backwards;
}
@keyframes truck_go {
	0% {opacity: 1;}
	28%{left: 22.5%;opacity: 1;}
	37%{opacity: 1;}
	39%{left: -120px;opacity: 0;}
	68%{left: 100%; opacity: 0;}
	70%{opacity: 1; }
	90%{left: 22.5%;}
}
body#home header .inner.top .people{
	background: url(images/illust_layer-003.png) no-repeat 100% 100% / contain;
	width:392px;
	height:280px;
	position:absolute;
	bottom:0;
	right:12.5%;
}

header h1.header_logo {
	background: transparent url(images/chlgd_logo.png) no-repeat 0% 0% / contain;
	position: relative;
	top: 20px;
	left: 20px;
	width: 540px;
	height: 42px;
	border: 0px solid #eee;
	line-height: 1.6;
	color: #ccc;
	text-indent:-9999px;
	cursor: pointer;
	margin-left: calc( ( 100% - 1200px ) / 2 );
}
header ul.navi {	
	position:relative;
	z-index:1;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	background-color:#eee;
	background: linear-gradient(90deg, rgba(238,238,238,0.1) 0%, rgba(238,238,238,1) 15%, rgba(238,238,238,1) 85%, rgba(238,238,238,0.1) 100%);
}
header ul.navi li {
	padding: 0.5em 1em;
	background-color: #fff;
	margin: 0.5em 0.25em;
	max-width:16em;
	min-width:10em;
	text-align:center;
	letter-spacing: 0.25em;
	border-radius:0.25em;
}
header ul.navi li.act {
	background-color:#0af;
}
ul.navi li.act span a{
	cursor:default;
	color:#FFF;
}
ul.navi span, ul.navi span a {
	display: block;
	width: 100%;
	height: 100%;
}
.inner.top h2 {
	font-weight: bold;
	writing-mode: vertical-rl;
	font-feature-settings: unset;
	line-height: 2;
	font-size: x-large;
	letter-spacing: 0.25em;
	position: absolute;
	top: 36%;
	left: 40%;
	transform: translate(-50%,-50%);
}
.bx-wrapper {
	border-radius: 0.5em;
	box-shadow: 0px -5px 5px -5px #ccc;
	-moz-box-shadow:  0px -5px 5px -5px #ccc;
	-webkit-box-shadow:  0px -5px 5px -5px #ccc;
	border: none;
	background: #ffffff;
	padding:0.5em 0.25em;
	box-sizing: border-box;
	left: 65%;
	bottom: -22.5%;
}
.bx-wrapper:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #fff transparent transparent transparent;
	bottom: -14px;
	filter: drop-shadow(0 4px 2px rgba(0,0,0,0.1));
	position:absolute;
	transform: translate(-50%,0);
	left: 50%;
}
.bx-wrapper:after {
	content: "※";
	position: absolute;
	font-size: x-small;
	bottom: 0;
	left: 0;
	color: #999;
	transform: scale(0.75);
	transform-origin: bottom left;
}

body#home header .inner.top:after {
	content: "※社員から寄せられた直筆メモから抜粋しています";
	font-size: small;
	position: absolute;
	transform: scale(0.75);
	transform-origin: bottom right;
	bottom: -1em;
	right: 1em;
	opacity: 0.75;
	letter-spacing: 0.25px;
	border-radius: 0;
	background-color: transparent;
}
@media only screen and (max-width: 480px)  {
	body#home header .inner.top:after {
		bottom: 6em;
		font-size: xx-small;
	}
}
_::-webkit-full-page-media, _:future, :root .inner.top p.voice {
	margin-right: 1em
}
#navi {
	font-size: 42px;
	position: absolute;
	top: 15px;
	right: 10px;
	line-height: 1;
	cursor: pointer;
	z-index:3;
	color:#333;
	display: none;
}
#navi span {
	display: none;
}
@media only screen and (max-width: 1200px)  {
	#navi {
		font-size: 42px;
	}
	header .inner{
		max-width:100%;
		min-height:unset;
		margin:2em auto 0em;
	}
	header h1.header_logo {
		width : calc( 100% - 72px );
		max-width:560px;
		height: 7.5vw;
		margin-left: 0;
	}
	body header ul.navi {
		background:unset;
		background-color: #00669966;
		flex-flow: column nowrap;
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		padding:4em 3em 1em 3em;
		z-index:2;
		transition:0.5s top;
	}
	body:not(.menu_on) header ul.navi {
		top:-105vh;
		transition:1s top;
	}
	body:not(.menu_on) #navi i.close{
		display:none;
	}
	body.menu_on #navi i.close{
		display:block;
	}
	body:not(.menu_on) #navi i.open{
		display:block;
	}
	body.menu_on #navi i.open{
		display:none;
	}
	header ul.navi li {
		width:80vw;
		max-width:80vw;
		margin: 0.25em auto;
	}
	.inner.top h2 {
		left: 30%;
		line-height: 1.6;
		font-size: x-large;
	}	
	.inner.top .bx-wrapper {
		bottom: -22.5%;
	}
	.inner.top p.voice {
		font-size: x-small;
	}
	#navi {
		display: block;
	}
	ul.navi span a {
		padding:1em 0;
	}
}
@media only screen and (max-width: 768px)  {
	body#home header:before{
		background-position:  0 0 ;
		background-size: auto 100%;
	}
	body#home header .inner.top .people{
		right:7.5%;
	}
	#navi {
		font-size: 42px;
	}
}
@media only screen and (max-width: 600px)  {
	#navi {
		font-size: 34px;
	}
}
@media only screen and (max-width: 480px)  {
	body#home header {
		background-position:  0 0 ;
		background-size: 250% auto;
	}
	body#home header .cloud{
		animation: cloud_move 40s linear 0s infinite normal forwards ;
	}
	body#home header .inner.top {
		background-position:  40% 60% ;
		background-size: 150% auto;
	}
	body#home header .inner.top .truck {
		width: 80px;
		height: 40px;
		bottom: 32.3%;
		left: 4%;
		opacity:1;
		animation:unset;
	}
	body#home header .inner.top .people{
		width:100%;
		height:240px;
		bottom: 12.5%;
		right: auto;
		background-position: 50% 0;
	}
	.inner.top h2 {
		top: 27.5%;
		font-size: large;
	}
	.inner.top .bx-wrapper {
		bottom: -22.5%;
		left: 50%;
	}
	#navi {
		font-size: 30px;
	}
}


/* Footer */

footer{
	font-size: x-small;
	position:relative;
	border:0px solid #eee;
	border-collapse: collapse;
	padding:1em;
	background-color: #eee;
}
footer .inner {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
}
footer .inner_bottom {
	max-width:1200px;
	position: relative;
	text-align: center;
	margin:0.75em auto 0.5em;
}
footer .inner_bottom .privacy_policy{
	position: absolute;
	right:0;
}
footer ul.banner {
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-items: center;
	margin: 1em auto;
}
footer ul.banner li{
	margin:0 0.5em 0 0;
	text-align: center;
}
footer ul.banner li > div,
footer ul.banner li a div{
	text-indent:-9999px;
	border:1px solid #ddd;
	width:136px;
	height:40px;
	color:#00000066;
	background-repeat: no-repeat ;
	background-size: 90% auto ;
	background-position:50% 50%;
	box-shadow: 0 0 10px -5px #ccc inset;
}
footer ul.banner li > div{
	width:210px;
}
footer ul.banner li a div br{
	display:none;
}
footer ul.banner li.chlgd div{
	background-image:url(images/chlgd_logo.png);
}
footer ul.banner li.kbys a div{
	background-image:url(images/banner_kbys.png);
}
footer ul.banner li.tym a div{
	background-image:url(images/banner_tym.png);
}
footer ul.banner li.snd a div{
	background-image:url(images/banner_snd.png);
}
footer ul.banner li.krb a div{
	background-image:url(images/banner_krb.png);
}
footer ul.credit p {
	border-bottom: 1px dotted #ccc;
	line-height: 1.6;
	margin-bottom: 0.25em;
}
footer a.privacy_policy {
	color: #0080cc;
	position: absolute;
	top: -2.5em;
	background: #eee;
	padding: 0.5em 1em;
	left: 2.5em;
	border-radius: 0.5em 0.5em 0 0;
}
footer a.privacy_policy:hover {
	text-decoration: underline;
}
footer a.privacy_policy span{
	margin-left:0.25em;
}
@media only screen and (max-width: 1200px)  {
	footer{
		margin-top:2.5em;
	}
	footer .inner {
		flex-flow: column-reverse wrap;
	}
	footer ul.banner {
		justify-content: center;
		margin:1em auto ;
		flex-flow: row wrap;
	}
	footer ul.banner li{
		margin:0.25em;
	}
	footer .inner_bottom .privacy_policy {
		bottom: 7.5em;
	}
}
@media only screen and (max-width: 480px)  {
	footer{
		margin-top:5em;
	}
	footer ul.banner li{
		margin:0.5em;
	}
}
/* Section */

section{
	position:relative;
	border:0px solid #eee;
	border-collapse: collapse;
	padding:1em;
}
section.content{
	margin:2em 5%;
}
body#message section.content {
	margin: 2em 0;
}
section.content.leader:before ,
section.content.leader:after {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}
body#service section.content.leader:before {
	background: transparent url(images/sky.png) no-repeat 0 0 / 100% auto;
}
body#company section.content.leader:before {
	background: transparent url(images/company_bg.png) no-repeat 0% 40% / cover;
}
body#message section.content.leader:after {
	background: linear-gradient(180deg, rgba(238,238,238,0.05) 0%, rgba(238,238,238,0.2) 35%,rgba(238,238,238,1) 60%, rgba(238,238,238,0.1) 80%, rgba(255,255,255,0) 100%);
}

body#privacy section.content.leader:after {
	background: linear-gradient(180deg, rgba(238,238,238,0.1) 0%, rgba(238,238,238,0.2) 50%, rgba(255,255,255,0) 100%);
}
body#service section.content.leader:after ,
body#company section.content.leader:after {
	background: linear-gradient(235deg, rgba(238,238,238,0.1) 0%, rgba(238,238,238,0.2) 10%, rgba(255,255,255,0) 50%);
}

section>h2,
section>h5{
	left:1em;
}
section>h2:before,
section>h5:before {
	content: "";
	width: 3em;
	height: 3em;
	display: block;
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	top: -0.75em;
	left: -1em;
}
section>h2:before{
	background-color: #00acff66;
}
section>h5:before{
	background-color: #33cc9966;
}

body#company section.leader .chart {
	position: absolute;
	right: 5%;
	top: 10%;
	background-color: #32cd32cc;
	width: 100px;
	height: 100px;
	color: #fff;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	line-height:1.2;
}
body#company section.leader .chart h2{
	letter-spacing:0;
}
body#company section.leader .chart:after {
	content: "2024.12時点";
	font-size: xx-small;
	position: absolute;
	bottom: 1.75em;
	color: rgba(0,0,0,0.5);
	transform: scale(0.85);
}
body#company section.leader .chart span {
	font-size: xx-small;
}
body#message section.leader{
	background: url(images/message_bg.png) no-repeat 50% 100% / cover;
	min-height: 240px;
}

section.products {
	height: 150px;
	display: flex;
	justify-content: center;
}
section.products h3 {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	left: 25%;
}
section.products div {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: url(images/_products.png) no-repeat 0% 50% /auto 100%;
	width: 150px;
	display: block;
	height: 150px;
	left: 55%;
}
@media only screen and (max-width: 1200px)  {
	section.products h3 {
	}
	section.products div {
		left: 60%;
	}
}
section.message {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	align-items: center;
}
section p.name {
	text-align: right;
	font-size: large;
	line-height: 3;
	padding-right: 1em;
}
section p.name span{
	font-size: medium;
}
.inner.ceo {
	display: flex;
	flex-flow: row nowrap;
}
.inner.ceo .img {
	position: relative;
	width: 30%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.inner.ceo .img:before {
	content: "";
	width: 240px;
	height: 240px;
	background: url(images/ihamai.jpg) no-repeat 50% 50% / contain;
	display: block;
	position: absolute;
}

.inner.ceo .message {
	width: 70%;
	padding-right: 1.5em;
	margin-top:1em;
}
@media only screen and (max-width: 1200px)  {
	section.content{
		margin:1em 0;
	}
	section.products {
		height: 180px;
		background-position:50% 100%;
		background-size:60% auto;
	}
	.inner.ceo {
		flex-flow: column wrap;
	}
	.inner.ceo .message {
		width: 100%;
	}
	.inner.ceo .img:before {
		display: none;
	}
	section p.name:before {
		content: "";
		width: 160px;
		height: 160px;
		background: url(images/ihamai.jpg) no-repeat 50% 50% / contain;
		display: block;
		position: relative;
		margin: 1em 0 0 auto;
	}
	section.message .inner {
/*		width: 70%;
		margin-left: 30%;*/
	}
	section.message .inner:before {
		width: 100px;
		height: 100px;
		left: -100px;
	}

}
@media only screen and (max-width: 480px)  {
	section.products {
		background-position:50% 100%;
		background-size:90% auto;
	}
}
.products_wrap {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.products_wrap div img {
	height: 3.8em;
	margin: 0 0 0 1em;
}
@media only screen and (max-width: 480px){
	.products_wrap {
		flex-flow: column-reverse;
	}
	.products_wrap div img {
		height: 4.5em;
			margin: 0 0 1em 0;
	}
}


/*Sub*/
.sub {
	font-size: x-small;
}
.sub h5{
	padding:0;
}
.sub .subinsub{
	font-size: xx-small;
	margin: 0 0;
	padding:0 4em;
}
@media only screen and (max-width: 1200px)  {
	.sub .subinsub{
		font-size: xx-small;
		padding:0 2em;
	}
}
.sub .img{
	width:100%;
	height:320px;
	margin-top:1.5em;
}
.sub.kyoten {
	margin: 0 0 1.5em;
	position: relative;
}
body#company .sub .img {
	background: transparent url(images/branch_new.png) no-repeat 50% 25% / cover;
	height:660px;
}
body#message .img {
	position: relative;
	width: 320px;
	height: 200px;
	overflow: hidden;
	left: 100%;
	transform: translate(-110%,0) rotate(-5deg);
	top: -30px;
	box-shadow: 10px 10px 5px rgba(0,0,0,0.25);
	border: 5px solid #fff;
}
body#message .img img {
	position: absolute;
	bottom: 0;
	left: -10px;
}
h1+p,h2+p,h3+p,h4+p{
	margin:1em;
}
body#home h2+p{
	margin:1em 0 0.5em 0;
}
iframe#job_mov {
	margin:1em 50% 0;
	transform:translate(-50%,0)
}
@media only screen and (max-width: 1200px)  {
	iframe#job_mov {
		width: 100%;
		height: calc( 56.6vw - 2em );
	}
	body#message .img {
		transform: translate(-110%,0) rotate(-5deg) scale(0.75);
	}
}
/* Table*/

table.profile {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0 1.5em auto;
}
table.profile th {
	width: 20%;
	color: #000;
	text-align:center;
	padding: 0.5em 1.25em;
	border-bottom: 1px solid #000;
	height:3em;
	font-size: small;
	text-align-last: justify;
	font-weight: normal;
}
table.profile td {
	padding: 0.5em 1em;
	width: 80%;
	border-bottom: 1px solid rgba(0,0,0,0.25);
}
table.profile tr.last th,
table.profile tr.last td{
	border: none;
	position:relative
}
table.profile tr.last td:after {
	content: "2024年12月31日現在";
	font-size: xx-small;
	position: absolute;
	right: 0;
	bottom: 0;
}
@media only screen and (max-width: 1200px)  {
	table.profile th {
		text-align-last: unset;
		padding: 0.5em 0;
	}
	table.profile td {
		padding: 0.5em ;
	}
	table.profile tr.last td {
		padding: 0.5em 0.5em 1.5em;
	}
	body#company .sub .img {
		height:60vw;
		max-height:660px;
		min-height:220px;
	}
}
/*Services*/
ul.jobs {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
}
ul.jobs li {
	border: 0px dotted #ccc;
	height: calc( ( 1200px - 10em ) / 6 );
	width: calc( ( 1200px - 10em ) / 6 );
	text-indent: -9999px;
	background-position: 50% 50%;
	background-size: cover;
	border-radius: 50%;
	background-color: #eee;
}
ul.jobs li.bihin{ background-image:url(images/top_01.jpg); }
ul.jobs li.can{ background-image:url(images/top_02.jpg); }
ul.jobs li.junbi{ background-image:url(images/top_03.jpg); }
ul.jobs li.seisou{ background-image:url(images/top_04.jpg); }
ul.jobs li.shiwake{ background-image:url(images/top_05.jpg); }
ul.jobs li.unpan{ background-image:url(images/top_06.jpg); }
ul.services {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
ul.services li {
	width: calc( ( 100% / 3 ) - 0.5em);
	padding: 1em;
	border: 1px dotted #ccc;
	background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 100%);
}
header h1.header_logo:hover,
header ul.navi li:hover,
footer ul.banner li:hover {
	opacity: 0.85;
}
ul.services li + li{
    margin-left: 0.5em;
}
ul.services li strong {
	font-size: larger;
	width: 100%;
}
ul.services li dl {
	padding:0.5em 0.5em 0.5em 1em;
}
ul.services li dl dt {
	font-weight: bold;
	border-bottom: 1px solid #eee;
	padding: 0.25em 0.25em 0.15em;
}
ul.services li dl dd {
	font-size: small;
	padding: 0.25em 0.25em 0.15em;
}
ul.services li strong:after {
	content: "";
	width: calc( 100% - 1em );
	height: 200px;
	display: block;
	background-color: #eee;
	margin: 0.5em;
}
ul.services li.cleaning strong:after {
	background:#eee url(images/job_seisou1.jpg) no-repeat 50% 75% / cover;
}
ul.services li.washing strong:after {
	background:#eee url(images/job_senjou.jpg) no-repeat 50% 50% / cover;
}
ul.services li.assist strong:after {
	background:#eee url(images/job_unpan.jpg) no-repeat 50% 50% / cover;
}
ul.services li.team strong:after {
	background:#eee url(images/team.jpg) no-repeat 50% 0% / cover;
}
ul.services li.meeting strong:after {
	background:#eee url(images/meeting.jpg) no-repeat 50% 50% / cover;
}
ul.services li.support strong:after {
	background:#eee url(images/support_new.jpg) no-repeat 50% 50% / cover;
}
@media only screen and (max-width: 1200px)  {
	ul.jobs {
		flex-flow: row wrap;
	}
	ul.jobs li {
		border: 0px dotted #ccc;
		height: calc( ( 90vw - 2em ) / 6 );
		width: calc( ( 90vw - 2em ) / 6 );
	}
}
@media only screen and (max-width: 480px)  {
	ul.jobs li{
		border-radius:50%;
		height: calc( ( 90vw - 2em ) / 3 );
		width: calc( ( 90vw - 2em ) / 3 );
		margin:0.5em auto;
	}
	ul.services {
		flex-flow: column wrap;
	}
	ul.services li {
		width:100%;
		margin:0 auto;
		border:none;
	}
	ul.services li + li{
		margin:0 auto;
	}
	ul.services li strong:after {
		background-size:cover !important;
	}
}
@media only screen and (max-width: 380px)  {
	ul.jobs li{
		min-height:90px;
		min-width:90px;
	}
}

label {
	cursor: pointer;
}
ul{
	list-style:none;
}
li p{
	line-height: 1.6;
	letter-spacing: 0;
}

ol{
	list-style: decimal outside;
	padding:2em;
}
ol li+li{
	margin-top:1em;
}
span.br{
	display:block;
}
@media only screen and (min-width: 600px)  {
	span.br {
		display:inline;
		padding-left:0.25em;
	}
}
#toTop, #toBtm {
	position: fixed;
	font-size: 32px;
	right: 1em;
	bottom: 1em;
	z-index: 2;
	display:none;
}

/* IE10 */

@media all and (-ms-high-contrast:none){
}