@charset "UTF-8";

@import "/datarecovery/include/css/common.pc.css";



/* ---------------------------------------------------------

	CSS Document common

--------------------------------------------------------- */



.target {

	margin-top: -60px;

	padding-top: 60px;

}



/* ---------------------------------------------------------

	CSS Document visual

--------------------------------------------------------- */



#visual {

	background: #f0f0f1;

}



#visual .container {

	display: flex;

	align-items: center;

	height: 630px;

	padding-left: 80px;

	position: relative;

}



#visual .row {

	text-align: left;

}



#visual h2 {

	margin-bottom: 30px;

	font-weight: 600;

	font-size: 45px;

	line-height: 1.3;

}



#visual p {

	margin-bottom: 70px;

	font-size: 20px;

}



#visual .figure figure {

	height: 358px;

	position: absolute;

	top: 150px;

	right: 60px;

}



#visual figure img {

	height: 358px;

}



#visual .figure .iso {

	display: flex;

	justify-content: center;

	align-items: center;

	width: 110px;

	height: 110px;

	border-radius: 5px;

	background: #fff;

	font-size: 0;

	position: absolute;

	top: 30px;

	right: 30px;

}



#visual .figure .iso img {

	height: 100px;

}



#visual .link a {

	display: inline-block;

	vertical-align: top;

	height: 40px;

	padding: 0 1.5em;

	border-radius: 40px;

	background: #01a6a8;

	text-decoration: none;

	text-align: center;

	font-weight: 600;

	font-size: 18px;

	line-height: 38px;

	color: #fff;

}



#visual .link a:after {

	display: inline-block;

	vertical-align: 0.06em;

	content: '';

	width: 8px;

	height: 8px;

	margin: 0 -0.3em 0 0.3em;

	border-top: solid 2px #fff;

	border-right: solid 2px #fff;

	transform: rotate(45deg);

}



/* ---------------------------------------------------------

	CSS Document brand

--------------------------------------------------------- */



#brand {

	overflow: hidden;

	margin-bottom: 60px;

	padding: 130px 0 80px;

	background: #01a6a8;

	color: #fff;

	position: relative;

}



#brand .logo {

	width: 1890px;

	height: 43px;

	transform: translateX(-50%);

	position: absolute;

	left: 50%;

	top: 50px;

}



#brand .container {

	display: flex;

	justify-content: space-between;

}



#brand .box {

	width: 320px;

	padding-top: 40px;

	border-top: solid 1px #fff;

	text-align: left;

}



#brand .box img {

	height: 41px;

}



#brand .box dt {

	margin: 15px 0;

	font-weight: 600;

	font-size: 20px;

}



/* ---------------------------------------------------------

	CSS Document about

--------------------------------------------------------- */



#about .container {

	margin-bottom: 80px;

	text-align: left;

}



#about h3 {

	margin-bottom: 15px;

	font-weight: 600;

	font-size: 34px;

	line-height: 1;

	color: #000;

}



#about h4 {

	margin-bottom: 15px;

	text-align: left;

	font-weight: 500;

	font-size: 20px;

	line-height: 1;

}



#about .ttl {

	margin-top: 60px;

	margin-bottom: 20px;

	font-weight: 600;

	font-size: 24px;

}



#about p.nth1 {

	margin-bottom: 40px;

	font-size: 18px;

}



#about .flex {

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

}



#about .section {

	padding: 40px 40px 30px;

	border-radius: 20px;

	background: #f9f9f9;

}



#about .about_02 {

	width: 460px;

	padding: 30px;

}



#about .about_02 ul {

	display: flex;

	flex-wrap: wrap;

}



#about .about_02 li {

	height: 28px;

	margin-top: 7px;

	margin-right: 7px;

	padding: 0 0.5em;

	border-radius: 5px;

	border: solid 1px #3e3e3e;

	font-size: 16px;

	line-height: 26px;

}



#about .about_03 {

	width: 330px;

	margin-bottom: 15px;

	padding: 40px 0 30px;

	background: #f2fafa;

	text-align: center;

}



#about .about_03:nth-of-type(-n + 4) .box {

	height: 90px;

}



#about .subttl {

	margin-bottom: 15px;

	font-weight: 600;

	font-size: 18px;

	line-height: 1.3;

}



#about .em {

	font-size: 13px;

	line-height: 1.3;

}



#about .about_03 figure {

	height: 262px;

}



#about .about_04 figure {

	height: 116px;

}



#about .about_05 figure {

	width: 50%;

	text-align: center;

	font-weight: 500;

	font-size: 16px;

	line-height: 1.5;

}



#about .about_05 figure img {

	height: 282px;

	margin-bottom: 25px;

}



/* ---------------------------------------------------------

	CSS Document anchor

--------------------------------------------------------- */



#anchor {

	min-width: 1430px;

	width: 100%;

	height: 60px;

	background: #f6f7f8;

	position: sticky;

	top: 105px;

	left: 0;

	z-index: 8;

}



#anchor .container {

	display: flex;

	justify-content: space-between;

	align-items: center;

}



#anchor ul {

	display: flex;

}



#anchor ul li {

	margin-right: 70px;

	font-weight: 500;

	font-size: 20px;

}



#anchor ul li a {

	display: block;

	height: 60px;

	border-bottom: solid 4px #f6f7f8;

	text-decoration: none;

	line-height: 58px;

	color: var(--black);

}



#anchor ul li a:hover {

	border-bottom: solid 4px #01a6a8;

	opacity: 1;

}



#anchor ul li a.on {

	border-bottom: solid 4px #01a6a8;

	opacity: 1;

}



#anchor .link a {

	display: block;

	height: 40px;

	padding: 0 1em;

	border-radius: 10px;

	border: solid 1px #3e3e3e;

	text-decoration: none;

	font-weight: 500;

	font-size: 18px;

	white-space: nowrap;

	line-height: 36px;

	color: var(--black);

}



#anchor .link a:after {

	display: inline-block;

	vertical-align: 0.09em;

	content: '';

	width: 7px;

	height: 7px;

	margin-left: 0.3em;

	border-top: solid 2px var(--black);

	border-right: solid 2px var(--black);

	transform: rotate(45deg);

}



/* ---------------------------------------------------------

	CSS Document technology

--------------------------------------------------------- */



#technology .bg {

	margin-bottom: 90px;

	padding-top: 60px;

}



#technology h3 {

	margin-bottom: 40px;

	text-align: left;

	font-weight: 600;

	font-size: 34px;

	line-height: 1;

}



#technology .box {

	min-height: 480px;

	padding: 0 0 0 80px;

	position: relative;

}



#technology .section {

	width: 530px;

	margin-bottom: 20px;

	border-bottom: solid 1px #c4c4c4;

}



#technology .section:last-of-type {

	margin-bottom: 0;

	border-bottom: 0;

}



#technology .ttl {

	margin-bottom: 10px;

	text-align: left;

	font-weight: 600;

	font-size: 28px;

}



#technology p {

	width: 430px;

	margin-bottom: 30px;

	text-align: left;

	font-size: 18px;

}



#technology .arrow {

	width: 480px;

	height: 10px;

	position: relative;



	.inn {

		display: block;

		width: 60px;

		height: 60px;

		margin-left: auto;

		position: absolute;

		top: -60px;

		right: -20px;

		cursor: pointer;



		&:before {

			content: '';

			width: 11px;

			height: 11px;

			transform: translate(-50%, -40%) rotate(135deg);

			position: absolute;

			top: 40%;

			left: 50%;

			border-top: 2px solid #666;

			border-right: 2px solid #666;

			transition: 0.3s ease;

		}

	}

}



#technology .is-open .arrow {

	.inn {

		&:before {

			top: 60%;

			transform: translate(-50%, -60%) rotate(-45deg);

		}

	}

}



#technology .is-open .p {

	position: relative;

}



#technology .is-open .p:after {

	content: '';

	width: 1px;

	height: calc(100% + 100px);

	background: var(--black);

	position: absolute;

	bottom: -30px;

	left: -70px;

}



#technology .is-open.technology_01 .p:after {

	height: calc(100% + 90px);

}



#technology .is-open.technology_03 .p:after {

	bottom: -10px;

}



#technology .row {

	display: none;

	line-height: 1.6;

}



#technology .section:first-of-type .row {

	display: block;

}



#technology .row ul {

	margin-bottom: 30px;

}



#technology .row li {

	padding-left: 1.5em;

	text-align: left;

	font-size: 18px;

	position: relative;

}



#technology .row li:before {

	content: '-';

	font-weight: 600;

	position: absolute;

	top: 0;

	left: 0;

}



#technology .row li span {

	font-weight: 600;

}



#technology figure{

	position: absolute;

	top: 0;

	right: 0;

}



/* ---------------------------------------------------------

	CSS Document process

--------------------------------------------------------- */



#process .bg {

	padding: 60px 0 80px;

	background: #f2f5fa;

}



#process .container {

	position: relative;

}



#process h3 {

	margin-bottom: 40px;

	text-align: left;

	font-weight: 600;

	font-size: 34px;

	line-height: 1;

}



#process .flex {

	display: flex;

	justify-content: space-between;

}



#process .section {

	width: 79px;

	height: 625px;

	overflow: hidden;

	border-radius: 20px;

	position: relative;

}



#process .section.small {

	animation: toright 0.6s forwards ease;

}



#process .section.wide {

	animation: toleft 0.6s forwards ease;

}



#process .section:after {

	content: '';

	width: 100%;

	height: 100%;

	overflow: hidden;

	background: url(../video/process_thumb_01.webp) no-repeat 0 0 / 100% 100%;

	position: absolute;

	top: 0;

	left: 0;

	opacity: 1;

}



#process .process_01:after {

	opacity: 0;

}



#process .process_02:after {

	background-image: url(../video/process_thumb_02.webp);

}



#process .process_03:after {

	background-image: url(../video/process_thumb_03.webp);

}



#process .process_04:after {

	background-image: url(../video/process_thumb_04.webp);

}



#process .section.small:before,

#process .section.small:after {

	animation: fadein 0.9s forwards;

}



#process .section.wide:before,

#process .section.wide:after {

	animation: fadeout 0.9s forwards;

}



#process .this {

	width: 1145px;

	height: 625px;

	position: relative;

}



@keyframes toright {

	0% {

		width: 1145px;

	}

	100% {

		width: 79px;

	}

}



@keyframes toleft {

	0% {

		width: 79px;

	}

	100% {

		width: 1145px;

	}

}



@keyframes fadein {

	0% {

		opacity: 0;

	}

	100% {

		opacity: 1;

	}

}



@keyframes fadeout {

	0% {

		opacity: 1;

	}

	100% {

		opacity: 0;

	}

}



#process figure img {

	height: 625px;

}



#process .box {

	display: flex;

	align-items: center;

	width: 1045px;

	height: 240px;

	padding: 0 50px;

	border-radius: 20px;

	background: rgba(0, 0, 0, 0.5);

	text-align: left;

	color: #fff;

	position: absolute;

	left: 50px;

	bottom: 50px;

}



#process .num {

	width: 210px;

	font-weight: 600;

	font-size: 120px;

	line-height: 1;

}



#process .box dl {

	flex: 1;

	font-size: 20px;

}



#process .box dt {

	margin-bottom: 30px;

	font-weight: 600;

	font-size: 34px;

	line-height: 1;

}



#process .box dd span {

	font-size: 14px;

}



/* */

#process .dots {

	display: flex;

	justify-content: center;

	margin-top: 20px;

	font-size: 0;

}



#process .dots li {

	width: 10px;

	height: 10px;

	margin: 0 5px;

	border-radius: 100%;

	background: #ccc;

}



#process .dots li.on {

	background: var(--black);

}



/* */

#process .arrows {

	width: 95px;

	display: flex;

	justify-content: space-between;

	font-size: 0;

	position: absolute;

	top: 0;

	right: 0;

	z-index: 3;

}



#process .arrows li {

	width: 40px;

	height: 40px;

	border-radius: 100%;

	background: #3e3e3e;

	cursor: pointer;

	transition: .4s;

}



#process .arrows li.on {

	background: #dcdddd;

}



#process .arrows li:hover {

	opacity: 0.6;

}



#process .arrows li:after {

	content: '';

	width: 10px;

	height: 10px;

	transform: rotate(45deg) translateY(-50%);

	position: absolute;

	top: 50%;

	z-index: 4;

}



#process .arrows li.prev:after {

	margin-top: -2px;

	border-bottom: solid 3px #fff;

	border-left: solid 3px #fff;

	left: 11px;

}



#process .arrows li.next:after {

	margin-top: -2px;

	border-top: solid 3px #fff;

	border-right: solid 3px #fff;

	right: 20px;

}



/* ---------------------------------------------------------

	CSS Document time

--------------------------------------------------------- */



#time .bg {

	margin-bottom: 20px;

	padding-top: 60px;

}



#time h3 {

	margin-bottom: 30px;

	text-align: left;

	font-weight: 600;

	font-size: 34px;

	line-height: 1;

}



#time .about {

	display: flex;

	align-items: center;

	margin-bottom: 30px;

	padding: 50px;

	border-radius: 20px;

	background: #f2fafa;

	text-align: left;

}



#time .about .row {

	width: 480px;

}



#time .about .ttl {

	margin-bottom: 10px;

	font-weight: 600;

	font-size: 28px;

}



#time .about .recoverydays {

	height: 74px;

	font-weight: 700;

	font-size: 70px;

	line-height: 70px;

	color: #06A6A8;

}



#time .about .cap {

	margin-top: 15px;

	font-size: 20px;

	color: #666;

}



#time .about p {

	width: 780px;

	font-size: 28px;

	line-height: 1.7;

}



#time .about p span {

	font-size: 20px;

	color: #666;

}



#time .flow {

	display: flex;

	justify-content: space-between;

}



#time .flow .row {

	width: 330px;

	padding: 50px;

	border-radius: 20px;

	background: #f2f5fa;

	position: relative;

}



#time .flow .row:not(:last-of-type):after {

	content: '';

	width: 14px;

	height: 14px;

	margin-top: -14px;

	border-top: solid 3px #666;

	border-right: solid 3px #666;

	transform: rotate(45deg);

	position: absolute;

	top: 50%;

	right: -24px;

}



#time .flow .name {

	margin-bottom: 15px;

	font-size: 18px;

}



#time .flow dt {

	margin-bottom: 15px;

	font-weight: 600;

	font-size: 60px;

	line-height: 1;

}



#time .flow dd {

	font-size: 18px;

	color: #666;

}



/* ---------------------------------------------------------

	CSS Document price

--------------------------------------------------------- */



#price .bg {

	margin-bottom: 80px;

	padding-top: 60px;

}



#price h3 {

	margin-bottom: 30px;

	text-align: left;

	font-weight: 600;

	font-size: 34px;

	line-height: 1;

}



#price .flex {

	display: flex;

	justify-content: space-between;

	margin-bottom: 40px;

}



#price .section {

	width: 703px;

	overflow: hidden;

	border-radius: 20px;

	background: #f6f7f8;

}



#price .lv4.section {

	background: #f6f7f8;

}



#price .ttl {

	height: 48px;

	overflow: hidden;

	background: #51dfd0;

	font-weight: 600;

	font-size: 24px;

	line-height: 52px;

	color: #fff;

}



#price .lv4 .ttl {

	background: #01a6a8;

}



#price .row {

	padding: 40px;

	text-align: left;

}



#price .price {

	margin-bottom: 30px;

	padding-bottom: 30px;

	border-bottom: solid 1px #c3c3c3;

	text-align: center;

}



#price .size {

	margin-bottom: 15px;

	font-size: 18px;

	line-height: 1;

}



#price .num {

	font-weight: 600;

	font-size: 40px;

	line-height: 1;

}



#price .num span {

	font-size: 28px;

}



#price .estimate {

	text-align: center;

	font-weight: 600;

	font-size: 40px;

	line-height: 76px;

}



#price .circle {

	margin-bottom: 15px;

}



#price .circle li {

	margin-left: 1.3em;

	font-size: 16px;

	line-height: 1.7;

	list-style: circle;

}



#price .mark li {

	padding-left: 24px;

	font-size: 16px;

	line-height: 1.7;

	color: #666;

	position: relative;

}



#price .mark li:before {

	content: '※';

	position: absolute;

	top: 0;

	left: 0;

}



/* ---------------------------------------------------------

	CSS Document recovery

--------------------------------------------------------- */



#recovery .bg {

	padding: 60px 0;

	background: #f2f5fa;

}



#recovery h3 {

	margin-bottom: 40px;

	text-align: left;

	font-weight: 600;

	font-size: 34px;

	line-height: 1;

}



#recovery .row {

	display: flex;

	justify-content: space-between;

	align-items: center;

	margin-bottom: 40px;

	padding: 60px;

	border-radius: 20px;

	background: #fff;

	text-align: left;

}



#recovery .row:nth-of-type(odd) {

	flex-flow: row-reverse;

}



#recovery figure {

	width: 700px;

	height: 480px;

}



#recovery dl {

	width: 500px;

	text-align: left;

}



#recovery dt {

	margin-bottom: 30px;

	font-weight: 600;

	font-size: 42px;

	line-height: 1.3;

	color: #01a6a8;

}



#recovery dd {

	font-size: 20px;

	line-height: 1.8;

}



/* ---------------------------------------------------------

	CSS Document case

--------------------------------------------------------- */



#case .bg {

	padding-top: 80px;

}



#case h3 {

	margin-bottom: 40px;

	text-align: left;

	font-weight: 600;

	font-size: 34px;

	line-height: 1;

}



#case .slide {

	position: relative;

}



#case .slide .slick-slide {

	width: 1460px;

	height: 643px;

	padding: 0 15px;

	position: relative;

}



#case .slide .slick-slide figure {

	width: 1146px;

	height: 643px;

	margin-left: auto;

}



#case .slide .slick-slide .summary {

	width: 430px;

	padding: 30px;

	border-radius: 20px;

	background: #f5f5f5;

	text-align: left;

	transform: translateY(-50%);

	position: absolute;

	top: 50%;

	left: 15px;

}



#case .slide .slick-slide .name {

	margin-bottom: 10px;

	font-size: 15px;

	color: #666;

}



#case .slide .slick-slide .ttl {

	margin-bottom: 15px;

	font-weight: 600;

	font-size: 24px;

	line-height: 1.3;

}



#case .slide .slick-slide p {

	margin-bottom: 20px;

	font-size: 14px;

	line-height: 1.6;

}



#case .slide .slick-slide .link a {

	display: inline-block;

	vertical-align: top;

	text-decoration: none;

	font-weight: 600;

	font-size: 18px;

	line-height: 30px;

}



#case .slide .slick-slide .link a:after {

	display: inline-block;

	vertical-align: top;

	content: '';

	width: 25px;

	height: 30px;

	margin-left: 0.8em;

	background: url(/include/top/case_arrow.png) no-repeat left / auto 25px;

}



#case .slide .slick-arrow {

	width: 40px;

	height: 40px;

	border-radius: 100%;

	background: #3e3e3e;

	font-size: 0;

	transform: translateY(-50%);

	position: absolute;

	top: -80px;

	z-index: 3;

	cursor: pointer;

	transition: .4s;

}



#case .slide .slick-arrow.slick-disabled {

	background: #dcdddd;

}



#case .slide .slick-prev {

	transform: translateX(620px);

	left: 50%;

}



#case .slide .slick-next {

	transform: translateX(675px);

	left: 50%;

}



#case .slide .slick-arrow:hover {

	opacity: 0.6;

}



#case .slide .slick-arrow:after {

	content: '';

	width: 10px;

	height: 10px;

	transform: rotate(45deg) translateY(-50%);

	position: absolute;

	top: 50%;

	z-index: 4;

}



#case .slide .slick-prev:after {

	margin-top: -2px;

	border-bottom: solid 3px #fff;

	border-left: solid 3px #fff;

	left: 11px;

}



#case .slide .slick-next:after {

	margin-top: -2px;

	border-top: solid 3px #fff;

	border-right: solid 3px #fff;

	right: 20px;

}



#case .slick-dots {

	height: 10px;

	margin-top: 30px;

	font-size: 0;

}



#case .slick-dots li {

	display: inline-block;

	vertical-align: top;

	margin: 0 10px;

}



#case .slick-dots button {

	vertical-align: top;

	width: 10px;

	height: 10px;

	border: 0;

	border-radius: 100%;

	background: #cccccc;

	font-size: 0;

}



#case .slick-dots .slick-active button {

	background: #5d5d5d;

}