.screen {
  position: relative;
  text-transform: uppercase;
  transition: all 1s ease-out; }

.screen.left {
  clip-path: inset(0 100% 0 0); }

.screen.left.show {
  clip-path: inset(0); }

.screen.right {
  clip-path: inset(0 0 0 100%); }

.screen.right.show {
  clip-path: inset(0); }

body {
  background-color: #fff; }

.contents {
  width: 100%;
  margin: 80px auto 0; }
  .contents .kv {
    width: 100%;
    height: 700px;
    background-image: url(../img/relationship/collaboration_kv_bg.png);
    background-repeat: repeat;
    background-position: center;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center; }
    .contents .kv ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
      padding: 0; }
      .contents .kv ul li {
        flex-basis: auto; }
        .contents .kv ul li h2 {
          font-size: 24px;
          writing-mode: vertical-rl;
          font-weight: 400;
          letter-spacing: 0.2em;
          color: #fff;
          position: relative; }
          .contents .kv ul li h2 span {
            position: absolute;
            font-size: 10px;
            font-weight: 400;
            letter-spacing: 0.1em;
            top: 0;
            right: -24px;
            color: #fff; }
          .contents .kv ul li h2 span:after {
            content: "";
            width: 1px;
            height: 100px;
            background-color: #fff;
            position: absolute;
            top: 120%;
            left: 50%;
            transform: translateX(-50%); }
      .contents .kv ul li:last-child {
        flex-basis: 610px; }
        .contents .kv ul li:last-child .ttl {
          margin: 0 auto 20px; }
        .contents .kv ul li:last-child .kv_ttl {
          font-size: 36px;
          font-weight: 400;
          line-height: 1;
          color: #fff;
          letter-spacing: 0.1em;
          margin: 0 auto 20px;
          text-align: left; }
        .contents .kv ul li:last-child .kv_catch {
          font-size: 18px;
          font-weight: 500;
          line-height: 1;
          color: #fff;
          letter-spacing: 0.1em;
          margin: 0 auto 20px;
          text-align: left; }
        .contents .kv ul li:last-child .kv_line {
          text-align: center;
          margin: 20px auto; }
        .contents .kv ul li:last-child p {
          font-size: 16px;
          font-weight: 400;
          line-height: 2.2;
          color: #fff;
          letter-spacing: 0.1em;
          margin: 0 auto;
          text-align: left; }
  .contents .contents_wrap {
    width: 100%;
    background-image: url(../img/relationship/collaboration_story01_bg.png);
    background-repeat: repeat;
    background-position: center;
    background-size: auto;
    margin: 0 auto;
    padding: 170px 0 100px; }
    .contents .contents_wrap .inner {
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
      padding: 0; }
      .contents .contents_wrap .inner .photo_r {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        margin: 0 auto 160px;
        padding: 0; }
        .contents .contents_wrap .inner .photo_r .summary {
          flex-basis: calc(100% - 424px); }
          .contents .contents_wrap .inner .photo_r .summary h5 {
            font-size: 32px;
            font-weight: 400;
            line-height: 1;
            position: relative; }
            .contents .contents_wrap .inner .photo_r .summary h5:before {
              content: "";
              background-image: url(../img/relationship/collaboration_contents_line.svg);
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
              width: 120px;
              height: 120px;
              position: absolute;
              top: -80px;
              left: -60px;
              opacity: 0.5; }
          .contents .contents_wrap .inner .photo_r .summary h6 {
            font-size: 18px;
            font-weight: 400;
            line-height: 1;
            margin: 15px 0 35px; }
          .contents .contents_wrap .inner .photo_r .summary p {
            font-size: 16px;
            font-weight: 400;
            line-height: 2.2;
            color: #0A0A0A;
            letter-spacing: 0.1em;
            margin: 0; }
        .contents .contents_wrap .inner .photo_r .photo {
          flex-basis: 374px;
          margin-left: 50px; }
          .contents .contents_wrap .inner .photo_r .photo img {
            max-width: 100%; }
      .contents .contents_wrap .inner .photo_l {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        margin: 0 auto 160px;
        padding: 0; }
        .contents .contents_wrap .inner .photo_l .summary {
          flex-basis: calc(100% - 424px);
          text-align: right; }
          .contents .contents_wrap .inner .photo_l .summary h5 {
            font-size: 32px;
            font-weight: 400;
            line-height: 1;
            position: relative; }
            .contents .contents_wrap .inner .photo_l .summary h5:after {
              content: "";
              background-image: url(../img/relationship/collaboration_contents_line.svg);
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
              width: 120px;
              height: 120px;
              position: absolute;
              top: -80px;
              right: -60px;
              opacity: 0.5;
              transform: rotate(90deg); }
          .contents .contents_wrap .inner .photo_l .summary h6 {
            font-size: 18px;
            font-weight: 400;
            line-height: 1;
            margin: 15px 0 35px; }
          .contents .contents_wrap .inner .photo_l .summary p {
            font-size: 16px;
            font-weight: 400;
            line-height: 2.2;
            color: #0A0A0A;
            letter-spacing: 0.1em;
            margin: 0;
            text-align: left; }
        .contents .contents_wrap .inner .photo_l .photo {
          flex-basis: 374px;
          margin-right: 50px; }
          .contents .contents_wrap .inner .photo_l .photo img {
            max-width: 100%; }
      .contents .contents_wrap .inner p {
        font-size: 16px;
        font-weight: 400;
        line-height: 2.2;
        color: #0A0A0A;
        letter-spacing: 0.1em;
        margin: -100px 0 0; }
        .contents .contents_wrap .inner p span {
          background: linear-gradient(transparent 80%, rgba(172, 36, 55, 0.25) 20%);
          display: inline; }
      .contents .contents_wrap .inner .bottom_ec_nav {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin: 100px auto;
        padding: 0;
        gap: 10px; }
        .contents .contents_wrap .inner .bottom_ec_nav li img {
          max-width: 146px; }
        .contents .contents_wrap .inner .bottom_ec_nav li p {
          font-size: 16px;
          font-weight: 400;
          line-height: 1.6;
          color: #0A0A0A;
          letter-spacing: 0.1em;
          margin: 0 0 10px; }
        .contents .contents_wrap .inner .bottom_ec_nav li .ec {
          background-color: #fff;
          border: 1px solid #AC2437;
          width: 268px;
          height: 90px;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          text-align: left; }
          .contents .contents_wrap .inner .bottom_ec_nav li .ec p {
            font-size: 16px;
            font-weight: 400;
            line-height: 1;
            color: #AC2437;
            letter-spacing: 0.1em;
            margin: 0; }
            .contents .contents_wrap .inner .bottom_ec_nav li .ec p span {
              font-size: 10px;
              color: #AC2437;
              margin-bottom: 10px;
              position: relative;
              display: block;
              background: none; }
              .contents .contents_wrap .inner .bottom_ec_nav li .ec p span:after {
                content: "";
                background-image: url(../img/relationship/collaboration_bottom_ec_arrow.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                width: 27px;
                height: 8px;
                position: absolute;
                right: 30px;
                transition-duration: 0.5s; }
        @media (hover: hover) and (pointer: fine) {
          .contents .contents_wrap .inner .bottom_ec_nav li:hover .ec p span:after {
            right: 10px; } }
  .contents .bottom_another_nav {
    width: 100%;
    height: 522px;
    background-image: url(../img/relationship/collaboration_story01_bottom_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; }
    .contents .bottom_another_nav .balck_base {
      width: 100%;
      height: 100%;
      background-color: rgba(15, 15, 15, 0.78);
      margin: 0 auto;
      padding: 0; }
      .contents .bottom_another_nav .balck_base ul {
        width: 100%;
        max-width: 810px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 810px;
        margin: 0 auto;
        padding: 100px 0 0; }
        .contents .bottom_another_nav .balck_base ul li img {
          max-width: 244px; }
        .contents .bottom_another_nav .balck_base ul li .kv_ttl {
          font-size: 32px;
          font-weight: 400;
          line-height: 1;
          color: #fff;
          letter-spacing: 0.1em;
          margin: 0 auto 20px;
          text-align: left; }
        .contents .bottom_another_nav .balck_base ul li .kv_catch {
          font-size: 18px;
          font-weight: 400;
          line-height: 1;
          color: #fff;
          letter-spacing: 0.1em;
          margin: 0 auto 20px;
          text-align: left; }
      .contents .bottom_another_nav .balck_base p {
        width: 100%;
        max-width: 810px;
        font-size: 16px;
        font-weight: 300;
        line-height: 2.2;
        color: #fff;
        letter-spacing: 0.1em;
        margin: 20px auto 40px;
        text-align: left; }
      .contents .bottom_another_nav .balck_base .story_btn {
        width: 180px;
        height: 42px;
        border: 1px solid #D9D9D9;
        display: flex;
        justify-content: center;
        align-items: center;
        transition-duration: .5s;
        margin: 0 auto; }
        .contents .bottom_another_nav .balck_base .story_btn p {
          font-size: 12px;
          font-weight: 400;
          line-height: 1;
          color: #fff;
          text-align: center;
          margin: 0 auto; }
        .contents .bottom_another_nav .balck_base .story_btn p:after {
          content: "";
          background-image: url(../img/arrow_wh.svg);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          width: 27px;
          height: 8px;
          position: absolute;
          right: -14px;
          top: 50%;
          transform: translateY(-50%);
          transition-duration: .5s; }
        .contents .bottom_another_nav .balck_base .story_btn:hover p:after {
          right: -32px; }

@media (max-width: 780px) {
  .contents {
    width: 100%;
    margin: 12vw auto 0; }
    .contents .kv {
      width: 100%;
      height: 118vw;
      background-image: url(../img/relationship/collaboration_kv_bg.png);
      background-repeat: repeat;
      background-position: center;
      background-size: contain;
      display: flex;
      justify-content: center;
      align-items: center; }
      .contents .kv ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        width: 100%;
        max-width: 80vw;
        margin: 0 auto;
        padding: 0; }
        .contents .kv ul li {
          flex-basis: 100%; }
          .contents .kv ul li h2 {
            font-size: 4.358974359vw;
            writing-mode: horizontal-tb;
            font-weight: 400;
            letter-spacing: 0.2em;
            color: #fff;
            position: relative;
            margin: 0 auto 10vw; }
            .contents .kv ul li h2 span {
              position: absolute;
              font-size: 2.5641025641vw;
              font-weight: 400;
              letter-spacing: 0.1em;
              top: initial;
              bottom: -4vw;
              right: initial;
              left: 50%;
              transform: translateX(-50%);
              color: #fff; }
            .contents .kv ul li h2 span:after {
              content: none; }
        .contents .kv ul li:last-child {
          flex-basis: 80vw;
          text-align: center; }
          .contents .kv ul li:last-child .ttl {
            margin: 0 auto 2vw; }
            .contents .kv ul li:last-child .ttl img {
              max-width: 30vw; }
          .contents .kv ul li:last-child .kv_ttl {
            font-size: 5.3846153846vw;
            font-weight: 400;
            line-height: 1;
            color: #fff;
            letter-spacing: 0.1em;
            margin: 0 auto 2vw;
            text-align: center; }
          .contents .kv ul li:last-child .kv_catch {
            font-size: 3.0769230769vw;
            font-weight: 500;
            line-height: 1;
            color: #fff;
            letter-spacing: 0.1em;
            margin: 0 auto 2vw;
            text-align: center; }
          .contents .kv ul li:last-child .kv_line {
            text-align: center;
            margin: 3vw auto; }
            .contents .kv ul li:last-child .kv_line img {
              max-width: 10vw; }
          .contents .kv ul li:last-child p {
            font-size: 3.0769230769vw;
            font-weight: 400;
            line-height: 2;
            color: #fff;
            letter-spacing: 0.1em;
            margin: 0 auto;
            text-align: left; }
    .contents .contents_wrap {
      width: 100%;
      background-image: url(../img/relationship/collaboration_story01_bg.png);
      background-repeat: repeat;
      background-position: center;
      background-size: auto;
      margin: 0 auto;
      padding: 15vw 0 10vw; }
      .contents .contents_wrap .inner {
        width: 100%;
        max-width: 80vw;
        margin: 0 auto;
        padding: 0; }
        .contents .contents_wrap .inner .photo_r {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          flex-wrap: wrap;
          width: 100%;
          margin: 0 auto 20vw;
          padding: 0; }
          .contents .contents_wrap .inner .photo_r .summary {
            flex-basis: 80vw; }
            .contents .contents_wrap .inner .photo_r .summary h5 {
              font-size: 5.3846153846vw;
              font-weight: 400;
              line-height: 1;
              position: relative; }
              .contents .contents_wrap .inner .photo_r .summary h5:before {
                content: "";
                background-image: url(../img/relationship/collaboration_contents_line.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                width: 12vw;
                height: 12vw;
                position: absolute;
                top: -8vw;
                left: -8vw;
                opacity: 0.5; }
            .contents .contents_wrap .inner .photo_r .summary h6 {
              font-size: 3.5897435897vw;
              font-weight: 400;
              line-height: 1;
              margin: 2vw 0 5vw; }
            .contents .contents_wrap .inner .photo_r .summary p {
              font-size: 3.3333333333vw;
              font-weight: 400;
              line-height: 2;
              color: #0A0A0A;
              letter-spacing: 0.1em;
              margin: 0; }
          .contents .contents_wrap .inner .photo_r .photo {
            flex-basis: 80vw;
            margin-left: -10vw;
            margin-top: 5vw; }
            .contents .contents_wrap .inner .photo_r .photo img {
              max-width: 60vw; }
        .contents .contents_wrap .inner .photo_l {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          flex-direction: column-reverse;
          flex-wrap: wrap;
          width: 100%;
          margin: 0 auto 20vw;
          padding: 0; }
          .contents .contents_wrap .inner .photo_l .summary {
            flex-basis: 80vw; }
            .contents .contents_wrap .inner .photo_l .summary h5 {
              font-size: 5.3846153846vw;
              font-weight: 400;
              line-height: 1;
              position: relative; }
              .contents .contents_wrap .inner .photo_l .summary h5:after {
                content: "";
                background-image: url(../img/relationship/collaboration_contents_line.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                width: 12vw;
                height: 12vw;
                position: absolute;
                top: -8vw;
                right: -8vw;
                opacity: 0.5; }
            .contents .contents_wrap .inner .photo_l .summary h6 {
              font-size: 3.5897435897vw;
              font-weight: 400;
              line-height: 1;
              margin: 2vw 0 5vw; }
            .contents .contents_wrap .inner .photo_l .summary p {
              font-size: 3.3333333333vw;
              font-weight: 400;
              line-height: 2;
              color: #0A0A0A;
              letter-spacing: 0.1em;
              margin: 0; }
          .contents .contents_wrap .inner .photo_l .photo {
            flex-basis: 80vw;
            margin-right: -10vw;
            margin-left: 30vw;
            margin-top: 5vw;
            text-align: right; }
            .contents .contents_wrap .inner .photo_l .photo img {
              max-width: 60vw; }
        .contents .contents_wrap .inner p {
          font-size: 3.3333333333vw;
          font-weight: 400;
          line-height: 2.2;
          color: #0A0A0A;
          letter-spacing: 0;
          margin: -15vw -5vw 0; }
          .contents .contents_wrap .inner p span {
            background: linear-gradient(transparent 80%, rgba(172, 36, 55, 0.25) 20%);
            display: inline; }
        .contents .contents_wrap .inner .bottom_ec_nav {
          display: flex;
          justify-content: center;
          align-items: flex-end;
          margin: 15vw auto;
          padding: 0;
          gap: 10px; }
          .contents .contents_wrap .inner .bottom_ec_nav li img {
            max-width: 25vw; }
          .contents .contents_wrap .inner .bottom_ec_nav li p {
            font-size: 3.3333333333vw;
            font-weight: 400;
            line-height: 1.2;
            color: #0A0A0A;
            letter-spacing: 0.1em;
            margin: 0 0 2vw; }
          .contents .contents_wrap .inner .bottom_ec_nav li .ec {
            background-color: #fff;
            border: 1px solid #AC2437;
            width: 45vw;
            height: 14vw;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3vw;
            text-align: left; }
            .contents .contents_wrap .inner .bottom_ec_nav li .ec p {
              font-size: 3.0769230769vw;
              font-weight: 400;
              line-height: 1;
              color: #AC2437;
              letter-spacing: 0.1em;
              margin: 0; }
              .contents .contents_wrap .inner .bottom_ec_nav li .ec p span {
                font-size: 2.5641025641vw;
                color: #AC2437;
                margin-bottom: 1vw;
                position: relative;
                display: block;
                background: none; }
                .contents .contents_wrap .inner .bottom_ec_nav li .ec p span:after {
                  content: "";
                  background-image: url(../img/relationship/collaboration_bottom_ec_arrow.svg);
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: contain;
                  width: 4vw;
                  height: 1.2vw;
                  position: absolute;
                  right: 5vw;
                  transition-duration: 0.5s; } }
        @media (max-width: 780px) and (hover: hover) and (pointer: fine) {
          .contents .contents_wrap .inner .bottom_ec_nav li:hover .ec p span:after {
            right: 10px; } }
@media (max-width: 780px) {
    .contents .bottom_another_nav {
      width: 100vw;
      height: 114vw;
      background-image: url(../img/relationship/collaboration_story01_bottom_bg-s.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; }
      .contents .bottom_another_nav .balck_base {
        width: 100%;
        height: 100%;
        background-color: rgba(15, 15, 15, 0.78);
        margin: 0 auto;
        padding: 0; }
        .contents .bottom_another_nav .balck_base ul {
          width: 100%;
          max-width: 80vw;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          margin: 0 auto;
          padding: 12vw 0 0; }
          .contents .bottom_another_nav .balck_base ul li {
            text-align: center; }
            .contents .bottom_another_nav .balck_base ul li img {
              max-width: 32vw;
              margin: 0 auto 3vw; }
            .contents .bottom_another_nav .balck_base ul li .kv_ttl {
              font-size: 4.6153846154vw;
              font-weight: 400;
              line-height: 1;
              color: #fff;
              letter-spacing: 0.1em;
              margin: 0 auto 2vw;
              text-align: center; }
            .contents .bottom_another_nav .balck_base ul li .kv_catch {
              font-size: 2.8205128205vw;
              font-weight: 400;
              line-height: 1;
              color: #fff;
              letter-spacing: 0.1em;
              margin: 0 auto 6vw;
              text-align: center; }
        .contents .bottom_another_nav .balck_base p {
          width: 100%;
          max-width: 80vw;
          font-size: 2.8205128205vw;
          font-weight: 300;
          line-height: 2;
          color: #fff;
          letter-spacing: 0.1em;
          margin: 0 auto 5vw;
          text-align: left; }
        .contents .bottom_another_nav .balck_base .story_btn {
          width: 60vw;
          height: 12vw;
          border: 1px solid #D9D9D9;
          display: flex;
          justify-content: center;
          align-items: center;
          transition-duration: .5s;
          margin: 0 auto; }
          .contents .bottom_another_nav .balck_base .story_btn p {
            font-size: 2.5641025641vw;
            font-weight: 400;
            line-height: 1;
            color: #fff;
            text-align: center;
            margin: 0 auto; }
          .contents .bottom_another_nav .balck_base .story_btn p:after {
            content: "";
            background-image: url(../img/arrow_wh.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 27px;
            height: 8px;
            position: absolute;
            right: -14px;
            top: 50%;
            transform: translateY(-50%);
            transition-duration: .5s; }
          .contents .bottom_another_nav .balck_base .story_btn:hover p:after {
            right: -32px; } }

/*# sourceMappingURL=collaboration.css.map */