@charset "UTF-8";


/*----------------------------------------
	wrapper
-----------------------------------------*/



/*----------------------------------------
	future_btn
-----------------------------------------*/

.future_btn{
	 display: flex;
	justify-content: space-between;
	margin: 7% auto;
}
.future_btn a{
	display: block;
	width: 32%;
	border-radius: 50px;
	padding: 10px 0;
	text-align: center;
	font-weight: 700;
	box-sizing: border-box;
}
.future_btn .green{
	background: url(../img/future_arrow.png)no-repeat right 20px center #55cb8a;
}
.future_btn .orange{
	background: url(../img/future_arrow.png)no-repeat right 20px center #ffa800;
}
.future_btn .blue{
	background: url(../img/future_arrow.png)no-repeat right 20px center #80deff;
}

/*----------------------------------------
	future_wrap
-----------------------------------------*/

.future_wrap{
	margin: 0 auto;
	padding: 0 0 10% 0;
}
.future_wrap h3{
	margin: 0 auto 7% auto;
	padding: 3% 0;
	text-align: center;
	font-weight: 700;
	font-size: 4.0rem;
	background:#55cb8a;
}
.future_wrap h3.orange{
	background:#ffa800;
}
.future_wrap h3.blue{
	background:#80deff;
}
.future_wrap h4{
	margin: 0 auto 5% auto;
	border-radius: 50px;
	padding: 1.5% 0;
	text-align: center;
	font-weight: 700;
	font-size: 3.0rem;
	line-height: 1;
	background:#55cb8a;
}
.future_wrap h4.orange{
	background:#ffa800;
}

.future_table{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.future_table_dt{
	display: flex;
	width: 45%;
	margin:0 0 7% 0;
}
.future_table dl{
	width: 70%;
	box-sizing: border-box;
}
.future_table dt{
	font-weight: 700;
}
.future_table dt,.future_table dd{
	padding: 5px 0;
	border-bottom: 1px #dadada solid;
}
.future_table .num dt,.future_table .num dd{
	border-bottom: 1px #dadada solid;
	text-align: center;
	padding: 5px 10px;
}
.future_table dd:last-child{
	border-bottom:none;
}
.future_table .num{
	width: 15%;
	box-sizing: border-box;
	border-left: 1px #55cb8a solid;
}
.future_table .num.orange{
	border-left: 1px #ffa800 solid;
}

/*----------------------------------------
	readmore
-----------------------------------------*/

/*続きを読む--------------------------*/	
.read_more_box *, .read_more_box *:before, .read_more_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.read_more_box label {
	font-weight: bold;
	position: relative;
	display: block;
	width: 400px;
	margin:5% auto;
	padding: 10px 30px;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
	border-radius: 50px;
	box-shadow: 3px 3px 0px 1px rgba(225,225,208,1);
	background:url("../img/readmore01.png")no-repeat center right 20px #55cb8a;
}
.read_more_box label.orange {
	background:url("../img/readmore01.png")no-repeat center right 20px #ffa800;
}

.read_more_box label:hover::after {
	color: #000;
}
.read_more_box input:checked ~ label {
	transition: all 0.3s;
	background:url("../img/readmore02.png")no-repeat center right 20px #55cb8a;
	margin-bottom: 7rem;
}
.read_more_box input:checked ~ label.orange {
	transition: all 0.3s;
	background:url("../img/readmore02.png")no-repeat center right 20px #ffa800;
	margin-bottom: 7rem;
}
.read_more_box input:checked ~ label::after {
	transform: rotate(-45deg);
  top: 25px;
	border-top: solid 3px #000;
  border-right: solid 3px #000;
}
.read_more_box input:checked ~ label:hover::after {
	color: #333;
}
.read_more_box input {
	display: none;
}
.read_more_box .read_more_container {
	position: relative;
	z-index: 10;
	overflow: hidden;
	height: 0;
	margin-top: -1px;
	transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
}
.read_more_box input:checked ~ div {
	transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
}
/* 高さの定義 */
.read_more_box input:checked ~ div.read_more_container {
height: auto;
}	

/*----------------------------------------
	licenece
-----------------------------------------*/

.licence {
	padding-bottom: 10%;
}
.licence dl{
	margin-bottom: 3%;
}	
.licence dt{
	background: #80deff;
	border-radius: 30px 30px 0 0;
	padding: 10px 5%;
	font-weight: 700;
	font-size: 2.0rem;
}	
.licence dd{
	background: #fff;
	border-radius: 0 0 30px 30px;
	padding:2% 7% 3% 7%;
	font-weight: 700;
}

/*media Queries 
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 900px) {
	
.future_table{
	display: block;
}
.future_table_dt{
	width:auto;
}
	
}


/*media Queries スマートフォンサイズ（768px以下）で適応したいCSS - スマホ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {

	
/*----------------------------------------
	future_btn
-----------------------------------------*/
.future_btn{
	 display: block;
	margin: 15% auto 0 auto;
}
.future_btn a{
	width: auto;
	border-radius: 0;
	padding: 13px 0;
	text-align: center;
	font-weight: 700;
	margin-bottom: 0;
	border-bottom: 1px #333 solid;
}

.future_btn .blue{
	border-bottom: none;
}


/*----------------------------------------
	future_wrap
-----------------------------------------*/

.future_wrap{
	margin: 0 auto;
	padding: 0 0 20% 0;
}
.future_wrap h3{
	margin: 0 auto 10% auto;
	padding: 4% 0;
	font-size: 2.4rem;
}

.future_wrap h4{
	margin: 0 auto 10% auto;
	padding: 4% 0;
	font-size: 1.8rem;
}

.future_table_dt{
	margin:0 0 10% 0;
}

.future_table .num dt,.future_table .num dd{
	padding: 5px 0;
}
	
.read_more_box label {
	width: 90%;
	margin:10% auto;
}

/*----------------------------------------
	licenece
-----------------------------------------*/

.licence {
	padding-bottom: 10%;
}
.licence dl{
	margin-bottom: 7%;
}	
.licence dt{
	background: #80deff;
	border-radius: 20px 20px 0 0;
	padding: 10px 7%;
	font-size: 1.6rem;
	line-height: 1.7;
}	
.licence dd{
	background: #fff;
	border-radius: 0 0 20px 20px;
	padding:5% 8% 7% 8%;
}
	
}/*解像度768px以下*/