/*----- Topページのボタン -----*/
.top-btnarea{
                                width:90%;
                                margin:0 auto;
                                display:grid;
                                grid-template-columns: repeat(2, 1fr);
                                gap:1em;
                                align-items: center;
}
@media screen and (max-width: 568px) {
.top-btnarea{
                                display:block;
                                margin:0 auto 1rem;
}
}
.btn-facebook,.btn-note{
                                width : 90%;
                                height : 75%;
                                margin:0 auto;
                                padding:1rem 0;
}

.btn-facebook a,.btn-note a{
                                width : 100%;
                                height : 100%;
                                display : block;
                                padding-top : 1.5rem;
                                padding-bottom :1.5rem;
                                border-radius : 1em;
                                color:#534741;
                                font-size:130%;
                                font-weight:900;
                                text-decoration : none;
                                text-align : center;
                                box-sizing : border-box;
                                box-shadow: 5px 5px 3px rgba(200, 200, 200, 0.3);
}
.btn-facebook a{
  border :3px solid #fcd786;
  background-color:#fff;
  /*background-image: radial-gradient(#fee39e, #fcd786 75%);*/
  display: flex; 
  align-items: center; 
  gap:5px;
}
.btn-note a{
  border :3px solid #e0efff;
  background-color:#fff;
  /*background-image: radial-gradient(#ebf5fd, #e0efff 75%);*/
}
.btn-facebook a:hover{
  border :3px solid #fff;
  background-color:#fcf1d9;
}
.btn-note a:hover{
  border :3px solid #fff;
  background-color:#ebf5fd;
}
.top-btnarea .icon-new{
                                height:50px;
                                display: flex; 
                                margin-left:1rem;
                                align-items: center; 
                                background-color:#ff7d7d;
                                border-radius:50%;
}
.top-btnarea .icon-new span{
                                width:50px;
                                color:#fff;
                                transform: rotate(-30deg);
}

/*----- 北九州市立教育センターBlog -----*/
#blog-main{
                                width : 100%;
                                max-width : 1000px;
                                margin:0 auto 1rem;
}
.blog-head{
                                width : 100%;
                                max-width : 1000px;
                                margin:0 auto 1rem;
                                padding-top:1rem;
                                border-top:1px solid #ccc;
}
.blog-head img{
                                width : 100%;
                                height:auto;
                                max-width : 1000px;
                                margin:0 auto 1rem;
}
@media screen and (max-width: 568px) {
.blog-head{
                                width : 100%;
                                max-width : 1000px;
                                height:100px;
                                overflow:hidden;
}
.blog-head img{
                                height:100px;
                                object-fit: cover;
                                object-position: center;
}
}
.blog-title,.blog-subtitle{
                                width : 100%;
                                max-width : 1000px;
                                text-align:center;
                                font-family: "UD Digi Kyokasho", "UDデジタル教科書体", "游教科書体","YuKyokasho","Klee","Klee One","Kyokasho", sans-serif;
}
@media screen and (max-width: 568px) {
.blog-title,.blog-subtitle{
                                padding:0.5rem 1rem;
}
}
.blog-title{
                                font-size:110%;
                                text-align:left;
}
.blog-subtitle{
                                display:flex;
                                height:40px;
                                margin-bottom:2rem;
                                font-size:150%;
                                font-weight:700;
                                text-align:left;
                                align-items: center;
                                box-sizing:border-box;
}
#blog-main .blog-container{
                                width : 100%;
                                max-width : 1000px;
}
#blog-main .blog-container .blog-item{
                                width : 100%;
                                margin:0 auto 2.5rem;
                                padding:0 0 1rem 0;
                                background-color:#fcfcfc;
                                border-top:1px solid #022b62;
                                border-right:1px solid #022b62;
                                border-bottom:1px solid #022b62;
}
.blog-container .blog-item table{
                                /*width:100%;*/
                                max-width:1000px;
                                margin-bottom:10px;
}
.blog-container .blog-item td{
                                padding:0.5rem 1em;
}
.blog-container .blog-item table.blog-article-body{
                                width:100%;
}
.blog-container .blog-item td.blog-article-title{
                                position:relative;
                                padding:1rem 1rem 1rem 2rem;
                                background-color:#022b62;
                                color:#fff;
                                font-weight:700;
                                font-family: "UD Digi Kyokasho", "UDデジタル教科書体","游教科書体", "Klee","Klee One","YuKyokasho","Kyokasho", sans-serif;
}
.blog-container .blog-item td.blog-article-title::before{
                                position:absolute;
                                content:"|";
                                top:0.3rem;
                                left:0.8rem;
                                color:#8cc9f4;
                                font-size:150%;
                                font-weight:900;
}
.blog-article-cell01{
                                max-width:688px;
}
.blog-article-cell01 img{
                                max-width:220px;
}
.blog-container .blog-item img{
                                padding:0.4rem;
}
@media screen and (max-width: 568px) {
.blog-container .blog-item td{
                                width:100%;
                                display:block;
}
.blog-article-cell01 img{
                                width:49%; 
                                max-width:49%;
}
.blog-container .blog-item td.sp-td-photo img{
                                width:100%;                                
}
}