@charset "UTF-8";

@import "common.pc.css";



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

	CSS Document main

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



#main {

	margin-top: 30px;

	margin-bottom: 50px;

}



#main .slide {

	height: 700px;

}



#main .slide .section {

	display: flex;

	align-items: center;

	height: 700px;

	padding: 0 80px;

	border-radius: 20px;

	background: #efefef;

	position: relative;

}



#main .slide dl {

	text-align: left;

}



#main .slide dt {

	font-display: swap;

	font-weight: 700;

	font-size: 45px;

	line-height: 1.4;

}



#main .slide dd {

	margin-top: 30px;

	font-size: 20px;

	line-height: 1.8;

}



#main .slide .link {

	margin-top: 40px;

	text-align: left;

}



#main .slide .link a {

	display: inline-block;

	vertical-align: top;

	height: 40px;

	padding: 0 1.5em;

	border-radius: 40px;

	background: #0068b7;

	text-decoration: none;

	text-align: center;

	font-weight: 600;

	font-size: 18px;

	line-height: 38px;

	color: #fff;

}



#main .slide .main_01 .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);

}



#main .slide figure {

	height: 526px;

	position: absolute;

	bottom: 60px;

	right: 120px;

}



#main .slide .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;

}



#main .slide .iso img {

	height: 100px;

}



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

	CSS Document guide

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



#guide {

	margin-bottom: 90px;

}



#guide h2 {

	margin-bottom: 40px;

	text-align: left;

	font-weight: 600;

	font-size: 34px;

	line-height: 1.5;

}



#guide .thumbnail {

	height: 150px;

	margin-bottom: 30px;

	font-weight: 500;

	font-size: 18px;

	line-height: 40px;

	position: relative;

}



#guide .thumbnail .slick-slide {

	width: 180px;

}



#guide .thumbnail .slick-slide .section {

	width: 180px;

	height: 150px;

	overflow: hidden;

	border-bottom: solid 4px #fff;

	cursor: pointer;

	transition: .4s;

}



#guide .thumbnail .slick-current .section {

	border-bottom: solid 4px #0068b7;

	color: #0068b7;

}



#guide .thumbnail .slick-slide img {

	display: inline;

	height: 90px;

}



#guide .slide .slick-arrow {

	width: 40px;

	height: 40px;

	border-radius: 100%;

	background: #3e3e3e;

	font-size: 0;

	transform: translateY(-50%);

	position: absolute;

	top: -240px;

	z-index: 3;

	cursor: pointer;

	transition: .4s;

}



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

	background: #dcdddd;

}



#guide .slide .slick-prev {

	right: 55px;

}



#guide .slide .slick-next {

	right: 0;

}



#guide .slide .slick-arrow:hover {

	opacity: 0.6;

}



#guide .slide .slick-arrow:after {

	content: '';

	width: 10px;

	height: 10px;

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

	position: absolute;

	top: 50%;

	z-index: 4;

}



#guide .slide .slick-prev:after {

	margin-top: -2px;

	border-bottom: solid 3px #fff;

	border-left: solid 3px #fff;

	left: 11px;

}



#guide .slide .slick-next:after {

	margin-top: -2px;

	border-top: solid 3px #fff;

	border-right: solid 3px #fff;

	right: 20px;

}



#guide .slick-dots {

	display: none !important;

}



#guide .slide .section {

	display: flex;

	justify-content: space-between;

}



#guide .slide .figure {

	width: 350px;

	height: 460px;

	padding-top: 50px;

	border-radius: 20px;

	background: #f6f7f8;

	font-weight: 600;

	font-size: 24px;

}



#guide .slide .figure figure {

	display: flex;

	justify-content: center;

	align-items: center;

	width: 350px;

	height: 352px;

}



#guide .summary {

	width: 1060px;

	height: 460px;

	padding: 50px;

	border-radius: 20px;

	background: #f6f7f8;

	text-align: left;

	position: relative;

}



#guide .summary .ttl {

	font-weight: 600;

	font-size: 24px;

}



#guide .summary .flex {

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

}



#guide .summary .box {

	display: flex;

	width: 45%;

	margin-top: 50px;

}



#guide .summary figure {

	width: 50px;

}



#guide .summary figure img {

	height: 30px;

}



#guide .summary dl {

	flex: 1;

}



#guide .summary dt {

	margin-bottom: 10px;

	font-weight: 600;

	font-size: 18px;

	line-height: 34px;

}



#guide .summary dd {

	font-size: 16px;

}



#guide .summary .link {

	position: absolute;

	top: 50px;

	right: 50px;

}



#guide .summary .link a {

	display: block;

	height: 45px;

	padding: 0 1.5em;

	border-radius: 46px;

	background: #0068b7;

	text-decoration: none;

	text-align: center;

	font-weight: 600;

	font-size: 14px;

	line-height: 44px;

	color: #fff;

}



#guide .summary .link a:after {

	display: inline-block;

	vertical-align: 0.07em;

	content: '';

	width: 7px;

	height: 7px;

	margin: 0 -0.1em 0 0.3em;

	border-top: solid 2px #fff;

	border-right: solid 2px #fff;

	transform: rotate(45deg);

}



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

	CSS Document about

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



#about {

	margin-bottom: 100px;

	padding: 60px 0;

	background: #f2f7fb;

}



#about h2 {

	margin-bottom: 40px;

	text-align: left;

	font-weight: 600;

	font-size: 34px;

}



#about .row {

	display: flex;

	justify-content: space-between;

	align-items: center;

	margin-bottom: 40px;

}



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

	flex-flow: row-reverse;

}



#about figure {

	width: 590px;

	height: 388px;

}



#about dl {

	width: 790px;

	text-align: justify;

}



#about dt {

	margin-bottom: 30px;

	font-weight: 600;

	font-size: 30px;

}



#about dd {

	font-size: 18px;

}



#about dd span {

	font-weight: 600;

	color: #0068b7;

}



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

	CSS Document case

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



#case {

	margin-bottom: 100px;

}



#case h2 {

	margin-bottom: 30px;

	text-align: left;

	font-weight: 600;

	font-size: 34px;

}



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

	font-weight: 600;

	font-size: 24px;

}



#case .slide .slick-slide p {

	margin-bottom: 20px;

	font-size: 14px;

}



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

	display: inline-block;

	vertical-align: top;

	text-decoration: none;

	font-weight: 600;

	font-size: 18px;

	line-height: 26px;

}



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

	display: inline-block;

	vertical-align: top;

	content: '';

	width: 22px;

	height: 26px;

	margin-left: 0.5em;

	background: url(../top/case_arrow.png) no-repeat left / 100% auto;

}



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

}



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

	CSS Document faq

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



#faq {

	padding: 80px 0 120px;

	background: #f2f7fb;

}



#faq .container {

	position: relative;

}



#faq h2 {

	margin-bottom: 30px;

	text-align: left;

	font-weight: 600;

	font-size: 34px;

	line-height: 1.5;

}



#faq .thumbnail {

	height: 70px;

}



#faq .thumbnail .slick-slide {

	min-width: 120px;

	height: 56px;

	margin-right: 20px;

	padding: 0 2em;

	border-radius: 10px;

	background: #fff;

	text-align: center;

	font-weight: 600;

	font-size: 20px;

	line-height: 58px;

	cursor: pointer;

	transition: .4s;

}



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

	background: #0068b7;

	color: #fff;

}



#faq .slide .slick-arrow {

	width: 40px;

	height: 40px;

	border-radius: 100%;

	background: #3e3e3e;

	font-size: 0;

	transform: translateY(-50%);

	position: absolute;

	top: -50px;

	z-index: 3;

	cursor: pointer;

	transition: .4s;

}



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

	background: #dcdddd;

}



#faq .slide .slick-prev {

	right: 55px;

}



#faq .slide .slick-next {

	right: 0;

}



#faq .slide .slick-arrow:hover {

	opacity: 0.6;

}



#faq .slide .slick-arrow:after {

	content: '';

	width: 10px;

	height: 10px;

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

	position: absolute;

	top: 50%;

	z-index: 4;

}



#faq .slide .slick-prev:after {

	margin-top: -2px;

	border-bottom: solid 3px #fff;

	border-left: solid 3px #fff;

	left: 11px;

}



#faq .slide .slick-next:after {

	margin-top: -2px;

	border-top: solid 3px #fff;

	border-right: solid 3px #fff;

	right: 20px;

}



#faq .slide .slick-list {

	height: auto !important;

}



#faq .slide .slick-slide {

	position: relative;

}



#faq .slide .slick-slide figure {

	width: 428px;

	height: 265px;

	transform: translateY(-50%);

	position: absolute;

	top: 50%;

	left: 0;

}



#faq .slide .slick-slide .section {

	width: 1052px;

	margin-left: auto;

	padding: 90px;

	border-radius: 20px;

	background: #fff;

	text-align: left;

}



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

	padding-top: 15px;

	border-top: solid 1px #efefef;

}



#faq .ttl {

	margin-bottom: 15px;

	padding-left: 60px;

	font-weight: 600;

	font-size: 18px;

	line-height: 40px;

	color: #000;

	position: relative;

	cursor: pointer;

}



#faq .ttl:before {

	content: 'Q';

	width: 40px;

	height: 40px;

	border-radius: 100%;

	background: #1e1e1e;

	text-align: center;

	line-height: 40px;

	color: #fff;

	transform: translateY(-50%);

	position: absolute;

	top: 50%;

	left: 0;

}



#faq .ttl .arrow {

	width: 40px;

	height: 40px;

	position: absolute;

	top: 0;

	right: 0;



	&:before {

		content: '';

		width: 11px;

		height: 11px;

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

		position: absolute;

		top: 40%;

		left: 50%;

		border-top: 2px solid #1e1e1e;

		border-right: 2px solid #1e1e1e;

		transition: 0.3s ease;

	}

}



#faq .ttl.is-open .arrow {

	&:before {

		top: 60%;

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

	}

}



#faq .row {

	display: none;

	width: 810px;

	margin-bottom: 20px;

	padding-left: 60px;

}



#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: 80px 0 80px;

	background: #dcdcdc;

}



#voice .container {

	width: 1140px;

}



#voice h2 {

	margin-bottom: 50px;

	font-weight: 500;

	font-size: 35px;

	line-height: 1;

}



#voice .tab {

	margin-bottom: 50px;

	border-top: solid 2px #333;

}



#voice .tab li {

	float: left;

	width: 25%;

	height: 46px;

	border-right: solid 1px #333;

	font-size: 18px;

	line-height: 42px;

	cursor: pointer;

}



#voice .tab li:nth-child(1) {

	border-left: solid 1px #333;

}



#voice .tab li.active {

	background: #333;

	color: #fff;

}



#voice .tab li:hover {

	text-decoration: underline;

	opacity: 0.6;

}



#voice .tab li.active:hover {

	text-decoration: none;

	opacity: 1;

	cursor: default;

}



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

	CSS Document voice > tab_box

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



#voice .tab_box {

	display: none;

}



#voice .tab_box.active {

	display: block;

}



#voice .tab_box dl {

	display: flex;

	margin-bottom: 20px;

}



#voice .tab_box dt {

	width: 216px;

	height: 156px;

	margin-right: 20px;

}



#voice .tab_box dt img {

	border: solid 3px #fff;

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

}



#voice_01 dd ,

#voice_03 dd {

	flex: 1;

	font-size: 14px;

	line-height: 1.6;

}



#voice_02 dd ,

#voice_04 dd {

	width: 310px;

	font-size: 14px;

	line-height: 1.6;

}



#voice .tab_box dd h3 {

	margin-bottom: 15px;

	font-size: 16px;

	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;

}



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

	CSS Document footer

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



#footer {

	margin-top: 0;

}