@charset "UTF-8";
.modal-content {
	width: 45% ;
	margin: 0 ;
	padding: 16px ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
	height: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.pc_image {
	width: 100%;
	vertical-align: bottom;
}

.modal-content > div {
	display: flex;
  justify-content: space-around;
  align-items: center;
	/* margin-top: 10px; */
}

.modal-content > img:not(:first-of-type) {
    margin-top: 3em;
}

.sp_image {
	width: 13%;
	/* height: 20%; */
	position: relative;
  /* top: 2em; */
}

#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.4 ) ;
}

.button-link {
	color: #000 ;
	text-decoration: none ;
}

.button-link:hover {
	cursor: pointer ;
	/* color: #f00 ; */
}

.modal-close {
	position: fixed;
  font-weight: bold;
	top: 5%;
  right: 26.2vw;
  display: block;
  width: 3.5vw;
  height: 3.5vw;
  border-radius: 0 10px 10px 0;
  background-color: #fff;
  text-align: center;
}

a.button-link {
	display: block;
  width: 3.5vw;
  height: 3.5vw;
  padding-top: 1vw;
  font-size: 1vw;
  line-height: 1.5vw;
}

#works .modal-close {
    display: none;
}

#production-second .sp_image ,
#production-tenzon .sp_image {
    width: 13%;
}

div#production-second,
div#production-tenzon {
    height: 75%;
}

@media screen and (max-width: 414px) {
	a.button-link {
		font-size: 4vw;
	}
}