@charset "UTF-8";
#top.cfn_front section .extralink {
  max-width: 960px;
  margin: 50px auto 0; }
  #top.cfn_front section .extralink ul {
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -webkit-align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; }
    #top.cfn_front section .extralink ul li {
      -webkit-box-flex: 2;
      -ms-flex: 2;
      flex: 2; }
      #top.cfn_front section .extralink ul li.extra-single {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1; }
      #top.cfn_front section .extralink ul li h2.top_ttl {
        font-size: 18px;
        height: 4em;
        display: -webkit-flex;
        -webkit-justify-content: center;
        -webkit-align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        #top.cfn_front section .extralink ul li h2.top_ttl span {
          font-size: inherit;
          font-weight: normal;
          display: block;
          line-height: 1.5em;
          font-family: "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
      #top.cfn_front section .extralink ul li .extra-wrapper {
        display: -webkit-flex;
        -webkit-justify-content: center;
        -webkit-align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-top: 10px; }
        #top.cfn_front section .extralink ul li .extra-wrapper a {
          width: 175px;
          display: block;
          height: 120px;
          margin-right: 20px;
          position: relative;
          font-family: "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
          #top.cfn_front section .extralink ul li .extra-wrapper a:last-child {
            margin-right: 0; }
          #top.cfn_front section .extralink ul li .extra-wrapper a figure {
            margin-top: 0px;
            width: 100%; }
          #top.cfn_front section .extralink ul li .extra-wrapper a span {
            display: -webkit-flex;
            -webkit-justify-content: center;
            -webkit-align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background: url(../images/extra/extra-arrow.svg) right 0.5em center no-repeat #4661c5;
            height: 4em;
            width: 90%;
            font-size: 12px;
            color: #fff;
            margin: auto;
            line-height: 1.3em;
            padding-right: 0.5em;
            position: absolute;
            left: 5%;
            bottom: -2em; }
      #top.cfn_front section .extralink ul li.extra-kyujin .extra-wrapper a {
        background: #e3fd99; }
      #top.cfn_front section .extralink ul li.extra-cf .extra-wrapper a {
        background: #f3c5d7; }
      #top.cfn_front section .extralink ul li.extra-online .extra-wrapper a {
        background: #ceeaf0; }
  @media screen and (max-width: 960px) {
    #top.cfn_front section .extralink {
      width: 100%; }
      #top.cfn_front section .extralink ul li .extra-wrapper a {
        width: 46%;
        margin-right: 2%;
        height: 13vw;
        font-size: 1.5vw; }
      #top.cfn_front section .extralink ul li.extra-single .extra-wrapper a {
        width: 100%; } }
  @media screen and (max-width: 768px) {
    #top.cfn_front section .extralink {
      margin-bottom: 5vw; }
      #top.cfn_front section .extralink ul {
        display: block; }
        #top.cfn_front section .extralink ul li {
          width: 100%; }
          #top.cfn_front section .extralink ul li h2.top_ttl {
            font-size: 5vw;
            height: 2em;
            margin-bottom: 3vw; }
            #top.cfn_front section .extralink ul li h2.top_ttl br {
              display: none; }
          #top.cfn_front section .extralink ul li .extra-wrapper {
            padding-top: 5vw;
            display: block;
            width: 90%;
            margin: auto; }
            #top.cfn_front section .extralink ul li .extra-wrapper a {
              width: 100%;
              padding-right: 4%;
              height: auto;
              margin-bottom: 3vw;
              display: -webkit-flex;
              -webkit-justify-content: flex-start;
              -webkit-align-items: center;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: start;
              -ms-flex-pack: start;
              justify-content: flex-start;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center; }
              #top.cfn_front section .extralink ul li .extra-wrapper a figure {
                width: 50%;
                margin-top: 0; }
              #top.cfn_front section .extralink ul li .extra-wrapper a span {
                position: static;
                font-size: 4vw;
                background-size: 1.4em; } }

#top.cfn_front section .intro {
  background: #f5f5f5;
  padding: 40px 0;
  margin-top: 80px; }
  #top.cfn_front section .intro .intro-wrapper {
    max-width: 960px;
    margin: auto;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -webkit-align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; }
    #top.cfn_front section .intro .intro-wrapper > div {
      background: #fff;
      width: 48%;
      border-top: solid 5px #001273;
      padding-bottom: 20px; }
      #top.cfn_front section .intro .intro-wrapper > div h3 {
        text-align: center; }
        #top.cfn_front section .intro .intro-wrapper > div h3 span {
          display: block;
          margin-bottom: 1em;
          padding: 0.5em 0;
          font-family: "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
          font-size: 22px; }
        #top.cfn_front section .intro .intro-wrapper > div h3 figure {
          display: block;
          text-align: center; }
      #top.cfn_front section .intro .intro-wrapper > div.beginer ul {
        width: 90%;
        margin: auto;
        margin-bottom: 20px; }
        #top.cfn_front section .intro .intro-wrapper > div.beginer ul li {
          margin-bottom: 10px; }
          #top.cfn_front section .intro .intro-wrapper > div.beginer ul li a, #top.cfn_front section .intro .intro-wrapper > div.beginer ul li span {
            display: none;
            display: -webkit-flex;
            -webkit-justify-content: center;
            -webkit-align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background: url(../images/intro/intro-beginer-arrow.svg) right 0.7em center no-repeat #001273;
            color: #fff;
            font-size: 18px;
            height: 4em;
            font-family: "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
            padding: 0 1em;
            line-height: 1.4em;
            text-align: center;
            border-radius: 0.5em; }
          #top.cfn_front section .intro .intro-wrapper > div.beginer ul li a {
            -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            -o-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); }
            #top.cfn_front section .intro .intro-wrapper > div.beginer ul li a:hover {
              background-color: #3a50c9; }
          #top.cfn_front section .intro .intro-wrapper > div.beginer ul li span {
            background: #ccc; }
      #top.cfn_front section .intro .intro-wrapper > div.beginer .message {
        width: 90%;
        margin: auto;
        display: -webkit-flex;
        -webkit-justify-content: space-between;
        -webkit-align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        #top.cfn_front section .intro .intro-wrapper > div.beginer .message p {
          padding-left: 1em;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          font-family: "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
      #top.cfn_front section .intro .intro-wrapper > div.support ul {
        width: 90%;
        margin: auto;
        border-top: solid 1px #ccc; }
        #top.cfn_front section .intro .intro-wrapper > div.support ul li {
          border-bottom: solid 1px #ccc; }
          #top.cfn_front section .intro .intro-wrapper > div.support ul li a {
            display: -webkit-flex;
            -webkit-justify-content: flex-start;
            -webkit-align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-size: 18px;
            font-family: "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
            color: #000;
            background: url(../images/intro/intro-support-arrow.svg) right 1em center no-repeat;
            height: 5.5em;
            padding-left: 0.5em;
            padding-right: 3em;
            -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            -o-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); }
            #top.cfn_front section .intro .intro-wrapper > div.support ul li a:hover {
              background-color: #f5f5f5; }
  @media screen and (max-width: 960px) {
    #top.cfn_front section .intro .intro-wrapper {
      width: 96%; }
      #top.cfn_front section .intro .intro-wrapper > div.beginer ul li a {
        padding-right: 2em; }
      #top.cfn_front section .intro .intro-wrapper > div.beginer .message p {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1; }
        #top.cfn_front section .intro .intro-wrapper > div.beginer .message p br {
          display: none; }
      #top.cfn_front section .intro .intro-wrapper > div.beginer .message figure {
        width: 20%;
        margin-right: 3%; } }
  @media screen and (max-width: 768px) {
    #top.cfn_front section .intro {
      margin-top: 10vw;
      padding: 7vw 0; }
      #top.cfn_front section .intro .intro-wrapper {
        display: block; }
        #top.cfn_front section .intro .intro-wrapper > div {
          width: 100%; }
          #top.cfn_front section .intro .intro-wrapper > div h3 {
            font-size: 4vw; }
          #top.cfn_front section .intro .intro-wrapper > div.beginer {
            margin-bottom: 4vw; }
            #top.cfn_front section .intro .intro-wrapper > div.beginer ul li a {
              font-size: 3.5vw;
              background-size: 1.5em; }
            #top.cfn_front section .intro .intro-wrapper > div.beginer .message p {
              font-size: 3.5vw; }
          #top.cfn_front section .intro .intro-wrapper > div.support ul li a {
            font-size: 4vw;
            height: 5em; } }

#top.cfn_front section.livechannel-banner {
  padding-top: 80px; }
  #top.cfn_front section.livechannel-banner .cfn_container .nomal--bnr a .txtspace > figure {
    display: none; }
  @media screen and (max-width: 768px) {
    #top.cfn_front section.livechannel-banner .cfn_container .nomal--bnr a > figure {
      display: none; }
    #top.cfn_front section.livechannel-banner .cfn_container .nomal--bnr a .txtspace > figure {
      display: block; }
      #top.cfn_front section.livechannel-banner .cfn_container .nomal--bnr a .txtspace > figure img {
        width: 100%; } }