@charset "utf-8";
/* CSS Document */

.subpage {
	margin-right: 0 !important;
	padding: 0 1em;
}

.subpage ul {
	margin: 0 !important;
	padding: 0 !important;
}

/***********************************
   TOPページ 
************************************/
.photo_top div.flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.photo_top div.flex a {
	width: 31.5%;
	color: #000;
	text-align: center;
	text-decoration: none;
	list-style-type: none;
}

.photo_top div.flex dl {
	margin-bottom: 0.8em;
	box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

.photo_top div.flex dl dt {
	background: #000;
	overflow: hidden;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.photo_top div.flex dl dt img {
  transition: transform .7s ease;/* ゆっくり変化させる */
  width: 100%;
	height: 100%;
	display: block;
	opacity: 0.7;
}

.photo_top div.flex a:hover img {
  transform: scale(1.1);/* 拡大 */
	opacity: 1;
}

.photo_top div.flex dl dd {
	color: #fff;
	font-weight: 700;
	padding: 3px 0;
	background: #000;
	background: linear-gradient(#000, #333);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

@media screen and (max-width: 809px) {
	.photo_top div.flex{
		justify-content: flex-start;
	}
	.photo_top div.flex a {
		width: 48%;
	}
}

@media screen and (max-width: 620px) {
	.photo_top div.flex{
		justify-content: center;
	}
	.photo_top div.flex a {
		width: 90%;
	}
}


/***********************************
   下層ページ 
************************************/
.photo_page h3 {
	font-size: 130%;
	margin-bottom: 0 !important;
	padding: 1rem 1rem 1rem 1.5rem !important;
	background: #333 !important;
	background: linear-gradient(to left, #444, #000) !important;
	border-bottom: 1px solid #333;
	display: flex;
	justify-content: space-between
}

.photo_page h3 a {
	display: block;
	width: 145px;
	color: black;
	font-size: 1.25rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	padding-left: 5px;
	background: #A0F7FF;
	transition:0.5s;
	opacity: 1;
}

.photo_page h3 a::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 7px solid black;
	border-radius: 6px;
	position: relative;
	top: 1.79px;
	right: 5px;
}

.photo_page h3 a:hover {
	transition:0.5s;
	opacity: 0.7;
}




/***********************************
   swiper 
************************************/
    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
			background: #000;
    }

    .swiper-slide {
      background-size: cover;
      background-position: center;
    }

    .mySwiper2 {
      height: 80%;
      width: 100%;
    }

    .mySwiper {
      height: 20%;
      box-sizing: border-box;
      padding: 9px  10px !important;
			border-top: 1px solid #333;
    }

    .mySwiper .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.6;
    }

    .mySwiper .swiper-slide-thumb-active {
      opacity: 1;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }