@charset "utf-8";
/* CSS Document */
.PageTitleStyle1 {
	margin: 0 0 15px;
}
.PageTitleStyle1 .SubTitle {
	color: #000;
	font-weight: bold;
}
.BrandingArea img.ShowSP, br.ShowSP {
	display: none;
}
.BrandingArea {
	height: 300px;
	background-position: center center;
}
.BrandingArea .TextArea {
	padding-right: 15px;
	padding-top: 30px;
}
.BrandingArea .TextArea .Text {
	background-color: rgba(255,255,255,.8);
	padding: 30px 40px 20px 40px;
	display: table;
	margin: 0 0 0 auto;
	width: 450px;
}
body.p_i .Workspace .BrandingArea .TextArea .Text {
	background-image: none;
}
.Productivity .BrandingArea .TextArea .Text {
	background-color: rgba(255,255,255,.9);
}
.Workspace .BrandingArea .TextArea .Text {
	border-left: 6px solid #0A05A0;
}
.Productivity .BrandingArea .TextArea .Text {
	border-left: 6px solid #FF730A;
}
.Workplace .BrandingArea .TextArea .Text {
	border-left: 6px solid #0A8C0A;
}
.BrandingArea .TextArea .Title {
	font-weight: bold;
	font-size: 150%;
	color: #000;
}
.BrandingArea .TextArea p {
	font-size: 100%;
	margin-bottom: 10px;
}
/*.Productivity .Column2.LinkBox .Text {
	padding-left: 30px;
	padding-right: 30px;
}*/
.Column2.LinkBox {
	position: relative;
	box-sizing: border-box;
	padding-top: 30px;
}
.Column2.LinkBox a:link, .Column2.LinkBox a:visited {
	text-decoration: none;
	color: #1F1F1F;
}
.Column2.LinkBox a:hover .Text {
	background-color: #EEEEE4;
}
.Column2.LinkBox .Text {
	background-color: #F8F8F2;
	margin: 25px 50px 25px 25px;
	padding: 60px 50px 50px;
	text-align: center;
	position: relative;
	background-image: url(/Prod/comp/OSD/pc/businesspc/workspace/img/arrow.png);
	background-repeat: no-repeat;
	background-position: bottom 15% center;
	box-sizing: border-box;
}
.Productivity .Column2.LinkBox {
	width: calc((100% - 32px) / 3);
}
.Productivity .Column2.LinkBox .Text, .Productivity .Column2.LinkBox.LastItem .Text {
	margin: 25px 15px;
}
.Productivity .Column2.LinkBox .Text {
	padding: 60px 35px 50px;
}
.Column2.LinkBox.LastItem .Text {
	margin: 25px 25px 25px 50px;
}
.Column2.LinkBox .Text .txtUnderline {
	margin: 30px auto;
	display: table;
	position: relative;
}
.Column2.LinkBox .Text .txtUnderline:after {
	content: '';
	width: 40px;
	position: absolute;
	bottom: -1px;
	left: calc(50% - 20px);
}
.Workspace .Column2.LinkBox .Text .txtUnderline:after {
	border-bottom: 2px solid #0A05A0;
}
.Productivity .Column2.LinkBox .Text .txtUnderline:after {
	border-bottom: 2px solid #FF730A;
}
.Column2.LinkBox .Text:before {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	top: 0;
	left: 0;
}
.Workspace .Column2.LinkBox .Text:before {
	border-top: 2px solid #0A05A0;
	border-left: 2px solid #0A05A0;
}
.Productivity .Column2.LinkBox .Text:before {
	border-top: 2px solid #FF730A;
	border-left: 2px solid #FF730A;
}
.Column2.LinkBox .Text:after {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	bottom: 0;
	left: 0;
}
.Workspace .Column2.LinkBox .Text:after {
	border-bottom: 2px solid #0A05A0;
	border-left: 2px solid #0A05A0;
}
.Productivity .Column2.LinkBox .Text:after {
	border-bottom: 2px solid #FF730A;
	border-left: 2px solid #FF730A;
}
.Column2.LinkBox.Text:after {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	bottom: 0;
	left: 0;
}
.Column2.LinkBox:before {
	content: '';
	position: absolute;
	width: 42px;
	height: 42px;
	top: 53px;
	right: 48px;
}
.Productivity .Column2.LinkBox:before {
	right: 13px;
}
.Column2.LinkBox.LastItem:before, .Column2.LinkBox.LastItem:after {
	right: 23px;
}
.Productivity .Column2.LinkBox.LastItem:before, .Column2.LinkBox.LastItem:after {
	right: 13px;
}
.Workspace .Column2.LinkBox:before {
	border-top: 2px solid #0A05A0;
	border-right: 2px solid #0A05A0;
}
.Productivity .Column2.LinkBox:before {
	border-top: 2px solid #FF730A;
	border-right: 2px solid #FF730A;
}
.Column2.LinkBox:after {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	bottom: 28px;
	right: 48px;
}
.Productivity .Column2.LinkBox:after {
	right: 13px;
}
.Workspace .Column2.LinkBox:after {
	border-bottom: 2px solid #0A05A0;
	border-right: 2px solid #0A05A0;
}
.Productivity .Column2.LinkBox:after {
	border-bottom: 2px solid #FF730A;
	border-right: 2px solid #FF730A;
}
.Workspace .Column2.LinkBox .Text p {
	font-size: 120%;
}
h2 {
	font-size: 147%;
	background: none;
}
#Related h2 {
	font-size: 100%;
	background: none;
}
#po01, #po02, #po03 {
	background: linear-gradient(-60deg, #E3F2F2, #FFFFEE);
	margin-bottom: 40px;
}
.problem {
    display: table;
    border-radius: 60px;
    padding: 20px 70px 20px 125px;
	margin: 30px auto 10px;
}
p.TextStyle0 {
	font-weight: bold;
	font-size: 120%;
	margin-bottom: 10px;
	line-height: 1.3;
}
.problem .TextStyle0 {
	color: #fff;
	text-align: center;
}
.problem p.TextStyle1 {
	color: #000;
	font-size: 100%;
	line-height: 1.3;
	text-align: center;
	margin-bottom: 0;
	font-weight: bold;
}
.pbox {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}
.pbox .wrapper {
	text-align: center;
	width: calc((100% - 30px)/3);
	padding: 20px;
	letter-spacing: -1px;;
	position: relative;
	z-index: 2;
}
.pbox .wrapper {
	position: relative;
}
.pbox .wrapper:before {
	content:'';
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: -1;
}
.pbox .wrapper .box {
	background-repeat: no-repeat;
	background-position: center top;
	z-index: 99;
	padding-top: 100px;
}
.pbox .wrapper .box .TextStyle1 {
	font-size: 83%;
}

.Section.solve {
	background-repeat: no-repeat;
	background-position: top center;
	padding-top: 60px;
}
.Section.solve .Inner {
	padding: 30px 42px;
	box-sizing: border-box;
}
.Section.solve.Column .Inner {
	padding: 30px 0;
}
.Section.solve p.solve {
	color: #4D4D4D;
	font-size: 134%;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
	line-height: 1.4;
}
.Section.solve p.solve span {
	font-size: 140%;
}
.Workspace .Section.solve p.solve span {
	color: #0A05A0;
}
.Productivity .Section.solve p.solve span {
	color: #FF730A;
	line-height: 1.2;
}
.Workplace .Section.solve p.solve span {
	color: #0A8B0A;
}
.Workplace .Section.solve p.solve span span{
	font-size: 75%;
}
.Section.solve.Column p.solve span {
	font-size: 120%;
	line-height: 1.1;
}
.solve .BoxPatternB {
	background-color: #FCFCF2;
	margin: 30px auto 0;
	padding: 35px 40px 25px;
	border-radius: 10px;
}
.solve .BoxPatternB h2,
p.boxtitle {
	font-weight: bold;
	font-size: 130%;
}
p.boxtitle {
	text-align: center;
	color: white!important;
}
.Workspace .solve .BoxPatternB h2,
p.boxtitle {
	color: #0A05A0;
}
.Workplace .solve .BoxPatternB h2 {
	color: #0A8B0A;
}
.boxarea {
	background-color: #2D3250;
	padding: 15px;
	border-radius: 15px;
	margin-top: 25px;
}
#Event img:hover {
	opacity: .8;
}
.Productivity ul.ListStyle1, .Workplace ul.ListStyle1 {
	font-size: 90%;
	margin-bottom: 15px;
}
.ButtonStyle1.Box {
	text-align: center;
	font-weight: bold;
	font-size: 120%;
	margin-top: 30px;
}
.ButtonStyle1.Box.wide {
	font-size: 150%;
}
.ButtonStyle1.Box.wide a {
	background-position: right 7% center
}
.ButtonStyle1.Box a:hover {
	border-right: none;
	opacity: .8;
}
.ButtonStyle1.Box a:link, .ButtonStyle1.Box a:visited {
	background-color: #2D3250;
	border-radius: 8px;
	padding: 15px 40px 13px 30px;
	border-right: none;
	margin: 0 auto;
}
.ButtonStyle1.Box.wide a:link, .ButtonStyle1.Box.wide a:visited {
	width: 60%;
	padding: 20px 40px 18px 30px;
}
.ButtonStyle1.Box.wide2 a:link, .ButtonStyle1.Box.wide a:visited {
	width: 70%;
	padding: 20px 40px 18px 30px;
}
.title_p {
  color: #0A05A0;
  font-size: 134%;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.4;
  margin-top: 15px;
}
.title_p span {
    color: #0A05A0;
    font-size: 140%;
		border-bottom: 0px;
}
.title_wp {
  color: #0A8C0A;
  font-size: 134%;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.4;
  margin-top: 15px;
}
.title_wp span {
    color: #0A8C0A;
    font-size: 140%;
		border-bottom: 0px;
}
.title_pr {
  color: #FF730A;
  font-size: 134%;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.4;
  margin-top: 15px;
}
.title_pr span {
    color: #FF730A;
    font-size: 140%;
		border-bottom: 0px;
}
.ColumnSet.excep p {
	font-size: 120%;
}
.columnbutton {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}
.columnbutton.first {
	margin-top: 0px;
}
.columnbutton.all {
	display: block;
}
.columnbutton.excep {
	margin-top: 0px;
}
.columnbutton .leftbutton,
.columnbutton .rightbutton {
	width: 49%;

	color: white;
	font-weight: bold;
	font-size: 18px;
	background-color: #4a5fa2;
	text-align: center;
	border-radius: 10px;
	/* margin-bottom: 15px; */
	height: auto;
	min-height: 76px;
}
.columnbutton.all .leftbutton {
	width: 100%;
}
.columnbutton .leftbutton {
	margin-right: 2%;
}
.columnbutton .leftbutton a,
.columnbutton .rightbutton a {
	text-decoration: none;
	color: white;
	display: block;
	height: 100%;
	padding: 24px 10px 24px 10px;
}
.columnbutton .leftbutton a:hover,
.columnbutton .rightbutton a:hover {
	opacity: .8;
}
.columnbutton .leftbutton.twoline a,
.columnbutton .rightbutton.twoline a {
	padding: 10px 10px 10px 10px;
}
.columnbutton .leftbutton a span,
.columnbutton .rightbutton a span {
	font-size: 14px;
}
.mobile_view {
	display: none;
}
.boxarea.order .boxtitle a {
	color: inherit;
	text-decoration: inherit;

	padding-right: 39px;
	background-position: right 2px center;
	background-image: url(/image/jp/r1/icon/icon_link_right_l_white_hd.gif);
	background-repeat: no-repeat;
	background-size: auto;

}
.boxarea.order .boxtitle a:hover {
	background-position: right center;
}
.boxarea.order .columnbutton a {
	padding-right: 39px;
	background-position: right 2px top 43px;
	background-image: url(/image/jp/r1/icon/icon_link_right_l_white_hd.gif);
	background-repeat: no-repeat;
	background-size: auto;
}
.boxarea.order .columnbutton a:hover {
	background-position: right top 43px;;
}



@media screen and (max-width: 994px) {
	.JS br.HideRWD3 {
		display: none;
	}
	.JS img.ShowSP {
		display: none;
	}
	.JS .Workspace .BrandingArea {
		background-position: center right;
	}
	.JS .Column2.LinkBox:before {
		top: 22px;
	}
	.JS .Productivity .ColumnSet {
		margin: 0;
	}
	.JS .Productivity .Column2.LinkBox:before {
		top: 23px;
	}
	.JS .Section.solve {
		padding-top: 60px;
	}
	.JS .Column2.LinkBox .Text {
		padding: 50px 40px 40px;
	}
	.JS .Section.solve p.solve {
		font-size: 120%;
	}
	.JS .Productivity .Column2.LinkBox .Text {
		padding-right: 20px;
		padding-left: 20px;
	}
	.JS .Productivity .Section.solve .Column2 p.solve span {
		font-size: 97%;
	}
	.JS .solve .BoxPatternB h2,
	p.boxtitle {
		font-size: 120%;
	}

}

@media screen and (max-width: 767px) {
	.mobile_view {
		display: block;
	}
	.columnbutton .leftbutton,
	.columnbutton .rightbutton {
		margin-bottom: 15px;
	}
	.JS .BrandingArea {
		background: none;
		height: auto;
	}
	.JS .BrandingArea .TextArea {
		text-align: center;
	}
	.JS .BrandingArea .TextArea .Text {
		padding: 50px 20px 10px 20px;
		width: auto;
	}
	body.p_i .BrandingArea .TextArea .Text {
		padding: 10px 20px 10px 20px;
	}
	.Productivity .BrandingArea .TextArea .Text {
		background-position: center top;
	}
	.Workspace .BrandingArea .TextArea .Text {
		background-position: center top;
	}
	.Workplace .BrandingArea .TextArea .Text {
		background-position: center top;
	}
	.JS .BrandingArea .TextArea .Text {
		border-left: none;
	}
	.JS h1 {
		margin-bottom: 15px;
	}
	.JS h1 span {
		padding-left: 15px;
		padding-right: 15px;
	}
	.JS .Workspace h1 span {
		border-bottom: 3px solid #0A05A0;
	}
	.JS .Productivity h1 span {
		border-bottom: 3px solid #FF730A;
	}
	.JS .Workplace h1 span {
		border-bottom: 3px solid #0A8C0A;
	}
	.JS .pbox .wrapper {
		padding: 5px 20px;
	}
	.JS .Workspace .Column2.LinkBox:before {
		top: -2px;
	}
	.JS .Column2.LinkBox.LastItem:before, .Column2.LinkBox.LastItem:after {
		right: 48px;
	}
	.JS .Productivity .Column2.LinkBox:after {
		right: 48px;
	}
	.JS .pbox {
		flex-direction: column;
	}
	.JS .pbox .wrapper {
		width: 50%;
		align-self: center;
	}
	.JS .problem p.TextStyle1 {
		font-size: 80%;
	}
	.JS .problem .TextStyle0 {
		font-size: 100%;
	}
	.JS .problem {
		padding: 15px 38px 15px 110px;
	}
	.JS .Section.solve p.solve {
		font-size: 125%;
	}
	.JS .solve .BoxPatternB h2,
	p.boxtitle {
		font-size: 125%;
	}
	.JS .Column2.LinkBox:after {
		bottom: 0;
	}
	.JS .Column2.LinkBox .Text {
		margin: 50px;
	}
	.JS .Productivity .Column2.LinkBox {
		width: 100%;
		padding-left: 0;
	}
	.JS .Productivity .Column2.LinkBox:before {
		top: -2px;
		right: 48px;
	}
	.Productivity .Column2.LinkBox.LastItem .Text {
		margin: 50px;
	}
	/*.JS .Productivity .Column2.FirstItem {
		margin-bottom: 50px;
	}*/
	.JS .ButtonStyle1.Box.wide a:link, .ButtonStyle1.Box.wide a:visited {
		width: 75%;
	}
	.JS .ButtonStyle1.Box.wide {
		font-size: 136%;
	}
	.JS .ButtonStyle1.Box {
		margin-bottom: 50px;
	}
	.JS .ButtonStyle1.Box.wide {
		margin-bottom: 0;
	}
	.JS .solve .Column2.FirstItem {
		margin-bottom: 30px;
	}
	.columnbutton {
		display: flex;
		justify-content: space-between;
	}
	.columnbutton {
		display: block;

	}
	.columnbutton .leftbutton,
	.columnbutton .rightbutton {
		width: 100%;
	}
	.boxarea.order .columnbutton a {
		background-position: right 2px center;
	}
	.boxarea.order .columnbutton a:hover {
		background-position: right center;
	}
}

@media screen and (max-width: 579px) {
	.JS img.ShowRWD {
		display: none;
	}
	.JS img.ShowSP, .JS br.ShowSP {
		display: block;
	}
	/*.JS .BrandingArea .TextArea .Title {
		font-size: 120%;
	}*/
	.JS .BrandingArea .TextArea p {
		font-size: 75%;
	}
		.JS .Section.solve .Inner {
		padding: 30px 0;
	}
	.JS .solve .BoxPatternB {
		padding: 15px;
	}
	.JS .problem {
		padding: 15px 38px 15px 87px;
		background-position: center left 20px;
	}
	.JS #storiesReading #storiesList li.sDetails {
		width: 100%;
	}
	.JS #storiesReading #storiesList li.sDetails a {
		margin: 0 auto;
	}
	.JS .Section.solve p.solve {
		font-size: 120%;
	}
	.JS h2 {
		font-size: 135%;
	}
	.JS .ButtonStyle1.Box.wide {
		font-size: 130%;
	}
	.title_p span,
	.title_wp span,
	.title_pr span {
	    font-size: 100%;
	}
	.columnbutton .leftbutton {
		min-height: 66px;
	}
	.columnbutton .leftbutton a,
	.columnbutton .rightbutton a {
		text-decoration: none;
		color: white;
		display: block;
		height: 100%;
		padding: 24px 10px 24px 10px;
		font-size: 1.0em;
	}
	.columnbutton .leftbutton.twoline a {
		padding: 10px 10px 10px 10px;
	}
}

@media screen and (max-width: 399px) {
	br.HideRWD2 {
		display: none;
	}
	.JS .solve .BoxPatternB h2 {
		font-size: 100%;
	}
	.JS .solve .BoxPatternB .TextStyle1 {
		font-size: 80%;
	}
	.JS .pbox .wrapper {
		width: 90%;
	}
	.JS .Column2.LinkBox .Text {
		margin: 25px;
	}
	.JS .Column2.LinkBox:before {
		right: 22px;
	}
	.JS .Column2.LinkBox:after {
		right: 22px;
	}
	.JS .problem .TextStyle0 {
		font-size: 85%;
	}
	.JS .problem p.TextStyle1 {
		font-size: 67%;
	}
	.JS .Column2.LinkBox.LastItem:before, .Column2.LinkBox.LastItem:after {
		right: 23px;
	}
	.JS .Productivity .Column2.LinkBox:before, .JS .Productivity .Column2.LinkBox:after {
		right: 23px;
	}
	.JS .Productivity .Column2.LinkBox.LastItem .Text {
		margin: 25px;
	}
	.JS .Section.solve p.solve, .JS .Section.solve p.solve span {
		font-size: 100%;
	}
	.JS h2 {
		font-size: 120%;
	}
	.JS .ButtonStyle1.Box.wide {
		font-size: 100%;
	}
	.TopicsWS {
    margin-bottom: 0px;
	}
	div.Section.TW_Ask {
		padding-bottom: 5px;
	}
	.columnbutton .leftbutton a,
	.columnbutton .rightbutton a {
		padding: 24px 10px 24px 10px;
		font-size: 0.8em;
	}
	.columnbutton .leftbutton.twoline a {
		padding: 10px 10px 10px 10px;
	}
}