@charset "UTF-8";

/* CSSリセット */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
	margin: 0;
	padding: 0;
}
li { list-style:none; } caption,th{ text-align:left; }
input,textarea,select{ font-family:inherit;font-size:inherit;font-weight:inherit; }
img {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: bottom;
}

html {
	font-size: 62.5%;
}
body {
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* Safari */
    	line-height: 1.5;
	font-family: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ ゴシック', 'MS Gothic', sans-serif;
	font-size: 1.6rem;
}

body.open {
	overflow: hidden;
	height: 100%;
}

#wrap {
	margin: 0 auto;
	padding: 0 20px;
	width: 1110px;
}

.wrapper {
	margin: 0 auto;
	padding: 0 20px;
	width: 1110px;
}

/* ヘッダー */
#header {
	padding: 5px 0;
	width: 100%;
	background-color: #FFFFFF;
}
	#header a {
		display: block;
	}
	#header .header-inner {
		display: flex;
		justify-content: space-between;
		gap: 0 20px;
		width: 100%;
		height: 60px;
	}
		/* ロゴ */
		#header #logo {
			display: grid;
			align-items: center;
			width: calc(100% - 346px);
			height: 100%;
		}
			#header #logo a {
				width: 100%;
				height: 60px;
			}
				#header #logo a img {
					width: auto;
					height: 100%;
				}
		/* 電話番号 */
		#header #tel {
			width: 256px;
			height: 100%;
		}
			#header #tel a {
				width: 100%;
			}
				#header #tel a img {
					width: 100%;
				}
		/* メニューボタン */
		#header #navi {
		position: relative;
			width: 50px;
		}
			#header #dr-btn {
				position: relative;
				padding: 5px 0;
				width: 50px;
				height: 60px;
				z-index: 300;
				border: none;
				outline: none;
				cursor: pointer;
				background-color: #FFFFFF;
				box-sizing: border-box;
			}
				#header #dr-btn span {
					display: block;
					background: #000;
					width: 50px;
					height: 5px;
					position: absolute;
					transition: all 0.4s;
					-moz-border-radius: 3px;
					-webkit-border-radius: 3px;
					border-radius: 3px;
				}
				#header #dr-btn span:first-child {
					top: 10px;
				}
				#header #dr-btn span:nth-child(2) {
					top: 23px;
				}
				#header #dr-btn span:nth-child(3) {
					top: 36px;
				}
				#header #dr-btn p {
					position: absolute;
					bottom: 2px;
					left: 0;
					width: 100%;
					text-align: center;
				}
				#header #dr-btn p.btnclose {
					display: none;
				}
				.open #header #dr-btn span:first-child {
					-moz-transform: translateY(12px) rotate(45deg);
					-ms-transform: translateY(12px) rotate(45deg);
					-webkit-transform: translateY(12px) rotate(45deg);
					transform: translateY(12px) rotate(45deg);
				}
				.open #header #dr-btn span:nth-child(2) {
					opacity: 0;
				}
				.open #header #dr-btn span:nth-child(3) {
					-moz-transform: translateY(-14px) rotate(-45deg);
					-ms-transform: translateY(-14px) rotate(-45deg);
					-webkit-transform: translateY(-14px) rotate(-45deg);
					transform: translateY(-14px) rotate(-45deg);
				}
				.open #header #dr-btn p.btnmenu {
					display: none;
				}
				.open #header #dr-btn p.btnclose {
					display: block;
				}
			#dr-nav {
				display: none;
				position: fixed;
				top: 70px;
				right: calc(50% - 555px);
				padding: 10px;
				width: 250px;
				max-height: calc(100% - 70px);
				overflow-y: auto;
				z-index: 150;
				background-color: #FFFFFF;
				border: 1px solid #666666;
				box-sizing: border-box;
			}
				#dr-nav .dr-menu {
				}
					#dr-nav .dr-menu > li {
						margin: 0;
						border-top: 1px solid #666666;
					}
					#dr-nav .dr-menu > li:first-child {
						border-top: none;
					}
						#dr-nav .dr-menu > li a,
						#dr-nav .dr-menu > li span {
							position: relative;
							display: block;
							padding: 5px 0;
							text-decoration: none;
							color: #333333;
						}
						#dr-nav .dr-menu > li a:hover,
						#dr-nav .dr-menu > li span:hover {
							text-decoration: underline;
							background-color: #666666;
							color: #FFFFFF;
						}

	#header .menucl {
		position: relative;
		margin-top: 5px;
		background: #3d5aa6;
	}
		#header .menucl ul {
			padding: 3px 5px;
			text-align: center;
		}
			#header .menucl li {
				display: inline-block;
				padding: 0 15px;
				line-height: 24px;
				border-right: 1px solid #FFFFFF;
				font-size: 14px;
			}
				#header .menucl li a {
					font-weight: bold;
					text-shadow: 1px 2px #3d5aa6;
					color: #FFFFFF;
					text-decoration: none;
				}
				#header .menucl li a:hover {
					color: #00FFFF;
				}
				#header .menucl li:nth-child(1) a {
					padding-left: 31px;
					background: url("../img/com/new/menu1.png") no-repeat center left;
				}
				#header .menucl li:nth-child(2) a {
					padding-left: 30px;
					background: url("../img/com/new/menu2.png") no-repeat center left;
				}
				#header .menucl li:nth-child(3) a {
					padding-left: 25px;
					background: url("../img/com/new/menu3.png") no-repeat center left;
				}
				#header .menucl li:nth-child(4) a {
					padding-left: 41px;
					background: url("../img/com/new/menu4.png") no-repeat center left;
				}
				#header .menucl li:nth-child(5) a {
					padding-left: 31px;
					background: url("../img/com/new/menu5.png") no-repeat center left;
				}
				#header .menucl li:nth-child(6) a {
					padding-left: 31px;
					background: url("../img/com/new/menu6.png") no-repeat center left;
				}
				#header .menucl li:nth-child(7) a {
					padding-left: 18px;
					background: url("../img/com/new/menu7.png") no-repeat center left;
				}
			#header .menucl li:last-child {
				border-right: none;
			}


/* コンテンツ全体 */
#middle {
	width: 100%;
	background-color: #FFFFFF;
}
	#middle .middle-upper {
		margin-bottom: 10px;
		padding: 4px 0;
		width: 100%;
	}

/* フッター */
#footer {
	width: 100%;
	min-width: 1110px;
	font-size: 1.4rem;
}
	#footer a {
		text-decoration: none;
	}
	#footer a:hover {
		text-decoration: underline;
	}
	#footer .footer-inner{
		margin-right: auto;
		margin-left: auto;
	}

		/* サイトマップ */
		#footer #sitemap {
			padding: 20px 0;
			background-color: #666666;
		}
			#footer #sitemap a {
				color: #FFFFFF;
			}
			#footer #sitemap .tb {
				display: flex;
				gap: 0 30px;
				margin: 0 auto;
				width: 1110px;
			}
			#footer #sitemap .td {
				width: calc((100% - 90px) / 4);
			}

			#footer #sitemap .smttl {
				margin-bottom: 5px;
				color: #FFFFFF;
				border-bottom: 1px solid #9b9b9b;
			}
			#footer #sitemap .subarea {
				display: table;
			}
			#footer #sitemap .subsmbox {
				display: table-cell;
				width: 190px;
			}
			#footer #sitemap p {
				padding: 3px 0;
			}

		/* コピーライト */
		#footer #cp {
			padding-bottom: 10px;
			background-color: #EDEDED;
			text-align: center;
			color: #666666;
		}
			#footer #cp a {
				color: #666666;
			}
			#footer #cp .toroku {
				padding-top: 10px;
			}
			#footer #cp .toroku img {
				padding-right: 5px;
				vertical-align: text-bottom;
			}
			#footer #cp p {
				margin: 5px auto 0;
				padding-top: 2px;
				border-top:solid 1px #999999;
			}

/* フッター 右コンテンツ下部*/
#footer.sample {
	text-align: center;
	font-size: 12px;
}
#footer.sample .form {
	margin-bottom: 5px;
}
#footer.sample .toroku {
	border-top:solid 1px #2F4F4F;
}
#footer.sample .toroku img {
	vertical-align: text-bottom;
}
#footer.sample a:link {
	text-decoration: none;
	color: #0000FF;
}
#footer.sample a:visited {
	text-decoration: none;
	color: #0000FF;
}
#footer.sample a:hover {
	text-decoration: underline;
	color: #333333;
}
#footer.sample a:active {
	text-decoration: underline;
	color: #FF0000;
}