/*
    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_TOP_LINKS_PAID{
    margin-bottom:100px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding-top:20px;
    padding-bottom:20px;
  }

  div.ACC_TOP_LINKS_PAID_BOX{
	width:25%;
    margin-bottom:0;
    position:relative;
    text-align:center;
    padding:26px 0 30px 0;
  }

  div.ACC_TOP_LINKS_PAID_BOX p{
	margin:0;
    padding:0;
  }

  p.ACC_TOP_LINKS_PAID_BOX_IMG{
	width:60px;
	height:60px;
    border-radius: 10px
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	background: #2D9BF0;
    position: relative;
    display: inline-block;
  }

  p.ACC_TOP_LINKS_PAID_BOX_IMG img{
	width:50%;
    height:auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
  }

  p.ACC_TOP_LINKS_PAID_BOX_IMG2{
	width:60px;
	height:60px;
    border-radius: 10px
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    position: relative;
    display: inline-block;
  }

  p.ACC_TOP_LINKS_PAID_BOX_IMG2 img{
	width:100%;
    height:auto;
  }

  p.ACC_TOP_LINKS_PAID_BOX_TTL{
	width:100%;
    font-weight:bold;
    font-size:90%;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  div.ACC_TOP_LINKS_PAID_BOX span{
	width:20px;
	height:20px;
    border-radius: 10px
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	background: #E10404;
    color:#fff;
    position: absolute;
    top: 16px;
    right: calc(44% - 30px);
    font-size:70%;
    line-height:20px;
    font-weight:normal;
  }

  div.ACC_TOP_LINKS_PAID_HOURS_BOX{
    width:70%;
    position:absolute;
    bottom:20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background:#ED1414;
    border-radius:10px;
    font-weight:bold;
    color:#fff;
    text-align:center;
    font-size:90%;
    padding:10px;
/*    display:flex;
    flex-wrap:wrap;
    justify-content: center;*/
    line-height:1.4em;
  }

/*  div.ACC_TOP_LINKS_PAID_HOURS_BOX span{
    display:block;
    width:100%;
  }
  div.ACC_TOP_LINKS_PAID_HOURS_BOX span.TIME::before {
    content: "/";
    margin-left: 3px;
    margin-right: 3px;
  }
*/
  div.ACC_TOP_LINKS_PAID_HOURS_BOX span.TIME {
    margin-left: 5px;
  }
  div.ACC_TOP_LINKS_FREE{
	width:80%;
	margin:0 auto;
    margin-bottom:80px;
    display:flex;
    flex-wrap:wrap;
    /*justify-content:center;*/
    padding-top:20px;
    padding-bottom:40px;
  }

  div.ACC_TOP_LINKS_FREE_BOX{
	width:49%;
    margin-bottom:0;
    position:relative;
    text-align:center;
    padding:26px 0 40px 0;
    
  }

  div.ACC_TOP_LINKS_FREE_BOX p{
	margin:0;
    padding:0;
  }

  p.ACC_TOP_LINKS_FREE_BOX_IMG{
	width:70%;
	height:60px;
    border-radius: 10px
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    position: relative;
    display: inline-block;
  }

  p.ACC_TOP_LINKS_FREE_BOX_IMG img{
	width:auto;
    height:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
  }

  p.CLR01{
	background: #FBC810;
  }

  p.CLR02{
	background: #90D24F;
  }

  p.CLR03{
	background: #2D9BF0;
  }

  p.CLRID{
	background: #FF5700;
  }

  p.CLR03 img{
	width:32px;
    height:auto;
  }

  p.CLRID img{
	width:32px;
    height:auto;
  }

  div.ACC_TOP_LINKS_FREE_BOX span{
	width:20px;
	height:20px;
    border-radius: 10px
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	background: #E10404;
    color:#fff;
    position: absolute;
    top: 16px;
    right: 12%;
    font-size:70%;
    line-height:20px;
    font-weight:normal;
  }

  p.ACC_TOP_LINKS_FREE_BOX_TTL{
	width:100%;
    font-weight:bold;
    font-size:90%;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  div.ACC_TOP_PLANS{
  }

  div.ACC_TOP_PLANS_BOX{
	width:100%;
    margin:10px 0;
  }

  div.ACC_TOP_PLANS_BOX h4{
	position:relative;
  }

  div.ACC_TOP_PLANS_BOX h4 span{
	position:absolute;
    top:0;
    right:0;
  }

  div.ACC_TOP_PLANS_BOX ul{
	background: #F8F8F8;
	padding:30px;
    margin:10px 0 20px 0;
  }

  div.ACC_TOP_PLANS_BOX ul li{
	font-size: 80%;
	line-height:1.6em;
	background:url(../imgs/check.png) no-repeat;
	background-size: 14px 14px;
	background-position: 0 50%;
	padding-left:40px;
	padding-top:6px;
	padding-bottom:6px;
  }

  div.ACC_TOP_PLANS_DTL{
	position:relative;
    margin-bottom:60px;
  }

  div.ACC_TOP_PLANS_DTL p{
	margin:0;
    padding:0;
  }

  div.ACC_TOP_PLANS_DTL p.DTL a{
	text-decoration:underline;
  }

  div.ACC_TOP_PLANS_DTL p.BTN{
	position:absolute;
    top:0;
    right:0;
    line-height:1.4em;
  }

  div.ACC_TOP_PLANS_DTL p.BTN a{
    width:140px;
    display:block;
    text-align:center;
    padding: 8px 10px;
    background: #F49D1A;
    border-radius: 10px;
    font-size: 90%;
    color: #fff;
  }

  div.ACC_HIS_LINE{
    margin-bottom:30px;
    font-size: 90%;
  }

  /* Dialog */
  div.ID_VRF_DIALOG_BG{
    display: flex;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000;
    background:rgba(0, 0, 0, 0.4);
    justify-content:center;
      align-items: center;
  }

  div.ID_VRF_DIALOG_BOX{
      width:54%;
      height:auto;
      padding:0;
      background:#fff;
      display: flex;
      height: auto;
      flex-wrap:wrap;
  }

  div.ID_VRF_DIALOG_BOX img{
      width:100%;
      height:auto;
  }

  div.ID_VRF_DIALOG_BOX h4{
      margin-bottom:20px;
  }

  div.ID_VRF_DIALOG_BOX p{
      margin:0 ;
      padding:0;
      width:100%;
      font-size:0.9em;
      padding:20px;

  }

  div.ID_VRF_DIALOG_BOX p input{
      margin-right:6px;

  }

  p.ID_VRF_DIALOG_BTN_ON{
      display: flex;
      justify-content:center;
      margin-top:10px;
  }

  p.ID_VRF_DIALOG_BTN_ON a{
      width:160px;
      display:block;
      color:#fff;
      background:#3675FB;
      border-radius:6px;
      padding: 8px 8px ;
      text-align:center;
      cursor:pointer;
  }

  p.ID_VRF_DIALOG_BTN_OFF{
      display: flex;
      justify-content:center;
      margin-top:10px;
  }

  p.ID_VRF_DIALOG_BTN_OFF a{
      width:160px;
      display:block;
      color:#fff;
      background:#c0c0c0;
      border-radius:6px;
      padding: 8px 8px ;
      text-align:center;
      cursor:default;
  }


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

  div.ACC_TOP_LINKS_PAID_BOX{
	width:50%;
  }

  div.ACC_TOP_PLANS_BOX h4{
    height:4.0em;
  }

  div.ACC_TOP_PLANS_BOX h4 span{
    top:2.0em;
  }

  div.ACC_TOP_LINKS_FREE{
    justify-content:space-between;
  }

  div.ACC_TOP_LINKS_FREE_BOX{
	width:50%;
  }

  p.ACC_TOP_LINKS_FREE_BOX_IMG{
	width:60px;
  }

  div.ACC_TOP_LINKS_PAID_HOURS_BOX{
    width:calc(100% - 40px);
    font-size:90%;
    padding:6px;
    /*right:20px;*/
    bottom:40px;
  }
/*
  div.ACC_TOP_LINKS_PAID_HOURS_BOX span.DATE{
    width:auto;
  }

  div.ACC_TOP_LINKS_PAID_HOURS_BOX span.DATE::before {
    content: ":";
    margin-left: 3px;
    margin-right: 3px;
  }
*/
  div.ACC_TOP_LINKS_FREE_BOX span{
    top: 16px;
    right: calc(44% - 30px);
  }

  div.ID_VRF_DIALOG_BOX{
      width:90%;
      height:auto;
      /*overflow-y:scroll;*/
  }

  p.ACC_TOP_LINKS_FREE_BOX_TTL{
    line-height:1.4em;
  }


}