@charset "UTF-8";
/*--------------------------------------------------------------
.title_area(カテゴリーページ共通パーツです)
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.title_area {
		margin: 0;
		padding: 0;
		height: 150px;
		width: 100%;
		background-image: url("img/ttl_bg.jpg");/*ページごとに変更する*/
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		position: relative;
	}
	
	.title_area:after {
		content: "";
		background: rgba(0,0,0,.3);
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 2;
	}
	
	.title_area h2 {
		color: #fff;
		font-size: 20px;
		font-weight: 700;
		position: relative;
		z-index: 3;
	}
	
	.section_title {
		color: #4E4E4E;
		font-size: 18px;
		font-weight: 600;
		padding-left: 13px;
		position: relative;
		line-height: 1;
		margin: 0 0 0 20px;
	}
	
	.section_title::before {
	  background-color: #4A64AA;
	  bottom: 0px;
	  content: '';
	  height: 18px;
	  left: 0;
	  position: absolute;
	  width: 3px;
	}


}

/* Small than tablet */
@media (min-width: 768px) {
	

	
}


/* Larger than tablet */
@media (min-width: 992px) {
	.title_area {
		background-image: url("img/ttl_bg.jpg");/*ページごとに変更する*/
		height: 200px;
		background-position: center;
		background-size: 100% auto;
	}
	
	.title_area h2 {
		font-size: 25px;
	}
	
	.section_title {
    	padding-left: 15px;
	}
	
	.section_title::before {
    bottom: -1px;
    height: 20px;
    width: 5px;
  }


}

/*↑↑ここまで共通↑↑*/


/*--------------------------------------------------------------
↓↓ここからコンテンツ↓↓
--------------------------------------------------------------*/


/* mobile */
@media (min-width: 300px) {
	.content {
		background: #F8F8F8;
		margin: 0;
		padding: 0;
	}
	
	.content-wrap {
		margin: 0;
		padding: 0;
	}
	
	.emg_box {
		background: #F2EFE4;
		margin: 0;
		padding: 20px 10px 34px;
		width: 100%;
	}
	
	.emg_box dl {
		background: #FFF;
		widths: 100%;
		max-width: 900px;
		margin: 0 auto;
		height: auto;
		padding: 0;
	}
	
	.emg_box dl dt h2 {
		background: #DB6F6B;
		margin: 0;
		padding: 25px 0;
		line-height: 1;
		color: #fff;
		font-size: 18px;
		font-weight: 700;
		text-align: center;
	}
	
	.emg_box dl dt h2 i {
		color: #FFEE6E;
		margin: 0 4.5px 0 0;
	}
	
	.emg_box dl dd {
		text-align: center;
		margin: 0;
		padding: 0 0 30px;
	}
	
	.emg_box dl dd .emg_txt {
		font-size: 15px;
		font-weight: 600;
		margin: 0;
		padding: 25px 20px;
		text-align: justify;
		border-bottom: 1px solid #E0E0E0;
	}
	
	.emg_box dl dd .emg_call {
		font-size: 18px;
		font-weight: 700;
		margin: 0;
		padding: 20px 0 0;
		text-align: center;
	}
	
	.emg_box dl dd .emg_call > span {
		display: block;
		font-family: 'Roboto', sans-serif;
		color: #DB6F6B;
		font-size: 33px;
		font-weight: 700;
		margin: 0 0 10px;
		padding: 0;
		letter-spacing: 0;
	}
	
	.emg_box dl dd .emg_call > span img {
		width: 40px;
		height: auto;
		margin: 0 10px 10px 0;
		vertical-align: middle;
	}
	
	.emg_call {
		margin: 0 0 15px;
		padding: 0;
		font-size: 12px;
		letter-spacing: 1px;
	}
	
	.emg_call button {
		width: calc(100% - 40px);
		margin: 0 auto;
		padding: 0;
	}
	
	.emg_call button {
		background: #DB6F6B;
		border-bottom: 3px solid #ccc;
		border-radius: 5px;
	}
	
	.emg_call button a {
		margin: 0;
		padding: 12px 0;
		display: block;
		text-align: center;
		font-weight: 700;
	}
	
	.emg_call button a {
		font-size: 18px;
		line-height: 1;
		position: relative;
	}
	
	.emg_call button a span {
		display: inline-block;
		margin: 10px 0 0;
		font-size: 11px;
		line-height: 1;
		font-weight: 600!important;
	}
	
	.emg_call button i {
		margin: 0;
		padding: 0;
	}
	
	.emg_call button a  i.fa-phone-volume {
		font-size: 24px;
		margin: 0;
		position: absolute;
		top: 50%;
		left: 27px;
		transform: translateY(-50%);
	}
	
	.emg_call button a:link,
	.emg_call button a:visited,
	.emg_call button a:hover,
	.emg_call button a:active,
	.emg_call button a:focus {
		color: #FFFFFF;
		text-decoration: none;
	}
	
	.emg_box dl dd ul {
		display: none;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	

	
}


/* Larger than tablet */
@media (min-width: 992px) {
	.content {
		background: #F8F8F8;
		margin: 0;
		padding: 0;
	}
	
	.content-wrap {
		margin: 0;
		padding: 0;
	}
	
	.emg_box {
		background: #F2EFE4;
		margin: 0;
		padding: 50px 0 63px;
		width: 100%;
	}
	
	.emg_box dl {
		background: #FFF;
		widths: 100%;
		max-width: 900px;
		margin: 0 auto;
		height: auto;
		padding: 0;
	}
	
	.emg_box dl dt h2 {
		background: #DB6F6B;
		margin: 0;
		padding: 25px 0;
		line-height: 1;
		color: #fff;
		font-size: 22px;
		font-weight: 700;
		text-align: center;
	}
	
	.emg_box dl dt h2 i {
		color: #FFEE6E;
		margin: 0 9px 0 0;
	}
	
	.emg_box dl dd {
		text-align: center;
		margin: 0;
		padding: 0 0 38px;
	}
	
	.emg_box dl dd .emg_txt {
		font-size: 18px;
		font-weight: 600;
		margin: 0 50px;
		padding: 30px 20px;
		text-align: center;
		border-bottom: 1px solid #E0E0E0;
	}
	
	.emg_box dl dd .emg_call {
		font-size: 20px;
		font-weight: 700;
		margin: 0;
		padding: 18.5px 0 0;
		text-align: center;
	}
	
	.emg_box dl dd .emg_call span {
		display: block;
		font-family: 'Roboto', sans-serif;
		color: #DB6F6B;
		font-size: 50px;
		font-weight: 700;
		margin: 0 0 10px;
		padding: 0;
	}
	
	.emg_box dl dd .emg_call span img {
		width: 60px;
		height: auto;
		margin: 0 20px 10px 0;
		vertical-align: middle;
		
	}
	
	.emg_box dl dd ul {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		width: 447px;
		margin: 0 auto;
		padding: 0;
	}
	
	.emg_box dl dd ul li {
		border: 1px solid #4E4E4E;
		display: inline-block;
		text-align: center;
		padding: 10px 22px;
		margin: 0;
		font-size: 16px;
		font-weight: 300;
		line-height: 1;
	}


}

/*--------------------------------------------------------------
.flow_box
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.flow_box {
		margin: 0;
		padding: 26px 10px 0;
	}
	
	.area-title {
		text-align: center;
		position: relative;
		margin: 0 0 24.5px;
		padding: 0 0 14.5px;
	}
	
	.area-title::after {
		position: absolute;
		content: "";
		display: block;
		height: 1px;
		width: 20px;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background-color: #4A64AA;
	}
	
	.area-title h3 {
		font-size: 18px;
		font-weight: 600;
		line-height: 1;
	}
	
	.flow_box p {
		margin: 0 auto 30px;
		padding: 0 10px;
		width: 100%;
		text-align: justify;
		font-size: 14px;
		font-weight: 300;
		line-height: 24px;
	}
	
	.flow-list {
		width: 100%;
		max-width: 900px;
		margin: 0 auto;
		padding: 0;
	}
	
	.flow-title {
		background: #8699CB;
		color: #fff;
		font-size: 18px;
		font-weight: 600;
		text-align: center;
		padding: 20px 0;
		margin: 0 0 20px;
		width: 100%;
		line-height: 1;
		position: relative;
	}
	
	p.triangle {
		margin: 0 auto 20px;
		padding: 0 0 5px;
	}
	
	.triangle {
		position: relative;
	}
	
	.triangle::after {
		display: block;
		content: url(img/under-triangle.svg);
		position: absolute;
		bottom: -18px;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.flow-list ul {
		margin: 0;
		padding: 0;
	}
	
	.flow-list ul li {
		margin: 0 0 20px;
		padding: 0;
		background: #4A64AA;
		position: relative;
	}
	
	.flow-list ul li:not(:last-child)::after {
		display: block;
		content: url(img/under-triangle.svg);
		position: absolute;
		bottom: -21px;
		left: 50%;
		transform: translateX(-50%);
	}
	
	
	.flow-list ul li dl {
		margin: 0;
		padding: 0;
	}
	
	.flow-list ul li dl dt {
		color: #fff;
		display: block;
		padding: 22px 0 0;
		margin: 0;
		width: 30px;
		height: 100%;
		text-align: center;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		font-weight: bold;
		float: left;
	}
	
	.flow-list ul li dl dd {
		margin: 0 0 0 30px;
		padding: 0;
		overflow: hidden;
		background: #fff;
	}
	
	.flow-list ul li dl dd div:first-child {
		margin: 0 10px;
		padding: 12px 0 13px;
		border-bottom: 1px solid #E0E0E0;
		font-size: 18px;
		font-weight: 600;
		line-height: 70px;
	}
	
	.flow-list ul li dl dd div:first-child img {
		width: 70px;
		height: auto;
		margin: 0 26px 0 0;
		line-height: 1;
		vertical-align: middle;
	}
	
	.flow-list ul li dl dd div:nth-child(2) {
		margin: 0 10px;
		padding: 20px 0;
		font-size: 14px;
		font-weight: 300;
	}

}

/* Small than tablet */
@media (min-width: 768px) {
	

	
}


/* Larger than tablet */
@media (min-width: 992px) {
	.flow_box {
		margin: 0;
		padding: 70px 0 0;
	}
	
	.area-title {
		text-align: center;
		position: relative;
		margin: 0 0 24.5px;
		padding: 0 0 14.5px;
	}
	
	.area-title::after {
		position: absolute;
		content: "";
		display: block;
		height: 1px;
		width: 20px;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background-color: #4A64AA;
	}
	
	.area-title h3 {
		font-size: 22px;
		font-weight: 600;
		line-height: 1;
	}
	
	.flow_box p {
		margin: 0 auto 30px;
		padding: 0;
		width: 700px;
		text-align: justify;
		font-size: 15px;
		font-weight: 300;
		line-height: 26px;
	}
	
	.flow-list {
		width: 100%;
		max-width: 900px;
		margin: 0 auto;
		padding: 0;
	}
	
	.flow-title {
		background: #8699CB;
		color: #fff;
		font-size: 22px;
		font-weight: 600;
		text-align: center;
		padding: 20px 0;
		margin: 0 0 20px;
		width: 100%;
		line-height: 1;
		position: relative;
	}
	
	p.triangle {
		margin: 0 auto 20px;
		padding: 0 0 5px;
	}
	
	.triangle {
		position: relative;
	}
	
	.triangle::after {
		display: block;
		content: url(img/under-triangle.svg);
		position: absolute;
		bottom: -18px;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.flow-list ul {
		margin: 0;
		padding: 0;
	}
	
	.flow-list ul li {
		margin: 0 0 20px;
		padding: 0;
		background: #4A64AA;
		position: relative;
	}
	
	.flow-list ul li:not(:last-child)::after {
		display: block;
		content: url(img/under-triangle.svg);
		position: absolute;
		bottom: -21px;
		left: 50%;
		transform: translateX(-50%);
	}
	
	
	.flow-list ul li dl {
		margin: 0;
		padding: 0;
	}
	
	.flow-list ul li dl dt {
		color: #fff;
		display: block;
		padding: 22px 0 0;
		margin: 0;
		width: 66px;
		height: 100%;
		text-align: center;
		font-family: 'Roboto', sans-serif;
		font-size: 30px;
		font-weight: bold;
		float: left;
	}
	
	.flow-list ul li dl dd {
		margin: 0 0 0 66px;
		padding: 0;
		overflow: hidden;
		background: #fff;
	}
	
	.flow-list ul li dl dd div:first-child {
		margin: 0 35px;
		padding: 23px 0 11.5px;
		border-bottom: 1px solid #E0E0E0;
		font-size: 22px;
		font-weight: 600;
		line-height: 70px;
	}
	
	.flow-list ul li dl dd div:first-child img {
		width: 70px;
		height: auto;
		margin: 0 26px 0 0;
		line-height: 1;
		vertical-align: middle;
	}
	
	.flow-list ul li dl dd div:nth-child(2) {
		margin: 0 35px;
		padding: 20px 0;
		font-size: 15px;
		font-weight: 300;
	}

}

/*--------------------------------------------------------------
.pay
--------------------------------------------------------------*/
/* mobile */
@media (min-width: 300px) {
	.pay {
		text-align: left;
		font-size: 14px;
		font-weight: 300;
		line-height: 24px;
		margin: 53px 0 73px;
		padding: 0 20px;
	}
	
	.pay span {
		display: block;
		font-size: 16px;
		font-weight: 600;
		color: #4A64AA;
		margin: 0 0 10px 0;
		padding: 0;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	.pay {
		text-align: center;
		font-size: 15px;
		font-weight: 300;
		line-height: 1;
		margin: 53px 0 73px;
		padding: 0;
	}
	
	.pay span {
		display: inline;
		font-size: 18px;
		font-weight: 600;
		color: #4A64AA;
		margin: 0 24px 0 0;
		padding: 0;
	}
}

/*--------------------------------------------------------------
.line-img
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.line-img {
		background: url("img/line-2.png") no-repeat center;
		background-size: cover;
		height: 200px;
		width: 100%;
		margin: 0;
		padding: 0;
	}

}

/* Small than tablet */
@media (min-width: 768px) {
	

	
}


/* Larger than tablet */
@media (min-width: 992px) {
	.line-img {
		background: url("img/line-1.png") no-repeat center;
		background-size: cover;
		height: 200px;
		width: 100%;
		margin: 0;
		padding: 0;
	}


}

/*--------------------------------------------------------------
.after-support
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.after-support {
		margin: 0;
		padding: 30px 10px 40px;
		background: #fff;
	}
	
	.andover {
		width: 100%;
		max-width: 900px;
		margin: 0 auto 23.5px;
		padding: 26.5px 0;
		text-align: center;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
	
	.andover h3 {
		font-size: 18px;
		font-weight: 600;
	}
	
	.andover span {
		color: #4A64AA;
	}
	
	.after_flow {
		width: 100%;
		max-width: 900px;
		margin: 0 auto;
		padding: 0;
	}
	
	.after_flow ul {
		margin: 0;
		padding: 0 15px;
	}
	
	.after_flow ul li {
		margin: 0 0 20px;
		padding: 0;
	}

	.after_flow dl {
		margin: 0;
		padding: 0;
	}
	
	.after_flow dl dt {
		margin: 0 0 20px;
		padding: 0;
		font-size: 16px;
		font-weight: 600;
		line-height: 20px;
	}
	
	.after_flow dl dt span {
		background-color: #4A64AA;
		color: #fff;
		display: inline-block;
		border-radius: 50%;
		font-size: 12px;
		width: 18px;
		height: 18px;
		text-align: center;
		padding: 0;
		margin: 0 2px 0 0;
		line-height: 18px;
	}
	
	.after_flow dl dd {
		font-size: 15px;
		font-weight: 300;
		line-height: 26px;
		text-align: justify;
	}
	
	
}

/* Small than tablet */
@media (min-width: 768px) {
	

	
}


/* Larger than tablet */
@media (min-width: 992px) {
	.after-support {
		margin: 0;
		padding: 45.5px 0;
		background: #fff;
	}
	
	.andover {
		width: 100%;
		max-width: 900px;
		margin: 0 auto 40.5px;
		padding: 26.5px 0;
		text-align: center;
	}
	
	.andover h3 {
		font-size: 22px;
		font-weight: 600;
	}
	
	.andover span {
		color: #4A64AA;
	}
	
	.after_flow {
		width: 100%;
		max-width: 900px;
		margin: 0 auto;
		padding: 0;
	}
	
	.after_flow ul {
		margin: 0;
		padding: 0 100px;
	}
	
	.after_flow ul li {
		margin: 0 0 20px;
		padding: 0;
	}

	.after_flow dl {
		margin: 0;
		padding: 0;
	}
	
	.after_flow dl dt {
		margin: 0 0 20px;
		padding: 0;
		font-size: 18px;
		font-weight: 600;
		line-height: 20px;
	}
	
	.after_flow dl dt span {
		background-color: #4A64AA;
		color: #fff;
		display: inline-block;
		border-radius: 50%;
		font-size: 15px;
		width: 20px;
		height: 20px;
		text-align: center;
		padding: 0;
		margin: 0 2px 0 0;
		line-height: 20px;
	}
	
	.after_flow dl dd {
		font-size: 15px;
		font-weight: 300;
		line-height: 26px;
	}
	


}