/* =========================================================
   FormMailer Inquiry
   東京アセットソリューション お問い合わせフォーム共通
========================================================= */


/* =========================================================
   既存お問い合わせ共通パーツ
========================================================= */

/* 必須 */
span.necessary {
    display: inline-block;
    padding-block: 0.45rem 0.55rem;
    padding-inline: 0.875rem;
    margin-inline-end: 1em;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--c-white);
    background-color: var(--c-dark-navy);
    border-radius: 30px;
}


/* 電話番号 */
.tel-large {
    font-weight: 700;
    transition: color 0.3s;
}

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

    .tel-large {
        font-size: 1.35rem;
    }

}

@media print, screen and (min-width: 992px) {

    .tel-large {
        font-size: 1.75rem;
    }

}

@media (hover: hover) {

    .tel-large:hover {
        color: var(--c-dark-navy);
    }

}


/* =========================================================
   FormMailer版 上部案内表示
   旧Snow Monkey Forms用CSSの display:none を解除
========================================================= */

main:has(.tas-inquiry-form) .input-form-attention {
    display: block !important;
}

main:has(.tas-inquiry-form) .input-form-attention .contents-text:has(.necessary) {
    line-height: 1.75;
}


/* =========================================================
   FormMailer全体
========================================================= */

.tas-inquiry-form {
    position: relative;
    margin-inline: var(--s-container-inline);
    color: var(--c-text);
}


/* 基本余白 */
@media only screen and (max-width: 991.98px) {

    .tas-inquiry-form {
        margin-block: 5.75rem 5rem;
    }

}

@media print, screen and (min-width: 992px) {

    .tas-inquiry-form {
        margin-block: 12rem 10rem;
    }

}


/* =========================================================
   フォーム本体
========================================================= */

.tas-form-body {
    width: 100%;
    background-color: var(--c-white-gray);
}


/* フォーム本体上下余白 */
@media only screen and (max-width: 991.98px) {

    .tas-form-body {
        padding-block: 3.25rem;
    }

}

@media print, screen and (min-width: 992px) {

    .tas-form-body {
        padding-block: 6.25rem;
    }

}


/* =========================================================
   行
========================================================= */

.tas-form-row {
    background-color: var(--c-white-gray);
}


/* ---------------------------------------------------------
   Smartphone 0 - 575px
--------------------------------------------------------- */

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

    .tas-form-row {
        position: relative;
        display: block;
        padding-block: 1.25rem 2rem;
        padding-inline: 1.5rem;
    }

    .tas-form-row::before,
    .tas-form-row::after {
        position: absolute;
        top: -1px;
        height: 1px;
        content: "";
    }

    .tas-form-row::before {
        left: 1.5rem;
        width: 5rem;
        background-color: var(--c-dark-navy);
    }

    .tas-form-row::after {
        right: 1.5rem;
        width: calc(100% - 8rem);
        background-color: var(--c-blue-gray);
    }

    .tas-form-label {
        margin-block-end: 0.8rem;
    }

    .tas-form-field {
        line-height: 2.3;
    }

}


/* ---------------------------------------------------------
   Tablet以上
--------------------------------------------------------- */

@media print, screen and (min-width: 576px) {

    .tas-form-row {
        display: grid;
        align-items: stretch;
    }

    .tas-form-label,
    .tas-form-field {
        padding-block: 1.25rem;
    }

    .tas-form-label {
        position: relative;
        border-block-start: 1px solid var(--c-dark-navy);
    }

    .tas-form-field {
        position: relative;
        border-block-start: 1px solid var(--c-blue-gray);
    }

    .tas-form-row:last-child .tas-form-label {
        border-block-end: 1px solid var(--c-dark-navy);
    }

    .tas-form-row:last-child .tas-form-field {
        border-block-end: 1px solid var(--c-blue-gray);
    }

}


/* ---------------------------------------------------------
   Tablet 576 - 991
--------------------------------------------------------- */

@media only screen and (min-width: 576px) and (max-width: 991.98px) {

    .tas-form-row {
        grid-template-columns: 18.25rem minmax(0, 1fr);
    }

    .tas-form-label {
        padding-inline-start: 2.5rem;
    }

    .tas-form-field {
        padding-inline: 1.8rem 2.5rem;
    }

}


/* ---------------------------------------------------------
   Desktop 992 - 1399
--------------------------------------------------------- */

@media only screen and (min-width: 992px) and (max-width: 1399.98px) {

    .tas-form-row {
        grid-template-columns: 20rem minmax(0, 1fr);
    }

    .tas-form-label,
    .tas-form-field {
        padding-block: 2.25rem;
    }

    .tas-form-label {
        padding-inline-start: 5rem;
    }

    .tas-form-field {
        padding-inline: 4rem 5rem;
    }

}


/* ---------------------------------------------------------
   Wide Desktop 1400+
--------------------------------------------------------- */

@media print, screen and (min-width: 1400px) {

    .tas-form-row {
        grid-template-columns: 25rem minmax(0, 1fr);
    }

    .tas-form-label,
    .tas-form-field {
        padding-block: 2.25rem;
    }

    .tas-form-label {
        padding-inline-start: 10rem;
    }

    .tas-form-field {
        padding-inline: 7.25rem 10rem;
    }

}


/* =========================================================
   ラベル
========================================================= */

.tas-form-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
}

.tas-form-label .necessary {
    margin-inline-end: 0;
}

.tas-form-label .optional {
    display: inline-block;
    padding-block: 0.45rem 0.55rem;
    padding-inline: 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--c-pure-black);
    background-color: var(--c-blue-gray);
    border-radius: 30px;
}


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

    .tas-form-label {
        gap: 0.5rem;
        font-size: 1rem;
        line-height: 1.75;
    }

}

@media print, screen and (min-width: 992px) {

    .tas-form-label {
        font-size: 1.125rem;
        line-height: 1.5555555556;
    }

}


/* =========================================================
   入力欄
========================================================= */

.tas-form-field input,
.tas-form-field textarea {
    width: 100%;
    padding: 1.4rem 1.25rem;
    line-height: 1.3;
}


.tas-form-field .select {
    width: clamp(50%, 23.75rem, 100%);
}

.tas-form-field .select select {
    width: 100%;
}


/* textarea */
@media only screen and (max-width: 991.98px) {

    .tas-form-field textarea {
        height: 12.5rem;
    }

}

@media print, screen and (min-width: 992px) {

    .tas-form-field textarea {
        height: 21.25rem;
    }

}


/* textareaラベルは上揃え */
.tas-form-row-textarea .tas-form-label {
    align-items: flex-start;
}

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

    .tas-form-row-textarea .tas-form-label {
        padding-block-start: 2rem;
    }

}

@media print, screen and (min-width: 992px) {

    .tas-form-row-textarea .tas-form-label {
        padding-block-start: 3.09375rem;
    }

}


/* =========================================================
   個人情報保護方針
========================================================= */

.tas-form-privacy {
    text-align: center;
}

.tas-form-privacy-text a {
    color: var(--c-dark-navy);
}

@media (hover: hover) {

    .tas-form-privacy-text a:hover {
        text-decoration: underline;
    }

}


/* Smartphone */
@media only screen and (max-width: 575.98px) {

    .tas-form-privacy {
        margin-block-start: 3.25rem;
    }

}


/* Tablet */
@media only screen and (min-width: 576px) and (max-width: 991.98px) {

    .tas-form-privacy {
        margin-block-start: 6.5rem;
    }

}


/* Desktop */
@media print, screen and (min-width: 992px) {

    .tas-form-privacy {
        margin-block-start: 9.5rem;
    }

}


.tas-form-privacy-text {
    margin-block-end: 1.25rem;
}


/* =========================================================
   個人情報保護方針チェック
========================================================= */

.tas-form-privacy-check {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}


/*
 * サイト共通CSSの影響を避けるため、
 * 実inputはアクセシビリティを保ったまま視覚的に隠し、
 * 直後の span::before でチェックボックスを描画する。
 */
.tas-form-privacy-check input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}


.tas-form-privacy-check span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}


.tas-form-privacy-check span::before {
    display: inline-grid;
    place-content: center;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    box-sizing: border-box;
    content: "";
    color: var(--c-white);
    background-color: var(--c-white);
    border: 1px solid var(--c-dark-navy);
    border-radius: 2px;
}


.tas-form-privacy-check input[type="checkbox"]:checked + span::before {
    content: "✓";
    background-color: var(--c-dark-navy);
    border-color: var(--c-dark-navy);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}


.tas-form-privacy-check input[type="checkbox"]:focus-visible + span::before {
    outline: 2px solid var(--c-dark-navy);
    outline-offset: 2px;
}


/* =========================================================
   確認ボタン
========================================================= */

.tas-form-submit {
    display: flex;
    justify-content: center;
    margin-block-start: 3.25rem;
}


.tas-form-submit .button {
    margin-inline: 0;
}


/* 個人情報保護方針に未同意ならボタン無効 */
.tas-inquiry-form:not(:has(.tas-form-privacy-check input[type="checkbox"]:checked))
.tas-form-submit-button {
    pointer-events: none !important;
    user-select: none !important;
    background-color: var(--c-pure-gray) !important;
    border-color: var(--c-pure-gray) !important;
}


/* =========================================================
   FormMailerフォーム共通 余白調整

   通常お問い合わせ / 採用お問い合わせ 共通

   ・上部案内からフォーム開始までの余白を縮小
   ・フォーム上部の不要なグレー空白を削除
   ・先頭罫線をフォーム上端に揃える
========================================================= */


/* ---------------------------------------------------------
   Smartphone / Tablet
--------------------------------------------------------- */

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

    /*
     * 旧Snow Monkey Forms用CSSの
     * input-form-attention下余白を縮小
     */
    main:has(.tas-inquiry-form) .input-form-attention {
        margin-block-end: 3rem !important;
    }

    /*
     * FormMailerフォーム自体の上マージンを解除
     */
    main:has(.tas-inquiry-form) .tas-inquiry-form {
        margin-block-start: 0;
    }

    /*
     * グレー背景上部の不要な空白を削除
     */
    main:has(.tas-inquiry-form) .tas-form-body {
        padding-block-start: 0;
    }

}


/* ---------------------------------------------------------
   Desktop
--------------------------------------------------------- */

@media print, screen and (min-width: 992px) {

    /*
     * 電話番号・必須案内からフォームまでの余白
     */
    main:has(.tas-inquiry-form) .input-form-attention {
        margin-block-end: 4rem !important;
    }

    /*
     * FormMailer共通の大きな上マージンを解除
     */
    main:has(.tas-inquiry-form) .tas-inquiry-form {
        margin-block-start: 0;
    }

    /*
     * フォーム本体上部の空白のみ削除
     * 下側余白は維持
     */
    main:has(.tas-inquiry-form) .tas-form-body {
        padding-block-start: 0;
    }

}


/* =========================================================
   Smartphone微調整
========================================================= */

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

    .tas-form-body {
        padding-block: 0;
    }

    .tas-form-field .select {
        width: 100%;
        min-width: 0;
    }

    .tas-form-submit {
        margin-inline: 1.5rem;
    }

    .tas-form-submit .button {
        width: 100% !important;
    }

}