@charset "UTF-8";
body {
  font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  font-size: calc(11px + 0.25vw);
  line-height: 1.7em;
  padding: 0px;
  -webkit-text-size-adjust: 100%;
  max-width: 100%; /* 要素の幅を指定する（固定幅ならwidth:600px;） */
  margin: 0; /* ブロック要素の中央揃え */
  text-align: center;
  background: #FAFAFA;
  color: #707070;
}

.header,
.sub_header2,
.barcord_parent {
  background: #ffffff;
}

/* header */
.header {
  margin: 0;
  padding: 0;
  border-top: solid 10px #49ac2f;
  border-bottom: solid 1px #dadada;
}

.header .right {
  float: right;
  display: inline;
}
.menu {
    display:block;
    position:absolute;
    top:22px;
    right:10px;
    /*width:30px;*/
    height:22px;
    /*background:#000;*/
    /*border-top:10px solid #fff;*/
/*    border-bottom:10px solid #fff;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
*/}
.menu a {
  text-decoration: none;
  color: #8E0807;
}
img.logo {
  position: relative;
  width: 30%;
  text-align: center;
  margin: 1em auto 1em auto;
}
/* sub_header */
.sub_header {
  margin: 0;
  padding: 0;
  border-bottom: solid 2px #EEEEEE;
  line-height: 3em;
}

.sub_header2 {
  position: absolute;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: solid 2px #EEEEEE;
  background: #ffffff;
  font-size: calc(8px + 0.25vw);
}
.center {
  position: absolute;
  display: block;
  width: 100%;
  margin: -52% auto auto;
  padding: 0;
  /*top: 0;*/
/*  font-size: calc(4px + 1vw); */
  font-size: 3.375vw;
  color: #000;
}

.center .title {
  height: 1em;
  line-height: 1em;
}
.center .mile {
  /*font-size: calc(32px + 0.75vw);*/
  font-size: 8.375vw;
  height: 1em;
  line-height: 1em;
  margin: 0.2em auto 0 auto;
}
.center .mile_max {
  height: 1em;
  line-height: 1em;
  margin: 0.3em auto 0 auto;
}
.center .mile_history {
display: inline-block;
margin: .8em auto 0;
}
.center .mile_history a {
  border: 1px solid #ccc;
  padding: 5px 7px;
  line-height: 1;
  display: block;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
  font-size: 3vw;
}
.center .stage_title {
  height: 1em;
  line-height: 1em;
  margin: 0.8em auto 0 auto;
  color: #878787;
}
.center .stage_name {
  height: 1em;
  line-height: 1em;
  margin: 1em auto 0 auto;
  font-size: 2.8vw;
}
.b {
  font-weight: bold;
}

/* main */
.main {

}

.gr_parent {
  background: #FAFAFA;
/*   position: relative;*/
border-bottom: solid 2px #dadada;
  position: relative;
}

.svg-container {
/*  position: absolute; */
/* 120% case 
    width: 120% !important;
    margin: -10% auto 0 auto !important;
    overflow: visible !important;
    position: relative !important;
    text-align: center !important;
    left: -12% !important;
    */
    /* 100% case  */
    width: 100% !important;
    margin: 0 auto 0 auto !important;
    overflow: visible !important;
    position: relative !important;
    text-align: center !important;
    

}

/*.gr_bg {
  background: #FAFA00;
  position: absolute;
}
*/


.shop_point {
  font-size: calc(9px + 0.25vw);
  margin: auto auto 1em auto;
}
.shop_point .b {
  font-size: calc(16px + 0.25vw);
  margin-right: 5px;
}
.shop_point a {
  text-decoration: none;
  color: #333;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop_point_history {
  border: 1px solid #ccc;
  padding: 5px 7px;
  line-height: 1;
  display: inline-block;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
  font-size: 2.8vw;
  margin-left: 5px;
  position: relative;
}
/*
.shop_point_history:after {
  display: block;
      position: absolute;
      top: 50%;
      right: 0;
      width: 8px;
      height: 8px;
      margin: -4px 7px 0 0;
      border-top: solid 1px #999;
      border-right: solid 1px #999;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      content: "";
  }
*/
#alert_expired_point_exists {
  margin-top: 5px;
}

.barcord_parent {
  padding-bottom: 1em;
}

.barcode img {
  width: 65%;
  margin: 2.5vw 3vw 0 3vw;
}
.barcode_num {
 /*margin: 1vw auto auto auto;*/
 font-size: calc(16px + 0.25vw);
}

#container {
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
 
#contents {
    padding-bottom: 100px;
}
 
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
}

.is-hide{
 display:none; 
}
.loading{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index: 1000;
}
.loading::before{
  content:"";
  display:block;
  position:fixed;
  left:50%;
  top:50%;
  width:50px;
  height:50px;
  border-radius:5px;
  margin-top:-15px;
  margin-left:-15px;
}
.loading::after{
  content:"";
  display:block;
  position:fixed;
  left:50%;
  top:50%;
  width:32px;
  height:32px;
  border-radius:20px;
  margin-top:-10px;
  margin-left:-10px;
  border:4px solid #60ABB9;
  border-right:4px solid white;
  animation: rotate 1s infinite linear;
}
@keyframes rotate {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}

body .rule {
  overflow: hidden;
}
.rule_header {
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0;
  border-bottom: solid 1px #dadada;
  line-height: 14vw;
  height: 14vw;
  width: 100%;
  font-size: calc(16px + 0.25vw);
  color: #000;
  background-color: #fff;
  display: block;
  font-weight: bold;
  vertical-align: middle;
}
.rule_header2 {
  position: fixed;
  top: 14vw;
  margin: 0;
  padding: 0;
  border-bottom: solid 1px #dadada;
  line-height: 10vw;
  width: 100%;
  height: 10vw;
  font-size: calc(12px + 0.25vw);
  color: #707070;
  background-color: #EDEDED;
  display: block;
  text-align: left;
  padding: 0 0 0 2em;
  font-weight: bold;
}


#container {
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
/*    margin: 4em 0 4em 0;*/
}
 
.rule_contents {
  padding: 24vw 5vw 10vw 5vw;
  font-size: calc(16px + 0.25vw);
  text-align: left;
  line-height: 1.6em;
}
 
.rule_footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 4em;
  background-color: #EDEDED;
  font-size: calc(16px + 0.25vw);
  text-align: center;
}

.rule_footer a {
  background-color: #6C120E;
  text-decoration: none;
  color: #fff;
  height: 14vw;
  line-height: 14vw;
  width: 50vw;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}


.mobileapp_guide {
  background: #FAFAFA;
  position: relative;
  border-top: solid 2px #dadada;
  padding: 0 10px;
}

table.mobileapp_guide_tbl {
  border-style: none;
  border-spacing: 0;
  margin: 1em 0;
}

.mobileapp_guide_l {
  width: 25%;
}

.mujipassport_logo img.muji_app_img {
  height: 64px;
  height: 16vw;
  margin: 0 10px 0 0;
}

.mobileapp_guide_r {
}
.mobileapp_guide_r .mobileapp_guide_r_header {
  clear: both;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobileapp_guide_r div.mobileapp_guide_r_header_title {
  float: left;
  font-weight: bold;
  text-align: left;
  color: black;
  font-size: calc(12px + 0.25vw);
}
.mobileapp_guide_r div.mobileapp_guide_r_header_get {
  float: right;
  text-align: center;
  background-color: black;
  color: white;
  width: 80px;
  width: calc(22px + 10vw);
  height: 26px;
  border-radius: 13px;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobileapp_guide_r div.mobileapp_guide_r_header_get div {
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
}

.mobileapp_guide_r .mobileapp_guide_r_expl {
  clear: both;
  text-align: left;
  color: black;
}

.link_to_miles img {
  height: calc(12px + 0.25vw);
  margin-left: 0.1em;
  margin-bottom: -0.1em;
}

.link_to_shopping_point {
  padding-left: 1em;
}
.link_to_shopping_point img {
  height: calc(11px + 0.25vw);
  margin-bottom: -0.05em;
}