@charset "shift_jis";
@import url("flow_common.css");

/* =========================================

(C) SINIOR flow_top CSS

============================================ */

/*-- TOP --*/

#step .step_01{
width:775px;
height:187px;
_height:187px;
margin:0;
padding:15px 0 0 160px;
background:url(/static/contents/pc/flow/image/step_01.png) no-repeat 0 0;
}

#step  .step_02{
width:775px;
height:167px;
margin:0;
padding:15px 0 0 160px;
background:url(/static/contents/pc/flow/image/step_02.png) no-repeat 0 0;
}

#step  .step_03{
width:775px;
height:177px;
margin:0 0 10px ;
padding:15px 0 0 160px;
background:url(/static/contents/pc/flow/image/step_03.gif) no-repeat 0 0;
}

#step  .step_04{
width:775px;
height:167px;
margin:0;
padding:15px 0 0 160px;
background:url(/static/contents/pc/flow/image/step_04.gif) no-repeat 0 0;
}

#step  .step_05{
width:775px;
height:162px;
margin:0;
padding:15px 0 0 160px;
background:url(/static/contents/pc/flow/image/step_05.gif) no-repeat 0 0;
}

#step  h2.border{
background: none;
display:block;
width:543px;
height:28px;
padding:0 0 8px 0;
margin: 0 0 5px 0;
border-bottom:1px dotted #AAA;
color:#F55D61;
font-size:22px;
line-height:20px;
}

#step  p.text{
display:block;
float:left;
width:450px;
height:80px;
line-height:20px;
padding:2px 0 0 0;
font-weight:normal;
font-size: 16px;
}


/*-- 詳細はこちらボタン設定 --*/
#step  p.btn{
display:block;
float:right;
width:67px;
height:67px;
margin:7px 80px 0 0;
}

#step  p.btn a{
display:block;
width:67px;
height:67px;
background:url(/static/contents/pc/flow/image_cmn/btn_detail.gif) no-repeat 0 0;
text-indent:-9999px;
}

#step  p.btn a:hover{
display:block;
background:url(/static/contents/pc/flow/image_cmn/btn_detail.gif) no-repeat 0 -67px;
}


/*-- step_01/03の設定 --*/
#step .step_01 p.btn,
#step .step_03 p.btn{
margin:10px 80px 0 0;
}


/*-- procedureの設定 --*/

#procedure{
width:775px;
height:128px;
padding:28px 80px 0 80px;
margin:10px auto;
background:url(/static/contents/pc/flow/image/procedure.gif) no-repeat 0 0;
}

#procedure .l_box{
float:left;
}

#procedure h2.border{
background: none;
display:block;
width:520px;
height:25px;
line-height:20px;
padding: 0 0 5px 0;
margin: 0 0 5px 0;
color:#FFF;
border-bottom:1px dotted #FFF;
font-size:22px;
}

#procedure p.text{
display:block;
width:520px;
height:80px;
line-height:20px;
padding:5px;
color:#FFF;
font-weight:normal;
font-size: 16px;
}

#procedure p.btn{
display:block;
float:right;
width:67px;
height:67px;
margin:0;
}

#procedure p.btn a{
display:block;
width:67px;
height:67px;
background:url(/static/contents/pc/flow/image/btn_detail.gif) no-repeat 0 0;
text-indent:-9999px;
}

#procedure p.btn a:hover{
display:block;
background:url(/static/contents/pc/flow/image/btn_detail.gif) no-repeat 0 -67px;
}


@media screen and (max-device-width: 1024px) {
#content #h1_block {
width: 775px;
padding: 0 315px 0 20px;
background: url(../image_cmn/flow_title.gif) no-repeat 0 0;
}
#procedure {
height: 268px;
padding: 20px 80px 0 80px;
}
#procedure h2.border {
height: 35px;
}
}

/* ----------------------------
Reset module for sp
 ------------------------------ */
@media screen and (max-width: 767px) {
  #base,
  #content,
  #keyword_list dd ul {
    width: 100%;
  }
  #recomend_area {
    margin-top: 30px;
    padding: 10px;
    width: 100%;
  }
  #recomend_area .area_list,
  #recomend_area .area_list.listbox2 {
    margin: 0;
    width: 100%;
  }
  #content_page #content .wrapper {
    background: #fff;
    border: 1px solid #ffa3af;
    float: none;
    margin: auto;
    padding-bottom: 10px;
    width: calc(100% - 20px);
    overflow: visible;
  }
  #keyword_list {
    width: calc(100% - 30px);
  }
  #content_page #content #h1_block {
    background-image: none;
    margin: auto;
    padding: 10px 10px 0;
    position: relative;
    width: 100%;
  }
  #content #h1_block h1 {
    color: #d83c42;
    display: inline-block;
    float: none;
    font-size: 30px;
    font-weight: 600;
    height: auto;
    left: 0;
    line-height: 1.38em;
    padding: 3.5% 30% 3% 6%;
    position: absolute;
    text-indent: unset;
    text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 6px #fff, 0 0 8px #fff, 0 0 9px #fff, 0 0 10px #fff;
    top: 0;
    width: auto;
    z-index: 2;
  }
  #content #h1_block > img {
    border: 1px solid #d83c42;
    border-bottom-width: 3px;
    margin: -11px -11px 0;
    max-width: calc(100% + 22px);
    width: calc(100% + 22px);
  }
  #step {
    counter-reset: my-awesome-counter;
    position: relative;
  }
  #step h2.border {
    float: none;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
  }
  #step > div {
    counter-increment: my-awesome-counter;
    padding-left: 30px;
    position: relative;
  }
  #step > div:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    width: 0;
  }
  #step > div:before {
    background: #d83c42;
    border-radius: 50%;
    color: #fff;
    content: counter(my-awesome-counter);
    font-size: 20px;
    font-weight: 600;
    height: 32px;
    left: 5px;
    line-height: 32px;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 32px;
  }
  #step .step_05,
  #step .step_04,
  #step .step_03,
  #step .step_02,
  #step .step_01 {
    background: none;
    height: auto;
    margin-right: 10px;
    padding: 15px 0 0 45px;
    width: calc(100% - 10px);
  }
  #step p.text {
    float: none;
    height: auto;
    padding-right: 0;
    width: auto;
  }
  #content_page #step p.btn {
    float: none;
    height: auto;
    margin: 10px auto 15px;
    text-align: right;
    width: 100%;
  }
  #content_page #step p.btn a {
    background: none;
    color: #ed4247;
    float: none;
    font-size: 16px;
    height: auto;
    text-indent: 0;
    width: 100%;
  }
  #content_page #step p.btn a:after {
    border-right: 3px solid #ed4247;
    border-top: 3px solid #ed4247;
    content: "";
    display: inline-block;
    height: 10px;
    margin: 0 10px 3px 3px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    vertical-align: middle;
    width: 10px;
  }
  #procedure {
    background: -webkit-linear-gradient(#f96866, #ea3a40);
    background: linear-gradient(#f96866, #ea3a40);
    border-radius: 4px;
    border: 1px solid #f05b5b;
    height: auto;
    margin: 20px auto 0;
    padding: 20px 10px 0 10px;
    position: relative;
    width: calc(100% - 20px);
  }
  #procedure:before {
    border-radius: 4px;
    border: 2px solid #fff;
    bottom: 1px;
    clear: both;
    content: "";
    display: block;
    height: calc(100% - 2px);
    left: 1px;
    margin: auto;
    position: absolute;
    right: 1px;
    top: 1px;
    width: calc(100% - 2px);
  }
  #procedure:after {
    clear: both;
    content: "";
    display: block;
  }
  #procedure .l_box {
    float: none;
    width: 100%;
  }
  #procedure h2.border {
    float: none;
    font-size: 18px;
    height: auto;
    width: auto;
  }
  #procedure p.text {
    height: auto;
    width: auto;
  }
  #procedure p.btn {
    height: auto;
    margin: 10px auto 15px;
    text-align: center;
    width: 130px;
    float: none;
  }
  #procedure p.btn a {
    background: #fff -webkit-linear-gradient(#fbffc4, #fef0c5);
    background: #fff linear-gradient(#fbffc4, #fef0c5);
    border-radius: 4px;
    border: 1px solid #fff;
    box-shadow: 0 1px 0 0px rgba(0,0,0,0.15);
    box-sizing: border-box;
    color: #e9393c;
    display: inline-block;
    font-size: 16px;
    height: auto;
    padding: 7px 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    vertical-align: middle;
    width: 100%;
  }
  #procedure p.btn a:hover {
    background: #fff linear-gradient(#fbffc4, #fef0c5);
  }
}

@media screen and (max-width: 360px) {
  #content #h1_block h1 {
    font-size: 28px;
    line-height: 1.35em;
  }
}