@charset "utf-8";
:root {
	--page-blue: #006ad0;
	--page-dark-blue: #0b318f;
	--page-green: #03994e;
	--page-red: #e53429;
	--page-gray: #a8afb9;
	--page-transition: all 0.3s 0s ease;
}
@media screen and (min-width:391px) {
	.page {
		font-size: 1.15em;
		padding: 0 0 2em 0;
		margin: 0 auto;
		width: 940px;
	}
	.page a {
		color: var(--page-blue);
	}
	.page p {
		margin: 1em 0 0 0;
		padding: 0;
	}
	.page p:first-of-type {
		margin: 0;
	}
	.page .sp {
		display: none;
	}
	.page .colored {
		color: var(--page-red);
	}
	.page .block {
		margin: 3.5em 0 0 0;
		overflow: hidden;
	}
	.page h2 {
		margin: 0;
	}
	.page .intro h3,
	.page .reason h3 {
		border-left: solid 4px var(--page-green);
		margin: 0 0 1.15em 0;
		padding: 0.75em 0 0.75em 1em;
	}
	.page .intro .text {
		align-content: flex-start;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.page .intro .text p:nth-of-type(1) {
		width: 100%;
	}
	.page .intro .text p:nth-of-type(2) {
		width: 50%;
	}
	.page .intro .text .img {
		margin-right: 1em;
		width: 358px;
	}
	.page .merit {
		background-color: #f2f4f5;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 2em;
		width: 90%;
	}
	.page .merit h3 {
		background-color: #5c697b;
		margin: 0 0 1.65em 0;
		padding: 0.5em 0;
		text-align: center;
	}
	.page .merit ul {
		display: flex;
		flex-wrap: wrap;
	}
	.page .merit ul:nth-of-type(1) {
		justify-content: space-between;
		margin: 0 auto;
		width: 87%;
	}
	.page .merit ul:nth-of-type(2) {
		justify-content: center;
		margin-top: 1em;
	}
	.page .merit ul:nth-of-type(2) li {
		margin: 0 0.5em;
	}
	.page .merit li {
		margin: 0.5em 0;
	}
	.page .merit li .img {
		text-align: center;
	}
	.page .merit li p:last-of-type {
		text-align: center;
	}
	.page .reason .img {
		padding: 1.5em 0;
		text-align: center;
	}
	.page .reason .note {
		font-size: 0.75em;
	}
	.page .certificate {
		background-image: url("/parts/contents/agency/mar_bg_pc.png");
		background-repeat: no-repeat;
		background-position: top left;
		margin-left: auto;
		margin-right: auto;
		padding: 9em 0 5em 0;
		width: 730px;
	}
	.page .certificate h3 {
		margin: 0 0 1.25em 0;
		padding: 0;
		text-align: center;
	}
	.page .certificate h3 + p {
		margin: 0 auto;
		width: 650px;
	}
	.page .certificate .btn {
		background-color: #FFF;
		border: solid 1px #000;
		box-shadow: 2px 2px 0px 0px #083552;
		display: block;
		margin: 2em auto 0 auto;
		width: 60%;
	}
	.page .certificate .btn a {
		color: #000;
		display: block;
		font-weight: bold;
		padding: 0.5em 0;
		text-align: center;
		text-decoration: none;
		transition: var(--page-transition);
	}
	.page .certificate .btn a:hover {
		background-color: #daedf6;
	}
	.page .flow h3,
	.page .faq h3 {
		font-size: 1.45em;
		margin: 0 0 1.5em 0;
		padding: 0 0 0.25em 0;
	}
	.page .flow h3::before,
	.page .faq h3::before {
		background: var(--page-green);
		bottom: 0;
		content: '';
		height: 3px;
		position: absolute;
		width: 100%;
	}
	.page .flow h3::after,
	.page .faq h3::after {
		background: var(--page-gray);
		bottom: 0;
		content: '';
		height: 3px;
		position: absolute;
		width: 100%;
	}
	.page .flow > div {
		counter-reset: number 0;
	}
	.page .flow h4 {
		font-size: 1.15em;
		margin: 0 0 0.55em 0;
		padding: 0;
	}
	.page .flow h4::before {
		color: var(--page-green);
		content: "Step." counter(number);
		counter-increment: number 1;
		padding-right: 0.5em;
	}
	.page .flow > div > div {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 1.75em auto 0 auto;
		width: 95%;
	}
	.page .flow .text {
		width: 82%;
	}
	.page .flow .img {
		align-content: center;
		display: flex;
		height: 105px;
		justify-content: center;
		width: 105px;
	}
	.page .flow > div > div:nth-of-type(1) .img img {
		width: 71px;
	}
	.page .flow > div > div:nth-of-type(2) .img img {
		width: 76px;
	}
	.page .flow > div > div:nth-of-type(3) .img img {
		width: 80px;
	}
	.page .flow > div > div:nth-of-type(4) .img img {
		width: 75px;
	}
	.page .flow > div > div:nth-of-type(5) .img img {
		width: 67px;
	}
	.page .faq > div {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto;
		width: 95%;
	}
	.page .faq dl {
		margin: 2em 0 0 0;
		padding: 0;
	}
	.page .faq dl:first-of-type {
		margin: 0;
	}
	.page .faq dt {
		border-left: solid 3px var(--page-green);
		font-size: 1.15em;
		font-weight: bold;
		margin: 0;
		padding: 0 0 0 0.75em;
	}
	.page .faq dd {
		margin: 0.5em 0 0 0;
		padding: 0;
	}
	.page .contact {
		align-items: center;
		background-color: #FFF;
		bottom: 0;
		box-shadow: 0px -5px 12px -9px #777777;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 3em 0 0 0;
		padding: 1em 0;
		position: sticky;
		transition: transform 0.7s 0s ease;
		width: 940px;
	}
	.page .contact p:nth-of-type(1) {
		margin: 0 0 0.25em 0;
		text-align: center;
		width: 100%;
	}
	.page .contact .tel {
		margin: 0 1.25em 0 0;
		width: 285px;
	}
	.page .contact .mail {
		background-color: var(--page-dark-blue);
		border-radius: 25px;
		margin: 0;
		transition: var(--page-transition);
		width: 265px;
	}
	.page .contact .mail:hover {
		background-color: #2f50a0;
	}
	.page .contact .mail a {
		align-items: center;
		color: #FFF;
		display: flex;
		flex-wrap: wrap;
		font-size: 1.25em;
		font-weight: bold;
		justify-content: center;
		padding: 0.45em 0;
		text-decoration: none;
		width: 100%;
	}
	.page .contact .mail a::before {
		content: '';
		display: block;
		background-image: url("/parts/contents/agency/icon_mail.svg");
		background-position: center left;
		background-repeat: no-repeat;
		height: 1.75em;
		margin-right: 0.5em;
		width: 1.75em;
	}
}
@media screen and (max-width:390px) { 
	.page {
		font-size: 0.85em;
		padding-bottom: 2em;
		width: 100%;
	}
	.page * {
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
	.page p {
		margin: 1em 0 0 0;
		padding: 0;
	}
	.page p:first-of-type {
		margin: 0;
	}
	.page .colored {
		color: var(--page-red);
	}
	.page .block {
		margin: 2.25em auto 0 auto;
		overflow: hidden;
		width: 92%;
	}
	.page h2 {
		margin: 0.5em 0 0 0;
	}
	.page h2 img:not(picture img) {
		margin-top: 1em;
	}
	.page .intro h3,
	.page .reason h3 {
		border-left: solid 4px var(--page-green);
		margin: 0 0 1.15em 0;
		padding: 0.25em 0 0.25em 0.75em;
	}
	.page .intro .text .img {
		text-align: center;
	}
	.page .intro .text .img img {
		width: 90%;
	}
	.page .merit {
		background-color: #f2f4f5;
		padding-bottom: 1em;
		width: 100%;
	}
	.page .merit h3 {
		background-color: #5c697b;
		color: #FFF;
		margin: 0 0 0.85em 0;
		padding: 0.25em 0;
		text-align: center;
	}
	.page .merit ul {
		list-style: none;
		margin: 0 auto;
		padding: 0;
		width: 95%;
	}
	.page .merit li {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.page .merit .img {
		align-items: center;
		display: flex;
		height: 7em;
		justify-content: flex-end;
		width: 30%;
	}
	.page .merit .img img {
		height: 6em;
		width: auto;
	}
	.page .merit li p:last-of-type {
		margin: 0;
		width: 67%;
		display: flex;
		align-items: center;
	}
	.page .reason .img {
		padding: 1.5em 0;
		text-align: center;
	}
	.page .reason .note {
		font-size: 0.75em;
	}
	.page .certificate {
		background-color: #fefaee;
		background-image: url("/parts/contents/agency/mar_bg_sp.png");
		background-repeat: no-repeat;
		background-position: top left;
		background-size: contain;
		padding: 6em 0 2.5em 0;
		width: 100%;
	}
	.page .certificate h3 {
		margin: 0 auto 1.25em auto;
		padding: 0;
		text-align: center;
		width: 92%;
	}
	.page .certificate h3 + p {
		margin: 0 auto;
		width: 92%;
	}
	.page .certificate .btn {
		background-color: #FFF;
		border: solid 1px #000;
		box-shadow: 2px 2px 0px 0px #083552;
		display: block;
		margin: 1em auto 0 auto;
		width: 80%;
	}
	.page .certificate .btn a {
		color: #000;
		display: block;
		font-weight: bold;
		padding: 0.5em 0;
		text-align: center;
		text-decoration: none;
		transition: var(--page-transition);
	}
	.page .certificate .btn a:hover {
		background-color: #daedf6;
	}
	.page .flow h3,
	.page .faq h3 {
		font-size: 1.25em;
		margin: 0 0 1.5em 0;
		padding: 0 0 0.25em 0;
	}
	.page .flow h3::before,
	.page .faq h3::before {
		background: var(--page-green);
		bottom: 0;
		content: '';
		height: 3px;
		position: absolute;
		width: 100%;
	}
	.page .flow h3::after,
	.page .faq h3::after {
		background: var(--page-gray);
		bottom: 0;
		content: '';
		height: 3px;
		position: absolute;
		width: 100%;
	}
	.page .flow > div {
		counter-reset: number 0;
	}
	.page .flow h4 {
		font-size: 1.15em;
		margin: 0 0 0.55em 0;
		padding: 0;
	}
	.page .flow h4::before {
		color: var(--page-green);
		content: "Step." counter(number);
		counter-increment: number 1;
		padding-right: 0.5em;
	}
	.page .flow > div > div {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 1.75em 0 0 0;
	}
	.page .flow .text {
		width: 75%;
	}
	.page .flow .img {
		align-content: flex-start;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		width: 20%;
	}
	.page .flow .img img {
		width: 100%
	}
	.page .faq dl {
		margin: 2em 0 0 0;
		padding: 0;
	}
	.page .faq dt {
		border-left: solid 3px var(--page-green);
		font-size: 1.05em;
		font-weight: bold;
		margin: 0;
		padding: 0 0 0 0.75em;
	}
	.page .faq dd {
		margin: 0.5em 0 0 0;
		padding: 0;
	}
	.page .contact {
		background-color: #FFF;
		bottom: 0;
		box-shadow: 0px -5px 12px -9px #777777;
		margin: 3em 0 0 0;
		padding: 1.25em 4%;
		position: sticky;
		width: 100%;
	}
	.page .contact p:nth-of-type(1) {
		font-size: 0.85em;
		text-align: center;
		width: 100%;
	}
	.page .contact .tel {
		margin: 0 auto;
		width: 80%;
	}
	.page .contact .mail {
		background-color: var(--page-dark-blue);
		border-radius: 25px;
		margin: 1em auto 0 auto;
		width: 80%;
	}
	.page .contact .mail a {
		align-items: center;
		color: #FFF;
		display: flex;
		flex-wrap: wrap;
		font-size: 1.25em;
		font-weight: bold;
		justify-content: center;
		padding: 0.45em 0;
		text-decoration: none;
		width: 100%;
	}
	.page .contact .mail a::before {
		content: '';
		display: block;
		background-image: url("/parts/contents/agency/icon_mail.svg");
		background-position: center left;
		background-repeat: no-repeat;
		height: 1.75em;
		margin-right: 0.5em;
		width: 1.75em;
	}
}