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


.customList p {
	margin:0;
	padding:0;
}

.customList ul {
	margin:0;
	padding:0;
	list-style:none;
}

.customList ul li {
	margin-bottom:1em;
}

.customList ul li p {
	line-height:1.3;
}


.customList ul li p strong {
	display:block;
	font-size:140%;
	margin-bottom:.3em;
}

.customList.checkList ul li , .customList.pointList ul li {
	position:relative;
	margin-bottom:.5em;
	padding-left:1.8em;
}

/*チェック*/
.customList.checkList ul li::before {
content: '';
position: absolute;
left: 0;
top: .8em;
width: .5em; 
height: 1em; 
border: solid #3eb370;  /*サイトによって変更*/
border-width: 0 5px 5px 0; 
transform: translateY(-50%) rotate(45deg); 
}

/*ポイント*/
.customList.pointList ul li::before {
content: '';
position: absolute;
left: 0;
top: .3em;
width: .8em; 
height: .8em;
border: solid #f39800; /*サイトによって変更*/
border-width: 4px;
border-radius:50%;
}

/*見出しなし*/
.customList ul li.markSml {
	padding-left:1.2em;
}

.customList.checkList ul li.markSml::before {
	top: .7em;
	width: .3em;
	height: .7em; 
	border-width: 0 3px 3px 0; 
}

.customList.pointList ul li.markSml::before {
	top: .3em;
	width: .5em;
	height: .5em; 
	border-width: 3px;
}


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

			料金

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

.servicePrice .servicePriceInner span {
	font-size:160%;
	font-weight:500;
}

.servicePrice .servicePriceInner span strong{
	font-size:240%;
}

.servicePrice .priceNotice span{
	display:block;
	font-size:13px;
	color:#f00;
}

.servicePrice .priceNotice span::before {
	content:'※';
}

@media screen and (min-width:641px){
	.servicePrice .servicePriceInner {
		display:flex;
		flex-wrap:wrap;
		justify-content: space-around;
		width:100%;
	}
	
	.servicePrice .servicePriceInner span{
		display:block;
	}
}


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

			導入までのフロー

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

.work-flow {
	position:relative;
}

.work-flow dl , .work-flow dl dt , .work-flow dl dd{
	padding:0;
	margin:0;
}

.work-flow span {
	position:absolute;
	top:12px;
	left:15px;
	display:flex;
	align-items:flex-end;
	justify-content: center;
	border-radius:50%;
	border:#f00 1px solid;
	color:#f00;
	width:50px;
	height:50px;
	font-size:30px;
	font-weight:700;
}

.work-flow span:before {
	content:'STEP';
	position:absolute;
	top:0;
	left:0;
	font-size:10px;
	display:block;
	width:100%;
	text-align:center;
	margin-top:5px;
}

.work-flow{
	position:relative;
	padding:15px 15px 15px 85px;
	background:#eee;
	border:#f00 5px solid;
	border-radius:10px;
	margin-bottom:10px;
}

.work-flow::after {
	content:'';
	position:absolute;
	bottom:-30px;
	left:45%;
	width:0;
	height:0;
	border-style:solid;
	border-width: 20px 15px 0 15px;
	border-color: #f00 transparent transparent transparent;	
}

.work-flow:last-child{
	margin-bottom:0;
}

.work-flow:last-child::after {
	border-style:none;
	border-width: 0;
	border-color: none;	
}

.work-flow dl:nth-child(odd){
	background:#fcfcfc;	
}

.work-flow dl dt{
	font-weight:700;
	font-size:18px;
	margin-botto:.3em;
}

.work-flow dl dd{
	font-weight:500;
	font-size:14px;
}

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

			導入エリア

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

.introduceArea > div > div {
	display:flex;
	justify-content: flex-start;
	align-items:flex-start;
	width:100%;
}

.introduceArea > div > div p {
	width:10%;
	margin:0;
	padding:0;
}

.introduceArea > div > div ul {
	width:90%;
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	list-style:none!important;
}

.prefectures {
		padding:.5em 0;
	}

.introduceArea ul li {
	color:#fff;
	font-weight:500;
	font-size:14px;
	letter-spacing:.1em;
	list-style:none!important;
}

.introduceArea ul li > * {
	display:block;
	padding:.5em;
	border-radius: 5px;
}

.introduceArea ul li a {
	color:#666;
	border:#666 1px solid;
	text-decoration: none!important;
	background:#fcfcfc;
	transition:all .5s ease;
	font-weight:500;
}

.introduceArea ul li a:hover {
	background:#666;
	color:#fff;
}

.introduceArea ul li > span {
	color:#666;
	border:#666 1px solid;
	background:#fcfcfc;
}

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

			リンクボタンデザイン

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

.btn-link {
  text-align: center;
  margin: 2em 0 4em;
}

.btn-link *{
	box-sizing: border-box;
}


.btn-link a{
  margin:0 auto;
  transition: background-color 0.5s ease;
}

.btn-a , .btn-b , .btn-c ,.btn-a2 , .btn-b2 , .btn-c2 {
  display: inline-block; 
  border-radius: 10px;
  text-decoration: none!important;

}

.btn-a ,.btn-a2 {
  width: 80%;
  padding: 1em 0;
  font-weight: 700;
  font-size: 22px;
}

.btn-b , .btn-c , .btn-b2 , .btn-c2{
	padding:.5em 1.3em;
}

.btn-a2 ,.btn-b2 ,.btn-c2 {
	border-width:3px;
	border-style: solid;
}


.btn-a , .btn-b {
	color: #fff!important;
	background-color: #28a745;
}

.btn-c {
	color: #fff!important;
	background-color: #6c757d;	
}

 .btn-a2 , .btn-b2 {
	color: #28a745!important;
	background-color: #fff;
	border-color:#28a745;
}

.btn-c2 {
	color: #6c757d!important;
	background-color: #fff;
	border-color:#6c757d;	
}

@media screen and (min-width: 769px) {
.btn-link .btn-a:hover , .btn-link .btn-b:hover {
  background-color: #218838;
}

.btn-link a.btn-c:hover {
  background-color: #5a6268;
}
}

@media screen and (max-width: 768px) {
  .btn-a {
    width: 100%;
    font-size: 18px;
  }
}