/*
@include css3(transform, translate(-50%, -50%));
@include css3(transition, 0.3s ease-in-out);  
*/
.main {
  padding: 0;
  margin-top: 100px; }
  @media screen and (max-width: 1200px) {
    .main {
      margin-top: 76px; } }
  .main .main {
    margin-top: 0 !important;
    background: url("../img/cooperation/main.webp") no-repeat center;
    background-size: cover;
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 0; }
    @media screen and (max-width: 520px) {
      .main .main {
        height: 300px; } }
    .main .main .main-wrap {
      padding: 0;
      margin: 0 auto; }
      @media screen and (max-width: 1200px) {
        .main .main .main-wrap {
          width: 100%; } }
      .main .main .main-wrap .page-mv-section {
        margin-bottom: 0; }
        .main .main .main-wrap .page-mv-section .container {
          position: relative; }
          @media screen and (max-width: 1200px) {
            .main .main .main-wrap .page-mv-section .container {
              position: inherit; } }
          .main .main .main-wrap .page-mv-section .container .ttl {
            color: #FFF; }
            @media screen and (max-width: 768px) {
              .main .main .main-wrap .page-mv-section .container .ttl {
                font-size: clamp(32px, calc(32px + (40 - 32) * ((100vw - 400px) / 1100)), 40px) !important; } }
            @media screen and (max-width: 520px) {
              .main .main .main-wrap .page-mv-section .container .ttl {
                margin-bottom: 0 !important; } }
          .main .main .main-wrap .page-mv-section .container .icon {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0 15px;
            position: absolute;
            top: 50%;
            right: 0;
            -webkit-transform: translate(0%, -50%);
            -moz-transform: translate(0%, -50%);
            -ms-transform: translate(0%, -50%);
            -o-transform: translate(0%, -50%);
            transform: translate(0%, -50%); }
            @media screen and (max-width: 1200px) {
              .main .main .main-wrap .page-mv-section .container .icon {
                position: relative;
                top: auto;
                right: auto;
                -webkit-transform: translate(0%, 0%);
                -moz-transform: translate(0%, 0%);
                -ms-transform: translate(0%, 0%);
                -o-transform: translate(0%, 0%);
                transform: translate(0%, 0%); } }
            @media screen and (max-width: 520px) {
              .main .main .main-wrap .page-mv-section .container .icon {
                gap: 0 5px; } }
            .main .main .main-wrap .page-mv-section .container .icon img {
              width: 192px; }
              @media screen and (max-width: 1000px) {
                .main .main .main-wrap .page-mv-section .container .icon img {
                  width: 140px; } }
              @media screen and (max-width: 768px) {
                .main .main .main-wrap .page-mv-section .container .icon img {
                  width: 100px; } }
              @media screen and (max-width: 420px) {
                .main .main .main-wrap .page-mv-section .container .icon img {
                  width: 90px; } }
  .main .cooperation {
    position: relative;
    z-index: 1; }
    .main .cooperation h2 {
      color: #003694;
      font-family: "Shippori Mincho", serif;
      font-weight: normal;
      padding-bottom: 20px; }
    .main .cooperation h3 {
      color: #003694;
      font-family: "Shippori Mincho", serif;
      font-weight: normal;
      padding-bottom: 20px; }
    .main .cooperation .wrap {
      box-sizing: border-box;
      max-width: 1200px;
      margin: 0 auto; }
      @media screen and (max-width: 1240px) {
        .main .cooperation .wrap {
          padding: 0 20px; } }
      .main .cooperation .wrap .catch {
        background-color: #FFF;
        border-radius: 6px;
        text-align: center;
        box-shadow: 0 3px 20px rgba(0, 54, 148, 0.1);
        padding: 40px 20px;
        margin-top: -80px;
        margin-bottom: 120px; }
        @media screen and (max-width: 520px) {
          .main .cooperation .wrap .catch {
            margin-top: -50px;
            margin-bottom: 60px;
            text-align: left; } }
        .main .cooperation .wrap .catch h2 {
          font-size: clamp(20px, calc(20px + (40 - 20) * ((100vw - 400px) / 1100)), 40px) !important; }
          @media screen and (max-width: 520px) {
            .main .cooperation .wrap .catch h2 {
              text-align: left;
              line-height: 150%; } }
        @media screen and (max-width: 520px) {
          .main .cooperation .wrap .catch br {
            display: none; } }
      .main .cooperation .wrap .list {
        padding-bottom: 120px; }
        @media screen and (max-width: 520px) {
          .main .cooperation .wrap .list {
            padding-bottom: 60px; } }
        .main .cooperation .wrap .list h2 {
          font-size: clamp(22px, calc(22px + (46 - 22) * ((100vw - 400px) / 1100)), 46px) !important;
          text-align: left; }
        .main .cooperation .wrap .list ul {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          padding-top: 20px; }
          .main .cooperation .wrap .list ul li {
            font-size: clamp(15px, calc(15px + (18 - 15) * ((100vw - 400px) / 1100)), 18px) !important;
            font-weight: 600;
            color: #003694;
            width: 50%;
            background: url("../img/cooperation/ch.svg") no-repeat left center;
            background-size: 28px;
            padding: 15px 0 15px 35px; }
            @media screen and (max-width: 768px) {
              .main .cooperation .wrap .list ul li {
                width: 100%; } }
      .main .cooperation .wrap .merit {
        padding-bottom: 120px; }
        @media screen and (max-width: 520px) {
          .main .cooperation .wrap .merit {
            padding-bottom: 60px; } }
        .main .cooperation .wrap .merit h2 {
          font-size: clamp(22px, calc(22px + (46 - 22) * ((100vw - 400px) / 1100)), 46px) !important;
          text-align: left; }
        .main .cooperation .wrap .merit .merit_flex {
          display: flex;
          justify-content: space-between;
          gap: 20px 25px;
          padding-top: 20px; }
          @media screen and (max-width: 768px) {
            .main .cooperation .wrap .merit .merit_flex {
              flex-wrap: wrap; } }
          .main .cooperation .wrap .merit .merit_flex .inBox {
            flex: 1;
            background-color: #FFF;
            border-radius: 6px;
            box-shadow: 0 3px 20px rgba(0, 54, 148, 0.1);
            padding: 80px 40px 40px;
            position: relative; }
            @media screen and (max-width: 768px) {
              .main .cooperation .wrap .merit .merit_flex .inBox {
                flex: none;
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: 50px 40px 40px; } }
            @media screen and (max-width: 520px) {
              .main .cooperation .wrap .merit .merit_flex .inBox {
                display: block;
                padding: 50px 20px 20px; } }
            .main .cooperation .wrap .merit .merit_flex .inBox .num {
              font-size: clamp(50px, calc(50px + (100 - 50) * ((100vw - 400px) / 1100)), 100px) !important;
              font-family: "Isidora", sans-serif;
              color: #003694;
              position: absolute;
              top: 0px;
              left: 50%;
              -webkit-transform: translate(-50%, 0%);
              -moz-transform: translate(-50%, 0%);
              -ms-transform: translate(-50%, 0%);
              -o-transform: translate(-50%, 0%);
              transform: translate(-50%, 0%); }
            .main .cooperation .wrap .merit .merit_flex .inBox .imgBox {
              width: 100%; }
              @media screen and (max-width: 768px) {
                .main .cooperation .wrap .merit .merit_flex .inBox .imgBox {
                  width: 30%; } }
              @media screen and (max-width: 520px) {
                .main .cooperation .wrap .merit .merit_flex .inBox .imgBox {
                  width: 100%; } }
              .main .cooperation .wrap .merit .merit_flex .inBox .imgBox img {
                object-fit: cover;
                width: 100%;
                height: 100%; }
            .main .cooperation .wrap .merit .merit_flex .inBox .txBox {
              padding: 40px 0 0 0; }
              @media screen and (max-width: 768px) {
                .main .cooperation .wrap .merit .merit_flex .inBox .txBox {
                  width: 65%;
                  padding: 0; } }
              @media screen and (max-width: 520px) {
                .main .cooperation .wrap .merit .merit_flex .inBox .txBox {
                  width: 100%;
                  padding: 20px 0 0 0; } }
              .main .cooperation .wrap .merit .merit_flex .inBox .txBox h3 {
                font-size: clamp(20px, calc(20px + (30 - 20) * ((100vw - 400px) / 1100)), 30px) !important;
                text-align: center; }
                @media screen and (max-width: 768px) {
                  .main .cooperation .wrap .merit .merit_flex .inBox .txBox h3 {
                    text-align: left; } }
                @media screen and (max-width: 520px) {
                  .main .cooperation .wrap .merit .merit_flex .inBox .txBox h3 {
                    text-align: center; } }
              .main .cooperation .wrap .merit .merit_flex .inBox .txBox p {
                color: #003694; }
      .main .cooperation .wrap .achievement {
        padding-bottom: 120px; }
        @media screen and (max-width: 520px) {
          .main .cooperation .wrap .achievement {
            padding-bottom: 60px; } }
        .main .cooperation .wrap .achievement h2 {
          font-size: clamp(22px, calc(22px + (46 - 22) * ((100vw - 400px) / 1100)), 46px) !important;
          text-align: left; }
        .main .cooperation .wrap .achievement .achievement_in {
          padding: 40px 0 0 0;
          position: relative; }
          .main .cooperation .wrap .achievement .achievement_in:after {
            content: "";
            width: 520px;
            height: 415px;
            background: url("../img/cooperation/map.webp") no-repeat center;
            background-size: 100%;
            position: absolute;
            right: -150px;
            top: -50px; }
            @media screen and (max-width: 1540px) {
              .main .cooperation .wrap .achievement .achievement_in:after {
                right: -100px;
                top: 0; } }
            @media screen and (max-width: 1430px) {
              .main .cooperation .wrap .achievement .achievement_in:after {
                right: 0;
                width: 400px; } }
            @media screen and (max-width: 1000px) {
              .main .cooperation .wrap .achievement .achievement_in:after {
                display: block;
                width: 500px;
                position: relative;
                top: auto;
                right: auto;
                margin: 0 auto; } }
            @media screen and (max-width: 768px) {
              .main .cooperation .wrap .achievement .achievement_in:after {
                width: 80%; } }
            @media screen and (max-width: 520px) {
              .main .cooperation .wrap .achievement .achievement_in:after {
                height: 300px; } }
            @media screen and (max-width: 400px) {
              .main .cooperation .wrap .achievement .achievement_in:after {
                height: 200px; } }
          .main .cooperation .wrap .achievement .achievement_in .inBox {
            width: 810px;
            padding-bottom: 40px; }
            @media screen and (max-width: 1430px) {
              .main .cooperation .wrap .achievement .achievement_in .inBox {
                width: 70%; } }
            @media screen and (max-width: 1000px) {
              .main .cooperation .wrap .achievement .achievement_in .inBox {
                width: 100%; } }
            .main .cooperation .wrap .achievement .achievement_in .inBox h3 {
              font-size: clamp(20px, calc(20px + (28 - 20) * ((100vw - 400px) / 1100)), 28px) !important;
              font-family: "Noto Sans JP";
              font-weight: 500;
              border-left: 9px solid #003694;
              color: #000;
              padding: 5px 0 5px 10px;
              margin-bottom: 20px; }
            .main .cooperation .wrap .achievement .achievement_in .inBox p span {
              color: #0054E6;
              font-weight: 700; }
      .main .cooperation .wrap .works {
        padding-bottom: 120px; }
        @media screen and (max-width: 520px) {
          .main .cooperation .wrap .works {
            padding-bottom: 60px; } }
        .main .cooperation .wrap .works h2 {
          font-size: clamp(22px, calc(22px + (46 - 22) * ((100vw - 400px) / 1100)), 46px) !important;
          text-align: left; }
        .main .cooperation .wrap .works .tx {
          padding-bottom: 20px; }
        .main .cooperation .wrap .works .works_flex {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #FFF;
          border-radius: 6px;
          box-shadow: 0 3px 20px rgba(0, 54, 148, 0.1);
          padding: 40px;
          margin-bottom: 20px; }
          @media screen and (max-width: 768px) {
            .main .cooperation .wrap .works .works_flex {
              flex-wrap: wrap; } }
          @media screen and (max-width: 520px) {
            .main .cooperation .wrap .works .works_flex {
              padding: 20px; } }
          .main .cooperation .wrap .works .works_flex .imgBox {
            width: 520px; }
            @media screen and (max-width: 1200px) {
              .main .cooperation .wrap .works .works_flex .imgBox {
                width: 48%; } }
            @media screen and (max-width: 768px) {
              .main .cooperation .wrap .works .works_flex .imgBox {
                width: 100%; } }
          .main .cooperation .wrap .works .works_flex .txBox {
            width: calc(50% - 35px); }
            @media screen and (max-width: 1200px) {
              .main .cooperation .wrap .works .works_flex .txBox {
                width: 48%; } }
            @media screen and (max-width: 768px) {
              .main .cooperation .wrap .works .works_flex .txBox {
                width: 100%;
                padding: 20px 0 0 0; } }
            .main .cooperation .wrap .works .works_flex .txBox h3 {
              font-size: clamp(18px, calc(18px + (24 - 18) * ((100vw - 400px) / 1100)), 24px) !important;
              font-family: "Noto Sans JP";
              font-weight: 500;
              color: #000; }
      .main .cooperation .wrap .faq {
        padding-top: 120px;
        padding-bottom: 120px; }
        @media screen and (max-width: 520px) {
          .main .cooperation .wrap .faq {
            padding-bottom: 60px;
            padding-top: 60px; } }
        .main .cooperation .wrap .faq h2 {
          font-size: clamp(22px, calc(22px + (46 - 22) * ((100vw - 400px) / 1100)), 46px) !important;
          text-align: left;
          padding-bottom: 40px; }
        .main .cooperation .wrap .faq .faqBox {
          padding-bottom: 30px; }
          .main .cooperation .wrap .faq .faqBox p {
            padding: 5px 0 0 50px; }
            @media screen and (max-width: 520px) {
              .main .cooperation .wrap .faq .faqBox p {
                padding: 0 0 0 40px;
                line-height: 160%; } }
            .main .cooperation .wrap .faq .faqBox p:before {
              font-family: "Shippori Mincho", serif;
              font-weight: normal;
              font-size: clamp(16px, calc(16px + (28 - 16) * ((100vw - 400px) / 1100)), 28px) !important;
              position: absolute;
              top: 0;
              left: 0;
              border: 1px solid #003694;
              width: 40px;
              height: 40px;
              color: #003694;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0 0 4px 1px;
              box-sizing: border-box; }
              @media screen and (max-width: 520px) {
                .main .cooperation .wrap .faq .faqBox p:before {
                  width: 25px;
                  height: 25px; } }
            .main .cooperation .wrap .faq .faqBox p.qTx {
              position: relative;
              font-size: clamp(15px, calc(15px + (18 - 15) * ((100vw - 400px) / 1100)), 18px) !important;
              color: #003694;
              margin-bottom: 20px; }
              .main .cooperation .wrap .faq .faqBox p.qTx:before {
                content: "Q";
                background-color: #003694;
                color: #FFF; }
            .main .cooperation .wrap .faq .faqBox p.aTx {
              position: relative;
              font-size: clamp(13px, calc(13px + (16 - 13) * ((100vw - 400px) / 1100)), 16px) !important; }
              .main .cooperation .wrap .faq .faqBox p.aTx:before {
                content: "A"; }
      .main .cooperation .wrap .faqTx {
        font-family: "Shippori Mincho", serif;
        font-weight: normal;
        color: #003694;
        text-align: center;
        font-size: clamp(20px, calc(20px + (40 - 20) * ((100vw - 400px) / 1100)), 40px) !important;
        padding-bottom: 100px;
        line-height: 160%; }
        @media screen and (max-width: 768px) {
          .main .cooperation .wrap .faqTx {
            text-align: left; } }
        @media screen and (max-width: 520px) {
          .main .cooperation .wrap .faqTx {
            padding-bottom: 40px; } }
        @media screen and (max-width: 768px) {
          .main .cooperation .wrap .faqTx br {
            display: none; } }
    .main .cooperation.flowBox {
      position: relative; }
      .main .cooperation.flowBox:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #0054E6, #000094);
        opacity: 0.3;
        z-index: 0; }
      .main .cooperation.flowBox .wrap {
        position: relative;
        z-index: 1; }
        .main .cooperation.flowBox .wrap .flow {
          padding: 120px 0 70px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap; }
          @media screen and (max-width: 520px) {
            .main .cooperation.flowBox .wrap .flow {
              padding: 60px 0; } }
          .main .cooperation.flowBox .wrap .flow h2 {
            font-size: clamp(22px, calc(22px + (46 - 22) * ((100vw - 400px) / 1100)), 46px) !important;
            text-align: left;
            color: #FFF;
            padding-bottom: 0; }
            @media screen and (max-width: 1000px) {
              .main .cooperation.flowBox .wrap .flow h2 {
                padding-bottom: 40px; } }
          .main .cooperation.flowBox .wrap .flow .lBox {
            width: 50%; }
            @media screen and (max-width: 1000px) {
              .main .cooperation.flowBox .wrap .flow .lBox {
                width: 100%; } }
          .main .cooperation.flowBox .wrap .flow .rBox {
            width: 50%; }
            @media screen and (max-width: 1000px) {
              .main .cooperation.flowBox .wrap .flow .rBox {
                width: 100%; } }
            .main .cooperation.flowBox .wrap .flow .rBox .flow_flex {
              display: flex;
              justify-content: flex-start;
              align-items: flex-start;
              gap: 20px 20px; }
              .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .icon {
                width: 100px;
                position: relative; }
                @media screen and (max-width: 520px) {
                  .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .icon {
                    width: 60px; } }
                .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .icon:after {
                  content: "";
                  width: 1px;
                  height: 48px;
                  background-color: #003694;
                  position: absolute;
                  left: 48px;
                  bottom: -70px; }
                  @media screen and (max-width: 520px) {
                    .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .icon:after {
                      left: 28px;
                      bottom: -60px; } }
                .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .icon.last:after {
                  display: none; }
              .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .txBox {
                width: calc(100% - 120px);
                padding-bottom: 50px; }
                @media screen and (max-width: 520px) {
                  .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .txBox {
                    width: calc(100% - 70px);
                    padding-bottom: 20px; } }
                .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .txBox p {
                  line-height: 32px; }
                  @media screen and (max-width: 520px) {
                    .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .txBox p {
                      line-height: 22px; } }
                  .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .txBox p.title {
                    font-size: clamp(22px, calc(22px + (30 - 22) * ((100vw - 400px) / 1100)), 30px) !important;
                    font-family: "Shippori Mincho", serif;
                    font-weight: normal;
                    color: #FFF;
                    padding-bottom: 20px;
                    padding-top: 30px; }
                    @media screen and (max-width: 520px) {
                      .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .txBox p.title {
                        padding-top: 10px; } }
                    .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .txBox p.title span {
                      padding: 0 1em 0 0; }
                      @media screen and (max-width: 520px) {
                        .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .txBox p.title span {
                          padding: 0;
                          display: block;
                          font-size: 16px; } }
                  .main .cooperation.flowBox .wrap .flow .rBox .flow_flex .txBox p a {
                    color: #0054E6;
                    text-decoration: underline; }

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