/*
    account_top.css
*/
/*
    For reset.
*/

	*{
        -webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

	button, input, select, textarea {
		font-family : inherit;
		font-size   : 100%;
	}

/************************************** For PC. **************************************/

/* MAIN:RIGHT */

  div.ACC_BIL_LINE{
	width:100%;
    border:1px solid #ccc;
    background:#fff;
    padding: 20px;
    display: flex;
    flex-direction: row;
	flex-wrap: wrap;
	font-size:0.8em;
    margin-bottom:20px;
  }

  div.ACC_BIL_LINE p{
	margin:0;
    padding:0;
    line-height:1.6em;
  }

  div.ACC_BIL_LINE p.ACC_BIL_DATE{
	width:20%;
    order: 1;
  }

  div.ACC_BIL_LINE p.ACC_BIL_NAME{
	width:20%;
    order: 2;
  }

  div.ACC_BIL_LINE p.ACC_BIL_PRD{
	width:100%;
    word-wrap: break-word;
    order: 5;
    margin-top:10px;
  }

  div.ACC_BIL_LINE p.ACC_BIL_NUM{
	width:35%;
    order: 3;
  }

  div.ACC_BIL_LINE p.ACC_BIL_AMT{
	width:25%;
    order: 4;
  }

  div.ACC_BIL_LINE p.ACC_BIL_BTN{
	width:100%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    order: 6;
  }

  div.ACC_BIL_LINE p.ACC_BIL_BTN img{
    width:20px;
    height:auto;
    margin-left:20px;
  }




/************************************** For SP. **************************************/
@media screen and (max-width:767px){
  /* MAIN:RIGHT */

  div.ACC_BIL_LINE{
    flex-direction: column;
  }

  div.ACC_BIL_LINE p.ACC_BIL_DATE{
	width:100%;
    order: 1;
  }

  div.ACC_BIL_LINE p.ACC_BIL_NAME{
	width:100%;
    font-weight:bold;
    margin:10px 0;
    order: 2;
  }

  div.ACC_BIL_LINE p.ACC_BIL_PRD{
	width:100%;
    line-height:1.6em;
    order: 4;
    margin-top:0;
  }

  div.ACC_BIL_LINE p.ACC_BIL_NUM{
	width:100%;
    display: flex;
    line-height:1.6em;
    order: 3;
  }

  div.ACC_BIL_LINE p.ACC_BIL_AMT{
	width:100%;
    line-height:1.6em;
    order: 5;
  }

  div.ACC_BIL_LINE p.ACC_BIL_BTN{
    order: 6;
  }

}