@charset "utf-8";

:root{
	--wide: 1275px;
	--wh: #fff;
	--lgray: #F1F1F1;
	--gray: #c6c6c6;
	--mgray: #A2A2A2;
	--dgray: #727171;
	--dark: #686666;
	--bk: #444444;
	--green: #50AE34;
	--blue: #1559E8;
	--dblue: #124AC1;
	--yellow: #FFE684;
	--col4: calc((100% / 4) - 1rem);
	--col3: calc((100% / 3) - 1rem);
	--col2: calc((100% / 2) - 1rem);
}
.Section .Inner {
	padding: 2rem 0;
}
.Section.Gy {
	background: var(--lgray);
}
.Section .Inner .TextStyle1 {
	font-size: 1.2rem;
}
.Section .Inner .TextStyle1.Catch {
	font-size: 1.4rem;
}
.Grid4 .PageTitleStyle3 {
    background: #f0f0f0 url(/-/media/sp/iot/solution/skillpuzzle/image/bg_pagetitle.jpg) no-repeat left top /100%;
}
.Grid4 .PageTitleStyle3 .Column2 h1 span {
	width: fit-content;
	margin: 0 0 1rem;
}
.Grid4.Sub .PageTitleStyle3 .Column2.LastItem {
	display: flex;
	gap: 1rem;
	flex-direction: column;
	justify-content: space-evenly;
}
.Grid4 .InnerLink {
   background: var(--blue);
}
.Grid4.Sub .InnerLink ul a:link,
.Grid4.Sub .InnerLink ul a:visited {
	color: #fff;
	background: rgba(255,255,255,0);
}
.Grid4.Sub .InnerLink ul a:hover {
    background: rgba(255,255,255,.1);
}
.Grid4.Sub .InnerLink ul {
	display: flex;
	max-width: 965px;
	margin: 0 auto;
	gap: 1rem;
	justify-content: start;
}
.Grid4 .Contact.Narrow .TextStyle1 a:link,
.Grid4 .Contact.Narrow .TextStyle1 a:visited {
	background: var(--blue);
	border: 1px solid var(--dblue);
	font-size: 160%;
	font-weight: bold;
}
.Grid4 h2 {
	margin: 0 0 1.5rem;
}
.Grid4 h2 span {
	color: var(--wh);
	font-weight: bold;
	font-size: 1.8rem;
	background: var(--blue);
	border-radius: 28px;
	width: 434px;
}
.Grid4 .About h2 {
	color: var(--bk);
	text-align: center;
	font-size: 2.6rem;
	font-weight: normal;
	margin: 2rem auto;
	background: transparent;

}
.Grid4 h3 {
	background: transparent;
	border: none;
	font-size: 1.6rem;
}
.Grid4 .About h3 {
	width: fit-content;
	margin: auto auto 2rem;
	border: none;
	padding: 0 1rem;
	background: linear-gradient(180deg, transparent 0%, transparent 60%, var(--yellow) 60%, var(--yellow) 100%);
	font-size: 1.8rem;
	color: var(--bk);
	text-align: center;
	font-weight: bold;
}
.Strong {
	color: var(--dblue);
	font-weight: bold;
}
.LyoutBox {
	display: flex;
	gap: 1.5rem;
	align-items: center;
}
.LyoutBox h3 {
	border: none;
	background: transparent;
	color: var(--dblue);
	font-size: 1.6rem;
}
.PanelBox {
	display: flex;
	gap: 1.5rem;
}
.About .PanelBox {
	margin: 2rem auto;
}
.About .PanelBox div {
	width: 100%;
}
.PanelBox li {
	background: var(--lgray);
	border-radius: 10px;
	padding: 1rem;
	flex: 1 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}
.Grid4.Sub .PanelBox li h4 {
	font-weight: bold;
	border-bottom: none;
	font-size: 1.4rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	line-height: 1;
}
.Grid4.Sub .PanelBox li:nth-of-type(1) h4::before {
	content: "1";
}
.Grid4.Sub .PanelBox li:nth-of-type(2) h4::before {
	content: "2";
}
.Grid4.Sub .PanelBox li:nth-of-type(3) h4::before {
	content: "3";
}
.Grid4.Sub .PanelBox li h4::before {
	content: "";
	border-radius: 50%;
	min-width: 33px;
	width: 33px;
	height: 33px;
	background: var(--dblue);
	color: var(--wh);
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Grid4.Sub .PanelBox li .TextStyle1 {
	font-size: 1rem;
}
.SubSection .PanelBox li {
	background: transparent;
	border-radius: 10px;
	padding: 0;
	flex: 1 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}
.SubSection .PanelBox li .Prob {
	background: var(--mgray);
	padding: 1rem;
	border-radius: 10px;
	color: var(--wh);
	font-weight: bold;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.2;
	min-height: 7rem;
}
.SubSection .PanelBox li .Arrow {
	display: block;
	width: 54px;
	height: 30px;
	margin: auto;
	background: url(/-/media/sp/iot/solution/skillpuzzle/image/icon_under.svg) no-repeat center;
}
.SubSection .PanelBox li .Sol {
	background: var(--lgray);
	border-radius: 10px;
	width: 100%;
	padding: 0;
	overflow: hidden;
}
.SubSection .PanelBox li .Sol h5 {
	background: var(--blue);
	padding: 1rem;
	font-size: 1.4rem;
}
.SubSection .PanelBox li .Sol .TextStyle1 {
	color: var(--bk);
	font-weight: normal;
	text-align: left;
}
.SubSection .PanelBox li .Sol .Lower {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.Task {
	font-size: 1.8rem;
	text-align: center;
}
.About .Sol {
	background: var(--blue);
	color: var(--wh);
	font-weight: bold;
	font-size: 1.4rem;
	border-radius: 20px;
	padding: 1.5rem 1.5rem 1.5rem;
	text-align: center;
}
.Grid4.Sub .Plate {
	background: var(--lgray);
	border-radius: 20px;
	padding: 1.5rem;
	margin: 2rem 0;
	display: flex;
	gap: 1.5rem;
}
.Grid4.Sub .Plate h4 {
	border: none;
	padding: .5rem 1rem;
	background: var(--dgray)!important;
	color: var(--wh)!important;
	font-weight: bold;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 5rem;
	width: -webkit-fill-available;
}
.Grid4.Sub .Plate li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	flex: 1;
}
/*
@keyframes scrollAnime {
	from {
			transform:translateY(200px);
			opacity:0;
			}
	to{
			transform:translateY(0px);
			opacity:1;
			}
}
.PanelBox li, .Plate li {
	animation: scrollAnime linear;
	animation-timeline:view();
		animation-range: entry 0% entry 50%;
}
*/
@media screen and (max-width: 767px) {
	.JS .Grid4 .About h3 {
		background: var(--yellow);
		font-size: 1.5rem;
		padding: .5rem;
	}
	.JS .LyoutBox,
	.JS .PanelBox,
	.JS .Plate {
		flex-direction: column;
	}
	.JS .Grid4 h2,
		.JS .Grid4 h2 span {
		box-sizing: border-box;
		width: 100%;
	}
	.JS .Grid4 h2 span {
		padding: 1rem;
		text-align: center;
	}
}