@charset "utf-8";
/* CSS Document */

*:not(h2.area, .packing_wrap h2.area),
*:not(h2.area, .packing_wrap h2.area)::before,
*:not(h2.area, .packing_wrap h2.area)::after {
    box-sizing: border-box;
}

body {
	background-color: #ffffff;
}

p:not(#copyright p) {
	color: #333333;
}

section {
	margin: 100px 0
}

section h2 {
	border-bottom:none;
}

section h3,h4 {
	border-bottom: none;
	border-left: none;
}

.main-img {
	width: 100%;
    height: auto;
    margin-top: 15%;
}

.small {
	line-height: 1.5;
	font-size: 12px;
}

.data_erasure h1 {
	font-size: 30px;
}

.data_erasure h1 span,
#pc-init-flow h2 span,
#data-safety h2 span {
	position: relative;
	display: inline-block;
	padding: 1.3% 5% 1%;
	margin-bottom: 20px;
	border-radius: 50px;
	background-color: #004da1;
	text-align: center;
	font-size: 20px;
	color: #ffffff;
	font-weight: 600;
}

.data_erasure h1 span::after,
#pc-init-flow h2 span::after,
#data-safety h2 span::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	border-style: solid;
	border-width: 10px 5px 0 5px;
	border-color: #004da1 transparent transparent;
	translate: -50% 100%;
}

.section-lead {
	padding-bottom: 20px;
}

.section-lead span,
.topics,
.erasure-vs-init p span,
.checkpoint-text span,
.text-btn span,
.column-index p {
	color: #004da1;
	font-weight: 600;
	line-height: normal;
}

.column-index {
	width: 705px;
	margin: auto;
	border: 2px solid #004da1;
	border-radius: 10px;
	color:#333333;
	padding: 5% 0;
}

.column-index p {
	text-align: center;
	font-size: 25px;
	font-weight: 600;
}

.column-index ul {
	padding: 0 15%;
}

.column-index ul > li {
	list-style: none;
	padding: 3px 0;
	font-weight: 600;
}

/*アコーディオン*/
.column-index ul > li:nth-child(n+3):not(.index_more) {
	display: none;
}

.index_more {
	cursor: pointer;
	border: none;
	display: block;
	background-color: #fff;
    width: 100%;
    margin: 18px auto;
	font-size: 16px;
	position: relative;
	color: #004da1;
}

.index_more:before,
.index_more:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 33%;
	height: 1px;
	background-color: #004da1;
}

.index_more:before {
	left:0;
}
.index_more:after {
	right:0;
}

.index_more:hover:before,
.index_more:hover:after {
	background-color: #80aded;
}

.column-index ul > li a {
	text-decoration: none;
}

.column-index ul > li a:hover,
.index_more:hover {
	color: #80aded;
}

.column-index ul > li > ul > li a {
	color: #333333;
}

.column-index ul > li > ul > li::before {
	background-color: #80aded;
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: middle;
}

#data-erasure-vs-init h2 span {
	font-size: 40px;
	background-color: #deedfb;
	border-radius: 50px;
	padding: 0.3% 2% 0;
}

.erasure-vs-init {
	display: flex;
	gap: 20px;
	margin-top: 30px;
}

.erasure-vs-init h3 {
	font-size: 20px;
	color: #ffffff;
	background-color: #004da1;
	border-radius: 50px;
	padding: 1% 2% 0 1%;
	text-align: center;
	width: 90%;
    margin: auto;
	margin-bottom: 35px;
}

.erasure, #init {
	width: 460px;
	background-color: #f1f8ff;
	padding: 25px;
	border-radius: 10px;
}

.erause-img {
	display: flex;
	padding-top: 30px;
}

.erasure img {
	width: 90%;
	height: auto;
	margin: -25px auto;
}

.erause-img-inner,
.init-img {
	position: relative;
}

.erause-img-inner::before,
.init-img::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 90%;
	aspect-ratio: 1 / 1;
	height: auto;
	background-color: #ffffff;
	border-radius: 50%;
	transform: translate(-50%, -23px);
	z-index: 0;
}

.init-img::before {
	width: 50%;
	transform: translateX(-50%);
}

#init img {
	width: 47%;
	height: auto;
	padding-top: 30px;
	margin: -20px auto;
}

.erause-img-inner img,.erause-img-inner h4,
.init-img img,.init-img h4 {
	position: relative;
	z-index: 1;
}

.erasure-vs-init h4 {
	color: #004da1;
	font-size: 25px;
	font-weight: 600;
	text-align: center;
	border: none;
	padding: 0;
	line-height: 1.3;
}

.erasure-vs-init p {
	padding: 0;
	margin: 0;
}

/*ポイント*/
.point {
	border: 2px solid #156019;
	background-color: #f5fff3;
	display: flex;
	padding: 25px;
	margin: 20px 0;
	border-radius: 10px;
	gap: 25px;
	align-items: center;
}

.point h3 {
	color: #156019;
	font-size: 18px;
	font-weight: 600;
	border-bottom: 2px solid #156019;
	border-left: none;
	margin: 0;
}

.point h3::before {
	content: "！";
	padding: 1px 6px;
	border-radius: 50px;
	background-color: #156019;
	color: #ffffff;
	margin-right: 10px;
	line-height: 2;
}

.point p {
	padding: 20px 0 0 0;
	line-height: 1.6;
}

.point-text p span,
.section-lead .red {
	color: #ff0000;
	font-weight: 600;
	background : linear-gradient(to top, #ffff00 0 36%, transparent 48% 100%);
}

.point-img img {
	width: 185px;
	height: auto;
}

.leak {
	padding: 25px 25px 10px 25px;
}

.leak .point-img img {
	transform: translateY(14%);
	width: 195px;
}

/*データ消去・初期化前の5つの簡単チェックポイント*/

.underline {
	background: linear-gradient(transparent 50%, #f1f8ff 50%);
}

.fontsize40 {
	font-size: 40px;
}

.checkpoint-con {
	display: flex;
	gap: 20px;
	background-color: #f1f8ff;
	padding: 25px;
	border-radius: 10px;
	margin: 25px 0;
	align-items: center;
}

.checkpoint-con h3 {
	line-height: 1.5;
	margin: 0;
	padding-bottom: 18px;
}

.checkpoint-img img {
	width: 230px;
	height: auto;
}

.checkpoint-text h3 span {
	color: #2671dd;
	font-size: 22px
}

.checkpoint-text span span {
	font-size: 45px;
}

.checkpoint-con a {
	padding: 12px;
	background-color: #004DA1;
	color: #ffffff;
	display: block;
	border-radius: 50px;
	margin: auto;
	width: 70%;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 4px 0px #012a55;
}

/*初心者でもわかる！パソコン初期化方法*/

#pc-init-flow h2 {
	font-size: 30px;
	text-align: center;
}

#pc-init-flow h2 span {
	padding: 1px 10px 0px 15px;
	margin-bottom: 10px;
}

.point .point-btn {
	padding: 3% 10%;
	border-radius: 50px;
	background-color: #156019;
	border: none;
	color: #ffffff;
	font-weight: 600;
	font-size: 18px;
	display: block;
    margin: auto;
	box-shadow: 0 4px 0px #0a300c;
	text-decoration: none;
	text-align: center;
}

.init-flow-con {
	background-color: #f1f8ff;
	border: 2px solid #004DA1;
	padding: 25px;
	border-radius: 10px;
	margin: 45px 0;
}

.init-flow-con h3 {
	text-decoration: none;
	font-size: 20px;
	margin: 20px;
	text-align: center;
}

.init-flow-con img {
	margin: auto;
	width: 30%;
	height: auto;
	}

.init-flow-con h4 {
	color: #004DA1;
	font-size: 16px;
	line-height: 2;
	font-weight: 600;
}

.init-flow-con h4 span {
	font-size:1.4em;
}

.init-flow-con {
	counter-reset: number 0;
}

.init-flow-con h4::before {
	counter-increment: number 1;
	content: counter(number, decimal-leading-zero);
	background-color: #004DA1;
	color: #ffffff;
	padding: 4px 7px 2px 7px;
	border-radius: 6px;
	margin-right: 10px;
}

.init-step img {
	width: 550px;
	height: auto;
}

.maker-list {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

.maker-con .maker-btn {
	background-color: #d3e8fc;
	color: #004DA1;
	border-radius: 50px;
	border: 2px solid #d3e8fc;
	width: 100%;
	height: 45px;
	margin: 6px auto;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	align-items: center;
	display: flex;
	justify-content: center;
}

.maker-con .maker-btn:hover {
	background-color: #ffffff;
	transition: .3s;
}

.maker-con {
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	width: 350px;
	height: auto;
	padding: 25px;
	border-radius: 10px;
	justify-content: space-around;
}

.maker-con img {
	width: 70%;
	height: auto;
	margin: 10px auto;
}

.maker-con small {
	text-align: center;
	font-size: 12px;
}
#hdd-ssd {
counter-reset: number 0;
}

.hdd-ssd-con h3 {
	padding: 0;
}

.hdd-ssd-con h3::before {
	counter-increment: number 1;
	content: counter(number, decimal-leading-zero);
	border-bottom: 2px solid #004da1;
	margin-right: 10px;
}

.text-btn {
	background-color: #f1f8ff;
	padding: 25px;
	border-radius: 10px;
	width: 605px;
}

.con-text-img {
	display: flex;
	align-items: center;
}

.hdd-ssd-img {
	width: 25%;
}

.hdd-ssd-img img {
	width: 100%;
	height: auto;
	padding-left: 20px;
}

.text-btn .maker-howto {
	background-color: #004DA1;
	color: #ffffff;
	padding: 12px;
	border-radius: 50px;
	display: block;
	text-decoration: none;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 4px 0px #012a55;
	width: 100%;
	margin: 2% auto 0;
}

.text-btn p {
	padding: 0;
	margin: 0;
}

#hdd-ssd .attention {
	border: 1px solid #004DA1;
	margin: 25px auto;
	width: 100%;
}

#hdd-ssd .attention p {
	margin: 0;
	padding: 0;
	font-size: 12px;
}

.data-safety-con {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#data-safety .section-lead {
	width: 75%;
	padding: 0;
}

.data-safety-img {
	width: 25%;
	height: auto;
	margin-left: 3%;
}

.data-safety-img img {
	width: 100%;
	height: auto;
}

.cvbtn img {
	width: 140px;
	height: 150px;
	display: block;
	transform: translateY(-57%);
	margin-left: 18px;
}

.cv img {
	width: 100%;
	height: auto;
}

.cv img:hover {
	transform: scale(0.96);
	transition: .3s;
	opacity: 1;
}

.cvbtn {
	display: flex;
	background-color: #ff0000;
	height: 64px;
	border-radius: 50px;
	margin-top: 45px;
}

.cvbtn p {
	color: #004DA1;
	font-weight: 600;
	font-size: 20px;
}

.cv_merits {
	display: flex;
	flex-wrap: wrap;
	width: 30%;
}

.cv_text {
	font-size: 30px;
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
}

.cv .subcopy {
	padding-left: 18%;
	font-size: 20px;
	text-decoration: none;
}

/*ボタン共通*/
.all_btn {
	position: relative;
	cursor: pointer;
	transition: .3s;
}

.all_btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8%;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid #ffffff;
	transform: translateY(-50%);
}

.all_btn:hover {
	transform: translateY(4px);
	box-shadow: none;
}

/*スマホ*/
@media screen and (max-width: 767px) {

	.section-lead a:visited {
		color: #004DA1;
	}

	h2 {
		border-top:none;
	}

	h2 span {
		font-size: inherit;
	}

	section h3 {
	letter-spacing: -1px;
}

	#data-erasure-vs-init h2 {
		line-height: 1.7;
	}

	.column-index {
		width: 90%;
	}

	.column-index ul {
		padding: 0 7%;
		font-size: 14px;
	}

	.column-index ul > li a {
		color: #004DA1;
	}

	.data_erasure h1 span::after, #pc-init-flow h2 span::after, #data-safety h2 span::after {
		bottom:2%;
	}

	.erasure-vs-init {
		display: block;
	}

	.erasure, #init {
		width: 100%;
		margin: 0 auto 20px;
	}

	#data-erasure-vs-init h2 {
		line-height: 2;
	}

	#data-erasure-vs-init h2 span {
	padding: 1.5% 4%;
	font-size: 30px;
	}

	#init img {
		margin: 0 auto 25px;
	}
	#data-erasure img {
		margin: 0 auto 10px;
	}

	.init-img img {
		display: block;
		margin: auto;
	}

	.erause-img-inner::before {
		width: 86%;
	}

	#pc-init-flow h2 span {
		padding: 5px 10px 4px 15px;
		margin-bottom: 15px;
	}

	.point {
		display: block;
	}

	.point h3::before {
		padding: 6px 7px;
	}

	.leak .point-img img {
		transform: translate(26%, 15px);
		width: 220px;
		display: none;
	}

	.checkpoint-con {
		display: block;
	}

	.checkpoint-img img {
		display: block;
		margin: auto;
		width: 80%;
	}

	.checkpoint-con h3 {
		text-align: center;
		font-size: 20px;
		padding: 0;
	}

	.checkpoint-con a {
		width: 100%;
		font-size: 18px;
}

	.checkpoint-text p {
		padding: 0;
	}

	.point-btn {
		width: 100%;
	}

	.point-img img {
		display: block;
		margin: 20px auto 0;
		width: 100%;
	}

	.init-flow-con h3 {
		margin:20px 0;
	}

	.init-flow-con img {
		display: block;
		width: 70%;
	}

	.init-step h4 {
		padding: 0;
		text-align: left;
	}

	.init-flow-con h4::before {
		padding: 7px;
	}

	.init-step img {
		width: 100%;
	}

	.maker-con .maker-btn {
		font-size: 16px;
	}

	.con-text-img {
		flex-direction: column-reverse;
	}

	.text-btn {
		width: 100%;
	}

	.hdd-ssd-con h3 {
		font-size: 20px;
	}

	.hdd-ssd-img {
		width: 80%;
	}

	.hdd-ssd-img img {
		padding: 0;
	}

	.text-btn .maker-howto {
	font-size: 18px;
	width:100%;
	margin: 3% auto 0;
}

	#hdd-ssd .attention {
		width: 95%;

}

	.data-safety-con {
		flex-direction: column-reverse;
	}

	#data-safety .section-lead {
		width: 100%;
	}

	.data-safety-img {
		width: 65%;
	}

}