@charset "utf-8";
/* CSS Document */

#sp20 .contents .list img{
	width:100%;
}

#sp20 .contents .list li:first-child{
	margin-top:0;
}

#sp20 .contents .inner {
	max-width:1240px;
	width:100%;
	margin:20px auto 4em auto;
}

#sp20 h1 img{
	width:100%;
}

#sp20 .a{
	margin:0 0 2em 0;
	background:#282928;
	color:#fff;
}

#sp20 .a p{
	line-height:2;
	margin:-0.5em auto 1rem;
}
#sp20 .a h2{
	font-size:115%;
	margin:1.5rem 0 1rem;
}

#sp20 .b{
	margin:0 0 4em 0;
}

#sp20 .b p{
	margin:-0.5em auto 3em auto;
}
#sp20 .b p.aligncenter{
	text-align:center;
	font-size:115%;
}

#sp20 .b p:last-child{
	margin-bottom:0;
}

#sp20 .b p .name{
	display:block;
	width:6em;
	float:left;
	text-align:center;
	padding:6em 0 0 0;
	margin:0 1em 0 0;
	background:no-repeat center 0.5em;
	background-size:5em;
}

#sp20 .b .right .name{
	float:right;
	margin:0 0 0 1em;
}

#sp20 .b p .baloon{
	display:block;
	width:calc(100% - 4px - 11em);
	float:left;
	font-weight:bold;
	line-height:1.75;
	background-color:rgba(0,0,0,0.02);
	border:2px solid rgba(0,0,0,0.16);
}

#sp20 .b .right .baloon{
	float:right;
}

#sp20 .b .face01 .name{
	background-image:url("../../common2/images/sp20/01.png");
}
#sp20 .b .face02 .name{
	background-image:url("../../common2/images/sp20/02.png");
}
#sp20 .b .face03 .name{
	background-image:url("../../common2/images/sp20/03.png");
}
#sp20 .b .face04 .name{
	background-image:url("../../common2/images/sp20/04.png");
}
#sp20 .b .face05 .name{
	background-image:url("../../common2/images/sp20/05.png");
}

#sp20 .c p{
	line-height:2;
	text-align:center;
	margin:-0.5em auto;
}

#sp20 .c span{
	display:inline-block;
	margin:1em auto 3em auto;
}

#sp20 .c span img{
	max-width:100%;
}

#sp20 .poem{
	max-width:840px;
	padding:1.75em 2em;
	margin:0 auto 3em;
	background:#f5f2ec;
	border:2px solid rgba(0,0,0,0.10);
	border-radius:2em;
	box-sizing:border-box;
}

#sp20 .poem p{
	margin:0 0 1em 0;
	line-height:1.9;
	font-weight:bold;
}

#sp20 .poem p:last-child{
	margin-bottom:0;
}

#sp20 .poem .waka{
	text-align:center;
	font-size:115%;
	line-height:2;
	letter-spacing:0.08em;
}

#sp20 .e h2{
	text-align:center;
	font-size:1.25rem;
	margin:calc(4rem + -0.375em) 0 calc(1.25rem + -0.375em);
	line-height:1.75;
}
#sp20 .e {
	margin:0 auto 3em;
}

@media all and (min-width:768px){

	.pcNone{
		display:none;
	}

	#sp20 h1 {
		margin-bottom:4em;
	}

	#sp20 .a{
		padding:2.5em;
		margin:0 0 2em 0;
		background:#282928;
	}

	#sp20 .a p{
		width:39em;
		font-size:125%;
	}

	#sp20 .a .text{
		display:none;
	}

	#sp20 .a ul{
		display:none;
	}

	#sp20 .b p,
	#sp20 .poem{
		max-width:840px;
	}

	#sp20 .b p .baloon{
		display:block;
		font-size:125%;
		letter-spacing:0.1em;
		padding:1.75em 2em;
		border-radius:3em;
		box-sizing:border-box;
	}

	#sp20 .c p{
		font-size:125%;
	}

	#sp20 .e {
		max-width:840px;
	}
}

@media all and (max-width:767px){

	.spNone{
		display:none;
	}

	#sp20 .a{
		padding:1em;
		margin:0 0 2em 0;
		background:#282928;
	}

	#sp20 .a .text{
		margin:1em 0 0 0;
		line-height:1;
	}

	#sp20 .a ul{
		font-size:80%;
		margin:-0.375em 0;
	}

	#sp20 .a ul li{
		color:#fff;
		line-height:1.75;
	}

	#sp20 .b p .baloon{
		display:block;
		padding:2.25em 2em;
		border-radius:3.5em;
		box-sizing:border-box;
	}

	#sp20 .b p.aligncenter{
		font-size:1rem;
		line-height:1.75;
	}

	#sp20 .poem{
		padding:1.5em 1.25em;
		border-radius:1.5em;
	}

	#sp20 .poem .waka{
		font-size:1rem;
		letter-spacing:0.04em;
	}
}