@charset "UTF-8";

/* ベース =================================== */
/* 非活性 */
:disabled {
    color: #666666;
    cursor: not-allowed;
}

/* ボタン */
.contact-form__submit--group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}
.contact-form__submit {
    /* リセット */
    background: transparent;
    border: none;
    outline: none;
    color: #1a1a1a;

    /* オリジナルデザイン */
    margin: 0 auto;
    padding: 16px;
    min-width: 160px;
    background: #0a0a0a;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fffffc;
    cursor: pointer;
}
.contact-form__submit--group .contact-form__submit {
    margin: 0;
}
.contact-form__submit:disabled {
    background: #e4e4e4;
    color: #fffffc;
    cursor: not-allowed;
}

/* プレースホルダー */
::placeholder {
    color: #0a0a0a48;
    font-size: 16px;
}

/* テキストボックス */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="datetime-locale"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="search"],
input[type="url"] {
    padding: 8px;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #1a1a1a;
    font-family: var(--font-base);
    font-size: 16px;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="datetime-locale"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled,
input[type="search"]:disabled,
input[type="url"]:disabled,
input[type="text"]:read-only,
input[type="email"]:read-only,
input[type="tel"]:read-only,
input[type="password"]:read-only,
input[type="number"]:read-only,
input[type="datetime-locale"]:read-only,
input[type="date"]:read-only,
input[type="time"]:read-only,
input[type="month"]:read-only,
input[type="week"]:read-only,
input[type="search"]:read-only,
input[type="url"]:read-only {
    color: #666666;
    cursor: not-allowed;
}

.text__wrap {
    border: 1px solid #1a1a1a;
    border-radius: 4px;
    position: relative;
}
.text__wrap:has(input:focus) {
    outline: 2px solid #0a0a0a77;
}
.text__wrap:has(input:read-only),
.text__wrap:has(input:disabled) {
    background: #e4e4e4;
}

/* テキストエリア */
textarea {
    padding: 8px;
    width: 100%;
    height: 100%;
    min-height: 80px;
    background: transparent;
    border: none;
    outline: none;
    color: #1a1a1a;
    font-size: 16px;
    resize: vertical;
}

textarea:disabled,
textarea:read-only {
    color: #666666;
    cursor: not-allowed;
}

.textarea__wrap {
    border: 1px solid #1a1a1a;
    border-radius: 4px;
    position: relative;
}
.textarea__wrap:has(textarea:focus) {
    outline: 2px solid #0a0a0a77;
}
.textarea__wrap:has(textarea:read-only),
.textarea__wrap:has(textarea:disabled) {
    background: #e4e4e4;
}

/* ラジオボタン */
input[type="radio"] {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.radio__wrap {
    margin: 4px 4px 0 0;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    line-height: 1;
}
.edge .radio__wrap {
    margin: 0 4px 0 0;
}

.radio__wrap::before {
    width: 100%;
    height: 100%;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    display: inline-block;
    content: "";
    cursor: pointer;
}
.radio__wrap:has(input[type="radio"]:disabled)::before {
    background: #e4e4e4;
}
.radio__wrap:has(input[type="radio"]:checked)::after {
    width: 60%;
    height: 60%;
    background: #0a0a0a;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3.2px;
    content: "";
    cursor: pointer;
}
.edge .radio__wrap:has(input[type="radio"]:checked)::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.radio__wrap:has(input[type="radio"]:disabled)::after {
    background: #999999;
    cursor: not-allowed;
}

.radio__wrap+label {
    margin-right: 16px;
    cursor: pointer;
}
.radio__wrap:has(input[type="radio"]:disabled)+label {
    cursor: not-allowed;
}

/* チェックボックス */
input[type="checkbox"] {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.checkbox__wrap {
    margin: 4px 4px 0 0;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    line-height: 1;
}
.checkbox__wrap::before {
    width: 100%;
    height: 100%;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
    display: inline-block;
    content: "";
    cursor: pointer;
}
.checkbox__wrap:has(input[type="checkbox"]:disabled)::before {
    background: #e4e4e4;
}
.checkbox__wrap:has(input[type="checkbox"]:checked)::after {
    width: 12px;
    height: 8px;
    border-bottom: 2px solid #0a0a0a;
    border-left: 2px solid #0a0a0a;
    position: absolute;
    top: 1.5px;
    left: 2.5px;
    transform: rotate(-45deg);
    content: "";
    cursor: pointer;
    pointer-events: none;
}
.checkbox__wrap:has(input[type="checkbox"]:disabled)::after {
    border-bottom: 2px solid #999999;
    border-left: 2px solid #999999;
    cursor: not-allowed;
}

.checkbox__wrap+label {
    margin-right: 16px;
    cursor: pointer;
}
.checkbox__wrap:has(input[type="checkbox"]:disabled)+label {
    cursor: not-allowed;
}

/* プルダウンリスト */
select {
    padding: 8px 40px 8px 8px;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #1a1a1a;
    font-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

select:disabled {
    color: #666666;
    cursor: not-allowed;
}

.select__wrap {
    width: max-content;
    border: 1px solid #1a1a1a;
    border-radius: 4px;
    position: relative;
}
.select__wrap::after {
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #1a1a1a;
    border-left: 1px solid #1a1a1a;
    display: inline-block;
    position: absolute;
    top: 9px;
    right: 8px;
    transform: rotate(-45deg);
    content: "";
    pointer-events: none;
}
.select__wrap:has(select:disabled) {
    background: #e4e4e4;
}

/* お問い合わせページ =================================== */
/* お問い合わせフロー */
.flow__list {
    margin: 40px auto;
    width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 160px;
    position: relative;
    z-index: 1;
    counter-reset: flow;
}

.flow__list::before {
    width: 100%;
    height: 1px;
    background: #0a0a0a;
    position: absolute;
    top: 25%;
    left: 0;
    z-index: -1;
    content: "";
}

.flow__item {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.flow__item::before {
    padding: 8px;
    width: 48px;
    height: 32px;
    background: #fffffc;
    border: 1px solid #0a0a0a;
    border-radius: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #0a0a0a;
    content: counter(flow);
    counter-increment: flow 1;
}

.flow__item.current::before,
.flow__item.completed::before {
    background: #0a0a0a;
    color: #fffffc;
}

/* お問い合わせメッセージ */
.contact-form__message {
    margin: 80px auto;
    text-align: center;
}

.contact-form__message p {
    margin: 8px 0;
}

/* お問い合わせフォーム */
.contact-form {
    margin: 40px auto;
    display: grid;
    gap: 40px;
}

.field {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.field__label {
    flex-basis: 25%;
    display: flex;
    align-items: center;
    gap: 16px;
}
.contact-form:not(.contact-form__confirm) .field__label::after {
    width: 56px;
    padding: 4px;
    background: #e6e6e6;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #1a1a1a;
    line-height: 1;
    content: "任意";
}
.contact-form:not(.contact-form__confirm) .field:has([required]) .field__label::after {
    background: #f8cecc;
    content: "必須";
}

.field__label label {
    font-weight: 700;
}

.field__content {
    flex-basis: 70%;
}
.field__content:has(.radio__wrap) {
    display: flex;
    align-items: center;
}

/* プライバシーポリシー */
.privacy-policy {
    margin: 0 auto;
    width: 80%;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    gap: 8px 0;
}

.privacy-policy__inner {
    flex: 1 0 100%;
    width: 100%;
    height: 360px;
    padding: 32px;
    border: 1px solid #1a1a1a;
    overflow-y: scroll;
}
@supports (scrollbar-color: auto) {
    .privacy-policy__inner {
        scrollbar-color: #0a0a0a #e4e4e4;
    }
}
@supports selector(::-webkit-scrollbar) {
    .privacy-policy__inner::-webkit-scrollbar {
        width: 12px;
    }
    .privacy-policy__inner::-webkit-scrollbar-track {
        background: #e4e4e4;
    }
    .privacy-policy__inner::-webkit-scrollbar-thumb {
        background: #0a0a0a;
        border-radius: 10px;
    }
    .privacy-policy__inner::-webkit-scrollbar-thumb:hover {
        background: #022a50;
    }
}

.privacy-policy__title {
    margin: 0 0 24px 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.privacy-policy__inner .wp-block-heading {
    margin: 14px 0 12px;
    font-family: 'Zen Old Mincho', sans-serif;
    font-size: 16px;
}

.privacy-policy p {
    margin: 8px 0;
    font-size: 14px;
}

.privacy-policy li {
    font-size: 14px;
}

/* エラーメッセージ */
.error-message {
    margin: 8px 0 0;
    width: 100%;
    color: #ea6b66;
}
.privacy-policy .error-message {
    text-align: center;
}