@charset "utf-8";

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

cmn.css

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

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

定義

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

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

フォントサイズ、色

--------------*/
.body {
  /* テキストのサイズ */
  --text-size1: max(3.6rem, 26px);
  --text-size2: max(3.2rem, 24px);
  --text-size3: max(2.8rem, 22px);
  --text-size4: max(2.4rem, 20px);
  --text-size5: max(2.2rem, 19px);
  --text-size6: max(1.8rem, 17px);
  --text-size7: max(1.6rem, 15px);
  --text-size8: max(1.5rem, 14px);
  --text-size9: max(1.4rem, 13px);

  /* テキストの色 */
  --text-black1: #121e29;
  --text-black2: #3d5366;
  --text-black3: #8997a3;
  --text-black4: #c5cbd1;
  --text-black5: #ebedf0;
  --text-white: #fff;
  --text-red: #db2c49;
  --text-green1: #053d09;
  --text-green2: #0a7a11;
  --text-green3: #03960d;
  --text-green4: #4bab52;
  --text-green5: #4acc52;
  --text-green6: #b1e075;
  --text-green7: #d7fa9b;

  /* ラインの色 */
  --line-black1: #121e29;
  --line-black2: #3d5366;
  --line-black3: #8997a3;
  --line-black4: #c5cbd1;
  --line-black5: #ebedf0;
  --line-white: #fff;
  --line-green1: #053d09;
  --line-green2: #0a7a11;
  --line-green3: #03960d;
  --line-green4: #4bab52;
  --line-green5: #4acc52;
  --line-green6: #b1e075;
  --line-green7: #d7fa9b;

  /* 背景 */
  --bg-white: #fff;
  --bg-green: #d7fa9b;
  --bg-gray: #ebedf0;
  --bg-shadow-white: 0.4rem 0.4rem 0px 0px var(--bg-white);  /* 戻るボタン box-shadow */
  --bg-shadow-green: 0.4rem 0.4rem 0px 0px var(--line-green6);  /* 角丸ボタン box-shadow */
  --bg-shadow-gray: 0.4rem 0.4rem 0px 0px var(--line-black4);  /* 角丸ボタン box-shadow */
  --bg-circle-gradation-green: linear-gradient(135deg,rgba(210, 250, 140, 1) 40%, rgba(162, 252, 162, 1) 100%);  /* ボタン右が濃い緑色グラデーション */
  --bg-square-gradation-green: linear-gradient(135deg,rgba(210, 250, 140, 1) 16%, rgba(162, 252, 162, 1) 50%, rgba(210, 250, 140, 1) 84%);  /* ボタン真ん中が濃い緑色グラデーション */
}

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

font

--------------*/
html {
  font-size: 62.5%; /* PC ルートのフォントサイズ10px */
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", "Noto Sans JP", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  font-size: 1.6em; /* 基本のフォントサイズ1.6em（16px） */
  line-height: 1.8;
  color: var(--text-black1);
  background-color: var(--bg-white);
}

p, ul, ol, dl, table, blockquote, address, pre, iframe, form, figure {
  font-size: var(--text-size7);
}

small {
  font-size: max(1.4rem, 13px);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.6;
}

em, i, b {
  font-style: normal;
  font-weight: 400;
}

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

picture {
  display: block;
}

a:focus {
  text-decoration: none;
}


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

layout

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

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

body

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

.body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

main

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

.main {
  flex: 1;
  position: relative;
}

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

header

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

.header {
  padding: 1.6rem 2.4rem 0;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.header__return-button {
  width: calc(100%/2 - 3.2rem);
  color: var(--line-green2);
  text-decoration: underline;
  text-underline-offset: 0.32em;
}

.header__name {
  width: calc(100% / 2 - 3.2rem);
  text-align: right;
}

.header__name__fullname {
  font-size: var(--text-size4);
  font-weight: 600;
}

.header__name__mr {
  font-size: var(--text-size8);
  font-weight: 600;
}

.header__return-button a {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.header__return-button a::before {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 100vw;
  background-color: var(--bg-white);
  box-shadow: var(--bg-shadow-white);
  border: solid 2px var(--line-black2);
  content: "";
  margin-right: 1.2rem;
}

.header__return-button a::after {
  position: absolute;
  content: "";
  background: url(../img/arrow-left-black_ic01.svg) no-repeat center center;
  background-size: 2.0rem auto;
  width: 4.8rem;
  height: 4.8rem;
}

.header__wf-logo {
  width: 100%;
  max-width: 6.4rem;
  height: auto;
}

.header__wf-logo a {
  display: block;
}

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

title

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

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

first-title

--------------*/
.first-title {
  font-size: var(--text-size3);
  margin-top: 2.4rem;
  text-align: center;
}

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

second-title

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

.second-title {
  font-size: var(--text-size6);
  margin-top: 2.4rem;
}

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

third-title

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

.third-title {
  font-size: var(--text-size6);
  margin-top: 4.0rem;
}

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

fourth-title

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

.fourth-title {
  font-size: var(--text-size7);
  margin-top: 2.4rem;
}

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

fifth-title

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

.fifth-title {
  font-size: var(--text-size7);
  margin-top: 2.4rem;
}

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

sixth-title

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

.sixth-title {
  font-size: var(--text-size7);
  margin-top: 2.4rem;
}

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

title + text

--------------*/
.first-title + .text,
.second-title + .text,
.third-title + .text,
.fourth-title + .text,
.fifth-title + .text,
.sixth-title + .text {
  margin-top: 0.8rem;
}

.second-title + .third-title,
.second-title + .fourth-title,
.second-title + .fifth-title,
.second-title + .sixth-title {
  margin-top: 1.6rem;
}

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

title-section

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

.title-section {
  padding: 3.2rem 2.4rem 0;
}

.title-section .first-title:first-of-type {
  margin-top: 0;
}

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

contents-section

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

.contents-section {
  padding: 0 2.4rem;
}

.contents-section__inner {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.contents-section .second-title:first-of-type {
  margin-top: 4.0rem;
}

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

contents-box

--------------*/
.contents-box + .contents-box {
  position: relative;
  padding-top: 4.8rem;
}

.contents-box + .contents-box::before {
  position: absolute;
  content: "";
  border-top: solid 1px var(--line-green6);
  width: 100%;
  top: 3.2rem;
}

.contents-box + .contents-box::after {
  position: absolute;
  content: "";
  background: url(../../img/lotus-yellow-green_ic01.svg) no-repeat center center, var(--bg-white);
  background-size: 4.0rem auto;
  width: 4.8rem;
  height: 3.2rem;
  top: 1.6rem;
  left: 0;
  right: 0;
  margin: auto;
}

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

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

text

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

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

text

--------------*/
.text {
  margin-top: 0.8rem;
}

.button + .text {
  margin-top: 2.4rem;
}

.warn-message {
  color: var(--text-red);
}

/* is-small */
.text.is-small,
.note-list.is-small,
.disc-list.is-small,
.number-list.is-small,
.number-brackets-list.is-small {
  font-size: var(--text-size8);
}

/* is-very-small */
.text.is-very-small,
.note-list.is-very-small,
.disc-list.is-very-small,
.number-list.is-very-small,
.number-brackets-list.is-very-small {
  font-size: var(--text-size9);
}

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

list

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

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

note-list

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

.note-list {
  margin-top: 0.8rem;
}

.note-list > li {
  position: relative;
  padding-left: 1.0em;
  margin-top: 0.4rem;
}

.note-list > li:before {
  position: absolute;
  content: "※";
  left: 0;
}

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

disc-list

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

.disc-list {
  margin-top: 0.8rem;
}

.disc-list > li {
  position: relative;
  padding-left: 1.0em;
  margin-top: 0.4rem;
}

.disc-list > li:before {
  position: absolute;
  content: "";
  top: 0.80em;
  left: 0.32em;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50vw;
  background-color: var(--text-black1);
}

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

number-list

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

.number-list {
  margin-top: 0.8rem;
}

.number-list > li {
  position: relative;
  list-style: decimal inside;
  text-indent: -2.2rem;
  padding-left: 2.2rem;
  margin-top: 0.4rem;
}

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

number-brackets-list

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

.number-brackets-list {
  margin-top: 0.8rem;
}

.number-brackets-list > li {
  position: relative;
  padding-left: 4rem;
  counter-increment: count;
  margin-top: 0.4rem;
}

.number-brackets-list > li:before {
  content: "("counter(count)")";
  position: absolute;
  top: 0;
  left: 0;
}

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

button

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

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

button
sub-button

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

.button,
.sub-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3.2rem;
  padding-bottom: 0.4rem;
  position: relative;
}

.button .button-inner {
  background-color: var(--bg-white);
  border: solid 3px var(--line-black1);
  padding: 0.6rem;
  border-radius: 100vw;
  box-shadow: var(--bg-shadow-green);
  position: relative;
  width: min(100%, 17.6em);
}

.button button,
.sub-button button {
  background-color: var(--bg-white);
  border: solid 3px var(--line-black1);
  padding: 0.6rem;
  border-radius: 100vw;
  box-shadow: var(--bg-shadow-green);
  position: relative;
  width: min(100%, 17.6em);
}

/* aタグを直接配置する場合（<div class="button"><a><span></span></a></div>） */
.button > a,
.sub-button > a {
  /* 外枠：白背景 + 黒border + padding（白いスペース） */
  background-color: var(--bg-white);
  border: solid 3px var(--line-black1);
  padding: 0.6rem;
  border-radius: 100vw;
  box-shadow: var(--bg-shadow-green);
  position: relative;
  width: min(100%, 17.6em);
  display: block;
  text-decoration: none;
}

.button > a span,
.sub-button > a span {
  /* 内側：グリーンの背景 */
  background-color: var(--line-green7);
  background-image: var(--bg-circle-gradation-green);
  font-size: var(--text-size6);
  border-radius: 100vh;
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  display: block;
  text-align: center;
  color: var(--text-black1);
  position: relative;
}

.sub-button > a span {
  background-color: var(--bg-white);
  background-image: none;
}

.button .button-inner button,
.button button span,
.button button a,
.sub-button button a,
.sub-button button span {
  background-color: var(--line-green7);
  background-image: var(--bg-circle-gradation-green);
  font-size: var(--text-size6);
  border-radius: 100vh;
  position: relative;
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  display: block;
  text-align: center;
  border: none;
  width: 100%;
  color: var(--text-black1);
  cursor: pointer;
  box-shadow: none;
}

.sub-button button a,
.sub-button button span {
  background-color: var(--bg-white);
  background-image: none;
}

.button + .button,
.button + .sub-button,
.sub-button + .button {
  margin-top: 2.4rem;
}

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

footer

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

/* footer-pagetop */
.footer-pagetop {
  position: fixed;
  bottom: 1.6rem;
  right: 2.4rem;
  z-index: 80;
  display: none;
}

.footer-pagetop a {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 100vw;
  background-color: var(--bg-white);
  display: block;
  transition: all 0.4s;
  border: solid 2px var(--line-black2);
  box-shadow: var(--bg-shadow-white);
}

.footer-pagetop a::before {
  margin: auto;
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  background: url(../img/arrow-pagetop-gray_ic01.svg) no-repeat center center;
  background-size: 2rem auto;
  width: 2.0rem;
  height: 2.0rem;
  right: 0;
  transition: all 0.4s;
}

/* footer-info-nav */
.footer-info-nav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.footer-info-nav-list__item a {
  position: relative;
  color: var(--line-green2);
  text-decoration: underline;
  text-underline-offset: 0.32em;
  padding-left: 4rem;
  display: block;
  margin-top: 0.8rem;
  font-size: var(--text-size8);
}

.footer-info-nav-list__item a::before {
  position: absolute;
  content: "";
  bottom: 0.2rem;
  background: url(../../img/support-green_ic01.svg) no-repeat center left;
  background-size: 2.8rem auto;
  width: 2.8rem;
  height: 2.8rem;
  left: 0;
}

.footer-info-nav-list__item.is-about a::before {
  background-image: url(../../img/about-green_ic01.svg);
  background-size: 2.8rem auto;
}

.footer-info-nav-list__item.is-leave a::before {
  background-image: url(../../img/leave-green_ic01.svg);
  background-size: 2.8rem auto;
}

.footer-info-nav-list__item.is-legal-notice a::before {
  background-image: url(../../img/legal-notice-green_ic01.svg);
  background-size: 2.8rem auto;
}

/* footer__copyright */
.footer__copyright {
  font-size: var(--text-size9);
  text-align: center;
  margin-top: 4rem;
}

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

text-link

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

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

plus-link

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

.plus-link {
  position: relative;
  color: var(--line-green2);
  text-decoration: underline;
  text-underline-offset: 0.32em;
  padding-right: 3.2rem;
}

.plus-link::after {
  position: absolute;
  content: "";
  bottom: -0.4rem;
  background: url(../img/plus_ic01.svg) no-repeat center right;
  background-size: 3.2rem auto;
  width: 3.2rem;
  height: 3.2rem;
  right: 0;
}

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

query-link

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

.query-link {
  position: relative;
  color: var(--line-green2);
  text-decoration: underline;
  text-underline-offset: 0.32em;
  padding-right: 3.2rem;
}

.query-link::after {
  position: absolute;
  content: "";
  bottom: -0.4rem;
  background: url(../img/query_ic01.svg) no-repeat center right;
  background-size: 3.2rem auto;
  width: 3.2rem;
  height: 3.2rem;
  right: 0;
}

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

text-link

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

.text-link {
  position: relative;
  color: var(--line-green2);
  text-decoration: underline;
  text-underline-offset: 0.32em;
  padding-right: 2.4rem;
  display: inline-block;
}

.text-link::after {
  position: absolute;
  content: "";
  bottom: 0.64rem;
  background: url(../img/arrow-right-green_ic01.svg) no-repeat center right;
  background-size: 1.6rem auto;
  width: 1.6rem;
  height: 1.6rem;
  right: 0.24rem;
}

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

logout-link

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

.form-unit_title-cont--logout {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.logout-link {
  position: relative;
  color: var(--line-green2);
  text-decoration: underline;
  text-underline-offset: 0.32em;
  padding-left: 3.2rem;
  display: block;
  margin-top: 0.8rem;
  font-size: var(--text-size8);
}

.logout-link::before {
  position: absolute;
  content: "";
  bottom: 0.4rem;
  background: url(../../img/logout-green_ic01.svg) no-repeat center left;
  background-size: 2.4rem auto;
  width: 2.4rem;
  height: 2.4rem;
  left: 0;
}

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

download-file-link

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

.download-file-link {
  position: relative;
  color: var(--line-green2);
  text-decoration: underline;
  text-underline-offset: 0.32em;
  padding-right: 3.2rem;
}

.download-file-link::after {
  position: absolute;
  content: "";
  bottom: 0;
  background: url(../img/download-file_ic01.svg) no-repeat center right;
  background-size: 2.8rem auto;
  width: 2.8rem;
  height: 2.8rem;
  right: 0;
}


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

external-link

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

.external-link {
  position: relative;
  color: var(--line-green2);
  text-decoration: underline;
  text-underline-offset: 0.32em;
  padding-right: 2.4rem;
}

.external-link:after {
  position: absolute;
  content: "";
  bottom: 0.24rem;
  background: url(../img/arrow-right-top-green_ic01.svg) no-repeat center right;
  background-size: 1.8rem auto;
  width: 1.8rem;
  height: 1.8rem;
  right: 0;
}

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

form

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

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

form-box

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

.form-unit + .form-unit {
  position: relative;
  padding-top: 6.4rem;
}

.form-unit + .form-unit::before {
  position: absolute;
  content: "";
  border-top: solid 1px var(--line-green7);
  width: 100%;
  top: 5.6rem;
}

.form-unit + .form-unit::after {
  position: absolute;
  content: "";
  background: url(../img/lotus-yellow-green_ic01.svg) no-repeat center center, var(--bg-white);
  background-size: 4.0rem auto;
  width: 4.8rem;
  height: 3.2rem;
  top: 4.0rem;
  left: 0;
  right: 0;
  margin: auto;
}

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

/* form-def */
.form-def__title {
  font-size: var(--text-size8);
  font-weight: 400;
  margin-top: 3.2rem;
}

.form-def__data__item--text {
  margin-top: 0.4rem;
  position: relative;
}

.form-def__data__item--text + .form-def__data__item--text {
  margin-top: 1.2rem;
}

.text-checkbox {
  margin-top: 6.4rem;
  position: relative;
  font-size: var(--text-size6);
}

.form-def__data__item--checkbox {
  margin-top: 0.4rem;
  position: relative;
  font-size: var(--text-size6);
}

.form-def__data__item--checkbox label,
.form-def__data__item--radio label {
  cursor: pointer;
  position: relative;
  margin-top: 1.2rem;
  display: block;
  text-indent: -4.0rem;
  padding-left: 4.0rem;
  font-size: var(--text-size6);
}

.text-checkbox input[type="checkbox"],
.form-def__data__item--checkbox input[type="checkbox"],
.form-def__data__item--radio input[type="radio"],
.form-confirm-box input[type="checkbox"] {
  position: relative;
  border-radius: 0;
  appearance: none;
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 0.4rem;
  margin-right: 0.8rem;
  cursor: pointer;
}

.text-checkbox input[type="checkbox"]::before,
.form-def__data__item--checkbox input[type="checkbox"]::before,
.form-def__data__item--radio input[type="radio"]::before,
.form-confirm-box input[type="checkbox"]::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--line-black3);
  background-color: var(--bg-white);
  content: "";
}

.text-checkbox input[type="checkbox"]::after,
.form-def__data__item--checkbox input[type="checkbox"]::after,
.form-confirm-box input[type="checkbox"]::after,
.form-def__data__item--radio input[type="radio"]::after {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  opacity: 0.0;
  transition: opacity .2s ease-out 0s;
  content: "";
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: var(--bg-green);
}

.text-checkbox input[type="checkbox"]::after,
.form-def__data__item--checkbox input[type="checkbox"]::after,
.form-confirm-box input[type="checkbox"]::after {
  background: url(../img/check-black_ic01.svg) no-repeat center center, var(--bg-green);
  background-size: 3rem auto;
}

.form-def__data__item--radio input[type="radio"]::before,
.form-def__data__item--radio input[type="radio"]::after {
  border-radius: 100vw;
}

.text-checkbox input[type="checkbox"]:checked::after,
.form-def__data__item--checkbox input[type="checkbox"]:checked::after,
.form-confirm-box input[type="checkbox"]:checked::after,
.form-def__data__item--radio input[type="radio"]:checked::after {
  opacity: 1;
}

.text-checkbox input[type="checkbox"]:checked::before,
.form-def__data__item--checkbox input[type="checkbox"]:checked::before,
.form-def__data__item--radio input[type="radio"]:checked::before,
.form-confirm-box input[type="checkbox"]:checked::before {
  border-color: var(--line-green6);
}

.form-def__data.is-credit label::before {
  position: absolute;
  content: "";
  background: url(../img/visa_lg01.svg) no-repeat center left+0.6rem;
  background-size: 2.0em auto;
  width: 2.8em;
  height: 2.0em;
  left: 4.8rem;
  border: solid 1px var(--line-black4);
}

.form-def__data.is-credit .is-mastercard::before {
  background-image: url(../img/mastercard_lg01.svg);
  background-size: 2.0em auto;
}

.form-def__data.is-credit .is-jcb::before {
  background-image: url(../img/jcb_lg01.svg);
  background-size: 2.0em auto;
}

.form-def__data.is-credit .is-americanexpress::before {
  background-image: url(../img/americanexpress_lg01.svg);
  background-size: 2.0em auto;
}

.form-def__data.is-credit input[type="radio"] {
  margin-right: 8rem;
}

.form-def + .text {
  margin-top: 1.6rem;
}

.form-def__data__item--text input[type="text"],
.form-def__data__item--text input[type="tel"],
.form-def__data__item--text input[type="email"],
.form-def__data__item--text input[type="password"],
.form-def__data__item--text input[type="time"],
.form-def__data__item--text select {
  font-size: var(--text-size6);
  width: 100%;
  padding: 1.2rem 1.6rem;
  border: 2px solid var(--line-black3);
  border-radius: 0.8rem;
}

.form-def__data__item--text input[type="text"]:hover,
.form-def__data__item--text input[type="text"]:focus,
.form-def__data__item--text input[type="tel"]:hover,
.form-def__data__item--text input[type="tel"]:focus,
.form-def__data__item--text input[type="email"]:hover,
.form-def__data__item--text input[type="email"]:focus,
.form-def__data__item--text input[type="password"]:hover,
.form-def__data__item--text input[type="password"]:focus,
.form-def__data__item--text input[type="time"]:hover,
.form-def__data__item--text input[type="time"]:focus,
.form-def__data__item--text select:hover,
.form-def__data__item--text select:focus {
  border-color: var(--text-green6);
}

/* is-judging */
.form-def__data__item--radio.is-judging {
  position: relative;
  padding-right: 7.2rem;
  opacity: 0.48;
}

.form-def__data__item--radio.is-judging::after {
  content: "審査中";
  background-color: var(--text-black3);
  position: absolute;
  top: 0.24rem;
  right: 0;
  padding: 0.8rem 1.0rem;
  color: var(--text-white);
  border-radius: 0.4rem;
  font-size: var(--text-size9);
  line-height: 1;
}

/* error-message */
.form-def__data__error-message {
  font-size: var(--text-size7);
  color: var(--text-red);
  margin-top: 0.4rem;
}

/* half-width text inputs (side by side) */
.form-def__data__item--text-half {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.form-def__data__item--text-half input[type="text"],
.form-def__data__item--text-half input[type="email"] {
  font-size: var(--text-size6);
  flex: 1;
  padding: 1.2rem 1.6rem;
  border: 2px solid var(--line-black3);
  border-radius: 0.8rem;
}

.form-def__data__item--text-half input[type="text"]:hover,
.form-def__data__item--text-half input[type="text"]:focus,
.form-def__data__item--text-half input[type="email"]:hover,
.form-def__data__item--text-half input[type="email"]:focus {
  border-color: var(--text-green6);
}

/* separator (for zip code) */
.form-def__data__separator {
  font-size: var(--text-size5);
  color: var(--text-black3);
}

/* select dropdown */
.form-def__data__item--select select {
  font-size: var(--text-size6);
  width: 100%;
  padding: 1.2rem 1.6rem;
  border: 2px solid var(--line-black3);
  border-radius: 0.8rem;
  background-color: var(--bg-white);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  padding-right: 3.6rem;
}

.form-def__data__item--select select:hover,
.form-def__data__item--select select:focus {
  border-color: var(--text-green6);
}

/* note text */
.form-def__data__note {
  font-size: var(--text-size8);
  color: var(--text-black3);
  margin-top: 0.4rem;
}

/* minus-button */
.form-def__minus-button a {
  position: absolute;
  right: 1.2rem;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 4.8rem;
  height: 4.8rem;
}

.form-def__minus-button a::before {
  position: absolute;
  content: "";
  background: url(../img/minus_ic01.svg) no-repeat center center;
  background-size: 4.8rem auto;
  width: 100%;
  height: 100%;
}

/* total-def */
.total-def {
  margin-top: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
}

.total-def__title {
  font-size: var(--text-size6);
}

.total-def__title .title +  .hour {
  margin-left: 1.6rem;
}

.total-def__title .hour,
.total-def__title .minutes {
  margin-left: 0.4rem;
  margin-right: 0.2rem;
  font-size: var(--text-size3);
}

.total-def__data {
  line-height: 1.2;
}

.total-def__data .mileage,
.total-def__data .hour,
.total-def__data .minutes,
.total-def__data .day {
  font-size: var(--text-size3);
  margin-left: 0.4rem;
  margin-right: 0.2rem;
}

/* is-check is-eye */
.form-def__eye-crossed-button a,
.form-def__eye-button a {
  position: absolute;
  right: 1.2rem;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 4.8rem;
  height: 4.8rem;
}

.form-def__eye-crossed-button a::before,
.form-def__eye-button a::before {
  position: absolute;
  content: "";
  background: url(../img/eye-crossed_ic01.svg) no-repeat center center;
  background-size: 3.2rem auto;
  width: 100%;
  height: 100%;
}

.form-def__eye-button a::before {
  background: url(../img/eye_ic01.svg) no-repeat center center;
  background-size: 3.2rem auto;
}

.form-def__data__item--text.is-pass::before {
  position: absolute;
  content: "";
  bottom: 0;
  background: url(../img/pass_ic01.svg) no-repeat center center;
  background-size: 3.2rem auto;
  width: 3.2rem;
  height: 3.2rem;
  right: 6.4rem;
  top: 0;
  margin: auto;
  opacity: 0;
  transition: opacity .2s ease-out 0s;
}

.form-def__data__item--text.is-pass.is-valid::before {
  opacity: 1;
}

/* credit-def */
.credit-def {
  font-size: var(--text-size8);
  font-weight: 400;
  margin-top: 1.6rem;
}

.credit-def__title {
  margin-top: 0.8rem;
}

.credit-def__data {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 0.2rem;
}

.credit-def__data img {
  max-width: 5.6rem;
  background-color: var(--bg-white);
  padding: 0 0.8rem;
  height: auto;
}

.credit-def__data img:not(:first-of-type) {
  margin-left: 0.6rem;
}

.form-def__data__strength {
  position: relative;
  margin: 3.2rem 3.2rem 0;
  font-size: var(--text-size8);
}

.form-def__data__strength__status {
  position: relative;
  display: none;
}

.form-def__data__strength::before {
  content: "";
  position: absolute;
  top: -1.0rem;
  width: 100%;
  height: 4px;
  background-color: var(--line-black5);
  border-radius: 100vw;
  left: 0;
}

.form-def__data__strength::after {
  content: "";
  position: absolute;
  top: -1.0rem;
  width: calc(100%/3 * 0);
  height: 4px;
  background-color: var(--line-green4);
  border-radius: 100vw;
  left: 0;
}

/* is-weak is-normal is-strong */
.form-def__data__strength.is-weak .form-def__data__strength__status.is-weak {
  display: inline-block;
}

.form-def__data__strength.is-normal .form-def__data__strength__status.is-normal {
  display: inline-block;
}

.form-def__data__strength.is-strong .form-def__data__strength__status.is-strong {
  display: inline-block;
}

.form-def__data__strength.is-weak::after {
  width: calc(100%/3 * 1);
}

.form-def__data__strength.is-normal::after {
  width: calc(100%/3 * 2);
}

.form-def__data__strength.is-strong::after {
  width: calc(100%/3 * 3);
}

.form-box.is-or {
  position: relative;
  margin-top: 12rem;
}

.form-box.is-or::before {
  position: absolute;
  content: "";
  border-top: solid 1px var(--line-green3);
  width: 100%;
  top: -6rem;
  left: 0;
  right: 0;
}

.form-box.is-or::after {
  position: absolute;
  content: "OR";
  width: 4.0rem;
  height: 4.0rem;
  top: calc(-6.0rem - 0.8em);
  left: 0;
  right: 0;
  text-align: center;
  color: var(--text-green1);
  background-color: var(--bg-green);
  margin: auto;
}

.form-def__data__item--text.is-km::after {
  position: absolute;
  content: "km";
  bottom: 1.6rem;
  right: 1.6rem;
}

/* form-unit__textarea */
.form-unit__textarea {
  margin-top: 0.4rem;
  position: relative;
}

.form-unit__textarea textarea {
  font-size: var(--text-size6);
  width: 100%;
  padding: 1.2rem 1.6rem;
  border: 2px solid var(--line-black3);
  border-radius: 0.8rem;
}

.form-unit__textarea textarea:hover,
.form-unit__textarea textarea:focus {
  border-color: var(--text-green6);
}

.form-unit__textarea__count {
  font-size: var(--text-size9);
  text-align: right;
  color: var(--text-black2);
}

.third-title + .form-def .form-def__title:first-of-type {
  margin-top: 1.6rem;
}

.total-def + .form-def .form-def__title:first-of-type {
  margin-top: 0.8rem;
}

.form-def__data__item--checkbox + .form-unit__textarea {
  margin-top: 0.8rem;
}

/* form-def__data__item--text.is-confirme */
.form-unit__textarea.is-confirme textarea,
.form-def__data__item--text.is-confirme input[type="text"],
.form-def__data__item--text.is-confirme input[type="tel"] {
  border-color: var(--bg-gray);
  background-color: var(--bg-gray);
  pointer-events: none;
}

.form-def__data__item--checkbox.is-confirme input[type="checkbox"] {
  pointer-events: none;
}

.form-def__data__item--checkbox.is-confirme input[type="checkbox"]::before {
  border-color: var(--bg-gray);
  background-color: var(--bg-gray);
  pointer-events: none;
}

.form-def__data__item--checkbox.is-confirme input[type="checkbox"]::after {
  background-color: var(--bg-gray);
  pointer-events: none;
  opacity: 1;
}

/* form-def.is-rest */
.form-def.is-rest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-top: 1.2rem;
}

.form-def.is-rest .form-def__title {
  display: none;
}

.form-def.is-rest .form-def__data {
  width: calc(50% - 2.4rem);
}

.form-def.is-rest::before {
  position: absolute;
  content: "〜";
  width: 4.8rem;
  height: auto;
  top: 2.4rem;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  aspect-ratio: 1 / 1;
}

/* 休憩時間入力欄の時計アイコンを左側に配置 */
.form-def.is-rest .form-def__data__item--text {
  position: relative;
}

.form-def.is-rest input[type="time"] {
  padding-left: 4.6rem;
}

.form-def.is-rest .time-picker-icon {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  background: url(../img/clock-gray_ic01.svg) no-repeat center center;
  background-size: contain;
  cursor: pointer;
  z-index: 1;
}

.form-def.is-rest input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

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

parts

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

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

nowrap

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

.nowrap,
.nowrap_pc,
.nowrap_pc_tablet {
  white-space: nowrap;
}

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

only

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

.tablet-only,
.tablet-sp-only,
.sp-only {
  display: none;
}

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

supportページのみ

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

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

tel-link

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

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

.tel-link a {
  display: inline-block;
  color: var(--text-green2);
  font-size: var(--text-size3);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  position: relative;
  padding-left: 3.8rem;
}

.tel-link a::before {
  position: absolute;
  content: "";
  bottom: 0;
  background: url(../../img/tel_ic01.svg) no-repeat center left;
  background-size: 3.2rem auto;
  width: 3.2rem;
  height: 3.2rem;
  left: 0;
  top: 0;
  margin: auto;
}

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

mail-link

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

.mail-link a {
  display: inline-block;
  color: var(--text-green2);
  font-size: var(--text-size3);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.32em;
  position: relative;
  padding-left: 3.8rem;
}

.mail-link a::before {
  position: absolute;
  content: "";
  bottom: 0;
  background: url(../../img/mail_ic01.svg) no-repeat center left;
  background-size: 3.2rem auto;
  width: 3.2rem;
  height: 3.2rem;
  left: 0;
  top: 0;
  margin: auto;
}

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

media queries

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

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

タブレット・スマホ

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

@media (max-width: 959px) {
  /* only */
  .pc_only {
  display: none;
  }

  .tablet-only,
  .tablet-sp-only {
  display: block;
  }
}

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

スマホ

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

@media (max-width: 519px) {
  html {
  font-size: 46.875%; /* スマホ ルートのフォントサイズ7.5px PCの75% */
  }

  /* only */
  .pc-tablet-only,
  .tablet-only {
  display: none;
  }

  .sp-only {
  display: block;
  }
}