/* ==============================================================
*  base
* ============================================================ */
:root {
  --bg-blue: #d4e2f1;
  --bg-gray: #f0f0f0;
  --bg-white: #fff;
  --color-black: #333;
  --color-blue-01: #024e8e;
  --color-blue-02: #2065ac;
  --color-blue-03: #0d7091;
  --color-blue-04: #0d4e91;
  --color-blue-05: #287fd7;
  --color-gray: #999;
  --color-red: #ff5a5a;
  --color-hover-red: #4f3636;
  --color-white: #fff;
  --icon-event: #5ea8dd;
  --icon-webinar: #03857f;
  --icon-status-closed: #999;
  --icon-status-ended: #666;
  --icon-status-reception: #0d4e91;
}

/************
* common
*************/
/* フォント */
body {
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #333;
}
main {
  margin-top: 100px;
}
@media screen and (max-width: 767px) {
  main {
    margin-top: 65px;
  }
}

/* パンくず */
.breadcrumbs {
  width: 100%;
  background-color: #F0F0F0;
  padding: 8px 0;
  font-size: 12px;
}
@media screen and (max-width: 767px) {
  .breadcrumbs {
    white-space: nowrap;
    overflow-x: scroll;
  }
}
.breadcrumbs._second {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.30);
  color: #FFF;
}
.breadcrumbs-list {
  display: flex;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
}
.breadcrumbs-item:not(:first-child) {
  position: relative;
  margin-left: 10px;
  padding-left: 16px;
}
.breadcrumbs-item:not(:first-child)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(45deg);
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1px solid #666;
  border-right: 1px solid #666;
  content: "";
}
.breadcrumbs._second .breadcrumbs-item:not(:first-child)::before {
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
}
.breadcrumbs-link {
  color: #404040;
  text-decoration: none;
}
.breadcrumbs._second .breadcrumbs-link {
  color: #FFF;
}

/* ページタイトル */
.pageHeader {
  width: 100%;
  background-color: #D9D9D9;
  margin-bottom: 60px;
  background: url("/-/media/image/sustainalink/bg_subpage-mainvisual.jpg") center no-repeat;
  background-size: cover;
  color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .pageHeader {
    margin-bottom: 30px;
  }
}
.pageHeader-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 80px 20px;
}
.pageHeader-title {
  font-size: 48px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .pageHeader-title {
    font-size: 27px;
    text-align: center;
  }
}

.pageHeader-tagList {
  display: flex;
  gap: 2px 20px;
  flex-wrap: wrap;
  color: var(--color-black);
  font-size: 14px;
}
.pageHeader-tagList li::before {
  content: '＃';
}

.pageLink {
  padding: 0;
}
.pageLink__list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: 500px;
}
@media screen and (max-width: 767px) {
  .pageLink__list {
    font-size: 15px;
  }
}
.pageLink__list-item {
  position: relative;
  margin-right: 40px;
}
.pageLink__list-item::after {
  position: absolute;
  top: 40%;
  right: -20px;
  transform: translateY(-50%) rotate(-45deg);
  display: block;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--color-blue-04);
  border-bottom: 2px solid var(--color-blue-04);
  content: "";
}
.pageLink__list-item a {
  text-decoration: none;
  color: var(--color-black);
}
.pageLink__list-item a:hover {
  text-decoration: none;
  color: var(--color-black);
}

.section-title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .section-title {
    font-size: 32px;
    margin-bottom: 30px;
  }
  .section-img {
    width: 100%;
  }
}
.section-title_h3 {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
}
.section-text {
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .section-text {
    font-size: 15px;
  }
}
.section-lead {
  font-size: 18px;
  margin-bottom:16px;
}
.section-btnLink {
  display: flex;
  gap: 0 40px;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .section-btnLink {
    gap: 20px 0;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
  }
}
.btn {
  text-align: center;
  width: 280px;
}
@media screen and (max-width: 767px) {
  .btn {
    width: min(100%, 280px);
  }
}
.btn a {
  display: block;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 700;
  padding: 8px 0;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .btn a {
    font-size: 16px;
  }
}
.btn a:hover {
  text-decoration: none;
}
.btn._blue a {
  background-color: var(--color-blue-01);
  border: solid 1px var(--color-blue-01);
  color: var(--color-white);
}
.btn._blue a:hover {
  background-color: var(--color-white);
  color: var(--color-blue-01);
  transition: 0.3s;
}
.btn._white a {
  background-color: var(--color-white);
  border: solid 1px var(--color-blue-01);
  color: var(--color-blue-01);
}
.btn._white a:hover {
  background-color: var(--color-blue-01);
  color: var(--color-white);
  transition: 0.3s;
}

.bg-blue {
  background-color: var(--bg-blue) !important;
}
.bg-gray {
  background-color: var(--bg-gray) !important;
}
.bg-white {
  background-color: var(--bg-white) !important;
}

@media screen and (max-width: 767px) {
  .text-sp-left {
    text-align: left;
  }
}

/************
* header
*************/
.sustainalink-mainheader {
  position: relative;
  z-index: 3;
}
.sustainalink-mainheader__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: max(1000px, 100%);
  height: 100px;
}
@media screen and (max-width: 767px) {
  .sustainalink-mainheader__inner {
    height: 65px;
    width: 100%
  }
}
.sustainalink-mainheader__logo {
  width: min(20%,220px);
  padding-left: 20px;
}
@media screen and (max-width: 767px) {
  .sustainalink-mainheader__logo {
    width: 168px;
    padding-left: 12px;
  }
}
.menu-btn {
  display: none;
}
@media screen and (max-width: 767px) {
  .menu-btn {
    display: block;
    width: 60px;
    height: 60px;
    position: relative;
    background-color: #fff;
    outline: initial;
  }
  .inn {
    margin: auto 15px auto 5px;
    position: absolute;
    width: 40px;
    height: 36px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
  }
  .line {
    position: absolute;
    display: inline-block;
    background-color: var(--color-blue-04);
    height: 5px;
    left: 0;
    width: 100%;
    transition: all 0.3s ease;
  }
  .line:nth-of-type(1) {
    top: 0;
  }
  .line:nth-of-type(2) {
    top: 43%;
  }
  .line:nth-of-type(3) {
    bottom: 0;
    width: 65%;
  }
  .menu-btn.is-open .line:nth-of-type(1) {
    top: 45%;
    transform: rotate(45deg);
  }
  .menu-btn.is-open .line:nth-of-type(2) {
    opacity: 0;
  }
  .menu-btn.is-open .line:nth-of-type(3) {
    top: 45%;
    transform: rotate(-45deg);
    bottom: auto;
    width: 100%;
  }
}
.sustainalink-mainheader__nav {
  display: flex;
  gap: 0 min(30px, 1.8vw);
  justify-content: flex-end;
  align-items: center;
  width: min(80%,910px);
}
@media screen and (max-width: 767px) {
  .sustainalink-mainheader__nav {
    position: absolute;
    top: 65px;
    right: -348px;
    gap: 0;
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    align-items: flex-end;
    width: initial;
    transition: all .3s ease;
  }
  .sustainalink-mainheader__nav.is-open {
    right: 0;
  }
  .sustainalink-mainheader__nav::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -200vw;
    background-color: #000000a3;
    width: 200vw;
    height: 100dvh;
    margin: 0 -50vw;
    z-index: -1;
    transition: all .1s ease;
  }
  .sustainalink-mainheader__nav.is-open::before {
    left: 0;
    right: 0;
  }
}
.sustainalink-mainnav__linklist {
  display: flex;
  gap: 0 min(20px, 1.5vw);
  font-size: 16px;
  font-weight: 500;
}
@media screen and (max-width: 1130px) {
  .sustainalink-mainnav__linklist {
    font-size: 13px
  }
}
@media screen and (max-width: 767px) {
  .sustainalink-mainnav__linklist {
    border-top: 1px solid #2f73ba;
    gap: 0;
    flex-flow: column;
    flex-wrap: wrap;
    font-size: 16px;
  }
  .sustainalink-mainnav__linklist-item {
    position: relative;
    background-color: var(--color-blue-04);
    border-bottom: 1px solid #2f73ba;
    padding: 15px 20px;
    width: 348px;
  }
}
.sustainalink-mainnav__linklist-item-link {
  color: #333;
  padding-bottom: 5px;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .sustainalink-mainnav__linklist-item-link {
    color: #fff;
    display: inline-block;
    width: 100%;
    padding-bottom: 0;
  }
  .sustainalink-mainnav__linklist-item-link::after {
    content: '';
    position: absolute;
    top: 48%;
    right: 30px;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
    transition: 0.3s;
  }
}
.sustainalink-mainnav__linklist-item-link:hover {
  border-bottom: solid 4px var(--color-blue-01);
  text-decoration: none;
  transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
  .sustainalink-mainnav__linklist-item-link:hover {
    border-bottom: none;
  }
}
.sustainalink-mainnav__box {
  display: flex;
  height: 100px;
}
@media screen and (max-width: 767px) {
  .sustainalink-mainnav__box {
    flex-wrap: nowrap;
    height: auto;
  }
}
.sustainalink-mainnav__box-item {
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .3s ease;
}
.sustainalink-mainnav__box-item._trial {
  background-color: var(--color-blue-02);
}
.sustainalink-mainnav__box-item._download {
  background-color: var(--color-blue-01);
}
.sustainalink-mainnav__box-item._contact {
  background-color: var(--color-blue-03);
}
.sustainalink-mainnav__box-item:hover {
  opacity: .8;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .sustainalink-mainnav__box-item {
    padding: 24px 16px;
    text-align: center;
    width: 116px;
  }
  .sustainalink-mainnav__box-item._trial, .sustainalink-mainnav__box-item._download,
  .sustainalink-mainnav__box-item._contact {
    background-color: var(--color-white);
  }
  .sustainalink-mainnav__box-item:hover {
    opacity: 1;
  }
}
.sustainalink-mainnav__box-item-link {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
}
@media screen and (max-width: 1130px) {
  .sustainalink-mainnav__box-item-link {
    font-size: 13px
  }
}
@media screen and (max-width: 767px) {
  .sustainalink-mainnav__box-item-link {
    color: #333;
  }
  .sustainalink-mainnav__box-item-link div {
    background-color: var(--color-blue-04);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto;
  }
}
.sustainalink-mainnav__box-item:hover .sustainalink-mainnav__box-item-link {
  text-decoration: none;
  border-bottom: solid 4px var(--color-white);
  transition: all 0.3s ease;
}
.sustainalink-mainnav__box-item-link span {
  display: block;
  padding-top: 5px;
  padding-bottom: 3px;
}
.sustainalink-mainnav__box-item-link svg {
  display: block;
  margin: 0 auto;
}
.sustainalink-mainnav__box-item._trial svg {
  margin-bottom: 6px;
}
.sustainalink-mainnav__box-item._download svg {
  margin-bottom: 5px;
}
.sustainalink-mainnav__box-item._contact svg {
  margin-bottom: 9px;
}
@media screen and (max-width: 767px) {
  .sustainalink-mainnav__box-item._trial svg, .sustainalink-mainnav__box-item._download svg,
  .sustainalink-mainnav__box-item._contact svg {
    margin-bottom: 0;
  }
  .sustainalink-mainnav__box-item-link span {
    display: block;
    line-height: 1.4;
    margin-top: 8px;
  }
}

footer {
  padding-top: 0;
}

/* イベント・セミナー　アイコン */
.webinar_itemDate {
  font-size: 16px;
  margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
  .webinar_itemDate {
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 5px;
  }
}
.webinar_itemDate span {
  font-size: 14px;
  font-weight: 500;
  margin-right: 20px;
  padding: 4px 18px;
}
@media screen and (max-width: 767px) {
  .webinar_itemDate span {
    font-size: 12px;
    padding: 2px 15px;
    display: inline-block;
    margin-bottom: 5px;
  }
}
span.icon_event {
  background-color: var(--icon-event);
  border: solid 1px var(--icon-event);
  border-radius: 5px;
  color: var(--color-white);
}
span.icon_webinar {
  background-color: var(--icon-webinar);
  border: solid 1px var(--icon-webinar);
  border-radius: 5px;
  color: var(--color-white);
}
.webinar_itemStatus {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
}
@media screen and (max-width: 767px) {
  .webinar_itemStatus {
    font-size: 12px;
    margin-bottom: 16px;
  }
}
.webinar_itemStatus span {
  border-radius: 5px;
  color: var(--color-white);
  padding: 10px 24px;
}
@media screen and (max-width: 767px) {
  .webinar_itemStatus span {
    padding: 8px 20px;
  }
}
span.icon_status-reception {
  background-color: var(--icon-status-reception);
  border: solid 1px var(--icon-status-reception);
}
span.icon_status-closed {
  background-color: var(--icon-status-closed);
  border: solid 1px var(--icon-status-closed);
}
span.icon_status-ended {
  background-color: var(--icon-status-ended);
  border: solid 1px var(--icon-status-ended);
}

/*** 導入事例 ***/
.top-container .section._related-case, .service-container .section._related-case,
.columnDetail-container .section._related-case {
  background-color: var(--bg-gray);
}
.related-case-content {
  width: 100%;
  max-width: 1240px;
  min-width: 1000px;
  margin: 0 auto;
  padding: 120px 20px;
}
@media screen and (max-width: 767px) {
  .related-case-content {
    max-width: unset;
    min-width: unset;
    padding: 80px 20px;
  }
}
.caseDetail-container .related-case-content {
  padding-top: 80px;
  padding-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .caseDetail-container .related-case-content {
    padding-top: 60px;
  }
}
.related-case__list {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .related-case__list {
    gap: 60px 0;
    flex-wrap: wrap;
  }
}
.related-case__list-item {
  display: flex;
  text-align: center;
  width: calc((100% - 60px) / 3);
}
@media screen and (max-width: 767px) {
  .related-case__list-item {
    width: 100%;
  }
}
.related-case_itemBox {
  color: var(--color-black);
  text-decoration: none;
}
.related-case_itemBox:hover {
  text-decoration: none;
}
.related-case_itemImg {
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
  overflow: hidden;
}
.related-case_itemImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .3s ease;
}
.related-case_itemBox:hover .related-case_itemImg img {
  transform: scale(1.05);
}
.related-case_itemTitle {
 color: var(--color-black);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
}
@media screen and (max-width: 767px) {
.related-case_itemTitle {
    font-size: 18px;
  }
}
.related-case_itemText {
  color: var(--color-black);
  font-size: 16px;
  text-align: left;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .related-case_itemText {
    font-size: 15px;
    margin-bottom: 10px;
  }
}
.related-case_itemTag {
  display: flex;
  gap: 2px 14px;
  flex-wrap: wrap;
  color: var(--color-black);
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  .related-case_itemTag {
    font-size: 13px;
  }
}
.related-case_itemTag li::before {
  content: '＃';
}
.related-case_link .btn {
  margin: 0 auto;
}

/* 【共通】お問い合わせ */
.contact {
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/-/media/image/sustainalink/bg_footer-contact_001.jpg") ;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.contact-contents {
  width: 100%;
  max-width: 1240px;
  min-width: 1000px;
  margin: 0 auto;
  padding: 100px 20px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .contact-contents {
    max-width: unset;
    min-width: unset;
    padding: 60px 20px;
  }
}
.contact-title {
  color: var(--color-white);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .contact-title {
    font-size: 24px;
    margin-bottom: 30px;
  }
}
.contact-text {
  color: var(--color-white);
  font-size: 16px;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .contact-text {
    margin-bottom: 30px;
    text-align: left;
  }
}
.contact-link {
  display: flex;
  gap: 0 40px;
  margin-top: 20px;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .contact-link {
    gap: 20px 0;
    flex-flow: column;
    align-items: center;
  }
}

/* SustainaLinkとは */
.sustainalink-content {
  width: 100%;
  max-width: 1240px;
  min-width: 1000px;
  margin: 0 auto;
  padding: 120px 20px;
}
@media screen and (max-width: 767px) {
  .sustainalink-content {
    max-width: unset;
    min-width: unset;
    padding: 80px 20px;
  }
  .case-container .sustainalink-content, .webinar-container .sustainalink-content {
    padding-top: 0;
  }
}
.sustainalink-content .section-title {
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .sustainalink-content .section-title {
    margin-bottom: 30px;
  }
}
.sustainalink-service_box {
  display: flex;
  gap: 0 80px;
  justify-content: center;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .sustainalink-service_box {
    gap: 20px 0;
    flex-wrap: wrap;
    width: 100%;
  }
}
.sustainalink-service_image, .sustainalink-service_content {
  width: calc((100% - 80px) / 2);
}
@media screen and (max-width: 767px) {
  .sustainalink-service_image, .sustainalink-service_content {
    width: 100%;
  }
}
.sustainalink-service_image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .sustainalink-service_image {
    order: 1;
  }
  .sustainalink-service_content {
    order: 2;
  }
}
.sustainalink-service_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sustainalink-service_text {
  font-size: 16px;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .sustainalink-service_text {
    font-size: 15px;
  }
}
@media screen and (max-width: 767px) {
  .sustainalink-service_link .btn {
    margin: 0 auto;
  }
}

/* input-form */
.input-form-box {
  padding: 80px 0px;
  font-size: 18px;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .input-form-box {
    width: 100%;
    padding: 30px 20px 60px;
    font-size: 15px;
  }
}
.input-form-box br {
  display: none;
}
.input-form-box form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 720px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .input-form-box form {
    width: 100%;
  }
}
.input-form-box label {
  width: 100%;
}
.input-form-box label:has(input[type="checkbox"]) {
  display: flex;
  flex-flow: row-reverse;
  justify-content: flex-end;
  margin-top: 8px;
}
.input-form-box input[type="text"], .input-form-box input[type="email"],
.input-form-box select {
  background-color: var(--color-white);
  font-size: 16px;
  width: 100%;
  height: 40px;
  padding-left: 10px;
  margin-top: 4px;
}
.input-form-box select[multiple] {
  background-color: var(--color-white);
  font-size: 16px;
  width: 100%;
  height: 170px;
  padding-left: 10px;
  margin-top: 4px;
}
.input-form-box textarea {
  background-color: var(--color-white);
  font-size: 16px;
  width: 100%;
  height: 120px;
  padding-left: 10px;
  margin-top: 4px;
}
.input-form-box input[type="checkbox"] {
  position: relative;
  width: 30px;
  height: 30px;
  background-color: var(--color-white);
  vertical-align: -8px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin-left: 12px;
  margin-right: 12px;
}
.input-form-box input[type="checkbox"]:checked {
  background-color: var(--color-blue-02);
}
.input-form-box input[type="checkbox"]:checked:before {
  position: absolute;
  top: 4px;
  left: 10px;
  transform: rotate(50deg);
  width: 10px;
  height: 16px;
  border-right: 3px solid var(--color-white);
  border-bottom: 3px solid var(--color-white);
  content: '';
}

.input-form-box input[type="submit"] {
  width: 330px;
  background-color: var(--color-blue-04);
  border: 1px solid var(--color-blue-04);
  border-radius: 50px;
  color: var(--color-white);
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  margin: 40px auto 0;
}
@media screen and (max-width: 767px) {
  .input-form-box input[type="submit"] {
    width: 275px;
    margin: 20px auto 0;
  }
}
.input-form-box input[type="submit"]:hover {
  background-color: var(--color-white);
  color: var(--color-blue-04);
  cursor: pointer;
}
.input-form-box input[type="submit"]:disabled {
  background-color: var(--color-gray);
  border: none;
  color: var(--color-white);
  cursor: default;
}
.input-form-box span.error {
  display: block;
  width: 100%;
  color: var(--color-caution);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 30px;
}
.g-recaptcha {
  width: 100%;
}
.g-recaptcha div {
  margin: 0 auto;
}



.input-form-box span.required {
  display: inline-block;
  background-color: var(--color-red);
  color: var(--color-white);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  margin: 0 6px 0 10px;
  height: fit-content;
  transform: translateY(8px);
}
@media screen and (max-width: 767px) {
  .input-form-box span.required {
    transform: translateY(2px);
  }
}

.input-form-box span.optional {
  display: inline-block;
  background-color: var(--color-gray);
  color: var(--color-white);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  margin: 0 6px 0 10px;
  height: fit-content;
  transform: translateY(8px);
}
@media screen and (max-width: 767px) {
  .input-form-box span.optional {
    transform: translateY(2px);
  }
}


.input-form-box label > span.required {
  transform: translateY(-1px);
}
.input-form-box label > span.optional {
  transform: translateY(-1px);
}

/* thanks */
._thanks .section-text {
  font-weight: 500px;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  ._thanks .section-text {
    text-align: left;
  }
  ._thanks .section-title {
    font-size: 26px;
  }
}