@charset "UTF-8";

.flexbox {
  display: flex;
  flex-direction: row;
  text-align: center;
}

.flex-item {
  width: fit-content;
}

.bold {
  font-weight:bold;
}

.marginleft5 {
  margin-left: 5px;
}

.marginleft15 {
  margin-left: 15px;
}

.margintop10 {
  margin-top: 10px;
}

.hovercss:hover {
	background-color:#4169e1; 	/*リンクにマウスが乗ったら背景色を変更する*/
}

.hovercss2:hover {
	background-color:#e6e6fa; 	/*リンクにマウスが乗ったら背景色を変更する*/
	cursor:pointer;
}


html.modalset {
  overflow: hidden;
}

.image_size_m {

 }

/*
 .repspace :not(hr):not(li):not(li)  {
 margin-left: 10px;
 border-left:5px solid #000000;
   }
	 */

.thumb {

 }
 .thumb__items {
	 display: flex;
	 flex-flow: wrap;
	 position: relative;
	 z-index: 10;
 }
 .thumb__items > li {
	 flex: 0 1 25%;
	 list-style: none;
	 cursor: pointer;
	 position: relative;
 }
 .thumb__items > li img {
	 max-width: 100%;
	 position: relative;
	 vertical-align: bottom;
 }
 .thumb__items > li:before {
	 content: "";
	 display: block;
	 opacity: 0;
	 background: rgba(0, 0, 0, 0.6);
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 left: 0;
	 top: 0;
	 z-index: 10;
	 transition: all 0.5s 0.3s ease;
 }
 .thumb__items > li:hover::before {
	 opacity: 1;
 }

 .shared_thumb__items {
	 display: flex;
	 flex-flow: wrap;
	 position: relative;
	 z-index: 10;
 }
 .shared_thumb__items > li {
	 flex: 0 1 25%;
	 list-style: none;
	 cursor: pointer;
	 position: relative;
 }
 .shared_thumb__items > li img {
	 max-width: 100%;
	 position: relative;
	 vertical-align: bottom;
 }
 .shared_thumb__items > li:before {
	 content: "";
	 display: block;
	 opacity: 0;
	 background: rgba(0, 0, 0, 0.6);
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 left: 0;
	 top: 0;
	 z-index: 10;
	 transition: all 0.5s 0.3s ease;
 }
 .shared_thumb__items > li:hover::before {
	 opacity: 1;
 }
 .modal {
	 display: none;
   width: 100%;
   height: 100vh;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 9999;
 }

 .modal-wrap {
   width: 100%;
   height: 100%;
   text-align: center;
   padding: 20px;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
   overflow: -moz-scrollbars-none;
   white-space: nowrap;
 }
 .modal-wrap::-webkit-scrollbar {
   display: none;
 }
 .modal-wrap:after {
   content: '';
   display: inline-block;
   vertical-align: middle;
   width: 1px;
   height: 100%;
 }
 .modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(51, 51, 51, 0.8);
  width: 100%;
  height: 100%;
}

.modal__item {
  width: fit-content;
  max-width: 1200px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}


 .modal.visible {
	 display: block;
 }

/*
 @media screen and (min-width: 980px) {
	 .modal {
		 width: auto;
		 max-width: 880px;
		 margin: 10px;
		 position: relative;

	 }
 }
*/
/*
 .modal__item {
	 width: 100%;
max-width: 900px;
display: inline-block;
vertical-align: middle;
	 background: #5c5c5c;
	 text-align: center;
	 vertical-align: bottom;
 }
 */

 .modal__item img {
	 max-width: 80vw;
	 max-height: 80vh;
	 vertical-align: bottom;
 }
 .modal__caption {
	 position: absolute;
	 color: #fff;
	 line-height: 1.6;
	 padding: 10px;
 }

 .modal__close {
	 position: fixed;
	 top: 10px;
	 right: 10px;
	 z-index: 9999;
 }

 .modal__prev {
	 position: fixed;
	 top: 50%;
	 left: 20px;
	 z-index: 9999;
 }
 .modal__next {
	 position: fixed;
	 top: 50%;
	 right: 20px;
	 z-index: 9999;
 }

 .fas {
	 font-size: 40px;
	 cursor: pointer;
	 color: rgba(255, 255, 255, 0.6);
 }
 .fadein {
 animation: fadein .3s;
}

.fadeout {
	 animation: fadeout .3s;
	 animation-fill-mode: forwards;
}
@keyframes fadein {
	 0% {
			 opacity: 0;
	 }
	 100% {
			 opacity: 1;
	 }
}
@keyframes fadeout {
	 0% {
			 opacity: 1;
	 }
	 100% {
			 opacity: 0;
			 display: none;
	 }
}