#special {
  padding: 125px 0 200px; }
  #special .inner {
    width: 1300px;
    margin: auto; }
  #special h1 {
    text-align: center;
    margin-bottom: 50px; }
  #special .text1 {
    color: #fff;
    font-size: 28px;
    text-align: center;
    margin-top: 50px; }
  #special .box1 {
    width: 1150px;
    padding: 28px 25px;
    margin: 0 auto;
    background: url("../img/broadcast/bg_box-pc.png") no-repeat top center;
    background-size: contain; }
    #special .box1 .youtube {
      position: relative;
      height: 620px; }
      #special .box1 .youtube .thumb-box {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer; }
        #special .box1 .youtube .thumb-box .play {
          position: absolute;
          top: 232px;
          left: 472px; }
        #special .box1 .youtube .thumb-box:hover .play {
          opacity: 0.8; }
  #special .box2 {
    width: 1100px;
    margin: 50px auto 170px;
    position: relative; }
    #special .box2:before {
      content: '';
      background-color: #fff;
      width: 100%;
      height: 500px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1; }
    #special .box2 h2 {
      text-align: center;
      color: #1a32d0;
      font-size: 30px;
      padding: 50px 0; }
    #special .box2 .list-box ul {
      font-size: 0;
      text-align: left;
      padding: 0 50px;
      background-color: #fff; }
      #special .box2 .list-box ul li {
        display: inline-block;
        width: 215px;
        margin-bottom: 30px;
        margin-right: 46px; }
        #special .box2 .list-box ul li:nth-of-type(4n) {
          margin-right: 0; }
        #special .box2 .list-box ul li .image {
          height: 215px;
          position: relative;
          background-color: #1a32d0;
          cursor: pointer;
          margin-bottom: 14px; }
          #special .box2 .list-box ul li .image span {
            position: absolute;
            top: -7px;
            left: -7px;
            background-color: #fff; }
          #special .box2 .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; }
        #special .box2 .list-box ul li .btn {
          position: relative;
          width: 204px;
          height: 42px;
          margin: 0 auto;
          border-radius: 50px;
          background-color: #1a32d0; }
          #special .box2 .list-box ul li .btn a {
            position: absolute;
            top: -8px;
            left: -6px;
            display: block;
            border: 2px solid #1a32d0;
            background-color: #fff;
            border-radius: 50px;
            transition: all 0.2s ease; }
            #special .box2 .list-box ul li .btn a:hover {
              top: 0;
              left: 0; }
    #special .box2 .list-box .btn-more {
      position: relative;
      width: 379px;
      height: 61px;
      margin: 50px auto 0;
      border-radius: 50px;
      background-color: #fcff00;
      cursor: pointer; }
      #special .box2 .list-box .btn-more span {
        position: absolute;
        top: -8px;
        left: -6px;
        display: block;
        background-color: #1a32d0;
        border-radius: 50px;
        transition: all 0.2s ease; }
        #special .box2 .list-box .btn-more span:hover {
          top: 0;
          left: 0; }
    #special .box2 .list-box .list2, #special .box2 .list-box .more2,
    #special .box2 .list-box .list3, #special .box2 .list-box .more3,
    #special .box2 .list-box .list4, #special .box2 .list-box .more4,
    #special .box2 .list-box .list5, #special .box2 .list-box .more5,
    #special .box2 .list-box .list6, #special .box2 .list-box .more6,
    #special .box2 .list-box .list7, #special .box2 .list-box .more7,
    #special .box2 .list-box .list8, #special .box2 .list-box .more8,
    #special .box2 .list-box .list9, #special .box2 .list-box .more9,
    #special .box2 .list-box .list10, #special .box2 .list-box .more10,
    #special .box2 .list-box .list11, #special .box2 .list-box .more11,
    #special .box2 .list-box .list12, #special .box2 .list-box .more12,
    #special .box2 .list-box .list13, #special .box2 .list-box .more13,
    #special .box2 .list-box .list14 {
      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: 8%;
    right: 15%;
    cursor: pointer; }
  #modal-block .close-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150vh; }
  #modal-block .modal {
    display: none;
    width: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 10px); }
    #modal-block .modal .image {
      height: 78vh;
      text-align: center; }
      #modal-block .modal .image img {
        height: 100%; }

@media only screen and (max-width: 768px) {
  #content {
    background-size: cover,contain; }

  #special {
    padding: 18% 0; }
    #special .inner {
      width: 100%; }
      #special .inner .text1 {
        font-size: calc(100vw / 22);
        padding-bottom: calc(60 / 640 * 100vw); }
      #special .inner .box1 {
        width: auto;
        margin: 0 2.5%;
        padding: 3.2% 3.8%; }
        #special .inner .box1 .youtube {
          height: 49.2vw; }
          #special .inner .box1 .youtube .thumb-box .play {
            width: 15%;
            top: 37%;
            left: 42.5%; }
    #special .box2 {
      width: auto !important; }
      #special .box2:before {
        width: 96% !important;
        margin-left: 2%; }
      #special .box2 h2 {
        font-size: calc(100vw / 22);
        line-height: 1.2; }
      #special .box2 .list-box {
        margin: 0 2%; }
        #special .box2 .list-box ul {
          font-size: 0;
          text-align: left;
          padding: 0 10.4%;
          background-color: #fff; }
          #special .box2 .list-box ul li {
            display: inline-block;
            width: 44.2%;
            margin-bottom: 7%;
            margin-right: 11.6%; }
            #special .box2 .list-box ul li:nth-of-type(4n), #special .box2 .list-box ul li:nth-of-type(2n) {
              margin-right: 0; }
            #special .box2 .list-box ul li .image {
              height: 33.6vw;
              position: relative;
              background-color: #1a32d0;
              cursor: pointer;
              margin-bottom: 6.5%; }
              #special .box2 .list-box ul li .image span {
                width: 100%;
                position: absolute;
                top: -4%;
                left: -4%;
                background-color: transparent; }
            #special .box2 .list-box ul li .btn {
              position: relative;
              width: 204px;
              height: 42px;
              margin: 0 auto;
              border-radius: 50px;
              background-color: #1a32d0; }
              #special .box2 .list-box ul li .btn a {
                position: absolute;
                top: -8px;
                left: -6px;
                display: block;
                border: 2px solid #1a32d0;
                background-color: #fff;
                border-radius: 50px;
                transition: all 0.2s ease; }
                #special .box2 .list-box ul li .btn a:hover {
                  top: 0;
                  left: 0; }
        #special .box2 .list-box .btn-more {
          width: 86%;
          height: 8.3vw;
          border-radius: 6vw; }
          #special .box2 .list-box .btn-more span {
            width: 100%;
            top: -1vw;
            left: -0.5%;
            border-radius: 6vw; }
            #special .box2 .list-box .btn-more span:hover {
              top: -1vw;
              left: -0.5%; }

  #modal-block .close {
    top: 14%;
    right: 4.5%; }
  #modal-block .modal {
    width: 100%; }
    #modal-block .modal .image {
      width: 90%;
      margin: 0 auto; }
    #modal-block .modal .image {
      height: auto; }
      #modal-block .modal .image img {
        height: auto; }

  #modal-block .close {
    font-size: 10vw;
    position: absolute;
    top: 14%;
    right: 4.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%;
      width: 32%;
      height: 6.6vw;
      border-radius: 6vw; }
      #modal-block .modal .btn span {
        top: -1.5vw;
        left: -4.2%;
        border-radius: 6vw;
        border: 0.3vw solid #1a32d0; } }