@charset "UTF-8";

#layout .inner { max-width:960px;}


#motto { background:#B3D441; width: 100%; max-width: 1160px; padding:20px 0; text-align: left;}
	#motto .inner { max-width:920px;}
		#motto h2 { display: block; padding:20px 20px; text-align: center; max-width: 640px; margin: 0 auto;}
		#motto h3 { display: block; padding:20px 0 0 0; text-align: center; font-size:32px; font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; font-weight: 500;}
		#motto ul { padding:20px;}
		#motto li { padding:4px 0 4px 2em; font-size: 18px; text-indent: -2em; line-height: 1.4em; font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; font-weight: 500;}
			#motto li::before { content: "一、";}


.greetings { padding: 20px 0; text-align: left; width: 100%; margin: 0 auto; display: flex; justify-content: space-between;}
	.greetings p { padding:10px 0; font-size:16px;}
	.greetings-photo { padding: 0 20px;}


.info { padding: 20px 0; text-align: left; width: 100%; max-width: 726px; margin: 0 auto;}
	.info table { width: 100%;}
		.info td a { color:#333;}
			.info td a:hover { color:#C34878;}
	.info p { padding:10px 0; font-size:16px;}


.newoffice { padding: 20px 0; text-align: left; width: 100%; max-width: 960px; margin: 0 auto;}
	.newoffice-text { width: 100%; max-width:760px; padding: 20px 30px; background: rgba(211,233,208,.6); margin-left: auto; position: relative; z-index: 1;}
		.newoffice h3 { padding:10px 0; font-size:21px;}
		.newoffice p { padding:10px 0; font-size:16px;}

.map { padding: 20px 0; width: 100%; max-width: 726px; margin: 0 auto;}
	.map iframe { width:100%; height: 480px; margin: 10px 0;}
	.map p { padding:10px 0; font-size:16px; text-align: left;}

@media all and (min-width:320px) {
	/* 320px+ settings */
	.info th { display: block; padding: 20px 0 5px 0; font-size: 16px; text-align: left; border-bottom:1px solid #CCC;}
	.info td { display: block; padding: 5px 0 20px 0; font-size: 16px; text-align: left;}
	#motto { margin: 40px auto 0 auto;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.info th, .info td { display: table-cell; text-align: left; padding: 20px 20px; font-size: 16px; border-bottom:1px solid #CCC; vertical-align: top;}
	.info th { width: 160px;}
	.newoffice-text { margin-top: -80px;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	#motto { margin: 80px auto 40px auto;}
	.greetings-text { width:calc(100% - 280px);}
	.greetings-photo { width:260px;}
	.newoffice-text { margin-top: -100px;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
}