@charset "utf-8";

#info-contest-wrapper {
    --inner-width: 1200px;
    --section-padding-block: 53px;
    --section-padding-block-sm: 34px;
    --transition-primary: 0.3s ease;
    --color-bg1: #f5f0eb;
    background-color: #fff;
}

#info-contest-wrapper h2 {
    display: block;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 13px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper h2 {
        font-size: 32px;
        margin-bottom: 24px
    }
}

#info-contest-wrapper .linkText {
    text-decoration-color: currentColor;
    opacity: 1;
    -webkit-transition: var(--transition-primary);
    transition: var(--transition-primary);
    -webkit-transition-property: text-decoration-color, opacity;
    transition-property: text-decoration-color, opacity;
    color: var(--color-orange);
    text-decoration: underline;
    text-underline-offset: 4px;
    overflow-wrap: break-word
}

@media(any-hover: hover) {
    #info-contest-wrapper .linkText:hover {
        text-decoration-color: rgba(0, 0, 0, 0);
        opacity: .7
    }
}

#info-contest-wrapper .linkText:focus-visible {
    text-decoration-color: rgba(0, 0, 0, 0);
    opacity: .7
}

#info-contest-wrapper .linkText[target=_blank]::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url("../img/icon_blank.svg");
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    margin-left: 4px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .linkText[target=_blank]::after {
        margin-left: 4px;
        margin-right: 4px
    }
}

#info-contest-wrapper .bg {
    padding: 32px 16px
}

#info-contest-wrapper #about_palette_plaza .bg {
    background-color: #cef1f6;
}

#info-contest-wrapper #judge .bg {
    background-color: var(--color-bg1);
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .bg {
        padding: 38px 40px
    }
}


#info-contest-wrapper .tabs {
    border-bottom: 1px solid;
    overflow-x: hidden;
    background-color: var(--background-color);
}

#info-contest-wrapper .tabList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: calc(var(--inner-width) + var(--side-padding)*2);
    padding-inline: var(--side-padding);
    position: relative;
    margin-inline: auto
}

#info-contest-wrapper .tabList::after {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    content: "";
    height: 1px;
    position: absolute;
    inset: auto 0 0 0;
    background-color: #a2b0c3;
    opacity: .3
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .tab {
        font-size: 26px;
        padding: 28px 16px 14px
    }
}


@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .tab[aria-selected=true]::after {
        height: 6px
    }
}


#info-contest-wrapper .tab[aria-selected=false]:hover {
    color: var(--color-orange)
}

#info-contest-wrapper .tab:disabled {
    cursor: not-allowed
}



#info-contest-wrapper .tabpanel:not([hidden]) {
    display: block
}


/* 審査員 */
#info-contest-wrapper #judge {
    padding-block: var(--section-padding-block-sm) 0;
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper #judge {
        padding-block: var(--section-padding-block) 0
    }
}

#info-contest-wrapper .judgeItem+.judgeItem {
    margin-top: 40px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .judgeItem+.judgeItem {
        margin-top: 56px
    }
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .personInfo {
        display: grid;
        grid-template-columns: auto 1fr;
        -webkit-column-gap: 32px;
        -moz-column-gap: 32px;
        column-gap: 32px
    }
}

#info-contest-wrapper .personInfo .image {
    display: block
}

@media print,
screen and (max-width: 767.98px) {
    #info-contest-wrapper .personInfo .image {
        margin-bottom: 28px;
        margin-inline: auto
    }
}

#info-contest-wrapper .personInfo b {
    display: block;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 2px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .personInfo b {
        font-size: 20px;
        line-height: 1.75;
        margin-top: -5px
    }
}

#info-contest-wrapper .personInfo strong {
    display: block;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 8px
}

#info-contest-wrapper .personInfo .content p {
    padding-top: 24px;
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .personInfo strong {
        font-size: 26px;
        margin-bottom: 4px
    }
}

#info-contest-wrapper .personInfo strong+p {
    margin-bottom: 14px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .personInfo strong+p {
        margin-bottom: 24px
    }
}

#info-contest-wrapper .personInfo .accordion {
    border-radius: 3px 3px 0 0
}

#info-contest-wrapper .personInfo .accordion_content {
    font-size: 16px;
    line-height: 1.75;
    background-color: #fff;
    border-radius: 3px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .personInfo .accordion_content {
        font-size: 18px
    }
}

#info-contest-wrapper .personInfo .banner {
    opacity: 1;
    -webkit-transition: opacity var(--transition-primary);
    transition: opacity var(--transition-primary)
}

@media(any-hover: hover) {
    #info-contest-wrapper .personInfo .banner:hover {
        opacity: .7
    }
}

#info-contest-wrapper .personInfo .banner:focus-visible {
    opacity: .7
}

@media print,
screen and (max-width: 767.98px) {
    #info-contest-wrapper .personInfo .banner {
        display: block;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin-inline: auto
    }
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .personInfo .banner img {
        width: 691px
    }
}

#info-contest-wrapper .personInfo+.personInfo {
    position: relative;
    margin-top: 65px
}

#info-contest-wrapper .personInfo+.personInfo::before {
    content: "";
    width: 100%;
    display: block;
    height: 1px;
    background: #d8e8fa;
    position: absolute;
    left: 0;
    top: -33px
}

#info-contest-wrapper .result #winner {
    background-color: #fff
}

#info-contest-wrapper .result #judge {
    padding-block: 40px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result #judge {
        padding-block: 60px
    }
}

#info-contest-wrapper .result #judge .personInfo strong+p {
    margin-bottom: 0
}

#info-contest-wrapper .result .winnerBox {
    border: 1px solid #e2e2e2;
    padding: 24px 16px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerBox {
        padding: 30px 40px 0
    }
}

#info-contest-wrapper .result .winnerBox.gold {
    background-image: linear-gradient(to bottom, var(--color-brown2) 0%, #ffffff 162px, #ffffff 100%)
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerBox.gold {
        background-image: linear-gradient(to bottom, var(--color-brown2) 0%, #ffffff 178px, #ffffff 100%)
    }
}

#info-contest-wrapper .result .winnerBox.silver {
    background-image: linear-gradient(to bottom, var(--color-gray1) 0%, #ffffff 162px, #ffffff 100%)
}

#info-contest-wrapper .result .winnerBox.palette {
    background-image: linear-gradient(to bottom, #cef1f6 0%, #ffffff 162px, #ffffff 100%)
}

#info-contest-wrapper .result .winnerList {
    background-image: linear-gradient(to bottom, var(--color-brown3) 0%, #ffffff 162px, #ffffff 100%)
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerBox.silver {
        background-image: linear-gradient(to bottom, var(--color-gray1) 0%, #ffffff 178px, #ffffff 100%)
    }
}

#info-contest-wrapper .result .winnerBox .photoBox {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;

}

#info-contest-wrapper .result .winnerBox .photoBox img {
    margin-inline: auto;
    display: flex;
    width: auto;
    max-height: 80vh;
}

#info-contest-wrapper .result .winnerBox .mainInfo {
    margin-top: 14px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerBox .mainInfo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
        -webkit-column-gap: 24px;
        -moz-column-gap: 24px;
        column-gap: 24px;
        margin-top: 16px;
        margin-bottom: 12px
    }

}

#info-contest-wrapper .result .winnerBox .photo-title,
#info-contest-wrapper .result h4 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5
}

#info-contest-wrapper .result h4 {
    text-align: center;
    padding-bottom: 24px;
}

@media print,
screen and (min-width: 768px) {

    #info-contest-wrapper .result .winnerBox .photo-title,
    #info-contest-wrapper .result h4 {
        font-size: 26px
    }
}

#info-contest-wrapper .result .winnerBox .name {
    font-size: 16px
}

#info-contest-wrapper .result .winnerBox .comment {
    width: 100%;
    margin-top: 10px
}

#info-contest-wrapper .result .winnerBox .comment dt {
    font-size: 16px;
    font-weight: bold
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerBox .comment dt {
        font-size: 20px
    }
}

#info-contest-wrapper .result .winnerBox .comment dd {
    font-size: 16px;
    line-height: 1.75;
    margin-block: 5px 36px;
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerBox .comment dd {
        margin-block: 5px 64px;
    }
}

#info-contest-wrapper .result .winnerBox+* {
    margin-top: 40px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerBox+* {
        margin-top: 48px
    }
}

#info-contest-wrapper .result .winnerBox_inner {
    max-width: 800px;
    margin-inline: auto
}

#info-contest-wrapper .result .winnerHeading {
    font-size: 26px;
    line-height: 1.5;
    position: relative;
    padding-bottom: 12px;
    /* margin-bottom: 20px */
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerHeading {
        font-size: 32px;
        padding-bottom: 16px;
    }
}


#info-contest-wrapper .result .winnerHeading>span {
    display: block;
    text-align: center
}

#info-contest-wrapper .result .winnerHeading .custom {
    display: block
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerHeading .custom {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline
    }
}

#info-contest-wrapper .result .winnerHeading .custom>span {
    display: block
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerHeading .custom>span {
        white-space: nowrap
    }
}

@media print,
screen and (max-width: 767.98px) {
    #info-contest-wrapper .result .winnerHeading .custom>span:nth-of-type(2) {
        margin-top: -3px
    }
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerHeading .custom .sm {
        white-space: nowrap
    }
}

#info-contest-wrapper .result .winnerHeading .sm {
    display: inline-block;
    font-size: 20px;
    line-height: 1.5
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerHeading .sm {
        font-size: 26px
    }
}

#info-contest-wrapper .result .winnerHeading .xs {
    display: block;
    font-size: 22px;
    line-height: 1.5
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerHeading .xs {
        font-size: 32px
    }
}

#info-contest-wrapper .result .winnerHeading small {
    display: block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.75;
    color: #3b3c3c
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerHeading small {
        text-align: center;
        margin-top: 2px
    }
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerHeading small.lg {
        font-size: 16px
    }
}

#info-contest-wrapper .result .winnerHeading.gold {
    color: var(--color-brown)
}

#info-contest-wrapper .result .winnerHeading.gold::after {
    background-color: var(--color-brown)
}

#info-contest-wrapper .result .winnerHeading.silver {
    color: var(--color-gray2);
}

#info-contest-wrapper .result .winnerHeading.silver::after {
    background-color: var(--color-gray2)
}

#info-contest-wrapper .result .winnerHeading.palette {
    color: #49cbde;
}

#info-contest-wrapper .result .photoBox {
    margin-inline: auto
}

#info-contest-wrapper .result .winnerList .winnerHeading {
    color: #917556;
}

#info-contest-wrapper .result .winnerList .winnerList-ul {
    display: grid;
    gap: 24px 16px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerList .winnerList-ul {
        grid-template-columns: repeat(2, 1fr)
    }

    #info-contest-wrapper .result .winnerList-img {
        object-fit: contain;
        aspect-ratio: 600 / 480;
        height: 300px;
        margin-inline: auto;
    }

    #info-contest-wrapper .result .modal-content img {
        object-fit: contain;
        aspect-ratio: 600 / 480;
        height: 80vh;
        margin-inline: auto;
    }
}

/* 入選 */
@media print,
screen and (min-width: 992px) {
    #info-contest-wrapper .result .winnerList .winnerList-ul {
        grid-template-columns: repeat(3, 1fr)
    }
}


#info-contest-wrapper .result .winnerList .photo-title {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 4px;
    margin-bottom: 3px
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .result .winnerList .photo-title {
        margin-top: 12px
    }
}

/* パレットプラザについて */
#info-contest-wrapper .result #about_palette_plaza {
    background-color: var(--color-white);
    padding-block: 20px 0;
}

/* 講座について */
#info-contest-wrapper .moreInfoBox {
    background: #F8F7F3;
}

#info-contest-wrapper .moreInfo {
    padding: 0 20px;

}

#info-contest-wrapper ul.store {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
    width: 100%;
    gap: 16px;
    justify-content: space-between;
    z-index: 1;
    position: relative;
}

#info-contest-wrapper li.store-list {
    padding: .8em;
    border: 2px solid var(--color-brown);
    border-radius: 4px;
    width: 47%;
    background: var(--color-white);
}

#info-contest-wrapper li.store-list p {
    text-align: center;
}

#info-contest-wrapper li.store-list p a {
    color: var(--color-brown);
}

#info-contest-wrapper li.store-list :hover {
    opacity: .7;
}

#info-contest-wrapper li.store-list strong {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
}

@media print,
screen and (min-width: 768px) {
    #info-contest-wrapper .moreInfo {
        padding: 20px;
    }

    #info-contest-wrapper ul.store {
        justify-content: center;
    }

    #info-contest-wrapper li.store-list {
        width: calc(100% / 3 - 1.5em);
    }
}


#info-contest-wrapper .result .winner {
    margin-block: 0 36px;
}