@charset "utf-8";


body{
-webkit-print-color-adjust: exact;
color:#404040; /* */
font-family: メイリオ, meiryo, 游ゴシック, "Hiragino Kaku Gothic ProN", sans-serif;
-webkit-text-size-adjust: 100%;
line-height:1.5em;
text-align:center;
}
html{
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* リンク */
a:link{
color:#333333; /* 色 */
text-decoration:none;
}
a:visited{
color:#333333; /* 色 */
text-decoration:none;
}
a:hover {
color:#333333; /* 色 */
text-decoration:none;
}
a:active {
color:#333333; /* 色 */
text-decoration:none;
}

/* ここまでテンプレ */
#wrapper{
  width:100%;
}
sub{
  vertical-align: baseline;
}

.hide{
  display: none !important;
}
.blur{
  -ms-filter: blur(6px);
  filter: blur(6px);
}
@media print, screen and (min-width:768px){
body{
 font-size:16px;
 min-width:800px;
 background: url("../../images/front/common/bg_pc.png") center bottom no-repeat;
 background-attachment: fixed;
}
#wrapper{
 background: url("../../images/front/common/header_bg_pc.png") center top no-repeat;
 background-attachment: fixed;
}
.spVer{
  display: none !important;
}
}

@media screen and (max-width: 767px){
body{
 font-size:3.7vw;
 line-height: 1.4em;
}
.pcVer{
  display: none !important;
}
#wrapper{
  overflow-x: hidden;
}
}

/* ========================================================
#headerArea
======================================================== */
#headerArea{
  position: relative;
}
#headerInner{
  position: relative;
  z-index:2;
  height: 232px;
}
#headerTtl{
  font-size: 30px;
  padding-top: 55px;
  position: relative;
  display: inline-block;
}
#headerTtl::before{
  content: "";
  display: block;
  position: absolute;
  background: url("../../images/front/common/pop_moepo.png") no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}
#headerTtl > span{
  display: block;
  margin-bottom: 0.8em;
  font-size: 16px;
}
@media screen and (min-width: 768px){
  body::before{
    content: "";
    display: block;
    width: 100%;
    background-color: #01184D;
    height: 5px;
    position: fixed;
    left: 0;
    top: 0;
    z-index:3;
  }
  #wrapper::before{
    content: "";
    display: block;
    width: 100%;
    background-color: rgba(1,44,77,0.15);
    height:4px;
    position: fixed;
    left: 0;
    top: 5px;
    z-index:3;
  }
  #headerTtl::before{
    width: 113px;
    height: 73px;
    right: -122px;
    top: 25px;
  }
}
@media screen and (max-width: 767px){
  #headerArea{
    background: url("../../images/front/common/header_bg_sp.png") center 1vw no-repeat;
    -moz-background-size: 100% auto;
    background-size: 100% auto;
    box-shadow: 0 1vw 1.5vw 0 rgba(224,235,235,0.6);
    border-top:solid 3vw #01184D;
  }
  #headerArea::before{
    content: "";
    display: block;
    width: 100%;
    background-color: rgba(1,44,77,0.15);
    z-index: 3;
    left: 0;
    top: 5px;
    height: 2.1vw;
    margin-top: -0.4vw;
  }
  #headerInner{
    height: 34.6vw;
  }
  #headerTtl{
    font-size: 8vw;
    padding-top: 9vw;
  }
  #headerTtl::before{
    width: 21.8vw;
    height: 14.13vw;
    right: -7.2vw;
    top: 1.8vw;
  }
  #headerTtl > span{
    font-size: 4.2vw;
  }
}
/* ========================================================
#contentArea
======================================================== */
#contentArea{
  padding: 2px 0 80px;
}
#contentInner{
  background-color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  text-align: left;
  margin: 0 auto;
  z-index: 2;
  box-shadow: 0px 4px 6px #E0EBEB99;
  border: 1px solid #F1F5F5;
  border-radius: 8px;
  margin-top: -80px;
  width: 600px;
  padding: 50px 40px 0;
}
.contentSection + .contentSection{
  margin-top: 80px;
}
@media screen and (max-width: 767px){
  #contentArea{
    background-color: #fff;
    padding: 4vw 5.3vw 0;
  }
  #contentInner{
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin-top: 0;
    width: 100%;
    padding:0;
  }
  .contentSection + .contentSection{
    margin-top: 20vw;
  }
}
/* .contentLead
----------------------- */
.contentLead{
  text-align: center;
  font-size: 20px;
  margin-bottom: 40px;
}
.contentLead::after{
  content: "";
  display: block;
  background-color: #9D1E48;
  margin: 20px auto 0;
  width: 42px;
  height: 5px;
}
@media screen and (max-width: 767px){
  .contentLead{
    font-size: 5.3vw;
    margin-bottom: 8vw;
  }
  .contentLead::after{
    margin: 2.6vw auto 0;
    width: 8vw;
    height: 1.3vw;
  }
}
/* .bgcolorTtl
----------------------- */
.bgcolorTtl{
  font-weight: bold;
  color: #014D4B;
  position: relative;
  background-color: #F7FAFA;
  padding: 20px;
  margin-top: 30px;
}
.bgcolorTtl::before{
  content: "";
  display: block;
  background-color: #014D4B;
  position: absolute;
  left: 0;
  top: calc(20px - 0.2em);
  width: 4px;
  height: 1.8em;
}
@media screen and (max-width: 767px){
  .bgcolorTtl{
    padding: 4vw;
    margin-top: 6.4vw;
    font-size: 4.2vw;
  }
  .bgcolorTtl::before{
    width: 1vw;
    top: calc(4vw - 0.2em);
  }
}
/* .lineCenterTtl
----------------------- */
.lineCenterTtl{
  position: relative;
  text-align: center;
  margin: calc(50px + 0.8em) 0 20px;
  border-top:solid 2px #D9DADD;
  font-size: 14px;
}
.lineCenterTtl span{
  display: inline-block;
  background-color: #fff;
  padding: 0 2.2em;
  margin: -0.8em auto 0;
}
@media screen and (max-width: 767px){
  .lineCenterTtl{
    margin: calc(10.6vw + 0.8em) 0 0;
    border-top:solid 2px #D9DADD;
    font-size: 3.7vw;
  }
  .lineCenterTtl span{
    padding: 0 1.2em;
  }
}
/* .boldTtl
----------------------- */
.boldTtl{
  color: #014D4B;
  font-weight: bold;
  margin-bottom: 1em;
}
/* .arrowLink
----------------------- */
.floatBottom{
  margin-bottom: calc(-110px + 1.6em);
  margin-top: 110px;
}
a.arrowLink{
  padding-left: 1.5em;
  position: relative;
  text-decoration: underline;
}
.arrowLink:hover{
  text-decoration: none;
}
.arrowLink::before,
.arrowLink::after{
  content: "";
  display: block;
  position: absolute;
}
.arrowLink::before{
  width: 1em;
  height: 1em;
  background-color: #2B2B2B;
  border-radius: 0.5em;
  left: 0;
  top: 0.25em;
}
.arrowLink::after{
  width: 0.4em;
  height: 0.4em;
  border-right:solid 2px #fff;
  border-top:solid 2px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0.3em;
  top: 0.6em;
}
.arrowRightLinkWrap{
  text-align: right;
}
a.arrowRightLink{
  padding-right: 1em;
  position: relative;
  text-decoration: underline;
}
.arrowRightLink:hover{
  text-decoration: none;
}
.arrowRightLink::after{
  content: "";
  display: block;
  position: absolute;
}
.arrowRightLink::after{
  width: 0.4em;
  height: 0.4em;
  border-right:solid 2px #014D4B;
  border-top:solid 2px #014D4B;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  right: 0.2em;
  top: 0.6em;
}
@media screen and (max-width: 767px){
  .floatBottom{
    margin-bottom: calc(-20vw + 1.6em);
    margin-top: 18vw;
  }
  .arrowLink::after{
    width: 0.34em;
    height: 0.34em;
    border-right:solid 0.2vw #fff;
    border-top:solid 0.2vw #fff;
  }
  .arrowRightLink::after{
    width: 0.34em;
    height: 0.34em;
    border-right:solid 0.2vw #014D4B;
    border-top:solid 0.2vw #014D4B;
  }
}
/* ========================================================
.pager
======================================================== */
.pager{
  text-align: center;
  margin-top: 40px;
}
.pagerInner{
  display: inline-block;
  border: solid 1px #D9DADD;
  color: #707070;
  font-size: 0;
  line-height: 0;
  border-radius: 30px;
}
.pagerInner > *,
.pagerInner ul li{
  display: inline-block;
  vertical-align: middle;
}
.pagerInner .prev,
.pagerInner .next{
  font-weight: bold;
  position: relative;
  padding: 0 20px;
  line-height: 60px;
  font-size: 16px;
  color: #707070;
}
.pagerInner .prev p,
.pagerInner .next p{
  display: block;
}
.pagerInner .prev.active p,
.pagerInner .next.active p{
  display: none;
}
.pagerInner .prev.active a,
.pagerInner .next.active a{
  display: block;
}
.pagerInner .prev > *{
  padding-left: 1em;
}
.pagerInner .next > *{
  padding-right: 1em;
}
.pagerInner .prev a,
.pagerInner .next a{
  text-decoration: underline;
  display: none;
}
.pagerInner .prev > *::before,
.pagerInner .next > *::before{
  content: "";
  display: block;
  position: absolute;
  border-top:solid 2px #707070;
  top: calc(50% - 0.15em - 1px);
  width: 0.3em;
  height: 0.3em;
}
.pagerInner .prev > *::before{
  left: 1.5em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.pagerInner .next > *::before{
  right: 1.5em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.pagerInner .prev a::before{
  border-left:solid 2px #333333;
}
.pagerInner .next a::before{
  border-right:solid 2px #333333;
}
.pagerInner .prev p::before{
  border-left:solid 2px #707070;
}
.pagerInner .next p::before{
  border-right:solid 2px #707070;
}

.pageList{
  width: 300px;
  position: relative;
}
.pageList::before,
.pageList::after{
  content: "";
  display: block;
  background-color: #D9DADD;
  position: absolute;
  z-index: 1;
  top: 10px;
  width: 1px;
  height: 40px;
}
.pageList::before{
  left: 1px;
}
.pageList::after{
  right: 1px;
}
.pagerInner ul{
  display: table;
  width: 100%;
  table-layout: fixed;
}
.pagerInner ul li{
  position: relative;
  z-index: 2;
  display: table-cell;
  line-height: 60px;
  font-size: 16px;
}
.pagerInner ul li a,
.pagerInner ul li p{
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.pagerInner ul li p{
  display: none;
}
.pagerInner ul li.active p{
  display: block;
}
.pagerInner ul li.active a{
  display: none;
}
.pagerInner ul li a{
  text-decoration: underline;
}
.pagerInner ul li a:hover{
  background-color: #F7FAFA;
  color: #014D4B;
  font-weight: bold;
  text-decoration: none;
}
.pagerInner ul li p{
  border: solid 1px #014D4B;
  background-color: #fff;
  color: #014D4B;
  font-weight: bold;
}
@media screen and (max-width: 767px){
  .pager{
    margin: 8vw -5.3vw 0;
  }
  .pagerInner{
    border-radius: 8vw;
  }
  .pagerInner .prev,
  .pagerInner .next{
    padding: 0;
    width: 23vw;
    line-height: 16vw;
    font-size: 4.2vw;
  }
  .pageList::before,
  .pageList::after{
    top: 2.6vw;
    height: 10.6vw;
  }
  .pageList{
    width: 53vw;
  }
  .pagerInner ul li{
    line-height: 16vw;
    font-size: 4.2vw;
  }
}
/* ========================================================
.borderBox
======================================================== */
.borderBox{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #E5EDEC;
  background-color: #FCFCFC;
  margin-top: 1em;
  padding: 1em;
  border-radius: 3px;
  word-break:break-all;
}
.borderBox h3{
  text-align: center;
  color: #014D4B;
  padding: 0.3em;
  background-color: #E5EDEC;
  margin-bottom: 1.4em;
  border-radius: 3px;
  font-size: 16px;
}
.borderBox p{
  margin-top: 1em;
}
.borderBox p:first-child{
  margin-top: 0;
}
.phoneLink{
  margin-top: 0.8em;
}
.phoneLink .ic{
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
  width: 1em;
}
.phoneLink .ic img{
  width: 100%;
  height: auto;
}
.phoneLink a{
  color: #014D4B;
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
  font-size: 16px;
}
@media screen and (max-width: 767px){
  .borderBox{
    padding:1em 0.5em;
  }
  .borderBox h3{
    font-size: 4.2vw;
    margin-bottom: 1em;
  }
  .phoneLink a{
    font-size: 4.2vw;
  }
}
.scrollBox{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ECECEE;
  border-radius: 4px;
  height: 200px;
  padding: 10px 10px 10px 15px;
  margin-top: 20px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  background-color: #A2BEBD !important;
  width: 10px;
}
.mCSB_scrollTools .mCSB_draggerContainer{
  background-color: #ECF2F2;
  width: 10px;
  border-radius: 5px;
}
.mCSB_scrollTools .mCSB_draggerRail{
  display: none;
}
.scrollBox p{
  margin-top: 1em;
}
.scrollBox p:first-child{
  margin-top: 0;
}
.scrollBox table{
  width: 100%;
  margin-top: 0.5em;
  border-top: solid 1px #D9DADD;
  border-left: solid 1px #D9DADD;
}
.scrollBox table th,
.scrollBox table td{
  border-bottom: solid 1px #D9DADD;
  border-right: solid 1px #D9DADD;
  vertical-align: middle;
  padding: 0.5em;
}
@media screen and (max-width: 767px){
}
/* ========================================================
form
======================================================== */
/* formTable
----------------------- */
.formTable{
  width: 100%;
  margin-top: 20px;
}
.formTable th,
.formTable td{
  display: block;
  width: 100%;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.formTable th{
  background-color: #fafaf9;
  padding: 20px 10px 20px 50px;
  position: relative;
}
.formTable th.required::after,
.formTable th.optional::after{
  line-height: 1em;
  padding: 0.3em 0.8em;
  border-radius: 0.8em;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.1em;
  position: absolute;
  right: 0.8em;
  top: 50%;
  -webkit-transform: translate(0, -50%);
     -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  font-size: 13px;
}
.formTable th.required::after{
  content: "必須";
  background-color: #CC0000;
}
.formTable th.optional::after{
  content: "任意";
  background-color: #0058CC;
}
.formTable th .ic{
  position: absolute;
  width: 30px;
  left: 10px;
  top: calc(20px + 0.75em);
  -webkit-transform: translate(0, -50%);
     -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.formTable th .ic img{
  width: 100%;
  height: auto;
}
.formTable td{
  padding: 10px 10px 20px;
}
.formTable td p{
  word-break:break-all;
}
@media screen and (max-width: 767px){
  .formTable{
    width: calc(100% + 10.6vw);
    margin: 4.8vw -5.3vw 0;
  }
  .formTable th,
  .formTable td{
    display: block;
    width: 100%;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .formTable th{
    background-color: #fafaf9;
    padding: 5.3vw 4vw 5.3vw 15vw;
  }
  .formTable th.required,
  .formTable th.optional{
    padding: 5.3vw 18vw 5.3vw 15vw;
  }
  .formTable th.required::after,
  .formTable th.optional::after{
    font-size: 3.2vw;
  }
  .formTable th .ic{
    position: absolute;
    width: 8vw;
    left: 4vw;
    top: calc(5.3vw + 0.75em);
    -webkit-transform: translate(0, -50%);
       -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
  .formTable td{
    padding: 5.3vw 4vw;
  }
}
/* input
----------------------- */
.formInner{
  margin-top: 20px;
}
.formInner strong{
  color: #CC0000;
}
.contentSection u{
  background: linear-gradient(rgba(255, 255, 255, 0) 59%, #ffff99 60%, #ffff99 89%,rgba(255, 255, 255, 0) 90%);
  text-decoration: none;
  font-weight: bold;
}
.contentSection > p + p{
  margin-top: 1em;
}
.formInner input[type="text"],
.formInner input[type="email"],
.formInner input[type="number"],
.formInner input[type="password"],
.formInner input[type="tel"],
.formInner select{
  font-size: 16px;
  line-height: 1.4em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 12px 1em;
  -webkit-appearance: none;
  border: solid 1px #D9DADD;
  background-color: #fff;
  width: 340px;
  max-width: 100%;
  border-radius: 3px;
}
.formInner select{
  padding: 12px 1.8em 12px 1em;
}
.formInner input::placeholder { color: #D9DADD;}
.formInner input::-ms-input-placeholder { color: #D9DADD;}
.formInner input:-ms-input-placeholder { color: #D9DADD;}
.formInner input:focus { outline-color: #D9DADD;}
.formInner textarea::placeholder { color: #D9DADD;}
.formInner textarea::-ms-input-placeholder { color: #D9DADD;}
.formInner textarea:-ms-input-placeholder { color: #D9DADD;}
.formInner input[type="text"]:disabled,
.formInner input[type="email"]:disabled,
.formInner input[type="number"]:disabled,
.formInner input[type="password"]:disabled,
.formInner input[type="tel"]:disabled,
.formInner select:disabled{
  background-color: #F0F0F0;
}
.formInner .selectWrap{
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.formInner .selectWrap.selectWide select{
  width: auto;
  min-width: 340px;
  max-width: 478px;
}
.formInner .selectWrap::after{
  content: "";
  display: block;
  position: absolute;
  right: 0.9em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: calc(50% - 7px);
  width: 8px;
  height: 8px;
  border-right:solid 2px #014D4B;
  border-bottom:solid 2px #014D4B;
  pointer-events: none;
}
.formInner select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #404040;
}
.formInner select option{
  background-color: #fff;
  color: #404040;
}
.formInner select option.hide{
  display: none;
}
.formInner .formName{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
  width: 500px;
}
.formInner .formName > div{
  width: 240px;
}
.formInner .formNumber{
  letter-spacing: -0.5em;
}
.formInner .formNumber > *{
  letter-spacing: 0;
}
.formInner .formNumber > div{
  display: inline-block;
  margin-right: 30px;
}
.formInner .formNumber .number2{width: 60px;}
.formInner .formNumber .number3{width: 80px;}
.formInner .formNumber .number4{width: 100px;}
.formInner .mt{
  margin-top: 10px;
}
.formInner .cardInput .selectWrap{
  width: 90px;
}
.formInner .cardInput > p{
  display: inline-block;
  min-width: 3em;
}
.formInner .cardInput input{
  width: 74px;
}
.formInner .calendarInput .selectWrap{
  width: 70px;
}
.formInner .calendarInput .selectWrap:nth-of-type(1){
  width: 100px;
}
.formInner .calendarInput span{
  margin: 0 0.8em 0 0.2em;
}
.formInner .calendarInput span:last-child{
  margin: 0 0 0 0.2em;
}
.formInner .timeInput .selectWrap{
  width: 80px;
}
.formInner .timeInput span{
  margin: 0 0.8em 0 0.2em;
}
.formInner .postalInput input:nth-of-type(1){
  width: 66px;
}
.formInner .postalInput input:nth-of-type(2){
  width: 77px;
}
.formInner .postalInput span{
  margin: 0 0.5em;
}
@media screen and (max-width: 768px) {
  .formInner{
    margin-top: 4.8vw;
  }
  /* input
  ----------------------- */
  .formInner input[type="text"],
  .formInner input[type="email"],
  .formInner input[type="number"],
  .formInner input[type="password"],
  .formInner input[type="tel"],
  .formInner select{
    font-size: 4.3vw;
    padding: 0.6em 1em;
    width: 72vw;
  }
  .formInner select{
    padding: 0.6em 1.6em 0.6em 0.6em;
    min-width: 100%;
  }
  .formInner input[type="text"].spMin,
  .formInner input[type="email"].spMin,
  .formInner input[type="number"].spMin,
  .formInner input[type="password"].spMin,
  .formInner input[type="tel"].spMin{
    width: 50vw;
  }
  .formInner .selectWrap,
  .formInner .formName,
  .formInner .selectWrap.selectWide{
    width: 81.4vw;
    max-width: 81.4vw;
  }
  .formInner .selectWrap.selectWide select{
    max-width: 81.4vw;
    min-width: 81.4vw;
  }
  .formInner .formName > div{
    width: calc(50% - 1.3vw);
  }
  .formInner .mt{
    margin-top: 2.6vw;
  }
  .formInner .cardInput .selectWrap{
    width: 20vw;
  }
  .formInner .cardInput input{
    width: 16vw;
  }
  .formInner .cardInput input {
    padding: 0.6em 0.4em;
  }
  .formInner .calendarInput .selectWrap{
    width: 16vw;
  }
  .formInner .calendarInput .selectWrap:nth-of-type(1){
    width: 21vw;
  }
  .formInner .timeInput .selectWrap{
    width: 16vw;
  }
}
/* radio
----------------------- */
.formInner .radio{
  margin-top: -1em;
  letter-spacing: -0.5em;
}
.formInner .radio li{
  margin-top: 1em;
  letter-spacing:0;
  display: inline-block;
  margin-right: 2em;
}
.formInner .radio li input[type="radio"]{
  opacity:0;
  position: absolute;
}
.formInner .radio li label{
  cursor: pointer;
}
.formInner .radio li label span {
  position: relative;
  line-height:1;
  border: solid 2px #A2BEBD;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 1.6em;
  height: 1.6em;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.95em;
  margin-top: -0.2em;
  margin-right: 0.7em;
  background-color: #fff;
}
.formInner .radio li input:focus + label span{
  border: solid 2px #000;
}
.formInner .radio li input:checked + label span::before {
  content: "";
  display: block;
  position: absolute;
  background-color: #014D4B;
  width: 0.8em;
  height: 0.8em;
  border-radius: 0.4em;
  left:calc(0.4em - 2px);
  top:calc(0.4em - 2px);
}
@media screen and (min-width: 769px) {
  .formInner .radio li:first-child{
    margin-top: 0;
  }
  .formInner .radio li input[type="text"]{
    margin-left: 1em;
  }
}
@media screen and (max-width: 768px) {
  .formInner .radio li{
    font-size: 3.7vw;
  }
  .formInner .radio li input[type="text"]{
    width: calc(100% - 2.3em);
    margin-left: 2.3em;
  }
}
/* checkbox
----------------------- */
.formInner #checkboxTerms{
  text-align: center;
  margin-top: 30px;
}
.formInner #checkboxTermsInner{
  position: relative;
  display: inline-block;
}
.formInner #checkboxTerms .checkbox,
.formInner .checkbox.inline{display: inline-block;}
.formInner .checkbox li{
  margin-top: 14px;
  display: block;
  padding-top: 0.2em;
}
.formInner .checkbox li:first-child{
  margin-top: 0;
}
.formInner .checkbox li input[type="checkbox"],
.checkboxInput input[type="checkbox"]{
  opacity:0;
  position: absolute;
}
.formInner .checkbox li label,
.checkboxInput label{
  cursor: pointer;
}
.formInner .checkbox li label span ,
.checkboxInput label span{
  position: relative;
  line-height:1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 2px #A2BEBD;
  width: 1.375em;
  height: 1.375em;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.8em;
  margin-top: -0.2em;
  background-color: #fff;
}
.formInner .checkbox li label:hover span,
.checkboxInput label:hover span{
  border: solid 2px #014D4B;
}
.formInner .checkbox li input[type="checkbox"]:focus + label span,
.checkboxInput input[type="checkbox"]:focus + label span{
  border: solid 2px #000;
}
.formInner .checkbox li input:checked + label span::before,
.checkboxInput input:checked + label span::before{
  content: "";
  display: block;
  position: absolute;
  border-right:solid 3px #014D4B;
  border-bottom:solid 3px #014D4B;
  width: 0.4em;
  height: 0.8em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  left:0.45em;
  top: -0.1em;
}
@media screen and (min-width: 769px) {
  .formInner .checkbox li:first-child{
    margin-top: 0;
  }
  .formInner .checkbox li input[type="text"]{
    margin-left: 1em;
  }
}
@media screen and (max-width: 768px) {
  .formInner #checkboxTerms{
    margin-top: 8vw;
  }
  .formInner .checkbox li{
    font-size: 3.7vw;
    margin-right: 0;
  }
  .formInner .checkbox li input[type="text"]{
    width: calc(100% - 2.3em);
    margin-left: 2.3em;
  }
}
/* #formSubmit
----------------------- */
#formSubmit,
.colorBt{
  text-align: center;
  padding-top: 2px;
  height:60px;
  margin-top: 30px;
}
#formSubmit{
  margin: 30px -10px 0;
}
#formSubmit.marginHigh,
.colorBt.marginHigh{
  margin-top: 60px;
}
#formSubmit > div{
  display: inline-block;
  border-radius: 30px;
  position: relative;
  margin: 0 10px;
  height:60px;
}
#formSubmit input,
#formSubmit a,
.colorBt input,
.colorBt a{
  display: inline-block;
  vertical-align: top;
  color: #fff;
  border: none;
  padding:1.2em 60px;
  line-height: 1.4em !important;
  height:60px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: transparent;
  position: relative;
  -webkit-appearance: none;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background:#014D4B;
  min-width: 260px;
  opacity:1;filter: alpha(opacity=100);-ms-filter: "alpha(opacity=100)";
  transition-property: opacity,filter;
  transition: 0.2s linear;
}
#formSubmit.high input,
#formSubmit.high a,
.colorBt.high input,
.colorBt.high a{
  height:80px;
  border-radius: 40px;
}
#formSubmit input:focus,
#formSubmit a:focus,
.colorBt input:focus,
.colorBt a:focus{
  outline: solid 3px #000;
}
#formSubmit .wideMin input,
#formSubmit .wideMin a,
.colorBt.wideMin input,
.colorBt.wideMin a{
  min-width: 180px;
}
.colorBt.green a{
  background-color: #F1F5F5;
  border: solid 1px #D9DADD;
  color: #404040;
}
.colorBt.white a,
#formSubmit .white a,
#formSubmit .white input{
  border: solid 1px #D9DADD;
  background-color: #fff;
  color: #404040;
  text-decoration: underline;
}
.colorBt.gray a,
#formSubmit .gray a,
#formSubmit .gray input{
  background-color: #707070;
  min-width: 160px;
}
#formSubmit input:disabled,
.colorBt input:disabled,
#formSubmit input:hover,
#formSubmit a:hover,
.colorBt a:hover{
  opacity:.6;filter: alpha(opacity=60);-ms-filter: "alpha(opacity=60)";
}
.colorBt a{
  position: relative;
}
.colorBt.blank a::after{
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: url("../../images/front/common/ic_window_wh.png") no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  position: absolute;
  right: 1.5em;
  top: calc(50% - 0.5em);
}
@media screen and (max-width: 768px) {
  /* #formSubmit
  ----------------------- */
  #formSubmit,
  .colorBt{
    margin: 3.7vw auto 0;
    height: 16vw;
    width: 70vw;
    border-radius: 6.6vw;
    z-index: 1;
  }
  #formSubmit.high input,
  #formSubmit.high a,
  .colorBt.high input,
  .colorBt.high a,
  #formSubmit.spHigh input,
  #formSubmit.spHigh a,
  .colorBt.spHigh input,
  .colorBt.spHigh a{
    height:20vw;
    border-radius: 10vw;
  }
  #formSubmit.marginHigh,
  .colorBt.marginHigh{
    margin-top: 7.2vw;
  }
  #formSubmit::before{
    width: 100%;
    height: 13.2vw;
  }
  #formSubmit{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-direction: column;
    flex-wrap: wrap;
    height: auto;
  }
  #formSubmit > div{
    margin:3vw 0 ;
  }
  #formSubmit .gray{order: 99;}
  #formSubmit input,
  #formSubmit a,
  .colorBt a{
    height: 16vw;
    border-radius: 8vw;
    font-size:4.2vw;
    padding: 1.1em 3.5em;
    min-width: 25vw;
  }
  #formSubmit .spWide input,
  #formSubmit .spWide a,
  .colorBt.spWide a{
    padding: 1.1em 0;
    width: 100%;
  }
  .colorBtUnit{
    margin-top: 6.4vw;
  }
  .colorBtUnit .colorBt{
    display: block;
    margin: 4vw 0 0;
  }
}
/* error
----------------------- */
.error{
  border:solid 2px #CC0000 !important;
  color: #CC0000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 25px 20px;
  margin-top: 20px;
}
.error .serviceCaption{
  display: inline-block;
  margin-top: 0;
}
.error a{
  color: #CC0000;
  text-decoration: underline;
}
.error a.blank{
  display: inline-block;
  margin: 0 0.5em;
}
.error a.blank::after{
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.3em;
  width: 1em;
  height: 1em;
  background: url(../../images/front/common/ic_window_re.png) no-repeat;
    -moz-background-size: 100% auto;
    background-size: 100% auto;
}
@media screen and (max-width: 768px) {
  .error{
    padding: 0.8em;
    margin-top: 5.3vw;
  }
  .error .serviceCaption{
    font-size: 3.4vw;
  }
}
/* alert
----------------------- */
.alert{
  position: relative;
}
.alert span{
  color: #fff;
  display: inline-block;
  position: absolute;
  background-color: #CC0000;
  font-weight: bold;
  letter-spacing: 0.1em;
  border-radius: 1em;
  line-height: 1.2em;
  padding: 0.4em 1em;
  font-size: 13px;
  left: -20px;
  bottom: 10px;
}
.alert span::after{
  content: "";
  display: block;
  width: 0.5em;
  height: 0.5em;
  background-color: #CC0000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  left: 1.5em;
  bottom: -0.23em;
}
@media screen and (max-width: 768px) {
  .alert span{
    font-size: 2.6vw;
    left: -1em;
    bottom: 0.5em;
  }
}
/* ========================================================
#footerArea
======================================================== */
#footerArea{
  margin-top: 110px;
}
#footerBnr{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    flex-wrap: wrap;
  gap:10px 45px;
  margin: 30px 0;
}
#footerBnr li a{
  display: block;
  width: 140px;
}
#footerBnr li a img{
  width: 140px;
  height: 60px;
}
#copyright{
  text-align: center;
  border-top:solid 1px #D9DADD;
  padding: 60px 0;
  margin: 0 -40px;
  font-size: 12px;
}
@media screen and (max-width: 767px){
  #footerArea{
    margin-top: 20vw;
  }
  #footerBnr{
    gap:5.3vw 6.6vw;
    margin: 8vw 2.6vw;
  }
  #footerBnr li a{
    width: 36vw;
  }
  #footerBnr li a img{
    width: 36vw;
    height: 15.42vw;
  }
  #copyright{
    padding: 8.5vw 0;
    margin: 0 -5.3vw;
    font-size: 2.6vw;
  }
}

/* ========================================================
popupArea
======================================================== */
.popupArea{
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.3);
  text-align: center;
}
.popupInner{
  width: 90vw;
  max-width: 500px;
  margin: 0 auto;
  height: 100vh;
      display:flex;
    justify-content: center;
    align-items: center;
}
.popupBox{
  background-color: #fff;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 1em;
  padding: 1.5em;
}
.popupBox h3{
  font-size: 120%;
  line-height: 1.6em;
}
.popupTitleAttention{
  color: #CC0000;
}
.popupTitleAttention small{
  font-size: 82%;
  line-height: 1.6em;
  font-weight: normal;
}
.popupBox p{
  text-align: left;
  margin-top: 1em;
}
.popupClose{
  margin-top: 2em;
}
.popupClose a{
  display: inline-block;
  padding: 0.3em 1em;
  color: #fff;
  background-color: #707070;
  opacity:1;filter: alpha(opacity=100);-ms-filter: "alpha(opacity=100)";
  transition-property: opacity,filter;
  transition: 0.2s linear;
}
.popupClose a:hover{
  opacity:.6;filter: alpha(opacity=60);-ms-filter: "alpha(opacity=60)";
}
@media screen and (max-width: 767px){
  .popupBox{
    padding: 1.5em 1em;
  }
}
/* ======================================================================================
login
====================================================================================== */
#newsList{
  display: block;
  margin: -20px 0 0;
}
#newsList li{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: solid 1px #D9DADD;
  padding: 24px 16px;
}
#newsList li .date{
  font-weight: bold;
  color: #01184D;
  margin-bottom: 0.3em;
}
@media screen and (max-width: 767px){
  #newsList{
    margin: 0;
  }
  #newsList li{
    padding:3.2vw 4vw;
    font-size: 4.2vw;
  }
  #newsList li .date{
    font-size: 2.6vw;
  }
}

/* ======================================================================================
member
====================================================================================== */
/* #memberHeadline
----------------------- */
#memberHeadline{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: solid 1px #F2F6F6;
  margin: -50px -40px 0;
  padding: 21px 40px 20px 50px;
  line-height: 36px;
}
#memberName{
  background: url("../../images/front/common/ic_user_gr.png") left center no-repeat;
  -moz-background-size: 18px auto;
  background-size: 18px auto;
  padding-left: 30px;
}
#memberPoint{
  order: 99;
  width: 100%;
  margin-top: 0.5em;
}
#memberPoint a{
  display: block;
  text-align: left;
  line-height: 1.5em;
  padding-left: 30px;
  position: relative;
  color: #014D4B;
  text-decoration: underline;
}
#memberPoint a:hover{
  text-decoration: none;
}
#memberPoint a::before{
  position: absolute;
  left: 0.3em;
  bottom: calc(50% - 0.25em);
  content: "";
  display: block;
  background-color: #014D4B;
  aspect-ratio: 1/cos(45deg);
  clip-path: polygon(0 0,100% 0,50% 100%);
  transform: rotate(-90deg);
  width: 0.8em;
}
#memberLogout a{
  display: block;
  color: #fff;
  background-color: #707070;
  text-align: center;
  width: 100px;
  font-size: 14px;
}
@media screen and (max-width: 767px){
  #memberHeadline{
    margin: 5.8vw -5.3vw 0;
    padding: 0 5.3vw 5.3vw;
    line-height: 10vw;
  }
  #memberName{
    background: url("../../images/front/common/ic_user_gr.png") left center no-repeat;
    -moz-background-size: 4.8vw auto;
    background-size: 4.8vw auto;
    padding-left: 8vw;
    font-size: 4.2vw;
  }
  #memberPoint a{
    padding-left: 8vw;
  }
  #memberLogout a{
    width: 26.6vw;
    font-size: 3.7vw;
  }
}
/* #memberNav
----------------------- */
#memberNav{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  margin: 0 -40px 55px;
  border-bottom: solid 1px #F2F6F6;
  overflow: hidden;
}
#memberNav ul{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    flex-wrap: wrap;
  padding: 0 40px;
}
#memberNav ul li{
  position: relative;
  width: 33.3%;
}
#memberNav ul li::before,
#memberNav ul li:last-child::after{
  content: "";
  display: block;
  background-color: #A2BEBD;
  position: absolute;
  left: 0;
  top: 13px;
  width: 1px;
  height: 60px;
}
#memberNav ul li:last-child::after{
  right: 0;
  left: auto;
}
#memberNav ul li a{
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  font-weight: bold;
  color: #707070;
  font-size: 14px;
  padding: 50px 0 10px;
}
#memberNav ul li a:hover{
  background-color: #F7FAFA;
  color: #014D4B;
  border-bottom: none;
  margin: 0 -1px;
  width: calc(100% + 2px);
}
#memberNav ul li a::before{
  content: "";
  display: block;
  position: absolute;
  padding-bottom: 100%;
  left: 50%;
  top: 28px;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#memberNav ul li:nth-of-type(1) a::before{
  background: url("../../images/front/common/ic_point_as.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  width: 26px;
}
#memberNav ul li:nth-of-type(1).active a::before,
#memberNav ul li:nth-of-type(1) a:hover::before{
  background: url("../../images/front/common/ic_point_gr.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}
#memberNav ul li:nth-of-type(2) a::before{
  background: url("../../images/front/common/ic_ticket_as.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  width: 30px;
}
#memberNav ul li:nth-of-type(2).active a::before,
#memberNav ul li:nth-of-type(2) a:hover::before{
  background: url("../../images/front/common/ic_ticket_gr.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}
#memberNav ul li:nth-of-type(3) a::before{
  background: url("../../images/front/common/ic_user_as.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  width: 24px;
}
#memberNav ul li:nth-of-type(3).active a::before,
#memberNav ul li:nth-of-type(3) a:hover::before{
  background: url("../../images/front/common/ic_user_gr.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}
@media screen and (max-width: 767px){
  #memberNav{
    margin: 0 -5.3vw 13.3vw;
  }
  #memberNav ul{
    padding: 0;
  }
  #memberNav ul li::before{
    top: 1.3vw;
    width: 1px;
    height: 16vw;
  }
  #memberNav ul li:last-child::after,
  #memberNav ul li:first-child::before{
    display: none;
  }
  #memberNav ul li a{
    font-size: 3.7vw;
    padding: 12vw 0 2vw;
  }
  #memberNav ul li a:hover::after{
    bottom: -2.6vw;
    height: 2.6vw;
  }
  #memberNav ul li a::before{
    top: 6.6vw;
  }
  #memberNav ul li:nth-of-type(1) a::before{
    width: 6.9vw;
  }
  #memberNav ul li:nth-of-type(2) a::before{
    width: 8vw;
  }
  #memberNav ul li:nth-of-type(3) a::before{
    width: 6.4vw;
  }
}
/* #memberTab
----------------------- */
#memberTab{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #E5EDEC;
  text-align: center;
  padding-bottom: 3px;
  border-bottom: solid 10px #F7FAFA;
  margin: 20px -40px 55px;
  overflow: hidden;
}
#memberTab ul{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    flex-wrap: wrap;
  background-color: #fff;
  padding: 0 40px;
}
#memberTab ul li{
  position: relative;
  width: 33.3%;
}
#memberTab ul li::before,
#memberTab ul li:last-child::after{
  content: "";
  display: block;
  background-color: #A2BEBD;
  position: absolute;
  left: 0;
  top: 23px;
  width: 1px;
  height: 60px;
}
#memberTab ul li:last-child::after{
  right: 0;
  left: auto;
}
#memberTab ul li a{
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  font-weight: bold;
  color: #707070;
  border-top: 3px solid #FFF;
  font-size: 14px;
  padding: 60px 0 10px;
}
#memberTab ul li a:hover,
#memberTab ul li.active a{
  background-color: #F7FAFA;
  border: 3px solid #E5EDEC;
  color: #014D4B;
  border-bottom: none;
  border-radius: 5px 5px 0px 0px;
  margin: 0 -1px;
  width: calc(100% + 2px);
}
#memberTab ul li a:hover::after,
#memberTab ul li.active a::after{
  content: "";
  display: block;
  background-color: #F7FAFA;
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 3px;
}
#memberTab ul li a::before{
  content: "";
  display: block;
  position: absolute;
  padding-bottom: 100%;
  left: 50%;
  top: 25px;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#memberTab ul li:nth-of-type(1) a::before{
  background: url("../../images/front/common/ic_point_as.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  width: 26px;
}
#memberTab ul li:nth-of-type(1).active a::before,
#memberTab ul li:nth-of-type(1) a:hover::before{
  background: url("../../images/front/common/ic_point_gr.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}
#memberTab ul li:nth-of-type(2) a::before{
  background: url("../../images/front/common/ic_ticket_as.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  width: 30px;
}
#memberTab ul li:nth-of-type(2).active a::before,
#memberTab ul li:nth-of-type(2) a:hover::before{
  background: url("../../images/front/common/ic_ticket_gr.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}
#memberTab ul li:nth-of-type(3) a::before{
  background: url("../../images/front/common/ic_user_as.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  width: 24px;
}
#memberTab ul li:nth-of-type(3).active a::before,
#memberTab ul li:nth-of-type(3) a:hover::before{
  background: url("../../images/front/common/ic_user_gr.png") center center no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}
@media screen and (max-width: 767px){
  #memberTab{
    padding-bottom: 0.5vw;
    border-bottom: solid 2.6vw #F7FAFA;
    margin: 0 -5.3vw 13.3vw;
  }
  #memberTab ul{
    padding: 0;
  }
  #memberTab ul li::before{
    top: 1.3vw;
    width: 1px;
    height: 24vw;
  }
  #memberTab ul li:last-child::after,
  #memberTab ul li:first-child::before{
    display: none;
  }
  #memberTab ul li a{
    border-top: 0.5vw solid #FFF;
    font-size: 3.7vw;
    padding: 18vw 0 2vw;
  }
  #memberTab ul li a:hover,
  #memberTab ul li.active a{
    border: 0.5vw solid #E5EDEC;
    border-radius: 0px;
  }
  #memberTab ul li a:hover::after,
  #memberTab ul li.active a::after{
    bottom: -2.6vw;
    height: 2.6vw;
  }
  #memberTab ul li a::before{
    top: 10.6vw;
  }
  #memberTab ul li:nth-of-type(1) a::before{
    width: 6.9vw;
  }
  #memberTab ul li:nth-of-type(2) a::before{
    width: 8vw;
  }
  #memberTab ul li:nth-of-type(3) a::before{
    width: 6.4vw;
  }
}
/* ======================================================================================
point
====================================================================================== */
/* #cardAbout
----------------------- */
#cardAbout{
  margin-top: 20px;
}
#cardNumber{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
  background-color: #F7FAFA;
  padding: 15px;
  font-size: 14px;
  border-bottom: solid 2px #A2BEBD;
}
#cardAbout table{
  width: 100%;
  border-bottom: solid 1px #D9DADD;
}
#cardAbout table td{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: middle;
  padding: 20px;
}
#cardAbout table td .cardAboutBox{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    align-items: center;
    flex-wrap: wrap;
}
#pointPossession{
  width: 298px;
  min-width: 298px;
}
#pointPossession p{
  text-align: right;
  line-height: 1em;
  font-size: 12px;
}
#pointPossession p span{
  display: block;
  font-weight: bold;
  line-height: 1em;
  font-size: 30px;
}
#pointLimit{
  border-left: solid 1px #D9DADD;
  color: #707070;
  background-color: #FCFCFC;
  font-size: 12px;
}
#pointLimitDate{
  font-weight: bold;
  display: inline-block;
}
#pointLimitDate .date{
  line-height: 1em;
  padding: 0.2em 1em;
  border: 1px solid #707070;
  border-radius: 3px;
  font-size: 11px;
}
#pointLimitPoint{
  text-align: right;
  line-height: 1em;
}
#pointLimitPoint span{
  display: block;
  line-height: 1.2em;
  font-size: 20px;
}
@media screen and (max-width: 767px){
  #cardAbout{
    margin: 5.3vw -5.3vw 0;
  }
  #cardNumber{
    padding: 4.2vw 5.3vw;
    font-size: 3.7vw;
  }
  #cardAbout table td{
    padding: 4.2vw 5.3vw;
  }
  #cardAbout table td .cardAboutBox{
     display: block;
  }
  #pointPossession{
    width: 60%;
    min-width: 60%;
  }
  #pointPossession h3{
    font-size: 4.2vw;
  }
  #pointPossession p{
    font-size: 3.2vw;
    margin-top: 1.2em;
  }
  #pointPossession p span{
    font-size: 8vw;
  }
  #pointLimit{
    font-size: 3.2vw;
  }
  #pointLimitDate .date{
    border-radius: 1vw;
    font-size: 2.9vw;
    padding: 0.2em 0.5em;
  }
  #pointLimitPoint span{
    font-size: 5.3vw;
    margin-top: 0.2em;
  }
}
/* #pointHistory
----------------------- */
#pointHistoryList{
  display: block;
  border-top: solid 1px #D9DADD;
  margin-top: 20px;
}
#pointHistoryList li{
  display: table;
  width: 100%;
  border-bottom: solid 1px #D9DADD;
}
#pointHistoryList li > *{
  display: table-cell;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#pointHistoryList .pointHistoryListLead{
  padding: 15px 12px;
  width: 285px;
  min-width: 285px;
}
#pointHistoryList .pointHistoryListLead .time{
  color: #707070;
  font-weight: bold;
  font-size: 12px;
}
#pointHistoryList .pointHistoryListLead .item{
  margin-top: 0.2em;
}
#pointHistoryList .pointHistoryListLead .pointHistoryLink{
  margin-top: 0.5em;
}
#pointHistoryList .pointHistoryListLead .pointHistoryLink a{
  color: #014D4B;
  display: inline-block;
  border: 1px solid #014D4B;
  position: relative;
  font-weight: bold;
  border-radius: 3px;
  line-height: 1.2em;
  padding: 0.2em 1.5em 0.2em 0.5em;
  font-size: 11px;
}
#pointHistoryList .pointHistoryListLead .pointHistoryLink a::after{
  content: "";
  display: block;
  position: absolute;
  width: 0.4em;
  height: 0.4em;
  border-top:solid 1px #014D4B;
  border-right:solid 1px #014D4B;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: calc(50% - 0.3em);
  right: 0.5em;
}
#pointHistoryList .pointHistoryListFluctuation,
#pointHistoryList .pointHistoryListBalance{
  text-align: right;
  position: relative;
  line-height: 1.4em;
  padding: 15px 10px 10px;
  font-size: 10px;
}
#pointHistoryList .pointHistoryListFluctuation{
  width: 125px;
  min-width: 125px;
}
#pointHistoryList .pointHistoryListFluctuation.minus{
  color: #0058CC;
  background-color: #F8FAFE;
}
#pointHistoryList .pointHistoryListFluctuation.plus{
  color: #CC0000;
  background-color: #FEFBFB;
}
#pointHistoryList .pointHistoryListFluctuation span{
  display: block;
  line-height: 1em;
  font-weight: bold;
  font-size: 20px;
}
#pointHistoryList .pointHistoryListBalance{
  background-color: #FCFCFC;
}
#pointHistoryList .pointHistoryListBalance::before{
  content: "残ポイント数";
  line-height: 1em;
  font-weight: bold;
  font-size: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
}
#pointHistoryList .pointHistoryListBalance span{
  display: block;
  line-height: 1em;
  font-weight: bold;
  font-size: 18px;
}
.pointHistoryCaptionLink{
  margin-top: 1em;
}
@media screen and (max-width: 767px){
  #pointHistory .bgcolorTtl{
    margin-right: -5.4vw;
    margin-left: -5.4vw;
  }
  #pointHistoryList{
    margin: 5.3vw -5.4vw 0;
  }
  #pointHistoryList .pointHistoryListLead{
    padding: 1.7vw 4vw 2.6vw;
    width: 53vw;
    min-width: 53vw;
    vertical-align: top;
  }
  #pointHistoryList .pointHistoryListLead .time{
    font-size: 3.2vw;
  }
  #pointHistoryList .pointHistoryListLead .pointHistoryLink{
    margin-top: 0.2em;
  }
  #pointHistoryList .pointHistoryListLead .pointHistoryLink a{
    border-radius: 1vw;
    padding: 0.2em 0.5em;
    font-size: 2.9vw;
  }
  #pointHistoryList .pointHistoryListLead .pointHistoryLink a::after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: static;
    margin-left: 0.3em;
  }
  #pointHistoryList .pointHistoryListFluctuation,
  #pointHistoryList .pointHistoryListBalance{
    display: block;
    padding: 2.6vw 5.3vw 2.3vw;
    font-size: 2.6vw;
  }
  #pointHistoryList .pointHistoryListFluctuation{
    width: 47vw;
    min-width: 47vw;
  }
  #pointHistoryList .pointHistoryListFluctuation span{
    font-size: 5.3vw;
  }
  #pointHistoryList .pointHistoryListBalance::before{
    font-size: 2.6vw;
    font-weight: normal;
    right: auto;
    left: 2.6vw;
    top: 2.6vw;
  }
  #pointHistoryList .pointHistoryListBalance span{
    font-size: 4.8vw;
  }
}

/* ======================================================================================
point/history
====================================================================================== */
#rideHistoryList{
  width: 100%;
  border-top:solid 1px #D9DADD;
  margin-top: 20px;
}
#rideHistoryList th,
#rideHistoryList td{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom:solid 1px #D9DADD;
  padding: 15px;
}
#rideHistoryList thead th{
  background-color: #F7FAFA;
  color: #707070;
}
#rideHistoryList tbody th:first-child{
  width: 48%;
  min-width: 48%;
}
#rideHistoryList tbody th:last-child{
  width: 20%;
  min-width: 20%;
}
#rideHistoryList thead th:last-child,
#rideHistoryList tbody td:last-child{
  text-align: right;
}
#rideHistoryList tbody tr:nth-of-type(2n){
  background-color: #FCFCFC;
}
@media screen and (max-width: 767px){
  #rideHistory .bgcolorTtl{
    margin-right: -5.3vw;
    margin-left: -5.3vw;
  }
  #rideHistoryList{
    margin: 5.3vw -5.3vw 0;
    width: 100vw;
    font-size: 4.2vw;
  }
  #rideHistoryList th,
  #rideHistoryList td{
    padding: 4vw 0;
  }
  #rideHistoryList tr th:first-child,
  #rideHistoryList tr td:first-child{
    padding-left: 4vw;
  }
  #rideHistoryList tr th:last-child,
  #rideHistoryList tr td:last-child{
    padding-right: 4vw;
  }
  #rideHistoryList tbody tr td:first-child{
    width: 54%;
    min-width: 54%;
  }
  #rideHistoryList tbody tr td:last-child{
    width: 23%;
    min-width: 23%;
  }
}

/* ======================================================================================
service
====================================================================================== */
.serviceSubmit{
  margin: 20px 0 10px;
}
.serviceSubmit > *,
.serviceSubmit ul li{
  display: inline-block;
  vertical-align: middle;
}
.serviceSubmit p{
  color: #014D4B;
  font-weight: bold;
  margin-right: 0.5em;
  font-size: 14px;
}
.serviceSubmit li input,
.serviceSubmit li a,
.serviceSubmit li p{
  display: block;
  color: #014D4B;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  background-color: #F7FAFA;
  padding: 0;
  border-radius: 0;
  border: 2px solid #A2BEBD;
  width: 120px;
  line-height: 40px;
  font-size: 14px;
}
.serviceSubmit li input:focus,
.serviceSubmit li a:focus,
.serviceSubmit li p:focus{
  outline-color: #000;
}
.serviceSubmit li input:disabled,
.serviceSubmit li p{
  cursor: auto;
  background-color: #A2BEBD;
  color: #fff;
}
.serviceSubmit .active li p,
.serviceSubmit li a{
  display: none;
}
.serviceSubmit .active li a{
  display: block;
}
.serviceCaption{
  margin-top: 1em;
  font-size: 14px;
  padding-left: 1em;
  text-indent: -1em;
}
.serviceCaption > *{
  text-indent: 0;
}
@media screen and (max-width: 767px){
  .serviceSubmit{
    margin: 8vw 0 5.3vw;
  }
  .serviceSubmit p{
    display: block;
    font-size: 3.7vw;
  }
  .serviceSubmit li input,
  .serviceSubmit li a,
  .serviceSubmit li p{
    width: 32vw;
    line-height: 10.6vw;
    font-size: 3.7vw;
  }
  .serviceCaption{
    font-size: 3.7vw;
  }
}
/* #serviceListArea
----------------------- */
#serviceListHeadline{
  background-color: #F7FAFA;
  border-top:solid 1px #D9DADD;
  border-bottom:solid 1px #D9DADD;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
  font-weight: bold;
  color: #707070;
  padding: 20px 20px 20px 60px;
  margin-top: 15px;
}
#serviceListWrap li{
  border-bottom:solid 1px #D9DADD;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding: 20px;
}
#serviceListWrap li::after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#serviceListWrap li.active{
  background-color: #F1F1F1;
}
#serviceListWrap li .checkboxInput{
  width: 22px;
}
#serviceListWrap li .serviceListDetail{
  width: 440px;
}
#serviceListWrap li .serviceListDetailUnit{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
  font-weight: bold;
}
#serviceListWrap li .serviceListDetailUnit .name{
  color: #014D4B;
}
#serviceListWrap li .term{
  display: block;
  width: 100%;
  margin-top: 10px;
}
#serviceListWrap li .term dt,
#serviceListWrap li .term dd{
  display: inline-block;
  vertical-align: middle;
}
#serviceListWrap li .term dt{
  color: #014D4B;
  font-weight: bold;
  border: 1px solid #014D4B;
  line-height: 1em;
  padding: 0.2em 0.5em;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 0.3em;
}
#serviceListWrap li .term dd{
  width: 10.5em;
}
#serviceListWrap li .caption{
  border: 1px solid #E5EDEC;
  padding: 0.3em 1em;
  font-size: 14px;
  margin-top: 10px;
}
.serviceAttention{
  text-align: center;
  color: #CC0000;
  margin-top: 30px;
}
@media screen and (max-width: 767px){
  #serviceListArea{
    margin: 0 -5.3vw;
  }
  #serviceListHeadline{
    padding: 5.3vw 5.3vw 5.3vw 17.3vw;
    margin-top: 15px;
  }
  #serviceListWrap li{
    padding: 5.3vw;
  }
  #serviceListWrap li .checkboxInput{
    width: 5.8vw;
  }
  #serviceListWrap li .serviceListDetail{
    width: 75vw;
  }
  #serviceListWrap li .serviceListDetailUnit{
    font-size: 4.2vw;
  }
  #serviceListWrap li .term{
    margin-top: 2vw;
  }
  #serviceListWrap li .term dt{
    border-radius: 1vw;
    font-size: 3.2vw;
  }
  #serviceListWrap li .term dd{
    width: 15em;
  }
  #serviceListWrap li .caption{
    font-size: 3.7vw;
    margin-top: 2vw;
  }
  .serviceAttention{
    text-align: center;
    color: #CC0000;
    margin-top: 30px;
  }
}
/* #serviceDeletePopup
----------------------- */
#serviceDeletePopup{
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 30;
  background-color: #fff;
  text-align: center;
  width: 460px;
  padding: 60px 0;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 3px;
}
#serviceDeleteBt{
  font-size: 0;
  line-height: 0;
  margin-top: 30px;
}
#serviceDeleteBt li{
  display: inline-block;
  vertical-align: top;
  margin: 0 5px;
}
#serviceDeleteBt li > *{
  color: #fff;
  font-weight: bold;
  display: block;
  cursor: pointer;
  width: 120px;
  line-height: 40px;
  -webkit-appearance: none;
  border-radius: 0;
}
#serviceDeleteBt li a{
  background-color: #707070;
  font-size: 16px;
}
#serviceDeleteBt li input{
  background-color: #014D4B;
  border: none;
  padding: 0;
  font-size: 14px;
}
@media screen and (max-width: 767px){
  #serviceDeletePopup{
    width: 90vw;
    padding: 12vw 0;
    border-radius: 1vw;
  }
  #serviceDeleteBt{
    margin-top: 8vw;
  }
  #serviceDeleteBt li{
    margin: 0 1.3vw;
  }
  #serviceDeleteBt li > *{
    width: 32vw;
    line-height: 10.6vw;
  }
  #serviceDeleteBt li a{
    font-size: 4.2vw;
  }
  #serviceDeleteBt li input{
    font-size: 3.7vw;
  }
}
/* ======================================================================================
service/edit
====================================================================================== */
/* .ticketChangeTable
----------------------- */
.ticketChangeTable{
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}
.ticketChangeTable.border{
  border: 1px solid #DDDFE1;
  border-radius: 3px;
}
.ticketChangeTable th,
.ticketChangeTable td{
  display: block;
  padding: 20px;
}
.ticketChangeTable th{
  background-color: #F7FAFA;
  color: #014D4B;
}
.ticketChangeTableAlert{
  color: #CC0000;
}
.ticketChangeTableLead{
  font-weight: bold;
  margin-top: 1em;
}
.ticketChangeTableLead:first-child{
  margin-top: 0;
}
.ticketChangeConfirm::after{
content:".";
clear:both;
display:block;
line-height:0;
height:0;
visibility:hidden;
}
.ticketChangeConfirm dt{
  font-weight: bold;
  float: left;
}
.ticketChangeConfirm dd{
  padding-left: 5em;
  margin-bottom: 0.5em;
}
.ticketChangeConfirm dd:last-child{margin-bottom: 0;}
@media screen and (max-width: 767px){
  .ticketChangeTable{
    margin-top: 4vw;
  }
  .ticketChangeTable.border{
    border-radius: 1vw;
  }
  .ticketChangeTable th,
  .ticketChangeTable td{
    padding: 4vw;
  }
  .ticketChangeTable td > .selectWrap select{
    width: 100%;
  }
}
/* ======================================================================================
withdrawal
====================================================================================== */
/* #checkReminderPopup
----------------------- */
#checkReminderPopup{
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 30;
  background-color: #fff;
  text-align: center;
  width: 460px;
  padding: 60px 0;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 3px;
}
#checkReminderBt{
  font-size: 0;
  line-height: 0;
  margin-top: 30px;
}
#checkReminderBt li{
  display: inline-block;
  vertical-align: top;
  margin: 0 5px;
}
#checkReminderBt li > *{
  color: #fff;
  font-weight: bold;
  display: block;
  cursor: pointer;
  width: 120px;
  line-height: 40px;
  -webkit-appearance: none;
  border-radius: 0;
}
#checkReminderBt li a{
  background-color: #707070;
  font-size: 16px;
  border-radius: 20px;
}
#checkReminderBt li input{
  background-color: #014D4B;
  border-radius: 20px;
  border: none;
  padding: 0;
  font-size: 14px;
}
@media screen and (max-width: 767px){
  #checkReminderPopup{
    width: 90vw;
    padding: 12vw 0;
    border-radius: 1vw;
  }
  #checkReminderBt{
    margin-top: 8vw;
  }
  #checkReminderBt li{
    margin: 0 1.3vw;
  }
  #checkReminderBt li > *{
    width: 32vw;
    line-height: 10.6vw;
  }
  #checkReminderBt li a{
    font-size: 4.2vw;
    border-radius: 5.3vw;
  }
  #checkReminderBt li input{
    font-size: 3.7vw;
    border-radius: 5.3vw;
  }
}