@charset "UTF-8";


#kids-content{ max-width: 790px; margin: 50px auto 0; }
#kids-content img{ width: 100%; height: auto; }
#kids-content .section~.section{ margin-top: 80px; }
#kids-content .section .ttl{ background-color: #ffc565; font-size: 1.5rem; line-height: 1.3; margin: 0; overflow: hidden; padding: 8px 0; }
#kids-content .section .ttl:first-letter{ display: inline-block; background-color: #000000; color: #ffc565; padding: 10px 15px; margin-right: 0.5em; }
#kids-content .section .copy{ font-size: 1.2rem; line-height: 1.7; margin-top: 20px; font-weight: bold; }
#kids-content .section01 .list-item{ margin: 20px auto 0; display: flex; display: -ms-flex; flex-wrap: wrap; }
#kids-content .section01 .list-item .item{ width: 32%; box-sizing: border-box; margin-left: 2%; box-sizing: border-box; border: 1px solid #cccccc; padding: 10px; position: relative; }
#kids-content .section01 .list-item .item:nth-child(3n+1){ margin-left: 0; }
#kids-content .section01 .list-item .item:nth-child(n+4){ margin-top: 2%; }
#kids-content .section01 .list-item .item .overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background-color: rgba(0,0,0,0); }
#kids-content .section01 .list-item .item .overlay::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #ffffff; transition: opacity 0.5s; opacity: 0; }
#kids-content .section01 .list-item .item .overlay::after{ content: ""; position: absolute; right: 5px; bottom: 5px; border: 5px solid #ffc565; border-top-color: transparent; border-left-color: transparent; }
#kids-content .section01 .list-item .item .txt-body{ margin-top: 10px; }
#kids-content .section01 .list-item .item .txt-body .name{ font-weight: bold; line-height: 1.5; }
#kids-content .section01 .list-item .item .txt-body .floor{ font-size: 0.8rem; line-height: 1.5; }
#kids-content .section01 .list-item .item .txt-body .floor .icon{ background-color: #F68652; color: #ffffff; display: inline-block; padding: 0 7px; margin-left: 0.5em; }
#kids-content .section01 .list-item .item .txt-body .info{ font-size: 0.8rem; line-height: 1.5; }

@media only screen and (max-width: 767px) {
	#kids-content{ margin-top: 10%; }
	#kids-content .section~.section{ margin-top: 10%; }
	#kids-content .section01 .list-item .item:nth-child(n){ width: 48%; margin-left: 4%; }
	#kids-content .section01 .list-item .item:nth-child(2n+1){ margin-left: 0; }
	#kids-content .section01 .list-item .item:nth-child(n+3){ margin-top: 4%; }
}


#kids-content .section01 .list-item .item .overlay:active::before{ opacity: 0.3; }
@media (hover: hover){
	#kids-content .section01 .list-item .item .overlay:hover::before{ opacity: 0.3; }
}