@charset "UTF-8";

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



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

	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: 424px;

	position: absolute;

	top: 130px;

	right: 130px;

}



#visual figure img {

	height: 424px;

}



#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;

	width: 340px;

	height: 40px;

	border-radius: 40px;

	background: rgba(243, 176, 15, 1);

	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: rgba(243, 176, 15, 1);

	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: 20px;

	text-align: left;

	font-weight: 500;

	font-size: 20px;

	line-height: 1;

}



#about .ttl {

	margin-top: 60px;

	font-weight: 500;

	font-size: 24px;

}



#about .nth1 {

	margin-bottom: 30px;

	font-size: 18px;

}



#about strong {

	font-weight: 500;

}



#about .flex {

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

}



#about .section {

	padding: 40px 40px 30px;

	border-radius: 20px;

	background: #f9f9f9;

}



#about .about_01 {

	width: 456px;

}



#about .about_01 ul {

	margin-top: 7px;

}



#about .about_01 li {

	margin-left: 1.3em;

	list-style: circle;

}



#about .about_02 li {

	margin-bottom: 20px;

}



#about .about_03 {

	background: #f2f5fa;

}



#about .about_03 li {

	margin-bottom: 20px;

}



#about .about_04 {

	width: 100%;

	font-size: 18px;

}



#about .about_04 .flex {

	align-items: center;

}



#about .about_04 .row {

	line-height: 1.6;

}



#about .about_04 li {

	margin-bottom: 20px;

}



#about .about_04 figure {

	height: 355px;

}



#about .about_04 .caption {

	width: 540px;

	margin-top: -20px;

	margin-left: 100px;

	margin-bottom: 30px;

	font-weight: 500;

	color: #666;

}



#about .about_04 span {

	color: var(--black);

}



#about .about_05 {

	margin-top: 20px;

	padding: 40px 50px;

}



#about .about_05 img {

	box-shadow: 0 30px 30px rgba(0, 0, 0, 0.1);

}



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

	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 rgba(243, 176, 15, 1);

	opacity: 1;

}



#anchor ul li a.on {

	border-bottom: solid 4px rgba(243, 176, 15, 1);

	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 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(../images/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(../images/process_thumb_02.webp);

}



#process .process_03:after {

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

}



#process .process_04:after {

	background-image: url(../images/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: rgba(252, 251, 234, 0.6);

	text-align: left;

}



#time .about .row {

	width: 480px;

}



#time .about .ttl {

	margin-bottom: 20px;

	font-weight: 500;

	font-size: 22px;

	line-height: 1.4;

}



#time .about .recoverydays {

	height: 74px;

	font-weight: 700;

	font-size: 70px;

	line-height: 70px;

	color: rgba(243, 176, 15, 1);

}



#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 0;

	border-radius: 20px;

	background: #f6f7f8;

	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 .time_03 dt,

#time .flow .time_04 dt {

	font-size: 50px;

}



#time .flow dd {

	font-size: 18px;

	line-height: 1.6;

	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: 32%;

	overflow: hidden;

	border-radius: 20px;

	background: #f6f7f8;

}



#price .ttl {

	height: 48px;

	overflow: hidden;

	background: rgba(243, 176, 15, 0.5);

	font-weight: 600;

	font-size: 24px;

	line-height: 52px;

	color: #fff;

}



#price .lv2 .ttl {

	background: rgba(243, 176, 15, 0.8);

}



#price .lv3 .ttl {

	background: #e09f06;

}



#price .row {

	padding: 40px 50px;

	text-align: left;

}



#price .price {

	margin-bottom: 30px;

	padding-bottom: 30px;

	border-bottom: solid 1px #c3c3c3;

	text-align: center;

}



#price .num {

	font-weight: 600;

	font-size: 40px;

	line-height: 1;

}



#price .num span {

	font-size: 28px;

}



#price .circle {

	margin-bottom: 15px;

}



#price .circle li {

	margin-left: 1.3em;

	font-size: 16px;

	line-height: 1.7;

	list-style: circle;

}



#price .circle li span {

	display: inline-block;

	vertical-align: top;

	width: 120px;

}



#price .mark li {

	padding-left: 24px;

	font-size: 16px;

	line-height: 1.7;

	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: rgba(243, 176, 15, 1);

}



#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;

}