@charset "utf-8";
/*
@import url("/fuzoku.common.css");
*/
/* CSS Document */
body {
	font-size: 100%;
}

#qanda table {
	#border-spacing: 1px;
	#background-color: #ccc;
}
#qanda table th {
	//background-color: #fafafa;
	color: #333333;

}
#qanda table td {
	word-wrap: break-word;
}
#qanda table td input {
	box-sizing: border-box;
}
#main .i {
	font-size: small;
}
#foot {
	box-sizing: border-box;
	position: fixed;
	bottom: 0px;
	background-color: #FFFFFF;
	display: block;
	//min-width: 300px;
	//max-width: 600px;
		left: 0;
		right: 0;
	width: 100%;
	height: 36px;
	border-top: 1px solid #cccccc;
		margin-left: auto;
		margin-right: auto;
}

table {
	border-spacing: 0px;
	border: 1px solid #cccccc;
	background: #cccccc;
	width: 100%;
}
table thead {
	background: #fafafa;
}
table thead th {
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	//padding: 3px;
}
table thead th:last-child {
	border-right: 0px solid #cccccc;
}

table tbody {
	background: #ffffff;
}
table tbody td {
	
	border-right: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
	word-wrap: break-word;
	//padding: 3px;
}
table tbody td:last-child {
	border-right: 0px solid #cccccc;
}
table tbody tr:first-child td {
	border-top: 0px solid #cccccc;
}
table tbody td input['type=text'] {
	box-sizing: border-box;
	display: block;
}
.limit {
  /* テーブルのレイアウトアルゴリズムを固定に */
	//width: 100%;
	//max-width: 100%;
	max-height: 300px;
  //position: relative;
  overflow: auto;
	-webkit-overflow-scrolling: touch;
//	display: block;
	border: 1px solid #cccccc;
	z-index: 0;
}
.limit table {
	border: 0px solid #cccccc;
	right: 0;
  //table-layout: fixed;
	//white-space: nowrap;
	position: static;
	//width: 100%;
	z-index: 0;
}
.limit thead {
	box-shadow: -1px 2px 2px 0px rgba(200, 200, 200, 0.5);
	white-space: nowrap;
	top: 0px;
	left: 0px;
  position: sticky;
	z-index: 1;
	width: 100%;
}
.limit thead th {
	//border-top: 0px solid #cccccc;
	//border-right: 1px solid #cccccc;
}
.limit tbody {
	white-space: nowrap;
  //position: sticky;
  //height: 200px; /* スクロールさせたい高さを指定 */
  //display: block;
  //position: absolute;
	z-index: 0;
}
.number {
	font-size: small;
}
.number b {
	font-size: medium;
	
}
.result {
  /* テーブルのレイアウトアルゴリズムを固定に */
	//width: 100%;
	//max-width: 100%;
	//max-height: 300px;
  //position: relative;
  overflow: auto;
	-webkit-overflow-scrolling: touch;
//	display: block;
	border: 1px solid #cccccc;
	z-index: 0;
}
.result table {
	border: 0px solid #cccccc;
	right: 0;
  //table-layout: fixed;
	//white-space: nowrap;
	position: static;
	//width: 100%;
	z-index: 0;
}
.result thead {
	box-shadow: -1px 2px 2px 0px rgba(200, 200, 200, 0.5);
	white-space: nowrap;
	top: 0px;
	left: 0px;
  position: sticky;
	z-index: 1;
	width: 100%;
}
.result thead th {
	//border-top: 0px solid #cccccc;
	//border-right: 1px solid #cccccc;
}
.result tbody {
	white-space: nowrap;
  //position: sticky;
  //height: 200px; /* スクロールさせたい高さを指定 */
  //display: block;
  //position: absolute;
	z-index: 0;
}
.result td.public {
	text-align: center;
}
.result td.update {
	font-size: small;
	text-align: center;
}
.paging {
	
}
.paging ul {
	display: flex;
	margin: 5px 0px;
	padding: 0px;
	gap: 4px;
}
.paging ul li {
	list-style: none;
	//display: flex;
	//flex-direction: column;
	/margin: 4px;
	/padding: 2px 4px;
}
.paging ul li a {
	border: 1px solid #cccccc;
	padding: 2px 4px;
}
.paging ul li b {
	border: 1px solid #cccccc;
	padding: 2px 4px;
}
/* For Smartphone */
@media screen and (max-width: 899px) {
	#head {
		position: fixed;
		top: 0px;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		display: block;
		//min-width: 300px;
		//max-width: 600px;
		width: 100%;
		height: 36px;
		margin-left: auto;
		margin-right: auto;
		border-bottom: 1px solid #CCCCCC;
		//border: 1px solid #CCCCCC;
		z-index: 1;
		//padding-left: 40px;
		word-wrap: break-word;
		//left: 50%;
		//transform: translateX(-50%);
	}
	#head h1 {
		position: absolute;
		//display: block;
		top: 0px;
		left: 0px;
		width: 36px;
		height: 36px;
		margin: 0px;
		padding: 0px;
		#background-image: url(https://kanraku.info/image?url=https://kanraku.info/logo_72_72.png&max=36);
		background-image: url('/img/kanraku.png');
		background-size: cover;
		background-repeat: no-repeat;
		//background-position: center center;
		text-indent: -1000px;
		//transform: translateX(max(-220px, -160px));
		//transform: translateX(max(-220px, 50%));
		//zoom: 100%;
		//z-index: 1;
	}
	#head h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 36px;
		height: 36px;
		margin: 0px;
		padding: 0px;
	}
	#head h2 {
		//display: block;
		position: absolute;
		width: 36px;
		height: 36px;
		top: 4px;
		left: 40px;
		//bottom: 50%;
		margin: 0px;
		z-index: 1;
	}
	#head h2 a {
		//display: flex; /* ← block → flex に変更 */
		justify-content: center; /* 横中央 */
		align-items: center;     /* 縦中央 */
		//position: fixed;
		font-size: 16px;
		top: 0px;
		left: 36px;
		margin: 0px;
		height: 36px;
		width: 46px; /* ← 必須：横幅を明示しないと横方向の中央が曖昧に */
		text-align: center; /* 複数行対応などで保険 */
	}
	#main {
		//display: flex;
		min-width: 320px;
		max-width: 480px;
		width: 100%;
		position: fixed;
		top: 36px;
		left: 50%;
		//right: auto;
		//right: 210px;
		bottom: 36px;
		//margin-left: auto;
		//margin-right: auto;
		transform: translateX(-50%);
		overflow-y: auto;
		box-sizing: border-box;
	}
	#main dl {
		//border-left: 1px solid #cccccc;
		box-shadow: 0px 1px 3px #cccccc;
		margin: 10px 5px;
		//padding: 0px;
		box-sizing: border-box;
	}
	#main dl dt {
		color: #333333;
		font-weight: bold;
		//font-size: small;
		margin: 0px;
		padding: 5px;
	}
	#main dl dd {
		//box-sizing: border-box;
		margin: 0px;
		padding: 5px;
	}
	#main form input[type="text"] {
		box-sizing: border-box;
	}
	#main .r:after {
		content: "*";
		color: #ff0000;
	}
	#main .code {
		min-width: 24ch;
		max-width: 48ch;
		width: 24ch;
		box-sizing: border-box;
	}
	#main .code:before {
		content: "@";
	}	
	#main form .submit {
		display: block;
		margin: auto;
	}
	#navi {
		display: none;
	}
	#navi.active {
		display: block;
		position: fixed;
		top: 36px;
		right: 0px;
		bottom: 0px;
		width: 160px;
		height: auto;
		background: #fff;
		padding: 10px;
		padding: 10px;
		border-radius: 4px; 
		box-shadow: -2px 0 10px rgba(0,0,0,0.1);
		//transition: right 0.3s ease;
		z-index: 20;
		overflow-y: scroll;
	}
	#_navi {
		top: 2px;
		right: 2px;
		width: 32px;
		height: 32px;
		background-image: url('/img/icon.burger.png');
		background-repeat: no-repeat;
		background-position: center center;
		//background-size: 32px auto;
		border: 1px solid #ccc;
		border-radius: 4px; 
		background-color: #fff;
		position: fixed;
		cursor: pointer;
		//transition: background-image 1.3s ease, opacity 0.3s ease;
		//transform: translateX(min(140px, 180px));
		//margin-left: 180px;
		//margin-right: 0px;
		//opacity: 1;
		z-index: 1000;
	}
	#_navi.active {
		background-image: url('/img/icon.close.png');
		//background-color: rgba(255, 255, 255, 0.5); /* 半透明の白色を背景色として指定 */
		background-blend-mode: multiply; /* ブレンドモードを指定 */
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 80%;
		//transition: background-image 0.5s ease;

	}

	#search {
		position: fixed;
		display: none;
		top: 50px;
		left: 50%;
		right: 50%;
		bottom: 50px;
		width: 300px;
		height: auto;
		background: #ffffff;
		padding: 0px;
		margin: 0px;
		border-radius: 5px; 
		box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5);
		//transition: right 0.3s ease;
		transform: translate(-50%, 0);
		z-index: 1000;
		overflow-y: scroll;
	}
	#search.active {
		display: block;
	}

	#_search {
		top: 2px;
		right: 34px;
		width: 32px;
		height: 32px;
		background-image: url('/img/icon.filter.png');
		background-repeat: no-repeat;
		background-position: center center;
		//background-size: 32px auto;
		border: 1px solid #ccc;
		border-radius: 4px; 
		background-color: #fff;
		position: fixed;
		cursor: pointer;
		//transition: background-image 1.3s ease, opacity 0.3s ease;
		//transform: translateX(min(140px, 180px));
		//margin-left: 180px;
		//margin-right: 0px;
		//opacity: 1;
		z-index: 20;
	}

	#overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.1s ease;
		z-index: 10;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px); /* Safari対応 */
	}
	#overlay.active {
		opacity: 1;
		display: block;
		pointer-events: auto;
	}
}

/* For Desktop */
@media screen and (min-width: 900px) {

	#head {
		position: fixed;
		top: 0px;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		display: block;
		min-width: 600px;
		max-width: 900px;
		width: 100%;
		height: 36px;
		margin-left: auto;
		margin-right: auto;
		border-bottom: 1px solid #CCCCCC;
		//border: 1px solid #CCCCCC;
		z-index: 1;
		//padding-left: 40px;
		word-wrap: break-word;
		//left: 50%;
		//transform: translateX(-50%);
	}
	#head h1 {
		position: absolute;
		//display: block;
		top: 0px;
		left: 0px;
		width: 36px;
		height: 36px;
		margin: 0px;
		padding: 0px;
		#background-image: url(https://kanraku.info/image?url=https://kanraku.info/logo_72_72.png&max=36);
		background-image: url('/img/kanraku.png');
		background-size: cover;
		background-repeat: no-repeat;
		//background-position: center center;
		text-indent: -1000px;
		//transform: translateX(max(-220px, -160px));
		//transform: translateX(max(-220px, 50%));
		//zoom: 100%;
		//z-index: 1;
	}
	#head h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 36px;
		height: 36px;
		margin: 0px;
		padding: 0px;
	}
	#head h2 {
		//display: block;
		position: absolute;
		width: 36px;
		height: 36px;
		top: 4px;
		left: 40px;
		//bottom: 50%;
		margin: 0px;
		z-index: 1;
	}
	#head h2 a {
		//display: flex; /* ← block → flex に変更 */
		justify-content: center; /* 横中央 */
		align-items: center;     /* 縦中央 */
		//position: fixed;
		font-size: 16px;
		top: 0px;
		left: 36px;
		margin: 0px;
		height: 36px;
		width: 46px; /* ← 必須：横幅を明示しないと横方向の中央が曖昧に */
		text-align: center; /* 複数行対応などで保険 */
	}
	#head h3 {
		//display: block;
		position: absolute;
		width: 36px;
		height: 36px;
		top: 6px;
		left: 74px;
		//bottom: 50%;
		margin: 0px;
		z-index: 1;
	}
	#head h3 a {
		//display: flex; /* ← block → flex に変更 */
		justify-content: center; /* 横中央 */
		align-items: center;     /* 縦中央 */
		//position: fixed;
		font-size: 16px;
		top: 0px;
		left: 72px;
		margin: 0px;
		height: 36px;
		width: 46px; /* ← 必須：横幅を明示しないと横方向の中央が曖昧に */
		text-align: center; /* 複数行対応などで保険 */
	}
	#main {
		width: 500px;
		position: absolute;
		top: 36px;
		left: 50%;
		//right: 210px;
		bottom: 36px;
		padding-bottom: 36px;
		transform: translateX(-250px);
		overflow-y: auto;
	}


	#main h1 {
		/*
		padding: 3px;
		background: linear-gradient(#FFFFFF, #FAFAFA);
		border-top-width: 2px;
		border-top-style: solid;
		border-top-color: #CC99FF;
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #CCCCCC;
		border-right-width: 1px;
		border-right-style: solid;
		border-right-color: #CCCCCC;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #CCCCCC;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		*/
	}
	#main h1 span {
		font-size: 50%;
		font-weight: normal;
		#padding-top: 5px;
		margin-bottom: 10px;
	}
	#main h1 span:before {
		content: " < ";
	}
	#main h2 {
		padding: 5px;
		background: linear-gradient(#FFFFFF, #FAFAFA);
		border-top-width: 2px;
		border-top-style: solid;
		border-top-color: #CC99FF;
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #CCCCCC;
		border-right-width: 1px;
		border-right-style: solid;
		border-right-color: #CCCCCC;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #CCCCCC;
		boader-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	#main h2 span {
		font-size: 50%;
		font-weight: normal;
		#padding-top: 5px;
		margin-bottom: 10px;
	}
	#main h2 span:before {
		content: " < ";
	}

	#main h3 span {
		font-size: 50%;
		font-weight: normal;
		#padding-top: 5px;
		margin-bottom: 10px;
	}
	#main h3 span:before {
		content: " < ";
	}

	#main > dl {
		border-left: 1px solid #cccccc;
	}
	#main dl dt {
		margin: 5px;
	}
	#main dl dd {
		margin: 5px;
	}
	#main .result	{
		overflow: auto;
    white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		display: block;
		//background-color: #FF9999;
		//border-spacing: 1px;
		//width: 100%;
		//height: 200px;
		//position: sticky;
		
	}
	
	#main table	{
		//overflow: auto;
    //white-space: nowrap;
		//-webkit-overflow-scrolling: touch;
		//display: block;
		background-color: #cccccc;
		border-spacing: 1px;
		//width: 100%;
		//height: 100px;
		position: static;
		//border: 1px solid #000000;
		
	}
	#main thead	{
		position: sticky;
		top: 0px;
		left: 0px;
		bottom: 0px;
		//z-index: 50;
		font-size: small;
	}
	#main table thead tr {
		//border: 10px solid #000000;
	}
	#main table thead tr th {
		//border: 1px solid #FF9999;
		background-color: #fafafa;
		padding: 1px 5px;
		text-align: center;
	}
	#main tbody	{
		//border: 1px solid #FF9999;
		//border-color: #FF9999;
		//background-color: #FF9999;
		//border-spacing: 1px;
		//white-space: nowrap;
    //-webkit-overflow-scrolling: touch;
		//display: block;
		//width: 100%;
		//overflow-y: scroll;
    
	}
	#main table tbody tr {
		background-color: #FFFFFF;
	}
	#main table tbody tr td {
		padding: 4px;
	}
	
	#navi {
		width: 200px;
		position: absolute;
		top: 36px;
		left: 50%;
		transform: translateX(-460px);
	}
	
	#search {
		box-sizing: border-box;
		width: 200px;
		position: absolute;
		top: 36px;
		left: 50%;
		transform: translateX(250px);
	}
	#search dl {
		margin: 5px;
	}		
	#search dl dt {
		margin: 5px;
	}		
	#search dl dd {
		margin: 5px;
	}		

}
/* For Desktop */