@charset "UTF-8";
@import "/include/css/common.sp.css";



/* ---------------------------------------------------------
	CSS Document index
--------------------------------------------------------- */

body {
	word-break:break-word;
}


#index {
	text-align: left;
}

#index .section {
	margin-bottom: 30px;
}

#index h3 {
	margin-bottom: 15px;
	padding: 6px 5px 5px 5px;
	border-bottom: solid 2px #808fbb;
	background: #e8eefc;
	font-weight: 100;
	font-size: 16px;
	line-height: 1.2;
}

#index p {
	margin-bottom: 15px;
}

#index .box {
	margin-bottom: 20px;
	padding: 20px 0;
	border: solid 1px #ccc;
}

#index .box p.f_left {
	text-align: center;
}

#index .box p.f_left img {
	width: 120px;
	margin-bottom: 10px;
	border-radius: 120px;
	-webkit-border-radius: 120px;
	border: solid 5px #e8eefc;
}

#index .box p.f_left span {
	display: block;
	font-size: 18px;
	line-height: 1.2;
	color: #fd6d16;
}

#index .box p.f_left sup {
	display: block;
	font-size: 14px;
}

#index .box ol {
	margin: 0 15px;
}

#index .box ol li {
	margin-bottom: 10px;
	padding-left: 24px;
	background: url(../images/icon.png) no-repeat 0 2px;
	background-size: 18px auto;
}

#index .flxbx {
/*	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;*/
}

#index .flxbx .flx-left,.flx-right {
	/*	min-width: 48%;*/
	display: block;
}

#index .flxbx img {
//	max-width: 500px;
	margin-top: 20px;
}


/* ---------------------------------------------------------
	CSS Document index > btn
--------------------------------------------------------- */

#index .btn {
	margin-top: 15px;
	text-align: center;
}

#index .btn a {
	display: inline-block;
	vertical-align: top;
	width: 200px;
	height: 38px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	border: solid 1px #ccc;
	background: #f0f0f0;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
	background: -moz-linear-gradient(top, #ffffff, #f0f0f0);
	background: linear-gradient(to bottom, #ffffff, #f0f0f0);
	background: -ms-linear-gradient(top, #ffffff, #f0f0f0);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0)";
	text-decoration: none;
	font-size: 13px;
	line-height: 38px;
	color: #333;
	position: relative;
}

#index .btn a:before {
	content: '';
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-top: solid 2px #333;
	border-right: solid 2px #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: 20px;
}

#index .btn a:hover {
	opacity: 0.8;
	filter: Alpha(opacity=80);
}



#index .btn2 {
	margin-bottom: 20px;
	text-align: center;
}

#index .btn2 li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	margin: 0 10px;
}

#index .btn2 a {
	display: block;
	width: 211px;
	height: 48px;
	padding: 0 20px 0 30px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	border: solid 1px #ccc;
	background: #f0f0f0;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
	background: -moz-linear-gradient(top, #ffffff, #f0f0f0);
	background: linear-gradient(to bottom, #ffffff, #f0f0f0);
	background: -ms-linear-gradient(top, #ffffff, #f0f0f0);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0)";
	text-decoration: none;
	font-size: 14px;
	line-height: 48px;
	color: #333;
	position: relative;
}

#index .btn2 .pdf a:before {
	content: '';
	width: 26px;
	height: 29px;
	margin-top: -13px;
	background: url(/include/images/i_pdf_pc.png) no-repeat 0 0;
	position: absolute;
	top: 50%;
	left: 8px;
}
#index .btn2 a:hover {
	opacity: 0.8;
	filter: Alpha(opacity=80);
}




#index .handbook-web {
	margin-bottom: 20px;
//	width: 566px;
	text-align: left;
	background: #e8eefc;
	padding: 23px;
}

#index .handbook-web li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	margin: 0 10px 8px 0;
	text-align: left;
	width: 100%;
}
#index .handbook-web li:last-child {
	margin: 0 10px 0 0;
}

#index .handbook-web li a:hover {
	opacity: 0.8;
	filter: Alpha(opacity=80);
}


#index .handbook-web a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 48px;
	padding: 0 10px 0 40px;
	border: solid 2px #b9c6da;
	background: #fff;
	text-decoration: none;
	font-size: 14px;
	line-height: 1em;
	color: #333;
	position: relative;
}

#index .handbook-web a:before {
	content: '';
	width: 26px;
	height: 29px;
	margin-top: -8px;
	background: url('/handbook/images/array.png') no-repeat 0 0;
	position: absolute;
	top: 50%;
	left: 15px;
}


#index .handbooknavi {
}


#index .handbook-pdf {
	margin-bottom: 20px;
	width:100%;
	text-align: center;
	background: #e8eefc;
	padding: 23px;
}

#index .handbooknavi .handbookttl {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
	padding-bottom: 8px;
	border-bottom: 4px solid #808fbb;
	text-align: center;
	margin-bottom: 23px;
}



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

#detail .mokuji {
	background: #e8eefc;
	margin-top: 20px;
}


#detail .handbookttl2 {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5;
	text-align: left;
	background: #e8eefc;
}

#detail .mokuji-container {
	border-top: 4px solid #808fbb;
	margin: 10px 0 0 0;
	padding: 15px 0 0 0;
}

#detail .mokuji-bx {
	text-align: left;
	margin: 0;
	padding:0;
}

#detail .mokuji-bx li {
	display: block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	margin: 0 0 8px;
	text-align: left;
}

#detail .mokuji-bx li a:hover {
	opacity: 0.8;
	filter: Alpha(opacity=80);
}


#detail .mokuji-bx a {
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 10px 0 40px;
	border: solid 2px #b9c6da;
	background: #fff;
	text-decoration: none;
	font-size: 14px;
	line-height: 1em;
	color: #333;
	position: relative;
}

#detail .mokuji-bx li a:before {
	content: '';
	width: 26px;
	height: 29px;
	margin-top: -8px;
	background: url(/handbook/images/array.png) no-repeat 0 0;
	position: absolute;
	top: 50%;
	left: 15px;
}





/* ---------------------------------------------------------
	CSS Document detail
--------------------------------------------------------- */

#detail {
	text-align: left;
}

#detail .section {
	margin-bottom: 40px;
}

#detail h3 {
	margin-bottom: 20px;
	padding: 6px 5px 5px 5px;
	border-bottom: solid 2px #808fbb;
	background: #e8eefc;
	font-weight: 100;
	font-size: 16px;
	line-height: 1.2;
}

#detail p {
	margin-bottom: 10px;
}
/* ---------------------------------------------------------
	CSS Document detail > box
--------------------------------------------------------- */

#detail .box {
	margin-bottom: 20px;
	padding: 20px 0;
	border: solid 1px #ccc;
}

#detail .box p.f_left {
	margin-bottom: 20px;
	text-align: center;
}

#detail .box p.f_left img {
	width: 120px;
	margin-bottom: 10px;
	border-radius: 120px;
	-webkit-border-radius: 120px;
	border: solid 5px #e8eefc;
}

#detail .box p.f_left span {
	display: block;
	font-size: 18px;
	line-height: 1.2;
	color: #fd6d16;
}

#detail .box p.f_left sup {
	display: block;
	font-size: 14px;
}

#detail .box ol {
	margin: 0 15px;
}

#detail .box ol li {
	margin-bottom: 10px;
	padding-left: 24px;
	background: url(../images/icon.png) no-repeat 0 2px;
	background-size: 18px auto;
}

/* ---------------------------------------------------------
	CSS Document detail > handbook
--------------------------------------------------------- */

#detail .handbook .pc {
	display: none;
}



/** マージン・インデント **/
#detail .handbook .left1 {margin-left: 0.5em;}
#detail .handbook .left2 {margin-left: 1em;}
#detail .handbook .left3 {margin-left: 1.5em;}
#detail .handbook .left5 {margin-left: 2.5em;}
#detail .handbook .leftsp0 {margin-left: 0em;}
#detail .handbook .leftsp2 {margin-left: 0em;}
#detail .handbook .leftsp3 {margin-left: 0.8em;}

#detail .handbook .right1 {margin-right: 0.5em;}
#detail .handbook .right2 {margin-right: 1em;}
#detail .handbook .right3 {margin-right: 1.5em;}
#detail .handbook .rightsp0 {margin-right: 0em;}
#detail .handbook .rightsp3 {margin-right: 0.8em;}

#detail .handbook .top1 {margin-top: 0.5em;}
#detail .handbook .top2 {margin-top: 1em;}
#detail .handbook .top3 {margin-top: 1.5em;}
#detail .handbook .top4 {margin-top: 2em;}
#detail .handbook .top5 {margin-top: 2.5em;}
#detail .handbook .top10 {margin-top: 5em;}

#detail .handbook .bottom1 {margin-bottom: 0.5em;}
#detail .handbook .bottom2 {margin-bottom: 1em;}
#detail .handbook .bottom3 {margin-bottom: 2em;}

#detail .handbook .tb001 {margin: 1em 0;}


#detail .handbook .indent1 {padding-left: 1em;text-indent: -1em;}
#detail .handbook .indent2 {padding-left: 2em;text-indent: -2em;}
#detail .handbook .indent3 {padding-left: 3em;text-indent: -3em;}



/** 左寄せ・中央寄せ・右寄せ **/
#detail .handbook .left {text-align: left;}
#detail .handbook .center {text-align: center;}
#detail .handbook .right {text-align :right;}




/** テキスト関連 **/
#detail .handbook .txt {
	margin-left: 1em;
	margin-bottom: 30px;
}

#detail .handbook .txt-s {
	font-size: 13px;
	line-height: 1.5;
}

#detail .handbook .txt-l {
	font-size: 17px;
	line-height: 1.5;
}


#detail .handbook .color555 {
	color: #555;
}

/* "#detail p" exists above*/


#detail .handbook .caution {
	width: 80%;
	margin: auto;
	padding: 20px 0;
	border: solid 5px #e8eefc;
	color: #0575bf;
	text-align: center;
}
#detail .handbook .caution p {
	margin:0;
}


#detail .handbook .underline {
	border-bottom: double 3px #ccc;
}


#detail .handbook .underline2 {
	border-bottom: solid 1px #000;
}




/** 見出し **/
#detail .handbook h4 {
	font-size: 15px;
	color: #0575bf;
	margin-bottom: 10px;
}

#detail .handbook h5 {
	display: inline;
	padding: 2px 0;
	font-weight: 100;
	font-size: 15px;
	height: 20px;
	line-height: 20px;
	color: #0575bf;
}

#detail .handbook .h5lines {
	margin-bottom: 10px;
	padding: 8px 0 8px 0;
	border-top: solid 2px #ccc;
	border-bottom: solid 2px #ccc;
}

#detail .handbook h6 {
	color: #0575bf;
	font-size: 14px;
}


/* 第１章 自営型テレワークへのアプローチ 小見出し */
#detail .handbook .sb01 {
	border: solid 2px #999;
	margin: 5px auto 17px;
	padding: 3px;
	font-size: 14px;
	font-weight: bold;
	color: #555;
	background: #edfbfd;
	white-space: nowrap;
}

/* 第１章 自営型テレワークへのアプローチ 会社員等と個人事業主との違い表 */
#detail .p_01 {
	width:100%;
	font-size:15px;
	text-align:center;
	margin:3% 0
}

#detail .p_01 td {
	border:1px solid #ccc;
	padding:1.5%;
}

#detail .p_01 td span {
	font-size:12px;
	font-weight:normal;
	display:block
}

#detail .p_01 td ul li {
	list-style-type: disc;
	margin:0 0 1px 1.5em;
	line-height:21px;
}

#detail .p_01 td.b_none {
	border:none;
	width:6px;
	height:6px;
	padding:0px;
}

#detail .p_01 td.obj_01,
#detail .p_01 td.obj_02 {
	font-size:15px;
	line-height:19px;
	width:36%;
	border:none;
	padding:1px
}

#detail .p_01 td.obj_01 {
	padding-right:1px;
}

#detail .p_01 td.obj_02 {
	padding-left:1px;
}

#detail .p_01 td.obj_01 strong,
#detail .p_01 td.obj_02 strong {
	background:#8e8e8e;
	display:block;
	color:#fff;
	border-radius:6px;
	font-weight:bold;
}

#detail .p_01 td.obj_01 strong{
	padding-top:28px;
	height:46px;
}

#detail .p_01 td.obj_02 strong{
	padding-top:10px;
	height:64px;
}

#detail .p_01 td.obj_05 {
	font-size:15px;
	line-height:18px;
	background:#e6ebfa;
	width:6%;
	border-radius:6px;
	border:none;
}

#detail .p_01 td.obj_03 {
	font-size:15px;
	background:#7f8dba;
	color:#fff;
	padding:8px;
	line-height:21px;
	width:21.5%;
	border-radius:6px 0 0 6px;
	border:none;
}

#detail .p_01 td.obj_04_c {
	background:#fff;
	text-align:left;
	vertical-align:top;
	font-size:15px;
}

#detail .p_01 td.obj_04_c strong:before {
	content:"●";
	margin-right:0.3em;
	color:#7f8dba
}

#detail .p_01 td.obj_04_w {
	background:#fff;
	text-align:left;
	vertical-align:top;
	font-size:15px;
	border-radius:50px;
}

#detail .p_01 td.obj_04_w strong:before {
	content:"●";
	margin-right:0.3em;
	color:#7f8dba
}

#detail .p_01 td.obj_04_c strong,
#detail .p_01 td.obj_04_w strong {
	font-size:15px;
	line-height:22px;
	color:#333;
	font-weight:bold;
	display:block;
	text-indent:-1.3em;
	margin:0 0 2px 1.3em;
}

/* 情報セキュリティの重要性について／税金について etc.. */
#detail .handbook .sb02 {
	position: relative;
	margin-right: 0.5em;
	margin-bottom: 8px;
	margin-left: 0.5em;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
	font-weight: bold;
}
#detail .handbook .sb02::after {
	position: absolute;
	bottom: -2px;
	left: 0;
	z-index: 2;
	content: '';
	width: 4em;
	height: 3px;
	background-color: #333;
}


/* 自営型テレワーク関連情報 */
#detail .handbook .sb03 {
	color: #000;
	font-size: 14px;
	padding: 0px;
	background: linear-gradient(transparent 60%, #fff9cf 0%);
}




/** リード枠 **/
#detail .handbook .lead {
	padding: 8px;
	background: #fef8da;
	margin-bottom: 20px;
}

#detail .handbook .lead p {
	margin: 0;
}

#detail .handbook .leadsum {
	margin: 1em 0 1em 1em;
	line-height: 2;
}


#detail .handbook .lead2 {
	border-radius: 8px; background: #fff; padding:0.8em;
}




/** 定義リスト **/
#detail .handbook dl {
//	margin-bottom: 30px;
}

#detail .handbook dt {
	display: inline;
	font-size: 15px;
	font-weight: bold;
}

#detail .handbook dt.step {
	padding: 0 5px;
	background: linear-gradient(transparent 60%, #c1eefe 0%);
}

#detail .handbook dd {
	padding: 0 0 2em 0;
	font-size: 14px;
}

#detail .handbook dd .pics {
	margin: 40px 0 60px 0;
	width: 100%;
	text-align: center;
}



/** リスト UL **/
/*＜自営型テレワークの職種＞*/
#detail .handbook ul.linedtxt {
	display: flex;
	flex-wrap: wrap;
	margin-left: 2em;
}

#detail .handbook ul.linedtxt li:before {
	content: "●";
}
#detail .handbook ul.linedtxt li {
	margin-right: 2em;
	line-height: 2;
}


#detail .handbook ul.ul01 li {
	list-style-type: disc;
	line-height: 1.5;
//	margin-left: 2em;
	margin: 6px 0 6px 2em;
}


/* スマホ版 チェックポイント */
#detail .handbook ul.ul02 {
	display: flex;
	flex-wrap: wrap;
	padding-left: 1em;
	text-indent: -1em;
}
#detail .handbook ul.ul02 li:before {
	content: "□ ";
}
#detail .handbook ul.ul02 li {
	margin: 5px 0;
}
#detail .handbook ul.ul02 li strong {
	color: #600;
z}



#detail .handbook ul.law li {
	line-height: 1.7;
	margin-bottom: 0.5em;
	list-style-type: disc;
}






/** リスト OL **/
#detail .handbook ol.decimal li{
	list-style-type: decimal;
	line-height: 1.5;
	margin: 6px 0 6px 2em;
}



/** テーブル **/
#detail table.checkpoint {
	width: 100%;
}
#detail table.checkpoint td {
	background: #edfbfd;
	padding: 8px;
	font-size: 15px;
	line-height: 1.7;
	border: solid 10px #fff;
	text-align: center;
}
#detail table.checkpoint td strong {
	color: #ba2700;
}
#detail table.checkpoint td.beige {background: #F3ECDC;}
#detail table.checkpoint td.blue {background: #E4F8FF;}
#detail table.checkpoint td.orange {background: #FFE6C3;}
#detail table.checkpoint td.green {background: #EBF7DB;}
#detail table.checkpoint td.cream {background: #F9EFD2;}
#detail table.checkpoint td.pink {background: #f9edf1;}



#detail table td.tel {
	padding-right: 30px;
}



/** 注意書き **/
#detail .warning {
	padding: 0.8em;
	border-radius: 8px;
	border: solid 2px #ccc;
	font-size: 14px;
	color: #000;
	background: #e4f8ff;
}
#detail .warning p {
	margin: 0;
}
#detail .warning strong {
	color: #CC0000;
}



/* 情報セキュリティの重要性について／税金について etc.. */
#detail .warning2 {
	margin: 0 0.5em;
	padding: 0.5em;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
#detail .warning2 a {
	color: #000;
}





/* キャリアパスの例 */
#detail .warning3 {
	margin: 0 1em;
	padding: 0.5em;
	border: solid 1px #ccc;
}



/** 横２段Flexbox **/
.flex01 {
//	display: flex;
//	justify-content: space-between;
}
.flex01-in {
//	width: 48%;
}