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

.hTtl, #outline, #overview, #products, #history, #mainClient .inner, #recruit .inner, #mainSuppliers .inner, #accessMap .ttl, #accessMap .col, #accessMap .col2 .col {
  opacity: 0;
  transform: translateY(40px);
  transition: transform 1.0s cubic-bezier(.210, .60, .350, 1), opacity 1.0s cubic-bezier(.210, .60, .350, 1);
}
.hTtl, #outline.fade, #overview.fade, #products.fade, #history.fade, #mainClient.fade .inner, #recruit.fade .inner, #mainSuppliers.fade .inner, #accessMap .ttl.fade, #accessMap .col.fade, #accessMap .col2.fade .col {
  opacity: 1;
  transform: translateY(0);
}
#outline.fade,
#accessMap .col2.fade .col:last-child,
#history.fade{
  transition-delay: .3s;
}
#overview.fade {
  transition-delay: .6s;
}


section:not(#talk){
  background: rgba(204,204,204,0.15);
}
section:not(#talk):not(#accessMap)  {
  padding-bottom: 0;
}
section:not(#talk) .inner .ttl  {
  text-align: left;
  margin-bottom: 40px;
}
section:not(#talk) .inner .ttl h2 span{
  font-size: 20px;
  margin-left: 20px;
}
section:not(#talk) p span{
  display: block;
  margin-top: 20px;
}
section:not(#talk) p + p{
  margin-top: 20px;
}
section:not(#talk) p,
section:not(#talk) li,
section td,
section th{
  font-size: 16px;
  line-height: 2;
  text-align:left;
}
section th{
   white-space: nowrap;
  vertical-align: top;
  padding: 5px 20px 5px 0;
}
section td{
  padding: 5px 0;
}
#sec01{
  margin-top: 100px;
}
#sec01 .inner,
#sec02 .inner,
#accessMap .col{
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1fr;
}
#mainSuppliers ul,
#mainClient ul{
  display: flex;
  gap: 10px 40px;
  flex-wrap: wrap;
}
section .more a{
  margin: 40px 0 0 0;
}
#accessMap .col .map iframe{
  width: 100%;
  height: 360px;
}
#accessMap .col2{
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1fr;
  margin-top: 100px;
}
#accessMap .col2 .col{
  display: block;
}
@media only screen and (max-width:768px) {
#sec01 .inner,
#sec02 .inner,
  #accessMap .col2{
  gap: 60px;
  grid-template-columns: 1fr;
}
#accessMap .col{
  gap: 20px;
  grid-template-columns: 1fr;
}
  section .inner .ttl h2 {
    font-size: 26px;
}
  section:not(#talk) .inner .ttl h2 span{
    font-size: 16px;
  }
  section:not(#talk) .inner .ttl{
    margin-bottom: 20px;
  }
section:not(#talk) p,
section:not(#talk) li,
section td,
section th{
  font-size: 14px;
  line-height: 1.75;
}
#accessMap .col .map iframe{
  width: 100%;
  height: 250px;
}
  #accessMap .col2 .col .ttl h2 span{
    display: block;
    margin-left: 0;
  }
}