@charset "utf-8";

/* ----------------------------------------------------------------------------------------------------
	contents
---------------------------------------------------------------------------------------------------- */
/*
body.pattern01 {
	background:url("../image/contents/top/bg01.jpg") center bottom fixed no-repeat;
	}
body.pattern02 {
	background:url("../image/contents/top/bg02.jpg") right bottom fixed no-repeat;
	}
*/
body {
	background:url("../image/contents/top/bg02.jpg") right bottom fixed no-repeat;
	font-family: "BIZ UDPGothic", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
body::after {
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background-color:rgba(255,255,255,0.5);
	background-image:radial-gradient(#ffffff 15%, transparent 15%),radial-gradient(#ffffff 15%,transparent 315);
	background-size:4px 4px;
	background-position:0 0,2px 2px;
	z-index:1;
	}
    
@media print, screen and (max-width:640px) {
    body::after {
        height:125vh;
    }
}

@media print, screen and (max-width:1141px) {
body {
	background:url("../image/contents/top/bg01.jpg") center bottom / cover fixed;
	}
}

		header .inner .subpage_navi {
			display:none !important;
			}

/* ----------------------------------------------------------------------------------------------------
	information
---------------------------------------------------------------------------------------------------- */
article.information {
	width:460px;
	}
	article.information section {
		position:relative;
		width:100%;
		height:270px;
		background:#ffffff;
		border:1px solid #cccccc;
		/*box-shadow:2px 2px 2px #00000015;*/
		}
    @media print, screen and (max-width:640px) {
        article.information section {
            height: 400px;
        }
    }
	article.information section:nth-of-type(1) {
		margin:0 0 20px 0;
		}
		article.information section h2 {
			width:calc(100% + 2px);
			height:calc(50px + 2px);
			color:#ffffff;
			font-size:20px;
			line-height:50px;
			background:#333333;
			margin:-1px;
			padding:3px 20px 0 20px;
            position: relative;
			}
		article.information section .inner {
			height:180px;
			margin:10px;
			padding:0 20px 0 0;
			overflow-y:scroll;
			}
        @media print, screen and (max-width:640px) {
            article.information section .inner {
                height: 308px;
            }
        }
			article.information section .inner dl {
				border-bottom:1px dotted #cccccc;
				padding:5px 0;
				}
			article.information section .inner dl:nth-of-type(1) {
				padding:0 0 15px 0;
				}
				article.information section .inner dt {
					font-weight:bold;
					}
					article.information section .inner dt time {
						color:#666666;
						font-size:12px;
						margin:0 0 0 1px;
						}
                    @media screen and (max-width: 640px) {
                        article.information section .inner dt time {
                            font-size: 18px;
                        }
                    }
					article.information section .inner dt span {
						position:relative;
						top:-1px;
						display:inline-block;
						color:#ffffff;
						font-size:12px;
						line-height:12px;
						background:#ff7373;
						margin:0;
						padding:4px 5px;
						}
				article.information section .inner dd {
					}
					article.information section .inner dd a {
						color:#000000;
						text-decoration:underline;
						}
					article.information section .inner dd a:hover {
						text-decoration:none;
						}

@media print, screen and (max-width:1141px) {
article.information {
	width:100%;
	margin:0 auto;
	}
}

article.information section h2 .archive {
    position: absolute;
    right: 11px;
    top: 11px;
    width: 60px;
    height: 30px;
    line-height: 30px;
}

article.information section h2 .archive a {
    width: 100%;
    height: 30px;
    display: block;
    background-color: #ffffff;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    color: #000000;
    border-radius: 5px;
    transition: 0.2s;
}

article.information section h2 .archive a:hover {
    color: #ffffff;
    background-color: #3582D3;
}

/* ----------------------------------------------------------------------------------------------------
	navigation
---------------------------------------------------------------------------------------------------- */

nav {
	width:610px;
	}
	nav ul.navigation_group {
		display:flex;
		flex-wrap:wrap;
		gap:17px;
		list-style:none;
		}
		nav ul.navigation_group li {
			width:190px;
			background:#ffffff;
			border-radius:10px;
			}
			nav ul.navigation_group li a,
			nav ul.navigation_group li label {
				display:flex;
				flex-direction:column;
				justify-content:center;
				align-items:center;
				width:100%;
				height:130px;
				color:#333333;
				font-size:20px;
				font-weight:bold;
				text-align:center;
				background:#efefef;
				background:-moz-linear-gradient(#ffffff 0%,#efefef 100%);
				background:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
				background:-webkit-linear-gradient(#ffffff 0%,#efefef 100%);
				background:-o-linear-gradient(#ffffff 0%,#efefef 100%);
				background:-ms-linear-gradient(#ffffff 0%,#efefef 100%);
				background:linear-gradient(#ffffff 0%,#efefef 100%);
				border:3px solid #ffffff;
				border-radius:10px;
				box-shadow:2px 2px 2px #00000015;
				}
			nav ul.navigation_group li a:hover,
			nav ul.navigation_group li label:hover {
				color:#ffffff;
				background:#84aee1;
				border:3px solid #ffffff;
				border-radius:10px;
				transform:scale(1.1,1.1);
				transition:0.5s all;
				}

@media print, screen and (max-width:1141px) {
nav {
	display:none;
	}
}

/* popup
---------------------------------------------------------------------------------------------------- */
#popup01,
#popup02,
#popup03,
#popup04,
#popup05,
#popup06,
#popup07,
#popup08,
#popup09,
#popup10 {
	display:none;
	}
.popup_open {
	cursor:pointer;
	}
.popup_overlay {
	position:relative;
	display:none;
	}
#popup01:checked + .popup_overlay,
#popup02:checked + .popup_overlay,
#popup03:checked + .popup_overlay,
#popup04:checked + .popup_overlay,
#popup05:checked + .popup_overlay,
#popup06:checked + .popup_overlay,
#popup07:checked + .popup_overlay,
#popup08:checked + .popup_overlay,
#popup09:checked + .popup_overlay,
#popup10:checked + .popup_overlay {
	position:fixed;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100vh;
	background:#00000070;
	z-index:99998;
	}
	.popup_overlay .popup_close_overlay {
		position:absolute;
		top:0;
		left:0;
		display:block;
		width:100%;
		height:100vh;
		z-index:99998;
		}
	.popup_overlay .popup_window {
		position:fixed;
		top:50%;
		left:50%;
		width:calc(100vw - 40px);
		max-width:750px;
		min-height:550px;
		max-height:100%;
		text-align:left;
		background:#ffffff;
		border-radius:6px;
		transform:translate(-50%,-50%);
		padding:50px;
		z-index:99999;
		}
		.popup_overlay .popup_window .popup_close {
			position:absolute;
			top:-26px;
			right:0;
			cursor:pointer;
			}

/* inner contents
---------------------------------------------------------------------------------------------------- */
	.popup_overlay .popup_window .column01,
	.popup_overlay .popup_window .column02,
	.popup_overlay .popup_window .column03,
	.popup_overlay .popup_window .column04 {
		width:calc(calc(1100px - 60px) / 4);
		min-width:calc(calc(1060px - 60px) / 4);
		}
		.popup_overlay .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;
			}
		.popup_overlay .popup_window dl {
			margin:0 0 15px 0;
			}
			.popup_overlay .popup_window dl dt {
				color:#ffffff;
				background:#333333;
				padding:3px 10px;
				}
			.popup_overlay .popup_window dl dd {
				
				}
		.popup_overlay .popup_window ul {
			list-style:none;
			margin:5px 0 20px 0;
			}
			.popup_overlay .popup_window ul li {
				}
			.popup_overlay .popup_window ul li:before {
				content:"・";
				display:inline-block;
				}
				.popup_overlay .popup_window ul li a {
					color:#000000;
					text-decoration:underline;
					}
				.popup_overlay .popup_window ul li a:hover {
					text-decoration:none;
					}