@charset "utf-8";

/* ご利用の流れ
************************************************************* ご利用の流れ ***/
/* 各ブロック共通設定 */
#content1stWrap {
  box-sizing: border-box;
  width: 680px;
}

/****************************************************** タイトル ***/
#content1stWrap #content1st {
  background-image: url(../img/common-titleBack.png);
  background-repeat: no-repeat;
  background-position: left top;
  box-sizing: border-box;
  padding-left: 40px;
  height: 36px;
  width: 680px;
}
    #content1st span {
      background-image: url(../img/flow-titleText_1st.png);
      display: block;
      height: 31px;
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      width: 198px;
    }
#content1stWrap #titleCopy1st {
  background-image: url(../img/flow-titleCopy_1st.png);
  height: 23px;
  overflow: hidden;
  margin: 24px 0 0 40px;
  text-indent: 100%;
  white-space: nowrap;
  width: 508px;
}

#content1stWrap .contentTextWrap {
  margin: 16px 0 0 40px;
}
    .contentTextWrap p {
      line-height: 1.8em;
    }


/****************************************************** コンテンツ下部 ***/
#flow h3 {
  background-image: url(../img/flow-titleSub_1st.png);
  height: 23px;
  overflow: hidden;
  margin: 40px 0 0;
  text-indent: 100%;
  white-space: nowrap;
  width: 447px;
}

/****************************************************** フローチャート ***/
/* タイプ別画像 */
#typeTitle {
  display: inline-block;
  margin: 32px 0 0 96px;
}
    #typeTitle img {
      display: block;
    }
    /* 直下の矢印 */
#typeTitle + p {
  margin: 32px 0 0 206px;
}

/************************************************ 共通 */
/* 背景は下部で個別指定 */
#content1stWrap ul li {
  /* 画像自体は下記で個別設定 */
  background-repeat: no-repeat;
  background-position: left top;
  padding-left: 80px;
  margin-top: 32px;
}

.flowWrap {
  padding-bottom: 32px;
}
    .flowWrap h4 {
      /* 画像自体は下記で個別設定 */
      background-repeat: no-repeat;
      background-position: 8px top;
      border-bottom: 2px solid #cffcd4;
      height: 21px;
      overflow: hidden;
      padding: 0 0 8px 8px;
      text-indent: 100%;
      white-space: nowrap;
    }
    .flowWrap p {
      line-height: 1.8em;
      margin: 0 8px;
    }
    /* h4スグ下にある段落の上部余白 */
    .flowWrap h4 + p {
      margin-top: 4px;
    }
    /* .flowWrapスグ下にある段落内、imgをセンタリング */
    .flowWrap + p {
      clear: both;
    }
        .flowWrap + p img {
          display: block;
          margin: 0 auto;
        }

/* 受給証取得状態分岐 */
.stepTypeLeft {
  box-sizing: border-box;
  float: left;
  width: 288px;
}
.stepTypeRight {
  box-sizing: border-box;
  float: left;
  margin-left: 24px;
  width: 288px;
}

/************************************* 個別設定：STEP 1 */
#flowStep01 {
  background-image: url(../img/flow-stepMark_01.png);
}
    #flowStep01 .flowWrap h4 {
      background-image: url(../img/flow-stepTitle_01.png);
    }

/************************************* 個別設定：STEP 2 */
#flowStep02 {
  background-image: url(../img/flow-stepMark_02.png);
}
    #flowStep02 .flowWrap h4 {
      background-image: url(../img/flow-stepTitle_02.png);
    }

/************************************* 個別設定：STEP 3 */
#flowStep03 {
  background-image: url(../img/flow-stepMark_03.png);
}
    #flowStep03 .flowWrap h4 {
      background-image: url(../img/flow-stepTitle_03.png);
    }

/************************************* 個別設定：STEP 4 */
#flowStep04 {
  background-image: url(../img/flow-stepMark_04.png);
}
    /* 左側 */
    #flowStep04 .stepTypeLeft #h4Step04_1 {
      background-image: url(../img/flow-stepTitle_04_1.png);
    }
    #flowStep04 .stepTypeLeft p span {
      color: #1196a8;
      font-weight: bold;
    }

    /* 右側 */
    #flowStep04 .stepTypeRight #h4Step04_2 {
      border-bottom-color: #cfecfc;
      background-image: url(../img/flow-stepTitle_04_2.png);
    }
    #flowStep04 .stepTypeRight p span {
      color: #33b4cb;
      font-weight: bold;
    }

/************************************* 個別設定：STEP 5 */
#flowStep05 {
  background-image: url(../img/flow-stepMark_05.png);
}
    /* 左側 */
    #flowStep05 .stepTypeLeft h4 {
      background-image: url(../img/flow-stepTitle_05.png);
    }

    /* 右側 */
    #flowStep05 .stepTypeRight {
      padding: 56px 0 56px 106px;
    }

/************************************* 個別設定：STEP 6 */
#flowStep06 {
  background-image: url(../img/flow-stepMark_06.png);
}
    /* 左側 */
    #flowStep06 .stepTypeLeft {
      /* 右側とのバランス調節 */
      padding-bottom: 56px;
    }
        #flowStep06 .stepTypeLeft h4 {
          background-image: url(../img/flow-stepTitle_06.png);
        }

    /* 右側 */
    #flowStep06 .stepTypeRight {
      padding: 48px 0 56px 106px;
    }

/************************************* 個別設定：STEP 7 */
#flowStep07 {
  background-image: url(../img/flow-stepMark_07.png);
}
    #flowStep07 .flowWrap h4 {
      background-image: url(../img/flow-stepTitle_07.png);
    }