@charset "utf-8";

	/* ------  current page yellow border show ----- */
.menu-list > li:nth-child(2):after,
.sub-menu-list > li:nth-child(2) a:after {
	padding-top: 6px;
}
.ConsultationFlow main .wrap-area {
	max-width: 1200px;
	text-align: center;
}
.lead-sentence p {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.8;
}

	/* ------  .area-mainVisual start ----- */

.ConsultationFlow .breadcrumb {
	max-width: 1280px;
	padding: 0 16px;
	margin: 0 auto;
}
.ConsultationFlow .breadcrumb li {
}
.ConsultationFlow .area-mainVisual {
	width: 100%;
	padding-bottom: 243px; 
}

.ConsultationFlow .area-mainVisual > div {
	width: 100%;
	height: 100%;
	background-image: url(../img/rinshin/flow/flow_foreground.png), url(../img/rinshin/tree-left-noclip.png), url(../img/rinshin/tree-right-noclip.png), url(../img/rinshin/page-sky.png);
	background-repeat: no-repeat;
	background-position: center bottom, -2% bottom, 112% bottom, center 30px;
	background-size: 1920px auto, 300px auto, 631px auto, 1920px auto;
	margin-bottom: 0;
	z-index: 10;
}
.area-mainVisual .area-secound-title {
    text-align: center;
    color: #42210b;
    padding: 0 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
}

	/* ------  .area-mainVisual end ----- */

	/* ------  .consul-flow-diagram start ----- */
.consul-flow-diagram {
	max-width: 1160px;
	background: url(../img/rinshin/flow/staff.png) no-repeat right center / contain;
	margin: 30px auto;
}
.consul-flow-diagram li {
	width: calc(237 / 1160 * 100%);
	position: relative;
}
.consul-flow-diagram li:not(:first-child) {
	margin-left: 40px;
}
.consul-flow-diagram li:after {
	content: "";
    display: block;
    width: 100%;
    padding-bottom: calc(229 / 237 * 100%);
    border: 4px solid #c4bfbb;
    border-radius: 50%;
    box-shadow: 4px 4px 0 #e7e1c9;
}
.consul-flow-diagram li > p {
	width: 100%;
    font-size: 2.4rem;
    font-family: 'M PLUS 1p', sans-serif;
    line-height: 1.2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.consul-flow-diagram .webFont:after {
	content: "\e900";
	font-size: 3rem;
	position: absolute;
	right: 0;
	bottom: 50%;
    transform: rotate(-90deg) translate(-50%, 120%);
}
.consul-flow-diagram li > p em {
	display: block;
	color: #c1272d;
	font-size: 2rem;
	font-family: 'M PLUS 1p', sans-serif;
}
.consul-flow-diagram .order {
	display: block;
	position: relative;
}
.consul-flow-diagram .order:before {
	content: "step";
	font-size: 2rem;
	font-family: Arial;
	font-weight: bold;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
}
.consul-flow-diagram .order:after {
	content: attr(data-order);
	font-size: 5rem;
	font-family: 'Sawarabi Mincho', sans-serif;
}
.consul-flow-diagram li:nth-child(odd) .order:before,
.consul-flow-diagram li:nth-child(odd) .order:after {
	color: #52b2ad;
}
.consul-flow-diagram li:nth-child(even) .order:before,
.consul-flow-diagram li:nth-child(even) .order:after {
	color: #fbb03b;
}
	/* ------  .consul-flow-diagram end ----- */

	/* ------  .flow-img start ----- */
.flow-img-bg {
    padding: 80px 0;
    background: #f9f9ed;
}
.ConsultationFlow .wrap-area.flow-img {
	max-width: 1082px;
	justify-content: space-between;
}
.flow-img > div {
	width: calc(517 / 1050 * 100%);
}
.flow-img > div p {
	text-align: left;
}
.consul-flow-notes {
	display: inline-block;
	text-align: left;
}
	/* ------  .flow-img  end ----- */

	/* ------  .consul-notes start ----- */
.consul-notes {
	max-width: 900px;
	display: inline-block;
	text-align: left;
	margin: 0 auto;
}
.consul-notes p {
	text-indent: -17px;
	margin-left: 17px;
}
.consul-notes p:not(:first-of-type) {
	margin-top: 20px;
}
.consul-notes p:before {
	content: "";
	display: inline-block;
    width: 12px;
    padding-top: 12px;
    background: #fbb03b;
    margin-right: 5px;
}
.consul-notes p span {
	text-indent: 0;
}
	/* ------  .consul-notes end ----- */
	
	/* ------    screen width 1850px   start ----- */

@media screen and (max-width:1850px){

.ConsultationFlow .area-mainVisual > div {
	background-size: 1920px auto, 220px auto, 631px auto, 1920px auto;
	}


}
	/* ------    screen width 1850px   end ----- */

	/* ------    screen width 1300px   start ----- */

@media screen and (max-width:1300px){

.ConsultationFlow .area-mainVisual > div {
	background-position: center bottom, -2% bottom, 120% bottom, center 30px;
	background-size: 148%, 17%, 40%, 148%;
	}

}

	/* ------    screen width 1300px   end ----- */

	/* ------    screen width 1200px   start ----- */

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

.consul-flow-diagram li:not(:first-child) {
    margin-left: calc(40 / 1160 * 100%);
	}
.consul-flow-diagram .webFont::after {
    font-size: calc(30 / 1200 * 100vw);
	}

}

	/* ------    screen width 1200px   end ----- */

	/* ------    screen width 1000px   start ----- */

@media screen and (max-width:1000px){

.consul-flow-diagram li > p {
    font-size: calc(24 / 1000 * 100vw);
	}
.consul-flow-diagram .webFont:after {
	font-size: calc(27 / 1000 * 100vw);
	}
.consul-flow-diagram li > p em,
.consul-flow-diagram .order:before {
	font-size: calc(20 / 1000 * 100vw);
	}
.consul-flow-diagram .order:after {
	font-size: calc(50 / 1000 * 100vw);
	}


}

	/* ------    screen width 1000px   end ----- */

	/* ------    screen width 768px   start ----- */

@media screen and (max-width:768px){

.ConsultationFlow .area-mainVisual {
    padding-bottom: 220px;
	}
.ConsultationFlow .area-mainVisual > div {
	background-position: center bottom, -11% bottom, 130% bottom, center 30px;
	background-size: 148%, 26%, 48%, 148%;
	}
.ConsultationFlow h2 {
    font-size: calc(40 / 768 * 100vw);
	}
.consul-flow-diagram {
	width: 100%;
	}
.consul-flow-diagram li {
	width: calc(150 / 736 * 100%);
	}
.consul-flow-diagram li:after {
    padding-bottom: calc(146 / 150 * 100%);
    border: 2px solid #c4bfbb;
    box-shadow: 3px 3px 0 #e7e1c9;
	}
.consul-notes p br {
	display: none;
	}

}

	/* ------    screen width 768px   end ----- */

	/* ------    screen width 640px   start ----- */

@media screen and (max-width:640px){

.consul-flow-diagram {
	flex-wrap: wrap;
	background: url(../img/rinshin/flow/staff.png) no-repeat right bottom / 15%;
	}
.consul-flow-diagram li {
	width: calc(240 / 608 * 100%);
	}
.consul-flow-diagram li:after {
    padding-bottom: calc(236 / 240 * 100%);
	}
.consul-flow-diagram li:not(:first-child) {
    margin-left: 0;
	}
.consul-flow-diagram li:nth-child(even) {
    margin-left: calc(20 / 608 * 100%);
	}
.consul-flow-diagram li:nth-child(n+3) {
    margin-top: calc(20 / 608 * 100%);
	}
.consul-flow-diagram .webFont::after {
	content: none;
	}
.consul-flow-diagram li > p {
    font-size: calc(30 / 640 * 100vw);
	}
.consul-flow-diagram .webFont:after {
	font-size: calc(28 / 640 * 100vw);
	}
.consul-flow-diagram li > p em,
.consul-flow-diagram .order:before {
	font-size: calc(27 / 640 * 100vw);
	}
.consul-flow-diagram .order:after {
	font-size: calc(70 / 640 * 100vw);
	}

}

	/* ------    screen width 640px   end ----- */

	/* ------    screen width 480px   start ----- */

@media screen and (max-width:480px){

.menu-list > li:nth-child(2):after,
.sub-menu-list > li:nth-child(2) a:after {
	padding-top: 0;
	}
.ConsultationFlow .area-mainVisual {
    padding-bottom: calc(200 / 480 * 100%);
	}
.ConsultationFlow .area-mainVisual > div {
	background-position: center bottom, -15% bottom, 135% bottom, left 0;
	background-size: 148%, 32%, 48%, 148%;
	}
.ConsultationFlow h2 {
    font-size: calc(27 / 480 * 100vw);
	}
.lead-sentence p {
	font-size: 1.6rem;
	}
.consul-flow-diagram li {
	width: calc(175 / 448 * 100%);
	}
.consul-flow-diagram li:after {
    padding-bottom: calc(173 / 175 * 100%);
    border: 1px solid #c4bfbb;
	box-shadow: 2px 2px 0 #e7e1c9;
	}
.consul-flow-diagram li:not(:first-child) {
    margin-left: 0;
	}
.consul-flow-diagram li:nth-child(even) {
    margin-left: calc(15 / 448 * 100%);
	}
.consul-flow-diagram li:nth-child(n+3) {
    margin-top: calc(15 / 448 * 100%);
	}
.consul-flow-diagram .webFont::after {
	content: none;
	}
.consul-flow-diagram li > p {
    font-size: calc(22 / 480 * 100vw);
	}
.consul-flow-diagram .webFont:after {
	font-size: calc(28 / 480 * 100vw);
	}
.consul-flow-diagram li > p em,
.consul-flow-diagram .order:before {
	font-size: calc(19 / 480 * 100vw);
	}
.consul-flow-diagram .order:after {
	font-size: calc(50 / 480 * 100vw);
	}
.flow-img-bg {
    padding: calc(50 / 480 * 100%) 0;
	}
.ConsultationFlow .wrap-area.flow-img {
	flex-wrap: wrap;
	}
.flow-img > div {
	width: 100%;
	}
.flow-img > div:not(:first-of-type) {
	margin-top: 20px;
	}

}
	/* ------    screen width 480px   end ----- */