@charset "utf-8";
:root {
	--page-blue: #2a57a4;
	--page-light-blue: #0085c9;
	--page-red: #c7161e;
	--page-gray: #242929;
	--page-light-gray: #ebf2f5;
	--page-yellow: #ffe200;
}
/* 下からふわっと表示 */
.slide-up {
	opacity:0;
	position:relative;
	transition: top 860ms,opacity 1s;
	top:10%;
}
.slide-up.is-show{
	opacity:1;
	text-align: center;
	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 .intro {
		margin-bottom: 2em;
	}
	.page .intro h2 {
		margin: 1.5em 0;
		text-align: center;
	}
	.page .intro h2 + p {
		font-size: 1.15em;
		text-align: center;
	}
	.page .intro h2 + p strong {
		color: var(--page-red);
	}
	.page .content {
		background-color: var(--page-yellow);
		padding: 2.15em 0;
	}
	.page .content .box {
		margin: 2em auto 0 auto;
		width: 720px;
	}
	.page .feature {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto 2em auto;
		width: 720px;
	}
	.page .feature > div {
		align-content: center;
		aspect-ratio: 1;
		background-color: #FFF;
		border-radius: 50%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 230px;
	}
	.page .feature > div > p {
		font-weight: bold;
		text-align: center;
		margin: 0;
		width: 100%;
	}
	.page .feature > div > p:nth-of-type(1) {
		font-size: 1.45em;
		line-height: 1;
		margin-bottom: 0.55em;
	}
	.page .feature > div > p:nth-of-type(2) {
		font-size: 2.55em;
		line-height: 1.1;
	}
	.page .feature > div .note {
		font-weight: normal;
		margin-top: 0.25em;
	}
	.page .case {
		background-color: var(--page-light-gray);
		padding-bottom: 1.25em;
	}
	.page .case h3 {
		background-color: var(--page-gray);
		color: #FFF;
		font-size: 1.75em;
		padding: 0.15em 0;
		text-align: center;
	}
	.page .case > div {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 1.25em auto 0 auto;
		width: 660px;
	}
	.page .case > div > div {
		border-right: solid 1px #000;
		width: 220px;
	}
	.page .case > div > div:last-of-type {
		border-right: none;
	}
	.page .case > div p {
		text-align: center;
	}
	.page .case .img {
		align-content: center;
		display: flex;
		justify-content: center;
		height: 110px;
	}
	.page .case .text {
		font-size: 1.25em;
		font-weight: bold;
		line-height: 1.3;
	}
	.page .repair {
		background-color: var(--page-blue);
		padding: 1.25em 0 2em 0;
	}
	.page .repair h3 {
		color: #FFF;
		font-size: 1.55em;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.page .repair h3 + p {
		color: #FFF;
		text-align: center;
	}
	.page .repair h3 strong {
		font-size: 1.35em;
	}
	.page .repair .sample {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0.55em auto 0 auto;
		width: 630px;
	}
	.page .repair .sample > div {
		background-image: url("/parts/contents/extendedwarranty/sample_bg.png");
		background-position: center;
		background-repeat: no-repeat;
		height: 300px;
		padding: 55px 10px 0 10px;
		width: 192px;
	}
	.page .repair .sample p {
		font-weight: bold;
		text-align: center;
	}
	.page .repair .sample .img {
		margin: 0.75em 0 0.55em 0;
	}
	.page .repair .sample .text {
		font-size: 1.15em;
		line-height: 1.3;
	}
	.page .repair .sample .menu {
		border-top: dotted 1px var(--page-blue); 
		color: var(--page-blue);
		margin-top: 0.75em;
		padding-top: 0.75em;
	}
	.page .repair .sample .price {
		color: var(--page-red);
		font-size: 1.75em;
		line-height: 1;
		margin: 0.15em 0 0 0;
		padding: 0;
	}
	.page .repair .sample .price::after {
		content: "";
	}
	.page .arrow {
		padding: 2em 0;
		text-align: center;
	}
	.page .summary p:not(.page .summary .note) {
		font-size: 2em;
		font-weight: bold;
		line-height: 1;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.page .summary p span {
		font-size: 0.25em;
		font-weight: normal;
	}
	.page .summary p strong {
		color: var(--page-red);
		font-size: 1.55em;
	}
	.page .summary .note {
		font-size: 0.75em;
		margin: 0 auto;
		width: 660px;
	}
	.page .compare {
		margin-top: 2em;
		padding-left: 18px;
	}
	.page .detail {
		padding: 3em 0 0 0;
	}
	.page .detail > div {
		margin-bottom: 3em;
	}
	.page .detail h3 {
		border-left: solid 5px var(--page-light-blue);
		font-size: 1.35em;
		line-height: 1;
		padding: 0.15em 0 0.15em 0.5em;
		margin: 0 0 1em 0;
	}
	.page table {
		--border-style: solid 1px #7f7f7f;
		color: #000;
		margin-bottom: 1em;
	}
	.page .tbl01 {
		border-left: var(--border-style);
		border-bottom: var(--border-style);
	}
	.page .tbl01 th {
		background-color: var(--page-light-gray);
		border-right: var(--border-style);
		border-top: var(--border-style);
		padding: 1em 0;
		text-align: center;
		width: 50%;
	}
	.page .tbl01 td {
		border-right: var(--border-style);
		border-top: var(--border-style);
		font-size: 1.15em;
		padding: 0.35em 0;
		text-align: center;
		width: 50%;
	}
	.page .tbl01 tr:nth-of-type(2) td {
		border-top: none;
	}
	.page .tbl02 {
		font-size: 0.85em;
		text-align: left;
	}
	.page .tbl02 th {
		background-color: var(--page-light-gray);
		border-bottom: var(--border-style);
		font-weight: normal;
		vertical-align: middle;
		padding: 0 1em;
		width: 25%;
	}
	.page .tbl02 td {
		border-bottom: var(--border-style);
		padding: 1.25em 2.25em;
		vertical-align: middle;
	}
	.page .tbl02 tr:last-of-type td,
	.page .tbl02 tr:last-of-type th {
		border-bottom: none;
	}
	.page p.btn {
		background-color: var(--page-light-gray);
		border: solid 2px var(--page-blue);
		border-radius: 7px 7px 7px 7px;
		box-shadow: 0px 3px var(--page-blue);
		display: block;
		margin: 3em auto 0 auto;
		padding: 0.25em 0;
		width: 60%;
	}
	.page p.btn a {
		color: var(--page-blue);
		display: block;
		font-weight: bold;
		font-size: 1.55em;
		text-align: center;
		text-decoration: none;
	}
	.page p.btn:hover {
		background-color: #FFF;
		transition: 0.5s;
	}
}
@media screen and (max-width:390px) { 
	.page {
		font-size: 0.85em;
		padding-bottom: 2em;
		width: 100%;
	}
	.page p {
		margin: 1em 0 0 0;
		padding: 0;
	}
	.page p:first-of-type {
		margin: 0;
	}
	.page .intro {
		margin: 2em auto 1em auto;
		width: 92%;
	}
	.page .intro h2 {
		margin: 0.5em 0;
		text-align: center;
	}
	.page .intro h2 + p {
	}
	.page .intro h2 + p strong {
		color: var(--page-red);
	}
	.page .content {
		background-color: var(--page-yellow);
		padding: 1.85em 0;
	}
	.page .content .box {
		margin: 1.5em auto 0 auto;
		width: 92%;
	}
	.page .feature {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto;
		width: 95%;
	}
	.page .feature > div {
		align-content: center;
		aspect-ratio: 1;
		background-color: #FFF;
		border-radius: 50%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 32.5%;
	}
	.page .feature > div > p {
		font-weight: bold;
		text-align: center;
		margin: 0;
		width: 100%;
	}
	.page .feature > div > p:nth-of-type(1) {
		font-size: 1.15em;
		line-height: 1;
		margin-bottom: 0.35em;
	}
	.page .feature > div > p:nth-of-type(2) {
		font-size: 1.55em;
		line-height: 1.1;
	}
	.page .feature > div .note {
		font-weight: normal;
	}
	.page .case {
		background-color: var(--page-light-gray);
		padding-bottom: 0.5em;
	}
	.page .case h3 {
		background-color: var(--page-gray);
		color: #FFF;
		font-size: 1.35em;
		margin-bottom: 0;
		padding: 0.15em 0;
		text-align: center;
	}
	.page .case > div {
		margin: 0.55em auto 0 auto;
		width: 90%;
	}
	.page .case > div > div {
		align-content: center;
		border-bottom: solid 1px #000;
		display: flex;
		justify-content: space-between;
	}
	.page .case > div > div:last-of-type {
		border-bottom: none;
	}
	.page .case > div p {
	}
	.page .case .img {
		padding: 0.75em 0;
		width: 23%;
	}
	.page .case .text {
		align-items: center;
		display: flex;
		font-size: 1.15em;
		font-weight: bold;
		margin-top: 0;
		width: 70%;
	}
	.page .repair {
		background-color: var(--page-blue);
		padding: 1.25em 0;
	}
	.page .repair h3 {
		color: #FFF;
		font-size: 1.45em;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.page .repair h3 + p {
		color: #FFF;
		margin: 0 auto;
		width: 92%;
	}
	.page .repair h3 strong {
		font-size: 1.35em;
	}
	.page .repair .sample {
		margin: 0.55em auto 0 auto;
		width: 92%;
	}
	.page .repair .sample > div {
		background-color: #FFF;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 1em;
		padding: 1em;
	}
	.page .repair .sample > div:last-of-type {
		margin-bottom: 0;
	}
	.page .repair .sample p {
		font-weight: bold;
	}
	.page .repair .sample .text {
		font-size: 1.15em;
		line-height: 1.3;
	}
	.page .repair .sample .img {
		margin-top: 0.75em;
		width: 30%;
	}
	.page .repair .sample .img + div {
		width: 65%;
	}
	.page .repair .sample .menu {
		border-top: dotted 1px var(--page-blue);
		color: var(--page-blue);
		margin-top: 0.5em;
		padding-top: 0.5em;
	}
	.page .repair .sample .price {
		color: var(--page-red);
		font-size: 1.75em;
		line-height: 1;
		margin: 0.15em 0 0 0;
		padding: 0;
		text-align: right;
	}
	.page .arrow {
		padding: 1.25em 0;
		text-align: center;
	}
	.page .arrow img {
		width: 25%;
	}
	.page .summary p:not(.page .summary .note) {
		font-size: 1.75em;
		font-weight: bold;
		line-height: 1;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.page .summary p span {
		font-size: 0.25em;
		font-weight: normal;
	}
	.page .summary p strong {
		color: var(--page-red);
		font-size: 1.55em;
	}
	.page .summary .note {
		font-size: 0.75em;
		margin: 0 auto;
		width: 95%;
	}
	.page .compare {
		margin: 2em auto 0 auto;
		width: 90%;
	}
	.page .compare .sp p {
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.page .compare .sp p:nth-of-type(2) img {
		margin-top: 1em;
		width: 30%;
	}
	.page .detail {
		margin: 0 auto;
		padding: 3em 0 0 0;
		width: 92%;
	}
	.page .detail > div {
		margin-bottom: 3em;
	}
	.page .detail h3 {
		border-left: solid 5px var(--page-light-blue);
		font-size: 1.35em;
		line-height: 1;
		padding: 0.15em 0 0.15em 0.5em;
		margin: 0 0 1em 0;
	}
	.page table {
		--border-style: solid 1px #7f7f7f;
		margin-bottom: 1em;
	}
	.page .tbl01 {
		border-left: var(--border-style);
		border-bottom: var(--border-style);
	}
	.page .tbl01 th {
		background-color: var(--page-light-gray);
		border-right: var(--border-style);
		border-top: var(--border-style);
		padding: 1em 0;
		text-align: center;
		width: 50%;
	}
	.page .tbl01 td {
		border-right: var(--border-style);
		border-top: var(--border-style);
		padding: 0.35em 0;
		text-align: center;
		width: 50%;
	}
	.page .tbl01 tr:nth-of-type(2) td {
		border-top: none;
	}
	.page .tbl02 {
		font-size: 0.85em;
		text-align: left;
	}
	.page .tbl02 th {
		background-color: var(--page-light-gray);
		border-bottom: var(--border-style);
		font-weight: normal;
		vertical-align: middle;
		padding: 0 1em;
		width: 25%;
	}
	.page .tbl02 td {
		border-bottom: var(--border-style);
		padding: 1.25em 2.25em;
		vertical-align: middle;
	}
	.page .tbl02 tr:last-of-type td,
	.page .tbl02 tr:last-of-type th {
		border-bottom: none;
	}
	.page p.btn {
		background-color: var(--page-light-gray);
		border: solid 2px var(--page-blue);
		border-radius: 7px 7px 7px 7px;
		box-shadow: 0px 3px var(--page-blue);
		display: block;
		margin: 3em auto 0 auto;
		padding: 0.25em 0;
		width: 60%;
	}
	.page p.btn a {
		color: var(--page-blue);
		display: block;
		font-weight: bold;
		font-size: 1.55em;
		text-align: center;
		text-decoration: none;
	}
}