@charset "utf-8";

:root{
	--wide: 1275px;
	/*Primary*/
	--Red1:#fa000f;
	--Red2:#cc0000;
	--White:#ffffff;
	--Gray1:#f4f4f4;
	--Gray2:#d9d9d9;
	--Gray3:#b3b3b3;
	--Gray4:#737373;
	--Gray5:#4d4d4d;
	--Gray6:#222222;
	--Black:#0c0c0c;
	/*Secondary*/
	--Orange1: #fdc796;
	--Orange2: #fa6900;
	--Orange3: #c85400;
	--Yellow1: #fdec96;
	--Yellow2: #fad200;
	--Yellow3: #967e00;
	--Pink1: #fd96d4;
	--Pink2: #fa00a5;
	--Pink3: #96005a;
	--Purple1: #d096fd;
	--Purple2: #9b00fa;
	--Purple3: #540096;
	--Blue1: #96c5fd;
	--Blue2: #0064fa;
	--Blue3: #004596;
	--Teal1: #96f0fd;
	--Teal2: #00dcfa;
	--Teal3: #008496;
	--Green1: #96fdcc;
	--Green2: #00fa82;
	--Green3: #00964e;
	--Red1_20_Tint: #ffcbce;
	--Red1_40_Tint: #ff979d;
	--Red1_60_Tint: #ff636c;
	--Red1_20_Dark: #bb000b;
	--Red1_40_Dark: #7d0008;
	--Red_Grad: linear-gradient(145deg, #FA000F, #CC0000);
	/*Custom*/
	--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(--Gray1);
}
.Grid4 .Section .Inner .TextStyle1 strong,
.Grid4 .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(--Red2);
	border: 1px solid var(--Red2);
	font-size: 160%;
	font-weight: bold;
}
.Grid4 h2 {
	margin: 0 0 1.5rem;
}
.Grid4.Sub h2 span,
.Grid4.Sub #Sec02 h2 span,
.Grid4.Sub #Sec03 h2 span {
	color: var(--White);
	font-weight: bold;
	font-size: 1.8rem;
	background: var(--Gray5);
	border-radius: 28px;
	width: 434px;
	transform: none;
}
.Grid4 .About h2 {
	color: var(--Black);
	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(--Red1_20_Tint) 60%, var(--Red1_20_Tint) 100%);
	font-size: 1.8rem;
	color: var(--Black);
	text-align: center;
	font-weight: bold;
}
.Strong {
	color: var(--Red2);
	font-weight: bold;
}
.LyoutBox {
	display: flex;
	gap: 1.5rem;
	align-items: center;
}
.Section .Inner .LyoutBox h3 {
	border: none;
	background: transparent;
	color: var(--Red2);
	font-weight: bold;
	font-size: 1.6rem;
	text-align: left;
}
.PanelBox {
	display: flex;
	gap: 1.5rem;
}
.About .PanelBox {
	margin: 2rem auto;
}
.About .PanelBox div {
	width: 100%;
}
.PanelBox li {
	background: var(--Gray1);
	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(--Gray4);
	color: var(--White);
	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(--White);
	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(--Gray1);
	border-radius: 10px;
	width: 100%;
	padding: 0;
	overflow: hidden;
}
.SubSection .PanelBox li .Sol h5 {
	background: var(--Gray5);
	padding: 1rem;
	font-size: 1.4rem;
}
.SubSection .PanelBox li .Sol .TextStyle1 {
	color: var(--Black);
	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(--Gray5);
	color: var(--White);
	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(--Gray1);
	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(--White)!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(--Red1_20_Tint);
		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;
	}
}