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

body{
	background: #fff;
	color: #202020;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 16px;
	line-height: 1.6em;
	width: 100%;
	margin: 0;
	padding: 0;
}

.wrap{
	/*max-width: 1200px;*/
	margin: 0 auto;
}

/*header*/
header{
	color: #fff;
	width: 100%;
	position: fixed;
    top: 0;
    z-index: 999;
}

header>h1{
	background: #57a400;
	border-bottom: solid 1px #c9c9c9;
	height: 2.8em;/*後pxに変更*/
	line-height: 2.8em;/*後pxに変更*/
	display: none;
}

header>h2{
	background: #89c01c;
	font-size: 20px;
    line-height: 50px;
    height: 50px;
}

header>h1 ul,header>h2 ul{
	font-size: 0;/*横並び時にできる隙間を削除*/
	max-width: 1280px;/*表示最大幅*/
	margin: 0 auto;/*中央揃え*/
	padding: 0 calc(40px - 0.6em);
}

header>h1 li,header>h2 li{
	font-size: 20px;
	display: inline-block;
	padding: 0 0.6em;
	font-weight: bold;
	white-space: nowrap;
}

header>h1 li{
	padding-left: 0!important;
}

header>h1 img {
	vertical-align: middle;
}

header>h2 li:nth-child(n + 2) {
	border-left: solid 1px #fff;/*タイトル縦線*/
	height: 20px;
    line-height: 20px;
}

header>h1 li:last-child,header>h2 li:last-child{
	float: right;
	border: 0 none;
    line-height: 2.8em;/*後pxに変更*/
	display: none;
}

header>h2 li:last-child a{
	font-size: 18px;
	background: #fff;
	border: solid 1px #57a400;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	color: #57a400;
	display: block;
	text-align: center;
    line-height: 35px;
	width: 120px;
    height: 36px;
    margin-top: 9px;
}

/*nav*/
nav{
	width: 100%;
	margin: 20px 0;
}

nav ul{
	text-align: center;
	font-size:0;/*inline-block使用の際の隙間を消す*/
	max-width: 1280px;
    margin: 0 auto;
}

nav li{
	background: #fafbf1;
	display: inline-block;
	font-size: 16px;
	text-align: center;
	width: calc((100%/5) - 0.5em);
	padding: 1em;/*後pxに変更*/
}

nav li:first-child{
	border: solid 1px #89c01c;
	border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
	-webkit-border-radius: 4px 0 0 4px;
	-o-border-radius: 4px 0 0 4px;
	-ms-border-radius: 4px 0 0 4px;
}

nav li:nth-child(n + 2) {
	border-top: solid 1px #89c01c;
	border-bottom: solid 1px #89c01c;
	border-right: solid 1px #89c01c;
}

nav li:last-child{
	border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
	-webkit-border-radius: 0 4px 4px 0;
	-o-border-radius: 0 4px 4px 0;
	-ms-border-radius: 0 4px 4px 0;
}

nav li>span{
	color: #89c01c;
	float: left;
}

/*nav - 単位*/
nav li:nth-child(1)::after,nav li:nth-child(2)::after,nav li:nth-child(3)::after {
	content: "円";
	font-size: 0.5em;
	padding-left: 0.5em;
	float: right;
}
nav li:nth-child(4)::after,nav li:nth-child(5)::after {
	content: "ヶ月";
	font-size: 0.5em;
	padding-left: 0.5em;;
	float: right;
}

/*contents*/
.contents{
	font-size: 14px;
	display: flex;
	-moz-display: flex;
	-webkit-display: flex;
	-o-display: flex;
	-ms-display: flex;
	width: 100%;
	max-width: 1280px;/*表示最大幅*/
	padding: 0 20px;
    margin: 0 auto;/*中央揃え*/
	margin-bottom: 126px;/*footer分余白*/
}

.contents article{
	width: 50%;
	margin: 20px;
	margin-top: 0;
}

.contents article>.leftbox,.contents article>.rightbox{
	background: #fafbf1;
	border-top: solid 4px #369f02;
	padding: 0 25px;
	border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	-webkit-border-radius: 0 0 4px 4px;
	-o-border-radius: 0 0 4px 4px;
	-ms-border-radius: 0 0 4px 4px;
	box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.2);
	-o-box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.2);
	-ms-box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.2);
}

.contents li {
	/*padding: 10px 0;*/
	border-bottom: dotted 2px #e2e2dd;
}

.contents li:last-child {
	border-bottom: 0 none;
}

/*contents - フォーム*/
.contents input[type="text"] {
	background: #fff;
	border: solid 1px #a0a0a0;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	font-weight: bold;
	/*text-align: left;*/
	width: 160px;
	height: 32px;
	padding: 0.1em 0.3em;
	margin: 0 8px;
}

::placeholder {
    color: #d4d4d4;
}

.contents input[type="checkbox"] {
	background: #fff;
	border: solid 1px #a0a0a0;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	width: 1em;/*後pxに変更*/
	padding: 0.3em;/*後pxに変更*/
	margin: 0 0.3em;
}

/*footer*/
footer{
	background: #e4e4e4;
	border-top: solid 1px #dadada;
	color: #fff;
	width: 100%;
	/*max-width: 1200px;*/
	height: 80px;
	line-height: 4.5em;/*後pxに変更*/
	position: fixed;
	bottom: 0;
	z-index: 999;
	box-sizing: border-box;
}

footer ul{
	max-width: 1280px;/*表示最大幅*/
	margin: 0 auto;/*中央揃え*/
	text-align: center;
	padding: 0 40px;
}

footer li{
	display: inline-block;
	/*padding: 0 2em;*/
}

footer li.back{
	float: left;
	border: 0 none;
}

footer li.back a {
	font-size: 18px;
    background-color: #949494;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	display: block;
    line-height: 46px;
    width: 200px;
    height: 46px;/*後pxに変更*/
    margin-top: 16px;/*後pxに変更*/
}

footer li.back a:hover {
    background-color: #7a7a7a;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	display: block;
}

footer li.next{
	float: right;
	border: 0 none;
}

footer li.next a {
	font-size: 18px;
    background-color: #57a400;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	display: block;
    line-height: 46px;
    width: 200px;
    height: 46px;
    margin-top: 16px;
}

footer li.next a:hover {
    background-color: #498a00;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	display: block;
}

footer dl{
	display: flex;
	width: 100%;
	height: 48px;
    line-height: 48px;
	margin-top: 15px;
}

footer dt {
	border: solid 3px #fff;
	color: #fff;
	font-size: 17px;
	font-weight: normal;
	width: 135px;
	border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    -o-border-radius: 4px 0 0 4px;
    -ms-border-radius: 4px 0 0 4px;
    line-height: 44px;
}

footer dd {
	background: #fff;
    display: block;
    text-align: right;
    color: #1a1a1a;
    font-size: 21px;
	font-weight: bold;
	text-align: center;
	width: 219px;
	border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    -o-border-radius: 0 4px 4px 0;
    -ms-border-radius: 0 4px 4px 0;
	padding: 2px;
	line-height: 42px;
	position: relative;
}

footer dd>span {
	position: absolute;
	font-size: 15px;
	font-weight: normal;
    float: right;
    right: 14px;
	bottom: -7px;
}