@charset "UTF-8";
/* CSS Document */






body {
  padding-top: var(--header-height-plus);
}
.page_title {
  width: min(100%, 1400px);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.page_title .box_l {
  width: calc(100% - (760px + 20px));
  padding-top: 60px;
  display: flex;
}
.page_title .box_l * {
  display: block;
  line-height: 1em;
}
.page_title .box_l h3 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  em {
    font-family: var(--font-eng-grade);
    font-size: 13.0rem;
    font-weight: 600;
    letter-spacing: .04em;
    background: var(--eng-grade-txt);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: .2em;
  }
  span {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: #008EB3;
  }
}
.page_title .img {
  width: min(100%, 760px);
  border-radius: var(--radius20);
  overflow: hidden;
}
@media (width <= 1440px) {
  .page_title {
    width: 100%;
    padding: 0 20px;
    gap: 20px;
  }
  .page_title .box_l {
    width: max(100%, 620px);
    padding-top: clamp(10px, 4vw, 60px);
  }
  .page_title .box_l h3 {
    em {
      font-size: clamp(5rem, 5rem + 6vw, 13.0rem);
      font-weight: 600;
    }
    span {
      font-size: 1.6rem;
      font-weight: 700;
    }
  }
  .page_title .img {
    width: max(100%, 760px);
  }
}
@media (width <= 767px) {
  .page_title {
    flex-direction: column;
    padding: 0 var(--space-section-20);
    gap: var(--space-section-40);
  }
  .page_title .box_l {
    width: 100%;
    padding-top: 0;
  }
  .page_title .box_l h3 {
    em {
      font-size: clamp(6rem, 18vw, 8rem);
    }
    span {
      font-size: 1.4rem;
    }
  }
  .page_title .img {
    width: 100%;
  }
}

main {
  .anc_link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;
  }
  .anc_link ul {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .anc_link ul li {
    position: relative;
  }
  .anc_link ul li:nth-of-type(1)::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: #008EB3;
    content: '';
  }
  .anc_link ul li::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: #008EB3;
    content: '';
  }
  .anc_link ul li a {
    position: relative;
    display: block;
    letter-spacing: .1em;
    padding: .5em 2em;
    padding-right: 4.375em;
    overflow: hidden;
    transition: color 0.3s ease;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #008eb3;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
      z-index: -1;
    }
    &:hover {
      color: #FFF;
      &::before {
        transform: scaleX(1);
      }
      &::after {
        background: url(../img/company/anchor_arrow-reverse.svg) no-repeat center center;
        background-size: cover;
        content: '';
      }
    }
    &::after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 1.5em;
      width: 1em;
      height: .5625em;
      background: url(../img/company/anchor_arrow.svg) no-repeat center center;
      background-size: cover;
      content: '';
    }
  }
  @media (width <= 1440px) {
    .anc_link {
      padding: 0 20px;
    }
    .anc_link ul {
      gap: 1em 0;
    }
    .anc_link ul li a {
      position: relative;
      display: block;
      letter-spacing: .1em;
      padding: .5em clamp(.5em, 2vw, 2em);
      padding-right: clamp(2em, 4vw, 4.375em);
      &::after {
        right: clamp(.5em, 1vw, 1.5em);
      }
    }
  }
  @media (width <= 767px) {
    .anc_link {
      padding: 0 var(--space-section-20);
      margin-bottom: var(--space-section-100);
    }
    .anc_link ul {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-section-10);
    }
    .anc_link ul li {
      position: relative;
    }
    .anc_link ul li:nth-of-type(1)::before {
      content: none;
    }
    .anc_link ul li::after {
      position: absolute;
      top: inherit;
      right: inherit;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #008EB3;
      content: '';
    }
    .anc_link ul li a {
      font-size: 1.4rem;
      padding: .5em 1em;
      padding-right: 2em;
    }
  }

  .message .box {
    background: #FFF;
    border-radius: var(--radius100);
    padding: var(--space-section-80);
    margin-bottom: var(--space-section-150);
  }
  .message .box .greeting {
    display: flex;
    align-items: flex-start;
    padding-bottom: var(--space-section-60);
    margin-bottom: var(--space-section-60);
    border-bottom: solid 1px #008EB3;
    .box_l {
      width: min(100%, 500px);
      margin-right: 20px;
      .title01 {
        margin-bottom: var(--space-section-40);
      }
      h4 {
        font-size: 2.4rem;
        font-weight: 500;
      }
    }
    .img {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
      width: min(100%, 470px);
      margin-left: auto;
      p {
        border-radius: 20px;
        overflow: hidden;
      }
      dl {
        display: flex;
        gap: 1em;
        letter-spacing: .1em;
      }
    }
  }
  .message .box .about {
    padding-bottom: var(--space-section-60);
    margin-bottom: var(--space-section-60);
    border-bottom: solid 1px #008EB3;
    section:not(:last-of-type) {
      margin-bottom: var(--space-section-60);
    }
    section h3 {
      font-size: 3.2rem;
      font-weight: 700;
      letter-spacing: .1em;
      margin-bottom: .8em;
    }
  }
  .message .box .vision-policy {
    section:not(:last-of-type) {
      margin-bottom: var(--space-section-60);
    }
    section {
      display: flex;
      .title01 {
        width: 240px;
        em {
          font-size: 5.6rem;
        }
      }
      .box_r {
        flex:1;
        .comment {
          font-size: 1.8rem;
          font-weight: 600;
          p {
            font-weight: 600;
          }
        }
        ol {
          /*margin-bottom: .8em;*/
          counter-reset:number;
        }
        ol li {
          position: relative;
          font-size: 1.8rem;
          font-weight: 600;
          padding-left: 1.2em;
          &:not(:last-of-type) {
            margin-bottom: .5em;
          }
          &::before {
            position: absolute;
            top: 0;
            left: 0;
            color: #008EB3;
            counter-increment:number;
            content:counter(number)'.';
          }
        }
        /*dl {
          display: flex;
          align-items: baseline;
          gap: 1em;
          letter-spacing: .1em;
          dt {
            color: #008EB3;
            font-weight: 700;
          }
          dd {
            font-size: 1.8rem;
            font-weight: 700;
          }
        }*/
      }
    }
  }
  @media (width <= 767px) {
    .message .box {
      border-radius: var(--radius20);
      padding: var(--space-section-80) var(--space-section-15);
      margin-bottom: var(--space-section-150);
    }
    .message .box .greeting {
      flex-direction: column;
      align-items: center;
      padding-bottom: var(--space-section-60);
      margin-bottom: var(--space-section-60);
      .box_l {
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--space-section-30);
        .title01 {
          margin-bottom: var(--space-section-40);
        }
        h4 {
          font-size: 1.6rem;
          font-weight: 500;
        }
      }
      .img {
        margin-left: 0;
      }
    }
    .message .box .about {
      padding-bottom: var(--space-section-60);
      margin-bottom: var(--space-section-60);
      section:not(:last-of-type) {
        margin-bottom: var(--space-section-60);
      }
      section h3 {
        font-size: clamp(2rem, 6.15vw, 2.4rem);
      }
    }
    .message .box .vision-policy {
      section:not(:last-of-type) {
        margin-bottom: var(--space-section-60);
      }
      section {
        flex-direction: column;
        .title01 {
          width: 100%;
          margin-bottom: 1em;
          em {
            font-size: clamp(4rem, 14vw, 5.6rem);
          }
        }
        .box_r {
          .comment {
            font-size: 1.6rem;
          }
          ol li {
            font-size: 1.6rem;
          }
          /*dl {
            dt {
              white-space: nowrap;
              font-size: 1.6rem;
            }
            dd {
              font-size: 1.6rem;
            }
          }*/
        }
      }
    }
  }

  .info {
    display: flex;
    margin-bottom: var(--space-section-150);
    .box_l {
      width: 250px;
    }
    .box_r {
      flex: 1;
      table {
        width: 100%;
        margin-bottom: var(--space-section-25);
        tr th ,
        tr td {
          padding: 1em .6em;
          border-bottom: solid 1px #DDDDDD;
        }
        tr:nth-of-type(1) th ,
        tr:nth-of-type(1) td {
          padding-top: 0;
        }
        tr th {
          width: 230px;
          font-weight: 700;
          text-align: left;
        }
      }
      .human {
        display: flex;
        gap: 40px;
        section {
          display: flex;
          flex-direction: column;
          gap: 10px;
          width: 250px;
          p {
            overflow: hidden;
            border-radius: 20px;
          }
          dl {
            display: flex;
            gap: 1em;
            letter-spacing: .1em;
          }
        }
      }
    }
  }
  @media (width <= 767px) {
    .info {
      flex-direction: column;
      gap: var(--space-section-30);
      .box_l {
        width: 100%;
      }
      .box_r {
        flex: 1;
        table {
          margin-bottom: var(--space-section-25);
          tr th ,
          tr td {
            padding: 1em .6em;
          }
          tr th {
            width: 100px;
            vertical-align: top;
          }
        }
        .human {
          gap: var(--space-section-30);
          section {
            dl {
              font-size: 1.2rem;
              flex-wrap: wrap;
              gap: 0 1em;
            }
          }
        }
      }
    }
  }

  .base {
    display: flex;
    margin-bottom: var(--space-section-150);
    .box_l {
      width: 250px;
    }
    .box_r {
      flex: 1;
      section:not(:last-of-type) {
        margin-bottom: var(--space-section-80);
      }
      section {
        display: flex;
        flex-direction: column;
        gap: 25px;
        .img {
          width: 440px;
          border-radius: 20px;
          overflow: hidden;
        }
        table {
          width: 100%;
          tr th ,
          tr td {
            padding: 1em 0;
            border-bottom: solid 1px #DDDDDD;
            vertical-align: top;
            width: auto;
          }
          tr:nth-of-type(1) th ,
          tr:nth-of-type(1) td {
            padding-top: 0;
          }
          tr th {
            font-weight: 700;
            text-align: left;
            white-space: nowrap;
          }
          tr th:not([colspan="2"]) + td span {
            /*padding-left: 1em;*/
          }
          tr td span {
            margin-right: .3em;
          }
          tr td:last-of-type {
            width: calc(380px + (.5em * 2));
            dl {
              display: flex;
              gap: 1em;
              width: 100%;
              dd {
                margin-left: auto;
              }
            }
          }
        }
      }
    }
  }
  @media (width <= 1300px) {
    .base {
      .box_r {
        section {
          table {
            width: 100%;
            tr th ,
            tr td {
              display: block;
              width: 100%;
              padding: .5em 0;
              border-bottom: solid 1px #DDDDDD;
            }
            tr th {
              padding-top: .5em;
              border-bottom: none;
            }
            tr:nth-of-type(1) th ,
            tr:nth-of-type(1) td {
              padding-top: .5em;
            }
            tr:nth-of-type(1) th {
              padding-top: 0;
            }
            tr th[colspan="2"] + td {
              padding-top: 0;
              border-bottom: solid 1px #DDDDDD;
            }
            tr th:not([colspan="2"]) + td {
              padding-top: 0;
            }
            tr th:not([colspan="2"]) + td.no-border {
              padding-top: 0;
              padding-bottom: 0;
              border-bottom: none;
            }
            tr th:not([colspan="2"]) + td + td {
              padding-top: 0;
            }
            tr th:not([colspan="2"]) + td span {
              padding-left: 0;
            }
            tr td:last-of-type {
              width: 100%;
              dl {
                display: flex;
                flex-direction: column;
                gap: 0;
                dd {
                  margin-left: 0;
                }
              }
            }
          }
        }
      }
    }
  }
  @media (width <= 767px) {
    .base {
      flex-direction: column;
      gap: var(--space-section-30);
      .box_l {
        width: 100%;
      }
      .box_r {
        section {
          gap: var(--space-section-25);
          .img {
            width: min(100%, 440px);
            margin: 0 auto;
          }
        }
      }
    }
  }

  .group {
    display: flex;
    margin-bottom: var(--space-section-150);
    .box_l {
      width: 250px;
    }
    .box_r {
      flex: 1;
      section:not(:last-of-type) {
        margin-bottom: var(--space-section-80);
      }
      section {
        display: flex;
        flex-direction: column;
        gap: 25px;
        .img {
          width: 440px;
          border-radius: 20px;
          overflow: hidden;
        }
        .logo-sea {
          width: 200px;
          margin-bottom: var(--space-section-30);
        }
        .logo-txt {
          font-size: 3.2rem;
          font-weight: 700;
          letter-spacing: .1em;
          margin-bottom: var(--space-section-30);
        }
        .logo-sushi {
          width: 200px;
          margin-bottom: var(--space-section-30);
        }
        table {
          width: 100%;
          tr th ,
          tr td {
            padding: 1em .6em;
            border-bottom: solid 1px #DDDDDD;
            vertical-align: top;
            width: auto;
          }
          tr:nth-of-type(1) th ,
          tr:nth-of-type(1) td {
            padding-top: 0;
          }
          tr th {
            font-weight: 700;
            text-align: left;
          }
          tr td span {
            margin-right: 1em;
          }
        }
      }
    }
  }
  @media (width <= 767px) {
    .group {
      flex-direction: column;
      gap: var(--space-section-30);
      margin-bottom: var(--space-section-100);
      .box_l {
        width: 100%;
      }
      .box_r {
        flex: 1;
        section:not(:last-of-type) {
          margin-bottom: var(--space-section-80);
        }
        section {
          gap: var(--space-section-25);
          .img {
            width: min(100%, 440px);
            margin: 0 auto;
          }
          .logo-sea {
            width: 200px;
            margin-bottom: var(--space-section-30);
          }
          .logo-txt {
            font-size: clamp(2.0rem, 8.2vw, 2.4rem);
            margin-bottom: var(--space-section-30);
          }
          .logo-sushi {
            width: 200px;
            margin-bottom: var(--space-section-30);
          }
          table {
            tr th {
              width: 100px;
            }
            tr td span {
              display: block;
            }
          }
        }
      }
    }
  }

  .profile {
    display: flex;
    margin-bottom: var(--space-section-150);
    .box_l {
      width: 250px;
    }
    .box_r {
      flex: 1;
      .youtube {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-bottom: var(--space-section-30);
        iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
      .history ul {
        position: relative;
        &::before {
          position: absolute;
          top: 0;
          left: 140px;
          width: 1px;
          height: 100%;
          background: #DDDDDD;
          content: '';
        }
        li {
          position: relative;
          display: flex;
          align-items: baseline;
          padding-bottom: 1.3em;
          &:nth-of-type(1) {
            padding-top: 1.3em;
          }
          &::before {
            position: absolute;
            top: calc(1.6rem * 1.3);
            left: calc(140px - (.6875em / 2 - 1px));
            width: .6875em;
            aspect-ratio: 1;
            background: #008EB3;
            border-radius: 50%;
            content: '';
          }
          &:nth-of-type(1)::before {
            top: calc(2.6rem * 1.6);
          }
          time {
            display: flex;
            align-items: baseline;
            color: #008EB3;
            letter-spacing: .05em;
            width: 200px;
            span {
              display: block;
              font-size: 2.6rem;
              font-weight: 500;
            }
          }
          .content {
            flex: 1;
          }
        }
      }
    }
  }
  @media (width <= 767px) {
    .profile {
      flex-direction: column;
      gap: var(--space-section-30);
      margin-bottom: var(--space-section-100);
      .box_l {
        width: 100%;
      }
      .box_r {
        flex: 1;        
        .history ul {
          &::before {
            left: 85px;
          }
          li {
            font-size: 1.4rem;
            padding-bottom: 1.3em;
            &:nth-of-type(1) {
              padding-top: 1.3em;
            }
            &::before {
              top: calc(1.4rem * 1.1);
              left: calc(85px - (.6875em / 2 - 1px));
              width: .6875em;
            }
            &:nth-of-type(1)::before {
              top: calc(2.0rem * 1.6);
            }
            time {
              width: 100px;
              span {
                font-size: 2.0rem;
              }
            }
          }
        }
      }
    }
  }

  .initiatives {
    margin-bottom: var(--space-section-100);
    .title03 {
      margin-bottom: var(--space-section-60);
    }
    h4 {
      text-align: center;
      font-size: 2.4rem;
      font-weight: 700;
      margin-bottom: .6em;
    }
    h4 + .comment {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 1.8em;
    }
    .box {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      section {
        .img {
          margin-bottom: 1em;
        }
        h5 {
          font-weight: 700;
          margin-bottom: .5em;
        }
      }
    }
  }
  @media (width <= 767px) {
    .initiatives {
      flex-direction: column;
      gap: var(--space-section-30);
      margin-bottom: var(--space-section-100);
      .title03 {
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: var(--space-section-30);
      }
      h4 {
        font-size: 2.4rem;
        margin-bottom: .6em;
      }
      h4 + .comment {
        margin-bottom: 1.8em;
      }
      .box {
        display: flex;
        flex-direction: column;
        gap: var(--space-section-40);
      }
    }
  }

  .kenkou {
    margin-bottom: var(--space-section-100);
    .box {
      background: #FFF;
      border-radius: var(--radius100);
      padding: var(--space-section-80) var(--space-section-170);
      h3 {
        font-size: 3.0rem;
        font-weight: 700;
        text-align: center;
        margin-bottom: var(--space-section-50);
      }
      .img {
        margin-bottom: var(--space-section-100);
      }
      h4 {
        font-size: 2.4rem;
        font-weight: 700;
        text-align: center;
        margin-bottom: var(--space-section-50);
      }
      .comment-box01 {
        margin-bottom: var(--space-section-100);
        p {
          font-size: 1.8rem;
          line-height: 2.0;
          margin-bottom: 2.8em;
        }
        dl:not(:last-of-type) {
          margin-bottom: 1.875em;
        }
        dl dt {
          font-size: 2.0rem;
          font-weight: 700;
          margin-bottom: .4em;
        }
        dl dd ul li {
          position: relative;
          padding-left: 1.5em;
          &::before {
            position: absolute;
            top: .4em;
            left: 0;
            width: 1em;
            aspect-ratio: 1;
            background: #333333;
            border-radius: 50%;
            content: '';
          }
        }
      }
      .comment-box02 dl {
        display: flex;
        flex-direction: column;
        align-items: center;
        dt {
          font-size: 2.4rem;
          font-weight: 700;
          margin-bottom: .4em;
        }
      }
    }
  }
  @media (width <= 767px) {
    .kenkou {
      margin-bottom: var(--space-section-100);
      .box {
        border-radius: var(--radius20);
        padding: var(--space-section-80) var(--space-section-15);
        h3 {
          font-size: clamp(2.4rem, 7.7vw, 3.0rem);
          margin-bottom: var(--space-section-25);
        }
        .img {
          margin-bottom: var(--space-section-80);
        }
        h4 {
          font-size: clamp(2.0rem, 6.1vw, 2.4rem);
          text-align: left;
          margin-bottom: var(--space-section-25);
        }
        .comment-box01 {
          margin-bottom: var(--space-section-80);
          p {
            font-size: 1.4rem;
            margin-bottom: 2.8em;
          }
          dl:not(:last-of-type) {
            margin-bottom: 1.875em;
          }
          dl dt {
            font-size: 1.8rem;
            margin-bottom: .4em;
          }
        }
        .comment-box02 dl {
          dt {
            font-size: clamp(2.0rem, 6.1vw, 2.4rem);
            margin-bottom: .4em;
          }
        }
      }
    }
  }

  .torikumi {
    margin-bottom: var(--space-section-100);
    .box {
      background: #FFF;
      border-radius: var(--radius100);
      padding: var(--space-section-80) var(--space-section-170);
      h3 {
        font-size: 3.0rem;
        font-weight: 700;
        text-align: center;
        margin-bottom: var(--space-section-50);
      }
      ul {
        display: flex;
        flex-direction: column;
      }
    }
  }
  @media (width <= 767px) {
    .torikumi {
      margin-bottom: var(--space-section-100);
      .box {
        border-radius: var(--radius20);
        padding: var(--space-section-80) var(--space-section-15);
        h3 {
          font-size: clamp(2.0rem, 6.1vw, 2.4rem);
          margin-bottom: var(--space-section-25);
        }
      }
    }
  }
  
  

}