#content .agreement-box {
  display: none;
  position: relative;
  width: 1057px;
  border: 1px solid #0f48d7;
  margin: 100px auto;
  background-color: #fff; }
  #content .agreement-box .close {
    top: -2%;
    right: -6%; }
  #content .agreement-box .inner {
    padding: 42px 0 78px;
    margin: 0 52px;
    width: auto; }
  #content .agreement-box h4 {
    font-size: 28px;
    font-weight: bold;
    color: #0f48d7;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 5px; }
  #content .agreement-box p {
    font-size: 18px;
    color: #0f48d7;
    text-align: center;
    line-height: 1.5; }
  #content .agreement-box .mb24 {
    margin-bottom: 24px; }
  #content .agreement-box dl dt {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    color: #0f48d7;
    padding-top: 24px; }
  #content .agreement-box dl dd {
    font-size: 18px;
    line-height: 1.5;
    color: #0f48d7; }
#content .present-box {
  width: 90%;
  margin: 100px auto;
  max-width: 1002px;
  display: none; }
  #content .present-box .box {
    position: relative; }
  #content .present-box .close {
    top: -5%;
    right: -6%; }

@media only screen and (max-width: 768px) {
  #content {
    background-size: cover,contain; }
    #content .agreement-box {
      width: auto;
      margin: 15% 2.5%; }
      #content .agreement-box .close {
        top: -1.5%;
        right: 0; }
      #content .agreement-box .inner {
        padding: 5% 0 8%;
        margin: 0 6%; }
      #content .agreement-box h4 {
        font-size: 4.5vw;
        margin-bottom: 1.4%; }
      #content .agreement-box p {
        font-size: 3.2vw; }
      #content .agreement-box .mb24 {
        margin-bottom: 5%; }
      #content .agreement-box dl dt {
        font-size: 3.2vw;
        padding-top: 5%; }
      #content .agreement-box dl dd {
        font-size: 3.2vw; }
    #content .present-box {
      width: 90%;
      margin: 25% auto;
      max-width: inherit; }
      #content .present-box .close {
        top: -8%;
        right: 0; } }
/*-----------------------------------------------
 campaign
-----------------------------------------------*/
#campaign {
  position: relative;
  z-index: 10;
  padding: 128px 0 400px; }
  #campaign h1 {
    text-align: center;
    margin-bottom: 78px; }

@media only screen and (max-width: 768px) {
  #campaign {
    padding: 18% 0; }
    #campaign h1 {
      margin-bottom: 9.4%; } }
/*-----------------------------------------------
 sec1
-----------------------------------------------*/
.sec1 {
  text-align: center;
  margin-bottom: 135px; }
  .sec1 h2 {
    margin-bottom: 36px; }
  .sec1 .text {
    margin-bottom: 42px; }
  .sec1 .period {
    margin-bottom: 42px; }
  .sec1 .block {
    width: 1100px;
    background: #fff;
    padding: 55px 0 64px;
    margin: 0 auto;
    background: url("../img/campaign/bg_sec1_top.png") no-repeat top center, url("../img/campaign/bg_sec1_bottom.png") no-repeat bottom center #fff; }
    .sec1 .block .apply {
      position: relative;
      padding-top: 48px; }
      .sec1 .block .apply::before {
        content: "";
        background: url("../img/campaign/img_sec1_chara01.png") no-repeat top center;
        background-size: contain;
        width: 135px;
        height: 216px;
        position: absolute;
        top: -60px;
        right: 20px;
        z-index: 5; }
      .sec1 .block .apply::after {
        content: "";
        background: url("../img/campaign/img_sec1_chara02.png") no-repeat top center;
        background-size: contain;
        width: 174px;
        height: 215px;
        position: absolute;
        top: 595px;
        left: -18px;
        z-index: 5; }
      .sec1 .block .apply h3 {
        margin-bottom: 18px; }
      .sec1 .block .apply ul {
        margin: 0 50px; }
        .sec1 .block .apply ul li {
          position: relative;
          width: 1000px;
          border: 6px solid #184ffd; }
          .sec1 .block .apply ul li p {
            font-size: 33px;
            color: #184ffd; }
            .sec1 .block .apply ul li p span {
              font-weight: bold;
              background-color: #fcff00; }
            .sec1 .block .apply ul li p.small {
              font-size: 18px; }
          .sec1 .block .apply ul li .btn {
            position: relative;
            width: 378px;
            height: 73px;
            background-color: #ffff00;
            border-radius: 36px;
            margin: 0 auto 12px; }
            .sec1 .block .apply ul li .btn a {
              width: 100%;
              display: block;
              position: absolute;
              top: -10px;
              left: -6px;
              background-color: #0f9df8;
              border-radius: 36px;
              transition: all 0.2s ease; }
              .sec1 .block .apply ul li .btn a:hover {
                top: 0;
                left: 0; }
          .sec1 .block .apply ul li:nth-child(1) {
            padding: 40px 0 30px;
            margin-bottom: 54px; }
            .sec1 .block .apply ul li:nth-child(1) p:first-child {
              margin-bottom: 38px; }
            .sec1 .block .apply ul li:nth-child(1)::after {
              content: "";
              display: block;
              position: absolute;
              top: -35px;
              left: -18px;
              background: url("../img/campaign/img_step1-pc.png") no-repeat top center;
              background-size: contain;
              width: 139px;
              height: 139px; }
          .sec1 .block .apply ul li:nth-child(2) {
            margin-bottom: 40px;
            padding: 35px 0 20px; }
            .sec1 .block .apply ul li:nth-child(2) p:nth-child(1) {
              width: 454px;
              text-align: left;
              margin: 0 auto 10px; }
            .sec1 .block .apply ul li:nth-child(2)::after {
              content: "";
              display: block;
              position: absolute;
              top: -35px;
              left: -18px;
              background: url("../img/campaign/img_step2-pc.png") no-repeat top center;
              background-size: contain;
              width: 139px;
              height: 139px; }
      .sec1 .block .apply .btn-agreement {
        position: relative;
        width: 442px;
        height: 68px;
        margin: 0 auto 70px;
        border-radius: 50px;
        background-color: #184ffd;
        cursor: pointer; }
        .sec1 .block .apply .btn-agreement span {
          position: absolute;
          top: -10px;
          left: -6px;
          display: block;
          border: 2px solid #184ffd;
          background-color: #fff;
          border-radius: 50px;
          transition: all 0.2s ease; }
          .sec1 .block .apply .btn-agreement span:hover {
            top: 0;
            left: 0; }
    .sec1 .block .list-box ul {
      font-size: 0;
      text-align: left;
      margin: 0 36px; }
      .sec1 .block .list-box ul li {
        display: inline-block;
        width: 236px;
        margin-bottom: 30px;
        margin-right: 28px; }
        .sec1 .block .list-box ul li:nth-of-type(4n) {
          margin-right: 0; }
        .sec1 .block .list-box ul li .image {
          height: 241px;
          position: relative;
          background-color: #1a32d0;
          cursor: pointer;
          margin-bottom: 18px; }
          .sec1 .block .list-box ul li .image span {
            position: absolute;
            top: -7px;
            left: -7px;
            border: 5px solid #1a32d0;
            background-color: #fff; }
          .sec1 .block .list-box ul li .image:hover img {
            opacity: 0.6;
            opacity: 0.8;
            animation: btn 0.5s;
            -webkit-animation: btn 0.5s;
            -moz-animation: btn 0.5s; }
        .sec1 .block .list-box ul li .btn {
          text-align: center;
          border: none; }
    .sec1 .block .list-box .btn-more {
      position: relative;
      width: 379px;
      height: 61px;
      margin: 0 auto;
      border-radius: 50px;
      background-color: #fcff00;
      cursor: pointer; }
      .sec1 .block .list-box .btn-more span {
        position: absolute;
        top: -8px;
        left: -6px;
        display: block;
        background-color: #1a32d0;
        border-radius: 50px;
        transition: all 0.2s ease; }
        .sec1 .block .list-box .btn-more span:hover {
          top: 0;
          left: 0; }
    .sec1 .block .list-box .list2, .sec1 .block .list-box .more2,
    .sec1 .block .list-box .list3, .sec1 .block .list-box .more3,
    .sec1 .block .list-box .list4, .sec1 .block .list-box .more4,
    .sec1 .block .list-box .list5 {
      display: none; }

#modal-block {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 999;
  overflow: scroll; }
  #modal-block .close {
    font-size: 60px;
    color: #1a32d0;
    position: absolute;
    top: -7%;
    right: -12%;
    cursor: pointer; }
  #modal-block .close-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150vh; }
  #modal-block .modal {
    display: none;
    width: 535px;
    margin: 150px auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 10px); }
    #modal-block .modal .btn {
      position: absolute;
      bottom: 32px;
      left: 160px; }

@media only screen and (max-width: 768px) {
  .sec1 {
    text-align: center;
    margin-bottom: 10%; }
    .sec1 h2 {
      margin-bottom: 5.5%; }
    .sec1 .text {
      margin-bottom: 3.5%; }
    .sec1 .period {
      margin-bottom: 3.5%; }
    .sec1 .block {
      width: auto;
      background: #fff;
      padding: 3.5% 0 10%;
      margin: 0 2.4%;
      background: url("../img/campaign/bg_sec1_top-sp.png") no-repeat top center, url("../img/campaign/bg_sec1_bottom-sp.png") no-repeat bottom center #fff;
      background-size: contain; }
      .sec1 .block .apply {
        padding-top: 6%; }
        .sec1 .block .apply::before {
          width: 19.6%;
          height: 29.4vw;
          top: 4%;
          right: 5%; }
        .sec1 .block .apply::after {
          width: 25.2%;
          height: 29.6vw;
          top: 74%;
          left: -4%; }
        .sec1 .block .apply h3 {
          margin-bottom: 3.5%; }
        .sec1 .block .apply ul {
          margin: 0 5%; }
          .sec1 .block .apply ul li {
            position: relative;
            width: 98%;
            border: 1.2vw solid #184ffd; }
            .sec1 .block .apply ul li p {
              font-size: 4.22vw;
              color: #184ffd;
              padding: 0 17%;
              text-align: left;
              margin-left: 3%; }
              .sec1 .block .apply ul li p span {
                font-weight: bold;
                background-color: #fcff00; }
              .sec1 .block .apply ul li p.small {
                font-size: 2.5vw; }
            .sec1 .block .apply ul li .btn {
              margin: 0 auto 2.8%;
              width: 61.6%;
              height: 9.6vw;
              border-radius: 6vw; }
              .sec1 .block .apply ul li .btn a {
                top: -1.5vw;
                left: -2%; }
                .sec1 .block .apply ul li .btn a:hove {
                  top: -1.5vw;
                  left: -2%; }
            .sec1 .block .apply ul li:nth-child(1) {
              padding: 3.5% 0;
              margin-bottom: 8%; }
              .sec1 .block .apply ul li:nth-child(1)::after {
                content: "";
                display: block;
                position: absolute;
                top: -5vw;
                left: -7%;
                width: 22.5%;
                height: 19vw; }
            .sec1 .block .apply ul li:nth-child(2) {
              margin-bottom: 9%;
              padding: 4% 0 2.5%; }
              .sec1 .block .apply ul li:nth-child(2) p:nth-child(1) {
                margin-bottom: 1%;
                width: 83%; }
              .sec1 .block .apply ul li:nth-child(2)::after {
                top: -5vw;
                left: -7%;
                width: 22.5%;
                height: 19vw; }
        .sec1 .block .apply .btn-agreement {
          width: 57.6%;
          height: 9.6vw;
          margin: 0 auto 11%;
          border-radius: 6vw; }
          .sec1 .block .apply .btn-agreement span {
            width: 100%;
            top: -1.5vw;
            left: -2%;
            border-radius: 6vw;
            border: 0.3vw solid #1a32d0; }
            .sec1 .block .apply .btn-agreement span:hover {
              top: -1.5vw;
              left: -2%; }
      .sec1 .block .list-box ul {
        margin: 0 8%; }
        .sec1 .block .list-box ul li {
          width: 46.2%;
          margin-bottom: 7%;
          margin-right: 7.6%; }
          .sec1 .block .list-box ul li:nth-of-type(4n), .sec1 .block .list-box ul li:nth-of-type(2n) {
            margin-right: 0; }
          .sec1 .block .list-box ul li .image {
            height: 37.7vw;
            margin-bottom: 6.5%; }
            .sec1 .block .list-box ul li .image span {
              position: absolute;
              top: -2.5%;
              left: -2.5%;
              border: 5px solid #1a32d0;
              background-color: #fff; }
            .sec1 .block .list-box ul li .image:hover img {
              opacity: 0.6;
              opacity: 0.8;
              animation: btn 0.5s;
              -webkit-animation: btn 0.5s;
              -moz-animation: btn 0.5s; }
          .sec1 .block .list-box ul li .btn {
            border: none;
            width: 89%;
            margin: 0 auto; }
      .sec1 .block .list-box .btn-more {
        width: 86%;
        height: 8.3vw;
        border-radius: 6vw; }
        .sec1 .block .list-box .btn-more span {
          width: 100%;
          top: -1vw;
          left: -0.5%;
          border-radius: 6vw; }
          .sec1 .block .list-box .btn-more span:hover {
            top: -1vw;
            left: -0.5%; }
      .sec1 .block .list-box .list2, .sec1 .block .list-box .more2,
      .sec1 .block .list-box .list3, .sec1 .block .list-box .more3,
      .sec1 .block .list-box .list4, .sec1 .block .list-box .more4,
      .sec1 .block .list-box .list5 {
        display: none; }

  #modal-block .close {
    font-size: 10vw;
    position: absolute;
    top: -5%;
    right: 5.5%;
    cursor: pointer; }
  #modal-block .modal {
    display: none;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 10px); }
    #modal-block .modal .image {
      width: 90%;
      margin: 0 auto; }
    #modal-block .modal .btn {
      bottom: 4.5%;
      left: 34%;
      border: none;
      width: 32.8%; } }
/*-----------------------------------------------
 sec2
-----------------------------------------------*/
.sec2 {
  text-align: center;
  margin-bottom: 170px; }
  .sec2 .m-30 {
    margin: 0 5%; }
  .sec2 h2 {
    margin-bottom: 36px; }
  .sec2 .text {
    margin-bottom: 44px; }
  .sec2 .period {
    margin-bottom: 58px; }
  .sec2 .block {
    width: 1100px;
    margin: 0 auto;
    background: url("../img/campaign/bg_sec2.png") no-repeat top center #fff;
    background-size: cover;
    padding: 52px 0 30px; }
    .sec2 .block .apply {
      position: relative; }
      .sec2 .block .apply .text {
        font-size: 16px;
        color: #1a32d0;
        margin-bottom: 35px; }
      .sec2 .block .apply .image {
        margin-bottom: 58px; }
      .sec2 .block .apply ul li .btn {
        position: relative;
        width: 378px;
        height: 73px;
        background-color: #ffff00;
        border-radius: 36px;
        margin: 0 auto 12px; }
        .sec2 .block .apply ul li .btn a {
          width: 100%;
          display: block;
          position: absolute;
          top: -10px;
          left: -6px;
          background-color: #0f9df8;
          border-radius: 36px;
          transition: all 0.2s ease; }
          .sec2 .block .apply ul li .btn a:hover {
            top: 0;
            left: 0; }
      .sec2 .block .apply .btn-rt {
        margin-bottom: 12px; }
      .sec2 .block .apply h3 {
        margin-bottom: 18px; }
      .sec2 .block .apply ul {
        margin: 0 50px 60px; }
        .sec2 .block .apply ul li {
          position: relative;
          width: 1000px;
          border: 6px solid #184ffd; }
          .sec2 .block .apply ul li p {
            font-size: 33px;
            color: #184ffd; }
            .sec2 .block .apply ul li p span {
              font-weight: bold;
              background-color: #fcff00; }
            .sec2 .block .apply ul li p.small {
              font-size: 18px; }
          .sec2 .block .apply ul li:nth-child(1) {
            padding: 40px 0 30px;
            margin-bottom: 54px; }
            .sec2 .block .apply ul li:nth-child(1) p:first-child {
              margin-bottom: 38px; }
            .sec2 .block .apply ul li:nth-child(1)::after {
              content: "";
              display: block;
              position: absolute;
              top: -35px;
              left: -18px;
              background: url("../img/campaign/img_step1-pc.png") no-repeat top center;
              background-size: contain;
              width: 139px;
              height: 139px; }
          .sec2 .block .apply ul li:nth-child(2) {
            padding: 35px 0 30px; }
            .sec2 .block .apply ul li:nth-child(2) p {
              width: 630px;
              text-align: left;
              margin: 0 auto; }
            .sec2 .block .apply ul li:nth-child(2)::after {
              content: "";
              display: block;
              position: absolute;
              top: -35px;
              left: -18px;
              background: url("../img/campaign/img_step2-pc.png") no-repeat top center;
              background-size: contain;
              width: 139px;
              height: 139px; }
      .sec2 .block .apply .btn-agreement {
        position: relative;
        width: 442px;
        height: 68px;
        margin: 0 auto 50px;
        border-radius: 50px;
        background-color: #184ffd;
        cursor: pointer; }
        .sec2 .block .apply .btn-agreement span {
          position: absolute;
          top: -10px;
          left: -6px;
          display: block;
          border: 2px solid #184ffd;
          background-color: #fff;
          border-radius: 50px;
          transition: all 0.2s ease; }
          .sec2 .block .apply .btn-agreement span:hover {
            top: 0;
            left: 0; }
    .sec2 .block .box {
      position: relative;
      margin-bottom: 52px; }
      .sec2 .block .box .btn1 {
        position: absolute;
        top: 248px;
        left: 42px;
        cursor: pointer; }
        .sec2 .block .box .btn1:hover {
          opacity: 0.8; }
      .sec2 .block .box .btn2 {
        position: absolute;
        top: 263px;
        left: 42px;
        cursor: pointer; }
        .sec2 .block .box .btn2:hover {
          opacity: 0.8; }

@media only screen and (max-width: 768px) {
  .sec2 h2 {
    margin-bottom: 3.5%; }
  .sec2 .text {
    margin-bottom: 5.5%; }
  .sec2 .period {
    margin-bottom: 3.5%; }
  .sec2 .block {
    width: auto;
    background: #fff;
    padding: 7.5% 0 4.5%;
    margin: 0 2.4%;
    background-size: contain;
    background: url("../img/campaign/bg_sec2-sp.png") no-repeat top center #fff; }
    .sec2 .block .apply ul li .btn {
      margin: 0 auto 2.8%;
      width: 51.8vw;
      height: 9.6vw;
      border-radius: 6vw; }
      .sec2 .block .apply ul li .btn a {
        top: -1.5vw;
        left: -2%; }
        .sec2 .block .apply ul li .btn a:hove {
          top: -1.5vw;
          left: -2%; }
    .sec2 .block .apply .btn-rt {
      width: 54.4%;
      margin: 0 auto 2.8%; }
    .sec2 .block .apply .text {
      font-size: 2.5vw;
      margin-top: -1%; }
    .sec2 .block .apply h3 {
      margin-bottom: 3.5%; }
    .sec2 .block .apply ul {
      margin: 0 5%; }
      .sec2 .block .apply ul li {
        position: relative;
        width: 98%;
        border: 1.2vw solid #184ffd; }
        .sec2 .block .apply ul li p {
          font-size: 4.1vw;
          color: #184ffd;
          padding: 0 0 0 12%;
          text-align: left;
          margin-left: 6.5%; }
          .sec2 .block .apply ul li p span {
            font-weight: bold;
            background-color: #fcff00; }
          .sec2 .block .apply ul li p.small {
            font-size: 2.5vw; }
        .sec2 .block .apply ul li:nth-child(1) {
          padding: 5% 0 3.5%;
          margin-bottom: 5%; }
          .sec2 .block .apply ul li:nth-child(1) p:first-child {
            margin-bottom: 4%; }
          .sec2 .block .apply ul li:nth-child(1)::after {
            content: "";
            display: block;
            position: absolute;
            top: -5vw;
            left: -7%;
            width: 22.5%;
            height: 19vw; }
        .sec2 .block .apply ul li:nth-child(2) {
          margin-bottom: 6.4%;
          padding: 4% 0 2.5%; }
          .sec2 .block .apply ul li:nth-child(2) p {
            margin-bottom: 1%;
            width: auto;
            margin-left: 6.5%; }
          .sec2 .block .apply ul li:nth-child(2)::after {
            top: -5vw;
            left: -7%;
            width: 22.5%;
            height: 19vw; }
    .sec2 .block .apply .image {
      margin-bottom: 8%; }
    .sec2 .block .apply .btn-agreement {
      width: 57.6%;
      height: 9.6vw;
      margin: 0 auto 7%;
      border-radius: 6vw; }
      .sec2 .block .apply .btn-agreement span {
        width: 100%;
        top: -1.5vw;
        left: -2%;
        border-radius: 6vw;
        border: 0.3vw solid #1a32d0; }
        .sec2 .block .apply .btn-agreement span:hover {
          top: -1.5vw;
          left: -2%; }
    .sec2 .block .box {
      margin-bottom: 4.5%; }
      .sec2 .block .box .btn1 {
        width: 47.8%;
        top: 28%;
        left: 4%; }
      .sec2 .block .box .btn2 {
        width: 47.8%;
        top: 27.2%;
        left: 4%; } }