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


body {
  width: 100%;
  background-color: #f5f6fe;
  border-top: #0066cc solid 5px;
  font-size: 10px;
}

#wrap {
  background: url(../images/wrap_bg.png) repeat-y;
  width: 860px;
  margin: 0 auto;
  padding: 0 0 20px 0;

}

#contents {
  clear: both;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-table;
}

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* End hide from IE-mac */


/*ヘッダ
------------------------------*/
header {
  padding: 10px 20px 20px;
}

header #logo {
  float: left;
  width: 194px;
  height: 140px;
  margin-left: 10px;
}

.head_top h1 {
  float: left;
  margin-left: 30px;
  font-size: 120%;
  color: #666;
}

.head_top .contact {
  float: right;
  margin-right: 20px;
  width: 245px;
  height: 68px;
}

.head_bottom img {
  margin: 20px 0 0 30px;

}

/*　フッター
------------------------------*/
footer {
  width: 100%;
  background-color: #ededed;
  padding-top: 1px;
}

footer #footer_box {
  border-top: #FFF solid 1px;
}

footer #footer_box .footer_wrap {
  width: 820px;
  margin: 20px auto 10px;
}

footer #footer_box .footer_wrap .f_logo {
  float: left;
}

footer #footer_box .footer_wrap .f_logo p {
  margin-top: 10px;
  font-size: 130%;
}

footer #footer_box .footer_wrap .f_contact {
  float: right;
}

footer #footer_box .footer_wrap .f_navi {
  clear: both;
  margin-top: 10px;
}

footer #footer_box .footer_wrap .f_navi ul {
  width: 360px;
  margin: 0 auto;
  overflow: hidden;
}

footer #footer_box .footer_wrap .f_navi li {
  float: left;
  font-size: 130%;
  padding: 15px 0 5px;
}

footer #footer_box .footer_wrap .f_navi li a:hover {
  color: #F60;
}

footer .copyright {
  clear: both;
  width: 100%;
  background-color: #0066cc;
  padding: 5px 0;
}

footer .copyright p {
  font-size: 130%;
  width: 850px;
  margin: 0 auto;
  text-align: right;
  color: #FFF;
}

/* サブタイトル */
section {
  width: 800px;
  margin: 0 auto;
}

.sub_titile {
  margin-bottom: 10px;
  height: 40px;
  border-top: #CCC solid 1px;
  background: url(../images/h2_border_bg.gif) repeat-x;
  background-position: bottom;
}

.sub_titile h2 {
  float: left;
  font-size: 150%;
  margin-top: 10px;
  margin-left: 5px;
  font-weight: bold;
}

/* 左 */
#left_column {
  float: left;
  width: 570px;
}

/* 右 */
#right_column {
  float: right;
  width: 230px;
}

#right_column .r_area {
  background-color: #0066cc;
  padding: 20px 7px 10px;
  margin-bottom: 10px;
}

#right_column .r_area p {
  font-weight: bold;
  color: #FFF;

}

#right_column p {
  font-size: 130%;
  line-height: 1.7em;
  margin-bottom: 15px;
  margin-left: 10px;
}

#right_column img {
  margin-bottom: 20px;
}

a {
  color: #333333;
}

#contents a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* ie 6 7 */
  -ms-filter: "alpha(opacity=70)";
  /* ie 8 */
}


/*　index　メインビジュアル
-----------------------------*/
#index #contents #main_img {
  width: 850px;
  height: 400px;
  background-color: #eef0f5;
  margin-left: 5px;
  margin-bottom: 20px;
}

#index #contents #main_img img {
  margin: 15px 25px;
  width: 800px;
  height: 363px;
}

/*　index　清掃内容
------------------------------*/
#index #works .sub_titile p {
  float: right;
  font-weight: bold;
  font-size: 120%;
  padding: 12px 10px 0 2px;
}

#index #works .sub_titile p a {
  display: block;
}

#index #works span.btn {
  float: left;
  display: block;
  color: #FFF;
  margin: 0 5px 0 0;
  padding-left: 5px;

  width: 9px;
  height: 14px;
  -webkit-border-radius: 7px;
  /* width,heightの半分 */
  -moz-border-radius: 7px;
  border-radius: 7px;
  background-color: #0066cc;
  /* 円の色 */

}

#index #works .top_contents {
  margin-bottom: 10px;
  border: #0066cc solid 1px;
  border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
}

#index #works .top_contents p.sub_head {
  display: block;
  background-color: #0066cc;
  border-top-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  width: 778px;
  height: 20px;
  font-weight: bold;
  font-size: 150%;
  color: #FFF;
  padding: 5px 10px;
}

#index #works .top_contents ul {
  border-bottom: #CCCCCC solid 1px;
  width: 300px;
  padding-bottom: 30px;
  margin: 17px 5px;
}

#index #works .top_contents li {
  font-weight: bold;
  font-size: 140%;
  background: url(../images/dot_blue.gif) no-repeat left center;
  padding-left: 10px;
  margin: 12px 10px;
}

#index #works .top_contents p.price {
  text-align: right;
  font-size: 130%;
}

#index #works .top_contents p.price span {
  font-size: 140%;
  font-weight: bold;
  margin-right: 10px;
}

#index #works .top_contents .left_box {
  float: left;
}

#index #works .top_contents img {
  margin: 10px 5px;
}

/*---- 定期・日常・一般・特別　清掃 --------------------------*/

.mini_contents_list {
  display: flex;
  flex-wrap: wrap;
}

.mini_contents01,
.mini_contents02,
.mini_contents03,
.mini_contents04 {
  position: relative;
  display: block;
  width: 190px;
  border-radius: 5px;
  border: 1px solid #ccc;
  overflow: hidden;
  box-sizing: border-box;
}

.triangle {
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  border-left: 36px solid transparent;
}

.mini_contents01 .triangle {
  border-bottom: 36px solid #0366b7;
}

.mini_contents02 .triangle {
  border-bottom: 36px solid #20b180;
}

.mini_contents03 .triangle {
  border-bottom: 36px solid #a5cc21;
}

.mini_contents04 .triangle {
  border-bottom: 36px solid #fff000;
}


#index #works .bottom_contents .menu {
  margin: 0 5px 10px 5px;
}

#index #works .bottom_contents .menu p {
  font-weight: bold;
  font-size: 150%;
  letter-spacing: 0.1em;
  width: 170px;
  text-align: center;
  margin: 0 auto;
  padding: 7px 0;

  border-bottom: #CCC solid 1px;
}

#index #works .bottom_contents .menu li {
  font-weight: bold;
  font-size: 140%;
  background: url(../images/dot_gray.gif) no-repeat 0 5px;
  padding-left: 13px;
  margin: 8px 15px;
}

#index #works .bottom_contents .menu li span {
  font-weight: normal;
  /*font-size:;*/
}

#index #works .area {
  clear: both;
  background-color: #eef0f5;
  padding: 10px 0;
}

#index #works .area p {
  text-align: center;
  font-size: 130%;
  margin: 0 auto;
}

.staff_recruitment {
  display: flex;
  justify-content: center;
  width: 60%;
  margin: 0 auto;
  max-width: 360px;
  border: 2px solid #4eb597;
}

.staff_recruitment img {
  width: 100%;
}

/* works
---------------------------------*/
body#works #left_column h3 {
  color: #F90;
  font-weight: bold;
  font-size: 150%;
  margin-bottom: 10px;
}

body#works #left_column p {
  font-size: 140%;
  line-height: 1.5em;
}


body#works #left_column img {
  width: 140px;
  margin: 10px 5px;
}

.menu_recommend {
  width: 550px;
  border: #CCCCCC solid 1px;
  margin-bottom: 8px;
  margin-top: 10px;
}

.menu_recommend p {
  font-weight: bold;
  font-size: 140%;
  border-bottom: #CCC dotted 1px;
  margin: 0 5px;
  padding: 5px 0;
}

.menu_recommend p span {
  border-left: #339999 solid 3px;
  padding: 2px 0 2px 7px;
}

.menu_recommend ul {
  float: left;
  margin: 5px 10px 10px;
  width: 225px;
}

.menu_recommend ul li {
  font-size: 130%;
  margin: 3px 0;
}

#left_column .menu {
  float: left;
  width: 270px;
  height: 150px;
  border: #CCCCCC solid 1px;
  margin-bottom: 8px;
}

#left_column .menu p {
  font-weight: bold;
  font-size: 140%;
  border-bottom: #CCC dotted 1px;
  margin: 0 5px;
  padding: 5px 0;
}

#left_column .menu p span {
  border-left: #339999 solid 3px;
  padding: 2px 0 2px 7px;
}

#left_column .menu ul {
  float: left;
  margin: 5px 10px;
  width: 100px;
}

#left_column .menu ul li {
  font-size: 130%;
  margin: 3px 0;
}

.mr10 {
  margin-right: 8px;
}

/* about
---------------------------------*/
#about #left_column p {
  font-size: 140%;
  line-height: 1.5em;
  margin: 5px 0 20px 5px;
}

#about #left_column h3 {
  font-size: 150%;
  font-weight: bold;
  padding: 8px 0;
  margin: 0 10px 20px 0;
  border-bottom: #CCCCCC dotted 1px;
}

#about #left_column h3 span {
  border-left: #b5d74a solid 4px;
  padding: 3px 5px;
}

#about #left_column table {
  margin-bottom: 50px;
  font-size: 140%;
}

#about #left_column table th {
  color: #FFF;
  text-align: left;

  padding: 7px 10px;
  background-color: #b5d74a;
  border-bottom: #FFF solid 1px;
}

#about #left_column table td {
  padding: 7px 20px;
  line-height: 1.5em;
}

/* privacy
---------------------------------*/
#privacy #left_column {
  margin-bottom: 50px;
}

#privacy #left_column p {
  font-size: 130%;
  line-height: 1.5em;
  margin: 0 0 10px 5px;
}

#privacy #left_column dl {
  margin-left: 5px;
  width: 540px;
  color: #666666;
  font-size: 130%;
}

#privacy #left_column dt {
  font-weight: bold;
  border-bottom: #CCCCCC dotted 1px;
  padding: 5px 0;
}

#privacy #left_column dd {
  line-height: 1.5em;
  padding: 5px 0 20px;
}