.open {
	cursor:pointer;
}
#pop-up {
	display: none;
}
.overlay {
	display: none;
}
#pop-up:checked + .overlay {
	display: block;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);
}
.window {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 90vw;
	max-width: 360px;
    padding: 20px;
	height: 300px;
	background-color: #fff;
	border-radius: 4px;
	align-items: center;
	transform: translate(-50%, -50%);
}
.close {
	position: absolute;
	top: 4px;
	right: 4px;
	cursor:pointer;
}



figure.hover-parent {
　width: 250px;
　height: 175px;
　position: relative;
　margin-bottom: 30px;
　overflow: hidden;
}
figcaption.hover-mask {
　width: 250px;
　height: 175px;
　position: absolute;
　top: 0;
　bottom: 0;
　left: 0;
　right: 0;
　background: rgba(0,0,0,0.5);
　opacity: 0;
　color: #fff;
　display: flex;
　align-items: center;
　text-align: center;
　padding: 30px;
}




.tooltip5{
    position: relative;
    cursor: pointer;
    display:  inline-block;
}
.tooltip5 img{
    width:700px;
     height:200px;
}
.description5 {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #000;
    width: 100px;
}
 
.description5:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 15px solid transparent;
    border-top: 15px solid #000;
    margin-left: -15px;
}
.tooltip5:hover .description5{
    display: inline-block;
    top: -75px;
    left: -50px;
}


/*マスクについて1↓*/
.sample1 {
	width:			380px;
	height:			288px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;	/* 相対位置指定 */
}
.sample1 .caption {
	font-size:		130%;
	text-align: 		center;
	padding-top:		80px;
	color:			#fff;
}
.sample1 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.sample1:hover .mask {
	opacity:		1;	/* マスクを表示する */
}

/*マスクについて2↓*/
.sample2 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample2 .caption {
	font-size:		130%;
	text-align: 		center;
	color:			#fff;
}
.sample2 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.sample2:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}


/*アコーディオン↓*/
.menu {
    max-width: 500px;
}

.menu a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #000;
}

label {
    display: block;
    margin: 0 0 4px 0;
    padding : 15px;
    line-height: 1;
    color :#fff;
    background : black;
    cursor :pointer;
}

input {
    display: none;
}

.menu ul {
    margin: 0;
    padding: 0;
    background :#f4f4f4;
    list-style: none;
}

.menu li {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
    height: 170px;
    opacity: 1;
}