@charset "UTF-8";
/*! Writen  by SCSS */
/*下層ページ最初のセクション上部余白を統一する際は使用してみて下さい*/
.inner_main .main_bg {
  background-image: url("../images/design/main.jpg"); }

.sec01 {
  padding-bottom: clamp(80px, 10.834vw, 130px); }
  .sec01 .page_ttl {
    margin-bottom: clamp(30px, 4.167vw, 50px); }
    @media screen and (max-width: 480px) {
      .sec01 .page_ttl {
        margin-bottom: 40px; } }
  .sec01 .sec01_item01 {
    position: relative;
    margin-bottom: clamp(50px, 6.667vw, 80px); }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_item01 {
        flex-direction: column;
        row-gap: 30px; } }
    .sec01 .sec01_item01 .text_group {
      position: absolute;
      inset: 0;
      max-width: 1200px;
      width: calc(100% - 40px);
      margin: auto;
      z-index: 1; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_item01 .text_group {
          position: relative;
          inset: auto;
          margin: 0 auto; } }
      .sec01 .sec01_item01 .text_group .sec_ttl_wrap {
        width: 40.84%;
        margin-top: 7%;
        margin-left: auto;
        row-gap: 0; }
        @media screen and (max-width: 1300px) {
          .sec01 .sec01_item01 .text_group .sec_ttl_wrap {
            margin-top: 2%; } }
        @media screen and (max-width: 820px) {
          .sec01 .sec01_item01 .text_group .sec_ttl_wrap {
            width: 44%; } }
        @media screen and (max-width: 480px) {
          .sec01 .sec01_item01 .text_group .sec_ttl_wrap {
            width: 100%; } }
        .sec01 .sec01_item01 .text_group .sec_ttl_wrap .sec_ttl {
          margin: clamp(30px, 4vw, 60px) 0 clamp(20px, 2.667vw, 40px); }
          @media screen and (max-width: 1300px) {
            .sec01 .sec01_item01 .text_group .sec_ttl_wrap .sec_ttl {
              margin: 30px 0 20px; } }
          @media screen and (max-width: 480px) {
            .sec01 .sec01_item01 .text_group .sec_ttl_wrap .sec_ttl {
              margin: 20px 0; } }
        .sec01 .sec01_item01 .text_group .sec_ttl_wrap .read {
          font-size: clamp(11px, 1.067vw, 16px); }
          @media screen and (max-width: 480px) {
            .sec01 .sec01_item01 .text_group .sec_ttl_wrap .read {
              font-size: 14px; } }
    .sec01 .sec01_item01 .parse {
      width: 76.88%; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_item01 .parse {
          width: 100%; } }
      .sec01 .sec01_item01 .parse img {
        width: 100%; }
      .sec01 .sec01_item01 .parse .cap {
        left: 100%;
        right: auto;
        white-space: nowrap; }
        @media screen and (max-width: 480px) {
          .sec01 .sec01_item01 .parse .cap {
            left: auto;
            right: 0;
            white-space: normal; } }
  .sec01 .sec01_item02 {
    max-width: 970px;
    background: #FFF;
    padding: clamp(20px, 3.315vw, 30px);
    padding-right: clamp(25px, 3.868vw, 35px);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.1), 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_item02 {
        flex-direction: column;
        row-gap: 20px; } }
    .sec01 .sec01_item02 .text_group {
      width: 75.14%;
      flex-direction: column;
      row-gap: clamp(15px, 2vw, 20px); }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_item02 .text_group {
          width: 100%; } }
      .sec01 .sec01_item02 .text_group .profile_txt {
        column-gap: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #0098bb;
        align-items: center;
        justify-content: flex-start;
        line-height: 1.4; }
        @media screen and (max-width: 480px) {
          .sec01 .sec01_item02 .text_group .profile_txt {
            flex-direction: column;
            row-gap: 5px; } }
        .sec01 .sec01_item02 .text_group .profile_txt .p01 {
          font-size: clamp(18px, 3vw, 30px);
          color: #0098bb; }
          @media screen and (max-width: 480px) {
            .sec01 .sec01_item02 .text_group .profile_txt .p01 {
              font-size: 6vw;
              line-height: 1.2; } }
        .sec01 .sec01_item02 .text_group .profile_txt .p02 {
          font-size: clamp(14px, 2.6vw, 26px); }
          @media screen and (max-width: 480px) {
            .sec01 .sec01_item02 .text_group .profile_txt .p02 {
              font-size: 5vw; } }
          .sec01 .sec01_item02 .text_group .profile_txt .p02 .small {
            font-size: 70%;
            display: block; }
          .sec01 .sec01_item02 .text_group .profile_txt .p02 small {
            font-size: 60%; }
      .sec01 .sec01_item02 .text_group .p03 {
        font-size: clamp(16px, 2.2vw, 22px);
        color: #0098bb; }
        @media screen and (max-width: 480px) {
          .sec01 .sec01_item02 .text_group .p03 {
            font-size: 16px; } }
      .sec01 .sec01_item02 .text_group .p04 {
        font-size: clamp(11px, 1.5vw, 15px); }
        @media screen and (max-width: 480px) {
          .sec01 .sec01_item02 .text_group .p04 {
            font-size: 14px; } }
    .sec01 .sec01_item02 .photo {
      width: 18.79%; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_item02 .photo {
          width: 100%;
          max-width: 120px;
          margin: 0 auto; } }

.sec02 .big_photo_group .big_photo .photo_copy {
  position: absolute;
  left: 6.88%;
  top: 13.69%;
  font-size: clamp(20px, 3vw, 36px);
  color: #FFF; }
  @media screen and (max-width: 480px) {
    .sec02 .big_photo_group .big_photo .photo_copy {
      font-size: 4.6vw;
      left: 20px;
      top: 20px;
      text-shadow: 0px 0px 0px rgba(95, 93, 108, 0.5), 0px 0px 1px rgba(95, 93, 108, 0.5), 0px 0px 2px rgba(95, 93, 108, 0.5), 0px 0px 3px rgba(95, 93, 108, 0.5), 0px 0px 4px rgba(95, 93, 108, 0.5), 0px 0px 5px rgba(95, 93, 108, 0.5), 0px 0px 6px rgba(95, 93, 108, 0.5), 0px 0px 7px rgba(95, 93, 108, 0.5), 0px 0px 8px rgba(95, 93, 108, 0.5), 0px 0px 9px rgba(95, 93, 108, 0.5), 0px 0px 10px rgba(95, 93, 108, 0.5); } }
.sec02 .text_group {
  padding: 50px 0 clamp(60px, 9.167vw, 110px); }
  .sec02 .text_group .sec_ttl_wrap {
    row-gap: clamp(20px, 2.917vw, 35px);
    text-align: center; }
    @media screen and (max-width: 480px) {
      .sec02 .text_group .sec_ttl_wrap .read {
        text-align: left; } }
  .sec02 .text_group .parse {
    width: fit-content;
    margin: 0 auto; }
    @media screen and (max-width: 480px) {
      .sec02 .text_group .parse {
        margin: 0 -20px; } }
    @media screen and (max-width: 480px) {
      .sec02 .text_group .parse .cap {
        position: static;
        text-align: right; } }

.sec03 {
  padding: clamp(50px, 5.834vw, 70px) 0 clamp(60px, 8.334vw, 100px);
  background: rgba(0, 152, 187, 0.15); }
  .sec03 .text_group.first {
    flex-direction: column;
    row-gap: clamp(50px, 6.667vw, 80px);
    margin-bottom: 30px; }
    @media screen and (max-width: 480px) {
      .sec03 .text_group.first {
        row-gap: 40px; } }
  .sec03 .sec_ttl_wrap {
    text-align: center;
    padding-top: clamp(30px, 4.167vw, 50px); }
    @media screen and (max-width: 480px) {
      .sec03 .sec_ttl_wrap .read {
        text-align: left; } }
  .sec03 .sec03_item01 {
    margin-top: clamp(60px, 10vw, 120px); }

.sec04 {
  padding: clamp(50px, 7.5vw, 90px) 0 clamp(40px, 5vw, 60px); }
  .sec04 .sec04_item01 {
    position: relative;
    margin-bottom: clamp(50px, 6.667vw, 80px); }
    .sec04 .sec04_item01 .shikihai_in {
      width: 81.67%;
      margin: 0 auto; }
      @media screen and (max-width: 820px) {
        .sec04 .sec04_item01 .shikihai_in {
          margin: 0;
          margin-left: auto; } }
      @media screen and (max-width: 480px) {
        .sec04 .sec04_item01 .shikihai_in {
          width: 100%; } }
      @media screen and (max-width: 480px) {
        .sec04 .sec04_item01 .shikihai_in .shikihai {
          margin: 0 -15px; } }
      .sec04 .sec04_item01 .shikihai_in .shikihai .cap {
        right: 6%; }
      .sec04 .sec04_item01 .shikihai_in .shikihai .wappen {
        position: absolute;
        right: 6.13%;
        top: 1.99%;
        width: 24.49%; }
        @media screen and (max-width: 480px) {
          .sec04 .sec04_item01 .shikihai_in .shikihai .wappen {
            right: 15px;
            top: 15px;
            width: 32%; } }
    .sec04 .sec04_item01 .sec_ttl_wrap {
      position: absolute;
      left: 0;
      bottom: 20px;
      width: 45.84%;
      row-gap: 20px; }
      @media screen and (max-width: 820px) {
        .sec04 .sec04_item01 .sec_ttl_wrap {
          width: 54%; } }
      @media screen and (max-width: 480px) {
        .sec04 .sec04_item01 .sec_ttl_wrap {
          position: relative;
          left: auto;
          bottom: auto;
          width: 100%;
          margin-top: 30px; } }
      @media screen and (max-width: 480px) {
        .sec04 .sec04_item01 .sec_ttl_wrap .sec_ttl {
          order: 2; } }
      .sec04 .sec04_item01 .sec_ttl_wrap .read {
        font-size: clamp(11px, 1.067vw, 16px); }
        @media screen and (max-width: 480px) {
          .sec04 .sec04_item01 .sec_ttl_wrap .read {
            font-size: 14px;
            order: 3; } }
      .sec04 .sec04_item01 .sec_ttl_wrap .hanrei_group {
        max-width: 500px;
        justify-content: center;
        column-gap: clamp(10px, 1.667vw, 20px);
        background: #FFF;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        padding: 15px; }
        @media screen and (max-width: 820px) {
          .sec04 .sec04_item01 .sec_ttl_wrap .hanrei_group {
            padding: 10px; } }
        @media screen and (max-width: 480px) {
          .sec04 .sec04_item01 .sec_ttl_wrap .hanrei_group {
            flex-wrap: wrap;
            column-gap: 5px;
            padding: 10px 5px;
            order: 1; } }
        .sec04 .sec04_item01 .sec_ttl_wrap .hanrei_group .hanrei {
          align-items: center;
          column-gap: 5px;
          font-size: clamp(10px, 1.167vw, 14px); }
          @media screen and (max-width: 480px) {
            .sec04 .sec04_item01 .sec_ttl_wrap .hanrei_group .hanrei {
              font-size: 11px; } }
          .sec04 .sec04_item01 .sec_ttl_wrap .hanrei_group .hanrei .icon {
            width: 15px;
            aspect-ratio: 1;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
            @media screen and (max-width: 480px) {
              .sec04 .sec04_item01 .sec_ttl_wrap .hanrei_group .hanrei .icon {
                width: 10px; } }
            .sec04 .sec04_item01 .sec_ttl_wrap .hanrei_group .hanrei .icon.icon01 {
              background-color: #ca3923; }
            .sec04 .sec04_item01 .sec_ttl_wrap .hanrei_group .hanrei .icon.icon02 {
              background-color: #00508f; }
            .sec04 .sec04_item01 .sec_ttl_wrap .hanrei_group .hanrei .icon.icon03 {
              background-color: #cf7b0e; }
            .sec04 .sec04_item01 .sec_ttl_wrap .hanrei_group .hanrei .icon.icon04 {
              background-color: #005e3c; }
  .sec04 .sec04_item02 {
    padding: 25px 25px 15px 30px;
    background: #7cc6d8;
    color: #FFF;
    align-items: flex-start;
    margin-bottom: clamp(50px, 6.667vw, 80px); }
    @media screen and (max-width: 480px) {
      .sec04 .sec04_item02 {
        padding: 20px;
        flex-direction: column;
        row-gap: 20px; } }
    .sec04 .sec04_item02 .sec_ttl_wrap {
      width: 45.42%;
      row-gap: 0; }
      @media screen and (max-width: 480px) {
        .sec04 .sec04_item02 .sec_ttl_wrap {
          width: 100%; } }
      .sec04 .sec04_item02 .sec_ttl_wrap .plant_en {
        font-size: clamp(20px, 2.5vw, 30px); }
        @media screen and (max-width: 480px) {
          .sec04 .sec04_item02 .sec_ttl_wrap .plant_en {
            margin-bottom: 10px; } }
      .sec04 .sec04_item02 .sec_ttl_wrap .sec_ttl {
        color: #FFF;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #FFF; }
        @media screen and (max-width: 820px) {
          .sec04 .sec04_item02 .sec_ttl_wrap .sec_ttl {
            font-size: 2.1vw;
            line-height: 1.4;
            padding-bottom: 15px;
            margin-bottom: 15px; } }
        @media screen and (max-width: 480px) {
          .sec04 .sec04_item02 .sec_ttl_wrap .sec_ttl {
            font-size: 4.3vw; } }
      .sec04 .sec04_item02 .sec_ttl_wrap .read {
        line-height: 1.8; }
    .sec04 .sec04_item02 .photo_group {
      width: 50.66%;
      flex-wrap: wrap;
      row-gap: 20px; }
      @media screen and (max-width: 480px) {
        .sec04 .sec04_item02 .photo_group {
          width: 100%;
          row-gap: 12px; } }
      .sec04 .sec04_item02 .photo_group .photo_in {
        width: 31.04%; }
        @media screen and (max-width: 480px) {
          .sec04 .sec04_item02 .photo_group .photo_in {
            width: 48%; } }
        .sec04 .sec04_item02 .photo_group .photo_in .photo_cap {
          font-size: clamp(10px, 1.167vw, 14px);
          text-align: center;
          margin-top: 5px; }
          @media screen and (max-width: 480px) {
            .sec04 .sec04_item02 .photo_group .photo_in .photo_cap {
              font-size: 12px; } }
  .sec04 .sec04_item03 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(30px, 3.334vw, 40px) 3.33%; }
    @media screen and (max-width: 480px) {
      .sec04 .sec04_item03 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 4%; } }
    .sec04 .sec04_item03 .item.parse {
      grid-column: span 3; }
      @media screen and (max-width: 480px) {
        .sec04 .sec04_item03 .item.parse {
          grid-column: span 2; } }
    @media screen and (max-width: 480px) {
      .sec04 .sec04_item03 .item.sp_full {
        grid-column: span 2; } }
    .sec04 .sec04_item03 .item.postaku {
      grid-row: 3 / 5;
      grid-column: 3 / 5;
      background: #FFF;
      padding: clamp(20px, 2.308vw, 30px);
      padding-right: clamp(20px, 1.924vw, 25px); }
      @media screen and (max-width: 480px) {
        .sec04 .sec04_item03 .item.postaku {
          grid-row: auto;
          grid-column: span 2; } }
      .sec04 .sec04_item03 .item.postaku .postaku_image {
        flex-direction: row-reverse;
        align-items: center;
        margin-bottom: clamp(30px, 4.616vw, 60px); }
        @media screen and (max-width: 480px) {
          .sec04 .sec04_item03 .item.postaku .postaku_image {
            flex-direction: column;
            row-gap: 20px; } }
        .sec04 .sec04_item03 .item.postaku .postaku_image .p01 {
          width: 33.15%; }
          @media screen and (max-width: 480px) {
            .sec04 .sec04_item03 .item.postaku .postaku_image .p01 {
              width: 100%;
              text-align: center; } }
        .sec04 .sec04_item03 .item.postaku .postaku_image .p02 {
          width: 63.05%; }
          @media screen and (max-width: 480px) {
            .sec04 .sec04_item03 .item.postaku .postaku_image .p02 {
              width: 100%; } }
          .sec04 .sec04_item03 .item.postaku .postaku_image .p02 .cap_r {
            position: absolute;
            right: 0;
            top: 100%; }
            @media screen and (max-width: 480px) {
              .sec04 .sec04_item03 .item.postaku .postaku_image .p02 .cap_r {
                position: static;
                display: block; } }
      .sec04 .sec04_item03 .item.postaku .postaku_merit {
        margin-top: 25px;
        flex-wrap: wrap;
        row-gap: 15px; }
        @media screen and (max-width: 480px) {
          .sec04 .sec04_item03 .item.postaku .postaku_merit {
            row-gap: 5px; } }
        .sec04 .sec04_item03 .item.postaku .postaku_merit .merit_in {
          width: 47.62%;
          background: #7cc6d8;
          padding: 15px 5px;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center; }
          @media screen and (max-width: 480px) {
            .sec04 .sec04_item03 .item.postaku .postaku_merit .merit_in {
              width: 49%;
              padding: 10px 0; } }
          .sec04 .sec04_item03 .item.postaku .postaku_merit .merit_in .merit {
            align-self: center;
            font-size: clamp(11px, 1.231vw, 16px);
            line-height: 1.25;
            color: #FFF;
            letter-spacing: -0.05em; }
            @media screen and (max-width: 820px) {
              .sec04 .sec04_item03 .item.postaku .postaku_merit .merit_in .merit {
                font-size: 1.2vw; } }
            @media screen and (max-width: 480px) {
              .sec04 .sec04_item03 .item.postaku .postaku_merit .merit_in .merit {
                font-size: 3vw;
                line-height: 1.4; } }
      .sec04 .sec04_item03 .item.postaku .postaku_cap {
        margin-top: 5px;
        font-size: clamp(10px, 0.924vw, 12px); }
    .sec04 .sec04_item03 .item .num_text {
      align-items: flex-start;
      justify-content: flex-start;
      column-gap: 10px;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #ccc; }
      @media screen and (max-width: 820px) {
        .sec04 .sec04_item03 .item .num_text {
          column-gap: 5px; } }
      .sec04 .sec04_item03 .item .num_text.ctr {
        align-items: center; }
      @media screen and (max-width: 480px) {
        .sec04 .sec04_item03 .item .num_text.sp_center {
          align-items: center; } }
      .sec04 .sec04_item03 .item .num_text .num {
        width: 30px;
        line-height: 1;
        aspect-ratio: 1;
        flex-shrink: 0;
        background: #014099;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: clamp(13px, 1.539vw, 20px);
        color: #FFF; }
        @media screen and (max-width: 820px) {
          .sec04 .sec04_item03 .item .num_text .num {
            width: 22px; } }
        @media screen and (max-width: 480px) {
          .sec04 .sec04_item03 .item .num_text .num {
            width: 18px;
            font-size: 14px; } }
      .sec04 .sec04_item03 .item .num_text .text {
        font-size: clamp(12px, 1.462vw, 19px);
        color: #014099;
        line-height: 1.2;
        margin-top: -3px; }
        @media screen and (max-width: 820px) {
          .sec04 .sec04_item03 .item .num_text .text {
            font-size: 1.6vw; } }
        @media screen and (max-width: 480px) {
          .sec04 .sec04_item03 .item .num_text .text {
            font-size: 4vw; } }
    .sec04 .sec04_item03 .item .photo {
      margin-bottom: 20px; }
    .sec04 .sec04_item03 .item .item_read {
      font-size: clamp(11px, 1.231vw, 16px);
      letter-spacing: -0.05em; }
      @media screen and (max-width: 480px) {
        .sec04 .sec04_item03 .item .item_read {
          font-size: 13px; } }