@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
.ttl-list {
  margin: 3.5rem 0 1.5rem 0;
  line-height: 1.2;
  font-size: 2rem;
  font-weight: 500;
}

.search-cond-a {
  margin: 2.5rem 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3rem 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .search-cond-a {
    grid-template-columns: repeat(2, 1fr);
  }
}
.search-cond-a li {
  margin-bottom: 1rem;
  width: 100%;
  height: 100%;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
  font-size: 1.6rem;
  white-space: nowrap;
  line-height: 1.5;
  background: #FFF;
  color: #333;
  padding: 1rem 0.5rem 1rem 7rem;
  position: relative;
  cursor: pointer;
  border-radius: 3rem 1rem 1rem 3rem;
  -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
          box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
  -webkit-transition: all 0.4s 0s ease;
  transition: all 0.4s 0s ease;
}
.search-cond-a li:hover {
  -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.3);
          box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.3);
}
.search-cond-a li:active {
  background: #FFF;
  color: #333;
}
.search-cond-a li.active {
  background: #999;
  color: #FFF;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.search-cond-a li::before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 8rem;
  height: 8rem;
  border-radius: 4rem;
  border: 2px solid #FFF;
  background-color: #333;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.2);
  background-blend-mode: multiply;
}
.search-cond-a li.active::before {
  background-color: rgba(0, 0, 0, 0);
}
.search-cond-a .work-1::before {
  background-image: url("../img/service-post-01.jpg");
}
.search-cond-a .work-2::before {
  background-image: url("../img/service-post-02.jpg");
}
.search-cond-a .work-3::before {
  background-image: url("../img/service-post-03.jpg");
}
.search-cond-a .work-4::before {
  background-image: url("../img/service-post-04.jpg");
}

.search-cond-b {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .search-cond-b {
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}
.search-cond-b li {
  margin-bottom: 1rem;
  width: 100%;
  height: 100%;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
  font-size: 1.6rem;
  white-space: nowrap;
  line-height: 1.5;
  background: #FFF;
  color: #333;
  position: relative;
  padding: 1rem 0.5rem 1rem 3.5rem;
  cursor: pointer;
  border-radius: 1rem;
  -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
          box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
  -webkit-transition: all 0.4s 0s ease;
  transition: all 0.4s 0s ease;
}
@media screen and (max-width: 768px) {
  .search-cond-b li {
    font-size: 1.4rem;
    padding: 0.5rem 0.5rem 0.5rem 3.5rem;
  }
}
.search-cond-b li:hover {
  -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.3);
          box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.3);
}
.search-cond-b li:active {
  background: #FFF;
  color: #333;
}
.search-cond-b li.active {
  background: #999;
  color: #FFF;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.search-cond-b li::before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 1.5rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 4.5rem;
  height: 4.5rem;
  background-color: #333;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
@media screen and (max-width: 768px) {
  .search-cond-b li::before {
    left: 1rem;
    width: 3.8rem;
    height: 3.8rem;
  }
}
.search-cond-b li.active::before {
  background-color: #FFF;
}
.search-cond-b .area-1::before {
  mask-image: url("../img/icon-service-cate-01.svg");
  -webkit-mask-image: url("../img/icon-service-cate-01.svg");
}
.search-cond-b .area-2::before {
  mask-image: url("../img/icon-service-cate-02.svg");
  -webkit-mask-image: url("../img/icon-service-cate-02.svg");
}
.search-cond-b .area-3::before {
  mask-image: url("../img/icon-service-cate-03.svg");
  -webkit-mask-image: url("../img/icon-service-cate-03.svg");
}
.search-cond-b .area-4::before {
  mask-image: url("../img/icon-service-cate-04.svg");
  -webkit-mask-image: url("../img/icon-service-cate-04.svg");
}
.search-cond-b .area-5::before {
  mask-image: url("../img/icon-service-cate-05.svg");
  -webkit-mask-image: url("../img/icon-service-cate-05.svg");
}
.search-cond-b .area-6::before {
  mask-image: url("../img/icon-service-cate-06.svg");
  -webkit-mask-image: url("../img/icon-service-cate-06.svg");
}

.search-cond-c {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0 1rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.search-cond-c li {
  margin-bottom: 1rem;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
  font-size: 1.6rem;
  white-space: nowrap;
  line-height: 1.5;
  background: #FFF;
  color: #333;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  border-radius: 1rem;
  -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
          box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
  -webkit-transition: all 0.4s 0s ease;
  transition: all 0.4s 0s ease;
}
@media screen and (max-width: 768px) {
  .search-cond-c li {
    font-size: 1.2rem;
  }
}
.search-cond-c li:hover {
  -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.3);
          box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.3);
}
.search-cond-c li:active {
  background: #FFF;
  color: #333;
}
.search-cond-c li.active {
  background: #999;
  color: #FFF;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.search-btn {
  margin: 2rem 0 0 0;
  text-align: center;
}
.search-btn #search-run,
.search-btn #search-clear {
  display: inline-block;
  min-width: 16rem;
  margin: 1rem 0;
  padding: 1.5rem;
  text-align: center;
  background-color: #439ED6;
  color: #FFF;
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 0.5rem;
}
.search-btn #search-run:hover,
.search-btn #search-clear:hover {
  color: #FFF;
  background-color: #3455FC;
}
.search-btn #search-run.disabled,
.search-btn #search-clear.disabled {
  background-color: #CCC;
  pointer-events: none;
  /* クリック不可 */
  cursor: default;
}

.hero {
  background-color: #FFF;
  margin-bottom: 2rem;
  position: relative;
}
.hero .hero__img {
  margin-left: 40%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .hero .hero__img {
    margin-left: 0;
    width: 100%;
    height: auto;
  }
}
.hero .hero__txt {
  position: absolute;
  top: 50%;
  left: 6%;
  width: 45%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 1rem;
  padding: 5rem;
  -webkit-box-shadow: 0 0 1rem rgba(51, 51, 51, 0.1);
          box-shadow: 0 0 1rem rgba(51, 51, 51, 0.1);
  background-color: #FFF;
}
@media screen and (max-width: 768px) {
  .hero .hero__txt {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    margin: 2rem;
    padding: 2rem 0;
    border-radius: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
.hero .hero__txt .hero__logo {
  width: 30rem;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 768px) {
  .hero .hero__txt .hero__logo {
    width: 20rem;
  }
}
.hero .hero__txt .hero__ttl {
  font-size: 4.5rem;
  line-height: 1.2;
  margin: 0 0 3rem 0;
}
@media screen and (max-width: 768px) {
  .hero .hero__txt .hero__ttl {
    font-size: 3.2rem;
  }
}
.hero .hero__txt .hero__read {
  margin: 0 0 2rem 0;
  font-size: 2.3rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .hero .hero__txt .hero__read {
    margin: 0 0 2rem 0;
    font-size: 2rem;
  }
}
.hero .hero__txt .hero__cate .hero__cate-ttl {
  margin: 0 0 1.5rem 0;
  font-size: 2;
  font-weight: 500;
  line-height: 1;
}
.hero .hero__txt .hero__cate .hero__cate-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}
.hero .hero__txt .hero__cate .hero__cate-list span {
  background-color: #999;
  font-size: 1.6rem;
  line-height: 1;
  padding: 1rem 1.5rem;
  white-space: nowrap;
  color: #FFF;
  border-radius: 0.5rem;
}
.hero .hero__txt .hero__remarks {
  margin: 2rem 0 0 0;
  font-size: 1.2rem;
  line-height: 1.5;
}
.hero .contact-link {
  position: absolute;
  bottom: 2rem;
  right: 4rem;
}
@media screen and (max-width: 768px) {
  .hero .contact-link {
    position: relative;
    inset: auto;
    margin: 0 2rem 2rem 2rem;
    text-align: center;
  }
}
.hero .contact-link a {
  display: inline-block;
  min-width: 30rem;
  padding: 1.5rem 3rem;
  background-color: #439ED6;
  color: #FFF;
  font-size: 2rem;
  line-height: 1.5;
  border-radius: 0.5rem;
  text-decoration: none;
  text-align: center;
  -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.3);
          box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.3);
}
@media screen and (max-width: 768px) {
  .hero .contact-link a {
    width: 100%;
  }
}
.hero .contact-link a:hover {
  background-color: #3455FC;
}

.anchor-nav {
  position: sticky;
  top: 3rem;
  z-index: 9;
  margin: 0 20rem 0 20rem;
}
@media screen and (max-width: 768px) {
  .anchor-nav {
    top: var(--header-height);
    margin: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 1rem;
  }
}
.anchor-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}
@media screen and (max-width: 768px) {
  .anchor-nav__list {
    display: block;
    padding: 0 1rem;
    white-space: nowrap;
  }
}
@media screen and (max-width: 768px) {
  .anchor-nav__item {
    display: inline-block;
  }
}
.anchor-nav__item a {
  display: block;
  padding: 1.2rem 1.4rem;
  font-size: 1.4rem;
  line-height: 1;
  background-color: #FFF;
  border-radius: 1rem;
  -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
          box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
}

@media screen and (max-width: 768px) {
  html {
    scroll-padding-top: calc(var(--header-height) + 4rem);
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  html {
    scroll-padding-top: calc(var(--header-height) + 6rem);
  }
}
.ttl-block {
  margin: 8rem 0 4rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1.5;
  color: #439ED6;
  border-left: 3px solid #439ED6;
}
@media screen and (max-width: 768px) {
  .ttl-block {
    font-size: 2rem;
  }
}

.catchphrase {
  margin: 0;
  font-size: 2.7rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
}
@media screen and (max-width: 768px) {
  .catchphrase {
    font-size: 2.3rem;
  }
}

.outline {
  display: block;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
@media screen and (max-width: 900px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .features {
    grid-template-columns: repeat(1, 1fr);
  }
}
.features__item--img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #F1F1F1;
  margin-bottom: 1rem;
}
.features__item--name {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 2.5rem 0 1.5rem 0;
  padding: 0.5rem 0;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
.features__item--ttl {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 1rem 0;
}
.features__item--body {
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  .features__item {
    font-size: 1.6rem;
  }
}

.solution {
  font-family: sans-serif;
  counter-reset: case-counter;
}
.solution__catch {
  font-size: 2.7rem;
  line-height: 1.5;
  font-weight: 400;
  border-bottom: 1px solid #CCC;
  padding-bottom: 2rem;
}
.solution__ttl {
  counter-increment: case-counter;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 2rem;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
}
.solution__ttl::before, .solution__ttl::after {
  color: #439ED6;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
}
.solution__ttl::before {
  content: "CASE";
  font-size: 1.4rem;
  white-space: nowrap;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin-right: 0.5rem;
}
.solution__ttl::after {
  content: counter(case-counter, decimal-leading-zero);
  font-size: 3.8rem;
  white-space: nowrap;
  margin-right: 1.5rem;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.solution__ttl span {
  font-weight: 500;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}
.solution__box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-bottom: 3rem;
  background-color: #FFF;
  border-radius: 1rem;
  -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
          box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .solution__box {
    grid-template-columns: 1fr;
  }
}
.solution__box--body {
  padding: 3.5rem 3rem 3rem 12.5rem;
  margin: 0;
}
.solution__box .mae,
.solution__box .ato {
  position: relative;
}
.solution__box .mae::before,
.solution__box .ato::before {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  font-size: 1.8rem;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
  color: #FFF;
}
.solution__box .mae {
  background-color: #999;
  color: #FFF;
}
.solution__box .mae::before {
  content: "BEFORE";
  background-color: #666;
}
.solution__box .mae::after {
  content: "";
  position: absolute;
  top: 5rem;
  right: -0.7rem;
  width: 2rem;
  height: 2rem;
  background-color: #999;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
  .solution__box .mae::after {
    top: auto;
    right: auto;
    bottom: -1rem;
    left: 5.5rem;
  }
}
.solution__box .ato::before {
  content: "AFTER";
  background-color: #439ED6;
}

.flow {
  counter-reset: step-counter;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem 0;
}
@media screen and (max-width: 900px) {
  .flow {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .flow {
    grid-template-columns: repeat(1, 1fr);
  }
}
.flow__item {
  position: relative;
  padding: 6rem 3rem 2.5rem 3rem;
  margin-right: 3.5rem;
  background-color: #FFF;
  border-radius: 1rem;
  -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
          box-shadow: 0.3rem 0.3rem 1rem rgba(51, 51, 51, 0.1);
}
@media screen and (max-width: 768px) {
  .flow__item {
    margin-right: 0;
  }
}
.flow__item::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #999;
  border-radius: 1rem 1rem 0 0;
  color: #FFF;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  counter-increment: step-counter;
  content: "STEP " counter(step-counter);
}
.flow__item::after {
  position: absolute;
  content: "";
  top: 50%;
  right: -1.5rem;
  -webkit-transform: rotate(45deg) translate(0, -50%);
          transform: rotate(45deg) translate(0, -50%);
  width: 2rem;
  height: 2rem;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
}
@media screen and (max-width: 768px) {
  .flow__item::after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -1.2rem;
    -webkit-transform: rotate(135deg) translate(70%, 0);
            transform: rotate(135deg) translate(70%, 0);
  }
}
.flow__item--ttl {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 1rem 0;
}
.flow__item--body {
  margin-bottom: 0;
}
.flow__item:last-child::after {
  display: none;
}

.function {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
@media screen and (max-width: 900px) {
  .function {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .function {
    grid-template-columns: repeat(1, 1fr);
  }
}
.function__item--img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #F1F1F1;
  margin-bottom: 1rem;
}
.function__item--txt-ttl {
  margin: 0 0 2rem 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
}
.function__item--txt-body {
  margin-bottom: 1rem;
}

.purpose {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}
@media screen and (max-width: 900px) {
  .purpose {
    grid-template-columns: repeat(1, 1fr);
  }
}
.purpose__item {
  display: grid;
  grid-template-columns: auto 2fr;
  gap: 1.5rem;
  padding: 3rem 3rem 3rem 2rem;
  background-color: #FFF;
  -webkit-box-shadow: 3px 3px 10px rgba(51, 51, 51, 0.1);
          box-shadow: 3px 3px 10px rgba(51, 51, 51, 0.1);
  border-radius: 1rem;
}
.purpose__item--img {
  width: 9rem;
  height: 9rem;
}
@media screen and (max-width: 768px) {
  .purpose__item--img {
    width: 7rem;
    height: 7rem;
  }
}
.purpose__item--txt-cate {
  display: inline-block;
  margin: 0 0 1.5rem 0;
  padding: 0.7rem;
  border-radius: 0.3rem;
  font-size: 1.6rem;
  background-color: #439ED6;
  color: #FFF;
  font-weight: 500;
  line-height: 1;
}
.purpose__item--txt-ttl {
  margin: 0 0 1.5rem 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
}
.purpose__item--txt-body {
  margin: 0;
}

.plan {
  display: block;
}
.plan__item {
  display: grid;
  grid-template-columns: 1fr 1.2fr 2fr;
  background-color: #FFF;
  border-radius: 1rem;
  -webkit-box-shadow: 3px 3px 10px rgba(51, 51, 51, 0.1);
          box-shadow: 3px 3px 10px rgba(51, 51, 51, 0.1);
  overflow: hidden;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 3rem;
}
@media screen and (max-width: 768px) {
  .plan__item {
    grid-template-columns: 1fr;
  }
}
.plan__item > * {
  height: 100%;
  -ms-flex-line-pack: center;
      align-content: center;
  padding: 3rem;
  margin: 0;
}
.plan__item--ttl {
  background-color: #439ED6;
  color: #FFF;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.plan__item:nth-child(1) .plan__item--ttl {
  background-color: #439ED6;
}
.plan__item:nth-child(2) .plan__item--ttl {
  background-color: #26AE95;
}
.plan__item:nth-child(3) .plan__item--ttl {
  background-color: #7FAE26;
}
.plan__item:nth-child(4) .plan__item--ttl {
  background-color: #AF9A26;
}
.plan__item:nth-child(5) .plan__item--ttl {
  background-color: #B77034;
}
.plan__item:nth-child(6) .plan__item--ttl {
  background-color: #C95A81;
}
.plan__item--price {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}
.plan__item--price .number {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 3.2rem;
  letter-spacing: 0;
}
.plan__item--price .remarks {
  display: block;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 400;
  margin-top: 0.5rem;
}
.plan__item--spec {
  border-left: 1px solid #CCC;
}
@media screen and (max-width: 768px) {
  .plan__item--spec {
    border-left: none;
    border-top: 1px solid #CCC;
  }
}

.options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 4rem;
}
@media screen and (max-width: 768px) {
  .options {
    grid-template-columns: repeat(1, 1fr);
  }
}
.options__item {
  border-top: 1px solid #CCC;
  padding: 2rem 0;
}
.options__item--ttl {
  margin: 0 0 2rem 0;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
}
.options__item--body {
  margin: 0;
}/*# sourceMappingURL=service.css.map */