@charset "utf-8";
:root {
	--page-dark-blue: #0A2B70;
	--page-red: #D10000;
	--page-green: #158300;
	--page-light-green: #F3F8E1;
	--page-inner-width-pc: 655px;
	--page-inner-width-sp: 92%;
	--page-transition: all 0.3s 0s ease;
}
.page a {
	color: var(--page-blue);
}
@media screen and (min-width:391px) {
	.page {
		font-size: 1.15em;
		padding: 0 0 2em 0;
		margin: 0 auto;
		width: 940px;
	}
	.page p {
		margin: 1em 0 0 0;
		padding: 0;
	}
	.page p:first-of-type {
		margin: 0;
	}
	.page .sp {
		display: none;
	}
	.page strong {
		color: var(--page-red);
	}
	.page .intro .main {
		margin: 0 0 1.5em 0;
		padding: 0;
		text-align: center;
	}
	.page .intro .case {
		text-align: center;
	}
	.page .intro .arrow {
		margin-top: 1.5em;
		text-align: center;
	}
	.page .intro .title * {
		text-align: center;
	}
	.page .intro .title h2 {
		color: var(--page-green);
		font-size: 3em;
		margin: 0;
		padding: 0;
	}
	.page .intro .title .sub {
		font-size: 2em;
		font-weight: bold;
		line-height: 1;
		margin-top: 0.5em;
		text-align: center;
	}
	.page .intro .title + p {
		text-align: center;
		font-size: 1.25em;
		font-weight: bold;
		margin: 0;
	}
	.page .intro .item {
		margin: 1.5em 0 0 0;
		text-align: center;
	}
	.page .price {
		margin: 2em 0 0 0 !important;
		text-align: center;
	}
	.page .price::after {
		content: "";
	}
	.page .device {
		margin: 2em 0;
		text-align: center;
	}
	.page .point {
		margin: 4em auto 0 auto;
		width: 730px;
	}
	.page .point h3 {
		font-size: 2.85em;
		line-height: 1;
		margin: 0 0 0.75em 0;
		padding: 0;
		text-align: center;
	}
	.page .point h3 img {
		vertical-align: bottom;
	}
	.page .block {
		background-color: var(--page-light-green);
		border: solid 2px var(--page-green);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 3em 0 0 0;
		padding: 0 0 30px 0;
	}
	.page .block .num {
		background-color: var(--page-green);
		display: inline-block;
		height: 75px;
		margin: 0;
		padding: 10px;
		vertical-align: top;
		width: 75px;
	}
	.page .block .num::before {
		background-position: top center;
		background-repeat: no-repeat;
		content: "";
		display: block;
		height: 90%;
		margin: 0 auto;
		padding: 0;
		width: 90%;
	}
	.page .block:nth-of-type(1) .num::before {
		background-image: url("/parts/contents/security_apps/num01.svg");
	}
	.page .block:nth-of-type(2) .num::before {
		background-image: url("/parts/contents/security_apps/num02.svg");
	}
	.page .block:nth-of-type(3) .num::before {
		background-image: url("/parts/contents/security_apps/num03.svg");
	}
	.page .block .overview {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 0;
		padding: 30px 40px 0 0;
		width: 85%;
	}
	.page .block .overview .img {
		width: 15%;
	}
	.page .block .overview > div {
		width: 85%;
	}
	.page .block .overview > div p:nth-of-type(1) {
		color: var(--page-dark-blue);
		font-weight: bold;
		font-size: 1.45em;
		line-height: 1;
		margin: 0;
		padding: 0 0 0.5em 0;
	}
	.page .block .overview h4 {
		font-size: 2.05em;
		line-height: 1;
		margin: 0;
		padding: 0;
	}
	.page .block .rating {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 2em auto 0 auto;
		width: var(--page-inner-width-pc);
	}
	.page .block .rating h5 {
		background-color: var(--page-green);
		color: #FFF;
		font-size: 1.25em;
		font-weight: bold;
		margin: 0;
		padding: 0.2em 0;
		text-align: center;
		width: 100%;
	}
	.page .block .rating > div {
		width: 32%;
	}
	.page .block .rating .img {
		align-items: center;
		display: flex;
		justify-content: center;
		height: 130px;
		text-align: center;
	}
	.page .block .rating .text {
		font-weight: bold;
	}
	.page .block .rating .text + p {
		margin: 0;
	}
	.page .block .innerbox {
		background-color: #FFF;
		border: solid 1px var(--page-dark-blue);
		margin: 15px auto 0 auto;
		width: var(--page-inner-width-pc);
	}
	.page .block .feature {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.page .block .feature > div {
		width: 33.3%;
		border-right: solid 1px #0A2B70;
		padding: 10px;
	}
	.page .block .feature > div:nth-of-type(3) {
		border-right: none;
	}
	.page .block .feature > div::before {
		background-color: var(--page-dark-blue);
		color: #FFF;
		display: block;
		font-size: 1.1em;
		font-weight: bold;
		padding: 0.15em 0;
		text-align: center;
	}
	.page .block .feature > div:nth-of-type(1)::before {
		content: "POINT.1";
	}
	.page .block .feature > div:nth-of-type(2)::before {
		content: "POINT.2";
	}
	.page .block .feature > div:nth-of-type(3)::before {
		content: "POINT.3";
	}
	.page .block .feature h5 {
		font-size: 1.1em;
		line-height: 1.5;
		padding: 0 0.25em;
		margin: 10px 0;
	}
	.page .block .feature .img {
		text-align: center;
	}
	.page .block .feature .img + p {
		font-size: 0.85em;
		padding: 0 0.25em;
	}
	.page .block .point {
		padding: 17px;
		margin: 1em auto 0 auto;
	}
	.page .block .point h5 {
		color: var(--page-dark-blue);
		font-size: 1.75em;
		height: auto;
		margin: 0;
		text-align: center;
		padding: 0;
	}
	.page .block .point ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0;
		padding: 0;
	}
	.page .block .point li {
		align-items: center;
		background-color: var(--page-dark-blue);
		border-radius: 10px;
		color: #FFF;
		display: flex;
		font-size: 1.1em;
		font-weight: bold;
		justify-content: center;
		line-height: 145%;
		margin: 0;
		padding: 10px 0;
		text-align: center;
		width: 32%;
	}
	.page .summary {
		font-size: 2.25em;
		line-height: 130%;
		margin: 1em 0 0 0 !important;
		text-align: center;
		font-weight: bold;
	}
	.page .summary span {
		background-color: var(--page-green);
		display: inline-block;
		height: 47px;
		margin: 0 8px 8px 0;
		padding: 5px;
		text-align: center;
		vertical-align: bottom;
		width: 47px;
	}
	.page .summary span img {
		height: 33px;
		width: auto;
	}
	.page .application {
		margin: 1em auto 0 auto;
		text-align: center;
		width: var(--page-inner-width-pc);
	}
	.page .application h3 {
		color: var(--page-red);
		font-size: 1.5em;
		padding: 0;
		margin: 0 0 1em 0;
	}
	.page .application .btn {
		background-color: #D10000;
		border-radius: 12px;
		-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
		box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
		border-bottom: solid 5px #8E0000;
		display: block;
		font-size: 1.85em;
		font-weight: bold;
		margin: -5px auto 0 auto;
		padding: 0;
		width: 60%;
	}
	.page .application .btn:hover {
		border-bottom: none;
		margin-top: 0;
	}
	.page .application .btn a {
		color: #FFF;
		display: block;
		text-align: center;
		text-decoration: none;
		padding: 0.35em 0;
	}
	.page .application .btn + p {
		font-size: 1.9em;
		font-weight: bold;
		margin: 30px 0 25px 0;
		padding: 0;
		text-align: center;
	}
	.page .application .btn + p:before,
	.page .application .btn + p:after {
		border-bottom: solid 1px #000;
		border-top: solid 1px #000;
		content: '';
		height: 1px;
		position: absolute;
		top: calc(50% - 3px);
		width: 260px;
	}
	.page .application .btn + p:before {
		left: 0;
	}
	.page .application .btn + p:after {
		right: 0;
	}
	.page .youtube {
		height: 315px;
		margin: 20px auto 0 auto;
		text-align: center;
		width: 550px;
	}
}
@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.reserve {
		margin: 0 auto;
		width: calc(100vw * 0.9);
	}
	.page h2 {
		margin: 0 0 2em 0;
	}
	.page strong {
		color: var(--page-red);
	}
	.page .intro .main {
		margin: 0 0 1.5em 0;
		padding: 0;
	}
	.page .intro .arrow {
		margin-top: 1.5em;
		text-align: center;
	}
	.page .intro .title * {
		text-align: center;
	}
	.page .intro .title h2 {
		color: var(--page-green);
		font-size: 1.85em;
		margin: 0;
		padding: 0;
	}
	.page .intro .title .sub {
		font-size: 1.15em;
		font-weight: bold;
		line-height: 1;
		margin-top: 0.5em;
		text-align: center;
	}
	.page .intro .title + p {
		font-size: 0.95em;
		font-weight: bold;
		margin: 0.25em auto 0 auto;
		width: var(--page-inner-width-sp);
	}
	.page .intro .item {
		margin: 1.5em auto 0 auto;
		width: var(--page-inner-width-sp);
	}
	.page .price {
		margin: 1em auto !important;
		width: var(--page-inner-width-sp);
	}
	.page .price::after {
		content: "";
	}
	.page .device {
		margin: 0 auto;
		width: var(--page-inner-width-sp);
	}
	.page .device + .note {
		margin: 1em auto;
		width: var(--page-inner-width-sp);
	}
	.page .point {
		margin: 2em 0 0 0;
	}
	.page .point h3 {
		font-size: 1.75em;
		line-height: 1;
		margin: 0 0 0.75em 0;
		padding: 0;
		text-align: center;
	}
	.page .point h3 img {
		vertical-align: bottom;
		width: 1.5em;
	}
	.page .block {
		background-color: var(--page-light-green);
		border: solid 2px var(--page-green);
		margin: 1em auto 0 auto;
		padding: 0 0 30px 0;
		width: var(--page-inner-width-sp);
	}
	.page .block .num {
		background-color: var(--page-green);
		height: 2.5em;
		margin: 0;
		padding: 0.5em 0;
		vertical-align: top;
		width: 100%;
	}
	.page .block .num::before {
		background-position: top center;
		background-repeat: no-repeat;
		content: "";
		display: block;
		height: 90%;
		margin: 0;
		padding: 0;
	}
	.page .block:nth-of-type(1) .num::before {
		background-image: url("/parts/contents/security_apps/num01.svg");
	}
	.page .block:nth-of-type(2) .num::before {
		background-image: url("/parts/contents/security_apps/num02.svg");
	}
	.page .block:nth-of-type(3) .num::before {
		background-image: url("/parts/contents/security_apps/num03.svg");
	}
	.page .block .overview {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 0 auto;
		padding: 2em 0 0 0;
		width: var(--page-inner-width-sp);
	}
	.page .block .overview .img {
		width: 15%;
	}
	.page .block .overview > div {
		width: 85%;
	}
	.page .block .overview > div p:nth-of-type(1) {
		color: var(--page-dark-blue);
		font-weight: bold;
		font-size: 1em;
		line-height: 1;
		margin: 0;
		padding: 0 0 0.5em 0;
	}
	.page .block .overview h4 {
		font-size: 1.55em;
		line-height: 1;
		margin: 0;
		padding: 0;
	}
	.page .block .rating {
		margin: 1em auto 0 auto;
		width: var(--page-inner-width-sp);
	}
	.page .block .rating h5 {
		background-color: var(--page-green);
		color: #FFF;
		font-size: 1em;
		font-weight: bold;
		margin: 0;
		padding: 0.2em 0;
		text-align: center;
		width: 100%;
	}
	.page .block .rating > div {
		align-items: stretch;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 1em;
	}
	.page .block .rating .img {
		align-items: center;
		display: flex;
		justify-content: center;
		max-height: 5em;
		text-align: center;
		width: 25%;
	}
	.page .block .rating .img img {
		max-height: 100%;
		width: auto;
	}
	.page .block .rating .img + div {
		width: 72%;
	}
	.page .block .rating .text {
		font-weight: bold;
	}
	.page .block .rating .text + p {
		margin: 0;
	}
	.page .block .innerbox {
		background-color: #FFF;
		border: solid 1px var(--page-dark-blue);
		margin: 15px auto 0 auto;
		width: var(--page-inner-width-sp);
	}
	.page .block .feature {}
	.page .block .feature > div {
		display: flex;
		flex-wrap: wrap;
		border-bottom: solid 1px #0A2B70;
		padding: 10px;
	}
	.page .block .feature > div:nth-of-type(3) {
		border-bottom: none;
	}
	.page .block .feature > div::before {
		background-color: var(--page-dark-blue);
		color: #FFF;
		display: block;
		font-size: 1.1em;
		font-weight: bold;
		padding: 0.15em 0;
		text-align: center;
		width: 100%;
	}
	.page .block .feature > div:nth-of-type(1)::before {
		content: "POINT.1";
	}
	.page .block .feature > div:nth-of-type(2)::before {
		content: "POINT.2";
	}
	.page .block .feature > div:nth-of-type(3)::before {
		content: "POINT.3";
	}
	.page .block .feature h5 {
		font-size: 1.1em;
		line-height: 1.5;
		order: 2;
		padding: 0;
		margin: 0 0 0.25em 0;
		width: 100%;
	}
	.page .block .feature .img {
		margin: 0.5em 0 0 0;
		text-align: center;
		order: 1;
		width: 100%;
	}
	.page .block .feature .img + p {
		margin: 0;
		order: 3;
		padding: 0;
	}
	.page .block .point {
		padding: 0.85em 0;
		margin: 1em auto 0 auto;
	}
	.page .block .point h5 {
		color: var(--page-dark-blue);
		font-size: 1.2em;
		height: auto;
		margin: 0;
		text-align: center;
		padding: 0;
	}
	.page .block .point ul {
		margin: 0.35em auto 0 auto;
		padding: 0;
		width: var(--page-inner-width-sp);
	}
	.page .block .point li {
		align-items: center;
		background-color: var(--page-dark-blue);
		border-radius: 10px;
		color: #FFF;
		display: flex;
		font-size: 1;
		font-weight: bold;
		justify-content: center;
		line-height: 145%;
		margin: 0.5em 0 0 0;
		padding: 0.3em 0;
		text-align: center;
	}
	.page .block .point li:first-of-type {
		margin-top: 0;
	}
	.page .summary {
		font-size: 1.55em;
		line-height: 130%;
		margin: 1em 0 0 0 !important;
		text-align: center;
		font-weight: bold;
	}
	.page .summary span {
		background-color: var(--page-green);
		display: inline-block;
		height: 35px;
		margin: 0 8px 8px 0;
		padding: 0;
		text-align: center;
		vertical-align: bottom;
		width: 35px;
	}
	.page .summary span img {
		height: 28px;
		width: auto;
	}
	.page .application  {
		margin: 1em auto 0 auto;
		width: var(--page-inner-width-sp);
	}
	.page .application h3 {
		color: var(--page-red);
		text-align: center;
		font-size: 1.25em;
		padding: 0;
		margin: 0 0 1em 0;
	}
	.page .application .btn {
		background-color: #D10000;
		border-radius: 12px;
		-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
		box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
		border-bottom: solid 5px #8E0000;
		display: block;
		font-size: 1.35em;
		font-weight: bold;
		margin: 0 auto;
		padding: 0;
		width: 80%;
	}
	.page .application .btn a {
		color: #FFF;
		display: block;
		padding: 0.25em;
		text-align: center;
		text-decoration: none;
	}
	.page .application .btn + p {
		font-size: 1.25em;
		font-weight: bold;
		margin: 30px 0 25px 0;
		padding: 0;
		text-align: center;
	}
	.page .application .btn + p:before,
	.page .application .btn + p:after {
		border-bottom: solid 1px #000;
		border-top: solid 1px #000;
		content: '';
		height: 1px;
		position: absolute;
		top: calc(50% - 3px);
		width: 35%;
	}
	.page .application .btn + p:before {
		left: 0;
	}
	.page .application .btn + p:after {
		right: 0;
	}
	.page .youtube {
		height: 15em;
		margin: 20px auto 0 auto;
		text-align: center;
		width: var(--page-inner-width-sp);
	}
}