@charset "utf-8";
@media print, screen and (max-width: 768px) {
/* ==========================================================================
    ��2020�N�X�}�z�Ή����C�̒lj�CSS �u���C�N�|�C���g768px / 480px��
========================================================================== */

body { min-width: 100%; }
#h-header #h-wrap #h-title2 {right: 50px;}


/*============================
#mv
============================*/
#main #mv h1 { padding: 0 20px; }
#main #mv h1 a img { height: auto; }
#main #mv p img {  height: auto;  }


/*============================
#contents
============================*/
#main #contents { display: block; width: 100%;}
#main #contents #content-main,
#main #contents #content-sub { width: 100%; padding: 0 16px; box-sizing: border-box; padding-bottom: 20px; }

/*============================
#topicpath
============================*/
#content-main #topicpath { margin: 10px 0;}
#content-main #topicpath ul { display: inline-block; }
#content-main #topicpath ul li { display: inline-block;  font-size: 1.2rem; }
#content-main #topicpath ul li a { position: relative; display: inline-block; padding: 5px 0 5px 20px; }


/*============================
.tiles
============================*/
#main #contents #content-main .tiles ul { display: flex; flex-wrap: wrap; }
#main #contents #content-main .tiles ul li { width: 50%; }
#main #contents #content-main .tiles ul li:nth-child(3n-2) { border-left: 1px dotted #777;}
#main #contents #content-main .tiles ul li:nth-child(2n-1) { border-left: none;}

#main #contents #content-main .tiles ul li a:first-child {
	padding-left: 50px !important; font-size: 1.6rem !important; background-size: 30px !important; }
#main #contents #content-main .tiles ul li a:first-child:hover { background-size: 30px !important; }


#main #contents #content-main  ul li.naru { width: 100%; border: none; text-align: center;}
#main #contents #content-main .tiles ul li.naru a:first-child  { padding: 10px !important; }
#main #contents #content-main  ul li.naru a img { width: 100%; max-width: 231px; height: auto; margin: 0 auto;}



#main #contents #content-main  section {  }
#main #contents #content-main  section h2 {  }
#main #contents #content-main  section h2 span {  }


/*============================
#news
============================*/
#main #contents #content-main #news {  }
#main #contents #content-main #news dl {  }
#main #contents #content-main #news dl dt { position: absolute; width: 6em; font-size: 1.6rem; }
#main #contents #content-main #news dl dd { padding: 0 0 1em 6.5em; border-bottom: 1px dotted #ccc; font-size: 1.6rem;  }
#main #contents #content-main #news dl dd a {  }
#main #contents #content-main #news dl dd a font {  }
#main #contents #content-main #news dd:last-child { margin-bottom: 40px;}


/*============================
.img-txt
============================*/
.img-txt { display: block; }
.img-txt .pic { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row-reverse; }
.img-txt .pic p { margin: 0 20px; }
.img-txt .text { width: calc(100% - 20px); margin: auto; }


/*============================
.newsletter
============================*/
.newsletter #contents #content-main .ttl-shoulder { margin-top: 20px; }
.newsletter #contents #content-main .ttl-shoulder > p { padding-left: 20px; }
.newsletter #contents #content-main .ttl-shoulder h2 { padding-left: 20px; }


.newsletter #contents #content-main .col2 { flex-direction: row-reverse; flex-wrap: wrap; }

.newsletter #contents #content-main .col2 .txt { width: 100%; margin: auto; }
.newsletter #contents #content-main .col2 .pic {
	margin-top: 1em; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.newsletter #contents #content-main .col2 .pic p:first-child { min-width: 30%; margin:auto; }
.newsletter #contents #content-main .col2 .pic p.vertical:first-child { width: 30%; margin:auto; }
.newsletter #contents #content-main .col2 .pic p.caption { width: calc(70% - 20px); margin-left: 20px; }

.newsletter #contents #content-main .col2 .pic.noflex { display: block; }
.newsletter #contents #content-main .col2 .pic.noflex p.caption { width: 100%; margin-left: 0; }

.newsletter #main #contents .details { width: 100%; overflow-x: scroll;}

.newsletter #contents #content-main .box-news .head { display: block; }
.newsletter #contents #content-main .box-news .head p { margin-top: 0; font-size:1.6rem; line-height: 1.4; }
.newsletter #contents #content-main .box-news .head p:first-child { text-align: center;}
.newsletter #contents #content-main .box-news .head p:last-child {
	border-top: 3px solid #000; padding-top: 10px; margin-top: 10px;
	border-left: none; padding-left: 0; margin-left: 0;}


/* vol11 */
.newsletter #main #contents .vol11cont { padding: 10px; }
.newsletter #main #contents .vol11cont p.title { line-height: 1.3; font-size: 2.2rem;}
.newsletter #main #contents .vol11cont p.lead {  line-height: 1.2; }
.newsletter #main #contents .vol11cont p.note { text-align: center; font-size: 1.4rem; line-height: 1.4; }
.newsletter #main #contents .vol11cont dl.result { width: 100%; max-width: 100%; margin: auto;}
.newsletter #main #contents .vol11cont dl.result dt { width: 15%; position: absolute;}
.newsletter #main #contents .vol11cont dl.result dd { margin-left: calc(20% + 20px);}
.newsletter #main #contents .vol11cont dl.result dd p { line-height: 1.5; font-size: 1.5rem; }
.newsletter #main #contents .vol11cont dl.result dd p span { display: block;}
.newsletter #main #contents .vol11cont dl.result dd table{ margin-left: calc(-20% - 40px); }
.newsletter #main #contents .vol11cont dl.result dd table tbody tr td { vertical-align: top; font-size: 1.2rem; }

/* vol6 */
.newsletter #main #contents .vol6cont { border-left: 6px solid #fff; }



/*============================
.medalist
============================*/

#main.medalist h2.sugaku   { padding-left: 60px; background: url(../common/images/icon_contest-01.png) no-repeat 0 center / 40px; color: #1D4FB3; border: none; border-bottom: 2px solid #0987E8; }
#main.medalist h2.kagaku   { padding-left: 60px; background: url(../common/images/icon_contest-02.png) no-repeat 0 center / 40px; color: #ff6600; border: none; border-bottom: 2px solid #E9700A; }
#main.medalist h2.seibutsu { padding-left: 60px; background: url(../common/images/icon_contest-03.png) no-repeat 0 center / 40px; color: #339933; border: none; border-bottom: 2px solid #2B8A2A; }
#main.medalist h2.butsuri  { padding-left: 60px; background: url(../common/images/icon_contest-04.png) no-repeat 0 center / 40px; color: #000033; border: none; border-bottom: 2px solid #17216D; }
#main.medalist h2.joho     { padding-left: 60px; background: url(../common/images/icon_contest-05.png) no-repeat 0 center / 40px; color: #ff0000; border: none; border-bottom: 2px solid #DD0717; }
#main.medalist h2.chigaku  { padding-left: 60px; background: url(../common/images/icon_contest-06.png) no-repeat 0 center / 40px; color: #903C35; border: none; border-bottom: 2px solid #72332F; }
#main.medalist h2.chiri    { padding-left: 60px; background: url(../common/images/icon_contest-07.png) no-repeat 0 center / 40px; color: #637921; border: none; border-bottom: 2px solid #81A02F; }
#main.medalist h2.gakusei  { padding-left: 60px; background: url(../common/images/icon_contest-08.png) no-repeat 0 center / 40px; color: #ff3399; border: none; border-bottom: 2px solid #D11A77; }

#main.medalist p.lead { margin-left: 0;}
#main.medalist table { width: 100%; margin-left: 0;}

/* #main.medalist table tr { display: flex; flex-wrap: wrap;} */


/* #main.medalist table.result tr { display: flex; flex-wrap: wrap;}
#main.medalist table.result tr td { display: block;} */

#main.medalist table.result tr {
	display: flex;
	flex-wrap: wrap;
	>td {
		display: block;
		padding: 0;
	}
}

#main.medalist table.result td:nth-child(1) {
	padding-bottom: 0;
	width: 26px;
}
#main.medalist table.result td:nth-child(2) {
	padding-top: 8px;
	padding-bottom: 0;
	width: calc(100% - 26px);
}
#main.medalist table.result td:nth-child(3) {
	width: auto;
	max-width: calc(100% - 65px);
	padding: 0 0.6em 0.5em 26px;
	white-space: normal;
	&::before {
		content: "（";
	}
	&::after {
		content: "）";
	}
}
#main.medalist table.result td:nth-child(4) {
	width: auto;
	padding-top: 0;
}


#main.medalist table.noresult {
	display: table;
}
#main.medalist table.noresult tr td {
	display: block;
	padding: 5px;
}

#main.medalist table.noresult td:nth-child(1) { width: auto; display: none; }
#main.medalist table.noresult td:nth-child(2) {
	width: auto;
	padding-bottom: 2px;
}
#main.medalist table.noresult td:nth-child(3) {
	width: auto;
	padding-top: 0;
	padding-bottom: 0.5em;
	padding-left: 0.4em;
	white-space: normal;
	&::before {
		content: "（";
	}
	&::after {
		content: "）";
	}
}
#main.medalist table.noresult td:nth-child(4) { width: auto; display: none; }





/*============================
#content-sub
============================*/
#main #contents #content-sub p { text-align: center; font-size: 1.8rem; }
#main #contents #content-sub p a {  }
#main #contents #content-sub p a img.pad_b10 {  }
#main #contents #content-sub .box-link_group {  border: 1px solid #217bd0; }
#main #contents #content-sub .box-link_group p { background: #217bd0; color: #fff; }
#main #contents #content-sub .box-link_group ul { padding: 0 10px 10px; display: flex; flex-wrap: wrap; justify-content: space-between; }
#main #contents #content-sub .box-link_group ul li { width: 32%; }
#main #contents #content-sub .box-link_group ul li a {  }
#main #contents #content-sub .box-link_group ul li a img { width: 100%; height: auto; }
#main #contents #content-sub .box-link_group p span {  }

#main #contents #content-sub .box-link {  }
#main #contents #content-sub .box-link ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
#main #contents #content-sub .box-link ul li { width: 32%; }
#main #contents #content-sub .box-link ul li a {  }
#main #contents #content-sub .box-link ul li a img { width: 100%; height: auto; }



#main #contents #content-sub .curriculum { margin-bottom: 2em;}
#main #contents #content-sub .curriculum ul { display: flex; flex-wrap: wrap; }
#main #contents #content-sub .curriculum ul li { width: 50%; margin-top: 0; display: flex;}
#main #contents #content-sub .curriculum ul li:nth-child(odd) { border-right: 1px dotted #777; width: 50%; }




/*============================
#f_info
============================*/
#main #f_info.ft {  }
#main #f_info.ft .wrap {  }
#main #f_info.ft .wrap p {  }

}







@media print, screen and (max-width: 480px) {
	#main #contents #content-sub .box-link_group ul li,
	#main #contents #content-sub .box-link ul li { width: calc(50% - 10px); }

}