@charset "UTF-8";

/* 変数 */
:root {
    --white: #fff;
    --black: #333333;
    --blue: #4a86b6;
    --dark-blue: #194360;
    --gray-blue: #c3dfe8;
    --light-blue: #92c0e1;
}

html {
    font-family: "M PLUS 1", sans-serif;
    font-optical-sizing: auto;
    font-size: 14px;
    color: var(--black);
    line-height: 1.688;
    font-weight: 500;
}

@media (width >= 1280px) {
    html {
        font-size: 16px;
    }
}

body {
    background-color: var(--blue);
}

.first_section {
    width: 100%;
    padding: 40px 30px 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (width >= 800px) {
    .first_section {
        padding: 40px 30px 40px 30px;
        gap: 40px;
    }
}
@media (width >= 1280px) {
    .first_section {
        margin: auto;
        padding: 40px 60px;
    }
}

.return_top {
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 400;
    width: fit-content;
}

.title {
    font-size: 16px;
    color: var(--white);
    width: 100%;
    padding-bottom: 10px;
    border-bottom: solid 2px var(--white);
    text-align: center;
    line-height: normal;
}
@media (width >= 800px) {
    .title {
        font-size: 20px;
    }
}
@media (width >= 1280px) {
    .title {
        font-size: 30px;
    }
}

.line_btn {
    background-color: #edffdb;
    padding: 10px;
    width: 100%;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #178329;
    text-align: center;
}
@media (width >= 1280px) {
    .line_btn {
        max-width: 1000px;
        margin: auto;
        padding: 20px;
    }
}

.main_section {
    padding: 0 10px 80px 10px;
    width: 100%;
}
@media (width >= 800px) {
    .main_section {
        padding: 0 10px 120px 10px;
    }
}
@media (width >= 12800px) {
    .main_section {
        padding: 0 20px 140px 20px;
    }
}

.main_section_innner {
    background-color: var(--white);
    width: 100%;
    padding: 50px 20px;
    border-radius: 20px;
}
@media (width >= 1280px) {
    .main_section_innner {
        max-width: 1000px;
        margin: auto;
        padding: 50px 30px;
    }
}

.main_section_innner.thanks {
    min-height: 50dvh;
    display: grid;
    place-content: center;
}
.thanks_txt {
    text-align: center;
    margin-bottom: 20px;
}

.form_innner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form_content {
    label {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    span {
        display: flex;
        gap: 10px;
        align-items: center;
        &::after {
            content: "任意";
            display: flex;
            padding: 2px 6px;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            background: var(--gray-blue);
            color: var(--dark-blue);
        }
    }
    .required {
        &::after {
            content: "必須";
            background: var(--blue);
            color: var(--white);
        }
    }

    input {
        border: 1px solid var(--blue);
        height: 39px;
        border-radius: 10px;
        padding: 0 5px;
    }
    textarea {
        border: 1px solid var(--blue);
        height: 200px;
        border-radius: 10px;
        padding: 2px 5px;
    }
}

.btn {
    background-color: var(--blue);
    width: 130px;
    padding: 6px;
    border-radius: 20px;
    color: var(--white);
    display: grid;
    place-items: center;
    margin: auto;
}

footer {
    height: 210px;
    padding: 20px 20px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    &::after {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--light-blue);
        z-index: -2;
        top: 0;
        left: 0;
    }
}
@media (width >= 800px) {
    footer {
        height: 257px;
    }
}
@media (width >= 1280px) {
    footer {
        height: 275px;
    }
}

.footer_illust {
    width: 375px;
    height: auto;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
@media (width >= 800px) {
    .footer_illust {
        width: 567.8px;
        top: -65px;
    }
}
@media (width >= 1280px) {
    .footer_illust {
        width: 798px;
        top: -90px;
    }
}
.footer_contents {
    background-color: var(--white);
    padding: 30px 20px;
    border-radius: 30px 30px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;

    .logo {
        width: auto;
        height: auto;
        img {
            display: block;
            width: 200px;
            height: auto;
        }
    }

    ul {
        font-size: 12px;
        display: flex;
        column-gap: 10px;
        row-gap: 5px;
        flex-wrap: wrap;
        justify-content: center;
        li {
            padding-left: 10px;
            border-left: 1px solid #cccccc;
            line-height: 2;
        }
    }
}