:root {
  --bk: #000;
  --bk00: rgba(0,0,0,0);
  --bk05: rgba(0,0,0,.05);
  --bk10: rgba(0,0,0,.10);
  --bk15: rgba(0,0,0,.15);
  --bk20: rgba(0,0,0,.20);
  --bk25: rgba(0,0,0,.25);
  --bk30: rgba(0,0,0,.30);
  --bk35: rgba(0,0,0,.35);
  --bk40: rgba(0,0,0,.40);
  --bk45: rgba(0,0,0,.45);
  --bk50: rgba(0,0,0,.50);
  --bk55: rgba(0,0,0,.55);
  --bk60: rgba(0,0,0,.60);
  --bk65: rgba(0,0,0,.65);
  --bk70: rgba(0,0,0,.70);
  --bk75: rgba(0,0,0,.75);
  --bk80: rgba(0,0,0,.80);
  --bk85: rgba(0,0,0,.85);
  --bk90: rgba(0,0,0,.90);
  --bk95: rgba(0,0,0,.95);
  --wh: #fff;
  --wh00: rgba(255,255,255,0);
  --wh05: rgba(255,255,255,.05);
  --wh10: rgba(255,255,255,.10);
  --wh15: rgba(255,255,255,.15);
  --wh20: rgba(255,255,255,.20);
  --wh25: rgba(255,255,255,.25);
  --wh30: rgba(255,255,255,.30);
  --wh35: rgba(255,255,255,.35);
  --wh40: rgba(255,255,255,.40);
  --wh45: rgba(255,255,255,.45);
  --wh50: rgba(255,255,255,.50);
  --wh55: rgba(255,255,255,.55);
  --wh60: rgba(255,255,255,.60);
  --wh65: rgba(255,255,255,.65);
  --wh70: rgba(255,255,255,.70);
  --wh75: rgba(255,255,255,.75);
  --wh80: rgba(255,255,255,.80);
  --wh85: rgba(255,255,255,.85);
  --wh90: rgba(255,255,255,.90);
  --wh95: rgba(255,255,255,.95);
  --key: #4d2700;
  --key10: rgba(77,39,0,.10);
  --key15: rgba(77,39,0,.15);
  --key20: rgba(77,39,0,.20);
  --key25: rgba(77,39,0,.25);
  --key30: rgba(77,39,0,.30);
  --key35: rgba(77,39,0,.35);
  --key40: rgba(77,39,0,.40);
  --key45: rgba(77,39,0,.45);
  --key50: rgba(77,39,0,.50);
  --key55: rgba(77,39,0,.55);
  --key60: rgba(77,39,0,.60);
  --key65: rgba(77,39,0,.65);
  --key70: rgba(77,39,0,.70);
  --key75: rgba(77,39,0,.75);
  --key80: rgba(77,39,0,.80);
  --key85: rgba(77,39,0,.85);
  --key90: rgba(77,39,0,.90);
  --key95: rgba(77,39,0,.95);
  --bg01: #ff6;
  --bg02: #fa0;
  --bg03: #e5e5e5;
  --bg04: #ccc;
  --bg05: #ffc;
  --red: #c00;
  --orange: #f50;
  --brown: #940;
  --gray: #808080;
  --required: #c00;
}

body#toppage .visual {
  position: relative;
  z-index: 10;
}
body#toppage .visual::before, body#toppage .visual::after {
  content: "";
  position: absolute;
}
body#toppage .visual::before {
  top: 0;
  left: 0;
  z-index: 10;
  width: calc(50% + 5.625rem);
  height: 100%;
  background: linear-gradient(to bottom, var(--bg01) 0%, var(--bg02) 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 12.5rem) 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, calc(100% - 12.5rem) 100%, 0 100%);
}
@media (max-width: 768px) {
  body#toppage .visual::before {
    width: 100%;
    height: 125vw;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 29.1666666667vw), 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 29.1666666667vw), 0 100%);
  }
}
body#toppage .visual::after {
  bottom: 0;
  left: calc(50% - 5.625rem);
  z-index: 20;
  width: 54%;
  max-width: 45rem;
  height: 100%;
  background: url("../images/toppage/visual_illust.svg") no-repeat 0 100%;
  background-size: contain;
}
@media (max-width: 768px) {
  body#toppage .visual::after {
    position: relative;
    display: block;
    left: 0;
    width: 100%;
    max-width: none;
    height: 66.6666666667vw;
    background-position: 50% 100%;
  }
}
body#toppage .visual .copy {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem;
}
@media (max-width: 768px) {
  body#toppage .visual .copy {
    padding: 8.3333333333vw 8.3333333333vw 0;
  }
}
body#toppage .visual .copy img {
  width: 39.2857%;
}
@media (max-width: 768px) {
  body#toppage .visual .copy img {
    width: 100%;
  }
}
body#toppage .visual .copy figcaption {
  position: absolute;
  bottom: 2.8125rem;
  left: 27.5rem;
  color: var(--key);
  font-size: 0.75rem;
}
body#toppage .section {
  padding: 5rem 0 6.25rem;
}
@media (max-width: 768px) {
  body#toppage .section {
    padding: 12.5vw 0;
  }
}
body#toppage .section:nth-child(odd) {
  background-color: var(--bg05);
}
body#toppage .section .subject {
  margin-bottom: 3.125rem;
}
@media (max-width: 768px) {
  body#toppage .section .subject {
    margin-bottom: 6.25vw;
  }
}
body#toppage .section .subject h3 {
  text-align: center;
}
body#toppage .section .subject h3 img {
  height: 7.375rem;
}
@media (max-width: 768px) {
  body#toppage .section .subject h3 img {
    height: 14.5833333333vw;
  }
}
body#toppage .problem {
  position: relative;
  margin-bottom: 3.75rem;
  padding: 3.75rem 0 5rem;
  background: linear-gradient(to bottom, var(--bg03) 0%, var(--bg04) 100%);
}
@media (max-width: 768px) {
  body#toppage .problem {
    margin-bottom: 8.3333333333vw;
    padding: 8.3333333333vw 0;
  }
}
body#toppage .problem::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.75rem 20rem 0 20rem;
  border-color: var(--bg04) transparent transparent transparent;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  body#toppage .problem::after {
    border-width: 8.3333333333vw 50vw 0 50vw;
  }
}
body#toppage .problem .fig {
  margin-bottom: 1.25rem;
  text-align: center;
}
@media (max-width: 768px) {
  body#toppage .problem .fig {
    margin-bottom: 4.1666666667vw;
  }
}
body#toppage .problem p {
  font-size: 3rem;
  text-align: center;
}
@media (max-width: 768px) {
  body#toppage .problem p {
    font-size: 6.25vw;
  }
}
body#toppage .service .container {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
}
@media (max-width: 768px) {
  body#toppage .service .container {
    flex-direction: column;
    gap: 8.3333333333vw;
  }
}
body#toppage .service .panel {
  position: relative;
  display: flex;
  flex-direction: column;
  border: solid 0.3125rem var(--brown);
}
@media (max-width: 768px) {
  body#toppage .service .panel {
    border-width: 1.0416666667vw;
  }
}
body#toppage .service .panel::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 3.75rem 3.75rem 0;
  border-color: transparent var(--brown) transparent transparent;
}
@media (max-width: 768px) {
  body#toppage .service .panel::before {
    border-width: 0 12.5vw 12.5vw 0;
  }
}
body#toppage .service .panel h3 {
  padding: 1.25rem;
  color: var(--key);
  font-size: 2.25rem;
  font-weight: 700;
}
@media (max-width: 768px) {
  body#toppage .service .panel h3 {
    padding: 4.1666666667vw;
    font-size: 6.25vw;
  }
}
body#toppage .service .panel:nth-child(1) h3 {
  background-color: var(--bg01);
}
body#toppage .service .panel:nth-child(2) {
  transition-delay: 0.2s;
}
@media (max-width: 768px) {
  body#toppage .service .panel:nth-child(2) {
    transition-delay: 0.1s;
  }
}
body#toppage .service .panel:nth-child(2) h3 {
  background-color: var(--bg02);
}
body#toppage .service .panel .detail {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  height: 100%;
  padding: 1.875rem;
  background-color: var(--wh);
}
@media (max-width: 768px) {
  body#toppage .service .panel .detail {
    gap: 4.1666666667vw;
    padding: 6.25vw;
  }
}
body#toppage .service .panel .detail p {
  font-size: 1rem;
  line-height: 1.75;
}
@media (max-width: 768px) {
  body#toppage .service .panel .detail p {
    font-size: 3.3333333333vw;
  }
}
body#toppage .service .panel .detail ul {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}
@media (max-width: 768px) {
  body#toppage .service .panel .detail ul {
    flex-direction: column;
    gap: 4.1666666667vw;
  }
}
body#toppage .service .panel .detail ul li {
  flex: 1 1 0%;
}
body#toppage .service .panel .detail ul li a {
  display: block;
  position: relative;
  padding: 1.25rem;
  border: solid 1px var(--key);
  color: var(--wh);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  background-color: var(--key);
}
@media (max-width: 768px) {
  body#toppage .service .panel .detail ul li a {
    padding: 4.1666666667vw;
    font-size: 3.3333333333vw;
  }
}
body#toppage .service .panel .detail ul li a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.625rem;
  height: 0.625rem;
  border-right: solid 0.125rem var(--wh);
  border-bottom: solid 0.125rem var(--wh);
  transform: translateY(-50%) rotate(-45deg);
  transition: right 0.5s cubic-bezier(0.2, 1, 0.2, 1), bottom 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}
@media (max-width: 768px) {
  body#toppage .service .panel .detail ul li a::after {
    right: 4.1666666667vw;
    width: 2.0833333333vw;
    height: 2.0833333333vw;
    border-width: 0.4166666667vw;
  }
}
body#toppage .service .panel .detail ul li a:hover {
  color: var(--key);
  background-color: var(--wh);
}
body#toppage .service .panel .detail ul li a:hover::after {
  border-color: var(--key);
}
body#toppage .strength .lead {
  margin-bottom: 3.125rem;
}
@media (max-width: 768px) {
  body#toppage .strength .lead {
    margin-bottom: 10.4166666667vw;
  }
}
body#toppage .strength .lead p {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.75;
}
@media (max-width: 768px) {
  body#toppage .strength .lead p {
    font-size: 4.1666666667vw;
  }
}
body#toppage .strength .contents {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1.875rem;
  margin-bottom: 5rem;
}
@media (max-width: 768px) {
  body#toppage .strength .contents {
    flex-direction: column;
    gap: 6.25vw;
    margin-bottom: 12.5vw;
  }
}
body#toppage .strength .contents .allsolution {
  position: absolute;
  top: 22.1875rem;
  left: 1.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 71.25rem;
  height: 3.75rem;
  border-radius: 1.25rem;
  color: var(--wh);
  font-size: 2.25rem;
  font-weight: 700;
  background-color: var(--orange);
}
@media (max-width: 768px) {
  body#toppage .strength .contents .allsolution {
    display: none;
  }
}
body#toppage .strength .contents .panel {
  display: flex;
  flex-direction: column;
  gap: 8.125rem;
  width: 22.5rem;
}
@media (max-width: 768px) {
  body#toppage .strength .contents .panel {
    gap: 3.125vw;
    width: 80%;
    margin: 0 auto;
  }
}
body#toppage .strength .contents .panel:nth-child(2) {
  transition-delay: 0.2s;
}
@media (max-width: 768px) {
  body#toppage .strength .contents .panel:nth-child(2) {
    transition-delay: 0.1s;
  }
}
body#toppage .strength .contents .panel:nth-child(3) {
  transition-delay: 0.3s;
}
@media (max-width: 768px) {
  body#toppage .strength .contents .panel:nth-child(3) {
    transition-delay: 0.1s;
  }
}
body#toppage .strength .contents .panel .before {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1.25rem;
  padding: 1.875rem;
  border-radius: 1.25rem;
  background-color: var(--wh);
}
@media (max-width: 768px) {
  body#toppage .strength .contents .panel .before {
    gap: 4.1666666667vw;
    padding: 4.1666666667vw 8.3333333333vw;
    border-radius: 4.1666666667vw;
  }
}
body#toppage .strength .contents .panel .before::after {
  content: "";
  position: absolute;
  top: calc(100% - 0.625rem);
  left: 50%;
  width: 3.75rem;
  height: 2.1875rem;
  background: url("../images/toppage/strength_arrow.svg");
  opacity: 0.5;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  body#toppage .strength .contents .panel .before::after {
    display: none;
  }
}
body#toppage .strength .contents .panel .before img {
  width: 16.25rem;
  height: 13.125rem;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 768px) {
  body#toppage .strength .contents .panel .before img {
    width: 100%;
    height: auto;
  }
}
body#toppage .strength .contents .panel .before figcaption {
  font-size: 1.5rem;
  font-weight: 700;
}
@media (max-width: 768px) {
  body#toppage .strength .contents .panel .before figcaption {
    font-size: 5vw;
  }
}
body#toppage .strength .contents .panel .after {
  position: relative;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}
body#toppage .strength .contents .panel .after::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 0.625rem);
  left: 50%;
  width: 3.75rem;
  height: 2.1875rem;
  background: url("../images/toppage/strength_arrow.svg");
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  body#toppage .strength .contents .panel .after::after {
    bottom: calc(100% - 2.0833333333vw);
    width: 12.5vw;
    height: 7.2916666667vw;
  }
}
body#toppage .strength .contents .panel .after dt {
  padding: 0.9375rem 0.9375rem 0.625rem;
  border-radius: 1.25rem 1.25rem 0 0;
  color: var(--wh);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  background-color: var(--bg02);
}
@media (max-width: 768px) {
  body#toppage .strength .contents .panel .after dt {
    padding: 3.125vw 3.125vw 2.0833333333vw;
    border-radius: 4.1666666667vw 4.1666666667vw 0 0;
    font-size: 5vw;
  }
}
body#toppage .strength .contents .panel .after dd {
  flex: 1 1 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
  border: solid 0.3125rem var(--bg02);
  border-radius: 0 0 1.25rem 1.25rem;
  color: var(--bk);
  font-size: 1.875rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.75;
  background-color: var(--wh);
}
body#toppage .strength .contents .panel .after dd strong {
  color: var(--orange);
}
@media (max-width: 768px) {
  body#toppage .strength .contents .panel .after dd {
    padding: 4.1666666667vw;
    border-width: 1.0416666667vw;
    border-radius: 0 0 4.1666666667vw 4.1666666667vw;
    font-size: 5vw;
  }
}
body#toppage .strength .summary p {
  color: var(--key);
  font-size: 2.25rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.75;
}
@media (max-width: 768px) {
  body#toppage .strength .summary p {
    font-size: 5vw;
  }
}
body#toppage .strength .summary ul {
  display: flex;
  justify-content: center;
  gap: 1.875rem;
  margin-top: 5rem;
}
@media (max-width: 768px) {
  body#toppage .strength .summary ul {
    flex-direction: column;
    gap: 4.1666666667vw;
    margin-top: 8.3333333333vw;
    padding-left: 4.1666666667vw;
  }
}
body#toppage .strength .summary ul li {
  position: relative;
  width: 22.5rem;
  padding: 3.75rem 1.25rem 1.875rem;
  color: var(--key);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  background-color: #ffd400;
}
@media (max-width: 768px) {
  body#toppage .strength .summary ul li {
    width: 100%;
    padding: 4.1666666667vw 4.1666666667vw 4.1666666667vw 8.3333333333vw;
    font-size: 5vw;
    text-align: left;
  }
}
body#toppage .strength .summary ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 6.25rem;
  height: 6.25rem;
  background: url("../images/toppage/icon_check.svg") no-repeat 0 0;
  background-size: contain;
  transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
  body#toppage .strength .summary ul li::before {
    top: 50%;
    left: 0;
    width: 8.3333333333vw;
    height: 8.3333333333vw;
  }
}
body#toppage .strength .summary ul li:nth-child(2) {
  transition-delay: 0.2s;
}
@media (max-width: 768px) {
  body#toppage .strength .summary ul li:nth-child(2) {
    transition-delay: 0.1s;
  }
}
body#toppage .strength .summary ul li:nth-child(3) {
  transition-delay: 0.3s;
}
@media (max-width: 768px) {
  body#toppage .strength .summary ul li:nth-child(3) {
    transition-delay: 0.1s;
  }
}
body#toppage .reason {
  padding: 6.25rem 0;
}
@media (max-width: 768px) {
  body#toppage .reason {
    padding: 12.5vw 0;
  }
}
body#toppage .reason ol {
  display: flex;
  justify-content: center;
  gap: 1.875rem;
}
@media (max-width: 768px) {
  body#toppage .reason ol {
    flex-direction: column;
    gap: 4.1666666667vw;
  }
}
body#toppage .reason ol li {
  counter-increment: num;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 17.5rem;
  padding: 1.25rem;
  border: solid 0.3125rem var(--brown);
  background-color: var(--bg05);
}
@media (max-width: 768px) {
  body#toppage .reason ol li {
    flex-direction: row;
    gap: 4.1666666667vw;
    width: 100%;
    padding: 4.1666666667vw;
    border-width: 1.0416666667vw;
  }
}
body#toppage .reason ol li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6.25rem 6.25rem 0 0;
  border-color: var(--brown) transparent transparent transparent;
}
@media (max-width: 768px) {
  body#toppage .reason ol li::before {
    border-width: 16.6666666667vw 16.6666666667vw 0 0;
  }
}
body#toppage .reason ol li::after {
  content: counter(num, decimal-leading-zero);
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  color: var(--wh);
  font-family: "Staatliches", sans-serif;
  font-size: 2.25rem;
}
@media (max-width: 768px) {
  body#toppage .reason ol li::after {
    top: 1.0416666667vw;
    left: 1.0416666667vw;
    font-size: 6.25vw;
  }
}
body#toppage .reason ol li:nth-child(2) {
  transition-delay: 0.2s;
}
@media (max-width: 768px) {
  body#toppage .reason ol li:nth-child(2) {
    transition-delay: 0.1s;
  }
}
body#toppage .reason ol li:nth-child(3) {
  transition-delay: 0.3s;
}
@media (max-width: 768px) {
  body#toppage .reason ol li:nth-child(3) {
    transition-delay: 0.1s;
  }
}
body#toppage .reason ol li:nth-child(4) {
  transition-delay: 0.4s;
}
@media (max-width: 768px) {
  body#toppage .reason ol li:nth-child(4) {
    transition-delay: 0.1s;
  }
}
body#toppage .reason ol li .fig {
  text-align: center;
}
body#toppage .reason ol li .fig img {
  width: 10rem;
  border-radius: 50%;
}
@media (max-width: 768px) {
  body#toppage .reason ol li .fig img {
    width: 20.8333333333vw;
  }
}
body#toppage .reason ol li .content {
  flex: 1 1 0%;
}
body#toppage .reason ol li .content h4 {
  margin-bottom: 1.25rem;
  color: var(--key);
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 768px) {
  body#toppage .reason ol li .content h4 {
    margin-bottom: 2.0833333333vw;
    font-size: 3.75vw;
    text-align: left;
  }
}
body#toppage .reason ol li .content p {
  font-size: 1rem;
  line-height: 1.75;
}
@media (max-width: 768px) {
  body#toppage .reason ol li .content p {
    font-size: 2.9166666667vw;
  }
}