@charset "utf-8";

/*============

login.css

=============*/

body {
  background-color: var(--bg-green);
}

/*-------------

header

--------------*/

.phone-img {
  width: 100%;
  max-width: 13.6rem;
  height: auto;
  margin: 3.2rem auto 0;
}

.phone-img img {
  margin-left: 1.0rem;
}

/*-------------

title-section

--------------*/

.kaeru-talk-img {
  width: 100%;
  max-width: 14.4rem;
  height: auto;
  margin: 0.8rem auto 0;
}

/*-------------

contents-box

--------------*/

.contents-box + .contents-box::before {
  border-top: solid 1px var(--line-green5);
}

.contents-box + .contents-box::after {
  background: url(../../img/lotus-green_ic01.svg) no-repeat center center, var(--bg-green);
  background-size: 4.0rem auto;
}

.contents-box + .contents-box:nth-of-type(odd)::after {
  background: url(../../img/lotus-green_ic02.svg) no-repeat center center, var(--bg-green);
  background-size: 4.0rem auto;
}

.contents-box.is-leave-hide {
  display: none;
}

/*-------------

form-box

--------------*/

.form-box {
  background-color: var(--bg-white);
  padding: 0.08rem 2.4rem 4.0rem;
  border-radius: 1.6rem;
  margin-top: 2.4rem;
}

/* 注釈テキストの色を本文と同じに */
.form-def__data__note {
  color: var(--text-black1);
}

/*-------------

footer

--------------*/

.footer {
  position: relative;
  padding: 0 2.4rem 4.0rem;
  margin-top: 4.0rem;
}

/*============

indexページのみ

=============*/

/*-------------

header

--------------*/

.work-frog-logo {
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin: 0.8rem auto 0;
}

.kaeru-smartphone-img {
  width: 100%;
  max-width: 24rem;
  height: auto;
  margin: auto;
}

.catch-text {
  font-size: var(--text-size6);
  text-align: center;
  margin-top: 2.4rem;
}

/*============

media queries

=============*/

/*-------------

タブレット・スマホ

--------------*/

@media (max-width: 959px) {

}

/*-------------

スマホ

--------------*/

@media (max-width: 519px) {

  /* コンビニ決済フォームの横並び入力欄を画面幅に収める */
  .form-def__data__item--text-half {
    gap: 0.4rem;
  }

  .form-def__data__item--text-half input[type="text"],
  .form-def__data__item--text-half input[type="email"] {
    padding: 1.0rem 0.8rem;
    font-size: var(--text-size7);
    min-width: 0; /* flexアイテムの最小幅を解除 */
  }

  .form-def__data__separator {
    flex-shrink: 0;
    padding: 0 0.2rem;
  }

}