/*===================================================================

	第二階層
	product/index.html

=====================================================================*/


/*ーーーーーファーストビューCSSーーーーー*/
.fv h1 {
    position: absolute;
    top: calc( 50% - 30px );
    left: 0;
    right:  0;
    margin: auto;
    width: 1100px;
    font-size: 50px;
    color: #FFF;
}
.fv {
    width: 100vw;
    height: 15em;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #014186 10%, #bdeeff 90%);
    margin-left: calc(50% - 50vw);
    position: relative;
    }

/*---ファーストビューCSS_SP---*/
@media (max-width:768px) {
	/*.fv h1＝位置と大きさ、.fv＝背景高さ*/
	.fv h1 {
    	    font-size: 30px;
    	    left: 1em;
	    }
	.fv {
    	    height: 10em;
        }
  }

    .fv_{
      width: 100vw;
      margin-bottom: 30px;
   }
    .fv_ h1 {
      position: relative;
      display: inline-block;
      padding-bottom: 10px; /* 文字と下線の間に余白を作る */
      top: calc(50% - 30px);
      left: 0;
      right: 0;
      margin: auto;
      width: 1100px;
      font-size: 2.5em;
    }

    .fv_ h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 5px solid #0084B2;
    border-top: 12px solid #0084B2;
    height: 3px;
    }
@media (max-width: 768px) {
    .fv_ h1 {
        font-size: 30px;
        left: 1em;
        top: 1em;
        margin-bottom:1em;
    }
    .fv_ h1::after {
        content: "";
        left: -1em;
    }
}

/*ーーーーーコンテンツCSSーーーーー*/
.std_product > ul ,.nbd_product > ul{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
}
.std_product > ul li ,.nbd_product > ul li{
    margin:0 1em;
    padding:0 0 5% 0;
    width:calc(25% - 2em);
    height:auto;
}
.std_product > ul li a ,.nbd_product > ul li a{overflow:hidden;width:100%;display:block;}
.std_product > ul li img ,.nbd_product > ul li img{transition:transform .6s ease;}
.std_product > ul li a:hover img ,.nbd_product > ul li a:hover img{transform:scale(1.05);}

.std_product > p ,.nbd_product > p{margin-left: 1em; margin-bottom: 1em;}
.std_product >h3 ,.nbd_product > h3{
    margin-left: 1em;
    margin-bottom: 1em;
    padding-left: 1em;
    padding-top: 0.3em;
    border-left: 0.3em solid var(--accent-color);
}

/*---コンテンツCSS_SP---*/
@media (max-width:768px) {
        .std_product > ul li ,.nbd_product > ul li {
            width:calc(50% - 2em);
        }
        .std_product > h2 ,.nbd_product > h2 {
            padding: 5px 1em;
            font-weight: bold;
            text-align: left;
        }

}

/*===================================================================

	コメントアウト

=====================================================================*/


/*---画像サイズ高さ設定、ページ依存-----------------*/
/*.main_visual--item{
	height:20em;
}
/*---切替アニメーション設定、ページ依存-----------------*/
/*.main_visual--item--bgimg{
	animation:mv_fade;
	animation-duration:5s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}
*/

/*---表示画像設定、ページ依存-----------------*/
/*.main_visual--item > .src1 {
	background-image:url(../images/mv_industry.jpg);
	animation-delay:0s;
}
*/

/*---アニメーション最終状態設定、ページ依存-----------------*/
/*@keyframes mv_fade {
	100% { opacity: 1; transform: scale(1.05,1.05);}
}
*/

/*---前面テキスト設定、サイズ・色-----------------*/
/*.main_visual--item--text{
	height:20em;
	padding-top:8em;
	padding-left:8em;
	background:linear-gradient(to right,rgba(var(--main_color),0.8),
		rgba(var(--main_color),0.1) 60%,rgba(var(--main_color),0.0));
	top:0em;
	left:0em;
	animation-duration:1s; 
	animation-fill-mode:both;

}
@media (max-width:768px){
	.main_visual--item{
		height:12em;
	}

	.main_visual--item--bgimg{
		animation:none;
		opacity:1;
		height:12em;
	}
	.main_visual--item > .src1{
		background-image:url(../images/index_mv02.jpg);
		background-position:top; 
		background-repeat: no-repeat;
		background-size:100%;
	}
	.main_visual--item--text{
		top:0;
		left:0;
		width:100%;
		height:100%;
		padding-top:4em;
		padding-left:5em;
		animation:none;
		color:#fff;
		h1{font-size:6vw;}
	}

}
*/

/*===============================================
	メインビジュアル下　サブメニュー
	標準型
	全体リンク（ホバー色付け）
===============================================*/

/*---サブメニューエリア----------------*/
/*.submenu_normal{
	.container:has(ul.submenu){
		padding-top:1.5em;
		padding-bottom:1em;
	}
	ul.submenu{
		display:flex;
		justify-content:center;
		list-style:none;
	}
	ul.submenu li{
		float:left;
		margin-right:1em;
		margin-bottom:1em;
	}
	ul.submenu li::after{
		margin-left:1em;
		content: '｜';
	}
	ul.submenu li::before{
		margin-left:1em;
		content: '↓';
	}
	ul.submenu a.myposition{
		background-color:#3399cc;
		border-radius:0.3em;
		color:#ffffff;
	}
	ul.submenu a{
		color:#333333;
		padding:0.2em 1em;
		transition:.5s;
	}

	ul.submenu a:hover{
		background-color:#3399cc;
		border-radius:0.3em;
		color:#ffffff;
	}
*/

	/*---SPサブメニューエリア----------------*/
	*/@media (max-width:768px){
		.container:has(ul.submenu){
			height:15em;
		}
		ul.submenu{
			margin-left:8%;margin-top:0;
			display:block;
		}
		ul.submenu li{border:1px solid #333333;
			clear:both;width:90%;text-align:center;
			padding:1em 0;font-size:large;
			margin:0 0 0.5em 0;
		}
		ul.submenu li::after{
			content: '';
		}
		ul.submenu a, ul.submenu a:hover, ul.submenu a.myposition{
			background-color:transparent;
			color:#333;display:block;
		}
		ul.submenu a.myposition{
			font-weight:bold;
		}
	}
}
*/

/*===============================================
	メインビジュアル下　サブメニュー
	ボックス型
	全体リンク（ホバー色付け）
===============================================*/
/*.submenu_boxtype{
	>.inner{
		display:flex;
		width:80%;
		margin:0 auto;
		margin-bottom:3em;
		padding-bottom:2em;
		border-bottom:1px solid #bbb;
		text-align:center;
	}
	.container:has(ul.submenu){
		justify-content:space-between;
		width:100%;
		display:flex;
	}
	ul.submenu{
		width:100%;
		flex-wrap:wrap;
		position:relative;
		padding:0;
		list-style:none;
		text-align:center;
	}
	ul.submenu li{
		background-color: #aaa;
		position: relative;
		display:inline-block;
		top:0;
		width:31%;
		height:9em;
	}
	ul.submenu .text_area{
		padding-top:0.3em;
	}
	ul.submenu .text_area > p{
		font-size:small;
		padding:0.3em;
	}

	ul.submenu li a{
		display:inline-block;
		width:100%;height:100%;
		transition:.5s;
		color:#333;
		border:1px solid #bbb;
	}

	ul.submenu li a:hover{
		background:rgba(27, 125, 168, 0.5);
		color:#fff;
	}
}
*/

/*---SP表示--------------------*/
/*@media (max-width:768px){
	.submenu_boxtype{
		width:100%;
		top:0em;
	}
	.submenu_boxtype >.inner{
		width:90%;
		margin-left:5%;
	}
	ul.submenu li{
		display:block;
		width:100%;
		height:5em;
		margin-bottom:0.3em;
	}
	ul.submenu li .text_area > h3{
		margin:0;
	}
	ul.submenu li .text_area > p{
		font-size:small;
		margin:0;
	}

	ul.submenu li a{
		display:block;
		width:100%;height:100%;
		transition:.5s;
		color:#333333;
		background-color:transparent;
	}

	ul.submenu li a:hover{
		opacity:1;
		color:#333333;
	}
}
*/


/*---ページ内リンクの位置調整 tab誤作動のため使用しない--------------------*/
/*.tab_content h3:before{
	content:'';
	display:block;
	padding-top:10em;
	margin-top:-10em;
}
*/

/*===============================================
	導入部分
===============================================*/
/*.introduction_area{
	padding-bottom:3em;
}
.introduction_area .inner{
	width:70%;
	padding-left:15%;
	text-align:center;
}
.introduction_area .text_area{
	line-height:2em;
}
*/

/*===============================================
	タブ切り替えエリア
===============================================*/
/*.tab_area{margin:3em 0;}
.tab_area .inner{width:80%;margin:0 auto;}
/*---タブクリック時画面位置調整-------------------*/
/*#tab_top{
	padding-top:5em;
	margin-top:-5em;
}
*/

/*---タブエリア----------------*/
/*.tab_container{
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}
.tab_label{
	color:#bbb;
	background-color:#fff;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding:2em 2em;
	margin-bottom:5em;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.tab_label:hover {
	background: rgba(33, 99, 205, 0.1);
	color:#3399cc;
}

.tab_switch:checked + .tab_label {
	color:#3399cc;
}

.tab_label::after {
	background:#3399cc;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}

.tab_switch:checked ~ .tab_label::after {
	transform: translateX(-100%);
}

.tab_switch:checked + .tab_label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab_content {
	height:0;
	opacity:0;
	padding: 0 20px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
	margin-top:0em;
}

.tab_switch:checked ~ .tab_content {
	transform: translateX(30%);
	margin-top:0em;
}

.tab_switch:checked + .tab_label + .tab_content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab_container::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}

.tab_switch {
	display: none;
}
*/

/*---SP表示-------------------*/
/*@media (max-width:768px) {
	.tab_area .inner{width:100%;margin:0 auto;}
	.tab_label{
		float:left;
		width:100%;
		margin-bottom:0em;

	}
}
*/

/*===============================================
	タブコンテンツ
	パネル表示_詳しく見るボタン
	ソリューションから探す
===============================================*/
/*--パネル表示--------------------*/
/*.container:has(.panel_area){clear:both;}
.panel_area{margin-top:0em;}
.panel_area--item{
	display:flex;
	justify-content:space-between;
	margin-bottom:5em;
	width:100%;
}
.panel_area a.btn_more{
	padding:0.5em 1.5em;
	border-radius:0.2em;
	background-color:#3399cc;
	color:#ffffff;
	transition: .5s;
	float:right;
	margin-right:5em;
}
.panel_area a:hover.btn_more{
	background-color:#cccccc;
	color:#ffffff;
}
*/


/*画像*/
/*.panel_area--item > .img_area{
	width: 50%;
	box-shadow:0 0 1em #ddd;
}
.panel_area--item >.img_area > img{
	width: 100%;
	height:auto;
}*/

/*テキストエリア*/
/*.panel_area--item > .text_area{
	position:relative;
	top:3em;
	left:-2em;
	background-color:#fff;
	width:50%;
	height:100%;
	padding:3em;
	filter:drop-shadow(0 0 0.5em #ddd);

}*/

/*偶数番目の設定*/
/*BOXアイテム*/
/*.panel_area--item:nth-child(even) {
	flex-direction: row-reverse;
}*/

/*画像*/
/*.panel_area--item:nth-child(even) > .img_area{
	position:relative;
	left:-2em;
}*/

/*テキストエリア*/
/*.panel_area--item:nth-child(even) > .text_area {
	text-align:left;
	left:0;
}*/

/*---SP---*/
/*@media (max-width:768px) {*/
	/*ボックスアイテム*/
	/*.panel_area--item {
		flex-direction: column;
		margin-left:0%;
		width:100%;
		margin-bottom:-17vh;
	}*/
	/*画像*/
	/*.panel_area--item > .img_area {
		width:100%;
		margin-left: 0;
		text-align: center;
	}
	.panel_area--item > .img_area img {
		width:100%;
		height:auto;
	}*/
	/*テキストエリア*/
	/*.panel_area--item > .text_area {
		top:-10em;
		width:90%;
		margin-left:15%;
		br{display:none;}
	}*/

	/*偶数番目の設定*/
	/*ボックスアイテム*/
	/*.panel_area--item:nth-child(even) {
		flex-direction: column;
	}*/
	/*画像*/
	/*.panel_area--item:nth-child(even) > .img_area img{
		margin-left: 0em;
	}*/
	/*テキストエリア*/
	/*.panel_area--item:nth-child(even) > .text_area {
		left:-2em;
	}
	.panel_area a.btn_more{
		margin-right:0em;
	}
}*/


/*===============================================
	タブコンテンツ
	サムネイル表示
	hover画像拡大、全体リンク
===============================================*/
/*.container:has(.thumbnail_area){
	margin-top:5em;
}
.thumbnail_area{
	margin-top:1em;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.thumbnail_area .spacer{
	width:100%;
}

.thumbnail_area a img{
	transform:scale(1);
	transition:.5s
}
.thumbnail_area a:hover img{
	transform:scale(1.2);
	transition:.5s
}

.thumbnail_area--item .img_area > img{
	width:100%;
	height:auto;
}
.thumbnail_area--item .text_area{
	width:100%;
	overflow-wrap:normal;
	padding-top:0.5em;
}

.thumbnail_area--item .img_area{
	width:100%;
	height:auto;
	max-height:15em;
	overflow: hidden;
}
*/

/*===============================================
	サムネイル表示_4列
===============================================*/
/*.thumbnail_col4 .thumbnail_area--item{
	width:23%;
	height:18em;
}
*/

/*===============================================
	サムネイル表示_3列
===============================================*/
/*.thumbnail_col3 .thumbnail_area--item{
	width:32%;
	height:25em;
}
*/

/*===============================================
	サムネイル表示_2列
===============================================*/
/*.thumbnail_col2 .thumbnail_area--item{
	width:47%;
	height:30em;
	.img_area{
		max-height:20em;
	}
}
*/

/*---SP表示_サムネイル表示_4列→2列-----------------*/
/*@media (max-width:768px){
	.thumbnail_area {
		margin-bottom:2em;
	}
	.thumbnail_area > .blank_item{
		display:none;
	}
	.thumbnail_col4 .thumbnail_area--item{
		width:47%;
		height:12em;
	}
	.thumbnail_col3 .thumbnail_area--item{
		width:100%;
		height:12em;
		.img_area{
			width:45%;
			float:left;
		}
		.text_area{
			width:50%;
			float:right;
			margin-top:-0.5em;
			font-size:smaller;
		}
	}
	.thumbnail_col2 .thumbnail_area--item{
		height:12em;
	}

}
*/


/*<!---製品紹介エリア css----------------->*/
/*.product_content{}
.product_content >.inner{
	width:80%;
	padding-left:10%;
	padding-top:0em;
	padding-bottom:3em;
}
.product_content h2{
	text-align:center;
	margin-top:3em;
	margin-bottom:3em;
}
.product_content h3{
	border-bottom:1px solid #aaa;
}

.product_content a.btn_more{
	padding:0.5em 1.5em;
	border-radius:0.2em;
	background-color:#3399cc;
	color:#ffffff;
	transition: .5s;
	float:right;
	margin-right:5em;
}
.product_content a:hover.btn_more{
	background-color:#cccccc;
	color:#ffffff;
}
*/

/*===============================================
	デジタルイノベーション　マップ表示
	画像内マーキング
	マーキング　ホバー　ポップアップ
===============================================*/
/*.introduction_area .img_area{
	position: relative;
	background-image:url(../images/di_concept.jpg);
	background-repeat:no-repeat;
	background-size:100% 100%;
	width:80%;
	height:33vw;
	margin-left:10%;
}

.balloon {
	box-shadow:0 0 15px gray;
	border:2px solid #fff;
	position: relative;
	display: inline-block;
	margin:0;
	padding: 0 0.2%;
	width:5%;
	height:8%;
	line-height:110%;
	text-align: center;
	font-size: 2.3vw;
	font-weight: bold;
	background:#fa0;
	border-radius: 50%;
	box-sizing: border-box;
}

.balloon:before {
	content: "";
	position: absolute;
	bottom: -50%;
	left: 50%;
	margin-left: -20%;
	z-index: 0;
}
.balloon a{
	color: #fff;
	display: inline-block;
	transition: .2s;
}
.balloon a:hover{
	cursor: pointer;
	transition: .2s;
	transform: rotate(90deg);
}

.position1{
	position:relative;
	top:25%;
	left:5%;
	z-index:10;
}
.position2{
	position:relative;
	top:15%;
	left:30%;
	z-index:10;
}
.position3{
	position:relative;
	top:30%;
	left:-30%;
	z-index:10;
}
.position4{
	position:relative;
	top:50%;
	left:10%;
	z-index:10;
}
.position5{
	position:relative;
	top:50%;
	left:-30%;
	z-index:100;
}
.description{
	position: absolute;
	font-size:50%;
	width:500%;
	top: 100%;
	left: -400%;
	padding: 6px;
	border:1px solid #fa0;
	background-color: #fff;
	color:#555;
	border-radius:6px;
	opacity:0;
	visibility:hidden;
}
.dsp_bottom{
	top: -330%;
}
a:hover .description{
	visibility:visible;
	animation:popup 0.5s forwards;
	animation-delay:0.2s;
	transform: rotate(-90deg);

}
@keyframes popup {
	100% {opacity:1;}
}
*/