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

.areaFrame {
	width:100%;
	overflow:hidden;
	position:relative;
	box-sizing:border-box;
}

.areaFrame .inframe {
	box-sizing:border-box;
}

#areaP01 {
	background:#ccc;
}
#areaP02 {
	background:#eee;
}
#areaP03 {
	background:#ecc;
}
#areaP04 {
	background:#eef;
}


/************************************************
スライド項目のサンプル設定例
***********************************************/
#listPhoto {
	max-width:1000px;
	margin:auto;
	position:relative;
}

#listPhoto .photo{
	text-align:center;
	line-height:0;
	background:#333;
	position:relative;
	width:100%;
	height:100%;
}
#listPhoto .photo img{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

/*セレクトボタンの設定*/
#listPhoto .slidesjs-pagination {
	display:flex;
	justify-content: center;
}
#listPhoto .slidesjs-pagination li{
	padding:0 1.0em;
}
#listPhoto .slidesjs-pagination li a{
	display:block;
	width:25px;
	height:0;
	padding:25px 0 0 0;
	overflow:hidden;
	background:#eee;
	border-radius: 25px;        /* CSS3草案 */  
	-webkit-border-radius: 25px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 25px;   /* Firefox用 */
}
#listPhoto .slidesjs-pagination li a.active{
	background-color:#333;
}

/*NEXT・PREVボタン設定*/
#listPhoto .slidesjs-navigation {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:10;
	color:#fff;
	background:#666;
	padding:0.2em 0.6em;
	display:block;
}
#listPhoto .slidesjs-next {right:0;}
#listPhoto .slidesjs-previous {left:0;}
#listPhoto .slidesjs-next:after {content:" >>";}
#listPhoto .slidesjs-previous::before {content:"<< ";}
#listPhoto .slidesjs-play,
#listPhoto .slidesjs-stop {display:none!important;}




/************************************************
#areaHoileShow
***********************************************/
#areaHoileShow{
	min-height: 100vh;
	background:rgb(194, 232, 235);
	position: relative;
}

#areaHoileShow p {
	transform: translateX(5px);
}

#areaHoileShow .boxPointTurn{
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	width:100%;
	height:100%;
	max-width:120px;
	max-height: 80px;
	background:#f00;
}


/************************************************
#areaFadePicture
***********************************************/

#areaFadePicture #listImg{
	/*display: flex;
	justify-content: center;
	flex-wrap: wrap;*/
	position: relative;
	padding:0;
}

#areaFadePicture #listImg .slick-track{
	width:100%!important;
	padding: 100% 0 0 0;
}

#areaFadePicture #listImg li.itemImg{
	padding: 0;
	position: absolute!important;
	left:50%!important;
	top:50%!important;
	transform: translate(-50%,-50%);
}

#areaFadePicture #listImg a{
	padding: 100% 0 0 0;
	position: relative;
	height:0;
	overflow: hidden;
	display: block;
	background:#aaa;
}
#areaFadePicture #listImg a img{
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}

.slick-dots li{
	background:#eee;
}

@media screen and ( min-width:768px ){

	#areaFadePicture #listImg .slick-track{
		/*max-width: 1200px;
		margin: auto;*/
	}

	#areaFadePicture #listImg li.itemImg{
		/*height:300px;
		width:100%!important;
		left:0!important;*/
	}

}


/************************************************
#ancBox・・（アンカーポイントのテスト）
***********************************************/

#scrAncer{
	padding:80px 0;
}
#scrAncer p{
	margin-bottom: 30px;
}

#ancBox01,#ancBox02,#ancBox03,#ancBox04{
	height:50vh;
	text-align: center;
}
#ancBox01{background-color:#ccc;}
#ancBox02{background-color:#b6e8f3;}
#ancBox03{background-color:#ffec97;}
#ancBox04{background-color:#e6e4ff;}


/************************************************
#areaNewsList（新着情報）
***********************************************/

#areaNewsList{
color:#fff;
background:var(--first-color);
padding:1.5em 0.5em;
}


#areaNewsList .list{
padding:0;
margin-bottom:1.7em;
}

#areaNewsList .list dl{
margin-bottom:0.8em;
}
#areaNewsList .list dl:last-child{
margin-bottom:0;
}
#areaNewsList .list dt{
margin-bottom:0.25em;
}

@media screen and ( min-width:768px ){

	#areaNewsList{
	padding:45px 30px;
	}

	#areaNewsList .boxNews{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	}
	
	#areaNewsList .boxNews .list{
	width : -webkit-calc(100% - 170px) ;
	width : calc(100% - 170px) ;
	margin-bottom:0;
	}
	
	#areaNewsList .list dl{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom:30px;
	}
	
	#areaNewsList .list dt{
	margin-bottom:0;
	width:150px;
	}
	#areaNewsList .list dd{
	width : -webkit-calc(100% - 170px) ;
	width : calc(100% - 170px) ;
	}

	#areaNewsList .boxNews .btm{
	width:130px;
	}

}




/************************************************
#areaAtLogpose（「株式会社Logpose（ログポース）は、名古屋支店を中心に・・・」）
***********************************************/
#areaAtLogpose{
position:relative;
overflow:hidden;
padding:2.8em 0;
color:#fff;
background:url(css_img/bgimgAtLogpose.png) no-repeat top right;
background-size:cover;
}
#areaAtLogpose:after{
width:600px;
height:0;
padding:150% 0 0 0;
content:"";
display:block;
background:url(css_img/partsHitogataAtLogpose.png) no-repeat top center;
background-size:100%;
position:absolute;
right:-166px;
bottom:134px;
opacity:1;
}

#areaAtLogpose > *{
z-index:10;
position:relative;
}

#areaAtLogpose h2{
height:0;
font-size:0;
overflow:hidden;
padding:0;
padding-top:39%;
margin-bottom:60px;
background:url(css_img/ttlAtLogpose.png) no-repeat center center;
background-size:100%;
}

#areaAtLogpose h2:after{
display:none;
}

#areaAtLogpose .text{
margin-bottom:300px;
}


#areaAtLogpose .listBtm >*{
width:50%;
}

@media screen and ( min-width:768px ){
	#areaAtLogpose{
	padding:60px 0;
	}
	
	
	#areaAtLogpose:after{
	width:731px;
	padding-top:565px;
	right:110px;
	bottom:80px;
	}
	
	#areaAtLogpose h2{
	padding-top:185px;
	background-image:url(css_img/ttlAtLogpose_wide.png);
	background-size:1585px;
	}
	
	#areaAtLogpose .blockSide{
	width:820px;
	}

	#areaAtLogpose .text{
	margin-bottom:120px;
	}
	
	#areaAtLogpose .listBtm{
	display:flex;
	flex-wrap: wrap;
	}

}



/************************************************
#areaInvitation（「町を守る警備員になりませんか？」）
***********************************************/

#areaInvitation{
padding:2.5em 0;
background:var(--fourth-color) url(css_img/bgInvitation.png) no-repeat right center;
background-size:cover;
}

#areaInvitation h2{
padding:0;
padding-top:39%;
background:url(css_img/ttlInvitation.png) no-repeat left top;
background-size:100%;
font-size:0;
height:0;
overflow:hidden;
}

#areaInvitation h2:after{
display:none;
}

#areaInvitation .wideFrame.size{
position:relative;
padding-top:55px;
padding-bottom:300px;
background:url(css_img/minframeInvitation.png) no-repeat center top;
background-size:1267px;
}
#areaInvitation .wideFrame.size:after{
content:"";
display:block;
width:100%;
max-width:450px;
padding:100% 0 0 0;
background:url(css_img/partsHitogataInvitation.png) no-repeat center top;
background-size:100%;
position:absolute;
left:50%;
bottom:0;
transform:translate(-50%,0);
/*z-index:-1;*/
}

#areaInvitation .wideFrame.size .frame{
position:relative;
z-index:5;
}

#areaInvitation .wideFrame.size .frame .text{
margin-bottom:2.8em;
}
#areaInvitation .wideFrame.size .frame .text p:last-child{
margin-bottom:0;
}


@media screen and ( min-width:768px ){

	#areaInvitation{
	padding:107px 0;
	font-size:1.15em;
	}

	#areaInvitation h2{
	padding-top:12%;
	background-image:url(css_img/ttlInvitation_wide.png);
	}

	#areaInvitation .wideFrame.size{
	max-width:1262px;
	height:666px;
	}
	
	#areaInvitation .wideFrame.size:after{
	max-width:none;
	width:667px;
	padding-top:633px;
	left:-5px;
	bottom:auto;
	top:55px;
	transform:translate(0,0);
	}
	
	#areaInvitation .wideFrame.size .frame{
	width:775px;
	position:absolute;
	right:0;
	top:0;
	}
	
	#areaInvitation .wideFrame.size .frame .text{
	padding-left:25px;
	}
	
	#areaInvitation .wideFrame.size .frame .boxBtm{
	text-align:right;
	}
	
}


/************************************************
#areaIntroductionPage（「イントロダクション」）
***********************************************/

#areaIntroductionPage{
height:100vh;
height:-webkit-calc(100vh - var(--header-size));
height:calc(100vh - var(--header-size));
background:#000;
position:relative;
overflow:hidden;
}

.lstScreen{
position:relative;
height:100%;
}

#areaIntroductionPage .box{
position:absolute;
left:0;
width:100%;
height:50%;
}
#areaIntroductionPage .box.box01{
top:0;
background:url(css_img/bgIntroductionPageUp.jpg) no-repeat top center;
background-size:cover;
}
#areaIntroductionPage .box.box02{
bottom:0;
background:url(css_img/bgIntroductionPageUnder.jpg) no-repeat top center;
background-size:cover;
}

#areaIntroductionPage .boxMessage{
position:absolute;
left:50%;
top:50%;
top:-webkit-calc(50% - 20px);
top:calc(50% - 20px);
transform:translate(-50%,-100%);
background:url(css_img/partsMessIntroductionPage.png) no-repeat center center;
background-size:100%;
overflow:hidden;
height:0;
width:80%;
padding:45% 0 0 0;
}

#areaIntroductionPage .boxTag{
position:absolute;
left:50%;
top:50%;
top:-webkit-calc(50% + 20px);
top:calc(50% + 20px);
transform:translate(-50%,0);
width:80%;
background:url(css_img/partsTagIntroductionPag.svg) no-repeat center top;
background-size:100%;
overflow:hidden;
height:0;
width:80%;
padding:6% 0 0 0;
}

#areaIntroductionPage  .partsHito{
width:155%;
position:absolute;
bottom:80px;
right:0;
transform:translateX(50%);
}


@media screen and ( min-width:768px ){

	#areaIntroductionPage{
	height:-webkit-calc(100vh - var(--headerwide-size));
	height:calc(100vh - var(--headerwide-size));
	}
	
	#areaIntroductionPage .boxMessage{
	left:30px;
	top:-webkit-calc(50% - 20px);
	top:calc(50% - 20px);
	transform:translate(0,-100%);
	background-image:url(css_img/partsMessIntroductionPage_wide.png);
	width:1117px;
	padding-top:311px;
	}

	#areaIntroductionPage .boxTag{
	left:150px;
	top:-webkit-calc(50% + 20px);
	top:calc(50% + 20px);
	transform:translate(0,0);
	width:744px;
	padding-top:44px;
	}
	
	#areaIntroductionPage  .partsHito{
width:979px;
	bottom:50%;
	right:0;
	transform:translateX(50%);
	transform:translate(0,50%);
	}
}