@charset "utf-8";
:root {
	--page-black: #00131a;
	--page-blue: #3887e8;
	--page-dark-blue: #123a75;
	--page-green: #31a823;
	--page-orange: #e75000;
	--page-red: #cf002a;
	--page-yellow: #fff100;
}
@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 > div {
		margin-top: 5em;
	}
	.page .intro {
		background-color: var(--page-yellow);
		/* background-image: url("/parts/contents/windows10-eol/ttl_bg_01.png"), url("/parts/contents/windows10-eol/ttl_bg_02.png"); */
		background-position: top left, bottom left;
		background-repeat: no-repeat, no-repeat;
		margin-top: 0;
		padding-bottom: 25px;
	}
	.page .intro h2 {
		margin: 0;
		padding: 1.65em 0 0 0;
		text-align: center;
	}
	.page .intro .countdown {
		background-color: #FFF;
		font-weight: bold;
		margin-inline: auto;
		min-height: 125px;
		padding: 1em 0;
		width: 683px;
	}
	.page .intro .countdown > div p {
		line-height: 1;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.page .intro .countdown > div p:nth-of-type(1) {
		font-size: 1.85em;
		line-height: 0.8;
	}
	.page .intro .countdown > div p:nth-of-type(2) {
		font-size: 1.75em;
		margin-bottom: 0.25em;
	}
	.page .intro .countdown > div p img {
		vertical-align: middle;
	}
	.page .intro .countdown > div p img:last-of-type {
		margin-right: 0.15em;
	}
	.page .intro .countdown .num {
		color: var(--page-red);
		font-size: 1.95em;
		line-height: 0.75;
		padding: 0 0.05em 0 0.2em;
	}
	.page .about h3 {
		align-content: center;
		display: flex;
		flex-wrap: wrap;
		font-size: 2.20em;
		justify-content: center;
		margin-bottom: 0.5em;
	}
	.page .about h3::before {
		background-image: url("/parts/contents/windows10-eol/icon_caution_red.svg");
		background-position: center left;
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: inline-block;
		height: 1.55em;
		margin-right: 0.55em;
		width: 1.55em;
	}
	.page .about h3 strong {
		background-image: linear-gradient(transparent 65%, var(--page-yellow) 65%);
		background-repeat: repeat-x;
		background-size: 200% 1.2em;
	}
	.page .about p {
		font-size: 1.15em;
	}
	.page .about p strong {
		color: var(--page-red);
	}
	.page .risk p:first-of-type {
		text-align: center;
	}
	.page .risk .detail {
		background-color: var(--page-dark-blue);
		color: #FFF;
		padding: 2em 34px;
	}
	.page .risk .detail::after {
		--width: 50px;
		background-color: var(--page-dark-blue);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		content: "";
		display: block;
		height: 30px;
		left: 50%;
		margin-left: calc(var(--width) / 2 * -1);
		margin-top: -1px;
		position: absolute;
		top: 100%;
		width: var(--width);
	}
	.page .risk .case {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 0.75em;
	}
	.page .risk .case > div {
		align-items: center;
		aspect-ratio: 1;
		background-color: #FFF;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 32%;
	}
	.page .risk .icon {
		align-content: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		height: 70px;
	}
	.page .risk .case > div:nth-of-type(1) .icon {
		width: 70px;
	}
	.page .risk .detail .case > div:nth-of-type(2) .icon {
		width: 70px;
	}
	.page .risk .detail .case > div:nth-of-type(3) .icon {
		width: 80px;
	}
	.page .risk .case dt {
		color: var(--page-dark-blue);
		font-size: 1.55em;
		font-weight: bold;
		line-height: 1.3;
		margin: 0.25em 0 0 0;
		padding: 0;
		text-align: center;
	}
	.page .risk .case dd {
		color: var(--page-black);
		font-size: 1.15em;
		line-height: 1.4;
		margin: 0.25em 0 0 0;
		padding: 0;
		text-align: center;
	}
	.page .reason p:first-of-type {
		text-align: center;
	}
	.page .reason .detail {
		align-items: stretch;
		background-color: #eaf4ff;
		display: flex;
		justify-content: space-between;
		margin-top: 2.5em;
		padding: 2em 23px;
	}
	.page .reason .detail > div {
		border-right: solid 1px var(--page-black);
		padding-right: 20px;
		width: 280px;
	}
	.page .reason .detail > div:last-of-type {
		border-right: none;
		padding-right: 0;
		width: 280px;
	}
	.page .reason .detail > div > p {
		background-color: var(--page-dark-blue);
		color: #FFF;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1;
		padding: 0.35em 0;
		text-align: center;
	}
	.page .reason .detail dt {
		color: var(--page-dark-blue);
		font-size: 1.55em;
		font-weight: bold;
		margin: 0.5em 0 0.15em 0;
		padding: 0;
		text-align: center;
	}
	.page .reason .detail dd {
		margin: 0;
		padding: 0;
	}
	.page .incident {
		margin: 5em auto 0 auto;
		width: 90%;
	}
	.page .incident h4 {
		align-items: center;
		background-color: var(--page-black);
		color: #FFF;
		display: flex;
		font-size: 1.55em;
		justify-content: center;
		margin: 0;
		padding: 0.25em 0;
	}
	.page .incident h4::before {
		background-image: url("/parts/contents/windows10-eol/icon_caution_yellow.svg");
		background-position: left center;
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: block;
		height: 1.43em;
		margin-right: 0.25em;
		width: 1.5em;
	}
	.page .incident .detail {
		background-color: var(--page-yellow);
		display: flex;
		justify-content: space-between;
		padding: 1.5em 25px 0 30px;
	}
	.page .incident .detail > div {
		width: 600px;
		margin: 0 0 1.25em 0;
	}
	.page .incident .detail > div > p:nth-of-type(1) {
		color: var(--page-dark-blue);
		font-size: 1.25em;
		font-weight: bold;
	}
	.page .incident .detail > div > p:nth-of-type(2) {
		margin-top: 0.5em;
	}
	.page .incident .img {
		display: flex;
		align-items: flex-end;
	}
	.page .chart h3 {
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.page .chart .fig {
		margin: 0 auto;
		width: 730px;
	}
	.page .chart .fig ul {
		--width: 569px;
		bottom: 70px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		left: calc((730px - var(--width)) / 2);
		position: absolute;
		width: var(--width);
	}
	.page .chart .option {
		margin-top: 5em;
	}
	.page .chart .option .box {
		margin-top: 3em;
		margin-left: 28px;
		padding: 25px 20px;
	}
	.page .chart .option .box:nth-of-type(1) {
		background-color: #fdf1eb;
	}
	.page .chart .option .box:nth-of-type(2) {
		background-color: #edf4fd;
	}
	.page .chart .option .box:nth-of-type(3) {
		background-color: #ecf7eb;
	}
	.page .chart .option .icon {
		left: -30px;
		position: absolute;
		top: -30px;
	}
	.page .chart .option .box > div:nth-of-type(1) {
		margin-bottom: 1em;
		padding-left: 115px;
	}
	.page .chart .option .box > div:nth-of-type(2) {
		display: flex;
		justify-content: space-between;
		padding-left: 200px;
	}
	.page .chart .option .box > div:nth-of-type(2) > div {
		width: 328px;
	}
	.page .chart .option .price {
		margin-bottom: 1em;
	}
	.page .chart .option .price::after {
		content: "";
	}
	.page .chart .option .apply {
		border-bottom-style: solid;
		border-bottom-width: 2px;
	}
	.page .chart .option .apply:hover {
		border-bottom: none;
		margin-bottom: 2px;
		transform: translateY(2px);
	}
	.page .chart .option .box:nth-of-type(1) .apply {
		background-color: var(--page-orange);
		border-bottom-color: #c73000;
	}
	.page .chart .option .box:nth-of-type(2) .apply {
		background-color: var(--page-blue);
		border-bottom-color: #004093;
	}
	.page .chart .option .box:nth-of-type(3) .apply {
		background-color: var(--page-green);
		border-bottom-color: #318623;
	}
	.page .chart .option .apply a {
		color: #FFF;
		display: flex;
		font-weight: bold;
		justify-content: center;
		line-height: 1;
		padding: 0.55em 0;
		text-decoration: none;
		width: 100%;
	}
	.page .chart .option .apply a::after {
		content: "";
		background-image: url("/parts/contents/windows10-eol/arrow.svg");
		background-repeat: no-repeat;
		background-size: contain;
		display: block;
		height: 1em;
		margin-left: 0.5em;
		width: 1em;
	}
	.page .contact h3 {
		align-content: center;
		background-color: transparent;
		border-left: 0;
		display: flex;
		flex-wrap: wrap;
		font-size: 2em;
		font-weight: bold;
		justify-content: space-between;
		line-height: 1;
		margin: 0 0 0.5em 0;
		padding: 0;
	}
	.page .contact h3::before,
	.page .contact h3::after {
		background-image: url("/parts/contents/windows10-eol/border_bg.jpg");
		background-position: center;
		background-repeat: repeat-x;
		content: "";
		display: block;
		height: 1em;
		width: 18%;
	}
	.page .contact h3 + p {
		font-size: 1.35em;
		margin-top: 1.25em;
		text-align: center;
	}
	.page .contact .tel {
		margin-bottom: 2.25em;
		text-align: center;
	}
	.page .contact .shop {
		background-color: var(--page-blue);
		border-bottom: solid 4px #1a4aa4;
		border-radius: 10px;
		height: 4em;
		margin: 0 auto;
		width: 65%;
	}
	.page .contact .shop:hover {
		border-bottom: none;
		padding-bottom: 4px;
		transform: translateY(4px);
	}
	.page .contact .shop a {
		align-items: center;
		color: #FFF;
		display: flex;
		font-size: 1.65em;
		font-weight: bold;
		justify-content: center;
		padding: 0.45em 0 0.55em 0;
		text-align: center;
		text-decoration: none;
	}
	.page .contact .shop a::before {
		background-image: url("/parts/contents/windows10-eol/icon_shop.svg");
		background-position: top -2px left;
		background-repeat: no-repeat;
		content: "";
		display: inline-block;
		height: 38px;
		margin-right: 0.25em;
		vertical-align: middle;
		width: 42px;
	}
}
@media screen and (max-width:390px) { 
	.page {
		font-size: 0.85em;
		padding-bottom: 2em;
	}
	.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 img {
		height: auto;
		max-width: 100%;
		vertical-align: bottom;
	}
	.page .pc {
		display: none;
	}
	.page > div {
		margin-top: 2.5em;
	}
	.page .intro {
		background-color: var(--page-yellow);
		background-image: url("/parts/contents/windows10-eol/ttl_bg_01.png"), url("/parts/contents/windows10-eol/ttl_bg_02.png");
		background-position: top left, bottom left;
		background-repeat: no-repeat, no-repeat;
		background-size: contain;
		margin-top: 0;
		padding-bottom: 1.25em;
		width: 100%;
	}
	.page .intro h2 {
		margin: 0;
		padding: 1.25em 0 0 0;
	}
	.page .intro .countdown {
		background-color: #FFF;
		font-weight: bold;
		margin-inline: auto;
		min-height: 5em;
		padding: 0.5em 0;
		width: 92%;
	}
	.page .intro .countdown > div p {
		line-height: 1;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.page .intro .countdown > div p:nth-of-type(1) {
		font-size: 1.25em;
		line-height: 0.8;
	}
	.page .intro .countdown > div p:nth-of-type(2) {
		line-height: 1.75em;
		font-size: 1.85em;
		margin-bottom: 0.25em;
	}
	.page .intro .countdown > div p img {
		vertical-align: middle;
	}
	.page .intro .countdown > div p img:last-of-type {
		margin-right: 0.15em;
	}
	.page .intro .countdown .num {
		color: var(--page-red);
		font-size: 1.55em;
		line-height: 0.75;
		padding: 0 0.05em 0 0.2em;
	}
	.page .about {
		margin-inline: auto;
		width: 92%;
	}
	.page .about h3 {
		align-content: center;
		display: flex;
		flex-wrap: wrap;
		font-size: 1.35em;
		margin-bottom: 0.5em;
	}
	.page .about h3::before {
		background-image: url("/parts/contents/windows10-eol/icon_caution_red.svg");
		background-position: center left;
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: inline-block;
		height: 1.35em;
		margin-right: 0.35em;
		width: 1.35em;
	}
	.page .about h3 strong {
		background-image: linear-gradient(transparent 65%, var(--page-yellow) 65%);
		background-repeat: repeat-x;
		background-size: 200% 1.2em;
	}
	.page .about p {
	}
	.page .about p strong {
		color: var(--page-red);
	}
	.page .risk {
		width: 100%;
	}
	.page .risk > p:nth-of-type(1) {
		margin-inline: auto;
		width: 100%;
	}
	.page .risk .detail {
		background-color: var(--page-dark-blue);
		color: #FFF;
		padding: 1.25em 4%;
	}
	.page .risk .detail::after {
		--width: 3em;
		background-color: var(--page-dark-blue);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		content: "";
		display: block;
		height: 1.5em;
		left: 50%;
		margin-left: calc(var(--width) / 2 * -1);
		margin-top: -1px;
		position: absolute;
		top: 100%;
		width: var(--width);
	}
	.page .risk .case {
	}
	.page .risk .case > div {
		align-items: center;
		background-color: #FFF;
		border-radius: 0.8em;
		display: flex;
		justify-content: center;
		margin-top: 0.75em;
		padding: 0.75em 0;
	}
	.page .risk .icon {
		align-content: center;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		height: 3em;
		margin-right: 0.5em;
	}
	.page .risk .case > div:nth-of-type(1) .icon {
		width: 3.5em;
	}
	.page .risk .detail .case > div:nth-of-type(2) .icon {
		width: 4em;
	}
	.page .risk .detail .case > div:nth-of-type(3) .icon {
		width: 4.5em;
	}
	.page .risk .case dt {
		color: var(--page-dark-blue);
		font-size: 1.25em;
		font-weight: bold;
		line-height: 1.3;
		margin: 0.25em 0 0 0;
		padding: 0;
		text-align: center;
	}
	.page .risk .case dd {
		color: var(--page-black);
		margin: 0.25em 0 0 0;
		padding: 0;
		text-align: center;
	}
	.page .reason {	
		margin-top: 3em;
	}
	.page .reason .detail {
		background-color: #eaf4ff;
		margin-inline: auto;
		margin-top: 1.5em;
		padding: 1.25em 4%;
		width: 92%;
	}
	.page .reason .detail > div {
		padding-bottom: 1em;
	}
	.page .reason .detail > div:last-of-type {
		padding-bottom: 0;
	}
	.page .reason .detail > div:last-of-type {
	}
	.page .reason .detail > div > p {
		background-color: var(--page-dark-blue);
		color: #FFF;
		font-weight: bold;
		line-height: 1;
		padding: 0.35em 0;
		text-align: center;
	}
	.page .reason .detail dt {
		color: var(--page-dark-blue);
		font-size: 1.45em;
		font-weight: bold;
		margin: 0.55em 0 0.25em 0;
		padding: 0;
		text-align: center;
	}
	.page .reason .detail dd {
		margin: 0;
		padding: 0;
	}
	.page .incident {
		margin-inline: auto;
		width: 92%;
	}
	.page .incident h4 {
		background-color: var(--page-black);
		color: #FFF;
		margin: 0;
		padding: 0.35em 0;
		text-align: center;
	}
	.page .incident h4::before {
		background-image: url("/parts/contents/windows10-eol/icon_caution_yellow.svg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: block;
		height: 2em;
		width: 100%;
	}
	.page .incident .detail {
		background-color: var(--page-yellow);
		padding: 1.5em 4% 0 4%;
	}
	.page .incident .detail > div {
		margin: 0 0 0.5em 0;
	}
	.page .incident .detail > div > p:nth-of-type(1) {
		color: var(--page-dark-blue);
		font-size: 1.15em;
		font-weight: bold;
		text-align: center;
	}
	.page .incident .detail > div > p:nth-of-type(2) {
		margin-top: 0.5em;
	}
	.page .incident .img {
		display: flex;
		justify-content: center;
	}
	.page .incident .img img {
		width: 60%;
	}
	.page .chart h3 {
		margin: 0;
		padding: 0;
	}
	.page .chart .fig {
		margin-inline: auto;
		width: 92%;
	}
	.page .chart .fig ul {
		bottom: 1.35em;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		list-style: none;
		right: 0;
		left: 0;
		margin: 0 auto;
		padding: 0;
		position: absolute;
		width: 83%;
	}
	.page .chart .fig li {
		width: 33%;
	}
	.page .chart .option {
		margin-inline: auto;
		margin-top: 5em;
		width: 92%;
	}
	.page .chart .option .box {
		margin-top: 3em;
		padding: 1.35em 4% 1em 4%;
	}
	.page .chart .option .box:nth-of-type(1) {
		background-color: #fdf1eb;
	}
	.page .chart .option .box:nth-of-type(2) {
		background-color: #edf4fd;
	}
	.page .chart .option .box:nth-of-type(3) {
		background-color: #ecf7eb;
	}
	.page .chart .option .icon {
		left: -3%;
		position: absolute;
		top: -1em;
		width: 25%;
	}
	.page .chart .option .box > div:nth-of-type(1) {
		margin-bottom: 1em;
		padding-left: 22%;
	}
	.page .chart .option .box > div:nth-of-type(2) > p {
		text-align: center;
	}
	.page .chart .option .box > div:nth-of-type(2) > p img {
		width: 70%;
	}
	.page .chart .option .box > div:nth-of-type(2) > div {
		margin-top: 1.5em;
	}
	.page .chart .option .price {
		margin-bottom: 1em;
	}
	.page .chart .option .price::after {
		content: "";
	}
	.page .chart .option .apply {
		border-bottom-style: solid;
		border-bottom-width: 2px;
	}
	.page .chart .option .apply:hover {
	}
	.page .chart .option .box:nth-of-type(1) .apply {
		background-color: var(--page-orange);
		border-bottom-color: #c73000;
	}
	.page .chart .option .box:nth-of-type(2) .apply {
		background-color: var(--page-blue);
		border-bottom-color: #004093;
	}
	.page .chart .option .box:nth-of-type(3) .apply {
		background-color: var(--page-green);
		border-bottom-color: #318623;
	}
	.page .chart .option .apply a {
		color: #FFF;
		display: flex;
		font-size: 1.15em;
		font-weight: bold;
		justify-content: center;
		line-height: 1;
		padding: 0.55em 0;
		text-decoration: none;
		width: 100%;
	}
	.page .chart .option .apply a::after {
		content: "";
		background-image: url("/parts/contents/windows10-eol/arrow.svg");
		background-repeat: no-repeat;
		background-size: contain;
		display: block;
		height: 1em;
		margin-left: 0.5em;
		width: 1em;
	}
	.page .contact {
		margin-inline: auto;
		width: 92%;
	}
	.page .contact h3 {
		background-color: transparent;
		border-left: 0;
		display: block;
		font-size: 1.35em;
		font-weight: bold;
		line-height: 1;
		margin: 0 0 0.5em 0;
		padding: 0;
		text-align: center;
	}
	.page .contact h3::before,
	.page .contact h3::after {
		background-image: url("/parts/contents/windows10-eol/border_bg.jpg");
		background-position: center;
		background-repeat: repeat-x;
		content: "";
		display: block;
		height: 0.3em;
		margin: 0.5em 0;
		width: 100%;
	}
	.page .contact h3 + p {
		margin-top: 1.25em;
		text-align: left;
	}
	.page .contact .tel {
		margin-bottom: 2.25em;
	}
	.page .contact .shop {
		background-color: var(--page-blue);
		border-bottom: solid 4px #1a4aa4;
		border-radius: 0.8em;
		height: 4em;
		margin: 0 auto;
		width: 80%;
	}
	.page .contact .shop:hover {
	}
	.page .contact .shop a {
		color: #FFF;
		display: block;
		font-size: 1.25em;
		font-weight: bold;
		padding: 0.55em 0;
		text-align: center;
		text-decoration: none;
	}
	.page .contact .shop a::before {
		background-image: url("/parts/contents/windows10-eol/icon_shop.svg");
		background-position: center;
		background-repeat: no-repeat;
		content: "";
		display: inline-block;
		height: 2em;
		vertical-align: middle;
		width: 3em;
	}
}