@charset "UTF-8";

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

.mailform *,
.mailform ::before,
.mailform ::after {
  box-sizing: border-box;
}


.form-field {
  list-style-type: none;
  margin: 0;
  padding: 1em 0 0;
}
.input-field .field-cell #id-jobs {
    color: #000000;
}

.field-inner {
  border-bottom: 1px solid #ccc;
  padding: 1.5em 0;
}
.field-inner.radio {
  padding-bottom: .7em;
}
.field-name {
  display: block;
  position: relative;
  margin-bottom: .33em;
}
.input-icon {
  display: block;
  position: absolute;
  top: -.03em;
  left: 9em;
}
.input-icon em {
  background-color: rgba( 221, 19, 0, 1 );
  border-radius: .7em;
  color: #fff;
  font-size: .83em;
  font-style: normal;
  font-weight: normal;
  font-weight: 400;
  line-height: 1.15;
  display: inline-block;
  padding: .2em .7em;
}
.required .input-icon em {
  background-color: rgba( 221, 19, 0, 1 );
}
.form-field .field-item {
  display: block;
}
.form-field .tel .field-item,
.form-field .postal-code .field-item {
  display: flex;
}
.form-field .tel .input-field,
.form-field .postal-code .input-field {
  width: 26%;
  max-width: 7em;
  margin: 0;
  position: relative;
}
.form-field .tel .input-field:nth-child( 2 ),
.form-field .tel .input-field:nth-child( 3 ),
.form-field .postal-code .input-field:nth-child( 2 ) {
  margin-left: 1.6em;
}
.form-field .tel .input-field:nth-child( 2 )::before,
.form-field .tel .input-field:nth-child( 3 )::before,
.form-field .postal-code .input-field:nth-child( 2 )::before {
  background-color: #666;
  content: '';
  width: .8em;
  height: 2px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.2em;
}
.select .input-field {
  display: block;
}
.select .input-field + .input-field {
  margin-top: .5em;
}
.select .field-cell {
  display: inline-block;
  position: relative;
}
.select .field-cell::after {
  border-top: 6px solid #666;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: '';
  display: block;
  position: absolute;
  top: 43%;
  right: .79em;
  z-index: -1;
}
.select .field-note {
  color: #666;
  font-size: 1em;
  display: inline-block;
  margin-right: .3em;
}
.radio .field-item {
  display: flex;
  flex-wrap: wrap;
}
.radio .input-field {
  width: 49%;
  margin-left: auto;
}
.radio .input-field:nth-child( 2n - 1 ) {
  margin-right: auto;
  margin-left: 0;
}
.radio .input-cell {
  background-color: rgba( 115, 185, 89, .05 );
  border: 1px solid #ccc;
  border-radius: 3px;
  border-top-left-radius: .7em;
  color: #333;
  font-size: 1em;
  line-height: 1.47;
  letter-spacing: -.03em;
  display: block;
  width: 100%;
  margin-right: .3em;
  margin-bottom: .63em;
  padding: .87em .3em .37em 1em;
  position: relative;
  cursor: pointer;
}
.radio .input-cell:hover {
    background-color: rgba(150,243,255,0.33);
}
.radio .input-cell::before {
  background-color: #ccc;
  border-radius: 50%;
  content: '';
  width: .7em;
  height: .7em;
  position: absolute;
  top: .3em;
  left: .3em;
}
.radio input[type="radio"]:checked + .input-cell {
    background-color: rgba(96,195,211,0.91);
    color: #fff;
}
.radio .input-cell:hover::before,
.radio input[type="radio"]:checked + .input-cell::before {
  background-color: #fff;
}

/*  */
input[type="text"], input[type="password"],
input[type="date"], input[type="datetime"],
input[type="email"], input[type="number"],
input[type="search"], input[type="tel"],
input[type="time"], input[type="url"],
input[type="submit"],
textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #272727;
  font-size: 1.13em;
  line-height: 1.47;
  width: 100%;
  padding: .51em .7em .57em;
}
::-webkit-input-placeholder { color: #afafaf; }
:-ms-input-placeholder { color: #afafaf !important; }
::-moz-placeholder { color: #afafaf; opacity: 1; }
::placeholder {
  color: #afafaf;
  opacity: 1;
}
:focus::-webkit-input-placeholder { color: transparent; }
:focus:-ms-input-placeholder { color: transparent; }
:focus::-moz-placeholder { color: transparent; }
:focus::placeholder {
  color: transparent;
}
select {
  background-color: transparent;
  color: #afafaf;
  min-width: 13em;
  cursor: pointer;
}
.select-option select {
  color: #272727;
}
input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.form-btn {
    width: 400px;
    margin: 0 auto;
    padding: 1.5em 0 1em;
    border-radius: 30px;
}
.form-btn input[type="submit"] {
    background-color: rgba(51,102,204,1.00);
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
}
.form-btn input[type="submit"]:hover {
    background-color: rgba(116,166,240,1.00);
}

@media screen and (min-width: 641px) {
  .field-inner {
    display: flex;
  }
  .field-name {
    width: 14em;
    margin-bottom: 0;
    padding-top: .57em;
    font-weight: bold;
  }
  .field-item {
    width: calc( 100% - 12.5em );
    font-weight: bold;
  }
  .select .input-field {
    padding-left: 0;
  }
  .input-icon {
    top: .46em;
  }
}
@media screen and (min-width: 769px) {
  .select .input-field {
    display: inline-block;
    padding-left: 0;
  }
  .select .input-field + .input-field {
    margin-top: 0;
    margin-left: 1.5em;
  }

}

/*  */
input:focus, textarea:focus, select:focus,
input[type="radio"]:focus + .input-cell {
  outline: 2px solid rgba( 0, 95, 204, 1 );
}

/* ==================================================
   水道緊急サポート
   メールフォーム追加設定
================================================== */


/* ---------------------------------
   PC：名前・ふりがな・メールアドレス
   入力欄を短くする
--------------------------------- */
@media screen and (min-width: 901px) {

    #id-name,
    #id-name2,
    #id-email {
        width: 420px;
        max-width: 100%;
    }

}


/* ---------------------------------
   項目名
--------------------------------- */
.mailform .field-name {
    font-weight: 600;
    color: #333;
}


/* ---------------------------------
   入力欄
--------------------------------- */
.mailform input[type="text"],
.mailform input[type="email"],
.mailform input[type="tel"],
.mailform select {
    min-height: 46px;
    border: 1px solid #c9d5df;
    border-radius: 6px;
    background: #fff;
}


/* ---------------------------------
   入力中
--------------------------------- */
.mailform input:focus,
.mailform textarea:focus,
.mailform select:focus {
    outline: none;
    border-color: #168eea;
    box-shadow: 0 0 0 3px rgba(22, 142, 234, 0.12);
}


/* ---------------------------------
   必須マーク
--------------------------------- */
.mailform .input-icon em {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}


/* ==================================================
   送信ボタン
================================================== */

.mailform .form-btn {
    width: 100%;
    max-width: 500px;
    margin: 30px auto 20px;
    padding: 0;
}

.mailform .form-btn input[type="submit"] {
    width: 100%;
    height: 65px;

    background: linear-gradient(
        to bottom,
        #168eea 0%,
        #0878d5 55%,
        #0560b2 100%
    );

    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.05em;

    border: none;
    border-radius: 8px;

    box-shadow:
        0 4px 0 #034c91,
        0 6px 12px rgba(0, 0, 0, 0.16);

    cursor: pointer;
    transition: 0.15s;
}

.mailform .form-btn input[type="submit"]:hover {
    background: linear-gradient(
        to bottom,
        #2da3f5 0%,
        #0b82df 55%,
        #0769c0 100%
    );

    transform: translateY(2px);

    box-shadow:
        0 2px 0 #034c91,
        0 4px 8px rgba(0, 0, 0, 0.15);
}

.mailform .form-btn input[type="submit"]:active {
    transform: translateY(4px);
    box-shadow: none;
}


/* ==================================================
   スマホ
================================================== */

@media screen and (max-width: 640px) {

    /* 項目ごとの上下余白 */
    .mailform .field-inner {
        padding: 1.15em 0;
    }


    /* フォーム内部をスマホ幅に収める */
    .mailform,
    .mailform .form-field,
    .mailform .field-inner,
    .mailform .field-item,
    .mailform .input-field {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* 入力欄 */
    .mailform input[type="text"],
    .mailform input[type="email"],
    .mailform input[type="tel"],
    .mailform textarea,
    .mailform select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }

    .mailform input[type="text"],
    .mailform input[type="email"],
    .mailform input[type="tel"],
    .mailform select {
        min-height: 44px;
    }


    /* selectがスマホ幅を超えないようにする */
    .mailform select {
        min-width: 0;
    }


    /* 送信ボタン */
    .mailform .form-btn {
        width: 92%;
        max-width: none;
        margin: 25px auto 20px;
    }

    .mailform .form-btn input[type="submit"] {
        width: 100%;
        height: 60px;
        font-size: 18px;
    }

}
/* =========================================
   スマホフォーム 最終調整
========================================= */
@media screen and (max-width: 640px) {

    /* 1項目ごとの上下余白 */
    .mailform .field-inner {
        padding: 10px 0;
    }

    /* 項目名 */
    .mailform .field-name {
        margin-bottom: 8px;
        font-size: 15px;
        line-height: 1.5;
    }

    /* 入力欄 */
    .mailform input[type="text"],
    .mailform input[type="email"],
    .mailform input[type="tel"],
    .mailform select {
        width: 100%;
        max-width: 100%;
        min-height: 46px;
        padding: 8px 10px;
        font-size: 16px;
        box-sizing: border-box;
    }

    /* お問い合わせ内容 */
    .mailform textarea {
        width: 100%;
        max-width: 100%;
        height: 150px;
        min-height: 150px;
        padding: 10px;
        font-size: 16px;
        line-height: 1.6;
        box-sizing: border-box;
    }

    /* 送信ボタンを少し大きく */
    .mailform .form-btn {
        width: 94%;
        max-width: none;
        margin: 28px auto 22px;
    }

    .mailform .form-btn input[type="submit"] {
        width: 100%;
        height: 60px;
        font-size: 18px;
        font-weight: bold;
    }

}

/* =========================================
   スマホフォーム 項目別レイアウト調整
========================================= */
@media screen and (max-width: 640px) {

    /* ---------------------------------
       通常の入力欄
    --------------------------------- */
    #id-name,
    #id-name2,
    #id-email,
    #id-prefectures,
    #id-address {
        width: 100%;
        max-width: 100%;
        min-height: 46px;
        font-size: 16px;
        padding: 9px 10px;
        box-sizing: border-box;
    }


    /* ---------------------------------
       ラベルと入力欄の間隔
    --------------------------------- */
    .mailform .field-name {
        display: block;
        width: 100%;
        margin-bottom: 8px;
        padding-top: 0;
        font-size: 15px;
        line-height: 1.5;
    }

    .mailform .field-item {
        display: block;
        width: 100%;
        max-width: 100%;
    }


    /* ---------------------------------
       電話番号
       3分割のまま横一列
    --------------------------------- */
    .mailform .tel .field-item {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 14px;
    }

    .mailform .tel .input-field {
        width: calc((100% - 28px) / 3);
        max-width: none;
        margin: 0 !important;
    }

    .mailform .tel .input-field:nth-child(2),
    .mailform .tel .input-field:nth-child(3) {
        margin-left: 0;
    }

    /* 既存のハイフン表示位置を調整 */
    .mailform .tel .input-field:nth-child(2)::before,
    .mailform .tel .input-field:nth-child(3)::before {
        left: -10px;
        width: 7px;
    }

    #id-tel1,
    #id-tel2,
    #id-tel3 {
        width: 100%;
        min-height: 46px;
        font-size: 16px;
        text-align: center;
        padding-left: 4px;
        padding-right: 4px;
    }


    /* ---------------------------------
       トラブルの場所
       2列 × 2段
    --------------------------------- */
    .mailform .radio .field-item {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .mailform .radio .input-field {
        width: calc(50% - 4px);
        margin: 0;
    }

    .mailform .radio .input-cell {
        min-height: 46px;
        margin: 0;
        padding: 11px 8px 8px 18px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }


    /* ---------------------------------
       お問い合わせ内容
    --------------------------------- */
    #id-contents {
        width: 100%;
        max-width: 100%;
        height: 120px;
        min-height: 120px;
        padding: 10px;
        font-size: 16px;
        line-height: 1.6;
        box-sizing: border-box;
    }


    /* ---------------------------------
       項目ごとの縦余白
    --------------------------------- */
    .mailform .field-inner {
        padding: 14px 0;
    }


    /* ---------------------------------
       必須マーク
    --------------------------------- */
    .mailform .input-icon {
        position: static;
        display: inline-block;
        margin-left: 7px;
    }

    .mailform .input-icon em {
        font-size: 11px;
        padding: 3px 7px;
        vertical-align: middle;
    }


    /* ---------------------------------
       送信ボタン
    --------------------------------- */
    .mailform .form-btn {
        width: 100%;
        max-width: none;
        margin: 25px auto 15px;
    }

    .mailform .form-btn input[type="submit"] {
        width: 100%;
        height: 58px;
        font-size: 17px;
        font-weight: bold;
    }

}

/* =====================================
   個人情報の取り扱い
===================================== */

.privacy-area {
    width: 100%;
    max-width: 700px;
    margin: 30px auto 20px;
    box-sizing: border-box;
}

.privacy-area h3 {
    margin: 0 0 12px;
    text-align: center;
    font-size: 18px;
    color: #064b9b;
}

.privacy-scroll {
    height: 180px;
    overflow-y: auto;
    padding: 15px;
    border: 1px solid #bbb;
    background: #fff;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
}

.privacy-scroll p {
    margin: 0 0 14px;
}

.privacy-check {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.privacy-check input {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

#submitButton:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media screen and (max-width: 480px) {

    .privacy-area {
        margin: 20px auto 15px;
    }

    .privacy-scroll {
        height: 160px;
        padding: 12px;
        font-size: 12px;
        line-height: 1.6;
    }

    .privacy-check {
        font-size: 13px;
        align-items: flex-start;
    }
}

/* =====================================
   個人情報の取り扱い
===================================== */

.privacy-area {
    width: 100%;
    max-width: 700px;
    margin: 30px auto 20px;
    box-sizing: border-box;
}

.privacy-area h3 {
     margin: 0 0 8px !important;
    padding: 0 0 8px;

    text-align: left;
    font-size: 17px;
    font-weight: bold;
    color: #064b9b;

    border: none;
    background: none;
}

.privacy-scroll {
    height: 180px;
    overflow-y: auto;
    padding: 15px;
    border: 1px solid #bbb;
    background: #fff;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
}

.privacy-scroll p {
    margin: 0 0 14px;
}

.privacy-check {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.privacy-check input {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

@media screen and (max-width: 480px) {

    .privacy-area {
        margin: 20px auto 15px;
    }

    .privacy-scroll {
        height: 160px;
        padding: 12px;
        font-size: 12px;
        line-height: 1.6;
    }

    .privacy-check {
        font-size: 13px;
        align-items: flex-start;
    }
}
/* =====================================
   同意前：送信ボタン無効
===================================== */

.mailform #submitButton:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(35%);
}

.mailform #submitButton:disabled:hover {
    transform: none;
    box-shadow:
        0 4px 0 #034c91,
        0 6px 12px rgba(0, 0, 0, 0.16);
}