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

.GridSet.TopPage,
.GridSet.process,
.GridSet.gwbc {
	width: 100%;
}
div.Section .Inner {
	width: 965px;
	margin: 0 auto 40px;
	position: relative;
	z-index: 2;
}
.Grid4 .Section {
	padding-top: 50px;
	position: relative;
	overflow: visible;
}

.Grid4 h2 {
	font-size: 210%;
}
.Grid4 h2 span {
	font-weight: bold;
	font-size: 57%;
	background-color: transparent;
	padding: 0;
	line-height: normal;
	color: #000;
}
.Grid4 h3,
.Grid3.Support.rpa h3.rpa {
	padding: 0;
	border-left: none;
	background: transparent;
	border-bottom: 2px solid #333333;
	color: #333333;
	font-size: 150%;
	font-weight: normal;
	margin-top: 50px;
	margin-bottom: 30px;
}
.Grid3.Support.rpa h3.rpa {
	background-image: url(/-/media/ind/m-cloud/image/service/icon_bizrobo.png);
	background-position: left top;
	background-repeat: no-repeat;
	padding-top: 20px;
	padding-left: 60px;
}
.Grid3.Support.rpa h3.rpa.noImg {
	background-image: none;
	padding-left: 0;
}
rid4 h3 + p{
	padding-top: 5px;
	margin-left: 20px;
	margin-right: 20px;
}
.Grid4 h4 {
	background-color: transparent!important;
	padding: 0;
	font-size: 105%;
}
.Grid4 h4:before,
.Grid3 h4:before {
	content: '';
}
.Boxgray {
	background-color: rgb(101,110,110);
	padding: 15px 15px 12px;
	margin: 20px;
	position: relative;
	z-index: 2;
}
.Boxgray p {
	color: #fff;
	font-size: 150%;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
}
.process .Boxgray p {
	padding-top: 18px;
	padding-bottom: 18px;
}
.TextArea {
	width: 965px;
	margin: 0 auto;
	padding-top: 45px;
	color: #fff;
}
.TextArea .Title {
	font-size: 200%;
	line-height: 1.3;
	margin-bottom: 45px;
}
.TextArea .ExplainText {
	font-size: 96%;
}
.TextArea02 {
	width: 965px;
	margin: 0 auto;
	padding-top: 45px;
	color: #181b1b;
}
.TextArea02 .Title {
	font-size: 200%;
	line-height: 1.3;
	margin-bottom: 45px;
}
.TextArea02 .ExplainText {
	font-size: 96%;
}
.PageTitleStyle1 {
	padding: 0;
	height: 150px;
}
/** Grid3 ページタイトルイメージ **/
div.PageTitleStyle1>h1 {
	font-size: 200%;
	font-weight: normal;
	color: #333333;
	padding: 60px 0 0 100px;
	position: relative;
}
.PageTitleStyle1>h1:before {
	background-repeat: no-repeat;
	background-size: 74px 67px;
	background-position: center;
	content: '';
	width: 80px;
	height: 74px;
	position: absolute;
	left: 0;
	top: 38px;
}
.Construct .PageTitleStyle1 {
	background: url("/-/media/ind/m-cloud/image/service/h1_construct.png") no-repeat right #DDF3F8;
	border-left: 10px solid #56C1DE;
}
.Construct .PageTitleStyle1>h1:before {
	background-image: url(/-/media/ind/m-cloud/image/pict_construct.svg);
	background-color: #56C1DE;
}
.Security .PageTitleStyle1 {
	background: url("/-/media/ind/m-cloud/image/service/h1_security.png") no-repeat right #E1DCEC;
	border-left: 10px solid #69519E;
}
.Security .PageTitleStyle1>h1:before {
	background-image: url(/-/media/ind/m-cloud/image/pict_security.svg);
	background-color: #69519E;
}
.Operation .PageTitleStyle1 {
	background: url("/-/media/ind/m-cloud/image/service/h1_operation.png") no-repeat right #FDEFCC;
	border-left: 10px solid #EBA800;
}
.Operation .PageTitleStyle1>h1:before {
	background-image: url("/-/media/ind/m-cloud/image/pict_operation.svg");
	background-color: #EBA800;
}
.Support .PageTitleStyle1 {
	background: url("/-/media/ind/m-cloud/image/service/h1_support.png") no-repeat right #F8DEDE;
	border-left: 10px solid #DB5958;
}
.Support .PageTitleStyle1>h1:before {
	background-image: url("/-/media/ind/m-cloud/image/pict_support.svg");
	background-color: #DB5958;
}
.Support.signage .PageTitleStyle3 {
	background-image: url(/-/media/ind/m-cloud/image/service/pagetitle_d-signage.png);
	background-repeat: no-repeat;
	height: 300px;
}
.Support.signage .PageTitleStyle3 h1 {
	font-size: 150%;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 1.3;
	padding-top: 130px;
	padding-left: 25px;
	text-shadow: 2px 2px 5px #000000, -2px -2px 5px #000000;
}
.HorizontalInnerLinks {
	margin-bottom: 0;
}

/** コンタクト **/
#Contact h2 {
	color: #BF323D;
	text-align: center;
	font-size: 190%;
	margin-bottom: 0;
}
#Contact p {
	text-align: center;
}

#Contact a, #Detail a {
	position: relative;
	margin: 0 auto 10px;
	width: 600px;
	display: block;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 30px 0 25px;
	font-size: 135%;
	box-shadow: 0px 6px 5px -5px #A6A6A6;
	border-radius: 3px;
	background-color: #b1000e;
}
#Detail a {
	margin-top: 30px;
	padding: 32px 0 29px;
	background-color: #FBEEEE;
	color: #C02632;
	border: 1px solid #C02632;
	box-shadow: 0px 0px 0px 0px transparent;
	margin-bottom: 50px;
}
#Contact a:after, #Detail a:after {
	display: inline-block;
	position: absolute;
	width: 40px;
	height: 26px;
	background: url(/-/media/ind/m-cloud/image/icon/icon_link_right_w.png) no-repeat center center;
	background-size: 14px 26px;
	content: '';
	top: 50%;
	margin-top: -12px;
}
#Detail a:after {
	background: url(/-/media/ind/m-cloud/image/icon/icon_link_right_r.gif) no-repeat center center;
	margin-top: -15px;
}
#Contact a:hover,
#Contact a:active {
	background-color: #d30021;
	text-decoration: none;
}
#Detail a:hover,
#Detail a:active {
	text-decoration: none;
	opacity: 0.6;
}
#Contact a:hover:after,
#Contact a:active:after,
#Detail a:hover:after,
#Detail a:active:after {
	transform: translateX(2px);
}
.BoxPatternC.ContactBox {
	padding-left: 10px;
	padding-right: 10px;
	background-color: #E9EEF0;
}
/*.BoxPatternC.ContactBox a:hover,
.BoxPatternC.ContactBox a:active {
	opacity: 0.8;
}*/
.BoxPatternC.ContactBox a:hover img,
.BoxPatternC.ContactBox a:active img {
	opacity: 1;
}
.BannerArea p.ImgOnlyStyle {
	margin-bottom: 10px;
}
.BannerArea p.ImgOnlyStyle a:hover,
.BannerArea p.ImgOnlyStyle a:active {
	opacity: 0.8;
}

.PageTitleWrapper {
	width: 100%;
	margin-bottom: 25px;
}
.PageTitle {
	background-repeat: no-repeat;
	position: relative;
	width: 100%;
	margin: 0 auto;
	background-position: right;
}
.PageTitle .TextArea {
	min-height: 250px;
	padding: 0;
}
.PageTitle .TextArea .Title {
	color: #000;
	padding: 105px 0 0 40px;
	font-size: 235%;
}
.PageTitle#service {
	background: url(/-/media/ind/m-cloud/image/service/h1_service.png) no-repeat center, linear-gradient(90deg, #E8EEF0 0%, #E8EEF0 50%, #FFFFFF 50%, #FFFFFF 100%);
}
.PageTitle#process {
	background: url(/-/media/ind/m-cloud/image/process/h1_process.png) no-repeat center, linear-gradient(90deg, #EEEEEE 0%, #EEEEEE 50%, #ECF0F1 50%, #ECF0F1 100%);
}
.PageTitle#case {
	background: url(/-/media/ind/m-cloud/image/case/h1_case.png) no-repeat center #EDEEEF;
}
/* Gateway for Business Cloud (GWBC) (202005追加) */
.PageTitle#gwbc {
	background: url(/-/media/ind/m-cloud/image/gwbc/h1_gwbc.png) no-repeat center, linear-gradient(90deg, #e8eef0 0%, #e8eef0 50%, #bdbec5 50%, #bdbec5 100%);
}
.PageTitle.WithSubtitle {
	min-height: 250px;
}
.PageTitle.WithSubtitle .TextArea {
	min-height: auto;
}
.PageTitle.WithSubtitle .TextArea .Title {
	padding-top: 75px;
	margin-bottom: 3px;
	color: #333;
}
.PageTitle.WithSubtitle .SubArea {
	width: 965px;
	margin: 0 auto;
}
.PageTitle.WithSubtitle .SubArea .SubTitle {
	padding: 0 0 0 40px;
	line-height: 125%;
	font-size: 110%;
	color: #333;
}
.CatchcopyArea {
	margin-bottom: 50px;
}
.CatchcopyArea p.CatchCopy {
	font-size: 120%;
	font-weight: bold;
}
.CatchcopyArea p.TextStyle1 {
	font-size: 115%;
	line-height: 1.2;
}
area {
	border: none;
	outline: none;
}
.service .Section {
	overflow: visible;
}
.service .Section .ImgRightAdjust p.ImgOnlyStyle {
	margin-top: -20px;
}
.ClickMap {
	position: relative;
}
.ClickMap a {
	position: absolute;
	z-index: 1;
	display: block;
	font-size: 0;
}
.ClickMap a:hover,
.ClickMap a:active {
	background-color: rgba(255, 255, 255, 0.3);
}
.ClickMap a#construct {
	left: 0;
	top: 0;
	width: 100%;
	height: 7.746478873%;
}
.ClickMap a#operation {
	left: 0;
	top: 41.14688129%;
	width: 49.22279793%;
	height: 7.947686117%;
}
.ClickMap a#security {
	left: 50.77720207%;
	top: 41.14688129%;
	width: 49.22279793%;
	height: 7.947686117%;
}
.ClickMap a#support {
	left: 0;
	top: 75.65392354%;
	width: 100%;
	height: 7.746478873%;
}
.InlineBlock {
	display: inline-block;
}

.process .Section#process01, .process .Section#process03 {
	background-color: #ECEDED;
}
.process .Section#process01:before {
	content: '';
	position: absolute;
	bottom: 60px;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 600px;
	background-image: url(/-/media/ind/m-cloud/image/bg_texture02_white.png);
	background-repeat: no-repeat;
	background-position: right calc(50% + 615px) bottom;
}
.process .Section#process02:before {
	content: '';
	position: absolute;
	top: 180px;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 400px;
	background-image: url(/-/media/ind/m-cloud/image/bg_texture03.png);
	background-repeat: no-repeat;
	background-position: calc(50% + 400px) top;
}
.process .Section#process03:before {
	content: '';
	position: absolute;
	top: -35px;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 600px;
	background-image: url(/-/media/ind/m-cloud/image/bg_texture02_white.png);
	background-repeat: no-repeat;
	background-position: right calc(50% + 615px) top;
}
.process .professional {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-end;
	margin: 4px 20px 75px;
}
.process .professional div:first-child {
	width: calc(100% - 295px);
	color: #0F8299;
	font-weight: bold;
	border-bottom: 2px solid #0F8299;
	padding-bottom: 16px;
	margin-bottom: 40px;
}
.process .professional p {
	line-height: 1.2;
	text-align: right;
	font-size: 150%;
}
.process .professional p.Title {
	font-size: 175%;
}
.process .professional p span {
	display: inline-block;
}
.process .professional img {
	margin-left: 15px;
	margin-top: -57px;
}
.process .ColumnSet {
	width: auto;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 30px;
}
.process .ColumnSet .Column2 {
	width: calc((100% - 15px ) / 2);
}
.process .ColumnSet .Column2 p.TextStyle1 span {
	
}
.process .Inner > .Iso {
	margin-left: 15px;
}
.process .ColumnSet.iso {
	margin-top: 15px;
	margin-bottom: 15px;
}
.process .ColumnSet.iso .TextStyle1 {
	overflow: hidden;
}
.case .Section {
	padding-top: 20px;
}
.case .ColumnSet .Column2 {
	margin-bottom: 50px;
}
.case .ColumnSet .Column2 p {
	position: relative;
}
.case .ColumnSet .Column2 p:before {
	background: url(/-/media/ind/m-cloud/image/case/img_frame.png) no-repeat center center;
	position: absolute;
	content: '';
	background-size: 100% auto;
	width: 100%;
	height: 100%;
	background-position: center;
}
.case .ColumnSet .Column2 .PanelText {
	padding-left: 60px;
	padding-right: 50px;
	margin-top: 5px;
	line-height: 1.2;
	position: relative;
	font-size: 90%;
}
.case .ColumnSet .Column2 .PanelText:before {
	background-repeat: no-repeat;
	background-size: 48px 64px;
	background-position: center;
	content: '';
	width: 53px;
	height: 65px;
	position: absolute;
	left: 0;
	top: 0;
}
.case .ColumnSet .Column2 .PanelText.Construct:before {
	background-image: url(/-/media/ind/m-cloud/image/pict_construct.svg);
	background-color: #56C1DE;
}
.case .ColumnSet .Column2 .PanelText.Security:before {
	background-image: url(/-/media/ind/m-cloud/image/pict_security.svg);
	background-color: #69519E;
}
.case .ColumnSet .Column2 .PanelText.Operation:before {
	background-image: url(/-/media/ind/m-cloud/image/pict_operation.svg);
	background-color: #EBA800;
}
.case .ColumnSet .Column2 .PanelText.Support:before {
	background-image: url(/-/media/ind/m-cloud/image/pict_support.svg);
	background-color: #DB5958;
}
.case .ColumnSet .Column2 .PanelText:after {
	display: inline-block;
	position: absolute;
	width: 20px;
	height: 26px;
	background: url(/-/media/ind/m-cloud/image/icon/icon_link_right_r.gif) no-repeat center center;
	background-size: 14px 23px;
	content: '';
	top: calc(50% - 12px);
	right: 25px;
}
.case .ColumnSet .Column2 a:hover .PanelText:after,
.case .ColumnSet .Column2 a:active .PanelText:after {
	/*transform: translateX(2px);*/
	right: 23px;
}

.Grid3 h2 {
	margin-bottom: 20px;
}
.Grid3 h2 span {
	font-size: 140%;
	color: #333333;
	font-weight: normal;
}
.Grid3 h3 {
	border-left: none;
	border-bottom: none;
	background: none;
	position: relative;
	padding-bottom: 5px;
	margin-bottom: 7px;
}
.Grid3 h3 span {
	position:relative;
	z-index: 1;
}
br.SP1,
br.SP2 {
	display: none;
}
.Grid3.service.Construct h3 {
	color: #0F8299;
}
.Grid3.service.Security h3 {
	color: #69519E;
}
.Grid3.service.Operation h3 {
	color: #A66A16;
}
.Grid3.service.Support h3 {
	color: #C02632;
}
.Grid3 h3:before,
.Section .Box.fullwide:after {
	content: '';
	background-repeat: no-repeat;
	background-size: 280px 280px;
	width: 300px;
	height: 300px;
	position: absolute;
	top: -77px;
	left: -120px;
	opacity: 0.1;
}
.service.Operation h3:before {
	opacity: 0.2;
}
.Section .Box.fullwide:after {
	top: -125px;
}
.service.Construct h3 {
	background-repeat: no-repeat;
	background-position: left top;
}
/*.service.Construct h3.public {
	background-image: url(/-/media/ind/m-cloud/image/service/icon_public_cloud.png);
	padding-left: 70px;
}
.service.Construct h3.private {
	background-image: url(/-/media/ind/m-cloud/image/service/icon_private_cloud.png);
	padding-left: 70px;
}
.service.Construct h3.major {
	background-image: url(/-/media/ind/m-cloud/image/service/icon_major_cloud.png);
	padding-left: 70px;
}*/
.service.Construct h3:before {
	background-image: url("/-/media/ind/m-cloud/image/service/pict03_construct.svg");
}
.service.Security h3:before,
.service.Security .Section .Box.fullwide:after {
	background-image: url("/-/media/ind/m-cloud/image/service/pict03_security.svg");
}
.service.Operation h3:before {
	background-image: url("/-/media/ind/m-cloud/image/service/pict03_operation.svg");
	background-size: 240px 260px;
	top: -77px;
	left: -110px;
}
.service.Support h3:before {
	background-image: url("/-/media/ind/m-cloud/image/service/pict03_support.svg");
}
.service.Support.rpa h3:before {
	display: none;
}
.service h2 span {
	background-color: #F1F1F1;
}
.service.Construct h2 span {
	border-left: 10px solid #56C1DE;
}
.service.Security h2 span {
	border-left: 10px solid #69519E;
}
.service.Operation h2 span {
	border-left: 10px solid #EBA800;
}
.service.Support h2 span {
	border-left: 10px solid #DB5958;
}
.service .TextStyle1.Catch {
	position: relative;
	z-index: 1;
	text-align: center;
	font-size: 135%;
}
.service.Construct .TextStyle1.Catch {
	color: #0F8299;
}
.service.Security .TextStyle1.Catch {
	color: #312A84;
}
.service.Operation .TextStyle1.Catch {
	color: #A66A16;
}
.service.Support .TextStyle1.Catch {
	color: #C02632;
}
.Section .Box {
	position: relative;
	box-sizing: border-box;
	border-right: 2px solid #C9C9C9;
	border-top: 2px solid #C9C9C9;
	border-bottom: 2px solid #C9C9C9;
	padding: 20px 15px 20px 25px;
	margin-bottom: 60px;
}
.Section .Box:before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	z-index: 5;
	width: 10px;
	height: calc(100% + 4px);
}
.Section .Box > div {
	display: flex;
}
.Section .Box p.TextStyle1 {
	margin-bottom: 7px;
}
.Section .Box div p.TextStyle1:last-child {
	margin-bottom: 0;
}
.Construct .Section .Box p.TextStyle1 span {
	color: #0F8299;
}
.Operation .Section .Box p.TextStyle1 span {
	color: #A66A16;
}
.Security .Section .Box p.TextStyle1 span {
	color: #312A84;
}
.Support .Section .Box p.TextStyle1 span {
	color: #C02632 ;
}
.Section .Box .LinkListStyle1 {
	font-size: 148%;
	font-weight: bold;
}
.Section .Box .LinkListStyle1 li a {
	color: #333333;
	padding: 0 30px 0 0;
	background-image: url(/-/media/ind/m-cloud/image/icon/icon_link_right_r.gif);
	background-position: right 40%;
	background-size: 14px 23px;
}
.Section .Box .inner .smallBox {
	border: 2px solid #C9C9C9;
	border-radius: 5px;
	padding: 10px 10px 5px 20px;
}
.Section .Box .inner .smallBox p.TextStyle1 {
	font-weight: bold;
}
.Construct .Section .Box .inner .smallBox p.TextStyle1 {
	color: #CD351B;
}
.Security .Section .Box .inner .smallBox p.TextStyle1 {
	color: #8D7428;
}
.Operation .Section .Box .inner .smallBox p.TextStyle1 {
	color: #2450A2;
}
.Support .Section .Box .inner .smallBox p.TextStyle1 {
	color: #348033;
}
.Section .Box .inner .smallBox ul.ListStyle1 li {
	padding-left: 25px;
}
.Construct .Section .Box .inner .smallBox ul.ListStyle1 li {
	background: url(/-/media/ind/m-cloud/image/icon/i_chk_red.png) no-repeat;
}
.Security .Section .Box .inner .smallBox ul.ListStyle1 li {
	background: url("/-/media/ind/m-cloud/image/icon/i_chk_yellow.png") no-repeat;
}
.Operation .Section .Box .inner .smallBox ul.ListStyle1 li {
	background: url("/-/media/ind/m-cloud/image/icon/i_chk_blue.png") no-repeat;
}
.Support .Section .Box .inner .smallBox ul.ListStyle1 li {
	background: url("/-/media/ind/m-cloud/image/icon/i_chk_green.png") no-repeat;
}
.Section .Box div .inner {
	width: calc((100% - 50px) / 2);
}
.Section .Box div.inner:first-child {
	margin-right: 50px;
}
.service.Construct .Box:before {
	background-color: #56C1DE;
}
.service.Security .Box:before {
	background-color: #69519E;
}
.service.Operation .Box:before {
	background-color: #EBA800;
}
.service.Support .Box:before {
	background-color: #DB5958;
}
/** 守る(Security) セキュリティソリューション「SHIELD」**/
.Section .Box.fullwide > div {
	position: relative;
	z-index: 2;
	display: block;
}
.Section .Box.fullwide div .inner {
	width: 100%;
}
.Section .Box.fullwide div.inner:first-child {
	margin-right: 0;
}
.Section .Box.fullwide div.inner .Label {
	width: 140px;
	background-color: #8D7428;
	color: #fff;
	font-size: 92%;
	border-radius: 2px;
	text-align: center;
	padding: 3px 0;
	margin: 15px 0 5px;
}
.Section .Box.fullwide .LinkListStyle1 {
	font-size: 100%;
}
.Section .Box.fullwide .LinkListStyle1 li a {
	color: #8D7428;
	padding: 0 17px 0 0;
}
.Section .Box.fullwide .LinkListStyle1 li a:link {
	background-size: 10px 16px;
}
.MultiBox {
	display: flex;
	padding: 0 20px;
	box-sizing: border-box;
	margin-top: 25px;
	position: relative;
}
.MultiBox {
	justify-content: space-between;
}
.MultiBox .box {
	border-radius: 5px;
	width: calc((100% - 90px) / 2);
	padding: 10px 10px 0;
	position: relative;
}
.MultiBox .box:before {
	content: '';
	background-repeat: no-repeat;
	position: absolute;
	width: 60px;
	height: 60px;
	top: -16px;
	left: -14px;
}
.MultiBox .box p {
	text-align: center;
}
.Construct .MultiBox .box.solution p {
	color: #0F8299;
}
.Operation .MultiBox .box.solution p {
	color: #A66A16;
}
.MultiBox .box p span {
	font-size: 115%;
	font-weight: bold;
}

.MultiBox .box ul.ListStyle1 li {
	background: none;
	padding-left: 20px;
	position: relative;
}
.MultiBox .box ul.ListStyle1 li:before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 7px;
	position: absolute;
	top: 4px;
	left: 3px;
}
.MultiBox .box.gray {
	border: 3px solid #CAD6D8;
}
.MultiBox .box.gray:before {
	background-image: url(/-/media/ind/m-cloud/image/service/img_problem.png);
}
.MultiBox .box.gray:after {
	background-repeat: no-repeat;
	width: 20px;
	height: 60px;
	position: absolute;
	content: '';
	top: calc(50% - 30px);
	right: -33px;
}
.Construct .MultiBox .box.gray:after {
	background-image: url(/-/media/ind/m-cloud/image/service/img_arrow_blue.png);
}
.Operation .MultiBox .box.gray:after {
	background-image: url(/-/media/ind/m-cloud/image/service/img_arrow_yellow.png);
}
.Construct .MultiBox .box.solution:before {
	background-image: url(/-/media/ind/m-cloud/image/service/img_solution_blue.png);
}
.Operation .MultiBox .box.solution:before {
	background-image: url("/-/media/ind/m-cloud/image/service/img_solution_yellow.png");
}
.MultiBox .gray ul.ListStyle1 li:before {
	background: #8E9495;
}
.Construct .MultiBox .box.solution {
	border: 3px solid #CCEAF1;
}
.Operation .MultiBox .box.solution {
	border: 3px solid #FDEFCC;
}
.Construct .MultiBox .box.solution ul.ListStyle1 li:before {
	background: #56C1DE;
}
.Operation .MultiBox .box.solution ul.ListStyle1 li:before {
	background: #EBA800;
}

.Security .MultiBox {
	justify-content: center;
}
.Security .MultiBox div {
	width: auto;
	max-width: calc(50% - 35px);
}
.Security .MultiBox div.multi {
	width: 70px;
	height: 70px;
	position: relative;
	align-self: center;
}
.Security .MultiBox .multi:before,
.Security .MultiBox .multi:after {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	left: 0%;
	width: 100%;
	height: 7%;
	background: rgba(194, 197, 197);
}
.Security .MultiBox .multi:before {
	transform: rotate(-45deg);
}
.Security .MultiBox .multi:after {
	transform: rotate(45deg);
}
.Security .MultiBox p.TextStyle1 {
	text-align: center;
	font-weight: bold;
	font-size: 100%;
	margin-bottom: 5px;
	color: #424D4E;
}

/** 守る　マップエリア **/
.MapArea {
	position: relative;
}
.MapArea .title {
	color: #424D4E;
	font-size: 130%;
	position: absolute;
	top: 3%;
	left: 15px;
	text-align: center;
	font-weight: bold;
	line-height: 1.3;
}
.MapArea .Base {
	background-color: #424D4E;
	max-width: 360px;
	color: #fff;
	border-radius: 5px;
	box-shadow:5px 6px 7px -6px #B6B6B6;
	position: absolute;
	top: 14%;
	left: 15px;
	margin-top: 5px;
	opacity: 0;
}
.MapArea .Base p {
	text-align: center;
	font-weight: bold;
	font-size: 130%;
	padding: 5px 15px 0;
}
.MapArea .Base .content {
	display: flex;
	padding: 0 17px 17px;
}
.MapArea .Base .content .text {
	margin-left: 12px;
	font-size: 80%;
}
.MapArea .Map {
	position: relative;
	max-width: 520px;
	margin-left: auto;
}
.MapArea .pointer {
	background-image: url(/-/media/ind/m-cloud/image/service/map/point.svg);
	background-repeat: no-repeat;
	background-position: 0 35px;
	background-size: 100% auto;
	position: absolute;
	width: 3.9%;
	height: 7.3%;
}
.MapArea .pointer.po01 {
	top: 58%;
	right: 36%;
}
.MapArea .pointer.po02 {
	top: 65%;
	right: 53%;
}
.MapArea .pointer.po03 {
	top: 62%;
	left: 33%;
}
.MapArea .pointer:after {
	content: "";
	position: absolute;
	bottom: -10%;
	left: 13%;
	width: 0;
	height: 15%;
	background-image: url(/-/media/ind/m-cloud/image/service/map/point_shadow.svg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.MapArea .pointer.Animate {
	opacity: 1;
	animation: JumpUpEffect 0.3s cubic-bezier(.29,.57,.42,1.24) forwards, RotateEffect 1.5s linear 0.3s infinite;
}
.MapArea .pointer.Animate:after {
	width: 75%;
}
.MapArea .pointer.AnimateOff {
	opacity: 1;
	animation: JumpDownEffect 0.5s linear;
}
.MapArea .pointer.AnimateOff:after {
	animation: ShadowOutEffect 0.5s linear;
}
.MapArea .Base.Animate {
	animation: FadeInEffect 1s linear 0.3s forwards;
}
.MapArea .Base.AnimateOff {
	animation: FadeOutEffect 0.5s linear forwards;
}
@keyframes JumpUpEffect {
	0%   { background-position-y: 35px; }
	100% { background-position-y: 0px; }
}
@keyframes JumpDownEffect {
	0%   { background-position-y: 0px; opacity: 1; }
	100% { background-position-y: 35px; opacity: 0; }
}
@keyframes RotateEffect {
	0%   { transform: rotateY(0deg);  }
	25%  { transform: rotateY(90deg); }
	50%  { transform: rotateY(0deg);  }
	75%  { transform: rotateY(90deg); }
	100% { transform: rotateY(0deg);  }
}
@keyframes FadeInEffect {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes FadeOutEffect {
	0%   { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes ShadowOutEffect {
	0%   { width: 75%; opacity: 1; }
	100% { width: 75%; opacity: 0; }
}
.BaseBtnArea {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-end;
	margin-top: -20px;
}
/*.BaseBtnArea .label img {
	width: 143px;
	height: 129px;
}*/
.BaseBtnArea .Btns {
	width: calc(100% - 158px);
	margin-left: 15px;
	padding-top: 15px;
}
.BaseBtnArea .Btn {
	background-position: left center;
	background-size: 45px 45px;
	background-repeat: no-repeat;
}
.BaseBtnArea .Btn.east {
	background-image: url(/-/media/ind/m-cloud/image/service/map/label_east.svg);
}
.BaseBtnArea .Btn.west {
	background-image: url(/-/media/ind/m-cloud/image/service/map/label_west.svg);
}
.BaseBtnArea .Btn ul {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
	padding: 4px 0 4px 50px;
}
.BaseBtnArea .Btn ul li {
	position: relative;
	z-index: 2;
	background-color: #E1DCEC;
	color: #312A84;
	padding: 6px 5px 3px;
	width: calc((100% - 24px) / 3);
	margin-left: 8px;
	font-size: 120%;
	text-align: center;
	outline: none;
	cursor: pointer;
}
.BaseBtnArea .Btn ul li:before,
.BaseBtnArea .Btn ul li:after {
	content: "";
	position: absolute;
	z-index: -1;
	display: block;
	top: 0;
	width: 51%;
	height: 100%;
	background-color: #E1DCEC;
}
.BaseBtnArea .Btn ul li:before {
	left: 0;
}
.BaseBtnArea .Btn ul li:after {
	right: 0;
}
.BaseBtnArea .Btn ul li,
.BaseBtnArea .Btn ul li:before,
.BaseBtnArea .Btn ul li:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s;
	transition: all 0.3s
}
.BaseBtnArea .Btn ul li.OpenEffect {
	background-color: #fff;
}
.BaseBtnArea .Btn ul li.OpenEffect:before,
.BaseBtnArea .Btn ul li.OpenEffect:after {
	width: 0;
}
.BaseBtnArea .Btn ul li span:before,
.BaseBtnArea .Btn ul li span:after {
	content: "";
	position: absolute;
	top: 0;
	width: 0;
	height: 100%;
	border-color: #E1DCEC;
	border-width: 0;
	border-style: solid;
	box-sizing: border-box;
	-webkit-transition: all 150ms;
	transition: all 150ms;
}
.BaseBtnArea .Btn ul li.AfterBlinkEffect span:before,
.BaseBtnArea .Btn ul li.AfterBlinkEffect span:after {
	-webkit-transition: all 0.8s;
	transition: all 0.8s;
}
.BaseBtnArea .Btn ul li span:before {
	left: 0;
	border-right-style: none;
}
.BaseBtnArea .Btn ul li span:after {
	right: 0;
	border-left-style: none;
}
.BaseBtnArea .Btn ul li.BlinkEffect span:before,
.BaseBtnArea .Btn ul li.BlinkEffect span:after {
	width: 12px;
	border-width: 2px;
	border-color: #69519E;
}
.BaseBtnArea .Btn ul li.HoverEffect:before,
.BaseBtnArea .Btn ul li.HoverEffect:after {
	background-color: #C3B9D8;
}
.BaseBtnArea .Btn ul li.OpenEffect span:before,
.BaseBtnArea .Btn ul li.OpenEffect span:after {
	width: 12px;
	border-width: 2px;
	border-color: #69519E;
}
.BaseBtnArea .Btn ul li.HoverEffect.OpenEffect span:before,
.BaseBtnArea .Btn ul li.HoverEffect.OpenEffect span:after {
	border-width: 3px;
}
/** 守る　マップエリア ここまで**/
.Security .MultiBox ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
}
.Security .MultiBox ul li {
	display: block;
	width: calc((100% - 10px) / 3);
	box-sizing: border-box;
	border: 4px solid #E1DCEC;
	margin-left: 5px;
	margin-top: 50px;
	padding: 75px 3px 18px;
	background-image: url(/-/media/ind/m-cloud/image/service/pict03_security.svg);
	background-repeat: no-repeat;
	background-position: center 10px;
	background-size: 72px 72px;
	font-weight: bold;
	text-align: center;
	color: #312A84;
}
.Security .MultiBox ul li:first-child {
	margin-left: 0;
}

/** RPA 既存サイトから移植 **/
.Support.rpa div.BoxPatternB.RpaBoxB01 {
	background-color: #eef4f4;
}
.Support.rpa div.BoxPatternB.RpaBoxB02 {
	background-color: #f9faec;
}
.Support.rpa div.BoxPatternB.RpaBoxB01, .Support.rpa div.BoxPatternB.RpaBoxB02 {
	margin-top: 0 !important;
	margin-bottom: 25px !important;
	padding: 15px 0 5px;
	border-style: none;
}
.Support.rpa div.BoxPatternB.RpaBoxB01 h2, .Support.rpa div.BoxPatternB.RpaBoxB02 h2 {
	color: #666666;
	font-size: 110%;
	margin-bottom: 0;
}
.Support.rpa div.BoxPatternB.RpaBoxB01 div.Inner, div.BoxPatternB.RpaBoxB02 div.Inner {
	padding: 0 15px;
	background-color: transparent;
	width: auto;
	margin: 0 auto;
}
.Support.rpa div.BoxPatternB.RpaBoxB01 h3, .Support.rpa div.BoxPatternB.RpaBoxB02 h3 {
	color: #4d4d4d;
}
.Support.rpa div.BoxPatternB.RpaBoxB02 h3, .Support.rpa div.BoxPatternB.RpaBoxB02 .DateListStyle2 {
	overflow: hidden;
}
.Support.rpa div.BoxPatternB.RpaBoxB02 .DateListStyle2 dt {
	margin-bottom: 0;
	line-height: 160%;
	font-size: 100%;
}
.Support.rpa div.BoxPatternB.RpaBoxB02 .DateListStyle2 dd {
	margin-left: 4em;
}
.Support.rpa div.BoxPatternB.RpaBoxB01 .Column1andHalf {
	width: 338px;
	margin-bottom: 15px;
}
.Support.rpa div.BoxPatternB.RpaBoxB01 .Column1andHalf .InnerBox {
	height: 100%;
	padding: 15px 15px 2px;
	background-color: #ffffff;
	box-sizing: border-box;
}

.Support.rpa div.BoxPatternB.RpaBoxB01 .Column1andHalf .InnerBox h3 {
	color: #737373;
}
/** RPA ここから新規 **/
.Support.rpa .fiveBox {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
}
.Support.rpa .fiveBox li {
	width: calc((100% - 35px) / 5);
}
.Support.rpa .fiveBox li div {
	margin-bottom: 15px;
}
.Support.rpa .fiveBox li div + div {
	text-align: center;
	font-size: 90%;
	font-weight: bold;
	color: #424d4e;
}
.Support.rpa div.BoxPatternA {
	background-color: transparent;
	position: relative;
	margin-top: 25px;
}
.Support.rpa div.BoxPatternA div.Inner {
	width: 100%;
	background-color: #F8DEDE;
	border: none;
	padding-top: 30px;
}
.Support.rpa div.BoxPatternA div.Inner p.TextStyle1 {
	color: #C02632;
	font-size: 125%;
	z-index: 1;
	font-weight: bold;
	margin-left: 15px;
}
.Support.rpa div.BoxPatternA h2 {
	background-color: #C02632;
	color: #fff;
	font-size: 90%;
	text-align: center;
	position: absolute;
	top: -15px;
	left: 25px;
	z-index: 3;
	font-weight: bold;
	padding: 7px 14px;
}
/*** ここまで *********/
/*** Gateway for Business Cloud (GWBC) (202005追加) ***/
.gwbc .Section#gwbc01:after {
	content: "";
	position: absolute;
	top: 320px;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 500px;
	background-image: url(/-/media/ind/m-cloud/image/bg_texture01.png);
	background-repeat: no-repeat;
	background-position: calc(50% + 470px) top;
}
.gwbc .Section#gwbc03 {
	background-image: url(/-/media/ind/m-cloud/image/gwbc/bg_sec_sol.png);
	background-repeat: repeat-x;
	background-position: left bottom;
}
.gwbc .Section#gwbc03:after {
	content: "";
	position: absolute;
	top: 180px;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 500px;
	background-image: url(/-/media/ind/m-cloud/image/bg_texture02.png);
	background-repeat: no-repeat;
	background-position: right calc(50% + 600px) bottom;
}
.gwbc .Section#gwbc05 {
	background-color: #eceded;
}
.Column3for4G {
	max-width: 915px;
	margin: 0 auto;
}
.Column3for4G .Column1 {
	width: 295px;
}
.Task01 .Heading {
	text-align: center;
}
.Task01 .Heading h3 {
	display: inline-block;
	margin-top: 3px;
	margin-bottom: 0;
	padding-bottom: 12px;
	line-height: 120%;
	text-align: left;
	font-weight: bold;
	border-bottom-style: none;
}
.Task01 .Heading img {
	max-width: 100%;
}
.SolBoad {
	position: relative;
	padding-top: 15px;
}
.SolBoad:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -30px;
	width: 61px;
	height: 35px;
	background-image: url(/-/media/ind/m-cloud/image/icon/icon_arrow_blue.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.SolBoad div.BoxPatternC {
	padding: 30px 15px 5px;
	background-color: #ddf3f8;
	border-style: none;
}
.SolBoad ul.ListStyle1 {
	font-size: 100%;
}
.SolBoad ul.ListStyle1 li {
	text-indent: -1em;
	background-image: none;
}
.SolBoad ul.ListStyle1 li:before {
	content: "・";
}
.Task02 .Column1 {
	position: relative;
}
.Task02 .Column1:nth-child(4):after {
	content: "";
	position: absolute;
	top: 10px;
	right: -310px;
	width: 295px;
	height: 295px;
	background-image: url(/-/media/ind/m-cloud/image/gwbc/img_cloud.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	box-shadow: 1px 1px 30px 0 #dff3fa inset, -1px -1px 30px 0 #dff3fa inset, 1px 1px 10px #cdf0fc, -1px -1px 10px #cdf0fc;
}
.Task02 .Column1:nth-child(5),
.Task02 .Column1:nth-child(7) {
	float: right;
}
.Task02 .Column1:nth-child(6) {
	clear: both;
}
.TaskBoad {
	position: relative;
	padding-top: 25px;
}
.TaskBoad:before {
	content: "";
	position: absolute;
	top: 0;
	left: 25px;
	width: 33px;
	height: 40px;
	background-image: url(/-/media/ind/m-cloud/image/icon/icon_problem.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.TaskBoad div.BoxPatternC {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: stretch;
	margin-bottom: 10px;
	padding: 20px 20px 20px 25px;
	background-color: transparent;
	border: 3px solid #dbdcdc;
}
.TaskBoad div.BoxPatternC p {
	margin-bottom: 0;
	line-height: 140%;
	font-size: 110%;
	font-weight: bold;
}
.gwbc .Inner .Boxgray {
	margin: 0 0 30px;
	padding: 15px 20px;
}
.gwbc .Boxgray h3 {
	margin-top: 0;
	margin-bottom: 5px;
	font-size: 180%;
	font-weight: bold;
	color: #ffffff;
	border-bottom-style: none;
}
.gwbc .Boxgray p.TextStyle1 {
	margin-bottom: 0;
	font-size: 90%;
	font-weight: normal;
	text-align: left;
}
.gwbc .AdditionalNotesStyle2 dt {
	width: 1em;
	height: 1em;
	background-color: #7f7f7f;
}
.gwbc .AdditionalNotesStyle2 dd {
	margin-top: -1.1em;
}
.gwbc table.mCloud th,
.gwbc table.mCloud td.SubHeader {
	white-space: nowrap;
}
table.mCloud th,
table.mCloud td {
	padding: 8px 10px;
	border: none;
}
table.mCloud th[scope="row"],
table.mCloud td {
	border-top: 1px solid #ffffff;
}
table.mCloud th {
	font-weight: bold;
	color: #ffffff;
}
table.mCloud th[scope="col"] {
	background-color: #424d4e;
	border-left: 1px solid #ffffff;
}
table.mCloud th[scope="col"]:first-child {
	border-left-style: none;
}
table.mCloud th[scope="row"] {
	padding: 8px 15px;
	font-size: 110%;
}
table.mCloud th.Consul {
	background-color: #277a17;
}
table.mCloud th.Cloud {
	background-color: #0e778c;
}
table.mCloud th.Network {
	background-color: #c02632;
}
table.mCloud th.Manage {
	background-color: #996214;
}
table.mCloud th.Security {
	background-color: #312a84;
}
table.mCloud td {
	height: calc(16px + 1.65em);
	font-size: 79%;
	background-color: #f1f1f1;
	border-left: 1px solid #ffffff;
}
table.mCloud td.SubHeader {
	height: calc(16px + 1em);
	font-size: 90%;
}
table.mCloud td.Consul {
	background-color: #e0f3dc;
	border-left: 1px solid #e0f3dc;
}
table.mCloud td.Cloud {
	background-color: #ddf3f8;
	border-left: 1px solid #ddf3f8;
}
table.mCloud td.Network {
	background-color: #f8dede;
	border-left: 1px solid #f8dede;
}
table.mCloud td.Manage {
	background-color: #fdefcc;
	border-left: 1px solid #fdefcc;
}
table.mCloud td.Security {
	background-color: #e1dcec;
	border-left: 1px solid #e1dcec;
}
.FeatureBox {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	padding-bottom: 10px;
}
.FeatureBox .Img {
	width: 185px;
}
.FeatureBox .ImgSet {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: stretch;
	width: calc(100% - 185px);
	background-color: #ffffff;
}
.FeatureBox .ImgSet p {
	padding: 15px 30px;
	line-height: 120%;
	font-size: 140%;
}
.gwbc .case .ColumnSet .Column2 a,
.gwbc .case .ColumnSet .Column2 a * {
	color: #333333;
}
.gwbc .case .ColumnSet .Column2 p:before {
	display: none;
}
.gwbc .case .ColumnSet .Column2 .PanelText {
	padding-left: 0;
	padding-right: 40px;
}
.gwbc .case .ColumnSet .Column2 .PanelText:before {
	display: none;
}
.gwbc .case .ColumnSet .Column2 .PanelText:after {
	right: 15px;
}
.gwbc .case .ColumnSet .Column2 a:hover .PanelText:after,
.gwbc .case .ColumnSet .Column2 a:active .PanelText:after {
	right: 13px;
}
/*** Gateway for Business Cloud (GWBC) (202005追加) ここまで ***/

@media screen and (max-width: 994px) {
	.JS .GridSet.TopPage,
	.JS .GridSet.process,
	.JS .GridSet.gwbc {
		width: auto;
	}
	.JS #Contents .FatMenuWide {
		margin: 0 -15px;
	}
	.JS .PageTitleWrapper {
		width: auto;
		margin-left: -15px;
		margin-right: -15px;
	}
	.JS .PageTitle {
		width: auto;
		padding: 0 15px;
	}
	.JS .PageTitle#service,
	.JS .PageTitle#process,
	.JS .PageTitle#case,
	.JS .PageTitle#gwbc {
		background-position: right -145px center;
	}
	.JS .Grid4 .Section {
		margin-left: -15px;
		margin-right: -15px;
		padding-left: 15px;
		padding-right: 15px;
	}
	.JS div.Section .Inner {
		width: 100%;
	}
	.JS .TextArea,
	.JS .TextArea02 {
		width: 100%;
	}
	.JS .process .Section#process01:before {
		background-position: -375px bottom;
	}
	.JS .process .Section#process02:before {
		background-position: right -228px top;
	}
	.JS .process .Section#process03:before {
		background-position: -375px top;
	}
	.JS .process .ColumnSet .Column2 {
		padding-left: 0;
	}
	.JS .process .ColumnSet .Column2.LastItem {
		margin-left: 15px;
	}
	.JS .process .professional {
		margin-left: 2%;
		margin-right: 2%;
	}
	.JS .process .Boxgray p {
		text-align: left;
	}
	.JS .case .ColumnSet .Column2 .PanelText {
		padding-right: 25px;
	}
	.JS .case .ColumnSet .Column2 .PanelText:after {
		right: 2px;
	}
	.JS .case .ColumnSet .Column2 a:hover .PanelText:after,
	.JS .case .ColumnSet .Column2 a:active .PanelText:after {
		right: 0;
	}
	.JS .case .ColumnSet .Column2 .PanelText span.text {
		font-size: 83%;
	}

	.JS .Grid3 .PageTitleStyle1 {
		position: relative;
		height: 0;
		padding-bottom: 20.83333333%;
		background-position: 115% center;
		background-size: auto 100%;
	}
	.JS .Grid3.Support .PageTitleStyle1 {
		background-position: right center;
	}
	.JS .Grid3 .PageTitleStyle1 h1 {
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 100%;
		padding-top: 5px;
		font-size: 3.22vw;
		box-sizing: border-box;
	}
	.JS .Grid3 .PageTitleStyle1 h1:before {
		top: 50%;
		margin-top: -37px;
	}
	.JS br.SP1 {
		display: inline;
	}
	.JS br.HideTablet {
		display: none;
	}
	.JS .TextStyle1.Catch {
		font-size: 2.2vw;
	}
	.JS .MultiBox .box:before {
		top: -30px;
		left: -32px;
	}
	.JS #Contents .MapArea .Base img {
		max-width: none;
		max-height: 160px;
	}
	.JS .Support.rpa div.BoxPatternB.RpaBoxB01 .Column1andHalf {
		width: 50%;
	}
	.JS .Support.rpa div.BoxPatternB.RpaBoxB01 h3,
	.JS .Support.rpa div.BoxPatternB.RpaBoxB02 h3 {
		margin-bottom: 10px;
		padding-left: 0;
	}
	.JS .Support.signage .PageTitleStyle3 {
		height: 0;
		padding-bottom: 41.66666667%;
		background-size: cover;
	}
	.JS .Support.signage .PageTitleStyle3 h1 {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 100%;
		padding-top: 5px;
		box-sizing: border-box;
	}

	.JS .PageTitle.WithSubtitle .SubArea {
		width: 100%;
	}
	.JS .Column3for4G .Column1 {
		width: 33.33333333%;
	}
	.JS .Task02 .Column1:nth-child(4):after {
		right: -100%;
		width: calc(100% - 15px);
		height: 0;
		padding-bottom: calc(100% - 15px);
	}
}
@media screen and (max-width: 767px) {
	.JS .PageTitle {
		height: 0;
		padding-bottom: 32.55%;
	}
	.JS .PageTitle#service,
	.JS .PageTitle#process,
	.JS .PageTitle#case,
	.JS .PageTitle#gwbc {
		background-position: 71% center;
		background-size: cover;
	}
	.JS .PageTitle .TextArea {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 100%;
		min-height: auto;
	}
	.JS .PageTitle .TextArea h1 {
		padding: 5px 0 0 5.2%;
		margin-bottom: 0;
	}
	.JS .PageTitle.WithSubtitle {
		height: auto;
		min-height: auto;
		padding: 0;
		background-image: none !important;
	}
	.JS .PageTitle.WithSubtitle .TextArea  {
		position: relative;
		height: 0;
		padding-bottom: 32.55%;
	}
	.JS .PageTitle#gwbc .TextArea {
		background-image: url(/-/media/ind/m-cloud/image/gwbc/h1_gwbc.png);
		background-repeat: no-repeat;
		background-position: 54% center;
		background-color: linear-gradient(90deg, #e8eef0 0%, #e8eef0 50%, #bdbec5 50%, #bdbec5 100%);
		background-size: cover;
	}
	.JS .PageTitle.WithSubtitle .TextArea .Title {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 100%;
		margin-bottom: 0;
		padding: 5px 15px 0 5.2%;
		box-sizing: border-box;
	}
	.JS .PageTitle.WithSubtitle .SubArea {
		margin-top: 25px;
		text-align: center;
	}
	.JS .PageTitle.WithSubtitle .SubArea p {
		padding: 0 15px;
		font-weight: bold;
	}
	.JS #Contact h2 {
		font-size: 160%;
	}
	.JS #Contact a, .JS #Detail a {
		width: 90%;
		max-width: 600px;
	}
	.JS .Boxgray {
		margin-left: 0;
		margin-right: 0;
		padding: 30px 15px 25px;
	}
	.JS .Boxgray p {
		font-size: 120%;
	}
	.JS .process .Section#process01:before,
	.JS .process .Section#process02:before,
	.JS .process .Section#process03:before {
		display: none;
	}
	.JS .process .Boxgray p {
		padding-top: 0;
		padding-bottom: 0;
	}
	.JS .process .ColumnSet {
		margin-left: 0;
		margin-right: 0;
	}
	.JS .process .ColumnSet .Column2 {
		float: left;
	}
	.JS .process .professional {
		align-items: center;
		margin-left: 0;
		margin-right: 0;
	}
	.JS .process .professional div:first-child {
		width: 62%;
		margin-bottom: 0;
	}
	.JS .process .professional div:last-child {
		width: 38%;
	}
	.JS .process .professional img {
		width: calc(100% - 15px);
		margin-top: 0;
	}
	.JS .case .ColumnSet .Column2 {
		max-width: 475px;
		margin-left: auto;
		margin-right: auto;
	}
	.JS .case .ColumnSet .Column2 .PanelText {
		margin-right: 25px;
	}
	.JS .case .ColumnSet .Column2 .PanelText span.text {
		font-size: 100%;
	}
	.JS .Grid3 .PageTitleStyle1 {
		margin-left: -15px;
		margin-right: -15px;
	}
	.JS .Grid3 .PageTitleStyle1 h1 {
		font-size: 4.8vw;
	}
	.JS .TextStyle1.Catch {
		font-size: 2.95vw;
	}
	.JS .PageTitleWrapper3 {
		margin-left: -15px;
		margin-right: -15px;
	}
	.JS .Support.rpa div.BoxPatternB.RpaBoxB01 .Column1andHalf {
		float: left;
	}
	.JS .BannerArea {
		letter-spacing: -1em;
	}
	.JS .BannerArea p.ImgOnlyStyle {
		display: inline-block;
		max-width: calc((100% - 15px) / 2);
		vertical-align: top;
		letter-spacing: normal;
	}
	.JS .BannerArea p.ImgOnlyStyle:first-child {
		margin-right: 15px;
	}

	.JS .gwbc .Section#gwbc01:after,
	.JS .gwbc .Section#gwbc03:after {
		display: none;
	}

	.JS .Column3for4G.Task01 {
		margin-bottom: -1px;
		padding-bottom: 1px;
	}
	.JS .Column3for4G.Task01 .Column1 {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: stretch;
		width: auto;
		margin-bottom: 15px;
	}
	.JS .Task01 .Heading {
		width: 295px;
	}
	.JS .Task01 .Heading img {
		margin-bottom: 0;
	}
	.JS .Task01 .Heading h3 {
		position: absolute;
		top: 15px;
		left: 320px;
		z-index: 2;
		width: calc(100% - 330px);
		margin-top: 0;
		padding-bottom: 30px;
		text-align: center;
		font-size: 130%;
	}
	.JS .Task01 .Heading h3:after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -20px;
		width: 40px;
		height: 24px;
		background-image: url(/-/media/ind/m-cloud/image/icon/icon_arrow_blue.png);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}
	.JS .Task01 .SolBoad {
		width: calc(100% - 295px);
		padding-top: 0;
	}
	.JS .SolBoad:before {
		display: none;
	}
	.JS .SolBoad div.BoxPatternC {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		height: 100% !important;
		padding-top: 80px;
		box-sizing: border-box;
	}
	.JS .SolBoad ul.ListStyle1 {
		margin-bottom: 0;
		font-size: 90%;
	}
	.JS .Column3for4G.Task02 {
		position: relative;
		padding-top: calc(29.17% + 15px);
	}
	.JS .Column3for4G.Task02:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		padding-top: 29.17%;
		background-image: url(/-/media/ind/m-cloud/image/gwbc/img_cloud_rwd.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% auto;
		box-shadow: 1px 1px 5px 0 #dff3fa inset, -1px -1px 5px 0 #dff3fa inset, 1px 1px 3px #cdf0fc, -1px -1px 3px #cdf0fc;
	}
	.JS .Column3for4G.Task02 .Column1 {
		float: left;
		clear: none;
		width: 50%;
	}
	.JS .Task02 .Column1:nth-child(4):after {
		display: none;
	}
	.JS .gwbc table.mCloud th {
		white-space: normal;
		padding-left: 10px;
		padding-right: 10px;
		min-width: 4em;
	}
	.JS .gwbc table.mCloud td.SubHeader {
		white-space: normal;
		min-width: 8em;
	}
	.JS .FeatureBox .ImgSet p {
		font-size: 125%;
	}
	.JS .gwbc .case .ColumnSet .Column2 .PanelText {
		margin-right: 15px;
	}
}
@media screen and (max-width: 579px) {
	.JS br.SP2 {
		display: inline;
	}
	.JS br.HideSP2 {
		display: none;
	}
	.JS .PageTitle .TextArea h1 {
		font-size: 6.5vw;
	}
	.JS .PageTitle#gwbc .TextArea h1 {
		font-size: 6.2vw;
	}
	.JS .PageTitle.WithSubtitle .SubArea {
		margin-bottom: -15px;
	}
	.JS .PageTitle.WithSubtitle .SubArea p {
		font-size: 100%;
	}
	.JS .Grid4 h2 {
		font-size: 160%;
	}
	.JS .Grid4 h2 span {
		font-size: 71%;
	}
	.JS .Grid4 h3,
	.JS .Grid3 h3.rpa {
		font-size: 130%;
	}
	.JS #Contact a:after {
		display: none;
	}
	.JS .process .ColumnSet .Column2 {
		float: none;
		width: auto;
	}
	.JS .process .ColumnSet .Column2.LastItem {
		margin-left: 0;
	}
	.JS .process .professional div:first-child {
		width: 100%;
		order: 2;
	}
	.JS .process .professional div:last-child {
		width: 100%;
		margin-bottom: 20px;
		text-align: center;
		order: 1;
	}
	.JS .process .professional p {
		text-align: left;
	}
	.JS .process .professional img {
		width: auto;
		margin-left: 0;
	}
	.JS .case .ColumnSet .Column2 .PanelText {
		margin-right: 0;
	}
	.JS .case .ColumnSet .Column2 .PanelText span.text {
		font-size: 83%;
	}
	.JS .Grid3 .PageTitleStyle1 {
		border-left-style: none;
		padding-bottom: 21.81818182%;
	}
	.JS .Grid3 .PageTitleStyle1:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 80px;
		height: 100%;
	}
	.JS .Grid3.Construct .PageTitleStyle1:before {
		background-color: #56C1DE;
	}
	.JS .Grid3.Operation .PageTitleStyle1:before {
		background-color: #EBA800;
	}
	.JS .Grid3.Security .PageTitleStyle1:before {
		background-color: #69519E;
	}
	.JS .Grid3.Support .PageTitleStyle1:before {
		background-color: #DB5958;
	}
	.JS .Grid3 .PageTitleStyle1 h1 {
		padding-left: 90px;
		font-size: 4.6vw;
	}
	.JS .MultiBox {
		display: block;
		max-width: 430px;
		margin-left: auto;
		margin-right: auto;
	}
	.JS .MultiBox .box {
		width: auto;
	}
	.JS .MultiBox .box:before {
		top: -16px;
		left: -14px;
	}
	.JS .MultiBox .box.gray{
		margin-bottom: 60px;
	}
	.JS .MultiBox .box.gray:after {
		top: auto;
		bottom: -65px;
		right: 50%;
		margin-right: -10px;
		transform: rotate(90deg);
	}
	.JS .Security .MultiBox {
		display: flex;
		max-width: none;
	}
	.JS .Security .MultiBox div {
		max-width: calc(50% - 25px);
	}
	.JS .Security .MultiBox div.multi {
		width: 50px;
		height: 50px;
	}
	.JS .MapArea .title {
		top: 100%;
		left: 0;
		width: 100%;
		margin-top: 20px;
		padding-left: 160px;
		box-sizing: border-box;
	}
	.JS .MapArea .Base {
		top: 0;
		left: 0;
		width: 75%;
	}
	.JS .MapArea .Base.noText {
		width: 49%;
		max-width: 220px;
	}
	.JS .MapArea .Base .content {
		flex-wrap: wrap;
	}
	.JS .MapArea .Base .content .img {
		width: 57%;
	}
	.JS .MapArea .Base.noText .content .img {
		width: 100%;
	}
	.JS #Contents .MapArea .Base img {
		width: 100%;
		max-height: none;
	}
	.JS .MapArea .Base .content .text {
		width: calc(43% - 12px);
		font-size: 71%;
	}
	.JS .BaseBtnArea {
		display: block;
		margin-top: 0;
	}
	.JS .BaseBtnArea .Btns {
		width: auto;
		margin-left: 0;
	}
	.JS .Security .MultiBox ul {
		display: block;
		max-width: 400px;
	}
	.JS .Security .MultiBox ul li {
		width: auto;
		margin-left: 0;
		margin-top: 10px;
		padding: 10px 3px 5px 75px;
		text-align: left;
		background-position: left center;
	}
	.JS .Security .MultiBox ul li br.SP1 {
		display: none;
	}
	.JS .TextStyle1.Catch {
		font-size: 115%;
		text-align: left;
	}
	.JS .TextStyle1.Catch br {
		display: none;
	}
	.JS .Section .Box > div {
		display: block;
	}
	.JS .Section .Box div .inner {
		width: auto;
	}
	.JS .Section .Box div.inner:first-child {
		margin-right: 0;
		margin-bottom: 15px;
	}
	.JS .service.rpa .Section .ImgRightAdjust + p {
		margin-top: -20px;
	}
	.JS div.BoxPatternB.RpaBoxB02 .ImgLeftAdjust .ImgOnlyStyle {
		margin-bottom: 20px;
	}
	.JS div.BoxPatternB.RpaBoxB02 .DateListStyle2 dt {
		float: left;
	}
	.JS .Support.rpa div.BoxPatternB.RpaBoxB01 .Column1andHalf {
		float: none;
		width: auto;
		height: auto !important;
	}
	.JS .Support.rpa .fiveBox {
		justify-content: center;
		max-width: 429px;
		margin: 0 auto;
	}
	.JS .Support.rpa .fiveBox li {
		width: calc((100% - 18px) / 3);
		margin-left: 9px;
	}
	.JS .Support.rpa .fiveBox li:nth-child(1),
	.JS .Support.rpa .fiveBox li:nth-child(4) {
		margin-left: 0;
	}

	.JS .Column3for4G.Task01 .ColumnSet {
		margin-left: 0;
	}
	.JS .Column3for4G.Task01 .Column1 {
		padding-left: 0;
	}
	.JS .Task01 .Heading,
	.JS .Task01 .SolBoad {
		width: 50%;
	}
	.JS .Task01 .Heading p {
		height: 223px;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: auto 100%;
	}
	.JS .Task01 .Column1:nth-child(1) .Heading p {
		background-image: url(/-/media/ind/m-cloud/image/gwbc/img_task01.png);
	}
	.JS .Task01 .Column1:nth-child(2) .Heading p {
		background-image: url(/-/media/ind/m-cloud/image/gwbc/img_task02.png);
	}
	.JS .Task01 .Column1:nth-child(3) .Heading p {
		background-image: url(/-/media/ind/m-cloud/image/gwbc/img_task03.png);
	}
	.JS .Task01 .Heading img {
		display: none;
	}
	.JS .Task01 .Heading h3 {
		left: calc(50% + 3px);
		width: calc(50% - 6px);
		padding-bottom: 30px;
		font-size: 4vw;
	}
	.JS .SolBoad div.BoxPatternC {
		padding-left: 5px;
		padding-right: 10px;
	}
	.JS .SolBoad ul.ListStyle1 {
		font-size: 83%;
	}
	.JS .TaskBoad div.BoxPatternC {
		padding: 20px 15px 15px;
	}
	.JS .TaskBoad div.BoxPatternC p {
		font-size: 100%;
	}
	.JS .gwbc table.mCloud th[scope="row"] {
		font-size: 100%;
	}
	.JS table.mCloud td {
		font-size: 71%;
	}
	.JS table.mCloud td.SubHeader {
		font-size: 83%;
	}
	.JS .FeatureBox .Img {
		width: 130px;
		min-height: 100px;
		background-color: #ffffff;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}
	.JS .FeatureBox:nth-of-type(1) .Img {
		background-image: url(/-/media/ind/m-cloud/image/gwbc/img_feature01.png);
		background-position: right top;
	}
	.JS .FeatureBox:nth-of-type(2) .Img {
		background-image: url(/-/media/ind/m-cloud/image/gwbc/img_feature02.png);
		background-position: center top;
	}
	.JS .FeatureBox:nth-of-type(3) .Img {
		background-image: url(/-/media/ind/m-cloud/image/gwbc/img_feature03.png);
		background-position: left top;
	}
	.JS .FeatureBox .Img img {
		display: none;
	}
	.JS .FeatureBox .ImgSet {
		width: calc(100% - 130px);
	}
	.JS .FeatureBox .ImgSet p {
		padding: 10px 15px;
		font-size: 100%;
	}
	.JS .gwbc .case .ColumnSet .Column2 .PanelText {
		margin-right: 0;
	}
}
@media screen and (max-width: 399px) {
	.JS #Contact h2 {
		font-size: 125%;
	}
	.JS #Contact p {
		font-size: 76%;
	}
	.JS #Contact a, .JS #Detail a {
		width: 100%;
	}
	.JS .Boxgray {
		padding-top: 20px;
		padding-bottom: 15px;
	}
	.JS .Boxgray p {
		font-size: 100%;
	}
	.JS .process .professional p {
		font-size: 120%;
	}
	.JS .process .professional p.Title {
		font-size: 145%;
	}
	.JS .case .ColumnSet .Column2 .PanelText {
		padding-left: 52px;
	}
	.JS .case .ColumnSet .Column2 .PanelText:before {
		width: 45px;
		height: 55px;
		background-size: 41px 54px;
	}
	.JS .Grid3 .PageTitleStyle1 {
		height: 80px;
		padding-bottom: 0;
		background-position: right -25px center;
	}
	.JS .Grid3.Support .PageTitleStyle1 {
		background-position: right -15px center;
	}
	.JS .Grid3 .PageTitleStyle1:before {
		width: 60px;
	}
	.JS .Grid3 .PageTitleStyle1 h1 {
		padding-left: 70px;
		padding-right: 36%;
		font-size: 5.2vw;
		font-weight: bold;
	}
	.JS .Grid3 .PageTitleStyle1 h1:before {
		width: 60px;
		height: 56px;
		margin-top: -28px;
		background-size: 56px 50px;
	}
	.JS .MultiBox {
		padding-left: 0;
		padding-right: 0;
	}
	.JS .MapArea .title {
		margin-top: 10px;
		padding-left: 115px;
		font-size: 120%;
	}
	.JS .MapArea .Map {
		margin-left: -30px;
	}
	.JS .MapArea .Base {
		width: 95%;
	}
	.JS .MapArea .Base.noText {
		width: 58%;
	}
	.JS .MapArea .Base.noText.base06 {
		width: 50%;
	}
	.JS .MapArea .Base p {
		font-size: 100%;
	}
	.JS .MapArea .Base .content {
		padding: 0 12px 12px;
	}
	.JS .BaseBtnArea .label img {
		width: 100px;
		height: auto;
	}
	.JS .BaseBtnArea .Btn ul li {
		padding: 10px 5px 7px;
		font-size: 90%;
	}
	.JS .Security .MultiBox ul li {
		padding-left: 60px;
		background-position: -5px center;
	}
	.JS .Section .Box .LinkListStyle1 {
		font-size: 130%;
	}
	.JS .Section .Box.fullwide .LinkListStyle1 {
		font-size: 100%;
	}
	.JS .Grid3.Support.rpa h3.rpa {
		padding-top: 15px;
		padding-left: 50px;
		font-size: 125%;
		background-size: 40px auto;
	}
	.JS .Grid3.Support.rpa h3.rpa.noImg {
		padding-top: 0;
		padding-left: 0;
	}
	.JS .BannerArea {
		text-align: center;
		letter-spacing: normal;
	}
	.JS .BannerArea p.ImgOnlyStyle {
		max-width: none;
	}
	.JS .BannerArea p.ImgOnlyStyle:first-child {
		margin-right: 0;
	}
	.JS .Support.signage .PageTitleStyle3 h1 {
		padding-left: 15px;
		font-size: 120%;
	}

	.JS .PageTitle.WithSubtitle .SubArea p {
		font-size: 4vw;
	}
	.JS .Task01 .Heading {
		width: 40%;
	}
	.JS .Task01 .SolBoad {
		width: 60%;
	}
	.JS .Task01 .Heading h3 {
		left: calc(40% + 3px);
		width: calc(60% - 6px);
		font-size: 4.5vw;
	}
	.JS .SolBoad div.BoxPatternC {
		padding-top: 75px;
	}
	.JS .SolBoad ul.ListStyle1 {
		font-size: 79%;
	}
	.JS .Column3for4G.Task02 .Column1 {
		float: none;
		width: auto;
	}
	.JS .gwbc table.mCloud td.SubHeader {
		min-width: 6em;
		font-size: 76%;
	}
	.JS .FeatureBox .Img {
		width: 80px;
		min-height: 90px;
	}
	.JS .FeatureBox .ImgSet {
		width: calc(100% - 80px);
	}
	.JS .FeatureBox .ImgSet p {
		padding: 10px;
		font-size: 90%;
	}
	.JS .gwbc .case .ColumnSet .Column2 .PanelText {
		padding-left: 0;
	}
}