@charset "utf-8";

/* ======================

 [brake-point]
 min-width:768px /pc
 max-width:767px /tb
 max-width:639px /spL
 max-width:479px /sp

====================== */

/* -----------------------------------------------------------------------------------------------------------
 メイン
----------------------------------------------------------------------------------------------------------- */

/* メイン
----------------------------- */

/* 包括 */
#main {
	width: 100%;
}


/* タイトル
----------------------------- */

/* 包括 */
#wrapTtl {
	width: 100%;
}

/* タイトル */
#wrapTtl .hn01 {
	width: 100%;
	margin-bottom: 10px;
	/*color: #e7368e;2018年11月01日*/
	color: #ff6633;
	font-size: 3.6rem;
	text-align: center;
}


/* masonry
----------------------------- */

/* 包括 */
#masonry {
	width: 100%;
}

/* 各包括 */
.grid {
	float:left;
	overflow: hidden;
	width:250px;
   	height:auto;
	color:#fff;
	background: url(/seito_photocon/img/common/parts/loading.gif) no-repeat center center;
}

/* 読み込み前0 */
.ready {
	opacity: 0;
}

/* 読み込み後1 */
.loaded {
	opacity: 1;
	-webkit-transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
	-moz-transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
	-o-transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
	transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 10ms;
}

/* ------------------------------------------------------------------------------ // pc -- */
@media screen and (min-width:768px){

/* サムネイルセット */
.view {
	position: relative;
	overflow: hidden;
	width: 100%;
	height:auto;
	text-align: center;
	border: solid #fff 1px;
}

/* サムネイル幅100% */
.view img {
	display: block;
	position: relative;
	width: 100%;
	height:auto;
}


/* 詳細表示包括 */
.view .mask {
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height:auto;
}

/* 詳細表示 */
.view .info {
	display: table-cell;
	width: 100%;
	height:auto;
	vertical-align: middle;
	color: #fff;
}

/* 賞 */
.view .info .awardCategory {
	display: inline-block;
	width: 60%;
	margin-bottom: 20px;
	padding: 3px 5px;
	border: #fff 1px solid ;
	font-size: 1.5rem;
}

/* 詳細タイトル */
.view .info .ttl {
	font-size: 1.5rem;
}

/* タイトル下バー */
.info .ttl:after {
	display: block;
	content: " ";
	width: 30px;
	height: 1px;
	margin: 0 auto 1em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #fff;
}

/* 詳細学校名 */
.view .info .wrapName {
	margin-top: 1.2em;
	font-size: 1.3rem;
}

/* サムネイル幅100% */
.view img {
   -moz-transform:scale(1,1);
   -webkit-transform:scale(1,1);
   -o-transform:scale(1,1);
   -ms-transform:scale(1,1);
   transform:scale(1,1);
   -webkit-transition: all 0.3s ease-in;
   -moz-transition: all 0.3s ease-in;
   -o-transition: all 0.3s ease-in;
   -ms-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
}

/* 詳細表示包括 */
.view .mask {
	background-color: rgba(210,121,169,0.7);
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
	opacity: 0;
}

/* 詳細表示 */
.view .info {
	-webkit-transition: opacity 0.5s 0s ease-in-out;
	-moz-transition: opacity 0.5s 0s ease-in-out;
	-o-transition: opacity 0.5s 0s ease-in-out;
	-ms-transition: opacity 0.5s 0s ease-in-out;
	transition: opacity 0.5s 0s ease-in-out;
	opacity: 0;
}

/* 賞 */
.view .info .awardCategory {
	-webkit-transition: opacity 0.8s 0s ease-in-out;
	-moz-transition: opacity 0.8s 0s ease-in-out;
	-o-transition: opacity 0.8s 0s ease-in-out;
	-ms-transition: opacity 0.8s 0s ease-in-out;
	transition: opacity 0.8s 0s ease-in-out;
	opacity: 0;
}

/* 詳細タイトル */
.view .info .ttl {
	-webkit-transition: opacity 0.8s 0s ease-in-out;
	-moz-transition: opacity 0.8s 0s ease-in-out;
	-o-transition: opacity 0.8s 0s ease-in-out;
	-ms-transition: opacity 0.8s 0s ease-in-out;
	transition: opacity 0.8s 0s ease-in-out;
	opacity: 0;
}

/* 詳細学校名 */
.view .info .wrapName {
	-webkit-transition: opacity 1.2s 0s ease-in-out;
	-moz-transition: opacity 1.2s 0s ease-in-out;
	-o-transition: opacity 1.2s 0s ease-in-out;
	-ms-transition: opacity 1.2s 0s ease-in-out;
	transition: opacity 1.2s 0s ease-in-out;
	opacity: 0;
}

/* サムネイル幅100%hover */
.view:hover img {
	opacity:0.7;
   -moz-transform:scale(1.1,1.1);
   -webkit-transform:scale(1.1,1.1);
   -o-transform:scale(1.1,1.1);
   -ms-transform:scale(1.1,1.1);
   transform:scale(1.1,1.1);
}

/* hover時　詳細包括 */
.view:hover .mask {
	display: table;
	width: 100%;
	height: auto;
	opacity: 1;
}

/* hover時　詳細 */
.view:hover .info {
	display: table-cell;
	width: 100%;
	height: auto;
	opacity:1;
	-moz-transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

/* hover時　賞 */
.view .info .awardCategory {
	opacity:1;
	-moz-transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	-ms-transition-delay: 0.6s;
	transition-delay: 0.6s;
}

/* hover時　詳細タイトル */
.view:hover .info .ttl {
	opacity:1;
	-moz-transition-delay: 1.0s;
	-webkit-transition-delay: 1.0s;
	-o-transition-delay: 1.0s;
	-ms-transition-delay: 1.0s;
	transition-delay: 1.0s;
}

/* hover時　学校名 */
.view:hover .info .wrapName {
	opacity:1;
	-moz-transition-delay: 1.0s;
	-webkit-transition-delay: 1.0s;
	-o-transition-delay: 1.0s;
	-ms-transition-delay: 1.0s;
	transition-delay: 1.0s;
}

/* リンク */
#wrapTtl {
	position: relative;
}
#announcingLink {
	position: absolute;
	left: 0;
	top: 15px;
}
.wrapIchiranLink a {
	display: inline-block;
	padding: 5px 10px;
	border: #333 1px solid;
	color: #333;
}
/* リンク:hover */
.wrapIchiranLink a:hover {
	background: #ddd;
}
/* 矢印 */
.wrapIchiranLink a:before {
	display: inline-block;
	content: " ";
	width: 6px;
	height: 6px;
	margin-right: 10px;
	border-top: solid 2px #333;
	border-right: solid 2px #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

}
/* pc // -- */


/* ------------------------------------------------------------------------------ // tb -- */
@media screen and (max-width:767px){

/* 各包括 */
.grid {
	width:50%;
}

/* サムネイルセット */
.view {
	width: 100%;
	height:auto;
	text-align: center;
	border: solid #fff 5px;
}

/* サムネイル幅100% */
.view img {
	display: block;
	width: 100%;
	height:auto;
}
.view {
	background-size: 100% auto !important;
}

/* 詳細表示包括 */
.view .mask {
	display: table;
	width: 100%;
	height:auto;
}

/* 詳細表示 */
.view .info {
	width: 100%;
	height:auto;
	vertical-align: middle;
	color: #fff;
	padding: 1em 0.5em;
}

/* 賞 */
.view .info .awardCategory {
	display: inline-block;
	min-width: 60%;
	margin-bottom: 20px;
	padding: 3px 5px;
	border: #fff 1px solid ;
	font-size: 1.5rem;
}

/* 詳細タイトル */
.view .info .ttl {
	font-size: 1.5rem;
}

/* タイトル下バー */
.info .ttl:after {
	display: block;
	content: " ";
	width: 30px;
	height: 1px;
	margin: 0 auto 1em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #fff;
}

/* 詳細学校名 */
.view .info .wrapName {
	margin-top: 1.2em;
	font-size: 1.3rem;
}




/* 詳細表示包括 */
.view .mask {
	position: static;
	width: 100%;
	height:auto;
	background-color: rgba(51,51,51,1);
}

/* リンク */
#wrapTtl {
	position: relative;
}
#announcingLink {
	position: absolute;
	left: 5px;
	top: 10px;
}
.wrapIchiranLink a {
	display: inline-block;
	padding: 5px 10px;
	border: #333 1px solid;
	color: #333;
}
/* 矢印 */
.wrapIchiranLink a:before {
	display: inline-block;
	content: " ";
	width: 6px;
	height: 6px;
	margin-right: 10px;
	border-top: solid 2px #333;
	border-right: solid 2px #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
}
/* tb // -- */