@charset "utf-8";
.device_flex {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
}
.device_flex_left {
		flex: 1
}
.device_flex_left p {
		line-height: 1.8;
		margin: 0 0 1em
}
.device_flex_right {
		width: 580px;
		margin-left: 40px;
}
.device_flex_right img {
		width: 100%;
		height: auto
}
@media(max-width: 1200px) {
		.device_flex_right {
				width: 40%;
				margin-left: 30px;
		}
}
@media(max-width: 960px) {
		.device_flex {
				display: block;
		}
		.device_flex_right {
				width: 45%;
				float: right;
				margin: 0 0 15px 25px;
		}
}
@media screen and (orientation: portrait) and (max-width: 767px) {
		.device_flex_right {
				width: 100%;
				float: none;
				margin: 0 0 20px;
		}
}
/* ================= */
.cost1 {
		padding: 50px 50px 25px;
		background: #F3F5F8;
}
.cost2 {
		padding: 25px 50px 50px;
		background: #F3F5F8;
}
.cost1 table, .cost2 table {
		width: 100%;
		background: #fff;
		border-collapse: collapse;
}
.cost1 td, .cost2 td {
		border: 4px solid #F3F5F8;
		text-align: center;
		padding: 20px 5px;
		font-weight: 500;
		line-height: 1.6;
}
.cost1 td {
		width: 25%;
}
.cost2 td {
		width: 20%;
}
.cost1 table tr:first-child td, .cost2 table tr:first-child td {
		padding: 8px 5px;
		font-size: 15px;
		color: #fff;
		background: #456C9B;
}
.cost2 table tr:nth-child(2) td {
		background: #D9DFE6;
}
.cost2 table tr:nth-child(2) td:nth-child(4) {
		background: #FDD6D6;
}
.cost2 table tr:nth-child(3) td:nth-child(4) {
		background: #D2E1FA;
}
.cost2 p {
		margin-top: 20px;
		font-size: 80%;
		line-height: 1.8;
}
.cost2 table tr:nth-child(3) td:last-child {
		position: relative;
}
.cost2 table tr:nth-child(3) td:last-child .cashbackBalloon {
		position: absolute;
		bottom: -40px;
		left: calc(50% - 140px);
		width: 280px;
		height: 50px;
		background-color: #003F86;
		color: #fff;
		border-radius: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
		font-size: 14px;
		font-weight: 500;
}
.cashbackBalloon::before {
		content: '';
		display: block;
		position: absolute;
		top: -11px;
		left: calc(50% + 5px);
		width: 0;
		height: 0;
		border-style: solid;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
		border-bottom: 16px solid #003F86;
		border-top: 0;
		transform: skewX(40deg)
}
.cashbackBalloon strong {
		font-size: 17px;
		font-weight: 700;
		margin-right: 3px;
}
.cashbackBalloon strong, .cashbackBalloon span {
		transform: translateY(1px);
}
.cashbackBalloon strong {
		padding-left: 27px;
		position: relative;
}
.cashbackBalloon strong::before {
		content: '';
		display: block;
		position: absolute;
		top: calc(50% - 12px);
		left: 0;
		width: 17px;
		height: 24px;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 17px;
		background-image: url("../images/icon_money.png")
}
@media(max-width: 960px) {
		.cost1, .cost2 {
				padding: 15px 15px 8px;
		}
		.cost1 td, .cost2 td {
				border: 2px solid #F3F5F8;
				padding: 20px 5px;
				font-size: 13px;
		}
		.cost1 table tr:first-child td, .cost2 table tr:first-child td {
				padding: 10px 5px;
		}
		.cost1 td {
				width: 23%;
		}
		.cost2 td {
				width: 18.7%;
		}
		.cost1 tr td:first-child {
				width: 30%;
		}
		.cost2 tr td:first-child {
				width: 25%;
		}
		.cost2 table tr:nth-child(3) td:last-child .cashbackBalloon {
				bottom: -40px;
				left: calc(50% - 100px);
				width: 200px;
				height: 40px;
				font-size: 11px;
		}
		.cashbackBalloon::before {
				top: -11px;
				left: calc(50% + 5px);
				width: 0;
				height: 0;
				border-style: solid;
				border-right: 5px solid transparent;
				border-left: 5px solid transparent;
				border-bottom: 16px solid #003F86;
				border-top: 0;
				transform: skewX(40deg)
		}
		.cashbackBalloon strong {
				font-size: 14px;
				margin-right: 2px;
		}
		.cashbackBalloon strong {
				padding-left: 20px;
				position: relative;
		}
		.cashbackBalloon strong::before {
				top: calc(50% - 10px);
				width: 14px;
				height: 20px;
				background-size: 14px;
		}
}
@media(max-width: 767px) {
		.cost1 td, .cost2 td {
				border: 2px solid #ededed;
				padding: 12px 3px;
				font-size: 13px !important;
		}
		.cost1 tr:first-child td, .cost2 tr:first-child td {
				font-size: 11px !important;
		}
		.cost1 {
				padding: 15px 10px 10px 15px;
				position: relative;
				overflow: hidden
		}
		.cost2 {
				padding: 15px 10px 10px 15px;
				position: relative;
				overflow: hidden
		}
		.cost1 .wp-block-table, .cost2 .wp-block-table {
				padding-bottom: 50px;
				overflow: auto;
				width: 100%;
				position: relative;
		}
		.cost1 table tr:first-child td, .cost2 table tr:first-child td {
				padding: 6px 0;
		}
		.cost1 table tr:first-child td, .cost2 table tr:first-child td {
				font-size: 12px;
		}
		.cost2 p {
				font-size: 11px;
		}
}
@media screen and (orientation: landscape) and (max-width: 900px) {
		.cost1 table, .cost2 table {
				width: 96vw;
		}
}
@media screen and (orientation: portrait) and (max-width: 767px) {
		.cost1 table, .cost2 table {
				width: 170vw;
		}
}