@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;

}