@charset "UTF-8";
@media screen and (min-width: 769px) {
  body {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    position: relative;
    overflow-x: hidden;
  }
  body::before, body::after {
    content: "";
    position: absolute;
    display: block;
    background-color: #fff;
    z-index: 2;
  }
  body::before {
    right: 519px;
    top: 0;
    width: 1px;
    height: 119px;
    height: 19px;
  }
  body::after {
    right: 0;
    top: 80px;
    width: 19px;
    height: 1px;
  }
  .section {
    padding: 120px 0;
    border-bottom: 1px solid #000;
  }
  .inner {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 50px;
  }
  .sub-inner {
    position: relative;
    max-width: 1000px;
    margin-inline: auto;
  }
  .card {
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 100px;
    padding: 60px 100px 100px;
    position: relative;
  }
  .card:not(:last-child) {
    margin-bottom: 100px;
  }
  .bold {
    font-weight: 700;
  }
  .bg-gray {
    background-color: #F3F3F3;
  }
  .fg-green {
    color: #32B400;
  }
  .fg-orange {
    color: #FF8920;
  }
  .align-center {
    text-align: center;
  }
  p,
  li {
    font-size: 16px;
    line-height: 2;
  }
  h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: #000;
    width: max-content;
    height: 52px;
    border-radius: 10px;
    display: flex;
    padding: 10px 20px;
    margin: 0 auto 43px;
    position: relative;
  }
  h2::before {
    content: attr(data-text);
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 20px;
    font-family: "Roboto", sans-serif;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000;
  }
  h3 {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 40px;
  }
  h4 {
    font-size: 40px;
    font-weight: 700;
    line-height: 94px;
    text-align: center;
    color: #FFFF80;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    paint-order: stroke fill;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-bottom: 50px;
  }
  .section:has(.foot-bnr) {
    padding: 100px 0;
    border: none;
  }
  .foot-bnr {
    width: 100%;
  }
  .foot-bnr img {
    width: 100%;
  }
}
@media screen and (min-width: 769px) and (hover: hover) {
  .foot-bnr {
    transition: opacity 0.2s;
  }
  .foot-bnr:hover {
    opacity: 0.85;
  }
}
@media screen and (min-width: 769px) {
  .footer {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .footer p {
    font-size: 14px;
    line-height: 1;
  }
  .btn-pagetop {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #000;
    background-color: #fff;
    background-image: url(../images/pagetop_arrow.svg);
    background-image: url(../images/tab_link_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20.8px auto;
    transform: rotate(-90deg);
    position: fixed;
    right: 5%;
    bottom: 85px;
    z-index: 10;
    cursor: pointer;
    display: none;
  }
}
@media screen and (min-width: 769px) and (hover: hover) {
  .btn-pagetop {
    transition: box-shadow 0.2s;
  }
  .btn-pagetop:hover {
    box-shadow: 0 0 0 2px #000;
  }
}
@media screen and (min-width: 769px) and (min-width: 1201px) {
  .tb,
  .sp {
    display: none;
  }
  .col.--flex1 {
    flex: 1;
  }
  .col.--justify-content-center {
    justify-content: center;
  }
  .col.--justify-content-end {
    justify-content: flex-end;
  }
  .col.--align-items-center {
    align-items: center;
  }
  .col.--align-items-end {
    align-items: flex-end;
  }
  .col.--w340 {
    width: 340px;
  }
  .col.--w500 {
    width: 500px;
  }
  .col.--pr60 {
    padding-right: 60px;
  }
}
@media screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1300px) {
  .card {
    padding-inline: max(50px, (100% - 1000px) / 2);
  }
}
@media screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1200px) {
  .sp {
    display: none;
  }
  .--responsive,
  .cols {
    display: flex;
    flex-direction: column;
    gap: 80px !important;
  }
  .--responsive > *,
  .cols > * {
    width: 100% !important;
  }
  .--responsive > * > img,
  .cols > * > img {
    max-width: 40%;
    display: block;
    margin-inline: auto !important;
  }
}
@media screen and (min-width: 769px) {
  .tab-panel {
    display: none;
  }
  .tab-panel.is-active {
    display: block;
  }
  .tab-panel .section:has(.tab-link) {
    background-color: #fff;
    padding: 100px 0;
    border: none;
  }
  .tab-panel .tab-link {
    width: max-content;
    height: 80px;
    margin: 0 auto;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    border-radius: 40px;
    box-shadow: 0 0 0 1px #000;
    display: flex;
    align-items: center;
    padding: 0 80px 0 40px;
    background-image: url(../images/tab_link_arrow.svg);
    background-repeat: no-repeat;
    background-position: right 40px center;
    background-size: 26px auto;
    cursor: pointer;
  }
}
@media screen and (min-width: 769px) and (hover: hover) {
  .tab-panel .tab-link {
    transition: box-shadow 0.2s;
  }
  .tab-panel .tab-link:hover {
    box-shadow: 0 0 0 3px #000;
  }
}
@media screen and (min-width: 769px) {
  .tab-panel[data-panel=worker] {
    background-color: #FFFFAA;
  }
  .tab-panel[data-panel=worker] .tab-link {
    background-color: #CBF3FF;
  }
  .tab-panel[data-panel=worker] h2::before {
    color: #CBF3FF;
    background: linear-gradient(to bottom, #FFFFAA 50%, #fff 50%);
  }
  .tab-panel[data-panel=worker] .bg-gray .card {
    background-color: #FFFFAA;
  }
  .tab-panel[data-panel=worker] .bg-gray h2::before {
    background: linear-gradient(to bottom, #F3F3F3 50%, #FFFFAA 50%);
  }
  .tab-panel[data-panel=worker] .voice-list > li {
    background-color: #FFFFAA;
  }
  .tab-panel[data-panel=worker] .upper-illust1 {
    width: 152px;
    position: absolute;
    left: 175px;
    top: -253px;
  }
  .tab-panel[data-panel=worker] .upper-illust2 {
    width: 180px;
    position: absolute;
    right: 151px;
    top: -273px;
  }
  .tab-panel[data-panel=worker] .feature-illust {
    width: 363px;
    margin-right: 15px;
  }
  .tab-panel[data-panel=worker] .focus-illust1 {
    width: 154px;
    position: absolute;
    left: 106px;
    top: -50px;
  }
  .tab-panel[data-panel=worker] .focus-illust2 {
    width: 216px;
    display: block;
    margin: 12px -50px -85px auto;
  }
  .tab-panel[data-panel=worker] .focus-illust3 {
    width: 380px;
    display: block;
    margin: 32px auto 0;
  }
  .tab-panel[data-panel=worker] .faq-illust1 {
    width: 141px;
    position: absolute;
    left: 125px;
    top: -177px;
  }
  .tab-panel[data-panel=worker] .faq-illust2 {
    width: 149px;
    position: absolute;
    right: 117px;
    top: -129px;
  }
  .tab-panel[data-panel=farmer] {
    background-color: #CBF3FF;
  }
  .tab-panel[data-panel=farmer] .tab-link {
    background-color: #FFFFAA;
  }
  .tab-panel[data-panel=farmer] h2::before {
    color: #FFFF80;
    background: linear-gradient(to bottom, #CBF3FF 50%, #fff 50%);
  }
  .tab-panel[data-panel=farmer] .bg-gray .card {
    background-color: #CBF3FF;
  }
  .tab-panel[data-panel=farmer] .bg-gray h2::before {
    background: linear-gradient(to bottom, #F3F3F3 50%, #CBF3FF 50%);
  }
  .tab-panel[data-panel=farmer] .voice-list > li {
    background-color: #CBF3FF;
  }
  .tab-panel[data-panel=farmer] .upper-illust1 {
    width: 192px;
    position: absolute;
    left: 103px;
    top: -279px;
  }
  .tab-panel[data-panel=farmer] .upper-illust2 {
    width: 188px;
    position: absolute;
    right: 155px;
    top: -237px;
  }
  .tab-panel[data-panel=farmer] .feature-illust {
    width: 400px;
    margin-right: 15px;
  }
  .tab-panel[data-panel=farmer] .focus-illust1 {
    width: 138px;
    position: absolute;
    left: 106px;
    top: -72px;
  }
  .tab-panel[data-panel=farmer] .focus-illust2 {
    width: 299px;
    display: block;
    margin: 12px -50px -85px auto;
  }
  .tab-panel[data-panel=farmer] .focus-illust3 {
    width: 360px;
    display: block;
    margin: 32px auto 0;
  }
  .tab-panel[data-panel=farmer] .faq-illust1 {
    width: 127px;
    position: absolute;
    left: 125px;
    top: -172px;
  }
  .tab-panel[data-panel=farmer] .faq-illust2 {
    width: 181px;
    position: absolute;
    right: 117px;
    top: -137px;
  }
  .cols {
    display: flex;
    gap: 80px;
  }
  p + .cols {
    margin-top: 50px;
  }
  .col {
    display: flex;
    flex-direction: column;
  }
  .balloon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 360px;
    min-height: 100px;
    border-radius: 50px;
    padding: 20px 30px;
    background-color: #fff;
    border: 1px dashed #000000;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
  }
  .balloon::after {
    content: "";
    position: absolute;
    bottom: -21.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 22px;
    display: block;
    background-image: url(../images/balloon_arrow.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
  }
  .upper-copy {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 100px;
  }
  .balloons {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: -40px auto 50px;
  }
  .point-list {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-bottom: 80px;
  }
  .point-list > li {
    width: calc((100% - 160px) / 3);
  }
  .point-list .illust {
    max-width: 280px;
    width: 100%;
    margin-bottom: 15px;
  }
  .point-list .ttl {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #32B400;
    margin-bottom: 10px;
  }
  .feature-list > li {
    padding: 30px 0;
    border-bottom: 1px dotted #000;
  }
  .feature-list .ttl {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 15px;
    color: #32B400;
  }
  .focus-smartphone {
    width: 281px;
  }
  .balloon.focus-balloon {
    width: max-content;
    min-height: 146px;
    border-radius: 73px;
    padding: 30px 50px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin: 0 auto 18px;
  }
  .balloon.focus-balloon .large {
    font-size: 30px;
  }
  .balloon.focus-balloon .xlarge {
    font-size: 40px;
  }
  .focus-copy {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 20px;
  }
  .focus-copy .large {
    font-size: 56px;
  }
  .focus-lower-copy {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.3;
    color: #32B400;
    margin-bottom: 20px;
  }
  .focus-lower-copy.--adjust {
    font-size: 36px;
  }
  .flow {
    width: 460px;
    border-radius: 30px;
    border: 1px solid #000;
    padding: 50px 58px;
    margin-top: 20px;
    background-color: #fff;
  }
  .flow .heading {
    color: #fff;
    background-color: #32B400;
    width: max-content;
    height: 40px;
    margin: -70px auto 30px;
    padding: 0 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }
  .flow dl {
    padding-left: 32px;
    position: relative;
  }
  .flow dl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 3px;
    height: calc(100% - 10px);
    background-color: #000;
  }
  .flow dt {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
    color: #32B400;
    position: relative;
  }
  .flow dt::before {
    content: "";
    position: absolute;
    left: -40.5px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #32B400;
    background-color: #fff;
  }
  .flow dd + dt {
    margin-top: 30px;
  }
  .flow dd {
    font-size: 14px;
    line-height: 2;
  }
  .voice-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: #000;
    border-radius: 10px;
    width: max-content;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    margin: 100px auto 80px;
  }
  .voice-list {
    display: flex;
    justify-content: center;
    gap: 50px;
  }
  .voice-list > li {
    width: calc((100% - 100px) / 3);
    padding: 30px;
    border: 1px solid #000;
    border-radius: 10px;
  }
  .voice-list .icon {
    width: 100px;
    margin: -80px auto 15px;
    display: block;
  }
  .voice-list p {
    font-size: 14px;
  }
  .voice-list .ttl {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    margin-bottom: 15px;
  }
  .voice-list .tag-list {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: max-content;
    margin: 0 auto 15px;
  }
  .voice-list .tag-list > li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 22px;
    padding: 0 10px;
    border-radius: 20px;
    border: 1px solid #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background-color: #fff;
  }
  .faq {
    padding: 220px 0 100px;
  }
  .faq h2 {
    margin-bottom: 50px;
  }
  .faq h2::before {
    top: -70px;
    background: none !important;
  }
  .faq dl {
    box-shadow: 0 0 0 1px #000;
    border-radius: 20px;
    background-color: #fff;
    padding: 0 30px;
    cursor: pointer;
  }
  .faq dl.is-open dt::after {
    background-image: url(../images/faq_minus.svg);
    transform: rotate(-180deg);
  }
}
@media screen and (min-width: 769px) and (hover: hover) {
  .faq dl {
    transition: box-shadow 0.2s;
  }
  .faq dl:hover {
    box-shadow: 0 0 0 3px #000;
  }
}
@media screen and (min-width: 769px) {
  .faq dl + dl {
    margin-top: 20px;
  }
  .faq dt,
  .faq dd {
    position: relative;
  }
  .faq dt::before,
  .faq dd::before {
    position: absolute;
    left: 0;
    font-family: "Roboto", sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    paint-order: stroke fill;
    display: block;
    height: max-content;
  }
  .faq dt {
    padding: 35px 80px 35px 40px;
  }
  .faq dt::before {
    content: "Q";
    color: #CBF3FF;
    top: 0;
    bottom: 0;
    margin: auto 0;
  }
  .faq dt::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 30px;
    height: 30px;
    display: block;
    background-image: url(../images/faq_plus.svg);
    background-repeat: no-repeat;
    background-size: 30px auto;
    background-position: center;
    transition: transform 0.4s;
  }
  .faq dd {
    display: none;
    padding: 0 80px 35px 40px;
  }
  .faq dd::before {
    content: "A";
    color: #FFFF80;
    top: 6px;
  }
  .faq dd p + p {
    margin-top: 1em;
  }
  .faq .link {
    box-shadow: 0 0 0 1px #000;
    border-radius: 20px;
    background-color: #FFFFAA;
    width: max-content;
    height: 34px;
    padding: 0 40px 0 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    background-image: url(../images/icon_new_window.svg);
    background-repeat: no-repeat;
    background-size: 12px auto;
    background-position: right 20px center;
  }
}
@media screen and (min-width: 769px) and (hover: hover) {
  .faq .link {
    transition: box-shadow 0.2s;
  }
  .faq .link:hover {
    box-shadow: 0 0 0 2px #000;
  }
}
@media screen and (min-width: 769px) {
  .faq .ul {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
  .faq .ul li {
    position: relative;
    padding-left: 1.2em;
    line-height: 1.3;
  }
  .faq .ul li::before {
    content: "・";
    position: absolute;
    left: 0;
  }
  .faq .ol {
    list-style-type: decimal;
    list-style-position: outside;
    padding-left: 1.5em;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
  .faq .ol li {
    line-height: 1.3;
  }
  .faq .note {
    text-indent: -1em;
    padding-left: 1em;
    margin-top: 1em;
  }
}
@media screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1300px) {
  .tab-panel[data-panel=worker] .upper-illust1 {
    --w-diff: calc(175 - (-50));
    --v-diff: calc(1300 - 760);
    left: calc(-50px + var(--w-diff) * (100vw - 760px) / var(--v-diff));
  }
  .tab-panel[data-panel=worker] .upper-illust2 {
    --w-diff: calc(151 - (-50));
    --v-diff: calc(1300 - 760);
    right: calc(-50px + var(--w-diff) * (100vw - 760px) / var(--v-diff));
  }
  .tab-panel[data-panel=worker] .focus-illust1 {
    --w-diff: calc(154 - (-30));
    --v-diff: calc(1300 - 760);
    left: calc(-30px + var(--w-diff) * (100vw - 760px) / var(--v-diff));
  }
  .tab-panel[data-panel=worker] .focus-illust2 {
    margin-right: -10px;
  }
  .tab-panel[data-panel=farmer] .upper-illust1 {
    --w-diff: calc(103 - (-130));
    --v-diff: calc(1300 - 760);
    left: calc(-130px + var(--w-diff) * (100vw - 760px) / var(--v-diff));
  }
  .tab-panel[data-panel=farmer] .upper-illust2 {
    --w-diff: calc(155 - (-100));
    --v-diff: calc(1300 - 760);
    right: calc(-100px + var(--w-diff) * (100vw - 760px) / var(--v-diff));
  }
  .tab-panel[data-panel=farmer] .focus-illust1 {
    --w-diff: calc(100 - (-30));
    --v-diff: calc(1300 - 760);
    left: calc(-30px + var(--w-diff) * (100vw - 760px) / var(--v-diff));
  }
  .tab-panel[data-panel=farmer] .focus-illust2 {
    margin-right: -10px;
  }
}
@media screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1040px) {
  .tab-panel[data-panel=worker] .faq .faq-illust1 {
    --w-diff: calc(125 - (-50));
    --v-diff: calc(1080 - 760);
    left: calc(-30px + var(--w-diff) * (100vw - 760px) / var(--v-diff));
  }
  .tab-panel[data-panel=worker] .faq .faq-illust2 {
    --w-diff: calc(117 - (-50));
    --v-diff: calc(1080 - 760);
    right: calc(-30px + var(--w-diff) * (100vw - 760px) / var(--v-diff));
  }
  .tab-panel[data-panel=farmer] .faq .faq-illust1 {
    --w-diff: calc(125 - (-50));
    --v-diff: calc(1080 - 760);
    left: calc(-30px + var(--w-diff) * (100vw - 760px) / var(--v-diff));
  }
  .tab-panel[data-panel=farmer] .faq .faq-illust2 {
    --w-diff: calc(117 - (-50));
    --v-diff: calc(1080 - 760);
    right: calc(-30px + var(--w-diff) * (100vw - 760px) / var(--v-diff));
  }
}
@media screen and (min-width: 1081px) {
  .header {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
    padding-right: 20px;
    background-color: #fff;
    border-bottom-left-radius: 30px;
    box-shadow: 0 0 0 1px #000;
    width: 520px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    /*
      &.-is-scrolltop-0::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: calc(100% + 20px);
        height: calc(100% + 20px);
        display: block;
        background-image: url(../images/mv_corner.svg), url(../images/mv_corner.svg);
        background-repeat: no-repeat;
        background-size: 31px auto;
        background-position: right 520px top 18px, right 18px top 80.5px;
        pointer-events: none;
        z-index: 4;
      }
    */
  }
  .header.is-fixed {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .header p {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }
  .header .badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
  }
  .header .link-googleplay,
  .header .link-appstore {
    height: 40px;
  }
  .header .link-googleplay img,
  .header .link-appstore img {
    height: 100%;
  }
}
@media screen and (min-width: 1081px) and (hover: hover) {
  .header a {
    transition: opacity 0.2s;
  }
  .header a:hover {
    opacity: 0.85;
  }
}
@media screen and (min-width: 1081px) {
  .mv {
    padding: 20px;
    position: relative;
    display: flex;
    justify-content: flex-end;
  }
  .mv.-is-scrolltop-0::before {
    content: "";
    position: fixed;
    top: -81px;
    right: 0;
    display: block;
    background-color: #fff;
    width: 100vw;
    height: 100px;
    z-index: 3;
  }
  .mv h1 {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 165px;
  }
  .mv h1 a {
    width: 100%;
  }
  .mv h1 img {
    width: 100%;
  }
  .mv .ttl {
    position: absolute;
    left: 9.6885813149vw;
    top: 150px;
    width: 35.5709342561vw;
    z-index: 1;
  }
  .mv .copy {
    position: absolute;
    left: 9.6885813149vw;
    top: calc(150px + 21.4532871972vw);
    width: 33.7716262976vw;
    z-index: 1;
  }
  .mv .copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 14.4290657439vw;
    height: 80%;
    display: block;
    background-color: #32B400;
    z-index: -1;
  }
  .mv .copy img {
    width: 100%;
  }
  .mv .mv-smartphone {
    width: 16.678200692vw;
    position: absolute;
    right: 9.3425605536vw;
    top: 8.3044982699vw;
    z-index: 1;
  }
  .mv .scroll {
    position: absolute;
    left: 11px;
    bottom: 162px;
  }
  .mv .scroll-text {
    font-family: "Roboto", sans-serif;
    color: #32B400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
    transform: rotate(90deg);
  }
  .mv .scroll-border {
    position: absolute;
    top: 35px;
    width: 100%;
    height: 140px;
    overflow: hidden;
  }
  .mv .scroll-border::before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    border-left: 1px dotted #000;
    margin: 0 auto;
  }
  .mv .scroll-border::after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 56px;
    top: 0;
    left: 0;
    right: 0;
    border-left: 1px solid #32B400;
    animation: scrollbar 3s ease-in-out infinite;
    margin: auto;
    z-index: 1;
  }
  @keyframes scrollbar {
    0% {
      height: 0;
      top: 0;
    }
    50% {
      height: 100%;
    }
    100% {
      top: 100%;
    }
  }
  .mv .slick-track {
    display: flex;
  }
  .mv .slick-slide {
    height: auto !important;
  }
  .mv .slickSlider {
    width: 74.7404844291vw;
    margin: 0;
    padding: 0;
    border-radius: 30px;
    box-shadow: 0 0 0 1px #000;
    overflow: hidden;
  }
  .mv .slickSlider li {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .mv .slickSlider li .ph {
    display: block;
    aspect-ratio: 1080/720;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .tab-list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 60px;
    z-index: 1;
  }
  .tab-list button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    width: 470px;
    height: 80px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border: 1px solid #000;
  }
  .tab-list button.is-active {
    pointer-events: none;
    border-bottom-color: transparent;
  }
  .tab-list button[data-target=worker] {
    background-color: #FFFFAA;
  }
  .tab-list button[data-target=farmer] {
    background-color: #CBF3FF;
  }
}
@media screen and (min-width: 1081px) and (hover: hover) {
  .tab-list button:hover {
    text-decoration: underline;
    text-underline-offset: 10px;
  }
}
@media screen and (max-width: 768px) {
  body {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    position: relative;
    overflow-x: hidden;
  }
  .pc,
  .tb {
    display: none;
  }
  .section {
    padding: 12.8205128205vw 0;
    border-bottom: 1px solid #000;
  }
  .inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 5.1282051282vw;
  }
  .sub-inner {
    position: relative;
    max-width: calc(100% - 5.1282051282vw);
    margin-inline: auto;
  }
  .card {
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 12.8205128205vw;
    padding: 8.9743589744vw 8.4615384615vw;
    position: relative;
  }
  .card:not(:last-child) {
    margin-bottom: 7.6923076923vw;
  }
  .bold {
    font-weight: 700;
  }
  .bg-gray {
    background-color: #F3F3F3;
  }
  .fg-green {
    color: #32B400;
  }
  .fg-orange {
    color: #FF8920;
  }
  .align-center {
    text-align: center;
  }
  p,
  li {
    font-size: 3.5897435897vw;
    line-height: 2;
  }
  h2 {
    font-size: 4.1025641026vw;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: #000;
    width: max-content;
    height: 9.2307692308vw;
    border-radius: 2.5641025641vw;
    display: flex;
    padding: 2.5641025641vw 5.1282051282vw;
    margin: 0 auto 6.4102564103vw;
    position: relative;
  }
  h2::before {
    content: attr(data-text);
    position: absolute;
    top: -8.9743589744vw;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 5.1282051282vw;
    font-family: "Roboto", sans-serif;
    font-size: 12.8205128205vw;
    font-weight: 900;
    line-height: 1;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000;
  }
  h3 {
    font-size: 5.1282051282vw;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 5.1282051282vw;
    width: calc(100% + 2em);
    transform: translateX(-1em);
  }
  h4 {
    font-size: 5.1282051282vw;
    font-weight: 700;
    line-height: 12.8205128205vw;
    text-align: center;
    color: #FFFF80;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    paint-order: stroke fill;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-bottom: 0vw;
  }
  .section:has(.foot-bnr) {
    padding: 12.8205128205vw 0;
    border: none;
  }
  .section:has(.foot-bnr) .sub-inner {
    max-width: none;
  }
  .foot-bnr {
    width: 100%;
  }
  .foot-bnr img {
    width: 100%;
  }
  .footer {
    height: 11.2820512821vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .footer p {
    font-size: 3.0769230769vw;
    line-height: 1;
  }
  .btn-pagetop {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #000;
    background-color: #fff;
    background-image: url(../images/pagetop_arrow.svg);
    background-image: url(../images/tab_link_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px auto;
    transform: rotate(-90deg);
    position: fixed;
    right: 5%;
    bottom: 17.9487179487vw;
    z-index: 10;
    cursor: pointer;
    display: none;
  }
  .tab-panel {
    display: none;
  }
  .tab-panel.is-active {
    display: block;
  }
  .tab-panel .section:has(.tab-link) {
    background-color: #fff;
    padding: 12.8205128205vw 0;
    border: none;
  }
  .tab-panel .tab-link {
    width: max-content;
    height: 16.1538461538vw;
    margin: 0 auto;
    font-size: 5.1282051282vw;
    font-weight: 700;
    line-height: 1;
    border-radius: 10.2564102564vw;
    box-shadow: 0 0 0 1px #000;
    display: flex;
    align-items: center;
    padding: 0 20.5128205128vw 0 10.2564102564vw;
    background-image: url(../images/tab_link_arrow.svg);
    background-repeat: no-repeat;
    background-position: right 10.2564102564vw center;
    background-size: auto 4.1025641026vw;
    cursor: pointer;
  }
  .tab-panel[data-panel=worker] {
    background-color: #FFFFAA;
  }
  .tab-panel[data-panel=worker] .tab-link {
    background-color: #CBF3FF;
  }
  .tab-panel[data-panel=worker] h2::before {
    color: #CBF3FF;
    background: linear-gradient(to bottom, #FFFFAA 50%, #fff 50%);
  }
  .tab-panel[data-panel=worker] .bg-gray .card {
    background-color: #FFFFAA;
  }
  .tab-panel[data-panel=worker] .bg-gray h2::before {
    background: linear-gradient(to bottom, #F3F3F3 50%, #FFFFAA 50%);
  }
  .tab-panel[data-panel=worker] .voice-list > li {
    background-color: #FFFFAA;
  }
  .tab-panel[data-panel=worker] .upper-illust1 {
    width: 17.9487179487vw;
    position: absolute;
    left: 5.1282051282vw;
    top: -40.2564102564vw;
  }
  .tab-panel[data-panel=worker] .upper-illust2 {
    width: 21.0256410256vw;
    position: absolute;
    right: 2.5641025641vw;
    top: -42.8205128205vw;
  }
  .tab-panel[data-panel=worker] .feature-illust {
    width: 51.2820512821vw;
    margin: 5.1282051282vw auto -1.2820512821vw;
    display: block;
  }
  .tab-panel[data-panel=worker] .focus-illust1 {
    width: 17.4358974359vw;
    position: absolute;
    left: 3.3333333333vw;
    top: -7.6923076923vw;
  }
  .tab-panel[data-panel=worker] .focus-illust2 {
    width: 27.6923076923vw;
    display: block;
    margin: -1.2820512821vw -3.5897435897vw -5.8974358974vw auto;
  }
  .tab-panel[data-panel=worker] .focus-illust3 {
    width: 71.7948717949vw;
    display: block;
    margin: 2.5641025641vw auto 0;
  }
  .tab-panel[data-panel=worker] .faq-illust1 {
    width: 18.2051282051vw;
    position: absolute;
    left: 6.1538461538vw;
    top: -18.4615384615vw;
  }
  .tab-panel[data-panel=worker] .faq-illust2 {
    width: 18.9743589744vw;
    position: absolute;
    right: 2.5641025641vw;
    top: -12.8205128205vw;
  }
  .tab-panel[data-panel=farmer] {
    background-color: #CBF3FF;
  }
  .tab-panel[data-panel=farmer] .tab-link {
    background-color: #FFFFAA;
  }
  .tab-panel[data-panel=farmer] h2::before {
    color: #FFFF80;
    background: linear-gradient(to bottom, #CBF3FF 50%, #fff 50%);
  }
  .tab-panel[data-panel=farmer] .bg-gray .card {
    background-color: #CBF3FF;
  }
  .tab-panel[data-panel=farmer] .bg-gray h2::before {
    background: linear-gradient(to bottom, #F3F3F3 50%, #CBF3FF 50%);
  }
  .tab-panel[data-panel=farmer] .voice-list > li {
    background-color: #CBF3FF;
  }
  .tab-panel[data-panel=farmer] .upper-illust1 {
    width: 22.6461538462vw;
    position: absolute;
    left: 0vw;
    top: -40.2564102564vw;
  }
  .tab-panel[data-panel=farmer] .upper-illust2 {
    width: 22.1743589744vw;
    position: absolute;
    right: 0vw;
    top: -35.1282051282vw;
  }
  .tab-panel[data-panel=farmer] .feature-illust {
    width: 51.2820512821vw;
    margin: 5.1282051282vw auto -1.2820512821vw;
    display: block;
  }
  .tab-panel[data-panel=farmer] .focus-illust1 {
    width: 16.2769230769vw;
    position: absolute;
    left: 3.3333333333vw;
    top: -10.2564102564vw;
  }
  .tab-panel[data-panel=farmer] .focus-illust2 {
    width: 35.2666666667vw;
    display: block;
    margin: -1.2820512821vw -3.5897435897vw -5.8974358974vw auto;
  }
  .tab-panel[data-panel=farmer] .focus-illust3 {
    width: 71.7948717949vw;
    display: block;
    margin: 5.1282051282vw auto 0;
  }
  .tab-panel[data-panel=farmer] .faq-illust1 {
    width: 14.9794871795vw;
    position: absolute;
    left: 6.1538461538vw;
    top: -18.4615384615vw;
  }
  .tab-panel[data-panel=farmer] .faq-illust2 {
    width: 21.3487179487vw;
    position: absolute;
    right: 2.5641025641vw;
    top: -12.8205128205vw;
  }
  p + .cols {
    margin-top: 7.6923076923vw;
  }
  .balloon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 43.5897435897vw;
    min-height: 15.3846153846vw;
    border-radius: 8.7179487179vw;
    padding: 2.5641025641vw 2.5641025641vw;
    background-color: #fff;
    border: 1px dashed #000000;
    font-size: 3.3333333333vw;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
  }
  .balloon::after {
    content: "";
    position: absolute;
    bottom: calc(-2.8205128205vw + 0.5px);
    left: 50%;
    transform: translateX(-50%);
    width: 3.0769230769vw;
    height: 2.8205128205vw;
    display: block;
    background-image: url(../images/sp_balloon_arrow.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
  }
  .upper-copy {
    font-size: 5.1282051282vw;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 13.5897435897vw;
  }
  .balloons {
    display: flex;
    justify-content: center;
    gap: 2.5641025641vw;
    margin: 0 auto 7.6923076923vw;
  }
  .point-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7.6923076923vw;
    margin-bottom: 12.8205128205vw;
  }
  .point-list > li {
    width: 100%;
  }
  .point-list .illust {
    width: 100%;
    margin-bottom: 2.5641025641vw;
  }
  .point-list .ttl {
    font-size: 4.1025641026vw;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #32B400;
    margin-bottom: 2.5641025641vw;
  }
  .feature-list > li {
    padding: 5.1282051282vw 0;
    border-bottom: 1px dotted #000;
  }
  .feature-list .ttl {
    font-size: 4.1025641026vw;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2.5641025641vw;
    color: #32B400;
  }
  .focus-smartphone {
    width: 46.1538461538vw;
    margin: 0 auto 7.6923076923vw;
    display: block;
  }
  .balloon.focus-balloon {
    width: calc(100% + 7.6923076923vw);
    height: 22.0512820513vw;
    border-radius: 73px;
    padding: 2.5641025641vw;
    font-size: 4.1025641026vw;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin: 0 auto 18px;
    transform: translateX(-3.8461538462vw);
  }
  .balloon.focus-balloon::after {
    bottom: calc(-5.641025641vw + 1px);
    width: 6.4102564103vw;
    height: 5.641025641vw;
    background-image: url(../images/sp_focus_balloon_arrow.svg);
  }
  .balloon.focus-balloon .large {
    font-size: 4.8717948718vw;
  }
  .balloon.focus-balloon .xlarge {
    font-size: 6.6666666667vw;
  }
  .focus-copy {
    font-size: 5.1282051282vw;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 2.5641025641vw;
  }
  .focus-copy .large {
    font-size: 7.6923076923vw;
  }
  .focus-lower-copy {
    font-size: 6.1538461538vw;
    font-weight: 700;
    line-height: 1.3;
    color: #32B400;
    margin-bottom: 2.5641025641vw;
  }
  .flow {
    width: calc(100% + 5.1282051282vw);
    border-radius: 7.6923076923vw;
    border: 1px solid #000;
    padding: 12.8205128205vw 9.4871794872vw 7.6923076923vw;
    margin-top: 12.8205128205vw;
    background-color: #fff;
    transform: translateX(-2.5641025641vw);
  }
  .flow .heading {
    color: #fff;
    background-color: #32B400;
    width: max-content;
    height: 9.2307692308vw;
    margin: -17.6923076923vw auto 7.6923076923vw;
    padding: 0 5.1282051282vw;
    border-radius: 7.6923076923vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.1025641026vw;
    font-weight: 700;
    line-height: 1;
  }
  .flow dl {
    padding-left: 8.2051282051vw;
    position: relative;
  }
  .flow dl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2.5641025641vw;
    width: 0.7692307692vw;
    height: calc(100% - 2.5641025641vw);
    background-color: #000;
  }
  .flow dt {
    font-size: 3.5897435897vw;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.2820512821vw;
    color: #32B400;
    position: relative;
  }
  .flow dt::before {
    content: "";
    position: absolute;
    left: -10.3846153846vw;
    top: 0vw;
    width: 5.1282051282vw;
    height: 5.1282051282vw;
    border-radius: 50%;
    border: 0.7692307692vw solid #32B400;
    background-color: #fff;
  }
  .flow dd + dt {
    margin-top: 3.8461538462vw;
  }
  .flow dd {
    font-size: 3.0769230769vw;
    line-height: 2;
  }
  .voice-heading {
    font-size: 4.1025641026vw;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: #000;
    border-radius: 2.5641025641vw;
    width: 51.2820512821vw;
    height: 9.2307692308vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12.8205128205vw auto 17.9487179487vw;
  }
  .voice-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 17.9487179487vw;
  }
  .voice-list > li {
    width: 100%;
    padding: 5.1282051282vw;
    border: 1px solid #000;
    border-radius: 2.5641025641vw;
  }
  .voice-list .icon {
    width: 25.641025641vw;
    margin: -17.9487179487vw auto 2.5641025641vw;
    display: block;
  }
  .voice-list p {
    font-size: 3.0769230769vw;
  }
  .voice-list .ttl {
    font-size: 3.0769230769vw;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    margin-bottom: 3.8461538462vw;
  }
  .voice-list .tag-list {
    display: flex;
    justify-content: center;
    gap: 2.5641025641vw;
    width: max-content;
    margin: 0 auto 3.8461538462vw;
  }
  .voice-list .tag-list > li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 5.1282051282vw;
    padding: 0 2.5641025641vw;
    border-radius: 5.1282051282vw;
    border: 1px solid #000;
    font-size: 2.5641025641vw;
    font-weight: 700;
    line-height: 1;
    background-color: #fff;
  }
  .faq {
    padding: 23.0769230769vw 0 12.8205128205vw;
  }
  .faq .sub-inner {
    max-width: none;
  }
  .faq h2 {
    margin-bottom: 7.6923076923vw;
  }
  .faq h2::before {
    background: none !important;
  }
  .faq dl {
    box-shadow: 0 0 0 1px #000;
    border-radius: 2.5641025641vw;
    background-color: #fff;
    padding: 0 5.1282051282vw;
    cursor: pointer;
  }
  .faq dl.is-open dt::after {
    background-image: url(../images/faq_minus.svg);
    transform: rotate(-180deg);
  }
  .faq dl + dl {
    margin-top: 5.1282051282vw;
  }
  .faq dt,
  .faq dd {
    position: relative;
    font-size: 3.5897435897vw;
  }
  .faq dt::before,
  .faq dd::before {
    position: absolute;
    left: -0.5128205128vw;
    font-family: "Roboto", sans-serif;
    font-size: 5.1282051282vw;
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    paint-order: stroke fill;
    display: block;
    height: max-content;
  }
  .faq dt {
    line-height: 1.5;
    padding: 4.8717948718vw 8.9743589744vw 4.8717948718vw 7.6923076923vw;
  }
  .faq dt::before {
    content: "Q";
    color: #CBF3FF;
    top: 0;
    bottom: 0;
    margin: auto 0;
  }
  .faq dt::after {
    content: "";
    position: absolute;
    right: 0vw;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 5.1282051282vw;
    height: 5.1282051282vw;
    display: block;
    background-image: url(../images/faq_plus.svg);
    background-repeat: no-repeat;
    background-size: 5.1282051282vw auto;
    background-position: center;
    transition: transform 0.4s;
  }
  .faq dd {
    display: none;
    padding: 0 1.2820512821vw 4.8717948718vw 7.6923076923vw;
  }
  .faq dd::before {
    content: "A";
    color: #FFFF80;
    top: 0.7692307692vw;
  }
  .faq dd p {
    line-height: 1.8;
  }
  .faq dd p + p {
    margin-top: 1em;
  }
  .faq .link {
    box-shadow: 0 0 0 1px #000;
    border-radius: 5.1282051282vw;
    background-color: #FFFFAA;
    width: max-content;
    height: 8.2051282051vw;
    padding: 0 10.2564102564vw 0 5.1282051282vw;
    margin-top: 2.5641025641vw;
    display: flex;
    align-items: center;
    font-size: 3.0769230769vw;
    font-weight: 700;
    line-height: 1;
    background-image: url(../images/icon_new_window.svg);
    background-repeat: no-repeat;
    background-size: 2.5641025641vw auto;
    background-position: right 5.1282051282vw center;
  }
  .faq .ul {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
  .faq .ul li {
    position: relative;
    padding-left: 1.2em;
    line-height: 1.3;
  }
  .faq .ul li::before {
    content: "・";
    position: absolute;
    left: 0;
  }
  .faq .ol {
    list-style-type: decimal;
    list-style-position: outside;
    padding-left: 1.5em;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
  .faq .ol li {
    line-height: 1.3;
  }
  .faq .note {
    text-indent: -1em;
    padding-left: 1em;
    margin-top: 1em;
  }
}
@media screen and (max-width: 1080px) {
  .header {
    position: absolute;
    right: 3.8461538462vw;
    top: 0;
    z-index: 2;
    background-color: transparent;
    width: 51.2820512821vw;
    height: 20.5128205128vw;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    gap: 2.5641025641vw;
  }
  .header.is-fixed {
    display: flex;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    width: 100%;
    height: 15.3846153846vw;
    padding-inline: 3.8461538462vw;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .header.is-fixed p {
    display: flex;
    flex-direction: column;
    width: max-content;
  }
  .header.is-fixed .badges {
    width: max-content;
  }
  .header p {
    font-size: 3.0769230769vw;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    margin: 0 auto;
  }
  .header .badges {
    display: flex;
    align-items: center;
    justify-content: flex;
    gap: 2.5641025641vw;
  }
  .header .link-googleplay,
  .header .link-appstore {
    height: 7.6923076923vw;
  }
  .header .link-googleplay img,
  .header .link-appstore img {
    height: 100%;
  }
}
@media screen and (max-width: 1080px) and (hover: hover) {
  .header a {
    transition: opacity 0.2s;
  }
  .header a:hover {
    opacity: 0.85;
  }
}
@media screen and (max-width: 1080px) and (min-width: 769px) {
  .header {
    align-items: flex-end;
  }
  .header.is-fixed {
    height: 70px;
  }
  .header.is-fixed p {
    display: initial;
  }
  .header p {
    font-size: 20px;
    margin-right: 0;
  }
  .header .badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
  }
  .header .link-googleplay,
  .header .link-appstore {
    height: 40px;
  }
}
@media screen and (max-width: 1080px) {
  .mv {
    padding: 20.5128205128vw 3.8461538462vw 6.1538461538vw;
    position: relative;
    display: flex;
    justify-content: flex-end;
  }
  .mv h1 {
    position: absolute;
    left: 3.8461538462vw;
    top: 5.1282051282vw;
    width: 21.2820512821vw;
  }
  .mv h1 a {
    width: 100%;
  }
  .mv h1 img {
    width: 100%;
  }
  .mv .ttl {
    position: absolute;
    left: 3.8461538462vw;
    top: 45.1282051282vw;
    width: 58.9743589744vw;
    z-index: 1;
  }
  .mv .copy {
    position: absolute;
    left: 3.8461538462vw;
    top: 79.4871794872vw;
    width: 44.6153846154vw;
    z-index: 1;
  }
  .mv .copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 26.5384615385vw;
    height: 80%;
    display: block;
    background-color: #32B400;
    z-index: -1;
  }
  .mv .copy img {
    width: 100%;
  }
  .mv .mv-smartphone {
    height: 58.9743589744vw;
    position: absolute;
    right: 6.4102564103vw;
    top: 45.641025641vw;
    z-index: 1;
  }
  .mv .scroll {
    display: none;
  }
  .mv .slick-track {
    display: flex;
  }
  .mv .slick-slide {
    height: auto !important;
  }
  .mv .slickSlider {
    width: 82.0512820513vw;
    margin: 0;
    padding: 0;
    border-radius: 5.1282051282vw;
    box-shadow: 0 0 0 1px #000;
    overflow: hidden;
  }
  .mv .slickSlider li {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .mv .slickSlider li .ph {
    display: block;
    aspect-ratio: 640/720;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .tab-list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 2.5641025641vw;
    z-index: 1;
  }
  .tab-list button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.1025641026vw;
    font-weight: 700;
    line-height: 1;
    width: 42.3076923077vw;
    height: 12.8205128205vw;
    border-top-left-radius: 5.1282051282vw;
    border-top-right-radius: 5.1282051282vw;
    border: 1px solid #000;
  }
  .tab-list button.is-active {
    pointer-events: none;
    border-bottom-color: transparent;
  }
  .tab-list button[data-target=worker] {
    background-color: #FFFFAA;
  }
  .tab-list button[data-target=farmer] {
    background-color: #CBF3FF;
  }
}
@media screen and (max-width: 1080px) and (min-width: 769px) {
  .tab-list button {
    font-size: 32px;
    height: 80px;
  }
}
@media screen and (max-width: 1080px) and (min-width: 769px) and (hover: hover) {
  .tab-list button:hover {
    text-decoration: underline;
    text-underline-offset: 10px;
  }
}