/* service.CSS */
@charset "UTF-8";

#service-image {
	background-image: url('/assets/img/service/service-image.jpg');
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #090E11;
	width: 100%;
	max-width: 100%;
	height: 30vw;
	max-height: 300px;
	clear: both;
}
#service-image p {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 30vw;
	max-height: 300px;
	margin: 0 auto;
	padding: 0;
}
#service-image p b {
	display: flex;
	position: absolute;
	justify-content: start;
	align-items: end;
	color: #D1741A;
	font-size: 8vw;
	font-weight: bold;
	bottom: 0.5em;
	left: 0.3em;
}

#service-1st {
	position: relative;
	padding: 20px 0;
	margin: 0 auto;
}
#service-1st h2 {
	display: block;
	width: 96%;
	max-width: 1000px;
	text-align: center;
	margin: 0 auto;
	padding: 2.0em 0;
	font-size: 5.0vw;
}
#service-1st div {
	display: block;
	width: 96%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
}
#service-1st div dl {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
#service-1st div dl dt {
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 0;
}
#service-1st div dl dt img {
	width: 50%;
	margin: 0 auto;
}
#service-1st div dl dd {
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 0;
}
#service-1st div dl dd p {
}

#service-2nd {
	position: relative;
	padding: 40px 0 10px;
	margin: 0 auto;
}
#service-2nd h2 {
	display: block;
	width: 96%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0.1em 0 0.1em 1.7em;
	font-size: 6.0vw;
	background-image: url('/assets/img/common/icon.png');
	background-position-x: left;
	background-position-y: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#service-2nd div {
	display: block;
	width: 96%;
	max-width: 1000px;
	margin: 30px auto;
	padding: 0;
}
#service-2nd div ul {
	display: block;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
}
#service-2nd div ul li {
	display: block;
	width: 100%;
	margin: 0 auto 20px;
	padding: 0;
	border-left: 10px solid #D1741A;
}
#service-2nd div ul li span {
	display: block;
	width: calc(100% - 4px);
	margin: 0 0 0 4px;
	padding: 10px;
	border: 1px solid #999;
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.1), 4px 4px 10px 0px rgba(0, 0, 0, 0.1);
}
#service-2nd div ul li span dl {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
#service-2nd div ul li span dl dt {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 10px 0;
}
#service-2nd div ul li span dl dt img {
	width: 25%;
	max-width: 80px;
	margin: 0 auto;
}
#service-2nd div ul li span dl dt p {
	display: block;
	width: 100%;
	margin: 0;
	padding: 15px 0 0;
	text-align: center;
	font-weight: bold;
	font-size: 5.0vw;
}
#service-2nd div ul li span dl dt p b {
	font-size: 9.0vw;
}
#service-2nd div ul li span dl dd {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
#service-2nd div ul li span dl dd p {
}
#service-2nd div ul li span dl dd b {
	display: block;
	font-weight: bold;
	font-size: large;
	padding: 1.0em 0 1.0em 1.0em;
	text-indent: -1.0em;
}
#service-2nd div ul li span dl dd b:before {
	content: "▶";
}

#service-3rd {
	position: relative;
	padding: 0 0 40px;
	margin: 0 auto;
}
#service-3rd div {
	display: block;
	width: 96%;
	max-width: 1000px;
	margin: 0 auto 30px;
	padding: 0;
}
#service-3rd div > p {
	display: block;
	margin: 0 auto;
	padding: 0 0 1.0em;
	font-size: large;
	font-weight: bold;
}
#service-3rd div .faq-box {
	display: block;
	width: 100%;
	max-width: 900px;
	margin: 0 auto 30px;
	padding: 0;
	border: 10px solid #231916;
	background: #231916;
	border-radius: 15px;
}
#service-3rd div .faq-box dl {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
#service-3rd div .faq-box dl dt {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.5em 0.5em 0.5em calc(45px + 1.5em);
	background-image: url('/assets/img/service/service-3rd-q.png');
	background-position-x: 0.5em;
	background-position-y: 0.5em;
	background-repeat: no-repeat;
	background-size: 45px auto;
	background-color: #231916;
	color: #fff;
}
#service-3rd div .faq-box dl dt p {
	font-size: large;
	font-weight: bold;
}
#service-3rd div .faq-box dl dt p small {
	font-size: small;
}
#service-3rd div .faq-box dl dd {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.5em 0.5em 0.5em calc(45px + 1.5em);
	background-image: url('/assets/img/service/service-3rd-a.png');
	background-position-x: 0.5em;
	background-position-y: 0.5em;
	background-repeat: no-repeat;
	background-size: 45px auto;
	background-color: #fff;
}
#service-3rd div .faq-box dl dd > p {
}
#service-3rd div .faq-box dl dd > p b {
	font-weight: bold;
	font-size: large;
}
#service-3rd div .faq-box dl dd .detail {
	display: block;
	width: 100px;
	margin: 0 auto;
	cursor: pointer;
}
#service-3rd div .faq-box dl dd .detail img {
	width: 100%;
}
#service-3rd div .faq-box dl dd .box {
	display: none;
}
#service-3rd div .faq-box dl dd .box b {
	font-weight: bold;
}
#service-3rd div .faq-box dl dd .box .BTclose {
	display: block;
	width: 60px;
	margin: 0 auto;
	cursor: pointer;
}
#service-3rd div .faq-box dl dd .box .BTclose img {
	width: 100%;
}

#service-4th {
	background-image: url('/assets/img/service/service-4th.jpg');
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #090E11;
	width: 100%;
	max-width: 100%;
	height: 30vw;
	max-height: 300px;
	clear: both;
}
#service-4th span {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 30vw;
	max-height: 300px;
	margin: 0 auto;
	padding: 0;
}
#service-4th span h2 {
	display: flex;
	position: absolute;
	justify-content: start;
	align-items: end;
	color: #D1741A;
	font-size: 8vw;
	font-weight: bold;
	bottom: 0.3em;
	left: 0.3em;
}

#service-5th {
	position: relative;
	padding: 40px 0 10px;
	margin: 0 auto;
}
#service-5th div {
	display: block;
	width: 96%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
}
#service-5th div img {
	width: 100%;
}

#service-6th {
	position: relative;
	padding: 40px 0 10px;
	margin: 0 auto;
}
#service-6th div {
	display: block;
	width: 96%;
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
}
#service-6th div h2 {
	display: block;
	width: 14.0em;
	margin: 0 auto;
	padding: 0.4em 0;
	background: #231916;
	color: #D1741A;
	border-radius: 1.8em;
	text-align: center;
	font-weight: bold;
	font-size: 6.0vw;
}
#service-6th div > p {
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 0.5em 0;
	text-align: center;
	font-size: 3.5vw;
}
#service-6th div table {
	width: 100%;
	border: 0;
	margin: 20px 0;
	padding: 0;
}
#service-6th div table tr {
}
#service-6th div table tr th {
	width: 80px;
	border: 0;
	margin: 0;
	padding: 18px 0;
	vertical-align: top;
	background-position-x: center, center;
	background-position-y: top, bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: 100% auto, 13px 100%;
	color: #231916;
	font-size: 34px;
	font-weight: bold;
	text-align: center;
}
#service-6th div table tr:nth-child(1) th {
	background-image: url('/assets/img/service/service-6th-01.png'),url('/assets/img/service/service-6th-line.png');
	background-size: 100% auto, 13px 95%;
}
#service-6th div table tr:nth-child(2) th {
	background-image: url('/assets/img/service/service-6th-02.png'),url('/assets/img/service/service-6th-line.png');
}
#service-6th div table tr:nth-child(3) th {
	background-image: url('/assets/img/service/service-6th-03.png'),url('/assets/img/service/service-6th-line.png');
}
#service-6th div table tr:nth-child(4) th {
	background-image: url('/assets/img/service/service-6th-04.png'),url('/assets/img/service/service-6th-line.png');
}
#service-6th div table tr:nth-child(5) th {
	background-image: url('/assets/img/service/service-6th-05.png'),url('/assets/img/service/service-6th-line.png');
}
#service-6th div table tr:nth-child(6) th {
	background-image: url('/assets/img/service/service-6th-06.png'),url('/assets/img/service/service-6th-line.png');
}
#service-6th div table tr:nth-child(7) th {
	background-image: url('/assets/img/service/service-6th-07.png'),url('/assets/img/service/service-6th-line-end.png'),url('/assets/img/service/service-6th-line.png');
	background-position-x: center, center, center;
	background-position-y: top, bottom, bottom;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: 100% auto, 13px auto, 13px 100%;
}
#service-6th div table tr td {
	width: calc(100% - 80px);
	border: 0;
	margin: 0;
	padding: 1.0em 0 18px 1.0em;
	vertical-align: top;
}
#service-6th div table tr td b {
	font-size: 5.0vw;
	font-weight: bold;
}
#service-6th div table tr td p {
}

#service-7th {
	background-image: url('/assets/img/service/service-7th.jpg');
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #090E11;
	width: 100%;
	max-width: 100%;
	height: 30vw;
	max-height: 300px;
	clear: both;
}
#service-7th span {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 30vw;
	max-height: 300px;
	margin: 0 auto;
	padding: 0;
}
#service-7th span h2 {
	display: flex;
	position: absolute;
	justify-content: start;
	align-items: end;
	color: #D1741A;
	font-size: 8vw;
	font-weight: bold;
	bottom: 0.3em;
	left: 0.3em;
}

#service-8th {
	position: relative;
	padding: 20px 0 0;
	margin: 0 auto;
}
#service-8th div {
	display: block;
	width: 96%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
}
#service-8th div > p {
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 0.5em 0;
}
#service-8th div ul {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
#service-8th div ul > li {
	display: block;
	width: 100%;
	margin: 0px 0px 20px;
	padding: 0 0 1.0em 0;
	border: 1px solid #231916;
	background: #fff;
	border-radius: 15px;
}
#service-8th div ul > li dl {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
#service-8th div ul > li dl dt {
	display: block;
	width: 100%;
	margin: 0px;
	padding: 0.8em 0;
	background: #231916;
	border-radius: 15px 15px 0 0;
	text-align: center;
	font-size: 6.0vw;
	font-weight: bold;
}
#service-8th div ul > li:nth-child(1) dl dt {
	color: #DBCA3C;
}
#service-8th div ul > li:nth-child(2) dl dt {
	color: #D69D29;
}
#service-8th div ul > li:nth-child(3) dl dt {
	color: #D1741A;
}
#service-8th div ul > li dl dd {
	display: block;
	width: 100%;
	margin: 0;
	padding: 1.5em;
}
#service-8th div ul > li dl dd ol {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
#service-8th div ul > li dl dd ol li {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 1.0em 55px;
	background-position-x: left;
	background-position-y: top;
	background-repeat: no-repeat;
	background-size: 35px auto;
}
#service-8th div ul > li dl dd ol li:nth-child(1) {
	background-image: url('/assets/img/service/service-8th-icon-01.png');
}
#service-8th div ul > li dl dd ol li:nth-child(2) {
	background-image: url('/assets/img/service/service-8th-icon-02.png');
}
#service-8th div ul > li dl dd ol li:nth-child(3) {
	background-image: url('/assets/img/service/service-8th-icon-03.png');
}
#service-8th div ul > li dl dd ol li:nth-child(4) {
	background-image: url('/assets/img/service/service-8th-icon-04.png');
}
#service-8th div ul > li dl dd ol li:nth-child(5) {
	background-image: url('/assets/img/service/service-8th-icon-05.png');
}
#service-8th div ul > li dl dd ol li:nth-child(6) {
	background-image: url('/assets/img/service/service-8th-icon-06.png');
}
#service-8th div ul > li dl dd ol li p {
}
#service-8th div ul > li dl dd ol li p b {
	display: block;
	font-weight: bold;
}
#service-8th div ul > li dl dd ol li p small {
	font-size: small;
}


@media screen and (min-width: 751px) {
	/* 751px以上に適用されるCSS（PC用） */
	
	#service-1st h2 {
		font-size: 30px;
		line-height: 180%;
	}
	#service-1st div dl dt {
		float: right;
		width: 50%;
		margin: 0;
		padding: 0;
	}
	#service-1st div dl dt img {
		width: 70%;
		max-width: 300px;
	}
	#service-1st div dl dd {
		float: left;
		width: 50%;
	}
	#service-1st div dl dd p {
		line-height: 240%;
	}

	#service-2nd h2 {
		font-size: 36px;
	}
	#service-2nd div ul li {
		border-left: 18px solid #D1741A;
	}
	#service-2nd div ul li span dl dt {
		float: left;
		width: 240px;
	}
	#service-2nd div ul li span dl dt img {
		width: 120px;
	}
	#service-2nd div ul li span dl dt p {
		padding: 8px 0 0;
		font-size: 16px;
	}
	#service-2nd div ul li span dl dt p b {
		font-size: 32px;
	}
	#service-2nd div ul li span dl dd {
		float: right;
		width: calc(100% - 240px);
		vertical-align: top;
	}

	#service-3rd div > p {
		text-align: center;
		padding: 0 0 2.0em;
	}
	#service-3rd div .faq-box dl dt {
		padding: 2.0em 1.0em 2.0em calc(90px + 2.0em);
		background-position-x: 1.0em;
		background-position-y: 1.5em;
		background-size: 90px auto;
	}
	#service-3rd div .faq-box dl dt p {
		font-size: x-large;
	}
	#service-3rd div .faq-box dl dd {
		padding: 2.0em 1.0em 2.0em calc(90px + 2.0em);
		background-position-x: 1.0em;
		background-position-y: 1.5em;
		background-size: 90px auto;
	}

	#service-6th {
		padding: 80px 0 10px;
	}
	#service-6th div h2 {
		font-size: 32px;
	}
	#service-6th div > p {
		font-size: 16px;
	}
	#service-6th div table tr td b {
		font-size: 36px;
	}

	#service-8th {
		padding: 40px 0 0;
	}
	#service-8th div > p {
		padding: 0 0 2.0em;
	}
	#service-8th div ul {
		display: flex;
	}
	#service-8th div ul > li {
		display: block;
		align-items: stretch;
		width: calc((100% - 22px) / 3);
		margin: 0 8px 20px 0;
		vertical-align: top;
	}
	#service-8th div ul > li:last-child {
		margin: 0 0 20px 0;
	}
	#service-8th div ul > li dl dt {
		font-size: 24px;
	}
	#service-8th div p.last {
		text-align: right;
	}
}

@media screen and (min-width: 1200px) {

	#service-image {
		background-size: contain;
	}
	#service-image p b {
		font-size: 100px;
		bottom: 50px;
		left: 30px;
	}
	
	#service-4th {
		background-size: contain;
	}
	#service-4th span h2 {
		font-size: 100px;
		bottom: 15px;
		left: 30px;
	}
	
	#service-7th {
		background-size: contain;
	}
	#service-7th span h2 {
		font-size: 100px;
		bottom: 15px;
		left: 30px;
	}
}