@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");
/* ====================
  common
====================*/
:root {
  --black: #111;
  --white: #fff;
  --rouge: #950e21;
  --squash: #ecc318;
  --charcoal-grey: #43434d;
  --pale-grey: #ececf0;
}

.pc-disp {
  display: block !important;
}
@media screen and (max-width: 767px) {
  .pc-disp {
    display: none !important;
  }
}

.sp-disp {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .sp-disp {
    display: block !important;
  }
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  color: var(--black);
  font-weight: 500;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.8;
  font-feature-settings: "palt";
  overflow-x: clip;
}

img {
  width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  appearance: none;
}

em {
  font-style: normal;
}

b {
  font-weight: 700;
}

a,
input[type=submit] {
  color: inherit;
  text-decoration: none;
}
a:hover,
input[type=submit]:hover {
  opacity: 0.7;
}

a,
a::before,
a::after,
button,
input[type=submit] {
  transition: all 0.3s;
}

.grecaptcha-badge {
  display: none;
}

.container {
  width: 85%;
  max-width: 1280px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .container {
    width: 100%;
    padding: 0 2rem;
  }
}

.mt10 {
  margin-top: 1rem;
}

.mb10 {
  margin-bottom: 1rem;
}

.mt20 {
  margin-top: 2rem;
}

.mb20 {
  margin-bottom: 2rem;
}

.mt30 {
  margin-top: 3rem;
}

.mb30 {
  margin-bottom: 3rem;
}

.mt40 {
  margin-top: 4rem;
}

.mb40 {
  margin-bottom: 4rem;
}

.mt50 {
  margin-top: 5rem;
}

.mb50 {
  margin-bottom: 5rem;
}

.mt60 {
  margin-top: 6rem;
}

.mb60 {
  margin-bottom: 6rem;
}

.mt70 {
  margin-top: 7rem;
}

.mb70 {
  margin-bottom: 7rem;
}

.mt80 {
  margin-top: 8rem;
}

.mb80 {
  margin-bottom: 8rem;
}

.mt90 {
  margin-top: 9rem;
}

.mb90 {
  margin-bottom: 9rem;
}

.mt100 {
  margin-top: 10rem;
}

.mb100 {
  margin-bottom: 10rem;
}

.mt110 {
  margin-top: 11rem;
}

.mb110 {
  margin-bottom: 11rem;
}

.mt120 {
  margin-top: 12rem;
}

.mb120 {
  margin-bottom: 12rem;
}

.bg_black {
  background-color: var(--charcoal-grey);
}
.bg_gray {
  background-color: var(--pale-grey);
}

.al_r {
  text-align: right;
}

.al_c {
  text-align: center;
}

.btn__red {
  margin: 0 auto;
  width: 100%;
  max-width: 30rem;
  height: 8rem;
}
@media screen and (max-width: 767px) {
  .btn__red {
    height: 6rem;
    font-size: 1.8rem;
  }
}
.btn__red a,
.btn__red input[type=submit] {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4);
  border: solid 3px var(--white);
  background-color: var(--rouge);
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .btn__red a,
  .btn__red input[type=submit] {
    font-size: 1.8rem;
  }
}
.btn__yellow {
  margin: 0 auto;
  width: 100%;
  max-width: 30rem;
  height: 8rem;
}
@media screen and (max-width: 767px) {
  .btn__yellow {
    height: 6rem;
    font-size: 1.8rem;
  }
}
.btn__yellow a,
.btn__yellow input[type=submit] {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4);
  border: solid 3px var(--black);
  background-color: var(--squash);
  font-size: 2rem;
  font-weight: 800;
  color: var(--black);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .btn__yellow a,
  .btn__yellow input[type=submit] {
    font-size: 1.8rem;
  }
}
.btn__black {
  margin: 0 auto;
  width: 100%;
  max-width: 30rem;
  height: 8rem;
}
@media screen and (max-width: 767px) {
  .btn__black {
    height: 6rem;
    font-size: 1.8rem;
  }
}
.btn__black a,
.btn__black input[type=submit] {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4);
  border: solid 3px var(--white);
  background-color: var(--black);
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .btn__black a,
  .btn__black input[type=submit] {
    font-size: 1.8rem;
  }
}
.btn__grey {
  margin: 0 auto;
  width: 100%;
  max-width: 30rem;
  height: 8rem;
}
@media screen and (max-width: 767px) {
  .btn__grey {
    height: 6rem;
    font-size: 1.8rem;
  }
}
.btn__grey a,
.btn__grey input[type=submit] {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4);
  border: solid 3px var(--white);
  background-color: var(--charcoal-grey);
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .btn__grey a,
  .btn__grey input[type=submit] {
    font-size: 1.8rem;
  }
}

em {
  color: var(--rouge);
}

table {
  width: 100%;
  background-color: var(--white);
}
@media screen and (max-width: 767px) {
  table {
    background-color: unset;
  }
}
table th,
table td {
  padding: 1.5rem 2rem;
  border: solid 1px var(--pale-grey);
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  table th,
  table td {
    border: none;
  }
}
table thead th {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  color: var(--white);
  background-color: var(--pale-grey);
}
@media screen and (max-width: 960px) {
  table thead th {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 767px) {
  table tbody tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
  }
}
table tbody th {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--pale-grey);
}
@media screen and (max-width: 767px) {
  table tbody th {
    padding: 0.5rem 1rem;
    background-color: var(--pale-grey);
    color: var(--white);
    border-radius: 10px 10px 0 0;
  }
}
table tbody td {
  font-size: 1.6rem;
  color: var(--pale-grey);
}
@media screen and (max-width: 767px) {
  table tbody td {
    background-color: var(--white);
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--pale-grey);
  }
}
table tbody td img {
  height: 100px;
  width: auto;
  margin: 0 1rem;
}
table tbody td ul li {
  position: relative;
  padding-left: 1.5rem;
}
table tbody td ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 6px;
  position: absolute;
  left: 0;
  top: 0.9em;
  background: var(--pale-grey);
}

.js-scrollable {
  max-width: 100%;
  white-space: nowrap;
}

section {
  padding: 12rem 0;
}
@media screen and (max-width: 767px) {
  section {
    padding: 8rem 0;
  }
}

.section_title_01 {
  font-size: 3.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.67;
  letter-spacing: 4px;
  color: var(--black);
  margin-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .section_title_01 {
    font-size: 2.2rem;
    margin-bottom: 4rem;
  }
}

.section_title_02 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.67;
  color: var(--black);
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .section_title_02 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }
}

.under_title {
  margin-top: -4rem;
  margin-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .under_title {
    margin-top: -2rem;
    margin-bottom: 4rem;
  }
}

.header {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: 2rem;
}
.header__logo {
  width: 18rem;
}
@media screen and (max-width: 960px) {
  .header__logo {
    width: 12rem;
  }
}

.footer {
  padding: 8rem 0;
  line-height: 2;
  color: var(--white);
}
@media screen and (max-width: 767px) {
  .footer {
    padding: 4rem 0 12rem;
    background-image: none;
  }
}
.footer__logo {
  width: 18rem;
  margin-bottom: 4rem;
}
@media screen and (max-width: 960px) {
  .footer__logo {
    width: 12rem;
  }
}
.footer .copyright {
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .footer .copyright {
    font-size: 1.4rem;
    text-align: center;
  }
}

.floating {
  display: none;
  z-index: 999;
  position: fixed;
  bottom: 8rem;
  right: 2rem;
  width: 30rem;
}
@media screen and (max-width: 960px) {
  .floating {
    bottom: 4rem;
  }
}
@media screen and (max-width: 767px) {
  .floating {
    width: auto;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
  }
  .floating .btn {
    max-width: 100%;
  }
  .floating .btn a {
    width: 100%;
  }
}

.main {
  background-color: var(--black);
  background-image: url(../images/bg_main.webp);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  aspect-ratio: 1921/1724;
}
@media screen and (max-width: 767px) {
  .main {
    background-image: url(../images/bg_main_sp.webp);
    aspect-ratio: 430/816;
  }
}
.main__copy {
  width: 70%;
  margin: 0 auto 2rem;
}
@media screen and (max-width: 960px) {
  .main__copy {
    margin-top: -5rem;
  }
}
@media screen and (max-width: 767px) {
  .main__copy {
    width: 100%;
    margin-top: 4rem;
  }
}
.main__name {
  width: 70%;
  margin: -4rem auto 4rem auto;
}
@media screen and (max-width: 767px) {
  .main__name {
    width: 100%;
    margin-top: -2rem;
    margin-bottom: 2rem;
  }
}
.main__btn {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .main__btn {
    flex-direction: column;
    align-items: center;
  }
}
.main__btn .btn {
  margin: 0 2rem;
}
@media screen and (max-width: 767px) {
  .main__btn .btn {
    margin: 1rem auto;
  }
}
@media screen and (max-width: 960px) {
  .main__btn .btn__black {
    display: none;
  }
}

.device {
  margin: -1px auto;
  padding: 0;
  background-color: var(--black);
}
@media screen and (max-width: 960px) {
  .device {
    display: none;
  }
}
.device__box {
  display: none;
  padding: 4rem;
  text-align: center;
  border: solid 1rem var(--white);
  color: var(--white);
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.4;
}
.device__box .device_name {
  font-size: 7rem;
  font-weight: 800;
  margin: 2rem 0;
}
.device__box .device_info {
  font-size: 4rem;
  font-weight: 800;
}
.device__box.win10, .device__box.end {
  border-color: var(--squash);
  background-color: var(--rouge);
  color: var(--white);
}
.device__box.win10 .device_name,
.device__box.win10 .device_info, .device__box.end .device_name,
.device__box.end .device_info {
  color: var(--squash);
}
.device__box.other, .device__box.win11 {
  border-color: var(--white);
  background-color: var(--charcoal-grey);
  color: var(--white);
}
.device__box.other .device_name,
.device__box.other .device_info, .device__box.win11 .device_name,
.device__box.win11 .device_info {
  color: var(--white);
}

.os-win10 .win10 {
  display: block;
}

.os-win-old .end {
  display: block;
}

.os-nonwin .other {
  display: block;
}

.os-win11 .win11 {
  display: block;
}

.risk {
  background-color: var(--black);
  color: var(--white);
  text-align: center;
}
@media screen and (max-width: 960px) {
  .risk {
    margin-top: -1px;
    padding-top: 0;
  }
}
@media screen and (max-width: 767px) {
  .risk {
    padding-bottom: 4rem;
  }
}
.risk .section_title_01 {
  color: var(--squash);
  margin-bottom: 4rem;
}
.risk__read {
  font-weight: 500;
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  .risk__read {
    font-size: 1.6rem;
  }
}
.risk__read em {
  font-size: 2.2rem;
  color: var(--squash);
}
@media screen and (max-width: 767px) {
  .risk__read em {
    font-size: 2rem;
    display: inline-block;
  }
}
.risk__list {
  padding: 3rem 6rem;
  border: solid 2px var(--squash);
  width: 70%;
  margin: 4rem auto;
  text-align: left;
}
@media screen and (max-width: 960px) {
  .risk__list {
    width: 100%;
    margin: 3rem auto;
    padding: 2rem;
  }
}
.risk__item {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 2.05;
  color: var(--squash);
}
@media screen and (max-width: 767px) {
  .risk__item {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  .risk__item:last-child {
    margin-bottom: 0;
  }
}
.risk__text {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .risk__text {
    font-size: 2.4rem;
  }
}
.risk__text em {
  padding: 0 1rem 0.3rem;
  background-color: var(--squash);
  color: var(--rouge);
}
@media screen and (max-width: 767px) {
  .risk__text em {
    display: inline-block;
  }
}

.nayami {
  background-image: url(../images/bg_nayami.webp), linear-gradient(to top, var(--rouge), var(--black));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1280/843;
  width: 100%;
  color: var(--white);
  margin-bottom: -1px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .nayami {
    background-position: left;
    aspect-ratio: 640/843;
    padding: 12rem 0;
  }
}
.nayami .section_title_01 {
  text-align: left;
  color: var(--white);
}
@media screen and (max-width: 767px) {
  .nayami .section_title_01 {
    text-align: center;
  }
}
.nayami__list {
  font-size: 2rem;
}
@media screen and (max-width: 960px) {
  .nayami__list {
    font-size: 1.6rem;
  }
}
.nayami__item {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .nayami__item {
    margin-bottom: 1rem;
  }
}
.nayami__item::before {
  content: "";
  background-image: url(../images/icon_check.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 14px;
  margin-right: 0.5rem;
}

.answer {
  background-image: linear-gradient(to top, var(--squash), var(--rouge) 72%);
  padding-top: 4rem;
}
@media screen and (max-width: 767px) {
  .answer {
    padding-top: 2rem;
  }
}
.answer .section_title_01 {
  color: var(--white);
}
.answer__servicename {
  text-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
  font-size: 8rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  color: var(--squash);
  margin-bottom: 6rem;
}
@media screen and (max-width: 960px) {
  .answer__servicename {
    font-size: 5.5rem;
  }
}
@media screen and (max-width: 767px) {
  .answer__servicename {
    font-size: 3rem;
    margin-bottom: 3rem;
  }
}
.answer__box {
  padding: 2rem 4rem;
  border-radius: 20px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4);
  background-color: var(--white);
  margin-bottom: 4rem;
  display: flex;
  align-items: center;
  width: 70%;
  margin: 0 auto 4rem;
}
@media screen and (max-width: 960px) {
  .answer__box {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .answer__box {
    flex-direction: column;
  }
}
.answer__num {
  margin-right: 4rem;
  width: 14rem;
}
@media screen and (max-width: 767px) {
  .answer__num {
    margin-right: 0;
    margin-bottom: 2rem;
    width: 10rem;
  }
}
.answer__title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--rouge);
  margin-bottom: 2rem;
}
.reason {
  padding-top: 0;
}
.reason .section_title_01 {
  background-color: var(--black);
  color: var(--white);
  padding: 0.5rem 0;
}
.reason__list {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .reason__list {
    flex-direction: column;
  }
}
.reason__item {
  width: calc((100% - 8rem) / 3);
}
@media screen and (max-width: 767px) {
  .reason__item {
    width: 100%;
    margin-bottom: 4rem;
  }
}
.reason__item__title {
  margin: 2rem auto;
  font-size: 2.6rem;
  font-weight: 800;
  text-align: center;
  line-height: normal;
}
@media screen and (max-width: 960px) {
  .reason__item__title {
    font-size: 2rem;
    margin: 1rem auto;
  }
}
.reason__text {
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
  color: var(--black);
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .reason__text {
    margin-top: 2rem;
    font-size: 2.6rem;
  }
}
.reason__text em {
  padding: 0 1rem 0.3rem;
  background-color: var(--rouge);
  color: var(--squash);
}
@media screen and (max-width: 767px) {
  .reason__text em {
    display: inline-block;
  }
}

.faq .section_title_01 {
  color: var(--white);
}
.faq__accordion-list {
  background: #ffffff;
  position: relative;
  margin-bottom: 4rem;
  border-radius: 10px;
  box-shadow: 0rem 0rem 2rem rgba(110, 110, 110, 0.2);
}
@media screen and (max-width: 767px) {
  .faq__accordion-list {
    margin-bottom: 2rem;
  }
}
.faq__accordion-list:last-child {
  margin-bottom: 0;
}
.faq__accordion-title, .faq__accordion-box {
  position: relative;
  padding: 1.5rem 6rem 1.5rem 7rem;
}
@media screen and (max-width: 767px) {
  .faq__accordion-title, .faq__accordion-box {
    padding: 1rem 4rem 1rem 5rem;
  }
}
.faq__accordion-title::before, .faq__accordion-box::before {
  font-family: "Noto Serif", serif;
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  margin-right: 2rem;
  position: absolute;
  left: 2rem;
  top: 2rem;
  width: 3rem;
  height: 3rem;
}
@media screen and (max-width: 767px) {
  .faq__accordion-title::before, .faq__accordion-box::before {
    font-size: 2.4rem;
    width: 2rem;
    height: 2rem;
    left: 1.5rem;
    top: 1.3rem;
  }
}
.faq__accordion-title {
  font-size: 1.8rem;
  font-weight: 700;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .faq__accordion-title {
    font-size: 1.6rem;
  }
}
.faq__accordion-title::before {
  content: "Q";
  font-family: "Noto Serif", serif;
  top: 1.5rem;
}
.faq__accordion-title::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 44%;
  right: 3rem;
  transform: translateY(-50%) rotate(135deg);
  width: 1.5rem;
  height: 1.5rem;
  border-top: 2px solid var(--rouge);
  border-right: 2px solid var(--rouge);
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  .faq__accordion-title::after {
    right: 1.5rem;
    width: 1rem;
    height: 1rem;
  }
}
.faq__accordion-box {
  margin-top: -1.5rem;
  font-size: 1.6rem;
  line-height: 2.38;
}
@media screen and (max-width: 767px) {
  .faq__accordion-box {
    font-size: 1.5rem;
    line-height: 2;
  }
}
.faq__accordion-box::before {
  content: "A";
  color: var(--rouge);
  font-family: "Noto Serif", serif;
}
.faq__accordion-text {
  display: none;
}
.faq__accordion-text a {
  color: var(--rouge);
  text-decoration: underline;
}
.faq__accordion-box {
  position: relative;
}
.faq .open::after {
  transform: rotate(-45deg);
}

.contact__form {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .contact__form {
    width: 100%;
  }
}
.contact__form p {
  font-size: 1.8rem;
  color: var(--black);
}
@media screen and (max-width: 767px) {
  .contact__form p {
    font-size: 1.6rem;
  }
}
.contact__form p .must {
  color: var(--rouge);
  padding-left: 0.3em;
}
.contact__form input[type=text],
.contact__form input[type=email],
.contact__form input[type=tel],
.contact__form textarea {
  width: 100%;
  border: solid 1px var(--grey);
  border-radius: 5px;
  background-color: var(--white);
  padding: 4px 8px;
}
.contact__form__item {
  margin-bottom: 4rem;
}
.contact__form input[type=radio] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid var(--grey);
  background-color: var(--white);
  border-radius: 50%;
  vertical-align: -2px;
  font-size: 1.8rem;
}
.contact__form input[type=radio]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rouge);
  content: "";
}
.contact__form input[type=checkbox] {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--grey);
  background-color: var(--white);
  vertical-align: -2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: 10px;
}
@media screen and (max-width: 767px) {
  .contact__form input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}
.contact__form input[type=checkbox]:checked:before {
  position: absolute;
  top: 1px;
  left: 6px;
  transform: rotate(50deg);
  width: 8px;
  height: 12px;
  border-right: 2px solid var(--rouge);
  border-bottom: 2px solid var(--rouge);
  content: "";
}
@media screen and (max-width: 767px) {
  .contact__form input[type=checkbox]:checked:before {
    left: 5px;
    width: 6px;
    height: 10px;
  }
}
.contact__form .agreement {
  text-align: center;
}
.contact__form .agreement p {
  font-size: 1.3rem;
}
.contact__form .agreement a {
  text-decoration: underline;
}
.contact__form .agreement a:hover {
  color: var(--rouge);
}
.contact__form .agreement .wpcf7-list-item {
  margin: 0;
}
.contact__form .wpcf7-not-valid-tip {
  color: var(--rouge);
  font-weight: 700;
  font-size: 1.6rem;
}
.contact .form__recaptcha {
  margin-top: 4rem;
  text-align: center;
  font-size: 1.5rem;
}
.contact .form__recaptcha a {
  text-decoration: underline;
}
.contact .form__recaptcha a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 767px) {
  .contact .bg_gray {
    padding: 0;
    background-color: unset;
  }
}

.wpcf7-list-item {
  margin: 0 1em 0 0;
}

form.sent .contact__form {
  display: none;
}

.wpcf7 form .wpcf7-response-output {
  margin: 2rem !important;
  background: #fff;
  text-align: center;
  padding: 1rem !important;
}

.js-inview {
  transition: 1s;
}

.js-fadeIn {
  opacity: 0;
}
.js-fadeIn.is-show {
  opacity: 1;
}

.js-fadeIn_left {
  opacity: 0;
  transform: translate(-20%, 0);
}

.js-fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.js-fadeIn_right {
  opacity: 0;
  transform: translate(20%, 0);
}

.js-fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.js-fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
}

.js-fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}