/*
    purchase.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. **************************************/
	div.PURCHASE_WP{
      width:100%;
      border-bottom:1px solid #434343;
      margin-bottom:10px;
      line-height:1.8em;
	}

	div.PURCHASE_BOX{
      width:86%;
      max-width: 1000px;
      margin:0 auto;
      padding:60px 0 40px 0;
	}

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

	div.PURCHASE_BOX h2{
      font-size:180%;
      font-weight:bold;
      margin-bottom:40px;
	}

/*	div.PURCHASE_BOX h2 span{
      display: none;
	}
*/
	div.PURCHASE_FORM_WP{
      display: flex;
      justify-content:space-between;
      margin:30px 0;
	}

	div.PURCHASE_FORM{
      width:55%;
      display: flex;
      flex-direction: column;
	}

	div.PURCHASE_FORM_LINE01{
      display: flex;
      align-items:center;
      margin-bottom:20px;
	}

	div.PURCHASE_FORM_LINE01 div.PURCHASE_FORM_LINE_CNT{
      width:50%;
      font-size:90%;
      display: flex;
      flex-direction: column;
	}

	div.PURCHASE_FORM_LINE02{
      margin-bottom:10px;
	}

	div.PURCHASE_FORM_LINE02 p{
      margin:0;
      padding:0;
      font-size:90%;
      display: flex;
      align-items:center;
	}

	div.PURCHASE_FORM_LINE02 p img{
      margin-left:20px;
	}

	div.PURCHASE_FORM_LINE03{
      display: flex;
      align-items:center;
      margin-bottom:20px;
	}

	div.PURCHASE_FORM_LINE03  div.PURCHASE_FORM_LINE_CNT{
      width:25%;
      font-size:90%;
      display: flex;
      flex-direction: column;
	}

	div.PURCHASE_FORM img{
      width:auto;
      height:1.4em;
	}

    p.PURCHASE_FORM_P01{
      font-size:90%;
      font-weight:bold;
      line-height:3.0em;
    }

    p.PURCHASE_FORM_P02{
      font-size:90%;
      font-weight:bold;
      display: flex;
      align-items:center;
      padding-bottom:10px;
    }

    p.PURCHASE_FORM_P02 img{
      margin-left:6px;
    }

    div.PURCHASE_FORM input[type="text"]{
      width:90%;
  	  padding: 4px 6px;
  	  border: 1px solid #7a7a7a;
  	  font-size:0.9em;
  	  -webkit-box-sizing: border-box;
  	  -moz-box-sizing: border-box;
  	  -o-box-sizing: border-box;
  	  -ms-box-sizing: border-box;
  	  box-sizing: border-box;
    }
  
    .HIGH_IN_BASIC_01{
      background-color: #FFCCE8;
    }
  
    #card_number, #card_holder, #card_expiry, #card_security{
      width:90%;
  	  padding: 4px 6px;
  	  border: 1px solid #7a7a7a;
  	  font-size:0.9em;
  	  -webkit-box-sizing: border-box;
  	  -moz-box-sizing: border-box;
  	  -o-box-sizing: border-box;
  	  -ms-box-sizing: border-box;
  	  box-sizing: border-box;
    }
  
    #card_errors{
  	  font-weight:bold;
      background:#e2e2e2;
    }

    div.PURCHASE_FORM input[type="radio"]{
      margin-right:10px;
    }

	div.PURCHASE_PLAN{
      width:43%;
      border:1px solid #ccc;
      padding:20px 10px; 
      display: flex;
      flex-direction: column;
	}

	div.PURCHASE_PLAN h3{
      font-weight:bold;
      margin-bottom:30px;
	}

	div.PURCHASE_PLAN img{
      width:100%;
      height:auto;
      margin-bottom:20px;
	}

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


	div.PURCHASE_PLAN p.PURCHASE_PLAN_TTL{
      margin-bottom:10px;
      font-weight:bold;
	}

	div.PURCHASE_PLAN p.PURCHASE_PLAN_PRICE{
      font-weight:bold;
      margin-bottom:8px;
      display:flex;
      
	}

	div.PURCHASE_PLAN p.PURCHASE_PLAN_PRICE >:last-child {
      margin-left: auto;
    }
	div.PURCHASE_PLAN p.PURCHASE_PLAN_TXT{
      font-size:clamp(0.5rem, -0.117rem + 1.21vw, 0.69rem);
      line-height:1.6em;
      /*font-weight:bold;*/
      margin-bottom:30px;
      white-space: nowrap;
	}


    div.PURCHASE_PLAN p.PURCHASE_PLAN_BTN{
      width:100%;
      text-align:center;
      display:flex;
      justify-content: center;
    }
  
    div.PURCHASE_PLAN p.PURCHASE_PLAN_BTN button{
      display:block;
      width:200px;
      padding: 8px 40px;
      border-radius: 10px;
      font-size: 90%;
      color: #fff;
      cursor: pointer;
      font-weight:normal;
      background: #337CCF;
      border:0;
    }

    div.PURCHASE_BOX p.PURCHASE_PLAN_BTN_SP{
      display:none;
    }
  

	div.PURCHASE_BOX2{
      width:86%;
      max-width: 1000px;
      margin:0 auto;
      padding:60px 0 40px 0;
	}

	div.PURCHASE_DONE_BOX{
      width:50%;
      margin:0 auto;
      padding:6% 4%;
      border:1px solid #ccc;
      display:flex;
      flex-direction: column;
      text-align:center;
      background: #fff;
      position:relative;
	}

	div.PURCHASE_DONE_BOX p{
      margin:0;
      padding:0;
      font-size: 80%;
      font-weight:bold;
	}

	div.PURCHASE_DONE_BOX img{
      width:30px;
      margin:0 auto;
      margin-bottom:10px;
	}

	div.PURCHASE_DONE_BOX h3{
      display:flex;
      flex-direction: column;
      justify-content: center;
	}

	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_BTN{
      margin:20px 0;
	}

	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_BTN a{
      display:block;
      width:auto;
      padding: 8px 40px;
      border-radius: 10px;
      font-size: 110%;
      color: #fff;
      cursor: pointer;
      font-weight:normal;
      background: #337CCF;
      border:0;
	}

	div.PURCHASE_DONE_BOX p span{
      margin-left:10px;
	}

	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_TXT4{
      width:70%;
      margin:0 auto;
      text-align:left;
	}

	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_TXT2{
      width:70%;
      margin:0 auto;
      text-align:left;
      font-weight:bold;
      position:relative;
      display:flex;
	}

	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_TXT2 span{
    margin-left:0;
      display:block;
/*      position:absolute;
      right:0;
      top:0;
*/	}

/*	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_TXT2 span#lb_name_price{
      left:0;
	}
*/
	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_TXT2_LAST{
      margin-bottom:14px;
	}

	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_TXT2 >:last-child {
      margin-left: auto;
    }



	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_TXT3{
      width:80%;
      margin:0 auto;
      text-align:left;
      font-weight:normal;
      margin-top:12px;
      position:relative;
	}

	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_TXT3 span{
    margin-left:0;
      display:block;
      font-weight:bold;
      position:absolute;
      right:20%;
      top:0;
	}

  div.PURCHASE_CONFIRM_BOX_WP {
    display: flex;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    background:rgba(0, 0, 0, 0.6);
    justify-content: center;
    font-size:0.9em;
  }

  div.PURCHASE_CONFIRM_BOX_WP h3{
    width: 80%;
    margin:0 auto;
    text-align:left;
  }

  div.PURCHASE_CONFIRM_BOX_WP div.PURCHASE_BOX2{
    margin-top:50px;
  }

	div.PURCHASE_DONE_BOX span.PURCHASE_DONE_CLOSE{
	  position: absolute;
	  top:10px;
	  right:10px;
      display:block;
	  width:20px;
      height:20px;
      cursor:pointer;
	}

	div.PURCHASE_DONE_BOX span.PURCHASE_DONE_CLOSE img{
	  width:16px;
      height:16px;
	}

	div.PURCHASE_DONE_BOX span.HIGH_CARD_NUM{
      background: #FFCCE8;
      display:block;
      width:100%;
      height:1.6em;
	}



/************************************** For SP. **************************************/
@media screen and (max-width:767px){
	div.PURCHASE_WP{
      border-bottom:0;
      line-height:2.0em;
	}

	div.PURCHASE_FORM h2{
      font-size:160%;
      margin-bottom:20px;
	}

	div.PURCHASE_BOX h2 span{
      display: block;
      font-size:80%;
      margin-top:20px;
	}

	/*div.PURCHASE_BOX p.PURCHASE_BOX_MSG{
      display:none;
	}*/

	div.PURCHASE_FORM_WP{
      flex-direction: column;
      margin: 0;
	}

	div.PURCHASE_FORM{
      width:100%;
	}

	div.PURCHASE_PLAN{
      width:100%;
	}

	div.PURCHASE_BOX p.PURCHASE_FORM_P01{
      display:none;
	}

    div.PURCHASE_PLAN p.PURCHASE_PLAN_BTN button{
      width:100%;
    }

    div.PURCHASE_BOX p.PURCHASE_PLAN_BTN_SP{
      width:100%;
      text-align:center;
      display:flex;
      justify-content: center;
      margin-top:20px;
    }
  
    div.PURCHASE_BOX p.PURCHASE_PLAN_BTN_SP a{
      display:block;
      width:100%;
      padding: 8px 40px;
      border-radius: 10px;
      font-size: 90%;
      color: #fff;
      cursor: pointer;
      font-weight:normal;
      background: #337CCF;
    }

	div.PURCHASE_FORM_LINE01{
      display: flex;
      align-items:center;
      margin-bottom:30px;
      flex-direction: column;
	}

	div.PURCHASE_FORM_LINE01  div.PURCHASE_FORM_LINE_CNT{
      width:100%;
	}

    div.PURCHASE_FORM input[type="text"]{
      width:100%;
  	  font-size:1.0em;
    }

    #card_number, #card_holder, #card_expiry, #card_security{
      width:100%;
  	  font-size:1.0em;
    }

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

	div.PURCHASE_FORM_LINE03  div.PURCHASE_FORM_LINE_CNT{
      width:45%;
	}

    div.PURCHASE_FORM_LINE03 input[type="text"]{
      width:100%;
  	  font-size:1.0em;
    }

	div.PURCHASE_DONE_BOX{
      width:100%;
	}

	div.PURCHASE_PLAN p.PURCHASE_PLAN_TXT{
      font-size:0.6em;
      white-space: normal;

	}

	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_TXT3 span{
      right:0;
	}

	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_TXT2{
      width:80%;
	}

	div.PURCHASE_DONE_BOX p.PURCHASE_DONE_TXT4{
      width:80%;
	}

}