@charset "utf-8";

/* =========================================
  COMPANY NAV
========================================= */

.company-nav-section{
  padding:0;
	/*
  background:#f7f4ef;
	*/
}

.company-nav-head{
  margin-bottom:42px;
}

.company-nav-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

/* -----------------------------------------
  CARD
----------------------------------------- */

.company-nav-card{
  position:relative;

  background:#fff;
  border:1px solid #dddfe7;

  overflow:hidden;

  height:100%;

  box-shadow:
    0 8px 18px rgba(0,0,0,.04);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

/* hover gold line */

.company-nav-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:.35s ease;
  z-index:3;
}

.company-nav-card:hover::before{
  transform:scaleX(1);
}

.company-nav-card:hover{
  transform:translateY(-8px);

  box-shadow:
    0 22px 46px rgba(0,31,99,.14);
}

/* -----------------------------------------
  LINK
----------------------------------------- */

.company-nav-card a{
  display:flex;
  flex-direction:column;
  height:100%;

  color:inherit;
  text-decoration:none;
}

/* -----------------------------------------
  IMAGE
----------------------------------------- */

.company-nav-image{
  position:relative;
  height:80px;
  overflow:hidden;
}

.company-nav-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}

.company-nav-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,31,99,.28);
  transition:.35s ease;
}

.company-nav-card:hover .company-nav-image img{
  transform:scale(1.04);
}

.company-nav-card:hover .company-nav-image::after{
  background:rgba(0,31,99,.18);
}

/* -----------------------------------------
  BODY
----------------------------------------- */

.company-nav-body{
  position:relative;
  flex:1;
  padding:20px 20px 20px;
}

.company-nav-en{
  display:block;
  margin-bottom:10px;
  color:#c59a2d;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}

.company-nav-body h3{
  margin:0 0 0px;
  color:var(--navy);
  font-size:19px;
  line-height:1.5;
  font-family:var(--mincho);
  font-weight:500;
}
.company-nav-body p{
  margin:0;
  color:#4d5e78;
  font-size:14px;
  line-height:1.9;
}

/* -----------------------------------------
  ARROW
----------------------------------------- */

.company-nav-arrow{
  position:absolute;

  right:24px;
  bottom:24px;

  width:24px;
  height:24px;

  border-radius:50%;

  background:var(--navy);
  color:#fff;

  display:grid;
  place-items:center;

  font-size:13px;
  font-weight:700;

  transition:
    background .35s ease,
    transform .35s ease;
}

.company-nav-card:hover .company-nav-arrow{
  background:var(--gold);

  transform:rotate(45deg);
}

/* =========================================
  TABLET
========================================= */

@media (max-width:960px){

  .company-nav-grid{
    grid-template-columns:repeat(2, 1fr);
  }

}

/* =========================================
  MOBILE
========================================= */

@media (max-width:760px){
  .company-nav-section{
    padding:0 0;
  }
  .company-nav-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .company-nav-image{
    height:80px;
  }
  .company-nav-body{
    min-height:auto;
    padding:20px 20px 20px;
  }

  .company-nav-body h3{
    font-size:18px;
  }

  .company-nav-body p{
    font-size:12px;
  }

}