@charset "UTF-8";
:root {
    --main-color-red: #E02121;
    --cat01-color: #FF665E;
    --cat01-color-rgb: 255, 102, 94;
    --cat02-color: #FFA200;
    --cat02-color-rgb: 255, 162, 0;
    --cat03-color: #00AB9B;
    --cat03-color-rgb: 0, 171, 155;
    --cat04-color: #58C300;
    --cat04-color-rgb: 88, 195, 0;
}
/*==========================================*/
/*PC & ALL*/
/*==========================================*/
.article-inner {
    color: #000;
}
.article-inner img {
    width: 100%;
}
.content-head::before, .content-head::after {
    display: block;
    content: "";
    height: 50px;
}
.content-head::before {
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/mv-photo-top_pc.jpg") repeat-x center / contain;
}
.content-head::after {
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/mv-photo-bottom_pc.jpg") repeat-x center / contain;
}
@media screen and (max-width: 1280px) {
    .content-head::before, .content-head::after {
        background-size: cover;
    }
}
.content-head-innner {
    padding-top: 45px;
    padding-bottom: 30px;
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/bg-mv_pc.jpg") repeat-x center / cover;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content-head-h1 {
    width: clamp(800px, calc((800 / 1280) * 100vw), calc(800px * 1.4));
}
.content-head-copy1 {
    width: clamp(290px, calc((290 / 1280) * 100vw), calc(290px * 1.4));
    margin-top: clamp(20px, calc((20 / 1280) * 100vw), calc(20px * 1.4));
}
.content-head-copy2 {
    margin-top: clamp(16px, calc((16 / 1280) * 100vw), calc(16px * 1.4));
    font-size: clamp(16px, calc((16 / 1280) * 100vw), calc(16px * 1.4));
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
}
.content-index {
    margin-top: 80px;
}
.content-index-h2 {
    font-size: 30px;
    font-weight: bold;
    color: var(--main-color-red);
    text-align: center;
    position: relative;
}
.content-index-h2 span {
    display: inline-block;
    position: relative;
}
.content-index-h2::before {
    position: absolute;
    content: "";
    width: 55px;
    height: 40px;
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/icon-crown.svg") no-repeat center bottom / contain;
    top: -60px;
    left: 0;
    right: 0;
    margin: auto;
}
.content-index-h2 span::before, .content-index-h2 span::after {
    position: absolute;
    content: "";
    width: 30px;
    height: 75px;
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/icon-deco.svg") no-repeat center / contain;
    top: 0;
    bottom: -5px;
    margin: auto;
}
.content-index-h2 span::before {
    left: -40px;
}
.content-index-h2 span::after {
    right: -40px;
    transform: scale(-1, 1);
}
.content-index-lead {
    margin-top: 40px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    color: var(--main-color-red);
    text-align: center;
}
.content-index-note {
    width: 1100px;
    margin: 24px auto 0;
    padding-top: 40px;
    padding-bottom: 35px;
    background: rgb(249 244 230 / .3);
    border: 4px solid #E8DFC5;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    gap: 120px;
}
.content-index-note-ttl {
    font-size: 20px;
    font-weight: bold;
}
.cat01 .content-index-note-ttl {
    color: var(--cat01-color);
}
.cat02 .content-index-note-ttl {
    color: var(--cat02-color);
}
.cat03 .content-index-note-ttl {
    color: var(--cat03-color);
}
.cat04 .content-index-note-ttl {
    color: var(--cat04-color);
}
.content-index-note-list {
    margin-top: .2em;
    font-size: 18px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: .8em;
}
.content-index-note-list li {
    padding-left: 1em;
    position: relative;
}
.content-index-note-list li::before {
    position: absolute;
    content: "・";
    top: 0;
    left: 0;
}
.cat01 .content-index-note-list li::before {
    color: var(--cat01-color);
}
.cat02 .content-index-note-list li::before {
    color: var(--cat02-color);
}
.cat03 .content-index-note-list li::before {
    color: var(--cat03-color);
}
.cat04 .content-index-note-list li::before {
    color: var(--cat04-color);
}
@media screen and (min-width: 769px), print {
    .content-index-note-box.cat03 {
        margin-top: 2em;
    }
    .content-index-note-box.cat04 {
        margin-top: 1em;
    }
}
.content-index-anchor {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    gap: 40px;
}
.content-index-anchor-link {
    width: 220px;
    height: 57px;
    border-radius: 100px;
    font-size: 18px;
    font-weight: bold;
    color: #FFF !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-index-anchor-link[href="#cat01"] {
    background: var(--cat01-color);
}
.content-index-anchor-link[href="#cat02"] {
    background: var(--cat02-color);
}
.content-index-anchor-link[href="#cat03"] {
    background: var(--cat03-color);
}
.content-index-anchor-link[href="#cat04"] {
    background: var(--cat04-color);
}
.content-award {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}
.content-award-box {
    width: 1100px;
    padding-bottom: 60px;
}
.content-award-h2 {
    width: 430px;
    height: 96px;
    margin: -20px auto 0;
    padding-top: 10px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    position: relative;
}
.content-award-h2::before {
    position: absolute;
    content: "";
    width: 55px;
    height: 40px;
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/icon-crown.svg") no-repeat center bottom / contain;
    top: -40px;
    left: 0;
    right: 0;
    margin: auto;
}
.content-award-lead {
    margin-top: 24px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
}
.content-award-recipe {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}
.content-award-recipe-box {
    width: 942px;
}
.content-award-recipe-h3 {
    font-size: 30px;
    font-weight: bold;
}
.content-award-recipe-inventor {
    margin-top: 16px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
}
.content-award-recipe-inner {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
}
.content-award-recipe-img {
    max-width: 500px;
    flex-shrink: 0;
}
.content-award-recipe-info {
    max-width: 400px;
    flex-shrink: 0;
}
.content-award-recipe-info-note {
    padding: 20px 15px;
    background: #FFF;
    border-radius: 12px;
}
.content-award-recipe-info-note-ttl {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.content-award-recipe-info-note-ttl::before {
    position: absolute;
    content: "";
    width: 75px;
    height: 77px;
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/icon-teacher.svg") no-repeat center / contain;
    top: -77px;
    left: 0;
    right: 0;
    margin: auto;
}
.content-award-recipe-info-note-txt {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.6;
}
.content-award-recipe-info-link {
    width: 264px;
    height: 42px;
    margin: 32px auto 0;
    font-size: 18px;
    font-weight: bold;
    color: #FFF !important;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.content-award-recipe-info-link::after {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/icon-arrow.svg") no-repeat center / contain;
    top: 0;
    right: 1.2em;
    bottom: 0;
    margin: auto;
}
#cat01.content-award-box {
    background: rgba(var(--cat01-color-rgb), .1);
}
#cat02.content-award-box {
    background: rgba(var(--cat02-color-rgb), .1);
}
#cat03.content-award-box {
    background: rgba(var(--cat03-color-rgb), .1);
}
#cat04.content-award-box {
    background: rgba(var(--cat04-color-rgb), .1);
}
#cat01 .content-award-h2 {
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/bg-cat01.svg") no-repeat center / contain;
}
#cat02 .content-award-h2 {
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/bg-cat02.svg") no-repeat center / contain;
}
#cat03 .content-award-h2 {
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/bg-cat03.svg") no-repeat center / contain;
}
#cat04 .content-award-h2 {
    background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/bg-cat04.svg") no-repeat center / contain;
}
#cat01 .content-award-recipe-h3, #cat01 .content-award-recipe-info-note-ttl {
    color: var(--cat01-color);
}
#cat02 .content-award-recipe-h3, #cat02 .content-award-recipe-info-note-ttl {
    color: var(--cat02-color);
}
#cat03 .content-award-recipe-h3, #cat03 .content-award-recipe-info-note-ttl {
    color: var(--cat03-color);
}
#cat04 .content-award-recipe-h3, #cat04 .content-award-recipe-info-note-ttl {
    color: var(--cat04-color);
}
#cat01 .content-award-recipe-info-note {
    border: 3px solid var(--cat01-color);
}
#cat02 .content-award-recipe-info-note {
    border: 3px solid var(--cat02-color);
}
#cat03 .content-award-recipe-info-note {
    border: 3px solid var(--cat03-color);
}
#cat04 .content-award-recipe-info-note {
    border: 3px solid var(--cat04-color);
}
#cat01 .content-award-recipe-info-link {
    background: var(--cat01-color);
}
#cat02 .content-award-recipe-info-link {
    background: var(--cat02-color);
}
#cat03 .content-award-recipe-info-link {
    background: var(--cat03-color);
}
#cat04 .content-award-recipe-info-link {
    background: var(--cat04-color);
}
.content-note-bottom {
    width: 1100px;
    margin: 24px auto 0;
    font-size: 14px;
    text-align: right;
}
.btn-bnr {
    margin-top: 45px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 30px;
}
.btn-bnr-link {
    display: block;
    width: 330px;
    margin: 8px auto 0;
}
.btn-bnr-link[href="/prouse/recommend/schoollunch/"] ,
.btn-bnr-link[href="/recipes/features/feature/854/"] {
    border: 1px solid #ddd;
}
#foot_text {
    max-width: 1100px;
    margin: 30px auto 0;
    font-size: 13px;
    color: #333;
    text-align: right;
}
@media screen and (min-width: 769px), print {
    .article a, .article a img {
        -webkit-transition: 0.65s ease;
        transition: 0.65s ease;
    }
    .content-index-anchor-link[href="#cat01"]:hover, #cat01 .content-award-recipe-info-link:hover {
        background: rgba(var(--cat01-color-rgb), .6);
    }
    .content-index-anchor-link[href="#cat02"]:hover, #cat02 .content-award-recipe-info-link:hover {
        background: rgba(var(--cat02-color-rgb), .6);
    }
    .content-index-anchor-link[href="#cat03"]:hover, #cat03 .content-award-recipe-info-link:hover {
        background: rgba(var(--cat03-color-rgb), .6);
    }
    .content-index-anchor-link[href="#cat04"]:hover, #cat04 .content-award-recipe-info-link:hover {
        background: rgba(var(--cat04-color-rgb), .6);
    }
    .btn-bnr-link:hover img {
        opacity: .6;
    }
}
/*==========================================*/
/*SP*/
/*==========================================*/
@media screen and (max-width: 768px) {
    .content-head::before, .content-head::after {
        height: calc((64 / 375) * 100vw);
    }
    .content-head::before {
        background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/mv-photo-top_sp.jpg") repeat-x center / cover;
    }
    .content-head::after {
        background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/mv-photo-bottom_sp.jpg") repeat-x center / cover;
    }
    .content-head-innner {
        padding-top: calc((52 / 375) * 100vw);
        padding-bottom: calc((22 / 375) * 100vw);
        background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/bg-mv_sp.jpg") repeat-x center / cover;
    }
    .content-head-h1 {
        width: calc((340 / 375) * 100vw);
    }
    .content-head-copy1 {
        width: calc((272 / 375) * 100vw);
        margin-top: calc((24 / 375) * 100vw);
    }
    .content-head-copy2 {
        margin-top: calc((8 / 375) * 100vw);
        font-size: calc((14 / 375) * 100vw);
    }
    .content-index {
        margin-top: calc((64 / 375) * 100vw);
    }
    .content-index-h2 {
        font-size: calc((30 / 375) * 100vw);
    }
    .content-index-h2::before {
        width: calc((55 / 375) * 100vw);
        height: calc((40 / 375) * 100vw);
        top: calc((-48 / 375) * 100vw);
    }
    .content-index-h2 span::before, .content-index-h2 span::after {
        width: calc((30 / 375) * 100vw);
        height: calc((75 / 375) * 100vw);
        bottom: calc((-5 / 375) * 100vw);
    }
    .content-index-h2 span::before {
        left: calc((-40 / 375) * 100vw);
    }
    .content-index-h2 span::after {
        right: calc((-40 / 375) * 100vw);
    }
    .content-index-lead {
        margin-top: calc((20 / 375) * 100vw);
        font-size: calc((20 / 375) * 100vw);
    }
    .content-index-note {
        width: calc((330 / 375) * 100vw);
        margin-top: calc((24 / 375) * 100vw);
        padding-top: calc((24 / 375) * 100vw);
        padding-bottom: calc((24 / 375) * 100vw);
        flex-direction: column;
        align-items: center;
        gap: calc((30 / 375) * 100vw);
    }
    .content-index-note-container {
        display: contents;
    }
    .content-index-note-box {
        width: calc((290 / 375) * 100vw);
    }
    .content-index-note-box.cat01 {
        order: 1;
    }
    .content-index-note-box.cat02 {
        order: 2;
    }
    .content-index-note-box.cat03 {
        order: 3;
    }
    .content-index-note-box.cat04 {
        order: 4;
    }
    .content-index-note-ttl {
        font-size: calc((20 / 375) * 100vw);
    }
    .content-index-note-list {
        margin-top: 0;
        font-size: calc((16 / 375) * 100vw);
    }
    .content-index-anchor {
        margin-top: calc((20 / 375) * 100vw);
        flex-wrap: wrap;
        gap: calc((16 / 375) * 100vw) calc((14 / 375) * 100vw);
    }
    .content-index-anchor-link {
        width: calc((160 / 375) * 100vw);
        height: calc((40 / 375) * 100vw);
        font-size: calc((14 / 375) * 100vw);
    }
    .content-award {
        margin-top: calc((100 / 375) * 100vw);
        gap: calc((100 / 375) * 100vw);
    }
    .content-award-box {
        width: calc((345 / 375) * 100vw);
        padding-bottom: calc((60 / 375) * 100vw);
    }
    .content-award-h2 {
        width: calc((312 / 375) * 100vw);
        height: calc((70 / 375) * 100vw);
        margin-top: calc((-42 / 375) * 100vw);
        padding-top: calc((8 / 375) * 100vw);
        font-size: calc((22 / 375) * 100vw);
    }
    .content-award-h2::before {
        width: calc((55 / 375) * 100vw);
        height: calc((40 / 375) * 100vw);
        top: calc((-40 / 375) * 100vw);
    }
    .content-award-lead {
        margin-top: calc((24 / 375) * 100vw);
        font-size: calc((16 / 375) * 100vw);
    }
    .content-award-recipe {
        margin-top: calc((40 / 375) * 100vw);
        gap: calc((64 / 375) * 100vw);
    }
    .content-award-recipe-box {
        width: 100%;
    }
    .content-award-recipe-h3 {
        font-size: calc((22 / 375) * 100vw);
        line-height: 1.4;
        letter-spacing: 0;
        text-align: center;
    }
    .content-award-recipe-inventor {
        margin-top: calc((16 / 375) * 100vw);
        font-size: calc((20 / 375) * 100vw);
        letter-spacing: 0;
        text-align: center;
    }
    .content-award-recipe-inner {
        width: calc((300 / 375) * 100vw);
        margin: calc((16 / 375) * 100vw) auto 0;
        flex-direction: column;
        gap: calc((72 / 375) * 100vw);
    }
    .content-award-recipe-info-note {
        padding: calc((20 / 375) * 100vw) calc((15 / 375) * 100vw);
    }
    .content-award-recipe-info-note-ttl {
        font-size: calc((18 / 375) * 100vw);
    }
    .content-award-recipe-info-note-ttl::before {
        width: calc((75 / 375) * 100vw);
        height: calc((77 / 375) * 100vw);
        top: calc((-77 / 375) * 100vw);
    }
    .content-award-recipe-info-note-txt {
        margin-top: calc((16 / 375) * 100vw);
        font-size: calc((16 / 375) * 100vw);
    }
    .content-award-recipe-info-link {
        width: calc((264 / 375) * 100vw);
        height: calc((42 / 375) * 100vw);
        margin-top: calc((32 / 375) * 100vw);
        font-size: calc((18 / 375) * 100vw);
    }
    .content-award-recipe-info-link::after {
        width: calc((10 / 375) * 100vw);
        height: calc((10 / 375) * 100vw);
    }
    .content-note-bottom {
        width: calc((345 / 375) * 100vw);
        margin-top: calc((24 / 375) * 100vw);
        padding-left: 1em;
        font-size: calc((14 / 375) * 100vw);
        line-height: 1.6;
        text-align: left;
    }
    .content-note-bottom p {
        padding-left: 1em;
        text-indent: -1em;
    }
    .btn-bnr {
        margin-top: calc((48 / 375) * 100vw);
        font-size: calc((18 / 375) * 100vw);
        line-height: 1.6;
        flex-direction: column;
        align-items: center;
        gap: calc((32 / 375) * 100vw);
    }
    .btn-bnr-link {
        width: calc((330 / 375) * 100vw);
        margin-top: calc((8 / 375) * 100vw);
    }
    #foot_text {
        width: 100%;
        margin-top: 4vw;
        text-align: center;
        font-size: 2.93333vw;
    }
}
.pdf-btn-link {
    width: 600px;
    margin: 45px auto 0;
    padding: 8px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    color: #fff !important;
    background: rgb(234 85 20 / 1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.pdf-btn-link-inner {
    width: 100%;
    padding: 12px;
    border: 2px dashed #FFC043;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pdf-btn-link-inner-itm2 {
    font-size: 24px;
}
@media screen and (min-width: 769px), print {
    .pdf-btn-link::before {
        position: absolute;
        content: "";
        width: 100px;
        height: 100px;
        background: url("/prouse/cat_assets/img/recommend/schoollunch-contest/icon-pdflink.svg") no-repeat center / contain;
        top: 0;
        bottom: 0;
        left: 50px;
        margin: auto;
    }
    .pdf-btn-link-inner {
        padding-left: 80px;
    }
    a:hover.pdf-btn-link {
        background: rgb(234 85 20 / .8);
    }
}
@media screen and (max-width: 768px) {
    .pdf-btn-link {
        width: calc((330 / 375) * 100vw);
        margin-top: calc((48 / 375) * 100vw);
        padding: calc((8 / 375) * 100vw);
        font-size: calc((16 / 375) * 100vw);
    }
    .pdf-btn-link-inner {
        padding: calc((12 / 375) * 100vw);
    }
    .pdf-btn-link-inner-itm2 {
        font-size: calc((20 / 375) * 100vw);
    }
}

.cotest-note {
	width: 1100px;
	margin: 0 auto;
	text-align: right;
}
@media screen and (max-width: 768px) {
.cotest-note {
	width: 98%;
	text-align: left;
	font-size: 2.83333vw;
}
}