@charset "utf-8";
/*=============================================================
 Layout
=============================================================*/
/* COMMON
-------------------------------------------------------------*/
#contents{
	width:100% !important;
	clear:both;
}
#contentsMain.full{
	width:100%;
	clear:both;
	padding: 0;
}
body div#pageTtl{
	display: none;
}
body div#teleworkCase{
	line-height:1.85;
	font-size: 16px;
	letter-spacing: 0.02em;
}
body div#contents p,
body div#teleworkCase p,
body div#teleworkCase li {
	max-height: 100%;
}
body div#teleworkCase p{
	margin:0;
}
body div#teleworkCase h2,
body div#teleworkCase h3{
	width: auto;
	padding: 0;
	margin: 0;
	background-image: none;
	color: #333;
	border: none;
}
/* MAIN
-------------------------------------------------------------*/
body div#teleworkCase #main{
	background: #edf5fa url("/biz/workstyle/telework/img/bg_main.jpg") no-repeat center top;
}
body div#teleworkCase #main h1{
	width: 970px;
	margin: 0 auto;
	padding: 0;
	background-image: none;
}
/* introArea
-------------------------------------------------------------*/
body div#teleworkCase #introArea{
	width: 970px;
	margin: 0 auto;
	padding: 70px 0;
	position: relative;
	text-align: center;
}
body div#teleworkCase #introArea h2{
	padding: 10px;
	font-size: 29px;
	font-weight: 400;
	line-height: 1.0;
	color: #00a1da;
	text-align: center;
	background-color: #ccecf8;
	border-radius: 100px;
}
body div#teleworkCase #introAreaInner{
	width: 730px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 30px 0 0;
}
body div#teleworkCase #introAreaInner dl{
	width: 220px;
}
body div#teleworkCase #introAreaInner dt{
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: 3px solid #194a9e;
	line-height: 1.35;
}
body div#teleworkCase #introArea p{
	font-size: 14px;
}
/* itemArea
-------------------------------------------------------------*/
body div#teleworkCase #itemArea{
	padding: 50px;
	background-color: #f2f2f2;
}
body div#teleworkCase #itemArea h2{
	padding: 0 0 25px;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.0;
	color: #00a1da;
	text-align: center;
}
body div#teleworkCase #itemAreaInner ul{
	width: 970px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
body div#teleworkCase #itemAreaInner ul li{
	width: 300px;
}
body div#teleworkCase #itemAreaInner ul li a{
	display: block;
	padding: 8px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 100px;
	border: 1px solid #00a1da;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	color: #00a1da;
	text-align: center;
	text-decoration: none;
}
body div#teleworkCase #itemAreaInner ul li a:hover{
	background-color: #00a1da;
	color: #fff;
}
/* caseArea
-------------------------------------------------------------*/
body div#teleworkCase .caseArea{
	padding: 70px 0;
	border-top: 3px solid #fff;
	text-align: left;
}
body div#teleworkCase #case01{
	background-color: #e5f6fb;
}
body div#teleworkCase #case02{
	background-color: #fdf1e8;
}
body div#teleworkCase #case03{
	background-color: #e7f5f5;
}
body div#teleworkCase .caseAreaInner{
	width: 970px;
	margin: 0 auto;
}
body div#teleworkCase .caseAreaInner .caseTtl{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 35px;
}
body div#teleworkCase .caseAreaInner .caseTtl .boxIcn{
	width: 96px;
}
body div#teleworkCase .caseAreaInner .caseTtl h2{
	padding: 3px 0 0;
	font-size: 34px;
	line-height: 1.15;
	flex: 1;
}
body div#teleworkCase .caseAreaInner .caseTtl h2 span{
	display: inline;
	padding: 0;
	margin: 0;
	background-image: none;
	font-size: 70%;
}
body div#teleworkCase .caseAreaInner .caseVoice{
	position: relative;
	padding: 30px;
	background-color: #fff;
	border-radius: 10px;
}
body div#teleworkCase .caseAreaInner .caseVoice:before{
	content: "";
	display: block;
	width: 62px;
	height: 52px;
	position: absolute;
	top: -15px;
	left: -25px;
	z-index: 2;
}
body div#teleworkCase #case01 .caseAreaInner .caseVoice:before{
	background: url("/biz/workstyle/telework/img/icon_voice_case01.png") no-repeat center center;
}
body div#teleworkCase #case02 .caseAreaInner .caseVoice:before{
	background: url("/biz/workstyle/telework/img/icon_voice_case02.png") no-repeat center center;
}
body div#teleworkCase #case03 .caseAreaInner .caseVoice:before{
	background: url("/biz/workstyle/telework/img/icon_voice_case03.png") no-repeat center center;
}
body div#teleworkCase .caseAreaInner .caseVoice:after{
	content: "";
	display: block;
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 2;
}
body div#teleworkCase #case01 .caseAreaInner .caseVoice:after{
	width: 304px;
	height: 362px;
	background: url("/biz/workstyle/telework/img/il_case01.png") no-repeat center center;
}
body div#teleworkCase #case02 .caseAreaInner .caseVoice:after{
	width: 331px;
	height: 307px;
	background: url("/biz/workstyle/telework/img/il_case02.png") no-repeat center center;
}
body div#teleworkCase #case03 .caseAreaInner .caseVoice:after{
	width: 441px;
	height: 319px;
	background: url("/biz/workstyle/telework/img/il_case03.png") no-repeat center center;
}
body div#teleworkCase .caseAreaInner .caseVoice p{
	font-size: 18px;
	position: relative;
	z-index: 3;
}
body div#teleworkCase .caseAreaInner .caseVoice ul{
	padding: 10px 0 0;
	position: relative;
	z-index: 3;
}
body div#teleworkCase .caseAreaInner .caseVoice ul li{
	padding: 10px;
	color: #fff;
	font-size: 14px;
	line-height: 1.05;
}
body div#teleworkCase #case01 .caseAreaInner .caseVoice ul li{
	background-color: rgba(0,162,217,0.7)
}
body div#teleworkCase #case02 .caseAreaInner .caseVoice ul li{
	background-color:rgba(238,119,28,0.7)
}
body div#teleworkCase #case03 .caseAreaInner .caseVoice ul li{
	background-color:rgba(23,157,157,0.7)
}
/* photoArea
-------------------------------------------------------------*/
body div#teleworkCase .caseAreaInner .casePhoto{
	padding: 30px 0 0;
}
/* voiceArea
-------------------------------------------------------------*/
body div#teleworkCase .caseAreaInner .caseGood{
	display: flex;
	justify-content: space-between;
	padding: 30px 0 0;
}
body div#teleworkCase .caseAreaInner .caseGood .box{
	width: 470px;
	position: relative;
	padding: 30px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 10px;
}
body div#teleworkCase .caseAreaInner .caseGood .box:before{
	content: "";
	display: block;
	width: 40px;
	height: 38px;
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 2;
}
body div#teleworkCase #case01 .caseAreaInner .caseGood .box:before{
	background: url("/biz/workstyle/telework/img/icon_good_case01.png") no-repeat center center;
}
body div#teleworkCase #case02 .caseAreaInner .caseGood .box:before{
	background: url("/biz/workstyle/telework/img/icon_good_case02.png") no-repeat center center;
}
body div#teleworkCase #case03 .caseAreaInner .caseGood .box:before{
	background: url("/biz/workstyle/telework/img/icon_good_case03.png") no-repeat center center;
}
body div#teleworkCase .caseAreaInner .caseGood .box h3{
	padding-bottom: 20px;
	text-align: center;
	font-size: 20px;
	line-height: 1.35;
}
body div#teleworkCase #case01 .caseAreaInner .caseGood .box h3{
	color: #00a2d9;
}
body div#teleworkCase #case02 .caseAreaInner .caseGood .box h3{
	color: #ee771c;
}
body div#teleworkCase #case03 .caseAreaInner .caseGood .box h3{
	color: #179d9d;
}


/* ProductArea
-------------------------------------------------------------*/
body div#teleworkCase .caseAreaInner .caseProduct{
	padding: 30px 0 0 180px;
}
body div#teleworkCase .caseAreaInner .caseProduct a{
	display: block;
}



/* BnrArea（20200731田口追加）
-------------------------------------------------------------*/
body div#teleworkCase #BnrArea{
	width: 970px;
	margin: 0 auto;
	padding: 70px 0;
	position: relative;
	text-align: center;
}
body div#teleworkCase #BnrAreaInner{
	width: 900px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 30px 0 0;
}
body div#teleworkCase #BnrAreaInner dl{
	width: 420px;
}
body div#teleworkCase #BnrAreaInner dt{
	font-size: 18px;
	font-weight: 700;
	margin: 10px 0 0;
	padding: 10px 0 0;
	line-height: 1.35;
}