@charset "UTF-8";
/* CSS Document */


.external{
	width: 85%;
	max-width: 980px;
	margin-left:auto;
	margin-right:auto;
}

.external h1{
	text-align: center;
	font-weight: 700;
	font-size: 1.7em;
}

.external .exBody{margin-top: 4em;}
.external .exBody .text{margin-top: 3em;}
.external .exBody .text h3{
	font-weight: 700;
	font-size: 1.06em;
	padding-bottom: 0.3em;
}
.external .exBody .text p{
	line-height: 1.9;
	text-align: justify;
	text-justify: inter-ideograph;
	letter-spacing: 0.02em;
}
.external .exBody .text p + p{margin-top: 1.2em;}
.external .exBody .text p.end{text-align: right;}



.external .serviceList{
	width: 100%;
	border-bottom: 1px solid #C2C2C2;
	margin: 1em auto 4em;
}
.external .serviceList h5{
	font-size: 0.78em;
	font-weight: 500;
	padding-bottom: 0.7em;
}
.external .serviceList h5.serviceName{
	font-size: 0.95em;
	padding-left: 0.7em;
}
.external .serviceList .list{
	width: 100%;
	border-top: 1px solid #C2C2C2;
	margin: 0 auto;
}
.external .serviceList .list .serviceTrigger{
	padding: 1.3em 1em;
	cursor: pointer;
	position: relative;
	-webkit-transition: background 0.4s;
	transition: background 0.4s;
}
.external .serviceList .list .serviceTrigger.open{background: #FAFAFA;}
@media(min-width:769px) {
.external .serviceList .list .serviceTrigger:hover{background: #FAFAFA;}
}
.external .serviceList .list .serviceTrigger h2{
	font-size: 1.06em;
	font-family: 'DINPro-Medium','Noto Sans JP', sans-serif;
	font-weight: 500;
	letter-spacing: 0.03em;
}

.external .serviceList .list .serviceTrigger span{
	position: absolute;
	display: block;
	top: 50%;
	right: 2em;
	height: 0.8em;
	width: 0.8em;
	margin-top: -0.4em;
}
.external .serviceList .list .serviceTrigger span::before,
.external .serviceList .list .serviceTrigger span::after{
	content: '';
	position: absolute;
	top: 0;
	width: 1px;
	height: 100%;
	background: #2D2D2D;
	-webkit-transition: all 0.4s cubic-bezier(0.45, 0, 0.55, 1);
	transition: all 0.4s cubic-bezier(0.45, 0, 0.55, 1);
}
.external .serviceList .list .serviceTrigger span::before{
	left: 9%;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.external .serviceList .list .serviceTrigger span::after{
	right: 9%;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.external .serviceList .list .serviceTrigger.open span::before{
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.external .serviceList .list .serviceTrigger.open span::after{
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


.external .serviceList .list .detail{
	width: 100%;
	display: none;
}
.external .serviceList .list .detail .detailInner{
	border-top: 1px dashed #DEDEDE;
	width: 100%;
	display: flex;
	padding: 1em 0 1.5em 0.8em;
}

.external .serviceList .list .detail p{font-size: 0.9em;}
.external .serviceList .list .detail .person{width: 12em;}
.external .serviceList .list .detail .info{width: calc(100% - 12em - 22em);padding-right: 2em;}
.external .serviceList .list .detail .url{width: 22em;}
.external .serviceList .list .detail .url p{
	font-family:'DINPro-Regular';
	font-weight: 400;
	letter-spacing: -0.01em;
	font-size: 0.85em;
}
.external .serviceList .list .detail .url p a{
	display:inline-block;
	color: #2D2D2D;
}
@media(min-width:769px) {
.external .serviceList .list .detail .url p a:hover{text-decoration: underline;}
}


/*+++++++++++++++++++++++++++++++++++++++++*/


@media (max-width: 768px) {
.external{width: 80%;}
.external .serviceList{margin: 1.5em auto 4em;}
.external .serviceList .list .serviceTrigger{padding: 1.3em 0.8em;}
.external .serviceList .list .serviceTrigger span{right: 1.6em;}
.external .serviceList .list .detail .detailInner{display: block;padding: 1.8em 0 2.5em 0.8em;}
.external .serviceList h5{font-size: 0.9em;font-weight: 700;}
.external .serviceList h5.serviceName{font-size: 1em;padding-left: 0.8em;}
.external .serviceList .list .detail .person{width: 100%;}
.external .serviceList .list .detail .info{width: 100%;padding-right: 0;margin-top: 1.6em;}
.external .serviceList .list .detail .url{width: 100%;margin-top: 1.6em;}
.external .serviceList .list .detail p{font-size: 0.95em;}
.external .serviceList .list .detail .url p{font-size: 0.95em;}
.external .serviceList .list .detail .url p a{display:table;margin-bottom: 0.4em;}
}


@media (max-width: 680px) {
.external{width: 87%;}
.external h1{font-size: 1.55em;}
.external .exBody .text p{line-height: 1.8;letter-spacing: 0.01em;}
}

@media (max-width: 480px) {
.external h1{font-size: 1.5em;}
.external .exBody{font-size: 1.17em;}
}