@charset 'utf-8';


#contentblock {
}

#message {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 30px 0;
}

#president-message {
	font-size: 1.5em;
	line-height: 1.6;
}

/* 
#president-message .message {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}

#president-message .message:not(:last-child) {
	margin-bottom: 1.5em;
}
 */

#president-message .columns {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

#president-message .column {
	width: 100%;
}

#president-message .column:first-child {
	margin-bottom: 3em;
}

#president-message .foto {
	margin-bottom: 1em;
	text-align: center;
/* 	width: 30%; */
}

#president-message .foto span {
	display: inline-block;
}

#president-message .foto img {
	width: 100%;
	height: auto;
}

/* 
#president-message .sentence {
	width: 70%;
	padding-right: 5%;
}
 */

#president-message .sentence p:not(:last-child) {
	margin-bottom: 1.5em;
}

#message .signature {
	margin-bottom: 1em;
}

#message .signature p {
	font-size: .85em;
}

#message .signature p span {
	font-size: .75em;
}

#message .career table {
	width: 100%;
	font-size: .9em;
	line-height: 1.4;
}

#message .career table th {
	padding-right: 1.5em;
	font-weight: 400;
	white-space: nowrap;
	text-align: left;
}

#message .career table th,
#message .career table td {
	padding-bottom: .3em;
	font-size: .85em;
}

#message .career table td span {
	display: inline-block;
}

/* 
#message .column:last-child {
	max-width: 480px;
	margin: 0 auto;
}
 */

@media only screen and (min-width: 481px) {

	#message {
		padding: 30px 10px;
	}
}

@media only screen and (min-width: 769px) {

	#president-message {
		font-size: 1.7em;
	}

	#president-message .columns {
		flex-direction: row;
	}

	#president-message .column:first-child {
		width: 60%;
		margin: 0;
	}

	#president-message .column:last-child {
		width: 40%;
		padding-left: 7%;
	}
}


#idea {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 30px 0;
}

#idealist {
	font-size: 1.5em;
	line-height: 1.6;
	position: relative;
}

.idearow {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: relative;
}

.idearow:not(:last-child) {
	margin-bottom: 2em;
}

.idearow .head {
	width: 100%;
	margin-bottom: .7em;
	position: relative;
}

.idearow .head h2 {
	font-size: 1.2em;
}

.idearow .head h2 > span {
	display: inline-block;
	width: 100%;
	padding: .3em .6em;
	background: #5092d5;
	color: #fff;
	position: relative;
}

.idearow .head h2 .number {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .5em;
	background: #fff;
	color: #5092d5;
	font-size: 1em;
	text-align: center;
	line-height: 1em;
	font-weight: 900;
}

.idearow .item {
	width: 100%;
	position: relative;
}

.idearow .item .brick {
	background: #fff;
}

.idearow .item .brick:not(:last-child) {
	margin-bottom: 1em;
}

@media only screen and (min-width: 541px) {

	#idealist {
		font-size: 1.8em;
	}

	.idearow {
		flex-direction: row;
	}

	.idearow .head {
		width: 10em;
		margin: 0;
	}

	.idearow .head h2 > span {
		padding: .5em 1em;
	}

	.idearow .item {
		flex-grow: 1;
		width: calc(100% - 10em);
		padding-left: 1.5em;
	}

	.idearow .item .brick {
	}
}


#outline {
	width: 100%;
	padding: 30px 0;
}

#outline > .inner {
	width: 100%;
	vertical-align: top;
	position: relative;
}

.outlinetbl {
	font-size: 1.4em;
	line-height: 1.5;
}

@media only screen and (min-width: 769px) {

	.outlinetbl {
	}

	#outline {
		padding-bottom: 30px;
	}

	.outlinetbl {
		font-size: 1.8em;
	}
}



#officeguide {
	width: 100%;
	padding: 30px 0;
}

#officeinfo {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-size: 1.5em;
	line-height: 1.5em;
}

.officeinfo {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
}

.officeinfo:not(:last-child) {
	margin-bottom: 2em;
}

.officeinfo h2 {
	margin-bottom: .5em;
	padding: 0 10px;
	font-size: 1.2em;
}

.officeinfo .info {
	width: 100%;
	margin-bottom: 1em;
	padding: 0 10px;
}

.officeinfo .infotbl {
	width: 100%;
	display: table;
}

.officeinfo .info p {
	display: table-row;
}

.officeinfo .info span {
	display: table-cell;
	line-height: 1.6;
}

.officeinfo .info span:first-child {
	width: 5em;
}

.officeinfo .maparea {
	width: 100%;
	margin-top: auto;
	position: relative;
}

.officeinfo .gmap {
	width: 100%;
	height: 200px;
}

.officeinfo .gmap iframe {
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
}

.officeinfo .btnarea {
	width: 100%;
}

@media only screen and (min-width: 769px) {

	#officeinfo {
		flex-direction: row;
		font-size: 1.7em;
	}

	.officeinfo {
		width: 50%;
		margin: 0 !important;
		padding: 20px;
	}

	.officeinfo .gmap {
		height: 300px;
	}
}