@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Zen+Maru+Gothic&display=swap");
/*********************************
 * message
 *********************************/
#message {
  padding: 6.5rem 0 0 0; }
  @media screen and (max-width: 768px) {
    #message {
      padding: 4.5rem 0 0 0; } }
  #message .jp_ttl {
    margin-top: 0 !important;
    padding: 0 !important;
    font-size: 100% !important;
    line-height: 1.2 !important; }
    @media screen and (max-width: 768px) {
      #message .jp_ttl {
        margin-top: 0 !important; } }
  #message h3 {
    margin-top: 5.5rem;
    font-size: 148%;
    line-height: 2; }
    @media screen and (max-width: 768px) {
      #message h3 {
        margin-top: 2.5rem;
        font-size: 175%;
        line-height: 1.8; } }
  #message p {
    margin-top: 2.5rem;
    font-size: 115%;
    line-height: 3; }
    @media screen and (max-width: 768px) {
      #message p {
        margin-top: 1.5rem;
        font-size: 135%;
        line-height: 2.4; } }
  #message .name {
    text-align: right; }
    #message .name .img {
      margin-top: 3.5rem; }
      @media screen and (max-width: 768px) {
        #message .name .img {
          margin-top: 3rem; } }
      #message .name .img img {
        width: 27%;
        max-width: 244px; }
        @media screen and (max-width: 768px) {
          #message .name .img img {
            width: 60%; } }
    #message .name p {
      line-height: 1.8; }
      @media screen and (max-width: 768px) {
        #message .name p {
          padding-top: 0.5em;
          font-size: 120%; } }
  #message .message_img {
    margin-top: 8rem; }
    @media screen and (max-width: 768px) {
      #message .message_img {
        margin-top: 5.5rem; } }

/*********************************
 * philosophy
 *********************************/
#philosophy {
  padding: 9rem 0 0 0;
  background: url("../images/company/philosophy_bg.jpg") center top no-repeat;
  background-size: cover; }
  @media screen and (max-width: 768px) {
    #philosophy {
      padding: 5rem 0 1rem 0;
      background: url("../images/company/philosophy_bg.jpg") left center no-repeat;
      background-size: cover; } }
  #philosophy .jp_ttl {
    padding-top: 0; }
    @media screen and (max-width: 768px) {
      #philosophy .jp_ttl {
        padding-top: 0.5rem; } }
  #philosophy .box {
    position: relative;
    padding: 2rem 0 6.5rem 0; }
    @media screen and (max-width: 768px) {
      #philosophy .box {
        padding: 2.2rem 0 2.8rem 0; } }
    #philosophy .box::after {
      position: absolute;
      display: block;
      content: "";
      width: 100%;
      height: 2px;
      background: linear-gradient(to right, #b2bfd0 0%, #8ec6e3 100%);
      bottom: 0;
      left: 0; }
      @media screen and (max-width: 768px) {
        #philosophy .box::after {
          height: 1px; } }
    #philosophy .box .ttl {
      overflow: hidden;
      padding: 0; }
      #philosophy .box .ttl img {
        width: auto;
        height: 5rem; }
        @media screen and (max-width: 768px) {
          #philosophy .box .ttl img {
            width: 100%;
            height: auto;
            transform: scale(1.4) translateX(15%); } }
    #philosophy .box .note {
      padding-top: 2rem; }
      @media screen and (max-width: 768px) {
        #philosophy .box .note {
          padding-top: 1.2rem;
          font-size: 130%;
          line-height: 1.8; } }
    #philosophy .box dl {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 2rem; }
      @media screen and (max-width: 768px) {
        #philosophy .box dl {
          align-items: flex-start;
          margin-top: 1.5rem;
          font-size: 130%;
          line-height: 1.8; } }
      #philosophy .box dl dt {
        width: 3rem;
        padding: 0 0 1.2em 0;
        color: #a5c1d6; }
        @media screen and (max-width: 768px) {
          #philosophy .box dl dt {
            width: 2.5rem;
            font-size: 120%; } }
      #philosophy .box dl dd {
        width: calc(100% - 3rem);
        padding: 0 0 1.2em 0; }
        @media screen and (max-width: 768px) {
          #philosophy .box dl dd {
            width: calc(100% - 2.5rem); } }
    #philosophy .box:last-child::after {
      display: none; }
  #philosophy .jp_ttl + .box {
    margin-top: 3rem; }
    @media screen and (max-width: 768px) {
      #philosophy .jp_ttl + .box {
        margin-top: 1rem; } }

/*********************************
 * cp
 *********************************/
#cp {
  padding: 8rem 0 7.5rem 0; }
  @media screen and (max-width: 768px) {
    #cp {
      padding: 5rem 0 4.5rem 0; } }
  #cp .jp_ttl {
    padding-top: 0.5rem; }
  #cp h3 {
    margin-top: 6rem;
    padding: 0.6em 1em;
    background: #f9fafb;
    font-size: 110%; }
    @media screen and (max-width: 768px) {
      #cp h3 {
        margin-top: 2.5rem;
        padding: 0.6em;
        font-size: 140%; } }
  @media screen and (max-width: 768px) {
    #cp .cp_list + h3 {
      margin-top: 3.5rem; } }
  #cp table {
    width: 100%;
    margin-top: 1.5rem;
    font-size: 110%; }
    @media screen and (max-width: 768px) {
      #cp table {
        font-size: 125%; } }
    #cp table th {
      width: 32%;
      padding: 0.6rem 0;
      color: #69797e;
      line-height: 1.8;
      vertical-align: top; }
      @media screen and (max-width: 768px) {
        #cp table th {
          padding: 0.4rem 0; } }
    #cp table td {
      width: 68%;
      padding: 0.6rem 0;
      line-height: 1.8; }
      @media screen and (max-width: 768px) {
        #cp table td {
          padding: 0.4rem 0; } }
  #cp ul.cp_list {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 768px) {
      #cp ul.cp_list {
        flex-wrap: wrap;
        margin-top: 1.5rem; } }
    #cp ul.cp_list li {
      width: 25%;
      margin-top: 6rem;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #cp ul.cp_list li {
          width: 45%;
          margin-top: 1.5rem; } }
      #cp ul.cp_list li img {
        width: 90%; }
        @media screen and (max-width: 768px) {
          #cp ul.cp_list li img {
            width: 100%; } }

/*********************************
 * history
 *********************************/
#history {
  padding: 9rem 0 8rem 0;
  background: #eff0f4; }
  @media screen and (max-width: 768px) {
    #history {
      padding: 5rem 0 5.5rem 0; } }
  #history .jp_ttl {
    padding-top: 0; }
  #history .flex_box {
    display: flex;
    justify-content: space-between;
    margin-top: 6rem; }
    @media screen and (max-width: 768px) {
      #history .flex_box {
        display: block;
        margin-top: 3rem; } }
    #history .flex_box .txt_box {
      width: 46%;
      font-size: 110%;
      line-height: 2;
      word-break: break-all; }
      @media screen and (max-width: 768px) {
        #history .flex_box .txt_box {
          width: 100%;
          font-size: 135%; } }
    #history .flex_box .img {
      width: 49%; }
      @media screen and (max-width: 768px) {
        #history .flex_box .img {
          width: 100%;
          margin-top: 2.5rem; } }
  #history ul.history_list {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 6rem;
    z-index: 2; }
    @media screen and (max-width: 768px) {
      #history ul.history_list {
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 1rem; } }
    #history ul.history_list::after {
      position: absolute;
      display: block;
      content: "";
      width: 90%;
      height: 4px;
      top: 28%;
      left: 5%;
      background: #bbc7d0;
      z-index: -1; }
      @media screen and (max-width: 768px) {
        #history ul.history_list::after {
          display: none; } }
    #history ul.history_list li {
      width: 20%;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #history ul.history_list li {
          width: 44%;
          margin-top: 2.2rem; } }
      #history ul.history_list li p {
        font-weight: 600;
        line-height: 1.6; }
        @media screen and (max-width: 768px) {
          #history ul.history_list li p {
            padding-top: 1em;
            font-size: 120%; } }

/*********************************
 * mb
 *********************************/
#mb {
  padding: 8rem 0 8.5rem 0; }
  @media screen and (max-width: 768px) {
    #mb {
      padding: 5rem 0 5.5rem 0; } }
  #mb .jp_ttl {
    padding-top: 0; }
    @media screen and (max-width: 768px) {
      #mb .jp_ttl {
        padding-top: 0.5rem; } }
  #mb .note {
    padding-top: 6rem;
    font-size: 110%;
    line-height: 2.2; }
    @media screen and (max-width: 768px) {
      #mb .note {
        padding-top: 2.8rem;
        font-size: 132%; } }
  #mb ul.mb_list {
    display: flex;
    flex-wrap: wrap; }
    #mb ul.mb_list li {
      width: 31%;
      margin-top: 2.5rem;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #mb ul.mb_list li {
          width: 100%; } }
      #mb ul.mb_list li:nth-child(3n-1) {
        margin: 2.5rem 3.5% 0 3.5%; }
        @media screen and (max-width: 768px) {
          #mb ul.mb_list li:nth-child(3n-1) {
            margin: 2.5rem 0 0 0; } }
    #mb ul.mb_list p {
      padding-top: 1.2em;
      font-size: 110%; }
      @media screen and (max-width: 768px) {
        #mb ul.mb_list p {
          font-size: 140%; } }

/*********************************
 * bc
 *********************************/
#bc {
  padding: 8.5rem 0 8rem 0;
  background: url("../images/company/bc_bg.jpg") center top no-repeat;
  background-size: cover; }
  @media screen and (max-width: 768px) {
    #bc {
      padding: 6rem 0 5rem 0; } }
  @media screen and (max-width: 768px) {
    #bc h2 {
      width: 70%; } }
  #bc .note {
    padding-top: 6rem;
    font-size: 110%;
    line-height: 2.2; }
    @media screen and (max-width: 768px) {
      #bc .note {
        padding-top: 2.8rem;
        font-size: 132%; } }
  #bc .img {
    margin-top: 2.5rem; }

/*********************************
 * cmn_contact
 *********************************/
.cmn_contact {
  padding: 5.5rem 0 2rem 0;
  background: none; }