@charset "utf-8";
@import "/css/reset.css";
/*----------------------------------------------------------------*/
body{font-size:16px; background:url(/img/pc/back.gif) repeat-x left 100px;}
h2{margin-bottom:10px;}
span{color:#FF0000;}
p{margin-bottom:10px; line-height:140%;}
p:last-child{margin:0;}
p.strong{font-size:24px;}
ul,ol{list-style:none; line-height:120%;}
#container{width:860px; margin:45px auto 100px; position:relative;}
.container{width:860px; margin:0 auto; position:relative;}

/* ------------------------------------------------------------
     base
------------------------------------------------------------ */
header#header{padding-top:10px; text-align:center; border-bottom:solid 3px #0068B2; box-shadow:0 3px 4px #C8C7BD; background:#FFFFFF;}
  header#header #siteTitle{margin-bottom:20px;}
  header#header #siteId{display: inline-block;}
  header#header .pMark{display: inline-block;}
  header#header div.title{font-weight:bold; font-size:16px; color:#FFFFFF; padding:3px 5px 2px; border-radius:15px; background:#0058A8; display:inline;}
  header#header nav#globalNav{margin:20px auto 0; width:860px;}
    header#header nav#globalNav ul{}
    header#header nav#globalNav li{width:215px; border-left:solid 1px #D8D6CC; float:left; -webkit-box-sizing:border-box; box-sizing:border-box;}
    header#header nav#globalNav li:last-child{border-right:solid 1px #D8D6CC; -webkit-box-sizing:border-box; box-sizing:border-box;}
      header#header nav#globalNav li a{padding-top:15px; font-weight:bold; color:#000000; text-decoration:none; height:30px; display:block;}
      header#header nav#globalNav li a:hover{color:#FFFFFF; background:#0058A8;}
      header#header nav#globalNav li.current a{color:#FFFFFF; background:#0058A8;}
aside#breadcrumbs{margin-bottom:30px;}
  aside#breadcrumbs h2{display:none;}
  aside#breadcrumbs ul{font-size:14px;}
    aside#breadcrumbs li{float:left;}
    aside#breadcrumbs li:after{margin:0 5px; content:'>';}
    aside#breadcrumbs li:last-child:after{content:normal;}
      aside#breadcrumbs li a{color:#000000;}

.button{margin:0 auto; text-align:center; width:500px;}
  .button a{padding:25px 0 15px; font-weight:bold; color:#FFFFFF; text-decoration:none; border-radius:5px; box-shadow: 1px 1px 4px rgba(0,0,0,0.3); width:100%; display:block;
background: #6bc10d;
background: -moz-linear-gradient(top,  #6bc10d 0%, #31b311 100%);
background: -webkit-linear-gradient(top,  #6bc10d 0%,#31b311 100%);
background: linear-gradient(to bottom,  #6bc10d 0%,#31b311 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bc10d', endColorstr='#31b311',GradientType=0 );}
  .button input[type=submit]{padding:25px 0 15px; font-weight:bold; color:#FFFFFF; text-decoration:none; border-radius:5px; box-shadow: 1px 1px 4px rgba(0,0,0,0.3); width:100%; display:block;
background: #6bc10d;
background: -moz-linear-gradient(top,  #6bc10d 0%, #31b311 100%);
background: -webkit-linear-gradient(top,  #6bc10d 0%,#31b311 100%);
background: linear-gradient(to bottom,  #6bc10d 0%,#31b311 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bc10d', endColorstr='#31b311',GradientType=0 );}
  .button a:hover{color:#ddfbbd; box-shadow:none;
background: #31b311;
background: -moz-linear-gradient(top,  #31b311 0%, #6bc10d 100%);
background: -webkit-linear-gradient(top,  #31b311 0%,#6bc10d 100%);
background: linear-gradient(to bottom,  #31b311 0%,#6bc10d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31b311', endColorstr='#6bc10d',GradientType=0 );}
  .button input[type=submit]:hover{color:#ddfbbd; box-shadow:none;
background: #31b311;
background: -moz-linear-gradient(top,  #31b311 0%, #6bc10d 100%);
background: -webkit-linear-gradient(top,  #31b311 0%,#6bc10d 100%);
background: linear-gradient(to bottom,  #31b311 0%,#6bc10d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31b311', endColorstr='#6bc10d',GradientType=0 );}
  div#itemList.button a{font-size:40px;}
  div#itemList.button input[type=submit]{font-size:40px;}
div#itemOrder{width:380px;}
  div#itemOrder a, div#checked a{font-size:40px;}
  div#itemOrder input[type=submit], div#checked input[type=submit]{font-size:40px;}
div#informationInput{margin-top:70px;}
  div#informationInput a{font-size:30px;}
div#checked{margin-top:40px;}

footer#footer{padding:35px 0; background:url(/img/pc/footer_border.gif) repeat-x top;}
  footer#footer div#footerContact{margin-bottom:10px;}
#footerLinks{text-align: center}
  #footerLinks li{margin: 0 10px; display: inline-block;}
#privacymark{margin: 20px auto; width: 680px;}
#privacymark .pMark{float: left;}
#privacymark p{margin-top: 25px; width: 580px; float: right;}

section.section{margin-bottom:50px; box-shadow:0 0px 2px rgba(0,0,0,0.1); border-radius:0 0 5px 5px; background:#FFFFFF;}
h1.title{font-size:18px; color:#0068B2; padding:10px 10px 7px; margin-bottom:40px; border:solid 1px #D8D6CC; border-bottom:solid 2px #0068B2; box-shadow:inset 0 -1px 0 #FFFFFF; 
background:url(/img/pc/line.gif) repeat-x bottom;
background: -moz-linear-gradient(top,  #ffffff 0%, #e8e8e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e8e6));
background: -webkit-linear-gradient(top,  #ffffff 0%,#e8e8e6 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#e8e8e6 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#e8e8e6 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#e8e8e6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e6',GradientType=0 );}
section.step{margin-bottom:50px;}
section.step h1.title{margin-bottom:20px; border:solid 1px #D8D6CC; border-bottom:solid 2px #0068B2;}

table.form{width:100%; border:solid 1px #D8D6CC;}
  table.form tr{border-bottom:solid 1px #D8D6CC;}
  table.form tr:last-child{border:none;}
  table.form th{font-weight:normal; padding:20px 18px; vertical-align:middle; border-right:solid 1px #D8D6CC; background:#EBEEF2; border-bottom:solid 1px #D8D6CC;}
  table.form td{padding:18px; background:#FFFFFF; border-bottom:solid 1px #D8D6CC; text-align:left;}
  table.form td input{border:solid 1px #D8D6CC; height:24px;}
  table.form td input#name{width:294px;}
  table.form td input.postalCode{width:144px; margin-bottom:10px;}
  table.form td input.address{width:494px;}
  table.form td input#phone{width:194px;}
  table.form td input#mail{width:294px;}
  table.form td select{margin-bottom:10px; width:165px; height:30px; border:solid 1px #D8D6CC;}
  table.form tr.required th{width:163px; background:#FFFFCC;}
  table.form tr.required th:after{padding:8px 13px 5px; margin-top:-6px; content:"必須"; background:#C30202; font-size:12px; color:#FFFFFF; position:absolute; right:385px;}
  table#customerInformation.form tr.required th{width:183px; }
  table#customerInformation.form tr.required th:after{right:660px;}

  table.form tr.required td input{font-size:18px; height:44px;}
  table.form .inputKeyNumber input{width:300px;}
  table.form .inputNeedNumber input{width:100px;}
  table.form tr.required td select{font-size:18px; height:44px;}

  table.form.itemSelect td{padding: 5px; vertical-align: middle;}

  table.form p{font-size:14px; margin-top:9px;}
  table.form p.errorMessage{color:#FF0000; line-height:100%;}
  div#toConfirmation{margin:0 auto; width:500px;}
  div#transmission{width:500px; float:right;}
    div.transmission input{display:block; font-size:40px; color:#FFFFFF; width:100%; height:80px; text-shadow:0px 1px 4px #117300; box-shadow:inset 1px 1px 0 #32B311, inset 2px 2px 0 #7EE30F, 1px 1px 2px rgba(0,0,0,0.3); border:none; border-radius:5px; background:#6bc10d; background:linear-gradient(to bottom,  #6bc10d 15%,#31b311 80%); cursor:pointer;
background: #6bc10d;
background: -moz-linear-gradient(top,  #6bc10d 15%, #31b311 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#6bc10d), color-stop(80%,#31b311));
background: -webkit-linear-gradient(top,  #6bc10d 15%,#31b311 80%);
background: -o-linear-gradient(top,  #6bc10d 15%,#31b311 80%);
background: -ms-linear-gradient(top,  #6bc10d 15%,#31b311 80%);
background: linear-gradient(to bottom,  #6bc10d 15%,#31b311 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bc10d', endColorstr='#31b311',GradientType=0 );}
    div.transmission input:hover{box-shadow:inset 0px 1px 4px #117300; text-shadow:none; color:#ddfbbd;
background: #31b311;
background: -moz-linear-gradient(top,  #31b311 15%, #6bc10d 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#31b311), color-stop(80%,#6bc10d));
background: -webkit-linear-gradient(top,  #31b311 15%,#6bc10d 80%);
background: -o-linear-gradient(top,  #31b311 15%,#6bc10d 80%);
background: -ms-linear-gradient(top,  #31b311 15%,#6bc10d 80%);
background: linear-gradient(to bottom,  #31b311 15%,#6bc10d 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31b311', endColorstr='#6bc10d',GradientType=0 );}
  div#return{width:140px; float:left;}
    div#return input{display:block; font-size:30px; width:100%; height:80px; box-shadow:1px 1px 2px rgba(0,0,0,0.3); border:none; border-radius:5px; cursor:pointer;
background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 15%, #ebeef2 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#ffffff), color-stop(80%,#ebeef2));
background: -webkit-linear-gradient(top,  #ffffff 15%,#ebeef2 80%);
background: -o-linear-gradient(top,  #ffffff 15%,#ebeef2 80%);
background: -ms-linear-gradient(top,  #ffffff 15%,#ebeef2 80%);
background: linear-gradient(to bottom,  #ffffff 15%,#ebeef2 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebeef2',GradientType=0 );}
    div#return input:hover{color:#666666; box-shadow:none;
background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 15%, #ebeef2 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#ffffff), color-stop(80%,#ebeef2));
background: -webkit-linear-gradient(top,  #ffffff 15%,#ebeef2 80%);
background: -o-linear-gradient(top,  #ffffff 15%,#ebeef2 80%);
background: -ms-linear-gradient(top,  #ffffff 15%,#ebeef2 80%);
background: linear-gradient(to bottom,  #ffffff 15%,#ebeef2 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebeef2',GradientType=0 );}

div#privacyrivacy{padding:19px; margin-bottom:55px; border:solid 1px #D8D6CC; line-height:120%; position:relative;}
  div#privacyrivacy div#memorandum{padding:19px; margin-bottom:20px; border:solid 1px #D8D6CC; background:#FFFFFF;}
  div#privacyrivacy div#agreementCheck{color:#FF0000; display:table;}
    div#privacyrivacy div#agreementCheck div{display:table-cell; vertical-align:middle;}
    div#privacyrivacy div#agreementCheck div.label{padding-left:15px;}
div#privacyrivacy.invalid{background:#FFFFCC;}
  div#privacyrivacy.invalid div.next{background:url(/img/pc/invalid.gif) no-repeat center top; height:30px; width:100%; position:absolute; left:0px; bottom:-30px;}
div#privacyrivacy.effective{background:#E1F4FD;}
div#privacyrivacy.effective div.next{background:url(/img/pc/effective.gif) no-repeat center top; height:30px; width:100%; position:absolute; left:0px; bottom:-30px;}

div#selectButton{margin:40px auto; width:660px;}

div.amountMoney{padding:15px 0; width:310px; height:80px; text-align:center; background:url(/img/pc/money_back.gif) no-repeat; position:relative;}
  div.amountMoney div.title{font-size:24px; letter-spacing:13px; margin-bottom:5px;}
  div.amountMoney div.total{font-size:24px; color:#FF0000;}
    div.amountMoney div.total span{font-size:40px;}
  div.amountMoney div.postage{font-size:14px;}

*:first-child+html div#privacyrivacy div#agreementCheck div.label{float:left;}
*:first-child+html div#privacyrivacy div#agreementCheck div{ float:left;}
/* ------------------------------------------------------------
     mainContent
------------------------------------------------------------ */
section#description{padding:0 15px; height:142px; border-radius:0; background:url(/img/pc/description_back.jpg) no-repeat;}
  section#description h1{margin:0 0 10px -15px; text-align:center;}

section#flow{margin-top:50px;}
  section#flow ol{padding:30px;}
    section#flow li{padding:0 0 20px 40px; margin-bottom:20px; border-bottom:solid 1px #D8D6CC;}
    section#flow li:last-child{padding:0 0 0 40px; margin:0; border:none;}
    section#flow li.step1{padding:10px 0 20px 40px; background:url(/img/pc/step1.gif) no-repeat left top;}
    section#flow li.step2{background:url(/img/pc/step2.gif) no-repeat left top;}
    section#flow li.step3{background:url(/img/pc/step3.gif) no-repeat left top;}

section#itemList{}
  section#itemList ul{font-size:13px;}
    section#itemList li a{padding:20px; margin:0 40px 40px 0; color:#000000; text-decoration:none; box-shadow:0 0px 2px rgba(0,0,0,0.1); border-radius:5px; width:220px; height:380px; background:#FFFFFF; float:left; position:relative;}
    section#itemList li:nth-child(3n) a{margin-right:0;}
      section#itemList li div.itemImage{text-align:center;}
      section#itemList li div.itemName{margin-bottom:10px; font-size:18px;}
      section#itemList li div.itemNumber{height:100px;}
      section#itemList li div.itemFeature{margin-bottom:10px;}
      section#itemList li div.itemPrice{color:#FF0000;}
      section#itemList li div.itemDetailed{padding-top:5px; font-weight:bold; font-size:14px; color:#FFFFFF; text-align:center; width:220px; height:20px; background:#31b311; position:absolute; bottom:20px;}
    section#itemList li a:hover{box-shadow:none; background:#FFFFCC;}
      section#itemList li a:hover div.itemDetailed{color:#ddfbbd;}
  section#itemList div.contact{font-size:14px; padding:15px; border:solid 1px #D8D6CC; background:#F9F7EB; width:828px; position:relative;}

section#detailed{}
  section#detailed div#selectItem{padding:20px; font-size:13px; border:solid 1px #D8D6CC; width:228px; background:#FFFFFF; float:left;}
    section#detailed div#selectItem div.title{margin-bottom:20px; font-size:22px; color:#FF0000; text-align:center;}
    section#detailed div#selectItem div.itemImage{margin-bottom:10px; text-align:center;}
    section#detailed div#selectItem div.itemName{margin-bottom:10px; font-size:18px;}
    section#detailed div#selectItem div.itemNumber{margin-bottom:15px;}
    section#detailed div#selectItem div.itemFeature{margin-bottom:15px;}
    section#detailed div#selectItem div.itemPrice{color:#FF0000;}
  section#detailed div#order{width:560px; float:right;}
    section#detailed div#order h2{font-size:18px; color:#0066B2;}
    section#detailed div#order section.orderStep{margin-bottom:40px;}
      section#detailed div#order section.orderStep div.attention{margin-top:20px;}
        section#detailed div#order section.orderStep div.attention table{width:100%; text-align:center; border-collapse:separate; border-radius:5px; border:solid 2px #D8D6CC; background:#FFFFFF;}
          section#detailed div#order section.orderStep div.attention th{height:30px; border:solid 1px #D8D6CC; vertical-align:middle; background:#EBEEF2;}
          section#detailed div#order section.orderStep div.attention td{height:30px; border:solid 1px #D8D6CC; vertical-align:middle;}

section#orderContent{}
  section#orderContent section.orderStep{margin-top:40px;}
    section#orderContent section.orderStep ul#methodPayment{border:solid 1px #D8D6CC;}
      section#orderContent section.orderStep ul#methodPayment li{height:53px; border-bottom:solid 1px #D8D6CC; position:relative;}
      section#orderContent section.orderStep ul#methodPayment li:last-child, section#orderContent section.orderStep ul#methodPayment li.last{border:none;}
    section#orderContent section.orderStep ul#methodPayment label{width:100%; height:100%; display:block;}
    section#orderContent section.orderStep ul#methodPayment input{position:absolute; left:15px; top:22px;}
    section#orderContent section.orderStep ul#methodPayment div.type{position:absolute; left:35px; top:19px;}
    section#orderContent section.orderStep ul#methodPayment div.description{font-size:14px; width:310px; position:absolute; left:180px; top:18px;}

div.confirmationContent{margin-top:30px;}
  div.confirmationContent div.chosenContent{border:solid 1px #D8D6CC; padding:15px;}
  div.confirmationContent table#customerInformation{border:solid 1px #D8D6CC; width:100%;}
    div.confirmationContent table#customerInformation tr{ border-bottom:solid 1px #D8D6CC;}
    div.confirmationContent table#customerInformation th{padding:20px; font-weight:normal; width:159px; border-right:solid 1px #D8D6CC; background:#EBEEF2;}
    div.confirmationContent table#customerInformation td{padding:20px;}

div#memorandum{margin-top:40px;}
  div#memorandum div#agreementCheck{margin-top:10px; border:solid 1px #D8D6CC; background:#FFFFCC; position:relative;}
    div#memorandum div#agreementCheck input{position:absolute; left:20px; top:20px;}
    div#memorandum div#agreementCheck label{padding:19px 17px 15px 40px; width:800px; display:block;}
div#selectButton{margin:40px auto 0; width:660px;}

section#keyType{position:relative; width:880px;}
  section#keyType ul{font-size:13px; margin-bottom:30px;}
    section#keyType li{margin-right:20px;width:200px; float:left;}
    section#keyType li:last-child, section#keyType li.last{margin:0;}
      section#keyType li div.image{margin-bottom:10px;}
      section#keyType li div.select{position:relative;}
      section#keyType li label{padding:10px 10px 10px 30px; height:121px; border:solid 2px #D8D6CC; border-radius:5px; display:block;}
        section#keyType li label span{font-size:16px; color:#000000; margin-bottom:10px; display:block;}
      section#keyType li input:checked + label{color:#FFFFFF; border:solid 2px #0058A8; background:#0058A8;}
        section#keyType li input:checked + label span{color:#FFFFFF;}
      section#keyType li input{position:absolute; left:10px; top:10px;}
  section#keyType div.contact{font-size:14px; padding:15px 0; border:solid 1px #D8D6CC; background:#F9F7EB; width:857px; position:relative;}
    section#keyType div.contact div.image{margin-bottom:5px; text-align:center;}
    section#keyType div.contact p{margin-left:10px;}

section#step2 section{margin-top:30px;}
section#RequiredNumber{margin-top:30px; background:url(/img/pc/icon.png) no-repeat 495px 60px;}
  section#RequiredNumber table{width:475px; float:left; position:relative;}
    section#RequiredNumber input{width:94px;}
  section#RequiredNumber div.amountMoney{float:right;}

section#numberList{overflow:hidden; margin-bottom:30px;}
  section#numberList table{width:420px; text-align:center; border-collapse:separate; border-radius:5px; border:solid 2px #D8D6CC; float:left;}
  section#numberList table.first{margin-right:20px;}
    section#numberList th{height:30px; border:solid 1px #D8D6CC; vertical-align:middle; background:#EBEEF2;}
    section#numberList td{height:30px; border:solid 1px #D8D6CC; vertical-align:middle;}

section#upload{padding:30px; border:solid 1px #D8D6CC; background:#F9F7EB;}
  section#upload h2{margin-bottom:20px;}
  section#upload h2:after{padding:8px 13px 5px; margin-top:-6px; content:"任意"; background:#D8D6CC; font-size:12px; position:absolute; left:180px;}
  section#upload div.title{font-size:13px; margin-bottom:5px;}
  section#upload div#example{width:280px; float:left;}
  section#upload div#uploadForm{width:500px; float:right;}
  section#upload th{width:163px;}
  section#upload input{height:28px; padding:0;}
  section#upload input[type="text"]{width:198px; margin-right:10px; float:left;}
  section#upload input[type="button"]{font-size:16px; width:50px; height:30px; float:left; cursor:pointer;}

#orderList{font-size:14px;}
  #orderList table{font-size:14px;}
    #orderList th{text-align:center;}
    #orderList td{vertical-align:middle; border-right:solid 1px #D8D6CC;}
    #orderList tr.amountMoney{text-align:right;}
    #orderList tr.amountMoney th{text-align:right;}
    #orderList tr.amountMoney td{text-align:right;}
    #orderList th.name{width:450px;}
    #orderList th.unitPrice{width:118px;}
    #orderList td.unitPrice{text-align:right;}
    #orderList th.number{width:58px;}
    #orderList td.number{text-align:center;}
    #orderList th.subtotal{width:150px;}
    #orderList td.subtotal{text-align:right;}
    #orderList tr.amountMoney td.total{color:#F00000;}
    #orderList td div.itemImage{padding-right:20px; vertical-align:middle; display:table-cell;}
      #orderList td div.itemImage img{width:140px; height:auto;}
    #orderList td div.itemName{vertical-align:middle; display:table-cell;}


section#step3 div.clearfix{margin-top:30px;}
section#totalAmount{float:left;}
  section#totalAmount div.title{margin:5px 0 10px;}
section#methodPayment{width:510px; float:right;}
  section#methodPayment ul{border:solid 1px #D8D6CC;}
  section#methodPayment li{height:53px; border-bottom:solid 1px #D8D6CC; position:relative;}
  section#methodPayment li:last-child, section#methodPayment li.last{border:none;}
    section#methodPayment label{width:100%; height:100%; display:block;}
    section#methodPayment input{position:absolute; left:15px; top:22px;}
    section#methodPayment div.type{position:absolute; left:35px; top:19px;}
    section#methodPayment div.description{font-size:14px; width:310px; position:absolute; left:180px; top:18px;}
    section#methodPayment li.card div.description{top:8px;}

p.description{font-size:24px; margin-bottom:20px;}

dl#inputContent{}
  dl#inputContent dt{margin-bottom:10px;}
  dl#inputContent dd{padding:20px; margin-bottom:30px; border:solid 1px #D8D6CC; background:#FFFFFF;}
  dl#inputContent dd#orderContent{padding:0; border:none;}
  dl#inputContent dd#customerInformation{padding:0; border:none;}

section#completion{font-size:14px; padding:30px; text-align:center; border-radius:5px;}
  section#completion h1{font-size:24px; margin-bottom:30px;}
  section#completion p{margin-bottom:20px;}
  section#completion p#caution{color:#FF0000; margin:0;}

h1.title{background:url(/img/pc/line.gif) repeat-x bottom;
background: -moz-linear-gradient(top,  #ffffff 0%, #e8e8e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e8e6));
background: -webkit-linear-gradient(top,  #ffffff 0%,#e8e8e6 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#e8e8e6 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#e8e8e6 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#e8e8e6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e6',GradientType=0 );}
header#header div.title{background:url(/img/pc/title.gif) no-repeat top center;}
div.transmission input{background:url(/img/pc/button1.gif) no-repeat;}
div.transmission input:hover{background:url(/img/pc/button2.gif) no-repeat;}
*+html div#toConfirmation, *+html div#toConfirmation{width:510px; height:85px;}
div#return input{background:url(/img/pc/button3.gif) no-repeat;}
div#return input:hover{background:url(/img/pc/button4.gif) no-repeat;}
table.form th{text-align:left;}
table.form th{text-align:left9;}
:root .clearfix {overflow:visible;}

:root div.transmission input{display:block; font-size:30px; color:#FFFFFF; width:100%; height:80px; text-shadow:0px 1px 4px #117300; box-shadow:inset 1px 1px 0 #32B311, inset 2px 2px 0 #7EE30F, 1px 1px 2px rgba(0,0,0,0.3); border:none; border-radius:5px; background:#6bc10d; background:linear-gradient(to bottom,  #6bc10d 15%,#31b311 80%); cursor:pointer;
background: #6bc10d;
background: -moz-linear-gradient(top,  #6bc10d 15%, #31b311 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#6bc10d), color-stop(80%,#31b311));
background: -webkit-linear-gradient(top,  #6bc10d 15%,#31b311 80%);
background: -o-linear-gradient(top,  #6bc10d 15%,#31b311 80%);
background: -ms-linear-gradient(top,  #6bc10d 15%,#31b311 80%);
background: linear-gradient(to bottom,  #6bc10d 15%,#31b311 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bc10d', endColorstr='#31b311',GradientType=0 );}
:root div.transmission input:hover{box-shadow:inset 0px 1px 4px #117300; text-shadow:none; color:#ddfbbd; 
background: #31b311;
background: -moz-linear-gradient(top,  #31b311 15%, #6bc10d 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#31b311), color-stop(80%,#6bc10d));
background: -webkit-linear-gradient(top,  #31b311 15%,#6bc10d 80%);
background: -o-linear-gradient(top,  #31b311 15%,#6bc10d 80%);
background: -ms-linear-gradient(top,  #31b311 15%,#6bc10d 80%);
background: linear-gradient(to bottom,  #31b311 15%,#6bc10d 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31b311', endColorstr='#6bc10d',GradientType=0 );}


:root div#return input{background:transparent linear-gradient(to bottom, #FFF 15%, #EBEEF2 80%) repeat scroll 0% 0%;}

div#transmission.invalid input{display:block; font-size:30px; color:#333333; width:100%; height:80px; border:none; border-radius:5px; background:#6bc10d; background:linear-gradient(to bottom,  #6bc10d 15%,#31b311 80%); background:#999999;}

/* ------------------------------------------------------------
     sp
------------------------------------------------------------ */
div#sp{font-size:16px; background:url(/img/sp/back.gif) repeat-x left top;}
  div#sp #container{width:auto; margin:20px 10px;}

div#sp p.strong{font-size:18px;}
div#sp .button{width:240px;}
  div#sp .button a{padding:15px 0 11px}
  div#sp div#itemList.button a{font-size:30px;}
  div#sp div#itemList.button input[type=submit]{font-size:30px;}
div#sp div#itemOrder{}
  div#sp div#itemOrder input[type=submit], div#checked input[type=submit]{font-size:24px;}
div#sp div#informationInput{margin-top:20px;}
  div#sp div#informationInput a{font-size:18px;}
div#sp div#checked{margin-top:40px;}

div#sp header#header{background:#FFFFFF;}
  div#sp header#header h1{margin-bottom:8px;}
  div#sp header#header div.title{padding:0 5px -2px 5px; line-height:0; font-weight:bold; font-size:16px; color:#FFFFFF; padding:3px 5px 2px; border-radius:15px; background:#0058A8; display:inline;}
  div#sp header#header nav#globalNav{width:100%;}
    div#sp header#header nav#globalNav li{width:25%;}
  div#sp aside#breadcrumbs{margin-bottom:20px;}
    div#sp aside#breadcrumbs ul{line-height:1.6em;}

div#sp h1.title{font-size:18px; color:#0068B2; padding:10px 10px 7px; margin-bottom:20px; border-bottom:solid 2px #0068B2; box-shadow:inset 0 -1px 0 #FFFFFF; 
background:url(/img/pc/line.gif) repeat-x bottom;
background: -moz-linear-gradient(top,  #ffffff 0%, #e8e8e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e8e6));
background: -webkit-linear-gradient(top,  #ffffff 0%,#e8e8e6 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#e8e8e6 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#e8e8e6 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#e8e8e6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e6',GradientType=0 );}

  div#sp section.section{margin-bottom:20px;}

  div#sp section#description{padding:0; height:auto; box-shadow:inset 0 0 18px #E8DCC6, 0px 0px 2px rgba(0, 0, 0, 0.1); border-radius:0; background:url(/img/sp/description_back.jpg);}
    div#sp section#description h1{padding:5px 5px 2px; margin:0; margin-bottom:0; text-align:center; background: #aa9262; background: linear-gradient(to right, #aa9262 0%,#d3af63 50%,#aa9262 100%); position:relative;}
    div#sp section#description h1:after{width:100%; height:1px; background: #aa9262; background: linear-gradient(to right, #aa9262 0%,#d3af63 50%,#aa9262 100%); position:absolute; left:0; bottom:-2px; content:'';}
    div#sp section#description div.content{padding:15px;}

div#sp section#flow{margin-top:20px;}
  div#sp section#flow ol{padding:15px;}
    div#sp section#flow li{padding:0px 0px 10px 40px; margin-bottom:10px;}
    div#sp section#flow li:last-child{margin:0;}
    div#sp section#flow li.step1{padding:5px 0px 10px 40px;}

div#sp section#itemList{}
  div#sp section#itemList li a{margin:0 0 20px; width:100%; height:auto; display:block; float:none; -webkit-box-sizing:border-box; box-sizing:border-box;}
    div#sp section#itemList li div.itemNumber{margin-bottom:10px; height:auto;}
        div#sp section#itemList li div.itemDetailed{margin-top:10px; width:100%; position:inherit; bottom:0;}
        div#sp section#itemList div.contact{width:auto;}

div#sp section#detailed{}
  div#sp section#detailed div#selectItem{margin-bottom:20px; width:100%; float:none; -webkit-box-sizing:border-box; box-sizing:border-box;}
  div#sp section#detailed div#order{width:100%; float:none;}
    div#sp section#detailed div#order section.orderStep{margin-bottom:0;}

div#sp #orderList td div.itemImage{display:block;}
  div#sp #orderList td div.itemImage img{width:80px;}
div#sp #orderList td div.itemName{display:block;}

div#sp div.confirmationContent{margin-top:20px;}


div#sp section#orderContent section.orderStep ul#methodPayment li{height:auto;}
div#sp section#orderContent section.orderStep ul#methodPayment input{margin-top:-10px; sposition:absolute; left:10px; top:50%;}
div#sp section#orderContent section.orderStep ul#methodPayment div.type{position:inherit; left:0; top:0;}
div#sp section#orderContent section.orderStep ul#methodPayment div.description{width:100%; position:inherit; left:0; top:0;}
div#sp section#orderContent section.orderStep ul#methodPayment label{padding:10px 10px 10px 30px; -webkit-box-sizing:border-box; box-sizing:border-box;}


div#sp section#keyType{width:auto;}
div#sp section#keyType ul{margin:0;}
div#sp section#keyType li{margin:0 0 20px; width:50%; float:left; -webkit-box-sizing:border-box; box-sizing:border-box;}
div#sp section#keyType li:nth-child(odd){padding:0 5px 0 0;}
div#sp section#keyType li:nth-child(even){padding:0 0 0 5px;}
div#sp section#keyType li{height:320px;}
  div#sp section#keyType li div.image{padding:10px 0;border:solid 1px #D8D6CC; text-align:center;}
  div#sp section#keyType li img{}
  div#sp section#keyType li label{font-size:11px; height:81px; -webkit-box-sizing:border-box; box-sizing:border-box;}
  div#sp section#keyType div.contact{padding:10px 18px; width:100%; -webkit-box-sizing:border-box; box-sizing:border-box;}
    div#sp section#keyType div.contact p{margin:0;}
  div#sp section#keyType p.contact{margin:0;}
  div#sp section#keyType li:nth-child(n+3) label{font-size:11px; height:91px; -webkit-box-sizing:border-box; box-sizing:border-box;}


div#sp section#RequiredNumber{margin-top:20px;}
  div#sp section#RequiredNumber table{width:100%; float:none;}
  div#sp section#RequiredNumber div.amountMoney{float:none;}

div#sp div.amountMoney{background:url(/img/sp/description_back.jpg); width:100%; box-shadow:0px 0px 18px #E8DCC6 inset, 0px 0px 2px rgba(0, 0, 0, 0.1)}

div#sp table.form{margin-bottom:20px;}
div#sp table.form th{width:200px; padding:0 10px; -webkit-box-sizing:border-box; box-sizing:border-box;}
div#sp table.form tr.required th:after{content:normal;}
div#sp table.form td{padding:10px;}
  div#sp table.form tr.required td input{height:34px;}
div#sp table.form p{margin-top:5px;}

div#sp section.step{margin-bottom:30px;}
div#sp section#step2 section{margin-top:0;}
div#sp section#upload{padding:15px;}
  div#sp section#upload div#example{padding:10px 0;border:solid 1px #D8D6CC; text-align:center; width:100%; text-align:center; float:none; background:#FFFFFF;}
  div#sp section#upload div#uploadForm{width:100%; margin-top:10px;}
  div#sp section#upload div#uploadForm table{margin:0;}
  div#sp section#upload th{width:60px;}
  div#sp section#upload input[type="text"]{width:80%; float:left; margin-right:10px; -webkit-box-sizing:border-box; box-sizing:border-box;}
  div#sp section#upload input[type="button"]{width:15%; float:left; -webkit-box-sizing:border-box; box-sizing:border-box;}
div#sp section#step3 th{padding:10px;}

div#sp section#totalAmount{width:100%; margin-bottom:20px; float:none;}
div#sp section#methodPayment{width:100%; float:none;}

div#sp section#methodPayment li.card div.description{padding:0;}
div#sp section#methodPayment div.description{width:auto; top:18px;}

div#sp div#toConfirmation{width:260px; font-size:30px;}
div#sp div.transmission input{font-size:30px; height:60px; display:block; color:#FFFFFF; width:100%; height:80px; text-shadow:0px 1px 4px #117300; box-shadow:inset 1px 1px 0 #32B311, inset 2px 2px 0 #7EE30F, 1px 1px 2px rgba(0,0,0,0.3); border:none; border-radius:5px; background:#6bc10d; background:linear-gradient(to bottom,  #6bc10d 15%,#31b311 80%); cursor:pointer;}
div#sp div.transmission input:hover{box-shadow:inset 0px 1px 4px #117300; text-shadow:none; color:#ddfbbd; background: #31b311; background: linear-gradient(to bottom,  #31b311 15%,#6bc10d 80%);}
div#sp div.invalid input{font-size:30px;}


div#sp dl#inputContent dd{margin-bottom:20px;}
div#sp div#selectButton{width:300px;}
div#sp div#transmission{width:180px;}
div#sp div#transmission input{height:60px;}
div#sp div#return{width:100px;}
div#sp div#return input{height:60px;}
div#sp dd#orderContent th{padding:10px;}

div#sp footer{padding:20px 10px;}

div#sp .clearfix{overflow:visible;}


section#numberList.sp table{margin-bottom:20px; width:100%; float:none;}
  section#numberList.sp th{height:auto; border:solid 1px #D8D6CC; vertical-align:middle; background:#EBEEF2;}
  section#numberList.sp td{height:auto; border:solid 1px #D8D6CC; vertical-align:middle;}

div#fax{width:320px; margin:-20px auto 50px;}
div#fax a{display:block; text-align:center; width:320px; height:60px; background:url(/img/pc/fax1.png);}
div#fax a:hover{ background:url(/img/pc/fax2.png);}

@media screen and (max-width:640px){
  header#header{padding: 0 10px; display: table}
  header#header #siteId{padding: 0 !important; margin: 0; vertical-align: middle; width: calc(100% - 80px); display: table-cell;}
  header#header .pMark{display: table-cell;}
    div#sp header#header h1{padding:0 15px;}
    div#sp header#header h1 img{width:100%; height:auto;}
    div#sp section#description h1{padding:8px 15px 5px;}
    div#sp section#description h1 img{width:100%; height:auto;}
  div#sp section#keyType li div.image{padding:5px 0 0;}
  div#sp section#keyType li img{width:100%;}
  div#sp section#keyType li label{font-size:11px; height:115px;}
  div#sp section#keyType li:nth-child(n+3){height:380px;}
  div#sp section#keyType li:nth-child(n+3) label{height:165px;}


  div#sp section#upload input[type="text"]{width:70%; float:left; margin:0;}
  div#sp section#upload input[type="button"]{width:40px; float:right;}

div#sp table.form th{padding:10px; width:105px;}
div#sp table.form th span{display:block;}
div#sp table.form td input{width:calc(100% - 7px);}
div#sp section#methodPayment li{padding:10px 10px 10px 30px; height:auto;}
div#sp section#methodPayment li input{left:10px; top:10px;}
div#sp section#methodPayment label div{position:static; left:0; top:0;}
div#sp section#step4 table.form th{width:90px;}

#privacymark{width: 100%;}
  #privacymark .pMark{margin-right: 20px;}
#privacymark p{margin: 0; width: calc(100% - 80px);}
}

div#payByCard {margin: 30px 0; text-align: center;}

table#rules {width: 100%; background-color: #fff;}
table#rules td, table#rules th {padding: 20px;}

/* ------------------------------------------------------------
     Hacks
------------------------------------------------------------ */
.clearfix {overflow:hidden;}
.clearfix:after {content:"."; display: block; height: 0; font-size:0; clear: both; visibility:hidden;}