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

/*-----------------------------------------------
green  #00BEA5   0,190,165
light  #A6E8DF 166,232,223
-----------------------------------------------*/

/*-----------------------------------------------
  title
-----------------------------------------------*/
#package .title {
background-image: url("img/title_bg.jpg");
}
#package .title_head::after {
content: "Package Plan";
}
@media screen and (max-width: 800px) {
}


/*-----------------------------------------------
  lead
-----------------------------------------------*/
#package .lead {
padding: 60px 4%;
}
#package .lead .text {
font-size: 2em;
font-weight: 500;
line-height: 1.4;
text-align: center;
}
@media screen and (max-width: 800px) {
	#package .lead {
	padding: 8% 4%;
	}
	#package .lead .text {
	font-size: 1.25em;
	}
}

/*-----------------------------------------------
  program
-----------------------------------------------*/
#package .program .grid {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 2%;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
#package .program_list {
width: 48%;
}
#package .program_list dd {
margin: 1em 0;
}
#package .program_list li {
padding: 0.25em 0;
font-size: 1.5em;
color: #00BEA5;
}
#package .program_list .en {
margin-right: 0.5em;
padding: 0.5em 1em;
font-size: 0.65em;
color: #FFF;
background: #00BEA5;
border-radius: 8px;
}
#package .program_package {
width: 48%;
}
#package .program_package {
width: 48%;
padding: 2em 1em;
background: #00BEA5;
border-radius: 8px;
}
#package .program_package ul {
display: flex;
justify-content: center;
text-align: center;
}
#package .program_package li {
padding: 0.5em 1em;
color: #00BEA5;
background: #FFF;
border-radius: 8px;
}
#package .program_package li:not(:first-child) {
margin-left: 0.5em;
}
#package .program_package .head {
margin-top: 0.25em;
font-size: 1.5em;
font-weight: 500;
text-align: center;
color: #FFF;
}
@media screen and (max-width: 800px) {
	#package .program .grid {
	display: block;
	padding: 0;
	border: 0;
	}
	#package .program_list {
	width: 100%;
	}
	#package .program_list li {
	font-size: 1.1em;
	}
	#package .program_package {
	width: 100%;
	padding: 4%;
	}
	#package .program_package li {
	font-size: 0.85em;
	}
	#package .program_package .head {
	font-size: 1.25em;
	}
}

/*-----------------------------------------------
  flow
-----------------------------------------------*/
#package .flow {
margin-top: 100px;
}
#package .flow .grid {
display: flex;
justify-content: space-between;
}
#package .flow .before,
#package .flow .after {
width: 50%;
padding-right: 4%;
}
#package .flow .after {
position: relative;
width: 50%;
padding-left: 4%;
border-left: 1px dashed #666;
}
#package .flow .head {
font-size: 1.3em;
font-weight: 500;
line-height: 1.4;
text-align: center;
}
#package .flow .head strong {
color: #00BEA5;
}
#package .flow .pict {
margin-top: 1em;
}
#package .flow .note {
margin-top: 2em;
}
#package .flow .more {
margin-top: 50px;
padding-top: 50px;
border-top: 1px dashed #666;
}
#package .flow .more .text {
padding: 0.5em;
font-size: 1.35em;
text-align: center;
background: #FFFFC8;
}
#package .flow .more strong {
color: #00BEA5;
}
@media screen and (max-width: 800px) {
	#package .flow {
	margin-top: 10%;
	}
	#package .flow .grid {
	display: block;
	}
	#package .flow .before,
	#package .flow .after {
	width: 100%;
	padding: 0;
	}
	#package .flow .after {
	padding: 0;
	margin-top: 8%;
	border-left: 0;
	}
	#package .flow .head {
	font-size: 1.2em;
	}
	#package .flow .pict {
	margin-top: 4%;
	}
	#package .flow .note {
	margin-top: 4%;
	}
	#package .flow .more {
	margin-top: 8%;
	padding-top: 8%;
	}
	#package .flow .more .text {
	font-size: 1.2em;
	}
}