@charset "UTF-8";
:root {
  --color-pred1: #fa000f;
  --color-pred2: #cc0000;
  --color-pwhite: #fff;
  --color-pgray1: #f4f4f4;
  --color-pgray2: #d9d9d9;
  --color-pgray3: #b3b3b3;
  --color-pgray4: #737373;
  --color-pgray5: #4d4d4d;
  --color-pgray6: #222222;
  --color-pblack: #0c0c0c;
	--unit: 8px;
	--gap: 20px;
}
img {
	width: 100%;
	max-width: 100%;
}
/*
a:hover {
	opacity: .7;
}
*/
#Branding,section{
  font-family: 'Noto Sans JP', Meiryo, 'Osaka', sans-serif;
	color:var(--color-pblack);
}
section *{
	box-sizing:border-box;
}
section h2 {
	max-width:1275px;
	margin:auto;
	font-weight:bold;
	margin-bottom:0.5em;
	text-align:center;
	line-height: 1.4;
}
section h2 span{
	color:inherit;
	background:inherit;
	padding:0 15px;
}
section h2.lineStyle::after {
  content: "";
  display: block;
  width: 100px;
  height: 2px;
  margin: 1rem auto;
	text-align:center;
  background: linear-gradient(to right, var(--color-pred1) 0 50%, var(--color-pgray2) 50% 100%);
}
section#usage h2.lineStyle::after {
  background: linear-gradient(to right, var(--color-pred1) 0 50%, var(--color-pwhite) 50% 100%);
}
#toppage #News h2 {
	margin-top: 0;
}
section h2.lineStyle,
section h3.lineStyle {
	position: relative;
	border-bottom: none;
	margin-top: 0;
}
section h3.lineStyle:after {
	content: '';
	position: absolute;
	width: 25%;
	height: 4px;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	background-color: #B9457D;
}
section h2.lineStyle span,
section h3.lineStyle span{
  display: inline-block;
  margin: auto;
}
section h2.lineStyle .fukidashi:before,
section h3.lineStyle .fukidashi:before{
  content: '';
  height: 60px;
  width: 2px;
  position: absolute;
  transform: rotate(-35deg);
  bottom: -15px;
  border-radius: 10px;
	background-color: #575757;
}
section h2.lineStyle .fukidashi:after,
section h3.lineStyle .fukidashi:after{
  content: '';
  height: 60px;
  width: 2px;
  position: absolute;
  transform: rotate(35deg);
  bottom: -15px;
  border-radius: 10px;
	background-color: #575757;
}
section h3 {
	color:var(--color-pblack);
  font-weight: bold;
  border-bottom: none;
  padding-bottom: 25px;
  line-height: 140%;
}
section h3.title_s{
	padding:1em 0 0;
}
section h3 span {
  color: #404040;
	position: relative;
}
section h3.lineStyle.ribon {
	font-size: 1.3em;
}
section h3.lineStyle.ribon span {
	display: table;
	margin: 0 auto;
}
section h3.lineStyle.ribon span:before,h3.lineStyle.ribon span:after {
	content: '';
	position: absolute;
	height: 40px;
	width: 3px;
	background-color: #B9457D;
	transform: rotate(-34deg);
	top: 0;
	left: -15px;
}
section h3.lineStyle.ribon span:after {
	transform: rotate(34deg);
	left: inherit;
	right: -15px;
}
section h4,section h3.title_s {
	font-size:1.125rem; 
  font-weight: bold;
}
section h5 {
  color: #575757;
  font-size: 1.6rem;
  font-weight: bold;
}
section .lead{
	font-weight:bold;
	text-align:center;
}
section p.TextStyle1 {
  line-height: 1.75;
  font-size: 1.2rem;
}
section table.TableStyle4 th,
section table.TableStyle4 td{
	font-size:1rem;
}
section table.TableStyle4 caption{
	font-size:1.125rem;
	font-weight:bold;
}
	@media screen and (min-width:1305px) {
		.ShowRWD1305{
			display:none;
		}
	}
	@media screen and (max-width: 1304px) {
		.Hide1304{
			display:none;
		}
	}
	@media screen and (max-width: 1300px) {
		.OptionWideRWD #Contents{
			padding:0;
		}
	}
	@media screen and (min-width: 995px) and (max-width: 1304px){
		.OptionWideRWD #Contents{
				padding:0;
		}
	}
	@media screen and (min-width: 995px) {
		section{
			padding:4rem 0;
		}
		section h2 {
		  font-size:2.8125rem;
		}
		section h2 span{
			font-size:1.875rem;
		}
		section .lead{
		  font-size:1.25rem;
		}
		section h3{
		  font-size: 2rem;
		}
	}
	@media screen and (max-width: 994px) {
		.Hide994{display:none;}
		section{
			padding:3rem 0;
		}
		section h2 {
		  font-size:2.25rem;
		}
		section h2 span{
			font-size:1.625rem;
		}
		section .lead{
		  font-size:1.375rem;
		}
		section h3{
	    font-size:1.4375rem;
		}
	}
	@media screen and (max-width: 767px) {
		section{
			padding:2rem 0;
		}
		section h2 {
		  font-size:1.875rem;
		}
		section h2 span{
			font-size:1rem;
		}
		section .lead{
		  font-size:1.25rem;
			text-align:left;
		}
		section h3{
	    font-size:1.3125rem;
		}
	}
	@media screen and (min-width: 400px) {
		.ShowRWD399{
			display:none;
		}
	}
	@media screen and (max-width: 399px) {
		section{
			padding:2rem 0;
		}
		section h2 {
		  font-size:1.625rem;
		}
		section h2 span{
			font-size:1.25rem;
		}
		section .lead{
		  font-size:1.125rem;
		}
		section h3{
	    font-size:1.125rem;
		}
	}



/* BrandingArea
=========================================================================================== */
#BrandingArea {
  position: relative;
	z-index: 3;
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	background-color:var(--color-pwhite);
}
#BrandingArea .wrapper{
	max-width:1275px;
	/*width:100%;*/
	margin:auto;
	position:relative;
	padding:var(--gap) 0;
	box-sizing:border-box;
}
#BrandingArea .wrapper .inner{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
	align-items:center; 
	gap:var(--gap);
}
#BrandingArea .BrandingMark {
	font-size:1.5625rem; 
	border-radius:240px;
	max-width:240px;
	height:240px;
	display:flex;
	justify-content:center;
	flex-direction:column;
	align-items:center;
	text-align:center;
	background:var(--color-pgray4);
	color:var(--color-pwhite);
	font-weight:bold;
}
#BrandingArea .BrandingMark .num{
	font-size:2.875rem;
	line-height:1.2em;
}
#BrandingArea .BrandingMark .caption{
	font-size:1rem;
	font-weight:normal;
}
#BrandingArea .BrandingText {
	display:flex;
	flex-direction:column;
	gap:var(--unit);
}
#BrandingArea .BrandingText h1 {
  font-size: 2.5em;
  font-weight: bold;
	line-height:1.2;
}
#BrandingArea .BrandingText p.SubTitle {
  font-size: 1.7em;
  font-weight: bold;
}
#BrandingArea .BrandingButtons{
	display:flex;
	justify-content:center;
	gap:var(--gap);
}
#BrandingArea .BrandingButtons a[class^="btn-"]{
	margin:0;
}
#BrandingArea .BrandingButtons li[class^="btn-flat"]{
	flex:1;
}
#BrandingArea .BrandingButtons li[class^="btn-flat"] > a{
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:right 0.5em center;
	background-size:1.2em;
	padding:0.5em;
	display: flex;
	justify-content: center;
  align-items: center;
	padding-right: 2em;
}
#BrandingArea .BrandingButtons li[class^="btn-flat"] a.download{
	background-image:url(/solution/feature/hagukumi/images/icon_file2.svg);
	background-size:1em;
}
#BrandingArea .BrandingButtons li[class^="btn-flat"] a.demo{
	background-image:url(/solution/feature/hagukumi/images/icon_monitor1.svg);
}
#BrandingArea .BrandingButtons li[class^="btn-flat"] a.demo:hover{
	background-image:url(/solution/feature/hagukumi/images/icon_monitor3.svg);
}
#BrandingArea .BrandingButtons .sub{
  max-width: 140px;
	white-space:nowrap;
  position: relative;
  display: inline-block;
	line-height:1.2;
	margin:0 1em;
}
#BrandingArea .BrandingButtons .sub::before,
#BrandingArea .BrandingButtons .sub::after {
  content: "";
  position: absolute;
  bottom:7px;
  width: 20px;
  height: 2px;
  background: #fff;
}
#BrandingArea .BrandingButtons .sub::before {
  left:-1em;
  transform: translateY(-50%) rotate(40deg);
}
#BrandingArea .BrandingButtons .sub::after {
  right:-1em;
  transform: translateY(-50%) rotate(-40deg);
}
#BrandingArea .BrandingButtons a{
	font-weight:bold;
	text-align:center;
	text-decoration:none;
}
	@media (max-width:1304px) {
		#BrandingArea .wrapper{
			margin-left:15px;
			margin-right:15px;
		}
	}
	@media (min-width: 995px) {
		#BrandingArea .BrandingButtons li[class^="btn-flat"] > a{
			flex-direction: column;
		}
		#BrandingArea .BrandingButtons .sub{
			margin-bottom:0.5em;
		}
	}
	@media (max-width: 994px) {
		#BrandingArea .wrapper .inner{
			justify-content:center;
			gap:calc((var(--gap)) / 2);
			grid-template-columns: 1fr;
		}
		#BrandingArea .BrandingImg {
			margin:var(--gap) auto;
			max-width:600px;
			width:100%;
	    flex: 1 1 100%;
	    order: 3;
	  }
	}
	@media screen and (min-width: 768px) {
		#BrandingArea {
			background-image: url(../images/background_01.png);
      background-position: top;
		}
		#BrandingArea .BrandingButtons .sub{
			font-size:0.875rem;
		}
	}
	@media screen and (max-width: 767px) {
		#BrandingArea {
			background-image: url(../images/background_01sp.png);
		}
		#BrandingArea .BrandingButtons .sub{
			font-size:0.6875rem;
		}
		#BrandingArea .BrandingButtons .sub::before,
		#BrandingArea .BrandingButtons .sub::after{
			bottom:6px;
		}
	}
	@media (max-width: 579px) {
		#BrandingArea .BrandingText h1 {
		  font-size:1.875rem;
			line-height:1.2;
		}
		#BrandingArea .BrandingText p.SubTitle {
		  font-size:1.375rem;
			line-height:1.2;
			margin-bottom:0.25em ;
		}
		#BrandingArea .lead{
			margin-top:0.5em ;
			margin-bottom:0.5em ;
		}
		#BrandingArea .BrandingButtons,
		#BrandingArea .BrandingMark {
			flex-direction:column;
		}
	}


/* floating pagelink
=========================================================================================== */
/*
.HorizontalInnerLinks.Fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 7;
  transition: top 0.5s linear;
	border-bottom:solid 1px var(--color-pgray2);
}
body.header2-show .HorizontalInnerLinks.Fixed {
  top: 60px;
  transition: top 0.5s linear;
}
.HorizontalInnerLinks{
	background:var(--color-pgray1);
}
.HorizontalInnerLinks li span{
	position:relative;
	display:inline-flex;
}
.HorizontalInnerLinks a{
	color:var(--color-pblack);
	text-decoration:none;
	font-size:0.875rem;
}
.HorizontalInnerLinks a:hover{
	color:var(--color-pred2);
}
.HorizontalInnerLinks a::after{
	content:"";
	width:1em;
	height:1em;
	position:absolute;
	background-position:center center;
	background-size:contain;
	background:url(/image/hsc2/solution/icon/icon_arrow.svg);
	transform: translateY(-50%) rotate(90deg);
	transform-origin: center center;
	top:50%;
	right:0.25em;
}
.HorizontalInnerLinks a[target*="_blank"]::after,
.InnerLink2 a[target*="_blank"]::after{
	background:url(/image/hsc2/solution/icon/icon_newwin_r.svg);
}
.HorizontalInnerLinks a:hover::after{
	background:url(/image/hsc2/solution/icon/icon_arrow_r.svg);
}
#mainLinlList{
	max-width:1275px;
	min-height:50px;
	margin:auto;
	display:flex;
	gap:1em;
	align-items:center;
	flex-wrap:wrap;
}
#mainLinlList li{
	position:relative;
}
#mainLinlList li a{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	padding-right:1.5em;
	height:100%;
}
	@media screen and (max-width: 1274px) {
		#mainLinlList{
			gap:0 calc(var(--gap) * 0.5);
		}
	}
	@media screen and (min-width: 768px) {
		#mainLinlList{
			justify-content:center;
		}
	}
	@media screen and (max-width: 767px) {
    body.header1-show .HorizontalInnerLinks.Fixed {
        top: 45px;
        transition: top 0.5s linear;
    }
	  .accordion {
	    display: none;
	  }
	  .js-toggleAccordion {
	    position: relative;
	    display: block;
	    font-weight: bold;
			text-align:center;
	    cursor: pointer;
	    width: 100%;
	    height: 100%;
	    padding: 15px;
	    box-sizing: border-box;
	    transition: 0.3s;
		}
	  .js-toggleAccordion::after {
			content:"";
			display: inline-block;
			width:1rem;
			height:1rem;
			position:absolute;
			background:url(/image/hsc2/solution/icon/icon_arrow.svg);
			top: 50%;
			transform: translateY(-50%) rotate(90deg);
			transform-origin: center center;
	  }
		.HorizontalInnerLinks a{
		  padding:0.5rem 1rem;
		}
		#mainLinlList{
			border-top:1px solid var(--color-pgray2);
			gap:0;
			flex-wrap:wrap;
			align-items: stretch;
		}
		#mainLinlList li{
			width:50%;
			border-bottom:1px solid var(--color-pgray2);
			text-align:center;
			line-height:1.2;
			display:flex;
			flex-direction:column;
			justify-content:center;
			position:relative;
		}
		#mainLinlListCol{
			flex-direction:column;
		}
		#mainLinlListCol li{
			width:100%;
		}
	}
*/



/* Horizontal
=========================================================================================== */
#main .HorizontalInnerLinks {
  background-color:var(--color-pgray5);
  margin-bottom: 0;
}
#main .HorizontalInnerLinks ul {
	box-sizing: border-box;
  max-width: 1275px;
  width: 100%;
  display: flex;
  margin: 0 auto;
  justify-content: center;
	flex-wrap: wrap;
}
#main .HorizontalInnerLinks ul li {
  display: flex;
  align-items: center;
  width: auto;
  justify-content: center;
  margin: 0;
	text-align: center;
}
#main .HorizontalInnerLinks ul li a {
  background-image: none;
  font-size: 100%;
	display: block;
	width: 100%;
	line-height:1.3;
}
#main .HorizontalInnerLinks ul li a:link,
#main .HorizontalInnerLinks ul li a:visited{
	color:var(--color-pwhite);
  text-decoration: none;
}
#main .fixedItem {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 79;
  width: 100%;
  box-sizing: border-box;
}
#main .JS #InnerLinkArea.fixedItem.header1-fixed {
  margin-top: 45px;
}
#main .HorizontalInnerLinks ul li a::after{
  transform: rotate(90deg);
  background-image: url(/image/hsc2/solution/icon/icon_arrow_w.svg);
}
#main .HorizontalInnerLinks ul li a:hover::after{
  transform: rotate(90deg);
}

	@media screen and (min-width: 768px) {
		#main .HorizontalInnerLinks ul li a {
			font-size:0.875rem;
			padding:var(--gap) calc(var(--gap) / 2);
		}
		#main .HorizontalInnerLinks ul li a:active,
		#main .HorizontalInnerLinks ul li a:hover {
			background-color: var(--color-pgray2);
			color:var(--color-pblack);
			opacity:1;
		}
		#main .HorizontalInnerLinks ul li a:hover::after {
		  background-image: url(/image/hsc2/solution/icon/icon_arrow.svg);
		}
	}
	@media screen and (max-width: 767px) {
		#main .HorizontalInnerLinks ul {
			padding:1em 0;
		}
		#main .HorizontalInnerLinks ul li a {
			padding:var(--unit);
		}
	}





/* Link & Button ※商材ページと同じタイプ
=========================================================================================== */
main .cta ul[class*="InnerLink"],
main ul.CenterAdjust[class*="InnerLink"] {
  justify-content: center;
  gap: var(--gap);
}
main ul[class*="InnerLink"] {
  display: flex;
  gap: var(--unit);
  flex-wrap: wrap;
}
/*
main ul[class*="InnerLink"] li{
	width:100%;
}*/
main ul[class*="InnerLink"] a{
	cursor:pointer;
}
main ul[class*="InnerLink"] a,
main ul[class*="InnerLink"] a a,
.HorizontalInnerLinks a{
	position:relative;
}
main ul[class*="InnerLink"] a{
	display:flex;
	gap:var(--unit);
	flex-wrap:wrap;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:300px;
	border-radius:100px;
	border:2px solid var(--color-pred2);
	padding:calc(var(--unit) * 1.5) calc(var(--unit) * 2);
	font-weight:bold;
	text-decoration:none;
	text-align:center;
}
main a::after{
	background-image:url(/image/hsc2/solution/icon/icon_arrow_r.svg);
}
main a[target*="_blank"][href^="https"]::after{
	background-image:url(/image/hsc2/solution/icon/icon_newwin_r.svg);
}
main a[href*="youtube"]::after{
	background-image:url(/image/hsc2/solution/icon/icon_movie_r.svg);
}
main  .InnerLink1 a[target*="_blank"]::after{
	background-image:url(/image/hsc2/solution/icon/icon_newwin_w.svg);
}
main a[href*=".pdf"]::after,
main a[target*="_blank"][href*=".pdf"]::after{
	background-image:url(/image/hsc2/solution/icon/icon_pdf_r.svg);
}
main  .InnerLink1 a::after{
	background-image:url(/image/hsc2/solution/icon/icon_arrow_w.svg);
}
main  .InnerLink2 a:hover::after,
.InnerLink2 a:hover::after{
	background-image:url(/image/hsc2/solution/icon/icon_arrow.svg);
}
main  .InnerLink2 a[target*="_blank"]:hover::after{
	background-image:url(/image/hsc2/solution/icon/icon_newwin.svg);
}
.HorizontalInnerLinks a,
main a:link,
main .LinkListStyle1 a,
main a:visited{
	color:var(--color-pred2);
	text-decoration:none;
}
main a:hover{
	text-decoration:underline;
}
main .InnerLink1 a,
main .InnerLink1 a:visited{
	background-color:var(--color-pred2);
	color:var(--color-pwhite);
}
main .InnerLink2 a{
	color:var(--color-pred2);
	background-color:var(--color-pwhite);
}
main .InnerLink1 a:hover{
	border:2px solid var(--color-pblack);
	background-color:var(--color-pblack);
}
main .InnerLink2 a:hover{
	border:2px solid var(--color-pblack);
	color:var(--color-pblack);
}
main a:not(.ImgOnlyStyle .ModalYouTubeLink)::after,
main ul[class*="InnerLink"] a a::after{
	content:"";
	width:1em;
	height:1em;
	display:inline-block;
	font-weight:normal;
	vertical-align:baseline;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	position: relative;
	margin-left:0.25em;
}
/* アイコン非表示 */
main .btn-flat1 a:not(.ImgOnlyStyle .ModalYouTubeLink)::after,
main .LinkListStyle1 a:not(.ImgOnlyStyle .ModalYouTubeLink)::after,
main .BrandingButtons a:not(.ImgOnlyStyle .ModalYouTubeLink)::after,
main .banner a:not(.ImgOnlyStyle .ModalYouTubeLink)::after{
	content:none;
}
main ul[class*="InnerLink"] a::after{
	position:absolute;
	margin-left:0.5em;
}
main [class^="InnerLink"].lg{
	margin: var(--gap) auto;
}
	@media screen and (min-width: 768px) {
		main [class^="InnerLink"].lg a{
			padding: 1em;
			font-size: 1.5rem;
			min-width:600px;
		}
	}
	@media screen and (max-width: 767px) {
		main [class^="InnerLink"].lg a{
			padding:0.5em 1em;
			font-size: 1.125rem;
			width:100%;
		}
	}




/* News Ticker
=========================================================================================== */
#TopNewsArea {
	/*margin-bottom: 50px;*/
	background-color: #FFFFFF;
}
#tickerArea {
	display: block;
	width: 100%;
	height: 56px;
	padding: 0 10px 0 20px;
}
#News {
	margin: 0 auto;
	overflow: hidden;
	padding: 14px 0;
	position: relative;
}
#News h2 {
	background-image: none !important;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	width: 92px;
	height: 28px;
	border-style: none;
	font-size: 100%;
}
#News h2 span {
	background-color: #737373;
	box-sizing: border-box;
	font-size: 90%;
	font-weight: bold;
	line-height: 120%;
	padding: 2px 5px 4px;
	border-left-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #fff;
}
#News #NewsBody {
	position: absolute;
	display: flex;
	align-items: center;
	top: 0;
	right: 0 !important;
	left: 92px !important;
	width: calc(100% - 92px) !important;
	height: 56px;
	margin: 0;
	padding: 10px 0 8px 0;
	box-sizing: border-box;
	vertical-align: middle;
	overflow: hidden;
	text-indent: 0;
	color: #000;
}
#News #NewsBodyInner {
	color: #000;
	font-size: 90%;
	padding: 0 0 0 20px;
	white-space: nowrap;
	font-weight: bold;
}
#News #NewsBodyInner .NewsLabel {
	font-size: 86%;
	padding:0.5em 1em;
	border-radius: 30px;
	line-height: 120%;
	margin-left: 10px;
  background-color:var(--color-pgray1);
  color:var(--color-pred2);
}
#News #NewsBodyInner a {
	-moz-background-size: 16px 16px;
	-ms-background-size: 16px 16px;
	-o-background-size: 16px 16px;
	-webkit-background-size: 16px 16px;
	background-size: 16px 16px;
	background-position: right center;
	background-repeat: no-repeat;
	color: #000;
	padding: 0 0 0 10px;
}
#News #NewsBodyInner a:link,
#News #NewsBodyInner a:visited {
	text-decoration: none;
}
#News #NewsBodyInner a:hover,
#News #NewsBodyInner a:active {
	text-decoration: underline;
}
#News #NewsBodyInner img {
	margin-left: 5px;
	vertical-align: middle;
}
#NewsControl {
	display: none;
	float: left;
	width: 72px;
}
#NewsControl li {
	float: left;
	overflow: hidden;
}
#NewsControl li a {
	background-size: 20px;
	display: block;
	height: 27px;
	overflow: hidden;
	position: relative;
	text-align: center;
	text-indent: -9999px;
	vertical-align: middle;
	width: 24px;
}
#NewsControl #NewsPlay a:after {
	border-left: solid 2px #fff;
	border-right: solid 2px #fff;
	content: "";
	display: block;
	height: 9px;
	left: 50%;
	margin: -5px 0 0 -3px;
	position: absolute;
	top: 50%;
	width: 1px;
}
#NewsControl #NewsPlay a.Current:after {
	border-bottom: solid 5px transparent;
	border-left: solid 5px #fff;
	border-right: 0 none;
	border-top: solid 5px transparent;
	height: 0;
	left: 50%;
	margin: -5px 0 0 -1px;
	top: 50%;
	width: 0;
}
 #NewsControl #NewsPrev a:after {
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	border-bottom: solid 2px #fff;
	border-left: solid 2px #fff;
	content: "";
	display: block;
	height: 4.5px;
	left: 50%;
	margin: -3px 0 0 -2px;
	position: absolute;
	top: 50%;
	transform: rotate(45deg);
	width: 4.5px;
}
#NewsControl #NewsNext a:after {
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	border-bottom: solid 2px #fff;
	border-right: solid 2px #fff;
	content: "";
	display: block;
	height: 4.5px;
	left: 50%;
	margin: -3px 0 0 -4px;
	position: absolute;
	top: 50%;
	transform: rotate(-45deg);
	width: 4.5px;
}
@media screen and (max-width: 1304px) {
	.JS #TopNewsArea {
		margin-left: -15px;
		margin-right: -15px;
		padding: 0 15px;
	}
}
@media screen and (max-width: 767px) {
	.JS #tickerArea {
		height: auto;
		padding: 0;
	}
	.JS #News {
		/*padding-bottom: 5px;*/
		padding: 0;
		margin-bottom: 0;
	}
	.JS #News h2 {
		float: none;
		width: auto;
	}
	.JS #News #NewsBody {
		position: static;
		width: auto !important;
		height: auto;
	}
	.JS #News #NewsBodyInner {
		padding: 0;
	}
}
@media screen and (max-width: 399px) {
	.JS #News {
		padding: 0;
	}
	.JS #News #NewsBody{
		height: 45px;
	}
}


/* tasks
=========================================================================================== */
#tasks{
	background:var(--color-pgray1);
	position:relative;
	padding-bottom:0;
}
#tasks::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  width: 0;
  height: 0;
  z-index: 1;
}
#tasks .wrapper{
	display:flex;
	gap:var(--gap);
}
#tasks .container{
	width:100%;
	position:relative;
	background:var(--color-pwhite);
	border-radius: 26px;
}
#tasks h3{
	font-size:1.25rem;
	text-align:center;
	margin:3.5rem 0 0;
	font-size:1.25rem;
}
#tasks .txt{
	font-size:1rem;
	margin:0 1rem 1rem;
}
#tasks .container:before{
	content: "";
	display: inline-block;
	background-size: cover;
	position: absolute;
}
#tasks .container#t01:before{background-image:url(/solution/feature/hagukumi/images/t01.png);}
#tasks .container#t02:before{background-image:url(/solution/feature/hagukumi/images/t02.png);}
#tasks .container#t03:before{background-image:url(/solution/feature/hagukumi/images/t03.png);}
#tasks .container#t04:before{background-image:url(/solution/feature/hagukumi/images/t04.png);}
#tasks .container#t05:before{background-image:url(/solution/feature/hagukumi/images/t05.png);}
	@media screen and (max-width: 1304px) {
		#tasks .wrapper{
		  flex-wrap: wrap;
		}
	}
	@media screen and (min-width: 768px) {
		#tasks::after {
		  bottom: -80px;
		  border-top:80px solid var(--color-pgray1);
		}
		#tasks.section{
			padding:5rem 0 0;
		}
		#tasks .container{
			width: calc((100% - 2rem) / 2);
			margin-top:80px;
		}
		#tasks .container:before{
			margin:auto;
			width: 125px;
			height: 130px;
			top: -75px;
	    margin-left: calc(50% - 60px);
		}
	}
	@media screen and (max-width: 767px) {
		#tasks h3{
			margin-left:1em;
			margin-right:1em;
		}
		#tasks::after {
		  bottom: -50px;
		  border-top: 50px solid var(--color-pgray1);
		}
		#tasks .container{
			margin-top:60px;
			display: grid;
	    place-items: center;
		}
		#tasks .container:before{
			width: 100px;
			height: 100px;
			top: -60px;
		}
	}



/* solve
=========================================================================================== */
#solve{
	position:relative;
	padding-top:7vw;
  max-width: 1275px;
  margin-left: auto;
  margin-right: auto;
	margin-bottom:0;
}
#solve .lead{
	font-size:1.875rem;
	font-weight:bold;
	text-align:center;
	line-height:2.25em;
}
#solve .lead strong{
	color:var(--color-pred2);
}
	@media screen and (min-width: 1305px) {
		#solve .lead{
			font-size:1.875rem;
		}
		#solve .lead strong{
			font-size:2.625rem;
		}
	}
	@media screen and (max-width: 1304px) {
		#solve{
			background-size:contain;
			padding-top:10vw;
		}
		#solve .lead{
			font-size:1.5rem;
		}
		#solve .lead strong{
			font-size:1.875rem;
		}
	}
	@media screen and (min-width: 768px) {
		#solve{
			background-image:url(/solution/feature/hagukumi/images/background_02.png);
			background-repeat:no-repeat;
			background-position:center center;
			background-size:contain;
			padding-bottom:0;
		}
	}
	@media screen and (max-width: 767px) {
		#solve{
			margin-bottom:4rem;
			background-image:url(/solution/feature/hagukumi/images/background_02sp.png);
			background-repeat:no-repeat;
			background-position:center bottom;
      background-size:90vw;
			padding-bottom: 60vw;
		}
		#solve .lead{
			line-height:1.4;
			margin-bottom:1em;
			font-size:1.25rem;
		}
		#solve .lead strong{
			font-size:1.5rem;
		}
	}
	@media screen and (max-width: 579px) {
		#solve{
			padding-top:12vw;
		}
	}
	@media screen and (max-width: 399px) {
	}



/* features
=========================================================================================== */
#features{
	margin-top:0 !important;
}
#features h2 span{
	display:inline-block;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
	background:url(/solution/feature/hagukumi/images/num4.svg) no-repeat;
	background-position:bottom;
}
#features h3{
	color:var(--color-pred2);
	font-size:1.75rem;
	padding:0;
}
#features ol.featuresList{
	padding-left:0;
}
#features ol.featuresList > li{
	display:flex;
	gap:var(--gap);
	list-style-type:none;
	background-repeat:no-repeat;
}
#features ol.featuresList .LinkListStyle1{
	margin-top:var(--unit);
	font-weight:bold;
}
#features ol.featuresList > li .ImgOnlyStyle{
	max-width:600px;
}
#features ol.featuresList li#f01{background-image:url(/solution/feature/hagukumi/images/num1.svg);}
#features ol.featuresList li#f02{background-image:url(/solution/feature/hagukumi/images/num2.svg);}
#features ol.featuresList li#f03{background-image:url(/solution/feature/hagukumi/images/num3.svg);}
#features ol.featuresList li#f04{background-image:url(/solution/feature/hagukumi/images/num4.svg);}
	@media screen and (min-width: 1305px) {
		#features ol.featuresList > li .txt{
			width: calc(100% - 600px);
		}
	}
	@media screen and (max-width: 1304px) {
		#features ol.featuresList > li{
			flex-direction:column;
		}
	}
	@media screen and (min-width: 768px) {
		section #features .container {
			padding: 3rem 5rem 1rem 5rem;
		}
		#features h2 span{
			font-size: 4.25rem;
		  top: 15px;
		}
		#features ol.featuresList > li{
			background-size:3rem;
			padding-left:5rem;
			margin-bottom:3rem;
		}
	}
	@media screen and (max-width: 767px) {
		#features .container {
		  padding-left: 0.5rem !important;
		  padding-right: 1.1rem !important;
		}
		#features h2 span{
			font-size: 4.25rem;
			line-height: 0.7;
			padding:0 5px;
			top:5px;
		}
		#features h3{
			font-size: 1.3125rem;
			padding-bottom:0;
		}
		#features ol.featuresList > li{
			background-size:2.25rem;
			padding-left:3rem;
			margin-bottom:1.5rem;
		}
	}



/* typical_function
=========================================================================================== */
#typical_function h3{
	border-bottom:4px solid var(--color-pgray4);
	padding-bottom:0.5em;
	margin-top: 40px;
}
#typical_function .FunctionList {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 100%;
	column-gap: 20px;
	row-gap: 20px;
	margin-top: 20px;
}
#typical_function .FunctionList li {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color:var(--color-pgray1);
	border:1px solid var(--color-pgray3);
	border-radius:calc((var(--unit)) * 2);
	padding:1rem;
	box-sizing: border-box;
}
#typical_function .FunctionList li h4 {
	font-size: 1.125em;
	color:var(--color-pblack);
	display:flex;
	align-items:center;
	gap:calc((var(--gap)) / 2);
	font-weight: bold;
	text-align: center;
	padding-bottom:inherit;
}
#typical_function .FunctionList li h4 img {
	max-width:95px;
	width:100%;
}
#typical_function .AdditionalNotesStyle1{
	margin-top:1em;
}
	@media screen and (min-width: 995px) {
		#typical_function .wrapper{
			display: flex;
			gap:var(--gap);
		}
		#typical_function .wrapper > *{
			width:50%;
		}
		#typical_function h3{
			font-size:1.75rem;
		}
		#typical_function .FunctionList li {
			width: calc((100% - 60px) / 4);
		}
		#typical_function .wrapper .FunctionList li {
			width: calc((100% - 60px) / 2);
			flex:1;
		}
	}
	@media screen and (max-width: 994px) {
		#typical_function h3{
			font-size:1.25rem;
		}
		#typical_function .FunctionList li {
			width: calc((100% - var(--gap)) / 2);
		}
	}
	@media screen and (max-width: 767px) {
		#typical_function .FunctionList li h4 {
			flex-direction:column;
		}
	}
	@media screen and (max-width: 399px) {
		#typical_function .FunctionList li {
			width: 100%;
		}
	}



/* button & link & banner
※はぐくみTOPデザイン専用　四角いタイプのボタン ※最終的に削除すること
=========================================================================================== */
main [class^="btn-"] a{
	display: block;
	text-align: center;
	padding: 1em;
	box-sizing: border-box;
	text-decoration: none;
	position: relative;
	font-weight: bold;
}
main [class^="btn-round"] a{
	border-radius: 100px;
	max-width:600px;
}
main [class^="btn-flat"] a{
	border-radius:calc((var(--unit)) / 2);
}
main .btn-round1 a,
main .btn-flat1 a {
	color: var(--color-pwhite);
	background-color: var(--color-pred2);
}
main .btn-round2 a,
main .btn-flat2 a{
	color: var(--color-pred2);
	background-color: var(--color-pwhite);
	border:3px solid var(--color-pred2);
}
main .btn-round1 a:hover,
main .btn-flat1 a:hover {
	background-color: var(--color-pblack);
}
main .btn-round2 a:hover,
main .btn-flat2 a:hover {
	color: var(--color-pblack);
	border:3px solid var(--color-pblack);
}
#Contents .LinkListStyle1 a{
	font-size:1rem;
	color:var(--color-pred2);
}
#Contents .lead + .LinkListStyle1{
	margin-top:var(--gap);
	font-weight:bold;
}
#Contents	.banner{
	max-width: 940px;
	padding:1rem;
	margin:auto;
}
main [class^="btn-round"] a::after {
	content: '';
	display: block;
	background-size: 100% auto;
	width: 32px;
	height: 32px;
	right: 10px;
	top: calc(50% - 15px);
	position: absolute;
}
main .btn-round1 a::after {
	background: url(/image/jp/r1/icon/icon_link_right_white_hd.gif) center center no-repeat;
}
main .btn-round2 a::after {
	background: url(/image/jp/r1/icon/icon_link_right_hd.gif) center center no-repeat;
}
.contact.fullWide:after{
	background-color:var(--color-pgray1);
}
.contact ul{
	max-width:1275px;
	display:flex;
	gap:var(--gap);
	justify-content:center;
	margin:auto;
	text-align:center;
}
.contact ul li{
	box-sizing:border-box;
	position:relative;
}
#toppage .contact [class^="btn-flat"] a{
	width:100%;
	margin:3em auto 0;
	line-height:1.2;
}
#toppage .contact [class^="btn-flat"] a::before{
	content: "";
	display: inline-block;
	background-size: cover;
	position:absolute;
	left:calc(50% - 40px);
}
#toppage .contact [class^="btn-flat"] a.download::before{
	background-image:url(/solution/feature/hagukumi/images/icon_file.svg);
	width: 65px;
	height: 70px;
	top:-69px;
}
#toppage .contact [class^="btn-flat"] a.demo::before{
	background-image:url(/solution/feature/hagukumi/images/icon_monitor.svg);
	width: 80px;
	height: 70px;
	top:-69px;
}
#toppage .contact [class^="btn-flat"] a:hover::before{
	top:-71px;
}
#toppage .contact [class^="btn-flat"]:hover:before{
	top:10px;
}
#toppage .contact .btn-flat1 a:hover {
	background-color: var(--color-pred2);
}
	@media screen and (min-width: 995px) {
	}
	@media screen and (min-width: 768px) {
		main [class^="btn-"] a{
			font-size: 1.5rem;
		}
		#toppage .contact [class^="btn-flat"] a{
			font-size:2rem;
			padding:2rem;
		}
	}
	@media screen and (max-width: 767px) {
		.contact ul{
			flex-direction:column;
		}
		main [class^="btn-"] a{
			font-size: 1.25rem;
		}
		main [class^="btn-round"] a{
			max-width:90%;
			padding-right:2em;
		}
		#toppage .contact [class^="btn-flat"] a{
			margin:0;
		}
		#toppage .contact [class^="btn-flat"] a::before{
			content:none;
		}
	}
	@media screen and (max-width: 399px) {
	}



/* case
=========================================================================================== */
#case,#case2{
	padding-top:3rem;
}
#case a,#case2 a{
	color:inherit;
}
#case a:after,#case2 a:after{
	content:none;
}
article h2,
h2.c-hd {
	max-width:1275px;
	margin:auto;
  font-size:2.8125rem;
	font-weight:bold;
	margin-bottom:0.5em;
	text-align:center;
}
article h2 span,
h2.c-hd span{
	color:inherit;
	background:inherit;
	font-size:2.25rem;
}
article h2::after,
h2.c-hd::after {
  content: "";
  display: block;
  width: 100px;
  height: 2px;
  margin: 1rem auto;
	text-align:center;
  background: linear-gradient(to right, var(--color-pred1) 0 50%, var(--color-pgray2) 50% 100%);
}
#Contents #case_box{
	gap:var(--gap);
}
#Contents .flex_container ul#case_box li {
  margin:0;
}
#case .lead,
#case2 .lead{
	font-weight:bold;
	text-align:center;
	margin-bottom:var(--gap);
}
#Contents .flex_container ul#case_box li figure{
	max-height:225px;
	height:inherit;
	overflow:hidden;
}
#Contents .flex_container ul#case_box li figure img{
	object-fit: cover;
	object-position: top;
  width: 100%;
  height: 100%;
}
	@media screen and (max-width: 1304px) {
		#Contents .flex_container ul#case_box li figure{
			height:185px;
		}
	}
	@media screen and (min-width: 995px) {
		article h2 {
		  font-size:2.8125rem;
		}
		article .lead,
		#case .lead,
		#case2 .lead{
		  font-size:1.25rem;
		}
	}
	@media screen and (max-width: 994px) {
		article h2 {
		  font-size:2.25rem;
		}
		article .lead,
		#case .lead,
		#case2 .lead{
		  font-size:1.375rem;
		}
		#Contents .flex_container ul#case_box li figure{
			height:155px;
		}
	}
	@media screen and (max-width: 767px) {
		article{
			padding:2rem 0;
		}
		article h2 {
		  font-size:1.875rem;
		}
		article h2 span{
			font-size:1.5rem;
		}
		article .lead,
		#case .lead,
		#case2 .lead{
		  font-size:1.25rem;
			text-align:left;
		}
		#Contents .flex_container ul#case_box li figure img{
			max-height:inherit;
		}
	}
	@media screen and (max-width: 399px) {
		article h2 {
		  font-size:1.625rem;
		}
		article .lead,
		#case .lead,
		#case2 .lead{
		  font-size:1.125rem;
		}
	}



/* flow
=========================================================================================== */
/*section#usage{
	padding:7rem 0 0;
}*/
#usage{
	background: var(--color-pgray2);
	padding: 3.5rem 0;
}
#usage .container{
  position: relative;
	background: var(--color-pwhite);
	border-radius:6px;
	display:flex;
	flex-direction:column;
}
#usage .container > *{
	padding:1rem 1.5rem;
	margin:inherit;
}
#usage .wrapper{
	margin-bottom:6rem;
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
	gap:2rem;
}
#usage .container h3{
	font-size:1.625rem;
	padding-bottom:0;
}
#usage .container .period{
	padding:0.25rem;
	border:1px solid var(--color-pred2);
	color:var(--color-pred2);
	border-radius:var(--unit);
	font-size:1.25rem;
	font-weight:bold;
	text-align:center;
	margin:auto 1em 1em 1em;
  bottom:0;
}
#usage .container .period span{
	font-size:1.5rem;
	margin:0 0.2rem;
}
#usage .container:nth-child(-n+3):after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 13px 0;
  border-color: var(--color-pblack) transparent transparent;
}
#usage #customer {
	background: var(--color-pblack);
	color: var(--color-pwhite);
	font-weight:bold;
	text-align:center;
  position: absolute;
  width: calc(300% + 3rem);
	padding:0.5rem;
}
@media screen and (min-width: 995px) {
	#usage .container{
		width: calc((100% - 6rem) / 4);
		padding:0;
	}
	#usage .container:nth-child(-n+3):after {
		transform: rotate(270deg);
	  top: 45%;
		right: -30px;
	}
	#usage #customer {
	  bottom: -4rem;
	}
}
@media screen and (max-width: 994px) {
	#usage .container{
		padding:0;
	}
	#usage .container .wrapper{
		margin-bottom:2rem;
	}
	#usage .container:nth-child(1){
		width:100%;
	}
	#usage .container:nth-child(n+2){
		width:83%;
	}
	#usage .container:nth-child(-n+3):after {
	  bottom: -1.7rem;
		left:45%;
	}
	#usage #customer{
    right: -20%;
    width: 15%;
    height: calc(300% + 1.8rem);
		writing-mode: vertical-rl;
		display: flex;
    justify-content: center;
    align-items: center;
	}
}
@media screen and (min-width: 995px) {
	#usage .container{
		width: calc((100% - 6rem) / 4);
		padding:0;
	}
	#usage .container:nth-child(-n+3):after {
		transform: rotate(270deg);
	  top: 45%;
		right: -30px;
	}
	#usage #customer {
	  bottom: -4rem;
	}
}
@media screen and (max-width: 994px) {
	#usage .container{
		padding:0;
	}
	#usage .wrapper{
		margin-bottom:2rem;
	}
	#usage .container:nth-child(1){
		width:100%;
	}
	#usage .container:nth-child(n+2){
		width:83%;
	}
	#usage .container:nth-child(-n+3):after {
	  bottom: -1.7rem;
		left:45%;
		transform: translateX(10px);
		top: 105%;
	}
	#usage #customer{
    right: -20%;
    width: 15%;
    height: calc(300% + 1.8rem);
		writing-mode: vertical-rl;
		display: flex;
    justify-content: center;
    align-items: center;
	}
	#usage #customer {
	  bottom: auto;
	}
}



/* plan
=========================================================================================== */
#plan{
	background: var(--color-pgray1);
	padding: 3.5rem 0 0;
}
#plan h3, #plan p{
	text-align: center;
}
#plan .container{
	text-align:center;
	border-radius:6px;
}
#plan .container .container{
	border-radius:6px;
	margin:auto;
}
#plan #p01{
	background-color:var(--color-pwhite);
	max-width:815px;
	position:relative;
	font-weight:bold;
}
#plan #p01 h3{
	color:inherit;
}
#plan #p01:after{
  content: "＋";
	font-weight:bold;
  position: absolute;
	color:var(--color-pred2);
  bottom: -3rem;
}
#plan #p02{
	background-color:var(--color-pwhite);
	max-width:500px;
	margin:5rem auto 1rem;
	text-align: center;
}
#plan #p02 p{
	font-size: 1.125rem;
}

@media screen and (min-width: 768px) {
  #plan .container {
    padding: 3rem;
  }
	#plan h3{
    font-size: 1.75rem;
	}
	#plan #p01:after{
	  font-size:4rem;
	  text-indent:-2rem;
	}
	#plan #p01 h3{
		font-size:2rem;
	}
	#plan #p01 p{
		font-size:1.375rem;
	}
	#plan .lead{
		font-size:1.625rem;
		margin:2rem;
	}
}
@media screen and (max-width: 767px) {
	#plan .container {
    padding: 1.5rem;
  }
	#plan #p01:after{
	  font-size:3rem;
	  text-indent:-1.5rem;
	}
	#plan #p01 h3 ,#plan #p02 h3{
		margin-bottom: 0;
	}
	#plan #p01 h3{
		font-size:1.25rem;
	}
	#plan .lead{
		font-size:1.25rem;
		margin:1rem;
	}
	#plan [class^="button"] a {
    font-size: 1.25rem;
    padding: 1rem 0.5rem;
  }
}



/* system
=========================================================================================== */
#system{
	padding: 3rem 0;
}



/* faq
=========================================================================================== */
#faq{
	padding: 2rem 0;
}
#faq.fullWide:after{
	background-color:var(--color-pgray);
}
#faq .q_num{
	border-radius: 14px;
  background-color: #fff;
  padding: 2rem;
	margin-bottom:1.5rem;
}
#faq li.q{
	background:url(/solution/feature/hagukumi/images/num_q.svg) no-repeat;
	font-weight:bold;
	color:var(--color-pred2);
	margin-bottom:1rem;
}
#faq li.a{
	background:url(/solution/feature/hagukumi/images/num_a.svg) no-repeat;
}
	@media screen and (min-width: 768px) {
		#faq .q_num{
			font-size:1.25rem;
		}
		#faq .q_num .q,
		#faq .q_num .a{
			padding-left:4rem;
			background-size:2.5rem;
		}
	}
	@media screen and (max-width: 767px) {
		#faq .q_num{
			padding:0;
		}
		#faq .q_num .q,
		#faq .q_num .a{
			padding-left:2.5rem;
			background-size:2rem;
		}
	}



/* related
=========================================================================================== */
#related .wrapper {
	display: flex;
	gap: calc(var(--gap) * 2);
	margin-bottom: 20px;
}
#related h3{
	padding-bottom:inherit;
}
	@media screen and (max-width: 767px) {
		#related .wrapper {
			flex-direction:column;
			gap:var(--gap);
			flex-direction: column-reverse;
		}
	}


/* news
=========================================================================================== */
#news .DateListStyle2 {
	overflow: hidden;
	font-size: 100%;
}
#news .DateListStyle2 dt,
#news .DateListStyle2 dd {
	padding: 20px 0;
	position: relative;
}
#news .DateListStyle2 .LinkListStyle1 {
	margin: 0;
}
#news .DateListStyle2 .LinkListStyle1 li {
	display: flex;
	gap:calc(var(--gap) / 2);
}
#news .DateListStyle2 .NewsLabel {
	display:inline-block;
	max-width: 12em;
	background: var(--color-pgray1);
	padding:0.5em;
	text-align:center;
}
	@media screen and (min-width: 768px) {
		#news .DateListStyle2 .NewsLabel {
			flex: 0 0 175px; 
			height: 2.5em;
		}
	}
	@media screen and (max-width: 767px) {
		#news .DateListStyle2 .LinkListStyle1 li {
			flex-direction:column;
		}
	}
	@media screen and (min-width: 576px) {
		#news .DateListStyle2 dt {
			padding-bottom: 0;
		}
	}
	@media screen and (max-width: 575px) {
		#news .DateListStyle2 {
			padding-top: 20px;
		}
		#news .DateListStyle2 dt {
			padding: 0;
		}
		#news .DateListStyle2 dd {
			padding: 10px 0;
		}
		#news .DateListStyle2 .LinkListStyle1 li {
			padding-top: 0;
		}
		#news .DateListStyle2 .NewsLabel {
			top: -33px;
			left: 120px;
			font-size: 80%;
			width: 150px;
		}
	}
	@media screen and (max-width: 399px) {
		#news  .DateListStyle2 {
			padding-top: 0;
		}
		#news  .DateListStyle2 .NewsLabel {
			font-size: 87%;
			top: 0;
			left: 0;
			width: 150px;
		}
		#news  .DateListStyle2 .LinkListStyle1 li {
			padding: 25px 0 0;
			font-size: 90%;
		}
		#news  .DateListStyle2 dd {
			padding: 5px 0;
		}
	}



/* download
=========================================================================================== */
#download .wrapper{
	display:flex;
	gap:var(--gap);
	margin-top:var(--gap);
}
#download h3{
	font-size:1.625rem;
	text-align:center;
}
#download1,#download2,#download3{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	position:relative;
	padding:2em;
	background:var(--color-pgray1);
	border:3px solid var(--color-pgray4);
}
#download1{
	border:3px solid var(--color-pred2);
	width:40%;
}
#download2,#download3{
	width:30%;
}
#download1 h3{
	color:var(--color-pred2);
}
#download1::after,
#download2::after {
  content: "+";
  position: absolute;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-pgray4);
  color: #fff;
  font-size:2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
	@media screen and (min-width: 995px) {
		#download1::after,
		#download2::after {
		  right:-75px;
		  top: 50%;
		}
	}
	@media screen and (max-width: 994px) {
		#download .wrapper{
			flex-direction:column;
		}
		#download1,#download2,#download3{
			width:100%;
		}
		#download1::after,
		#download2::after {
		  bottom:-75px;
		  left: 50%;
		}
	}
	@media screen and (max-width: 767px) {
		#download h3{
			font-size:1.25rem;
		}
	}



/* cta
=========================================================================================== */
.cta{
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:cover;
	background-image:url(/image/hsc2/solution/background/bg3.jpg);
}
.cta .container{
	max-width:1275px;
	margin:auto;
	background:var(--color-pwhite);
	padding:calc(var(--unit) * 6);
	border-radius: var(--unit);
}
.cta [class*="InnerLink"] a{
	font-size:1.25rem;
	min-width:335px;
	padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
}
.cta [class*="InnerLink"] a::after{
	width:1.25rem;
	height:1.25rem;
	background-size:1.25rem;
}
.cta ul[class*="InnerLink"],
main ul.CenterAdjust[class*="InnerLink"]{
	justify-content:center;
	gap:var(--gap);
}
.cta .tx__highlight{
	margin-bottom:var(--gap);
}
	@media screen and (max-width: 994px) {
/*
		.cta{
			left:-15px;
			position:relative;
			width:calc(100% + 30px);
		}
*/
		.cta .container{
			padding:calc(var(--unit) * 3);
		}
	}
	@media screen and (max-width: 767px) {
		.cta h2{
			font-size:1.375rem;
		}
	}
	@media screen and (max-width: 579px) {
		.cta{
			padding:calc(var(--unit) * 1.5);
		}
	}
	@media screen and (max-width: 399px) {
		.cta{
			background-size:150%;
		}
	}