@charset "utf-8";
/*
機　　能　　名：ご依頼からの流れ
作　　成　　日：2020/04/27
作　　成　　者：52WEB WORKS. 関本
更　　新　　日：

/* ***************************************
	flow
**************************************** */

div#flow {
}

/* h_ttl */
@media screen and (min-width: 769px) {/* PC */
#flow .h_ttl_in {
	background:url(../images/flow/main_img_pc.png) center bottom no-repeat;
}
}
@media screen and (max-width: 768px) {/* SP */
#flow .h_ttl {
	background:url(../images/flow/main_img_sp.png) center bottom no-repeat;
	background-size:100% auto;
	-webkit-background-size:100% auto;
}
}

/* ***************************************
	intro
**************************************** */
#intro h3 {
	text-align:center;
	color:#3399CC;
}
#intro li {
	position:relative;
	background:#3C9DCC;
	color:#FFF;
	text-align:center;
	font-weight:bold;
}
#intro .arrow_down:before,
#intro .arrow_down:after {
	content:"";
	position:absolute;
	left:50%;
}
#intro .arrow_down:before {
	background:#CCCCCC;
}
#intro .arrow_down:after {
  width:0px;
  height:0px;
  margin:auto;
  border-style:solid;
  border-color:#CCC transparent transparent transparent;
}
#intro li div {
	position:absolute;
}
#intro li .num {
	background:#FFFFFF;
	border:2px solid #3C9DCC;
	color:#3C9DCC;
	text-align:center;
	border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;
	display:block;
	font-weight:normal;
}
#intro li .num span {
	display:block;
	font-weight:bold;
	position:relative;
}
#intro li .num span:before,
#intro li .num span:after {
	content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
#intro li .num span:before {
  border-color: transparent transparent transparent #3C9DCC;
}
#intro li .num span:after {
  border-color: transparent transparent transparent #FFF;
}
#intro li .sub {
	color:#3C9DCC;
	position:absolute;
}
#intro .step_li_free {
position:absolute;
}
@media screen and (min-width: 769px) {/* PC */
#intro h3 {
	margin-bottom:40px;
	font-size:35px;
}
#intro p#main_txt {
	line-height:2;
	margin:0 auto 90px auto;
}
#intro ul {
	margin-bottom:30px;
}
#intro li {
	padding:20px 0;
	margin-bottom:91px;
	font-size:38px;
}
#intro .arrow_down:before {
	bottom:-15px;
	width:22px;
	height:15px;
	margin-left:-11px;
}
#intro .arrow_down:after {
  bottom:-45px;
  border-width:30px 30px 0 30px;
	margin-left:-30px;
}
#intro li div {
	top:-46px;
	left:-10px;
}
#intro li .num {
	width:97px;
	height:82px;/* total 97px */
	padding-top:15px;
	font-size:25px;
}
#intro li .num span {
	font-size:45px;
}
#intro li .num span:before {
  right:-16px;
  top:-1px;
  border-width: 10px 0 10px 17.32px;
}
#intro li .num span:after {
  right:-13px;
  top:2px;
  border-width: 7px 0 7px 14.32px;
}
#intro li .sub {
	font-size:25px;
	top:-1.2em;
	left:120px;
}
#intro .step_li_free {
bottom:-60px;
right:4px;
}
}
@media screen and (max-width: 768px) {/* SP */
#intro h3 {
	margin-bottom:20px;
	font-size:20px;
	line-height:1.2;
}
#intro p#main_txt {
	margin:0 auto 45px auto;
}
#intro ul {
	margin-bottom:37px;
}
#intro li {
	margin-bottom:41px;
	font-size:20px;
	padding:16px 0;
}
#intro .arrow_down:before {
	bottom:-6px;
	width:12px;
	height:6px;
	margin-left:-6px;
}
#intro .arrow_down:after {
  bottom:-21px;
  border-width:15px 15px 0 15px;
	margin-left:-15px;
}
#intro li div {
	top:-18px;
	left:4px;
}
#intro li .num {
	width:39px;
	height:34px;/* total 39px */
	padding-top:5px;
	font-size:10px;
}
#intro li .num span {
	font-size:20px;
}
#intro li .num span:before {
  right:-13px;
  top:-2px;
  border-width:6px 0 6px 13.32px;
}
#intro li .num span:after {
  right:-9px;
  top:0px;
  border-width:4px 0 4px 10.32px;
}
#intro li .sub {
	font-size:13px;
	top:-1.4em;
	left:53px;
}
#intro  .step_li_free {
bottom:-20px;
right:5px;
}
#intro .step_li_free img {
	width:55px;
}
/* more_btn */
#intro .more_btn {
	width:90%;
	margin:0 auto;
}
@media screen and (max-width: 320px) {/* w320 */
#intro li div {
	left:2px;
}
#intro li .sub {
	left:43px;
}
}
}

/* ***************************************
	step_details
**************************************** */
/* step_box */
div.step_box {
border:1px solid #3C9DCC;
position:relative;
}
#step_free,#step_04,#step_05 {
	background:none;
}
#step_03 {
	margin-bottom:0;
}
#step_free {
	padding:0;
	border:none;
}
#step_free .step_free_in {
	position:relative;
}
#step_free .step_free_in:before,
#step_free .step_free_in:after {
	content:"";
	position:absolute;
	z-index:0;
}
#step_free .step_free_in:before {
	background:#FAD1CD;
}
#step_free .step_free_in:after {
  border-color:#FAD1CD transparent transparent transparent;
}
#step_free p {
	position:relative;
	z-index:1;
}


div.step_box:after {
	content:"";
	position:absolute;
	left:50%;
  width:0px;
  height:0px;
  margin:auto;
  border-style: solid;
  border-color:#3C9DCC transparent transparent transparent;
}
#step_03:after,#step_05:after {
	border:none;
}
div.step_ttl h3 {
	color:#3C9DCC;
	position:relative;
	line-height:1.2;
}
div.step_ttl h3 .pop {
	line-height:1;
}
div.step_ttl h3 .icon_step {
	color:#FFF;
	text-align:center;
	background:#3C9DCC;
	border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;
	border:2px solid #FFF;
	display:block;
	position:relative;
}
div.step_ttl h3 .icon_step:before,
div.step_ttl h3 .icon_step:after {
	content:"";
	position:absolute;
	top:50%;
  width:0px;
  height:0px;
  margin:auto;
  border-style:solid;
	transform:rotate(-90deg);
}
div.step_ttl h3 .icon_step:before {
  border-color:#FFF transparent transparent transparent;
}
div.step_ttl h3 .icon_step:after {
  border-color:#3C9DCC transparent transparent transparent;
}
div.step_ttl h3 .icon_step span {
	display:block;
}
div.step_ttl h3 .big {
	display:block;
}
div.step_box p {
	margin:0;
}
#step_free p {
	padding:0;
	text-align:center;
	color:#3C9DCC;
	font-weight:bold;
	position:relative;
}
#step_free p.free_txt {
	text-align:left;
	margin-top:15px;
}
#step_free p .black {
	color:#000;
}
#step_free p .red {
	color:#FF3333;
	text-shadow:0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC,0 0 3px #ECECEC;
}
#step_free p .maru {
	background:#FF3333;
	color:#FFF;
	border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;
	display:inline-block;
	text-shadow:none;
	border:2px solid #FFF;
	text-align:center;
	position:relative;
}
#step_free p .pop span {
	position:absolute;
}
#step_free p .maru_blue {
	color:#FFFF33;
	background:#FFF;
	text-shadow:0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC,0 0 3px #3C9DCC;
	border:2px solid #3C9DCC;
	border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;
}
#step_free p .last_txt {
	position:absolute;
	line-height:1.2;
}
div.step_box p .att {
	font-size:0.9em;
	color:#666;
	display:block;
	margin-top:10px;
}
/* tel_mail */
div.step_box .tel_mail li {
	margin:0 auto;
}
/* f_pay */
div.step_box #f_pay {
	border-bottom:none;
}
div.step_box #f_pay h3 {
	text-align:center;
	color:#333333;
	text-shadow:0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF;
}
div.step_box #f_pay h3 span {
	color:#3C9DCC;
}
div.step_box #f_pay ul {
margin:0 auto;
}

@media screen and (min-width: 769px) {/* PC */
/* step_wrapper */
div#step_wrapper {
background:url(../images/flow/step_bg2.png) 85px 0 repeat-y;
}
/* step_box */
div.step_box {
/*padding:20px 0 30px 160px;*/
padding:40px 0 30px 0;
margin:0 auto 80px auto;
background:url(../images/flow/step_bg1.png) 84px 0 repeat-y;
}
div.step_box:before {
	content:"";
	position:absolute;
}
#step_01:before {
	top:-79px;
	right:51px;
	width:374px;
  height:419px;
	background:url(../images/flow/step01_img.png) 0 0 no-repeat;
}
#step_02:before {
	bottom:0;
	right:0px;
	width:454px;
  height:383px;
	background:url(../images/flow/step02_img.png) 0 0 no-repeat;
}
#step_03:before {
	bottom:0;
	right:-9px;
	width:416px;
  height:433px;
	background:url(../images/flow/step03_img.png) 0 0 no-repeat;
}
#step_04:before {
	top:0;
	right:0;
	width:401px;
  height:398px;
	background:url(../images/flow/step04_img.png) 0 0 no-repeat;
}
div.step_box:after {
	bottom:-31px;
	margin-left:-195px;
  border-width:31px 195px 0 195px;
}
#step_free .step_free_in {
	padding:90px 0 40px 0;
}
#step_free .step_free_in:before {
	top:0;
	left:84px;
	width:127px;
	height:60px;
}
#step_free .step_free_in:after {
	top:60px;
	left:22px;
  width:0px;
  height:0px;
  margin:auto;
  border-style:solid;
  border-width:125px 125px 0 125px;
}
div.step_ttl {
	margin-bottom:20px;
}
div.step_ttl h3 {
	font-size:22px;
	padding-left:167px;
}
div.step_ttl h3 .pop {
	position:absolute;
	top:-53px;
	left:-6px;
}
div.step_ttl h3 .icon_step {
	width:138px;
	height:115px;/* total 138px */
	padding-top:23px;
	font-size:30px;
}
div.step_ttl h3 .icon_step:before,
div.step_ttl h3 .icon_step:after {
	margin-top:-15px;
  border-width:30px 20px 0 20px;
}
div.step_ttl h3 .icon_step:before {
	right:-34px;
}
div.step_ttl h3 .icon_step:after {
	right:-30px;
}
div.step_ttl h3 .icon_step span {
	font-size:70px;
}
div.step_ttl h3 .big {
	font-size:50px;
	margin-top:10px;
}
div.step_box p {
	padding:0 455px 0 167px;
}
#step_01 p {
	margin:0 0 30px 0;
}
#step_free p {
	font-size:38px;
}
#step_free p .black {
	padding:0 5px;
	font-size:48px;
}
#step_free p .red {
	font-size:50px;
}
#step_free p .maru {
	left:8px;
}
#step_free p .maru2 {
	left:-7px;
}
#step_free p .pop .pop1 {
	top:5px;
	left:500px;
}
#step_free p .pop .pop2 {
	top:20px;
	left:420px;
}
#step_free p .pop .pop3 {
	top:50px;
	left:490px;
}
#step_free p .pop .pop4 {
	top:55px;
	left:590px;
	font-size:28px;
}
#step_free p .maru_blue {
	padding:5px 20px;
	font-size:28px;
}
#step_free p .maru {
	width:110px;
	height:110px;
	line-height:110px;
	font-size:70px;
}
#step_free p .last_txt {
	top:0;
	right:0;
}
/* tel_mail */
div.step_box .tel_mail {
	width:100%;
}
div.step_box .tel_mail li {
	float:none;
}
/* step05_l */
div.step_box .step05_l {
	width:498px;
	float:left;
}
div.step_box .step05_l p {
	padding-right:20px;
}
/* f_pay */
div.step_box #f_pay {
	float:right;
}
div.step_box #f_pay h3 {
	font-size:24px;
margin-bottom:26px;
}
div.step_box #f_pay h3 span {
	font-size:40px;
}
div.step_box #f_pay ul {
width:390px;
}
}
@media screen and (max-width: 768px) {/* SP */
/* step_wrapper */
div#step_wrapper {
background:url(../images/flow/step_bg2.png) 38px 0 repeat-y;
background-size:42px auto;
-webkit-background-size:42px auto;
}
/* step_box */
div.step_box {
	border-left:none;
	border-right:none;
padding-bottom:20px;
margin:0 auto 37px auto;
background:url(../images/flow/step_bg1.png) 38px 0 repeat-y;
background-size:42px auto;
-webkit-background-size:42px auto;
}
div.step_box:after {
	bottom:-18px;
	margin-left:-65px;
  border-width:18px 65px 0 65px;
}
div.step_box_in {
	width:90%;
	margin:0 auto;
}
div.step_ttl {
	position:relative;
	margin-bottom:10px;
}
div.step_ttl:after {
	content:"";
	position:absolute;
	right:0px;
}
div.step_ttl h3 {
	position:relative;
	z-index:1;
}
#step_01 div.step_ttl:after {
	top:-10px;
	width:134px;
  height:149px;
	background:url(../images/flow/step01_img.png) 0 0 no-repeat;
	background-size:auto 149px;
	-webkit-background-size:auto 149px;
}
#step_02 div.step_ttl:after {
	bottom:0;
	width:151px;
  height:127px;
	background:url(../images/flow/step02_img.png) 0 0 no-repeat;
	background-size:auto 127px;
	-webkit-background-size:auto 127px;
}
#step_03 div.step_ttl:after {
	bottom:0;
	width:140px;
  height:144px;
	background:url(../images/flow/step03_img.png) 0 0 no-repeat;
	background-size:auto 144px;
	-webkit-background-size:auto 144px;
}
#step_04 div.step_ttl:after {
	bottom:0;
	width:133px;
  height:132px;
	background:url(../images/flow/step04_img.png) 0 0 no-repeat;
	background-size:auto 132px;
	-webkit-background-size:auto 132px;
}
#step_free .step_free_in {
	padding:26px 0 22px 0;
}
#step_free .step_free_in:before {
	top:0;
	left:38px;
	width:42px;
	height:15px;
}
#step_free .step_free_in:after {
	top:15px;
	left:16px;
  width:0px;
  height:0px;
  margin:auto;
  border-style:solid;
  border-width:42px 42px 0 42px;
}
#step_01 p,
#step_05 p {
	margin:0 0 20px 0;
}
/* tel_mail */
div.step_box .tel_mail {
	width:320px;
}
div.step_ttl h3 {
	font-size:12px;
}
div.step_ttl h3 .pop {
	position:relative;
	top:-6px;
}
div.step_ttl h3 .icon_step {
	width:69px;
	height:59px;/* total 69px */
	padding-top:10px;
	font-size:14px;
	margin-bottom:5px;
}
div.step_ttl h3 .icon_step:before,
div.step_ttl h3 .icon_step:after {
	margin-top:-7px;
  border-width:15px 10px 0 10px;
}
div.step_ttl h3 .icon_step:before {
	right:-17px;
}
div.step_ttl h3 .icon_step:after {
	right:-15px;
}
div.step_ttl h3 .icon_step span {
	font-size:33px;
}
div.step_ttl h3 .big {
	font-size:25px;
	margin-top:5px;
}
#step_01{
	/*margin-bottom:15px;*/
}
#step_01 .tel_mail a .tel_num {
	text-align:center;
	padding-left:40px;
	padding-right:20px;
	background:url(../images/common/icon_f_tel.png) 15px center no-repeat;
	background-size:auto 25px;
	-webkit-background-size:auto 25px;
}
#step_free p {
	font-size:12px;
}
#step_free p .black {
	padding:0 3px;
	font-size:18px;
}
#step_free p .red {
	font-size:26px;
}
#step_free p.free_txt {
	padding-bottom:70px;
	width:300px;
	margin:0 auto;
}
#step_free p.free_txt {
	text-align:center;
}
#step_free p .maru {
	left:4px;
}
#step_free p .maru2 {
	left:-3px;
}
#step_free p .pop .pop1 {
	bottom:38px;
	left:38px;
}
#step_free p .pop .pop2 {
	bottom:18px;
	left:0;
}
#step_free p .pop .pop3 {
	bottom:0px;
	left:45px;
}
#step_free p .pop .pop4 {
	bottom:18px;
	left:98px;
	font-size:19px;
}
#step_free p .maru_blue {
	padding:3px 10px;
	font-size:16px;
}
#step_free p .maru {
	width:65px;
	height:65px;
	line-height:65px;
	font-size:36px;
}
#step_free p .last_txt {
	bottom:0;
	right:0;
	font-size:25px;
	text-align:left;
}
/* f_pay */
div.step_box #f_pay {
	width:320px;
	margin:0 auto;
}
div.step_box #f_pay h3 {
	font-size:21px;
margin-bottom:20px;
}
div.step_box #f_pay h3 span {
	font-size:33px;
}
div.step_box #f_pay ul li img {
	width:auto;
}
div.step_box #f_pay ul {
	width:90%;
}
@media screen and (max-width: 320px) {/* w320 */
#step_01 div.step_ttl:after {
	width:124px;
  height:139px;
	background:url(../images/flow/step01_img.png) 0 0 no-repeat;
	background-size:auto 139px;
	-webkit-background-size:auto 139px;
}
/* tel_mail */
div.step_box .tel_mail {
	width:288px;
}
#step_01 .tel_mail a .tel_num {
	padding-right:0;
}
/* f_pay */
div.step_box #f_pay {
	width:288px;
}
div.step_box #f_pay ul li span {
	width:133px;
}
}
}