@charset "utf-8";
:root {
	--page-blue: #2a57a4;
	--page-red: #cc2a37;
	--page-gray:#b8b8b8;
	--page-dark-gray: #242929;
	--page-light-gray: #F0F3F9;
	--page-yellow: #ffe200;
}
/* -------------------------------------------*/
/* 下からふわっと表示 */
.slide-up {
	opacity:0;
	position:relative;
	transition: top 860ms,opacity 1s;
	top:10%;
}
.slide-up.is-show{
	opacity:1;
	top:0;
}
@media screen and (min-width:391px) {
	.page {
		font-size: 1.15em;
		margin: 0 auto;
		padding: 0 0 3em 0;
		width: 940px;
	}
	.page p {
		margin: 1em 0 0 0;
		padding: 0;
	}
	.page p:first-of-type {
		margin: 0;
	}
	.page a {
		color: var(--page-blue);
		text-decoration: underline;
	}
	.page h2 {
		margin: 1em 0;
		text-align: center;
	}
	.page h2 + p {
		background-color: var(--page-light-gray);
		border: solid 1px var(--page-blue);
		margin: 0 auto !important;
		padding: 1em 20px;
		width: 80%;
	}
	.page h2 + p strong {
		color: var(--page-red);
	}
	.page h3 {
		text-align: center;
	}
	.page .block {
		margin: 3em auto 0 auto;
		width: 90%;
	}
	.page .case h3 {
		font-size: 1.55em;
		margin-bottom: 0.85em;
	}
	.page .case h3 strong {
		color: var(--page-blue);
		font-size: 1.15em;
	}
	.page .case > div {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto;
		width: 80%;
	}
	.page .case > div > div {
		width: 200px;	
	}
	.page .case .icon {
		align-content: center;
		aspect-ratio: 1;
		background-color: #cbcbcb;
		border-radius: 50%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
	.page .case .text {
		font-size: 1.35em;
		font-weight: bold;
		margin-top: 0.5em;
		text-align: center;
	}
	.page .point h3 {
		background-color: var(--page-dark-gray);
		border-radius: 20px;
		color: var(--page-yellow);
		font-size: 1.85em;
		margin: 2em 0 0 0;
		padding: 0.35em 0;
		position: relative;
		text-align: center;
	}
	.page .point h3:after {
		border-color: var(--page-dark-gray) transparent transparent transparent;
		border-style: solid;
		border-width: 20px 15px 0 15px;
		bottom: -20px;
		content: "";
		height: 0px;
		left: 0;
		position: absolute;
		right: 0;
		margin: auto;
		width: 0px;
	}
	.page .point h3 span {
		color: #FFF;
		font-size: 0.8em;
		padding-right: 1em;
	}
	.page .point .text {
		margin-top: 2em;
	}
	.page .point .text strong {
		background-color: transparent;
		color: var(--page-red);
		display: inline;
	}
	.page .flow {
		background-color: var(--page-light-gray);
		margin: 3em auto 0 auto;
		padding: 2em 25px;
		width: 90%;
	}
	.page .flow h3 {
		border-left: solid 5px var(--page-blue);
		font-size: 1.55em;
		line-height: 1;
		margin: 0;
		padding: 0.15em 0 0.15em 0.5em;
		text-align: left;
	}
	.page .flow > div {
		align-items: flex-start;
		border-bottom: dotted 5px #c8d3e7;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 1.5em 0;
	}
	.page .flow > div:last-of-type {
		border-bottom: none;
		padding-bottom: 0;
	}
	.page .flow .icon {
		text-align: center;
		width: 80px;
	}
	.page .flow h4 {
		font-size: 1.2em;
		margin: 0 0 0.25em 0;
		padding: 0;
	}
	.page .flow .icon + div {
		width: 80%;
	}
	.page .flow > div .box {
		background-color: #FFF;
		border: solid 1px var(--page-gray);
		display: inline-block;
		margin: 1em 0 0 0;
		padding: 1em 1em;
	}
	.page .appendix {
		border: solid 1px var(--page-gray);
		margin: 3em auto;
		padding: 2em;
		width: 80%;
	}
	.page .appendix h3 {
		font-size: 1.25em;
		margin-bottom: 0.85em;
	}
	.page .appendix h3 + p {
		text-align: center;
	}
	.page .appendix > div {
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.page .appendix > div:not(.page .appendix > div:last-of-type) {
		border-bottom: solid 1px var(--page-gray);
		margin-bottom: 2em;
		padding-bottom: 2em;
	}
	.page .appendix p {
		font-size: 0.85em;
	}
	.page .appendix .example {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto 1em auto;
		width: 520px;
	}
	.page .appendix .example > div {
		width: 115px;
	}
	.page .appendix .example .text {
		font-size: 1.1em;
		font-weight: bold;
		margin-top: 0.5em;
		text-align: center;
	}
	.page .appendix li {
		font-size: 0.85em;
		line-height: 1.7;
		list-style: disc;
		list-style-position: inside;
	}
	.page .extendedwarranty {
		margin-top: 3em;
	}
	.page .extendedwarranty p {
		font-size: 1.35em;
		font-weight: bold;
		text-align: center;
	}
	.page .extendedwarranty p strong {
		font-size: 1.15em;
		color: var(--page-red);
	}
	.page .extendedwarranty .btn {
		background-color: var(--page-red);
		border: solid 2px var(--page-red);
		border-radius: 20px;
		margin: 0.5em auto 0 auto;
		padding: 0.25em 0;
		width: 60%;
	}
	.page .extendedwarranty .btn a {
		color: #FFF;
		display: block;
		font-weight: bold;
		padding: 0.2em 0;
		text-align: center;
		text-decoration: none;
	}
	.page .extendedwarranty .btn:hover {
		background-color: #FFF;
		transition: 0.5s;
	}
	.page .extendedwarranty .btn:hover a {
		color: var(--page-red);
		transition: 0.5s;
	}
}
@media screen and (max-width:390px) { 
	.page {
		font-size: 0.85em;
		padding-bottom: 2em;
	}
	.page p {
		margin: 1em 0 0 0;
		padding: 0;
	}
	.page p:first-of-type {
		margin: 0;
	}
	.page h2 {
		margin: 1em 0;
	}
	.page h2 + p {
		background-color: var(--page-light-gray);
		border: solid 1px var(--page-blue);
		margin: 0 auto !important;
		padding: 1em 4%;
		width: 92%;
	}
	.page h2 + p strong {
		color: var(--page-red);
	}
	.page h3 {
		text-align: center;
	}
	.page .block {
		margin: 1.5em auto 0 auto;
		width: 92%;
	}
	.page .case h3 {
		font-size: 1.55em;
		line-height: 1.2;
		margin: 1.55em 0 0.85em 0;
	}
	.page .case h3 strong {
		color: var(--page-blue);
		font-size: 1.15em;
	}
	.page .case > div {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.page .case > div > div {
		padding-bottom: 1em;
		margin-bottom: 1em;
		width: 32%;
	}
	.page .case > div > div:last-of-type {
		border-bottom: none;
	}
	.page .case .icon {
		align-content: center;
		aspect-ratio: 1;
		background-color: #cbcbcb;
		border-radius: 50%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
	.page .case .icon img {
		width: 80%;
	}
	.page .case .text {
		font-weight: bold;
		line-height: 1.2;
		margin-top: 1em;
		text-align: center;
	}
	.page .point h3 {
		background-color: var(--page-dark-gray);
		border-radius: 20px;
		color: var(--page-yellow);
		font-size: 1.55em;
		margin: 1em 0 0 0;
		padding: 0.75em 0 0.35em 0;
		position: relative;
		text-align: center;
	}
	.page .point h3:after {
		border-color: var(--page-dark-gray) transparent transparent transparent;
		border-style: solid;
		border-width: 20px 15px 0 15px;
		bottom: -20px;
		content: "";
		height: 0px;
		left: 0;
		position: absolute;
		right: 0;
		margin: auto;
		width: 0px;
	}
	.page .point h3 span {
		color: #FFF;
		display: block;
		font-size: 0.8em;
		line-height: 1;
		text-align: center;
	}
	.page .point .text {
		margin-top: 2em;
	}
	.page .point .text strong {
		background-color: transparent;
		color: var(--page-red);
		display: inline;
	}
	.page .flow {
		background-color: var(--page-light-gray);
		margin-top: 3em;
		padding: 2em 4%;
	}
	.page .flow h3 {
		border-left: solid 5px var(--page-blue);
		font-size: 1.55em;
		line-height: 1;
		margin: 0;
		padding: 0.15em 0 0.15em 0.5em;
		text-align: left;
	}
	.page .flow > div {
		align-items: flex-start;
		border-bottom: dotted 5px #c8d3e7;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 1.5em 0;
	}
	.page .flow > div:last-of-type {
		border-bottom: none;
		padding-bottom: 0;
	}
	.page .flow .icon {
		margin-bottom: 1em;
		text-align: center;
		width: 20%;
	}
	.page .flow h4 {
		font-size: 1.2em;
		margin: 0 0 0.25em 0;
	}
	.page .flow .icon + div {
		width: 75%;
	}
	.page .flow > div .box {
		background-color: #FFF;
		border: solid 1px var(--page-gray);
		display: inline-block;
		margin: 1em 0 0 0;
		padding: 1em 1em;
	}
	.page .appendix {
		border: solid 1px var(--page-gray);
		margin-top: 3em;
		padding: 2em 4%;
	}
	.page .appendix h3 {
		font-size: 1.25em;
		margin-bottom: 0.85em;
	}
	.page .appendix h3 + p {
		text-align: center;
	}
	.page .appendix > div {
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.page .appendix > div:not(.page .appendix > div:last-of-type) {
		border-bottom: solid 1px var(--page-gray);
		margin-bottom: 2em;
		padding-bottom: 2em;
	}
	.page .appendix p {
		font-size: 0.85em;
	}
	.page .appendix .example {
		display: flex;

		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto 1em auto;
		width: 100%;
	}
	.page .appendix .example > div {
		width: 23%;
	}
	.page .appendix .example .text {
		font-weight: bold;
		margin-top: 0.5em;
		text-align: center;
	}
	.page .appendix li {
		font-size: 0.85em;
		line-height: 1.7;
		list-style: disc;
		list-style-position: inside;
	}
	.page .extendedwarranty {
		margin-top: 3em;
	}
	.page .extendedwarranty p {
		font-size: 1.35em;
		font-weight: bold;
		text-align: center;
	}
	.page .extendedwarranty p strong {
		font-size: 1.15em;
		color: var(--page-red);
	}
	.page .extendedwarranty .btn {
		background-color: var(--page-red);
		border: solid 2px var(--page-red);
		border-radius: 20px;
		margin: 0.5em auto 0 auto;
		padding: 0.25em 0;
		width: 60%;
	}
	.page .extendedwarranty .btn a {
		color: #FFF;
		display: block;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
	}
	.page .extendedwarranty p:last-of-type {
		margin: 1em auto 0 auto;
		width: 95%;
	}
}