@charset"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* URI:http://cidario.co.jp
* Editor:Hiromi Yoshino
***********************************************************
*/


/* article
========================================================================================================
*/


/*----------------------------------------
                  member
-----------------------------------------*/

article#member section{
  width:100%;
  padding:0;
}

@media print, screen and (min-width:960px) { 
 article#member section{
  width:100%;
  padding:0 30px 0 0;
 }
}

#second div#contents article#member{
  background: inherit;
  padding:20px 0 20px 0; 
}

@media print, screen and (min-width:960px) { 
 #second div#contents article#member{
  background: inherit;
  padding:40px 0 20px 0; 
 }
}


article#member section div h2{
  width:100%;
  height:40px;
  background-color:#000;
  color:#FFF;
  text-align:center;
  line-height:40px;
  font-size:16px; font-size:1.6rem;
}

@media print, screen and (min-width:960px) { 
 article#member section div h2{
  width:690px;
  height:40px;
  background-color:#000;
  color:#FFF;
  text-align:center;
  line-height:40px;
  font-size:18px; font-size:1.8rem;
 }
}


article#member section div#member02 h2{
  background-color:#00BFFF;
}


/*----------------------------------------
               member btn
-----------------------------------------*/

article#member section div.btnBox{
  text-align:center;
  margin:10px auto 40px auto;
}

@media print, screen and (min-width:960px) { 
 article#member section div.btnBox{
  text-align:center;
  margin:40px auto 70px auto;
 }
}

article#member section div div.btnBox{
  text-align:center;
  margin:20px auto 20px auto;
}

article#member section div p#m-r-back{
  display:block;
  text-align:center;
  margin:0 0 50px 0;
}

@media print, screen and (min-width:960px) { 
 article#member section div div.btnBox{
  text-align:center;
  margin:40px auto 30px auto;
 }

 article#member section div p#m-r-back{
  display:block;
  text-align:center;
  margin:0 0 70px 0;
 }
}


article#member section div.btnBox a,
article#member section div.btnBox button{
  width:40%;
  height:36px;
  display: inline-block;
  text-align:center;
  color:#FFF;
  line-height:36px;
  font-size:14px; font-size:1.4rem;
  margin:0 5px;
}

@media print, screen and (min-width:960px) { 
 article#member section div.btnBox a,
 article#member section div.btnBox button{
  width:180px;
  height:36px;
  display: inline-block;
  text-align:center;
  color:#FFF;
  line-height:36px;
  font-size:15px; font-size:1.5rem;
  margin:0 10px;
 }
}

article#member section div button{
  width:180px;
  height:36px;
  display:block;
  text-align:center;
  color:#FFF;
  line-height:36px;
  font-size:15px; font-size:1.5rem;
  margin:10px auto 0 auto;
}


article#member section#extend div.btnBox button.extendBtn{
  width:85%;
  height:55px;
  display:block;
  text-align:center;
  color:#FFF;
  line-height:36px;
  font-size:16px; font-size:1.6rem;
  margin:30px auto 0 auto;
}

@media print, screen and (min-width:960px) { 
article#member section#extend div.btnBox button.extendBtn{
  width:360px;
  height:60px;
  display:block;
  text-align:center;
  color:#FFF;
  line-height:36px;
  font-size:20px; font-size:2.0rem;
  margin:10px auto 0 auto;
}}


article#member section#extend div.btnBox button.extendBtn span{
  display:block;
  background:url(/common/images/icon02.png) no-repeat right 48%;
  margin:0 5px;
}

article#member section#extend div.btnBox a.extendBackBtn{
  display:inherit;
  text-align:center;
  color:#00BFFF;
  line-height:inherit;
  font-size:14px; font-size:1.4rem;
  margin:20px auto 0 auto;
}


/*----------------------------------------
             member sidenav
------------------------------------------*/


#second aside#member-nav section.side-nav{
  background:url(/images/member/member03.png) no-repeat 50% 0;
  padding:80px 0 10px 0;
  margin:0;
}



/*----------------------------------------
             member info
------------------------------------------*/

div#memberInfo{
  margin:0 0 20px 0;
}

@media print, screen and (min-width:960px) { 
 div#memberInfo{
  margin:0 0 50px 0;
 }
}

div#memberInfo div{
  width:100%;
  position:relative;
  background:url(/images/member/member01.png) repeat;  
  border-top:10px solid #FDCC24;
  text-align:center;
  padding:20px 10px 25px 10px;
  margin:15px 0 10px 0;
}

@media print, screen and (min-width:960px) {
 div#memberInfo div{
  width:690px;
  position:relative;
  background:url(/images/member/member01.png) repeat;  
  border-top:10px solid #FDCC24;
  text-align:center;
  padding:30px 0 20px 0;
  margin:15px 0 10px 0;
 }
}

div#memberInfo div p{
  line-height:130%;
}

div#memberInfo div p.name{
  font-size:20px; font-size:2.0rem;
  margin:0 0 10px 0;
}

@media print, screen and (min-width:960px) {
 div#memberInfo div p.name{
  font-size:24px; font-size:2.4rem;
  margin:0 0 20px 0;
 }
}

div#memberInfo div img{
  position:absolute;
  bottom:-25px;
  right:10px;
}

div#memberInfo dl{
  width:100%;
  border-bottom:1px dotted #777;
}

@media print, screen and (max-width:960px) {
 div#memberInfo dl:last-child{
  border-bottom:none;
 }
}


@media print, screen and (min-width:960px) {
 div#memberInfo dl{
  width:690px;
  border-bottom:1px dotted #777;
 }
}

div#memberInfo dl:after{
	content:""; 
	display:block; 
	clear:both;
}

div#memberInfo dl dt{
  font-weight:bold;
  padding:0 0 0 10px;
  margin:20px 0 10px 0;
}

@media print, screen and (min-width:960px) {
 div#memberInfo dl dt{
  width:210px;
  float:left;
  font-weight:bold;
  padding:0 0 0 10px;
  margin:20px 0;
 }
}

dt#rank:before{
  content:url(/images/member/member04.png);
  position:relative;
  top:4px;
  margin:0 5px 0 0;
}

dt#point:before{
  content:url(/images/member/member05.png);
  position:relative;
  top:4px;
  margin:0 5px 0 0;
}

dt#info:before{
  content:url(/images/member/member06.png);
  position:relative;
  top:4px;
  margin:0 5px 0 0;
}

div#memberInfo dl dd{
  line-height:150%;
  padding:0 10px 0 35px;
  margin:0 0 20px 0;
}

@media print, screen and (min-width:960px) {
 div#memberInfo dl dd{
  width:480px;
  float:left;
  position:relative;
  top:4px;
  line-height:150%;
  padding:0;
  margin:20px 0;
 }
}

div#memberInfo dl dd p.error{
  font-size:18px; font-size:1.8rem;
  color:#FF0000;
  line-height:130%;
  margin:15px 0 0 0;
}

@media print, screen and (min-width:960px) {
 div#memberInfo dl dd p.error{
  font-size:20px; font-size:2.0rem;
  color:#FF0000;
  line-height:130%;
  margin:30px 0 0 0;
 }
}



/* member TOP
========================================================================================================
*/

div#member01{
  width:100%;
  margin:30px 0 20px 0;
}

@media print, screen and (min-width:960px) {
 div#member01{
  width:690px;
  padding:0;
  margin:50px 0 20px 0;
 }
}

div#member01 div{
  outline:1px solid #000;
  padding:0 0 5px 0;
  margin:0 auto 30px auto;
}

@media print, screen and (min-width:960px) {
  div#member01 div{
  outline:1px solid #000;
  padding:0;
  margin:0 0 30px 0;
 }
}

div#member01 div.box01,
div#member01 div.box02{
  width:90%;
}

@media print, screen and (min-width:960px) {
 div#member01 div.box01{
  width:335px;
  float:left;
 }
}

@media print, screen and (min-width:960px) {
 div#member01 div.box02{
  width:335px;
  float:right;
 }
}


article#member section div#member01 div h2{
  width:100%;
  height:40px;
  font-size:18px; font-size:1.8rem;
  text-align:center;
  line-height:40px;
  color:#FFF;
  padding:0;
  margin:0; 
}

div#member01 div p{
  line-height:150%;
  margin:20px 20px 30px 20px;
}

div#member01 div a.m-btn{
  width:220px;
  height:40px;
  display:block;
  text-align:center;
  line-height:40px;
  margin:20px auto 30px auto;
}

div#member01 div a.m-btn span{
  display:block;
  background:url(/common/images/icon03.png) no-repeat right 12px;
  margin:0 10px 0 0;
}


div#member02{
  width:100%;
  background:url(/images/member/member01.png) repeat;
  padding:0 0 20px;
  margin:50px 0 30px 0;
}

@media print, screen and (min-width:960px) {
 div#member02{
  width:690px;
  background:url(/images/member/member01.png) repeat;
  padding:0 20px 20px 20px;
  margin:0 0 50px 0;
 }
}

div#member02 h2{
  width:100%;
  height:40px;
  background-color:#00BFFF;
  text-align:center;
  color:#FFF;
  font-size:18px; font-size:1.8rem;
  line-height:40px;
  margin:0 0 20px 0;
}

@media print, screen and (min-width:960px) {
 div#member02 h2{
  width:690px;
  height:40px;
  background-color:#00BFFF;
  text-align:center;
  color:#FFF;
  font-size:18px; font-size:1.8rem;
  line-height:40px;
  margin:0 0 20px -20px;
 }
}


div#member02 ul li.plan01{
  width:90%;
  margin:0 auto 10px auto;

}

div#member02 ul li.plan02{
  width:90%;
  margin:0 auto 10px auto;
}

div#member02 ul li img{
  width:100%;
  height:auto;
}

@media print, screen and (min-width:960px) {
  
 div#member02 ul li.plan01{
  width:auto;
  float:left;
  margin:0;
 }

 div#member02 ul li.plan02{
  width:auto;
  float:right;
  margin:0;
 }

 div#member02 ul li img{
  width:320px;
  height:110px;
 }
}

/* member reserve
========================================================================================================
*/

section#m-reserve div#m-reserve01{
  margin:0 0 30px 0;
}

@media print, screen and (min-width:960px) {
 section#m-reserve div#m-reserve01{
  margin:0 0 50px 0;
 }
}

section#m-reserve div#m-reserve01 div{
  border-bottom:1px dotted #777;
  padding:0 0 30px 0;
  margin:0 0 30px 0;
}

@media print, screen and (min-width:960px) {
 section#m-reserve div#m-reserve01 div{
  border-bottom:1px dotted #777;
  padding:0 0 20px 0;
  margin:0;
 }
}

section#m-reserve div#m-reserve01 dl{
  margin:20px 10px 0 10px;
}

section#m-reserve div#m-reserve01 dl:after{
	display:table;
	content:"";
	clear:both;
}

section#m-reserve div#m-reserve01 dl dt{
  width:100%;
  min-height:26px;
  background-color:#FDF7E8;
  text-align:center;
  line-height:26px;
  font-weight:bold;
  padding:0;
  margin:0 0 10px 0;
}

@media print, screen and (min-width:960px) {
 section#m-reserve div#m-reserve01 dl dt{
  width:110px;
  min-height:26px;
  float:left;
  background-color:#FDF7E8;
  text-align:center;
  line-height:26px;
  font-weight:bold;
  padding:0;
  margin:0 0 10px 0;
 }
}

section#m-reserve div#m-reserve01 dl dd{
  width:100%;
  min-height:26px;
  line-height:26px;
  padding:0 0 0 10px;
  margin:0 0 10px 0;
}

@media print, screen and (min-width:960px) {
 section#m-reserve div#m-reserve01 dl dd{
  width:560px;
  min-height:26px;
  float:left;
  line-height:26px;
  padding:0 0 0 10px;
  margin:0 0 10px 0;
 }
}


section#m-reserve div#m-reserve01 p{
  font-size:14px; font-size:1.4rem;
  text-align:center;
  line-height:150%;
  margin:30px 0;
}

@media print, screen and (min-width:960px) {
 section#m-reserve div#m-reserve01 p{
  font-size:18px; font-size:1.8rem;
  text-align:center;
  margin:45px 0;
 }
}

/* member reserve detail
========================================================================================================
*/

section#reserve-detail div#m-r-detail{
  width:100%;
}


section#reserve-detail div#m-r-detail h2{
  width:100%;
  height:40px;
  background-color:#5BBC14;
  font-size:18px; font-size:1.8rem;
  color:#FFF;
  text-align:center;
  line-height:40px;
  padding:0;
  margin:0 0 10px 0;
}

@media print, screen and (min-width:960px) {
 section#reserve-detail div#m-r-detail h2{
  width:690px;
  font-size:18px; font-size:1.8rem;
 }
}

section#reserve-detail div.mb50{
  margin:0 0 50px 0;
}

section#reserve-detail div#m-r-detail dl{
  width:100%;
  border-bottom:1px dotted #777;
  line-height:150%;
}

@media print, screen and (min-width:960px) {
 section#reserve-detail div#m-r-detail dl{
  width:690px;
  border-bottom:1px dotted #777;
  line-height:150%;
 }
}

section#reserve-detail div#m-r-detail dl#total{
  font-size:24px; font-size:2.4rem;
}

section#reserve-detail div#m-r-detail dl#total span{
  font-size:14px; font-size:1.4rem;
}

section#reserve-detail div#m-r-detail dl:after{
	content:""; 
	display:block; 
	clear:both;
}

section#reserve-detail div#m-r-detail dl dt{
  width:90%;
  font-weight:bold;
  padding:0;
  margin:10px auto;
}

section#reserve-detail div#m-r-detail dl dd{
  width:90%;
  margin:10px auto;
}

@media print, screen and (min-width:960px) {
 section#reserve-detail div#m-r-detail dl dt{
  width:210px;
  float:left;
  font-weight:bold;
  padding:0 0 0 10px;
  margin:20px 0;
 }  
 section#reserve-detail div#m-r-detail dl dd{
  width:480px;
  float:left;
  margin:20px 0;
 }
}


/*----------------------------------------
                  cancel
------------------------------------------*/

div#lightbox-panel section#cancel{
  width:80%;
  background-color:#FFF;
  padding:0 0 30px 0;
  margin:0 auto;
}

@media print, screen and (min-width:960px) {
 div#lightbox-panel section#cancel{
  width:800px;
  background-color:#FFF;
  padding:0 0 50px 0;
  margin:0;
 }
}


section#cancel h1{
  width:100%;
  height:35px;
  background-color:#6EB92B;
  font-size:14px; font-size:1.4rem;
  line-height:35px;
  text-align:center;
  color:#FFF;
  padding:0;
  margin:0 0 15px 0;
}


@media print, screen and (min-width:960px) { 
 section#cancel h1{
  width:100%;
  height:50px;
  background:url(/common/images/title09.png) no-repeat 20px top #6EB92B;
  font-size:24px; font-size:2.4rem;
  line-height:50px;
  text-align:center;
  color:#FFF;
 }
}

section#cancel div{
  width:70%;
  margin:10px auto;
}

@media print, screen and (min-width:960px) { 
 section#cancel div{
  width:700px;
  margin:30px auto;
 }
}

article#member section#cancel div h2{
  background-image:url(/common/images/bg01.png),url(/common/images/bg01.png);
  background-repeat:repeat-x,repeat-x;
  background-position:top,bottom;
  background-color:#FFF;
  color:#000;
  font-size:14px; font-size:1.4rem;
  font-weight:normal;
  line-height:150%;
  text-align:center;
  padding:10px 0;
  margin:30px 0 15px 0;
}

@media print, screen and (min-width:960px) { 
 article#member section#cancel div h2{
  height:80px;
  line-height:80px;
  font-size:30px; font-size:3.0rem;
  padding:0;
  margin:0 0 20px 0;
 }
}

section#cancel div p{
  text-align:center;
  font-size:12px; font-size:1.2rem;
  line-height:150%;
  margin:15px 0 25px 0;
}

@media print, screen and (min-width:960px) { 
 section#cancel div p{
  text-align:center;
  font-size:16px; font-size:1.6rem;
  margin:30px 0 50px 0;
 }
}

section#cancel div a#close-panel{
  position:absolute;
  top:3px;
  right:40px;
}

section#cancel div a#close-panel img{
  width:80%;
}

@media print, screen and (min-width:960px) { 
 section#cancel div a#close-panel{
  position:absolute;
  top:10px;
  right:10px;
 }
 
 section#cancel div a#close-panel img{
  width:80%;
 }

}


section#cancel div a#cancel-btn{
  width:180px;
  height:36px;
  display:block;
  text-align:center;
  line-height:36px;
  font-size:15px; font-size:1.5rem;
  margin:0 auto;
  background: -moz-linear-gradient(top,#FF0000 0%,#FF0000 50%,#FF3333 50%,#FF3333);
  background: -ms-linear-gradient(top,#FF0000 0%,#FF0000 50%,#FF3333 50%,#FF3333);
  background: -webkit-gradient(linear, left top, left bottom,from(#FF0000), color-stop(0.5,#FF0000), color-stop(0.5,#FF3333),  to(#FF3333));
  border-radius: 5px;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px;
  border:none;
  color:#FFF;
  text-decoration:none;
}



/* member history
========================================================================================================
*/


section#history div#history01{
  width:100%;
  border-bottom:1px dotted #777;
  margin:0 0 30px 0;
}

@media print, screen and (min-width:960px) { 
 section#history div#history01{
  width:690px;
  margin:0 0 50px 0;
 }
}

section#history div#history01 p{
  width:100%;
  font-size:14px; font-size:1.4rem;
  text-align:center;
  line-height:150%;
  padding:0 10px;
  margin:20px 0 30px 0;
}

@media print, screen and (min-width:960px) { 
 section#history div#history01 p{
  font-size:18px; font-size:1.8rem;
  padding:0;
  margin:35px 0 50px 0;
 }
}


/*---------ul-----------*/

section#history div#history01 ul{
  width:100%;
  margin:30px 0 10px 0;
}

@media print, screen and (min-width:960px) { 
 section#history div#history01 ul{
  width:690px;
 }
}

section#history div#history01 ul li{
  width:20%;
  height:30px;
  float:left;
  border-left:1px solid #FFF;
}

@media print, screen and (min-width:960px) { 
 section#history div#history01 ul li{
  width:120px;
 }
}

section#history div#history01 ul li a{
  display:block;
  background-color:#DDDDDD;
  color:#FFF;
  text-align:center;
  text-decoration:none;
  line-height:30px;
}

section#history div#history01 ul li a:hover{
  background-color:#5BBC14;
  color:#FFF;
}


section#history div#history01 ul li a.on{
  background-color:#5BBC14;
  color:#FFF;
}


/*---------table-----------*/

section#history div#history01 table{
  width:100%;
  border:1px solid #CCC;
  margin:0 0 5px 0;
}

@media print, screen and (min-width:960px) { 
 section#history div#history01 table{
  width:690px;
 }
}

section#history div#history01 table:last-child{
  margin:0 0 40px 0;
}


section#history div#history01 table th{
  width:30%;
  border-right:1px solid #CCC;
  font-size:12px; font-size:1.2rem;
  vertical-align:middle;
}

@media print, screen and (min-width:960px) { 
 section#history div#history01 table th{
  width:180px;
  border-right:1px solid #CCC;
  font-size:16px; font-size:1.6rem;
  vertical-align:middle;
 }
}

section#history div#history01 table td{
  border-top:1px solid #CCC;
  border-bottom:1px solid #CCC;
  font-size:11px; font-size:1.1rem;
  line-height:130%;
  vertical-align:middle;
  padding:12px 0 12px 10px;
}

@media print, screen and (min-width:960px) { 
 section#history div#history01 table td{
  border-top:1px solid #CCC;
  border-bottom:1px solid #CCC;
  font-size:12px; font-size:1.2rem;
  vertical-align:middle;
  padding:12px 0 12px 10px;
 }
}

section#history div#history01 table td.cell01{
  width:15%;
  padding:0 3px;
  background-color:#FDF7E8;
}

@media print, screen and (min-width:960px) { 
 section#history div#history01 table td.cell01{
  width:110px;
  padding:0 10px;
  background-color:#FDF7E8;
 }
}

section#history div#history01 table td.cell02{
  width:65%;
}

@media print, screen and (min-width:960px) { 
 section#history div#history01 table td.cell02{
  width:400px;
 }
}

section#history div#history01 table td.cell02 span.pt{
  color:#FF0000;
}



/*  member profile form , member card form
========================================================================================================
*/


div#profile01{
  margin:0 0 0 0;
}

@media print, screen and (min-width:960px) { 
 div#profile01{
  border-bottom:1px dotted #777;
  margin:0 0 50px 0;
 }
}

div#profile01 p{
  font-size:14px; font-size:1.4rem;
  line-height:150%;
  text-align:center;
  padding:0 10px;
  margin:20px 0 30px 0;
}

@media print, screen and (min-width:960px) { 
 div#profile01 p{
  font-size:18px; font-size:1.8rem;
  padding:0;
  margin:35px 0 50px 0;
 }
}


div#card01 p{
  font-size:14px; font-size:1.4rem;
  line-height:130%;
  text-align:center;
  margin:30px 10px;
}

@media print, screen and (min-width:960px){ 
 div#card01 p{
  font-size:18px; font-size:1.8rem;
  text-align:center;
  margin:45px 0;
 }
}

div#card01 div.error{
  color:#FF0000;
  margin:0 0 50px 0;
}


div#card01 div.error p{
  color:#FF0000;
  margin:10px;
}


div#profile01 div h3,
div#card01 div h3{
  background:url(/common/images/icon07.png) no-repeat 0 0;
  height:20px;
  padding:0 0 0 25px;
  line-height:20px;
  font-size:16px; font-size:1.6rem;
  margin:0 0 10px 0;
}

@media print, screen and (min-width:960px) { 
 div#profile01 div h3,
 div#card01 div h3{
  background:url(/common/images/icon07.png) no-repeat 0 0;
  height:20px;
  padding:0 0 0 25px;
  line-height:20px;
  font-size:16px; font-size:1.6rem;
  margin:0 0 10px 0;
 }
}

div#card01 div input::-webkit-input-placeholder{
 font-size:9px; font-size:0.9rem;
}
 
div#card01 div input:-moz-placeholder{
 font-size:9px; font-size:0.9rem;
}

/* IE 10+ */
div#card01 div input:-ms-input-placeholder {
 font-size:9px; font-size:0.9rem;
}

div#card01 div span.code{
 font-size:10px; font-size:1.0rem;
 line-height:120%;
 margin:0 0 0 10px;
}


@media print, screen and (min-width:960px) { 
 div#card01 div input::-webkit-input-placeholder{
 font-size:11px; font-size:1.1rem;
 }
 
 div#card01 div input:-moz-placeholder{
 font-size:11px; font-size:1.1rem;
 }

/* IE 10+ */
 div#card01 div input:-ms-input-placeholder {
 font-size:11px; font-size:1.1rem;
 }
 
div#card01 div span.code{
 font-size:11px; font-size:1.1rem;
 margin:0 0 0 10px;
 }
}


/*---------  form01  ---------*/

div.form01{
  width:95%;
  margin:0 auto 30px auto;
}

@media print, screen and (min-width:960px)
{ 
 div.form01{
  width:650px;
  margin:0 auto 30px auto;
 }
}

div.form01 table{
  width:100%;
  border-top:1px solid #CCC;
  border-left:1px solid #CCC;
  border-right:1px solid #CCC;
  margin:0 0 20px 0;
}

@media print, screen and (min-width:960px) { 
div.form01 table{
  margin:0 0 40px 0;
 }
}


div.form01 table th{
  width:30%;
  height:50px;
  background-color:#FDF7E8;
  border-bottom:1px solid #CCC;
  font-size:10px; font-size:1.0rem;
  text-align:left;
  font-weight:normal;
  vertical-align:middle;
  padding:0 0 0 10px;
  line-height:130%;
}

div#card01 div.form01 table th{
  width:25%;
}

@media print, screen and (min-width:960px) { 
 div.form01 table th{
  width:180px;
  height:50px;
  background-color:#FDF7E8;
  border-bottom:1px solid #CCC;
  font-size:14px; font-size:1.4rem;
  text-align:left;
  font-weight:normal;
  vertical-align:middle;
  padding:0 0 0 10px;
  line-height:130%;
 }
 
 div#card01 div.form01 table th{
  width:180px;
 }
}

div.form01 table td{
  width:70%;
  height:50px;
  border-bottom:1px solid #CCC;
  text-align:left;
  vertical-align:middle;
  padding:0 0 0 5px;
  line-height:130%;
}


@media print, screen and (min-width:960px) { 
 div.form01 table td{
  width:468px;
  height:50px;
  border-bottom:1px solid #CCC;
  text-align:left;
  vertical-align:middle;
  padding:0 0 0 15px;
  line-height:130%;
 }
}

div.form01 table td span{
  margin:0 5px 0 0;
  font-size:10px; font-size:1.0rem;
}

@media print, screen and (min-width:960px) { 
 div.form01 table td span{
  margin:0 5px 0 0;
  font-size:14px; font-size:1.4rem;
 }
}


div.form01 input,div.form01 select{
  height:20px;
  font-size:12px; font-size:1.2rem;
}

@media print, screen and (min-width:960px) { 
 div.form01 input,div.form01 select{
  height:25px;
  font-size:14px; font-size:1.4rem;
 }
}

div#profile01 div.form01 table td button.postcode{
  width:80px;
  height:24px;
  border:none;
  display:inline-block;
  font-size:12px; font-size:1.2rem;
  text-align:center;
  line-height:24px;
  padding:0;
  margin:0;
}


/*---------  form02  ---------*/


div.form02{
  width:95%;
  margin:0 auto 50px auto;
}

@media print, screen and (min-width:960px) { 
 div.form02{
  width:650px;
  margin:0 auto 50px auto;
 }
}

div.form02 table{
  width:100%;
  border:1px solid #CCC;
}

div.form02 table th{
  width:55%;
  background-color:#FDF7E8;
  line-height:130%;
  text-align:left;
  font-weight:normal;
  vertical-align:middle;
  padding:15px;
}

@media print, screen and (min-width:960px) { 
 div.form02 table th{
  width:400px;
  background-color:#FDF7E8;
  line-height:130%;
  text-align:left;
  font-weight:normal;
  vertical-align:middle;
  padding:20px;
 }
}

div.form02 table td{
  width:248px;
  border:1px solid #CCC;
  vertical-align:middle;
  padding:0 0 0 10px;
}


@media print, screen and (min-width:960px) { 
 div.form02 table td br{
   display:none
 }
}


/*--------- input ---------*/

input.text01{
  width:30%;
}

@media print, screen and (min-width:960px) { 
 input.text01{
  width:100px;
 }
}

input.text02{
  width:35%;
}

@media print, screen and (min-width:960px) { 
 input.text02{
  width:160px;
 }
}

input.text03{
  width:80%;
}

@media print, screen and (min-width:960px) { 
 input.text03{
  width:200px;
 }
}

input.text04{
  width:90%;
}

@media print, screen and (min-width:960px) { 
 input.text04{
  width:400px;
 }
}

input.text05{
  width:100%;
}

@media print, screen and (min-width:960px) { 
 input.text05{
  width:300px;
 }
}

input.text06{
  width:22%;
}

@media print, screen and (min-width:960px) { 
 input.text06{
  width:80px;
 }
}

input.text07{
  width:35%;
}

@media print, screen and (min-width:960px) { 
 input.text07{
  width:90px;
 }
}

input.text08{
  width:30%;
}

@media print, screen and (min-width:960px) { 
 input.text08{
  width:60px;
  margin:0 10px 0 0;
 }
}


div.form01 table td input[type="radio"] { 
  vertical-align:-8px;
}

div.form02 table td input[type="radio"] { 
  vertical-align:-2px;
}




/*  member optout
========================================================================================================
*/

div#optout01 h3{
  font-size:18px; font-size:1.8rem;
  text-align:center;
  line-height:150%;
  padding:0 15px;
  margin:30px 0 10px 0;
}

@media print, screen and (min-width:960px) { 
 div#optout01 h3{
  font-size:24px; font-size:2.4rem;
  padding:0;
  margin:50px 0 30px 0;
 }
}

div#optout01 p{
  line-height:150%;
  text-align:left;
  padding:0 15px;
  margin:0 0 20px 0;
}

@media print, screen and (min-width:960px) { 
 div#optout01 p{
  line-height:200%;
  text-align:center;
  padding:0;
  margin:0;
 }
}


/*  member extend
========================================================================================================
*/

section#extend div#extend01 p,
section#extend div#extend03 p{
  text-align:center;
}

section#extend div#extend01 p.message01,
section#extend div#extend03 p.message01{
  font-size:20px; font-size:2.0rem;
  line-height:150%;
  margin:50px auto 0 auto;
}

section#extend div#extend01 p.message02,
section#extend div#extend03 p.message02{
  font-size:15px; font-size:1.5rem; 
  line-height:150%;
  margin:15px auto 30px auto;
}

section#extend div#extend03 p.message04{
  font-size:20px; font-size:2.0rem; 
  line-height:150%;
  margin:60px auto 30px auto;
}


@media print, screen and (min-width:960px) {
 section#extend div#extend01 p.message01,
 section#extend div#extend03 p.message01{
  font-size:30px; font-size:3.0rem;
  margin:80px auto 30px auto;
 }

 section#extend div#extend01 p.message02,
 section#extend div#extend03 p.message02{
  font-size:15px; font-size:1.5rem;
  margin:30px auto 45px auto;
 }
 
 section#extend div#extend03 p.message04{
  font-size:30px; font-size:3.0rem; 
  line-height:150%;
  margin:15px auto 30px auto;
 }
}


section#extend div#extend01{
  background:url(/common/images/icon09.png) no-repeat bottom center;
  padding:0 0 40px 0;
  margin:0 0 30px 0;
}

section#extend div#extend01 div.error{
  font-size:18px; font-size:1.8rem;
  color:#FF0000;
  line-height:130%;
  margin:0 0 30px 0;
}

@media print, screen and (min-width:960px) {
 section#extend div#extend01 div.error{
  font-size:20px; font-size:2.0rem;
  margin:0 0 30px 0;
 }
}


section#extend div#extend01 dl,
section#extend div#extend03 dl{
  width:100%;
  border-bottom:1px dotted #777;
  line-height:150%;
  position:relative;
}

@media print, screen and (min-width:960px) {
 section#extend div#extend01 dl,
 section#extend div#extend03 dl{
  width:690px;
  border-bottom:1px dotted #777;
  line-height:150%;
 }
}

section#extend div#extend01 dl:after,
section#extend div#extend03 dl:after{
	content:""; 
	display:block; 
	clear:both;
}


section#extend div#extend01 dl dt{
  width:90%;
  font-size:16px; font-size:1.6rem;
  font-weight:bold;
  padding:0;
  margin:10px auto;
}

section#extend div#extend03 dl dt{
  width:90%;
  font-size:14px; font-size:1.4rem;
  font-weight:bold;
  padding:10px 0 0 0;
  margin:0 auto;
}

section#extend div#extend01 dl dd{
  width:90%;
  font-size:18px; font-size:1.8rem;
  margin:10px auto;
}

section#extend div#extend03 dl dd{
  width:90%;
  font-size:14px; font-size:1.4rem;
  margin:10px auto;
}


section#extend div#extend03 dl#total dt,
section#extend div#extend03 dl#total dd{
  font-size:24px; font-size:2.4rem;
}

section#extend div#extend03 dl#total dt span,
section#extend div#extend03 dl#total dd span{
  font-size:14px; font-size:1.4rem;
}

@media print, screen and (min-width:960px) {
 section#extend div#extend01 dl dt,
 section#extend div#extend03 dl dt{
  width:210px;
  float:left;
  font-weight:bold;
  padding:0 0 0 20px;
  margin:20px 0;
 }   

 section#extend div#extend01 dl dd,
 section#extend div#extend03 dl dd{
  width:480px;
  float:left;
  margin:20px 0;
 }
}

section#extend div#extend01 dl dd select{
  height:35px;
  font-size:14px; font-size:1.4rem;
  margin:0 5px 0 0;
}

@media print, screen and (min-width:960px) { 
 section#extend div#extend01 dl dd select{
  height:24px;
  font-size:16px; font-size:1.6rem;
  margin:0;
 }
}

section#extend div#extend01 dl dd span{
  position:absolute;
  top:35px;
  left:85%;
}

section#extend div#extend01 dl dd span img{
  width:24px;
  height:24px;
}

@media print, screen and (min-width:960px) { 
 section#extend div#extend01 dl dd span{
  position:absolute;
  top:18px;
  left:448px;
 }
 ssection#extend div#extend01 dl dd img{
  width:20px;
  height:20px;
 }
}


/*----month----*/

#extend div#extend01 dl dd select.month{
  width:85%;
  margin:0 0 10px 0;
}

@media print, screen and (min-width:960px) { 
 #extend div#extend01 dl dd select.month{
  width:120px;
  margin:0 5px 0 0;
 }
}

/*----date----*/

#extend div#extend01 dl dd select.date{
  width:85%;
  margin:0 0 10px 0;
}

@media print, screen and (min-width:960px) { 
 #extend div#extend01 dl dd select.date{
  width:100px;
  margin:0 30px 0 0;
 }
}

/*----time----*/

#extend div#extend01 dl dd select.time{
  width:85%;
}

@media print, screen and (min-width:960px) { 
 #extend div#extend01 dl dd select.time{
  width:100px;
  margin:0;
 }
}


section#extend div#extend03 dl.extension{
  background-color:#FFFFDD;
}


/*------------pay-----------*/

section#extend div#extend02{
  background:url(/common/images/icon09.png) no-repeat bottom center;
  padding:0 0 30px 0;
  margin:0 0 30px 0;
}

@media print, screen and (min-width:960px) { 
section#extend div#extend02{
  padding:0 0 50px 0;
}
}


section#extend div#extend02 h2{
  margin:0 0 30px 0;
}

@media print, screen and (min-width:960px) { 
 section#extend div#extend02 h2{
  margin:0 0 60px 0;
 }
}

section#extend div#extend02 div.pay01{
  width:95%;
  margin:0 auto 30px auto;
}

section#extend div#extend02 div.pay01:last-child{
  margin:0 auto;
}

@media print, screen and (min-width:960px) { 
 section#extend div#extend02 div.pay01{
  width:200px;
  border-radius: 5px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  float:left;
  margin:0 15px;
 }
 section#extend div#extend02 div.pay01:last-child{
  margin:0 0 0 15px;
 }
}

section#extend div#extend02 div.pay01 h4{
  width:100%;
  height:60px;
  background:url(/common/images/icon15.png) no-repeat center 45px #999;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  -webkit-border-top-left-radius:5px;
  -webkit-border-top-right-radius:5px;
  -moz-border-top-left-radius: 5px;
  -moz-border-top-right-radius: 5px;
  font-size:15px; font-size:1.5rem;
  text-align:center;
  line-height:60px;
  color:#FFF;
  font-weight:normal;
  padding:0;
  margin:0;
}

section#extend div#extend02 div.pay01 h4 span{
  font-size:12px; font-size:1.2rem;
}

@media print, screen and (min-width:960px) { 
 section#extend div#extend02 div.pay01 h4{
  width:200px;
  height:130px;
  background:url(/common/images/icon15.png) no-repeat center 110px #999;
  display:table-cell;
  font-size:26px; font-size:2.6rem;
  vertical-align: middle;
  line-height:100%;
  padding:0 0 10px 0;
 }

 section#extend div#extend02 div.pay01 h4 span{
  display:block;
  font-size:16px; font-size:1.6rem;
 }
}

section#extend div#extend02 div.pay-on h4,
section#extend div#extend02 div.pay01 div.pay-on h4{
  background-color:#0046D9;
}


@media print, screen and (max-width:960px) { 
 section#extend div#extend02 div.pay01 h4 br{
  display:none;
 }
}

section#extend div#extend02 div.pay01 p{
  background-color:#FFF;
  line-height:130%;
  border-bottom:1px solid #CCC;
  border-left:1px solid #CCC;
  border-right:1px solid #CCC;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius-bottom-right:5px; 
  -moz-border-radius-bottom-left:5px;
  padding:15px;
}

@media print, screen and (min-width:960px) { 
section#extend div#extend02 div.pay01 p{
  height:80px;
  background-color:#FFF;
  line-height:130%;
  border-bottom:1px solid #CCC;
  border-left:1px solid #CCC;
  border-right:1px solid #CCC;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius-bottom-right:5px; 
  -moz-border-radius-bottom-left:5px;
  padding:15px;
 }
}

section#extend div#extend02 div.pay01 p span{
  display:block;
  font-size:11px; font-size:1.1rem;
  line-height:150%;
  margin:5px 0 0 0;
}

section#extend div#extend02 div.pay01 p#cardinfo{
  border:none;
  font-size:11px; font-size:1.1rem;
  text-align:center;
  padding:0;
  margin:10px 0 0 0;
}

section#extend div#extend02 div.pay01 p#cardinfo span{
  display:inline-block;
  margin:10px 0 0 0;
}

section#extend div#extend02 div.pay01 p a{
  color:#000;
  text-decoration:none;
}