@charset "utf-8";
@media only screen and (min-width: 769px)  {
	section.content.mem_mess:before {
		content: "メッセージにマウスを重ねるとテキストを表示します";
		position: absolute;
		display: block;
		font-size: xx-small;
		top: 4rem;
		right: 2rem;
	}
	section.content.mem_mess:after {
		content: "メッセージをクリックすると拡大表示します";
		position: absolute;
		display: block;
		font-size: xx-small;
		top: 5rem;
		right: 2rem;
	}
}
@media only screen and (max-width: 768px)  {
	section.content.mem_mess:before {
		content: "メッセージをタップするとテキストを表示します";
		position: absolute;
		display: block;
		font-size: xx-small;
		top: 4.5rem;
		right: 2rem;
	}
	section.content.mem_mess:after {
		display: none;
	}
}

.content .message .inner {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% -3px;
	height: 300px;
	width: 23.5%;
	position:relative;
	overflow:hidden;
	cursor:pointer;
	margin: 0 0.25em;
	filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.1));
}
.content .message .inner.empty {
	cursor:unset;
}
.content .message .inner:nth-child(odd) {
	transform: rotate(-1deg);
}
.content .message .inner:nth-child(even) {
	transform: rotate(1deg) translate(0,10px);
}

@media only screen and (max-width: 960px)  {
	section.message {
		flex-flow: row wrap;
	}
	.content .message .inner {
		height: 320px;
		width: 47.5%;
		max-width:320px;
	}
}
@media only screen and (max-width: 480px)  {
	section.message {
		flex-flow: column;
	}
	.content .message .inner {
		width: 85vw;
		height: 90vw;
		min-height: 300px;
		min-width: 275px;
		max-width:unset;
		margin: 0.5em auto;
	}
	.content .message .inner.empty {
		display:none;
	}
}
.content .message .inner p{
	position: absolute;
	width: 100%;
	top: -100%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 1.5em;
	margin: 0;
	text-align:justify;
	opacity:0;
	transition:all 1s 0.5s;
}
.content .message .inner:hover p   {
	top: 50%;
	opacity:1;
	transition:all 1s 0.25s;
}
.content .message .inner img{
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition:all 1s 0.5s;
	mix-blend-mode: darken;
}
.content .message .inner:hover img  {
	top: 100%;
	opacity:0;
	transition:all 1s 0.25s;
}
.content .message .inner h4 {
	position: absolute;
	top: 0.5em;
	left: 50%;
	transform: translate(-50%,0);
	color: #c95e0099;
}
.content .message .inner.empty{
	background-image: url(messages/empty.png);
	background-size: 50% 50% !important;
	background-position: 100% 100% !important;
	opacity:0.5;
}
.content.leader_mess > h5:before {
	background-color: #ff000033;
}
.content.mem_mess > h3 ,
.content.leader_mess > h3 {
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
}
.content.mem_mess > h3:after ,
.content.leader_mess > h3:after {
	content: "";
	width: 2em;
	background: url(messages/empty.png) no-repeat 50% 100% / contain;
	height: 2em;
	position: relative;
	top: 0.75em;
	display: inline-block;
}
.message + h5 {
	margin-top: 1em;
}
.inner.mem ,
.inner.lea {
	background-image: url(messages/mess_bg.png);
}
.inner.mem:after,
.inner.lea:after{
	content:"";
	background-image: url(messages/deco_01.png);
	display:block;
	width:95%;
	height:30px;
	background-repeat:repeat-y;
	background-position: 50% 100%;
	background-size: 150% auto;
	position: absolute;
	bottom: 6px;
	left: 2.5%;
	mix-blend-mode: multiply;
}
.inner.Q01.s1:after{
	background-image: url(messages/deco_01.png);
}
.inner.Q01.s2:after{
	background-image: url(messages/deco_02.png);
}
.inner.Q01.s3:after{
	background-image: url(messages/deco_03.png);
}
.inner.Q01.s4:after{
	background-image: url(messages/deco_04.png);
}
.inner.Q02.s1:after{
	background-image: url(messages/deco_05.png);
}
.inner.Q02.s2:after{
	background-image: url(messages/deco_06.png);
}
.inner.Q02.s3:after{
	background-image: url(messages/deco_07.png);
}
.inner.Q02.s4:after{
	background-image: url(messages/deco_08.png);
}
.inner.Q03.s1:after{
	background-image: url(messages/deco_09.png);
}
.inner.Q03.s2:after{
	background-image: url(messages/deco_10.png);
}
.inner.Q03.s3:after{
	background-image: url(messages/deco_11.png);
}
.inner.Q03.s4:after{
	background-image: url(messages/deco_12.png);
}
.inner.Q04.s1:after{
	background-image: url(messages/deco_13.png);
}
.inner.Q04.s2:after{
	background-image: url(messages/deco_14.png);
}
.inner.Q04.s3:after{
	background-image: url(messages/deco_15.png);
}
.inner.Q04.s4:after{
	background-image: url(messages/deco_16.png);
}
.inner.Q05.s1:after{
	background-image: url(messages/deco_17.png);
}
.inner.Q05.s2:after{
	background-image: url(messages/deco_18.png);
}
.inner.Q05.s3:after{
	background-image: url(messages/deco_19.png);
}
.inner.Q05.s4:after{
	background-image: url(messages/deco_20.png);
}
.inner.Q06.s1:after{
	background-image: url(messages/deco_21.png);
}
.inner.Q06.s2:after{
	background-image: url(messages/deco_22.png);
}
.inner.Q06.s3:after{
	background-image: url(messages/deco_19.png);
}
.inner.Q06.s4:after{
	background-image: url(messages/deco_02.png);
}