/* ==========================================================================
 * Page Name : 企業情報CSS
 * File Name : /assets/css/company.css
 * Created   : 2026-07-13
 * Updated   : 2026-07-13
 * ========================================================================== */
a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.common-button.-beige {
  background-color: #99797c;
}
.common-button.-blue {
  background-color: #8394ad;
}
.common-button.-green {
  background-color: #6eaf8f;
}

@media screen and (min-width: 768px) {
  .page.-two aside nav {
    position: sticky;
    top: 150px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1140px) {
  .page.-two {
    grid-template-columns: 200px 1fr;
  }
}

/* ========================================
  　企業情報
======================================== */
.co section:nth-of-type(n + 2) {
  margin-top: 80px;
}

/* -- 企業情報 -- */
.co-list {
  display: flex;
  flex-direction: column;
}

.co-list li > dl {
  padding: 25px 0;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 40px;
  border-top: 1px solid var(--color-border-beige);
}
.co-list dt {
  font-weight: var(--font-weight-medium);
}
.co-list dd {
  font-weight: var(--font-weight-regular);
}
/* 役員 */
.co-list-yakuin {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px 30px;
}
.co-list-yakuin dt {
  color: var(--text-sub-color);
  font-weight: var(--font-weight-regular);
}
/* リンク */
.co-list-link {
  margin-top: 5px;
  display: inline-block;
  position: relative;
  color: var(--color-main);
  transition: 0.3s ease;
}
.co-list-link:hover {
  opacity: 0.5;
}

.co-list-link.-map {
  padding-left: 21px;
}
.co-list-link.-map::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url("../images/company/index/icon-googlemap.svg") no-repeat center
    center / contain;
  position: absolute;
  top: 3px;
  left: 0;
}

.co-list-link.-other {
  padding-right: 22px;
}
.co-list-link.-other::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url("../images/company/index/icon-otherlink.svg") no-repeat center
    center / contain;
  position: absolute;
  top: 5px;
  left: auto;
  right: 0;
}

.co-list-tel-attention {
  margin-top: 5px;
  display: block;
  font-size: 14px;
  color: var(--text-sub-color);
}

.co-list-pmark {
  margin-top: 5px;
  display: block;
  max-width: 81px;
}

@media screen and (max-width: 1140px) {
  /* -- 企業情報 -- */
  .co-list li > dl {
    grid-template-columns: 80px 1fr;
    gap: 20px;
  }
}
@media screen and (max-width: 767px) {
  .co section:nth-of-type(n + 2) {
    margin-top: 60px;
  }

  /* -- 企業情報 -- */
  .co-list li > dl {
    padding: 15px 0;
    grid-template-columns: 60px 1fr;
  }
  /* 役員 */
  .co-list-yakuin {
    grid-template-columns: 70px 1fr;
    gap: 5px 10px;
  }
  /* リンク */
  .co-list-link {
    font-size: 12px;
  }

  .co-list-link.-map {
    padding-left: 19px;
  }
  .co-list-link.-map::before {
    width: 14px;
    height: 14px;
    top: 2px;
  }

  .co-list-link.-other {
    padding-right: 15px;
  }
  .co-list-link.-other::after {
    width: 10px;
    height: 10px;
    top: 4px;
  }

  .co-list-tel-attention {
    font-size: 12px;
  }
}

/* -- 事業内容 -- */
.co-solution-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}
.co-solution-list .box {
  padding-left: 50px;
  padding-right: 100px;
  display: grid;
  align-items: center;
  width: 330px;
  height: 120px;
  background-color: var(--color-back-dark);
  border-radius: 999px;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  position: relative;
  transition: 0.3s ease;
}
.co-solution-list a.box:hover {
  opacity: 0.5;
}
.co-solution-list .box::after {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 20px;
  left: auto;
  right: 20px;
  z-index: 2;
}
.co-solution-list .box[data-icon="1"]::after {
  background-image: url("../images/company/index/solution-system.png");
}
.co-solution-list .box[data-icon="2"]::after {
  background-image: url("../images/company/index/solution-design.png");
}
.co-solution-list .box[data-icon="3"]::after {
  background-image: url("../images/company/index/solution-consultant.png");
}
@media screen and (max-width: 767px) {
  .co-solution-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .co-solution-list .box {
    padding-left: 40px;
    padding-right: 80px;
    width: 100%;
    max-width: 333px;
    height: 95px;
    font-size: 18px;
  }
  .co-solution-list .box::after {
    width: 60px;
    height: 60px;
    top: 15px;
    right: 15px;
  }
}

/* -- 独自開発プロダクト -- */
.co-product-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 40px;
}
.co-product-list li {
  max-width: 317px;
}
.co-product-list li a {
  transition: 0.3s ease;
}
.co-product-list li a:hover {
  opacity: 0.5;
}
.co-product-list dt {
  display: grid;
  place-items: center;
  height: 150px;
  border-radius: 15px;
  box-shadow:
    0 0 3px rgba(247, 234, 218, 1),
    0 0 3px rgba(247, 234, 218, 1),
    0 0 3px rgba(247, 234, 218, 1);
  text-align: center;
}
.co-product-list dt img {
  max-width: 200px;
}
.co-product-list dd {
  margin-top: 10px;
  font-weight: var(--font-weight-regular);
  font-size: 12px;
}
@media screen and (max-width: 767px) {
  .co-product-list {
    gap: 30px;
  }
  .co-product-list li {
    width: 100%;
    max-width: 500px;
  }
  .co-product-list dt {
    height: 113px;
  }
  .co-product-list dt img {
    max-width: 155px;
  }
}

/* -- 主要取引先 -- */
.co-client-attention {
  font-size: 12px;
  color: var(--text-sub-color);
}
.co-client-list {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
}
.co-client-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-beige);
  font-weight: var(--font-weight-regular);
}
.co-client-list li:nth-of-type(1) {
  border-top: 1px solid var(--color-border-beige);
}
@media screen and (min-width: 1141px) {
  .co-client-list li:nth-of-type(2) {
    border-top: 1px solid var(--color-border-beige);
  }
}
@media screen and (max-width: 1140px) {
  .co-client-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .co-client-list li {
    padding: 15px 0;
  }
}

/* ========================================
  　理念・強み
======================================== */
/* -- 理念 -- */
.coPhi-philosophy {
  text-align: center;
}
.coPhi-philosophy-en {
  margin-top: 20px;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--color-main);
  letter-spacing: 0.05em;
}
.coPhi-philosophy-ja {
  margin-top: 5px;
  margin-inline: auto;
  width: fit-content;
  font-size: 48px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
  position: relative;
}
.coPhi-philosophy-ja::after {
  content: "";
  background: url("../images/common/deco.png") center center / contain no-repeat;
  width: 27px;
  height: 33px;
  position: absolute;
  top: -14px;
  right: -16px;
  left: auto;
}
.coPhi-philosophy-text {
  margin-top: 40px;
  font-size: 18px;
  letter-spacing: 0.15em;
  line-height: 2;
  position: relative;
  z-index: 0;
}
.coPhi-philosophy-text::after {
  content: "";
  background: url("../images/company/philosophy/philosophy-heart.svg") center
    center / contain no-repeat;
  width: 192px;
  height: 136px;
  position: absolute;
  top: 0;
  left: calc(50% - 300px);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .coPhi-philosophy-en {
    margin-top: 10px;
    font-size: 14px;
  }
  .coPhi-philosophy-ja {
    font-size: 24px;
  }
  .coPhi-philosophy-ja::after {
    width: 17px;
    height: 20px;
    top: -8px;
    right: -12px;
  }
  .coPhi-philosophy-text {
    margin-top: 20px;
    font-size: 12px;
  }
  .coPhi-philosophy-text::after {
    background: url("../images/company/philosophy/philosophy-heart-sp.svg")
      center center / contain no-repeat;
    width: 120px;
    height: 108px;
    left: -20px;
  }
}

/* -- 強み -- */
@media screen and (min-width: 1141px) {
  .coPhi-strengths .hidden-pc {
    display: none !important;
  }
}
@media screen and (max-width: 1140px) {
  .coPhi-strengths .hidden-sp {
    display: none !important;
  }
}
.coPhi-strengths {
  margin-top: 80px;
  border-top: 1px solid var(--color-border-beige);
  font-weight: var(--font-weight-regular);
}
.coPhi-strengths-title {
  margin-top: 60px;
  font-size: 36px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
}
.coPhi-strengths-list {
  margin-top: 47px;
}
.coPhi-strengths-list li:nth-of-type(n + 2) {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid var(--color-border-beige);
}
.coPhi-strengths-num {
  width: fit-content;
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
  color: var(--color-main);
  position: relative;
}
.coPhi-strengths-num::after {
  content: "";
  background: url("../images/common/deco.png") center center / contain no-repeat;
  width: 12px;
  height: 15px;
  position: absolute;
  top: -14px;
  right: -16px;
  left: auto;
}
.coPhi-strengths-ptitle {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
}
.coPhi-strengths-ptext {
  margin-top: 26px;
}
.coPhi-strengths-btnbox {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}
@media screen and (max-width: 1140px) {
  .coPhi-strengths {
    margin-top: 60px;
  }
  .coPhi-strengths-title {
    margin-top: 40px;
    font-size: 24px;
  }
  .coPhi-strengths-list {
    margin-top: 40px;
  }
  .coPhi-strengths-list li:nth-of-type(n + 2) {
    margin-top: 40px;
    padding-top: 40px;
  }
  .coPhi-strengths-num {
    font-size: 14px;
  }
  .coPhi-strengths-num::after {
    width: 8px;
    height: 9px;
    top: -3px;
    right: -9px;
  }
  .coPhi-strengths-ptitle {
    font-size: 16px;
  }
  .coPhi-strengths-ptext {
    margin-top: 15px;
  }
  .coPhi-strengths-btnbox {
    margin-top: 20px;
    flex-direction: column;
    align-items: center;
  }
}

/* 01 継続して選ばれる信頼性 */
.coPhi-strengths-01 {
  display: grid;
  grid-template-columns: 1fr 416px;
  gap: 70px;
}
.coPhi-strengths-01-btn {
  margin-top: 40px;
}
.coPhi-strengths-01-box {
  padding: 25px;
  background-color: #fefaf6;
  border-radius: 10px;
}
.coPhi-strengths-01-box dt {
  text-align: center;
  font-weight: var(--font-weight-bold);
}
.coPhi-strengths-01-box dt span {
  margin-left: 10px;
  display: inline-block;
  font-family: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--text-sub-color);
}
.coPhi-strengths-01-box dd {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 37px;
}
.coPhi-strengths-01-box-h {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
}
.coPhi-strengths-01-box-num {
  text-align: center;
  font-family: 32px;
  font-weight: var(--font-weight-bold);
  color: var(--color-main);
}
.coPhi-strengths-01-box-num span {
  font-size: 60px;
}
.coPhi-strengths-01-box-img {
  max-width: 180px;
}
@media screen and (max-width: 1140px) {
  .coPhi-strengths-01 {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .coPhi-strengths-01-btn {
    margin-top: 5px;
  }
  .coPhi-strengths-01-box {
    padding: 20px;
  }
  .coPhi-strengths-01-box dt span {
    margin-left: 5px;
    font-family: 10px;
  }
  .coPhi-strengths-01-box dd {
    margin-top: 15px;
    gap: 24px;
  }
  .coPhi-strengths-01-box-h {
    font-size: 14px;
  }
  .coPhi-strengths-01-box-num span {
    font-size: 50px;
  }
  .coPhi-strengths-01-box-img {
    max-width: 120px;
  }
}

/* 02 課題整理から運用まで一貫対応 */
.coPhi-strengths-02-box {
  margin-top: 30px;
  padding: 25px;
  background-color: #fefaf6;
  border-radius: 10px;
}
.coPhi-strengths-02-text {
  font-size: 14px;
}
.coPhi-strengths-02-process {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.coPhi-strengths-02-process dl {
  display: flex;
  flex-direction: column;
  border: 1px solid #99797c;
  border-radius: 10px;
  background: var(--color-white);
  overflow: hidden;
}
.coPhi-strengths-02-process dt {
  padding: 6px 10px;
  background: #99797c;
  color: var(--color-white);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  text-align: center;
}
.coPhi-strengths-02-process dd {
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.coPhi-strengths-02-process dd p {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 34px;
  border-bottom: 1px solid var(--color-border-beige);
  font-size: 14px;
  text-align: center;
}
.coPhi-strengths-02-process dd p:last-child {
  border-bottom: none;
}
.coPhi-strengths-02-process dd p.is-empty {
  visibility: hidden;
}
@media screen and (max-width: 1140px) {
  .coPhi-strengths-02-box {
    margin-top: 15px;
    padding: 20px;
  }
  .coPhi-strengths-02-text {
    font-size: 12px;
  }
  .coPhi-strengths-02-process-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .coPhi-strengths-02-process {
    margin-top: 15px;
    width: max-content;
  }
  .coPhi-strengths-02-process dt {
    font-size: 12px;
  }
  .coPhi-strengths-02-process dd {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .coPhi-strengths-02-process dd p {
    padding: 5px 0;
    min-height: 27px;
    font-size: 12px;
  }
  .coPhi-strengths-02-process-scroll-nav {
    margin-top: 5px;
    padding-right: 15px;
    display: block;
    text-align: right;
    color: #99797c;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    position: relative;
  }
  .coPhi-strengths-02-process-scroll-nav::after {
    content: "";
    display: inline-block;
    background: url("../images/company/philosophy/icon-scrollnav.svg") center
      center / contain no-repeat;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 3px;
    left: auto;
    right: 0;
  }
}

/* 03 課題を見極める提案力 */
.coPhi-strengths-03-box {
  margin-top: 30px;
  padding: 25px;
  background-color: #fefaf6;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 41px;
}
.coPhi-strengths-03-case {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.coPhi-strengths-03-case dl {
  padding: 20px;
  display: grid;
  grid-template-columns: 35px 1fr;
  align-items: center;
  gap: 30px;
  border-radius: 10px;
  font-size: 14px;
  position: relative;
}
.coPhi-strengths-03-case dl:nth-of-type(n + 2)::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("../images/company/philosophy/icon-arrow.svg") center center /
    contain no-repeat;
  position: absolute;
  top: -35px;
  left: calc(50% - 10px);
}
.coPhi-strengths-03-case dt {
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.15em;
}
.coPhi-strengths-03-case dd {
  position: relative;
  min-height: 2rem;
}
.coPhi-strengths-03-case dd::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -17px;
}
.coPhi-strengths-03-link {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-sub-color);
}
.coPhi-strengths-03-link a {
  color: var(--color-main);
}
.coPhi-strengths-03-case dl:nth-of-type(1) {
  background-color: #edeff2;
}
.coPhi-strengths-03-case dl:nth-of-type(1) dd::before {
  background-color: #8394ad;
}
.coPhi-strengths-03-case dl:nth-of-type(2) {
  background-color: var(--color-white);
}
.coPhi-strengths-03-case dl:nth-of-type(2) dd::before {
  background-color: #99797c;
}
.coPhi-strengths-03-case dl:nth-of-type(3) {
  background-color: #6eaf8f;
}
.coPhi-strengths-03-case dl:nth-of-type(3) dt {
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}
.coPhi-strengths-03-case dl:nth-of-type(3) dd {
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
}
.coPhi-strengths-03-case dl:nth-of-type(3) dd::before {
  background-color: var(--color-white);
}

.coPhi-strengths-03-btn {
  margin-top: 25px;
}
@media screen and (max-width: 1140px) {
  .coPhi-strengths-03-box {
    margin-top: 15px;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 20px;
    background-color: none;
  }
  .coPhi-strengths-03-box > div {
    padding: 20px;
    background-color: #fefaf6;
    border-radius: 10px;
  }
  .coPhi-strengths-03-case {
    gap: 40px;
  }
  .coPhi-strengths-03-case dl {
    padding: 15px 10px;
    grid-template-columns: 30px 1fr;
    gap: 20px;
    font-size: 12px;
  }
  .coPhi-strengths-03-case dl:nth-of-type(n + 2)::after {
    top: -29px;
  }
  .coPhi-strengths-03-case dd::before {
    left: -17px;
  }
  .coPhi-strengths-03-link {
    font-size: 12px;
  }

  .coPhi-strengths-03-btn {
    margin-top: 20px;
  }
}

/* 04 10年以上の開発実績 */
.coPhi-strengths-04-box {
  margin-top: 30px;
  padding: 25px;
  background-color: #fefaf6;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 370px 1fr;
  align-items: center;
  gap: 60px;
}
.coPhi-strengths-04-graph dl {
  display: grid;
  grid-template-columns: 145px 1fr;
  align-items: center;
  gap: 40px;
}
.coPhi-strengths-04-graph dl:nth-of-type(n + 2) {
  margin-top: 10px;
}
.coPhi-strengths-04-graph dt {
  margin-top: 21px;
  font-weight: var(--font-weight-bold);
}
.coPhi-strengths-04-graph dd {
  text-align: right;
  font-weight: var(--font-weight-medium);
}
.coPhi-strengths-04-graph dd span {
  display: inline-block;
  margin: 0 5px;
  font-size: 45px;
  font-weight: var(--font-weight-bold);
  color: var(--color-main);
}
.coPhi-strengths-04-graph p {
  margin-top: -10px;
  text-align: right;
  font-size: 12px;
  color: var(--text-sub-color);
}
.coPhi-strengths-04-text {
  font-size: 14px;
}
@media screen and (max-width: 1140px) {
  .coPhi-strengths-04-box {
    margin-top: 15px;
    padding: 20px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .coPhi-strengths-04-graph dl {
    grid-template-columns: 1fr 170px;
    gap: 10px;
  }
  .coPhi-strengths-04-graph dd span {
    font-size: 40px;
  }
  .coPhi-strengths-04-graph p {
    font-size: 10px;
  }
  .coPhi-strengths-04-text {
    font-size: 12px;
  }
}
/* アンカーリンク調整 */
.coPhi-strengths-01,
.coPhi-strengths-02,
.coPhi-strengths-03,
.coPhi-strengths-04 {
  position: relative;
}
.coPhi-strengths-01 .coPhi-anchor,
.coPhi-strengths-02 .coPhi-anchor,
.coPhi-strengths-03 .coPhi-anchor,
.coPhi-strengths-04 .coPhi-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  left: 0;
  top: -100px;
}
.coPhi-strengths-01 .coPhi-anchor {
  top: -250px;
}
@media screen and (max-width: 767px) {
  .coPhi-strengths-01 .coPhi-anchor,
  .coPhi-strengths-02 .coPhi-anchor,
  .coPhi-strengths-03 .coPhi-anchor,
  .coPhi-strengths-04 .coPhi-anchor {
    top: -70px;
  }
  .coPhi-strengths-01 .coPhi-anchor {
    top: -200px;
  }
}

/* ========================================
  　役員紹介
======================================== */
.comEx-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.comEx-list ~ .comEx-list {
  margin-top: 30px;
}
.comEx-list dt {
  padding: 25px 20px;
  background-color: #fcf8f4;
  border-radius: 15px;
  box-shadow: 0 0 3px rgba(247, 234, 218, 1);
  color: var(--text-sub-color);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
}
.comEx-list dt span {
  display: block;
  font-size: 20px;
  letter-spacing: 0.15em;
  color: var(--text-main-color);
}

.comEx-list.-pickup {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
}
.comEx-list.-pickup dt {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: relative;
}
.comEx-list.-pickup dt::after {
  content: "";
  width: 45px;
  height: 45px;
  background: url("../images/company/executive/icon-link.svg") no-repeat center
    center / contain;
  display: block;
  position: absolute;
  top: calc(50% - 22px);
  left: auto;
  right: 20px;
  transition: transform 0.3s ease;
}
.comEx-list.-pickup dd {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.comEx-list.-pickup a {
  transition: 0.3s ease;
}
.comEx-list.-pickup a:hover {
  opacity: 0.5;
}
.comEx-list.-pickup a:hover dt::after {
  transform: scale(1.2);
}
@media screen and (max-width: 1140px) {
  .comEx-list {
    margin-inline: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 500px;
  }
  .comEx-list ~ .comEx-list {
    margin-top: 20px;
  }
  .comEx-list dt {
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 12px;
  }
  .comEx-list dt span {
    font-size: 16px;
  }

  .comEx-list.-pickup {
    grid-template-columns: 1fr;
    column-gap: 20px;
  }
  .comEx-list.-pickup dt::after {
    width: 45px;
    height: 45px;
    top: calc(50% - 22px);
    right: 10px;
  }
  .comEx-list.-pickup dd {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}

/* ========================================
  　役員紹介 - 詳細
======================================== */
.page-template-executive-detail {
  overflow-x: clip;
}
.comExDe {
  margin-bottom: 120px;
}
/* -- キャッチコピー -- */
.comExDe-catch {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 50% 1fr;
  gap: 60px;
}
.comExDe-catch-img img {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}
.comExDe-catch-cnt {
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 60px;
}
.comExDe-catch-profile {
  display: flex;
  flex-direction: row;
  gap: 21px;
  align-items: flex-end;
}
.comExDe-catch-catchcopy {
  max-width: 480px;
}
.comExDe-catch-catchcopy img {
  width: 100%;
}
.comExDe-catch-profile-name {
  font-size: 16px;
  color: var(--text-sub-color);
}
.comExDe-catch-profile-name span {
  margin-top: 5px;
  display: block;
  font-size: 36px;
  letter-spacing: 0.15em;
  font-weight: var(--font-weight-bold);
  color: var(--text-main-color);
}
.comExDe-catch-profile-sns {
  margin-bottom: 11px;
  display: block;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: contain;
}
.comExDe-catch-profile-sns.-facebook {
  background-image: url(../images/company/executive/icon-facebook.svg);
}

/* -- メッセージ -- */
.comExDe-message {
  margin-top: 120px;
  line-height: 2rem;
  position: relative;
}
.comExDe-message:before {
  content: "";
  display: block;
  width: min(34.324vw, 508px);
  aspect-ratio: 508 / 401;
  background: url("../images/company/executive/message.svg") no-repeat center
    center / contain;
  position: absolute;
  top: -50px;
  right: calc((100vw - min(100% - 40px, 1080px)) / -2);
  z-index: -1;
}

/* -- 経歴 -- */
.comExDe-career {
  margin-top: 120px;
  display: grid;
  grid-template-columns: 490px 1fr;
  gap: 40px;
}
.comExDe-career-title {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
}
.comExDe-career-list {
  margin-top: 27px;
  position: relative;
}
.comExDe-career-list::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 10px;
  left: 15px;
  width: 2px;
  background: #f8dcdd;
}
.comExDe-career-list li {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 0 0 20px 37px;
}
.comExDe-career-list li:last-child {
  padding-bottom: 0;
}
.comExDe-career-list li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 12px;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-main);
}
.comExDe-career-list time {
  display: block;
  color: var(--text-sub-color);
  font-size: 14px;
}
.comExDe-career-list .comExDe-career-list-red {
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
}
.comExDe-career-img img {
  border-radius: 10px;
}

/* -- いろんなプロフィール -- */
.comExDe-profile {
  margin-top: 120px;
  padding: 40px;
  background-color: #fefaf6;
  border-radius: 15px;
  box-shadow: 0 0 3px rgba(247, 234, 218, 1);
}
.comExDe-profile-title {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
}
.comExDe-profile-list {
  margin-top: 25px;
}
.comExDe-profile-list > li {
  padding: 25px 0;
  border-bottom: 1px solid var(--color-border-beige);
}
.comExDe-profile-list > li:nth-of-type(1) {
  border-top: 1px solid var(--color-border-beige);
}
.comExDe-profile-list dl {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: center;
  gap: 40px;
}
.comExDe-profile-list dt {
  font-size: 14px;
  color: var(--text-sub-color);
  font-weight: var(--font-weight-medium);
}
.comExDe-profile-list dd span {
  font-weight: var(--font-weight-bold);
}
.comExDe-profile-list-ul {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 5px 40px;
}
.comExDe-profile-list-ul li {
  padding-left: 13px;
  position: relative;
}
.comExDe-profile-list-ul li::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  position: absolute;
  top: 8px;
  left: 0;
}

.comExDe-profile-imglist {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.comExDe-profile-imglist img {
  border-radius: 15px;
}
.comExDe-profile-imglist figcaption {
  margin-top: 10px;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
}

/* -- 役員紹介へ -- */
.comExDe-backbtn {
  margin-top: 120px;
  text-align: center;
}

/* -- 色切り替え -- */
/* 工藤さん */
.comExDe.-kudo .comExDe-profile-list dd span {
  color: var(--color-green);
}
.comExDe.-kudo .comExDe-profile-list-ul li::before {
  background-color: var(--color-green);
}

/* 渡辺さん */
.comExDe.-watanabe .comExDe-profile-list dd span {
  color: #a48ab4;
}
.comExDe.-watanabe .comExDe-profile-list-ul li::before {
  background-color: #a48ab4;
}
@media screen and (max-width: 1000px) {
  /* -- 経歴 -- */
  .comExDe-career {
    margin-top: 60px;
    grid-template-columns: 1fr;
  }
  .comExDe-career-img {
    margin-inline: auto;
    max-width: 500px;
  }

  /* -- いろんなプロフィール -- */
  .comExDe-profile-list dl {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .comExDe-profile-list-ul {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
@media screen and (max-width: 767px) {
  .comExDe {
    margin-bottom: 60px;
  }
  /* -- キャッチコピー -- */
  .comExDe-catch {
    margin-top: 30px;
    width: min(100% - 40px, 1080px);
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .comExDe-catch-img {
    order: 2;
  }
  .comExDe-catch-img img {
    border-radius: 10px;
  }
  .comExDe-catch-cnt {
    margin-right: 0;
  }
  .comExDe-catch-profile {
    justify-content: space-between;
  }
  .comExDe-catch-catchcopy.hidden-pc {
    margin-top: 30px;
    margin-inline: auto;
    display: block;
    width: min(100% - 40px, 1080px);
  }
  .comExDe-catch-profile-name {
    font-size: 12px;
  }
  .comExDe-catch-profile-name span {
    font-size: 24px;
  }
  .comExDe-catch-profile-sns {
    margin-bottom: 8px;
    width: 30px;
    height: 30px;
  }

  /* -- メッセージ -- */
  .comExDe-message {
    margin-top: 60px;
  }
  .comExDe-message:before {
    width: min(71.756vw, 282px);
    aspect-ratio: 282 / 230;
    top: -20px;
  }

  /* -- 経歴 -- */
  .comExDe-career-title {
    font-size: 24px;
  }
  .comExDe-career-list {
    margin-top: 16px;
  }
  .comExDe-career-list li {
    grid-template-columns: 50px 1fr;
    padding: 0 0 15px 26px;
  }
  .comExDe-career-list time {
    font-size: 12px;
  }
  .comExDe-career-img img {
    border-radius: 15px;
  }

  /* -- いろんなプロフィール -- */
  .comExDe-profile {
    margin-top: 80px;
    padding: 30px 15px;
    background-color: #fefaf6;
  }
  .comExDe-profile-title {
    font-size: 24px;
  }
  .comExDe-profile-list {
    margin-top: 20px;
  }
  .comExDe-profile-list > li {
    padding: 15px 0;
  }
  .comExDe-profile-list dt {
    font-size: 12px;
  }

  .comExDe-profile-imglist {
    margin-top: 30px;
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 500px;
  }
  .comExDe-profile-imglist img {
    border-radius: 10px;
  }
  .comExDe-profile-imglist figcaption {
    margin-top: 5px;
    font-size: 12px;
  }

  /* -- 役員紹介へ -- */
  .comExDe-backbtn {
    margin-top: 60px;
  }
}

/* ========================================
  　沿革
======================================== */
.coHis-list {
  display: flex;
  flex-direction: column;
}
.coHis-list li {
  padding: 25px 0;
  border-bottom: 1px solid var(--color-border-beige);
}
.coHis-list li:nth-of-type(1) {
  border-top: 1px solid var(--color-border-beige);
}
.coHis-list dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 40px;
}
.coHis-list dd {
  font-weight: var(--font-weight-regular);
}
.coHis-list dd span {
  color: var(--color-green);
}
@media screen and (max-width: 1040px) {
  .coHis-list dl {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
@media screen and (max-width: 767px) {
  .coHis-list li {
    padding: 15px 0;
  }
}

/* ========================================
  　数字で見るyep
======================================== */
.coNum {
  --coNum-unit: clamp(8px, 0.675676vw, 10px);
}
.coNum-fl {
  display: grid;
  gap: clamp(10px, 2.703vw, 40px);
}
.coNum-fl.-two {
  grid-template-columns: repeat(2, 1fr);
}
.coNum-fl.-three {
  grid-template-columns: repeat(3, 1fr);
}
.coNum-fl:nth-of-type(n + 2) {
  margin-top: clamp(10px, 2.703vw, 40px);
}
.coNum-box {
  padding: calc(var(--coNum-unit) * 3) calc(var(--coNum-unit) * 2)
    calc(var(--coNum-unit) * 2);
  background-color: #fefaf6;
  border-radius: 15px;
}
.coNum-title {
  margin-bottom: calc(var(--coNum-unit) * 1.5);
  text-align: center;
  font-size: calc(var(--coNum-unit) * 2);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
}
.coNum-num-h {
  text-align: center;
  font-size: calc(var(--coNum-unit) * 1.8);
}
.coNum-num-num {
  text-align: center;
}
.coNum-num-num span {
  margin: 0 calc(var(--coNum-unit) * 0.5);
  display: inline-block;
  color: var(--color-main);
  font-size: calc(var(--coNum-unit) * 7);
  font-weight: var(--font-weight-bold);
}
.coNum-text {
  padding-top: calc(var(--coNum-unit) * 2);
  font-weight: var(--font-weight-regular);
}
.coNum-box img {
  width: 100%;
  display: block;
}
@media screen and (max-width: 1140px) {
  .coNum-fl.-two.-two-sp {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1000px) {
  .coNum {
    font-size: 14px;
  }
  .coNum-fl {
    gap: 30px;
  }
  .coNum-fl.-two,
  .coNum-fl.-three {
    grid-template-columns: 1fr;
  }
  .coNum-fl:nth-of-type(n + 2) {
    margin-top: 30px;
  }
  .coNum-box {
    margin-inline: auto;
    max-width: 500px;
    width: 100%;
    padding: 20px 15px;
  }
  .coNum-title {
    margin-bottom: 10px;
    font-size: 16px;
  }
  .coNum-num-h {
    font-size: 14px;
  }
  .coNum-text {
    padding-top: 10px;
  }
}

/*
01 創業年数
02 企業別リピート率
*/
:is(.coNum-box.-n01, .coNum-box.-n02) .coNum-cnt {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: calc(var(--coNum-unit) * 2);
}
:is(.coNum-box.-n01, .coNum-box.-n02) img {
  width: calc(
    100% - calc(var(--coNum-unit) * 13) - calc(var(--coNum-unit) * 2)
  );
  max-width: calc(var(--coNum-unit) * 18);
}
:is(.coNum-box.-n01, .coNum-box.-n02) .coNum-num-num {
  white-space: nowrap;
}
/* 01 創業年数 */
.coNum-box.-n01 .coNum-num-num {
  font-size: calc(var(--coNum-unit) * 3.2);
}
.coNum-box.-n01 .coNum-num-num span {
  font-size: calc(var(--coNum-unit) * 8.5);
}
/* 02 企業別リピート率 */
.coNum-box.-n02 .coNum-num-h {
  margin-bottom: calc(var(--coNum-unit) * -1.5);
}
.coNum-box.-n02 .coNum-num-num {
  font-size: calc(var(--coNum-unit) * 3.2);
}
.coNum-box.-n02 .coNum-num-num span {
  font-size: calc(var(--coNum-unit) * 6);
}
@media screen and (max-width: 1000px) {
  /*
  01 創業年数
  02 企業別リピート率
  */
  :is(.coNum-box.-n01, .coNum-box.-n02) .coNum-cnt {
    gap: 20px;
  }
  :is(.coNum-box.-n01, .coNum-box.-n02) img {
    width: calc(100% - 127px - 20px);
    max-width: 127px;
  }
  /* 01 創業年数 */
  .coNum-box.-n01 .coNum-num-num {
    font-size: 18px;
  }
  .coNum-box.-n01 .coNum-num-num span {
    font-size: 70px;
  }
  /* 02 企業別リピート率 */
  .coNum-box.-n02 .coNum-num {
    margin-bottom: -10px;
  }
  .coNum-box.-n02 .coNum-num-h {
    margin-bottom: -15px;
  }
  .coNum-box.-n02 .coNum-num-num {
    font-size: 32px;
  }
  .coNum-box.-n02 .coNum-num-num span {
    font-size: 60px;
  }
}

/* 03 売上の推移 */
.coNum-box.-n03 .coNum-title {
  margin-bottom: calc(var(--coNum-unit) * 3);
}
.coNum-box.-n03 .coNum-cnt {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: calc(var(--coNum-unit) * 2.3);
}
.coNum-box.-n03 img {
  width: calc(
    100% - calc(var(--coNum-unit) * 42) - calc(var(--coNum-unit) * 2.3)
  );
  max-width: calc(var(--coNum-unit) * 55);
  height: auto;
  object-fit: contain;
}
.coNum-box.-n03 .coNum-cnt dl {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n03 dl:nth-of-type(n + 2) {
  margin-top: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n03 .coNum-num-h {
  text-align: left;
}
.coNum-box.-n03 .coNum-num-h span {
  display: block;
  font-size: calc(var(--coNum-unit) * 1.2);
  color: var(--text-sub-color);
}
.coNum-box.-n03 .coNum-num-num {
  padding-right: calc(var(--coNum-unit) * 3);
  position: relative;
  color: var(--color-main);
}
.coNum-box.-n03 .coNum-num-num::after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--coNum-unit) * 2.2);
  height: calc(var(--coNum-unit) * 2.2);
  position: absolute;
  top: auto;
  bottom: calc(var(--coNum-unit) * 2);
  right: 0;
}
.coNum-box.-n03 .coNum-num-num[data-arrow="up"]::after {
  background-image: url(../images/company/number/03_arrow-up.svg);
}
.coNum-box.-n03 .coNum-num-num[data-arrow="stay"]::after {
  background-image: url(../images/company/number/03_arrow-stay.svg);
}
.coNum-box.-n03 .coNum-num-num[data-arrow="down"]::after {
  background-image: url(../images/company/number/03_arrow-down.svg);
}
.coNum-box.-n03 .coNum-num-num span {
  font-size: calc(var(--coNum-unit) * 6);
}
.coNum-box.-n03 .coNum-text {
  margin-top: calc(var(--coNum-unit) * 2.5);
}
@media screen and (max-width: 1000px) {
  /* 03 売上の推移 */
  .coNum-box.-n03 .coNum-title {
    margin-bottom: 20px;
  }
  .coNum-box.-n03 .coNum-cnt {
    flex-direction: column;
    gap: 20px;
  }
  .coNum-box.-n03 img {
    margin-inline: auto;
    width: 100%;
    max-width: 303px;
  }
  .coNum-box.-n03 .coNum-cnt dl {
    align-items: flex-end;
    gap: 20px;
  }
  .coNum-box.-n03 dl:nth-of-type(n + 2) {
    margin-top: 10px;
  }
  .coNum-box.-n03 .coNum-num-h {
    margin-bottom: 10px;
  }
  .coNum-box.-n03 .coNum-num-h span {
    font-size: 10px;
  }
  .coNum-box.-n03 .coNum-num-num {
    padding-right: calc(var(--coNum-unit) * 3);
  }
  .coNum-box.-n03 .coNum-num-num::after {
    width: 16px;
    height: 16px;
    bottom: calc(var(--coNum-unit) * 2);
  }
  .coNum-box.-n03 .coNum-num-num span {
    font-size: 40px;
  }
  .coNum-box.-n03 .coNum-text {
    margin-top: 0;
    padding-top: 0;
  }
}

/* 04 業種別実績件数 */
.coNum-box.-n04 .coNum-title {
  margin-bottom: calc(var(--coNum-unit) * 3);
}
.coNum-box.-n04 .coNum-cnt {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n04 dl {
  padding: calc(var(--coNum-unit) * 1.5);
  width: calc(var(--coNum-unit) * 14.9);
  height: calc(var(--coNum-unit) * 13.8);
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 0 3px rgba(247, 234, 218, 1);
  text-align: center;
}
.coNum-box.-n04 dt {
  padding-top: calc(var(--coNum-unit) * 2.5);
  font-size: calc(var(--coNum-unit) * 1.6);
  font-weight: var(--font-weight-medium);
  position: relative;
}
.coNum-box.-n04 dt::before {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--coNum-unit) * 2.5);
  height: calc(var(--coNum-unit) * 2.5);
  position: absolute;
  top: 0;
  left: calc(50% - calc(var(--coNum-unit) * 1.2));
}
.coNum-box.-n04 dt[data-i="1"]::before {
  background-image: url(../images/company/number/04_icon-01.svg);
}
.coNum-box.-n04 dt[data-i="2"]::before {
  background-image: url(../images/company/number/04_icon-02.svg);
}
.coNum-box.-n04 dt[data-i="3"]::before {
  background-image: url(../images/company/number/04_icon-03.svg);
}
.coNum-box.-n04 dt[data-i="4"]::before {
  background-image: url(../images/company/number/04_icon-04.svg);
}
.coNum-box.-n04 dt[data-i="5"]::before {
  background-image: url(../images/company/number/04_icon-05.svg);
}
.coNum-box.-n04 dt[data-i="6"]::before {
  background-image: url(../images/company/number/04_icon-06.svg);
}
.coNum-box.-n04 dt[data-i="7"]::before {
  background-image: url(../images/company/number/04_icon-07.svg);
}
.coNum-box.-n04 dt[data-i="8"]::before {
  background-image: url(../images/company/number/04_icon-08.svg);
}
.coNum-box.-n04 dt[data-i="9"]::before {
  background-image: url(../images/company/number/04_icon-09.svg);
}
.coNum-box.-n04 dt[data-i="10"]::before {
  background-image: url(../images/company/number/04_icon-10.svg);
}
.coNum-box.-n04 dt[data-i="11"]::before {
  background-image: url(../images/company/number/04_icon-11.svg);
}
.coNum-box.-n04 dd.coNum-num-num {
  font-size: calc(var(--coNum-unit) * 1.2);
}
.coNum-box.-n04 dd.coNum-num-num span {
  font-size: calc(var(--coNum-unit) * 4.5);
}
.coNum-box.-n04 .coNum-text {
  margin-top: calc(var(--coNum-unit) * 2.5);
}
@media screen and (max-width: 1000px) {
  .coNum-box.-n04 .coNum-title {
    margin-bottom: 20px;
  }
  .coNum-box.-n04 .coNum-cnt {
    gap: 9px;
  }
  .coNum-box.-n04 dl {
    padding: 10px 5px;
    width: 94px;
    height: 111px;
  }
  .coNum-box.-n04 dt {
    padding-top: 29px;
    font-size: 12px;
  }
  .coNum-box.-n04 dt::before {
    width: 25px;
    height: 25px;
    left: calc(50% - 12px);
  }
  .coNum-box.-n04 dd.coNum-num-num {
    font-size: 10px;
  }
  .coNum-box.-n04 dd.coNum-num-num span {
    font-size: 35px;
  }
  .coNum-box.-n04 .coNum-text {
    margin-top: 20px;
  }
}

/* 05 社員数 */
.coNum-box.-n05 .coNum-num-num {
  font-size: calc(var(--coNum-unit) * 1.8);
}
.coNum-box.-n05 .coNum-num-num span {
  font-size: calc(var(--coNum-unit) * 8.5);
}
.coNum-box.-n05 img {
  margin-inline: auto;
  max-width: calc(var(--coNum-unit) * 15);
}
@media screen and (max-width: 1000px) {
  /* 05 社員数 */
  .coNum-box.-n05 .coNum-num-num {
    font-size: 18px;
  }
  .coNum-box.-n05 .coNum-num-num span {
    font-size: 70px;
  }
  .coNum-box.-n05 img {
    max-width: 150px;
  }
  .coNum-box.-n05 .coNum-text {
    padding-top: 20px;
  }
}

/* 06 年代割合 */
.coNum-box.-n06 img {
  margin-inline: auto;
  max-width: calc(var(--coNum-unit) * 30.5);
}
@media screen and (max-width: 1000px) {
  .coNum-box.-n06 img {
    max-width: 278px;
  }
  .coNum-box.-n06 .coNum-text {
    padding-top: 15px;
  }
}

/* 07 男女比 */
.coNum-box.-n07 .coNum-num-num span {
  font-size: calc(var(--coNum-unit) * 7);
}
.coNum-box.-n07 img {
  margin-inline: auto;
  max-width: calc(var(--coNum-unit) * 21.2);
}
@media screen and (max-width: 1000px) {
  .coNum-box.-n07 .coNum-num-num span {
    font-size: 60px;
  }
  .coNum-box.-n07 img {
    max-width: 198px;
  }
  .coNum-box.-n07 .coNum-text {
    padding-top: 20px;
  }
}

/* 08 勤続年数の分布 */
.coNum-box.-n08 .coNum-title {
  margin-bottom: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n08 .coNum-cnt {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: calc(var(--coNum-unit) * 4.2);
}
.coNum-box.-n08 img {
  width: calc(
    100% - calc(var(--coNum-unit) * 10.5) - calc(var(--coNum-unit) * 4.2)
  );
  max-width: calc(var(--coNum-unit) * 30);
  height: auto;
  object-fit: contain;
}
.coNum-box.-n08 .coNum-num {
  margin-bottom: calc(var(--coNum-unit) * -1);
}
.coNum-box.-n08 .coNum-num-h {
  margin-bottom: calc(var(--coNum-unit) * -1.5);
  font-size: calc(var(--coNum-unit) * 1.6);
}
.coNum-box.-n08 .coNum-num-num {
  font-size: calc(var(--coNum-unit) * 1.8);
}
.coNum-box.-n08 .coNum-num-num span {
  font-size: calc(var(--coNum-unit) * 8.5);
}
@media screen and (max-width: 1000px) {
  .coNum-box.-n08 .coNum-title {
    margin-bottom: 20px;
  }
  .coNum-box.-n08 .coNum-cnt {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .coNum-box.-n08 img {
    width: 100%;
    max-width: 300px;
  }
  .coNum-box.-n08 .coNum-num {
    margin-bottom: calc(var(--coNum-unit) * -1);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
  }
  .coNum-box.-n08 .coNum-num-h {
    margin-bottom: 0;
    font-size: 16px;
  }
  .coNum-box.-n08 .coNum-num-num {
    font-size: 16px;
  }
  .coNum-box.-n08 .coNum-num-num span {
    font-size: 70px;
  }
  .coNum-box.-n08 .coNum-text {
    padding-top: 20px;
  }
}

/* 09 中途：新卒の比率 */
.coNum-box.-n09 .coNum-title {
  margin-bottom: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n09 .coNum-cnt {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: calc(var(--coNum-unit) * 3.1);
}
.coNum-box.-n09 .coNum-cnt img {
  width: calc(
    100% - (calc(var(--coNum-unit) * 10.5) * 2) - calc(var(--coNum-unit) * 3.1)
  );
  max-width: calc(var(--coNum-unit) * 14.5);
  height: auto;
  object-fit: contain;
}
.coNum-box.-n09 .coNum-num-h {
  margin-bottom: calc(var(--coNum-unit) * -1);
}
.coNum-box.-n09 .coNum-num-num {
  font-size: calc(var(--coNum-unit) * 3.2);
}
.coNum-box.-n09 .coNum-num-num span {
  font-size: calc(var(--coNum-unit) * 7);
}
.coNum-box.-n09 .coNum-cnt-l .coNum-num-num {
  color: #be491f;
  font-weight: var(--font-weight-bold);
}
.coNum-box.-n09 .coNum-cnt-l .coNum-num-num span {
  color: #be491f;
}
.coNum-box.-n09 .coNum-cnt-r .coNum-num-num {
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 1000px) {
  /* 09 中途：新卒の比率 */
  .coNum-box.-n09 .coNum-title {
    margin-bottom: 20px;
  }
  .coNum-box.-n09 .coNum-cnt {
    gap: 12px;
  }
  .coNum-box.-n09 .coNum-cnt img {
    width: 100%;
    max-width: 110px;
  }
  .coNum-box.-n09 .coNum-num-h {
    margin-bottom: -10px;
  }
  .coNum-box.-n09 .coNum-num-num {
    font-size: 30px;
  }
  .coNum-box.-n09 .coNum-num-num span {
    font-size: 40px;
  }
}

/* 10 yepに未経験で入社した割合 */
.coNum-box.-n10 .coNum-cnt {
  display: grid;
  grid-template-columns: calc(var(--coNum-unit) * 43.5) 1fr;
  gap: calc(var(--coNum-unit) * 5);
}
.coNum-box.-n10 .coNum-cnt-l {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.coNum-box.-n10 .coNum-cnt-l img {
  max-width: calc(var(--coNum-unit) * 22.8);
  width: calc(100% - calc(var(--coNum-unit) * 17));
}
.coNum-box.-n10 .coNum-num-h {
  margin-bottom: calc(var(--coNum-unit) * -1);
}
.coNum-box.-n10 .coNum-num-l {
  margin-right: calc(var(--coNum-unit) * 2.4);
}
.coNum-box.-n10 .coNum-num-l .coNum-num-h {
  font-size: calc(var(--coNum-unit) * 1.6);
  font-weight: var(--font-weight-regular);
}
.coNum-box.-n10 .coNum-num-l .coNum-num-num {
  font-size: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n10 .coNum-num-l .coNum-num-num span {
  font-size: calc(var(--coNum-unit) * 3);
  color: var(--text-main-color);
}
.coNum-box.-n10 .coNum-num-r .coNum-num-num {
  font-size: calc(var(--coNum-unit) * 3.2);
}
.coNum-box.-n10 .coNum-num-r .coNum-num-num span {
  font-size: calc(var(--coNum-unit) * 6);
  color: var(--color-main);
}
.coNum-box.-n10 .coNum-before dl {
  margin-top: calc(var(--coNum-unit) * 2.5);
  padding: calc(var(--coNum-unit) * 1.5);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--coNum-unit) * 1);
  background-color: var(--color-white);
  border-radius: 10px;
}
.coNum-box.-n10 .coNum-before dt {
  padding-bottom: calc(var(--coNum-unit) * 0.5);
  width: 100%;
  text-align: center;
  font-size: calc(var(--coNum-unit) * 1.4);
  font-weight: var(--font-weight-medium);
}
.coNum-box.-n10 .coNum-before dd {
  padding: calc(var(--coNum-unit) * 0.2) calc(var(--coNum-unit) * 1);
  border: 1px solid var(--color-border-beige);
  border-radius: 5px;
  text-align: center;
  font-size: calc(var(--coNum-unit) * 1.4);
  color: #99797c;
}
@media screen and (max-width: 1000px) {
  /* 10 yepに未経験で入社した割合 */
  .coNum-box.-n10 .coNum-title {
    margin-bottom: 20px;
  }
  .coNum-box.-n10 .coNum-cnt {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .coNum-box.-n10 .coNum-cnt-l img {
    max-width: 137px;
    width: 100%;
  }
  .coNum-box.-n10 .coNum-num-h {
    margin-bottom: -10px;
  }
  .coNum-box.-n10 .coNum-num-l {
    margin-right: 13px;
  }
  .coNum-box.-n10 .coNum-num-l .coNum-num-h {
    font-size: 12px;
  }
  .coNum-box.-n10 .coNum-num-l .coNum-num-num {
    font-size: 15px;
  }
  .coNum-box.-n10 .coNum-num-l .coNum-num-num span {
    font-size: 25px;
  }
  .coNum-box.-n10 .coNum-num-r .coNum-num-num {
    font-size: 30px;
  }
  .coNum-box.-n10 .coNum-num-r .coNum-num-num span {
    font-size: 40px;
  }

  .coNum-box.-n10 .coNum-text {
    padding-top: 0;
  }
  .coNum-box.-n10 .coNum-before dl {
    margin-top: 20px;
    padding: 10px;
    gap: 10px;
  }
  .coNum-box.-n10 .coNum-before dt {
    padding-bottom: 10px;
    font-size: 14px;
  }
  .coNum-box.-n10 .coNum-before dd {
    padding: 2px 10px;
    font-size: 14px;
  }
}

/*
11 平均残業時間
12 年間休日
13 平均有給取得率
14 産休取得率
15 最寄り駅から本社までの距離
16 クラブ活動
17 年間行事の数
18 新人研修+OJT期間
*/
:is(
    .coNum-box.-n11,
    .coNum-box.-n12,
    .coNum-box.-n13,
    .coNum-box.-n14,
    .coNum-box.-n15,
    .coNum-box.-n16,
    .coNum-box.-n17,
    .coNum-box.-n18
  )
  img {
  margin-inline: auto;
  max-width: calc(var(--coNum-unit) * 27.8);
}

/*
13 平均有給取得率
14 産休取得率
*/
:is(.coNum-box.-n13, .coNum-box.-n14) .coNum-num-num {
  font-size: calc(var(--coNum-unit) * 3.2);
}
:is(.coNum-box.-n13, .coNum-box.-n14) .coNum-num-num span {
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
}

/*
17 年間行事の数
18 新人研修+OJT期間
*/
.coNum-box.-n17 .coNum-num-num span {
  font-size: calc(var(--coNum-unit) * 8.5);
}
@media screen and (max-width: 1000px) {
  /*
  11 平均残業時間
  12 年間休日
  13 平均有給取得率
  14 産休取得率
  15 最寄り駅から本社までの距離
  16 クラブ活動
  17 年間行事の数
  18 新人研修+OJT期間
  */
  :is(
      .coNum-box.-n11,
      .coNum-box.-n12,
      .coNum-box.-n13,
      .coNum-box.-n14,
      .coNum-box.-n15,
      .coNum-box.-n16,
      .coNum-box.-n17,
      .coNum-box.-n18
    )
    img {
    max-width: 278px;
  }

  /*
  13 平均有給取得率
  14 産休取得率
  */
  :is(.coNum-box.-n13, .coNum-box.-n14) .coNum-num-num {
    font-size: 32px;
  }

  /*
  17 年間行事の数
  18 新人研修+OJT期間
  */
  .coNum-box.-n17 .coNum-num-num span {
    font-size: 70px;
  }
}