@charset "utf-8";

@media screen and (min-width: 768px){
    .youtube-wrap-wrap {
        width: 70%;
        padding-top: var(--m2);
        margin: 0 auto;
    }
}
@media screen and (max-width: 767px){
    .youtube-wrap-wrap {
        width: 100%;
        padding-top: var(--m2);
        margin: 0 auto;
    }
}

.youtube-wrap {
    position: relative;
    width: 100%;          /* 親ブロックの横幅いっぱい */
    padding-top: 56.25%;  /* 16:9 の比率（9/16=0.5625）*/
    overflow: hidden;
}  
.youtube-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;          /* 横幅100% */
    height: 100%;         /* 高さはラッパーにフィット */
    border: 0;
}
  
@media screen and (max-width: 767px) {
    header nav a > span {
        display: none;
    }
}

section:is(#school, #personal) details.category {
    --body-bg: var(--cloud);
}
section:is(#school, #personal) .category summary {
    color: white;
    background: var(--navy);
}
section:is(#school, #personal) .category .body {
    color: var(--navy);
}
section:is(#school, #personal) .division + .division {
    margin-top: var(--m5);
}
section:is(#school, #personal) .division > .label {
    background: var(--sky);
}
section:is(#school, #personal) .prize > .label {
    margin-bottom: 0.5lh;
    text-align: center;
}
section:is(#school, #personal) .prize .label > img[src*="medal"] {
    display: inline-block;
    height: 1lh;
    margin-right: 0.5ic;
}
section:is(#school, #personal) .prize .container {
    --gap: var(--m);
    justify-content: center;
    gap: var(--gap);
}
section:is(#school, #personal) .prize .block {
    padding-block: var(--m2);
    padding-inline: var(--m);
    border-radius: 12px;
    background: white;
    flex: 1 1 auto;
    font-size: var(--medium-size);
    text-align: center;
}
section:is(#school, #personal) .prize .type {
    width: fit-content;
    padding-inline: 1ic;
    border-radius: 6px;
    background: var(--navy);
    margin-inline: auto;
    margin-bottom: var(--m);
    color: white;
    font-size: 80%;
    text-align: center;
}
section:is(#school, #personal) .prize .school {
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    section:is(#school, #personal) details.category {
        margin-top: var(--m5);
    }
    section:is(#school, #personal) .category .body {
        padding-block: var(--m3);
        padding-inline: var(--m2);
    }
    section:is(#school, #personal) .division > .label {
        font-size: var(--medium-size);
    }
    section:is(#school, #personal) .prize {
        margin-top: var(--m3);
    }
    section:is(#school, #personal) .prize > .label {
        font-size: var(--medium-size);
    }
	section:is(#school, #personal) .prize .container {
		padding-inline: var(--m2);
	}
    section:is(#school, #personal) .prize .block {
        width: calc(50% - var(--gap));
        max-width: 50%;
    }
}
@media screen and (max-width: 767px) {
    section:is(#school, #personal) details.category {
        margin-top: var(--m2);
    }
    section:is(#school, #personal) .category .body {
        padding-block: var(--m2);
        padding-inline: var(--m);
    }
    section:is(#school, #personal) .division > .label {
        font-size: var(--large-size);
    }
    section:is(#school, #personal) .prize > .label {
        font-size: var(--large-size);
    }
    section:is(#school, #personal) .prize {
        margin-top: var(--m2);
    }
	section:is(#school, #personal) .prize .block {
		width: 100%;
	}
}



section#school {
    color: white;
    background: var(--sky);
}
section#school .prize:has(img[src*="gold"]) .type {
    background: var(--gold);
}
section#school .prize:has(img[src*="silver"]) .type {
    background: var(--silver);
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#school .prize .school {
        font-size: var(--large-size);
    }
}

section#personal {
    color: var(--navy);
    background: var(--yellow);
}
section#personal .prize .label {
    margin-bottom: 0.5lh;
    font-size: var(--medium-size);
}
section#personal .prize .container {
	align-items: stretch;
}
section#personal .prize .container + .container {
	margin-top: var(--m2);
	border-top: 1px solid rgb(from var(--navy) r g b / 0.2);
    box-shadow: inset 0 2px 0 0 rgb(255 255 255 / 0.7);
	padding-top: var(--m2);
}
details#personal-individual .block .label {
	font-size: 86%;
}
details#personal-individual .block .type {
    font-size: var(--regular-size);
}
section#personal .prize .type.male {
    background: var(--sky);
}
section#personal .prize .type.female {
    background: var(--pink);
}
section#personal .prize .school {
    font-size: var(--regular-size);
    font-weight: 500;
}
section#personal .prize .name {
    margin-top: 0.3lh;
    font-weight: 700;
    line-height: 1.2;
}
section#personal .prize .name .small {
    font-size: 60%;
    font-weight: 500;
}
section#personal details.prize:first-child {
    margin-top: 0;
}
section#personal details.prize summary {
    padding-block: 0.5lh;
}
section#personal details.prize summary .label {
    margin-bottom: 0;
}
section#personal details.prize button {
    width: var(--m);
	height: var(--m);
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    details#personal-individual .division + .division {
        margin-top: var(--m2);
    } 
    section#personal .prize .label {
        font-size: var(--large-size);
    }
    section#personal .prize .name {
        font-size: calc(24 * var(--px));
    }
}


section#overall-review {
    background: var(--navy);
    color: white;
}
section#overall-review .container {
	margin-inline: 5%;
}
section#overall-review .block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
section#overall-review .block + .block {
	margin-top: var(--m5);
}
section#overall-review .label {
	flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1ic;
    font-size: var(--medium-size);
    margin-bottom: 0.5lh;
}
section#overall-review .label::before,
section#overall-review .label::after {
    display: block;
    flex: 1 0 auto;
    height: 2px;
    background: currentColor;
}
section#overall-review .block > img,
section#overall-review .block .image {
	border-radius: var(--m);
}
section#overall-review .block .image > p {
	margin-top: 0.5lh;
}
section#overall-review .block > p {
	font-feature-settings: normal;
}


section#online-ceremony {
    background: var(--pink);
    color: white;
}
section#online-ceremony .date {
    width: fit-content;
    box-sizing: content-box;
    padding-block: var(--m);
    padding-inline: var(--m3);
    border: 4px solid currentColor;
    border-radius: 24px;
    margin-inline: auto;
    margin-bottom: var(--m3);
    color: var(--green);
    font-size: var(--huge-size);
    letter-spacing: 0.05em;
}
section#online-ceremony .date span {
   font-size: var(--medium-size);
}
section#online-ceremony p {
	padding-inline: var(--m3);
	font-feature-settings: normal;
}

@media screen and (min-width: 768px) {
    section#online-ceremony .date + p {
        width: 70%;
         margin-inline: auto;
    }
	section#overall-review .block > img,
	section#overall-review .block .image {
		flex: 0 1 auto;
		width: 15%;
	}
	section#overall-review .block > p {
		flex: 1 0 80%;
		padding-inline: var(--m3);
		line-height: 2.25;
	}
}
@media screen and (max-width: 767px) {
    section#online-ceremony .date{
        padding-inline: var(--m2);
    }
    section#online-ceremony p {
        padding-inline: var(--m2);
    }
	section#overall-review .block img {
		width: 40%;
		margin-inline: auto;
	}
	section#overall-review .block > img,
	section#overall-review .block .image {
		margin-bottom: 0.5lh;
	}
	section#overall-review .block .image > p {
		text-align: center;
	}
	section#overall-review .block > p {
		flex: 1 0 100%;
		padding-inline: var(--m);
	}
}