@charset "UTF-8";

/* ================================================================================

  "Web Business" Overview PC Style

================================================================================ */
.main-visual {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  display: grid;
  background: url(../images/356914_m.jpg) no-repeat 50% 75%;
  background-size: cover;
}
.page-catch::after {
  content: "会社概要";
  font-size: .35em;
  letter-spacing: .1em;
  display: block;
}

@media screen and (max-width:640px) {
  .main-visual {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/*
  Gradation Animation
================================================================================ */
.main-visual.gt .contents-area {
  place-content: center;
  background: linear-gradient( 45deg, rgba(238,119,0,.7), rgba(14,27,63,.7) ) 0 / 200% 100%;
  opacity: 1;
  animation: Grad 4s ease infinite alternate;
}

@keyframes Grad {
  0% { background-position: 0 50%; }
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/*
  Main
================================================================================ */
.l-main {
  top: 0;
  padding: 0 0 120px;
}

@media screen and (max-width:840px) {
  .l-main { padding: 0 0 10%; }
}

/*
  Section
-------------------------------------------------------------------------------- */
.l-main section {
  position: relative;
  z-index: 1;
  top: -40px;
  height: auto;
  display: block;
}
.l-main section .inner {
  background-color: var(--wht);
  padding: 80px 0 0;
}

@media screen and (max-width:840px) {
  .l-main section {
    top: -30px;
    padding: 0;
  }
  .l-main section .inner { padding: 7.5% 0 0; }
}

/* Overview Details
-------------------------------------------------------------------------------- */
.overview-details {
  max-width: 960px;
  width: 90%;
  margin: auto;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
  border-top: solid 1px #ededed;
}
.overview-details tr { border-bottom: solid 1px #ededed; }
.overview-details th {
  width: 30%;
  font-weight: 400;
  text-align: right;
  padding: 1em 1.5em;
  background-color: #fafafa;
  vertical-align: top;
}
.overview-details td {
  width: 70%;
  padding: 1em 1.5em;
}
.overview-details td a {
  color: var(--blk);
  transition: all .3s;
}
.overview-details td a:hover { text-decoration: none; }
.overview-details td ul li {
  text-indent: -1em;
  padding: 0 0 0 1em;
}
.overview-details td ul li:not(:first-of-type) { margin: .5em 0 0; }
.overview-details td ul li::before { content: "・"; }

@media screen and (max-width:640px) {
  .overview-details { font-size: calc(15 / 640 * 100vw); }
  .overview-details th {
    width: 100%;
    display: block;
    text-align: left;
    padding: 1em 1.25em;
  }
  .overview-details td {
    width: 100%;
    display: block;
    padding: 1em 1.25em;
  }
}