@charset "utf-8";
/**/
header {
	position: relative;
}
/**/
a:hover {
	opacity: 0.5;
	/*transition: 0.2s;*/
	color: inherit;
}
/*---link----*/
/*link_アイコン*/
a[target="_blank"]:not(.noAfter)::after {
	margin-left: auto;
}
.lineupBox a[target="_blank"]::after {
	color: #ccc;
}
/*link_アイコン＿＞*/
.linkArrow a {
	align-items: center;
	position: relative;
	padding: 1em;
}
.linkArrow a:after {
	font-family: "Font Awesome 5 Free";
	content: "\f054";
	font-size: 100%;
	font-weight: 900;
	color: #ccc;
	vertical-align: middle;
	text-align: right;
	padding-left: 5px;
	margin-left: auto;
}
/*-----ctaエリア--------*/
.ctaArea {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 30px;
	background-color: #eff7ff;
	padding: 20px;
}
.btnArea { /*お申し込み_btn*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
	/*margin: 50px auto;*/
	margin: 0 auto;
	width: 100%;
}
.bnrArea { /*資料dl_bnr*/
	width: 100%;
	transition: 0.2s;
	margin: 0 auto;
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.bnrArea a {
	width: min(100%, 400px)
}
.stdBtn a {
	text-decoration: none;
	display: block;
	width: auto;
	height: auto;
}
.inquiryBtn {
	background-color: #FFC000;
}
.inquiryBtn a {
	padding: 1em 2em;
}
.spNone {
	display: none;
}
/*----リスト---------------*/
/*カードリスト*/
.cardList > div {
	background-color: #fff;
	padding: 10px;
}
.cardList a {
	display: block;
	width: 100%;
	height: 100%;
}
.cardList img {
	margin: 0 auto;
	width: 210px;
}
.cardList > * {
	box-shadow: 2px 2px 5px #aaa;
	background: #fff;
	flex-grow: 0;
	align-items: stretch;
}
.cardList::after {
	content: '';
	display: block;
	width: 250px; /* 空の<li>の高さを指定 */
	background-color: transparent; /* 必要に応じて背景色を設定 */
}
/**/
.lineupBox {
	width: 100%;
	background: #fff;
}
.lineupList .linupImg {
	width: min(100%, 220px);
	margin: 0 auto;
}
.lineupList .lineupBox a > div:last-of-type {
	flex: 1;
}
/**/
#solutionProducts .lineupBox a, #lineup .cardList .lineupBox a {
	flex-direction: column;
	gap: 10px 0;
	display: flex;
	padding: 1em 0.5em 0;
}
/*--------------*/
h2 {
	margin: 2em auto 1em;
	background: none;
	text-align: center;
	color: #003D74;
}
.fullWidth:not(.mainView, #nav) {
	/*	margin-top: 4em;*/
	background: #f5f5f5;
}
.sectionInner {
	width: min(95%, 1200px);
	margin: 0 auto;
}
a:link {
	text-decoration: none;
}
main a:hover::before {
	opacity: 0.3;
	transition: 0.2s;
}
.flex {
	gap: 20px;
}
/**/
#solutionProducts .sectionInner, #lineup .sectionInner, #cases .sectionInner, #information .sectionInner {
	padding: 2em;
	background: #f5f5f5;
	gap: 2em;
}
/* page内_nav
====================================================*/
#nav {
	background: #003D74;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 400;
}
#nav ul {
	width: min(100%, 1000px);
	margin: 0 auto;
}
#nav ul li {
	flex: 1;
}
#nav ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	text-align: center;
	width: 100%;
	height: 100%;
	color: #fff;
	 text-shadow: 1px 1px 0 #003d74;
}
main #nav ul li a:hover::before {
	height: calc(100% + 6px);
	top: -3px;
}
.navBox {
	border-top: 3px solid #003D74;
	border-bottom: 3px solid #003D74;
}
.spMenuBtn {
	display: none;
}
.menuList {
	width: min(100%, 1000px);
	margin: 0 auto;
}
.menuList li {
	border-left: 1px solid #fff;
	flex: 1;
}
.menuList li:last-child {
	border-right: 1px solid #fff;
}
.menuList li a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	text-align: center;
	width: 100%;
	height: 100%;
}
.menuList li a p {
	color: #fff;
	text-shadow: 2px 2px 2px #444;
	font-weight: 500;
}
/* MV_test
====================================================*/
.mainView{
	padding-top: 0;margin-top: 0;
}
.mainView > div:first-child > p {
	margin-top: 15px;
	padding-left: 1em;
}
.mainView > div:nth-child(2) {
	margin-top: 30px;
}
/*.mainView > div:last-child {
	margin-top: 100px;
}*/
section.mainView > p:first-of-type {
	font-size: 1.2em;
}
.mainView .fullWidth{
	width: 100%;
	max-width: 100%;
	background: #f5f5f5;
	padding:0;
	margin:0;
}

.mainView >.fullWidth >.flex{
	    max-width: 1200px;
    width: 90%;
    margin-inline: auto;
		gap:0;
	}
/* ソリューション_Products_4つ
====================================================*/
#solutionProducts .flex {
	justify-content: center;
}
/*#solutionProducts .flex::after {
  content: '';
  display: block;
width: min(calc((100% - 20px) / 2), 250px);
  background-color: transparent; 
}*/
#solutionProducts .lineupBox {
	width: min(calc((100% - 20px) / 2), 250px);
}
#solutionProducts .lineupBox a img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
#solutionProducts h2 {
	margin: 0 auto 1em;
}
#solutionProducts .lineupBox h3 {
	font-weight: 700;
	font-size: 0.8em;
	border-bottom: none;
	text-align: center;
	flex-grow: 1;
	margin: 0;
	max-inline-size: none;
	padding: 0;
}
#solutionProducts ul {
	position: relative;
}
/*#solutionProducts ul .lineupBox::after{
	content: "";
	display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}*/
/* ソリューション
====================================================*/
#solutions > .fullWidth {
	width: 100%;
	max-width: 100%;
	background: #f5f5f5;
	padding: 2em 0;
	margin-top: 2em;
}
#solutions h3 {
	font-size: 1.1em;
	margin: 0;
	color: #003D74;
	line-height: 1.4em;
}
#solutions .marker {
	color: #0070C0;
	font-weight: 700;
}
/*---ポイント_no.---*/
#solutions .anchorPagelink, #solutions .sectionInner > div {
	counter-reset: number 0; /* number のカウンタを 0 にセット */
}
#solutions .anchorPagelink li a:before, #solutions .sectionInner h3:before {
	counter-increment: number 1; /* number カウンタの増加数をセット */
	content: "0"counter(number); /* 表示形式を指定 */
	font-size: 1.5em;
	color: #0192BF;
	margin-right: 0.5em;
}
#solutions .sectionInner h3:before {
	border-bottom: solid 2.0px rgb(0, 61, 116);
}
/*---page内リンク---*/
.anchorPagelink {
	margin: 0 auto;
	width: min(90%, 750px);
	gap: 10px;
}
.anchorPagelink li {
	background: #fff;
	width: 100%;
}
.anchorPagelink a {
	width: 100%;
	padding: 0 20px;
	display: flex;
	align-items: center;
	position: relative;
}
.anchorPagelink li a::after { /*icon*/
	font-family: "Font Awesome 5 Free";
	content: "\f078";
	font-weight: 900;
	color: #0192BF;
	font-size: 0.9em;
	line-height: 1;
	vertical-align: middle;
	margin-left: 5px;
}
.anchorPagelink li a span {
	width: 100%;
	display: block;
}
/*---注釈---*/
#solutions .caption_solutions {
	font-size: 0.7em;
}
/*---ソリューション_ポイント５つ---*/
#solutions .sectionInner > div {
	flex-direction: column;
	gap: 30px;
}
#solutions .sectionInner > div > div { /*#solution_#*/
	padding-top: 100px;
	margin-top: -100px;
}
#solutions .sectionInner .boxWhite {
	padding: 2em;
	width: 100%;
	background: #fff;
	flex-direction: column;
	gap: 20px;
}
#solutions .sectionInner .flexBox { /*#solution_# .flexBox*/
	gap: 40px;
	padding: 0 1.5em;
}
#solutions .sectionInner .flexBox > div:first-of-type {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1em;
}
/*---img---*/
#solutions .ribbon {
	padding: 10px 20px;
	top: -10px;
	background-color: #0192BF;
	font-size: 0.8em;
	z-index: 5;
}
#solutions .sectionInner .flexBox figure {
	width: min(100%, 400px);
	position: relative;
	margin: 0 auto;
}
/*---コンテンツ＿クリックで中身を表示---*/
details:not(:first-child) {
	margin-top: 10px;
}
.acdYellow summary {
	background-color: #FFF2CC;
	color: #003D74;
	font-weight: 700;
}
summary {
	padding: 1em;
}
summary:hover {
	cursor: pointer;
}
details > div > p:first-child {
	background-color: #fff;
	border: 1px solid #555;
	flex-basis: 25em;
	text-align: center;
	padding: 10px 0;
}
#solutions .acdYellow .flex {
	margin-top: 20px;
}
#solutions .acdYellow p {
	margin: 0 auto;
}
#solutions figcaption {
	font-size: 0.7em;
}
#solutions .btnProducts {
	background: #0192bf;
	width: min(100%, 500px);
	margin: 0 auto;
	position: relative;
	color: #fff;
	border-radius: 5px;
	text-align: center;
}
#solutions .btnProducts a {
	display: block;
	padding: 1em;
}
#solutions .btnProducts span {
	font-size: 0.8em;
	padding-right: 0.5em;
}
#solutions .anchorPagelink {
	position: relative;
	z-index: 10;
}
/*------*/
#solutions #solutions_01 {
	z-index: 9;
}
#solutions #solutions_02 {
	z-index: 8;
}
#solutions #solutions_03 {
	z-index: 7;
}
#solutions #solutions_04 {
	z-index: 6;
}
/* 製品・システム
====================================================*/
#lineup h3 {
	margin: 0 0 1em;
}
#lineup h4 {
	font-weight: 700;
}
/*ディスプレイ・周辺機器*/
/*-------並列_4_カードリスト-------*/
#lineup .cardList h4 {
	font-weight: normal;
	font-size: 0.95em;
	flex-grow: 1;
	border-bottom: none;
	text-align: center;
}
#lineup .cardList .lineupBox {
	width: min(100%, 250px);
	display: flex;
	flex-direction: column;
}
.linkTxt {
	text-align: right;
	text-decoration: underline;
	margin-top: 10px;
}
#lineup .cardList .lineupBox div {
	height: 130px;
}
/* シーン
====================================================*/
#scene {
	position: relative;
	counter-reset: number 0;
}
#scene > .fullWidth {
	width: 100%;
	max-width: 100%;
	background: #f5f5f5;
	padding: 2em 0;
	margin-top: 2em;
}
#scene h3 {
	margin: 0 0 1em;
}
#scene h3::before {
	content: "シーン"counter(number);
	counter-increment: number 1;
	font-size: 0.8em;
	background: #fff;
	border-radius: 20px;
	padding: 1px 10px;
	font-weight: normal;
	margin-right: 1em;
}
#scene .flex {
	justify-content: center;
}
#scene .flex::after {
	content: '';
	display: block;
	width: min(100%, 385px);
	background-color: transparent; /* 必要に応じて背景色を設定 */
}
#scene .sectionInner > div > .flex > li {
	width: min(100%, 385px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#scene .sectionInner > div > .flex > li p {
	margin: 0;
	font-size: 0.9em;
	padding: 0;
	text-align: center;
}
#scene .sectionInner > div > .flex > li div {
	width: min(100%, 390px);
}
#scene .sectionInner > div > .flex > li img {
	width: 100%;
	object-fit: contain;
	margin: 0 auto;
}
#scene h4 {
	text-align: center;
	border-bottom: none;
	font-weight: 500;
}
#scene .linkArrow a {
	padding: 0;
	font-size: 0.85em;
}
/*おすすめ製品_並列*/
.iconTool {
	display: flex;
	gap: 10px;
	font-size: 0.7em;
	flex-wrap: wrap;
	align-items: center;
}
.iconTool li {
	width: fit-content;
	background: #fff;
	padding: 2px 10px;
	border-radius: 25px;
	border: 1px solid #ccc;
}
.iconTool::before {
	content: "おすすめ";
	font-size: 0.85em;
}
/* 導入事例
====================================================*/
#cases h3 {
	font-size: 1.1em;
	line-height: 1.2;
	margin: 0;
	padding: 5px;
	border-bottom: 1px solid #ccc;
	max-inline-size: none;
	font-weight: normal;
}
/*---導入商品---*/
#cases .lineupList span {
	background-color: #bbb;
	padding: 2px 5px;
	display: inline-block;
	margin: 0 15px 0 0;
}
#cases dl.flex {
	font-size: 0.8em;
	margin-top: 10px;
}
#cases dl.flex dd {
	padding: 0 5px;
}
/* 関連情報
====================================================*/
#information > .fullWidth {
	width: 100%;
	max-width: 100%;
	background: #f5f5f5;
	margin-top: 2em;
}
#information h3 {
	margin: 0 0 1em;
}
/*****************/
.slider {
	width: 90%;
	display: flex;
	margin: auto;
}
.slider li {
	height: auto;
	margin: 0 10px;
}
.slider img {
	width: 350px;
	object-fit: cover;
}
.slick-prev:before, .slick-next:before {
	color: black;
}
@media (max-width: 560px) {
	.mainView .flex > div:first-child{
		gap:0;
	}
	/*page内_nav*/
	header {
		position: fixed;
	}
	#nav {
		position: fixed;
		z-index: 55;
	}
	.navBox {
		position: relative;
		border-top: none;
		border-bottom: none;
		background: none;
		margin-bottom: 50px;
		z-index: 54;
		width: 100%;
	}
	.navBox .pc {
		display: none;
	}
	.spMenuBtn {
		position: fixed;
		top: 60px;
		display: block;
		width: 100%;
		background: #003D74;
		text-align: center;
		padding: 15px 5px;
		box-shadow: 0 2px 5px #666;
		color: #fff;
		text-shadow: 2px 2px 2px #444;
		font-weight: 500;
		cursor: pointer;
		z-index: 53;
	}
	.spMenuBtn::after {
		font-family: "Font Awesome 5 Free";
		content: "\f0d7";
		font-size: 100%;
		font-weight: 700;
		color: currentColor;
		padding-left: 10px;
	}
	.menuList {
		box-shadow: 0 2px 5px #666;
		flex-direction: column;
		position: absolute;
		z-index: 52;
		transition: all 0.5s;
	}
	.menuList li {
		background: #0192BF;
		border-left: none;
	}
	.menuList li:not(.menuList li:last-child) {
		border-bottom: 1px solid #999;
	}
	.menuList li:last-child {
		border-right: none;
	}
	.menuList .sp {
		display: none;
	}
	.menuList li a:hover::before {
		height: 100%;
		top: 0;
	}
	.menuList li a {
		padding: 15px 5px;
	}
	.menuList li a p {
		color: #444;
		text-shadow: none;
		font-weight: 550;
	}
	/**/
	.mainView {
		padding-top: 2em;
	}
	.mainView > div:last-child {
	margin-top: 100px;
}
	#solutionProducts, #solutionProducts .sectionInner, #lineup, #lineup .sectionInner, #information, #information .sectionInner, #cases, #cases .sectionInner,.mainView ,.mainView>.fullWidth >.flex {
		width: 100%;
	}
	#solutions .sectionInner .boxWhite {
		padding: 2em 1em;
	}
	.lineupList .lineupBox {
		padding: 1em 1em 0;
	}
	.lineupList .lineupBox a {
		flex-direction: column;
		/*align-items: end;*/
		gap: 10px;
	}
	#information .lineupBox a.flex {
		flex-direction: column;
		align-items: flex-end;
	}
	/*----------------------*/
}
@media (max-width: 960px) {
	#solutions .sectionInner .flexBox {
		flex-direction: column-reverse;
		gap: 20px;
		padding: 0 0.5em;
	}
	#solutions .sectionInner .flexBox ul {
		width: 100%;
	}
	.lineupList .lineupBox a {
		flex-direction: column;
	}
}
@media (560px < width) {
	.ctaArea {
		padding: 30px 0;
	}
	.spNone {
		display: inherit;
	}
}
@media (960px < width) {
	.btnArea {
		flex-direction: row;
	}
	.anchorLink {
		top: 50px;
	}
	.anchorLink.unpinned {
		top: -40px;
	}
	section[id].unpinned {
		padding-top: 0;
		margin-top: 0;
	}
	.problem {
		padding-left: 0;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0 30px;
		li {
			flex-basis: calc(50% - 30px);
		}
	}
	.bnrArea {
		flex-direction: row;
		justify-content: center;
	}
}
@media (1100px < width) {
	.mainView {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.mainView > div:first-child {
		color: #fff;		
		display: flex;
		> div:first-child {
			padding: 5em 1em 0;
			flex-basis: 40%;
			background: #003D74;
			gap:0;
			p {
				padding: 1em 0 0 2em;
				margin: 0;
				width: 100%;
			}
		}
		> div:last-child {
			flex-basis: 60%;
		}
	}
	.mainView > div:last-child {
		margin-top: 0;
	}
}
@media (calc(1200px/0.9) < width) {
	/*.anchorLink {
		margin-left: calc(-50vw + 600px);
	}*/
}