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

/*==========================
システムの構成
==========================*/
.tvbox{
	margin-top: 20px;
	text-align: center;
}
/*==========================
ジョイスティックの基本パターン
==========================*/
.simulationbox{
	background-color: #e5f1f9;
	padding: 15px;
}
.simulationbox p{
	text-indent: -1rem;
	padding-left: 1rem;
	margin-bottom: 0;
}
.simulation dl{
	display: flex;
	align-items: center;
}
.simulation dl dt{ margin-right: 10px;}
.simulation dl dd{
	margin-bottom: 0;
	margin-top: 2px;
}
.btn_simulation{
	border: #204391 1px solid;
  color: #204391;
	position: relative;
	border-radius: 0;
	text-align: center;
	display: block;
	max-width: 400px;
	margin: 30px auto 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.btn_simulation:hover,
.btn_simulation:focus{
	border: #204391 1px solid;
	color: #fff;
	background-color: #204391;
}

.btn_simulation .arrow::before,
.btn_simulation .arrow::after{
	content: '';
	display: block;
  -webkit-transform: skewX(50deg);
  transform: skewX(50deg);
  position: absolute;
  bottom: 17px;
	background: #204391;
	-webkit-transition: all .3s;
  transition: all .3s;
}
.btn_simulation .arrow::before{
	width: 20px;
  height: 1px;
  right: 15px;
}
.btn_simulation .arrow::after{
	width: 2px;
  height: 4px;
  right: 17px;
}
.btn_simulation:hover .arrow::before,
.btn_simulation:hover .arrow::after,
.btn_simulation:focus .arrow::before,
.btn_simulation:focus .arrow::after{ background: #fff;}
@media (min-width: 992px) {
	.simulationbox{ text-align: center;}
	.simulation{
		display: flex;
		justify-content: center;
	}
	.simulation dl:first-child{ margin-right: 30px;}
}
@media (max-width: 991px) {
	.simulation dl:first-child{ margin-bottom: .3rem;}
}
@media (max-width: 767px) {
	.btn_simulation{ font-size: 0.9rem;}
}

/*==========================
航跡比較
==========================*/
@media (max-width: 767px) {
	#wake div:first-child{ margin-bottom: 15px;}
}