@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');
/* CSS Document */
body {
	color: #FFF;
    line-height: 1;
	background-color:#322F2B;
    font-size: 12px;
    font-family: 'Noto Serif', serif;
}
.sp-only {}
.pc-only { display: none!important }

a {	text-decoration: none;transition: 0.3s } 
a:link { color:#FFFFFF; }
a:visited { color:#FFFFFF; }
a:hover { color: rgba(204,204,204,0.4)}
a:active { color:#FFFFFF; }	
	
/*title --------------------*/	
.title {
    font-family: 'Noto Serif', serif;
	position:fixed;
	top:1.5em;
	left:1.75em;
	z-index:10;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.title img {
    width: 2.75em;
    margin-right:0.75em;
	}
.title span {
	font-size:1.25em;
	letter-spacing:0.05em;
	}
/*movie --------------------*/	
.movie {
    position:fixed;
	top:1.2em;
	right:1.5em;
	z-index:10;
	font-size:1em;
	text-align:center;
	}
.movie a {
	display:block;
	border:1px solid #FFFFFF;
	font-size:1em;
	padding:.35em 1.05em .35em 1.2em;
	letter-spacing:0.1em;
	}
.movie a:hover {
	border:1px solid #FFFFFF;
    }
 /*bx-wrapper --------------------*/	
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next {
    width:1.4em !important;
    height:1.5em !important;
    border: .75em rgba(255,255,255,0.0) solid;
    background-color:rgba(255,255,255,0.2) !important;
} 
.bx-wrapper .bx-prev {
    border-radius: 0 2px 2px 0;
    left:0;
    background: url(../img/arrow-prev.png) center no-repeat;
}
.bx-wrapper .bx-next {
    border-radius:2px 0 0 2px;
    right:0;
    background: url(../img/arrow-next.png) center no-repeat;
}

/*img --------------------*/	
li {
    display: flex;
    justify-content: center;
    align-items: center;
}
li .image {
	width:100%;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	}
#image_01 .image { background-image:url(../img/tss-01.jpg);}
#image_02 .image { background-image:url(../img/tss-02.jpg);}
#image_03 .image { background-image:url(../img/tss-03.jpg);}
#image_04 .image { background-image:url(../img/tss-04.jpg);}
#image_05 .image { background-image:url(../img/tss-05.jpg);}
#image_06 .image { background-image:url(../img/tss-06.jpg);}
#image_07 .image { background-image:url(../img/tss-07.jpg);}
#image_08 .image { background-image:url(../img/tss-08.jpg);}
#image_09 .image { background-image:url(../img/tss-09.jpg);}
#image_10 .image { background-image:url(../img/tss-10.jpg);}
#image_11 .image { background-image:url(../img/tss-11.jpg);}
#image_12 .image { background-image:url(../img/tss-12.jpg);}
#image_13 .image { background-image:url(../img/tss-13.jpg);}
#image_14 .image { background-image:url(../img/tss-14.jpg);}
#image_15 .image { background-image:url(../img/tss-15.jpg);}
#image_16 .image { background-image:url(../img/tss-16.jpg);}
#image_17 .image { background-image:url(../img/tss-17.jpg);}
#image_18 .image { background-image:url(../img/tss-18.jpg);}
#image_19 .image { background-image:url(../img/tss-19.jpg);}
#image_20 .image { background-image:url(../img/tss-20.jpg);}
#image_21 .image { background-image:url(../img/tss-21.jpg);}
#image_22 .image { background-image:url(../img/tss-22.jpg);}
#image_23 .image { background-image:url(../img/tss-23.jpg);}
#image_24 .image { background-image:url(../img/tss-24.jpg);}
#image_25 .image { background-image:url(../img/tss-25.jpg);}
#image_26 .image { background-image:url(../img/tss-26.jpg);}
#image_27 .image { background-image:url(../img/tss-27.jpg);}
#image_28 .image { background-image:url(../img/tss-28.jpg);}
/*credit --------------------*/
#credit_01 .image { background-image:url("../img/credit-01.jpg");}
#credit_02 .image { background-image:url("../img/credit-02.jpg");}
.credit { position: relative;}
.credit .image { background-size:contain;}
.credit .zoom-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.credit .zoom-wrap .zoom {
    position: relative;
    width: 100%;
}
.credit .zoom-wrap img.zoom-base {
    width: 100%;
}
.credit .zoom-wrap .zoom a {
    position: absolute;
    width: 1em;
    height: 1em;
    right: 0.5em;
    top: 0.5em;
    padding: 0.5em;
    background-color:rgba(0,0,0,0.2);
    border-radius: .1em
}
.credit .zoom-wrap .zoom a:hover {
    background-color:rgba(0,0,0,0.6);
}

/*-------------------------------------------------------------------------
  768px
---------------------------------------------------------------------------*/
@media screen and (min-width :768px) {
    body { font-size:85% }
    .sp-only { display: none !important }
    .pc-only { display: block !important }	
    li .image { background-size:contain;}
   .credit .zoom-wrap .zoom { max-height:85%;}
}