@charset "utf-8";

* {
  font-famly:sans-seif;
}

    ::-webkit-scrollbar {
      display: none;
    }

    html {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
        * {
        margin: 0;
        padding: 0;
        width: 100%;
        background-color:transparent;
        }

#Wrap {
	position: fixed;
	margin-left: auto;margin-right: auto;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	width: 70%;
}

.bg-image {
	position: relative;
	background-size: cover;
	width: 1280px;
	height: 720px;
	display: flex;

}

.member img {
	filter: drop-shadow(3px 2px 4px rgba(0,0,0,0.6));
	transition: transform 0.3s ease;
}
.member img:hover {
	transform: scale(1.06);
	cursor: pointer;
}

.imageback {
	position: absolute;
	top: 88%;
	width: 12%;
	left: 2.2%;
}
.imageback :hover {
	transform: scale(1.06);
}

.imageback2 {
  position: absolute;
  top: 88%;
  width: 12%;
  left: 2.2%;
}
.imageback2 :hover {
  transform: scale(1.06);
}

.modal {
  display: inherit;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

.modal-content {
  width: 50%;
  height: auto;
  border-radius: 2%;
  background: radial-gradient(rgb(255, 255, 255), rgb(150, 150, 150));
  background-color: #000;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.close-button {
  position: absolute;
  top: 0px;
  right: -100%;
  font-size: 24px;
  color: #ffffff;
  cursor: pointer;
}

.modal-content img {
  margin-top: 3%;
  max-width: 60%;
  margin-left: 20%;
}

.description p{
  max-width: 90%;
  margin-left: 5%;
  font-size: 70%;
  color: #444444;
  line-height: 1.2;
  margin-top: 0.2em;
  margin-bottom: 1.0em;
}
/********************************************************************************/

@media only screen and (max-width: 1150px) {

.modal-content img {
  max-width: 60%;
  margin-left: 20%;
}

.description p{
  font-size: 65%;
}
}

@media only screen and (max-width: 960px) {

.description p{
  font-size: 60%;
}
}

@media only screen and (max-width: 840px) {

#Wrap {
  width: 100%;
}

.modal-content {
  width: 60%;
}

.description p{
  font-size: 60%;
}
}

@media only screen and (max-width: 630px) {

.description p{
  font-size: 60%;
}
.modal-content img {
  max-width: 80%;
  margin-left: 10%;
}
}

@media only screen and (min-width: 631px) {
.imageback2 {
  display: none;
}
}

@media only screen and (max-width: 630px) {

#Wrap {
	width: 120%;
  margin-left: -15%;
}

.imageback {
  display: none;
}
.imageback2 {
  position: absolute;
  top: 102%;
  width: 12%;
  left: 48%;
}
.modal-content {
  width: 76%;
}

.description p{
  font-size: 60%;
}
}

@media only screen and (max-width: 320px) {
}
/*PC mobile*/
@media only screen and (orientation: landscape) {
}
@media only screen and (orientation: portrait) {
}
/*SMP*/
@media only screen and (max-device-width:480px) and (orientation:landscape) {
}
@media only screen and (min-device-width:320px) and (orientation:portrait) {
}
/********************************************************************************/