@-webkit-keyframes scrollIcon {
  0% {
    height: 0px;
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0); }
  30% {
    height: 500px;
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0); }
  60% {
    height: 500px;
    -webkit-transform: translate3d(0, 500px, 0);
    transform: translate3d(0, 500px, 0); }
  100% {
    height: 0px;
    -webkit-transform: translate3d(0, 500px, 0);
    transform: translate3d(0, 500px, 0); } }

@keyframes scrollIcon {
  0% {
    height: 0px;
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0); }
  30% {
    height: 500px;
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0); }
  60% {
    height: 500px;
    -webkit-transform: translate3d(0, 500px, 0);
    transform: translate3d(0, 500px, 0); }
  100% {
    height: 0px;
    -webkit-transform: translate3d(0, 500px, 0);
    transform: translate3d(0, 500px, 0); } }

@media screen and (max-width: 768px) {
  .header {
    opacity: 1; }
  .keyBlock {
    position: relative;
    margin: 0 0 60px; }
    .keyBlock:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      max-height: 290px;
      position: absolute;
      transition-duration: 1.5s;
      opacity: 0; }
    .keyBlock .inner {
      position: relative;
      margin: 0 auto;
      padding: 0 4% 0; }
      .keyBlock .inner .vertical {
        color: #333;
        font-size: 12px;
        font-weight: bold;
        line-height: 2.2;
        letter-spacing: .2em;
        display: block;
        transition-duration: 1.5s;
        opacity: 0;
        margin: 0 0 100px; }
      .keyBlock .inner .writing {
        width: 294px;
        height: 210px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        margin: 0; }
        .keyBlock .inner .writing span .st0 {
          fill: none;
          stroke: #FFF;
          stroke-width: 10; }
      .keyBlock .inner h2 {
        position: relative;
        margin: 0 0 20px;
        transition-delay: 1s;
        transition-duration: 1.5s;
        opacity: 0;
        top: 50px;
        font-size: 18px;
        font-weight: bold;
        line-height: 1.6;
        letter-spacing: .08em; }
      .keyBlock .inner .info {
        position: relative;
        transition-delay: 1.5s;
        transition-duration: 1.5s;
        opacity: 0;
        top: 50px; }
        .keyBlock .inner .info > span {
          color: #333;
          display: block;
          font-weight: bold;
          letter-spacing: .02em; }
          .keyBlock .inner .info > span.belongs {
            position: relative;
            font-size: 14px;
            line-height: 1.6;
            margin: 0 0 10px; }
          .keyBlock .inner .info > span.name {
            font-size: 16px;
            line-height: 1.6;
            margin: 0 0 5px; }
          .keyBlock .inner .info > span.year {
            font-size: 12px;
            margin: 0 0 20px; }
        .keyBlock .inner .info p {
          line-height: 1.8;
          font-size: 12px; }
    .keyBlock.move:before {
      opacity: 1; }
    .keyBlock.move .inner .vertical {
      opacity: 1;
      top: 0; }
    .keyBlock.move .inner .info {
      opacity: 1;
      top: 0; }
    .keyBlock.move .inner h2 {
      opacity: 1;
      top: 0; }
  .case {
    margin: 0 0 50px; }
    .case .writingBox {
      margin-bottom: 20px;
      padding: 0 4%; }
    .case .writing {
      width: 104px;
      height: 40px; }
      .case .writing span .st0 {
        fill: none;
        stroke: #fff;
        stroke-width: 1.2;
        stroke-linejoin: bevel;
        stroke-miterlimit: 10; }
      .case .writing span .st1 {
        fill: none;
        stroke: #fff;
        stroke-width: 1;
        stroke-linejoin: bevel;
        stroke-miterlimit: 10; }
    .case .inner {
      margin: 0 auto;
      position: relative;
      top: 50px;
      opacity: 0;
      transition-duration: 1.5s;
      transition-delay: 0s; }
      .case .inner .titleBox {
        padding: 0 4%; }
        .case .inner .titleBox h2 {
          color: #333;
          font-size: 16px;
          font-weight: bold;
          line-height: 1.8;
          margin: 0 0 20px; }
        .case .inner .titleBox .profileBox {
          display: flex;
          align-items: center;
          margin: 0 auto 40px;
          font-size: 12px;
          line-height: 1.6; }
          .case .inner .titleBox .profileBox .profileBox__inner {
            display: flex;
            align-items: center;
            line-height: 1.6; }
          .case .inner .titleBox .profileBox .profileImg {
            width: 48%;
            margin-right: 2%; }
            .case .inner .titleBox .profileBox .profileImg img {
              width: 100%; }
          .case .inner .titleBox .profileBox .name {
            margin-top: 10px;
            font-size: 14px; }
          .case .inner .titleBox .profileBox .font12 {
            font-size: 12px;
            margin-top: 5px; }
      .case .inner .txtBox {
        padding: 0 4%; }
        .case .inner .txtBox .write {
          margin-bottom: 10px; }
        .case .inner .txtBox p {
          font-size: 12px;
          line-height: 2;
          text-align: justify; }
        .case .inner .txtBox .beforeBox {
          margin-bottom: 20px;
          padding: 20px;
          border: solid 2px rgba(33, 142, 72, 0.1); }
        .case .inner .txtBox .afterBox {
          margin-bottom: 20px;
          padding: 20px;
          background-color: #EDF6F0; }
        .case .inner .txtBox .imgBox {
          width: 100%; }
          .case .inner .txtBox .imgBox img {
            display: block;
            width: 100%; }
      .case .inner > .imgBox {
        width: 100%; }
        .case .inner > .imgBox img {
          display: block;
          width: 100%; }
    .case.move .inner {
      opacity: 1;
      top: 0; } }

@media screen and (min-width: 769px) {
  .header {
    opacity: 1; }
  .keyBlock {
    position: relative;
    height: 300px;
    margin: 0 0 40px; }
    .keyBlock .inner {
      position: relative;
      margin: 0 auto;
      max-width: 1280px;
      padding: 80px 100px; }
      .keyBlock .inner .vertical {
        -webkit-writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        -ms-text-orientation: upright;
        -webkit-text-orientation: upright;
        text-orientation: upright;
        font-size: 12px;
        font-weight: bold;
        line-height: 2.2;
        letter-spacing: .2em;
        display: block;
        position: absolute;
        top: 20px;
        left: 30px;
        transition-duration: 1.5s;
        opacity: 0; }
        @supports (-ms-ime-align: auto) {
          .keyBlock .inner .vertical {
            height: 220px; } }
      .keyBlock .inner _:-ms-lang(x)::-ms-backdrop, .keyBlock .inner .vertical {
        height: 220px; }
      .keyBlock .inner .writing {
        width: 381px;
        height: 305px;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 2;
        transform: translateX(-50%); }
        .keyBlock .inner .writing span .st0 {
          fill: none;
          stroke: #FFF;
          stroke-width: 10; }
      .keyBlock .inner h2 {
        position: relative;
        margin: 0 0 30px;
        transition-delay: 1s;
        transition-duration: 1.5s;
        opacity: 0;
        top: 50px;
        color: #333;
        font-size: 27px;
        font-weight: bold;
        line-height: 1.6;
        letter-spacing: .08em;
        text-align: center; }
      .keyBlock .inner .info {
        position: relative;
        transition-delay: 1.5s;
        transition-duration: 1.5s;
        opacity: 0;
        top: 50px; }
        .keyBlock .inner .info p {
          text-align: center;
          line-height: 1.8;
          font-size: 16px;
          color: #333;
          font-weight: bold; }
    .keyBlock.move:before {
      opacity: 1; }
    .keyBlock.move .inner .vertical {
      opacity: 1;
      top: 0; }
    .keyBlock.move .inner .info {
      opacity: 1;
      top: 0; }
    .keyBlock.move .inner h2 {
      opacity: 1;
      top: 0; }
  .case {
    position: relative;
    margin: -40px 0 100px;
    padding-top: 100px; }
    .case:last-of-type {
      margin-bottom: 160px; }
    .case .writingBox {
      height: 40px;
      max-width: 1300px;
      margin: 0 auto;
      padding: 0 90px;
      position: relative;
      top: 40px; }
    .case .writing {
      position: absolute; }
      .case .writing span {
        display: block;
        width: 90px;
        height: 37px;
        margin: 0 auto; }
        .case .writing span .st0 {
          fill: none;
          stroke: #fff;
          stroke-width: 3;
          stroke-linejoin: bevel;
          stroke-miterlimit: 10; }
    .case .inner {
      max-width: 1300px;
      margin: 0 auto;
      position: relative;
      top: 50px;
      opacity: 0;
      transition-duration: 1.5s;
      transition-delay: 0s;
      padding: 0 90px;
      display: flex; }
      .case .inner .titleBox {
        width: 41.5%; }
        .case .inner .titleBox .write {
          margin-bottom: 25px; }
        .case .inner .titleBox h2 {
          color: #333;
          font-size: 24px;
          font-weight: bold;
          line-height: 1.8;
          margin: 0 0 60px; }
        .case .inner .titleBox .profileBox {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          line-height: 1.6;
          font-size: 14px; }
          .case .inner .titleBox .profileBox .profileImg {
            margin: 0 20px 0 0; }
            .case .inner .titleBox .profileBox .profileImg img {
              display: block;
              width: 100%; }
          .case .inner .titleBox .profileBox .name {
            margin: 10px 0 5px;
            font-size: 20px; }
          .case .inner .titleBox .profileBox .imgBox img {
            display: block;
            width: 100%; }
          .case .inner .titleBox .profileBox .font12 {
            font-size: 12px;
            margin-top: 5px; }
      .case .inner .txtBox {
        width: 54%; }
        .case .inner .txtBox .beforeBox {
          height: 100%;
          padding: 35px 40px 40px;
          border: solid 2px rgba(33, 142, 72, 0.1); }
          .case .inner .txtBox .beforeBox .write {
            margin-bottom: 20px; }
          .case .inner .txtBox .beforeBox p {
            font-size: 16px;
            line-height: 1.8; }
        .case .inner .txtBox .afterBox {
          position: relative;
          height: 100%;
          padding: 35px 40px 40px;
          background-color: #EDF6F0; }
          .case .inner .txtBox .afterBox::before {
            content: "";
            display: block;
            width: 1px;
            height: 85px;
            background: #BEBEBE;
            position: absolute;
            top: -55px;
            left: 40px; }
          .case .inner .txtBox .afterBox .write {
            margin-bottom: 20px; }
          .case .inner .txtBox .afterBox p {
            font-size: 16px;
            line-height: 1.8; }
      .case .inner > .imgBox {
        width: 37%; }
        .case .inner > .imgBox img {
          display: block;
          width: 100%; }
    .case.move .inner {
      opacity: 1;
      top: 0; }
    .case--01 {
      padding-top: 0; }
      .case--01 .writing {
        width: 104px;
        height: 40px;
        top: 0;
        left: 57%; }
      .case--01 .inner {
        flex-direction: row-reverse; }
        .case--01 .inner .titleBox {
          padding-top: 80px;
          margin-left: 4.5%; }
        .case--01 .inner:nth-child(2) {
          margin-top: 55px; }
          .case--01 .inner:nth-child(2) .txtBox {
            margin: 0 0 0 3.5%; }
    .case--02 .writingBox {
      padding-right: 0; }
    .case--02 .writing {
      width: 104px;
      height: 40px;
      top: 0;
      left: 61%; }
    .case--02 .inner {
      display: flex;
      flex-direction: row-reverse;
      padding-right: 0; }
      .case--02 .inner .titleBox {
        display: flex;
        align-items: flex-start;
        width: 42%;
        flex: 0 0 42%; }
        .case--02 .inner .titleBox .verticalBox {
          width: 30%; }
          .case--02 .inner .titleBox .verticalBox .vertical {
            padding-top: 60px;
            -webkit-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            -ms-text-orientation: upright;
            -webkit-text-orientation: upright;
            text-orientation: upright;
            line-height: 2.2;
            letter-spacing: .2em;
            max-height: 28em;
            margin-bottom: 0;
            min-height: 500px; }
        .case--02 .inner .titleBox .profileBox {
          width: 100%;
          flex-direction: column;
          margin-left: 7.8%; }
          .case--02 .inner .titleBox .profileBox__inner {
            margin: 0 auto 60px 0;
            line-height: 1.6;
            font-size: 14px; }
            .case--02 .inner .titleBox .profileBox__inner .profileImg {
              margin-bottom: 20px; }
          .case--02 .inner .titleBox .profileBox .imgBox {
            width: 100%;
            margin-right: 0; }
      .case--02 .inner .txtBox {
        width: 55%;
        margin-right: 3.3%; }
        .case--02 .inner .txtBox .beforeBox,
        .case--02 .inner .txtBox .afterBox {
          height: auto; }
        .case--02 .inner .txtBox .beforeBox {
          margin-bottom: 40px; }
        .case--02 .inner .txtBox .afterBox::before {
          left: 60px;
          right: 0;
          height: 70px;
          top: -40px; }
    .case--03 .writing {
      width: 104px;
      height: 40px;
      top: 0;
      left: 7%; }
    .case--03 .inner .txtBox .afterBox::before {
      left: initial;
      right: 40px; }
    .case--03 .inner .titleBox {
      padding-top: 80px;
      margin-right: 4.5%; }
    .case--03 .inner:nth-child(2) {
      margin-top: 55px; }
      .case--03 .inner:nth-child(2) .txtBox {
        margin: 0 3.5% 0 0; }
    .case--04 .writingBox {
      padding-left: 0; }
    .case--04 .writing {
      width: 104px;
      height: 40px;
      top: 0;
      left: 31.5%; }
    .case--04 .inner {
      padding-left: 0; }
      .case--04 .inner:nth-child(1) {
        display: flex;
        padding-left: 0; }
      .case--04 .inner .titleBox {
        display: flex;
        align-items: flex-start;
        flex-direction: row-reverse;
        width: 42%;
        flex: 0 0 42%; }
        .case--04 .inner .titleBox .verticalBox {
          width: 30%; }
          .case--04 .inner .titleBox .verticalBox .vertical {
            padding-top: 60px;
            -webkit-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            -ms-text-orientation: upright;
            -webkit-text-orientation: upright;
            text-orientation: upright;
            line-height: 2.2;
            letter-spacing: .2em;
            max-height: 28em;
            margin-bottom: 0;
            min-height: 500px; }
        .case--04 .inner .titleBox .profileBox {
          width: 100%;
          flex-direction: column;
          margin-right: 7.8%; }
          .case--04 .inner .titleBox .profileBox__inner {
            margin: 0 0 60px auto;
            line-height: 1.6;
            font-size: 14px; }
            .case--04 .inner .titleBox .profileBox__inner .profileImg {
              margin: 0 0 20px; }
          .case--04 .inner .titleBox .profileBox .imgBox {
            width: 100%;
            margin-right: 0; }
      .case--04 .inner .txtBox {
        width: 660px;
        margin-left: 40px; }
        .case--04 .inner .txtBox .beforeBox,
        .case--04 .inner .txtBox .afterBox {
          height: auto; }
        .case--04 .inner .txtBox .beforeBox {
          margin-bottom: 40px; }
        .case--04 .inner .txtBox .afterBox::before {
          left: 60px;
          right: 0;
          height: 70px;
          top: -40px; } }