/* CSS Document */

#vision{}
	#vision p+p{
		margin-top: 1em;
		}
	#vision div.center{
		margin-top: 1em;
		}

#idea{
	padding: 1em;
	background: rgba(217,217,217,0.5);
	text-align: center;
	}
	#idea h3{
		font-size: 1.8em;
		font-weight: 800;
		line-height: 1.6em;
		}
	#idea h3+div{
		margin-top: 1em;
		}

#about{}
	#about{
		display: flex;
		justify-content: center;
		}
	#about dl{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		padding: 2em;
		background: #4c4948;
		border-radius: 100%;
		color: #fff;
		text-align: center;
		}
	#about dt,
	#about dd{
		line-height: 1.4em;
		}
		#about dt:nth-of-type(n+2),
		#about dd:nth-of-type(n+2){
			margin-top: 0.5em;
			}
	#about dt{
		font-size: 1.2em;
		font-weight: bold;
		}
	#about dd{
		margin-top: 0.5em;
		}

#mediumVision{}
	#mediumVision dl{
		display: flex;
		flex-wrap: wrap;
		}
	#mediumVision dl+dl{
		margin-top: 0.8em;
		}
	#mediumVision dt,
	#mediumVision dd{
		padding: 0.5em 0.8em;
		line-height: 1.4em;
		}
	#mediumVision dt{
		background: #0093dc;
		color: #fff;
		font-weight: bold;
		}
	#mediumVision dd{
		padding-left: 1em;
		text-indent: -1em;
		}
		#mediumVision dd:before{
			content: "…";
			margin: 0 0.2em;
			}
	#mediumVision thead{
		text-align: center;
		}
	#mediumVision th,
	#mediumVision td{
		vertical-align: middle;
		}

#logo{}
	#logo section{
		display: -ms-grid;
		display: grid;
		}
	#logo h3{
		-ms-grid-column: 2;
		-ms-grid-row: 1;
		grid-column: 2;
		grid-row: 1;
		}
	#logo h3+div{
		-ms-grid-column: 2;
		-ms-grid-row: 2;
		grid-column: 2;
		grid-row: 2;
		}
	#logo p+div{
		margin-top: 1em;
		}
	#logo figure{
		-ms-grid-column: 1;
		-ms-grid-row: 1;
		-ms-grid-row-span: 4;
		grid-column: 1;
		grid-row: 1 / 4;
		margin-right: 1em;
		}
		#logo figure img{
			width: 100%;
			padding: 0.8em;
			border: 1px solid #bfbfbf;
			}
	#logo figcaption{
		font-size: 0.85em;
		text-align: center;
		opacity: 0.5;
		}
	#logo .thumb{
		padding-top: 50%;
		}


/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
#about{}
	#about+div{
		text-align: left;
		}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#about{}
	#about dl{
		width: 80%;
		}
	#about dl+dl{
		margin-top: 1em;
		}
#mediumVision{}
	#mediumVision dd{
		width: 100%;
		}
	#mediumVision table{
		display: block;
		border: none;
		}
	#mediumVision thead{
		display: none;
		}
	#mediumVision tr{
		display: flex;
		flex-wrap: wrap;
		}
	#mediumVision tr+tr{
		margin-top: 1em;
		}
	#mediumVision th,
	#mediumVision td{
		width: 100%;
		}
	#mediumVision td{
		border-top: none;
		}
#logo{}
	#logo section{
		display: flex;
		flex-wrap: wrap;
		}
		#logo section > *{
			width: 100%;
			}
	#logo h3{
		order: 1;
		}
	#logo h3+div{
		order: 3;
		}
	#logo figure{
		margin: 1em 0 0 0;
		order: 2;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#about{}
	#about dl{
		width: 45%;
		}
		#about dl:nth-of-type(even){
			margin-left: 1em;
			}
		#about dl:nth-of-type(n+3){
			width: 45%;
			margin-top: 1em;
			}
#logo{}
	#logo section{
		-ms-grid-columns: 40% auto;
		grid-template-columns: 40% auto;
		}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#idea{
	padding: 1.5em;
	}
	#idea p{
		font-size: 1.2em;
		}
#logo{}
	#logo section{
		-ms-grid-columns: 20em calc(100% - 20em);
		grid-template-columns: 20em calc(100% - 20em);
		}
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#about{}
	#about dl{
		width: calc(33.33% - 0.67em);
		}
		#about dl:nth-child(3n+2){
			margin: 0 1em;
			}
			#about dl:nth-child(3n+2):last-child{
				margin-right: 0;
				}
		#about dl:nth-of-type(n+4){
			margin-top: 1em;
			}
}
@media (max-width: 991px) {
/*991px以下*/
#about{
	flex-wrap: wrap;
	}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#idea{
	padding: 2em;
	}
#about{
	margin-top: 2em;
	}
	#about dl{
		width: 20%;
		}
#mediumVision{}
	#mediumVision dt,
	#mediumVision dd{
		font-size: 1.2em;
		}
#logo{}
	#logo figure{
		margin-right: 1.5em;
		}

}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1200px*/
#about{}
	#about dl+dl{
		margin-left: 0.5em;
		}
}
@media (min-width: 1200px) {
/*1200px以上*/
#about{}
	#about dl+dl{
		margin-left: 1em;
		}
}


/* ie */
@media all and (-ms-high-contrast: none){}


