@charset "UTF-8";
img {
	vertical-align: middle;
}
/*----------------------------------------------
 mainVisual styles
----------------------------------------------*/
.mainVisual {
  position: relative;
  z-index: 0;
  width: 100%;
  background: url(../img/main-sp.jpg) no-repeat center top;
  background-size: 100% auto;
  padding-top: calc(888 / 750 * 100%);
}
.mainVisual .textBox {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 30px;
	text-align: center;
}
.mainVisual .img img {
  max-width: 100%;
}
.mainVisual .text {
	font-size: 1.6rem;
	border-top: 1px solid #89a4a5;
	border-bottom: 1px solid #89a4a5;
	padding: 8px 0;
	margin: 20px auto 0;
	width: 90.67%;
	max-width: 340px;
	letter-spacing: 0.05em;
	color: #ff5a00;
	font-weight: bold;
}

/*----- PCのみ -----*/
@media all and (min-width: 768px) {
.mainVisual {
  background: url(../img/main.jpg) no-repeat center top;
  padding-top: calc(550 / 1280 * 100%);
  background-size: 100% auto;
}
.mainVisual .textBox {
	width: 48.12%;
	left: auto;
	top: auto;
	right: 0%;
	bottom: 50%;
	padding-top: 0;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
}
	.mainVisual .text {
		font-size: 2.4rem;
		width: 500px;
		max-width: 100%;
		margin-top: 30px;
	}
}


/*----------------------------------------------
 formatting styles
----------------------------------------------*/
header {
  background-color: #2f5a5c;
}
main {
  overflow: hidden;
}
section h2 {
  font-size: 2.4rem;
  font-weight: normal;
  text-align: center;
  line-height: 1.4;
}
#toJigyousho {
  margin: 45px 0 60px;
}
#toJigyousho .subttl {
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin: 25px auto 20px;
}
#toJigyousho .text {
  width: 340px;
  line-height: 3.1;
  background: url(../img/underline-sp.png) repeat-y top center;
  background-size: 342px 46px;
  padding: 2px 15px 0;
  margin: 25px auto 0;
}
#toJigyousho .text em {
  font-weight: bold;
  color: #0092dc;
}

/* 吹き出し本体 */
#fukidashiBox .fukidashi {
  position: relative;
  padding: 23px 15px;
  color: #ff8500;
  background-color: #FFFFFF;
  border: 1px solid #d4d4d4;
  border-radius: 30px;
  margin: 30px 15px 30px;
  font-size: 1.8rem;
  text-align: center;
  font-weight: bold;
}
/* 吹き出し矢印下向き*/
#fukidashiBox .fukidashi::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 120px;
  bottom: -28px;
  border-top: 28px solid #d4d4d4;
  border-left: 22px solid transparent;
}
#fukidashiBox .fukidashi::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 122px;
  bottom: -26px;
  border-top: 26px solid #FFFFFF;
  border-left: 19px solid transparent;
}
#fukidashiBox .ill {
  text-align: center;
  line-height: 0;
}
#flowchart {
  background-color: #d1f2ef;
  padding: 50px 0 0;
}
#flowWrap {
	padding: 0 35px;
}
#flowWrap dl {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #9DC8CC;
  padding: 15px 20px 7px;
  position: relative;
}
#flowWrap dl:first-child {
  border-top: 1px solid #9DC8CC;
  padding-top: 10px;
  margin-top: 25px;
}
#flowWrap dl dt {
  flex: 0 1 30%;
  padding-bottom: 10px;
}
#flowWrap dl::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -18px;
  border-top: 18px solid #9DC8CC;
  border-right: 28px solid transparent;
  border-left: 28px solid transparent;
}
#flowWrap dl::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -17px;
  border-top: 18px solid #d1f2ef;
  border-right: 28px solid transparent;
  border-left: 28px solid transparent;
}
#flowWrap dl:last-child:before {
  display: none;
}
#flowWrap dl:last-child:after {
  display: none;
}
#flowchart #arrowArea {
  color: #FFFFFF;
  background-color: #28bcb7;
  padding: 30px 15px;
  margin: 70px auto 55px;
  font-size: 1.8rem;
  position: relative;
}
#flowchart #arrowArea em {
  font-weight: bold;
}
#flowchart #arrowArea::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -25px;
  border-top: 25px solid #28bcb7;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
}
#flowchart .chart {
  background-color: #FFFFFF;
  padding: 25px 20px;
  margin: 0 15px 30px;
  box-shadow: 7px 7px 0 #d4d4d4;
}
#flowchart .chart > dt {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  padding-bottom: 15px;
}
#flowchart .chart > dt:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin: 0.5em auto 0;
	border-style: solid;
	border-color: #cccccc transparent transparent transparent;
	border-width: 10px 10px 0 10px;
}
#flowchart .chart dd {
  background-color: #FFFBBA;
  padding: 0.5em 1em;
  text-align: center;
}
#flowchart .chart dd em {
  font-weight: bold;
  font-size: 1.8rem;
  color: #0092dc;
}
#flowchart .chart dd span {
  font-size: 1.6rem;
}
.btnWrap {
  margin: 50px auto 60px;
}
.btnWrap a {
  display: block;
  color: #FFFFFF;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  background: #0092dc url(../../img/service-arrow@2x.png) no-repeat 95% center;
  background-size: 10px 16px;
  padding: 18px 0;
  margin: 20px 15px;
}
.btnWrap a span {
  font-size: 2.0rem;
}

/*----- PCのみ -----*/
@media all and (min-width: 768px) {
	body {
		min-width: 1000px;
		margin: 0 auto;
	}
	header {
		background-color: #ffffff;
	}
	main {
		font-size: 1.6rem;
		line-height: 2.2;
	}
	section h2 {
		font-size: 3.6rem;
		margin-top: 20px;
		margin-bottom: 50px;
	}
	#toJigyousho {
		margin: 60px 0 80px;
	}
	#toJigyousho .subttl {
		font-size: 2.6rem;
		margin: 40px auto 25px;
	}
	#toJigyousho .text {
		width: 812px;
		min-height: 151px;
		background: url(../img/underline.png) repeat-y top center;
		padding: 2px 18px 4px;
		margin: 40px auto 80px;
	}
	#toJigyousho .text span {
		display: block;
	}
	#fukidashiBox {
		width: 540px;
		margin: 20px auto;
	}
	#fukidashiBox:after {
		content: "";
		display: block;
		clear: both;
	}
	/* 吹き出し矢印左向き*/
	#fukidashiBox .fukidashi {
		margin-left: 26px;
		float: right;
	}
	#fukidashiBox .fukidashi::before {
		left: -28px;
		bottom: 60px;
		border-top: none;
		border-left: 28px solid transparent;
		border-bottom: 22px solid #d4d4d4;
	}
	#fukidashiBox .fukidashi::after {
		left: -24px;
		bottom: 61px;
		border-top: none;
		border-left: 24px solid transparent;
		border-bottom: 20px solid #ffffff;
	}
	#fukidashiBox .ill {
		float: left;
		margin-top: 40px;
	}
	#flowchart {
		margin: 80px auto;
	}
	#flowWrap {
		width: 700px;
		margin: 0 auto;
		padding: 0;
	}
	#flowWrap dl {
		padding-left: 230px;
		padding-bottom: 0.75em;
	}
	#flowWrap dl dt {
		flex: 0 1 30%;
		padding-top: 5px;
	}
	#flowWrap dl dd {
		font-size: 2.0rem;
		line-height: 1.4;
	}
	#flowchart #arrowArea {
		padding: 30px 15px;
		margin: 90px auto 100px;
		font-size: 2.2rem;
		text-align: center;
	}
	#flowchart #arrowArea::before {
		bottom: -60px;
		border-top: 60px solid #28bcb7;
		border-right: 80px solid transparent;
		border-left: 80px solid transparent;
	}
	#flowchart #chartWrap {
		display: flex;
		width: 98%;
		max-width: 980px;
		margin: auto;
	}
	#flowchart #chartWrap .chart {
		width: 50%;
		margin: 0 10px;
	}
	#chartWrap .chart dt {
		line-height: 1.5;
	}
	#chartWrap .chart dd {
		padding: 0.5em 0;
	}
	.btnWrap {
		width: 980px;
		margin: 65px auto;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	.btnWrap .btn {
		-webkit-flex-basis: 33.33%;
		flex-basis: 33.33%;
		margin-left: 10px;
	}
	.btnWrap .btn:first-child {
		margin-left: 0;
	}
	.btnWrap a {
		font-size: 1.8rem;
		line-height: 1.6;
		width: 100%;
		margin: 0;
	}
	.btnWrap a:hover {
		opacity: 0.7;
	}
	.btnWrap a[href^="tel:"] {
		pointer-events: none;
	}
	.btnWrap a span {
		font-size: 2.6rem;
	}
}