/*
**	Common 7 - for Responsive Web Designe
**	cmmn7.css
**
** 2017.10.6
** 2018.3.1
** 2025.5.12	入れ子対応
*/
html{scroll-behavior:smooth;}
body{
margin:0;padding:0;
font: 13px/1.4 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
*{box-sizing: border-box;}
.row::after{
	content:"";
	clear:both;
	display:table;
}
a{
	color:#06C;
	&.hv{
		text-decoration:none;
		&:hover{text-decoration:underline;}
	}
	&.uhv:hover{text-decoration:none}
	&.nor{
		color:black;
		text-decoration:none;
		&:hover{color:#06C;}
	}
}

/*ゆっくり開閉*/
.animatedOC{
	transition:height .2s linear;
	overflow:clip;
}
#second{
	h3:has(.Collapsible-Wrapper){
		cursor:pointer;
		&:hover{background-color:white;}
	}
}

/*Log-in Menu*/
#lMenu{
	list-style-type:none;
	margin:0 60px 0 0;
	padding:0;
	overflow:hidden;	/*この要素を削除すると表示しない*/
	background-color:white;

	& li{
		float:right;
		& a{
			display:block;
			height:2.1em;
			margin:.5em 1em -.5em 0;
			color:#06C;
			text-align:center;
			text-decoration:none;
			&:hover{text-decoration:underline;}
		}
	}
}

/* Header background */
#header{
	background:#FFF url("/Img/gbgs5v.png") bottom repeat-x;
	& hr{margin:0}
}

/*Logo*/
#logo{width:100%;border-collapse:collapse;}
#comLogo{
	width:270px;
	height:42px;
	margin-top:5px;
	background:url("/Img/TrustSS-logo.svg") no-repeat;
	background-size:100% auto;
}

/*Tel & Fax*/
#TelFax{
	padding:5px 10px 5px 5px;
	font-weight:bold;
	font-size:110%;
	line-height:1.6;
	text-align:right;
	& div{line-height:1.2}
}

/*Main Menu*/
#mMenu{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;	/*この要素を削除すると表示しない*/

	& a{
		color:black;
		text-align:center;
		text-decoration:none;
	}
}

/*Main Menue for mobile*/
#moMenu{
	position:fixed;	/*"static" is the default*/
	top:0; right:0;
	padding:4px 12px;
	background-color:#426fbf;
	color:#FFF;
	cursor:pointer;
	font-size:180%;
	opacity:.8;

	& a{
		color:#FFF;
		text-decoration:none;
	}
}

/*Company-Image*/
#comImg{
	width:100%;
	height:80px;
	border:1px solid #C6D4EC;
	background:#FFF url("/Img/im8-s.jpg") center center no-repeat;
	background-size:calc(100% - 4px) 74px;
}

/*パンくずリスト*/
#breadcrumbs{
	padding:2px 10px;
	font-size:90%;

	& a{
		color:#06C;
		text-decoration:none;
		&:hover{color:#EF7828;}
	}
}

/*他のページへのメニュー*/
#pgMenu{
	padding:3px 7px;
	color:white;
	font-weight:bold;

	& span{
		cursor:pointer;
		padding:0 4px;
		border:2px outset #ececec;

		&:hover{border-color:orange;}
	}
}

/* Content */
#content{}
#content::after{
	content:"";
	clear:both;
	display:table;
}

/* Content/Primary */
#primary{
	float:right;
	width:100%;

	& h1{
		margin:10px 0;
		padding-left:1em;
		font-size: 14pt
	}
	& h2{
		width:100%;
		height:40px;
		margin:0;
		padding:12px 0 0 17px;
		border:1px solid #C6D4EC;
		background:url("/Img/h2Img_primary.png") left center no-repeat,url("/Img/1x3_2053AE.png") left bottom repeat-x;
		font-size:10.5px;
		white-space:nowrap;
		overflow:hidden;
	}
	& a[target=_blank]{margin-right:2px;padding-right:11px;background:url(/img/ext-lnk-b.png) no-repeat right}
	& .vtools{
		padding:20px 15px;
		border:1.5px solid #FF8C00;
		& img{
			float:right;
			margin-left:1em;
		}
		&::after{content:"";clear:right;display:table;}
	}
	& .b130{font-size:130%;font-weight:bold}
	& .b110{font-size:110%;font-weight:bold}
}

.buyNow{
	display:inline-block;
	width:88px;
	border:1px solid #B1770B;
	background:url("/img/buyNowBgOrange1x23.png") repeat-x;
	background-size:contain;
	color:#000;
	text-align:center;
	text-decoration:none;
}
.buyNow:hover,.buNow:focus{
	border-color:#0075B0;
	color:#FFF;
	background:url("/img/buyNowBgBlue1x23.png") repeat-x;
	background-size:contain;
}

/* Content/Secondary */
#second{
	float:left;
	padding:5px;
	background-color:#F5F5F5;

	& h3{
		width:100%;
		height:40px;
		margin:0;
		padding:12px 0 0 20px;
		border:1px solid #C6D4EC;
		background:url("/Img/h3Img_second.png") left center no-repeat,url("/Img/1x3_688CCC.png") left bottom repeat-x;
		font-size:12px;
		white-space:nowrap;
		overflow:hidden;

		/*2025.10.4 Add*/
		& .Collapsible-Wrapper{
			display:grid;
			grid-template-columns: 1fr 20px;
		}
		& .Box-Left{
			overflow:hidden;
			grid-column-start: 1;
			grid-column-end: 2;
		}
		& .Box-Right{
			padding:0 3px;
			grid-column-start: 2;
			grid-column-end: 2;
		}
	}
	& ul{
		list-styl-type:none;
		margin:0;
		padding:0;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		& li{padding:.5em 0 0 10px;}
	}
	& a{
		display:block;
		padding-left:8px;
		color:#222;
		text-decoration:none;
	}
	& a:hover,& a:focus{color:#ef7828;}
	& li a{
		padding-left:5px;
		font-size:12px;
	}
}

/* Footer */
#footer{
	margin:1px;
	padding:2px;
	border:2px none gray;
	border-style:solid none none;
	font-size:80%;
	text-align:center;
}

/* For mobile phones: (less than 450px) */
/* Small Screen */
[class*="col-"]{width:100%;}
.small-scrn{display:block}
.w450-scrn{
	display:block;
	& a:any-link{text-decoration:none;}
}
.medium-scrn,.large-scrn{display:block}
.ov-small-scrn,.ov-w450-scrn,.ov-medium-scrn{display:none}
/*.lt-w450-scrn,.lt-medium-scrn,.lt-large-scrn{display:block}*/

#header{padding-bottom:3px;}	/*「メニュー」が表示されているときに高さに余裕を持たせる*/

/*Main Menu*/
#mMenu{
	& li{width:235px;}
	& a{
		display:none;
		margin:1px 0;
		padding:7px 0 7px 10px;
		border:1px solid #000;
		text-align:left;
	}
	& a:hover,& a:focus{}
}

/*Slide-in Main Menu*/
#sipMenu{
	position:absolute;

	& a.none{
		cursor:default;
		color:gray;
		border-color:gray;
	}
}
#simMenu{
	position:fixed;
	top:0;
}
:is(#simMenu,#sipMenu){
	display:none;
	border:1px solid black;
	background-color:#FFF;
	x-index:5;

	& h3{
		margin:0;
		padding:12px 0 8px;
	}
	& ul{
		list-styl-type:none;
		margin:0;
		padding:0;
		white-space:nowrap;
		overflow:hidden;
	}
	& .cls-btn{
		padding:5px;
		cursor:pointer;
		text-align:right;
	}
	& a{
		display:block;
		margin:1px;
		padding:12px;
		border:1px solid skyblue;
		color:#06C;
		text-decoration:none;

		&:hover {
			color:#ef7828;
			border-color:orange;
		}
	}
}

/*Slide in page Menu*/
div.overPane{
	display:none;
	position:fixed;
	top:0;
	width:100%;
	height:100%;
	background-color:black;
	opacity:.2;
	x-index:4;
}
#sipMenu{
	& ul li{padding-left:10px;}
	& a{padding:12px 0 12px 8px;}
	& li a{
		padding-left:5px;
		font-size:12px;
	}
}

@media only screen and (min-width: 450px){
	.small-scrn{display:none}
	.ov-small-scrn{display:block}
	#logo td:first-child{padding-left:20px}
	#comLogo{
		width:383px;
		height:60px;
		background-size:383px 60px;
	}
	#primary h2{
		padding:9px 0 0 23px;
		font-size:14px;
	}
}

/* Medium Screen */
@media only screen and (min-width:600px){
	.w450-scrn{display:none}
	.ov-w450-scrn{display:block}

	#mMenu{
		display:block;
		& li {float:left;}
		& li:nth-child(1){width:38%}
		& li:nth-child(2){width:20%}
		& li:nth-child(3){width:20%}
		& li:nth-child(4){width:10%}
		& li:nth-child(5){width:12%}
		& a{
			display:block;
			margin:1px;
			padding:5px 0 0;
			border-style:none;
			border-bottom:#426fbf 2px solid;
			text-align:center;

			&:hover{border-bottom:#ef7828 2px solid;}
		}
	}

	#lMenu{margin:0}
	#comImg{background-image:url("/Img/im8.jpg");}
	#primary{width:100%;padding:0 10px;}
}

/* Large Screen */
@media only screen and (min-width:992px){
	.medium-scrn {display:none}
	.ov-medium-scrn {display:block}

	#header{padding-bottom:0;}	/*「メニュー」が表示されているときの高さ余裕を削除*/
	#primary{
		width:75%;padding:0 10px 0 25px;
		& h1{font-size:16pt}
		& h2{
			padding:6px 0 0 23px;
			font-size:18px;
		}
	}
	#second{
		width:25%;
		& h3{
			padding:9px 0 0 20px;
			font-size:16px;
		}
		& li{
			& a{
				padding-left:15px;
				background:url("/Img/lit.png") 0 35% no-repeat;
				font-size:14px;

				&:hover{background-position-x:.4rem;}
				&.none{
					cursor:default;
					color:gray;
					background-image:none;
				}
			}
		}
		& ul a.me{
			cursor:default;
			background:#C6D4EF none;
		}
	}
}
/* Small Screen */
@media only screen and (max-width:992px){
	.Collapsible-Wrapper img[data-oc]{display:none;}
}