/* mobile */
body {
	         margin: 0px;
			  color: #000000;
   background-color: #ffffff;

}

.all{
	text-align: center;
	margin: auto;
	width: 950px;
	background-image: url(img/spochangallery_back5.jpg) ;
	background-repeat: no-repeat;

}

.moji {
	padding-top: 120px;
	padding-left: 460px;
}

.photo_menutop {
	top: 0px;
	width: 100vw;
	height: calc(100vw * 134/ 800 + 40px);
	background-image: url(img/spochangallery2.gif);
	background-size: 100%;
	background-repeat: no-repeat;
	position: relative;
	background-position: 50% 0%
}
.photo_menutop .path {
	text-align:left;
	position: relative;
	top: calc(100% - 1.5em);
	left: 0px;
}

.photo_menutop2 {
        top: 0px;
        width: 800px;
        height: 134px;
        background-image: url(img/spochangallery3.gif);
        background-position: 50% 0%
}
.photo_copy {
	padding-top: 10px;
	text-align: center;
	/*background-color: red;*/
}
.leftarrow, .rightarrow {
	display: none;
}


.in_menu {
	position: relative;
/*
	top: 104px;
*/
	top: calc(100vw * 134/ 800);
	left: 0px;
	font-size: 15px; 
	font-weight:bold;
}
.in_menu a:link { color: #000000; }
.in_menu a:visited { color: #000000; }
.in_menu a:hover { color: #fb0035;}
.in_menu a:active { color: #fb0035; }


.type1{ font-size: 24px;
        font-weight:bold;
}
.type2{ font-size: 15px; }

.type3{ font-size: 15px; 
        color: #658afb;
}
.type4{ font-size: 21px;
        font-weight:bold;
}
.type5{ font-size: 13px; }

.type6{ font-size: 17px; 
        font-weight:bold;
}
.type7{ font-size: 15px; 
        color: #ffffff;
}
.type8{ font-size: 15px; 
        color: #ffffff;
}
.photo1 .comment {
	font-size: 0.8em;
	line-height: 1.2em;
}
	
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #fb0035;}
a:active { color: #fb0035; }	

a.special1:link { color: #ffffff; }
a.special1:visited { color: #ffffff; }
a.special1:active { color: #ffffff; }

a.special2:link { color: #000000; }
a.special2:visited { color: #b67718; }
a.special2:hover { color: #ff0000; background: #ffffff}
a.special2:active { color: #000000; }


.photolist {
      width: 100vw;
	padding: 4px;
}
.photo1 {
	position: relative;
       float: left;
       width: 47vw;
      height: 47vw;
      border: 1px solid #fff;
}
.photo1 video {
		width: 47vw;
}
.photo1 div.poster {
		border: solid 2px #000;
		color: #000;
		width: 47vw;
		line-height: 4em;
		position: absolute;
		top: 0px;
		left: 0px;
}
.photo1 div.doga {
		position: absolute;
background-color: #fff;
		     top: 0px;
		   right: 0px;
		   width: 30px;
		font-size: 0.5em;
}
.whitemask {
   background-color: #fff;
             cursor: pointer;
}
.whitemask-video {
	position: absolute;
      cursor: pointer;
	     top: 0px;
	    left: 0px;
}
.photoover {
   font-family: georgia, palatino, 'book antiqua', 'palatino linotype', serif;
   margin: auto;
   font-size: 1.5em;
   line-height: 1em;
   text-shadow: rgba(0, 0, 0, .3) 3px 3px 3px;
}
.photoover .small {
   font-size: 12px;
   line-height: 16px;
}
.allMask {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #000;
    width: 100%;
    height: 100%;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
	z-index: 4;
}
.photoBase {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #fff;
    width: 1px;
    height: 100%;
/*
    visibility: hidden;
*/
    text-align: center;
    padding-top: 0px;
	z-index: 5;
}
.photoTitle {
    position: absolute;
	font-size: 0.8em;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, .3) 3px 3px 3px;
    left: 0px;
    bottom: 0px;
	text-shadow: 1px 2px 3px #fff;
}
.photoHelp {
    position: absolute;
    font-size: 16px;
    right: 20px;
    bottom: 0px;
	text-shadow: 2px 2px 3px #fff;
}
.photoDescription {
    position: absolute;
    left: 10px;
    bottom: 8px;
	text-shadow: 1px 2px 3px #fff;
}
.leftbutton, .rightbutton, .stopbutton {
   background-color: #000;
   cursor: pointer;
   position: absolute;
   bottom: 0px;
   height: 80px;
   width: 50px;
   line-height: 80px;
   font-size: 34px;
   color: #fff;
}
.leftbutton {
    right: 100px;
}
.stopbutton {
    right: 50px;
}
.rightbutton {
    right: 0px;
}
.closePhoto {
    position: absolute;
      top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    background: url(/photo/img/close.png) center center no-repeat;
    background-color: #fff;
    filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    cursor: pointer;
}
.totop {
   position: fixed;
   bottom: 10px;
   right: 30px;
   z-index: 2;
    filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
}
.editPhoto {
    position: absolute;
    top: 40px;
    right: -40px;
    width: 40px;
    height: 80px;
    background-color: #fff;
    cursor: pointer;
    font-size: 24px;
    border: solid 1px #000;
}
.removePhoto {
    position: absolute;
    top: 120px;
    right: -40px;
    width: 40px;
    height: 80px;
    background-color: #fff;
    cursor: pointer;
    font-size: 24px;
    border: solid 1px #000;
}
.captureBtn {
    position: absolute;
    top: 200px;
    right: -40px;
    width: 40px;
    height: 120px;
    background-color: #fff;
    cursor: pointer;
    font-size: 24px;
    border: solid 1px #000;
}
.totop {
   position: fixed;
   bottom: 10px;
   right: 30px;
   z-index: 2;
    filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
}
.paralist {
	width: 600px;
	border: 1px solid #aaa;
}
.clear {
	clear: both;
}
.more {
	clear: both;
	margin: 20px;
	width: 90%;
	height: 70px;
	line-height: 100px;
	border: solid 2px #000;
	cursor: pointer;
}
#photoattr {
	background-color: #fff;
	padding: 10px;
	position: absolute;
	top: 0px;
	left: 0px;
	display:none;
}

@media screen and (min-width: 768px)    /* tablet   */
{
	.photo_menutop {
		height:  200px;
	}
	.in_menu {
		top: 104px;
	}
	.photo_menutop {
		width: 800px;
	}
	.photoTitle {
		font-size: 20px;
	}
	.photoHelp {
		font-size: 16px;
	}
	.photolist {
		width: 90%;
	}
	.photo1 {
		 width: 150px;
		height: 150px;
	}
	.photo1 div.poster,
	.photo1 video {
		width: 150px;
	}
	.closePhoto {
		top: 0px;
		right: -40px;
	}
	.leftarrow, .rightarrow {
		cursor: pointer;
		position: absolute;
		display: block;
		top: 45%;
		height: 150px;
		line-height: 150px;
	}
	.leftarrow img, .rightarrow img {
		vertical-align: middle;
	}
	.leftarrow {
		left: -50px;
	}
	.rightarrow {
		right: -50px;
	}
}
@media screen and (min-width: 990px)    /* PC       */
{
	.photoBase {
		padding-top: 10px;
	}
	.photoHelp {
		bottom: 24px;
	}
	.photoTitle {
		left: 10px;
		bottom: 24px;
	}
}