@charset "utf-8";

html,
body {
	height:100%;
}
body {
	min-width:480px;
	color:#28282d;
	font-family: "BIZ UDPGothic", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	font-weight:400;
	text-align:center;
	line-height:2;
	word-wrap:break-word;
	background:url("../image/bg.gif") repeat center top;
}

@media screen and (max-width: 640px) {
    body {
        font-size: 22px;
    }
}
    


/* ----------------------------------------------------------------------------------------------------
	header
---------------------------------------------------------------------------------------------------- */
header {
	position:relative;
	width:100%;
	background:#ffffff;
	border-top:5px solid #84aee1;
	/*border-bottom:1px solid #cccccc;*/
	z-index:100;
	}
	header .inner {
		display:flex;
		justify-content:space-between;
		gap:20px;
		max-width:1100px;
		text-align:left;
		margin:0 auto;
		padding:20px 0;
		}
		header .inner h1 {
			flex-grow:1;
			margin:2px 0 0 0;
			}
			header .inner h1 a {
				display:block;
				color:#000000;
				font-size:160%;
				font-weight:900;
				line-height:46px;
				background:url("../image/logo.png") left center no-repeat;
				padding:2px 0 0 60px;
				text-decoration: none;
				}
		header .inner .login_box {
			display:flex;
			justify-content:space-between;
			gap:20px;
			/*background:#efefef;*/
			/*border:1px solid #cccccc;*/
			/*padding:10px 20px 10px 10px;*/
			}
			header .inner .login_box span {
				position:relative;
				display:block;
				width:calc(4em + 20px);
				background:#ff7373;
				}
				header .inner .login_box span b {
					position:absolute;
					top:50%;
					left:50%;
					transform:translate(-50%,-50%);
					display:block;
					width:100%;
					color:#ffffff;
					text-align:center;
					}
			header .inner .login_box p {
				flex-grow:1;
				font-weight:bold;
				text-align:left;
				line-height:50px;
				}
			header .inner .login_box input {
				padding:0 10px;
				}
		header .inner .sp_navi {
			display:none;
			}
		header .inner .subpage_navi,
		header .inner .sp_navi {
			/*flex-basis:54px;*/
			flex-basis:85px;
			position:relative;
			}
			header .inner .subpage_navi .navi_hidden,
			header .inner .sp_navi .navi_hidden {
				display:none;
				}
			header .inner .subpage_navi .navi_open,
			header .inner .sp_navi .navi_open {
				position:absolute;
				top:0;
				right:0;
				/*width:54px;*/
				width:85px;
				height:50px;
				font-size:15px;/* ハンバーガーメニューの場合不要 */
				text-align:center;
				line-height:19px;/* ハンバーガーメニューの場合不要 */
				background:#efefef;
				border:1px solid #cccccc;
				cursor:pointer;
				padding:6px 10px;/* ハンバーガーメニューの場合不要 */
				z-index:100;
				}
			header .inner .subpage_navi .navi_open:hover {
				color:#ffffff;
				background:#84aee1;
				border:1px solid #84aee1;
				}
				/*
				header .inner .subpage_navi .navi_open span,
				header .inner .subpage_navi .navi_open span:before,
				header .inner .subpage_navi .navi_open span:after,
				header .inner .sp_navi .navi_open span,
				header .inner .sp_navi .navi_open span:before,
				header .inner .sp_navi .navi_open span:after {
					content:'';
					position:absolute;
					display:block;
					width:26px;
					height:3px;
					background:#333333;
					border-radius:3px;
					transition:0.5s;
					}
				header .inner .subpage_navi .navi_open span,
				header .inner .sp_navi .navi_open span {
					top:0;
					right:0;
					bottom:0;
					left:0;
					margin:auto;
					}
				header .inner .subpage_navi .navi_open span:before,
				header .inner .sp_navi .navi_open span:before {
					bottom:8px;
					}
				header .inner .subpage_navi .navi_open span:after,
				header .inner .sp_navi .navi_open span:after {
					top:8px;
					}
				*/
				header .inner .subpage_navi #navi_flag:checked ~ .navi_open span {
					background:rgba(255,255,255,0);
					}
				header .inner .subpage_navi #navi_flag:checked ~ .navi_open span::before {
					bottom:0;
					transform:rotate(45deg);
					}
				header .inner .subpage_navi #navi_flag:checked ~ .navi_open span::after {
					top:0;
					transform:rotate(-45deg);
					}

@media print, screen and (max-width:1141px) {
	header .inner {
		display:block;
		max-width:calc(100% - 40px);
		}
			header .inner h1 a {
				width:calc(100% - 74px);
				}
		header .inner .login_box {
			justify-content:space-between;
			margin:20px 0 0 0;
			}
			header .inner .login_box p {
				font-size:95%;
				line-height:40px;
				}
			header .inner .login_box input {
            position: absolute;
            right: 20px;
            bottom: 15px;
            padding: 10px;
            background-color: #535353;
            color: #ffffff;
            border-radius: 5px;
				}
		header .inner .subpage_navi {
			display:none;
			}
		header .inner .sp_navi {
			position:fixed;
			top:20px;
			right:20px;
			display:block;
			z-index:99999;
			}
}
@media print, screen and (max-width:640px) {
			header .inner h1 a {
				font-size:24px;
				line-height:23px;
        text-decoration: none;
				display: block;
				height: 50px;
				}
			header .inner .login_box p {
				line-height:24px;
				}
}


/* login window
---------------------------------------------------------------------------------------------------- */

.login-window {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

.login-window input[type=submit] {
    padding: 15px;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}

.login-window p {
    margin-bottom: 30px;
}

.login-window div {
    margin-bottom: 20px;
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,80%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
    z-index: 99;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
	width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
	background: #fff;
	text-align: left;
	padding: 30px;
}


/* navi popup
---------------------------------------------------------------------------------------------------- */
#navi_popup {
	display:none;
	}
.navi_popup_open {
	cursor:pointer;
	}
.navi_popup_overlay {
	position:relative;
	display:none;
	}
#navi_popup:checked + .navi_popup_overlay {
	position:fixed;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100vh;
	background:#00000070;
	z-index:99998;
	}
	.navi_popup_overlay .navi_popup_close_overlay {
		position:absolute;
		top:0;
		left:0;
		display:block;
		width:100%;
		height:100vh;
		z-index:99998;
		}
	.navi_popup_overlay .navi_popup_window {
		position:fixed;
		top:50%;
		left:50%;
		display:flex;
		gap:20px;
		width:calc(100vw - 40px);
		max-width:1100px;
		min-height:570px;
		max-height:100%;
		text-align:left;
		background:#ffffff;
		border-radius:6px;
		transform:translate(-50%,-50%);
		padding:50px;
		z-index:99999;
		}
		.navi_popup_overlay .navi_popup_window .navi_popup_close {
			position:absolute;
			top:-26px;
			right:0;
			cursor:pointer;
			}

/* navi popup inner contents
---------------------------------------------------------------------------------------------------- */
	.navi_popup_overlay .navi_popup_window .column01,
	.navi_popup_overlay .navi_popup_window .column02,
	.navi_popup_overlay .navi_popup_window .column03,
	.navi_popup_overlay .navi_popup_window .column04 {
		width:calc(calc(1000px - 60px) / 4);
		min-width:calc(calc(1000px - 60px) / 4);
		}
		.navi_popup_overlay .navi_popup_window h2 {
			color:#ffffff;
			font-size:18px;
			font-weight:bold;
			line-height:18px;
			background:#84aee1;
			margin:0 0 10px 0;
			padding:13px 10px 10px 10px;
			}
		.navi_popup_overlay .navi_popup_window dl {
			margin:0 0 15px 0;
			}
			.navi_popup_overlay .navi_popup_window dl dt {
				color:#ffffff;
				background:#333333;
				padding:3px 10px;
				}
			.navi_popup_overlay .navi_popup_window dl dd {
				
				}
		.navi_popup_overlay .navi_popup_window ul {
			list-style:none;
			margin:5px 0 20px 0;
			}
			.navi_popup_overlay .navi_popup_window ul li {
				}
			.navi_popup_overlay .navi_popup_window ul li:before {
				content:"・";
				display:inline-block;
				}
				.navi_popup_overlay .navi_popup_window ul li a {
					color:#000000;
					text-decoration:underline;
					}
				.navi_popup_overlay .navi_popup_window ul li a:hover {
					text-decoration:none;
					}

/* sp popup
---------------------------------------------------------------------------------------------------- */
#sp_popup {
	display:none;
	}
.sp_popup_open {
	cursor:pointer;
	}
.sp_popup_window {
	display:none;
	}
#sp_popup:checked + .sp_popup_window {
	position:fixed;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100vh;
	background:#ffffff;
	padding:40px 20px 20px 20px;
	transition:0.5s all;
	overflow-y:auto;
	z-index:99998;
	}
	.sp_popup_window .sp_popup_close {
		position:absolute;
		top:20px;
		right:20px;
		cursor:pointer;
		}

/* sp popup inner contents
---------------------------------------------------------------------------------------------------- */
		.sp_popup_window .login_box {
			display:flex;
			justify-content:space-between;
			gap:20px;
			/*
			background:#efefef;
			border:1px solid #cccccc;
			padding:10px 20px 10px 10px;
			*/
			}
			.sp_popup_window .login_box span {
				position:relative;
				display:inline-block;
				width:calc(4em + 20px);
				background:#ff7373;
				}
				.sp_popup_window .login_box span b {
					position:absolute;
					top:50%;
					left:50%;
					transform:translate(-50%,-50%);
					display:block;
					width:100%;
					color:#ffffff;
					text-align:center;
					}
			.sp_popup_window .login_box p {
				flex-grow:1;
				font-weight:bold;
				text-align:left;
				line-height:50px;
				}
			.sp_popup_window .login_box input {
				padding:0 10px;
				}

		.sp_popup_window ul.menu_list {
			display:flex;
			flex-direction:column;
			gap:10px;
			list-style:none;
			margin:20px 0;
			}
			.sp_popup_window ul.menu_list > li {
				}
				.sp_popup_window ul.menu_list > li a,
				.sp_popup_window ul.menu_list > li details summary {
					position:relative;
					display:block;
					color:#ffffff;
					font-weight:bold;
					background:#84aee1;
					padding:10px;
					cursor:pointer;
                    text-decoration: none;
					}
				.sp_popup_window ul.menu_list > li a::after {
					content:"";
					position:absolute;
					top:calc(50% - 6px);
					right:20px;
					display:block;
					width:12px;
					height:12px;
					border-top:2px solid #ffffff;
					border-right:2px solid #ffffff;
					transform:rotate(45deg);
					}
				.sp_popup_window ul.menu_list > li details summary::before {
					content:'';
					position:absolute;
					top:50%;
					right:15px;
					display:block;
					color:#ffffff;
					width:16px;
					height:2px;
					background:#ffffff;
					border-radius:0.1em;
					}
				.sp_popup_window ul.menu_list > li details summary::after {
					content:'';
					position:absolute;
					top:50%;
					right:15px;
					display:block;
					width:16px;
					height:2px;
					background:#ffffff;
					border-radius:2px;
					transform:rotate(90deg);
					}
				.sp_popup_window ul.menu_list > li details[open] summary::after {
					display:none;
					}
				.sp_popup_window ul.menu_list > li dl {
					margin:10px 0 0 0;
					}
				.sp_popup_window ul.menu_list > li details {
					position:relative;
					transition:.5s;
					}
					.sp_popup_window ul.menu_list > li details summary {
						position:relative;
						transition:.5s;
						}
					.sp_popup_window ul.menu_list > li details[open] {
						}
					.sp_popup_window ul.menu_list > li dl dt {
						color:#ffffff;
						background:#333333;
						padding:5px 10px;
						}
					.sp_popup_window ul.menu_list > li dl dd {
						width:100%;
						}
						.sp_popup_window ul.menu_list > li dl dd > ul.menu_list_inner,
						.sp_popup_window ul.menu_list > li details > ul.menu_list_inner {
							display:flex;
							flex-wrap:wrap;
							flex-direction:row;
							gap:10px;
							margin:10px 0 0 0;
							list-style:none;
							}
							.sp_popup_window ul.menu_list > li dl dd > ul.menu_list_inner > li,
							.sp_popup_window ul.menu_list > li details > ul.menu_list_inner > li {
								display:flex;
								align-items:center;
								width:calc(calc(100% - 10px) / 2);
								}
								.sp_popup_window ul.menu_list > li dl dd > ul.menu_list_inner > li a,
								.sp_popup_window ul.menu_list > li details > ul.menu_list_inner > li a {
									flex-grow:1;
									position:relative;
									display:block;
									height:100%;
									color:#000000;
									font-weight:normal;
									line-height:120%;
									background:#efefef;
									border:1px solid #cccccc;
									cursor:pointer;
									}
								.sp_popup_window ul.menu_list > li dl dd > ul.menu_list_inner > li a::after,
								.sp_popup_window ul.menu_list > li details > ul.menu_list_inner > li a::after {
									content:"";
									position:absolute;
									top:calc(50% - 4px);
									right:10px;
									display:block;
									width:8px;
									height:8px;
									border-top:2px solid #000000;
									border-right:2px solid #000000;
									transform:rotate(45deg);
									}

@media print, screen and (max-width:1141px) {
		.sp_popup_window .login_box {
			justify-content:space-between;
			margin:20px 0 0 0;
			}
			.sp_popup_window .login_box p {
				font-size:95%;
				line-height:40px;
				}
			.sp_popup_window .login_box input {
				}
}
@media print, screen and (max-width:640px) {
			.sp_popup_window .login_box p {
				line-height:20px;
				}
}

/* ----------------------------------------------------------------------------------------------------
	contents
---------------------------------------------------------------------------------------------------- */
#contents {
	position:relative;
	width:calc(100% - 40px);
	max-width:1100px;
	text-align:left;
	margin:0 auto;
	/*padding:50px 0;*/
	padding:30px 0 80px 0;
	z-index:50;
	}
	
.subpage #contents {
	max-width:640px;
}
	
#contents.flex {
	display:flex;
	justify-content:space-between;
	gap:20px;
	padding:30px 0 50px 0;
	}

@media print, screen and (max-width:1141px) {
#contents.flex {
	display:block;
	padding:20px 0;
	}
}

/* ----------------------------------------------------------------------------------------------------
	footer
---------------------------------------------------------------------------------------------------- */
footer {
	position:sticky;
	top:100vh;
	width:100%;
	background:#333333;
	z-index:50;
	}
	footer .inner {
		display:flex;
		justify-content:space-between;
		max-width:1100px;
		font-size:95%;
		text-align:left;
		margin:0 auto;
		padding:15px 0;
		}
		footer .inner .overview {
			width:auto;
			}
			footer .inner .overview .address {
				color:#ffffff;
				}
			footer .inner .overview .tel {
				color:#ffffff;
				}
				footer .inner .overview .tel a {
					color:#ffffff;
					text-decoration:underline;
					}
				footer .inner .overview .tel a:hover {
					text-decoration:none;
					}
					
			@media print, screen and (max-width:640px) {
				footer .inner .overview .address {
					font-size: 24px;
				}
				footer .inner .overview .tel {
					font-size: 24px;
				}
				footer .inner .overview .tel span {
					display: none;
				}
			}
		footer .inner ul {
			flex-grow:1;
			display:flex;
			justify-content:flex-end ;
			list-style:none;
			}
		footer .inner ul::before {
			content:"│";
			color:#ffffff;
			font-size:14px;
			margin:0 0 0 -5px;
			padding:3px 1px 0 0;
			}
			footer .inner ul li {
				}
			footer .inner ul li::after {
				content:"│";
				color:#ffffff;
				font-size:14px;
				padding:3px 0 0 1px;
				}
				footer .inner ul li a {
					color:#ffffff;
					text-decoration:underline;
					}
				footer .inner ul li a:hover {
					text-decoration:none;
					}
	footer p.copyright {
		position:sticky;
		top:100vh;
		display:block;
		width:100%;
		font-size:80%;
		text-align:center;
		background:#cccccc;
		}

@media print, screen and (max-width:1141px) {
	footer .inner {
		display:block;
		max-width:calc(100% - 40px);
		}
		footer .inner ul {
			justify-content:center;
			margin:10px auto 5px auto;
			padding:10px 0;
			}
}