/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

バーチャル展示、相談窓口ページのフォーム用CSS

MW WP フォームプラグインで作成されたフォーム用

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

.form-container {
    --form-element-my: 8px; /* 12px */
    --form-font-size: 15px; /* 16px */
    --form-item-my: 40px; /* 48px */
}

.form-container {
    border: 4px solid var(--blue-border);
    border-radius: var(--border-radius-sm);
    padding: 56px;
    font-size: 14px;
}

@media (width <= 768px){

    .form-container {
        border: 2px solid var(--blue-border);
        padding: 24px;
    }

}

/*
*****************************************************************************************

フォームの要素

*****************************************************************************************
*/

/*
***************************** checkbox, radio *****************************
*/

.form-checkboxes, 
.wpc-filters-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin: 24px 0;
}

.wpc-checkbox-item,
.wpc-radio-item,
.mwform-checkbox-field {
    position: relative;
}

.wpc-checkbox-item label,
.wpc-radio-item label {
    position: relative;
    padding-left: calc((24 + 8) / 16 * 1em);
    line-height: calc(24 / 16 * 1em);
}

.wpc-checkbox-item label a,
.wpc-radio-item label a {
    color: inherit;
    text-decoration: none;
}

.wpc-checkbox-item input[type="checkbox"],
.wpc-radio-item input[type="radio"] {
    display: inline !important; /* noneだとフォーカスが当たらない */
    /* visibility: hidden; だとフォーカスが当たらない */
    position: absolute;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}

.mwform-checkbox-field input,
.mwform-radio-field input {
    display: inline !important; /* noneだとフォーカスが当たらない */
    /* visibility: hidden; だとフォーカスが当たらない */
    position: absolute;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

/* 擬似要素 */

.wpc-checkbox-item label::before, 
.wpc-radio-item label::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: calc(24 / 16 * 1em);
    aspect-ratio: 1;
    background: #fff;
    margin-top: calc(4 / 16 * -1em);
    margin-right: .75em;
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    border: 2px solid var(--blue-border);
    border-radius: 6px;
}

.wpc-checkbox-item input[type="checkbox"]:focus-visible + label::before,
.wpc-radio-item input[type="radio"]:focus-visible + label::before {
    outline: auto;
    outline: auto -webkit-focus-ring-color;
}

/*---------- checkbox ----------*/

/* wpc */

body .wpc-filters-main-wrap .wpc-filters-checkboxes li.wpc-term-item {
    /* 余白はgap */
    margin-bottom: 0;
}

.wpc-filters-checkboxes .wpc-filter-link {
    /* 余白はgap */
    margin-right: 0;
}

/* mwform */



/*---------- radio ----------*/

.wpc-radio-item input[type="radio"] + label::before,
.wpc-radio-item input[type="radio"] + label::after {
    border-radius: 100%;
}

/*---------- checked ----------*/

/* wpc */

.wpc-checkbox-item input[type="checkbox"]:checked + label::after {
    content: '';
    display: block;
    width: calc(24 / 16 * 1em);
    height: calc(15 / 16 * 1em);
    box-sizing: border-box;
    border: .3em solid var(--blue);
    border-top: none;
    border-right: none;
    position: absolute;
    left: 0em;;
    top: 0.15em;
    rotate: -45deg;
    scale: .55;
}

.wpc-radio-item input[type="radio"]:checked + label::after {
    content: '';
    display: block;
    aspect-ratio: 1;
    box-sizing: border-box;
    background: var(--blue);
    background-clip: content-box;
    padding: calc(5 / 16 * 1em);
    width: calc(24 / 16 * 1em);
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
}

/* mwform */

.mwform-checkbox-field input[type="checkbox"]:checked + .mwform-checkbox-field-text::after {
    content: '';
    display: block;
    width: calc(24 / 16 * 1em);
    height: calc(15 / 16 * 1em);
    box-sizing: border-box;
    border: .3em solid var(--blue);
    border-top: none;
    border-right: none;
    position: absolute;
    left: 0em;;
    top: 0.15em;
    rotate: -45deg;
    scale: .55;
}

/*---------- disabled ----------*/

.wpc-checkbox-item input[type="checkbox"]:disabled + label,
.wpc-radio-item input[type="radio"]:disabled + label {
    color: #bbbbbb;
    cursor: default;
}

.wpc-checkbox-item input[type="checkbox"]:disabled + label::before,
.wpc-radio-item input[type="radio"]:disabled + label::before {
    opacity: .6;
}

/*---------- readonly ----------*/

.wpc-checkbox-item input[type="checkbox"][tabindex="-1"] + label::after,
.wpc-radio-item input[type="radio"][tabindex="-1"] + label::after {
    opacity: .2;
}

/*
***************************** inputtext *****************************
*/

.input,
input:where([type="text"],
[type="search"],
[type="url"],
[type="email"],
[type="tel"],
[type="password"]) {
    box-sizing: border-box;
    font-size: var(--form-font-size);
    border: 1px solid var(--gray-input);
    border-radius: var(--border-radius-sm);
    min-height: calc(44 / var(--form-font-size) * 1em);
    padding: 0.4em 0.8em 0.425em;
    color: var(--black);
}

.input-border-2 {
    border-width: 2px;
}

.input-full {
    display: block;
    width: 100%;
}

.input-pill {
    border-radius: 100em;
    padding-inline: 1.5em;
}

.input-lg {
    min-height: 56px;
}

.input-ml {
    min-height: 44px;
}

.input-search {
    background-image: url(/assets/images/icon/search-blue-label.svg);
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    background-position: .1em center;
}

/* 角丸の分アイコンの位置をずらす */
:where(.input-pill).input-search {
    padding-left: 2.5em;
    background-position: .75em center;
}

@media (width > 768px){

	.md\:input-lg {
        min-height: 56px;
    }

    .md\:input-ml {
        min-height: 44px;
    }

    /* 角丸の分アイコンの位置をずらす */
    :where(.input-pill.md\:input-lg).input-search {
        background-size: 1.5em 1.5em;
        padding-left: 3em;
        background-position: 1em center;
    }

}

/*
***************************** select *****************************
*/

/*
***************************** label *****************************
*/

/* .form-labelと同等 */
.form-label {
    font-weight: bold;
}

:where(.form-item-header) .form-label {
    margin-bottom: 0;
}

.required {
    color: #de0000;
    font-weight: normal;
    font-size: 13px;
    line-height: 1;
}

/*
***************************** note *****************************
*/

/*
***************************** error *****************************
*/

/*
***************************** btn *****************************
*/

/*
*****************************************************************************************

フォームの基本レイアウト

*****************************************************************************************
*/

/* .form-listと同等 */
.form-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* .form-item */
.form-item {
    letter-spacing: normal;/*form.cssの指定の上書き*/
    margin-top: var(--form-item-my);
}

.form-item:first-child {
    margin-top: 0;
}

/* .form-item-header */
.form-item-header {
    margin-bottom: var(--form-element-my);
}

/* チェックボックスがあるときは、気持ち余白を大きくしたい */
.form-item-header:has( + .form-item-body .label-checkbox) {
    margin-bottom: calc(var(--form-element-my) + 8px);
}

/* 送信ボタンなど */
.form-btn-blok {
    margin: 64px 0 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

/*
*****************************************************************************************

バーチャル展示検索

*****************************************************************************************
*/

.casestudy-search-form {
    background: var(--blue-bg-light);
    padding: 0 56px 56px;
}

.wpc-filters-section {
    display: flex;
    gap: 40px;
}

/* .wpc-filters-section間の余白は.wpc-filter-contentのmarginで指定するので、.wpc-filter-contentを含む場合はmarginを削除する */
.wpc-filters-section:has( .wpc-filter-content){
    margin-bottom: 0;
}

:where(.wpc-filters-section) + .wpc-filters-section:not(.wpc-filter-layout-submit-button) {
    border-top: 1px solid var(--blue-border);
}

.wpc-filters-section.wpc-filter-layout-submit-button {
    flex-direction: row-reverse;
    justify-content: center;
    gap: 16px;
    margin: 0;
}

.wpc-filter-header::before,
.wpc-filter-content::before {
    content: '';
    display: block;
    margin-bottom: 40px;
}

.wpc-filter-header::after,
.wpc-filter-content::after {
    content: '';
    display: block;
    margin-top: 40px;
}

.wpc-filter-layout-submit-button {
    margin: 16px 0 40px;
}

.wpc-filter-header {
    width: 120px;
    flex: 0 0 auto;
}

.wpc-filter-content {
    flex: 1 1 0;
}

.wpc-filter-title {
    font-weight: bold;
}

@media (width <= 768px){

    .wpc-filters-section {
        display: block;
    }

    .wpc-filter-header::before,
    .wpc-filter-content::before,
    .wpc-filter-header::after,
    .wpc-filter-content::after {
        content: none;
    }

}