@charset "utf-8";
/* CSS Document */

.postBody{max-width:1080px;margin:0 auto;padding:10px 0 40px; }

.postBody{font:2vw / 1 'Noto sans jp'}

.newsBox{display:block;padding:0.5em;}
.newsBox>dl{display:flex;padding:0.5em 0;align-items:start;justify-content:left;
width:100%;box-sizing:border-box;border-bottom:1px dotted #ccc;}
.newsBox>dl>*{display:block;font-size:0.8em;}
.newsBox>dl>dt>a{display:inline-block;padding:0.5em;border:1px solid #ccc;margin-right:0.5em;}
.newsBox>dl>dd{padding:0.5em;}


.newsBox>dl>dd>a{display:flex;position:relative;padding-right:1.5em;box-sizing:border-box;}
.newsBox>dl>dd>a::after{content:'→';display:inline-block;transform:translate(5px,0px);position:absolute;right:0;}
.newsBox>dl>dd>a::before{content:'□';display:inline-block;position:absolute;right:0;}



.postBody section#postNote{background:none;box-shadow:0 0 0 5px #eee inset;padding:1em;}
.postBody section#postNote *{font-size:1em;}
.postBody section#postNote>*{font-size:0.8em;line-height:1.75;}

[data-id="blog"] .postBody section#postNote>div{}


.blogHeader{padding:1em 0;}
.blogNav{padding:0;}
.blogNav h3{padding:1em 0 0;}
.postBody .blogNav h3{font-size:1.2em !important;}
.blogNav ul{padding:0 2em;}
.blogNav ul>li{padding:0.5em 0 0;}

.bCnt>ul{padding:0em 2em 1em;}

.blogMain{padding:1em 0;}
.blogMain>section{padding:2em 0 0;}
.blogMain h3{padding:0 0 1em;}
.postBody .blogMain h3{font-size:1.2em !important;}
.blogfooter{padding:1em 0;}

.postTag{display:flex;flex-wrap:wrap;box-sizing:border-box;padding:1em 0;justify-content:right;}
.postTag>li{display:inline-block;box-sizing:border-box;padding:0 0 0 1em;}
.postTag>li>a{display:flex;box-sizing:border-box;padding:0.5em 1em;line-height:1;background:#eee;font-size:15px;border-radius:2em 0 0 2em}
.postTag>li>a::before{content:'#';}

#postNav ul{display:flex;justify-content:space-between}
#postNav ul>li{display:block;padding:1em 0;}



.pageName p{text-align:center;font-size:2em;font-weight:bold;background:#fdf06e;color:#000;padding:0.5em 0;}

.sideNav{display:flex;flex-wrap:wrap;justify-content:left;align-items:stretch;padding:1em 0;gap:2%;font-size:clamp(15px,3vw,18px);}
.sideNav>section{width:32%;padding:1% 0;box-sizing:border-box;position:relative;}

.sideNav>section h2{padding:0.5em 1em 0.5em;background:#eee;border-radius:0.5em 0.5em 0 0;display:inline-block;box-shadow:2px 2px 2px #33333350;z-index:1}
.sideNav>section ul{padding:1em;background:#eee;box-shadow:2px 2px 2px #33333350;z-index:2;position:relative;}
.sideNav>section ul>li{display:block;}
.sideNav>section ul>li>a{display:flex;justify-content:left;align-items:center;line-height:1.5;letter-spacing:1px;}

.sideNav>section:nth-of-type(2n) h2{background:#000;color:#fff;}
.sideNav>section:nth-of-type(2n) ul{background:#000;color:#fff;}
.sideNav>section:nth-of-type(2n+1) h2{background:#fdf06e;color:#000;}
.sideNav>section:nth-of-type(2n+1) ul{background:#fdf06e;color:#000;}
.sideNav>section ul[data-name="年"]>li>a::after{content:"年";}

.sideNav>section.acvPick{width:66%;}
.sideNav>section.acvMY{width:66%;}
.sideNav>section.acvMY>div{display:flex;flex-wrap:wrap;width:100%;}
.sideNav>section.acvMY>div>ul{width:50%;box-sizing:border-box;}
/*--------------------*/


.ctBlogBox{display:flex;flex-flow:row wrap;justify-content:center;align-items:start;gap:2%;max-width:1000px;margin:0 auto;}
.ctBlogBox>div.blog{width:30%;display:flex;flex-flow:row wrap;justify-content:center;align-items:start;}
.ctBlogBox>div.blog picture{display:block;height:clamp(40px,20vw,200px);background:#eee;width:100%;box-sizing:border-box;border-radius:1em;overflow:hidden;}
.ctBlogBox>div.blog picture img{width:100%;height:100%;object-fit: cover;}

.ctBlogBox>div.blog>div.bInfo{font-size:0.8em;padding:0.5em;display:block;}
.ctBlogBox>div.blog>div>p{display:flex;justify-content:left;align-items:center;text-align:left;width:100%;padding:0.5em 0;}
.ctBlogBox>div.blog>div>p a{display:block;padding:0.25em 0.5em;background:#000;border-radius:5px;margin-right:0.5em;color:#fff;}
.ctBlogBox>div.blog>div>p span{font:600 1.2em / 1 'Outfit';letter-spacing:1px;}
.ctBlogBox>div.blog>div>dl{}
.ctBlogBox>div.blog>div>dl>dt{line-height:2;}
.ctBlogBox>div.blog>div>dl>dd{line-height:1.8;}
/*--------------------*/

@media screen and (min-width:1080px) {
.postBody{font-size:20px;}   
}

@media screen and (max-width:800px) {

.newsBox>dl{display:block;}
.newsBox>dl>dt{display:flex;justify-content:space-between;align-items:baseline}
}


@media screen and (max-width:480px) {
.postBody{font-size:20px;
}
}