@charset "UTF-8";
body {
  color: #fff;
  background-color: #000000; }

/*
---------------------------------------------------------------------------------------------------------------------
トーク
---------------------------------------------------------------------------------------------------------------------
*/
#talk {
  position: relative;
  width: 95%;
  max-width: 1600px;
  padding: 80px 0 40px;
  margin: auto; }
  @media (min-width: 768px) {
    #talk {
      padding: 140px 0 40px; } }
  @media (min-width: 1200px) {
    #talk {
      padding: 180px 0 100px; } }
  #talk .title-area {
    padding: 0 5%; }
    @media (min-width: 768px) {
      #talk .title-area {
        display: flex;
        align-items: flex-end;
        justify-content: center; } }
    #talk .title-area .common-title {
      display: flex;
      align-items: center; }
      #talk .title-area .common-title h2 {
        margin-right: 15px; }
      #talk .title-area .common-title p {
        margin: 0; }
  #talk .talk-card {
    order: 1;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px 0 0;
    width: 85%;
    margin: auto;
    max-width: 600px; }
    @media (min-width: 768px) {
      #talk .talk-card {
        padding: 20px 0 0; } }
    @media (min-width: 1024px) {
      #talk .talk-card {
        width: 100%; } }
    @media (min-width: 1200px) {
      #talk .talk-card {
        max-width: 860px;
        padding: 40px 0 0;
        border-radius: 30px; } }
    #talk .talk-card h2 {
      font-size: 1.125em;
      line-height: 1.4em;
      text-align: center;
      color: #fff;
      margin-bottom: 20px; }
      @media (min-width: 768px) {
        #talk .talk-card h2 {
          font-size: 1.75em; } }
      @media (min-width: 1200px) {
        #talk .talk-card h2 {
          font-size: 2.25em; } }
    #talk .talk-card .talk-card-scroll {
      border-radius: 30px; }
      @media (min-width: 1200px) {
        #talk .talk-card .talk-card-scroll {
          border-radius: 60px; } }
    #talk .talk-card .talk-card-messages {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-top: 20px;
      padding: 0 20px 20px; }
      @media (min-width: 768px) {
        #talk .talk-card .talk-card-messages {
          gap: 25px;
          padding: 0 30px 30px; } }
      @media (min-width: 1200px) {
        #talk .talk-card .talk-card-messages {
          gap: 30px;
          padding: 0 40px 40px; } }
      #talk .talk-card .talk-card-messages p {
        font-size: 0.9em;
        font-weight: 500;
        line-height: 1.6em;
        color: #000; }
        @media (min-width: 768px) {
          #talk .talk-card .talk-card-messages p {
            font-size: 1.0em; } }
        @media (min-width: 1200px) {
          #talk .talk-card .talk-card-messages p {
            font-size: 1.125em; } }
      #talk .talk-card .talk-card-messages u {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #D8FF00 10%, #D8FF00 90%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
        font-weight: bold;
        text-decoration: none; }
      #talk .talk-card .talk-card-messages .txt p {
        color: #000; }
      #talk .talk-card .talk-card-messages h3 {
        font-size: 1.125em;
        font-weight: 700;
        line-height: 1.6em;
        color: #000; }
        @media (min-width: 768px) {
          #talk .talk-card .talk-card-messages h3 {
            font-size: 1.25em; } }
        @media (min-width: 1200px) {
          #talk .talk-card .talk-card-messages h3 {
            font-size: 1.35em; } }
      #talk .talk-card .talk-card-messages .talk-bubble {
        position: relative;
        max-width: 100%;
        padding: 15px;
        border-radius: 10px; }
        @media (min-width: 768px) {
          #talk .talk-card .talk-card-messages .talk-bubble {
            padding: 20px;
            border-radius: 20px; } }
        @media (min-width: 1200px) {
          #talk .talk-card .talk-card-messages .talk-bubble {
            max-width: 85%;
            padding: 30px; } }
        #talk .talk-card .talk-card-messages .talk-bubble.blanc {
          border: 3px solid #D8FF00;
          margin-right: auto;
          width: 100%; }
          @media (min-width: 1200px) {
            #talk .talk-card .talk-card-messages .talk-bubble.blanc {
              margin-left: 80px;
              margin-right: 0; } }
          #talk .talk-card .talk-card-messages .talk-bubble.blanc:before, #talk .talk-card .talk-card-messages .talk-bubble.blanc:after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            margin: auto; }
          #talk .talk-card .talk-card-messages .talk-bubble.blanc:before {
            top: 40%;
            right: -17px;
            border-style: solid;
            border-color: transparent transparent #D8FF00 transparent;
            border-width: 0 16px 16px 0; }
          #talk .talk-card .talk-card-messages .talk-bubble.blanc:after {
            top: calc(40% + 3.0px);
            right: -11px;
            border-style: solid;
            border-color: transparent transparent #fff transparent;
            border-width: 0 11px 11px 0;
            z-index: 10; }
        #talk .talk-card .talk-card-messages .talk-bubble.orange {
          border: 3px solid #FFB100;
          margin-left: auto;
          width: 100%; }
          @media (min-width: 1200px) {
            #talk .talk-card .talk-card-messages .talk-bubble.orange {
              margin-right: 80px;
              margin-left: 0; } }
          #talk .talk-card .talk-card-messages .talk-bubble.orange:before, #talk .talk-card .talk-card-messages .talk-bubble.orange:after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            margin: auto; }
          #talk .talk-card .talk-card-messages .talk-bubble.orange:before {
            top: 50%;
            left: -17px;
            transform: translateY(-50%);
            border-style: solid;
            border-width: 16px 16px 0 0;
            border-color: transparent #FFB100 transparent transparent; }
          #talk .talk-card .talk-card-messages .talk-bubble.orange:after {
            top: 50%;
            left: -11px;
            transform: translateY(-50%);
            border-style: solid;
            border-width: 11px 11px 0 0;
            border-color: transparent #fff transparent transparent;
            z-index: 10; }
  #talk #appear {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    z-index: 50;
    pointer-events: none;
    transition: none; }
    @media (min-width: 768px) {
      #talk #appear {
        bottom: 10px; } }
    #talk #appear .appear-in {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      width: 100%; }
    #talk #appear.is-stop {
      position: absolute;
      left: 0;
      right: 0;
      transform: none;
      bottom: auto;
      width: 100%;
      max-width: none;
      margin: auto; }
    #talk #appear .talk-section {
      position: relative;
      width: calc((100% - 800px) / 2);
      max-width: 280px;
      min-width: 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      color: #000;
      margin-top: auto; }
      #talk #appear .talk-section.side-left {
        margin-right: auto; }
      #talk #appear .talk-section.side-right {
        margin-left: auto; }
      #talk #appear .talk-section .copy {
        position: relative;
        bottom: -10px;
        display: none; }
        @media (min-width: 1024px) {
          #talk #appear .talk-section .copy {
            display: block;
            width: 150px; } }
        @media (min-width: 1200px) {
          #talk #appear .talk-section .copy {
            width: 180px; } }
      #talk #appear .talk-section .talk-section__person {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 10; }
        #talk #appear .talk-section .talk-section__person .person {
          width: 80px;
          margin-bottom: 10px; }
          @media (min-width: 768px) {
            #talk #appear .talk-section .talk-section__person .person {
              width: 120px; } }
          @media (min-width: 1200px) {
            #talk #appear .talk-section .talk-section__person .person {
              width: 160px; } }
        #talk #appear .talk-section .talk-section__person .txt {
          display: none; }
          @media (min-width: 1024px) {
            #talk #appear .talk-section .talk-section__person .txt {
              display: block;
              color: #fff; } }
          @media (min-width: 768px) {
            #talk #appear .talk-section .talk-section__person .txt h3 {
              font-size: 0.9em;
              font-weight: 500;
              line-height: 1.2em;
              margin: 0 0 5px 0; } }
          @media (min-width: 1200px) {
            #talk #appear .talk-section .talk-section__person .txt h3 {
              font-size: 1.0em; } }
          @media (min-width: 768px) {
            #talk #appear .talk-section .talk-section__person .txt p {
              font-size: 0.7em;
              font-weight: normal;
              line-height: 1.4em; } }
          @media (min-width: 1200px) {
            #talk #appear .talk-section .talk-section__person .txt p {
              font-size: 0.8em; } }

.work-box a:hover .txt > h3 {
  color: #FFECB3; }
.work-box a .txt h5 {
  color: #fff; }
.work-box a .txt h3 {
  color: #fff; }

#other-slide.pickup {
  padding: 120px 0; }

#page-top {
  display: none; }
  @media (min-width: 768px) {
    #page-top {
      display: block; } }