@charset "utf-8";


/*list
************************************************************************************/

/*random*/
.photo-grid{
}
.grid-item{
	display: inline-block;
	
	position: relative;
	
	padding: 15px 25px 35px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	
	text-align: left;
	
}
.grid-item .img-wrap{
	position: relative;
	background: #000;
	font-size: 0;
	line-height: 0;
	padding: 0;
}
.grid-item .img-wrap .g-hover-title{
	display: none;
	position: absolute;
	color: #fff;
	font-size: 16px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999;
	text-align: center;
	line-height: 1.5;
	
}
.grid-item img {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	opacity: 1;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.grid-item:hover .img-wrap .g-hover-title{
	display: block;
}
.grid-item:hover .img-wrap img{
	opacity: .7;
}
.grid-item .status{
	padding: 9px 0 7px 0;
	font-size: 13px;
	border-bottom: 1px solid #000;
}
.grid-item .name{
	font-size: 20px;
	padding: 7px 0;
	font-weight: 700;
	border-bottom: 1px solid #000;
}
.grid-item .name a{
	color: #000;
	text-decoration: none;
}
.grid-item .cmt{
	font-size: 14px;
	padding: 7px 0;
	border-bottom: 1px solid #000;
}

.grid-item.grow1{
	width: 30%;
}
.grid-item.grow2{
	width: 40%;
}
.grid-item.grow3{
	width: 29%;
}
.grid-item.grow4{
	width: 39%;
}
.grid-item.grow5{
	width: 25%;
}
.grid-item.grow6{
	width: 35%;
}

@media screen and (max-width: 768px){
.grid-item{
	padding: 1% 1% 2%;
	
}
.grid-item .title{
	font-size: 15px;
}
.grid-item.grow2{
	width: 39%;
}
.grid-item.grow6{
	width: 34%;
}
}
@media screen and (max-width: 620px) {
.grid-item.grow1{
	width: 49%;
}
.grid-item.grow2{
	width: 49%;
}
.grid-item.grow3{
	width: 49%;
}
.grid-item.grow4{
	width: 49%;
}
.grid-item.grow5{
	width: 49%;
}
.grid-item.grow6{
	width: 49%;
}
}


/*fix*/
.photo-grid-fix{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: left;
	justify-content: left;
}
.photo-grid-fix li{
	width: 31%;
	
	position: relative;
	
	padding: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin: 1%;
	
}
.photo-grid-fix li .img-wrap{
	position: relative;
	background: #000;
	font-size: 0;
	line-height: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
}
.photo-grid-fix li .img-wrap:before {
	content:"";
	display: block;
	padding-top: 65%;
}
.photo-grid-fix li .img-wrap img{
	height: auto;
	width: 110%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	margin: auto;
}


.photo-grid-fix li .img-wrap .g-hover-title{
	display: none;
	position: absolute;
	color: #fff;
	font-size: 16px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999;
	text-align: center;
	line-height: 1.5;
	
}
ul.photo-grid-fix li img {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	opacity: 1;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
ul.photo-grid-fix li:hover .img-wrap .g-hover-title{
	display: block;
}
ul.photo-grid-fix li:hover .img-wrap img{
	opacity: .7;
}
ul.photo-grid-fix li p{
	padding: 7px 0;
}
ul.photo-grid-fix li .status{
	padding: 15px 0 7px 0;
	font-size: 13px;
}
ul.photo-grid-fix li .cmt{
	font-size: 15px;
	padding: 7px 0;
	font-weight: 700;
}
ul.photo-grid-fix li .cmt a{
	color: #000;
	text-decoration: none;
}
ul.photo-grid-fix li .name{
	font-size: 16px;
	padding: 7px 0;
	font-weight: 700;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

/*list_view*/
ul.list_view li{
	margin: 0 0 3.5em 0;
	padding-bottom: 3.5em;
	border-bottom: 1px solid #CCC;
	display: table;
	width: 100%;
}
ul.list_view li figure{
	width: 380px;
	display: table-cell;
	vertical-align: top;
}
ul.list_view li figure img{
	width: 100%;
	height: auto;
}
ul.list_view li .detail{
	display: table-cell;
	vertical-align: middle;
	padding: 0 0 0 1em;
}
ul.list_view li .detail .type{
	margin: 0 0 .7em 0;
	font-size: 13px;
}
ul.list_view li .detail .title{
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 .7em 0;
}
ul.list_view li .detail .title a{
	color: #000;
	text-decoration: none;
}
ul.list_view li .detail .date{
	color: #999;
	margin: 0 0 .7em 0;
}
ul.list_view li .detail .cmt{
	margin: 0 0 .7em 0;
}
ul.list_view li .detail .more{
	margin: 0;
	text-align: right;
	color: #03C;
}

@media screen and (max-width: 768px){
ul.list_view li figure{
	width: 40%;
}
}
@media screen and (max-width: 620px) {
ul.photo-grid-fix li{
	width: 48%;
}
}
@media screen and (max-width: 420px){
ul.list_view li{
	display: block;
}
ul.list_view li figure{
	width: auto;
	display: block;
	text-align: center;
}
ul.list_view li figure img{
	width: auto;
	max-width: 80%;
	height: auto;
}
ul.list_view li .detail{
	display: block;
	padding: .7em 1em 0;
}

}

/*modal
************************************************************************************/
.modalCheck {
	display: none;
}
label {
	cursor: pointer;
}

.modalWrap, .modalBg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	z-index: 9999;
}

.modalWrap {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: 0.3s cubic-bezier(1, 0, 0, 1);
	transition: 0.3s cubic-bezier(1, 0, 0, 1);
	-webkit-transition-property: opacity;
	transition-property: opacity;
	will-change: opacity;
}

.modalBg {
	cursor: pointer;
	opacity: 0.7;
	background-color: #000;
	z-index: 2;
}
.modalBg label {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
}

.modalCon {
	position: absolute;
	top: 5%;
	left: 0;
	right: 0;
	width: 92%;
	max-width: 920px;
	height: 86%;
	margin: auto;
	z-index: 3;
}

.modalInner {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
	height: 100%;
	padding: 0 1.5em 1.5em;
	cursor: default;
	background-color: #fff;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3);
					box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3);
}

.modalCloseBtn {
	position: absolute;
	top: 0;
	right: 0;
}
.modalCloseBtn label {
	display: inline-block;
	padding: 0.5em;
	color: #333;
	text-decoration: none;
	font-size: 2em;
}

.modalCheck:not(:checked) ~ .wrapper > *:not(.modalWrap) {
	-webkit-filter: blur(0px);
					filter: blur(0px);
}
.modalCheck:not(:checked) ~ .wrapper .modalWrap {
	opacity: 0;
	visibility: hidden;
}

.modalCheck:checked ~ .wrapper > *:not(.modalWrap) {
	-webkit-filter: blur(3px);
					filter: blur(3px);
}

#modal000:checked ~ .wrapper #modal000_contents,
#modal001:checked ~ .wrapper #modal001_contents,
#modal002:checked ~ .wrapper #modal002_contents,
#modal003:checked ~ .wrapper #modal003_contents,
#modal004:checked ~ .wrapper #modal004_contents,
#modal005:checked ~ .wrapper #modal005_contents,
#modal006:checked ~ .wrapper #modal006_contents,
#modal007:checked ~ .wrapper #modal007_contents,
#modal008:checked ~ .wrapper #modal008_contents,
#modal009:checked ~ .wrapper #modal009_contents,
#modal010:checked ~ .wrapper #modal010_contents,
#modal011:checked ~ .wrapper #modal011_contents,
#modal012:checked ~ .wrapper #modal012_contents,
#modal013:checked ~ .wrapper #modal013_contents,
#modal014:checked ~ .wrapper #modal014_contents,
#modal015:checked ~ .wrapper #modal015_contents,
#modal016:checked ~ .wrapper #modal016_contents,
#modal017:checked ~ .wrapper #modal017_contents,
#modal018:checked ~ .wrapper #modal018_contents,
#modal019:checked ~ .wrapper #modal019_contents,
#modal020:checked ~ .wrapper #modal020_contents,
#modal021:checked ~ .wrapper #modal021_contents,
#modal022:checked ~ .wrapper #modal022_contents,
#modal023:checked ~ .wrapper #modal023_contents,
#modal024:checked ~ .wrapper #modal024_contents,
#modal025:checked ~ .wrapper #modal025_contents,
#modal026:checked ~ .wrapper #modal026_contents,
#modal027:checked ~ .wrapper #modal027_contents,
#modal028:checked ~ .wrapper #modal028_contents,
#modal029:checked ~ .wrapper #modal029_contents,
#modal030:checked ~ .wrapper #modal030_contents,
#modal031:checked ~ .wrapper #modal031_contents,
#modal032:checked ~ .wrapper #modal032_contents,
#modal033:checked ~ .wrapper #modal033_contents,
#modal034:checked ~ .wrapper #modal034_contents,
#modal035:checked ~ .wrapper #modal035_contents,
#modal036:checked ~ .wrapper #modal036_contents,
#modal037:checked ~ .wrapper #modal037_contents,
#modal038:checked ~ .wrapper #modal038_contents,
#modal039:checked ~ .wrapper #modal039_contents,
#modal040:checked ~ .wrapper #modal040_contents,
#modal041:checked ~ .wrapper #modal041_contents,
#modal042:checked ~ .wrapper #modal042_contents,
#modal043:checked ~ .wrapper #modal043_contents,
#modal044:checked ~ .wrapper #modal044_contents,
#modal045:checked ~ .wrapper #modal045_contents,
#modal046:checked ~ .wrapper #modal046_contents,
#modal047:checked ~ .wrapper #modal047_contents,
#modal048:checked ~ .wrapper #modal048_contents,
#modal049:checked ~ .wrapper #modal049_contents,
#modal050:checked ~ .wrapper #modal050_contents,
#modal051:checked ~ .wrapper #modal051_contents,
#modal052:checked ~ .wrapper #modal052_contents,
#modal053:checked ~ .wrapper #modal053_contents,
#modal054:checked ~ .wrapper #modal054_contents,
#modal055:checked ~ .wrapper #modal055_contents,
#modal056:checked ~ .wrapper #modal056_contents,
#modal057:checked ~ .wrapper #modal057_contents,
#modal058:checked ~ .wrapper #modal058_contents,
#modal059:checked ~ .wrapper #modal059_contents,
#modal060:checked ~ .wrapper #modal060_contents{
  opacity: 1;
  visibility: visible;
}

.modalTtl {
	padding: 2em 0.5em 1.5em;
	font-size: 2em;
	line-height: 1.3;
	text-align: center;
}

.modalText .modalCover {
	margin: 2em 0 1em;
	text-align: center;
}
.modalText .modalCover img{
	max-width: 100%;
	height: auto;
}

@media (max-width: 640px) {
	.modalInner {
		padding-left: 1em;
		padding-right: 1em;
	}

	.modalTtl {
		font-size: 1.5em;
		padding-bottom: 1em;
	}

	.modalText .modalCover {
		margin: 0 -1em 1em;
	}
}

/*page_movie
************************************************************************************/
#page_movie .movie video{
	width: 100%;
	height: auto;
}