@charset "utf-8";

body {
	background-image: url(/campus_life/photogallery/images/gallery_bg01_pc.png);
	background-size: 100% auto;
	background-position: 0 660px;
}

.inc-wrap {
	height: auto !important;
}

.gallery .gallery-list {
	margin: 0 auto;
	width: 90%;
}

.gallery .gallery-list::after {
	display: block;
	content: '';
	clear: both;
}

.gallery .gallery-list li {
	position: relative;
}

.gallery .gallery-list li a .title {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 1vw;
	width: 100%;
	height: 100%;
	background-color: rgba(232,141,150,.7);
	opacity: 0;
	transition: opacity .5s;
}

.gallery .gallery-list li a .title p {
	color: #fff;
}

.gallery .gallery-list li a:hover .title {
	opacity: 1;
}

/* 小画像 */
.gallery .gallery-list li a .title .img-ttl {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 86%;
	transform: translate(-50%, -50%);
	font-size: 1.5vw;
	font-weight: bold;
}

/* ポップアップ */
#cboxPrevious,
#cboxNext {
	margin-top: -8px;
	width: 36px;
	height: 20px;
	background: url(/images/common/com_ic08.svg) center center no-repeat;
	background-size: 100% auto;
}

#cboxNext {
	transform: scale(-1, 1);
}

#cboxPrevious:hover,
#cboxNext:hover {
	background-position: center center;
	opacity: .5;
}

@media screen and (min-width: 751px) {
.gallery .gallery-list li {
	width: calc( 25% - ( 3.68% * 3 ) / 4 );
}

.gallery .gallery-list li a,
.gallery .gallery-list li img {
	display: block;
	width: 100%;
}

.gallery .gallery-list li {
	position: relative;
	float: left;
	margin-top: 3.7%;
	margin-right: 3.68%;
}

/* 大画像 */
.gallery .gallery-list li:nth-child(18n+1) a .title,
.gallery .gallery-list li:nth-child(18n+14) a .title {
	padding: 3vw;
}

/* 左・大画像 */
.gallery .gallery-list li:nth-child(18n+1) {
	width: calc( 50% - ( 3.68% * 2 ) / 4 - 1px );
}

/* 右・大画像 */
.gallery .gallery-list li:nth-child(18n+14) {
	padding-top: calc( 25% - ( ( 3.68% * 3 ) / 4 ) );
}

.gallery .gallery-list li:nth-child(18n+14) a {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 216.5%;
}

/* 余白、段落ち調整 */
.gallery .gallery-list li:nth-child(18n+3),
.gallery .gallery-list li:nth-child(18n+5),
.gallery .gallery-list li:nth-child(9n) {
	margin-right: 0;
}

.gallery .gallery-list li:nth-child(18n+12) {
	clear: both;
}

/* フロート画像 */
.gallery .gallery-list li:nth-child(72n+1)::after,
.gallery .gallery-list li:nth-child(72n+22)::after,
.gallery .gallery-list li:nth-child(72n+37)::after,
.gallery .gallery-list li:nth-child(72n+58)::after {
	display: block;
	content: '';
	position: absolute;
	z-index: 9999;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.gallery .gallery-list li:nth-child(72n+1)::after {
	bottom: -14%;
	left: 27%;
	padding-top: 21%;
	width: 41%;
	background-image: url(/campus_life/photogallery/images/gallery_tx01.png);
}

.gallery .gallery-list li:nth-child(72n+22)::after {
	bottom: -12%;
	left: 72%;
	padding-top: 20%;
	width: 73%;
	background-image: url(/campus_life/photogallery/images/gallery_tx02.png);
}

.gallery .gallery-list li:nth-child(72n+37)::after {
	bottom: -13%;
	left: 29%;
	padding-top: 19%;
	width: 41%;
	background-image: url(/campus_life/photogallery/images/gallery_tx03.png);
}

.gallery .gallery-list li:nth-child(72n+58)::after {
	bottom: -21%;
	left: 72%;
	padding-top: 25%;
	width: 73%;
	background-image: url(/campus_life/photogallery/images/gallery_tx04.png);
}

}

@media screen and (max-width: 750px) {
body {
	background-image: url(/campus_life/photogallery/images/gallery_bg01_sp.png);
}

.gallery .gallery-list li {
	width: calc( 33% - ( 3.2% * 2 ) / 3 );
}

.gallery .gallery-list li a,
.gallery .gallery-list li img {
	display: block;
	width: 100%;
}

.gallery .gallery-list li {
	position: relative;
	float: left;
	margin-top: 3.7%;
	margin-right: 3.68%;
}

.gallery .gallery-list li a .title .img-ttl {
	font-size: 3.5vw;
}

/* 大画像 */
.gallery .gallery-list li:nth-child(18n+1) a .title,
.gallery .gallery-list li:nth-child(18n+12) a .title {
	padding: 3vw;
}

.gallery .gallery-list li:nth-child(18n+1) a .title .img-ttl,
.gallery .gallery-list li:nth-child(18n+12) a .title .img-ttl {
	font-size: 4vw;
}

.gallery .gallery-list li:nth-child(18n+1) a .title .img-tag
.gallery-list li:nth-child(18n+12) a .title .img-tag {
	margin-top: 2vw;
}

/* 左・大画像 */
.gallery .gallery-list li:nth-child(18n+1) {
	width: calc( 66.66666% - ( 3.2% * 2 ) / 3 + .9% );
}

/* 右・大画像 */
.gallery .gallery-list li:nth-child(18n+12) {
	padding-top: calc( 33% - ( ( 3.2% * 2 ) / 3 ) );
}

.gallery .gallery-list li:nth-child(18n+12) a {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 211.5%;
}

/* 余白、段落ち調整 */
.gallery .gallery-list li:nth-child(18n+2),
.gallery .gallery-list li:nth-child(3n) {
	margin-right: 0;
}

.gallery .gallery-list li:nth-child(18n+12){
	margin-right: 3.68%;
}

.gallery .gallery-list li:nth-child(18n+11) {
	clear: both;
}

/* フロート画像 */
.gallery .gallery-list li:nth-child(72n+1)::after,
.gallery .gallery-list li:nth-child(72n+21)::after,
.gallery .gallery-list li:nth-child(72n+37)::after,
.gallery .gallery-list li:nth-child(72n+57)::after {
	display: block;
	content: '';
	position: absolute;
	z-index: 9999;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.gallery .gallery-list li:nth-child(72n+1)::after {
	bottom: -14%;
	left: 27%;
	padding-top: 21%;
	width: 41%;
	background-image: url(/campus_life/photogallery/images/gallery_tx01.png);
}

.gallery .gallery-list li:nth-child(72n+21)::after {
	bottom: -16%;
	left: -42%;
	padding-top: 20%;
	width: 73%;
	background-image: url(/campus_life/photogallery/images/gallery_tx02.png);
}

.gallery .gallery-list li:nth-child(72n+37)::after {
	bottom: -13%;
	left: 29%;
	padding-top: 19%;
	width: 41%;
	background-image: url(/campus_life/photogallery/images/gallery_tx03.png);
}

.gallery .gallery-list li:nth-child(72n+57)::after {
	bottom: -16%;
	left: -42%;
	padding-top: 25%;
	width: 73%;
	background-image: url(/campus_life/photogallery/images/gallery_tx04.png);
}
}

/* もっと見る、ローディング */
.gallery #more {
	padding: 16px 0;
}

.gallery .spinner {
	display: none;
  margin: 32px auto 0;
  width: 70px;
  text-align: center;
}

.gallery .spinner > div {
  width: 9px;
  height: 9px;
  background-color: #E9548E;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.gallery .spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.gallery .spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.gallery .btn-1 {
  color: #bea06e !important;
}

.gallery .btn {
  display: block;
  position: relative;
  text-decoration: none;
}

.gallery .btn::before,
.gallery .btn::after,
.gallery .btn .btn--inner::before,
.gallery .btn .btn--inner::after {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
	z-index: 9999;
  width: 0;
  height: 0;
  background-color: currentColor;
  transition: 0.3s ease-in-out;
}
.gallery .btn--cw::after {
  top: auto;
  right: 12px;
  bottom: 12px;
  left: auto;
}
.gallery .btn--cw .btn--inner::before {
  right: 12px;
  left: auto;
}
.gallery .btn--cw .btn--inner::after {
  top: auto;
  bottom: 12px;
}
.gallery .btn--cw::before,
.gallery .btn--cw::after {
  width: 0;
  height: 2px;
}
.gallery .btn--cw .btn--inner::before,
.gallery .btn--cw .btn--inner::after {
  width: 2px;
  height: 0;
}
.gallery .btn--cw:hover::before,
.gallery .btn--cw:hover::after {
  width: 100%;
}
.gallery .btn--cw:hover .btn--inner::before,
.gallery .btn--cw:hover .btn--inner::after {
  height: 100%;
}

@media screen and (max-width: 750px) {
.gallery .btn::before,
.gallery .btn::after,
.gallery .btn .btn--inner::before,
.gallery .btn .btn--inner::after {
  top: -6px;
  left: -6px;
}
.gallery .btn--cw::after {
	top: auto;
  right: 6px;
  bottom: 6px;
}
.gallery .btn--cw .btn--inner::before {
  right: 6px;
}
.gallery .btn--cw .btn--inner::after {
  right: 6px;
  bottom: 6px;
  left: auto;
}
.gallery .btn--cw::before,
.gallery .btn--cw::after {
  height: 1px;
}
.gallery .btn--cw .btn--inner::before,
.gallery .btn--cw .btn--inner::after {
  width: 1px;
}
}