@charset "UTF-8";

* {
  --h2-fs: 3.2rem;
  --h3-fs: 3.6rem;
}

#page-eyecatch {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: calc(var(--header-height) + 25vh);
  padding-top: var(--header-height);
  margin-bottom: 5.6rem;

  background-size: cover;
}

#page-eyecatch::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: #34B4FF;
  opacity: 0.75;
}

h2 {
  position: relative;
  z-index: 10;

  padding-top: 8rem;

  font-size: var(--h2-fs);
  color: #fff;
}

h2::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  font-size: 6rem;
  white-space: nowrap;
}

main {
  width: min(120rem, 100%);
  margin-inline: auto;
}

section,
a.banner {
  width: 100%;
  margin-bottom: 10.4rem;
}

h3 {
  margin-bottom: 4rem;

  font-size: var(--h3-fs);
  font-weight: 600;
  text-align: center;
}

.text-sidebar {
  padding-left: 1rem;
  margin-bottom: 1.6rem;

  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;

  border-left: solid .8rem #2959DD;
}



/*--picture*/
ul.picContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.2rem;
  row-gap: 2.4rem;

  width: 100%;
}

ul.picContainer li {
  width: 100%;
}

ul.picContainer li img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;

  margin-bottom: .8rem;
}

ul.picContainer li .name {
  text-align: center;
}

ul.picContainer li .note {
  margin-top: .8rem;
}


/*--bannar*/
a.banner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;

  height: 28rem;
  padding-left: 15%;

  background-size: cover;

  color: #fff;
}

a.banner::before {
  content: url(../img/banner-arrow.svg);
  position: absolute;
  z-index: 2;
  right: 2rem;
  bottom: 2rem;
}

a.banner p {
  position: relative;

  padding-top: 8rem;

  font-size: 2.8rem;
  font-weight: 600;
}

a.banner p::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;

  font-size: 6rem;
}

.banner-business01 {
  background: url(../img/business/banner01.png);
}

.banner-business02 {
  background: url(../img/business/banner02.png);
}

.banner-business03 {
  background: url(../img/business/banner03.png);
}

/*--list--*/
.list-layout {
  display: flex;
  flex-direction: column;
}

.list-layout li {
  display: grid;
  grid-template-columns: 19.6rem 1fr;
  gap: 2.4rem;
}

.list-layout li>* {
  padding: 1.6rem 0;
}

.list-layout .title {
  text-align: center;
  border-top: solid 1px #34B4FF;
}

.list-layout li:last-child .title {
  border-bottom: solid 1px #34B4FF;
}

.list-layout .content {
  padding-left: min(5vh, 10rem);

  line-height: 1.4;

  border-top: solid 1px #DEDEDE;
}

.list-layout li:last-child .content {
  border-bottom: solid 1px #DEDEDE;
}

@media (max-width : 1024px) {
  main {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media (max-width : 599px) {
  * {
    --h2-fs: 2.4rem;
    --h3-fs: 2.2rem;
  }

  #page-eyecatch {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: calc(var(--header-height) + 18vh);
    padding-top: var(--header-height);
    margin-bottom: 3.2rem;

    background-size: cover;
  }

  h2 {
    position: relative;
    z-index: 10;

    padding-top: 3.2rem;

    color: #fff;
  }

  h2::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    font-size: 2.8rem;
    white-space: nowrap;
  }

  a.banner {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    height: 16rem;
    padding-left: 15%;

    background-size: cover;

    color: #fff;
  }

  a.banner::before {
    content: url(../img/banner-arrow.svg);
    position: absolute;
    z-index: 2;
    right: 2rem;
    bottom: 2rem;
  }

  a.banner p {
    position: relative;

    padding-top: 4rem;

    font-size: 2rem;
    font-weight: 600;
  }

  a.banner p::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;

    font-size: 3.2rem;
  }

  /*--list--*/
  .list-layout li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .list-layout li>* {
    padding: 1.6r;
  }

  .list-layout .title {
    text-align: center;
    font-weight: 600;

    border-top: solid 1px #34B4FF;
  }

  .list-layout li:last-child .title {
    border-bottom: solid 0px;
  }

  .list-layout .content {
    padding-left: 0;

    text-align: center;
  }

  .list-layout li:last-child .content {
    border-bottom: solid 1px #34B4FF;
  }
}