@charset "utf-8";

/* box-qualifiers
==========================================*/
.modePC .box-qualifiers {
	flex-wrap: wrap;
	margin-top: 80px;
}
.modeSP .box-qualifiers {
	margin-top: 150px;
}
.box-qualifiers li {
	background-color: #fff;
}
.modePC .box-qualifiers li {
	width: 340px;
	height: 440px;
	margin-top: 40px;
	font-size: 16px;
}
.modeSP .box-qualifiers li {
	font-size: 30px;
	height: 816px;
}
.modeSP .box-qualifiers li + li {
	margin-top: 80px;
}
.box-qualifiers li a {
	text-decoration: none;
	color: #777;
}
.box-qualifiers li .wrap-img {
	position: relative;
	overflow: hidden;
}
.modePC .box-qualifiers li .wrap-img {
	width: 100%;
	height: 340px;
}
.modeSP .box-qualifiers li .wrap-img {
	width: 100%;
	height: 630px;
}
.box-qualifiers li .wrap-img img {
	width: 100%;
	height: 100%;
}
.modePC .box-qualifiers li a img {
	transition: transform 4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.modePC .box-qualifiers li a:hover img {
	transform:scale(1.1);
}
.modePC .box-qualifiers li p {
	height: 100px;
	line-height: 1.8;
}
.modeSP .box-qualifiers li p {
	height: 186px;
	line-height: 1.6;
}
.modePC .box-qualifiers li .expand {
	display: none;
}
.box-qualifiers li .expand {
	width: 80px;
	height: 80px;
	background-color: rgba(0,0,0,.5);
	position: absolute;
	right: 0;
	bottom: 0;
}
.box-qualifiers li .expand svg {
	fill: #fff;
	width: 48px;
	height: 48px;
}
.modal-media .box-qualifiers li a {
	pointer-events: none;
}
/* modal-media
==========================================*/
.open-modal-media .modal-media {
	display: block;
	height: 100%;
}
.modal-media .controls {
	margin: auto;
}
.modePC .modal-media .controls {
	margin-top: 165px;
}
.modeSP .modal-media .controls {
	margin-top: 223px;
}
.modePC .modal-media .controls {
	width: 860px;
}
.modal-media #media-player {
	position: relative;
	margin: auto;
	width: 100vw;
}
.modePC .modal-media #media-player {
	height: calc( 100vh - 258px );
}
.modeSP .modal-media #media-player {
	height: calc( 100vh - 313px );
}
.modal-media #media-player img {
	width: 100%;
	height: 100%;
}
.modePC .modal-media #media-player {
	margin-top: 23px;
}
.modeSP .modal-media #media-player {
	margin-top: 23px;
}
.modal-media #media-player img {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 1;
	transition: opacity 0s .6s;
}
.modal-media #media-player img.active {
	position: relative;
	opacity: 1;
	transition: opacity .6s;
	z-index: 2;
}

/* 改行回避用 */
span.name {
	display: inline-block;
	white-space: nowrap;
}
@media screen and (min-width: 1100px) {
	br.sp {display: none;}
	br.pc {display: inline;}
	span.pc-none {display: none;}
	span.sp-none {display: inline;}
}
@media screen and (max-width: 1099px) {
	br.sp {display: inline;}
	br.pc {display: none;}
	span.pc-none {display: inline;}
	span.sp-none {display: none;}
}