/*
**	vtools/sample.css
**	(サンプル用CSS)
**
** 2017.10.12
** 2025.5.16	Nesting
*/

#header {padding-top:5px;}
#breadcrumbs {margin:2px 0;}

p{
	margin:0;padding-bottom:1em;
	&.sample-links{display:none;}
}
.m1em{margin:1em 1em 2em 1em;}
.clearFixL::after,.clearFixR::after{
	content:"";
	clear:both;
	display:table;
}
.clearFixL img{float:left; margin-right:1em;}
.clearFixR img{float:right; margin-left:1em;}
.dlSite {
	line-height:2;
	margin-left:8.33%;
}
table.sample-links{
	margin-bottom:1em;

	& th{text-align:left;}
	& td{
		border:1px solid #06C;
		text-align:center;

		&:empty{border-style:none;}
	}
	& a {
		display:inline-block;
		text-decoration:none;
	}
}

/*画像をModalに表示*/
.waImg{
	transition:.3s;
	border-radius:1px;
	cursor:pointer;

	&:where(:hover,:focus){opacity:.7;}
}
.modal {	/*Background*/
	display:none;
	position:fixed;
	z-index:1;
	padding:100px;
	left:0; top:0; width:100%; height:100%;
	overflow:auto;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,.8);
}
.close {	/*Close Button*/
	position:absolute;
	top:15px; right:35px;
	color:#f1f1f1;
	font-size:40px;
	font-weight:bold;
	transition:0.3s;

	&:where(:hover,:focus){color:#bbb;text-decoration:none;cursor:pointer;}
}
.modal-content {	/*Modal Image*/
	margin:auto;
	display:block;
	width:100%;
	max-width:819px;
	border-radius:.61%;
}
.caption {
	margin:auto;
	display:block;
	width:80%;
	max-width:819px;
	height:150px;
	padding:10px 0;
	color:#fff;
	text-align:center;
}
.modal-content,#waModal .caption{	/*Animation*/
	-webkit-animation-name:zoom;
	-webkit-animation-duration:.4s;
	animation-name:zoom;
	animation-duration:.4s;
}
@-webkit-keyframes zoom {
	from{-webkit-transform:scale(0)}
	to{-webkit-transform:scale(1)}
}
@keyframes zoom {
	from{transform:scale(0)}
	to{transform:scale(1)}
}

/*Primaryの設定*/
#fol{
	margin:10px 0 5px 1em;
	border:1px solid blue;
}
#fol td{
	vertical-align:top;
	padding:3px 8px;
}
#smplLi{line-height:1.8;margin:1em 0 0 1em;}
#smplLi tr td{
	&:first-child a::before{content:url("/img/dot7x7.png");}
	&:first-child a{
		color:black;
		text-decoration:none;
	}
}
/*for Stamp*/
#smplLiS{
	line-height:1.0;margin:0 0 0 1em;

	& tr td:first-child{padding-top:1em;}
/*	& tr td:nth-child(2){}	*/
}
#smplLiS_ tr td:first-child a{
	color:black;
	text-decoration:none;
}
#primary a.blk{
	color:black;text-decoration:none;
	&:hover{color:#06C;text-decoration:underline;}
}
#waImg100 {border-radius:1px;}
pre.xml {
	overflow:auto;
	margin:.2em;
	padding:1em;
	border:1px solid #4264BF;
	background-color:#Fee;
}
#primary{
	& pre.code{
		overflow:auto;
		padding:1em;
		border:1px solid #4264BF;
		background-color:#FFC;

		& span{
			&.red{color:#A31515}
			&.green{color:#008000}
			&.blue{color:Blue}
			&.sky{color:#2B91AF}
		}
	}
	& table.code{
		margin-left:1em;
		& td{vertical-align:top;}
		& :where(table.wide-scrn,table.narrow-scrn){margin-left:1em;}
		& table.wide-scrn tr td:first-child {white-space:nowrap;}
		& > tr td:first-child {
			padding-right:.8em;
			font-weight:bold;
			white-space:nowrap;
		}
		& table.ext{
			border-collapse:collapse;
			& th {background-color:#6CF;}
			& td {border:1px solid #6CF;}
		}
	}
	& #errCode tr td:first-child {padding-right:1em;}
	& .w-gry{border:1px solid gray;}
	& .w-gry:hover{border-color:#06C;}
	& pre.xml {
		overflow:auto;
		width:100%;
		word-wrap:break-all;
		overflow-warp:break-all;
		margin-left:1em;
		padding:5px 0 0 5px;
		border:1px solid #06C;
	}
/*	& table.winApp {}	*/
	& table.winApp td{vertical-align:top;}
	& .s-ref{
		line-height:2;
		margin:.5em 0 0 2em;
	}
}

/*
**	Media Queries
*/

/* mobile screen */
.narrow-scrn {display:block}
.wide-scrn{display:none}
.w630-scrn{display:none}
.w750-scrn{display:none}
.lt-w630-scrn{display:block}
.lt-w750-scrn{display:block}

/* 450px Screen */
@media only screen and (min-width:450px){
	.narrow-scrn{display:none}
	.wide-scrn{display:block}
}

/* Medium Screen */
@media only screen and (min-width:600px){
}
@media only screen and (max-width:600px){
	.modal{padding-left:10px;padding-right:10px;}
}

/* 630px Screen */
@media only screen and (min-width:630px){
	.w630-scrn{display:block}
	.lt-w630-scrn{display:none}
}

/* 750px Screen */
@media only screen and (min-width:750px){
	.w750-scrn{display:block}
	.lt-w750-scrn{display:none}
}

/* Large Screen */
@media only screen and (min-width:992px){
	p.sample-links{display:block;}
	table.sample-links{display:none;}
}