@charset "UTF-8";
#waon-charge {
  font-family: "Noto Sans JP", "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", Verdana, "游ゴシック", "Yu Gothic", YuGothic;
  font-size: 18px;
  line-height: 1.4em;
  width: 100%; }
  @media (max-width: 767px) {
    #waon-charge {
      padding-bottom: 12%; } }
  #waon-charge h1, #waon-charge h2, #waon-charge h3, #waon-charge h4, #waon-charge p, #waon-charge a, #waon-charge li {
    color: #666; }
  #waon-charge img {
    width: 100%;
    height: auto; }
  #waon-charge .sp_only {
    display: none; }
  @media (max-width: 767px) {
    #waon-charge .pc_only {
      display: none; }
    #waon-charge .sp_only {
      display: block; } }
  #waon-charge .kv__inner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto; }
  #waon-charge .cont__inner {
    max-width: 960px;
    width: 95%;
    margin: 0 auto; }
  #waon-charge .red {
    color: #f45454; }
  #waon-charge .blue {
    color: #5498f4; }
  #waon-charge .magenta {
    color: #b20281; }
  #waon-charge .txt_fuchi01 {
    text-shadow: 2px 2px 2px #e84779, -2px -2px 2px #e84779, -2px 2px 2px #e84779, 2px -2px 2px #e84779, 2px 0 2px #e84779, -2px  0 2px #e84779, 0 2px 2px #e84779, 0 -2px 2px #e84779;
    color: #fff; }
  #waon-charge .txt_fuchi02 {
    text-shadow: 2px 2px 2px #e84779, -2px -2px 2px #e84779, -2px 2px 2px #e84779, 2px -2px 2px #e84779, 2px 0 2px #e84779, -2px  0 2px #e84779, 0 2px 2px #e84779, 0 -2px 2px #e84779;
    color: #fff; }
  #waon-charge .mb-1 {
    margin-bottom: 20px !important; }
  #waon-charge .mb-2 {
    margin-bottom: 40px !important; }
  #waon-charge .fw_b {
    font-weight: bold !important; }
  #waon-charge .att {
    font-size: 15px !important; }
    @media (max-width: 767px) {
      #waon-charge .att {
        font-size: 12px !important; } }
  #waon-charge .cont_ttl {
    font-size: 26px !important;
    color: #fff;
    background: #e84779;
    text-align: center;
    padding: 10px 40px;
    border-radius: 50px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    margin: 0 auto 40px; }
    @media (max-width: 767px) {
      #waon-charge .cont_ttl {
        font-size: 21px !important;
        padding: 2% 6%;
        border-radius: 50px;
        margin: 0 auto 4%; } }
  #waon-charge .info_text_wrap {
    text-align: left;
    margin: 0 auto 0;
    word-break: break-all; }
    @media (max-width: 767px) {
      #waon-charge .info_text_wrap {
        margin: 0 auto 0; } }
    #waon-charge .info_text_wrap h4 {
      font-size: 16px;
      margin-bottom: 10px; }
      @media (max-width: 767px) {
        #waon-charge .info_text_wrap h4 {
          font-size: 13px;
          margin-bottom: 2%; } }
    #waon-charge .info_text_wrap p {
      font-size: 15px;
      margin-bottom: 10px; }
      @media (max-width: 767px) {
        #waon-charge .info_text_wrap p {
          font-size: 12px;
          margin-bottom: 2%; } }
    #waon-charge .info_text_wrap ul {
      margin: 0 .5em; }
      #waon-charge .info_text_wrap ul li {
        position: relative;
        padding-left: 1.5em;
        font-size: 18px;
        line-height: 1.4; }
        #waon-charge .info_text_wrap ul li a {
          display: inline-block;
          text-decoration: underline; }
        @media (max-width: 767px) {
          #waon-charge .info_text_wrap ul li {
            font-size: 12px; } }
        #waon-charge .info_text_wrap ul li::before {
          content: "※";
          color: #f45454;
          position: absolute;
          left: 0; }
        #waon-charge .info_text_wrap ul li.dot::before {
          content: "・";
          color: #373737; }
        #waon-charge .info_text_wrap ul li.none::before {
          content: none; }
        #waon-charge .info_text_wrap ul li ol li {
          list-style-type: decimal;
          padding: 0;
          margin-left: 1.5em; }
          #waon-charge .info_text_wrap ul li ol li::before {
            content: none; }
  #waon-charge .kv_wrap {
    background: #a8e1fc; }
    @media (max-width: 767px) {
      #waon-charge .kv_wrap .cont__inner {
        width: 100%; } }
  #waon-charge .main_wrap {
    background: #a8e1fb;
    background-size: cover;
    padding: 80px 0; }
    @media (max-width: 767px) {
      #waon-charge .main_wrap {
        padding: 12% 0; } }
    @media (max-width: 767px) {
      #waon-charge .main_wrap .cont__inner {
        padding: 0% 2%;
        border-radius: 10px; } }
    #waon-charge .main_wrap .cont__inner .bg_w {
      background: #fff;
      border-radius: 20px;
      padding: 80px 60px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      position: relative;
      filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="3" /><feOffset dx="4" dy="4" result="offsetblur" /><feFlood flood-color="rgba(100,100,100,0.2)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
      -webkit-filter: drop-shadow(3px 3px 3px rgba(100, 100, 100, .2));
              filter: drop-shadow(3px 3px 3px rgba(100, 100, 100, .2)); }
      @media (max-width: 767px) {
        #waon-charge .main_wrap .cont__inner .bg_w {
          padding: 8% 4%; } }
    #waon-charge .main_wrap .cont__inner .cont_box {
      margin-bottom: 80px; }
      @media (max-width: 767px) {
        #waon-charge .main_wrap .cont__inner .cont_box {
          margin-bottom: 12%; } }
      #waon-charge .main_wrap .cont__inner .cont_box h2 {
        text-align: center;
        font-size: 40px;
        line-height: 1.4em; }
        @media (max-width: 767px) {
          #waon-charge .main_wrap .cont__inner .cont_box h2 {
            font-size: 28px; } }
      #waon-charge .main_wrap .cont__inner .cont_box h3 {
        text-align: center;
        font-size: 36px;
        line-height: 1.4em; }
        @media (max-width: 767px) {
          #waon-charge .main_wrap .cont__inner .cont_box h3 {
            font-size: 24px; } }
      #waon-charge .main_wrap .cont__inner .cont_box h4 {
        text-align: center;
        font-size: 28px;
        line-height: 1.4em; }
        @media (max-width: 767px) {
          #waon-charge .main_wrap .cont__inner .cont_box h4 {
            font-size: 18px; } }
      #waon-charge .main_wrap .cont__inner .cont_box h5 {
        text-align: center;
        font-size: 24px;
        line-height: 1.4em; }
        @media (max-width: 767px) {
          #waon-charge .main_wrap .cont__inner .cont_box h5 {
            font-size: 16px; } }
      #waon-charge .main_wrap .cont__inner .cont_box p {
        text-align: center;
        font-size: 21px;
        line-height: 1.4em; }
        @media (max-width: 767px) {
          #waon-charge .main_wrap .cont__inner .cont_box p {
            font-size: 16px;
            letter-spacing: -1px; } }
        #waon-charge .main_wrap .cont__inner .cont_box p sup {
          font-size: 0.7em;
          vertical-align: super; }
      #waon-charge .main_wrap .cont__inner .cont_box .kikan_text {
        font-size: 48px;
        font-weight: bold;
        color: #ca4594; }
        #waon-charge .main_wrap .cont__inner .cont_box .kikan_text span {
          font-size: 0.6em; }
        @media (max-width: 767px) {
          #waon-charge .main_wrap .cont__inner .cont_box .kikan_text {
            font-size: 32px; }
            #waon-charge .main_wrap .cont__inner .cont_box .kikan_text span {
              font-size: 0.6em; } }
      #waon-charge .main_wrap .cont__inner .cont_box .card_img {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin-bottom: 20px; }
        #waon-charge .main_wrap .cont__inner .cont_box .card_img li {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap; }
      #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box {
        background: #fffccb;
        padding: 40px 40px;
        border-radius: 10px; }
        #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box h3 {
          margin: 0 auto 40px;
          position: relative;
          padding-left: 140px; }
          #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box h3::before {
            content: "";
            position: absolute;
            left: -80px;
            top: -60px;
            display: block;
            width: 260px;
            height: 160px;
            background: url(/asset/img/campaign/202506_chargecp/icon_hayatoku.png) no-repeat center center;
            background-size: contain; }
        #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box .text-1 {
          margin: 0 auto 40px; }
        #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box .text-2 {
          width: 80%;
          margin: 0 auto 40px; }
        #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box .text-3 {
          width: 80%;
          margin: 0 auto 40px; }
        @media (max-width: 767px) {
          #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box {
            padding: 6% 6%; }
            #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box h3 {
              margin: 0 auto 6%;
              padding-left: 32%;
              text-align: left; }
              #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box h3::before {
                left: -8vw;
                top: -8vw;
                width: 30vw; }
            #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box .text-1 {
              margin: 0 auto 6%; }
            #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box .text-2 {
              width: 100%;
              margin: 0 auto 6%; }
            #waon-charge .main_wrap .cont__inner .cont_box.cont01 .hayatoku_box .text-3 {
              width: 100%;
              margin: 0 auto 6%; } }
  #waon-charge .example_wrap {
    background: #fff;
    padding: 0 60px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-radius: 20px;
    margin-bottom: 60px; }
    #waon-charge .example_wrap .first-acdn {
      margin-top: 40px; }
    #waon-charge .example_wrap .first-acdn_content p {
      margin-top: 20px; }
    @media (max-width: 767px) {
      #waon-charge .example_wrap {
        padding: 4% 4%;
        margin-bottom: 8%;
        border-radius: 10px; }
        #waon-charge .example_wrap p {
          font-size: 16px; }
        #waon-charge .example_wrap .first-acdn {
          margin-top: 6%; }
        #waon-charge .example_wrap .first-acdn_content p {
          margin-top: 4%; } }
  #waon-charge .faq_wrap .faq_box_01 {
    margin-bottom: 60px; }
    #waon-charge .faq_wrap .faq_box_01 h3 {
      padding: 10px 10px;
      background: #8bcded;
      color: #fff; }
    #waon-charge .faq_wrap .faq_box_01 .acdn_ttl {
      background: #d2eaf5; }
    #waon-charge .faq_wrap .faq_box_01 .acdn_content {
      border-left: 25px solid #d2eaf5;
      border-right: 25px solid #d2eaf5;
      border-bottom: 25px solid #d2eaf5; }
    #waon-charge .faq_wrap .faq_box_01 .acdn-target {
      border-left: 3px solid #f8f7f3;
      border-right: 3px solid #f8f7f3; }
  #waon-charge .faq_wrap .faq_box_02 h3 {
    padding: 10px 10px;
    background: #f77542;
    color: #fff; }
  #waon-charge .faq_wrap .faq_box_02 .acdn_ttl {
    background: #f7e0d7; }
  #waon-charge .faq_wrap .faq_box_02 .acdn_content {
    border-left: 25px solid #f7e0d7;
    border-right: 25px solid #f7e0d7;
    border-bottom: 25px solid #f7e0d7; }
  #waon-charge .faq_wrap .faq_box_02 .acdn-target {
    border-left: 3px solid #f8f7f3;
    border-right: 3px solid #f8f7f3; }
  #waon-charge .faq_wrap .info_text_wrap li {
    font-size: 16px; }
    #waon-charge .faq_wrap .info_text_wrap li a {
      display: inline-block;
      text-decoration: underline; }
  #waon-charge .faq_wrap table {
    width: 100%;
    margin-top: 20px; }
    #waon-charge .faq_wrap table tr th {
      background: #707070;
      color: #fff;
      text-align: center;
      font-size: .7em;
      padding: 10px 0;
      border: 1px solid #373737;
      width: 16.66667%; }
    #waon-charge .faq_wrap table tr td {
      text-align: center;
      padding: 10px 0;
      border: 1px solid #373737; }
  @media (max-width: 767px) {
    #waon-charge .faq_wrap .info_text_wrap li {
      font-size: 3.5vw; }
    #waon-charge .faq_wrap table {
      margin-top: 4%; }
      #waon-charge .faq_wrap table tr th {
        font-size: .6em;
        padding: 2% 0; }
      #waon-charge .faq_wrap table tr td {
        padding: 2% 0; } }
  #waon-charge .inquiry_wrap {
    width: 80%;
    margin: 80px auto;
    padding: 60px 60px;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
    background: url(/asset/img/campaign/202504_chargecp/icon_waon.png) no-repeat 10% bottom #f7f7f7; }
    #waon-charge .inquiry_wrap h3 {
      font-size: 42px;
      font-weight: bold;
      color: #ea4109;
      margin-bottom: 20px; }
    #waon-charge .inquiry_wrap h4 {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px; }
    #waon-charge .inquiry_wrap .info_text_wrap {
      text-align: center; }
      #waon-charge .inquiry_wrap .info_text_wrap p {
        margin: 0; }
      #waon-charge .inquiry_wrap .info_text_wrap a {
        display: inline-block;
        text-decoration: underline; }
    @media (max-width: 767px) {
      #waon-charge .inquiry_wrap {
        width: 100%;
        margin: 12% auto;
        padding: 4% 4%;
        border-radius: 10px;
        background: #f7f7f7; }
        #waon-charge .inquiry_wrap h3 {
          font-size: 38px;
          font-weight: bold;
          color: #ea4109;
          margin-bottom: 6%; }
        #waon-charge .inquiry_wrap h4 {
          font-size: 21px;
          margin-bottom: 6%; }
        #waon-charge .inquiry_wrap .info_text_wrap p {
          line-height: 1.4em; } }

.anime_block {
  opacity: 0;
  -webkit-transition: all 2s;
  transition: all 2s; }

.fadeIn {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0; }
  .fadeIn.fadeRight {
    -webkit-animation-name: fadeRightAnime;
            animation-name: fadeRightAnime;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    opacity: 0; }

.fadeIn_fv {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0; }

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@-webkit-keyframes fadeRightAnime {
  from {
    opacity: 0;
    -webkit-transform: translateX(300px);
            transform: translateX(300px); }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    -webkit-transform: translateX(300px);
            transform: translateX(300px); }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }