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


.cover {margin:0;padding:0;vertical-align:baseline;font-size:100%;font:inherit;border:0;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box}
.cover ::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box}
article,aside,dialog,figure,footer,header,main,menu,nav,section,audio,canvas,video,br,hr{display:block}
.cover {line-height:1}ol,ul{list-style:none}
.cover img{vertical-align:middle}

    .cover{padding: 5px 0 5px 5px;}

    .frame{max-width: 100%; margin: auto;    }
    .slide{margin-bottom: 10px; border: 1px solid #ccc;    }
	
	.slide .swiper-wrapper{  }
	
    .slide .swiper-slide {
    position: relative;
    width: 100%; 
	padding-top: 75%;
    background:#fff;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
    }

	.frame_main .swiper-container {padding-bottom:30px;} /*追加 (下部コメント欄のため)*/

	.slide .swiper-slide img {position: absolute;top:0; left:0; right:0; bottom:0; margin: auto; width:auto; height: auto; max-width:100%; max-height:100%;} /*追加(大きさの異なる写真を中央配置)*/
	.slide .swiper-slide p { position:absolute; left:0; bottom:-30px; background:#ddd; height:30px; line-height:30px; width:100%; overflow:hidden; z-index:100; text-align:center;} /*追加(下部コメント欄の設定)*/
	.slide .swiper-slide p.phco2 { background-color: #CC6666; color:#fff; } 
	.slide .swiper-slide p.phco2::before{content: "【メンバー限定公開】　";}
		
    .thumbnail .swiper-slide{
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      border: 1px solid #ccc;
	  width:80px;
	  height:80px;	  
    }

    .thumbnail .swiper-slide::before{
      pointer-events: none;
      opacity: 0;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      display: block;
      width: 100%;
      height: 100%;
      border: 3px solid #cc6666;
      transition: .3s ease;
    }

    .thumbnail .swiper-slide-active::before{
      opacity: 1;
    }
	.thumbnail .swiper-slide img{ position: absolute; object-fit: cover; width: auto; height: auto; width: 100%; height: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} /*追加*/
	.thumbnail .swiper-slide img.madoriz{ object-fit: contain;} /*追加*/

    @media screen and (min-width: 768px) {
      .thumbnail .swiper-wrapper{
        -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
      }
      .thumbnail .swiper-slide{
        width: 112px;
        height: 84px;	/*変更*/
        padding: 0;/*変更*/
        margin-right:1%;
        margin-bottom: 1%;
        font-size: 24px;
        cursor: pointer;
		background:#fff;
      }
	  .thumbnail .swiper-slide:nth-child(20n){
        margin-right: 0;
      }
      .thumbnail .swiper-slide.is-active::before{
        opacity: 1;
      }
    }
	
	
    @media screen and (min-width: 960px) {	
	.frame_main { float:left; width:58%; }
	.frame_sub  { float:left; width:38%; margin:0 0 0 4%; }
	.frame_sub  { max-height:500px; overflow-y:scroll;}
	.thumbnail .swiper-slide-big {width:168px; height:128px; margin-right:1.1%;}
	}

    @media screen and (min-width: 1281px) {	
	.frame_main { float:left; width:60%; }
	.frame_sub  { float:left; width:38%; margin:0 0 0 2%; }
	}