@charset "utf-8";
/* =============================================================
 * コスト
 * ============================================================= */
.sec01  {
	padding: 0 0 5%;
}
.sec01 .headline {
	margin: 0 auto 5%;
	width: 50%;
}
.sec01 .reason-wrap {
	margin: 0 auto;
	width: 80%;
}
.sec01 .reason01  {
	margin: 0 2% 0 0;
	width: 32%;
	float: left;
}
.sec01 .reason02  {
	width: 32%;
	float: right;
}
.sec01 .image {
	margin: 0 0 2%;
}
.sec01 .box01 {
	display: table;
	width: 100%;
}
.sec01 .number {
	display: table-cell;
	vertical-align: middle;
	padding: 0 5% 0 0;
	width: 20%;
}
.sec01 .txt {
	display: table-cell;
	vertical-align: middle;
	color: #FFFFFF;
	font-size: 1.8vw;
	font-weight: bold;
}
.sec02 {
	padding: 5% 0;
	background-color: #00003A;
}
.sec02 .headline {
	margin: 0 auto 5%;
	width: 50%;
}
.sec02 .box-wrap {
	margin: 0 auto 3%;
	width: 80%;
}
.sec02 .txt01 {
	margin: 0 auto 5%;
	width: 60%;
}
.sec02 .box01 {
	width: 46%;
	padding: 3%;
	float: left;
	background-color: #FFFFFF;
	box-sizing: border-box;
}
.sec02 .box02 {
	width: 46%;
	padding: 3%;
	float: right;
	display: table-cell;
	background-color: #FFFFFF;
	margin: 0 0 5%;
	box-sizing: border-box;
}
.sec02 .box03 {
	width: 46%;
	padding: 3%;
	float: right;
	display: table-cell;
	background-color: #FFFFFF;
	box-sizing: border-box;
}
.sec02 .plus01 {
	width: 8%;
	text-align: center;
	float: left;
	font-weight: bold;
	font-size: 3vw;
	padding: 9rem 0 0;
}
.sec02 .plus02 {
	width: 8%;
	text-align: center;
	float: left;
	font-weight: bold;
	font-size: 3vw;
	padding: 18rem 0 0;
}
.sec02 .category-box {
	width: 80%;
	margin: 0 0 5%;
	display: table;
}
.sec02 .number  {
	width: 15%;
	display: table-cell;
	padding: 0 5% 0 0;
	vertical-align: middle;
}
.sec02 .category {
	display: table-cell;
	vertical-align: middle;
	color: #000000;
	font-weight: bold;
	font-size: 2vw;
}
.sec02 .txt02  {
	color: #FF3000;
	font-size: 1.4vw;
	margin: 0 0 1%;
	font-weight: bold;
}
.sec02 .txt03  {
	color: #00003A;
	font-size: 1.2vw;
	font-weight: bold;
}
.sec02 .txt04 {
	color: #000000;
	line-height: 2vw;
}
.sec02 .txt05 {
	color: #000000;
	line-height: 2.3vw;
}
.sec02 .txt06 {
	width: 45%;
	float: left;
	color: #000000;
	line-height: 2.3vw;
}
.sec02 .txt07 {
	width: 45%;
	float: right;
	color: #000000;
	line-height: 2.3vw;
}
.sec02 .box-wrap .tr {
	display: table;
}
.sec02 .box-wrap .th {
	display: table-cell;
}
.sec02 .box-wrap .td {
	display: table-cell;
}
.sec02 .in-wrap01 {
	display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
	margin: 0 0 5%;
}
.sec02 .in-wrap02 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.sec02 .in-box01 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 2%;
	box-sizing: border-box;
	background-color: #C7C7C7;
	width: 48%;
	margin: 0 4% 0 0;
	display: inline-block;
	vertical-align:top;
}
.sec02 .in-box02 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 2%;
	box-sizing: border-box;
	background-color: #C7C7C7;
	width: 48%;
	display: inline-block;
	vertical-align:top;
}
.sec02 .box04 {
	padding: 2%;
	box-sizing: border-box;
	background-color: #FFF;
	margin: 0 auto 5%;
	width: 80%;
	color: #000000;
}
.sec02 .txt08 {
	font-size: 1.8vw;
	margin: 0 0 2%;
	font-weight: bold;
}
.sec02 .subtxt {
	font-weight: normal;
	font-size: 1.1vw;
}
.sec02 .in-box03  {
	width: 47%;
	float: left;
}
.sec02 .box04 .tr {
	display: table;
	border-bottom: 1px solid #646464;
	margin: 0 0 2%;
	width: 100%;
}
.sec02 .box04 .th {
	display: table-cell;
	vertical-align: middle;
}
.sec02 .box04 .td {
	display: table-cell;
	vertical-align: bottom;
	text-align: right;
	font-size: 2vw;
	font-weight: bold;
}
.sec02 .in-box04  {
	width: 47%;
	float: right;
}
.sec02 .txt09 {
	color: #00003A;
	font-size: 1.4vw;
}
.sec02 .box05  {
  margin: 0 auto;
  padding: 2%;
  width: 65%;
  background-color: #E5DDD6;
  color: #000000;
  position: relative;
  box-sizing: border-box;
}
.sec02 .txt11 {
	text-align: center;
	font-size: 1.8vw;
	font-weight: bold;
	margin: 0 0 1%;
	color: #CC9900;
}
.sec02 .txt12 {
	text-align: center;
	font-size: 1.7vw;
	font-weight: bold;
}
.sec02 .point {
	width: 18%;
	position: absolute;
	top: -10%;
	left: 3%;
}
.sec03 {
  padding: 5% 0 0;
}
.sec03 .plan-wrap01 {
  margin: 0 auto 5%;
  width: 80%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 3%;
  box-sizing: border-box;
  background-color: #FFFFFF;
}
.sec03 .box01 {
  width: 49%;
  float: left;
}
.sec03 .box02 {
  width: 49%;
  float: right;
}
.sec03 .plan-box {
  width: 100%;
  margin: 0 0 3%;
  display: table;
}
.sec03 .plan-number {
  width: 13%;
  display: table-cell;
  vertical-align: middle;
}
.sec03 .date {
  display: table-cell;
  font-size: 1.1vw;
  font-weight: bold;
  color: #00003A;
  vertical-align: middle;
  padding: 0 0 0 5%;
  width: 80%;
}
.sec03 .plan-wrap02 {
  margin: 0 auto 5%;
  width: 75%;
}
.sec03 .plan-area01 {
  border-bottom: 1px solid #FFFFFF;
  display: table;
  width: 100%;
  position: relative;
}
.sec03 .plan-area02 {
  width: 100%;
  display: table;
  background-color: #E5DDD6;
  color: #000;
}
.sec03 .icon {
  position: absolute;
  width: 8%;
  top: -35%;
  left: 46%;
}
.sec03 .plan01  {
  padding: 2%;
  width: 55%;
  background-color: #FFFFFF;
  color: #00003A;
  font-weight: bold;
  font-size: 2vw;
  display: table-cell;
}
.sec03 .plan02 {
  padding: 2%;
  width: 55%;
  background-color: #E5DDD6;
  color: #00003A;
  font-weight: bold;
  font-size: 2vw;
  display: table-cell
}
.sec03 .number {
  padding: 1% 2%;
  color: #FFFFFF;
  background-color: #00003A;
}
.sec03 .plice {
  text-align: right;
  font-size: 2.3vw;
  vertical-align: bottom;
}
.sec03 .txt01 {
  padding: 1% 0 1% 3%;
  clear: both;
  border-bottom: 1px solid #FFFFFF;
}

.sec03 .txt01_u {
  padding: 1% 0 1% 3%;
  clear: both;
 font-size: 1vw;
}

.sec03 .plus {
  width: 80%;
  margin: 2% 0;
  text-align: center;
  font-size: 2.1vw;
  font-weight: bold;
}
.sec03 .arrow-wrap {
  width: 80%;
  text-align: center;
}
.sec03 .arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.5vw 2vw 0 2vw;
  border-color: #fff transparent transparent transparent;
  margin: 3% auto;
}
.sec03 .yen {
  font-size: 1.3vw;
}
.sec03 .color01 {
  color: #FF3232;
}
.sec03 .btn {
  width: 40%;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  background-color: #808080;
}
.sec03 .btn a {
  display: block;
  color: #FFF;
  font-size: 1.6vw;
}
/* 
=============================
　　　　スマホ
=============================
*/
@media screen and (max-width: 699px) {
.sec01 .headline {
  width: 70%;
}
.sec01 .reason-wrap {
  width: 90%;
}
.sec01 .reason01 {
  margin: 0 0 10%;
  width: 100%;
  float: none;
}
.sec01 .number {
  display: table-cell;
  width: 15%;
}
.sec01 .txt {
  font-size: 14px;
}
.sec01 .reason02 {
  width: 100%;
  float: none;
}
.sec02 .headline {
  width: 70%;
}
.sec02 .txt01 {
  width: 90%;
}
.sec02 .box-wrap {
  width: 90%;
}
.sec02 .box01 {
  width: 100%;
  float: none;
  margin: 0 0 5%;
  display: block;
}
.sec02 .category {
  font-size: 16px;
}
.sec02 .txt02 {
  font-size: 14px;
}
.sec02 .in-box01 {
  width: 100%;
  margin: 0 0 5%;
  display: block;
}
.sec02 .txt03 {
  font-size: 14px;
}
.sec02 .txt04 {
  line-height: 20px;
}
.sec02 .in-box02 {
  width: 100%;
  display: block;
}
.sec02 .box02 {
  width: 100%;
  float: none;
  display: block;
  margin: 0 0 5%;
}
.sec02 .txt05 {
  line-height: 20px;
}
.sec02 .txt06 {
  line-height: 20px;
  width: 100%;
  float: none;
}
.sec02 .txt07 {
  line-height: 20px;
  width: 100%;
  float: none;
}
.sec02 .plus01 {
  width: 100%;
  float: none;
  font-size: 25px;
  padding: 0 0 5%;
}
.sec02 .plus02 {
  width: 100%;
  float: none;
  font-size: 25px;
  padding: 0 0 5%;
}
.sec02 .box03 {
  width: 100%;
  float: none;
  display: block;
  margin: 0 0 5%;
}
.sec02 .box04 {
  width: 90%;
}
.sec02 .txt08 {
  font-size: 16px;
}
.sec02 .subtxt {
  font-size: 14px;
}
.sec02 .in-box03 {
  width: 100%;
  float: none;
}
.sec02 .in-box04 {
  width: 100%;
  float: none;
}
.sec02 .txt09 {
  font-size: 14px;
}
.sec02 .box04 .td {
  font-size: 20px;
}
.sec02 .box05 {
  width: 90%;
}
.sec02 .txt11 {
  font-size: 14px;
}
.sec02 .txt12 {
  font-size: 14px;
}
.sec03 .plan-wrap01 {
  margin: 0 auto 5%;
  width: 90%;
}
.sec03 .box01 {
  width: 100%;
  float: none;
}
.sec03 .box02 {
  width: 100%;
  float: none;
}
.sec03 .date {
  font-size: 14px;
}
.sec03 .plan-wrap02 {
  margin: 0 auto 5%;
  width: 90%;
}
.sec03 .plan-wrap02 {
  margin: 0 auto 5%;
  width: 90%;
}
.sec03 .plan01 {
  width: 60%;
  font-size: 14px;
}
.sec03 .plan02 {
  width: 60%;
  font-size: 14px;
}
.sec03 .plice {
  font-size: 16px;
}
.sec03 .icon {
  display: none;
}
.sec03 .btn {
  width: 90%;
}
.sec03 .btn a {
  font-size: 14px;
}
.sec03 .plus {
  font-size: 20px;
}
.sec03 .arrow {
  border-width: 3vw 3vw 0 3vw;
}
}
