

/*                 service                    */
.service_inner {
 padding: min(9.5rem, calc(95vw / 13.66)) 0 0;
}
.service_item {
 background-color: #c2d8eb;
 padding: min(9rem, calc(90vw / 13.66)) 0;
 position: relative;

}
.service_ttl {
 font-size: 3.2rem;
 font-weight: 700;
 line-height: 1.6;
 color: #000000;
}
.service_ttl span {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.4rem;
 color: #005bab;
 gap: 0 min(1rem, calc(10vw / 13.66));
 font-family: YakuHanJP, "Oswald", sans-serif;
 letter-spacing: 0.06em;
 font-weight: 500;
}
.service_ttl span::before {
 content: "";
 width: min(1rem, calc(10vw / 13.66));
 height: min(1rem, calc(10vw / 13.66));
 background-color: #fff000;
 border-radius: 50%;
}

.service_menu {
 width: min(120rem, calc(1200vw / 13.66));
 margin: min(7rem, calc(70vw / 13.66)) auto 0;
}
.service_menu ul {
 display: flex;
 flex-wrap: wrap;
 gap: min(3rem, calc(30vw / 13.66)) min(3rem, calc(30vw / 13.66));
}
.service_menu ul li {
 width: min(38rem, calc(380vw / 13.66));
 border-radius: min(1.2rem, calc(12vw / 13.66));
 background-color: #fff;
 overflow: hidden;
}

.service_menu_ttl {
 display: flex;
 align-items: center;
 font-size: 2rem;
 font-weight: 700;
 line-height: 1.1;
 color: #fff;
 padding: min(1.3rem, calc(13vw / 13.66)) min(1.5rem, calc(15vw / 13.66));
 gap: 0 min(1.5rem, calc(15vw / 13.66));
 text-align: left;
}
.service_menu_ttl span {
 width: min(5.2rem, calc(52vw / 13.66));
 font-size: 0;
}
.service_menu ul li:nth-of-type(1) .service_menu_ttl,
.service_menu ul li:nth-of-type(1) .service_menu_txt a::before {
 background-color: #cd3a32;
}
.service_menu ul li:nth-of-type(2) .service_menu_ttl,
.service_menu ul li:nth-of-type(2) .service_menu_txt a::before {
 background-color: #d66023;
}
.service_menu ul li:nth-of-type(3) .service_menu_ttl,
.service_menu ul li:nth-of-type(3) .service_menu_txt a::before {
 background-color: #e4b804;
}
.service_menu ul li:nth-of-type(4) .service_menu_ttl,
.service_menu ul li:nth-of-type(4) .service_menu_txt a::before {
 background-color: #7ab911;
}
.service_menu ul li:nth-of-type(5) .service_menu_ttl,
.service_menu ul li:nth-of-type(5) .service_menu_txt a::before {
 background-color: #12a24a;
}
.service_menu ul li:nth-of-type(6) .service_menu_ttl,
.service_menu ul li:nth-of-type(6) .service_menu_txt a::before {
 background-color: #02b0b0;
}
.service_menu ul li:nth-of-type(7) .service_menu_ttl,
.service_menu ul li:nth-of-type(7) .service_menu_txt a::before {
 background-color: #0072c3;
}
.service_menu ul li:nth-of-type(8) .service_menu_ttl,
.service_menu ul li:nth-of-type(8) .service_menu_txt a::before {
 background-color: #846ae0;
}
.service_menu_txt {
 padding: min(1.5rem, calc(15vw / 13.66));
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: min(0.5rem, calc(5vw / 13.66)) 0;
}
.service_menu_txt a {
 display: flex;
 align-items: baseline;
 text-align: left;
 font-size: 1.6rem;
 font-weight: 500;
 color: #333333;
 gap: 0 min(1rem, calc(10vw / 13.66));
 text-decoration: underline;
 line-height: 1.75;
}
.service_menu_txt a::before {
 content: "";
 width: min(1.2rem, calc(12vw / 13.66));
 height: min(1.2rem, calc(12vw / 13.66));
 border-radius: 50%;
}
.service_menu_txt a[target="_blank"]::after {
 content: "";
 display: inline-block;
 width: min(1.5rem, calc(15vw / 13.66));
 height: min(1.5rem, calc(15vw / 13.66));
 background: url(../images/common/blank_icon_b.svg) no-repeat;
 background-size: cover;
 vertical-align: sub;
}

@media (hover: hover) and (pointer: fine) {
 .service_menu_txt a:where(:any-link, :enabled, summary):hover {
  text-decoration: none;
 }
}

@media screen and (max-width: 767px) {
 /*                 service                    */
 .service_inner {
  padding: 7rem 0 0;
 }
 .service_item {
  padding: 7rem 0 6rem;
 }
 .service_ttl {
  font-size: 2.1rem;
 }
 .service_ttl span {
  font-size: 1.2rem;
  color: #005bab;
  gap: 0 0.5rem;
 }
 .service_ttl span::before {
  width: 0.8rem;
  height: 0.8rem;
 }

 .service_menu {
  width: 31.5rem;
  margin: 4rem auto 0;
 }
 .service_menu ul {
  flex-direction: column;
  gap: 2.5rem 0;
 }
 .service_menu ul li {
  width: 100%;
  border-radius: 0.8rem;
 }
 .service_menu ul li:nth-last-of-type(1),
 .service_menu ul li:nth-last-of-type(2),
 .service_menu ul li:nth-last-of-type(3),
 .service_menu ul li:nth-last-of-type(4) {
  width: 100%;
 }
 .service_menu_ttl {
  font-size: 1.6rem;
  padding: 1.6rem 1rem;
  gap: 0 1rem;
  text-align: left;
 }
 .service_menu_ttl span {
  width: 3.8rem;
  font-size: 0;
 }

 .service_menu_txt {
  padding: 1.5rem;
  gap: 0.5rem 0;
 }
 .service_menu_txt a {
  font-size: 1.3rem;
  gap: 0 0.8rem;
 }
 .service_menu_txt a::before {
  width: 1rem;
  height: 1rem;
 }
  .service_menu_txt a[target="_blank"]::after {
 width: 1.2rem;
 height: 1.2rem;
}
}
