.navbar {
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

section{
  min-height:100vh;
  padding:80px 0;
  display:flex;
  align-items:center;
  scroll-margin-top: 80px;
}
.value-proposition{
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}
.value-proposition::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("img/value_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: contrast(0.2) brightness(2.0);

  z-index: 0;
}
.value-proposition .container{
  position: relative;
  z-index: 1;
  color: black;
}
.value-pattent-title{
  margin-top: 40px;
}
.value-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
}
.value-patent1 {
  background-color: #2150FE;
  color: white;
  font-size: 14px;
  padding: 8px;
}
.value-patent2 {
  background-color: #4472C4;
  color: #FFFF00;
  font-size: 14px;
  padding: 8px;
}
.value-together{
  grid-column:1 / -1;
  background-color: #B3C3FF;
  font-size: 16px;
  padding: 8px;
  
  display:flex;
  align-items:center;
  gap:8px;
}
.material-symbols-outlined{
  margin:8px;
}

.feature-table-wrapper{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap: 0;
  margin-top:20px;
  min-width:650px;
  font-weight:bold;
  border:1px solid #999;
  padding: 4px;
}
.feature-grid > div:nth-child(-n+5){
  font-weight:bold;
  border-bottom:2px solid #333;
}
.feature-grid > div:nth-child(5n+1){
  position: sticky;
  left: 0;
  z-index: 1;
}
.feature-grid-odd{
  background-color: white;
  padding-top: 8px;
  padding-bottom: 8px;
}
.feature-grid-even{
  background-color: #F5F5F5;
  padding-top: 8px;
  padding-bottom: 8px;
}
.feature-emphasis{
  color: #7AD180;
}
.oc-emphasis{
  color: #1C9770;
}
.margin-16{
  margin-top: 16px;
}

.current-problems{
  background-color: #2150FE;
}
.current-problems-emphasis{
  color: #FFFF00;
}
.problems-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  margin-top: 20px
}
.problems-grid-item {
  color: white;
  padding: 16px;

  border: 1px solid white;
  border-radius:10px;
  overflow:hidden;
}
.problems-annotation{
  grid-column:1 / -1;
  background-color: #00104C;
  font-size: 16px;
  padding: 8px;
  color: white;
  
  display:flex;
  align-items:center;
  gap:8px;
}

.technology-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  margin-top: 20px
}
.technology-grid-item {
  background-color: #F2EEEE;
  color: black;
  padding: 16px;
}

.technology-icon-circle {
  background-color: #2150FE;
  width:60px;
  height:60px;
  border-radius:50%;
  color: white;

  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 16px;
}
.technology-annotation{
  border-left:4px solid #2150FE;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left:12px;
  margin-top: 20px;
}

.interface-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  margin-top: 20px
}
.interface-grid img{
  max-width:100%;
  height:auto;
}

.use-cases-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  gap:20px;
  margin-top:20px;
  justify-content:center;
}
.use-cases-grid-item{
  color: black;
  padding: 16px;
}

.why-acquire{
  flex-direction:column;
  align-items:stretch;
  padding-top:0;
  justify-content:flex-start;
}
.why-header{
  width:100%;
  aspect-ratio: 1440 / 320; /* 元画像比率に合わせて調整 */
  background-image:url("img/why-acquire_title.jpg");
  background-size:100% auto;
  background-position:center top;
  background-repeat:no-repeat;
}
.why-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  gap:20px;
  margin-top:20px;
  justify-content:center;
}
.why-grid-item{
  background-color: #F2EEEE;
  color: black;
  padding: 16px;
}
.why-icon-circle {
  background-color: #1C9770;
  width:60px;
  height:60px;
  border-radius:50%;
  color: white;

  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 16px;
}

.contact{
  background-color: #04318F;
  color: white;
}
.contact-header{
  padding-left: 40px;
}
.contact-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:4px;

  width:fit-content;
  margin:0 auto;
}
.contact-grid-item1{
  font-weight: bold;
  font-size: 18px;
}
.contact-grid-item2{
  font-size: 16px;
}
.contact-grid-item3{
  font-weight: bold;
  font-size: 16px;
}
.contact-email{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
}

.fade-in{
  opacity:0;
  animation: fadeIn 2.0s ease forwards;
  margin-bottom: 16px;
}
img{
  display:block;
  margin:0 auto;
}

@keyframes fadeIn{
  to{
    opacity:1;
  }
}
@media (max-width: 991px){
  .navbar-nav .nav-link{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #eee;
    padding-left: 20px;
  }
  .value-grid{
    grid-template-columns:1fr;
  }
  .problems-grid{
    grid-template-columns: 1fr;
  }
  .technology-grid{
    grid-template-columns: 1fr;
  }
  .interface-grid{
    grid-template-columns: 1fr;
  }
 .contact-header{
    padding-left: 0px;
  }
  .contact-grid{
    margin-left:12px;
  }

  .navbar-nav .nav-link::after{
    content: ">";
    margin-left: 20px;
  }
}