.home-hero {
  position: relative;
  border-bottom: 1px solid var(--light-gray);
}

.home-hero__image {
  width: 100%;
  height: 280px;
}

.home-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero__content {
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.home-hero__header {
  align-self: center;
}

.home-hero__header > h1 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
}

.home-hero__header .hdTtl {
  margin-bottom: 5px;
  font-size: 32px;
}

.home-hero__header > h2 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 24px;
}

.home-hero__header > p {
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 24px;
}

.home-hero__header .annotation {
  text-align: center;
}

.home-hero__header .annotation > span > br {
  display: block;
}

.home-hero__header .annotation > span > span > br {
  display: block;
}

.home-hero__links {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.campaignBox {
  flex-wrap: wrap;
}

/* .campaignImg {
  height: auto;
  width: auto;
} */

@media screen and (min-width: 1024px) {
  .campaignBox {
    flex-wrap: nowrap;
  }

  .campaignImg {
    height: 350px;
    width: auto;
  }

  .home-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .home-hero__image {
    height: 600px;
    width: 50%;
    min-width: 50%;
  }

  .home-hero.child .home-hero__image {
    height: 480px;
  }

  .home-hero__content {
    padding: 40px 60px 0;
  }

  .home-hero__header > h1 {
    font-size: 32px;
  }

  .home-hero__header > h2 {
    font-size: 20px;
  }

  .home-hero__header > p {
    font-size: 14px;
  }

  .home-hero__header .annotation {
    text-align: left;
  }

  .home-hero__header .annotation > span > br {
    display: none;
  }

  .home-hero__header .annotation > span > span > br {
    display: none;
  }
}


.home-links {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
}

.home-links__contents > h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.home-links__contents > h3 {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 16px;
  color: var(--gray);
}

.home-links__contents > p {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--gray);
}

@media screen and (min-width: 1024px) {
  .home-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-links__contents > h2 {
    font-size: 24px;
  }

  .home-links__contents > h3 {
    font-size: 18px;
  }

  .home-links__contents > p {
    font-size: 14px;
  }
}


.home-trust {
  padding: 16px 0;
  border-bottom: 1px solid var(--light-gray);
}

.home-trust > h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.home-trust > p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--gray);
}

@media screen and (min-width: 1024px) {
  .home-trust > h3 {
    font-size: 20px;
  }

  .home-trust > p {
    font-size: 14px;
  }
}

.home-question-link {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.home-question-link > p {
  font-size: 14px;
  color: var(--gray);
}

.home-voice > h3,
.home-voice > p,
.home-voice > h4 {
  color: var(--gray);
}

.home-voice > h3 {
  font-size: 16px;
  font-weight: 500;
}

.home-voice > p {
  font-size: 14px;
}

.home-voice > h4 {
  font-size: 14px;
  font-weight: 500;
}

.home-blog > .webgene-blog {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}

@media screen and (min-width: 1024px) {
  .home-blog > .webgene-blog {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.home-recommend.single.layout-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.home-recommend__header > h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray);
  margin-bottom: 24px;
}

.home-recommend__header > p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray);
}

.home-recommend__header > p + h3 {
  margin-top: 24px;
}

.home-recommend__detail {
  margin-top: 24px;
}

.home-recommend__detail h4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray);
}

.home-recommend__detail h5 {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray);
  margin-bottom: 12px;
}

.home-recommend__detail p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray);
}

.home-recommend__detail h4 + * {
  border-top: 1px solid var(--light-gray);
  padding-top: 16px;
}

.home-recommend__detail h5 + p {
  margin-top: -20px;
}

.home-recommend__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.home-recommend__list-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-recommend__list-item::before {
  content: "";
  display: inline-block;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.39515%206.39515C6.68817%206.10212%207.0856%205.9375%207.5%205.9375H18.75C19.2678%205.9375%2019.6875%205.51777%2019.6875%205C19.6875%204.48223%2019.2678%204.0625%2018.75%204.0625H7.5C6.58832%204.0625%205.71398%204.42466%205.06932%205.06932C4.42466%205.71398%204.0625%206.58832%204.0625%207.5V22.5C4.0625%2023.4117%204.42466%2024.286%205.06932%2024.9307C5.71398%2025.5753%206.58832%2025.9375%207.5%2025.9375H22.5C23.4117%2025.9375%2024.286%2025.5753%2024.9307%2024.9307C25.5753%2024.286%2025.9375%2023.4117%2025.9375%2022.5V15C25.9375%2014.4822%2025.5178%2014.0625%2025%2014.0625C24.4822%2014.0625%2024.0625%2014.4822%2024.0625%2015V22.5C24.0625%2022.9144%2023.8979%2023.3118%2023.6049%2023.6049C23.3118%2023.8979%2022.9144%2024.0625%2022.5%2024.0625H7.5C7.0856%2024.0625%206.68817%2023.8979%206.39515%2023.6049C6.10212%2023.3118%205.9375%2022.9144%205.9375%2022.5V7.5C5.9375%207.0856%206.10212%206.68817%206.39515%206.39515ZM25.6629%208.16291C26.029%207.79679%2026.029%207.2032%2025.6629%206.83708C25.2968%206.47096%2024.7032%206.47096%2024.3371%206.83708L15%2016.1742L11.9129%2013.0871C11.5468%2012.721%2010.9532%2012.721%2010.5871%2013.0871C10.2209%2013.4532%2010.2209%2014.0468%2010.5871%2014.4129L14.3371%2018.1629C14.7032%2018.529%2015.2968%2018.529%2015.6629%2018.1629L25.6629%208.16291Z%22%20fill%3D%22%231628D0%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
}

.home-order-flow__item h3 {
  background-color: var(--blue);
  color: var(--white);
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 400;
}

.home-order-flow__item p {
  padding: 16px 24px;
  background-color: var(--white);
  color: var(--gray);
  font-size: 14px;
  line-height: 1.5;
}

.home-order-flow__item + .home-order-flow__item::before {
  content: "";
  display: block;
  width: 100%;
  padding: 30px 0;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2278%22%20height%3D%2226%22%20viewBox%3D%220%200%2078%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M39%2026L78%200H0L39%2026Z%22%20fill%3D%22%231628D0%22%2F%3E%0A%3C%2Fsvg%3E%0A%0A');
  background-position: center;
  background-repeat: no-repeat;
}

.home-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.home-price > h3 {
  font-size: 16px;
  font-weight: 400;
  padding: 0 8px;
}

.home-price.pink > h3 {
  border-bottom: 1px solid var(--pink);
}

.home-price.teal > h3 {
  border-bottom: 1px solid var(--teal);
}

.home-price.orange > h3 {
  border-bottom: 1px solid var(--orange);
}

.home-price.green > h3 {
  border-bottom: 1px solid var(--green);
}

.home-price__table {
  width: 100%;
  font-size: 13px;
}

.home-price__row {
  display: flex;
  flex-direction: row;
}

.home-price__header, .home-price__body {
  padding: 12px 16px;
}

.home-price__header + .home-price__header {
  border-left: 1px solid #fff;
}

.home-price__body + .home-price__body {
  border-left: 1px solid var(--light-gray);
}

.home-price.pink .home-price__header {
  background-color: var(--pink);
  color: #fff;
}

.home-price.teal .home-price__header {
  background-color: var(--teal);
  color: #fff;
}

.home-price.orange .home-price__header {
  background-color: var(--orange);
  color: #fff;
}

.home-price.green .home-price__header {
  background-color: var(--green);
  color: #fff;
}

.home-price__title.home-price__body p:first-child {
  font-weight: 500;
}

.home-price__title {
  width: calc(100% / 5 * 2);
  flex: 0 0 auto;
}

.home-price__price {
  width: calc(100% / 5 * 2);
  flex: 1 1 auto;
}

.home-price__title,
.home-price__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.home-price__price.home-price__body {
  justify-content: center;
}

.home-price__table .button {
  font-size: 10px;
  padding: 6px 8px;
}

.home-price__row + .home-price__row {
  border-top: 1px solid var(--light-gray);
}

.home-price__row:nth-child(odd) {
  background-color: var(--extra-light-gray);
}

.home-price__title > p + p {
  font-size: 10px;
}

@media screen and (min-width: 1024px) {
  .home-price__table {
    font-size: 14px;
  }

  .home-price__title,
  .home-price__price {
    gap: 10px;
  }

  .home-price__table .button {
    font-size: 14px;
    padding: 6px 8px;
  }

  .home-price__title > p + p {
    font-size: 12px;
  }
}

.home-reserve {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-reserve > h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 24px;
  text-align: center;
}


.home-reserve__flex-s > h2 {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
}

.home-reserve > p {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.5;
}

@media screen and (min-width: 414px) {
  .home-reserve > p {
    font-size: 13px;
  }
}

@media screen and (min-width: 768px) {
  .home-reserve > p {
    font-size: 14px;
    text-align: center;
  }
}

.home-reserve__flex-s {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.home-reserve__flex-s img {
  width: 32px;
  height: 32px;
}

.home-special > img {
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  max-width: 720px;
}
.home-special > .button {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.home-special　> .button h3  {
  font-size: 24px;
  font-weight: 500;
}
.home-special > .button {
  background-color: #1daaee;
  color: #fff;
  box-shadow: 4px 4px 0 0 rgba(29, 170, 238, 0.3);
}
.home-special .button > p {
}