@charset "utf-8";
/*
機　　能　　名：制作の流れ
作　　成　　日：2016/06/13
作　　成　　者：52WEB WORKS. 関本
更　　新　　日：2025/10/09 関本

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

div#flow {
}

/* step_box */
div.step_box {
border:1px solid #CCCCCC;
position:relative;
padding:30px;
margin-bottom:60px;
}
div.step_box h2 {
color:#008A8A;
}

span.telnum {
font-size:33px;
}
span.telnum::before {
content: "";
display: block;
display:inline-block !important;
width:28px;
height:28px;
margin-right:10px;
background:url("../images/common/icon_tel.png") 0 0 no-repeat;
background-size: contain;
position:relative;
top:1px;
}
span.telnum span.hours::before {
content:"受付時間";
display:block;
width:100%;
text-align:center;
position:absolute;
top:-2.2em;
left:50%;
-webkit-transform: translateX(-50%); /* Safari用 */
transform: translateX(-50%);
background-color:#CCECEC;
border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
font-size:0.8em;
padding:0.2em 0 0;
font-weight:bold;
}
span.telnum span.hours {
display:inline-block;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
font-weight:normal;
font-size:0.45em;
margin-left:2em;
letter-spacing:0.1em;
text-align:center;
position:relative;
top:0.5em;
}




div.step_box div.step_box_l span.ti {
font-size:0.8em;
color:#FFF;
background:#666666;
padding:3px 10px 2px;
border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
margin-right:10px;
font-weight:normal;
letter-spacing:0.1em;
position:relative;
top:-1px;
}

div.step_box .inquiry_btn a {
font-size:0.9em;
width:100%;
padding:15px 0;
border:1px solid #999;
background-color:#fff;
text-align:center;
color:#222;
text-decoration:none;
display:block;
font-weight:bold;
letter-spacing:0.2em;
margin:0 auto;
line-height:0;
border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
div.step_box .inquiry_btn a span {
display:inline-block;
width:15px;
height:11.3px;
margin-right:20px;
background-color:inherit;
}
div.step_box .inquiry_btn a span img {
width:15px;
}

@media screen and (min-width: 769px) {/* PC */
/* header */
h2.main_ttl_txt_bg {
background:url(../images/flow/main_img.jpg) center 0 no-repeat;
}
h2.main_ttl_txt_bg2 {
background:url(../images/flow/main_img.jpg) center 0 no-repeat;
}

div.step_box .inquiry_btn a:hover {
border:1px solid #FF6699;
background:#FF6699;
color:#fff;
}
div.step_box .inquiry_btn a:hover span {
background:url(../images/common/btn_arrow_on.gif) center no-repeat;
background-size:15px;
}
div.step_box .inquiry_btn a:hover span img {
visibility:hidden;
}


/* step_box */
div#step01,
div#step06 {
margin-left:30px;
width:875px;/* total 970px */
padding:45px 30px 30px 65px;
}
div#step01 {
padding-top:30px;
}
div#step06 {
padding-top:30px;
}
div#step02,
div#step03,
div#step04,
div#step05 {
width:598px;/* total 658px */
margin:0 0 110px 340px;
}
div.step_box p {
width:inherit !important;
padding:inherit !important;
}
div.step_box div.step_box_l {
float:left;
width:290px;
width:100%;
}
div#step01 div.step_box_l {
width:552px;
}
div#step05 div.step_box_l {
xwidth:500px;
}
div#step06 div.step_box_l {
xwidth:500px;
}



div.step_box div.step_box_l h2 {
font-size:26px;
margin-bottom:50px;
}
div.step_box h2 img {
position:absolute;
top:30px;
left:-20px;
}
div#step01 h2 img,
div#step06 h2 img {
left:-30px;
}
div#step01 div.step_box_l h2 {
margin-bottom:30px;
}
div#step06 div.step_box_l h2 {
float:left;
}
div#step02 div.step_box_l h2,
div#step03 div.step_box_l h2,
div#step04 div.step_box_l h2,
div#step05 div.step_box_l h2 {
padding-left:45px;
margin-bottom:30px;
line-height:1.2;
}
div#step04 div.step_box_l h2,
div#step05 div.step_box_l h2 {
padding-top:15px;
margin-bottom:50px;
}
div#step06 div.step_box_l p {
float:right;
margin:0;
}
div#step01 div.step_box_l p,
div#step02 div.step_box_l p,
div#step03 div.step_box_l p,
div#step04 div.step_box_l p,
div#step05 div.step_box_l p {
margin:0 0 20px 0;
}
div#step02 div.step_box_l p.lastChild,
div#step03 div.step_box_l p.lastChild,
div#step04 div.step_box_l p.lastChild,
div#step05 div.step_box_l p.lastChild {
margin:0;
}
div#step05 div.step_box_l p.line_two {
position:relative;
padding-left:6em !important;
}
div#step05 div.step_box_l p.line_two span {
position:absolute;
top:0;
left:0;
}
div#step01 div.pc div.clearfix {
margin-bottom:20px;
}
div#step01 div.pc div.clearfix img {
float:left;
}
div#step01 div.pc img.firstChild {
margin-right:15px;
}
div.step_box img.step_img {
float:right;
}
div#step01 img.arrow {
position:absolute;
bottom:-146px;
left:77px;
}
div#step06 img.arrow {
position:absolute;
top:-241px;
left:70px;
}
div#step02 img.arrow,
div#step03 img.arrow,
div#step04 img.arrow {
position:absolute;
bottom:-101px;
left:37px;
}
}
@media screen and (max-width: 768px) {/* SP */
/* header */
h2.main_ttl_txt_bg {
background:url(../images/flow/main_img_sp.jpg) 0 0 no-repeat;
-webkit-background-size:100% auto;
}
h2.main_ttl_txt_bg2 {
background:url(../images/flow/main_img_sp.jpg) 0 0 no-repeat;
-webkit-background-size:100% auto;
}
div.step_box h2 {
font-size:1.3em;
padding-left:15px;
}
div.step_box h2 img {
width:45px;
position:absolute;
top:22px;
left:-10px;
}
div#step01 p {
margin-bottom:20px;
}
div#step01 a {
display:block;
}
div.step_box img.step_img {
margin-top:20px;
}

div.step_box div.step_box_l span.ti {
font-size:0.8em;
color:#FFF;
background:#666666;
padding:3px 10px;
position:relative;
top:-1px;
}
}