@charset "UTF-8";

/*=== 共通 ===================================================*/
/* --- 画像反転--- */
#Contents a img{
	vertical-align:bottom;
}
#Contents a:hover img,
.hover img {
	opacity:0.8;
	filter:alpha(opacity=80); 
}

.InlineBlock {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
}

h2.Large {
	margin-bottom: 40px;
	padding-top: 60px;
	line-height: 120%;
	text-align: center;
	font-size: 190%;
	background-image: none;
}

.CatchCopy.SP1 {
	margin-bottom: 15px;
	line-height: 120%;
	font-size: 150%;
	font-weight: bold;
}

ul.ListStyle1.CheckList {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: top;
}

ul.ListStyle1.CheckList li {
	padding-left: 2em;
	background-image: url(/products/it/control_sys/retrofit/image/common/icon_check.png);
	background-size: auto auto;
}

#Contact {
	position: static;
	width: auto;
	background-color: rgba(0, 20, 55, 0.8);
}
#Contact.Fixed {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 100;
	width: 100%;
}

#Contact ul {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	padding: 10px 0;
}

#Contact li.download {
	margin-right: 40px;
}
#Contact li.contact {
	margin-left: 40px;
}

#Contact li a {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	height: 38px;
	padding: 3px 60px 0 0;
	font-size: 120%;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	background-position: right center;
	background-repeat: no-repeat;
}
#Contact li.download a {
	background-image: url(/products/it/control_sys/retrofit/image/common/icon_download.png);
}
#Contact li.contact a {
	background-image: url(/products/it/control_sys/retrofit/image/common/icon_contact.png);
}
#Contact li a:hover,
#Contact li a:active {
	text-decoration: underline;
}

.ShowSD1,
.ShowSD2 {
	display: none;
}

/* --- デザインガイドラインVer.5対応--- */
body #HeaderArea2 > .Container {
	-ms-flex-align: stretch;
	align-items: stretch;
}

_:-ms-lang(x), body.header1-fix {
	padding-top: 0;
}

_:-ms-lang(x), body.header1-fix #HeaderArea1 {
	position: static !important;
}

_:-ms-lang(x), body.header2-fix.header2-show #HeaderArea2.Sticky {
	transform: translateY(-100%);
}

/*===　現場向けセンシングソリューショントップ  ===*/
#TopContents {
	position: relative;
}

#BrandingArea {
	position: relative;
	background-image: url(/products/it/control_sys/retrofit/image/branding.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
}
#BrandingArea:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 250px;
	background-image: url(/products/it/control_sys/retrofit/image/bg_branding.png);
	background-position: left bottom;
	background-repeat: repeat-x;
}

#BrandingArea .BrandingTxt {
	width: 965px;
	height: 582px;
	margin: 0 auto;
}

#BrandingArea .BrandingTxt .Title {
	padding-top: 170px;
	line-height: 120%;
	text-align: center;
	font-size: 225%;
	font-weight: bold;
	color: #ffffff;
}

#AboutArea {
	position: absolute;
	top: 320px;
	left: 0;
	z-index: 1;
	width: 100%;
}

#AboutArea .Inner {
	padding: 75px 25px 40px;
	text-align: center;
	color: #ffffff;
	background-color: rgba(2, 13, 23, 0.8);
}

#AboutArea .TextStyle1 {
	font-size: 110%;
}

#AboutArea .TaskBox {
	min-width: 550px;
	max-width: 100%;
	margin-bottom: 25px;
	padding: 25px 15px 15px;
	background-color: #cdd7d8;
	border-radius: 20px;
	box-sizing: border-box;
}

.TaskBox ul.ListStyle1.CheckList {
	/*font-size: 100%;*/
	color: #333333;
}

#AboutArea ul.InnerLinks {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: stretch;
	margin-top: 35px;
}

#AboutArea ul.InnerLinks li {
	margin: 0 25px 15px;
}

#AboutArea ul.InnerLinks a {
	display: block;
	width: calc(6em + 64px);
	padding: 5px 30px 3px 15px;
	line-height: 130%;
	color: #333333;
	background-image: url(/products/it/control_sys/retrofit/image/icon_link_bottom.png);
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-color: #e1ebec;
	border-radius: 30px;
	box-sizing: border-box;
	text-decoration: none;
}
#AboutArea ul.InnerLinks a:hover,
#AboutArea ul.InnerLinks a:active {
	text-decoration: underline;
}

#LineupArea {
	padding: 19.7em 0 20px;
	background-image: url(/products/it/control_sys/retrofit/image/bg_lineup.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

#LineupArea h2 {
	color: #ffffff;
}

#LineupArea ul.LineupList {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
}

ul.LineupList li {
	width: calc(33.33333333% - 10px);
	max-width: 300px;
	margin-bottom: 80px;
	background-color: #28323b;
}

ul.LineupList li .Inner {
	padding: 15px 20px;
	color: #ffffff;
}

ul.LineupList li h3 {
	margin-bottom: 15px;
	font-size: 110%;
	color: #ffffff;
}

ul.LineupList li .TextStyle1 {
	margin-bottom: 30px;
	line-height: 140%;
	font-size: 100%;
}

ul.LineupList li .ButtonStyle1 {
	text-align: center;
}

ul.LineupList li .ButtonStyle1 a {
	width: 100%;
	max-width: 230px;
	padding-top: 18px;
	padding-bottom: 15px;
	font-size: 130%;
	font-weight: bold;
	background-image: url(/image/jp/r1/icon/icon_link_right_xl_white_hd.gif);
	background-position: right 5px center;
	background-size: 20px 20px;
	background-color: #0A141e;
	box-sizing: border-box;
}
ul.LineupList li .ButtonStyle1 a:hover,
ul.LineupList li .ButtonStyle1 a:active {
	background-color: #000000;
}

#CaseArea {
	padding-bottom: 20px;
}

#CaseArea .Section {
	padding-bottom: 60px;
}

#CaseArea h3 {
	line-height: 120%;
	font-size: 175%;
	font-weight: normal;
	color: #333333;
}

#CaseArea .TextStyle1 {
	line-height: 130%;
	font-size: 110%;
}

ul.CaseList {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
}

ul.CaseList li {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	width: calc(50% - 18px);
	padding: 20px 15px 5px;
	box-sizing: border-box;
	border-radius: 20px;
}
ul.CaseList li.Task {
	justify-content: flex-start;
	background-color: #e2e6e7;
}
ul.CaseList li.Effect {
	justify-content: space-between;
	background-color: #f8f8ec;
}
ul.CaseList li.Task:after {
	content: "";
	position: absolute;
	top: 50%;
	right: -32px;
	margin-top: -15px;
	border-left: 26px solid #33425f;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
}

ul.CaseList h4 {
	max-width: 100%;
	margin-bottom: 15px;
	padding: 7px 15px 3px;
	line-height: 120%;
	font-size: 145%;
	border-radius: 50px;
	box-sizing: border-box;
}
ul.CaseList li.Task h4 {
	background-color: #b4bdc4;
}
ul.CaseList li.Effect h4 {
	background-color: #cecdb9;
}

ul.CaseList p,
ul.CaseList div {
	max-width: 100%;
}

ul.CaseList dl.TaskList {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	max-width: 420px;
	margin-bottom: 5px;
}

ul.CaseList dl.TaskList dt {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 3.5em;
	height: 3.5em;
	font-weight: bold;
	background-color: #ffffff;
	border-radius: 50%;
}

ul.CaseList dl.TaskList dd {
	width: calc(100% - 4em);
	margin-left: 0.5em;
	line-height: 120%;
	font-size: 125%;
	font-weight: bold;
}

ul.CaseList dl.TaskList + .ImgOnlyStyle {
	margin-bottom: 5px;
}

ul.CaseList .CatchCopy.SP1 {
	line-height: 130%;
	font-size: 130%;
}

#CaseArea .TextStyle3 {
	margin: 5px 0 0;
}

ul.CaseList .TextArea {
	text-align: center;
}
ul.CaseList li.Task .TextArea {
	margin-bottom: 45px;
}

ul.CaseList .TextArea h4 {
	display: inline-block;
	text-align: left;
}

ul.CaseList .TextArea .CatchCopy.SP1 {
	margin-top: 30px;
	line-height: 140%;
	text-align: left;
	font-size: 100%;
}

#TopicsArea {
	padding-bottom: 40px;
	background-color: #f8f8f8;
}

#TopicsArea .DateListStyle2 {
	font-size: 100%;
}

#TopicsArea .DateListStyle2 .LinkListStyle1 li {
	margin-bottom: 10px;
}

/*===　設備点検自動化サービス  ====================*/
.PageTitleArea {
	background-image: url(/products/it/control_sys/retrofit/image/inspection/bg_pagetitle.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: cover;
}

.PageTitleArea .PageTitleStyle3 {
	width: 965px;
	height: 398px;
	margin: 0 auto;
	text-align: center;
}

.PageTitleArea .PageTitleStyle3 .TextArea {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.PageTitleArea .PageTitleStyle3 h1 {
	line-height: 140%;
	font-size: 250%;
	font-weight: bold;
	color: #ffffff;
}

.PageTitleArea .PageTitleStyle3 .SubTitle {
	line-height: 140%;
	font-size: 150%;
	font-weight: bold;
	color: #ffffff;
}

.HorizontalInnerLinks.Wide {
	background-color: #404040;
}

.HorizontalInnerLinks.Wide ul {
	width: 965px;
	margin: 0 auto;
	padding-top: 15px;
}

.HorizontalInnerLinks.Wide li {
	margin: 0 10px 10px;
}

.HorizontalInnerLinks.Wide li a {
	padding: 0 25px 0 0;
	/*font-size: 100%;*/
	color: #ffffff;
	background-image: url(/products/it/control_sys/retrofit/image/inspection/icon_link_bottom.png);
	background-size: auto auto;
}

.Section.Wide {
	padding-bottom: 30px;
}
.Section.Wide.Stripe {
	background-image: linear-gradient(-45deg, transparent, transparent 48.5%, #e6e6e6 49.5%, #e6e6e6 50.5%, transparent 51.5%, transparent);
	background-repeat: repeat;
	background-size: 9px 9px;
}
@media all and (-ms-high-contrast: none) {
	*::-ms-backdrop, .Section.Wide.Stripe {
		background-image: linear-gradient(-45deg, transparent, transparent 50%, #e6e6e6 50%, #e6e6e6 calc(50% + 1px), transparent 50%, transparent);
	}
}
.Section.Wide.Service {
	margin-bottom: -1px;
	padding-bottom: 0;
}
.Section.Wide.Service01 {
	background-color: #e2e6e7;
}
.Section.Wide.Service02 {
	background-color: #f8f8ec;
}
.Section.Wide.Silver {
	background-color: #f8f8f8;
}
.Section.PageTopLink {
	padding-top: 20px;
}

.Section.Wide h2 {
	padding-top: 40px;
	line-height: 120%;
	text-align: center;
	font-size: 180%;
	background-image: none;
}

.Section.Wide .CaseList {
	margin-bottom: 15px;
}

.ImgOnlyStyle span {
	font-size: 87%;
}

ul.FeatueBox {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
	margin-left: -15px;
}

ul.FeatueBox > li {
	width: calc(33.33333333% - 15px);
	margin: 0 0 15px 15px;
}

ul.FeatueBox > li .Inner {
	padding: 20px;
	background-color: #43468b;
	border-radius: 20px;
}

ul.FeatueBox h3 {
	margin-bottom: 20px;
	font-size: 130%;
	color: #ffffff;
}

ul.FeatueBox p {
	line-height: 140%;
	color: #ffffff;
}

ul.FeatueBox ul.AnnotationsStyle1 {
	width: calc(300% + 30px);
	margin-top: 5px;
	margin-bottom: 0;
}

ul.FeatueBox ul.AnnotationsStyle1 li {
	margin-bottom: 0;
	line-height: 130%;
	font-weight: normal;
	color: #333333;
}

ul#TabBtn {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	margin: 20px 0 0 -15px;
}

ul#TabBtn li {
	display: table;
	width: calc(50% - 15px);
	margin-left: 15px;
}

ul#TabBtn li a {
	display: table-cell;
	width: 100%;
	height: 100px;
	padding: 5px 10px 0;
	text-align: center;
	vertical-align: middle;
	font-size: 145%;
	font-weight: bold;
	color: #333333;
	text-decoration: none;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-sizing: border-box;
	/*cursor: default;*/
}
ul#TabBtn li a#service01-btn,
ul#TabBtn li a#service01 {
	background-color: #e2e6e7;
}
ul#TabBtn li a#service02-btn,
ul#TabBtn li a#service02 {
	background-color: #f8f8ec;
}

ul#TabBtn li a p {
	line-height: 120%;
}

ul#TabBtn li a span {
	line-height: 120%;
	font-size: 71%;
	font-weight: normal;
}

.TabContents {
	position: relative;
	display: none;
}
.TabContents.Current {
	display: block;

}

.TabContents .Section.Wide .Grid4 {
	padding-top: 40px;
	padding-bottom: 40px;
}

.ServiceBox {
	max-width: 800px;
	margin: 50px auto 0;
}

.ServiceBox h3 {
	margin-bottom: 25px;
	text-align: center;
	font-size: 120%;
	font-weight: normal;
	color: #333333;
}

.MeritBox {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 30px;
	padding: 30px 20px 20px;
	background-color: #ffffff;
	border-radius: 20px;
}

.MeritBox ul.ListStyle1.CheckList {
	font-size: 110%;
}

.ToolBox {
	margin-bottom: 5px;
	padding: 30px 20px 0;
	background-color: #f1f2f4;
	border-radius: 20px;
}

ul.ToolList {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
}

ul.ToolList li {
	margin: 0 25px 15px;
}

ul.ToolList .ImgOnlyStyle {
	font-size: 100%;
	line-height: 100%;
}

ul.ToolList .ImgOnlyStyle img {
	margin-bottom: 15px;
}

ul.ToolList .ImgOnlyStyle span {
	font-size: 83%;
}

ul.Ref {
	/*display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;*/
	margin: 40px 0 0;
}

ul.Ref li {
	position: relative;
	/*width: calc(50% - 10px);*/
	max-width: 380px;
	margin: 0 auto 20px;
	/*margin-bottom: 20px;*/
	border-radius: 20px;
	overflow: hidden;
}

ul.Ref li.DlArea a {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(/products/it/control_sys/retrofit/image/inspection/icon_dl.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #acbebe;
}
ul.Ref li.DlArea a:hover,
ul.Ref li.DlArea a:active {
	opacity: 0.8;
}

ul.Ref li em.Title {
	position: absolute;
	bottom: 7%;
	left: 0;
	display: block;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	box-sizing: border-box;
}
ul.Ref li.DlArea em.Title {
	font-size: 125%;
	color: #3b4963;
}
ul.Ref li.MovieArea em.Title {
	font-size: 150%;
	color: #ffffff;
}

ul.Ref li .ImgOnlyStyle {
	margin-bottom: 0;
}

ul.Ref li .ImgOnlyStyle .ModalYouTubeLink {
	display: block;
}
ul.Ref li .ImgOnlyStyle .ModalYouTubeLink:before {
	width: 70px;
	height: 70px;
	margin: -38px 0 0 -38px;
	background-color: transparent !important;
	opacity: 1;
	border: 3px solid #ffffff;
}
ul.Ref li .ImgOnlyStyle .ModalYouTubeLink:after {
	display: none;
}
ul.Ref li .ImgOnlyStyle .ModalYouTubeLink span:after {
	margin: -17px 0 0 -9px;
	border-left: solid 26px #ffffff;
	border-top: solid 17px transparent;
	border-bottom: solid 17px transparent;
}

ul.Ref li .ImgOnlyStyle .ModalYouTubeLink img {
	width: 100%;
	height: auto;
	margin-bottom: 0;
}

p.DlArea {
	margin: 70px 0 40px;
}

p.DlArea a {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 700px;
	height: 150px;
	margin: 0 auto;
	padding: 5px 20px 0 190px;
	line-height: 120%;
	font-size: 200%;
	font-weight: bold;
	color: #4d4d4d;
	background-image: url(/products/it/control_sys/retrofit/image/inspection/icon_dl.png);
	background-repeat: no-repeat;
	background-position: 80px center;
	background-color: #e6e6e6;
	border-radius: 15px;
	box-sizing: border-box;
	text-decoration: none;
}
p.DlArea a:hover,
p.DlArea a:active {
	opacity: 0.8;
}

dl.Step {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	padding: 10px 0;
}

dl.Step dt {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 355px;
	height: 125px;
	padding-left: 55px;
	background-color: #43468b;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	box-sizing: border-box;
}

dl.Step dt span.Img {
	display: inline-block;
	padding-top: 10px;
}

dl.Step dt span.Txt {
	display: block;
	width: calc(100% - 90px);
	margin-left: 20px;
	line-height: 120%;
	text-align: center;
	color: #ffffff;
	font-size: 150%;
	font-weight: bold;
}

dl.Step dt span.Txt em {
	display: block;
	line-height: 120%;
	font-style: normal;
	font-size: 50%;
}

dl.Step dd {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: calc(100% - 355px);
	padding: 10px 50px 5px 30px;
	background-color: #f0f0f0;
	border-top-right-radius: 80px;
	border-bottom-right-radius: 80px;
	box-sizing: border-box;
}

dl.Step dd p {
	line-height: 120%;
	font-size: 110%;
}

ul.ListStyle1.FaqList {
	max-width: 925px;
	margin: 0 auto;
	padding: 25px 0 15px;
	font-size: 100%;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #cccccc;
}
ul.ListStyle1.FaqList:first-of-type {
	border-top-style: none;
}
ul.ListStyle1.FaqList:last-of-type {
	border-bottom-style: none;
}

ul.ListStyle1.FaqList li {
	margin-bottom: 10px;
	padding-left: 2em;
	background-position: 5px 0;
	background-size: auto auto;
}
ul.ListStyle1.FaqList li.Ques {
	font-weight: bold;
	color: #44468c;
	background-image: url(/products/it/control_sys/retrofit/image/inspection/icon_question.png);
}
ul.ListStyle1.FaqList li.Ans {
	background-image: url(/products/it/control_sys/retrofit/image/inspection/icon_answer.png);
}



/*===　Responsive Web design  =================*/
@media screen and (max-width: 994px) {
	.JS #Contact {
		margin: 0 -15px;
	}
	.JS #Contact.Fixed {
		margin: 0;
	}

	.JS #Contact .GridSet {
		max-width: none;
		margin: 0 auto;
	}

	.JS #Contact .GridSet .Grid4 {
		padding-right: 15px;
	}

	.JS .HideTablet {
		display: none;
	}

	.JS #BrandingArea {
		margin: 0 -15px;
		padding: 0 15px;
	}

	.JS #BrandingArea .BrandingTxt {
		width: auto;
	}

	.JS #LineupArea,
	.JS #TopicsArea {
		margin: 0 -15px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.JS ul.CaseList h4 {
		font-size: 125%;
	}

	.JS ul.CaseList .CatchCopy.SP1 {
		text-align: left;
	}

	.JS .PageTitleArea {
		margin: 0 -15px;
	}

	.JS .PageTitleArea .PageTitleStyle3 {
		width: auto;
	}

	.JS .PageTitleArea .PageTitleStyle3 .TextArea {
		padding: 0 15px;
	}

	.JS .HorizontalInnerLinks.Wide {
		margin-left: -15px;
		margin-right: -15px;
		padding-left: 5px;
		padding-right: 5px;
	}

	.JS .HorizontalInnerLinks.Wide ul {
		width: auto;
		max-width: 965px;
	}

	.JS .Section.Wide {
		margin-left: -15px;
		margin-right: -15px;
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media screen and (max-width: 767px) {
	.JS #BrandingArea {
		padding: 0;
		background-image: url(/products/it/control_sys/retrofit/image/branding_rwd.png);
	}
	.JS #BrandingArea:after {
		display: none;
	}

	.JS #BrandingArea .BrandingTxt {
		position: relative;
		height: 0;
		padding-bottom: 55.6%;
	}

	.JS #BrandingArea .BrandingTxt .Title {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 20px 15px 0;
		font-size: 210%;
		box-sizing: border-box;
	}

	.JS #AboutArea {
		position: static;
		width: auto;
		margin: 0 -15px;
	}

	.JS #AboutArea .Inner {
		padding: 75px 10px 25px;
		background-color: #011423;
	}

	.JS #AboutArea ul.InnerLinks {
		justify-content: space-between;
		width: 600px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.JS #AboutArea ul.InnerLinks li {
		margin: 0 10px 15px;
	}

	.JS #AboutArea ul.InnerLinks a {
		width: 160px;
	}

	.JS #LineupArea {
		padding-top: 0;
	}

	.JS #LineupArea ul.LineupList {
		display: block;
		width: auto;
		padding: 0 35px;
	}

	.JS ul.LineupList li {
		width: 100%;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	.JS ul.LineupList li .ButtonStyle1 a {
		max-width: 330px;
	}

	.JS #CaseArea .Section {
		max-width: 500px;
		margin: 0 auto;
	}

	.JS #CaseArea h3 {
		font-size: 150%;
	}

	.JS #CaseArea .TextStyle1 {
		font-size: 100%;
	}

	.JS ul.CaseList {
		display: block;
	}

	.JS ul.CaseList li {
		width: 100%;
	}

	.JS ul.CaseList li.Task {
		margin-bottom: 50px;
	}
	.JS ul.CaseList li.Task:after {
		top: auto;
		bottom: -39px;
		right: 50%;
		margin-top: 0;
		margin-right: -15px;
		border-top: 26px solid #33425f;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom-style: none;
	}

	.JS ul.CaseList h4 {
		width: 100%;
		max-width: 290px;
		padding-top: 6px;
		text-align: center;
		font-size: 115%;
	}

	.JS ul.CaseList .CatchCopy.SP1 {
		display: inline-block;
		width: 100%;
		max-width: 290px;
		margin-top: 15px;
		margin-bottom: 30px;
		vertical-align: top;
		font-size: 100%;
	}

	.JS ul.CaseList dl.TaskList dd {
		font-size: 110%;
	}

	.JS ul.CaseList li.Task .TextArea {
		margin-bottom: 0;
	}

	.JS .PageTitleArea .PageTitleStyle3 {
		position: relative;
		height: 0;
		padding-bottom: 51.823%;
	}

	.JS .PageTitleArea .PageTitleStyle3 .TextArea {
		position: absolute;
		padding-top: 10px;
	}

	.JS .PageTitleArea .PageTitleStyle3 h1 {
		margin-bottom: 0;
	}

	.JS ul.FeatueBox > li {
		width: calc(100% - 15px);
	}

	.JS ul.FeatueBox ul.AnnotationsStyle1 {
		width: auto;
	}

	.JS dl.Step dt {
		width: 280px;
		padding-left: 30px;
	}

	.JS dl.Step dt span.Txt {
		width: calc(100% - 70px);
		margin-left: 10px;
	}

	.JS dl.Step dd {
		width: calc(100% - 280px);
	}

	.JS p.DlArea a {
		padding-left: 140px;
		background-position: 30px center;
	}
}

@media screen and (max-width: 579px) {
	.JS #Contact ul {
		display: block;
		text-align: center;
	}

	.JS #Contact li.download {
		margin-right: 0;
		margin-bottom: 10px;
	}
	.JS #Contact li.contact {
		margin-left: 0;
	}

	.JS #Contact li a {
		display: inline-flex;
		padding-right: 55px;
	}

	.JS .HideSD2 {
		display: none;
	}

	.JS .ShowSD2 {
		display: block;
	}
	.JS br.ShowSD2,
	.JS span.ShowSD2 {
		display: inline;
	}

	.JS #BrandingArea .BrandingTxt .Title {
		padding-top: 10px;
		font-size: 140%;
	}

	.JS #AboutArea .Inner {
		padding: 40px 15px 25px;
	}

	.JS .CatchCopy.SP1 {
		font-size: 120%;
	}

	.JS #AboutArea .TextStyle1 {
		font-size: 100%;
	}

	.JS #AboutArea .TaskBox {
		width: calc(100% - 30px);
		min-width: 370px;
		max-width: none;
	}

	.JS #AboutArea ul.InnerLinks {
		display: block;
	}

	.JS #AboutArea ul.InnerLinks li {
		margin-left: 0;
		margin-right: 0;
	}

	.JS #AboutArea ul.InnerLinks a {
		width: 280px;
		margin: 0 auto;
	}

	.JS .PageTitleArea .PageTitleStyle3 {
		background-color: transparent;
	}

	.JS .PageTitleArea .PageTitleStyle3 h1 {
		font-size: 210%;
	}

	.JS .PageTitleArea .PageTitleStyle3 .SubTitle {
		font-size: 130%;
	}

	.JS .HorizontalInnerLinks.Wide li {
		margin-right: 5px;
		/*font-size: 83%;*/
	}

	.JS ul#TabBtn {
		margin-left: 0;
	}

	.JS ul#TabBtn li {
		width: 50%;
		margin-left: 0;
	}

	.JS ul#TabBtn li a {
		height: 70px;
		font-size: 115%;
	}

	.JS ul#TabBtn li a span {
		font-size: 76%;
	}

	.JS .ToolBox {
		padding-left: 10px;
		padding-right: 10px;
	}

	.JS ul.ToolList {
		justify-content: space-around;
	}

	.JS ul.ToolList li {
		margin-left: 10px;
		margin-right: 10px;
	}

	.JS ul.Ref {
		display: block;
	}

	.JS ul.Ref li {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.JS ul.Ref li.DlArea a {
		height: 0;
		padding-bottom: 56.316%;
	}

	.JS dl.Step dt {
		flex-direction: column;
		justify-content: center;
		width: 200px;
		padding-left: 15px;
		padding-right: 10px;
	}

	.JS dl.Step dt span.Img {
		padding-top: 0;
	}

	.JS dl.Step dt span.Txt {
		width: 100%;
		margin-left: 0;
	}

	.JS dl.Step dd {
		width: calc(100% - 200px);
		padding-left: 15px;
		padding-right: 20px;
	}

	.JS dl.Step dd p {
		font-size: 100%;
	}

	.JS dl.Step + .TextStyle3 {
		text-align: left;
		margin-left: 1.9em;
		text-indent: -1.9em;
	}
}

@media screen and (max-width: 399px) {
	.JS .HideSD1 {
		display: none;
	}

	.JS .ShowSD1 {
		display: block;
	}
	.JS br.ShowSD,
	.JS span.ShowSD {
		display: inline;
	}

	.JS #AboutArea .TextStyle1 {
		text-align: left;
	}

	.JS #AboutArea .TaskBox {
		width: 100%;
		min-width: auto;
	}

	.JS #LineupArea ul.LineupList {
		padding: 0;
	}

	.JS ul.LineupList li {
		max-width: 300px;
	}

	.JS ul.CaseList h4 {
		font-size: 100%;
	}

	.JS ul.CaseList dl.TaskList dd {
		font-size: 100%;
	}

	.JS #CaseArea .TextStyle3 {
		font-size: 67%;
	}

	.JS #CaseArea h3 {
		font-size: 130%;
	}

	.JS .PageTitleArea .PageTitleStyle3 h1 {
		font-size: 160%;
	}

	.JS .PageTitleArea .PageTitleStyle3 .SubTitle {
		font-size: 100%;
	}

	/*.JS .HorizontalInnerLinks.Wide ul {
		padding-left: 5px;
	}

	.JS .HorizontalInnerLinks.Wide li {
		margin-left: 10px;
		margin-right: 5px;
		font-size: 71%;
	}*/

	.JS .HorizontalInnerLinks.Wide li a {
		padding-right: 15px;
		font-size: 76%;
		background-size: 12px auto;
	}

	.JS ul#TabBtn li a {
		font-size: 96%;
	}

	.JS ul#TabBtn li a span {
		font-size: 70%;
	}

	.JS .ServiceBox h3 {
		font-size: 100%;
	}

	.JS .MeritBox ul.ListStyle1.CheckList {
		font-size: 100%;
	}

	.JS dl.Step dt {
		width: 150px;
	}

	.JS dl.Step dt span.Txt {
		font-size: 100%;
	}

	.JS dl.Step dt span.Txt em {
		font-size: 67%;
	}

	.JS dl.Step dd {
		width: calc(100% - 150px);
	}

	.JS dl.Step dd p {
		font-size: 90%;
	}

	.JS p.DlArea a {
		padding-left: 120px;
		font-size: 150%;
		background-size: 70px auto;
	}
}