@charset "UTF-8";

@import "common.sp.css";



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

	CSS Document guide

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



#main {

	padding: 5vw 5vw 10vw;

}





#main .slide .section {

	overflow: hidden;

	padding: 5vw 5vw 10vw;

	border-radius: 10px;

	background: #efefef;

	line-height: 1.5;

}



#main .slide dl {

	margin-bottom: 5vw;

	text-align: left;

}



#main .slide dt {

	margin-bottom: 3vw;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1.3;

}



#main .slide dd .link {

	margin-top: 3vw;

}



#main .slide .link a {

	display: block;

	border-radius: 11vw;

	background: #0068b7;

	text-decoration: none;

	text-align: center;

	font-weight: 600;

	font-size: 4vw;

	line-height: 11vw;

	color: #fff;

}



#main .slide .main_01 .link a:after {

	display: inline-block;

	vertical-align: 0.08em;

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

}



#main .slide .figure {

	text-align: center;

	position: relative;

}



#main .slide .figure figure img {

	display: inline;

	height: 50vw;

}



#main .slide .figure .iso {

	height: 10vw;

	position: absolute;

	top: 0;

	right: 0;

}



#main .slide .figure .iso img {

	height: 10vw;

}



#main .slide .slick-arrow {

	display: none !important;

}



#main .slick-dots {

	height: 2px;

	font-size: 0;

	transform: translateX(-50%);

	position: absolute;

	bottom: 2vw;

	left: 50%;

	z-index: 3;

}



#main .slick-dots li {

	display: inline-block;

	vertical-align: top;

	margin: 0 1vw;

}



#main .slick-dots button {

	vertical-align: top;

	width: 10vw;

	height: 2px;

	border: 0;

	background: #e4e4e4;

	font-size: 0;

}



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

	background: #282728;

}



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

	CSS Document guide

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



#guide {

	margin: 0 5vw 15vw;

}



#guide h2 {

	margin-bottom: 12vw;

	text-align: left;

	font-weight: 600;

	font-size: 4vw;

	line-height: 1.6;

}



#guide .thumbnail {

	height: 18vw;

	overflow: hidden;

	margin-right: -1px;

	margin-bottom: 5vw;

	font-weight: 600;

	font-size: 2vw;

	line-height: 1.3;

}



#guide .thumbnail .slick-slide .section {

	padding-bottom: 3vw;

	border-bottom: solid 2px #fff;

}



#guide .thumbnail .slick-current .section {

	border-bottom: solid 2px #0068b7;

	color: #0068b7;

}



#guide .thumbnail .slick-slide img {

	display: inline;

	height: 9vw;

	margin-bottom: 2vw;

}



#guide .slide .section {

	padding: 5vw 5vw 6vw;

	border-radius: 20px;

	background: #f6f7f8;

}



#guide .slide .name {

	margin-bottom: 5vw;

	font-weight: 600;

	font-size: 4.5vw;

}



#guide .slide .figure img {

	display: inline;

	height: 50vw;

}



#guide .summary {

	text-align: left;

}



#guide .summary .ttl {

	margin-bottom: 5vw;

	font-weight: 600;

	font-size: 4vw;

}



#guide .summary .box {

	display: flex;

	margin-bottom: 6vw;

}



#guide .summary figure {

	width: 50px;

}



#guide .summary figure img {

	height: 30px;

}



#guide .summary dl {

	flex: 1;

}



#guide .summary dt {

	margin-bottom: 2vw;

	font-weight: 600;

	font-size: 3.5vw;

	line-height: 1;

}



#guide .summary dd {

	font-size: 3.5vw;

	line-height: 1.6;

}



#guide .summary .link a {

	display: block;

	height: 9vw;

	margin: 0 auto;

	border-radius: 9vw;

	background: #0068b7;

	text-decoration: none;

	text-align: center;

	font-weight: 600;

	font-size: 3vw;

	line-height: 9.5vw;

	color: #fff;

}



#guide .summary .link a:after {

	display: inline-block;

	vertical-align: 0.05em;

	content: '';

	width: 6px;

	height: 6px;

	margin: 0 -0.4em 0 0.4em;

	border-top: solid 2px #fff;

	border-right: solid 2px #fff;

	transform: rotate(45deg);

}





#guide .slide .slick-arrow {

	width: 28px;

	height: 28px;

	border-radius: 100%;

	background: #3e3e3e;

	font-size: 0;

	transform: translateY(-50%);

	position: absolute;

	top: -29vw;

	z-index: 3;

	cursor: pointer;

	transition: .4s;

}



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

	background: #dcdddd;

}



#guide .slide .slick-prev {

	right: 42px;

}



#guide .slide .slick-next {

	right: 0;

}



#guide .slide .slick-arrow:after {

	content: '';

	width: 6px;

	height: 6px;

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

	position: absolute;

	top: 50%;

	z-index: 4;

}



#guide .slide .slick-prev:after {

	margin-top: -1px;

	border-bottom: solid 2px #fff;

	border-left: solid 2px #fff;

	left: 9px;

}



#guide .slide .slick-next:after {

	margin-top: -1px;

	border-top: solid 2px #fff;

	border-right: solid 2px #fff;

	right: 15px;

}



#guide .slick-dots {

	height: 2vw;

	margin-top: 5vw;

	font-size: 0;

}



#guide .slick-dots li {

	display: inline-block;

	vertical-align: top;

	margin: 0 1vw;

}



#guide .slick-dots button {

	vertical-align: top;

	width: 2vw;

	height: 2vw;

	border-radius: 100%;

	border: 0;

	background: #ccc;

	font-size: 0;

}



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

	background: #202020;

}



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

	CSS Document about

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



#about {

	margin-bottom: 10vw;

	padding: 10vw 5vw 5vw;

	background: #f2f7fb;

}



#about h2 {

	margin-bottom: 5vw;

	font-weight: 600;

	font-size: 6vw;

}



#about .row {

	margin-bottom: 13vw;

}



#about figure {

	height: 59.19009661835749vw;

	margin-bottom: 5vw;

}



#about dl {

	text-align: left;

}



#about dt {

	margin-bottom: 1vw;

	font-weight: 600;

	font-size: 4.5vw;

}



#about dd span {

	font-weight: 600;

	color: #0068b7;

}



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

	CSS Document case

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



#case {

	margin: 0 0 15vw;

}



#case h2 {

	margin: 0 5vw 5vw;

	text-align: left;

	font-weight: 600;

	font-size: 6vw;

}



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

	font-weight: 600;

	font-size: 4.5vw;

}



#case .slide .slick-slide p {

	margin-bottom: 20px;

}



#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(../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;

}



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

	CSS Document recovery

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



#recovery {

	margin-bottom: 15vw;

	padding: 10vw 5vw;

	background: #f2f7fb;

}



#recovery h2 {

	margin-bottom: 5vw;

	font-weight: 600;

	font-size: 6vw;

}



#recovery .box {

}



#recovery .section {

	margin-bottom: 20px;

	border-bottom: solid 1px #c4c4c4;

}



#recovery .section:last-of-type {

	margin-bottom: 0;

	border-bottom: 0;

}



#recovery .ttl {

	margin-bottom: 10px;

	text-align: left;

	font-weight: 600;

	font-size: 4.5vw;

}



#recovery p {

	margin-bottom: 5vw;

	text-align: left;

}



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

		}

	}

}



#recovery .is-open .arrow {

	.inn {

		&:before {

			top: 60%;

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

		}

	}

}



#recovery .row {

	display: none;

}



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

	display: block;

}



#recovery figure {

	margin-bottom: 10vw;

	padding: 5vw;

	border-radius: 20px;

	background: #fff;

}



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

	CSS Document faq

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



#faq {

	margin: 0 5vw 15vw;

}



#faq h2 {

	margin-bottom: 5vw;

	text-align: left;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1.5;

}



#faq .thumbnail {

	margin-bottom: 5vw;

}



#faq .thumbnail .slick-slide {

	width: 30vw;

	height: 9vw;

	margin-right: 3vw;

	border-radius: 6px;

	background: #f5f5f5;

	text-align: center;

	font-weight: 600;

	line-height: 9vw;

	transition: .4s;

}



#faq .thumbnail .slick-slide.slick-current {

	background: #0068b7;

	color: #fff;

}



#faq .slide .slick-arrow {

	display: none !important;

}



#faq .slide .slick-list {

	height: auto !important;

}



#faq .slide .slick-slide figure {

	height: 55.78212560386473vw;

	margin-bottom: 3vw;

}



#faq .slide .slick-slide .section {

	padding: 5vw;

	border-radius: 12px;

	background: #f7f7f7;

	text-align: left;

}



#faq .box:not(:first-of-type) {

	padding-top: 5vw;

	border-top: solid 1px #efefef;

}



#faq .ttl {

	margin-bottom: 5vw;

	padding-left: 40px;

	padding-right: 40px;

	font-weight: 600;

	font-size: 4vw;

	line-height: 1.4;

	color: #000;

	position: relative;

}



#faq .ttl:before {

	content: 'Q';

	width: 28px;

	height: 28px;

	border-radius: 100%;

	background: #1e1e1e;

	text-align: center;

	font-size: 16px;

	line-height: 28px;

	color: #fff;

	transform: translateY(-50%);

	position: absolute;

	top: 50%;

	left: 0;

}



#faq .ttl .arrow {

	width: 28px;

	height: 28px;

	position: absolute;

	top: 0;

	right: 0;



	&:before {

		content: '';

		width: 9px;

		height: 9px;

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

		position: absolute;

		top: 25%;

		left: 50%;

		border-top: 2px solid #1e1e1e;

		border-right: 2px solid #1e1e1e;

		transition: 0.3s ease;

	}

}



#faq .ttl.is-open .arrow {

	&:before {

		top: 52%;

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

	}

}



#faq .row {

	display: none;

	margin-bottom: 5vw;

}



#faq .first .row {

	display: block;

}



#faq .row p:not(:last-of-type) {

	margin-bottom: 1em;

}



#faq .row span {

	color: #000;

}



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

	CSS Document voice

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



#voice {

	padding: 12vw 5vw;

	background: #dcdcdc;

}



#voice h2 {

	margin-bottom: 10vw;

	font-weight: 600;

	font-size: 6vw;

	line-height: 1;

}



#voice .tab {

	display: flex;

	justify-content: space-between;

	margin-bottom: 8vw;

	border-top: solid 2px #333;

	border-left: solid 1px #333;

}



#voice .tab li {

	display: flex;

	justify-content: center;

	align-items: center;

	height: 3em;

	width: 25%;

	border-right: solid 1px #333;

}



#voice .tab li.active {

	background: #333;

	color: #fff;

}



#voice .tab li span {

	font-size: 3vw;

	line-height: 1.2;

}



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

	CSS Document common > voice > tab_box

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



#voice .tab_box {

	display: none;

}



#voice .tab_box.active {

	display: block;

}



#voice .tab_box .f_right {

	padding-top: 6vw;

	border-top: solid 1px #c0c0c0;

}



#voice .tab_box dl {

	margin-bottom: 6vw;

	padding-top: 6vw;

	border-top: solid 1px #c0c0c0;

}



#voice .tab_box dl:nth-child(1) {

	padding-top: 0;

	border-top: 0;

}



#voice .tab_box dt {

	margin-bottom: 5vw;

	text-align: center;

}



#voice .tab_box dt img {

	height: 140px;

	border: solid 3px #fff;

	box-shadow:rgba(0, 0, 0, 0.15) 1px 2px 2px 0px;

}



#voice .tab_box dd {

	font-size: 3.5vw;

	line-height: 1.6;

}



#voice .tab_box dd h3 {

	margin-bottom: 3vw;

	font-size: 4vw;

	line-height: 1;

}



#voice .tab_box dd p {

	margin-bottom: 5px;

}



#voice .tab_box dd strong {

	display: inline-block;

	vertical-align: top;

	margin-bottom: 4px;

	font-weight: 600;

}



#voice .tab_box dd .arrow {

	display: inline-block;

	padding: 6px 0 10px;

	vertical-align: top;

}



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

	CSS Document footer

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



#footer {

	margin-top: 0;

}