﻿:root {
    --vw: 100vw;
    --max-view-width: 1728px;
    --color-base: #242424;
    --color-dark: #4a4a4a;
    --color-bg: var(--color-white);
    --color-border: var(--color-gray-light);
    --color-primary: #3ab6b4;
    --color-primary-selected: #ebf1f8;
    --color-sky: #5eaad7;
    --color-sky-light: #edf5fc;
    --color-sky-selected: #dfeef7;
    --color-navy: #3B71A3;
    --color-navy-selected: #e8eaee;
    --color-navy-light: #485c7c;
    --color-yellow: #ffcc00;
    --color-danger: #bb503a;
    --color-danger-light: #fcefed;
    --color-gray: #a4a4a4;
    --color-gray-light: #dbdbdb;
    --color-snow: #ededed;
    --color-facebook: #0866ff;
    --color-line: #06c755;
    --color-white: #ffffff;
    --color-black: #000000;
    --breakpoints-xs: 320px;
    --breakpoints-sm: 768px;
    --breakpoints-md: 1024px;
    --breakpoints-lg: 1440px;
    --breakpoints-xl: 1728px;
    --breakpoints-full: 9999px;
    --zindex-back: 0;
    --zindex-middle: 10;
    --zindex-front: 100;
    --zindex-nav: 200;
    --zindex-modal: 1000;
    --zindex-magic: 10000;
    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
    --font-family-base: "Noto Sans JP", sans-serif;
    --font-family-en: "Outfit", sans-serif;
    --leading-zero: 0;
    --leading-none: 1;
    --leading-quarter: 1.25;
    --leading-tight: 1.4;
    --leading-half: 1.5;
    --leading-normal: 1.6;
    --leading-base: 1.75;
    --leading-relaxed: 2;
    --leading-loose: 2.25;
    --tracking-none: 0;
    --tracking-tighter: 0.01em;
    --tracking-tight: 0.02em;
    --tracking-base: 0.05em;
    --tracking-wide: 0.1em;
    --tracking-wider: 0.2em;
    --tracking-widest: 0.28em;
    --ease-none: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    --ease-power1-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-power1-inout: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-power1-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-power2-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-power2-inout: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-power2-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-power3-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --ease-power3-inout: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-power3-out: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-power4-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    --ease-power4-inout: cubic-bezier(0.86, 0, 0.07, 1);
    --ease-power4-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-expo-inout: cubic-bezier(1, 0, 0, 1);
    --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    --ease-circ-inout: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
    --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
    --ease-back-inout: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font-family-base);
    font-feature-settings: "palt";
    line-height: var(--leading-base);
    color: var(--color-base);
    letter-spacing: var(--tracking-none);
    background-color: var(--color-bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: unset
}

.c-button {
    --button-r: 999px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: var(--leading-tight);
    color: var(--color-white);
    text-decoration: none;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    transition-timing-function: ease;
    transition-duration: 80ms;
    transition-property: color, background-color, border-color, fill, stroke;
    max-width: 300px;
    padding: 10px;
}

.c-button-white {
    background-color: var(--color-white);
    border: 1px solid var(--color-white)
}

.c-button-white .c-button-text {
    color: var(--color-primary)
}

.c-button-white .c-button-icon::before {
    background-color: var(--color-primary)
}

.c-button-white .c-button-icon svg {
    stroke: var(--color-white)
}

.c-button-stroke {
    background-color: rgba(0, 0, 0, 0);
    border-color: var(--color-white)
}

.c-button-text,
.c-button-cover-text {
    display: block;
    font-size: 18px;
    width: 100%;
    color: #fff;
}

.c-button-icon {
    position: relative;
    flex: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center
}

.c-button-icon::before {
    position: absolute;
    inset: 0;
    content: "";
    background-color: var(--color-white);
    border-radius: 999px;
    transition: transform 80ms var(--ease-power4-out), opacity 80ms ease, color 80ms ease, background-color 80ms ease, border-color 80ms ease
}

.c-button-icon svg {
    position: relative;
    z-index: 2;
    width: 20px;
    stroke: var(--color-primary);
    transition-timing-function: ease;
    transition-duration: 80ms;
    transition-property: color, background-color, border-color, fill, stroke
}

.form-attention {
    line-height: var(--leading-none)
}

.form-attention em {
    font-style: normal;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary)
}

.form-field {
    position: relative;
    display: grid;
    width: 100%;
    line-height: var(--leading-tight);
}

.form-field:not(:has(.wpcf7-submit))::before,
.form-field:not(:has(.wpcf7-submit))::after {
    position: absolute;
    top: 0;
    display: block;
    content: ""
}

.form-field:not(:has(.wpcf7-submit))::before {
    left: 0;
    background-color: var(--color-primary)
}

.form-field:not(:has(.wpcf7-submit))::after {
    right: 0;
    background-color: var(--color-gray-light)
}

.form-field-label {
    font-weight: var(--font-weight-medium);
    color: var(--color-primary)
}

.form-field:has(.wpcf7-validates-as-required) .form-field-label::after {
    position: relative;
    display: inline-block;
    padding-left: .3em;
    font-weight: var(--font-weight-bold);
    content: "※"
}

.form-field-control {
    position: relative
}

.form-field:has(.wpcf7-submit) .form-field-control,
.form-field:has(.wpcf7-acceptance) .form-field-control {
    text-align: center
}

.form-field-note {
    display: block;
    color: var(--color-gray)
}

.screen-reader-response {
    display: none
}

.wpcf7-form:not(.invalid) .wpcf7-response-output {
    display: none
}

.wpcf7-form.invalid .wpcf7-response-output {
    line-height: var(--leading-normal);
    color: var(--color-danger);
    background-color: var(--color-danger-light)
}

.wpcf7-form-control-wrap {
    position: relative;
    display: block;
    width: 100%;
    line-height: var(--leading-none)
}

.wpcf7-text,
.wpcf7-number,
.wpcf7-date,
.wpcf7-textarea,
.wpcf7-select {
    width: 100%;
    background-color: #f5f5f5;
    border-width: 0;
    outline: 0 solid rgba(0, 0, 0, 0);
    transition: outline-color 80ms ease
}

.wpcf7-text:focus,
.wpcf7-number:focus,
.wpcf7-date:focus,
.wpcf7-textarea:focus,
.wpcf7-select:focus {
    outline-color: var(--color-sky)
}

.wpcf7-text::placeholder,
.wpcf7-number::placeholder,
.wpcf7-date::placeholder,
.wpcf7-textarea::placeholder {
    color: var(--color-gray)
}

.wpcf7-range {
    width: 100%;
    appearance: auto
}

.wpcf7-textarea {
    line-height: var(--leading-normal)
}

/*.wpcf7-form-control-wrap:has(.wpcf7-select)::before {
    position: absolute;
    top: 0;
    margin: auto;
    content: "";
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 9 5.21' xmlns='http://www.w3.org/2000/svg'><path d='m4.5 5.21-4.35-4.36c-.2-.19-.2-.51 0-.7s.51-.2.7 0l3.65 3.65 3.65-3.65c.2-.2.51-.2.71 0s.2.51 0 .71l-4.35 4.35z' fill='%23242424'/></svg>");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain
}*/

.wpcf7-radio,
.wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap
}

.wpcf7-list-item {
    position: relative
}

.wpcf7-list-item label {
    cursor: pointer
}

.wpcf7-list-item input[type=radio],
.wpcf7-list-item input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

input[type=radio]+.wpcf7-list-item-label,
input[type=checkbox]+.wpcf7-list-item-label {
    position: relative;
    padding-bottom: .1em
}

input[type=radio]+.wpcf7-list-item-label::before,
input[type=radio]+.wpcf7-list-item-label::after,
input[type=checkbox]+.wpcf7-list-item-label::before,
input[type=checkbox]+.wpcf7-list-item-label::after {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    margin: auto;
    content: ""
}

input[type=radio]+.wpcf7-list-item-label::before,
input[type=checkbox]+.wpcf7-list-item-label::before {
    left: 0;
    color: var(--color-primary);
    background-color: rgba(0, 0, 0, 0);
    border: 0 solid currentcolor;
    transition: background-color 80ms ease
}

input[type=radio]+.wpcf7-list-item-label::after,
input[type=checkbox]+.wpcf7-list-item-label::after {
    aspect-ratio: 1/1;
    color: var(--color-white);
    opacity: 0;
    transition: opacity 80ms ease
}

input[type=radio]:checked+.wpcf7-list-item-label::before,
input[type=checkbox]:checked+.wpcf7-list-item-label::before {
    background-color: currentcolor
}

input[type=radio]:checked+.wpcf7-list-item-label::after,
input[type=checkbox]:checked+.wpcf7-list-item-label::after {
    opacity: 1
}

input[type=radio]+.wpcf7-list-item-label::before,
input[type=radio]+.wpcf7-list-item-label::after {
    border-radius: 9999px
}

input[type=radio]+.wpcf7-list-item-label::after {
    background-color: currentcolor
}

input[type=checkbox]+.wpcf7-list-item-label::after {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 13.48 10.65' xmlns='http://www.w3.org/2000/svg'><path d='m5.01 10.65c-.27 0-.54-.11-.72-.31l-4.29-4.5 1.45-1.38 3.52 3.7 7-8.16 1.52 1.3-7.71 9c-.18.21-.45.34-.73.35h-.03z' fill='%23fff'/></svg>");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain
}

.wpcf7-list-item a {
    color: var(--color-primary);
    text-decoration: underline
}

.wpcf7-file {
    width: 100%
}

.wpcf7-file::file-selector-button,
.wpcf7-file::-webkit-file-upload-button {
    line-height: var(--leading-none);
    color: var(--color-primary);
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    border: 0 solid currentcolor;
    border-radius: 9999px
}

.wpcf7 .c-button {
    position: relative
}

.wpcf7 .c-button:has(.wpcf7-submit:disabled) {
    pointer-events: none;
    background-color: #f5f5f5;
    border-color: #f5f5f5
}

.wpcf7 .c-button:has(.wpcf7-submit:disabled) svg {
    stroke: #f5f5f5
}

.wpcf7-submit {
    /* font-size: 0; */
    color: #fff;
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    width: 100%;
    height: 100%;
    background: transparent;
    font-size: 18px;
    vertical-align: middle;
    margin-left: 10px;
}

.wpcf7-spinner {
    display: none
}

.wpcf7-not-valid {
    background-color: var(--color-danger-light);
    outline-color: var(--color-danger)
}

.wpcf7-not-valid-tip {
    position: relative;
    display: block;
    color: var(--color-danger)
}

.wpcf7-not-valid-tip::before {
    display: inline-block;
    aspect-ratio: 1/1;
    content: "";
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg'><path d='m5.21 4.5 3.65-3.65c.2-.2.2-.51 0-.71s-.51-.2-.71 0l-3.65 3.65-3.65-3.64c-.19-.2-.51-.2-.7 0s-.2.51 0 .7l3.65 3.65-3.65 3.65c-.2.2-.2.51 0 .71.1.1.23.15.35.15s.26-.05.35-.15l3.65-3.65 3.65 3.65c.1.1.23.15.35.15s.26-.05.35-.15c.2-.2.2-.51 0-.71l-3.65-3.65z' fill='%23bb503a'/></svg>");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain
}

@media screen and (min-width: 769px) {

    .c-button {
        padding: 16px 20px;
    }

    .c-button-stroke {
        padding: 2rem 2.4rem
    }

    .c-button-text {}

    .c-button-text,
    .c-button-cover-text {}

    .c-button-icon {
        left: 0;
        z-index: 3;
        width: 2.4rem;
        height: 2.4rem
    }

    .c-button-cover {
        padding: 2rem 4.4rem 2rem 2.4rem
    }

    .c-button-arrow-left .c-button-cover {
        padding: 2rem 2.4rem 2rem 4.4rem
    }

    .c-button-cover-text {
        padding: 2rem 5.6rem 2.1rem 3.6rem
    }

    .c-button-arrow-left .c-button-cover-text {
        padding: 2rem 3.6rem 2.1rem 5.6rem;
        text-align: right
    }

    .contact-form {
        margin-top: 10%;
        margin-bottom: 10%;
    }

    .category-txt {
        margin-top: 6.4rem
    }

    .category-navi {
        column-gap: 1.2rem;
        margin-top: 3.2rem
    }

    .category-navi-link {
        column-gap: .8rem;
        padding: 1.6rem 1.9rem;
        border-width: 1px
    }

    .category-navi-link-icon {
        width: 2rem;
        border-width: 1px
    }

    .category-navi-link-icon::before {
        width: 1.2rem
    }

    .form-attention {
        padding-bottom: 3.2rem;
        font-size: 1.3rem
    }

    .form-field:not(:has(.wpcf7-submit), :has(.wpcf7-acceptance)) {
        grid-template-columns: 19.2rem 1fr;
        row-gap: 1.4rem;
        align-items: start;
        padding: 2.9rem 0 2.8rem
    }

    .form-field:has(.wpcf7-submit),
    .form-field:has(.wpcf7-acceptance) {
        padding-top: 6.9rem
    }

    .form-field:not(:has(.wpcf7-submit))::before,
    .form-field:not(:has(.wpcf7-submit))::after {
        height: 1px
    }

    .form-field:not(:has(.wpcf7-submit))::before {
        width: 19.2rem
    }

    .form-field:not(:has(.wpcf7-submit))::after {
        width: calc(100% - 19.2rem)
    }

    .form-field-label {
        display: flex;
        grid-column: 1/2;
        align-items: center;
        height: 4.8rem
    }

    .form-field:has(.wpcf7-validates-as-required) .form-field-label::after {
        top: -0.2em;
        font-size: 1.3rem
    }

    .form-field:not(:has(.wpcf7-submit), :has(.wpcf7-acceptance)) .form-field-control {
        grid-column: 2/3;
        padding-left: 4rem
    }

    .form-field-note {
        margin-top: 1.5rem;
        font-size: 1.2rem
    }

    .wpcf7-form.invalid .wpcf7-response-output {
        padding: 4rem;
        margin-bottom: 6.4rem;
        font-size: 1.8rem
    }

    .form-field-control-half .wpcf7-form-control-wrap,
    .wpcf7-form-control-wrap:has(.wpcf7-number, .wpcf7-date, .wpcf7-select) {
        width: 50%
    }

    .wpcf7-text,
    .wpcf7-number,
    .wpcf7-date,
    .wpcf7-textarea,
    .wpcf7-select {
        border-radius: .4rem;
        outline-width: 1px
    }

    .wpcf7-text,
    .wpcf7-number,
    .wpcf7-date {
        height: 4.8rem;
        padding: 0 1.6rem;
        line-height: 4.8rem
    }

    .wpcf7-range {
        height: 4.8rem
    }

    .wpcf7-textarea {
        height: 24rem;
        padding: 1.6rem
    }

    .wpcf7-select {
        height: 4.8rem;
        padding: 0 1.6rem;
        line-height: 4.8rem;
        border-radius: .4rem
    }

    /*    .wpcf7-form-control-wrap:has(.wpcf7-select)::before {
        right: 2rem;
        width: .9rem;
        height: 4.8rem
    }*/

    .wpcf7-radio,
    .wpcf7-checkbox {
        row-gap: 2rem;
        column-gap: 2rem;
        padding-top: 1.4rem
    }

    input[type=radio]+.wpcf7-list-item-label,
    input[type=checkbox]+.wpcf7-list-item-label {
        padding-left: 3rem
    }

    input[type=radio]+.wpcf7-list-item-label::before,
    input[type=checkbox]+.wpcf7-list-item-label::before {
        width: 2rem;
        height: 2rem;
        border-width: 1px
    }

    input[type=radio]+.wpcf7-list-item-label::after {
        left: .4rem;
        width: 1.2rem
    }

    input[type=checkbox]+.wpcf7-list-item-label::before {
        border-radius: .2rem
    }

    input[type=checkbox]+.wpcf7-list-item-label::after {
        left: .3rem;
        width: 1.4rem
    }

    .wpcf7-file::file-selector-button,
    .wpcf7-file::-webkit-file-upload-button {
        padding: 1.2rem 2.4rem 1rem;
        margin-right: 1.6rem;
        border-width: 1px
    }

    .wpcf7-not-valid-tip {
        margin-top: 1.3rem;
        font-size: 1.3rem
    }

    .wpcf7-not-valid-tip::before {
        width: .9rem;
        margin-right: .3rem
    }
}

@media screen and (max-width: 768px) {
    .contact-form {
        margin-top: 15%;
    }

    .form-field:not(:has(.wpcf7-submit), :has(.wpcf7-acceptance)) {
        row-gap: 8%;
        padding: 8% 0;
    }

    .form-field:has(.wpcf7-submit),
    .form-field:has(.wpcf7-acceptance) {
        padding-top: 10%;
        margin-bottom: 10%;
    }

    .form-field:not(:has(.wpcf7-submit))::before,
    .form-field:not(:has(.wpcf7-submit))::after {
        height: .2rem
    }

    .form-field:not(:has(.wpcf7-submit))::before {
        width: 14.4rem
    }

    .form-field:not(:has(.wpcf7-submit))::after {
        width: calc(100% - 14.4rem)
    }

    .form-field-label {
        display: block;
        grid-column: 1/2
    }

    .form-field:has(.wpcf7-validates-as-required) .form-field-label::after {
        top: -0.25em;
        font-size: 2rem
    }

    .form-field:not(:has(.wpcf7-submit), :has(.wpcf7-acceptance)) .form-field-control {
        grid-column: 1/2
    }

    .form-field-note {
        margin-top: 2.8rem;
        font-size: 2.2rem
    }

    .wpcf7-form.invalid .wpcf7-response-output {
        padding: 5.6rem;
        margin-bottom: 8rem;
        font-size: 3.2rem
    }

    .form-field-control-half .wpcf7-form-control-wrap,
    .wpcf7-form-control-wrap:has(.wpcf7-number, .wpcf7-date, .wpcf7-select) {
        width: 80%
    }

    .wpcf7-text,
    .wpcf7-number,
    .wpcf7-date,
    .wpcf7-textarea,
    .wpcf7-select {
        border-radius: .8rem;
        outline-width: .2rem
    }

    .wpcf7-text,
    .wpcf7-number,
    .wpcf7-date {
        height: 50px;
        padding: 0 14px;
        line-height: 50px;
    }

    .wpcf7-range {
        height: 8.8rem
    }

    .wpcf7-textarea {
        height: 32rem;
        padding: 2.8rem
    }

    .wpcf7-select {
        height: 50px;
        padding: 0 2.8rem;
        line-height: 50px;
        border-radius: .8rem
    }

    .wpcf7-form-control-wrap:has(.wpcf7-select)::before {
        right: 3.1rem;
        width: 1.8rem;
        height: 8.8rem
    }

    .wpcf7-radio,
    .wpcf7-checkbox {
        row-gap: 2.4rem;
        column-gap: 3rem
    }

    input[type=radio]+.wpcf7-list-item-label,
    input[type=checkbox]+.wpcf7-list-item-label {
        padding-left: 5.2rem
    }

    input[type=radio]+.wpcf7-list-item-label::before,
    input[type=checkbox]+.wpcf7-list-item-label::before {
        width: 3.2rem;
        height: 3.2rem;
        border-width: .2rem
    }

    input[type=radio]+.wpcf7-list-item-label::after {
        left: .6rem;
        width: 2rem
    }

    input[type=checkbox]+.wpcf7-list-item-label::before {
        border-radius: .4rem
    }

    input[type=checkbox]+.wpcf7-list-item-label::after {
        left: .5rem;
        width: 2.2rem
    }

    .wpcf7-file::file-selector-button,
    .wpcf7-file::-webkit-file-upload-button {
        padding: 2.2rem 3.9rem 1.8rem;
        margin-right: 3.2rem;
        font-size: 2.8rem;
        border-width: .2rem
    }

    .wpcf7-not-valid-tip {
        margin-top: 2.4rem;
        font-size: 2.2rem
    }

    .wpcf7-not-valid-tip::before {
        width: 1.6rem;
        margin-right: .8rem
    }

}

.c-button {
    /* transition: all .3s; */
}

.c-button:hover {
    background-color: #fff;
}

.c-button:hover .wpcf7-submit {
    color: #3ab6b4;
}

.c-button:hover .c-button-icon::before {
    background-color: #3ab6b4;
}

.c-button:hover .c-button-icon svg {
    stroke: #fff;
}