@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
共通
---------------------------------------------------------------------------------------------------------------------
*/
.linkMoji a {
  color: #fff;
  font-size: 12px;
  position: relative;
  display: inline-block;
  text-decoration: none; }
  @media (min-width: 768px) {
    .linkMoji a {
      font-size: 14px; } }
  .linkMoji a::after {
    position: absolute;
    bottom: 0px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #fff;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .3s; }
  .linkMoji a:hover::after {
    transform-origin: left top;
    transform: scale(1, 1); }
  .linkMoji a img {
    margin-top: -2.5px;
    margin-left: 5px;
    width: 15px; }

.BackColorA {
  background-color: #151617; }

.Mont {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  letter-spacing: 0.12em; }

/*
---------------------------------------------------------------------------------------------------------------------
メインビジュアル
---------------------------------------------------------------------------------------------------------------------
*/
#MVabout {
  position: relative;
  height: 448px; }
  @media (min-width: 390px) {
    #MVabout {
      height: 470px; } }
  @media (min-width: 768px) {
    #MVabout {
      height: 80vh; } }
  @media (min-width: 1024px) {
    #MVabout {
      height: 100vh; } }
  #MVabout .Back {
    background: url("../../assets-page/img/About/AboutUS-sp.webp");
    background-size: cover;
    background-position: center top;
    position: fixed;
    width: 100%;
    z-index: -1000;
    top: 40px;
    height: 448px; }
    @media (min-width: 390px) {
      #MVabout .Back {
        height: 470px; } }
    @media (min-width: 768px) {
      #MVabout .Back {
        top: 60px;
        height: 80vh; } }
    @media (min-width: 1024px) {
      #MVabout .Back {
        top: 0px;
        height: 100vh;
        background: url("../../assets-page/img/About/AboutUS-pc.webp");
        background-size: cover;
        background-position: center top; } }
    #MVabout .Back:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(to top, #111111 0%, #EDEDED 100%);
      height: 100%;
      z-index: 0;
      mix-blend-mode: multiply;
      opacity: 0.4; }
  #MVabout .Title {
    position: absolute;
    left: 0;
    right: 0;
    max-width: 1200px;
    width: 90%;
    margin: auto;
    bottom: 0px; }
    @media (min-width: 768px) {
      #MVabout .Title {
        bottom: -2px; } }
    @media (min-width: 1024px) {
      #MVabout .Title {
        width: 80%; } }
    @media (min-width: 1150px) {
      #MVabout .Title {
        width: 90%; } }
    #MVabout .Title .Copy {
      margin-bottom: 10px; }
      @media (min-width: 768px) {
        #MVabout .Title .Copy {
          margin-bottom: 30px; } }
      @media (min-width: 1024px) {
        #MVabout .Title .Copy {
          margin-bottom: 40px; } }
      #MVabout .Title .Copy img {
        width: 100%;
        height: auto; }
    #MVabout .Title .Logo img {
      width: 100%;
      height: auto; }

/*
---------------------------------------------------------------------------------------------------------------------
サブタイトル、ビデオエリア
---------------------------------------------------------------------------------------------------------------------
*/
#VideoArea {
  position: relative;
  height: 100vh;
  margin-top: -2px; }
  #VideoArea #video-area {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0px;
    overflow: hidden; }
    #VideoArea #video-area #video {
      position: absolute;
      z-index: 10;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 177.77777778vh;
      height: 56.25vw;
      min-height: 100%;
      min-width: 100%; }
    #VideoArea #video-area:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      height: 100%;
      z-index: 20; }
  #VideoArea .SabTitle {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 280px;
    z-index: 100;
    text-align: center;
    color: #fff; }
    @media (min-width: 768px) {
      #VideoArea .SabTitle {
        height: 200px; } }
    #VideoArea .SabTitle h2 {
      margin-bottom: 20px;
      font-size: 34px;
      line-height: 1.0em;
      font-weight: bold;
      font-feature-settings: "palt";
      letter-spacing: 0.05em; }
      @media (min-width: 768px) {
        #VideoArea .SabTitle h2 {
          font-size: 50px;
          margin-bottom: 40px; } }
      #VideoArea .SabTitle h2 .moji {
        margin-bottom: 5px; }
        @media (min-width: 768px) {
          #VideoArea .SabTitle h2 .moji {
            margin-bottom: 10px; } }
        #VideoArea .SabTitle h2 .moji.sita {
          line-height: 1.4em; }
    #VideoArea .SabTitle p {
      font-size: 20px;
      font-weight: bold;
      font-feature-settings: "palt";
      letter-spacing: 0.08em;
      line-height: 1.6em; }

/*
---------------------------------------------------------------------------------------------------------------------
番組横自動スクロール
---------------------------------------------------------------------------------------------------------------------
*/
#LiveDelivery {
  position: relative;
  padding-top: 10px; }
  #LiveDelivery .slideshow {
    padding-bottom: 10px; }
    #LiveDelivery .slideshow .imgBox {
      width: 180px;
      margin-right: 10px; }
      @media (min-width: 768px) {
        #LiveDelivery .slideshow .imgBox {
          width: 300px; }
          #LiveDelivery .slideshow .imgBox a {
            transition: .5s; }
            #LiveDelivery .slideshow .imgBox a:hover {
              opacity: 0.6; } }
      #LiveDelivery .slideshow .imgBox img {
        width: 100%;
        height: auto; }

/*
---------------------------------------------------------------------------------------------------------------------
PROGRAM - A はたらく人を紹介する様々なライブ番組を企画
---------------------------------------------------------------------------------------------------------------------
*/
#LiveProgram {
  padding-bottom: 5px; }
  #LiveProgram .PROGRAM-A {
    max-width: 1200px;
    width: 90%;
    margin: auto;
    position: relative; }
    #LiveProgram .PROGRAM-A .Line {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 5%;
      border-right: 1px solid #666666;
      height: 100%; }
      @media (min-width: 1024px) {
        #LiveProgram .PROGRAM-A .Line {
          left: 10%; } }
      @media (min-width: 1150px) {
        #LiveProgram .PROGRAM-A .Line {
          left: 15%; } }
      #LiveProgram .PROGRAM-A .Line p {
        position: absolute;
        bottom: 0;
        margin: auto;
        height: 230px;
        left: -25px; }
        #LiveProgram .PROGRAM-A .Line p img {
          width: auto;
          height: 230px; }
    #LiveProgram .PROGRAM-A .CommonText {
      color: #fff;
      max-width: 1000px;
      margin-left: 12%;
      padding-top: 40px; }
      @media (min-width: 768px) {
        #LiveProgram .PROGRAM-A .CommonText {
          padding-top: 100px;
          margin-left: 8%; } }
      @media (min-width: 1024px) {
        #LiveProgram .PROGRAM-A .CommonText {
          margin-left: 14%; } }
      @media (min-width: 1150px) {
        #LiveProgram .PROGRAM-A .CommonText {
          margin-left: 20%; } }
      #LiveProgram .PROGRAM-A .CommonText .h2Text {
        margin-bottom: 35px; }
        #LiveProgram .PROGRAM-A .CommonText .h2Text h2 {
          font-size: 28px;
          color: #fff;
          font-weight: bold;
          letter-spacing: 0.06em;
          line-height: 1.4em; }
          @media (min-width: 1024px) {
            #LiveProgram .PROGRAM-A .CommonText .h2Text h2 {
              font-size: 40px; } }
      #LiveProgram .PROGRAM-A .CommonText h4 {
        font-size: 18px;
        margin-bottom: 35px;
        font-weight: bold;
        line-height: 1.6em;
        font-feature-settings: "palt";
        letter-spacing: 0.05em; }
        @media (min-width: 1024px) {
          #LiveProgram .PROGRAM-A .CommonText h4 {
            font-size: 24px; } }
      #LiveProgram .PROGRAM-A .CommonText h5 {
        text-align: justify;
        display: inline-block;
        color: #D3D3D3;
        font-size: 13px;
        line-height: 1.7em;
        margin-bottom: 0; }
        @media (min-width: 1024px) {
          #LiveProgram .PROGRAM-A .CommonText h5 {
            font-size: 15px; } }

/*
---------------------------------------------------------------------------------------------------------------------
リクライブ配信一部公開！アーカイブをさくっと2分で！
---------------------------------------------------------------------------------------------------------------------
*/
#Archive2m {
  margin-top: -1px;
  padding: 80px 0 0px; }
  @media (min-width: 768px) {
    #Archive2m {
      padding: 120px 0 0; } }
  #Archive2m .Archive2m-In {
    max-width: 3000px;
    width: 100%;
    position: relative; }
    @media (min-width: 1400px) {
      #Archive2m .Archive2m-In {
        max-width: inherit;
        width: 100%; } }
    #Archive2m .Archive2m-In .Video2m {
      overflow-x: scroll;
      display: flex;
      margin-top: 20px;
      width: 100%;
      padding-bottom: 30px; }
      #Archive2m .Archive2m-In .Video2m .GifAnime {
        margin-right: 25px; }
        #Archive2m .Archive2m-In .Video2m .GifAnime:first-child {
          padding-left: 25px; }
        @media (min-width: 768px) {
          #Archive2m .Archive2m-In .Video2m .GifAnime {
            width: 400px; } }
        #Archive2m .Archive2m-In .Video2m .GifAnime a {
          transition: .5s; }
          #Archive2m .Archive2m-In .Video2m .GifAnime a:hover {
            opacity: 0.8; }
          #Archive2m .Archive2m-In .Video2m .GifAnime a .video-Photo img:hover {
            opacity: 0.8; }
        #Archive2m .Archive2m-In .Video2m .GifAnime img {
          width: 300px;
          height: auto;
          border-radius: 10px; }
          @media (min-width: 768px) {
            #Archive2m .Archive2m-In .Video2m .GifAnime img {
              width: 380px; } }
    #Archive2m .Archive2m-In ::-webkit-scrollbar-track {
      background-color: #1D1D1D; }
    #Archive2m .Archive2m-In ::-webkit-scrollbar {
      height: 8px; }
    #Archive2m .Archive2m-In ::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background-color: #393939; }

.ArchiveTitle {
  color: #fff;
  display: flex; }
  .ArchiveTitle h2 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 25px; }
    @media (min-width: 768px) {
      .ArchiveTitle h2 {
        font-size: 24px; } }
    .ArchiveTitle h2:after {
      border-top: 1px #fff solid;
      content: "";
      width: 5em;
      margin-left: 0.5em; }
      @media (min-width: 768px) {
        .ArchiveTitle h2:after {
          width: 7em;
          margin-left: 1em; } }
  .ArchiveTitle p {
    font-size: 14px;
    margin-top: 10px;
    margin-left: 1em;
    display: none; }
    @media (min-width: 768px) {
      .ArchiveTitle p {
        display: inherit; } }

/*
---------------------------------------------------------------------------------------------------------------------
For 就活生、For 採用担当者、ABOUT US　共通
---------------------------------------------------------------------------------------------------------------------
*/
.Contents {
  color: #fff; }
  .Contents h3 {
    color: #00A4E3;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px; }
    @media (min-width: 768px) {
      .Contents h3 {
        font-size: 24px; } }
  .Contents h2 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2em;
    font-feature-settings: "palt";
    letter-spacing: 0.08em; }
    @media (min-width: 768px) {
      .Contents h2 {
        font-size: 46px;
        letter-spacing: 0.12em;
        margin-bottom: 30px; } }
    @media (min-width: 1024px) {
      .Contents h2 {
        font-size: 60px; } }
  .Contents h4 {
    font-size: 16px;
    margin-bottom: 40px;
    font-feature-settings: "palt";
    letter-spacing: 0.08em;
    line-height: 1.4em; }
    @media (min-width: 768px) {
      .Contents h4 {
        font-size: 24px; } }
  .Contents p {
    font-size: 12px;
    text-align: justify;
    line-height: 1.6em;
    color: #D3D3D3;
    max-width: 500px;
    margin-bottom: 30px; }
    @media (min-width: 768px) {
      .Contents p {
        font-size: 15px;
        line-height: 1.8em;
        letter-spacing: 0.05em; } }
  .Contents h6 {
    font-size: 10px;
    color: #666666;
    margin-bottom: 40px;
    line-height: 1.6em; }

/*
---------------------------------------------------------------------------------------------------------------------
For 就活生
---------------------------------------------------------------------------------------------------------------------
*/
#JobHunting_About {
  background-image: url("../../assets-page/img/About/Back-1.webp");
  background-size: cover;
  background-repeat: no-repeat;
  height: 770px;
  width: 100%;
  position: relative;
  background-position: -180px; }
  @media (min-width: 768px) {
    #JobHunting_About {
      background-position: -200px;
      height: 990px; } }
  @media (min-width: 1024px) {
    #JobHunting_About {
      background-position: -160px; } }
  @media (min-width: 1150px) {
    #JobHunting_About {
      background-position: 0px; } }
  #JobHunting_About .Contents {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 28%;
    right: 4%;
    margin: auto;
    height: 600px; }
    @media (min-width: 768px) {
      #JobHunting_About .Contents {
        left: 34%;
        height: 620px; } }
    @media (min-width: 1024px) {
      #JobHunting_About .Contents {
        left: 38%; } }
    @media (min-width: 1150px) {
      #JobHunting_About .Contents {
        left: 50%; } }

/*
---------------------------------------------------------------------------------------------------------------------
For 採用担当者
---------------------------------------------------------------------------------------------------------------------
*/
#Responsible {
  background-image: url("../../assets-page/img/About/Back-2.webp");
  background-size: cover;
  background-repeat: no-repeat;
  height: 770px;
  width: 100%;
  position: relative;
  background-position: -440px;
  margin-top: -1px; }
  @media (min-width: 768px) {
    #Responsible {
      height: 990px; } }
  @media (min-width: 1024px) {
    #Responsible {
      background-position: -200px; } }
  @media (min-width: 1150px) {
    #Responsible {
      background-position: 0px; } }
  #Responsible .Contents {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4%;
    right: 25%;
    margin: auto;
    height: 500px; }
    @media (min-width: 768px) {
      #Responsible .Contents {
        left: 5%;
        right: inherit;
        height: 620px; } }
    @media (min-width: 1024px) {
      #Responsible .Contents {
        left: 8%; } }
    @media (min-width: 1150px) {
      #Responsible .Contents {
        left: 10%; } }

/*
---------------------------------------------------------------------------------------------------------------------
私たちの考え
---------------------------------------------------------------------------------------------------------------------
*/
#Idea {
  background-image: url("../../assets-page/img/About/Back-3.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center left -450px;
  height: 750px;
  width: 100%;
  position: relative; }
  @media (min-width: 768px) {
    #Idea {
      background-position: center;
      height: 800px; } }
  @media (min-width: 1024px) {
    #Idea {
      height: 1114px; } }
  #Idea:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    height: 100%;
    z-index: 0;
    mix-blend-mode: multiply; }
  #Idea .Idea_Title {
    position: absolute;
    top: 3%;
    right: 3%;
    color: #fff;
    text-align: right; }
    @media (min-width: 768px) {
      #Idea .Idea_Title {
        top: 5%;
        right: 5%; } }
    @media (min-width: 1024px) {
      #Idea .Idea_Title {
        top: 11.5%;
        right: 11.5%; } }
    #Idea .Idea_Title h2 {
      font-size: 20px;
      margin-bottom: 5px; }
      @media (min-width: 768px) {
        #Idea .Idea_Title h2 {
          font-size: 24px;
          margin-bottom: 10px; } }
    #Idea .Idea_Title p {
      font-size: 12px; }
      @media (min-width: 768px) {
        #Idea .Idea_Title p {
          font-size: 14px; } }
  #Idea .Pc {
    display: none; }
    @media (min-width: 1024px) {
      #Idea .Pc {
        display: inherit; } }
    #Idea .Pc .Philosophy {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0; }
    #Idea .Pc .text1 {
      position: absolute;
      top: 203px;
      left: 4%; }
      @media (min-width: 1024px) {
        #Idea .Pc .text1 {
          top: 175px;
          left: 144px; } }
    #Idea .Pc .text2 {
      position: absolute;
      top: 343px;
      left: 4%; }
      @media (min-width: 1024px) {
        #Idea .Pc .text2 {
          top: 460px;
          left: 325px; } }
    #Idea .Pc .text3 {
      position: absolute;
      top: 495px;
      left: 4%; }
      @media (min-width: 1024px) {
        #Idea .Pc .text3 {
          top: 718px;
          left: 485px; } }
    #Idea .Pc .CommonText {
      color: #fff; }
      #Idea .Pc .CommonText h3 {
        font-size: 24px;
        margin-bottom: 10px; }
      #Idea .Pc .CommonText p {
        font-size: 14px;
        margin-bottom: 15px; }
      #Idea .Pc .CommonText h4 {
        font-size: 26px;
        font-weight: bold;
        font-feature-settings: "palt";
        letter-spacing: 0.08em;
        margin-bottom: 15px;
        line-height: 1.0em; }
      #Idea .Pc .CommonText h5 {
        font-size: 15px;
        max-width: 400px;
        text-align: justify;
        line-height: 1.4em; }
  #Idea .Sp {
    color: #fff;
    width: 90%;
    /*タイムライン全体の設定*/ }
    @media (min-width: 1024px) {
      #Idea .Sp {
        display: none; } }
    #Idea .Sp .timeline {
      max-width: 400px;
      width: 100%;
      padding: 100px 15px 0;
      /*絶対配置で線を設定*/ }
      @media (min-width: 768px) {
        #Idea .Sp .timeline {
          max-width: 450px;
          margin: 0px 0 100px 2%; } }
      #Idea .Sp .timeline li {
        position: relative;
        list-style: none;
        padding: 0 0 20px 0; }
        #Idea .Sp .timeline li::after {
          content: '';
          position: absolute;
          top: 5px;
          left: 0;
          width: 16px;
          height: 16px;
          background: #fff;
          border-radius: 50%; }
        #Idea .Sp .timeline li dl {
          margin: 0px 0 20px 10%; }
          #Idea .Sp .timeline li dl dt {
            font-size: 20px;
            margin-bottom: 5px; }
            @media (min-width: 768px) {
              #Idea .Sp .timeline li dl dt {
                font-size: 24px; } }
          #Idea .Sp .timeline li dl dd {
            font-size: 13px;
            margin-bottom: 3px; }
            @media (min-width: 768px) {
              #Idea .Sp .timeline li dl dd {
                font-size: 14px; } }
          #Idea .Sp .timeline li dl h2 {
            font-size: 20px;
            font-weight: bold;
            font-feature-settings: "palt";
            letter-spacing: 0.08em;
            line-height: 1em; }
            @media (min-width: 768px) {
              #Idea .Sp .timeline li dl h2 {
                font-size: 26px;
                margin-bottom: 10px; } }
          #Idea .Sp .timeline li dl p {
            font-size: 11px; }
            @media (min-width: 768px) {
              #Idea .Sp .timeline li dl p {
                font-size: 14px; } }
      #Idea .Sp .timeline .border-line {
        position: absolute;
        left: 8.0px;
        top: 10px;
        width: 1px;
        height: 0;
        background: #9EF1FF; }

/*
---------------------------------------------------------------------------------------------------------------------
ABOUT US
---------------------------------------------------------------------------------------------------------------------
*/
#AboutUsBack {
  background-image: url("../../assets-page/img/About/Back-4.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  position: relative;
  height: 370px;
  margin-top: -1px; }
  @media (min-width: 768px) {
    #AboutUsBack {
      height: 750px; } }
  @media (min-width: 1024px) {
    #AboutUsBack {
      height: 600px; } }
  @media (min-width: 1600px) {
    #AboutUsBack {
      height: 100vh; } }

#AboutUs {
  background-color: #151617;
  height: 330px;
  position: relative;
  margin: -1px 0 -100px; }
  @media (min-width: 768px) {
    #AboutUs {
      margin: -1px 0 0px; } }
  #AboutUs .Contents {
    position: absolute;
    left: 5%;
    top: -80px; }
    @media (min-width: 768px) {
      #AboutUs .Contents {
        top: -145px; } }
    #AboutUs .Contents h3 {
      letter-spacing: 0.3em;
      margin-bottom: 10px; }
      @media (min-width: 768px) {
        #AboutUs .Contents h3 {
          letter-spacing: 0.12em;
          margin-bottom: 20px; } }
    #AboutUs .Contents .Btn a {
      margin-right: 20px; }

/*
---------------------------------------------------------------------------------------------------------------------
YouTube　ポップアップボタン
---------------------------------------------------------------------------------------------------------------------
*/
.VideoBtn {
  position: relative; }
  .VideoBtn .fa-caret-right {
    color: #fff;
    margin-left: 4px;
    text-shadow: 0px 0px 4px gray; }
  .VideoBtn .video-Arrow {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    line-height: 46px;
    text-align: center;
    border: 1px solid #FFFFFF;
    font-size: 26px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    transition: .5s;
    transform: scale(1);
    box-shadow: 0 0 4px gray; }
  .VideoBtn .video-Arrow:hover {
    background-color: rgba(255, 255, 255, 0.35);
    transform: scale(1.05); }

/*
---------------------------------------------------------------------------------------------------------------------
共通ボタン部品
---------------------------------------------------------------------------------------------------------------------
*/
a.BasicBtn {
  color: #fff;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  height: 48px;
  transition: .5s; }
  a.BasicBtn:hover {
    text-decoration: none; }
  a.BasicBtn.Pink {
    background: linear-gradient(to right, #F98924 0%, #FF14A4 100%);
    width: 255px;
    border-radius: 30px;
    line-height: 48px; }
    @media (min-width: 768px) {
      a.BasicBtn.Pink {
        width: 275px; } }
  a.BasicBtn.Transparent {
    border: 1px solid #fff;
    width: 275px;
    border-radius: 30px;
    line-height: 45px; }
    @media (min-width: 768px) {
      a.BasicBtn.Transparent {
        width: 295px; } }
  a.BasicBtn.ItemArrow {
    position: relative; }
    a.BasicBtn.ItemArrow::after {
      position: absolute;
      top: 50%;
      right: 1.2em;
      content: '';
      margin-top: -3px;
      width: 6px;
      height: 6px;
      border: 0px;
      border-top: solid 1px #fff;
      border-right: solid 1px #fff;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      transition: .5s; }
    a.BasicBtn.ItemArrow:hover::after {
      right: -.001em;
      margin-right: 10px; }

/*
---------------------------------------------------------------------------------------------------------------------
順番入れ替え
---------------------------------------------------------------------------------------------------------------------
*/
.box {
  display: flex; }

@media screen and (max-width: 767px) {
  .box {
    flex-direction: column; } }
@media screen and (max-width: 767px) {
  .order1 {
    order: 1; }

  .order2 {
    order: 2; }

  .order3 {
    order: 3; }

  .order4 {
    order: 4; }

  .order5 {
    order: 5; }

  .order6 {
    order: 6; }

  .order7 {
    order: 7; }

  .order8 {
    order: 8; }

  .order9 {
    order: 9; }

  .order10 {
    order: 10; }

  .order11 {
    order: 11; }

  .order12 {
    order: 12; }

  .order13 {
    order: 13; }

  .order14 {
    order: 14; } }
.ask {
  display: inline-block; }

@media screen and (min-width: 680px) {
  .pc {
    display: inline; }

  .sp {
    display: none; } }
@media screen and (max-width: 680px) {
  .pc {
    display: none; }

  .sp {
    display: inline; } }
/*========= 8-7 くるくる回るテキスト ===============*/
.rollAnime.roll span {
  transition-property: opacity,transform;
  transform: rotateY(360deg);
  transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  display: inline-block; }