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

article { width:90%; max-width:800px; margin:auto; }
#bild {text-align:center; margin-bottom:80px;}
.area {width:100%; display:inline-block; text-align:center; margin:0 0%; vertical-align:top;}
.area img { border:10px solid #fff; width:70%; margin-bottom:20px; }
.area ul.photo {width:100%; margin:10px 0 0; padding:0; list-style:none; text-align:left;}
.area ul.photo li {width:29%; display:inline-block; padding:0; margin:1.4%;}
.area ul.photo li img{width:100%; border:none; margin:0;}


/* tablet */
@media only screen and (min-width: 481px) {
.area {width:36%; display:inline-block; text-align:center; margin:0 5%; vertical-align:top;}
.area img { border:10px solid #fff; width:90%; }

}
/* desktop */
@media only screen and (min-width: 769px) {
.area {width:40%; display:inline-block; text-align:center; margin:0 2.5%; vertical-align:top;}
}

#rinen p {
	line-height:2em;
	margin-bottom:70px;
}
#rinen h3 {
	padding:10px;
	text-align:center;
	border-top:2px dotted white;
	border-bottom:2px dotted white;
	line-height:2em;
	font-size:18px;
}
#rinen h3 strong{
	background:#16528e;
	color:#fff;
	text-align:center;
	padding:5px 0;
	font-size:1.4em;
	margin:0 10px;
}


h2 {
	width:250px;
	padding:5px 0;
	position:relative;
	text-align:center; background:#fff; color:#3B3B3B;
	padding:5px 0px; margin:auto auto 30px;
	}

h2::before {
position: absolute;
content: "";
bottom:-15px;
left: -29px;
width: 56px;
height: 30px;
margin-top: -5px;
background:url(../images/common/ribbon_l.png) top left no-repeat;
}
h2::after {
position: absolute;
content: "";
bottom:-15px;
right: -29px;
width: 56px;
height: 30px;
margin-top: -5px;
background:url(../images/common/ribbon_r.png) top left no-repeat;
}

.jigyo {
	display:flex;
	flex-wrap:wrap;
	margin-bottom:50px;
}
.box {
	width:100%;
	display:inline-block;
	margin:10px auto;
	padding:2%;
	background:rgba(255,255,255,0.15);
	position:relative;
}

.box h3{
	text-align:center;
	padding-bottom:10px;}
	.box ul {
		margin:0; padding:0;
	}
	.box ul li {padding:10px;
	margin:0 0 10px 0;
	line-height:1.4em;
	border:2px solid white;
	border-radius:20px;
	text-align:center;
	font-size:16px;
	}
	.box ul li small {font-size:13px; line-height:16px; display:block; border-top:1px dotted white; margin:5px 0 0 0; padding:10px 0 0 0;}
	.box .pin01 {
		display:block;
		width:12px; height:12px;
		background:#fff;
		border-radius:20px;
		position:absolute;
		top:10px;
		left:10px;
	}
	.box .pin02 {
		display:block;
		width:12px; height:12px;
		background:#fff;
		border-radius:20px;
		position:absolute;
		top:10px;
		right:10px;
	}
	
/* desktop */
@media only screen and (min-width: 769px) {
.box {
	width:40%;
	display:inline-block;
	margin:30px 2.3%;
	padding:2%;
	background:rgba(255,255,255,0.15);
	position:relative;
}
}