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

.post h1{
	padding-left: 0.5rem;
	border-left: solid 0.75rem #BF6A7A;
	border-left:
		solid 0.75rem var(--accent-color);
	font-size: 1.5rem;
}

.post p {
	font-size: 1rem;
	line-height: 2;
}

.post img{
	max-width:100%;
	max-height:100%;
}

.post .postlogo {                                                               
	display: flex;
	width: 100%;

}
.float img {
	float: left;
    margin-right: 2em;
    margin-bottom: 1em;
}
.post .img {
	max-width: 100%;

}

/* データ領域：　概要（画像＋テキスト）　*/

.data {
	background-color: #5D9AB2;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
}

.data .text {
	padding:20px;
}

.data h2 {
	margin-top: 0;
	margin-bottom; 5px;
	font-size: 20px;
}

.data p {
	margin-top: 5px;
	margin-bottom: 20px;
	margin-left: 5px;
	font-size: 1rem;
	line-height: 2;
}



.data .message{
	min-height:280px;
	min-width:250px;
	background-image: url(images/dg-11_12.jpg);
	background-position: center;
	background-size: cover;
}

.data .photo101{
	min-height:300px;
	background-image: url(images/101_02_s.jpg);
	background-position: center;
	background-size: cover;
}


@media (min-width: 768px){
	.data .container {
	display: flex;
	max-width: 1000px;
	max-width: var(--large-width);
	margin-left: auto;
	margin-right: auto;
}
	.data .message {
		flex: 2;
		padding: 50px;
}
	.data .photo101 {
		flex: 2;
		padding: 50px;
}
}

/* データ領域２：　概要（画像＋テキスト）　*/

.data2 .container {
	padding-top: 2px;
}

.data2 .text {
	padding:20px;
}

.data2 h2 {
	margin-top: 0;
	margin-bottom; 5px;
	font-size: 20px;
}

.data2 p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 1rem;
	line-height: 2;
}
.data2 .message{
	min-height:400px;
	min-width:350px;
	background-image: url(images/message.jpg);
	background-position: center;
	background-size: cover;
}
.data2 .photo101{
	min-height:200px;
	background-image: url(images/101_03_s.jpg);
	background-position: center;
	background-size: cover;
}
@media (min-width: 768px){
	.data2 .container {
	display: flex;
	flex-direction: row-reverse;
	max-width: 1000px;
	max-width: var(--large-width);
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px;
	padding-bottom: 40px;
}

	.data2 .message {
		flex: 2;
		padding: 50px;
}
	.data2 .photo101 {
		flex: 2;
		padding: 50px;
}

	.data2 .text {
		flex: 3;
}
}