@charset "utf-8";

body.magazine {
background-image: url(../images/bg_yellow.png);
}

body.photo {
background-image: url(../images/bg_pink.png);
}

/* 広報誌
----------------------------------------------------------- */
#magazine {
width: 1040px;
margin: 0 auto;
padding: 2em 0;
}

#magazine_h {
padding: 0 0 1em 0;
position: relative;
}

#magazine h2 {
font-size: 18px;
font-weight: 700;
margin: 0 0 3em 0;
}

#magazine h2 img {
width: 280px;
height: 130px;
vertical-align: bottom;
}

.img_magazine {
position:absolute;
bottom:0;
left: -50px;
}

.img_magazine02 {
position:absolute;
top: 20%;
right: -50px;
}

#magazine h3 {
font-size: 18px;
font-weight: 700;
margin: 0 0 3em 0;
color :#2F1E3D;
}

#magazinebox {
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

#magazinebox a {
width: 16%;
margin: 0 2% 1em 2%;
text-align: left;
font-weight: 700;
color :#2F1E3D;
}

#magazinebox p {
font-size: 14px;
line-height: 1.5;
margin-top:0.5em;
}

.pdfbox {
margin: 0 0 0.2em 0;
border: 5px solid #2F1E3D;
border-radius: 10px;
}

.pdfbox img {
vertical-align: bottom;
border-radius: 8px;
}

@media screen and (max-width: 768px) {
	/* 広報誌 */
	#magazine {
	width:100%;
	padding: 0 0 2em 0;
	}
	#magazine_h {
	padding: 0 0 6em 0;
	}
	#magazine h2 {
	margin: 0 0 2em 0;
	}
	#magazine h2 img {
	width: 240px;
	height: 111px;
	}
	.img_magazine {
	display: none;
	}
	.img_magazine02 {
	top:70%;
	right: 0;
	}
	.img_magazine02 img {
	width: 100px;
	}
	#magazine h3 {
	font-size: 16px;
	margin: 0 1em;
	text-align: left;
	}
	#magazinebox {
	width:90%;
	margin: 0 auto;
	}
	#magazinebox a {
	width: 46%;
	margin: 0 2% 1em 2%;
	}
}

/* 写真で見る
----------------------------------------------------- */
#photo {
width: 1040px;
margin: 0 auto;
padding: 1.5em 0 2em 0;
}

#photo_h {
padding: 0 0 0.6em 0;
position: relative;
}

#photo h2 {
margin: 0 0 3em 0;
}

#photo h2 img {
width: 280px;
height: 130px;
vertical-align: bottom;
}

.img_photo {
position:absolute;
bottom: 0;
left: -120px;
}

.photobox {
width: 1040px;
padding: 1em; 
margin: 0 auto 1em auto;
background-color: #FFF;
border:12px solid #F7F0DD;
border-radius: 20px;
overflow: hidden;
}

.photobox_l {
width: 45%;
float: left;
font-weight: 700;
padding: 0 ;
text-align: left;
}

.photobox_l p {
font-size:18px;
line-height: 2.0;
margin: 1em 2em 2em 2em;
}

.photobox_r {
width: 50%;
float: right;
}

.photobox_r video {
width:100%;
height: auto;
vertical-align: bottom;
}


.photobox_r ul {
text-align: left;
}
.photobox_r li {
display:inline-block;
}

.photobox_r li img {
height: 85px;
}

.no {
width: 80px;
height: 80px;
line-height: 80px;
font-size: 60px;
color:  #F7F0DD;
padding: 0 20px;
margin: 0 0.5em 0 0;
background-color: #E76E4A;
border-radius: 50%;
}

@media screen and (max-width: 768px) {
	/* 写真で見る */
	#photo {
	width:100%;
	padding: 0 0 2em 0;
	}
	#photo_h {
	padding: 0 0 6em 0;
	}
	#photo h2 {
	margin: 0 0 2em 0;
	}
	#photo h2 img {
	width: 240px;
	height: 111px;
	}
	.img_photo {
	left:0;
	right: 0;
	margin: auto;
	}
	.img_photo img {
	width: 300px;
	}
	.photobox {
	width: 90%;
	margin: 0 auto 2em auto;
	}
	.photobox_l {
	width: 100%;
	float: none;
	margin: 0 ;
	}
	.photobox_l p {
	font-size:16px;
	margin: 0.8em 0.8em 2em 0.8em;
	}
	.photobox_r {
	width: 100%;
	float: none;
	margin: 0 ;
	padding: 1em 0 0 0;
	}
	.photobox_r li {
	width: 32%;
	}
	.no {
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 30px;
	padding: 0 10px;
	margin: 0 0.3em;
	}
}