.page-nav {display: flex;}
.page-nav li {display: flex;align-items: stretch;flex: 1;}
.page-nav li + li {margin-left: 2rem;}
.page-nav li a {display: flex;align-items: center;justify-content: center;padding: 1em;min-width: auto;width: 100%;}

/* about */
#about .d-flex {flex-direction: row-reverse;}
#about .d-flex figure {width: 36rem;margin-left: 5rem;}
#about .d-flex > div {flex: 1;}
#about .d-flex h3 {font-size: 2.2rem;margin-bottom: 2rem;}

/* service */
#service .page-link {display: flex;text-align: center;flex-wrap: wrap;}
#service .page-link li {width: calc(50% - 2.5rem);}
#service .page-link li:nth-child(1) {width: 100%;margin: 5rem 0;}
#service .page-link li:nth-child(3) {margin-left: 5rem;}
#service .page-link li a {font-size: 2.4rem;font-weight: bold;margin-bottom: 2rem;display: block;}
#service .page-link li a figure {margin-bottom: 2rem;}
#service .page-link li p {text-align: left;}
#service .page-link li:nth-child(1) p {max-width: 600px;margin: auto;}

/* message */
#message .d-flex {margin-bottom: 4rem;}
#message .d-flex figure {margin-right: 5rem; width: 36rem;}
#message .d-flex > div {flex: 1;}
#message h3 {font-size: 2.2rem;margin-bottom: 2rem;}
#message p + h3 {margin-top: 4rem;}

@media screen and (min-width: 768px) {
}

@media screen and (max-width: 999px) {
	.page-nav li + li {margin-left: 1rem;}
	.page-nav a {font-size: 1.4rem;}
	.page-nav a:after {position: relative;right: auto;margin-left: .5em;}
	
	/* about */
	#about .d-flex figure {width: 26rem;}
	
	/* message */
	#message .d-flex figure {width: 26rem;}

}
@media screen and (max-width: 767px) {
	.page-nav {flex-wrap: wrap;justify-content: space-between;}
	.page-nav li {flex: none;width: calc(50% - 1rem);margin-bottom: 2rem;}
	.page-nav li + li {margin-left: 0;}
	
	/* about */
	#about .d-flex {flex-direction: column;}
	#about .d-flex figure {width: 100%;margin: 0 0 3rem;text-align: center;}
	
	/* service */
	#service .page-link { flex-direction: column;align-items: center;}
	#service .page-link li {max-width: 450px ;width: 100%;}
	#service .page-link li:nth-child(3) {margin-left: 0rem;margin-top: 5rem;}
	#service .page-link li img {width: 100%;}
	
	/* message */
	#message .d-flex {flex-direction: column;}
	#message .d-flex figure {width: 100%;margin: 0 0 3rem;text-align: center;}
}

@media screen and (max-width: 400px) {
	.page-nav li {flex: none;width: calc(50% - .5rem);margin-bottom: 1rem;}
}


/* ie
------------------------------ */
@media all and (-ms-high-contrast: none) {
	#message .box span {padding-bottom: 0 !important;}
}