@charset "UTF-8";

:root {
    --blue1: #006cf0;
    --blue2: #e5f8fd;
    --blue3: #4ccef4;
    --blue4: #85b5c3;
    --blue5: #d6e6eb;
    --blue6: #34839b;
    --blue7: #219fc5;
    --blue8: #00b9ef;
    --red1: #f00046;
    --yellow1: #ffe200;
}
/* =======================================
共通
========================================*/
html {
    color: #333;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
    position: relative;
    word-break: break-word;
    font-family: "Noto Sans JP", sans-serif;
}

body {
    margin: 0;
    padding: 0;
    position: relative;
    font-size: 1.6rem;
    line-height: 1.625;
    letter-spacing: 0;
    background-color: var(--blue3);
}

@layer base {
    * {
        box-sizing: border-box;
    }

    address {
        font-style: normal;
    }

    table,
    tr,
    td,
    th {
        border-collapse: collapse;
        margin: 0;
    }

    table {
        margin: 10px 0;
    }

    td {
        padding: 5px 10px;
    }

    th {
        padding: 5px 10px;
        font-weight: normal;
    }

    img {
        align-self: flex-start;
        border: none;
        max-width: 100%;
        height: auto;
    }

    img:not([width]) {
        width: auto;
    }

    a {
        color: inherit;
    }

    a:hover,
    a:active {
        opacity: 0.8;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        font-weight: normal;
    }

    ol,
    ul {
        margin: 20px 0 20px 10px;
    }

    li > ul,
    li > ol {
        margin-top: 0;
        margin-bottom: 0;
    }

    p {
        margin: 0 0 1em 0;
    }

    button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
    }

    button:hover,
    button:active {
        opacity: 0.8;
    }

    input,
    textarea {
        color: inherit;
        font-size: inherit;
        font-family: inherit;
    }
}
.text-red {
    color: var(--red1);
}

footer .organization-name {
    color: var(--blue1);
    font-weight: bold;
    text-align: center;
}
footer address {
    font-weight: bold;
    text-align: center;
}
footer address .mail a {
    color: var(--blue7);
}

.mainVisual .mv-img {
    display: block;
}
:is(section, footer) .inner {
    width: calc(100% - 40px);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
#intro p {
    font-weight: bold;
    text-align: center;
}
#intro p .mark {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--yellow1);
    text-decoration-thickness: 4px;
    text-underline-offset: 7px;
}
.c-link-pdf {
    background-color: #fff;
    border: 2px solid #333;
    display: block;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}
.c-link-pdf .icon-pdf {
    width: 37px;
    vertical-align: middle;
}
.c-link-pdf::after {
    content: "";
    display: inline-block;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: #333;
}

:is(#form, footer) .inner {
    background-color: #fff;
    overflow: hidden;
}

.sec-title {
    font-weight: bold;
    background-color: var(--blue1);
    color: #fff;
    text-align: center;
    margin: 0;
}
.contentWrap .item .error-text {
    display: block;
    color: var(--red1);
}
.contentWrap .item .item-name {
    color: var(--blue1);
    font-weight: bold;
}
.contentWrap .item .item-name::after,
.contentWrap .item-sub-name span.caution {
    display: inline-block;
}
.contentWrap .item .item-name.required::after {
    color: #fff;
    content: "必須";
    background-color: var(--red1);
}
.contentWrap .item-sub-name span.caution {
    color: var(--red1);
    border: 1px solid var(--red1);
}
.contentWrap .item .item-name:not(.required)::after {
    color: #58666b;
    content: "任意";
    background-color: var(--blue5);
}
.contentWrap .item-sub-name {
    font-weight: bold;
    color: var(--blue6);
}
.contentWrap .item :is(input[type="text"], textarea, select, .btn-accept) {
    background-color: var(--blue2);
    border: none;
}
.contentWrap .item :is(input[type="text"], textarea, select):focus {
    outline: 2px solid var(--blue3);
}
.contentWrap .item input[type="text"]::placeholder {
    color: var(--blue4);
}
.contentWrap .item article p {
    margin-bottom: 0;
}
.contentWrap .item article .item-kikan {
    font-weight: bold;
}
.contentWrap .item .radio-bumon > label {
    background-color: var(--blue2);
    border: none;
}
.contentWrap .item .radio-bumon input[type="radio"],
.contentWrap .item .btn-accept input {
    accent-color: var(--blue6);
}
.contentWrap :is(.block-precautions, .block-precautions-mail) {
    border: 1px solid var(--blue6);
}
.contentWrap .block-precautions ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.contentWrap .block-precautions ul > li {
    position: relative;
}
.contentWrap .block-precautions ul > li::before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #333;
}
.contentWrap .block-precautions-mail p {
    margin-bottom: 0;
}
.contentWrap .item .check-pdf {
    color: var(--blue7);
}
.contentWrap .submit-btn {
    display: block;
    background-color: var(--blue8);
    border: none;
    color: #fff;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
.contentWrap .submit-btn:hover {
    opacity: 0.8;
}
.contentWrap input:is(.name, .furigana, .handle-name, .imgTitle),
.contentWrap input:is(.email, .house-number, .mansion),
.contentWrap .imgComment,
.contentWrap :is(select.age, select.prefecture),
.contentWrap input.zip-code {
    width: 100%;
}
.contentWrap .imgArea .item-input span[id$="-wrap"] {
    display: block;
    font-weight: bold;
}
.contentWrap .imgArea .item-input span[id$="-wrap"]:has(input[name$="-del"]:checked) {
    display: none;
}
.contentWrap .imgArea .item-input span[id$="-wrap"]:not(:has(input[name$="-del"]:checked)) + .imgFile {
    display: none;
}
.contentWrap .imgArea .item-input span[id$="-wrap"]:has(input[name$="-del"]:checked) + .imgFile {
    display: block;
}
.contentWrap .imgArea .imgFile-preview {
    display: block;
    width: 100%;
    max-width: 400px;
    max-height: 400px;
    object-fit: contain;
    margin-top: 15px;
}
.contentWrap :is(select.age, select.prefecture) {
    appearance: none;
    background-image: url(../img/img-arrow.png);
    background-repeat: no-repeat;
}

@media all and (min-width: 768px) {
    body {
        padding-bottom: 120px;
    }
    footer .contentWrap {
        padding: 45px 40px 42px;
    }
    footer .organization-name {
        font-size: 2rem;
        margin-bottom: 2px;
    }
    footer address {
        font-size: 1.8rem;
    }
    footer address .tel {
        margin-top: 8px;
    }
    footer address .tel a {
        pointer-events: none;
        text-decoration: none;
    }
    .mainVisual {
        margin-bottom: 115px;
    }
    section + :is(section, footer) {
        margin-top: 120px;
    }
    #intro p {
        font-size: 3rem;
        line-height: 1.666;
        margin-bottom: 44px;
    }
    .c-link-pdf {
        border-radius: 10px;
        font-size: 2rem;
        padding: 12.5px 23px 6.5px;
    }
    .c-link-pdf .icon-pdf {
        margin-right: 4px;
        margin-bottom: 6px;
    }
    .c-link-pdf::after {
        width: 12px;
        height: 14px;
        margin-left: 12px;
    }

    :is(#form, footer) .inner {
        border-radius: 20px;
    }

    .sec-title {
        font-size: 3rem;
        line-height: 1.8;
        padding: 8px 10px;
    }
    #form .contentWrap {
        padding: 45px 40px 50px;
    }
    .contentWrap .item + .item {
        margin-top: 24px;
    }
    .contentWrap .item .item-name {
        font-size: 2rem;
        margin-bottom: 12px;
    }
    .contentWrap .item .item-name::after,
    .contentWrap .item-sub-name span.caution {
        margin-left: 11px;
        font-size: 1.4rem;
        border-radius: 4px;
        padding: 0.5px 5px;
    }
    .contentWrap .item-sub-name {
        font-size: 1.8rem;
        line-height: 1.444;
        margin-top: 12px;
        margin-bottom: 12px;
    }
    .contentWrap .item .item-name + .item-sub-name {
        margin-top: -5px;
    }
    .contentWrap .item :is(input[type="text"], textarea, select, .btn-accept) {
        border-radius: 10px;
        padding: 13px 10px;
        font-size: 1.6rem;
    }
    .contentWrap .item .note {
        font-size: 1.4rem;
        margin-top: 10px;
    }
    .contentWrap .item .item-name + .note {
        margin-top: -8px;
    }
    .contentWrap .item article .item-sub-name {
        margin-bottom: 8px;
    }
    .contentWrap .item .radio-bumon {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 11px;
    }
    .contentWrap .item .radio-bumon > label {
        width: calc(50% - 5px);
        border-radius: 10px;
        padding: 13px 10px;
    }
    .contentWrap .block-precautions {
        border-radius: 10px;
        padding: 0 20px 15px;
        margin-top: 30px;
        margin-bottom: 22px;
    }
    .contentWrap .block-precautions ul {
        margin-top: -3px;
    }
    .contentWrap .block-precautions ul > li {
        padding-left: 15px;
    }
    .contentWrap .block-precautions ul > li::before {
        top: 9px;
        left: 0;
        width: 9px;
        height: 9px;
    }
    .contentWrap .block-precautions-mail {
        margin-top: 30px;
        border-radius: 10px;
        padding: 12px 20px 15px;
    }
    .contentWrap .imgArea .note {
        margin-top: 5px;
    }
    .contentWrap .item .check-pdf {
        margin-top: -8px;
    }
    .contentWrap .item .btn-accept {
        margin-top: 12px;
    }
    .contentWrap .item .btn-accept input {
        vertical-align: bottom;
        inline-size: 1.8rem;
        block-size: 1.8rem;
        margin-right: 10px;
    }
    .contentWrap .submit-btn {
        border-radius: 10px;
        width: 300px;
        font-size: 2rem;
        margin: 30px auto 0;
        padding: 15px 10px;
    }
    .contentWrap input:is(.name, .furigana, .handle-name, .imgTitle) {
        max-width: 455px;
    }
    .contentWrap .imgComment {
        height: 120px;
    }
    .contentWrap :is(select.age, select.prefecture, input.tel-number) {
        max-width: 200px;
    }
    .contentWrap input.zip-code {
        max-width: 120px;
    }
    .contentWrap :is(select.age, select.prefecture) {
        background-size: 11px auto;
        background-position: right 12px center;
    }
}
@media all and (max-width: 767px) {
    body {
        font-size: 1.4rem;
        line-height: 1.714;
        padding-bottom: 100px;
    }
    footer .contentWrap {
        padding: 40px;
    }
    footer .organization-name {
        font-size: 1.8rem;
        margin-bottom: 2px;
    }
    footer address {
        font-size: 1.6rem;
        line-height: 1.625;
    }
    footer address a {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    footer address .tel {
        margin-top: 8px;
    }
    footer address .tel a {
        color: var(--blue7);
    }
    .mainVisual {
        margin-bottom: 95px;
    }
    section + :is(section, footer) {
        margin-top: 100px;
    }
    #intro p {
        font-size: 2.1rem;
        margin-bottom: 45px;
    }
    .c-link-pdf {
        border-radius: 7.5px;
        font-size: 1.8rem;
        padding: 12.5px 17px 6.5px;
    }
    .c-link-pdf .icon-pdf {
        margin-right: 6px;
        margin-bottom: 6px;
    }
    .c-link-pdf::after {
        width: 9px;
        height: 12px;
        margin-left: 14px;
    }

    :is(#form, footer) .inner {
        border-radius: 10px;
    }

    .sec-title {
        font-size: 2.1rem;
        line-height: 1.476;
        padding: 9.5px 10px;
    }
    #form .contentWrap {
        padding: 45px 20px;
    }
    .contentWrap .item + .item {
        margin-top: 24px;
    }
    .contentWrap .item .item-name {
        font-size: 1.8rem;
        line-height: 1.555;
        margin-bottom: 10px;
    }
    .contentWrap .item .item-name::after {
        margin-left: 10px;
        font-size: 1rem;
        border-radius: 2px;
        padding: 0 4.25px;
    }
    .contentWrap .item-sub-name span.caution {
        margin-left: 10px;
        font-size: 1.2rem;
        border-radius: 2px;
        padding: 0 4.25px;
    }
    .contentWrap .item-sub-name {
        font-size: 1.6rem;
        line-height: 1.218;
        margin-top: 14px;
        margin-bottom: 14px;
    }
    .contentWrap .item .item-name + .item-sub-name {
        margin-top: -2px;
    }
    .contentWrap .item :is(input[type="text"], textarea, select, .btn-accept) {
        border-radius: 7.5px;
    }
    .contentWrap .item :is(input[type="text"], textarea, select) {
        padding: 10px;
    }
    .contentWrap .item .btn-accept {
        padding: 8px 10px;
    }
    .contentWrap .item .note {
        font-size: 1.2rem;
        line-height: 1.416;
        margin-top: 12px;
    }
    .contentWrap .item .item-name + .note {
        margin-top: -8px;
    }
    .contentWrap .item article .item-sub-name {
        margin-top: 10px;
        margin-bottom: 8px;
    }
    .contentWrap .item .radio-bumon {
        margin-top: 17px;
    }
    .contentWrap .item .radio-bumon > label {
        display: block;
        border-radius: 7.5px;
        padding: 10px;
    }
    .contentWrap .item .radio-bumon > label + label {
        margin-top: 10px;
    }
    .contentWrap .block-precautions {
        border-radius: 7.5px;
        padding: 0 10px 15px;
        margin-top: 30px;
        margin-bottom: 22px;
    }
    .contentWrap .block-precautions ul {
        margin-top: -4px;
    }
    .contentWrap .block-precautions ul > li {
        padding-left: 12px;
    }
    .contentWrap .block-precautions ul > li::before {
        top: 7px;
        left: 0;
        width: 9px;
        height: 9px;
    }
    .contentWrap .block-precautions-mail {
        margin-top: 30px;
        border-radius: 7.5px;
        padding: 12px 10px 15px;
    }
    .contentWrap .imgArea .note {
        margin-top: 3px;
    }
    .contentWrap .item .check-pdf {
        margin-top: -4px;
    }
    .contentWrap .item .btn-accept {
        margin-top: 12px;
    }
    .contentWrap .item .btn-accept input {
        vertical-align: bottom;
        inline-size: 1.8rem;
        block-size: 1.8rem;
        margin-right: 10px;
    }
    .contentWrap .submit-btn {
        border-radius: 7.5px;
        width: 250px;
        font-size: 1.8rem;
        margin: 30px auto 0;
        padding: 15px 10px;
    }
    .contentWrap .imgComment {
        height: 200px;
    }
    .contentWrap :is(select.age, select.prefecture, input.tel-number) {
        max-width: 150px;
    }
    .contentWrap input.zip-code {
        max-width: 90px;
    }
    .contentWrap .imgArea .imgFile-preview {
        max-height: 300px;
    }
    .contentWrap :is(select.age, select.prefecture) {
        background-size: 9px auto;
        background-position: right 10px center;
    }
}

#before-contest p {
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
    color: var(--blue1);
    background-color: var(--yellow1);
    border-radius: 10px;
    padding: 20px 20px;
    width: fit-content;
    margin: -70px auto 0;
}
#form.formConfirm .item-input {
    background-color: #eee;
    padding: 13px 10px;
    border-radius: 10px;
    min-height: 50px;
}
@media all and (max-width: 767px) {
    #before-contest p {
        font-size: 1.8rem;
    }
    #form.formConfirm .item-input {
        min-height: 40px;
        padding: 10px;
    }
}
.imgFile-upload-cancel {
    display: block;
    width: fit-content;
    cursor: pointer;
    text-decoration: underline;
    border-radius: 10px;
    margin-top: 5px;
}
.imgFile-upload-cancel:hover {
    opacity: 0.8;
    color: var(--blue6);
}