/* ================================================
会社情報
================================================ */

/*固有共通*/
.pageHead--scrollBg:before {
  background-image: url("/wp-content/themes/imcgraduates/assets/img/pageHead_company.svg");
}
.sectionTitle--company {
  font-size: clamp(2.8rem , 3.4vw ,6rem);
  padding-bottom: clamp(2rem , 4vw ,6rem);
}
.sectionWrap--company {
  margin-bottom: clamp(5rem , 4vw ,7rem);
}
@media (max-width: 768px) {
  .sectionWrap--company {
    margin-bottom: 0;
  }
}
.pageHead--company {
  padding: 2rem 0rem;
}

/*会社情報TOP*/
.company {
  
}
.company__inner {
  padding-right: var(--commonSpaceSide);
  padding-left: var(--commonSpaceSide);
}

.company-list__title {
  font-size: clamp(2.8rem , 3.4vw ,6rem);
  color: #000;
  text-align: left;
  margin: 0 0 0.5rem;
  font-weight: bold;
}

.company__header {
  position: relative;
  padding: 3rem 1rem;
  color: #fff;
  isolation: isolate;
}

.company__header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/wp-content/themes/imcgraduates/assets/img/COMPANY.png") no-repeat center/cover;
  z-index: -1;
  opacity: 0.8;
}


.company__top-img {
  margin-top: 3.75rem;
  border-radius: 2rem;
  overflow: hidden;
  margin-bottom: clamp(3rem , 6vw, 10rem);
}
@media (max-width: 768px) {
  .company__top-img {
    margin-top: 0;
  }
}

.company__top-img img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .company__top-img img {
    height: 200px;
    object-fit: cover;
    border-radius: 20px;
  }

  .company__header::before {
    background-size: 210vw 30vw;
  }
}

/*会社概要*/
.company-overview__title {
  font-size: clamp(2.8rem , 3.4vw ,6rem);
  font-size: clamp(2.8rem , 3.4vw ,6rem);
  font-weight: bold;
}

.company-overview__table {
  width: 100%;
  border-collapse: collapse;
}

.company-overview__table th,
.company-overview__table td {
  padding-top: clamp(2rem, 2vw ,3rem);
  padding-right: clamp(2rem, 2vw ,3rem);
  padding-bottom: clamp(2rem, 2vw ,3rem);
  padding-left: clamp(2rem, 2vw ,3rem);
  text-align: left;
  vertical-align: top;
}
.company-overview__table tr:nth-child(odd) {
  background-color: #f5f5f5;
}

.company-overview__table tr:nth-child(even) {
  background-color: #fff;
}

.company-overview__table th {
  width: 25rem;
  font-weight: bold;
  color: #111111;
  border-right: solid 1px #E4E4E4;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: bold;
}
@media (max-width: 768px) {
  .company-overview__table th {
    width: 35%;
  }
}
.company-overview__table td {
  width: calc(100% - 25rem);
  font-weight: 500;
  color: #111111;
  font-weight: 400;
  font-size: clamp(12px, 2vw, 16px);
}
@media (max-width: 768px) {
  .company-overview__table td {
    width: 65%;
    line-height: 2;
  }
}
.company-overviewLink {
  text-decoration: underline;
  color: #0024B2;
}

.company-overview__achievements {
  margin: 0;
  padding-left: 0;
  list-style: none;
  li:not(:last-child) {
    padding-bottom: clamp(0.4rem , 1.4vw ,2rem);
  }
}

@media (max-width: 768px) {
  .company-overview__table {
    width: 100%;
    table-layout: fixed;
  }
}

/*アクセス*/
.company__access-title {
  font-size: clamp(2.8rem , 3.4vw ,6rem);
  font-weight: bold;
}

.company__access-map {
  width: 100%;
  height: clamp(300px, 50vw, 600px);
  margin: 0 auto;
  position: relative;
}
@media (max-width: 768px) {
  .company__access-map {
    border-radius: 2rem;
    overflow: hidden;
  }
}

.company__access-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.company__access-block {
  display: flex;
  gap: clamp(4rem, 6vw, 10rem);
  margin: 2rem 0 0;
}
@media (max-width: 768px) {
  .company__access-block {
    flex-flow: column;
    gap: 2rem;
  }
}

.company__access-text {
  font-size: clamp(1.2rem, 1.4vw, 1.6rem);
  font-weight: 400;
  line-height: 1.8;
}

.company__access-heading {
  background-color: #111111;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  font-size: clamp(1.4rem, 1.4vw, 1.6rem);
  font-weight: medium;
  display: flex;
  width: 16rem;
  height: 3rem;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(1rem, 1vw, 2rem);
}
@media (max-width: 768px) {
}

/*オフィス*/
.company-office {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}

.company-office__viewer {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1820/800;
  border-radius: 2rem;
}

.company-office__viewer img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.company-office__thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 0 0 6px;
  list-style: none;
  margin: 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1000px) {
  .company-office__thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.company-office__thumbs::-webkit-scrollbar {
  height: 6px;
}

.company-office__thumbs::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.company-office__thumb {
  cursor: pointer;
  aspect-ratio: 295/130;
  border-radius: 1rem;
  overflow: hidden;
  filter: brightness(0.7);
}
@media (max-width: 1000px) {
  .company-office__thumb {
    flex: 0 0 28%;
    aspect-ratio: 94/80;
  }
}
.company-office__thumb.is-active {
  filter:none;
}

.company-office__thumb img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
@media (max-width: 768px) {
  .company-office__thumb img {
    width: 100%;
  }
}

.company-office__thumb.is-active img {
  filter: brightness(1);
  transform: scale(1.02);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

@media (hover: hover) {
  .company-office__thumb:hover img {
    filter: brightness(1);
    transform: scale(1.03);
  }
}

/* SP */


/*エントリーボタン*/
.company__entry {
  margin-top: 5rem;
  margin-bottom: 7rem;
}
@media (max-width: 768px) {
.company__entry {
    margin-bottom: 10rem;
  }
}

.company__entry-inner {
  display: flex;
  gap: 1px;
}

.company__entryContent {
  position: relative;
  background-color: #e60020;
  color: #f5f5f5;
  margin: 0;
  flex: 1;
  border: 1px solid;
  border-radius: 2rem 0 0 2rem;
  padding: 12rem 15rem 12rem 3rem;
  width: 50%;
}
@media (max-width: 768px) {
  .company__entryContent {
    width: 100%;
  }
}
.company__entry-right {
  
}
@media (max-width: 768px) {
  .company__entry-right {
    padding: 2rem;
    border-radius: 2rem 2rem 0 0;
  }
}

.company__entry-left {
  border-radius: 0 2rem 2rem 0;
}

.company__entry-title {
  color: #fff;
  font-size: clamp(60px, 5vw, 80px);
  line-height: clamp(60px, 5vw, 80px);
  margin: 0;
}

.company__entry-subtitle {
  font-weight: bold;
  font-size: clamp(2.4rem, 3vw, 4rem);
  padding-top: clamp(1rem , 2vw , 2rem);
  padding-bottom: clamp(2rem , 2.4vw , 4rem);
}

.company__entry-text {
  font-weight: 400;
  line-height: 2;
  font-size: clamp(14px, 2vw, 16px);
}

.company__entry__arrow {
  display: block;
  border-radius: 50%;
  overflow: hidden;
  width: clamp(4.8rem, 5vw, 9rem);
  height: clamp(4.8rem, 5vw, 9rem);
  background: url(/wp-content/themes/imcgraduates/assets/img/company__entry__arrow.png) no-repeat center / contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 3rem;
}
@media (max-width: 768px) {
  .company__entry__arrow {
    position: static;
    transform: none;
    margin-top: 2rem;
  }
}

.company__entry-subblock {
  grid-area: sub;
}

.company__entry-content {
  grid-area: content;
}
@media (max-width: 768px) {
  .company__entry-inner {
    flex-direction: column;
  }
  .company__entry-left {
    padding: 20px;
    border-radius: 0 0 20px 20px;
  }

  .company__entry-right,
  .company__entry-left {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "sub"
      "content"
      "arrow";
    align-items: start;
  }
}

/*支社一覧*/
.company__branch-title {
  font-size: clamp(30px, 3vw, 60px);
}

.branch-item {
  border-top: 1px solid #d9d9d6;
  padding-top:  var(--commonSpaceSide);
  padding-bottom: var(--commonSpaceSide);
  padding-right: var(--commonSpaceSide);
  padding-left: var(--commonSpaceSide);
  display: flex;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: flex-start;
}
@media (max-width: 768px) {
  .branch-item {
    flex-direction: column;
    padding: 2rem 0 2rem;
  }
}
@media (max-width: 768px) {
  .branch-item--first {
    border-top: none;
    padding-top: 0;
  }
}
.branch-item:last-child {
  border-bottom: 1px solid #d9d9d6;
}

.branch__item-name {
  font-size: clamp(24px, 2vw, 40px);
  font-weight: bold;
  margin: 0;
}
.branch__item-infoBox {
  font-size: clamp(15px, 2vw, 16px);
  padding: 2rem 0 2rem;
  padding-top: clamp(1rem , 1vw ,2rem);
  padding-bottom: 2rem;
  line-height: 2;
  font-weight: normal;
}


.branch__item-label {
  background-color: #111111;
  color: #f5f5f5;
  text-align: center;
  font-size: clamp(15px, 2vw, 16px);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  display: inline-block;
  padding: 0.3em 1.7em;
  margin: 0;
  margin: 0 0 2rem;
}
.branch__item-walkList {
  font-size: clamp(15px, 2vw, 16px);
  margin-bottom: 1rem;
  font-weight: normal;
}
.branch__item-walkList:last-child {
  margin-bottom: 0;
}
.branch-item__img {
  aspect-ratio: 500/300;
  border-radius: 2rem;
  overflow: hidden;
  width: calc(50rem - clamp(2rem, 5vw, 5rem));
}
@media (max-width: 768px) {
  .branch-item__img {
    width: 100%;
  }
}
.branch-item__img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.branch__item-block {
  width: calc(100% - (50rem - clamp(2rem, 5vw, 5rem)));
}
@media (max-width: 768px) {
  .branch__item-block {
    width: 100%;
  }
}