@charset "UTF-8";
html, body {
  height: 100%;
  font-family: "Noto Sans Japanese", Roboto, "Droid Sans", sans-serif;
  font-size: 67.5%;
  font-smoothing: antialiased;
}

* {
  padding: 0;
  border: none;
  margin: 0;
  background: none;
  outline: none;
}

ul, ol {
  list-style: none;
}

img {
  display: block;
  width: 100%;
  margin: auto;
}

a {
  text-decoration: none;
}

html {
  overflow: visible;
}

body {
  overflow: visible;
  font-family: "Noto Sans Japanese", Roboto, "Droid Sans", sans-serif;
  line-height: normal;
}

p {
  margin: 0;
}

input, button, select, textarea {
  font-family: "Noto Sans Japanese", Roboto, "Droid Sans", sans-serif;
}

label, input, button, select, textarea {
  line-height: normal;
}

input[disabled], select[disabled], textarea[disabled], input[readonly]:not(.cloned-text-input), textarea[readonly]:not(.cloned-text-input), select[readonly] {
  background-color: transparent;
}




#serviceHeader {
  position: relative;
  z-index: 201;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
  padding: 0 10px;
  color: #fff;
  background-color: #717071;
}
#serviceHeader #serviceLogo {
  -webkit-flex: 0 0 136px;
      -ms-flex: 0 0 136px;
          flex: 0 0 136px;
}
#serviceHeader .nav {
  -webkit-flex: 0 1 140px;
      -ms-flex: 0 1 140px;
          flex: 0 1 140px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
#serviceHeader .nav li {
  -webkit-flex: 0 0 35px;
      -ms-flex: 0 0 35px;
          flex: 0 0 35px;
  position: relative;
  margin-left: 5px;
}
#serviceHeader .nav li a, #serviceHeader .nav li button {
  display: block;
  width: 100%;
  color: inherit;
}
#serviceHeader .nav li a span, #serviceHeader .nav li button span {
  display: block;
  margin: auto;
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}
#serviceHeader .nav li a:before, #serviceHeader .nav li button:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: auto;
  background-image: url("../../img/icon/menu.png");
  background-size: auto 500%;
}
#serviceHeader .nav li a.nav-news:before, #serviceHeader .nav li button.nav-news:before {
  background-position: 36.84211% 25%;
}
#serviceHeader .nav li a.nav-clip:before, #serviceHeader .nav li button.nav-clip:before {
  background-position: 42.10526% 25%;
}
#serviceHeader .nav li a.nav-search:before, #serviceHeader .nav li button.nav-search:before {
  background-position: 47.36842% 25%;
}
#serviceHeader .nav li a.nav-menu:before, #serviceHeader .nav li button.nav-menu:before {
  background-position: 94.73684% 25%;
}
#serviceHeader .nav li a.nav-point:before, #serviceHeader .nav li button.nav-point:before {
  background-position: 89.47368% 25%;
}
#serviceHeader .nav li .badge {
  right: -2px;
  top: -4px;
  width: 16px;
  height: 16px;
  line-height: 16px;
}
#serviceHeader .regist {
  -webkit-flex: 1 0 125px;
      -ms-flex: 1 0 125px;
          flex: 1 0 125px;
  max-width: 180px;
  margin: auto auto auto 5px;
}
#serviceHeader .regist .button {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 30px;
  padding: 0;
}
#serviceHeader.he_Login, #serviceHeader.he_Logout, #serviceHeader.he_Under, #serviceHeader.he_Logout_under {
  height: 60px;
}
#serviceHeader.he_Logout_under .nav {
  -webkit-flex-basis: 35px;
      -ms-flex-preferred-size: 35px;
          flex-basis: 35px;
}
#serviceHeader.he_app_Login, #serviceHeader.he_app_Logout {
  height: 44px;
}
#serviceHeader.he_app_Login .nav li a, #serviceHeader.he_app_Logout .nav li a, #serviceHeader.he_app_Login .nav li button, #serviceHeader.he_app_Logout .nav li button {
  height: 24px;
  overflow: hidden;
}
#serviceHeader.he_app_Login .nav-back, #serviceHeader.he_app_Logout .nav-back {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: inherit;
  font-size: 1.6rem;
  line-height: 1.2;
}
#serviceHeader.he_app_Login .nav-back:before, #serviceHeader.he_app_Logout .nav-back:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  margin-left: -5px;
  background-image: url("../../img/icon/arrow.png");
  background-size: auto 200%;
  background-position: 60% 100%;
}

#serviceHeader.he_Under + #topNav .pt_My {
  font-size: 1.3rem;
}
.pt_My .image {
  width: 50px;
  margin-right: 10px;
}
#serviceHeader.he_Under + #topNav .pt_My .image {
  width: 30px;
}
#serviceHeader.he_Under + #topNav .pt_My .point {
  font-size: 1rem;
}
.pt_My .point .num {
  font-size: 1.8rem;
}
#serviceHeader.he_Under + #topNav .pt_My .point .num {
  font-size: 1.3rem;
}

.pt_Quit {
  margin: 10px;
}

.my-waon-point {
  margin: 10px;
  line-height: 1.6;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.my-waon-point .icon:before, .my-waon-point .iconR:before, .my-waon-point .iconL:before, .my-waon-point .iconC:before {
  margin-right: 5px;
  background-image: url("../common/base/icon_linkarrow.png");
  vertical-align: middle;
}
.my-waon-point .point {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: right;
  font-size: 1.2rem;
}
.my-waon-point .point .num {
  font-size: 1.4rem;
  font-weight: bold;
}

footer {
  width: 100%;
  color: #fff;
  background-color: #717071;
}
footer.app {
  padding-bottom: 50px;
}
footer.fo_app_Login_fixmenu, footer.fo_app_Logout_fixmenu {
  position: fixed;
  bottom: 0;
}
footer.fo_app_Login_fixmenu a span, footer.fo_app_Logout_fixmenu a span,
footer.fo_app_Login_fixmenu button span,
footer.fo_app_Logout_fixmenu button span {
  white-space: nowrap;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}
footer ul.list_footer {
  padding: 25px 10px;
  margin: 0 10px;
}
footer ul.list_footer + ul {
  border-top: #a1a1a1 solid 1px;
}
footer ul.list_footer li {
  font-size: 1.4rem;
}
footer ul.list_footer li + li {
  margin-top: 25px;
}
footer ul.list_footer li a {
  color: inherit;
}
footer ul.nav {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
}
footer ul.nav li {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
footer ul.nav li > a, footer ul.nav li > button {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 50px;
  color: inherit;
  font-size: 0.8rem;
  text-align: center;
}
footer ul.nav li > a:before, footer ul.nav li > button:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
  background-image: url("../../img/icon/menu.png");
  background-size: auto 500%;
}
footer ul.nav li > a.nav-home:before, footer ul.nav li > button.nav-home:before {
  background-position: 0% 25%;
}
footer ul.nav li > a.nav-clip:before, footer ul.nav li > button.nav-clip:before {
  background-position: 42.10526% 25%;
}
footer ul.nav li > a.nav-search:before, footer ul.nav li > button.nav-search:before {
  background-position: 47.36842% 25%;
}
footer ul.nav li > a.current, footer ul.nav li > button.current {
  background-color: #515051;
}
footer ul.nav li .regist {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
}
footer ul.nav li .regist .button {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 30px;
}
footer p {
  display: block;
  padding: 20px;
  font-size: 1.1rem;
  text-align: center;
  background-color: #4b4c4b;
}

#serviceLogo {
  width: 136px;
  height: 0;
  overflow: hidden;
  padding-top: 54px;
  background-image: url("../img/common/smart_waon_logotypo.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

h1 {
  margin: 20px 10px 15px;
  color: #222;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
}
h1:first-child {
  margin-top: 20px;
}
h1 span {
  display: block;
  padding-left: 7px;
  border-left: 3px #717071 solid;
}
h1.underline {
  padding-bottom: 9px;
  border-bottom: 1px #e3e3e3 solid;
}
h1.pt {
  text-align: center;
}
h1.balloon {
  position: relative;
  padding-bottom: 0;
  width: 225px;
  padding: 8px;
  margin: 20px auto;
  color: #fff;
  background-color: #717071;
  border-radius: 4px;
}
h1.balloon:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  bottom: -6px;
  width: 10px;
  height: 6px;
  display: block;
  margin: auto;
  border-top: #717071 solid 6px;
  border-left: transparent solid 5px;
  border-right: transparent solid 5px;
}
h1.balloon:after {
  top: auto;
  right: 0;
  left: 0;
}
h1.balloon span {
  padding: 0;
  border: none;
  margin: auto;
  text-align: center;
}
h1.balloon span.caption {
  font-size: 1.1rem;
  font-weight: normal;
}

h2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
  margin: 20px 0 15px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.2;
  background-color: #717071;
}




/********/
header .inner{display: none;}
header#serviceHeader {display: block;}
div#serviceLogo {float: right;padding: 15px;width: 70px;}

div.box-content.wr{
    margin: 0;
    text-align: justify;
	color: #333;
}
.wr #title{
	width: 100%;
	background: #dbdcdc;
}
.wr #title .inner{/* width: 960px; */margin: 0 auto 0 auto;padding: 6% 0 6% 0;}
.wr #title .inner h1{
    margin: 0;
    padding: 0 2.5% 0 2.5%;
}

.wr #main{}
.wr #main .inner{
    overflow: hidden;
    /* width: 960px; */
    margin: 1% auto 5% auto;
}
.wr #main .inner h2{
    color: #fff;
    background: #656464;
    padding: 2%;
    font-size: 4.6vw;
    line-height: 1.2em;
    margin: 0 0 3% 0;
}
.wr #main .inner h3{
    font-size: 3.7vw;
    padding: 1%;
    margin: 0 0 1% 0;
}
.wr #main .inner h4{
    font-weight: normal;
}
.wr #main .inner h4 span.red{
  color:#ff0000;
}
.wr #main .inner .cont1{
	width: 100%;
	margin: 0 0 0 0;
}
.wr #main .inner h4.txt{
    font-size: 3.6vw;
    line-height: 1.5em;
    margin: 2%;
}
.wr #main .inner h4.txt span.link{
  /* width:100%; */
  /* display:block; */
}
.wr #main .inner h4.img{
    width: 60%;
    margin: 0 auto 0 auto;
}
.wr #main .inner h4.img img{
    width: 100%;
}
.wr #main .inner .cont1 p{line-height: 1.3em;padding: 0 0 0 4vw;position: relative;margin: 0 2% 0 2%;font-size: 3.1vw;}
.wr #main .inner .cont1 p:after {
  position: absolute;
  content: "※";
  top: 0;
  left: 0;
  width: 12px;
  height: 24px;
}
.wr #main .inner p.attention{margin: 0 6% 0 6%;font-size: 3.2vw;line-height: 1.3em;color: #333;}
.wr #main .inner ol.flow{counter-reset: my-counter;margin: 0 2% 0 2%;}
.wr #main .inner ol.flow li{
  margin-bottom: 0px;
  padding: 2% 3% 2% 12%;
  position: relative;
  margin: 0 0 10% 0;
  background: #ccc;
  text-align: center;
  font-size: 4vw;
}
.wr #main .inner ol.flow li span{
  width:100%;
  display: block;
  font-size: 3.2vw;
}
.wr #main .inner ol.flow li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  border: 1px solid #555;
  color: #222;
  display: block;
  float: left;
  top: 50%;
  position: absolute;
  margin: -9px 0 0 -10%;
  line-height: 18px;
  text-align: center;
  height: 18px;
  width: 18px;
  border-radius: 50%;
}
.wr #main .inner ol.flow li:after {
  position: absolute;
  content: "";
  bottom: -6vw;
  left: 0;
  margin: 0 0 0 0;
  width: 100%;
  height: 4vw;
  display: block;
  background: url("../img/aroww.png") bottom center no-repeat;
  background-size: 100% auto;
}
.wr #main .inner ol.flow li:last-child:after {
  background:none;
}
.wr #main .inner ol.txt{margin: 0 5% 0 5%;counter-reset: my-counter;}
.wr #main .inner ol.txt li{
  margin-bottom: 0px;
  padding-left: 30px;
  position: relative;
  font-size: 3.2vw;
  margin: 0 0 1.5% 0;
}
.wr #main .inner ol.txt li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  border: 1px solid #555;
  color: #222;
  display: block;
  float: left;
  margin: 0px 0 0 -10%;
  line-height: 14px;
  text-align: center;
  height: 14px;
  width: 14px;
  border-radius: 50%;
}

.wr #main .inner dl{
    margin: 1% 1% 0 1%;
}
.wr #main .inner dt{
    margin: 0 0 1% 0;
}
.wr #main .inner dt h3{
    border-bottom: 1px solid #ccc;
    padding: 0 1% 0 1%;
    font-size: 4vw;
}
.wr #main .inner dd{
    margin: 0 0 16px 0;
}
.wr #main .inner dd h4.txt{
    margin: 0 2% 1% 2%;
}

.wr #main .inner ul.btn{}
.wr #main .inner ul.btn li{
    width: 60%;
    margin: 0 auto;
}
.wr #main .inner ul.btn li a{
    padding: 0;
}