@charset "utf-8";
/* CSS Document */
* {
	//font-weight: normal;
	//font-family: "Roboto", "Noto Sans JP";
	//font-family: "Arial";
	//font-size: 15px;
}
html {
	//font-weight: normal;
	//font-family: "Noto Sans JP", "Roboto";
	//font-size: 62.5%;
}
body {
	font-family: "Roboto";
	//font-family: "Noto Sans JP", "Roboto";
	//margin-top: 0px;
	//margin-left: auto;
	//margin-right: auto;
	//display: block;
	//margin-left: auto;
	//margin-right: auto;
	//position: relative;
	//font-size: 100%;
	//width: 100%;
	//font-size: 15px;
	//font-family: sans-serif;
	//border: thin solid #CCCCCC; 
	//overflow: hidden;
	//background-color: #fafafa;
	//display: flex;
}
h1 {
	//font-weight: normal;
	//font-family: "Noto Sans JP", "Roboto";
}
rt {
	//font-size: xx-small;
	font-weight: normal;
}
select {
}
table {
	border-spacing: 0px;
	border: 1px solid #cccccc;
	background: #cccccc;
	width: 100%;
	font-weight: normal;
}
table thead {
	background: #fafafa;
	font-weight: normal;
}
table thead th {
	font-weight: normal;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	//padding: 3px;
	box-sizing: border-box;
}
table thead th:last-child {
	border-right: 0px solid #cccccc;
}

table tbody {
	font-weight: normal;
	background: #ffffff;
}
table tbody td {
	box-sizing: border-box;
	
	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: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
	white-space: nowrap;
	top: 0px;
	left: 0px;
  position: sticky;
	width: 100%;
	z-index: 1;
}
.limit thead th {
	//border-top: 0px solid #cccccc;
	//border-right: 1px solid #cccccc;
	font-size: small;
	//z-index: 3;
}
.limit tbody {
	white-space: nowrap;
  //position: sticky;
  //height: 200px; /* スクロールさせたい高さを指定 */
  //display: block;
  //position: absolute;
	z-index: 0;
}

@media screen and (max-width: 600px)  {
	body {
		min-width: 300px;
		max-width: 600px;
		width: 100%;
		//margin: auto;
		margin-left: auto;
		margin-right: auto;
		//border-left: 1px solid #CCCCCC;
		//border-right: 1px solid #CCCCCC;
		//position: relative;
		//height: 100%;
		//display: flex;
		//overflow: hidden;
		display: flex;
		justify-content: center;
	}
	#head {
		position: fixed;
		top: 0;
		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: 2;
		//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: -9999px;
		//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: grid; /* ← block → flex に変更 */
		position: fixed;
		top: 0px;
		left: 36px;
		padding: 0px;
		margin: 0px;
		//z-index: 1;
		text-align: center; /* 複数行対応などで保険 */
		//height: 36px;
	}
	#head h2 a {
		box-sizing: border-box;
		display: grid;
		//width: 72px; /* ← 必須：横幅を明示しないと横方向の中央が曖昧に */
		margin: auto;
		padding-left: 5px;
		padding-right: 5px;
		height: 36px;
		text-decoration: none;
		vertical-align: middle;
		justify-content: center; /* 横中央 */
		align-items: center;     /* 縦中央 */
		border-right: 1px solid #cccccc;
		font-size: 18px;
	}
	#foot {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 36px;		
		background-color: #ffffff;
		border-top: 1px solid #cccccc;
		display: block;
		z-index: 2;
	}
	#path {
		position: fixed;
		top: -1000px;
		left: 0px;
		padding: 2px;
		overflow-x: scroll;
		background-color: #FFF;
		border-bottom: solid 1px #CCC;
		white-space: nowrap;
		display: block;
		width: 100%;
		font-size: 10px;
		z-index: 2;
	}
	#path ol {
		margin: 1px;
		padding: 0px;
	}
	#path ol li {
		display: inline-table;
		padding: 0px;
		margin: 0px;
	}
	#path ol li:after {
		content: ">";
		color: #666666;
		margin-left: 5px;
	}
	#path ol li:last-child:after {
		content: "";
	}
	#path ol li a {
		color: #0066FF;
	}
	#main {
		min-width: 300px;
		max-width: 600px;
		width: 100%;
		height: auto;
		position: fixed;
		//display: block;
		top: 36px;
		left: 0px;
		right: 0px;
		bottom: 36px;
		//padding-top: 36px;
		margin-left: auto;
		//margin-bottom: 36px;
		margin-right: auto;
		//padding: 5px;
		box-sizing: border-box;
		overflow-y: auto;
		/word-wrap: break-word;
		//border-left: 1px solid #cccccc;
		//border-right: 1px solid #cccccc;
		z-index: 1;
	}
	
	#main a {
		color: #0066CC;
	}
	#main a:hover {
		color: #FF0000;
	}
	#sides {
		position: fixed;
		//display: none;
		top: 50px;
		left: 50%;
		right: 50%;
		bottom: 50px;
		width: 300px;
		height: auto;
		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);
		overflow-y: scroll;		
	}
	#navi {
		position: fixed;
		display: none;
		top: 36px;
		right: 0px;
		bottom: 0px;
		width: 200px;
		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: 1000;
		overflow-y: scroll;
	}

	#navi.active {
		display: block;
	}

	#navi form dl dt {
		color: #666;
		font-size: small;
	}
	#navi form dl dd {
		margin-left: 0px;
		margin-right: 0px;
	}
	#navi form .info {
		font-size: small;
	}
	#navi form .height {
		text-align: right;
	}

	#navi forms .submit {
		//width: 120px;
		display: block;
		padding: 6px 30px;
	}



/*▼検索フォーム▼*/
	#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 h2 {
		background: #fafafa;
		display: block;
		position: sticky;
		top:  0px;
		margin: 0px;
		padding: 5px;
	}

	#search dl {
		margin: 5px;
	}
	#search dl dt {
		color: #666;
		font-size: small;
	}
	#search dl dd {
		margin-left: 0px;
		margin-right: 0px;
	}
	#search .info {
		font-size: small;
	}


	#search .button {
		background-color: #fafafa;
		position: sticky;
		#left: -10px;
		#right: -10px;
		bottom: 0px;
		//width: 100%;
		//width: 120px;
		display: block;
		padding: 5px;
		margin: 0px;
		text-align: center;
	}
	#search .submit {
		//background-color: #fafafa;
		//position: sticky;
		#left: -10px;
		#right: -10px;
		//bottom: 0px;
		//width: 100%;
		//width: 120px;
		display: block;
		padding: 2px 20px;
		margin: 0px auto;
	}
	#search .submit input {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
/*▲検索フォーム▲*/

/*▼絞込フォーム▼*/
	#filter {
		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;
	}

	#filter.active {
		display: block;
	}

	#filter h2 {
		background: #fafafa;
		display: block;
		position: sticky;
		top:  0px;
		margin: 0px;
		padding: 5px;
	}

	#filter dl {
		margin: 5px;
	}
	#filter dl dt {
		color: #666;
		font-size: small;
	}
	#filter dl dd {
		margin-left: 0px;
		margin-right: 0px;
	}
	#filter .info {
		font-size: small;
	}
	#filter .height {
		text-align: right;
	}

	#filter .button {
		background-color: #fafafa;
		position: sticky;
		#left: -10px;
		#right: -10px;
		bottom: 0px;
		//width: 100%;
		//width: 120px;
		display: block;
		padding: 5px;
		margin: 0px;
		text-align: center;
	}
	#filter .submit {
		background-color: #fafafa;
		position: sticky;
		#left: -10px;
		#right: -10px;
		bottom: 0px;
		//width: 100%;
		//width: 120px;
		display: block;
		padding: 5px;
		margin: 0px;
	}
	#filter .submit input {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
/*▲絞込フォーム▲*/

/*▼ナビアイコン▼*/
	/*▼オープン状態▼*/
	#button_navi {
		top: 2px;
		//left: max(300px, 500px);
		right: calc(100vw-20px);
		right: 2px;
		//left: auto;
		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(clamp(180px, -50%, 270px));
		//transform: translateX(max(270px, 180px));
		//transform: translateX(max(200px, 160px));
		//margin-left: 180px;
		//margin-right: auto;
		//opacity: 1;
		z-index: 20;
	}
	/*▲オープン状態▲*/
	/*▼クローズ状態▼*/
	#button_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;

	}

	#button_navi.active::before,
	#button_navi.active::after {
		content: "";
		position: absolute;
		//top: 16px;
		//left: 16px;
		width: 24px;
		height: 2px;
		//padding: 0px;
		//margin: 1px;
		background: #333;
		transform-origin: 50% 50%;
		//transition: background-image 0.5s ease;
	}

	#button_navi.active::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	#button_navi.active::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	/*▲クローズ状態▲*/
/*▲ナビアイコン▲*/

/*▼メニューアイコン▼*/
	/*▼オープン状態▼*/
	#button_menu {
		top: 2px;
		right: 2px;
		width: 32px;
		height: 32px;
		background-image: url('/menu3.svg');
		background-repeat: no-repeat;
		//background-position: center center;
		//background-size: 24px 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;
		//opacity: 1;
		z-index: 20;
	}
	/*▲オープン状態▲*/
	/*▼クローズ状態▼*/
	#button_menu.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;

	}

	#button_menu.active::before,
	#button_menu.active::after {
		content: "";
		position: absolute;
		//top: 16px;
		//left: 16px;
		width: 24px;
		height: 2px;
		//padding: 0px;
		//margin: 1px;
		background: #333;
		transform-origin: 50% 50%;
		transition: background-image 0.5s ease;
	}

	#button_menu.active::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	#button_menu.active::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	/*▲クローズ状態▲*/
/*▲メニューアイコン▲*/

/*検索アイコン*/
	/* オープン状態 */
	#button_search {
		top: 2px;
		right: 36px;
		width: 32px;
		height: 32px;
		background-image: url('/find1.svg');
		background-repeat: no-repeat;
		//background-position: center center;
//background-size: 24px 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(180px);
		//margin-left: -200px;
		//opacity: 1;
		z-index: 1000;
	}
	/* オープン状態 */

	/* クローズ状態 */
	#button_search.active {
		//background-image: none;
		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;

	}

	#button_searchs.active::before,
	#button_searchs.active::after {
		content: "";
		position: absolute;
		//top: 16px;
		//left: 16px;
		width: 24px;
		height: 2px;
		//padding: 0px;
		//margin: 1px;
		background: #333;
		transform-origin: 50% 50%;
		transition: background-image 0.1s ease;
	}

	#button_searchs.active::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	#button_searchs.active::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	/* クローズ状態 */
/*検索アイコン*/

/*絞込アイコン*/
	/* オープン状態 */
	#_filter {
		top: 2px;
		right: 72px;
		width: 32px;
		height: 32px;
		background-image: url('/img/icon.filter.png');
		background-repeat: no-repeat;
		//background-position: center center;
//background-size: 24px 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(180px);
		//margin-left: -200px;
		//opacity: 1;
		z-index: 1000;
	}
	/* オープン状態 */

	/* クローズ状態 */
	#_filter.active {
		//background-image: none;
		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;

	}


	/* クローズ状態 */
/*絞込アイコン*/

/*背景*/
	#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;
	}
/*背景*/

	/*
	.overlay { 
		filter: blur(5px);
		transition: filter 0.5s ease;
	}
	*/
	
}

@media screen and (min-width: 600px) and (max-width: 900px)  {
	body {
		//min-width: 600px;
		//max-width: 900px;
		//width: 100%;
		//margin: auto;
		margin-left: auto;
		margin-right: auto;
		//display: flex;
		//display: flex;
		//justify-content: center;
		box-sizing: border-box;
		//overflow-x: hidden;
	}
	#head {
		position: fixed;
		top: 0px;
		left: 0;
		//right: 0;
		background-color: #FFFFFF;
		display: fixed;
		min-width: 600px;
		max-width: 900px;
		width: 100%;
		height: 36px;
		border-bottom-width: thin;
		border-bottom-style: solid;
		border-bottom-color: #CCCCCC;
		z-index: 1;
		margin-left: auto;
		margin-right: auto;
		//margin: atuo;
		//transform: translateX(-50%);
		//flex: 1;
		//left: 50%;
		//transform: translateX(-50%);
		box-sizing: border-box;
	}
	#head h1 {
		position: absolute;
		display: block;
		top: 0px;
		left: 0px;
		width: 36px;
		height: 36px;
		margin: 0px;
		padding: 0px;
		background-image: url('/img/kanraku.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		text-indent: -1000px;
	}

	#head h2 {
		position: absolute;
		top: 5px;
		left: 40px;
		margin: 0px;
		font-size: 20px;
	}
	#head h2 a {
		text-decoration: none;
	}
	#head h2 a:hover{
		text-decoration: underline;
		color: #0000FF;
	}
	#main {
		box-sizing: border-box;
		//display: flex;
		position: absolute;
		//width: calc(100% - 200px); /* naviぶん差し引き */
		min-width: 400px;
		max-width: 600px;
		//width: 500px;
		top: 36px;
		left: 50%;
		//right: 50%;
		//order: 2;
		margin-left: -100px;
		//padding-right: 300px;
		bottom: 36px;
		//right: auto; 
		//transform: translateX(320px);
		//width: calc(100% - 200px); /* 残り部分で可変対応 */
		//transform: translateX(0); /* 必要に応じて微調整 */
		//overflow-y: auto;
		//background-color: #fff;
		//z-index: 3;
    //  display: flex;
    //  align-items: center;
    //  justify-content: center;
		//border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
	}
	#main .inline {
		display: flex;
	}
	#main .inline dl {
		margin: 5px;
	}
	#main .inline dt {
		font-size: small;
	}
	#main .inline dd {
		font-size: small;
		margin-left: 0;
		text-align: right;
	}
	#main .inline dd b {
		font-size: medium;
	}
	#navi {
		display: block;
		position: fixed;
		width: 200px;
		top: 36px;
		bottom: 36px;
		left: 50%;
		//right: 50%;
		//left: calc(50% - 290px);
		margin-left: -300px;
		//transform: translateX(-120px); /* navi: 0〜200px（左側） */
		border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		box-sizing: border-box;
	
		overflow: auto;
		//background-color: #f0f0f0;
		z-index: 10;
    //  display: flex;
    //  align-items: center;
    //  justify-content: center;
	}
	#navi a {
		color: #0066CC;
	}
	#navi > dl {
		background-color: #ffffff;
		//border: thin solid #CCCCCC;
		//border-radius: 5px;
		//-moz-border-radius: 5px;
		//-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
		//box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
		margin: 5px 0px 0px 5px;
	}
	#navi > dl > dt {
		margin: 5px;
		padding: 0px;
	}
	#navi > dl > dd {
		margin: 5px 5px 5px 10px;
		padding: 0px;
	}
	#search {
		display: none;
	}

	#search {
		position: absolute;
		top: 36px;
		right: 0px;
	}
	#search form dl {
		margin: 0px 5px 5px 0px;
	}
	#search form dl dt {
		font-size: small;
		margin: 0px 0px 0px 0px;
	}
	#search form dl dd {
		margin: 0px 0px 0px 0px;
	}
	#search form input[type="text"] {
		box-sizing: border-box;
	}
	
	#search form input[type="button"] {
		padding: 0px 10px 0px 10px;
		display: block;
	}
	#foot {
		position: fixed;
		bottom: 0px;
		//left: 0px;
		background-color: #FFFFFF;
		display: block;
		width: 100%;
		height: 36px;
		border-top: thin solid #CCCCCC;
		box-sizing: border-box;
		z-index: 5;
	}
/*▼検索フォーム▼*/
	#search {
		position: fixed;
		display: none;
		top: 50px;
		left: 50%;
		right: 50%;
		bottom: 50px;
		width: 300px;
		height: auto;
		background: #fff;
		padding: 10px;
		//margin: 10px;
		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;
		margin: 0px;
	}

	#search.active {
		display: block;
	}

	#search dl {
	}
	#search dl dt {
		color: #666;
		font-size: small;
	}
	#search dl dd {
		margin-left: 0px;
		margin-right: 0px;
	}
	#search .info {
		font-size: small;
	}
	#search .height {
		text-align: right;
	}

	#search .submit {
		background-color: #fafafa;
		position: sticky;
		#left: -10px;
		#right: -10px;
		bottom: -10px;
		//width: 100%;
		//width: 120px;
		display: block;
		padding: 5px;
		margin: -10px;
	}
	#search .submit input {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
/*▲検索フォーム▲*/
/*検索アイコン*/
	/* オープン状態 */
	#button_search {
		top: 2px;
		right: 36px;
		width: 32px;
		height: 32px;
		background-image: url('/find1.svg');
		background-repeat: no-repeat;
		//background-size: contain;
		//background-position: center center;
		//background-size: 24px 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(248px);
		//opacity: 1;
		//text-indent: -10000px;
		z-index: 1000;
	}
	/* オープン状態 */

	/* クローズ状態 */
	#button_search.active {
		background-image: none;
		transition: background-image 0.5s ease;

	}

	#button_search.active::before,
	#button_search.active::after {
		content: "";
		position: absolute;
		//top: 16px;
		//left: 16px;
		width: 24px;
		height: 2px;
		//padding: 0px;
		//margin: 1px;
		background: #333;
		transform-origin: 50% 50%;
		transition: background-image 0.1s ease;
	}

	#button_search.active::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	#button_search.active::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	/* クローズ状態 */
/*検索アイコン*/
/*▼ナビアイコン▼*/
	/*▼オープン状態▼*/
	#button_navi {
		display: none;
		top: 2px;
		right: 2px;
		width: 32px;
		height: 32px;
		background-image: url('/img/icon.navi.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 30px;
		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;
	}
	/*▲オープン状態▲*/
	/*▼クローズ状態▼*/
	#button_navi.active {
		background-image: url('/img/icon.close.png');
		//background-color: rgba(255, 255, 255, 0.5); /* 半透明の白色を背景色として指定 */
		background-repeat: no-repeat;
		background-position: center center;
		transition: background-image 0.5s ease;
	}

	#button_navi.active::before,
	#button_navi.active::after {
		content: "";
		position: absolute;
		width: 24px;
		height: 2px;
		background: #333;
		transform-origin: 50% 50%;
		transition: background-image 0.5s ease;
	}

	#button_navi.active::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	#button_navi.active::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	/*▲クローズ状態▲*/
/*▲ナビアイコン▲*/
/*背景*/
	#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;
	}
/*背景*/
}
@media screen and (min-width: 900px) {
	body {
		width: 920px;
		margin-left: auto;
		margin-right: auto;
		
	}
	#head {
		box-sizing: border-box;
		position: fixed;
		top: 0px;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		
		//transform: translateX(-470px);
		#right: 0px;
		background-color: #FFFFFF;
		display: block;
		width: 940px;
		height: 36px;
		border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
		z-index: 5;
	}
	#head h1 {
		position: absolute;
		display: block;
		top: 0px;
		left: 0px;
		width: 36px;
		height: 36px;
		margin: 0px;
		padding: 0px;
		background-image: url('/img/kanraku.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		text-indent: -10000px;
	}

	#head h2 {
		position: absolute;
		top: 3px;
		left: 40px;
		margin: 0px;
		font-size: 20px;
	}
	#head h2 a {
		text-decoration: none;
	}
	#head h2 a:hover{
		text-decoration: underline;
		//color: #0000FF;
	}
	#main {
		box-sizing: border-box;
		position: absolute;
		display: block;
		width: 500px;
		top: 36px;
		bottom: 36px;
		left: 50%;
		margin-left: -270px;
		//transform: translateX(-270px); /* 中央寄せ */
		overflow: auto;
		background-color: #fff;
		z-index: 1;
		//border: 1px solid #CCCCCC;
	}
	#side {
		box-sizing: border-box;
		//display: flex;
		width: 240px;
		min-height: 200px;
		max-height: 100%;
		position: fixed;
		top: 36px;
		left: 50%;
		bottom: 36px;
		//padding-bottom: 10px;
		transform: translateX(230px);
		border-left: 1px solid #cccccc;
		border-right: 1px solid #cccccc;
		//border-radius: 4px;
		overflow-y: auto;
	}
	#navi {
		box-sizing: border-box;
		position: fixed;
		width: 200px;
		max-height: 100%;
		top: 36px;
		bottom: 36px;
		left: 50%;
		//right: 50%;
		//margin-right: 280px; /* mainの左端にぴったり */
		transform: translateX(-470px);
		border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		//border-radius: 2px;
		overflow: auto;
		z-index: 1;
	}
	#navi a {
		color: #0066CC;
	}
	#navi > dl {
		box-sizing: border-box;
		background-color: #ffffff;
		border-bottom: 1px solid #CCCCCC;
		/border-radius: 5px;
		/-moz-border-radius: 5px;
		/-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
		/box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
		margin: 5px 0px 5px 0px;
	}
	#navi > dl > dt {
		margin: 5px;
		padding: 0px;
	}
	#navi > dl > dd {
		margin: 5px 5px 5px 15px;
		/padding: 0px;
	}
	#searchs {
		display: none;
	}

	#search {
		box-sizing: border-box;
		//display: flex;
		//width: 240px;
		min-height: 200px;
		max-height: 100%;
		position: absolute;
		top: 36px;
		left: 0px;
		bottom: 0px;
		//padding-bottom: 10px;
		//transform: translateX(230px);
		//border-left: 1px solid #cccccc;
		//border-right: 1px solid #cccccc;
		//border-radius: 4px;
		overflow-y: auto;
	}
	#search form {
		box-sizing: border-box;
		//display: block;
		//overflow-y: auto;
		//height: 100%;
		//padding-bottom: 10px;
		
	}
	#search form dl {
		margin: 5px 5px 5px 5px;
	}
	#search form dl dt {
		//font-size: small;
		margin: 0px 0px 0px 0px;
	}
	#search form dl dd {
		margin: 0px 0px 0px 0px;
	}
	#search form input[type=text] {
		box-sizing: border-box;
	}
	#search form input[type=number] {
		box-sizing: border-box;
		//width: 3.5em;
	}
	#search form input[type=button] {
		padding: 0px 10px 0px 10px;
		display: block;
	}
	#search .credit {
		//display: flex;
	}
	#search .credit dt {
	}
	#search .credit dd,
	#search .emoney dd,
	#search .qrcode dd {
		display: inline-block;
		text-align: center;
		margin: 2px 2px 2px 2px;
	}
	#search .credit dd img,
	#search .emoney dd img,
	#search .qrcode dd img {
		display: block;
	}
	#search .bust {
		position: sticky;
		bottom: 0px;
	}
	#search .button {
		background-color: #fafafa;
		display: block;
		position: sticky;
		bottom: 0px;
		text-align: center;
		margin: 0px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	#search .submit {
		margin: 0px;
		padding: 5px;
	}
	#foot {
		position: fixed;
		left: 0px;
		right: 0px;
		bottom: 36px;
		background-color: #ffffff;
		border-bottom: 1px solid#CCCCCC;
		display: block;
		//height: 36px;
		z-index: 5;
	}
}