/*===============================================
	トップへ戻るボタン
===============================================*/
*{
	scroll-behavior: smooth;
}
.top_btn{
	width: 4em;
	height: 4em;
	border-radius:2em;
	background-color: #333;
}
.yajirushi::before,.yajirushi::after {
	content: "";
	width: 1.7em;
	height: 0.5em;
	background-color: snow;
	position: absolute;
	border-radius: 0.5em;
}
.yajirushi:before {
	transform: translate(1.6em, 1.6em) rotate(45deg);
}
.yajirushi:after {
	transform: translate(0.75em, 1.6em) rotate(-45deg);
}
.move_page_top {
	position: fixed;
	right: 5%;
	bottom: -150px;
	animation: progress linear;
	animation-timeline: scroll();
	transition: bottom 1s ease;
	z-index: 1000;
}
@keyframes progress {
	0% {bottom: -150px;}
	18%{bottom: -100px;}
	19%{bottom: 0px;}
	20%{bottom: 160px;}
	100%{bottom: 160px;}
}



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

	第三階層
	product/list/p00_xxxx.html
	基本フォーマット
=====================================================================*/
/*---画像サイズ高さ設定、ページ依存-----------------*/
.main_visual--item{
	height:25em;
}
/*---切替アニメーション設定、ページ依存-----------------*/
.main_visual--item--bgimg{
	width:50%;
	margin-left:50%;
}

/*---表示画像設定、ページ依存-----------------*/
/*背景設定は利用しない*/
.main_visual--item > .src1 {
/*	background-image:url(../images/product_mv.jpg);*/
/*	background-size:auto 100%;*/
	opacity:1;
}
.main_visual--item--bgimg{
	padding-top:3em;
	padding-left:5em;
}
.main_visual--item--bgimg img{
	width:auto;
	max-height:20em;
}

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

/*---前面テキスト設定、サイズ・色-----------------*/
.main_visual--item--text{
	width:50%;
	height:20em;
	padding-top:5em;
	padding-left:8em;
/*	background:linear-gradient(to right,rgba(33,33,33,0.9),
		rgba(33,33,33,0.5) 60%,rgba(var(--main_color),0.0));*/
	top:0em;
	left:0em;
	animation-duration:1s; 
	animation-fill-mode:both;
	h1, p{color:#333333;}
	h1{
		font-size:xx-large;
		border-bottom:1px solid rgb(var(--base_color));
		margin-bottom:0em;
	}
	p span{
		font-size:larger;
		display:block;
		margin-bottom:0.5em;
	}

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

	.main_visual--item--bgimg{
		animation:none;
		opacity:1;
		height:12em;
	}
	.main_visual--item--bgimg img{
		width:100%;
		height:auto;
	}
	.main_visual--item--text{
		top:0;
		left:0;
		width:60%;
		height:100%;
		padding-top:0em;
		padding-left:1em;
		animation:none;
		color:#fff;
		h1{font-size:6vw;}
		p br{display:none;}
	}

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

/*---サブメニューエリア----------------*/
.submenu_normal{
	position:sticky;
	top:6em;
	background-color:#fff;
	border-top:1px solid rgb(var(--base_color));
	border-bottom:1px solid rgb(var(--base_color));
	z-index:100;
}
.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:not(:last-child):after{
	margin-left:1em;
	content: '｜';
}
/*ul.submenu li:before{
	margin-left:1em;
	content: '↓';
}*/
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){
	.submenu_normal{
		position:static;
	}
	.container:has(ul.submenu){
		height:15em;
	}
	ul.submenu{
		margin-left:8%;margin-top:0;
		display:block;
	}
	ul.submenu li{
		border:1px solid #333333;
		width:90%;
		height:3em;
		text-align:center;
		padding-top:0.5em;
		font-size:larger;
		margin-bottom:0.1em;
	}
	ul.submenu li:before, ul.submenu li:not(:last-child):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;
	}
}

/*---ページ内リンクの位置調整--------------------*/
h2:before{
	content:'';
	display:block;
	padding-top:8em;
	margin-top:-8em;
}

/*===============================================
	導入エリア（コンセプト、概要）
===============================================*/
.introduction_area{
	padding-top:3em;
	padding-bottom:3em;
}
.introduction_area > .inner{
	width:80%;
	margin:0 auto;
	text-align:center;
}
.introduction_area .text_area{
	line-height:2em;
	text-align:left;
}
@media (max-width:768px){
	.introduction_area .text_area br{
		display:none;
	}
}

/*===============================================
	コンテンツ
　主な特長、活用例、ラインアップ・仕様
===============================================*/
.content > .inner{
	width:80%;
	margin:0 auto;
	h2{/*text-align:center;*/margin-bottom:2em;}
}
/*===============================================
	サムネイル表示
	主な特長（2列）、活用例（3列）
	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{
	position:relative;top:0%;
	transform:scale(1);
	transition:.3s
}
.thumbnail_area a:hover img{
	transform:scale(1.1);
	transition:.3s
}
.thumbnail_area--item .img_area > img{
}
.thumbnail_area--item .text_area{
	width:100%;
	overflow-wrap:normal;
	padding-top:0.5em;
}

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


/*===============================================
	サムネイル表示_2列
===============================================*/
.thumbnail_col2 .thumbnail_area--item{
	width:47%;
	height:30em;
	.img_area{
		height:20em;
	}
	.img_area >img{
		width:auto;
		min-width:100%;
		height:auto;
		min-height:100%;top:-10%;
	}
}
/*===============================================
	サムネイル表示_3列
===============================================*/
.thumbnail_col3 .thumbnail_area--item{
	width:32%;
	height:25em;
	.img_area{
		height:15em;
	}
	.img_area >img{
		width:auto;
		min-width:100%;
		height:auto;
		min-height:100%;top:-10%;
	}
}

/*---SP表示_サムネイル表示_3列2列⇒1列-----------------*/
@media (max-width:768px){
	.content > .inner{
		width:90%;
		margin:0 auto;
	}
	.thumbnail_area {
		margin-bottom:2em;
	}
	.thumbnail_area > .blank_item{
		display:none;
	}
	.thumbnail_area a img{
		position:relative;top:0%;
	}
	.thumbnail_col3 .thumbnail_area--item,.thumbnail_col2 .thumbnail_area--item{
		width:100%;
		height:12em;
		.img_area{
			width:45%;
			height:8em;
			float:left;
		}
		.img_area > img{
			width:auto;
			min-width:100%;
			height:100%;
			min-height:12em;
		}
		.text_area{
			width:50%;
			float:right;
			margin-top:-0.5em;
			font-size:smaller;
		}
	}


}
/*===============================================
	ラインアップ・仕様
	表組
===============================================*/
.table_content >.inner{
	width:80%;
	margin-left:10%;
	padding-bottom:3em;
	h2{/*text-align:center;*/margin-bottom:2em;}

}
.container:has(.spec_table){
	width:100%;
}
.spec_table{
	overflow: auto;
	width: 100%;
/*	height: 45em;*/
	height:auto;
/*	max-height:65vh;*/
	max-height:auto;
}
.table_content .container h3:nth-of-type(n+2){
	margin-top:3em;
}

.spec_table table{
	margin: 0;
	border-spacing: 0;
	width:100%;
	max-width:100%;
	min-width:100%;
	table-layout: fixed;
	text-align:center;
	font-size:0.9em;
/*	margin-bottom:5em;*/
}
.spec_table td{
	word-wrap: break-word;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	background: #FFF;
	padding: 5px;
}
.spec_table td img{
	margin:auto;
}

.spec_table td span:before{
	white-space:pre;
	content:"\A";
	font-size:smaller;
}
.spec_table th, .option_item th{
	word-wrap: break-word;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	background: #f2f2f2;
	font-weight:normal;
	z-index:1;
}
.spec_table th{
	position: sticky;
	top: 0;
	left: 0;
}
.option_item th{
	top: auto;
	left: auto;
}

/*----------1行目目----------*/
.spec_table tr:first-child th{
	border-top: 1px solid #999;
	width:auto;/*スペック表示セル幅*/
	min-width:30em;/*はみ出すときの最小幅設定*/
	max-width:70em;/*はみ出さないときの最大幅設定*/
}

/*----------(1,1)----------*/
.spec_table tr:first-child th:first-child{
	width:15em;/*項目表示セル幅*/
	min-width:15em;/*表示幅の上限*/
	z-index:2;
}

/*----------1列目----------*/
.spec_table th:first-child{
	border-left: 1px solid #999;
}

/*----------オプションの表示設定----------*/
.option_item img{
	width:100%;
	margin:auto;
	height:auto;
}
.option_item th,.option_item td {
	text-align:left;
	padding-left:2em;
	padding-right:2em;
}

.option_item th{
	background: #fff;
}

.option_item th,.option_item td,.option_item tr:first-child th,.option_item th:first-child{
	border:none;vertical-align:top;
}
.option_item tr:first-child th{
	width:20em;/*表示セル幅*/
	min-width:20em;/*はみ出すときの最小幅設定*/
	max-width:20em;/*はみ出さないときの最大幅設定*/
}
.option_item tr:first-child th:first-child{
	width:20em;/*項目表示セル幅*/
	min-width:20em;/*表示幅の上限*/
	z-index:2;
}



/*---SP表示-----------------*/
@media (max-width:768px){
	.table_content >.inner{
		width:90%;
		margin-left:5%;
	}
	.spec_table table{
		font-size:2vw;
		width:100em;/*項目セル幅10em,スペック表示列幅30em×列数3*/

	}
	.spec_table tr:first-child th{
		width:30em;/*スペック表示セル幅*/
	}

	.spec_table tr:first-child th:first-child{
		width:10em;/*項目セル幅*/
		z-index:2;
	}
	.option_item tr:first-child th:first-child{
		width:20em;/*項目表示セル幅*/
		min-width:20em;/*表示幅の上限*/
	}

}
/*===============================================
	問合せ・ダウンロード
	
===============================================*/

.download_area{background-color:rgb(var(--base_color));margin-top:3em;}
.download_area >.inner{
	display:flex;
	width:70%;
	margin-left:15%;
	margin-bottom:3em;
	padding-top:3em;
	padding-bottom:3em;
	text-align:center;
	h2{/*text-align:center;*/margin-bottom:2em;}
}
.container:has(.download_btn){
	width:100%;
}

ul.download_btn{
	width:100%;
	flex-wrap:wrap;
	padding:0;
	list-style:none;
	text-align:center;
	margin-top:2em;
}
ul.download_btn li{
	display:inline-block;
	position:relative;
	top:0;
	width:30%;
	height:8em;
	vertical-align:top;
	margin:0 1%;
}

ul.download_btn li a{
	display:block;
	width:100%;height:100%;
	transition:.5s;
	border:1px solid #bbb;
	border-radius:0.5em;
	background-color:rgba(var(--main_color),1);
	h3{color:#fff;}
}
ul.download_btn li a >div{
	padding-top:1em;
	height:100%;
}
ul.download_btn li a >div >img{
	width:3.5em;
	height:auto;
	margin:0 auto;
}

ul.download_btn li a.non_active{
	background:#ddd;
}
ul.download_btn li a:not(.non_active):hover{
	border-radius:0.5em;
	background:rgba(var(--main_color),0.5);
	h3,p{color:#fff;}
	transition:.5s;
}
/*---SP表示--------------------*/
@media (max-width:768px){
	.download{
		width:100%;
		top:0em;
	}
	.download >.inner{
		width:90%;
		margin-left:5%;
	}
	ul.download_btn li{
		display:block;
		width:100%;
		height:5em;
		margin-bottom:0.3em;
	}
	ul.download_btn li a >div{
		padding-top:0;
	}
	ul.download_btn li a > div > h3{
		margin:0;
		float:left;
		margin-left:1.5em;
		margin-top:1.2em;
	}


	ul.download_btn li a >div >img{
		width:auto;
		height:100%;
		margin-left:2em;
		float:left;
	}

	ul.download_btn li .text_area{
		padding-top:0.5em;
	}
	ul.download_btn li a.non_active{
		display:block;
		width:100%;height:100%;
		transition:.5s;
		color:#333333;
/*		background-color:transparent;*/
	}

	ul.download_btn li a:not(.non_active):hover{
		opacity:1;
		color:#333333;
	}
}