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

#mainvisual{
	width: 100vw;
	height: 550px;
	background:url(../img/mainvisual/main_01.jpg) center top no-repeat;
    -webkit-clip-path: content-box; /* workaround for Safari border-radius issue */
	position:relative;
	z-index:1;
}

.mainvisual_box{
	position: relative;
}

.mainvisual_text{
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 10;
	height: 80%;
}

a{
	text-decoration: none;
}

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

		スクロールダウン

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

/*スクロールダウン全体の場所*/
.scrolldown3{
	z-index: 10;
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	top:50px;
	right:50%;
    /*マウスの動き1.6秒かけて動く永遠にループ*/
	animation:mousemove 1.6s ease-in-out infinite;
}

/*下からの距離が変化して上から下に動く*/
@keyframes mousemove{
      0%{bottom:10px;}
      50%{bottom:5px;}
     100%{bottom:10px;}
 }

/*Scrollテキストの描写*/
.scrolldown3 span{
    /*描画位置*/
	position: absolute;
	left:-20px;
	bottom:85px;
    /*テキストの形状*/
	color: #eee;
	font-size: 1rem;
	letter-spacing: 0.05em;
}

/*マウスの中の線描写 */
.scrolldown3 span::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top:50px;
	left:22px;
    /*線の形状*/
	width: 1px;
	height: 15px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: mousepathmove 1.4s linear infinite;
	opacity:0;
}

/*上からの距離・不透明度・高さが変化して上から下に流れる*/
@keyframes mousepathmove{
	0%{
		height:0;
		top:10px;
		opacity: 0;
	}
	50%{
		height:15px;
		opacity: 1;
	}
	100%{
		height:0;
		top:30px;
		opacity: 0;
	}
}

/*マウスの描写 */
.scrolldown3:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:43px;
    left:-10px;
    /*マウスの形状*/
	width:25px;
	height:37px;
	border-radius: 10px;
	border:2px solid #eee;
}


/*マウスの中の丸の描写*/
.scrolldown3:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:69px;
	left:0;
    /*丸の形状*/
	width:5px;
	height: 5px;
	border-radius: 50%;
	border:1px solid #eee;
}


/* =======================================
	新着情報
======================================= */
#contents_news{
	clear:both;
    min-width:1150px;
	background:#f7fcff;
	padding:25px 50px 25px 50px;
	border-top:3px solid #0068b7;
	border-bottom:3px solid #0068b7;
}
.sub_con_01{
	width:1150px;
	position:relative;
	margin:0 auto;
}



#important_box{
	position:relative;
	width:260px;
	padding: 15px 25px 15px 0;
	vertical-align:middle;
	border-right:5px solid #0068b7;
	float:left;
}
h2.important_title{
	font-weight:normal;
	color:#0068b7;
	font-size:123.1%;
	text-align:center;
	letter-spacing:2px;
}
span.s_title{
	font-size:85%;
	color:#0068b7;
	padding-left:5px;
}

ul#important_list{
	float:right;
	width:830px;
}

ul#important_list li{
	width:830px;
	height:33px;
	background:url(../img/p_01.gif) no-repeat scroll 105px 4px;
	border-bottom:1px dotted #999;
	overflow:hidden;
	position:relative;
}
#important_list li:last-child {
    border-bottom:none;
}
span.day01{
	font-size:93%;
	font-weight:bold;
	width:40px;
	color:#535353;
	position:absolute;
	top:10px;
}
#important_list a{
	display:block;
	color:#383838;
	position:absolute;
	top:10px;
	left:130px;
	width:700px;
	text-decoration:none;
	white-space:nowrap;
	overflow:hidden;
    text-overflow: ellipsis;
	font-size:93%;
	letter-spacing:4px;
}
#important_list a:hover{
	color:#56b3e8;
}

/* =======================================
	ブログ
======================================= */
#blog{
	background-color:#f7fcff;
	margin:0 auto 100px;
	padding:50px 0;
	border-top: solid #0068b7 1px;
    border-bottom: solid #0068b7 1px;
}
/*カテゴリー*/
.rental{
    margin-left: 10px;
    padding: 2px 5px;
    background-color:#c00;
    color: #fff;
    border-radius: 3px;
	font-size:80%;
}
.cleanning{
    margin-left: 10px;
    padding: 2px 5px;
	background-color:#1baad1;
    color: #fff;
    border-radius: 3px;
	font-size:80%;
}
.eco{
	margin-left: 10px;
    padding: 2px 5px;
	background-color:#11b579;
    color: #fff;
    border-radius: 3px;
	font-size:80%;
}
.another{
	margin-left: 10px;
    padding: 2px 5px;
	background-color:#f90;
    color: #fff;
    border-radius: 3px;
	font-size:80%;
}
/*タイトル*/
.blog_ttl{
	font-size:150%;
	color:#0068b7;
	border-top:#0068b7 double 3px;
	border-bottom:#0068b7 double 3px;
	text-align:center;
	width:500px;
	margin:0 auto;
	background-color:#fff;
	position:relative;
    top: -73px;
	padding:7px;
}
/*記事*/
.blog_flex{
	display:flex;
	justify-content: flex-start;
}
.blog_flex a:hover{
	opacity:0.6;
}
.blog_flex li{
	width:230px;
}
.blog_flex li:nth-child(n+2){
	margin-left:60px;
}
.blog_flex img{
	width:100%;
	height:230px;
	object-fit:cover;
}
.day{
	font-size:90%;
}
.single_ttl{
	font-weight:bold;
	color:#383838;
}
.single_ttl:hover{
	opacity:0.6;
}
/*ボタン*/
.blog_btn{
	text-align:center;
	margin-top:30px;
}
#blog .button{
	font-size:75%;
}
/* =======================================
	ボタン
======================================= */

.button_01.btn_01 {
	display:none;
}
	
.button{
	background-color: #0068b7;
	border: 2px solid #ccc;
	display: inline-block;
  　font-family: webfontHorizontal, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:60%;
	color:#FFF;
	margin-top:15px;
	padding:0px 20px;
	/*************************************************************************************
	outlineプロパティは、アウトラインのスタイル・太さ・色をまとめて指定する際に使用します。
	borderプロパティとは異なり、outlineプロパティには上下左右の概念はありません。 
	アウトラインをつける（縁取りをする）対象が丸い場合には、アウトラインも丸くなります。
	*************************************************************************************/
	outline: none;
	text-decoration:none !important;
	border-radius:5px !important;
}

.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	border-radius:5px !important;
}
.button,
.button::before,
.button::after {
	/*********************************************************
	「box-sizing」はボックスサイズの算出方法を指定する 
	content-box
	パディングとボーダーを幅と高さに含めない（初期値）
	border-box
	パディングとボーダーを幅と高さに含める
	inherit
	親要素の値を継承する
	**********************************************************/
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	
	/*transitionで変化を設定 これにより滑らかに動く*/
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-ms-transition:all 0.3s;
	-o-transition:all 0.3s;
	transition:all 0.3s;
}

/* btn3 */
.btn3 {
	z-index: 2;
	color:#fff !important;
	line-height: 30px;
	letter-spacing:2px;
	position:relative;
	border-radius:5px !important;
}
.btn3:hover {
	border-radius:5px !important;
	background-color: #fff;
	border-color: #0068b7;
	color: #0068b7 !important;
}
.btn3::before,
.btn3::after {
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #0068b7;
}
.btn3::before {
	right: 0;
}
.btn3::after {
	left: 0;
}
.btn3:hover::before,
.btn3:hover::after {
	width: 0;
	background-color: #0068b7;
	border-radius:5px !important;
}

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

		コンテンツ

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

.wrap{
	width:1100px;
	height:auto;
	margin:0 auto;
}

p.corona{
	padding:15px;
	color:#FFF;
	background:#F03;
	letter-spacing:3px;
	font-size:230%;
	text-align:center;
	margin:25px 0;
	border:8px double #FFF;
	font-weight:normal;
}
.big_text{
	font-size:120%;
}
span.s_text{
	font-size:60%;
}

p.corona_02{
	padding:80px 0;
	font-size:230%;
	letter-spacing:2px;
	color:#2d2d2d;
	text-align:center;
	text-decoration: underline;
  text-underline-offset: -0.2em;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgba(255, 228, 0, 0.6);
  text-decoration-skip-ink: none;
  }

.e_box{
	background: #f4f4f4;
	width: 900px;
	margin: 0 auto;
}

.e_title{
	text-align: center;
	margin-top: 60px;
	font-size: 300%;
}

.e_big{
	font-size: 250%;
	color: #ff9900;
}

.e_list{
	text-align: center;
	color: #0066ff;
	font-size: 180%;
	margin-bottom: 130px;
}

.e_list li{
	padding-bottom: 10px;
}

.e_list li:last-of-type{
	padding-bottom: 60px;
}

.banner_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 50px;
}

.banner_list li{
	margin-bottom: 30px;
}

.banner_list li img{
    color: #333;
    text-decoration: none;
    outline: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(128, 128, 128, 0.1) ;
    transition: all .3s;
}

.banner_list li img:hover {
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
    border-color: transparent;
}

.banner_sangyou{
	width:1100px;
	height:400px;
	margin-bottom: 250px;
}




/* =======================================
	お問合わせバナー
======================================= */
p.banner_text{
	padding-top:8px;
	font-size:60%;
	text-align:center;
	font-weight:700;
}
.banner_big_text{
	font-size:182%;
}
	
.auto-popup {
    position: fixed;
	z-index:9999;
    right: 3em;
    bottom: -12em;
    opacity: 0;
    text-decoration: none;
    transition: bottom 500ms cubic-bezier(0.105, 0.295, 0.400, 1.275) 0ms,
        opacity 500ms cubic-bezier(0.105, 0.295, 0.400, 1.275) 0ms,
        box-shadow 200ms ease 0ms,
        transform 200ms ease 0ms;
}
.auto-popup-active {
    bottom: 2em;
    opacity: 1;
	border-radius:20px;
}
.auto-popup:hover {
    box-shadow: 0em 0em 0.3em 0em rgba(0, 0, 0, 0.5);
    transform: translate(0.1em, 0.1em);
}
.auto-popup-close {
    position: absolute;
    right: -0.5em;
    top: -0.5em;
    background-color: #000000;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    transform: rotate(45deg);
    cursor: pointer;
    transition: transform 200ms ease 0ms,
        background-color 200ms ease 0ms;
}
.auto-popup-close:hover {
    background-color: #ff0000;
    transform: rotate(135deg);
}
.auto-popup-close-line:nth-child(odd) {
    position: absolute;
    width: 60%;
    height: 10%;
    left: 20%;
    top: 45%;
    background-color: #ffffff;
}
.auto-popup-close-line:nth-child(even) {
    position: absolute;
    width: 10%;
    height: 60%;
    left: 45%;
    top: 20%;
    background-color: #ffffff;
}