body {
  background: none; }

.top-service02 {
  padding: 4em 0;
  position: relative; }

@media screen and (max-width: 768px) {
  .top-service02 {
    background-image: url(../../images/top-service-sky.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top; } }
@media screen and (max-width: 420px) {
  .top-service02 {
    /*margin-top: -60px;*/
    padding-top: 40px; } }
.top-service02__description {
  text-align: center;
  margin-top: 20px; }

@media screen and (max-width: 768px) {
  .top-service02__description {
    text-align: left;
    font-size: 14px;
    line-height: 1.6; } }
.top-service02__description2 {
  text-align: center;
  margin-top: 1.5em;
  padding: 1em;
  background: #fff;
  border: 1px solid #a48b78; }

@media screen and (max-width: 768px) {
  .top-service02__description2 {
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 3em; } }
.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.5em; }
  @media screen and (max-width: 768px) {
    .items {
      display: block; } }
  .items h3 {
    width: 100%;
    font-size: 1.5em;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 1em; }
    @media screen and (max-width: 768px) {
      .items h3 {
        font-size: 1.125em; } }
    .items h3 .subTitle {
      font-family: din-condensed, sans-serif;
      font-weight: 300;
      color: #036eb8;
      line-height: 1;
      display: block;
      margin-bottom: 0.5em; }
      @media screen and (max-width: 768px) {
        .items h3 .subTitle {
          margin-bottom: 0.25em; } }
  .items .each {
    width: 25%;
    padding: 0 2.5% 1.5em;
    background: rgba(255, 255, 255, 0.35); }
    @media screen and (max-width: 768px) {
      .items .each {
        width: calc(100% - 40px);
        padding: 0 2.5% 5em;
        background: #fff;
        margin: 0 auto 3em;
        position: relative;
        box-sizing: border-box; } }
    .items .each h4 {
      font-size: 1.25em;
      font-weight: 700;
      color: #000;
      line-height: 1.2;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 4em; }
      @media screen and (max-width: 1500px) {
        .items .each h4 {
          font-size: 1.25vw; } }
      @media screen and (max-width: 768px) {
        .items .each h4 {
          font-size: 1em; } }
    .items .each .list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75em; }
      @media screen and (max-width: 768px) {
        .items .each .list {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 0.5em; } }
      .items .each .list li {
        font-size: 1.125em;
        color: #fff;
        line-height: 1;
        text-align: center;
        box-shadow: 0 0 1.25em #fff; }
        @media screen and (max-width: 1500px) {
          .items .each .list li {
            font-size: 1.125vw; } }
        @media screen and (max-width: 768px) {
          .items .each .list li {
            width: 30%;
            font-size: 3.5vw; } }
        .items .each .list li a {
          background: #a48b78;
          display: block;
          padding: 0.5em 0; }
          @media screen and (max-width: 768px) {
            .items .each .list li a {
              padding: 0.75em 0; } }
    .items .each .link01 {
      margin-top: 1em; }
      .items .each .link01 a {
        font-size: 1rem;
        line-height: 1;
        color: #036eb8;
        background-color: #fff;
        border: 1px solid #036eb8;
        border-radius: 100px;
        padding: 1.125em;
        text-align: center;
        transition: color .3s, background-color .3s;
        display: block;
        width: 18em;
        max-width: 100%;
        margin: 0 auto; }
        @media screen and (max-width: 1500px) {
          .items .each .link01 a {
            font-size: 1.25vw;
            padding: 1em 0; } }
        @media screen and (max-width: 768px) {
          .items .each .link01 a {
            font-size: 0.875em; } }
        .items .each .link01 a:hover {
          color: #fff;
          background-color: #036eb8; }

.top-service02__mainBg {
  z-index: -2;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(../../images/top-service-sky-pc.jpg);
  background-size: cover;
  background-repeat: no-repeat; }

.top-service02__bg {
  z-index: -1;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: none;
  background-size: cover;
  background-repeat: no-repeat; }

.item1:hover,
.item2:hover,
.item3:hover,
.item4:hover,
.item5:hover,
.item6:hover {
  background: white; }

.top-service02__bg.active01 {
  background: url(../../images/top-service-bg5.jpg) center bottom no-repeat;
  background-size: 150% auto; }

.top-service02__bg.active02 {
  background: url(../../images/top-service-bg1.jpg) center bottom no-repeat;
  background-size: 150% auto; }

.top-service02__bg.active03 {
  background: url(../../images/top-service-bg2.jpg) center bottom no-repeat;
  background-size: 150% auto; }

.top-service02__bg.active04 {
  background: url(../../images/top-service-bg3.jpg) center bottom no-repeat;
  background-size: 150% auto; }

.top-service02__bg.active05 {
  background: url(../../images/top-service-bg6.jpg) center bottom no-repeat;
  background-size: 150% auto; }

.top-service02__bg.active06 {
  background: url(../../images/top-service-bg4.jpg) center bottom no-repeat;
  background-size: 150% auto; }