@charset "UTF-8";
.about {
  	/* =======================================================
  
  		会社概要
  
  	======================================================= */
  	/* =======================================================
  
  		ご挨拶
  
  	======================================================= */ }
  .about.company .box_company {
    width: 800px;
    margin-bottom: 3em; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .about.company .box_company {
        width: 100%; } }
    .about.company .box_company h2 {
      font-size: 2.4rem;
      padding: 0.7em 1.5em 0.9em 1em; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .about.company .box_company h2 {
          font-size: 1.8rem;
          padding: 0.3em 1em 0.5em 1em; } }
    .about.company .box_company__inner {
      position: relative;
      min-height: 380px; }
      .about.company .box_company__inner figure {
        width: 320px;
        position: absolute;
        right: -200px;
        top: -50px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .about.company .box_company__inner figure {
            position: static;
            margin: 3em auto;
            width: 300px; } }
  .about.message .message_index {
    margin-bottom: 10em; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .about.message .message_index {
        margin-bottom: 5em; } }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .about.message .message_index .bnr_01 img {
        width: 100%;
        height: 240px;
        object-fit: cover; } }
  .about.message .topmessage_header {
    display: flex;
    width: 100%; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .about.message .topmessage_header {
        flex-direction: column;
        position: relative;
        padding-top: 70px; } }
    .about.message .topmessage_header__img {
      width: 57vw; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .about.message .topmessage_header__img {
          width: 100%;
          height: 300px; } }
      .about.message .topmessage_header__img img {
        height: 100%;
        object-fit: cover; }
    .about.message .topmessage_header__txt {
      flex: 1;
      padding: 20px 50px 0;
      display: flex;
      flex-direction: column; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .about.message .topmessage_header__txt {
          padding: 20px 0px 0; } }
      .about.message .topmessage_header__txt .ttl {
        position: relative; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .about.message .topmessage_header__txt .ttl {
            position: absolute;
            left: 5px;
            top: 4px; } }
        .about.message .topmessage_header__txt .ttl span:nth-child(1) {
          font-size: 10rem;
          color: #F7F5F2;
          font-family: "Figtree", "Noto Sans JP", sans-serif;
          font-weight: 600;
          line-height: 1;
          position: relative; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .about.message .topmessage_header__txt .ttl span:nth-child(1) {
              font-size: 4rem; } }
        .about.message .topmessage_header__txt .ttl span:nth-child(2) {
          font-size: 2rem;
          font-weight: 500;
          line-height: 1.2;
          color: #fff;
          background-color: #F7F5F2;
          padding: 0.2em 1.4em 0.4em;
          position: absolute;
          left: 21rem;
          top: 5rem; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .about.message .topmessage_header__txt .ttl span:nth-child(2) {
              font-size: 1.4rem;
              right: auto;
              left: 90px;
              top: 0.4em;
              padding: 0.1em 1em 0.3em;
              width: 7em; } }
      .about.message .topmessage_header__txt h1 {
        font-size: 3.6rem;
        font-weight: 600;
        line-height: 1.1;
        margin-left: -170px;
        margin-top: 0.9em;
        margin-bottom: 1.8em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .about.message .topmessage_header__txt h1 {
            font-size: 2.4rem;
            margin-left: 0px;
            margin-top: 0.5em;
            margin-bottom: 0; } }
        .about.message .topmessage_header__txt h1 span {
          background-color: #fff;
          padding: 0.2em 0.4em 0.4em;
          display: inline-block;
          margin-bottom: 6px; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .about.message .topmessage_header__txt h1 span {
              padding: 0.2em 0.4em;
              margin-bottom: 0px; } }
      .about.message .topmessage_header__txt .name {
        margin-top: auto; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .about.message .topmessage_header__txt .name {
            margin-top: 2em;
            margin-left: 10px; } }
        .about.message .topmessage_header__txt .name p {
          line-height: 1.5; }
          .about.message .topmessage_header__txt .name p:nth-child(2) {
            font-size: 2.6rem;
            font-weight: 500;
            margin-top: 0.6em; }
            @media only screen and (max-width: 768px), print and (min-width: 2cm) {
              .about.message .topmessage_header__txt .name p:nth-child(2) {
                margin-top: 0.4em;
                font-size: 1.9rem; } }
  .about.message .topmessage_body {
    position: relative; }
    .about.message .topmessage_body::after {
      content: "";
      width: 100%;
      height: 82.5vw;
      position: absolute;
      left: 0;
      bottom: 50vw;
      background: url("../img/bg_01.png") no-repeat center top/contain;
      transform: scaleX(-1);
      z-index: -1; }
  .about.message .executive_header {
    width: 100%;
    position: relative;
    margin-bottom: 4em; }
    .about.message .executive_header figure {
      width: 100%; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .about.message .executive_header figure img {
          height: 180px;
          object-fit: cover; } }
    .about.message .executive_header .ttl {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-500px, -50%); }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .about.message .executive_header .ttl {
          left: 20px;
          transform: translate(0, -50%); } }
      .about.message .executive_header .ttl span:nth-child(1) {
        font-size: 10rem;
        color: #fff;
        font-family: "Figtree", "Noto Sans JP", sans-serif;
        font-weight: 600;
        line-height: 1;
        position: relative;
        display: block;
        left: -0.08em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .about.message .executive_header .ttl span:nth-child(1) {
            font-size: 12vw; } }
      .about.message .executive_header .ttl span:nth-child(2) {
        font-size: 2rem;
        font-weight: 500;
        color: #fff;
        background-color: #F7F5F2;
        padding: 0.2em 1.6em 0.4em;
        display: inline-block;
        line-height: 1.2;
        margin-top: 0.8em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .about.message .executive_header .ttl span:nth-child(2) {
            font-size: 1.4rem;
            left: 12px;
            bottom: 10px;
            padding: 0.1em 1.6em 0.3em;
            margin-top: 0.6em; } }
  .about.message .executive_body {
    position: relative;
    padding-bottom: 7em; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .about.message .executive_body {
        padding-bottom: 5em; } }
    .about.message .executive_body::after {
      content: "";
      width: 65vw;
      height: 67vw;
      position: absolute;
      left: 0;
      top: 150px;
      background: url("../img/people/bg_interview.png") no-repeat center top/contain;
      transform: scaleX(-1);
      z-index: -1; }
    .about.message .executive_body .box_name {
      display: flex;
      flex-direction: row-reverse; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .about.message .executive_body .box_name {
          flex-direction: column; } }
      .about.message .executive_body .box_name figure {
        width: 400px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .about.message .executive_body .box_name figure {
            width: 240px;
            margin: 0 auto; } }
      .about.message .executive_body .box_name__txt {
        flex: 1;
        display: flex;
        flex-direction: column; }
        .about.message .executive_body .box_name__txt h1 {
          font-size: 3.6rem;
          font-weight: 600;
          line-height: 1.6;
          margin-top: 1.2em;
          color: #F40D15; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .about.message .executive_body .box_name__txt h1 {
              font-size: 2.4rem;
              margin-top: 1em; } }
        .about.message .executive_body .box_name__txt .name {
          margin-top: auto; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .about.message .executive_body .box_name__txt .name {
              margin-top: 1.4em; } }
          .about.message .executive_body .box_name__txt .name p {
            line-height: 1.5; }
            .about.message .executive_body .box_name__txt .name p:nth-child(2) {
              font-size: 2.6rem;
              font-weight: 500;
              margin-top: 0.6em; }
              @media only screen and (max-width: 768px), print and (min-width: 2cm) {
                .about.message .executive_body .box_name__txt .name p:nth-child(2) {
                  margin-top: 0.3em; } }
    .about.message .executive_body .box_profile {
      border: solid 1px #F40D15;
      padding: 25px 30px 25px;
      color: #F40D15; }
      .about.message .executive_body .box_profile h3 {
        font-size: 3.2rem;
        font-family: "Figtree", "Noto Sans JP", sans-serif;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 0.3em; }

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