@CHARSET "UTF-8";

/*common*/
#modal-content {
 width: 90%;
 height: 100%;
 margin: 0;
 position: fixed;
 display: none;
 z-index: 50;
 overflow: auto;
}

#modal-content .frame {
 background-color: #eee;
 padding: 0.5em;
 position: relative;
}

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

.close-modal {
 margin-top: 1em;
 text-align: center;
}

.button-link {
 color: #f19dc1;
 text-decoration: underline;
}

.button-link:hover {
 cursor: pointer ;
 color: #eee ;
}

@media (min-width: 992px) {
 #modal-content {
  width: 80%;
 }
}

/*プロフィール*/
#modal-content p {
 color: #333;
 font-size: 0.9em;
}

#modal-content .name {
 text-align: center;
 background-color: #f19dc1;
 padding: 0.5em;
 margin-bottom: 0.5em;
}

#modal-content .name p {
 font-weight: bold;
 margin: 0;
 font-size: 1.1em;
}

#modal-content .profile .cell {
 display: table;
 width: 100%;
 padding: 0.2em 0;
}

#modal-content .profile .cell .title {
 display: table-cell;
 width: 30%;
}

#modal-content .profile .cell .content {
 display: table-cell;
 padding-left: 0.5em;
}

#modal-content .main li {
 overflow: hidden;
 margin: 0;
 padding: 0;
 list-style: none;
}

#modal-content .main li img {
 width: 100%;
}

#modal-content .main .item2,
#modal-content .main .item3,
#modal-content .main .item4,
#modal-content .main .item5 {
 display: none;
}

#modal-content .thumbnail {
 display: block;
 padding: 0;
 margin-bottom: 0;
 line-height: 1.428571429;
 background-color: transparent;
 border: none;
}

#modal-content .thumb {
 margin-right: -2%;
}

#modal-content .thumb li {
 display: inline-block;
 width: 18%;
 height: auto;
 overflow: hidden;
 cursor: pointer;
 vertical-align: top;
 margin-top: 2%;
 margin-bottom: 4px;
 margin-right: 2%;
}

@media (min-width: 768px) {
 #modal-content .thumbnail {
  width: 49%;
 }
 
 #modal-content .image {
  display: inline-block;
  width: 49%;
  vertical-align: top;
 }

 #modal-content .profile {
  width: 49%;
  position: absolute;
  top: 0.5em;
  right: 0.5em;
 }
}

@media (min-width: 992px) {
 #modal-content .thumbnail {
  position: absolute;
  right: 1%;
  bottom: 52px;
 }
}