/*TITLE*/
.txt {
    font-size : 2vw;
	font-family: 'Heebo', sans-serif;
	margin-left : 20px ;
	text-align :left ;
	color : #808080;
}

/*LINK*/
.navi {
	text-align :center;
    color: white;
    top: 11vw;
    left: 0;
}

a {
	text-decoration: none;
	font-size:15pt;
}
	
div.navi{
    height:100px;
    vertical-align:top;
}

div.sample{
    height:100px;
    display:table-cell;
    vertical-align:top;
}

h10 {
    font-weight: bold;
}

/*CONTENTS*/
.rltext {
	font-size: 1vw;
	font-family: 'Noto Sans JP', sans-serif;
	max-width: 50%;
	text-align : center ;
	margin-left:auto;
	margin-right:auto;
}
/*PC*/
div.blocka {
   float: left;
	width: 44vw;
}

div.blockb {
    float: right;
	width: 44vw;
}

h2 {
    font-size: 1.2vw;
}

h3 {
	font-size: 1vw;
	font-family: 'Noto Sans JP', sans-serif;
}

h4 {
	font-size: 1vw;
	font-family: 'Noto Sans JP', sans-serif;
}

h5 {
    font-size: 1.2vw;
}

h6 {
    font-size: 1vw;
}

.sp {
	display: none;
}

/*SMARTPHONE*/
@media screen and (max-width: 1300px) {	

a {
	text-decoration: none;
	font-size:5vw;
}
	
h2 {
	font-size: 3vw;
	text-align :center;
}

h3 {
	font-size: 2vw;
	font-family: 'Noto Sans JP', sans-serif;
}

h4 {
	font-size: 2vw;
	font-family: 'Noto Sans JP', sans-serif;
}

h5 {
    font-size: 2vw;
}

h6 {
    font-size: 2vw;
}
	
.pc {
	display: none;
}

.sp {
	display: block;
}
		
.vv {
	display: none;
	max-width: 90%;
}

.pc {
	display: none;;
}
}
	
/*IMAGE*/
.photo span { display:none; }
#photo1 span { display:block; }
#r1:checked ~ .photo span,#r2:checked ~ .photo span,#r3:checked ~ .photo span,#r4:checked ~ .photo span,#r5:checked ~ .photo span { display:none; }
#r1:checked ~ #photo1 span { display:block; }
#r2:checked ~ #photo2 span { display:block; }
#r3:checked ~ #photo3 span { display:block; }
#r4:checked ~ #photo4 span { display:block; }
#r5:checked ~ #photo5 span { display:block; }
/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	max-width: 500px;
	margin: 0 auto;
	z-index: 1;
}

/*サムネイルの幅、ポインターを手のひら*/
#thumbs label img {
	width:18.5%;
	cursor: pointer;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5 {
	display: none;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
.photo {
	position: absolute;
	left: 0;
	top: 0;
}
.photo img {
	width:100%;
	opacity: 0;
	-webkit-transition: opacity 3s ease;
	transition: opacity 3s ease;
	z-index: 1;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #photo1 img, #r2:checked ~ #photo2 img, #r3:checked ~ #photo3 img, #r4:checked ~ #photo4 img, #r5:checked ~ #photo5 img {
	opacity: 1;
}

#vv {
	text-align : center ;
}


@media screen and (max-width: 767px) {
img {
  pointer-events: none;
	}
	
.cap {
    margin-top : 5px ;
    text-align : center ;
    font-size : 12pt;
	font-family: 'Heebo', sans-serif;
	z-index: 100;
}

#thumbs {
    margin-top : 50px ;
    text-align : center ;
	margin-left:2%;
	}
}

@media screen and (min-width: 767px) {

.cap {
    margin-top : 30px ;
    text-align : center ;
    font-size : 25pt;
 	font-family: 'Heebo', sans-serif;
	z-index: 100;
}

#thumbs {
    margin-top : 200px ;
    text-align : center ;
	margin-left:2%;
}
}

@media screen and (max-width: 1300px) {	
#stage {
	position: relative;
	max-width: 90%;
	margin: 0 auto;
    z-index: 1;
}
}

/*BACKTOLIST*/
#btl {
   	text-decoration: none;
    font-size : 30pt;
	padding-bottom:1px;
	font-family: 'Heebo', sans-serif;
	margin : 30px 0px;	
	text-align : center ;
}

/*COPYRIGHT*/
.copyright {
    font-size : 5pt;
	font-family : sans-serif ;
	text-align : center ;
	margin-bottom : 10px ;
    color : #808080;
    z-index: 100000;
}

.yt-wrapper {
  position: relative;
	width: 100%;
	text-align : center ;
		margin-bottom : -22.5% ;
}
.yt-wrapper:before {
  content:"";
  display: block;
  padding-top: 50%;
}
.yt-wrapper iframe {
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
	height: 50%;
}