@charset "UTF-8";


#watch-content{ max-width: 790px; margin: 50px auto 0; }
#watch-content *{ color: #333333; }
#watch-content span,
#watch-content svg,
#watch-content path{ color: inherit; }
#watch-content img{ width: 100%; height: auto; }
#watch-content .main-swiper{ position: relative; overflow: hidden; }
#watch-content .main-swiper .swiper-button-prev,
#watch-content .main-swiper .swiper-button-next{ color: #ffffff; }
#watch-content .main-swiper .swiper-button-prev{ left: 10px; }
#watch-content .main-swiper .swiper-button-next{ right: 10px; }
#watch-content .main-swiper svg{ width: 100%; height: auto; }
#watch-content .thumb-swiper{ position: relative; overflow: hidden; margin-top: 10px; }
#watch-content .thumb-swiper .swiper-slide { opacity: 0.5; transition: opacity 0.5s; }
#watch-content .thumb-swiper .swiper-slide-thumb-active { opacity: 1; }
#watch-content .section{ margin-top: 50px; }
#watch-content .section .ttl{ border-top: 3px solid #000000; background-color: #eae8e2; font-size: 1.5rem; line-height: 1.3; padding: 10px 15px; margin: 0; }
#watch-content .section .ttl:first-letter{ color: #7b1320; font-size: 130%; line-height: 1; }
#watch-content .section01 .watch-list{ display: flex; display: -ms-flex; flex-wrap: wrap; margin: 30px auto 0; }
#watch-content .section01 .watch-list .item{ width: 32.0253%; margin-left: 1.9620%; }
#watch-content .section01 .watch-list .item:nth-child(3n+1){ margin-left: 0; }
#watch-content .section01 .watch-list .item:nth-child(n+4){ margin-top: 50px; }
#watch-content .section01 .watch-list .item .txt{ background-color: #f5f5f5; font-size: 0.8rem; line-height: 1.7; padding: 10px; margin: 20px auto 0; }
#watch-content .section01 .caption{ margin: 20px auto 0; font-size: 0.8rem; line-height: 1.7; }
#watch-content .section02 .shop-list{ display: flex; display: -ms-flex; flex-wrap: wrap; margin: 30px auto 0; padding: 0; list-style: none; }
#watch-content .section02 .shop-list .item{ width: 25%; margin: 0; padding: 0 1em 0 0; font-size: 1rem; line-height: 1.5; box-sizing: border-box; }
#watch-content .section02 .shop-list .item:nth-child(n+5){ margin-top: 10px; }
#watch-content .section02 .shop-list .item a{ display: block; transition: opacity 0.5s; }
#watch-content .etc-navi{ display: flex; display: -ms-flex; justify-content: space-between; margin-top: 50px; }
#watch-content .etc-navi .navi{ width: 48%; }
#watch-content .etc-navi .navi a{ display: block; padding: 20px 0; text-align: center; text-decoration: none; background-color: #000000; color: #ffffff; position: relative; font-size: 1rem; transition: opacity 0.5s; }
#watch-content .etc-navi .navi a::before{ content: ""; width: 7px; height: 7px; position: absolute; right: 15px; top: 50%; transform: translate(-25%, -50%) rotate(45deg); border: solid rgba(255, 255, 255, 0.5); border-width: 1px 1px 0 0; }

@media only screen and (max-width: 767px) {
	#watch-content{ margin-top: 10%; }
	#watch-content .section{ margin-top: 10%; }
	#watch-content .section .ttl{ border-top: 2px solid #000000; }
	#watch-content .section01 .watch-list{ margin: 5% auto 0; }
	#watch-content .section01 .watch-list .item:nth-child(n){ width: 48%; margin-left: 4%; }
	#watch-content .section01 .watch-list .item:nth-child(2n+1){ margin-left: 0; }
	#watch-content .section01 .watch-list .item:nth-child(n+3){ margin-top: 5%; }
	#watch-content .section01 .watch-list .item .txt{ margin: 10px auto 0; }
	#watch-content .section01 .caption{ margin: 5% auto 0; }
	#watch-content .section02 .shop-list{ margin: 5% auto 0; }
	#watch-content .section02 .shop-list .item{ width: 48%; }
	#watch-content .section02 .shop-list .item:nth-child(n+3){ margin-top: 10px; }
}

@media only screen and (max-width: 480px) {
	#watch-content .etc-navi{ display: block; margin-top: 10%; }
	#watch-content .etc-navi .navi{ width: 100%; }
	#watch-content .etc-navi .navi:nth-child(n+2){ margin-top: 10px; }
}


#watch-content .section02 .shop-list .item a:active{ opacity: 0.7; }
#watch-content .etc-navi .navi a:active{ opacity: 0.7; }
@media (hover: hover){
	#watch-content .section02 .shop-list .item a:hover{ opacity: 0.7; }
	#watch-content .etc-navi .navi a:hover{ opacity: 0.7; }
}