

@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;900&display=swap');

 #reform-flow,
  #reform-flow *,
  #reform-flow-header,
  #reform-flow-header *{
    box-sizing:border-box !important;
  }

  #reform-flow,
  #reform-flow-header{
    width:700px !important;
    max-width:100% !important;
    margin-right:auto !important;
    margin-left:auto !important;
    color:#333333 !important;
    background:#ffffff !important;
    font-family:
      "Yu Gothic",
      "YuGothic",
      "Hiragino Kaku Gothic ProN",
      "Meiryo",
      sans-serif !important;
  }

  #reform-flow{
    padding:0 !important;
  }

  /* =====================================
     上部ヘッダー
  ===================================== */

  #reform-flow-header{
    margin-bottom:30px !important;
    padding:0 !important;
  }

  #reform-flow-header .rf-top-image{
    display:block !important;
    width:700px !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  #reform-flow-header .rf-top-text{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:18px 45px 10px !important;
    color:#333333 !important;
    font-size:14px !important;
    line-height:1.65 !important;
  }

  #reform-flow-header .rf-top-text p{
    display:block !important;
    width:100% !important;
    margin:0 0 2px !important;
    padding:0 !important;
    color:#333333 !important;
    font-size:14px !important;
    line-height:1.65 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  #reform-flow-header .rf-bottom-title{
    display:block !important;
    width:100% !important;
    margin:8px 0 0 !important;
    padding:7px 15px 8px !important;
    border:1px solid #d0d0d0 !important;
    border-radius:4px !important;
    background:
      linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 45%,
        #f2f2f2 100%
      ) !important;
    box-shadow:0 3px 5px rgba(0,0,0,.35) !important;
    color:#006dbd !important;
    font-size:23px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  /* =====================================
     各ステップ
  ===================================== */

  #reform-flow .rf-step{
    display:grid !important;
    grid-template-columns:223px minmax(0,1fr) !important;
    column-gap:16px !important;
    align-items:start !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  #reform-flow .rf-step-image{
    display:block !important;
    width:223px !important;
    height:auto !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  #reform-flow .rf-step-text{
    display:block !important;
    min-width:0 !important;
    margin:0 !important;
    padding:13px 0 0 !important;
    color:#333333 !important;
    font-size:14px !important;
    line-height:1.55 !important;
    white-space:normal !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  #reform-flow .rf-step-text p{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    color:#333333 !important;
    font-size:14px !important;
    line-height:1.55 !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  /* Step04のオレンジ文字 */
  #reform-flow .rf-step-text .rf-important{
    margin-top:3px !important;
    color:#f15a00 !important;
    font-weight:700 !important;
  }

  /* =====================================
     下向き矢印
  ===================================== */

  #reform-flow .rf-arrow{
    position:relative !important;
    width:44px !important;
    height:31px !important;
    margin:14px 0 18px 428px !important;
    padding:0 !important;
  }

  #reform-flow .rf-arrow::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:12px !important;
    width:20px !important;
    height:15px !important;
    background:#ffffff !important;
    border-right:1px solid #dddddd !important;
    border-left:1px solid #dddddd !important;
    box-shadow:0 2px 4px rgba(0,0,0,.08) !important;
  }

  #reform-flow .rf-arrow::after{
    content:"" !important;
    position:absolute !important;
    bottom:0 !important;
    left:0 !important;
    width:0 !important;
    height:0 !important;
    border-top:16px solid #ffffff !important;
    border-right:22px solid transparent !important;
    border-left:22px solid transparent !important;
    filter:
      drop-shadow(0 1px 0 #dddddd)
      drop-shadow(0 2px 2px rgba(0,0,0,.08)) !important;
  }

  /* =====================================
     スマートフォン
  ===================================== */

  @media screen and (max-width:700px){

    #reform-flow,
    #reform-flow-header{
      width:100% !important;
    }

    #reform-flow{
      padding:0 14px !important;
    }

    #reform-flow-header .rf-top-image{
      width:100% !important;
    }

    #reform-flow-header .rf-top-text{
      padding:16px 14px 10px !important;
      font-size:14px !important;
    }

    #reform-flow-header .rf-top-text p{
      font-size:14px !important;
    }

    #reform-flow-header .rf-bottom-title{
      padding:8px 10px !important;
      font-size:18px !important;
      line-height:1.4 !important;
    }

    #reform-flow .rf-step{
      grid-template-columns:1fr !important;
      row-gap:12px !important;
    }

    #reform-flow .rf-step-image{
      width:100% !important;
      max-width:223px !important;
      margin:0 auto !important;
    }

    #reform-flow .rf-step-text{
      padding-top:0 !important;
      font-size:14px !important;
    }

    #reform-flow .rf-step-text p{
      font-size:14px !important;
    }

    #reform-flow .rf-arrow{
      margin:12px auto 18px !important;
    }
  }