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

/* ベーススタイル
----------------------------------------------------------- */
body {
	background: url(../images/body-bg.png) #e1e1e1 0 top no-repeat;
	background-size: cover;
}
#main {
	background: rgba(255,255,255,.8);
	padding: 25px 25px;
	border-radius: 20px;
}

/* コンテンツスタイル
----------------------------------------------------------- */
/* 吹き出しの色 */
.balloon {
	position: relative;
	background: #7b5aa3;
}
.balloon::before {
	background: #7b5aa3;
}
.balloon::after {
	background: #7b5aa3;
}

/* 文字強調色 */
/*#main p span {
	color: #7b5aa3;
	font-weight: bold;
}*/

/* リストアイコン */
#main ul li:before {
	/*background: #000;*/
}

ul.title-box,
ul.mochu-about {
	overflow: hidden;
}
ul.title-box {
	margin: 0 auto 25px;
}
ul.title-box li {
	float: left;
}
ul.title-box li:nth-of-type(2) {
	margin: 10px 0 0 15px;
}
ul.mochu-about {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	background: url(../images/hagaki.png) right 0 top no-repeat;
	margin: 0 0 60px 0;
	padding: 30px 0 0 0;
}
ul.mochu-about li {
	float: left;
}
ul.egara {
	overflow: hidden;
}
ul.egara li {
	float: left;
	margin: 0 24px 25px 0;
	transition: all  0.4s ease;
}
ul.egara li:hover {
	filter: alpha(opacity=60);
	opacity: 0.6;
	-moz-opacity: 0.6;
}
ul.egara li:nth-of-type(4n) {
	margin: 0 0 25px 0;
}

@media screen and (max-width: 950px) {
	ul.mochu-about {
		flex-wrap: wrap;
		justify-content: space-evenly;
		background-position: bottom right;
		padding-bottom: 15%;
	}
	ul.title-box li,
	ul.mochu-about li {
		padding-bottom: 30px;
	}
	
	
	/*#main {
		text-align: center;
	}
	
	ul.title-box,
	ul.title-box li,
	ul.mochu-about,
	ul.mochu-about li {
		display: inline;
		width: auto;
		background: #A65E5F;
	}*/
}


@media screen and (max-width: 768px) {
	
}


@media screen and (max-width: 480px) {

}