@charset "utf-8";

main {
  overflow: clip;
}

/* ↓↓↓ fv ↓↓↓ */
.fv {
  overflow: clip;
  padding-top: 152px;
  container-type: inline-size;
}

.fv .ttl-wrap {
  position: relative;
  margin-left: min(10.625cqw, 316px);
}

.fv .ttl-wrap .deco {
  position: absolute;
  width: min(103.90625cqw,1330px);
  top: max(-7.34375cqw,-94px);
  left: max(-35.234375cqw,-451px);
}

.fv .ttl-wrap .title {
  position: relative;
  font-size: min(5cqw, 6.4rem);
  font-family: var(--text-cg);
  font-weight: 700;
  line-height: 1;
  font-style: italic;
  color: #fff;
  z-index: 1;
}

.fv .ttl-wrap .sub {
  position: relative;
  font-size: min(1.5625cqw, 2.0rem);
  font-family: var(--text-sippori);
  margin-top: min(0.3125cqw, 4px);
  color: #fff;
  z-index: 1;
}

.fv .fv-image {
  position: relative;
  width: 100%;
  margin-top: min(2.1875cqw, 28px);
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .fv {
    padding-top: 100px;
  }

  .fv .ttl-wrap {
    margin-left: 29px;
  }

  .fv .ttl-wrap .deco {
    width: 532px;
    top: -25px;
    left: -175px;
  }

  .fv .ttl-wrap .title {
    font-size: 4.4rem;
  }

  .fv .ttl-wrap .sub {
    font-size: 1.8rem;
  }

  .fv .fv-image {
    width: 100%;
    margin-top: 29px;
  }
}
/* ↑↑↑ fv ↑↑↑ */

/* ↓↓↓ intro ↓↓↓ */
.intro {
  width: 100%;
  margin-top: 95px;
}

.intro .inner {
  max-width: 1280px;
  margin: 0 auto;
}

.intro .inner .content {
  max-width: calc(1004px + 32px * 2);
  padding: 0 32px;
  margin: 0 auto;
  container-type: inline-size;
}

.intro .inner .content .title {
  font-size: 3.187250996015936cqw;
  font-family: var(--text-sippori);
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.intro .inner .content .text {
  font-size: max(1rem, 1.49402390438247cqw);
  text-align: justify;
  word-break: break-all;
  color: #fff;
  line-height: 1.86;
  margin-top: 1.99203187250996cqw;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 768px) {
  .intro {
    width: 100%;
    margin-top: 57px;
  }

  .intro .inner {
    max-width: 100%;
    margin: 0 auto;
  }

  .intro .inner .content {
    max-width: 100%;
    padding: 0 28px;
  }

  .intro .inner .content .title {
    font-size: 2.8rem;
    letter-spacing: 0em;
  }

  .intro .inner .content .text {
    font-size: 1.4rem;
    margin-top: 11px;
    letter-spacing: 0.1em;
  }
}
/* ↑↑↑ intro ↑↑↑ */

/* ↓↓↓ business ↓↓↓ */
.business {
  position: relative;
  width: 100%;
  margin-top: 55px;
  z-index: 3;
}

.business .inner {
  max-width: 1280px;
  margin: 0 auto;
}

.business .inner .content {
  max-width: calc(997px + 32px * 2);
  padding: 0 32px;
  margin: 0 auto;
  container-type: inline-size;
}

.business .inner .content .title {
  font-size: 3.20962888665998cqw;
  font-family: var(--text-sippori);
  font-weight: 600;
  color: #fff;
}

.business .inner .content .container {
  display: flex;
  column-gap: 3.20962888665998cqw;
  width: 100%;
  margin-top: 2.006018054162487cqw;
}

.business .inner .content .container .card {
  width: calc((100% - 6.41925777331996cqw) / 3);
}

.business .inner .content .container .card .image {
  width: 100%;
}

.business .inner .content .container .card .text-wrap {
  border: 1px solid #fff;
  border-top: none;
  padding: 3.109327983951856cqw;
  padding-top: 2.507522567703109cqw;
}

.business .inner .content .container .card .text-wrap .head {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 6.720160481444333cqw;
  font-size: 2.407221664994985cqw;
  font-family: var(--text-sippori);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.4;
  color: #fff;
}

.business .inner .content .container .card .text-wrap .text {
  font-size: max(1rem, 1.49402390438247cqw);
  text-align: justify;
  word-break: break-all;
  color: #fff;
  line-height: 1.86;
  letter-spacing: 0.1em;
  margin-top: 1.203610832497492cqw;
}

.business .inner .content .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.805416248746239cqw;
  font-family: var(--text-sippori);
  font-weight: 600;
  color: #fff;
  width: 39.71915747241725cqw;
  height: 8.02407221664995cqw;
  padding: 0 2.407221664994985cqw 0 4.212637913741224cqw;
  margin: 3.20962888665998cqw auto 0;
  background-color: #2E7048;
  letter-spacing: 0.05em;
  transition: color 300ms ease, background-color 300ms ease;
}

@media screen and (min-width: 769px) {
  .business .inner .content .btn:hover {
    color: #000;
    background-color: #fff;
  }
}

.business .inner .content .btn .arrow {
  position: relative;
  width: 4.81444332998997cqw;
  height: 3.20962888665998cqw;
  background-color: #fff;
  border-radius: 24px;
  transition: background-color 300ms ease;
}

@media screen and (min-width: 769px) {
  .business .inner .content .btn:hover .arrow {
    background-color: #2E7048;
  }
}

.business .inner .content .btn .arrow::after {
  content: '';
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 1.805416248746239cqw;
  height: 1.203610832497492cqw;
  mask-image: url(../img/top/arrow.svg);
  mask-repeat: no-repeat;
  mask-size: 1.805416248746239cqw 1.203610832497492cqw;
  background-color: #2E7048;
  transition: background-color 300ms ease;
}

@media screen and (min-width: 769px) {
  .business .inner .content .btn:hover .arrow::after {
    background-color: #fff;
  }
}

@media screen and (max-width: 768px) {
  .business {
    width: 100%;
    margin-top: 57px;
  }

  .business .inner {
    max-width: 100%;
    margin: 0 auto;
  }

  .business .inner .content {
    max-width: 100%;
    padding: 0 27px;
    margin: 0 auto;
    container-type: inline-size;
  }

  .business .inner .content .title {
    font-size: 2.8rem;
    text-align: center;
  }

  .business .inner .content .container {
    flex-direction: column;
    row-gap: 24px;
    width: 100%;
    margin-top: 17px;
  }

  .business .inner .content .container .card {
    width: 100%;
  }

  .business .inner .content .container .card .text-wrap {
    padding: 25px 23px 31px;
  }

  .business .inner .content .container .card .text-wrap .head {
    display: block;
    height: fit-content;
    font-size: 2.4rem;
    text-align: center;
  }

  .business .inner .content .container .card .text-wrap .text {
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: 0.1em;
    margin-top: 12px;
  }

  .business .inner .content .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.8rem;
    width: 320px;
    height: 93px;
    padding: 26px;
    margin: 24px auto 0;
  }

  .business .inner .content .btn .arrow {
    position: relative;
    width: 48px;
    height: 32px;
  }

  .business .inner .content .btn .arrow::after {
    width: 18px;
    height: 12px;
    mask-size: 18px 12px;
  }
}
/* ↑↑↑ business ↑↑↑ */

/* ↓↓↓ strong ↓↓↓ */
.strong {
  width: 100%;
  margin-top: 110px;
  z-index: 2;
}

.strong .inner {
  max-width: 1280px;
  margin: 0 auto;
}

.strong .inner .content {
  position: relative;
  max-width: calc(1004px + 32px * 2);
  padding: 0 32px;
  margin: 0 auto;
  container-type: inline-size;
}

.strong .inner .content .deco {
  position: absolute;
  width: 80.57768924302789cqw;
  top: -30.0796812749004cqw;
  right: -25.29880478087649cqw;
  z-index: -1;
}

.strong .inner .content .title {
  font-size: 3.187250996015936cqw;
  font-family: var(--text-sippori);
  font-weight: 600;
  color: #fff;
}

.strong .inner .content .container {
  display: flex;
  column-gap: 3.98406374501992cqw;
  width: 100%;
  margin-top: 2.689243027888446cqw;
}

.strong .inner .content .container .block {
  width: calc((100% - 3.98406374501992cqw) / 2);
}

.strong .inner .content .container .block .image {
  width: 100%;
}

.strong .inner .content .container .block .head {
  font-size: 2.788844621513944cqw;
  font-family: var(--text-sippori);
  font-weight: 600;
  text-align: center;
  color: #fff;
  margin-top: 2.49003984063745cqw;
  letter-spacing: 1.42;
}

.strong .inner .content .container .block .text {
  font-size: max(1rem, 1.49402390438247cqw);
  text-align: justify;
  word-break: break-all;
  color: #fff;
  line-height: 1.86;
  margin-top: 1.99203187250996cqw;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 768px) {
  .strong {
    width: 100%;
    margin-top: 65px;
  }

  .strong .inner {
    max-width: 100%;
    margin: 0 auto;
  }

  .strong .inner .content {
    max-width: 100%;
    padding: 0 27px;
  }

  .strong .inner .content .deco {
    width: 434px;
    top: -260px;
    right: -133px;
  }

  .strong .inner .content .title {
    font-size: 2.8rem;
    text-align: center;
    letter-spacing: 0;
  }

  .strong .inner .content .container {
    flex-direction: column;
    row-gap: 48px;
    margin-top: 27px;
  }

  .strong .inner .content .container .block {
    width: 100%;
  }

  .strong .inner .content .container .block .image {
    width: 100%;
  }

  .strong .inner .content .container .block .head {
    font-size: 2.4rem;
    margin-top: 17px;
  }

  .strong .inner .content .container .block .text {
    font-size: 1.4rem;
    line-height: 2;
    margin-top: 12px;
  }
}
/* ↑↑↑ strong ↑↑↑ */

/* ↓↓↓ number ↓↓↓ */
.number {
  width: 100%;
  margin-top: 110px;
  padding-bottom: 120px;
}

.number .inner {
  max-width: 1280px;
  margin: 0 auto;
}

.number .inner .content {
  position: relative;
  max-width: calc(1003px + 32px * 2);
  padding: 0 32px;
  margin: 0 auto;
  container-type: inline-size;
}

.number .inner .content .deco {
  position: absolute;
  width: 102.7916251246261cqw;
  top: -15.6530408773679cqw;
  left: -41.77467597208375cqw;
  z-index: -1;
}

.number .inner .content .title {
  font-size: 3.190428713858425cqw;
  font-family: var(--text-sippori);
  font-weight: 600;
  color: #fff;
}

.number .inner .content .attention {
  font-size: 1.495513459621137cqw;
  color: #fff;
  line-height: 1.4;
}

.number .inner .content .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 3.190428713858425cqw;
  width: 100%;
  margin-top: 2.691924227318046cqw;
}

.number .inner .content .container .card {
  width: 31.20638085742772cqw;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 3.2901296111665cqw 3.190428713858425cqw 2.791625124626122cqw;
  background-color: #678667;
}

.number .inner .content .container .card .head{
  font-size: 2.392821535393819cqw;
  font-family: var(--text-sippori);
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.6;
}

.number .inner .content .container .card .image {
  width: 100%;
  margin-top: 0.9970089730807577cqw;
}

.number .inner .content .container .card .num {
  font-size: 4.187437686939182cqw;
  font-family: var(--text-sippori);
  font-weight: 900;
  color: #fff;
  text-align: center;
  margin-top: -0.9970089730807577cqw;
  line-height: 1;
}

.number .inner .content .container .card .num .init {
  font-size: 2.392821535393819cqw;
  font-weight: 600;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .number {
    width: 100%;
    margin-top: 30px;
    padding-bottom: 72px;
  }

  .number .inner {
    max-width: 100%;
    margin: 0 auto;
  }

  .number .inner .content {
    max-width: 100%;
    padding: 0 27px;
  }

  .number .inner .content .deco {
    width: 509px;
    top: -33px;
    left: -118px;
  }

  .number .inner .content .title {
    font-size: 2.8rem;
    text-align: center;
  }

  .number .inner .content .attention {
    font-size: 1.4rem;
    text-align: center;
    line-height: 1;
  }

  .number .inner .content .container {
    display: flex;
    row-gap: 16px;
    margin-top: 27px;
  }

  .number .inner .content .container .card {
    width: 320px;
    height: 180px;
    aspect-ratio: unset;
    padding: 19px 24px 16px;
    background-color: #678667;
  }

  .number .inner .content .container .card .wrap {
    display: flex;
  }

  .number .inner .content .container .card .head {
    font-size: 1.8rem;
  }

  .number .inner .content .container .card .image {
    width: 126px;
  }

  .number .inner .content .container .card .num {
    font-size: 3.6rem;
    margin-top: 33px;
  }

  .number .inner .content .container .card .num .init {
    font-size: 2.0rem;
  }
}
/* ↑↑↑ number ↑↑↑ */

/* ↓↓↓ fv ↓↓↓ */
/* ↑↑↑ fv ↑↑↑ */


@media (min-width: 1281px) {}

@media (max-width: 1280px) {}

@media (max-width: 768px) {}

@media (max-width: 480px) {}

@media (max-width: 375px) {}