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

#PopUpContents {
	border-top: solid 1px #fff;
	padding: 0px !important;
}

.GridSet {
	width: 100%;
}
.ButtonStyle1B a:hover {
	opacity: .7;
	border-right: solid 3px transparent;
}

.mb10 { padding-bottom: 10px!important;}
.mb20 { padding-bottom: 20px!important;}
.mb30 { padding-bottom: 30px!important;}
.mb40 { padding-bottom: 40px!important;}
.mt10 { padding-top: 10px!important;}
.mt20 { padding-top: 20px!important;}
.mt30 { padding-top: 30px!important;}
.mt40 { padding-top: 40px!important;}

div.Section.gray {
	background-color: #D5E5F4;
}
div.Section.purple {
	background-color: #801b13;
}
div.Section.purple > .Inner {
	padding-bottoM: 1.75em;
}
div.Section.purple .-pc {
	display: block;
}
div.Section.purple .-sp {
	display: none;
}
div.Section .Figure .-pc {
	display: block;
}
div.Section .Figure .-sp {
	display: none;
}


.branding-image .slide {
	background-color: #fff;
}

.fixbanner { z-index: 999; }
.fixbanner p,
.fixbanner a { 
display: inline-block;
    background-color: #333;
    position: fixed;
    bottom: 166px;
    right: 18px;
    padding: 6px 0;
    width: 300px;
    text-align: center;
    color: #fff;
    font-size: 100%;
    text-decoration: none;
}
.fixbanner a:hover { 
opacity: 0.8;
}

div.Section.TW_NewTopics {
	position: relative;
    /*min-height: 450px;*/
    background: url(/products/it/ws_sol/picup/telework/image/newtopics_bg.jpg) #fff top center no-repeat;
    background-size: 100% auto;
    background-attachment: scroll;
}
div.Section.TW_Ask {
	position: relative;
    /*min-height: 450px;*/
    background: url(/products/it/ws_sol/picup/telework/image/ask_bg.jpg) #fff top center no-repeat;
    background-size: 100% auto;
    background-attachment: scroll;
}

#catch .ImgOnlyStyle img.sp {
	display: none;
}
p, table th, table td {
	font-size: 100%;
}
.LinkListStyle1 {
	font-size: 100%;
}
.LinkListStyle1 dd, .LinkListStyle1 li {
	line-height: 160%;
}
p.CatchCopy {
	font-size: 140%;
	color: #3B3838;
	margin-top: 30px;
	margin-bottom: 20px;
}
.HorizontalInnerLinks {
	width: 965px;
	margin: 0 auto;
}
.Inner {
	width: 965px;
	margin: 0 auto;
}
h2 {
	background-image: none;
	margin-bottom: 15px;
	padding-top: 30px;
	text-align: center;
}
h2 span {
	border-bottom: 2px solid #1f4e79;
	background-color: transparent;
	font-size: 165%;
	font-weight: bold;
	color: #3B3838;
	padding-bottom: 0;
	padding-top: 0;
	display: inline-block;
}
h2 span.blue {
	border-bottom: none;
	color: #1D405D;
}
h2 span.white {
	border-bottom: none;
	color: #FFFFFF;
}
.TW_NewTopics h2 span,
.TW_Ask h2 span {
	color: #ffffff;
	text-shadow: 0 0 4px black;
	border-bottom: none;
}
.TW_Ask p {
	color: #ffffff;
	text-shadow: 0 0 4px black;
}

#pickup h2 {
	padding-left: 0;
	padding-top: 0;
	margin-bottom: 0;
}
#pickup h3 {
	background-image: none;
	color: #C00000;
	font-size: 120%;
	font-weight: normal;
	margin-bottom: 0;
	padding-bottom: 0;
}
#pickup h3 + p {
	font-size: 96%;
}
#pickup p {
	padding-left: 30px;
}
.hcm h3 {
	background-image: url(/products/it/ws_sol/solution/hcm/image/list_l.png);
}
h3 {
	font-size: 130%;
	color: #fff;
	margin-bottom: 10px;
	margin-bottom: 10px;
	padding: 10px;
	text-align: center;
	background-color: #1F4E79;
}
h3.blue {
	font-size: 150%;
	color: #1D405D;
	margin: 0 0 10px;
	padding: 0;
	text-align: left;
	background: none;
}
.CatchCopy.blue {
	margin-top: 10px;
	margin-bottom: 13px;
	font-size: 130%;
}
.CatchCopy strong,
.CatchCopy.blue strong {
	color: #333;
}
p.ColumnTitle {
	margin: 20px 0 10px;
}
p.ColumnTitle span {
	padding: 5px 10px;
	background-color: #949494;
	font-size: 90%;
	color: #fff;
}
.ButtonStyle1B {
	margin-top: 20px;
}
.ButtonStyle1B a:link,
.ButtonStyle1B a:visited {
	background-color: #002060;
	background-size: 26px 26px;
	background-position: center right 12px;
	padding: 6px 46px 6px 19px;
	box-sizing: border-box;
}
.ButtonStyle1B.youtube a:link,
.ButtonStyle1B.youtube a:visited {
	background-image: url(../../../../../../image/jp/r1/icon/icon_movie_white_hd.png);
}
.ButtonStyle1B.detail a:link,
.ButtonStyle1B.detail a:visited {
	background-image: url(../../../../../../image/jp/r1/icon/icon_new_window_white_hd.png);
}
ul.ListStyle1 {
	font-size: 100%;
	margin-bottom: 0;
}
.ListStyle1.small li  {
	background-image: url(/products/it/ws_sol/solution/image/list_s2.png);
	background-repeat: no-repeat;
	background-position: left top 3px;
	padding-left: 27px;
	background-size: 13px 13px;
}
.BoxPatternB {
	background-color: #D7EEF9;
	padding-top: 10px;
}
#movie .MovieArea {
	display: flex;
}
#movie .MovieArea .movie {
	margin-left: 15px;
}

/** 2020-03-13 **/
.TopicsTitle {
	font-size: 110%;
	margin-bottom: 10px;
}
.TopicsTitle img {
	padding-right: 10px;
}
p.btn_s span {
	display: flex;
	width: 70%;
	margin: 0 auto;
	padding: 10px 30px;
	background: url("/image/jp/r1/icon/icon_link_right.gif") no-repeat 100% 50%;
	font-size: 110%;
	align-items: center;
	justify-content: center;
}
p.btn_s span:hover {
	background:url("/image/jp/r1/icon/icon_link_right_hover.gif") no-repeat 100% 50%;
	background-color:#ffdbdb;
}
p.btn_s span.blue:hover {
	background:url("/products/it/ws_sol/common/images/icon/icon_link_right_blue_hover.gif") no-repeat 100% 50%;
	background-color: #d6edfb;
}
p.btn_s span.blue {
	color: #0081CC;
	border-color: #0081CC;
	background:url("/products/it/ws_sol/common/images/icon/icon_link_right_blue.gif") no-repeat 100% 50%;
	background-color: #ffffff;
}
p.btn_s span.blue:hover {
	background:url("/products/it/ws_sol/common/images/icon/icon_link_right_blue_hover.gif") no-repeat 100% 50%;
	background-color: #d6edfb;
}
p.btn_s span.blue._l {
	font-size: 130%;
	height: 20px;
	padding: 20px;
	border-radius: 8px;
	text-shadow: none;
}


.ws_solInquiryArea h2{
	margin:5px 0 30px 0;
	line-height:100%;
	background: none;
	padding-top: 0;
}

.ws_solInquiryArea h2 span{
	font-size: 180%;
	padding:0px;
	line-height:100%;
	text-align: center;
	background: none;
	border-bottom: none;
}


.tele_mail {
	background: url(/products/it/ws_sol/picup/telework/image/back_tele_mail.png) no-repeat 0 0/cover;
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 10px;
	display: table;
	justify-content: center;
}
.tele_mail .col_l,
.tele_mail .col_r {
	display: table-cell;
	vertical-align: top;
}
.tele_mail .col_l {
	width: 150px;
}
.tele_mail .col_l img {
	padding-top: 10px;
}
.tele_mail .col_r {
	width: calc((100% - 150px));
	padding-right: 20px;
}

.tele_mail h2 {
	padding-top: 10px;
	margin-bottom: 10px;
	text-align: left;
}
.tele_mail h2 span {
	display: block;
	border-bottom: none;
	color: #fff;
	padding: 0;
}
.tele_mail p {
	color: #fff;
	font-size: 130%;
	font-weight: bold;
}
.tele_mail a {
	color: #fff;
	font-weight: bold;
}



/* // POPUP /////////// */
/*h1.Popup { margin-bottom: 0; }
h1.Popup span {
	border-bottom: 2px solid #002060;
	background-color: transparent;
	font-size: 110%;
	font-weight: bold;
	color: #3B3838;
	padding: 15px 15px 0px;
	display: inline-block;
}*/
#PopUpContents h1 {
	background-image: none;
	margin-bottom: 15px;
	padding-top: 30px;
	text-align: center;
}
#PopUpContents h1 span {
	border-bottom: 2px solid #1f4e79;
	background-color: transparent;
	font-size: 165%;
	font-weight: bold;
	color: #3B3838;
	padding-bottom: 0;
	padding: 30px 15px 3px 15px;
	display: inline-block;
}

/** 2020-06-23 **/
#pickup_contents h2 {
    margin-bottom: 10px;
    text-align: left;
    padding: 7px 10px;
    font-size: 110%;
    font-weight: bold;
    color: #3B3838;
    border-bottom: none;
	border-left: 15px solid #b10202;
    background-color: #dedede;
}
#pickup_contents h3 {
    background-color: transparent;
    text-align: left;
    margin-bottom: 10px;
    font-size: 120%;
    color: #b10202;
    padding: 0 10px;
}

.Blog {
	position: relative;
	padding-bottom: 5px;
    min-height: aute;
    background: url(/products/it/ws_sol/picup/telework/blog/image/blog_bn.png) #fee05a top center no-repeat;
    background-size: 100% auto;
    background-attachment: scroll;
    margin-bottom: 20px;
}
.Blog p.title{
	padding: 90px 50px 0 125px;
    font-size: 120%;
    font-weight: bold;
    color: #000;
    }
.Blog p{
	padding: 5px 50px 10px 50px;
    font-size: 100%;
    color: #000;
    }
.Blog img{
    vertical-align: -0.02em;
}
div.CategoryList1, div.CategoryList2 {
	margin: 0 0 10px;
}
div.CategoryList1, div.CategoryList2 ul {
	margin-right: 15px;
	text-align: right;
	letter-spacing: 0;
}
div.CategoryList1 ul a {
    text-decoration: none;
    color: #fff;
}
div.CategoryList1 ul:hover {
    opacity: .8;
}
div.CategoryList2 ul a {
    text-decoration: none;
    color: #b10202;
}
div.CategoryList1 ul li {
	display: inline;
	margin-bottom: 2px;
    padding: 5px;
    font-size: 80%;
    font-weight: bold;
    background: #b10202;
    line-height: 1.35;
}
div.CategoryList2 ul li {
	display: inline;
	margin-bottom: 2px;
    padding: 4px;
    font-size: 80%;
    background: none;
    line-height: 1.35;
    border: 1px #b10202 solid;
}
div.CategoryList2 ul li:hover {
	background-color: #ffdbdb;
}


#webinar a:hover img{
	opacity: 0.7;
}


/* Point */
.TW_threeList{
   display: -webkit-flex;
   display: flex;
       -webkit-flex-wrap: nowrap;
       flex-wrap: nowrap;
   justify-content:space-between;
       align-items: stretch;
   margin-bottom: 40px;
}
.TW_threeBox{
    width: calc((100% - 30px) / 3);
	border: solid 2px #0081CC;
}
.TW_threeBox.sec2{ background-color: #0081cc; }

.TW_threeLabel{
    text-align: center;
    color: #0081cc;
    padding: 10px 15px 5px;
    font-size: 120%;
    font-weight: bold;
	font-family: serif;
    border-bottom: solid 1px #bbb;
    margin: 0 30%;
}
.TW_threeLabel.sec2{ color:#fff }

.TW_threeLabel span{
	display: block;
	font-size: 150%;
}
.TW_threeBox a {
    display: block;
    color: #0081cc;
    text-decoration: none;
    padding-bottom: 50px;
    background: url(/products/it/ws_sol/common/images/icon/icon_down_l_hd_blue.gif) no-repeat 50% 95%;
}
.TW_threeBox a:hover {
    background: url(/products/it/ws_sol/common/images/icon/icon_down_l_hd_blue_hover.gif) no-repeat 50% 95%;
	background-color: #d6edfb;
}
.TW_threeBox p{
	color: #333;
	text-align: center;
	font-size: 130%;
	margin: 15px;
}
.TW_threeBox.sec2 p{ color: #fff; }

.TW_threeBox p.down {
	margin-bottom: 0;
	color: #0081cc;
}

/*.TW_threeBox p.down {
	margin-bottom: 50px;
}
.TW_threeBox p.down a {
	color: #0081cc;
	text-decoration: none;
	padding: 10px 10px 30px;
	background: url(/products/it/ws_sol/common/images/icon/icon_down_l_hd_blue.gif) no-repeat 50% 100%;
}
.TW_threeBox p.down a:hover {
	background: url(/products/it/ws_sol/common/images/icon/icon_down_l_hd_blue_hover.gif) no-repeat 50% 100%;
}*/



/* download Area */
.BoxPatternD {
	background-color: #372d7d;
	padding: 15px;
}

.download h2.wht {	
	font-size: 165%;
	font-weight: bold;
	color: #fff;
	padding: 10px;
	background-image: none;
	line-height: 1.2em;
}

p.btn_r span {
	background-color:#b1000e;
	font-size: 140%;
	font-weight: bold;
	color: #fff;
	width: 70%;
	display: flex;
	align-items: center;
	margin: 20px auto;
	padding: 20px;
	justify-content: center;
	background-image: url(../../../../../../../image/jp/r1/icon/icon_new_window_white_hd.png);
	background-repeat: no-repeat;
	background-position: right 100px center;
	border: solid 1px #fff;
}

p.btn_r span:hover{
	background-color:#ae3841;
}

.download a {
	text-decoration: none;
}

.download .AdditionalNotesStyle2 {
	margin-left: 30px;
	color: #fff;
}


#DLBtn01 p.ButtonStyle1{
	text-align: center;
	margin: 30px auto;
}

#DLBtn01 .LinkBtn01 p.ButtonStyle1 a:link,
#DLBtn01 .LinkBtn01 p.ButtonStyle1 a:visited{
	background-color: #372d7d;
	background-position: center right 12px;
	padding: 6px 52px 6px 24px;
	box-sizing: border-box;
	font-weight: bold;
	font-size:140%;
	width:100%;
}


/*--- stories List ---*/
#storiesReading #storiesList {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 100%;
	margin-left: 8px;
}

#storiesReading #storiesList li.sDetails {
	display: flex;
	width: 23%;
	margin: 8px 6px;
}

#storiesReading #storiesList li.sDetails img {
	width: 100%;
}

#storiesReading #storiesList li.sDetails dl {
	margin: 6px 2px 16px 6px;
}

#storiesReading #storiesList li.sDetails dt {
	font-weight: bold;
	line-height: 150%;
	margin-bottom: 12px;
	font-size:90%;
}

#storiesReading #storiesList li.sDetails dt.NewWin:after{
	content: '';/*何も入れない*/
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url(/image/jp/r1/icon/icon_new_window_hd.gif);
	background-size: contain;
	vertical-align: middle;
	margin:0px 2px; 
}

#storiesReading #storiesList li.sDetails dt.YouTubeLink:after{
	content: '';/*何も入れない*/
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url(/image/jp/r1/icon/icon_movie_hd.gif);
	background-size: contain;
	vertical-align: middle;
	margin:0px 2px; 
}


#storiesReading #storiesList li.sDetails dd {
	font-size: 12px;
	color: #0081cc;
	text-align: center;
	margin: 0 25%;
	padding: 3px 10px;
	border: solid 1px #0081cc;
	border-radius: 5px;
}
#storiesReading #storiesList li.sDetails dd:hover {
	background-color: #d6edfb;
}

#storiesReading #storiesList li.sDetails a{
	border: 1px solid #666;
	box-sizing: border-box;
	color: #3d3d3d;
	text-decoration: none;
}

#storiesReading #storiesList li.sDetails a:hover{
	text-decoration: none;
	border: 1px solid #063;
	color: #000; 
	opacity: 0.8 ;
}


/*--- Note ---*/
.DateListStyle1.TWNote dt{
	display: inline-block;
	padding: 5px 10px 3px;
	color: #fff;
	text-align: center;
	font-size: 80%;
	width: 100px;
	background-color: #c00000;
}


/*--- テレワークを進めるための4つのポイント ---*/
#TWPoint p.PointSetNo {
	padding-top: 10px;
	margin-bottom: -5px;
	/* margin-top: -5px;*/
	color: #fff;
	text-align: center;
	font-size: 130%;
	font-weight: bold;
	background: url(/products/it/ws_sol/picup/telework/image/point_bk.png) top center no-repeat;
}
#TWPoint .BoxPatternA { border: solid 1px #000; }
#TWPoint .BoxPatternA h2 { background-color: #000; font-weight: bold; font-size: 120%; }
#TWPoint .BoxPatternA img { width: 100%; }

a.NoDecoration { text-decoration: none; }



@media screen and (max-width: 1024px) {
	/*div.Section.TW_NewTopics {
		min-height: 330px;
	}*/

}
@media screen and (max-width: 994px) {
	.JS .GridSet {
		margin-left: -15px;
		margin-right: -15px;
	}
	.JS .Grid4 {
		padding-left: 0;
		padding-right: 0;
	}
	.JS div.Section {
		padding: 15px;
	}
	.JS .Inner {
		width: 100%;
	}
	.JS h2 {
		margin: 0 0 5px;
	}
	.JS .TopicsWS {
		padding: 0 !important;
	}
	/*#storiesReading #storiesList li.sDetails {
		display: flex;
		width: 31%;
	}*/
}
@media screen and (max-width: 767px) {
	.JS #movie .MovieArea {
		flex-direction: column;;
	}
	.JS .tele_mail {
		display: block;
	}
	.JS .tele_mail .col_l,
	.JS .tele_mail .col_r {
		display: inline-block;
		vertical-align: top;
		width: calc(100% - 30px);
	}
	.JS .tele_mail .col_l {
		text-align: center;
	}
	.JS .tele_mail .col_r {
		padding-left: 20px;
	}
	.JS .tele_mail p {
		font-size: 100%;
	}
	.JS .Blog p.title {
		padding: 60px 30px 10px 50px;
	}
	h3.blue {
	text-align: center;
		margin-top: 15px;
	}
	.CatchCopy.blue {
		text-align: center;
	}
	div.Section.TW_NewTopics {
		min-height: auto;
		background: url(/products/it/ws_sol/picup/telework/image/newtopics_bg_s.jpg) #fff bottom center no-repeat;
		background-size: 100% auto;
	}
	div.Section.TW_Ask {
		min-height: auto;
		background: url(/products/it/ws_sol/picup/telework/image/ask_bg_s.jpg) #fff bottom center no-repeat;
		background-size: 100% auto;
	}
	p.btn_r span {
		background-position: right 30px center;
	}
	p.btn_r span:hover {
		background-position: right 30px center;
	}
	#storiesReading #storiesList li.sDetails {
		display: flex;
		width: 47%;
	}
	div.Section.purple {
		padding: 0 10px 1.25em;
		background-color: #801b13;
	}
	div.Section.purple .-pc {
		display: none;
	}
	div.Section.purple .-sp {
		display: block;
	}
	div.Section .Figure .-pc {
		display: none;
	}
	div.Section .Figure .-sp {
		display: block;
	}

	h2 span.white {
		letter-spacing: 0.1em;;
	}
}
@media screen and (max-width: 579px) {
	.JS #catch .ImgOnlyStyle img.sp {
		display: block;
	}
	.JS #catch .ImgOnlyStyle img.pc {
		display:none;
	}
	.JS .ThumbW230SetStyle .Img {
		width: auto;
		float: none;
		height: 100%;
	}
	.JS .ThumbW230SetStyle .Img.ImgOnlyStyle {
		padding-bottom: 0;
	}
	.JS .Blog p.title {
		padding: 60px 30px 10px 50px;
		/*text-align: center;*/
	}
	.JS .Blog p{
		padding: 10px 50px 10px 50px;
	}

	.TW_threeList {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.TW_threeBox {
		width: 80%;
		margin-bottom: 15px;
	}
	p.btn_r span {
		font-size:120%;
		padding: 10px 20px ;
		background-position: right 10px center;
		background-size: 24px 24px
	}
	p.btn_r span:hover {
		font-size:120%;
		padding: 10px 20px ;
		background-position: right 10px center;
		background-size: 24px 24px
	}
	/*#storiesReading #storiesList li.sDetails {
		display: flex;
		width: 45%;
	}*/
}
	
@media screen and (max-width: 399px) {
	.TW_threeBox {
		width: 100%;
	}
	.download h2 {
		font-size: 135%;
	}
	p.btn_r span {
		font-size:100%;
		padding: 10px 20px ;
		background-position: right 10px center;
		background-size: 16px 16px
	}
	p.btn_r span:hover {
		font-size:100%;
		padding: 10px 20px ;
		background-position: right 10px center;
		background-size: 16px 16px
	}
	#storiesReading #storiesList {
		margin-left: 0;
	}
	#storiesReading #storiesList li.sDetails {
		flex-direction: column;
		display: flex;
		width: 100%;
	}
}