/* CSS Document */
@media screen and (min-width: 751px) {
  .nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    z-index: 100; }
    .nav .nav-list li {
      margin: 24px 0;
      width: 13px;
      transition: opacity 0.3s ease-out; }
      .nav .nav-list li:hover {
        opacity: 0.5; }
  .hero-content {
    padding-top: 118px;
    overflow: hidden; }
    .hero-content .tit {
      margin: 0 auto 85px;
      width: 52%;
      max-width: 565px; }
      .hero-content .tit::before {
        content: '';
        position: absolute;
        display: block;
        top: 28.375%;
        left: -46.37%;
        width: 51.6%;
        max-width: 291px;
        height: 364px;
        background: url(../imgs/top/hero/ill.png) center top no-repeat;
        background-size: contain; }
      .hero-content .tit::after {
        content: '';
        position: absolute;
        display: block;
        top: 43.479%;
        right: -48.32%;
        width: 53.1%;
        max-width: 300px;
        height: 286px;
        background: url(../imgs/common/ill_monkey.png) center top no-repeat;
        background-size: contain; }
    .hero-content .copy {
      margin: 0 auto 75px;
      width: 85%;
      max-width: 878px; }
      
      .hero-content .end{
      margin: 0 auto 75px;
      width: 85%;
      max-width: 878px;
      background: #fff;
      border: 5px solid #00a2b0;
      box-sizing: border-box;
      font-size: 24px;
      text-align: center;
      padding: 20px;
      }
      
  .content {
    padding-top: 100px; }
    .content .content-tit {
      margin: 0 auto;
      max-width: 340px; }
    .content .btn {
      width: 90%;
      max-width: 400px;
      background: #fffad4;
      border-radius: 8px;
      transition: opacity 0.3s ease-out; }
      .content .btn::after {
        content: '';
        display: block;
        position: absolute;
        top: 38%;
        right: -11px;
        width: 42px;
        height: 8px;
        background: url(../imgs/common/btn_arw.svg) center top no-repeat;
        background-size: contain;
        transition: right 0.3s ease-out; }
      .content .btn:hover {
        opacity: 0.7; }
        .content .btn:hover::after {
          right: -16px; }
    .content::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 1px;
      height: 80px;
      background: #140a00; }
    .content.content-event {
      height: 680px;
      background: rgba(218, 252, 255, 0.8) url(../imgs/top/event/pic_event.png) center top no-repeat; }
      .content.content-event .inner {
        margin: 0 auto;
        width: 95%;
        max-width: 1080px; }
        .content.content-event .inner .box {
          margin-top: 90px;
          width: 60%;
          max-width: 600px; }
          .content.content-event .inner .box .content-subtit {
            margin: 0 auto 33px;
            width: 253px; }
          .content.content-event .inner .box .term {
            z-index: 10; }
            .content.content-event .inner .box .term::after {
              content: '';
              position: absolute;
              top: 90px;
              right: -45px;
              display: block;
              width: 20%;
              height: 141px;
              background: url(../imgs/top/event/ill_event.png) center top no-repeat;
              background-size: contain; }
          .content.content-event .inner .box .text-1 {
            margin: 0 auto 55px;
            width: 100%;
            max-width: 540px; }
          .content.content-event .inner .box .text-2 {
            margin: 30px auto 0;
            width: 365px; }
          .content.content-event .inner .box .text-date {
            margin: 23px auto 43px;
            width: 367px; }
          .content.content-event .inner .box .btn {
            margin: 0 auto;
            width: 66.7%; }
        .content.content-event .inner .note {
          margin: 50px 0 0 calc(100% - 89px);
          width: 89px; }
    .content.content-product {
      margin: 0 auto;
      width: 95%;
      max-width: 1320px;
      height: 1120px; }
      .content.content-product::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -1000px;
        width: 1300px;
        height: 1330px;
        background: url(../imgs/top/product/bg_product.jpg) center top no-repeat;
        background-size: contain; }
      .content.content-product .content-subtit {
        margin: 60px auto 42px;
        width: 21.25%;
        max-width: 252px;
        z-index: 10; }
      .content.content-product .text-date {
        margin: 0 auto;
        width: 20%;
        max-width: 238px;
        z-index: 10; }
      .content.content-product .box {
        margin: -328px 0 0 45.44%;
        padding-bottom: 50px;
        width: 54.55%;
        max-width: 720px;
        background: rgba(255, 255, 255, 0.9); }
        .content.content-product .box .box-copy {
          margin: 48px auto 0;
          width: 48%;
          max-width: 340px; }
        .content.content-product .box .box-tit {
          margin: 45px auto 35px;
          width: 65.56%;
          max-width: 472px; }
        .content.content-product .box .text {
          margin: 0 auto;
          text-align: center;
          width: 90%; }
          .content.content-product .box .text sup {
            top: -3px; }
          .content.content-product .box .text span {
            font-size: 13px; }
        .content.content-product .box .btn {
          margin: 33px auto 0;
          width: 75%; }
    .content.content-campaign {
      padding-top: 0; }
      .content.content-campaign .inner {
        margin: 0 auto;
        padding-top: 100px;
        width: 95%;
        max-width: 1320px;
        background: rgba(249, 255, 255, 0.9); }
        .content.content-campaign .inner .box {
          margin: 0 auto;
          width: 95%;
          max-width: 960px; }
          .content.content-campaign .inner .box .senchaku {
            position: absolute;
            top: -65px;
            right: 0;
            width: 23%;
            max-width: 217px; }
          .content.content-campaign .inner .box .content-subtit {
            margin: 70px auto 30px;
            width: 58%;
            max-width: 550px; }
            .content.content-campaign .inner .box .content-subtit::before {
              content: '';
              display: block;
              position: absolute;
              top: -84.9%;
              left: -38.36%;
              width: 34%;
              max-width: 187px;
              height: 357px;
              background: url(../imgs/top/campaign/ill_cp_1.png) center top no-repeat;
              background-size: contain; }
            .content.content-campaign .inner .box .content-subtit::after {
              content: '';
              display: block;
              position: absolute;
              top: 60.37%;
              right: -38.36%;
              width: 36%;
              max-width: 198px;
              height: 209px;
              background: url(../imgs/top/campaign/ill_cp_2.png) center top no-repeat;
              background-size: contain; }
          .content.content-campaign .inner .box .term-box {
            margin: 0 auto 48px;
            width: 70%;
            max-width: 600px; }
            .content.content-campaign .inner .box .term-box .text-date {
              margin: 18px auto 0;
              width: 77%;
              max-width: 458px; }
          .content.content-campaign .inner .box .text {
            margin: 0 auto;
            width: 82%;
            max-width: 644px; }
          .content.content-campaign .inner .box .step-box {
            margin: 38px auto 0;
            display: flex;
            justify-content: space-between; }
            .content.content-campaign .inner .box .step-box li {
              width: 31.25%; }
              .content.content-campaign .inner .box .step-box li::after {
                content: '';
                display: block;
                position: absolute;
                bottom: 39.65%;
                right: -8.33%;
                width: 8.33%;
                height: 50px; }
              .content.content-campaign .inner .box .step-box li.step-1::after {
                background: url(../imgs/top/campaign/pic_step_1_arw.svg) right center no-repeat;
                background-size: 50px 50px; }
              .content.content-campaign .inner .box .step-box li.step-1 .pic {
                position: absolute;
                top: 56.15%;
                left: 50%;
                transform: translateX(-50%);
                width: 87%;
                max-width: 260px; }
              .content.content-campaign .inner .box .step-box li.step-2::after {
                background: url(../imgs/top/campaign/pic_step_2_arw.svg) right center no-repeat;
                background-size: 50px 50px; }
              .content.content-campaign .inner .box .step-box li.step-3::after {
                content: none; }
              .content.content-campaign .inner .box .step-box li.step-3 .pic {
                position: absolute;
                top: 62%;
                left: 5.66%;
                width: 45%; }
      .content.content-campaign .bnr {
        margin: 100px auto;
        width: 95%;
        max-width: 750px;
        border: 1px solid #aad1ea;
        box-sizing: border-box;
        transition: opacity 0.3s ease-out; }
        .content.content-campaign .bnr .typo {
          position: absolute;
          top: 65%;
          right: 3.466%;
          width: 45.4%;
          max-width: 340px; }
          .content.content-campaign .bnr .typo::after {
            content: '';
            display: block;
            position: absolute;
            top: 69.64%;
            right: 3.53%;
            width: 12.36%;
            max-width: 42px;
            height: 8px;
            background: url(../imgs/common/btn_arw.svg) center top no-repeat;
            background-size: contain;
            transition: right 0.3s ease-out; }
        .content.content-campaign .bnr:hover {
          opacity: 0.7; }
          .content.content-campaign .bnr:hover .typo::after {
            right: calc(3.53% - 10px); } }

@media screen and (min-width: 751px) and (max-width: 1200px) {
  .hero-content {
    padding-top: 0.118rem; }
    .hero-content .tit {
      margin: 0 auto 0.085rem;
      width: 0.565rem; }
    .hero-content .copy {
      margin: 0 auto 0.075rem;
      width: 0.878rem; }
      
      .hero-content .end{
      margin: 0 auto 75px;
      width: 85%;
      max-width: 878px;
      background: #fff;
      border: 5px solid #00a2b0;
      box-sizing: border-box;
      font-size: 0.023rem;
      text-align: center;
      padding: 20px;
      }
      
  .content {
    padding-top: 0.100rem; }
    .content .content-tit {
      width: 0.340rem; }
    .content .btn {
      width: 0.400rem;
      border-radius: 0.008rem; }
      .content .btn::after {
        right: -0.011rem;
        width: 0.042rem;
        height: 0.008rem; }
      .content .btn:hover::after {
        right: -0.016rem; }
    .content::after {
      height: 0.080rem; }
    .content.content-event {
      height: 0.680rem;
      background-size: cover; }
      .content.content-event .inner {
        width: 1.080rem; }
        .content.content-event .inner .box {
          margin-top: 0.090rem;
          width: 0.600rem; }
          .content.content-event .inner .box .content-subtit {
            margin: 0 auto 0.033rem;
            width: 0.253rem; }
          .content.content-event .inner .box .term::after {
            top: 0.090rem;
            right: -0.045rem;
            height: 0.141rem; }
          .content.content-event .inner .box .text-1 {
            margin: 0 auto 0.055rem;
            width: 0.540rem; }
          .content.content-event .inner .box .text-2 {
            margin: 0.030rem auto 0;
            width: 0.365rem; }
          .content.content-event .inner .box .text-date {
            margin: 0.023rem auto 0.043rem;
            width: 0.367rem; }
        .content.content-event .inner .note {
          margin: 0.05rem 0 0 calc(100% - 89px); }
    .content.content-product {
      width: 100%;
      height: 1.120rem; }
      .content.content-product::before {
        margin-left: -1.000rem;
        width: 1.300rem;
        height: 1.330rem; }
      .content.content-product .content-subtit {
        margin: 0.06rem auto 0.042rem;
        width: 0.252rem; }
      .content.content-product .text-date {
        width: 0.238rem; }
      .content.content-product .box {
        margin: -0.25rem 0 0 calc(100% - 0.660rem);
        padding-bottom: 0.050rem;
        width: 0.640rem; }
        .content.content-product .box .box-copy {
          margin: 0.048rem auto 0;
          width: 0.340rem; }
        .content.content-product .box .box-tit {
          margin: 0.045rem auto 0.035rem;
          width: 0.472rem; }
        .content.content-product .box .text sup {
          top: -0.003rem; }
        .content.content-product .box .text span {
          font-size: 0.013rem; }
        .content.content-product .box .btn {
          margin: 0.033rem auto 0; }
    .content.content-campaign {
      padding-top: 0; }
      .content.content-campaign .inner {
        margin: 0 0.02rem;
        padding-top: 0.100rem; }
        .content.content-campaign .inner .box {
          width: 0.960rem; }
          .content.content-campaign .inner .box .senchaku {
            top: -0.065rem; }
          .content.content-campaign .inner .box .content-subtit {
            margin: 0.07rem auto 0.03rem;
            width: 0.550rem; }
          .content.content-campaign .inner .box .term-box {
            margin: 0 auto 0.048rem;
            width: 0.600rem; }
            .content.content-campaign .inner .box .term-box .text-date {
              margin: 0.018rem auto 0;
              width: 0.458rem; }
          .content.content-campaign .inner .box .text {
            width: 0.644rem; }
          .content.content-campaign .inner .box .step-box {
            margin: 0.038rem auto 0; }
      .content.content-campaign .bnr {
        margin: 0.100rem auto;
        width: 0.750rem; }
        .content.content-campaign .bnr .typo {
          width: 0.340rem; }
          .content.content-campaign .bnr .typo::after {
            width: 0.042rem;
            height: 0.008rem; } }

@media screen and (max-width: 750px) {
  .nav {
    display: none; }
  .hero-content {
    padding-top: 0.130rem;
    overflow: hidden; }
    .hero-content .tit {
      margin: 0 auto;
      width: 0.565rem; }
      .hero-content .tit::before {
        content: '';
        position: absolute;
        display: block;
        top: 0.436rem;
        left: -0.008rem;
        width: 0.291rem;
        height: 0.364rem;
        background: url(../imgs/top/hero/ill.png) center top no-repeat;
        background-size: contain; }
      .hero-content .tit::after {
        content: '';
        position: absolute;
        display: block;
        top: 0.508rem;
        right: -0.028rem;
        width: 0.300rem;
        height: 0.286rem;
        background: url(../imgs/common/ill_monkey.png) center top no-repeat;
        background-size: contain; }
    .hero-content .copy {
      margin: 0.36rem auto 0.04rem;
      width: 0.525rem; }
      
      .hero-content .end{
      margin: 0.04rem auto 0.04rem;
      width: 90%; 
      background: #fff;
      border: 5px solid #00a2b0;
      box-sizing: border-box;
      font-size: 0.030rem;
      text-align: center;
      padding: 10px 10px;
      }
      
  .content {
    padding-top: 0.100rem; }
    .content .content-tit {
      margin: 0 auto;
      max-width: 0.340rem; }
    .content .btn {
      width: 0.400rem;
      border-radius: 0.008rem;
      background: #fffad4; }
      .content .btn::after {
        content: '';
        display: block;
        position: absolute;
        top: 0.020rem;
        right: -0.011rem;
        width: 0.042rem;
        height: 0.008rem;
        background: url(../imgs/common/btn_arw.svg) center top no-repeat;
        background-size: contain; }
    .content::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 1px;
      height: 0.080rem;
      background: #140a00; }
    .content.content-event {
      padding-bottom: 0.090rem;
      background: rgba(218, 252, 255, 0.8) url(../imgs/top/event/pic_event_sp.jpg) center top no-repeat;
      background-size: contain; }
      .content.content-event .inner {
        margin: 0 auto; }
        .content.content-event .inner .box {
          margin: 0.430rem auto 0;
          width: 0.600rem; }
          .content.content-event .inner .box .content-subtit {
            margin: 0 auto 0.033rem;
            width: 0.253rem; }
          .content.content-event .inner .box .term {
            z-index: 10; }
            .content.content-event .inner .box .term::after {
              content: '';
              position: absolute;
              top: 0.060rem;
              right: -0.045rem;
              display: block;
              width: 0.120rem;
              height: 0.140rem;
              background: url(../imgs/top/event/ill_event.png) center top no-repeat;
              background-size: contain; }
          .content.content-event .inner .box .text-1 {
            margin: 0 auto 0.055rem;
            width: 0.540rem; }
          .content.content-event .inner .box .text-2 {
            margin: 0.044rem auto 0;
            width: 0.505rem; }
          .content.content-event .inner .box .text-date {
            margin: 0.023rem auto 0.043rem;
            width: 0.367rem; }
          .content.content-event .inner .box .btn {
            margin: 0 auto; }
        .content.content-event .inner .note {
          position: absolute;
          top: -0.103rem;
          right: 0.020rem;
          width: 0.138rem; }
    .content.content-product {
      margin: 0 auto 0.1rem;
      background: url(../imgs/top/product/bg_product_sp.jpg) center top no-repeat;
      background-size: contain; }
      .content.content-product .content-subtit {
        margin: 0.055rem 0 0.04rem 0.45rem;
        width: 0.252rem;
        z-index: 10; }
      .content.content-product .text-date {
        margin: 0 0 0.2rem 0.45rem;
        width: 0.238rem;
        z-index: 10; }
      .content.content-product .box {
        margin: 0 auto;
        padding-bottom: 0.050rem;
        width: 0.670rem;
        background: rgba(255, 255, 255, 0.9); }
        .content.content-product .box .box-copy {
          margin: 0.048rem auto 0;
          width: 0.340rem; }
        .content.content-product .box .box-tit {
          margin: 0.045rem auto 0.035rem;
          width: 0.472rem; }
        .content.content-product .box .text {
          text-align: center; }
          .content.content-product .box .text sup {
            top: -0.004rem; }
          .content.content-product .box .text span {
            font-size: 0.020rem; }
        .content.content-product .box .btn {
          margin: 0.050rem auto 0; }
    .content.content-campaign {
      padding-top: 0; }
      .content.content-campaign .inner {
        margin: 0 auto;
        padding-top: 0.100rem;
        width: 0.710rem;
        background: rgba(249, 255, 255, 0.9); }
        .content.content-campaign .inner .box {
          margin: 0 auto;
          padding-bottom: 0.024rem; }
          .content.content-campaign .inner .box .senchaku {
            position: absolute;
            top: -0.020rem;
            right: 0.012rem;
            width: 0.170rem; }
          .content.content-campaign .inner .box .content-subtit {
            margin: 0.068rem auto 0.048rem;
            width: 0.360rem; }
            .content.content-campaign .inner .box .content-subtit::before {
              content: '';
              display: block;
              position: absolute;
              top: -0.130rem;
              left: -0.164rem;
              width: 0.187rem;
              height: 0.357rem;
              background: url(../imgs/top/campaign/ill_cp_1.png) center top no-repeat;
              background-size: contain; }
            .content.content-campaign .inner .box .content-subtit::after {
              content: '';
              display: block;
              position: absolute;
              top: 0.030rem;
              right: -0.169rem;
              width: 0.198rem;
              height: 0.209rem;
              background: url(../imgs/top/campaign/ill_cp_2.png) center top no-repeat;
              background-size: contain; }
          .content.content-campaign .inner .box .term-box {
            margin: 0 auto 0.048rem;
            width: 0.600rem; }
            .content.content-campaign .inner .box .term-box .text-date {
              margin: 0.018rem auto 0;
              width: 0.458rem; }
          .content.content-campaign .inner .box .text {
            margin: 0 auto;
            width: 0.644rem; }
          .content.content-campaign .inner .box .step-box {
            margin: 0.058rem 0 0 0.02rem;
            width: 0.690rem; }
            .content.content-campaign .inner .box .step-box li {
              margin-bottom: 0.016rem; }
              .content.content-campaign .inner .box .step-box li::after {
                content: '';
                display: block;
                position: absolute;
                left: 50%;
                transform: translate(-50%);
                bottom: -0.025rem;
                width: 0.050rem;
                height: 0.025rem; }
              .content.content-campaign .inner .box .step-box li.step-1::after {
                background: url(../imgs/top/campaign/pic_step_1_arw.svg) center bottom no-repeat;
                background-size: cover; }
              .content.content-campaign .inner .box .step-box li.step-1 .pic {
                position: absolute;
                top: 0.074rem;
                right: 0.028rem;
                width: 0.260rem; }
              .content.content-campaign .inner .box .step-box li.step-2::after {
                background: url(../imgs/top/campaign/pic_step_2_arw.svg) center bottom no-repeat;
                background-size: cover; }
              .content.content-campaign .inner .box .step-box li.step-3::after {
                content: none; }
              .content.content-campaign .inner .box .step-box li.step-3 .pic {
                position: absolute;
                top: 0.103rem;
                left: 0.402rem;
                width: 0.136rem; }
      .content.content-campaign .bnr {
        margin: 0.100rem auto;
        border: 1px solid #aad1ea;
        box-sizing: border-box; }
        .content.content-campaign .bnr .typo {
          position: absolute;
          top: 0.164rem;
          right: 0.026rem;
          width: 0.340rem; }
          .content.content-campaign .bnr .typo::after {
            content: '';
            display: block;
            position: absolute;
            top: 0.039rem;
            right: 0.012rem;
            width: 0.042rem;
            height: 0.008rem;
            background: url(../imgs/common/btn_arw.svg) center top no-repeat;
            background-size: contain; } }