@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;
}
body #Contents{
	padding-bottom:inherit;
}
#Contents li.NewWin a,
#Contents dt.NewWin a,
#Contents [class^="column__"] :is(h2, h3, h4, h5, h6) a{
	background-image:initial !important;
}
.PageTitleStyle1,#Contents{
  font-family: 'Noto Sans JP', Meiryo, 'Osaka', sans-serif;
	color:var(--color-pblack) !important;
}
#Contents *{
	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%;
	}
	#Contents 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;
	/*padding: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;
}
#Contents [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.overviewh3,
.tx__highlight strong{
	color:var(--color-pred1);
}
h3.overviewh3::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,
#Contents table th,
#Contents 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;
}
#Contents 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;
}
#Contents [class^="BoxPattern"] :is(h2, h3, h4, h5, h6, h3::before, h4::before),
#Contents h3.column-title::before{
	content:none;
	margin:inherit;
	font-size:inherit;
}
	@media screen and (min-width: 995px) {
		h1,h2,h3,h4,h5{
			margin-bottom:calc(var(--unit) * 2);
		}
	}
	@media screen and (min-width: 768px) {
		h4{
			font-size:1.375rem;
		}
		.lead{
			margin:0 auto calc(var(--unit) * 4);
		}
		#Contents .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 [class*="card"] > *,
		.column__horizontal > *{
			width:calc((100% - (var(--gap) * 2)) / 3);
		}
	}
	@media screen and (max-width: 767px) {
		h2{
			font-size:1.5rem;
		}
		h3{
			font-size:1.375rem;
		}
		h4,#reasonArea dt{
			font-size:1.25rem;
		}
		.lead{
			margin:0 auto calc(var(--unit) * 2);
		}
		h4.tx__highlight{
			font-size:1.125rem;
		}
		.tx__highlight{
			font-size:1.125rem;
		}
	}

/* ------------------------------------------------------
    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;
}
#titleInner .pic{
	max-width:637px;
	width:40%;
  position:relative;
	overflow:hidden;
}
#titleInner .pic img{
  position:relative;
  left:50%;
  right:50%;
  transform:translate(-50%, 0);
}
#titleInner [class^="InnerLink"]{
	font-size:0.875rem;
}
#titleInner [class^="InnerLink"] li a{
	white-space:nowrap;
}
#titleInner ul[class^="InnerLink"]+ ul[class^="InnerLink"]{
	margin-top:var(--unit);
}
#titleInner h1{
	color:inherit !important;
}
#titleInner h1 span{
	display:block;
}
	@media screen and (max-width: 1304px) {
		#titleInner{
			margin-left:calc(var(--unit) * 2);
		}
	}
	@media screen and (min-width: 995px) {
		#titleInner .txt{
			width:60%;
		}
	}
	@media screen and (max-width: 994px) {
		#titleInner{
			margin:auto calc(var(--unit) * 2);
		}
		#titleInner .pic{
			display:none;
		}
	}
	@media screen and (min-width: 768px) {
		#titleInner h1{
			font-size:2.875rem;
			line-height:2.875rem;
		}
		#titleInner h1 span{
			font-size:1.5rem;
		}
		#titleInner{
			min-height:366px;
			align-items:center;
		}
	}
	@media screen and (max-width: 767px) {
		#titleInner h1{
			font-size:2.25rem;
			line-height:2.25rem;
		}
		#titleInner h1 span{
			font-size:1.25rem;
			line-height:1.25rem;
			margin-bottom:var(--unit);
		}
		#titleInner{
			min-height:300px;
			padding-top:calc(var(--unit) * 3);
			padding-bottom:calc(var(--unit) * 3);
		}
	}



/* ------------------------------------------------------
    link & button
   ------------------------------------------------------ */
ul[class^="InnerLink"]{
	display:flex;
	gap:var(--unit);
	flex-wrap:wrap;
}
[class^="InnerLink"] a{
	border-radius:100px;
	border:2px solid var(--color-pred2);
	padding:calc(var(--unit) * 0.5) calc(var(--unit) * 5) calc(var(--unit) * 0.5) calc(var(--unit) * 2);
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	display:inline-block;
	min-width:13rem;
}
.InnerLink1 a{
	background-color:var(--color-pred2);
	color:var(--color-pwhite);
}
.InnerLink2 a{
	background-color:var(--color-pwhite);
	color:var(--color-pred2);
}
[class^="InnerLink"] a:hover{
	border:2px solid var(--color-pblack);
}
.InnerLink1 a:hover{
	background-color:var(--color-pblack);
}
.InnerLink2 a:hover{
	color:var(--color-pblack);
}
.PageTitleStyle1 a,
#MainInnerLink a,
#Contents a{
	position:relative;
}

#Contents a:not(#Contents .ImgOnlyStyle .ModalYouTubeLink)::after,
/* ▼特定の場所にリンクアイコンを付ける */
.PageTitleStyle1 [class*="InnerLink"] a::after,
#MainInnerLink a::after,
[class*="card"] h3::after{
	content:"";
	width:1em;
	height:1em;
	font-weight:normal;
	position:absolute;
	background-position:center center;
	background-size:contain;
	margin-left:0.25em;
	margin-top: 0.2em;
}
.PageTitleStyle1 [class*="InnerLink"] a::after,
#MainInnerLink a::after{
	top:50%;
	transform: translateY(-50%);
}
#Contents h1 #body a::after,
[class*="card"] a::after,
#RelatedKeywords dd a::after{
	content:none !important;
}
/*
[class*="card"] h3 a::after{
	top:initial;
}
:is([class^="include"],[class^="direct"]) {
	content:none;
}*/

.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);
}
[id^="mainLinlList"]{
	max-width:1275px;
	min-height:50px;
	margin:auto;
	display:flex;
	gap:var(--gap);
	align-items:center;
	flex-wrap:wrap;
}
.PageTitleStyle1 .InnerLink2 a::after,
#Contents a:not(.ImgOnlyStyle .ModalYouTubeLink)::after,
[class*="card"] h3::after{
	background:url(/image/hsc2/solution/icon/icon_arrow_r.svg);
}
.PageTitleStyle1 .InnerLink2 a[target*="_blank"]::after,
#Contents a[target*="_blank"]:not(.ImgOnlyStyle .ModalYouTubeLink)::after,
[class*="card"] a[target*="_blank"] h3::after{
	background:url(/image/hsc2/solution/icon/icon_newwin_r.svg);
}
.PageTitleStyle1 .InnerLink1 a[href*="youtube"]::after,
#Contents a[href*="youtube"]:not(.ImgOnlyStyle .ModalYouTubeLink)::after{
	background:url(/image/hsc2/solution/icon/icon_movie_r.svg);
}
.PageTitleStyle1 .InnerLink1 a::after,
#Contents .InnerLink1 a::after{
	background:url(/image/hsc2/solution/icon/icon_arrow_w.svg);
}
.PageTitleStyle1 .InnerLink1 a[target*="_blank"]::after,
#Contents :is(.InnerLink1,.PageTitleStyle1) a[target*="_blank"]:not(.ImgOnlyStyle .ModalYouTubeLink)::after{
	background:url(/image/hsc2/solution/icon/icon_newwin_w.svg);
}
.PageTitleStyle1 .InnerLink2 a:hover::after,
#Contents .InnerLink2 a:hover::after{
	background:url(/image/hsc2/solution/icon/icon_arrow.svg);
}
.PageTitleStyle1 .InnerLink2 a[target*="_blank"]:hover::after,
#Contents .InnerLink2 a[target*="_blank"]:hover::after{
	background:url(/image/hsc2/solution/icon/icon_newwin.svg);
}
	@media screen and (max-width: 1274px) {
		[id^="mainLinlList"]{
			gap:calc(var(--gap) * 0.5);
		}
	}
	@media screen and (min-width: 768px) {
		[id^="mainLinlList"]{
			justify-content:center;
		}
	}
	@media screen and (max-width: 767px) {
		[id^="mainLinlList"]{
			border-top:1px solid var(--color-pgray2);
			gap:0;
		}
		[id^="mainLinlList"] li{
			width:50%;
			border-bottom:1px solid var(--color-pgray2);
			text-align:center;
			padding:calc(var(--unit) * 2) 0;
		}
		#mainLinlListCol{
			flex-direction:column;
		}
		#mainLinlListCol li{
			width:100%;
		}
	}
	@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;
		}
	}



/* ------------------------------------------------------
    floating pagelink
   ------------------------------------------------------ */
nav#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 nav#MainInnerLink.Fixed {
  top: 60px;
  transition: top 0.5s linear;
}
#MainInnerLink{
	background:var(--color-pgray1);
}
#MainInnerLink a{
	color:var(--color-pblack);
	text-decoration:none;
	font-size:0.875rem;
	margin-right:0.875rem;
}
#MainInnerLink a:hover{
	color:var(--color-pred2);
}
#Contents [class*="__vertical"] a{
	width: 100%;
	color:var(--color-pred2);
}
#MainInnerLink a::after{
	background:url(/image/hsc2/solution/icon/icon_arrow.svg);
	transform: translateY(-50%) rotate(90deg);
	transform-origin: center center;
}
#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);
}
	@media screen and (max-width: 767px) {
    body.header1-show nav#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;
	  }
	}


/* ------------------------------------------------------
    contents
   ------------------------------------------------------ */
#Contents .GridSet .GridSet,
#Contents .container .container{
	width:inherit;
}
#Contents .bg{
	padding:calc(var(--unit) * 10) 0;
	background:var(--color-pgray1);
}
.ImgOnlyStyle img{
	width:100%;
}
	@media screen and (min-width: 1305px) {
		#Contents .GridSet,
		#Contents .container{
			max-width:1275px;
			margin:auto;
		}
	}
	@media screen and (min-width: 995px) and (max-width: 1304px){
		#Contents .GridSet,
		#Contents .container{
			margin:0 15px;
		}
	}
	@media screen and (min-width: 995px) {
		#Contents .GridSet .GridSet,
		#Contents .container .container{
			width:100%;
			padding:0 calc(var(--unit) * 10);
		}
		#Contents .container .container:nth-of-type(n + 2),
		#Contents .column__type2 h3:nth-of-type(n + 2),
		#Contents .column__type2 h3+.container{
			margin-top:var(--gap);
		}
	}
	@media screen and (max-width: 994px) {
		#Contents .bg{
			left:-15px;
			position:relative;
			width:calc(100% + 30px);
			padding:calc(var(--unit) * 3);
		}
	}
	@media screen and (min-width: 768px) {
		#Contents section{
			padding:calc(var(--unit) * 6.5) 0;
		}
	}
	@media screen and (max-width: 767px) {
		#Contents section{
			padding:calc(var(--unit) * 5) 0;
		}
	}


/* ------------------------------------------------------
    contents-layout / コンテンツレイアウト
   ------------------------------------------------------ */
.FlexWrap,
[class^="column__"],
[class^="column__solve"] > *{
  display: flex;
  width:100%;
}
#reasonArea .FlexWrap,
[class^="column__"],
[class^="column__solve"] > *{
	gap:var(--gap);
}
.FlexWrap > *,
/*[class*="__horizontal"] > *,*/
[class*="column__solve"] dl{
	flex: 1 1 0;
}
#Contents .bg .FlexWrap > *{
	background-color:var(--color-pwhite);
}
#Contents .column__vertical,
#Contents .column__type2,
#Contents .column__type3,
#Contents .column__solve__vertical > *{
	flex-direction: column;
}
#Contents .column__type2{
	gap:0;
}
/*
#Contents .column__vertical > [class^="column__"]:nth-last-child(1),
#Contents .column__type3:last-of-type{
	margin-top:calc(var(--unit) * 5);
}*/
	@media screen and (min-width: 995px) {
		#Contents .column__vertical:not(:first-child),
		.column__vertical .column__type2:not(:first-child),
		#Contents .column__solve__vertical:not(:first-child) > *{
			margin-top:calc(var(--unit) * 2.5);
		}
	}
	@media screen and (max-width: 994px) {
		#Contents .column__type1 .ImgOnlyStyle,
		#Contents .column__type1 .ImgOnlyStyle.h100{
			width:40%;
			height:auto;
		}
		#Contents .column__type1 .ImgOnlyStyle.h100 img{
			height:auto;
		}
		#Contents .column__type2 .container{
			padding: 0 0 0 calc(var(--unit) * 3);
		}
	}
	@media screen and (min-width: 768px) {
		#Contents .column__type1 .ImgOnlyStyle,
		#Contents #usefulArea .column__horizontal .ImgOnlyStyle{
			margin:initial;
		}
	}
	@media screen and (max-width: 767px) {
		.JS .PageTitleStyle1, .JS .PageTitleStyle2{
			margin:inherit;
		}
		#Contents .FlexWrap, #Contents [class^="column__"]{
			flex-direction:column;
		}
		#Contents .Inner.FlexWrap{
			gap:0;
		}
		#Contents .column__type1 .ImgOnlyStyle,
		#Contents .column__type1 .ImgOnlyStyle.h100,
		#Contents .column__type1 .ImgOnlyStyle.h100 img{
			width:100%;
			height:auto;
		}
	}



/* ------------------------------------------------------
    column-layout / レイアウト用カラム
   ------------------------------------------------------ */
.column__solve__vertical > *{
flex:1;
}
[class^="column__solve"] .FlexWrap > *{
	flex:inherit;
}
#Contents .container .column__solve__vertical .ImgOnlyStyle img{
	max-width:100%;
}
/* ------------------------------------------------------
    column-horizontal / レイアウト用カラム横
   ------------------------------------------------------ */
.column__horizontal{
	flex-wrap:wrap;
}
/* ------------------------------------------------------
    column-solve / レイアウト用カラム縦
   ------------------------------------------------------ */
.column__solve{
  flex-wrap:wrap;
}
[class^="column__solve"] > *{
	gap:calc(var(--gap) * 2);
}
[class^="column__solve"] .ImgOnlyStyle img{
	width:auto;
	max-height:220px;
}
[class^="column__solve"] .task,
[class^="column__solve"] .solve{
	position:relative;
	background:var(--color-pgray1);
	padding:calc(var(--unit) * 3);
}
[class^="column__solve"] .task .TextArea,
[class^="column__solve"] .solve .TextArea{
	text-align:start;
}
[class^="column__solve"] dt{
	position:relative;
	padding:var(--unit);
	display:inline-block;
	font-weight:bold;
	color:var(--color-pwhite);
}
[class^="column__solve"] .task dt{
	background:var(--color-pgray5);
}
[class^="column__solve"] .solve dt{
	background:var(--color-pred2);
}
[class^="column__solve"] .solve:before{
	content:"";
	position:absolute;
/*
	display:block;
  width: 0;
  height: 0;
  border-style: solid;
*/
}
[class^="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__vertical .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__vertical .task,
		.column__solve__vertical .solve{
			flex:auto;
		}
		[class^="column__solve"] .task,
		[class^="column__solve"] .solve{
			text-align:start;
		}
		[class^="column__solve"] dt{
			left:calc(-3 * var(--unit));
			border-radius:0 4px 4px 0;
		}
	}
	@media screen and (max-width: 994px) {
		[class^="column__solve"]{
			max-width:600px;
			margin:auto;
			gap:calc(var(--gap) * 2);
		}
		[class^="column__solve"],[class^="column__solve"] > *{
			flex-direction:column;
		}
		[class^="column__solve"] .solve:before{
			top:calc(-4 * var(--unit));
			transform: translateX(11px);
		  border-top:15px solid var(--color-pred1);
		  border-right:13px solid transparent;
		  border-bottom:0;
		  border-left:13px solid transparent;
		}
		[class^="column__solve"] .contentArea.FlexWrap{
			flex:1;
		}
		[class^="column__solve"] dt{
			top:calc(-3 * var(--unit));
			border-radius:0 0 4px 4px;
		}
	}
	@media screen and (min-width: 768px) {
		#Contents .container .column__solve__vertical .ImgOnlyStyle{
			margin:calc(var(--unit) * 2.5) 0;
		}
	}
/* ------------------------------------------------------
    column-layout-type1 / レイアウト用カラム①
   ------------------------------------------------------ */
#Contents .column__type1 .ImgOnlyStyle{
	width:408px;
	aspect-ratio:var(--ratio);
	flex-shrink:0;
	overflow:hidden;
	position: relative;
}
#Contents .column__type1 .ImgOnlyStyle.h100{
	width:408px;
	height:230px;
	flex-shrink:0;
	overflow:hidden;
	position: relative;
}
#Contents .column__type1 .ImgOnlyStyle.h100 img{
	height:100%;
	width:auto;
	object-fit: cover;
}
#Contents .column__type1 :is(h2, h3, h4, h5, h6)::before{
 content:none;
}
#Contents .column__type1 :is(h2, h3, h4, h5, h6){
	margin-bottom:var(--unit);
}
.container .column__type1:last-of-type{
	margin-bottom:var(--gap);
}
	@media screen and (min-width: 995px) {
		.container .column__type1:not(:first-child){
			margin-top:calc(var(--unit) * 2.5);
		}
	}
/* ------------------------------------------------------
    column-layout-type2 / レイアウト用カラム②
   ------------------------------------------------------ */
#Contents .column__type2{
	padding:calc(var(--unit) * 5) calc(var(--unit) * 10);
	background:var(--color-pgray1);
	position:relative;
}
#Contents .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;
}
#Contents .column__type2 .list li{
	font-size:1.25rem;
	background:var(--color-pwhite);
	padding:calc(var(--unit) * 2);
	margin:var(--unit);
}
#Contents .column__type2 .list li strong{
	color:var(--color-pred1);
}
.container .column__type2:last-of-type{
	margin-bottom:var(--gap);
}
	@media screen and (min-width: 995px) {
		#Contents .column__type2 .container{
			padding: 0 calc(var(--unit) * 4);
		}
	}
	@media screen and (min-width: 995px) and (max-width: 1304px){
		#Contents .column__type2 .container{
			margin:inherit;
		}
	}
	@media screen and (max-width: 767px) {
		#Contents .column__type2{
			padding:calc(var(--unit) * 4) calc(var(--unit) * 2);
		}
		#Contents .column__type2 .list{
			padding:0;
			margin:0;
		}
		#Contents .column__type2 .list li{
			font-size:1.125rem;
		}
	}
/* ------------------------------------------------------
    column-layout-type3 / レイアウト用カラム③
   ------------------------------------------------------ */
#Contents .column__type3{
	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);
}
#Contents .column__type3:not(:first-child){
	margin-top:calc(var(--unit) * 2.5);
}
	@media screen and (max-width: 767px) {
		#Contents .column__type3{
			padding:calc(var(--unit) * 3);
		}
	}
/* ------------------------------------------------------
    column-layout-type4 / レイアウト用カラム④
   ------------------------------------------------------ */
#Contents .column__type4{
	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;
}


/* ------------------------------------------------------
    call to action / 背景付きお問い合わせエリア
   ------------------------------------------------------ */
#Contents .cta{
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:cover;
	background-image:url(/image/hsc2/solution/background/bg3.jpg);
}
#Contents .cta .container{
	background:var(--color-pwhite);
	padding:calc(var(--unit) * 6);
}
#Contents .cta [class^="InnerLink"] a{
	font-size:1.25rem;
	display:inline-block;
	min-width:300px;
	padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
}
#Contents .cta [class^="InnerLink"] a::after{
	width:1.25rem;
	height:1.25rem;
	background-size:1.25rem;
}
#Contents .cta ul[class^="InnerLink"],
#Contents ul.CenterAdjust[class^="InnerLink"]{
	justify-content:center;
	gap:var(--gap);
}
#Contents .cta .tx__highlight{
	margin-bottom:var(--gap);
}
	@media screen and (max-width: 994px) {
		#Contents .cta{
			left:-15px;
			position:relative;
			width:calc(100% + 30px);
		}
		#Contents .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) {
		#Contents .cta{
			padding:calc(var(--unit) * 1.5);
		}
	}
	@media screen and (max-width: 399px) {
		#Contents .cta{
			background-size:150%;
		}
	}

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



/* ------------------------------------------------------
    reasonArea / 強み、選ばれる理由
   ------------------------------------------------------ */
#reasonArea dl{
	padding:calc(var(--unit) * 2);
}
#reasonArea dt{
	font-weight:bold;
	text-align:center;
	line-height:1.4;
}
#reasonArea .FlexWrap > *{
	background-color:var(--color-pgray1);
}
#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
   ------------------------------------------------------ */
#Contents .featureTopics{
	font-size:1.25rem;
	font-weight:bold;
  margin-bottom: var(--gap);
}
#Contents .featureTopics .column__type2 {
  padding:calc(var(--unit) * 5);
  background:var(--color-pgray1);
  position:relative;
	justify-content:center;
}

/* ------------------------------------------------------
    contents-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);
		}
	}




/* ------------------------------------------------------
    cese--include
   ------------------------------------------------------ */
[class^="include"] #case .FlexWrap{
	flex-direction:column;
	max-width:1275px;
}
[class^="include"] #case .FlexWrap a{
	padding-left:408px;
	min-height:230px;
	background-repeat:no-repeat;
	background-size:408px auto;
	display:block;
	text-decoration:none;
	color:inherit;
}
[class^="include"] #case .FlexWrap dl{
	margin-left:var(--gap);
}
[class^="include"] #case .FlexWrap dt{
	font-size: 1.625rem;
	font-weight:bold;
	color:var(--color-pred2);
}
[class^="include"] #case .FlexWrap dd{
	font-size:1.125rem;
	font-weight:bold;
}






/* ------------------------------------------------------
    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;
}
#Contents #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);
}
#Contents #seminar a:hover::after{
	background:url(/image/hsc2/solution/icon/icon_arrow.svg);
}
#Contents #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%;
		}
	}




/* ------------------------------------------------------
    card / Box全体リンク
   ------------------------------------------------------ */
[class*="card"] h3{
	font-size:1.375rem;
	color:var(--color-pred2);
}
[class*="card"] h3:before{
	content:none;
}
[class*="card"] a:hover h3 {
	text-decoration:underline;
}




/* ------------------------------------------------------
    column / コラム & usefulArea / お役立ち情報
   ------------------------------------------------------ */
#column2 .p-summary__more__inner{display:none;}
#column2 .posted-on {
	display:flex;
	gap:var(--gap);
}
#column2 :is(a:link,a:visited,a:hover){
	background:none;
}
#column2{
	display:flex;
	flex-direction:column;
	gap:var(--gap);
}
[class*="--legacy"] #column2 .column_inner .column_detail,
[class*="--modern"] .column_inner{
	display:flex;
	gap:var(--gap);
	border:1px solid var(--color-pgray2);
}
[class*="--legacy"] #column2 .column_inner .column_detail > .ImgOnlyStyle,
[class*="--modern"] #column2 .column_inner > .ImgOnlyStyle{
	overflow:hidden;
	margin:0;
}
[class*="--legacy"] #column2 .column_inner .column_detail > .ImgOnlyStyle img,
[class*="--modern"] #column2 .column_inner > .ImgOnlyStyle img{
	width:100%;
	height:100%;
	object-fit:cover;
	margin:0;
}
[class*="--legacy"] #column2 .column_inner .column_detail dl,
[class*="--modern"] #column2 .column_inner .column_detail{
	margin:calc(var(--unit) * 2);
	margin-left:0;
}
#column2 .column_inner .column_detail dt a:after{
	background-size:1.25rem;
}
#column2 .column_inner .column_detail dt,
#column2 .column_inner .column_detail .column-title{
	font-size:1.25rem;
}
[class*="--legacy"] #column2 .column_inner .column_detail dd,
[class*="--modern"] #column2 .column_detail p{
	font-size:0.875rem;
}
#column2 .column_inner .column_detail strong{
	position: relative;
	color:inherit;
}
#column2 .column_inner .column_detail a{
	color:var(--color-pred2);
}
#column2 .p-summary__more__inner,button.c-button{
	width:inherit;
	max-width:inherit;
}
#column2 a{
	text-decoration:none;
	color:inherit;
}

#column2 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;
}
#column2 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) {
		[class*="--legacy"] #column2 .column_inner .column_detail > .ImgOnlyStyle,
		[class*="--modern"] #column2 .column_inner > .ImgOnlyStyle{
			min-width: 355px;
		}
	}
	@media screen and (max-width: 767px) {
		[class*="--legacy"] #column2 .column_inner .column_detail,
		[class*="--modern"] #column2 .column_inner{
			flex-direction:column;
			gap:0;
		}
		[class*="--legacy"] #column2 .column_inner .column_detail dl,
		[class*="--modern"] #column2 .column_inner .column_detail{
	    margin:var(--unit) calc(var(--unit) * 2);
		}
		[class*="--legacy"] #column2 .column_inner .column_detail > .ImgOnlyStyle,
		[class*="--modern"] #column2 .column_inner > .ImgOnlyStyle{
			max-height:250px;
			display:flex;
			align-items:center;
		}
	}
	@media screen and (max-width: 399px) {
		#column2 .posted-on {
			flex-direction:column;
			gap:initial;
			margin-bottom:var(--unit);
		}
	}

/* ------------------------------------------------------
    column--direct / 直書き　※CMS変更後
   ------------------------------------------------------ */
#column2[class*="--direct"] a{
	color:var(--color-pblack);
	text-decoration:none;
}
#column2[class*="--direct"] a dt{
	color:var(--color-pred2);
}
#column2[class*="--direct"] a dt{
}


/* ------------------------------------------------------
    usefulArea / 
   ------------------------------------------------------ */


/* ------------------------------------------------------
    relatedArea--include / 関連ソリューション
   ------------------------------------------------------ */
#relatedArea [class*="card"]{
	display:flex;
	gap:var(--gap);
	flex-wrap:wrap;
}
#relatedArea [class*="card"] > *{
	background:var(--color-pgray1);
	padding:calc(var(--unit) * 3);
	margin:inherit;
	position:relative;
}
#relatedArea [class*="card"] .sub{
	font-size:1rem;
	font-weight:bold;
}
#relatedArea [class*="card"] a{
	color:var(--color-pblack);
	text-decoration:none;
}
#relatedArea [class*="card"] a::after{
	bottom:-0.3em;
}
#relatedArea [class*="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;
	}
	@media screen and (min-width: 768px) {
	}
	@media screen and (max-width: 767px) {
		#solution{
			flex-direction:column;
			gap:var(--unit);
		}
		#relatedArea [class*="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;
  }
}






/* コンテンツ内装飾（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;
	}
}