@charset "UTF-8";
:root {
  --color-pred1:#fa000f;
  --color-pred2:#cc0000;
  --color-pwhite:#ffffff;
  --color-pgray1:#f4f4f4;
  --color-pgray2:#d9d9d9;
  --color-pgray3:#b3b3b3;
  --color-pgray4:#737373;
  --color-pgray5:#4d4d4d;
  --color-pgray6:#222222;
  --color-pblack:#0c0c0c;
	--unit:8px;
	--gap:25px;
	--ratio:16 / 9;
}
.PageTitleStyle1 ul,
ul#MainInnerLink,
ul#MainInnerLink li{
  margin:inherit;
  padding:inherit;
  line-height:inherit;
}
main{
	padding-bottom:inherit;
}
main li.NewWin a,
main dt.NewWin a,
main [class^="column__"] :is(h2, h3, h4, h5, h6) a{
	background-image:initial !important;
}
.PageTitleStyle1,main{
  font-family: 'Noto Sans JP', Meiryo, 'Osaka', sans-serif;
	color:var(--color-pblack) !important;
}
main *{
	box-sizing:border-box;
}
.JS .pcItem{
	display:block;
}
.JS.Under995 .pcItem{
	display:none;
}
.visualHide {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow: hidden;
	clip:rect(0, 0, 0, 0);
	white-space:nowrap;
	border:0;
}
.border{
	border:1px solid var(--color-pgray2);
}
@media screen and (min-width: 768px) and (max-width: 1024px){
	body {
		min-width:inherit;
	}
}
@media screen and (max-width: 767px) {
	.ImgOnlyStyle,.ModalYouTubeLink{
		width:100%;
	}
	main section{
		padding:calc(var(--unit) * 5) 0;
	}
}



/* ------------------------------------------------------
    title,text
   ------------------------------------------------------ */
h1,h2,h3,h4,h5{
	background:inherit;
	border:inherit;
	font-weight:bold;
}
.PageTitleStyle1 h1 a:hover{
	color:inherit;
}
h2 span,
.ImgOnlyStyle,
.lead strong{
	background:inherit;
	color:inherit;
	font-size:inherit;
	line-height:inherit;
}
h2{
	font-size:2.25rem;
	text-align:center;
	margin-bottom:calc(var(--unit) * 2);
}
h2::after{
	content:"";
	display:block;
	width:100px;
	height:2px;
	margin:0 auto;
	background:linear-gradient(to right, var(--color-pred1) 0 50%,var(--color-pgray2) 50% 100%);
}
h3{
	font-size:1.625rem;
	position:relative;
	color:inherit;
}
[class^="column__"] h3 a::after{
	width:1.625rem;
	height:1.625rem;
	background-size:1.625rem;
}
h3::before{
	position:absolute;
	content:"";
	display:block;
	width:17px;
	height:1px;
	margin:0 auto;
	background:var(--color-pred2);
	left:-1em;
	top:0.5em;
}
h3.CenterAdjust::before,.card h3::before{
	content:none;
}
h3.catchcopy,
.tx__highlight strong{
	color:var(--color-pred1);
}
h3.catchcopy::before,[class^="BoxPattern"] h3::before{
	content:none;
}
.specialH{
	position:relative;
	display:inline-block;
	padding:0 15px;
	margin-bottom:calc(var(--unit) * 3);
}
.specialH::before,
.specialH::after{
	content:"";
	position:absolute;
	width:2rem;
	height:2px;
	background:var(--color-pblack);
	top:inherit;
	bottom:5px;
}
.specialH::before{
	left:-1rem;
	transform:translateY(-50%) rotate(45deg);
}
.specialH::after{
	right:-1rem;
	transform:translateY(-50%) rotate(140deg);
}
.specialH span{
	font-size:0.8em
}
.lead{
	max-width:995px;
	text-align:left;
	font-size:1.125rem;
}
.TextStyle1,
main table th,
main table td{
	font-size:1rem;
}
section:not(.cta) .tx__highlight{
	text-decoration:underline;
	font-weight:bold;
	margin-bottom:var(--gap);
}
h4.tx__highlight:before{
	content:none;
}
main table th{
	width:30%;
}
h4{
	position:relative;
}
h4::before{
	position:absolute;
	content:"";
	display:block;
	width:10px;
	height:10px;
	border-radius:100px;
	margin:0 auto;
	background:var(--color-pred2);
	left:-1em;
	top:0.5em;
}
.notis,.AdditionalNotesStyle1{
	font-size:0.875rem;
}
[class^="BoxPattern"] :is(h2, h3, h4, h5, h6, h3::before, h4::before),
main h3.column-title::before{
	content:none;
	margin:inherit;
	font-size:inherit;
}
	@media screen and (min-width: 995px) {
		h1,h3,h4,h5{
			margin-bottom:calc(var(--unit) * 2);
		}
		h2{
			margin-bottom:calc(var(--unit) * 4);
		}
		h3{
			margin-top:calc(var(--unit) * 4);
		}
		.card h3,[class^="column__"] h3{
			margin-top:0;
		}
	}
	@media screen and (max-width: 994px) {
		h1,h3,h4,h5{
			margin-bottom:var(--unit);
		}
	}
	@media screen and (min-width: 768px) {
		h4{
			font-size:1.375rem;
		}
		.lead{
			margin:0 auto calc(var(--unit) * 4);
		}
/*
		.container .ImgOnlyStyle{
			margin:calc(var(--unit) * 2.5) calc(var(--unit) * 5);
		}
*/
		h4.tx__highlight{
			font-size:1.375rem;
		}
		.tx__highlight{
			font-size:1.25rem;
		}
		#relatedArea .card > *,
		.column.horizontal > *{
			width:calc((100% - (var(--gap) * 2)) / 3);
		}
	}
	@media screen and (max-width: 767px) {
		h2{
			font-size:1.75rem;
			line-height:1.25;
		}
		h3{
			font-size:1.375rem;
			line-height:1.27;
		}
		h4,#reasonArea dt{
			font-size:1.25rem;
			line-height:1.27;
		}
/*
		h2{
			font-size:1.75rem;
			line-height:1.25;
		}
		h3{
			font-size:1.625rem;
			line-height:1.27;
		}
		h4,#reasonArea dt{
			font-size:1.5rem;
			line-height:1.27;
		}
*/
		.lead{
			margin:0 auto calc(var(--unit) * 2);
		}
		h4.tx__highlight{
			font-size:1.125rem;
		}
		.tx__highlight{
			font-size:1.125rem;
		}
	}



/* ------------------------------------------------------
    link & button
   ------------------------------------------------------ */
button[class*="InnerLink"]{
	cursor:pointer;
}
button[class*="InnerLink"],
[class*="InnerLink"] a,
#MainInnerLink a,
main a{
	position:relative;
}
ul[class*="InnerLink"]{
	display:flex;
	gap:var(--unit);
	flex-wrap:wrap;
}
button[class*="InnerLink"],
[class*="InnerLink"] a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:13rem;
	border-radius:100px;
	border:2px solid var(--color-pred2);
	padding:calc(var(--unit) * 0.5) calc(var(--unit) * 3);
	font-weight:bold;
	text-decoration:none;
	text-align:center;
}
main a::after,
.PageTitleStyle1 a::after,
.card h3::after,
.card.include--legacy a strong::after{
	background-image:url(/image/hsc2/solution/icon/icon_arrow_r.svg);
}
main a[target*="_blank"][href^="https"]::after,
.PageTitleStyle1 .InnerLink2 a[target*="_blank"][href^="https"]::after,
.card a[target*="_blank"][href^="https"] h3::after,
.card.include--legacy a[target*="_blank"][href^="https"] strong::after{
	background-image:url(/image/hsc2/solution/icon/icon_newwin_r.svg);
}
.PageTitleStyle1 .InnerLink2 a[href^="#"]::after{
	transform: translateY(-50%) rotate(90deg);
	transform-origin: center center;
	top:50%;
}
main a[href*="youtube"]::after{
	background-image:url(/image/hsc2/solution/icon/icon_movie_r.svg);
}
main .InnerLink1 a[target*="_blank"]::after,
.PageTitleStyle1 .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,
button.InnerLink1,
.PageTitleStyle1 .InnerLink1 a::after{
	background-image:url(/image/hsc2/solution/icon/icon_arrow_w.svg);
}
main .InnerLink2 a:hover::after,
button.InnerLink2 a:hover::after,
.PageTitleStyle1 .InnerLink2 a:hover::after{
	background-image:url(/image/hsc2/solution/icon/icon_arrow.svg);
}
.PageTitleStyle1 .InnerLink2 a[target*="_blank"][href^="https"]:hover::after,
main .InnerLink2 a[target*="_blank"]:hover::after{
	background-image:url(/image/hsc2/solution/icon/icon_newwin.svg);
}
#MainInnerLink a,
main a,
main a:visited,
main h3 a:link,
main h3 a:visited{
	color:var(--color-pred2);
}
main .card a{
	text-decoration:none;
	color:var(--color-pblack);
}
.InnerLink1 a,
.InnerLink1 a:visited,
button.InnerLink1{
	background-color:var(--color-pred2);
	color:var(--color-pwhite);
}
.InnerLink2 a,
button.InnerLink2{
	color:var(--color-pred2);
	background-color:var(--color-pwhite);
}
.InnerLink1 a:hover,
button.InnerLink1:hover{
	border:2px solid var(--color-pblack);
	background-color:var(--color-pblack);
}
.InnerLink2 a:hover,
button.InnerLink2:hover{
	border:2px solid var(--color-pblack);
	color:var(--color-pblack);
}
.card h3,
.card.include--legacy a strong{
	display:inline-block;
}
main a:not(.ImgOnlyStyle .ModalYouTubeLink)::after,
[class*="InnerLink"] a::after,
.card h3::after,
.card.include--legacy a strong::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;
}
[class*="InnerLink"] a::after{
	position:absolute;
	margin-left:0.5em;
}
main .ImgOnlyStyle a.ModalYouTubeLink::after{
	background:var(--color-pred1);
}
main .ImgOnlyStyle a.ModalYouTubeLink:hover::after{
	background:var(--color-pred2);
}
main h1 #body a::after,
.card a::after,
#RelatedKeywords dd a::after{
	content:none !important;
}
.PageTitleStyle1 [class*="InnerLink"] a{
	padding:calc(var(--unit) * 0.5) calc(var(--unit) * 4) calc(var(--unit) * 0.5) calc(var(--unit) * 2);
}
.PageTitleStyle1 a::after{
  right:var(--unit);
}
	@media screen and (max-width: 579px) {
		ul[class*="InnerLink"]{
			justify-content:center;
		}
	}
	@media screen and (max-width: 399px) {
		.PageTitleStyle1{
			background-size:300%;
			background-position:center center;
		}
	}

/* ------------------------------------------------------
    card / ※Box全体リンク
   ------------------------------------------------------ */
.card .lead{
	font-weight:bold;
  margin-bottom:var(--unit);
}
.card h3{
	font-size:1.375rem;
	color:var(--color-pred2);
	align-items:center;
	line-height:1.4;
	display:block;
}
.card[class*="--modern"] h3:before{
	content:none;
}
.card[class*="--modern"] a:hover h3 {
	text-decoration:underline;
}

/* ------------------------------------------------------
    branding
   ------------------------------------------------------ */
.PageTitleStyle1{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	background-image:url(/image/hsc2/solution/background/bg.jpg);
	margin:0;
}
#titleInner{
  max-width:1275px;
	margin:0 auto;
	display:flex;
	gap:var(--gap);
	justify-content:center;
	overflow:hidden;
}
.PageTitleStyle1 .pic{
	max-width:637px;
	width:40%;
  position:relative;
	overflow:hidden;
}
.PageTitleStyle1 .pic img{
  position:relative;
  left:50%;
  right:50%;
  transform:translate(-50%, 0);
}
.PageTitleStyle1 [class*="InnerLink"]{
	font-size:0.875rem;
}
.PageTitleStyle1 [class*="InnerLink"] li a{
	white-space:nowrap;
}
.PageTitleStyle1 ul[class*="InnerLink"]+ ul[class*="InnerLink"]{
	margin-top:var(--unit);
}
.PageTitleStyle1 h1{
	color:inherit !important;
	line-height:1.2;
}
.PageTitleStyle1 h1 span{
	display:inline-block;
	line-height:1.4;
	/*margin-bottom:var(--unit);*/
}
	@media screen and (max-width: 1304px) {
		#titleInner{
			margin-left:calc(var(--unit) * 2);
		}
	}
	@media screen and (min-width: 995px) {
		.PageTitleStyle1 .txt{
			width:60%;
		}
	}
	@media screen and (max-width: 994px) {
		#titleInner{
			margin:auto calc(var(--unit) * 2);
		}
		.PageTitleStyle1 .pic{
			display:none;
		}
	}
	@media screen and (min-width: 768px) {
		.PageTitleStyle1 h1{
			font-size:2.75rem;
		}
		.PageTitleStyle1 h1 span{
			font-size:1.5rem;
		}
		#titleInner{
			height:366px;
			align-items:center;
		}
		#titleInner.short{
			height:265px;
			justify-content: start;
		}
	}
	@media screen and (max-width: 767px) {
		.JS .PageTitleStyle1 h1{
			font-size:2rem;
		}
		.PageTitleStyle1 h1 span{
			font-size:1.25rem;
			margin-bottom:var(--unit);
		}
		#titleInner{
			padding-top:calc(var(--unit) * 3);
			padding-bottom:calc(var(--unit) * 3);
		}
	}



/* ------------------------------------------------------
    floating pagelink
   ------------------------------------------------------ */
#MainInnerLink.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 #MainInnerLink.Fixed {
  top: 60px;
  transition: top 0.5s linear;
}
#MainInnerLink{
	background:var(--color-pgray1);
}
#MainInnerLink li span{
	position:relative;
	display:inline-flex;
}
#MainInnerLink a{
	color:var(--color-pblack);
	text-decoration:none;
	font-size:0.875rem;
	/*margin-right:0.875rem;*/
}
#MainInnerLink a:hover{
	color:var(--color-pred2);
}
#MainInnerLink 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.5em;
}
#MainInnerLink a[target*="_blank"]::after,
.InnerLink2 a[target*="_blank"]::after{
	background:url(/image/hsc2/solution/icon/icon_newwin_r.svg);
}
#MainInnerLink 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:var(--gap);
	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 #MainInnerLink.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;
	  }
		#MainInnerLink 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;
		}
/*
		#mainLinlList li a{
			padding:calc(var(--unit) * 2);
		}
*/
		#mainLinlListCol{
			flex-direction:column;
		}
		#mainLinlListCol li{
			width:100%;
		}
	}
/* ------------------------------------------------------
    contents
   ------------------------------------------------------ */
main .GridSet .GridSet,
.container .container{
	width:inherit;
}
main .bg{
	padding:calc(var(--unit) * 10) 0;
	background:var(--color-pgray1);
}
.ImgOnlyStyle img{
	width:100%;
}
	@media screen and (min-width: 1305px) {
		main .GridSet,
		.container{
			max-width:1275px;
			margin:auto;
		}
	}
	@media screen and (min-width: 995px) and (max-width: 1304px){
		main .GridSet,
		.container{
			margin:0 15px;
		}
	}
	@media screen and (min-width: 995px) {
		main .GridSet .GridSet,
		.container .container{
			width:100%;
			padding:0 calc(var(--unit) * 10);
		}
		.container .container:nth-of-type(n + 2),
		.column__type2 h3:nth-of-type(n + 2),
		.column__type2 h3+.container{
			margin-top:var(--gap);
		}
	}
	@media screen and (max-width: 994px) {
		main .bg{
			left:-15px;
			position:relative;
			width:calc(100% + 30px);
			padding:calc(var(--unit) * 3);
		}
	}
	@media screen and (min-width: 768px) {
		main section{
			padding:calc(var(--unit) * 6.5) 0;
		}
	}
	@media screen and (max-width: 767px) {
		main section{
			padding:calc(var(--unit) * 5) 0;
		}
	}
/* ------------------------------------------------------
    layout / レイアウト
   ------------------------------------------------------ */
.FlexWrap,
[class*="column__"]{
  display: flex;
  width:100%;
}
#reasonArea .FlexWrap{
	gap:var(--gap);
}
.FlexWrap > *,
[class*="column__solve"] dl{
	flex: 1 1 0;
}
main .bg .FlexWrap > *{
	background-color:var(--color-pwhite);
}
[class*="InnerLink"] + .ImgOnlyStyle,
.ImgOnlyStyle + [class*="InnerLink"]{
	margin-top:var(--gap);
}
	@media screen and (min-width: 768px) {
		main #usefulArea .column.horizontal .ImgOnlyStyle{
			margin:initial;
		}
	}
	@media screen and (max-width: 767px) {
		.JS .PageTitleStyle1, .JS .PageTitleStyle2{
			margin:inherit;
		}
		main .FlexWrap, main .horizontal{
			flex-direction:column;
		}
		main .Inner.FlexWrap{
			gap:0;
		}
	}
/* ------------------------------------------------------
    horizontal / カラム横並び
   ------------------------------------------------------ */
.horizontal{
	display:flex;
  gap:var(--gap);
	flex-wrap:wrap;
}
/*
.horizontal > *{
	flex:1;
}
*/
	@media screen and (min-width: 768px) {
		.horizontal > *{
			max-width:calc((100% - (var(--gap) * 2)) / 3);
		}
	}



/* ------------------------------------------------------
    column-solve / 課題と解決用レイアウト
   ------------------------------------------------------ */
.column__solve{
	display:flex;
	flex-direction:column;
	gap:var(--gap);
}
.column__solve.horizontal{
	flex-direction:inherit;
}
.column__solve.horizontal > *{
	flex-direction:column;
}
.column__solve > *{
	display:flex;
	flex:1;
	gap:calc(var(--gap) * 2);
}
.column__solve .FlexWrap > *{
	flex:inherit;
}
.container .column__solve .ImgOnlyStyle img{
	max-width:100%;
}
.column__solve .ImgOnlyStyle img{
	width:auto;
	max-width:100%;
	max-height:220px;
}
.column__solve .task,
.column__solve .solve{
	position:relative;
	background:var(--color-pgray1);
	padding:calc(var(--unit) * 3);
}
.column__solve .task .TextArea,
.column__solve .solve .TextArea{
	text-align:start;
}
.column__solve dt{
	position:relative;
	padding:var(--unit);
	display:inline-block;
	font-weight:bold;
	color:var(--color-pwhite);
}
.column__solve .task dt{
	background:var(--color-pgray5);
}
.column__solve .solve dt{
	background:var(--color-pred2);
}
.column__solve .solve:before{
	content:"";
	position:absolute;
}
.column__solve .contentArea.FlexWrap .ImgOnlyStyle img{
	width:200px;
	height:auto;
	max-height:inherit;
}
	@media screen and (min-width: 995px) {
		.column__solve .solve:before{
			left:calc(-4 * var(--unit));
			top:45%;
		  border-top:13px solid transparent;
		  border-right:0;
		  border-bottom:13px solid transparent;
		  border-left:15px solid var(--color-pred1);
		}
		.column__solve.horizontal .solve:before{
			top:calc(-4 * var(--unit));
			left:45%;
		  border-top:15px solid var(--color-pred1);
		  border-right:13px solid transparent;
		  border-bottom:0;
		  border-left:13px solid transparent;
		}
		.column__solve .task,
		.column__solve .solve{
			flex:1;
		}
		.column__solve.horizontal .task,
		.column__solve.horizontal .solve{
			flex:auto;
		}
		.column__solve .task,
		.column__solve .solve{
			text-align:start;
		}
		.column__solve dt{
			left:calc(-3 * var(--unit));
			border-radius:0 4px 4px 0;
		}
	}
	@media screen and (max-width: 994px) {
		.column__solve,
		.column__solve.horizontal,
		.column__solve > *{
			flex-direction:column;
			width:100%;
			max-width:600px;
			margin:auto;
			gap:calc(var(--gap) * 2);
		}
		.column__solve .solve:before{
			top:-1.5em;
			transform: translate(-50%, -50%);
			left:50%;
		  border-top:15px solid var(--color-pred1);
		  border-right:13px solid transparent;
		  border-bottom:0;
		  border-left:13px solid transparent;
		}
		.column__solve .contentArea.FlexWrap{
			flex:1;
		}
		.column__solve dt{
			top:calc(-3 * var(--unit));
			border-radius:0 0 4px 4px;
		}
	}
	@media screen and (min-width: 768px) {
		.container .column__solve.horizontal .ImgOnlyStyle{
			margin:calc(var(--unit) * 2.5) 0;
		}
	}


/* ------------------------------------------------------
    column-layout-type1 / レイアウト用カラム①　事例など
   ------------------------------------------------------ */
.column__type1{
	gap:var(--gap);
}
.column__type1 .ImgOnlyStyle{
	aspect-ratio:var(--ratio);
	flex-shrink:0;
	overflow:hidden;
	position: relative;
}
.column__type1 .ImgOnlyStyle.h100{
	height:230px;
	flex-shrink:0;
	overflow:hidden;
	position: relative;
}
.column__type1 .ImgOnlyStyle.h100 img{
	height:100%;
	width:auto;
	object-fit: cover;
}
.column__type1 :is(h2, h3, h4, h5, h6)::before{
 content:none;
}
.column__type1 :is(h2, h3, h4, h5, h6){
	margin-bottom:var(--unit);
}
.column__type1:last-of-type{
	margin-bottom:var(--gap);
}
	@media screen and (min-width: 995px) {
		.column__type1:not(:first-child){
			margin-top:calc(var(--unit) * 5);
		}
	}
	@media screen and (max-width: 994px) {
		.column__type1:not(:first-child){
			margin-top:calc(var(--unit) * 2.5);
		}
		.column__type1 .ImgOnlyStyle,
		.column__type1 .ImgOnlyStyle.h100{
			width:40%;
			height:auto;
		}
		.column__type1 .ImgOnlyStyle.h100 img{
			height:auto;
		}
	}
	@media screen and (min-width: 768px) {
		.column__type1 .ImgOnlyStyle{
			width:408px;
		}
	}
	@media screen and (max-width: 767px) {
		main .column__type1{
			flex-direction:column;
			gap:0;
		}
		.column__type1 .ImgOnlyStyle,
		.column__type1 .ImgOnlyStyle.h100,
		.column__type1 .ImgOnlyStyle.h100 img{
			width:100%;
			height:auto;
		}
	}


/* ------------------------------------------------------
    column-layout-type2 / レイアウト用カラム②　特長など
   ------------------------------------------------------ */
.column__type2{
	display:flex;
	flex:1;
	flex-direction:column;
	padding:calc(var(--unit) * 5) calc(var(--unit) * 10);
	background:var(--color-pgray1);
	position:relative;
}
.column__type2::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:0;
	border-top:20px solid var(--color-pred2);
	border-right:20px solid transparent;
}
.column__type2 .list li{
	font-size:1.25rem;
	background:var(--color-pwhite);
	padding:calc(var(--unit) * 2);
	margin:var(--unit);
}
.column__type2 .list li strong{
	color:var(--color-pred1);
}
.column__type2:not(:first-child){
	margin-top:calc(var(--unit) * 5);
}
	@media screen and (min-width: 995px) and (max-width: 1304px){
		.column__type2 .container{
			margin:inherit;
		}
	}
	@media screen and (min-width: 995px) {
		.column__type2 .container{
			padding: 0 calc(var(--unit) * 4);
		}
	}
	@media screen and (max-width: 994px) {
		.column__type2 .container{
			padding: 0 0 0 calc(var(--unit) * 3);
		}
	}
	@media screen and (max-width: 767px) {
		.column__type2{
			padding:calc(var(--unit) * 4) calc(var(--unit) * 2) calc(var(--unit) * 2) calc(var(--unit) * 4);
		}
		.column__type2 .list{
			padding:0;
			margin:0;
		}
		.column__type2 .list li{
			font-size:1.125rem;
		}
	}
/* ------------------------------------------------------
    column-layout-type3 / レイアウト用カラム③ Q&Aなど
   ------------------------------------------------------ */
.column__type3{
	display:flex;
	flex:1;
	flex-direction:column;
	gap:var(--gap);
	border:1px solid var(--color-pgray2);
	border-left:10px solid var(--color-pgray2);
	padding:calc(var(--unit) * 4);
}
.container .column__type3:last-of-type{
	margin-bottom:var(--gap);
}
.column__type3:not(:first-child){
	margin-top:calc(var(--unit) * 2.5);
}
	@media screen and (max-width: 767px) {
		.column__type3{
			padding:calc(var(--unit) * 3);
		}
	}
/* ------------------------------------------------------
    column-layout-type4 / レイアウト用カラム④ お役立ち情報など
   ------------------------------------------------------ */
.column__type4{
	flex-direction: column;
}
main .column__type4 a:not(.ImgOnlyStyle .ModalYouTubeLink)::after{
	content:none;
}
.column__type4 .column_inner:not(:first-child){
	margin-top:calc(var(--unit) * 2.5);
}
.column__type4 .column_inner{
	display:flex;
	gap:var(--gap);
	border:1px solid var(--color-pgray2);
}
.column__type4 .ImgOnlyStyle{
	overflow:hidden;
	margin:0;
}
.column__type4 .ImgOnlyStyle img{
	width:100%;
	height:100%;
	object-fit:cover;
	margin:0;
}
.column__type4 .column_inner .column_detail{
	margin:calc(var(--unit) * 2);
	margin-left:0;
}
.column__type4 .column_inner .column_detail dt a:after{
	background-size:1.25rem;
}
.column__type4 .column_inner .column_detail dt,
.column__type4 .column_inner .column_detail .column-title{
	font-size:1.25rem;
}
.column__type4 .column_detail p{
	font-size:0.875rem;
}
.column__type4 .column_inner .column_detail strong{
	position: relative;
	color:inherit;
}
.column__type4 .column_inner .column_detail a{
	color:var(--color-pred2);
}
	@media screen and (min-width: 768px) {
		.column__type4 .ImgOnlyStyle{
			max-width:355px;
			width:100%;
		}
	}
	@media screen and (max-width: 767px) {
		.column__type4 .column_inner{
			flex-direction:column;
			gap:0;
		}
		.column__type4 .column_inner .column_detail{
	    margin:var(--unit) calc(var(--unit) * 2);
		}
	}

/* ------------------------------------------------------
    column-layout-type5 / レイアウト用カラム⑤
   ------------------------------------------------------ */
.column__type5{
	display:flex;
	position:relative;
	flex-direction:column;
	width:calc(100% / 3);
	border:1px solid var(--color-pgray2);
	padding:calc(var(--unit) * 3) calc(var(--unit) * 3) calc(var(--unit) * 8);
}



/* ------------------------------------------------------
    #overviewArea / とは
   ------------------------------------------------------ */
#overviewArea/* :is(h2, h3, h4, h5, h6)*/ {
	text-align:center;
}



/* ------------------------------------------------------
    #reasonArea / 強み、選ばれる理由
   ------------------------------------------------------ */
#reasonArea dl{
	padding:calc(var(--unit) * 4);
	border-radius:var(--unit);
}
#reasonArea dt{
	font-weight:bold;
	text-align:center;
	line-height:1.4;
}
#reasonArea .ImgOnlyStyle img{
	width:auto;
	max-width:100%;
	max-height:220px;
}
	@media screen and (min-width: 768px) {
		#reasonArea dl{
			width:calc((100% - (var(--gap) * 2)) / 3);
		}
		#reasonArea dt{
			font-size:1.375rem;
		}
	}



/* ------------------------------------------------------
    contents-featureTopics & featureArea / 特長ダイジェスト
   ------------------------------------------------------ */
.featureTopics{
	font-size:1.25rem;
	font-weight:bold;
  margin-bottom: var(--gap);
}
.featureTopics .column__type2 {
  padding:calc(var(--unit) * 5);
  background:var(--color-pgray1);
  position:relative;
	justify-content:center;
	flex:1;
}
.featureTopics.horizontal .column__type2 {
	margin-top:0;
}



/* ------------------------------------------------------
    #faqArea / よくあるご質問
   ------------------------------------------------------ */
#faqArea dt,#faqArea dd{
	padding-left:calc(var(--unit) * 10);
	text-indent:-2rem;
}
#faqArea dt::before,#faqArea dd::before{
  margin-right:1rem;
}
#faqArea dt{
	font-size:1.125rem;
	font-weight:bold;
}
#faqArea dt::before{
	content:"Q.";
}
#faqArea dd::before{
	content:"A.";
	font-size:1.125rem;
	font-weight:bold;
}
	@media screen and (max-width: 767px) {
		#faqArea dt,#faqArea dd{
			padding-left:calc(var(--unit) * 3);
		}
	}



/* ------------------------------------------------------
    #caseArea / 導入事例
   ------------------------------------------------------ */
#caseArea .FlexWrap{
	flex-direction:column;
	max-width:1275px;
}
#caseArea .FlexWrap a{
	padding-left:408px;
	min-height:230px;
	background-repeat:no-repeat;
	background-size:408px auto;
	display:block;
	text-decoration:none;
	color:inherit;
}
#caseArea .FlexWrap dl{
	margin-left:var(--gap);
}
#caseArea .FlexWrap dt{
	font-size: 1.625rem;
	font-weight:bold;
	color:var(--color-pred2);
}
#caseArea .FlexWrap dd{
	font-size:1.125rem;
	font-weight:bold;
}
#caseArea .lead{
	font-weight:bold;
  margin-bottom:var(--unit);
}
#caseArea .card dl{
	font-size:1rem;
	display: grid;
	grid-template-columns: max-content 1fr;
	row-gap:0.5em;
	column-gap:0.5em;
}
#caseArea .card dl > div{
	display:flex;
}
#caseArea .card dl dt{
	white-space:nowrap;
}
#caseArea .card{
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}
#caseArea .card a{
	width:100%;
	display:flex;
	border:1px solid var(--color-pgray2);
}
#caseArea .card.horizontal a{
	flex-direction:column;
}
#caseArea .card .ImgOnlyStyle{
	overflow:hidden;
	margin:0;
}
#caseArea .card .ImgOnlyStyle img{
	width:100%;
	height:100%;
	object-fit:cover;
	margin:0;
}
	@media screen and (min-width: 768px) {
		#caseArea .card .ImgOnlyStyle img{
			max-width: 380px;
		}
		#caseArea .card .column_detail{
		  margin: calc(var(--unit) * 2);
		}
	}
	@media screen and (max-width: 767px) {
		#caseArea .card a{
			display:block;
		}
		#caseArea .card h3{
			margin-top:var(--unit);
		}
		#caseArea .card .column_detail{
		  margin: calc(var(--unit) * 2);
		  margin-top: 0;
		}
	}

/* ------------------------------------------------------
    #seminor--include / セミナー・展示会
   ------------------------------------------------------ */
#seminar{
	margin-bottom:inherit;
}
#seminar table.DataTableStyle3 tbody tr:first-child {
	display:none;
}
#seminar .DataTableStyle3 tbody{
	gap:var(--gap);
	display:flex;
}
#seminar .DataTableStyle3 tbody tr{
	display:flex;
	position:relative;
	flex-direction:column;
	width:calc(100% / 3);
	border:1px solid var(--color-pgray2);
	padding:calc(var(--unit) * 3) calc(var(--unit) * 3) calc(var(--unit) * 8);
}
#seminar .DataTableStyle3 tbody tr::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:0;
	border-top:20px solid var(--color-pred2);
	border-right:20px solid transparent;
}
#seminar .DataTableStyle3 tbody td{
	border:0;
	padding:calc(var(--unit) * 0.5) 0;
}
#seminar .DataTableStyle3 tbody tr td:nth-child(2){
	order:-1;
	font-size:1.125rem;
	font-weight:bold;
}
#seminar .DataTableStyle3 tbody tr td:nth-child(1)::before{
	content:"日時：";
}
#seminar .DataTableStyle3 tbody tr td:nth-child(3)::before{
	content:"会場：";
}
#seminar .DataTableStyle3 strong{
	color:inherit;
}
#seminar .DataTableStyle3 .LinkListStyle1 a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--color-pred2);
	font-size: 0.875rem;
	padding: calc(var(--unit) * 0.5) calc(var(--unit) * 2);
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
#seminar .DataTableStyle3 .LinkListStyle1 a::after{
	content:"";
	width:1em;
	height:1em;
	font-weight:normal;
	position:absolute;
	background-position:center center;
	background-size:contain;
	margin-left:0.25em;
	top:initial;
	transform:initial;
}
#seminar .DataTableStyle3 .LinkListStyle1 a:hover strong{
	border:2px solid var(--color-pblack);
	color:var(--color-pblack);
}
#seminar ul.LinkListStyle1 strong{
	position:absolute;
	bottom:calc(var(--unit) * 2);
	border-radius:100px;
	border:2px solid var(--color-pred2);
	padding:calc(var(--unit) * 0.5) calc(var(--unit) * 3) calc(var(--unit) * 0.5) calc(var(--unit) * 2);
	left: calc(50% - 7rem);
	min-width:13rem;
}
#seminar ul.LinkListStyle1 a::after{
	transform: initial;
	top: initial;
	bottom: 1.7rem;
	left: calc(50% + 4rem);
}
#seminar a:hover::after{
	background:url(/image/hsc2/solution/icon/icon_arrow.svg);
}
#seminar a[target*="_blank"]:hover::after{
	background:url(/image/hsc2/solution/icon/icon_newwin.svg);
}
	@media screen and (max-width: 767px) {
		#seminar .DataTableStyle3 tbody{
			flex-direction:column;
		}
		#seminar .DataTableStyle3 tbody tr{
			width:100%;
		}
	}



/* ------------------------------------------------------
    #usefulAreacolumn / コラム・お役立ち情報
   ------------------------------------------------------ */
#usefulArea .posted-on,
#usefulArea .updated-on {
	display:inline-flex;
	margin-right:1em;
}
#usefulArea :is(a:link,a:visited,a:hover){
	background:none;
}
/*
#usefulArea .card > *{
	flex-direction:column;
}*/

#usefulArea .column_inner{
	margin-bottom:calc(var(--unit) * 2.5);
}

#usefulArea .column_inner .column_detail{
	display:flex;
	gap:var(--gap);
	border:1px solid var(--color-pgray2);
}
#usefulArea .ImgOnlyStyle{
	overflow:hidden;
	margin:0;
}
#usefulArea .ImgOnlyStyle img{
	width:100%;
	height:100%;
	object-fit:cover;
	margin:0;
}
#usefulArea [class*="--modern"] .column_inner .column_detail{
	display:flex;
}
#usefulArea [class*="--legacy"] .column_inner .column_detail dl,
#usefulArea [class*="--modern"] .column_inner .column_body{
	margin:calc(var(--unit) * 2);
	margin-left:0;
}
#usefulArea .column_inner .column_detail dt a:after{
	background-size:1.25rem;
}
#usefulArea .column_inner .column_detail dt,
#usefulArea .column_inner .column_detail .column-title{
	font-size:1.25rem;
}
#usefulArea [class*="--legacy"] .column_inner .column_detail dd,
#usefulArea [class*="--modern"] .column_detail p{
	font-size:0.875rem;
}
#usefulArea .column_inner .column_detail strong{
	position: relative;
	color:inherit;
}
#usefulArea .column_inner .column_detail a{
	color:var(--color-pred2);
}
#usefulArea .p-summary__more__inner,
button.c-button{
	width:inherit;
	max-width:inherit;
}
#usefulArea a{
	text-decoration:none;
	color:inherit;
}
#usefulArea button.c-button--primary{
	border-radius:100px;
	color:var(--color-pred2) !important;
	border:2px solid var(--color-pred2);
	padding:var(--unit) calc(var(--unit) * 2);
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	margin:auto;
}
#usefulArea button.c-button--primary:hover{
	border:2px solid var(--color-pblack);
	color:var(--color-pblack) !important;
	background-color:inherit !important;
}
.js-toggleAccordion {
  display: none;
}
	@media screen and (min-width: 768px) {
		#usefulArea .ImgOnlyStyle{
			max-width:355px;
			min-width:355px;
			width:100%;
		}
	}
	@media screen and (max-width: 767px) {
		#usefulArea [class*="--legacy"] .column_inner .column_detail,
		#usefulArea [class*="--modern"] .column_inner .column_detail{
			flex-direction:column;
			gap:0;
		}
		#usefulArea [class*="--legacy"] .column_inner .column_detail dl,
		#usefulArea [class*="--modern"] .column_inner .column_body{
	    margin:var(--unit) calc(var(--unit) * 2);
		}
	}
	@media screen and (max-width: 399px) {
		#usefulArea .posted-on {
			flex-direction:column;
			gap:initial;
			margin-bottom:var(--unit);
		}
	}



/* ------------------------------------------------------
    #downloadArea / ご紹介資料
   ------------------------------------------------------ */
#downloadArea .FlexWrap{
	gap:var(--gap);
}



/* ------------------------------------------------------
    #relatedArea--include / 関連ソリューション
   ------------------------------------------------------ */
#relatedArea .card{
	flex-wrap:wrap;
	display:flex;
	gap:var(--gap);
}
#relatedArea .card > *{
	background:var(--color-pgray1);
	padding:calc(var(--unit) * 3);
	margin:inherit;
	position:relative;
}
#relatedArea .card .sub{
	font-size:1rem;
	font-weight:bold;
}
#relatedArea .card a{
	color:var(--color-pblack);
	text-decoration:none;
}
#relatedArea .card a::after{
	bottom:-0.3em;
}
#relatedArea .card [class^="LinkListStyle"]{
	font-size:inherit;
}
	/* ------------------------------------------------------
	    旧CMS用記述、変更後削除OK
	   ------------------------------------------------------ */
	#solution .LinkListStyle1 dt a{
		background:none;
	}
	#solution dl{
		position:relative;
		display:flex;
		flex-direction:column;
		width:calc(100% / 3);
		background:var(--color-pgray1);
		padding:calc(var(--unit) * 3);
	}
	#solution dt{
		font-size:1.375rem;
	}
	#column2 .column_inner {
	  display: none;
	}
	.more-btn {
	  display: block;
	  margin: 30px auto 0;
	  padding: 10px 20px;
	  cursor: pointer;
	}
	@media screen and (min-width: 768px) {
	}
	@media screen and (max-width: 767px) {
		#solution{
			flex-direction:column;
			gap:var(--unit);
		}
		#relatedArea .card > *{
			width:100%;
		}
	}



/* ------------------------------------------------------
    #RelatedKeywords--include / 関連キーワード
   ------------------------------------------------------ */
#RelatedKeywords{
	background:var(--color-pgray1);
	margin-top:calc(var(--gap) * 2);
}
#RelatedKeywords dt{
	font-size:1.25rem;
	font-weight:bold;
	padding:calc(var(--unit) * 2);
	border-bottom:1px solid var(--color-pgray4);
}
#RelatedKeywords dd{
	padding:var(--unit);
	display:flex;
	gap:var(--unit);
}
#RelatedKeywords dd a{
	padding:var(--unit) calc(var(--unit) * 2);
	margin:var(--unit);
	border:1px solid var(--color-pgray3);
	border-radius:4px;
	color:var(--color-pred2);
	text-decoration:none;
}
#RelatedKeywords a::after{
	content:none !important;
}
#RelatedKeywords dd a:hover{
	background-color:var(--color-pblack);
	color:var(--color-pwhite);
}
@media screen and (max-width: 767px) {
  .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;
  }
}



/* ------------------------------------------------------
    .call to action / 背景付きお問い合わせエリア
   ------------------------------------------------------ */
.cta{
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:cover;
	background-image:url(/image/hsc2/solution/background/bg3.jpg);
}
.cta .container{
	background:var(--color-pwhite);
	padding:calc(var(--unit) * 6);
	border-radius: var(--unit);
}
.cta [class*="InnerLink"] a{
	font-size:1.25rem;
	min-width:300px;
	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%;
		}
	}






























/* コンテンツ内装飾（solution.css からの抜粋）
=========================================================================================== */
div.CaseFlow{
	display:flex;
	gap:60px;
}
div.CaseFlow .CaseFlowChild{
	flex-basis:calc(50% - 30px);
	font-weight:bold;
	position:relative;
	padding:15px 10px 15px;
}
div.CaseFlow .CaseFlowChild:first-child:after{
	content:"";
	display:inline-block;
	border:5px solid rgba(255, 255, 255, 0);
	border-top-color:var(--color-pgray5);
	border-right-color:var(--color-pgray5);
	width:20px;
	height:20px;
	transform:rotate(45deg);
	position:absolute;
	right:-40px;
	top:calc(50% - 21px);
}
div.CaseFlow .CaseFlowChild:first-child + .CaseFlowChild{
	border:3px solid var(--color-pred2);
	box-sizing;border-box;
}
div.CaseFlow .CaseFlowChild:first-child + .CaseFlowChild dt span{
	border-bottom:2px solid var(--color-pred2);
	padding:0 10px;
}
div.CaseFlow .CaseFlowChild dt{
	margin-bottom:20px;
	font-size:120%;
}
.caseAreaInner h4 span{
	margin-right:1em;
}
.caseAreaInner h4 span b{
	font-size:130%;
}
.column__type2 [class^="BoxPattern"]{
	padding:0;
	background:var(--color-pwhite);
}
.column__type2 [class^="BoxPattern"] .Inner{
	padding:calc(var(--unit) * 2);
	margin:inherit;
}
.column__type2 [class^="BoxPattern"] h3{
	font-size:1.375rem;
	background:var(--color-pred2);
}

/* 装飾 */
ul.CircleListStyle {
	list-style:none;
	padding-left:1em;
}
ul.CircleListStyle li::marker {
	content: "・";
}
#caseArea.manualDescribe div.caseFlowDiagram{
	display:flex;
	overflow:hidden;
	margin-bottom:35px;
}
#caseArea.manualDescribe div.caseFlowDiagram dl{
	background:#FFF;
	position:relative;
	padding:10px 20px 10px 40px;
	flex-basis:25%;
}
#caseArea.manualDescribe div.caseFlowDiagram dl:first-child{
	padding-left:15px;
}
#caseArea.manualDescribe div.caseFlowDiagram dl:not(:last-child):after{
	content:"";
	display:block;
	width:14rem;
	height:14rem;
	transform:translateY(-50%) scaleX(0.5) rotate(45deg);
	position:absolute;
	right:-4em;
	top:50%;
	z-index:1;
	border-top:15px solid var(--color-pgray1);
	border-right:15px solid var(--color-pgray1);
}
#caseArea.manualDescribe div.caseFlowDiagram dt{
	font-weight:bold;
	font-size:115%;
	position:relative;
	z-index:2;
	margin-top:var(--unit);
}
#caseArea.manualDescribe div.caseFlowDiagram dt > mark{
	position:relative;
	font-size:1em;
	width:2em;
	height:2em;
	padding:var(--unit);
	color:var(--color-pred2);
	background:none;
	border:3px solid var(--color-pred2);
	border-radius:50%;
	line-height:1;
	left:0;
	display:flex;
	align-items: center;
	justify-content:center;
}
#caseArea.manualDescribe div.caseFlowDiagram dd{
	position:relative;
	z-index:2;
}
@media screen and (max-width:994px){
	.JS #caseArea.manualDescribe div.caseFlowDiagram dl{
		padding-top:10px;
		padding-left:20px;
	}
	.JS #caseArea.manualDescribe div.caseFlowDiagram dl:nth-of-type(n + 2){
		padding-top:40px;
	}
	.JS #caseArea.manualDescribe div.caseFlowDiagram{
		flex-direction:column;
		max-width:400px;
		margin:0 auto 35px;
	}
	.JS #caseArea.manualDescribe div.caseFlowDiagram dl:last-child{ padding-bottom:30px; }
	.JS #caseArea.manualDescribe div.caseFlowDiagram dl:not(:last-child):after{
		transform:scaleX(7) rotate(135deg);
		right:calc(50% - 5em);
		top:auto;
		bottom:-1em;
		width:10em;
		height:10em;
		border-top-width:10px;
		border-right-width:10px;
	}
}
@media screen and (max-width:768px){
	.JS div.CaseFlow{ flex-direction:column; }
	.JS div.CaseFlow .CaseFlowChild:first-child:after{
		top:auto;
		bottom:-40px;
		right:calc(50% - 21px);
		transform:rotate(135deg);
	}
	[class^="BoxPattern"] ul:not(:last-child){
		margin-bottom:inherit;
	}
}