@charset "Shift_JIS";

/* reset  */
.PageContents {
	overflow: hidden;
	* {
		box-sizing: border-box;
	}
	h2 {
		padding: 0;
		margin: 0;
		background: none;
	}
	a {		
		&:link,
		&:visited,
		&:hover,
		&:active {
			color: initial;
			text-decoration: none;
		}
	}
}

/* animation  */
.js-fade-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .js-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* common  */
:root {
	--inner-width: 965px;
	--security-main-color: #004596;
	--security-pale-color: #96C5FD;
	--security-bg-color: #222222;
	--security-fontsize-base: 0.9rem;
}
.sp-only {
	display: none;
}
.mt15 {
	margin-top: 15px;
}
.mt60 {
	margin-top: 60px;
}
.PageSecurityButton {
	position: relative;
	display: flex;
	align-items: center;
	width: 210px;
	height: 57px;
	padding: 3px 27px 0 27px;
	color: #fff!important;
	font-size: 0.875rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.28;
	letter-spacing: 0.1em;
	border: 1px solid #fff;
	border-radius: 30px;
	transition: all 0.3s ease-in-out;
	&::after {
		position: absolute;
		right: 23px;
		top: 50%;
		aspect-ratio: 1;
		width: 13px;
		background: url(/image/page/keyword_security/security_measures/icon_arrow-right.svg) no-repeat center center/contain;
		transform: translateY(-50%);
		filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
		content: '';
	}
	&:hover,
	&:focus,
	&:active {
		color: #222!important;
		background: #fff;
		&::after {
			filter: initial;
		}
	}
	&.--black {
		color: #222!important;
		border-color: #737373;
		&::after {
			filter: initial;
		}
		&:hover,
		&:focus,
		&:active {
			color: #fff!important;
			background: #222;
			&::after {
				filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
			}
		}
	}
	&.--security {
		padding-left: 32px;
	}
	&.--va {
		width: 308px;
		padding-left: 35px;
		letter-spacing: 0.12em;
	}
	&.--netstable {
		width: 264px;
	}
}
html:has(dialog[open]),
body:has(dialog[open]) {
	overflow: hidden;
}


/* section  */
.FirstView {
	position: relative;
	background-color: var(--security-bg-color);
	.FirstViewImage {
		display: block;
		img {
			width: 100%;
			height: auto;
		}
	}
	.FirstViewContainer {
		position: absolute;
		top: 28%;
		left: 50.7%;
		width: 62.29%;
		transform: translateX(-50%);
	}
	.FirstViewTitle {
		img {
			width: 100%;
			height: auto;
		}
	}
}

.PageSecurityIntroduction {
	padding-bottom: 118px;
	color: #fff;
	text-align: center;
	background-color: var(--security-bg-color);
	.PageSecurityIntroductionText {
		font-size: 1.75rem;
		font-weight: 300;
		line-height: 1.66;
		strong {
			color: #fff;
			font-size: 3.125rem;
			font-weight: 300;
		}
	}
}

.PageSecurityAbout {
	position: relative;
	padding-bottom: 80px;
	color: #fff;
	background: var(--security-bg-color);
	&::before {
		position: absolute;
		right: calc(50% - 645px);
		bottom: 174px;
		width: 91px;
		height: 625px;
		background: url(/image/page/keyword_security/security_measures/bg_txt_security.svg) no-repeat center center/contain;
		content: '';
	}
	.PageSecurityAboutMv {
		position: absolute;
		left: 0;
		top: 0;
		width: calc( (100vw - var(--inner-width)) / 2 + var(--inner-width) * (1 - 0.615) );
		height: 602px;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.PageSecurityAboutContainer {
		padding-left: 47.5%;
	}
	.PageSecurityAboutTitle {
		margin: -3px 0 50px 0;
		color: #96C5FD;
		font-weight: 700;
		line-height: 3;
		letter-spacing: 0.1em;
		span {
			padding: 0;
			color: #96C5FD;
			font-size: 1.5rem;
			font-weight: 700;
			font-family: "Noto Sans JP", "Yu Gothic UI", "Noto Sans" ,sans-serif;
			background: none;
		}
	}
	.PageSecurityAboutHeadline {
		margin-bottom: 43px;
		font-size: 1.25rem;
		font-weight: 700;
		letter-spacing: 0.05em;
	}
	.PageSecurityAboutText {
		margin-bottom: 54px;
		font-size: 0.875rem;
		line-height: 2.3;
	}
	.PageSecurityAboutButtons {
		display: flex;
		gap: 30px;
	}
}

.PageSecurityNavi {
	margin: 40px 0 155px 0px;
	.PageSecurityNaviButtons {
		display: flex;
		justify-content: center;
		gap: 35px;
	}
	.PageSecurityNaviButton {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 405px;
		height: 99px;
		padding-right: 47px;
		color: var(--security-main-color)!important;
		font-size: 1.25rem;
		font-weight: 700;
		text-align: center;
		line-height: 1.8;
		letter-spacing: 0.09em;
		border: 1px solid var(--security-main-color);
		border-radius: 50px;
		box-shadow: 0 4px 4px rgba(0,0,0,.15);
		transition: all 0.3s ease-in-out;
		&::after {
			position: absolute;
			right: 35px;
			top: calc(57% - 15px);
			width: 23px;
			height: 30px;
			background: url(/image/page/keyword_security/security_measures/icon_arrow-down.svg) no-repeat center center/contain;
			content: '';
		}
		small {
			display: block;
			font-size: 0.875rem;
			font-weight: 400;
		}
		&:hover,
		&:focus,
		&:active {
			color: #fff!important;
			background-color: var(--security-main-color);
			&::after {
				filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
			}
		}
	}
}

.PageSecurityImportance {
	position: relative;
	padding-bottom: 83px;
	&::before {
		position: absolute;
		left: calc(50% - 646px);
		top: 420px;
		width: 91px;
		height: 831px;
		background: url(/image/page/keyword_security/security_measures/bg_txt_importance.svg) no-repeat center center/contain;
		content: '';
	}
	.PageSecurityImportanceTitle {
		margin-bottom: 72px;
		color: var(--security-main-color);
		font-size: 1.5rem;
		font-weight: 700;
		text-align: center;
		letter-spacing: 0.1em;
		&::after {
			display: block;
			width: 47px;
			height: 2px;
			margin: 28px auto 0 auto;
			background-color: var(--security-main-color);
			content: '';
		}
	}
	.PageSecurityImportanceIntroduction {
		position: relative;
		min-height: 354px;
		margin-bottom: 88px;
		.PageSecurityImportanceIntroductionImage {
			position: absolute;
			top: 0;
			right: 0;
			width: calc( (100vw - var(--inner-width)) / 2 + var(--inner-width) * (1 - 0.562) );
			height: 354px;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.PageSecurityImportanceIntroductionContents {
			padding: 40px 46% 40px 75px;
		}
		.PageSecurityImportanceIntroductionTitle {
			margin-bottom: 61px;
			color: var(--security-main-color);
			font-size: 1.25rem;
			font-weight: 700;
			letter-spacing: 0.08em;
		}
		.PageSecurityImportanceIntroductionText {
			font-size: var(--security-fontsize-base);
			line-height: 2.07;
			letter-spacing: 0.05em;
		}
	}
	.PageSecurityImportanceBackground {
		margin-bottom: 107px;
		.PageSecurityImportanceBackgroundTitle {
			margin-bottom: 17px;
			color: var(--security-main-color);
			font-weight: 700;
			text-align: center;
			letter-spacing: 0.07em;
			font-size: 1.25rem;
			span {
				display: inline-block;
				padding: 0 5px;
				background: linear-gradient(to bottom, transparent 60%, #D9D9D9 60%, #D9D9D9 100%);
			}
		}
		.PageSecurityImportanceBackgroundText {
			font-size: var(--security-fontsize-base);
			text-align: center;
			line-height: 2;
			letter-spacing: 0.05em;
		}
	}
	.PageSecurityImportancePoint {
		display: flex;
		flex-direction: column;
		row-gap: 5px;
		margin: 25px 0;
		.PageSecurityImportancePointHeader {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			padding: 13px 35px;
			color: #fff;
			background-color: var(--security-main-color);
			border: none;
			cursor: pointer;
			&::before {
				position: absolute;
				top: 50%;
				right: 52px;
				aspect-ratio: 23/13;
				width: 23px;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='13' viewBox='0 0 23 13' fill='none'%3E%3Cpath d='M0.689699 0.724121L11.1897 10.7241L21.6897 0.724123' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				background-position: center center;
				background-size: contain;
				transform: translateY(-50%);
				transition: all .3s;
				content: '';
			}
			&.is-open {
				&::before {
					transform: rotate(180deg) translateY(50%);
				}
			}
		}
		.PageSecurityImportancePointNum {
			flex-shrink: 0;
			margin-right: 40px;
			padding-right: 40px;
			font-size: 1.125rem;
			font-weight: 700;
			letter-spacing: 0.1em;
			border-right: 1px solid #fff;
			strong {
				color: #fff;
				font-size: 1.5rem;
				font-weight: 700;
			}
		}
		.PageSecurityImportancePointTitle {
			padding-right: 50px;
			font-size: 1.125rem;
			font-weight: 700;
			letter-spacing: 0.06em;
		}
		.PageSecurityImportancePointContents {
			padding: 20px 97px 21px 97px;
			font-size: var(--security-fontsize-base);
			background-color: #F4F4F4;
			&.--point-01 {
				background: url(/image/page/keyword_security/security_measures/icon_point-01.svg) no-repeat right 5px center/124px auto #F4F4F4;
			}
			&.--point-02 {
				background: url(/image/page/keyword_security/security_measures/icon_point-02.svg) no-repeat right 18px center/110px auto #F4F4F4;
			}
			&.--point-03 {
				background: url(/image/page/keyword_security/security_measures/icon_point-03.svg) no-repeat right 12px top 60%/110px auto #F4F4F4;
			}
		}
		.PageSecurityImportancePointText {
			line-height: 1.9;
			letter-spacing: 0.05em;
		}
	}
	.PageSecurityImportanceRisk {
		.PageSecurityImportanceRiskTitle {
			margin-bottom: 20px;
			color: var(--security-main-color);
			font-size: 1.25rem;
			font-weight: 700;
			text-align: center;
			letter-spacing: 0.07em;
		}
		.PageSecurityImportanceRiskText {
			font-size: var(--security-fontsize-base);
			text-align: center;
			line-height: 2;
		}
		.PageSecurityImportanceRiskList {
			display: flex;
			justify-content: space-between;
			gap: 20px;
			margin-top: 30px;
			.PageSecurityImportanceRiskListButton {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				aspect-ratio: 1;
				padding-top: 10px;
				width: 293px;
				color: #fff;
				font-size: 1.25rem;
				font-weight: 700;
				text-align: center;
				line-height: 1.8;
				letter-spacing: 0.05em;
				background-color: var(--security-main-color);
				border-radius: 50%;
				border: none;
				cursor: pointer;
				&::before {
					position: absolute;
					left: 10px;
					top: 10px;
					aspect-ratio: 1;
					width: 71px;
					border: 3px solid #fff;
					background-color: var(--security-main-color);
					border-radius: 50%;
					pointer-events: none;
					content: '';
				}
				&::after {
					position: absolute;
					right: 0;
					bottom: 7px;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 70px;
					height: 70px;
					padding-bottom: 4px;
					color: #fff;
					font-size: 3rem;
					font-weight: 300;
					font-family: "Noto Sans JP", "Yu Gothic UI", "Noto Sans" ,sans-serif;
					line-height: 1;
					background-color: #96C5FD;
					border-radius: 50%;					
					box-sizing: border-box;
					content: '+';
				}
				&.--risk-01 {
					&::before {
						background: url(/image/page/keyword_security/security_measures/icon_risk-01.svg) no-repeat center center/49px auto var(--security-main-color);
					}
				}
				&.--risk-02 {
					&::before {
						background: url(/image/page/keyword_security/security_measures/icon_risk-02.svg) no-repeat center center/46px auto var(--security-main-color);
					}
				}
				&.--risk-03 {
					&::before {
						background: url(/image/page/keyword_security/security_measures/icon_risk-03.svg) no-repeat center center/62px auto var(--security-main-color);
					}
				}
			}
		}
	}
	.PageSecurityImportanceRiskModal {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 90%;
		max-width: 896px;
		margin: 0 auto;
		padding: 80px 40px 60px 40px;
		border-radius: 20px;
		background-color: #fff;
		transform: translate(-50%, -50%);
		border: none;
		z-index: 82;
		&::backdrop {
			background: rgba(115,115,115,.9);
		}
		&.--risk-01 {
			&::before {
				position: absolute;
				top: 30px;
				right: 43px;
				aspect-ratio: 1;
				width: 215px;
				background: url(/image/page/keyword_security/security_measures/icon_risk-01.svg) no-repeat center center/contain;
				filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(36%) hue-rotate(280deg) brightness(109%) contrast(70%);
				z-index: 1;
				pointer-events: none;
				content: '';
			}
		}
		&.--risk-02 {
			&::before {
				position: absolute;
				top: 23px;
				right: 39px;
				aspect-ratio: 1;
				width: 208px;
				background: url(/image/page/keyword_security/security_measures/icon_risk-02.svg) no-repeat center center/contain;
				filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(36%) hue-rotate(280deg) brightness(109%) contrast(70%);
				z-index: 1;
				pointer-events: none;
				content: '';
			}
		}
		&.--risk-03 {
			&::before {
				position: absolute;
				top: 29px;
				right: 55px;
				aspect-ratio: 238/202;
				width: 238px;
				background: url(/image/page/keyword_security/security_measures/icon_risk-03.svg) no-repeat center center/contain;
				filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(36%) hue-rotate(280deg) brightness(109%) contrast(70%);
				z-index: 1;
				pointer-events: none;
				content: '';
			}
		}
		.PageSecurityImportanceRiskModalClose {
			position: absolute;
			top: 6px;
			right: 17px;
			margin: 0;
			padding: 0;
			color: #B3B3B3;
			font-size: 3rem;
			border: none;
			background: none;
			cursor: pointer;
		}
		.PageSecurityImportanceRiskModalTitle {
			position: relative;
			margin-bottom: 15px;
			color: var(--security-main-color);
			font-size: 1.25rem;
			font-weight: 700;
			letter-spacing: 0.04em;
			z-index: 2;
		}
		.PageSecurityImportanceRiskModalText {
			position: relative;
			margin-bottom: 48px;
			letter-spacing: 0.07em;
			z-index: 2;
		}
		.PageSecurityImportanceRiskModalList {
			position: relative;
			display: flex;
			justify-content: space-between;
			gap: 20px;
			z-index: 2;
		}
		.PageSecurityImportanceRiskModalData {
			flex: 1;
			.PageSecurityImportanceRiskModalDataTitle {
				margin-bottom: 13px;
				padding: 2px 0;
				color: #fff;
				font-weight: 700;
				text-align: center;
				letter-spacing: 0.07em;
				background-color: var(--security-main-color);
			}
			.PageSecurityImportanceRiskModalDataText {
				padding: 0 8px;
				font-size: var(--security-fontsize-base);
				line-height: 1.9;
				letter-spacing: 0.04em;
			}
		}
	}
	.PageSecurityImportanceButtons {
		display: flex;
		justify-content: center;
		gap: 30px;
		margin-top: 92px;
	}
}

.PageSecurityStep {
	position: relative;
	padding: 90px 0 70px 0;
	background: #f4f4f4;
	&::before {
		position: absolute;
		right: calc(50% - 645px);
		top: 677px;
		width: 91px;
		height: 625px;
		background: url(/image/page/keyword_security/security_measures/bg_txt_step.svg) no-repeat center center/contain;
		content: '';
	}
	.PageSecurityStepTitle {
		margin-bottom: 90px;
		color: var(--security-main-color);
		font-size: 1.5rem;
		font-weight: 700;
		text-align: center;
		letter-spacing: 0.08em;
		&::after {
			display: block;
			width: 47px;
			height: 2px;
			margin: 27px auto 0 auto;
			background-color: var(--security-main-color);
			content: '';
		}
	}
	.PageSecurityStepIntroduction {
		position: relative;
		min-height: 354px;
		margin-bottom: 26px;
		.PageSecurityStepIntroductionImage {
			position: absolute;
			left: 0;
			top: 0;
			width: calc( (100vw - var(--inner-width)) / 2 + var(--inner-width) * (1 - 0.56) );
			height: 397px;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.PageSecurityStepIntroductionContents {
			min-height: 397px;
			padding: 27px 0 0 48%;
		}
		.PageSecurityStepIntroductionCopy {
			margin-bottom: 44px;
			font-size: 1.25rem;
			font-weight: 700;
			line-height: 1.7;
			letter-spacing: 0.05em;
		}
		.PageSecurityStepIntroductionList {
			margin-bottom: 30px;
			color: var(--security-main-color);
			font-size: 1.25rem;
			font-weight: 700;
			letter-spacing: 0.05em;
			li {
				margin-bottom: 2px;
			}
		}
		.PageSecurityStepIntroductionText {
			color: var(--security-main-color);
			font-size: 1.5rem;
			font-weight: 700;
			letter-spacing: 0.06em;
		}
		.PageSecurityStepIntroductionConclusion {
			position: relative;
			margin-top: 48px;
			padding-bottom: 46px;
			font-size: 1.25rem;
			font-weight: 700;
			text-align: center;
			letter-spacing: 0.04em;
			&::after {
				position: absolute;
				bottom: 0;
				left: 50%;
				aspect-ratio: 39/19;
				width: 44px;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='22' viewBox='0 0 41 22' fill='none'%3E%3Cpath d='M0.697756 0.716309L20.1978 19.7163L39.6978 0.716312' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				transform: translateX(-50%);
				filter: brightness(0) saturate(100%);
				content: ''
			}
		}
	}
	.PageSecurityStepTab {
		display: flex;
		gap: 6px;
		max-width: 899px;
		margin: 0 auto;
		.PageSecurityStepTabItem {
			width: 100%;
			max-width: 220px;
			padding: 24px 10px ;
			color: #fff;
			font-size: 1.125rem;
			text-align: center;
			font-weight: 700;
			background-color: #737373;
			border: none;
			cursor: pointer;
			span {
				display: inline-block;
				line-height: 1.8;
				&:first-of-type {
					display: block;
					margin-bottom: 32px;
					font-size: 1.25rem;
					line-height: 1;
				}
			}
			&.is-current {
				position: relative;
				max-width: 240px;
				margin: -10px;
				background-color: var(--security-main-color);
				z-index: 1;
				span:first-of-type {
					margin: -5px 0 40px 0;
				}
			}
		}
	}
	.PageSecurityStepContents {
		display: none;
		max-width: 899px;
		margin: 0 auto;
		padding: 52px 98px 45px 98px;
		background: #fff;
		.PageSecurityStepContentsHeader {
			position: relative;
			margin-bottom: 67px;
			&.--step-01 {
				padding-right: 250px;
				.PageSecurityStepContentImage {
					position: absolute;
					right: 0;
					top: 5px;
				}
			}
			&.--step-02 {
				padding-left: 168px;
				.PageSecurityStepContentsLead {
					margin: -5px -5px 0 13px;
				}
				.PageSecurityStepContentImage {
					position: absolute;
					left: 0;
					top: -4px;
				}
			}
			&.--step-03 {
				margin-bottom: 74px;
				padding-right: 210px;
				.PageSecurityStepContentsLead {
					margin: -5px 0 0 0;
				}
				.PageSecurityStepContentImage {
					position: absolute;
					right: 0;
					top: -5px;
				}
			}
			&.--step-04 {
				margin-bottom: 74px;
				padding-left: 293px;
				.PageSecurityStepContentsLead {
					margin: -8px -5px 0 0;
				}
				.PageSecurityStepContentImage {
					position: absolute;
					left: 0;
					top: 3px;
				}
			}
		}
		.PageSecurityStepContentsTitle {
			display: flex;
			margin-bottom: 55px;
			color: var(--security-main-color);
			font-size: 1.5rem;
			font-weight: 700;
			letter-spacing: 0.04em;
			span {
				margin-right: 1em;
			}
		}
		.PageSecurityStepContentsLead {
			margin-left: 20px;
			font-size: 1.25rem;
			font-weight: 700;
			letter-spacing: 0.05em;
		}		
		.PageSecurityStepContentsSubtitle {
			color: var(--security-main-color);
			font-size: 1.125rem;
			font-weight: 700;
			text-align: center;
			letter-spacing: 0.07em;
			span {
				display: inline-block;
				padding: 0 5px;
				background: linear-gradient(to bottom, transparent 60%, #D9D9D9 60%, #D9D9D9 100%);
			}
		}
		.PageSecurityStepContentsText {
			font-weight: 700;
			text-align: center;
			letter-spacing: 0.07em;
			small {
				display: inline-block;
				margin-top: 6px;
				font-size: var(--security-fontsize-base);
				font-weight: 400;
			}
			+ .PageSecurityStepContentsText {
				margin-top: 8px;
			}
		}
		.PageSecurityStepContentsList {
			display: flex;
			gap: 20px;
			margin: 59px 0 54px 0;
			.PageSecurityStepContentsListData {
				position: relative;
				flex: 1;
				&::before {
					position: absolute;
					top: -37px;
					left: 50%;
					aspect-ratio: 1;
					width: 60px;
					border: 3px solid #fff;
					border-radius: 50%;
					transform: translateX(-50%);
					background: var(--security-main-color);
					content: '';
				}
				&.--data-01 {
					&::before {
						background: url(/image/page/keyword_security/security_measures/icon_step-01.svg) no-repeat center center/44px auto var(--security-main-color);
					}
				}
				&.--data-02 {
					&::before {
						background: url(/image/page/keyword_security/security_measures/icon_step-02.svg) no-repeat center 40%/26px auto var(--security-main-color);
					}
				}
				&.--data-03 {
					&::before {
						background: url(/image/page/keyword_security/security_measures/icon_step-03.svg) no-repeat center center/10px auto var(--security-main-color);
					}
				}
				dt {
					padding: 35px 10px 10px 10px;
					color: #fff;
					font-size: 1.25rem;
					font-weight: 700;
					text-align: center;
					letter-spacing: .09em;
					background-color: var(--security-main-color);
				}
				dd {
					padding: 10px 20px;
					font-size: 0.875em;
					line-height: 1.5;
					letter-spacing: 0.07em;
					background-color: #F4F4F4;
				}
			}
		}
		.PageSecurityStepContentsBox {
			max-width: 556px;
			margin: 25px auto 0 auto;
			padding: 10px 10px 8px 10px;
			color: var(--security-main-color);
			font-weight: 700;
			text-align: center;
			line-height: 1.8;
			letter-spacing: 0.09em;
			border: 1px solid var(--security-main-color);
			&.--step-02 {
				margin-top: 60px;
				padding: 20px 10px;
				line-height: 1.87;
			}
			&.--step-03 {
				margin-top: 54px;
				padding: 20px 10px;
				line-height: 1.85;
			}
			&.--step-04 {
				max-width: 592px;
				margin-top: 56px;
				padding: 20px 10px;
			}
		}
		.PageSecurityStepContentsButtons {
			display: flex;
			justify-content: center;
			gap: 30px;
			margin-top: 32px;
			&.--step-02 {
				margin-top: 42px;
			}
			&.--step-03 {
				margin-top: 44px;
			}
			&.--step-04 {
				margin-top: 42px;
			}
		}
	}
}

.PageSecurityConclusion {
	position: relative;
	padding: 81px 0 97px 0;
	color: #fff;
	background: var(--security-bg-color);
	&::before {
		position: absolute;
		left: calc(50% - 631px);
		top: 346px;
		width: 91px;
		height: 625px;
		background: url(/image/page/keyword_security/security_measures/bg_txt_security.svg) no-repeat center center/contain;
		z-index: 1;
		content: '';
	}
	.PageSecurityConclusionItem {
		position: relative;
		+ .PageSecurityConclusionItem {
			margin-top: 28px;
		}
		.PageSecurityConclusionItemImage {
			position: absolute;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.PageSecurityConclusionItemContent {
			display: flex;
			justify-content: center;
			flex-direction: column;
		}
		&.--odd {
			.PageSecurityConclusionItemImage {
				left: 0;
				top: 0;
				width: calc( (100vw - var(--inner-width)) / 2 + var(--inner-width) * (1 - 0.62) );
				height: 471px;
			}
			.PageSecurityConclusionItemContent {
				min-height: 471px;
				padding-left: 47%;
			}
			
		}
		&.--even {
			.PageSecurityConclusionItemImage {
				right: 0;
				top: 0;
				width: calc( (100vw - var(--inner-width)) / 2 + var(--inner-width) * (1 - 0.635) );
				height: 417px;
			}
			.PageSecurityConclusionItemContent {
				min-height: 417px;
				padding: 20px 47% 0 66px;
			}
			.PageSecurityConclusionItemText {
				line-height: 2.1;
			}
			
		}
		.PageSecurityConclusionItemText {
			font-size: 1.125rem;
			font-weight: 300;
			line-height: 1.8;
			letter-spacing: 0.09em;
			span {
				display: inline-block;
				margin: -5px 0 0 16px;
				font-size: 1.5rem;
				font-weight: 300;
				text-indent: -1.2em;
				line-height: 1.7;
				letter-spacing: 0.09em;
				strong {
					color: var(--security-pale-color);
					font-size: 2rem;
					font-weight: 300;
				}
			}
			+ .PageSecurityConclusionItemText {
				padding-top: 23px;
			}
		}
	}	
	.PageSecurityContact {
		margin-top: 56px;
		.PageSecurityContactBox {
			display: flex;
			justify-content: space-between;
			padding: 23px 30px 20px 30px;
			background: #fff;
			border-radius: 10px;
		}
		.PageSecurityContactTitle {
			margin: 5px 0 10px 0;
			color: var(--security-main-color);
			font-size: 1.2rem;
			font-weight: 700;
			letter-spacing: 0.06em;
		}
		.PageSecurityContactText {
			color: #333;
			font-size: var(--security-fontsize-base);
			line-height: 2;
			letter-spacing: 0.05em;
		}
		.PageSecurityContactButtons {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}
		.PageSecurityContactButton {
			width: 272px;
			height: 50px;
			padding: 14px 10px 10px 52px;
			color: #fff;
			font-size: var(--security-fontsize-base);
			border-radius: 4px;
			&.--security {
				background-repeat: no-repeat;
				background-position: 22px center;
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219%22%20height%3D%2223%22%20viewBox%3D%220%200%2019%2023%22%3E%20%3Cpath%20d%3D%22M16.5%2019.5h-1v-14a2%202%200%200%200-2-2h-10v-1a2%202%200%200%201%202-2h11a2%202%200%200%201%202%202v15a2%202%200%200%201-2%202Z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%2F%3E%20%3Cpath%20d%3D%22M5%209h6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M5%2012h6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M5%2015h6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Crect%20width%3D%2215%22%20height%3D%2219%22%20rx%3D%222%22%20transform%3D%22translate(.5%203.5)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
				background-color: #FF0026;
			}
			&.--contact {
				background-repeat: no-repeat;
				background-position: 20px center;
				background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.4%22%20height%3D%2214.37%22%20viewBox%3D%220%200%2020.4%2014.37%22%3E%20%3Cpath%20d%3D%22M0%201.45A2.02%202.02%200%200%201%20.69.38%201.79%201.79%200%200%201%201.7%200H18.5a1.84%201.84%200%200%201%201.55.72%201.75%201.75%200%200%201%20.35.92%202.28%202.28%200%200%201%20.01.24V12.5a1.77%201.77%200%200%201-1.02%201.69%201.52%201.52%200%200%201-.7.18H1.88a1.87%201.87%200%200%201-1.54-.72%202.7%202.7%200%200%201-.35-.73Zm2.1-.22.16.17%201.66%201.64%204.93%204.91a1.78%201.78%200%200%200%202.67.02q3.33-3.3%206.64-6.61c.04-.04.1-.06.08-.13Zm16.18%2011.9-.15-.17-1.36-1.34-3.43-3.41c-.12-.12-.19-.14-.31%200q-.4.42-.84.82a3.01%203.01%200%200%201-3.5.37A7.37%207.37%200%200%201%207.4%208.25c-.2-.19-.2-.2-.4%200L2.74%2012.5l-.64.64ZM1.23%202.12v10.13l.15-.15%204.76-4.72c.18-.19.18-.19%200-.37L1.38%202.26l-.15-.14m17.93%200-.08.07-4.9%204.87c-.11.12-.08.18.02.27l4.83%204.8c.04.03.06.08.13.09Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
				background-color: #4D4D4D;
			}
		}
	}
}

@media screen and (width > 767px) {
	.PageSecurityStepTabPrev,
	.PageSecurityStepTabNext {
		display: none!important;
	}
}

/* sp
--------------------------------------------*/

@media screen and (width <= 767px) {

/* common  */
.pc-only { display: none; }
.sp-only { display: inline; }
.PageSecurityButton {
	width: 171px;
	height: 44px;
	padding: 3px 27px 0 22px;
	font-size: 0.875rem;
	line-height: 1.28;
	letter-spacing: 0.1em;
	border-radius: 22px;
	&::after {
		right: 18px;
		width: 10px;
	}
	&.--security {
		padding-left: 32px;
	}
	&.--va {
		width: 220px;
		padding-left: 27px;
		letter-spacing: 0.1em;
	}
	&.--netstable {
		width: 171px;
	}
}

/* section  */
.FirstView {
	.FirstViewContainer {
		position: absolute;
		top: 40%;
		left: 50.6%;
		width: 72.3%;
	}
}

.PageSecurityIntroduction {
	padding: 74px 0 110px 0;
	.PageSecurityIntroductionText {
		font-size: .9rem;
		line-height: 1.5;
		letter-spacing: 0.07em;
		strong {
			font-size: 1.5rem;
		}
	}
}

.PageSecurityAbout {
	padding-bottom: 0;
	&::before {
		display: none;
	}
	.PageSecurityAboutMv {
		position: static;
		display: block;
		width: 100vw;
		height: auto;
		margin: 55px 0 0 calc(50% - 50vw);
		img {
			height: auto;
		}
	}
	.PageSecurityAboutContainer {
		padding-left: 0;
	}
	.PageSecurityAboutTitle {
		margin-bottom: 40px;
		font-size: .9rem;
		text-align: center;
		line-height: 3.7;
		span {
			padding: 0;
			font-size: 1.2rem;
		}
	}
	.PageSecurityAboutHeadline {
		margin-bottom: 40px;
		font-size: 1rem;
		text-align: center;
		line-height: 2.03;
	}
	.PageSecurityAboutText {
		margin-bottom: 57px;
		font-size: 0.9rem;
		text-align: center;
		line-height: 2.23;
		letter-spacing: 0.05em;
	}
	.PageSecurityAboutButtons {
		gap: 8px;
		justify-content: center;
	}
}

.PageSecurityNavi {
	margin: 24px 0 127px 0px;
	.PageSecurityNaviButtons {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	.PageSecurityNaviButton {
		width: 294px;
		height: 72px;
		padding-right: 38px;
		font-size: 0.906rem;
		line-height: 1.7;
		letter-spacing: 0.07em;
		border-radius: 36px;
		box-shadow: 0 3px 3px rgba(0,0,0,.15);
		background-position: right 26px top 60%;
		background-size: 17px auto;
		small {
			font-size: 0.718rem;
		}
	}
}

.PageSecurityImportance {
	padding-bottom: 83px;
	&::before {
		display: none;
	}
	.PageSecurityImportanceTitle {
		margin-bottom: 37px;
		font-size: 1.2rem;
		letter-spacing: 0.1em;
		&::after {
			margin-top: 30px;
		}
	}
	.PageSecurityImportanceIntroduction {
		margin-bottom: 62px;
		.PageSecurityImportanceIntroductionImage {
			position: static;
			width: 100vw;
			height: auto;
			margin: 30px 0 0 calc(50% - 50vw);
			img {
				height: auto;
			}
		}
		.PageSecurityImportanceIntroductionContents {
			padding: 40px 0 36px 0;
		}
		.PageSecurityImportanceIntroductionTitle {
			margin-bottom: 43px;
			font-weight: 700;
			text-align: center;
		}
		.PageSecurityImportanceIntroductionText {
			line-height: 2.07;
			text-align: center;
		}
	}
	.PageSecurityImportanceBackground {
		margin-bottom: 80px;
		.PageSecurityImportanceBackgroundTitle {
			margin-bottom: 24px;
		}
		.PageSecurityImportanceBackgroundText {
			line-height: 2.08;
		}
	}
	.PageSecurityImportancePoint {
		width: 100vw;
		margin: 27px 0 45px calc(50% - 50vw);
		row-gap: 9px;
		.PageSecurityImportancePointHeader {
			padding: 23px 20px 17px 27px;
			&::before {
				right: 27px;
				width: 23px;
				margin-top: 4px;
			}
		}
		.PageSecurityImportancePointNum {
			margin-right: 28px;
			padding: 4px 25px 3px 0;
			font-size: 1rem;
			letter-spacing: 0.1em;
			strong {
				display: block;
				margin-top: 5px;
			}
		}
		.PageSecurityImportancePointTitle {
			min-width: 174px;
			padding-right: 0;
			font-size: var(--security-fontsize-base);
			line-height: 1.6;
			letter-spacing: 0.07em;
		}
		.PageSecurityImportancePointContents {
			padding: 24px 20px 21px 20px;
			font-size: var(--security-fontsize-base);
			&.--point-01 {
				padding-bottom: 150px;
				background-position: left 59% bottom 3px;
			}
			&.--point-02 {
				padding-bottom: 125px;
				background-position: center bottom 18px;
			}
			&.--point-03 {
				padding-bottom: 150px;
				background-position: left 51% bottom 26px;
			}
		}
		.PageSecurityImportancePointText {
			line-height: 1.94;
			letter-spacing: 0.05em;
			text-align: center;
		}
	}
	.PageSecurityImportanceRisk {
		.PageSecurityImportanceRiskTitle {
			margin-bottom: 39px;
			line-height: 1.6;
		}
		.PageSecurityImportanceRiskText {
			font-size: var(--security-fontsize-base);
			line-height: 2.1;
			letter-spacing: 0.05em;
		}
		.PageSecurityImportanceRiskList {
			justify-content: center;
			flex-wrap: wrap;
			column-gap: 15px;
			row-gap: 12px;
			width: 100vw;
			margin: 37px 0 30px calc(50% - 50vw);
			.PageSecurityImportanceRiskListButton {
				padding-top: 7px;
				width: 166px;
				font-size: var(--security-fontsize-base);
				line-height: 1.65;
				&::before {
					position: absolute;
					left: 7px;
					top: 4px;
					width: 40px;
				}
				&::after {
					right: -1px;
					bottom: 3px;
					width: 40px;
					height: 40px;
				}
				&.--risk-01 {
					margin: 0 27%;
					&::before {
						background-size: 27px auto;
					}
				}
				&.--risk-02 {
					&::before {
						background-size: 27px auto;
					}
				}
				&.--risk-03 {
					&::before {
						background-size: 35px auto;
					}
				}
			}
		}
	}
	.PageSecurityImportanceRiskModal {
		width: 90%;
		max-height: 77%;
		padding: 110px 26px 60px 24px;
		&.--risk-01 {
			&::before {
				top: 11px;
				right: calc(50% - 46px);
				width: 96px;
			}
		}
		&.--risk-02 {
			&::before {
				top: 12px;
				right: calc(50% - 45px);
				width: 97px;
			}
		}
		&.--risk-03 {
			&::before {
				top: 14px;
				right: calc(50% - 41px);
				width: 112px;
			}
		}
		.PageSecurityImportanceRiskModalClose {
			top: 0;
			right: 20px;
		}
		.PageSecurityImportanceRiskModalTitle {
			margin-bottom: 15px;
			font-size: 1rem;
			letter-spacing: 0.07em;
		}
		.PageSecurityImportanceRiskModalText {
			margin-bottom: 18px;
			font-size: 0.875rem;
			letter-spacing: 0.07em;
		}
		.PageSecurityImportanceRiskModalList {
			flex-direction: column;
			gap: 20px;
		}
		.PageSecurityImportanceRiskModalData {
			flex: 1;
			.PageSecurityImportanceRiskModalDataTitle {
				margin-bottom: 9px;
				padding: 3px 0;
				font-size: var(--security-fontsize-base);
			}
			.PageSecurityImportanceRiskModalDataText {
				padding: 0;
				font-size: .875rem;
				line-height: 1.95;
				letter-spacing: 0.04em;
			}
		}
	}
	.PageSecurityImportanceButtons {
		gap: 10px;
		margin-top: 63px;
	}
}

.PageSecurityStep {
	padding: 70px 0 30px 0;
	&::before {
		display: none;
	}
	.PageSecurityStepTitle {
		margin-bottom: 75px;
		font-size: 1.2rem;
		&::after {
			margin-top: 32px;
		}
	}
	.PageSecurityStepIntroduction {
		position: relative;
		min-height: 354px;
		margin-bottom: 71px;
		.PageSecurityStepIntroductionImage {
			position: static;
			display: block;
			width: 100vw;
			height: auto;
			margin: 67px 0 61px calc(50% - 50vw);
			img {
				height: auto;
			}
		}
		.PageSecurityStepIntroductionContents {
			padding: 0;
		}
		.PageSecurityStepIntroductionCopy {
			margin-bottom: 44px;
			font-size: 1rem;
			text-align: center;
			line-height: 2.1;
		}
		.PageSecurityStepIntroductionList {
			margin-bottom: 55px;
			font-size: 1rem;
			text-align: center;
			letter-spacing: 0.05em;
			li {
				margin-bottom: 35px;
				line-height: 1.8;
			}
		}
		.PageSecurityStepIntroductionText {
			font-size: 1.125rem;
			text-align: center;
			line-height: 1.8;
		}
		.PageSecurityStepIntroductionConclusion {
			margin-top: 0;
			padding-bottom: 97px;
			font-size: 1rem;
			text-align: center;
			line-height: 2.05;
			letter-spacing: 0.04em;
			&::after {
				width: 44px;
			}
		}
	}
	.PageSecurityStepController {
		position: relative;
		.PageSecurityStepTabPrev,
		.PageSecurityStepTabNext {
			position: absolute;
			top: 50%;
			width: 27px;
			height: 27px;
			font: 0/0 a;
			background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.722616 15.8291L7.9624 8.26027L0.722616 0.691406' stroke='%23222222' stroke-width='2'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-size: 10px auto;
			background-position: center center;
			background-color: rgba(217,217,217,0.73);
			transform: translateY(-50%);
			border-radius: 50%;
			border: none;
			z-index: 2;
		}
		.PageSecurityStepTabPrev {
			left: 10px;
			transform: translateY(-50%) rotate(180deg);
		}
		.PageSecurityStepTabNext {
			right: 10px;
		}
	}
	.PageSecurityStepTab {
		gap: 3px;
		padding: 6.5px 37px;
		margin-bottom: -6.5px;
		overflow-x: auto;
		 -ms-overflow-style: none;
    scrollbar-width: none;
		&::-webkit-scrollbar {
			display: none;
		}
		.PageSecurityStepTabItem {
			flex-shrink: 0;
			width: 134px;
			max-width: initial;
			padding: 18px 5px;
			font-size: .794rem;
			span {
				line-height: 1.75;
				&:first-of-type {
					margin-bottom: 20px;
					font-size: .883rem;
				}
			}
			&.is-current {
				width: 147px;
				max-width: initial;
				margin: -6.5px;
				padding-top: 27px;
				font-size: .8737rem;
				pointer-events: none;
				span:first-of-type {
					margin: -7px 0 23px 0;
					font-size: .971rem;
				}
			}
		}
	}
	.PageSecurityStepContents {
		width: 80%;
		padding: 44px 15px 51px 15px;
		.PageSecurityStepContentsHeader {
			margin-bottom: 77px;
			&.--step-01 {
				padding-right: 0;
				.PageSecurityStepContentImage {
					position: static;
					margin-top: 27px;
				}
			}
			&.--step-02 {
				padding-left: 0;
				.PageSecurityStepContentsLead {
					margin: 0;
				}
				.PageSecurityStepContentImage {
					position: static;
				}
			}
			&.--step-03 {
				margin-bottom: 74px;
				padding-right: 0;
				.PageSecurityStepContentsLead {
					margin: 0;
				}
				.PageSecurityStepContentImage {
					position: static;
					right: 0;
					top: -5px;
				}
			}
			&.--step-04 {
				margin-bottom: 74px;
				padding-left: 0;
				.PageSecurityStepContentsLead {
					margin: 44px 0 0 0;
				}
				.PageSecurityStepContentImage {
					position: static;
					left: 0;
					top: 3px;
				}
			}
		}
		.PageSecurityStepContentImage {
			display: block;
			margin: 27px auto 0 auto;
			text-align: center;
		}
		.PageSecurityStepContentsTitle {
			flex-direction: column;
			align-items: center;
			gap: 8px;
			margin-bottom: 30px;
			font-size: 1.037rem;
			span {
				margin: 0;
			}
		}
		.PageSecurityStepContentsLead {
			margin-left: 0;
			font-size: var(--security-fontsize-base);
			text-align: center;
			line-height: 1.8;
			letter-spacing: 0.05em;
		}		
		.PageSecurityStepContentsSubtitle {
			margin-bottom: 24px;
			font-size: var(--security-fontsize-base);
			line-height: 1.5;
			span {
				display: inline;
			}
		}
		.PageSecurityStepContentsText {
			font-size: var(--security-fontsize-base);
			line-height: 1.67;
			small {
				margin-top: 3px;
				font-size: .8125rem;
				line-height: 1.95;
			}
			+ .PageSecurityStepContentsText {
				margin-top: 25px;
			}
		}
		.PageSecurityStepContentsList {
			flex-direction: column;
			gap: 11px;
			margin: 17px 0 68px 0;
			.PageSecurityStepContentsListData {
				position: relative;
				flex: 1;
				&::before {
					position: absolute;
					top: -7px;
					left: -21px;
					width: 39px;
					border: 2px solid #fff;
					transform: none;
				}
				&.--data-01 {
					&::before {
						background-size: 24px auto;
					}
				}
				&.--data-02 {
					&::before {
						background-size: 17px auto;
					}
				}
				&.--data-03 {
					&::before {
						background-size: 7px auto;
					}
				}
				dt {
					padding: 6px 10px 2px 10px;
					font-size: var(--security-fontsize-base);
					letter-spacing: .09em;
				}
				dd {
					padding: 9px 9px 8px 13px;
					line-height: 1.4;
					letter-spacing: 0.04em;
				}
			}
		}
		.PageSecurityStepContentsBox {
			margin: 30px auto 0 auto;
			padding: 18px 10px 16px 10px;
			font-size: var(--security-fontsize-base);
			line-height: 1.95;
			&.--step-02 {
				margin-top: 52px;
				padding: 25px 10px;
				line-height: 1.93;
				small {
					display: block;
					margin-top: 10px;
					line-height: 1.5;
				}
			}
			&.--step-03 {
				line-height: 1.93;
			}
			&.--step-04 {
				max-width: 592px;
				margin-top: 51px;
				padding: 20px 10px;
			}
		}
		.PageSecurityStepContentsButtons {
			flex-direction: column;
			align-items: center;
			gap: 19px;
			margin-top: 44px;
			&.--step-02 {
				margin-top: 45px;
			}
			&.--step-03 {
				margin-top: 44px;
			}
			&.--step-04 {
				margin-top: 45px;
			}
		}
	}
}

.PageSecurityConclusion {
	padding: 98px 0 92px 0;
	&::before {
		display: none;
	}
	.PageSecurityConclusionItem {
		+ .PageSecurityConclusionItem {
			margin-top: 101px;
		}
		.PageSecurityConclusionItemImage {
			display: block;
			position: static;
			img {
				height: auto;
			}
		}
		&.--odd {
			.PageSecurityConclusionItemImage {
				width: 100vw;
				height: auto;
				margin: 40px 0 0 calc(50% - 50vw);
				
			}
			.PageSecurityConclusionItemContent {
				min-height: initial;
				padding: 0 5px;
			}
		}
		&.--even {
			.PageSecurityConclusionItemImage {
				width: 100vw;
				height: auto;
				margin: 30px 0 0 calc(50% - 50vw);
			}
			.PageSecurityConclusionItemContent {
				min-height: initial;
				padding: 0 10px;
			}
			.PageSecurityConclusionItemText {
				line-height: 2.26;
			}
			
		}
		.PageSecurityConclusionItemText {
			font-size: 1rem;
			span {
				margin: 17px 0 0 9px;
				font-size: 1rem;
				text-indent: -1.2em;
				line-height: 1.8;
				letter-spacing: 0.09em;
				white-space: nowrap;
				strong {
					font-size: 1.5rem;
				}
			}
			+ .PageSecurityConclusionItemText {
				padding-top: 31px;
			}
		}
	}	
	.PageSecurityContact {
		margin-top: 85px;
		.PageSecurityContactBox {
			flex-direction: column;
			padding: 19px 30px 20px 22px;
		}
		.PageSecurityContactTitle {
			margin: 5px 0 14px 0;
			font-size: 1rem;
			letter-spacing: 0.06em;
		}
		.PageSecurityContactText {
			line-height: 2.15;
		}
		.PageSecurityContactButtons {
			display: flex;
			flex-direction: column;
			gap: 12px;
			margin-top: 28px;
		}
	}
}

}