.d_flex {
  display: flex; }

body {
  position: relative; }

/*--------------------------
section01
---------------------------*/
#section01 {
  margin: 0;
  padding: 0 0 100px 0;
  overflow: hidden; }
  @media only screen and (min-width: 769px) and (max-width: 1919px) {
    #section01 {
      padding: 0 0 5.2083333333vw 0; } }
  #section01 .title {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 56px;
    text-align: center;
    letter-spacing: 15px;
    transition: all 0.3s ease-in-out 0s;
    opacity: 0; }
    @media only screen and (min-width: 769px) and (max-width: 1919px) {
      #section01 .title {
        font-size: 2.9166666667vw;
        letter-spacing: 0.78125vw; } }
    @media only screen and (max-width: 768px) {
      #section01 .title {
        font-size: 28px;
        letter-spacing: 7.5px;
        margin: 0 auto;
        width: 85vw; } }
    #section01 .title::before {
      content: "";
      width: 2px;
      height: 100px;
      background-color: #ffffff;
      margin: 0 auto 25px auto;
      display: block; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #section01 .title::before {
          height: 5.2083333333vw; } }
      @media only screen and (max-width: 768px) {
        #section01 .title::before {
          height: 50px; } }
    #section01 .title span {
      display: block;
      font-family: 'Noto Sans Japanese';
      font-weight: 300;
      font-size: 20px;
      padding: 20px 0 0 0; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #section01 .title span {
          height: 5.2083333333vw;
          font-size: 1.0416666667vw;
          padding: 1.0416666667vw 0 0 0; } }
      @media only screen and (max-width: 768px) {
        #section01 .title span {
          height: 50px;
          font-size: 10px;
          padding: 20px 0 0 0; } }
  #section01 .subtitle {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.3846153846;
    letter-spacing: 0.03em;
    text-align: center;
    margin: 30px 0 60px;
    transition: all 0.5s ease-in-out 0.5s;
    transform: translateY(100px);
    opacity: 0; }
    @media only screen and (min-width: 769px) and (max-width: 1919px) {
      #section01 .subtitle {
        font-size: 1.4583333333vw;
        margin: 1.5625vw 0 3.125vw; } }
    @media only screen and (max-width: 768px) {
      #section01 .subtitle {
        font-size: 14px;
        margin: 15px auto 30px auto;
        width: 85vw; } }
    @media only screen and (max-width: 768px) {
      #section01 .subtitle span {
        display: block; } }
  #section01 .container {
    display: flex;
    transition: all 1s ease-in-out 0s;
    transform: translateY(100px);
    opacity: 0; }
    #section01 .container ul.list {
      width: 1000px;
      margin: 0 auto;
      display: block; }
      @media only screen and (max-width: 768px) {
        #section01 .container ul.list {
          width: 85vw;
          margin: 0 auto; } }
      #section01 .container ul.list li {
        letter-spacing: -1em;
        white-space: nowrap;
        margin: 50px 0; }
        @media only screen and (min-width: 769px) and (max-width: 1919px) {
          #section01 .container ul.list li {
            margin: 2.6041666667vw 0; } }
        @media only screen and (max-width: 768px) {
          #section01 .container ul.list li {
            margin: 25px 0; } }
        #section01 .container ul.list li p {
          letter-spacing: normal;
          white-space: normal;
          font-weight: 200;
          line-height: 1.6;
          vertical-align: top;
          display: inline-block; }
          #section01 .container ul.list li p.date {
            width: 100px;
            margin: 0 25px 0 0; }
            @media only screen and (min-width: 769px) and (max-width: 1919px) {
              #section01 .container ul.list li p.date {
                margin: 0 1.3020833333vw 0 0; } }
            @media only screen and (max-width: 768px) {
              #section01 .container ul.list li p.date {
                width: 100%; } }
          @media only screen and (max-width: 768px) {
            #section01 .container ul.list li p {
              font-size: 14px;
              padding: 0 0 15px 0;
              display: block; } }
          #section01 .container ul.list li p.text {
            width: 900px; }
            @media only screen and (max-width: 768px) {
              #section01 .container ul.list li p.text {
                width: 100%; } }
        #section01 .container ul.list li a {
          color: #010101;
          transition: all 0.3s ease-in-out 0s; }
          @media only screen and (max-width: 768px) {
            #section01 .container ul.list li a {
              color: initial; } }
          #section01 .container ul.list li a:hover {
            color: #cd1976; }
        #section01 .container ul.list li.goto-link {
          text-align: right; }
          #section01 .container ul.list li.goto-link p {
            width: 175px;
            text-align: center;
            padding: 10px 25px;
            transition: all 0.3s ease-in-out 0s; }
            @media only screen and (max-width: 768px) {
              #section01 .container ul.list li.goto-link p {
                display: inline; } }
          #section01 .container ul.list li.goto-link p:hover {
            color: #cd1976;
            box-shadow: 0 5px 5px 1px rgba(51, 51, 51, 0.25); }
    #section01 .container ul.detail {
      width: 1000px;
      margin: 0 auto;
      display: block; }
      @media only screen and (max-width: 768px) {
        #section01 .container ul.detail {
          width: 85vw;
          margin: 0 auto; } }
      #section01 .container ul.detail li {
        letter-spacing: -1em;
        white-space: nowrap;
        margin: 50px 0; }
        @media only screen and (min-width: 769px) and (max-width: 1919px) {
          #section01 .container ul.detail li {
            margin: 2.6041666667vw 0; } }
        @media only screen and (max-width: 768px) {
          #section01 .container ul.detail li {
            margin: 25px 0; } }
        #section01 .container ul.detail li h3 {
          letter-spacing: normal;
          white-space: normal;
          font-size: 20px;
          font-weight: 600;
          line-height: 1.6;
          margin: 0 0 25px 0;
          display: block; }
          @media only screen and (max-width: 768px) {
            #section01 .container ul.detail li h3 {
              font-size: 18px; } }
        #section01 .container ul.detail li p {
          letter-spacing: normal;
          white-space: normal;
          font-weight: 200;
          line-height: 1.6;
          margin: 0 0 25px 0;
          display: block; }
          #section01 .container ul.detail li p.date {
            width: 100%;
            margin: 0 25px 0 0; }
            @media only screen and (min-width: 769px) and (max-width: 1919px) {
              #section01 .container ul.detail li p.date {
                margin: 0 1.3020833333vw 0 0; } }
          @media only screen and (max-width: 768px) {
            #section01 .container ul.detail li p {
              font-size: 14px;
              padding: 0 0 15px 0;
              display: block; } }
          #section01 .container ul.detail li p.text {
            width: 100%; }
        #section01 .container ul.detail li:last-child {
          text-align: right; }
          #section01 .container ul.detail li:last-child p {
            width: 175px;
            text-align: center;
            padding: 10px 25px;
            display: inline-block;
            transition: all 0.3s ease-in-out 0s; }
            @media only screen and (max-width: 768px) {
              #section01 .container ul.detail li:last-child p {
                display: inline; } }
          #section01 .container ul.detail li:last-child p:hover {
            color: #cd1976;
            box-shadow: 0 5px 5px 1px rgba(51, 51, 51, 0.25); }
  #section01.is-active .title {
    opacity: 1; }
  #section01.is-active .subtitle {
    transform: translateY(0);
    opacity: 1; }
  #section01.is-active .container {
    transform: translateY(0);
    opacity: 1; }