@charset "UTF-8";
/* Base Style
* --------------------------------------- */
body {
  color: #323232;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  font-size: 1rem;
  font-feature-settings: "palt";
  margin: 0;
  padding: 0; }

a:link {
  color: #323232; }
a:visited {
  color: #323232; }
a:hover {
  color: #323232;
  opacity: 0.8; }
a:active {
  color: #323232;
  opacity: 0.8; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type="number"] {
  -moz-appearance: textfield; }

.hover:hover {
  opacity: 0.8; }

img {
 /* max-width: 100%; */}

br.SP {
  display: none; }
  @media screen and (max-width: 768px) {
    br.SP {
      display: block; } }

br.PC {
  display: block; }
  @media screen and (max-width: 768px) {
    br.PC {
      display: none; } }

#container {
  background-color: #f2f2f2; display: block;}

#wallet {
  background-color: #fff;
  padding: 10px 0 20px; }
  #wallet h1 {
    border-bottom-color: #de4525;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: normal;
    /*line-height: 3rem;*/
    line-height: 2rem;
    margin: 0 auto 20px;
    width: 90%; }
    #wallet h1 img {
      margin-right: 0.5em;
      vertical-align: -12%; }
    #wallet h1 span {
      vertical-align: middle; }
    #wallet h1 strong {
      font-size: 1.625rem; }
    #wallet h1 i {
      font-style: normal; }
  #wallet nav {
    margin: 0 auto;
    width: 90%; }
  #wallet ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    margin: 0;
    padding: 0; }
    #wallet ul li {
      border-color: #dfdfdf;
      border-style: solid;
      border-width: 1px;
      box-sizing: border-box;
      padding: 1px;
      text-align: center;
      width: /*180px*/ 31.5%;}
    #wallet ul i {
      display: inline-flex;height: auto;
    min-height: 48px;}
    #wallet ul img {
      display: inline-block;}
    #wallet ul span {
      display: block;
      font-size: .875rem; }
    #wallet ul a {
      display: block;
      padding: 20px 0 15px;
      position: relative;
      text-decoration: none; }
      #wallet ul a .ic {
        position: absolute;
        right: -7.5%;
        top: -7.5%; z-index: 5;}
      #wallet ul a.disabled {
        color: #c1c1c1; }
      #wallet ul a.current {
        background-color: #79b5cd;
        color: #fff; }

#pointcard {
  padding:0 0 35px 0; }
  #pointcard.register {
    background-color: #fff;
    height: 100%; }
    #pointcard.register .card_list {
      border-top-color: #dfdfdf;
      border-top-style: solid;
      border-top-width: 1px;
      margin-bottom: 30px;
      width: 100%; }
      #pointcard.register .card_list li {
        border-bottom-color: #dfdfdf;
        border-bottom-style: solid;
        border-bottom-width: 1px; margin-bottom: 0;}
      #pointcard.register .card_list li.nothing {padding: 1em 0;}
      #pointcard.register .card_list i {
        width: 200px; }
      #pointcard.register .card_list span {
        display: flex;
        align-items: center;
        justify-content:flex-start;
        margin: 0 auto;
        padding: 13px;
        width: 70%; }
      #pointcard.register .card_list .button {
        background-image: none;
        display: inline-block;
        padding-top: 0;
        padding-bottom: 0;  margin-left: auto; margin-right: 0;line-height: 2.5;
		border-color: transparent; height: auto; font-size: .8125rem;}
		#pointcard.register .card_list .button.disabled {border-color: #ededed;}
  #pointcard h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9375rem;
    margin: 0 auto 0.5em;
    width: 85%; }
    #pointcard h2 a {
      font-weight: normal;
      text-decoration: none; }
    #pointcard h2 img {
      margin-left: 0.5em;
      vertical-align: middle; }
  #pointcard .attention {
    background-color: #fff;
    border-color: #de4525;
    border-style: solid;
    border-width: 1px;
    font-size: 0.8125rem;
    line-height: 1.7;
    margin: 0.75em auto;
    padding: 0.7em 0;
    text-align: center;
    width: 85%; color: #333; }

#card_wrap {
  animation-name: slideup;
  animation-duration: 1000ms;
  padding-bottom: 225px;
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative; }
  #card_wrap.ontap .front {
    transform: rotateY(180deg); }
  #card_wrap.ontap .back {
    transform: rotateY(0); }
  #card_wrap .front {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    margin: 0 0 0 -150px;
    position: absolute;
    top: 15px;
    left: 50%;
    transition: 0.8s; }
    #card_wrap .front img {
      display: block;
      position: relative; }
    #card_wrap .front figcaption {
      position: absolute;
      bottom: 2.2rem;
      left: 1rem; }
      #card_wrap .front figcaption span {
        font-size: 0.5rem; }
      #card_wrap .front figcaption strong {
        font-size: 0.8125rem;
        letter-spacing: 0.1em; }
  #card_wrap .back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    margin: 0 0 5vw -150px;
    position: absolute;
    top: 15px;
    left: 50%;
    text-align: center;
    transform: rotateY(180deg);
    transition: 0.8s; }
    #card_wrap .back img {
      display: block;
      position: relative; }
    #card_wrap .back .barcode {
      margin-left: -120px;
      position: absolute;
      left: 50%;
      top: 60px; }
    #card_wrap .back figcaption {
      display: flex;
      align-items: center;
      flex-direction: column;
      line-height: 1.1;
      position: absolute;
      bottom: 0.6rem;
      left: 0;
      text-align: center;
      width: 100%; }
      #card_wrap .back figcaption span {
        font-size: 0.5rem; }
      #card_wrap .back figcaption strong {
        display: inline-block;
        font-size: 1.1875rem;
        font-weight: normal;
        margin-bottom: 0.65rem;
        text-align: left;
        text-decoration: none; }
      #card_wrap .back figcaption .cd_time {
        display: block;
        line-height: 2; }
      #card_wrap .back figcaption .button {
        background-color: #96dc5f;
        display: none;
        font-size: 0.5rem;
        line-height: 2;
        padding: 0 1em; }
      #card_wrap .back figcaption.end .cd_time {
        display: none; }
      #card_wrap .back figcaption.end .button {
        display: block; }

@keyframes slideup {
  from {
    opacity: 0;
    /* 透明 */
    transform: translateY(100px);
    /* X軸方向に50px */ }
  to {
    opacity: 1;
    /* 透明 */
    transform: translateY(0);
    /* X軸方向に50px */ } }
.point_list {
  animation-name: fadein;
  animation-duration: 2000ms;
  display: flex;
  list-style-type: none;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 60%;
  z-index: 10; }
  .point_list li {
    background-color: #fff;
    padding: 2% 0;
    text-align: center;
    width: 48%; }
  .point_list span {
    display: block;
    font-size: 0.6875rem; }
  .point_list em {
    display: block;
    font-size: 0.875rem;
    font-style: normal; }
  .point_list strong {
    font-size: 1.25rem;
    margin-right: 0.2em; }




@keyframes fadein {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.card_list {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 85%; }
  .card_list li {
    background-color: #fff;
    font-size: 0.875rem;
    margin-bottom: 0.4em; }
    /* 2021.03.12 */
    .card_list li i {background-size: 50px auto;}
    .card_list li.sofmap i {
      background-image: url(../../images/wallet/card_sofmap.png); }
    .card_list li.biccamera i {
      background-image: url(../../images/wallet/card_biccamera.png); }
    .card_list li.kojima i {
      background-image: url(../../images/wallet/card_kojima.png); }
  .card_list a {
    background-image: url(../../images/wallet/arrow_list.svg);
    background-position: 95% center;
    background-repeat: no-repeat;
    display: block;
    padding: 13px;
    text-decoration: none; }
  .card_list i {
    background-position: left center;
    background-repeat: no-repeat;
    display: inline-block;
    line-height: 32px;
    padding-left: 50px;
    text-align: center;
    vertical-align: middle;
    width: 200px; }

.registered {
  border-top-color: #dfdfdf;
  border-top-style: solid;
  border-top-width: 1px;
  list-style-type: none;
  margin: 0 0 15vw;
  padding: 0; }
  .registered .nothing {
    font-size: 0.875rem;
    line-height: 1.3;
    text-align: center; }

.button {
  background-color: #ccc;
  border-radius: 5px;
  display: inline-block;
  font-size: 0.6875rem;
  line-height: 2.7;
  text-align: center; }
  .button.register {
    background-color: #96dc5f; }
    .button.register::after {
      background-image: url(../../images/wallet/ic_plus.svg);
      background-position: center center;
      background-repeat: no-repeat;
      content: "";
      display: inline-block;
      height: 11px;
      margin-left: 0.5em;
      vertical-align: middle;
      width: 11px; }
  .button.disabled {
    background-color: transparent;
    border-color: #ededed;
    border-style: solid;
    border-width: 1px;
    opacity: 0.8; }
    .button.disabled::after {
      background-image: url(../../images/wallet/ic_plus.svg);
      background-position: center center;
      background-repeat: no-repeat;
      content: "";
      display: inline-block;
      height: 11px;
      margin-left: 0.5em;
      vertical-align: middle;
      width: 11px; }
  .button.unregister {
    background-color: #e8614f; }
    .button.unregister::after {
      background-image: url(../../images/wallet/ic_minus.svg);
      background-position: center center;
      background-repeat: no-repeat;
      content: "";
      display: inline-block;
      height: 11px;
      margin-left: 0.5em;
      vertical-align: middle;
      width: 11px; }
  .button.sizeL {
    background-image: url(../../images/wallet/arrow_next.svg);
    background-position: 95% center;
    background-repeat: no-repeat;
    font-size: 1rem;
	height: 3.5em;
    width: 60%; margin: 0 auto; display: block;}
    .button.sizeL::after {
      content: none; }
  .button.confirm {
    background-image: url(../../images/wallet/ic_check.svg); }

input[type="submit"].button {
  border: none; }

.link_list {
  margin: 0;
  padding: 0;
  text-align: center; }
  .link_list li {
    font-size: 0.625rem; }
  .link_list a {
    background-image: url(../../images/wallet/arrow_blk.svg);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 10px;
    text-decoration: none; }

.complete_box {
  margin: 0 auto;
  width: 90%; }
  .complete_box h3 {
    font-size: 0.9375rem;
    margin: 20px 0 40px;
    text-align: center; }
    .complete_box h3 strong {
      display: block; }

/*
 * form
 */
.formset {
  display: block;
  margin: 0 auto;
  width: 85%; }
  .formset .box {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 0.875em; border-radius: 2px; box-shadow: none; }
  .formset .fieldset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2em 0; }
    .formset .fieldset span {
      font-size: 0.875rem; 
    display: flex; align-items: flex-end;}
      .formset .fieldset span input {
        margin-right: 0.2em; }
      .formset .fieldset span em {
        font-style: normal;
        margin-right: 0.4rem; }
      .formset .fieldset span strong {
        font-size: 1.125rem;
        margin-right: 0.4rem; }
    .formset .fieldset.campaign {
      color: #777; }
    .formset .fieldset.result {
      border-bottom-color: #37a4c4;
      border-bottom-style: solid;
      border-bottom-width: 1px; }
      .formset .fieldset.result strong {
        font-size: 1.25rem; }
      .formset .fieldset.result.transfer {
        border-bottom-color: #de4525; }
  .formset label {
    font-size: 0.875rem; }
    .formset label img {
      vertical-align: baseline; }
  .formset input[type="number"] {
    border-color: #dbdbdb;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    font-size: 1.125rem;
    padding: 0.2em;
    text-align: right;
    width: 7.5em; }
    .formset input[type="number"]:focus {
      outline: none; }
    .formset input[type="number"].confirm {
      border-color: transparent; }

fieldset {
  border: none;
  padding: 0;
  margin: 0; }
 
 

@media screen and (max-width: 660px) {
.box {padding:0; border: 0; border-radius: 0; box-shadow: none;}
#wallet h1 {width: 100%;font-size: 3.47vw;}
#wallet h1 strong {font-size: 6.93vw;}
#wallet {padding: 0 0 5vw;}
#wallet nav {width: 100%;}
#wallet ul li {width: 28vw;}
#wallet ul a {padding: 4vw 0;}
#wallet ul span {font-size: 2.66vw;letter-spacing: normal;}
#pointcard h2{width: 90%;font-size: 0.8125rem;}
#pointcard.register h2{ width: 100%;}
#pointcard h2 a {font-size: 2.9vw; white-space: nowrap;} /*20201128*/
#pointcard .attention{width: 90%;font-size: 0.6875rem;}
.card_list {width: 90%;}
.card_list a {padding: 13px 8px;}
.card_list i {    width: 39vw;margin-right: 3vw;}
.point_list {width: 90%;}
.formset {width: 90%;}
.formset label {font-size: 0.75rem;}
.formset .fieldset span strong {font-size: 1rem;}
.formset input[type="number"] {font-size: 1rem;}
.button.sizeL {width: 100%;font-size: 0.875rem;}

#pointcard.register .card_list span {width: 100%;padding: 13px 0 13px 0;font-size: 0.875rem;}
#pointcard.register .card_list i {width:40vw;}
#web .link_list li {font-size: .75rem;}
.card_list li i img { height: 2.2vw;}
#wallet ul img {height: 7.5vw;}

  }
 @media screen and (max-width: 480px) {
 #web .card_list li { font-size: 3.2vw;}
.card_list li i img { height: 3.4vw;}
.card_list li.kojima i img {height: 3.65vw;}

#wallet ul i img {height: 100%;min-height: 11.5vw;}
 }