@charset "utf-8";
@import "anime.css";

/*
------------
contact.css
------------
*/
/* form_area */
#form_area {
    margin: 250px 0 0 0;
}
#form_area .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
}
#form_area .inner form .form_item:not(:first-child) {
    margin: 5px 0 0 0;
}
#form_area .inner form .form_item {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 5px;
}
#form_area .inner form .form_item p.form_label {
    width: 310px;
    background-color: #f7f7f7;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
    padding: 25px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
#form_area .inner form .form_item p.form_label span.required,
#form_area .inner form .privacy_chk span.required {
    font-size: 1.3rem;
    color: var(--white);
    background-color: #FF3333;
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
    position: relative;
}
#form_area .inner form .form_item .item {
    width: calc(100% - 310px - 5px);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
    padding: 25px;
}
#form_area .inner form .form_item input[type="text"],
#form_area .inner form .form_item input[type="email"],
#form_area .inner form .form_item input[type="tel"],
#form_area .inner form .form_item textarea {
    font-family: "Shippori Mincho B1", serif;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
    width: 100%;
    padding: 15px;
    background-color: var(--white);
    border: 1px solid #DBDBDB;
}
#form_area .inner form .form_item textarea {
    height: 200px;
}
#form_area .inner form .form_item input::placeholder,
#form_area .inner form .form_item textarea::placeholder {
    color: #A2A2A2;
}
#form_area .inner form .form_item input,
#form_area .inner form .form_item textarea {
    transition: border-color .3s, box-shadow .3s;
}
#form_area .inner form .form_item input:focus,
#form_area .inner form .form_item textarea:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(246, 255, 0, .2);
}
#form_area .inner form .form_item input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #333;
}
#form_area .inner form .form_item .item .error_list {
    margin: 10px 0 0 0;
}
#form_area .inner form .form_item .item .error_list li {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
    color: #FF3333;
}
#form_area .inner form .form_item .item .error_list li:not(:first-child) {
    margin: 5px 0 0 0;
}
#form_area .inner form .privacy_chk {
    margin: 65px 0 0 0;
}
#form_area .inner form .privacy_chk p.lead {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.8;
    margin: 5px 0 0 0;
}
#form_area .inner form .privacy_chk p.lead a {
    text-decoration: underline;
    transition: opacity .3s ease;
}
#form_area .inner form .privacy_chk p.lead a:hover {
    opacity: .6;
    text-decoration: none;
}
#form_area .inner form .privacy_chk .chk_wrap {
    margin: 30px 0 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
#form_area .inner form .privacy_chk .chk_wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
#form_area .inner form .privacy_chk .chk_wrap label {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding-left: 3rem;
    line-height: 1.5;
}
#form_area .inner form .privacy_chk .chk_wrap label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--black);
    border-radius: .3rem;
    background: var(--white);
    transform: translateY(-50%);
    transition: .3s;
}
/* チェックマーク */
#form_area .inner form .privacy_chk .chk_wrap label::after {
    content: "";
    position: absolute;
    left: .6rem;
    top: 50%;
    width: .6rem;
    height: 1.1rem;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: translateY(-65%) rotate(45deg);
    opacity: 0;
    transition: .3s;
}
/* チェック時 */
#form_area .inner form .privacy_chk .chk_wrap input[type="checkbox"]:checked + label::before {
    background: var(--black);
}
#form_area .inner form .privacy_chk .chk_wrap input[type="checkbox"]:checked + label::after {
    opacity: 1;
}
/* フォーカス時 */
#form_area .inner form .privacy_chk .chk_wrap input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}
#form_area .inner form .privacy_chk .chk_wrap label {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
}
#form_area .inner form .btn_area {
    margin: 45px 0 0 0;
}
#form_area .inner form .btn_area button {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    line-height: inherit;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    border: 1px solid var(--yellow);
    background-color: var(--yellow);
    border-radius: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    padding: 20px;
    transition: background-color .3s ease, color .3s ease, border .3s ease, gap .3s ease;
}
#form_area .inner form .btn_area button svg {
    width: 30px;
    height: auto;
    aspect-ratio: 1 / 1;
}
#form_area .inner form .btn_area button svg .bg {
    stroke: var(--black);
    transition: stroke .3s ease;
}
#form_area .inner form .btn_area button svg .arrow {
    fill: var(--black);
    transition: fill .3s ease;
}
#form_area .inner form .btn_area button:disabled {
    pointer-events: none;
    background-color: #eee;
    border: 1px solid #eee;
    color: #bbb;
}
#form_area .inner form .btn_area button:disabled svg .bg {
    stroke: #bbb;
}
#form_area .inner form .btn_area button:disabled svg .arrow {
    fill: #bbb;
}
#form_area .inner form .btn_area button:hover {
    background-color: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    gap: 40px;
}
#form_area .inner form .btn_area button:hover svg .bg {
    stroke: var(--white);
}
#form_area .inner form .btn_area button:hover svg .arrow {
    fill: var(--white);
}
@media only screen and (max-width: 768px) {
    #form_area {
        margin: 125px 0 0 0;
    }
    #form_area .inner {
        width: 85vw;
        max-width: 85vw;
    }
    #form_area .inner form .form_item:not(:first-child) {
        margin: 30px 0 0 0;
    }
    #form_area .inner form .form_item {
        display: block;
    }
    #form_area .inner form .form_item p.form_label {
        width: 100%;
        line-height: 1;
        padding: 10px 20px;
    }
    #form_area .inner form .form_item .item {
        width: 100%;
        padding: 0;
        margin: 10px 0 0 0;
    }
    #form_area .inner form .privacy_chk {
        margin: 45px 0 0 0;
    }
    #form_area .inner form .privacy_chk p.lead {
        line-height: 1.6;
    }
    #form_area .inner form .privacy_chk p.lead a {
        transition: none;
    }
    #form_area .inner form .privacy_chk p.lead a:hover {
        opacity: 1;
        text-decoration: underline;
    }
    #form_area .inner form .btn_area {
        margin: 30px 0 0 0;
    }
    #form_area .inner form .btn_area button {
        width: 100%;
        justify-content: space-between;
        gap: 0;
        transition: none;
    }
    #form_area .inner form .btn_area button svg .bg {
        transition: none;
    }
    #form_area .inner form .btn_area button svg .arrow {
        transition: none;
    }
    #form_area .inner form .btn_area button:hover {
        background-color: var(--yellow);
        color: var(--black);
        border: 1px solid var(--yellow);
        gap: 30px;
    }
    #form_area .inner form .btn_area button:hover svg .bg {
        stroke: var(--black);
    }
    #form_area .inner form .btn_area button:hover svg .arrow {
        fill: var(--black);
    }
}
/* 確認 */
.confirm #form_area .inner form .btn_area ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.confirm #form_area .inner form .btn_area ul li.back button {
    background-color: #ddd;
    border: 1px solid #ddd;
}
.confirm #form_area .inner form .btn_area ul li.back button:hover {
    color: var(--black);
}
.confirm #form_area .inner form .btn_area ul li.back button:hover svg .bg {
    stroke: var(--black);
}
.confirm #form_area .inner form .btn_area ul li.back button:hover svg .arrow {
    fill: var(--black);
}
@media only screen and (max-width: 768px) {
    .confirm #form_area .inner form .btn_area ul {
        display: block;
    }
    .confirm #form_area .inner form .btn_area ul li:not(:first-child) {
        margin: 10px 0 0 0;
    }
    .confirm #form_area .inner form .btn_area ul li.back button {
        background-color: #ddd;
        border: 1px solid #ddd;
    }
}
/* 完了 */
.thanks #container_area {
    margin: 250px 0 0 0;
}
.thanks #container_area .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
}
.thanks #container_area .inner h3 {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: 0.15em;
}
.thanks #container_area .inner p {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.8;
    margin: 45px 0 0 0;
}
.thanks #container_area .inner p:nth-of-type(n + 2) {
    margin: 20px 0 0 0;
}
@media only screen and (max-width: 768px) {
    .thanks #container_area {
        margin: 125px 0 0 0;
    }
    .thanks #container_area .inner {
        width: 85vw;
        max-width: 85vw;
    }
    .thanks #container_area .inner h3 {
        font-size: 2rem;
        line-height: 1.5;
    }
    .thanks #container_area .inner p {
        line-height: 1.6;
        margin: 30px 0 0 0;
    }
    .thanks #container_area .inner p:nth-of-type(n + 2) {
        margin: 15px 0 0 0;
    }
}