:root {
  --textprimary: #18181b;
  --textsecondary: #71717a;
  --texttertiary: #a1a1aa;
  --textquaternary: #ffffff;
  --backgroundprimary: #ffffff;
  --backgroundsecondary: #f4f4f5;
  --backgroundtertiary: #e4e4e7;
  --backgroundquaternary: #18181b;
  --accentdark: #064e3b;
  --accent: #047857;
  --accentlight: #dcfce7;
  --link: #2563eb;
  --negative: #dc2626;
  --positive: #16a34a;
  --caution: #ca8a04;
  --fillprimary: #18181b;
  --fillsecondary: #d1d5db;
  --filltertiary: #ffffff;
  --dividerprimary: #d4d4d8;
  --dividersecondary: #e4e4e7;
  --activity1: #6ee7b7;
  --activity2: #10b981;
  --activity3: #15803d;
  --activity4: #064e3b;
}
/* ブレークポイント
@media (max-width: 576px) { ... }
@media (max-width: 768px) { ... }
@media (max-width: 992px) { ... } 
*/

.lp {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  color: var(--textprimary);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header {
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  background: var(--backgroundprimary);
  z-index: 1;
}
@media (max-width: 576px) {
  .header {
    padding: 8px 16px;
    display: block;
  }
}
.header_logo img {
  height: 40px;
  width: auto;
}
@media (max-width: 576px) {
  .header_logo img {
    height: 20px;
  }
}
.header_menu {
  display: grid;
  column-gap: 16px;
  grid-template-columns: auto auto auto;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .header_menu {
    display: none;
  }
}
.header_contact {
  padding: 8px 24px;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  color: var(--accent);
  text-decoration: none;
  transition: 0.2s;
}
.header_contact:hover {
  color: var(--accentdark);
}
.header_login {
  padding: 8px 24px;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  text-decoration: none;
  transition: 0.2s;
}
.header_login:hover {
  color: var(--accentdark);
  border-color: var(--accentdark);
}
.header_signup {
  padding: 8px 24px;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  color: var(--textquaternary);
  border-radius: 8px;
  background: var(--accent);
  text-decoration: none;
  transition: 0.2s;
}
.header_signup:hover {
  background: var(--accentdark);
}
.hero {
  padding: 64px 0 152px 64px;
  position: relative;
  display: grid;
  grid-template-columns: 440px 1fr;
  column-gap: 64px;
  width: 100%;
  background: url(../images/hero_background.png) no-repeat bottom center;
  background-size: 100% auto;
}
@media (max-width: 992px) {
  .hero {
    grid-template-columns: auto;
    padding: 64px 0 152px 0;
  }
}
@media (max-width: 576px) {
  .hero {
    padding: 32px 0 124px 0;
  }
}
.hero:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.1;
  background: var(--accent);
  z-index: -1;
}
@media (max-width: 992px) {
  .hero_contents {
    padding: 0 64px;
  }
}
@media (max-width: 576px) {
  .hero_contents {
    padding: 0 32px;
  }
}
.hero_title {
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 150%;
}
@media (max-width: 576px) {
  .hero_title {
    font-size: 24px;
  }
}
.hero_title span {
  margin: 24px 0 0;
  padding: 16px 24px;
  background: var(--backgroundprimary);
  display: table;
}
@media (max-width: 576px) {
  .hero_title span {
    margin: 12px 0 0;
    padding: 8px 12px;
  }
}
.hero_description {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  margin: 40px 0 0;
  text-align: justify;
}
@media (max-width: 576px) {
  .hero_description {
    font-size: 14px;
    margin: 32px 0 0;
  }
}
.hero_signup {
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 150%;
  padding: 16px 36px;
  background: var(--accent);
  color: var(--textquaternary);
  border-radius: 8px;
  margin: 64px 0 0;
  text-decoration: none;
  display: inline-block;
  transition: 0.2s;
}
@media (max-width: 576px) {
  .hero_signup {
    font-size: 18px;
    margin: 32px 0 0;
  }
}
.hero_signup:hover {
  background: var(--accentdark);
}
.hero_visual {
  overflow: hidden;
}
@media (max-width: 992px) {
  .hero_visual {
    margin: 64px 0 0;
  }
}
.hero_visual img {
  width: 100%;
  height: auto;
  min-width: 720px;
}
@media (max-width: 992px) {
  .hero_visual img {
    min-width: 0;
  }
}
.scrum {
  padding: 80px 320px 160px;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  justify-content: center;
  column-gap: 80px;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
  background-image: url('../images/scrum_image_1.svg'), url('../images/scrum_image_2.svg');
  background-repeat: no-repeat;
  background-position: left bottom, right bottom;
}
@media (max-width: 768px) {
  .scrum {
    padding: 80px 32px 160px;
    grid-template-columns: auto;
    background-size: 117px auto, 117px auto;
  }
}
.scrum_contents {
  direction: ltr;
}
.scrum_title {
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 150%;
}
@media (max-width: 576px) {
  .scrum_title {
    font-size: 24px;
  }
}
.scrum_description {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  text-align: justify;
  margin: 24px 0 0;
}
@media (max-width: 576px) {
  .scrum_description {
    font-size: 14px;
    margin: 32px 0 0;
  }
}
.trial {
  background: linear-gradient(92.86deg, #047857 0%, #55c9b6 100%);
  padding: 80px 64px;
  text-align: center;
}
@media (max-width: 576px) {
  .trial {
    padding: 64px 32px;
  }
}
.trial_title {
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 150%;
  color: var(--textquaternary);
}
@media (max-width: 768px) {
  .trial_title {
    font-size: 24px;
  }
}
.trial_signup {
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 150%;
  color: var(--accent);
  background: var(--filltertiary);
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 8px;
  margin: 40px 0 0;
  display: inline-block;
  transition: 0.2s;
}
@media (max-width: 768px) {
  .trial_signup {
    font-size: 18px;
  }
}
.trial_signup:hover {
  color: var(--accentdark);
}
.comparison {
  padding: 160px 64px 0;
}
@media (max-width: 768px) {
  .comparison {
    padding: 80px 32px 0;
  }
}
.comparison_title {
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 150%;
  text-align: center;
}
@media (max-width: 768px) {
  .comparison_title {
    font-size: 24px;
  }
}
.table {
  margin: 80px 0 0;
  display: table;
}
@media (max-width: 992px) {
  .table {
    margin: 40px 0 0;
    display: block;
  }
}
.table_row {
  display: table-row;
}
@media (max-width: 992px) {
  .table_row {
    display: block;
    background: var(--backgroundsecondary);
    margin: 40px 0 0;
    padding: 16px;
  }
}
@media (max-width: 992px) {
  .table_header {
    display: none;
  }
}
.table_cell {
  display: table-cell;
  border: 1px solid var(--dividerprimary);
  padding: 40px;
}
@media (max-width: 992px) {
  .table_cell {
    display: block;
    border: none;
    background: var(--backgroundprimary);
    padding: 0;
  }
}
.table_cell_title {
  display: none;
  text-align: center;
  padding: 16px;
  font-size: 18px;
  border-top: 1px solid var(--dividerprimary);
  border-left: 1px solid var(--dividerprimary);
  border-right: 1px solid var(--dividerprimary);
  font-weight: bold;
  margin: 16px 0 0;
}
@media (max-width: 992px) {
  .table_cell_title {
    display: block;
  }
}
.table_cell_title.is_canban {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--textquaternary);
}
.table_title.is_canban {
  background: var(--accent);
  color: var(--textquaternary);
  border: 6px solid var(--accent);
}
.table_title {
  display: table-cell;
  border: 1px solid var(--dividerprimary);
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 150%;
  text-align: center;
  padding: 8px 40px;
  white-space: nowrap;
}
@media (max-width: 992px) {
  .table_title {
    display: block;
    background: none;
    border: none;
  }
}
.table_cell.is_canban {
  border-right: 6px solid var(--accent);
  border-left: 6px solid var(--accent);
}
@media (max-width: 992px) {
  .table_cell.is_canban {
    border-width: 2px;
    border-bottom: 2px solid var(--accent);
  }
}
.table_last.is_canban {
  border-bottom: 6px solid var(--accent);
}
@media (max-width: 992px) {
  .table_last.is_canban {
    border-width: 2px;
  }
}
@media (max-width: 992px) {
  .table_cell_contents {
    border: 1px solid var(--dividerprimary);
    padding: 0 16px 16px;
  }
}
.table_subtitle {
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 150%;
  margin: 24px 0 0;
}
@media (max-width: 992px) {
  .table_subtitle {
    font-size: 16px;
    margin: 16px 0 0;
  }
}
.table_text {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  text-align: justify;
  margin: 8px 0 0 16px;
}
@media (max-width: 992px) {
  .table_text {
    font-size: 16px;
  }
}
.reason {
  padding: 160px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: center;
  width: 100%;
}
@media (max-width: 992px) {
  .reason {
    grid-template-columns: auto;
  }
}
@media (max-width: 768px) {
  .reason {
    padding: 80px 32px;
    grid-template-columns: auto;
  }
}
.reason_title {
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 150%;
}
@media (max-width: 768px) {
  .reason_title {
    font-size: 24px;
  }
}
.reason_visual {
  text-align: center;
}
@media (max-width: 768px) {
  .reason_visual {
    margin: 80px 0;
  }
}
.reason_visual img {
  width: 100%;
  height: auto;
  max-width: 400px;
  margin: 0 auto;
}
.reason_subtitle {
  margin: 24px 0 0 0;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 150%;
}
@media (max-width: 768px) {
  .reason_subtitle {
    font-size: 16px;
  }
}
.reason_text {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  text-align: justify;
  margin: 16px 0 0 16px;
}
@media (max-width: 768px) {
  .reason_text {
    font-size: 16px;
  }
}
.reason_contents_inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}
@media (max-width: 768px) {
  .reason_contents_inner {
    grid-template-columns: 1fr;
  }
}
.reason_contents_visual {
  margin: 16px 0 0;
}
.reason_contents_visual img {
  width: 100%;
  height: auto;
}
.problem {
  padding: 160px 64px;
  background: var(--backgroundtertiary);
  position: relative;
}
@media (max-width: 768px) {
  .problem {
    padding: 80px 32px;
  }
}
.problem_title {
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 150%;
  text-align: center;
}
@media (max-width: 768px) {
  .problem_title {
    font-size: 24px;
  }
}
.problem_contents {
  margin: 80px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 56px;
  row-gap: 56px;
}
@media (max-width: 992px) {
  .problem_contents {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .problem_contents {
    grid-template-columns: 1fr;
    column-gap: 24px;
    row-gap: 24px;
    margin: 40px 0 0;
  }
}
.problem_item {
  background-color: var(--backgroundprimary);
  border-radius: 64px;
  padding: 80px 40px;
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 150%;
  position: relative;
}
@media (max-width: 768px) {
  .problem_item {
    font-size: 18px;
    padding: 40px;
    border-radius: 32px;
  }
}
.problem_item:after {
  content: '';
  background-image: url(../images/problem_icon.png);
  background-repeat: no-repeat;
  width: 40px;
  height: 36px;
  background-position: 0 0;
  display: block;
  background-size: cover;
  position: absolute;
  top: 32px;
  left: -16px;
}
@media (max-width: 768px) {
  .problem_item:after {
    width: 20px;
    height: 18px;
    top: 16px;
    left: -8px;
  }
}
.problem_visual {
  margin: 56px 0 0;
  position: absolute;
  right: 64px;
  width: 316px;
  z-index: 1;
}
@media (max-width: 768px) {
  .problem_visual {
    margin: 24px 0 0;
    right: 32px;
    width: calc(316px / 2);
  }
}
.problem_visual img {
  width: 100%;
  height: auto;
}
.solution {
  width: 100%;
  background: url(../images/solution_background.png) no-repeat top center;
  background-size: 100% auto;
  position: relative;
  padding: 160px 64px;
}
@media (max-width: 768px) {
  .solution {
    padding: 80px 32px;
  }
}
.solution:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--accent);
  opacity: 0.1;
  z-index: -1;
}
.solution_title {
  text-align: center;
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 150%;
}
@media (max-width: 768px) {
  .solution_title {
    font-size: 24px;
  }
}
.solution_contents {
  margin: 80px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 56px;
  row-gap: 56px;
}
@media (max-width: 992px) {
  .solution_contents {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .solution_contents {
    margin: 40px 0 0;
    grid-template-columns: 1fr;
    column-gap: 32px;
    row-gap: 32px;
  }
}
.solution_icon {
  width: 80px;
  display: block;
}
@media (max-width: 768px) {
  .solution_icon {
    width: 40px;
  }
}
.solution_icon img {
  width: 100%;
  height: auto;
}
.solution_text {
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 150%;
  margin: 40px 0 0;
}
@media (max-width: 768px) {
  .solution_text {
    font-size: 18px;
    margin: 16px 0 0;
  }
}
.solution_visual {
  margin: 56px 0 0;
  position: absolute;
  left: 64px;
  width: 384px;
  z-index: 1;
}
@media (max-width: 768px) {
  .solution_visual {
    margin: 24px 0 0;
    left: 32px;
    width: calc(384px / 2);
  }
}
.solution_visual img {
  width: 100%;
  height: auto;
}
.plan {
  padding: 240px 64px;
  position: relative;
}
@media (max-width: 768px) {
  .plan {
    padding: 120px 32px;
  }
}
.plan_title {
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 150%;
  text-align: center;
}
@media (max-width: 768px) {
  .plan_title {
    font-size: 24px;
  }
}
.plan_contents {
  border-radius: 64px;
  position: relative;
  max-width: 640px;
  margin: 80px auto 0;
  overflow: hidden;
  padding: 64px 40px;
  text-align: center;
}
@media (max-width: 768px) {
  .plan_contents {
    border-radius: 32px;
    margin: 40px auto 0;
    padding: 32px 20px;
  }
}
.plan_contents:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #047857;
  opacity: 0.1;
}
.plan_price {
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
  line-height: 150%;
  display: inline-block;
}
.plan_unit {
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 150%;
}
.plan_detail {
  display: inline-block;
}
.plan_detail span {
  display: block;
  margin: 0 0 0 16px;
}
.plan_caution {
  margin: 24px 0 0;
}
.plan_caution span {
  text-align: left;
  position: relative;
  padding: 0 0 0 1rem;
  display: block;
}
.plan_caution span:before {
  content: '・';
  position: absolute;
  left: 0;
}
.plan_visual {
  position: absolute;
  top: 160px;
  left: calc(50% + 240px);
  transform: translateX(-50%);
  width: 240px;
}
@media (max-width: 768px) {
  .plan_visual {
    position: static;
    transform: translateX(0);
    margin: 40px auto;
    text-align: center;
  }
}
.plan_visual img {
  width: 100%;
}
.form {
  padding: 160px 64px;
}
@media (max-width: 768px) {
  .form {
    padding: 80px 32px;
  }
}
.form_title {
  text-align: center;
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 150%;
}
@media (max-width: 768px) {
  .form_title {
    font-size: 24px;
  }
}
.formrun {
  max-width: 640px;
  margin: 80px auto 0;
  font-size: 16px;
}
.formrun input,
.formrun textarea,
.formrun select {
  width: 100%;
  border-radius: 4px;
  background: var(--backgroundsecondary);
  border: none;
  padding: 8px 16px;
  margin: 8px 0 0;
  font-size: 16px;
}
.formrun > div {
  margin: 24px 0 0;
}
.error {
  display: none;
}
.formrun button {
  background: var(--accent);
  width: 100%;
  border: none;
  border-radius: 8px;
  margin: 40px 0;
  color: var(--textquaternary);
  padding: 12px 0;
  font-size: 18px;
  cursor: pointer;
  transition: 0.2s;
}
.formrun button:hover {
  background: var(--accentdark);
}
.formrun_option {
  color: var(--positive);
  margin: 0 0 0 8px;
}
.thanks_title {
  font-size: 24px;
  padding: 40px 32px;
}
.thanks_message {
  font-size: 16px;
  padding: 0 32px;
}
.footer {
  max-width: 640px;
  margin: 40px auto 40px;
  font-size: 16px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  column-gap: 24px;
  row-gap: 24px;
}
@media (max-width: 576px) {
  .footer {
    grid-template-columns: 1fr;
    justify-content: center;
    text-align: center;
    padding: 0 32px;
  }
}
.footer_list a {
  text-decoration: none;
  color: var(--link);
}