@charset "UTF-8";

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



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

	CSS Document common

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



.target {

	margin-top: -28vw;

	padding-top: 28vw;

}



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

	CSS Document visual

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



#visual {

	padding: 10vw 5vw;

	background: #f0f0f1;

}



#visual .row {

	text-align: left;

}



#visual h2 {

	margin-bottom: 5vw;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1.3;

}



#visual p {

	margin-bottom: 8vw;

	font-size: 3.5vw;

}



#visual .figure {

	margin-bottom: 6vw;

	text-align: center;

	position: relative;

}



#visual figure img {

	height: 50vw;

}



#visual .figure .iso {

	display: flex;

	justify-content: center;

	align-items: center;

	width: 17vw;

	height: 17vw;

	border-radius: 5px;

	background: #fff;

	font-size: 0;

	position: absolute;

	top: -12vw;

	right: 0;

}



#visual .figure .iso img {

	height: 14vw;

}



#visual .link {

	text-align: center;

}



#visual .link a {

	display: block;

	border-radius: 11vw;

	background: #fb7f1b;

	text-decoration: none;

	text-align: center;

	font-weight: 600;

	font-size: 4vw;

	line-height: 11vw;

	color: #fff;

}



#visual .link a:after {

	display: inline-block;

	vertical-align: 0.09em;

	content: '';

	width: 6px;

	height: 6px;

	margin: 0 -0.3em 0 0.5em;

	border-top: solid 2px #fff;

	border-right: solid 2px #fff;

	transform: rotate(45deg);

}



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

	CSS Document brand

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



#brand {

	margin-bottom: 15vw;

	padding: 15vw 0 5vw;

	background: #fb7f1b;

	color: #fff;

	position: relative;

}



#brand .logo {

	width: 100%;

	height: 4.6vw;

	transform: translateX(-50%);

	position: absolute;

	left: 50%;

	top: 5vw;

}



#brand .container {

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

	margin: 0 5vw;

}



#brand .box {

	width: 48%;

	margin-bottom: 8vw;

	padding-top: 5vw;

	border-top: solid 1px #fff;

	text-align: left;

	line-height: 1.7;

}



#brand .box img {

	height: 7vw;

}



#brand .box dt {

	margin: 3vw 0;

	font-weight: 600;

	font-size: 4vw;

}



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

	CSS Document about

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



#about .container {

	margin: 0 5vw 15vw;

	text-align: left;

}



#about h3 {

	margin-bottom: 5vw;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1;

	color: #000;

}



#about p.nth1 {

	margin-bottom: 5vw;

}



#about .section {

	overflow: hidden;

	margin-bottom: 5vw;

	padding: 5vw;

	border-radius: 10px;

	background: #f9f9f9;

	text-align: left;

}



#about h4 {

	margin-bottom: 15px;

	font-weight: 600;

	font-size: 3.5vw;

	line-height: 1;

}



#about .section li {

	margin-left: 1.3em;

	list-style: circle;

}



#about .section li span {

	font-weight: 600;

}



#about .about_02 {

	margin: 5vw 0;

	padding: 5vw;

	border-radius: 10px;

	background: #fffbf7;

	position: relative;

}



#about .about_02 img {

	height: 70vw;

}



#about .about_02 p {

	margin-top: 5vw;

	text-align: left;

}



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

	CSS Document anchor

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



#anchor {

	width: 100%;

	height: 14vw;

	background: #f6f7f8;

	position: sticky;

	top: 60px;

	left: 0;

	z-index: 8;

}



#anchor .container {

	display: flex;

	justify-content: space-between;

	align-items: center;

	overflow: auto;

	-webkit-overflow-scrolling: auto;

	padding: 0 5vw;

	white-space: nowrap;

}



#anchor ul {

	display: flex;

}



#anchor ul li {

	margin-right: 2em;

	font-size: 3vw;

}



#anchor ul li a {

	display: block;

	height: 14vw;

	border-bottom: solid 4px #f6f7f8;

	text-decoration: none;

	line-height: 14vw;

	color: var(--black);

}



#anchor ul li a.on {

	border-bottom: solid 4px #fb7f1b;

	opacity: 1;

}



#anchor .link a {

	display: block;

	height: 8vw;

	padding: 0 1em;

	border-radius: 5px;

	border: solid 1px #3e3e3e;

	text-decoration: none;

	font-weight: 500;

	font-size: 3vw;

	white-space: nowrap;

	line-height: 7vw;

	color: var(--black);

}



#anchor .link a:after {

	display: inline-block;

	vertical-align: 0.0em;

	content: '';

	width: 5px;

	height: 5px;

	margin-left: 0.3em;

	border-top: solid 2px #3e3e3e;

	border-right: solid 2px #3e3e3e;

	transform: rotate(45deg);

}



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

	CSS Document technology

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



#technology .bg {

	margin: 10vw 5vw 15vw;

}



#technology h3 {

	margin-bottom: 5vw;

	text-align: left;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1;

}



#technology .section {

	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: 4.5vw;

}



#technology p {

	margin-bottom: 5vw;

	text-align: left;

}



#technology .arrow {

	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 .row {

	display: none;

}



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

	display: block;

}



#technology figure {

	margin-bottom: 10vw;

	padding: 5vw;

	border-radius: 20px;

	background: #fff;

}



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

	CSS Document process

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



#process .bg {

	padding: 10vw 5vw 10vw;

	background: #f2f5fa;

}



#process .container {

	position: relative;

}



#process h3 {

	margin-bottom: 5vw;

	text-align: left;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1;

}



#process .section {

	overflow: hidden;

	margin-bottom: 5vw;

	border-radius: 10px;

	border: solid 1px #666;

	position: relative;

}



#process .box {

	display: flex;

	align-items: center;

	width: calc(100% - 6vw);

	padding: 3vw;

	border-radius: 5px;

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

	text-align: left;

	color: #fff;

	position: absolute;

	left: 3vw;

	bottom: 3vw;

}



#process figure img {

	height: 49.12506666666667vw;

}



#process .num {

	width: 10vw;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1;

}



#process .box dl {

	flex: 1;

	font-size: 3vw;

}



#process .box dt {

	margin-bottom: 1vw;

	font-weight: 600;

	font-size: 3.5vw;

	line-height: 1;

}



#process .dots {

	display: none;

}



#process .arrows {

	display: none;

}



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

	CSS Document time

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



#time .bg {

	margin: 10vw 5vw 5vw;

}



#time h3 {

	margin-bottom: 5vw;

	text-align: left;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1;

}



#time .about {

	padding: 5vw;

	border-radius: 10px;

	background: #f2f5fa;

	text-align: left;

}



#time .about .ttl {

	margin-bottom: 10px;

	font-weight: 600;

	font-size: 4vw;

}



#time .about .recoverydays {

	font-weight: 700;

	font-size: 10vw;

	line-height: 10vw;

	color: #fb7f1b;

}



#time .about .cap {

	margin-top: 3vw;

	font-size: 3vw;

	color: #666;

}



#time .about p {

	margin-top: 5vw;

	line-height: 1.7;

}



#time .about p span {

	font-size: 3vw;

	color: #666;

}



#time .flow {

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

}



#time .flow .row {

	width: 47%;

	margin-top: 6%;

	padding: 5vw 0;

	border-radius: 10px;

	background: #f2f5fa;

	position: relative;

}



#time .flow .row:nth-of-type(1):after {

	content: '';

	width: 6px;

	height: 6px;

	margin-top: -6px;

	border-top: solid 2px #666;

	border-right: solid 2px #666;

	transform: rotate(45deg);

	position: absolute;

	top: 50%;

	right: -12px;

}



#time .flow .row:nth-of-type(2):after {

	content: '';

	width: 6px;

	height: 6px;

	margin-top: -6px;

	border-bottom: solid 2px #666;

	border-right: solid 2px #666;

	transform: rotate(45deg);

	position: absolute;

	left: 50%;

	bottom: -13px;

}



#time .flow .row:nth-of-type(3):after {

	content: '';

	width: 6px;

	height: 6px;

	margin-top: -6px;

	border-left: solid 2px #666;

	border-bottom: solid 2px #666;

	transform: rotate(45deg);

	position: absolute;

	top: 50%;

	left: -14px;

}



#time .flow .row:nth-of-type(3) {

	order: 4;

}



#time .flow .row:nth-of-type(4) {

	order: 3;

}



#time .flow dt {

	font-weight: 600;

	font-size: 6vw;

}



#time .flow dd {

	color: #666;

}



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

	CSS Document price

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



#price .bg {

	padding: 10vw 5vw;

}



#price h3 {

	margin-bottom: 5vw;

	text-align: left;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1;

}



#price .section {

	overflow: hidden;

	margin-bottom: 5vw;

	border-radius: 10px;

	background: #fffbf7;

}



#price .ttl {

	height: 9vw;

	overflow: hidden;

	background: #fdb45e;

	font-weight: 600;

	font-size: 4vw;

	line-height: 9vw;

	color: #fff;

}



#price .lv2 .ttl,

#price .lv4 .ttl {

	background: #fe9420;

}



#price .row {

	padding: 5vw;

	text-align: left;

}



#price .mark li {

	padding-left: 1.5em;

	line-height: 1.7;

	position: relative;

}



#price .mark li:before {

	content: '※';

	position: absolute;

	top: 0;

	left: 0;

}



#price .price {

	margin-bottom: 15px;

	padding-bottom: 10px;

	border-bottom: solid 1px #c3c3c3;

	line-height: 1.4;

}



#price .num {

	font-weight: 600;

	font-size: 6vw;

}



#price .num span {

	font-size: 4vw;

}



#price .estimate {

	text-align: center;

	font-weight: 600;

	font-size: 6vw;

}



#price .circle li {

	margin-left: 1.3em;

	list-style: circle;

}



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

	CSS Document recovery

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



#recovery .bg {

	padding: 10vw 5vw 5vw;

	background: #f2f7fb;

}



#recovery h3 {

	margin-bottom: 5vw;

	text-align: left;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1;

}



#recovery .row {

	margin-bottom: 13vw;

}



#recovery figure {

	width: 100vw;

	height: 68.57093333333333vw;

	margin-bottom: 5vw;

	margin-left: -10vw;

}



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

	margin-left: 0;

}



#recovery dl {

	text-align: left;

}



#recovery dt {

	margin-bottom: 3vw;

	font-weight: 600;

	font-size: 4.5vw;

	line-height: 1.3;

	color: #fb7f1b;

}



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

	CSS Document case

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



#case .bg {

	margin: 10vw 0 0;

}



#case h3 {

	margin: 0 5vw 5vw;

	text-align: left;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1;

}



#case .slide {

	position: relative;

}



#case .slide .slick-slide {

	width: 86vw;

	padding: 0 2vw;

}



#case .slide .slick-slide figure {

	height: 46.01062801932367vw;

	margin-bottom: 3vw;

}



#case .slide .slick-slide .summary {

	padding: 5vw;

	border-radius: 7px;

	background: #f5f5f5;

	text-align: left;

}



#case .slide .slick-slide .name {

	margin-bottom: 10px;

	color: #666;

}



#case .slide .slick-slide .ttl {

	margin-bottom: 15px;

	font-weight: 600;

	font-size: 4.5vw;

	line-height: 1.3;

}



#case .slide .slick-slide p {

	margin-bottom: 20px;

	line-height: 1.6;

}



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

	display: inline-block;

	vertical-align: top;

	text-decoration: none;

	font-weight: 600;

	font-size: 3.5vw;

	line-height: 4vw;

}



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

	display: inline-block;

	vertical-align: top;

	content: '';

	width: 4vw;

	height: 4vw;

	margin-left: 0.8em;

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

}



#case .slide .slick-arrow {

	width: 28px;

	height: 28px;

	border-radius: 100%;

	background: #3e3e3e;

	font-size: 0;

	transform: translateY(-50%);

	position: absolute;

	top: -10vw;

	z-index: 3;

	cursor: pointer;

	transition: .4s;

}



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

	background: #dcdddd;

}



#case .slide .slick-prev {

	right: calc(42px + 5vw);

}



#case .slide .slick-next {

	right: 5vw;

}



#case .slide .slick-arrow:after {

	content: '';

	width: 6px;

	height: 6px;

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

	position: absolute;

	top: 50%;

	z-index: 4;

}



#case .slide .slick-prev:after {

	margin-top: -1px;

	border-bottom: solid 2px #fff;

	border-left: solid 2px #fff;

	left: 9px;

}



#case .slide .slick-next:after {

	margin-top: -1px;

	border-top: solid 2px #fff;

	border-right: solid 2px #fff;

	right: 15px;

}



#case .slick-dots {

	height: 2vw;

	margin-top: 5vw;

	font-size: 0;

}



#case .slick-dots li {

	display: inline-block;

	vertical-align: top;

	margin: 0 1vw;

}



#case .slick-dots button {

	vertical-align: top;

	width: 2vw;

	height: 2vw;

	border-radius: 100%;

	border: 0;

	background: #ccc;

	font-size: 0;

}



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

	background: #202020;

}