@charset "utf-8";
::selection { background: #eee; color: #aaa;}
::-moz-selection { background: #eee; color: #aaa;}
/***************************************************
 * Generated by SVG Artista on 5/28/2021, 6:44:44 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
svg .svg-elem-1 {
  stroke-dashoffset: 1385.6976318359375px;
  stroke-dasharray: 1385.6976318359375px;
  -webkit-transition: stroke-dashoffset 2.4s ease-out 0s;
	transition: stroke-dashoffset 2.4s ease-out 0s;
}
.opBody1 svg .svg-elem-1 {stroke-dashoffset: 0;}

/*==============================================
  header
================================================*/
#blog-list { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 120px;}
#blog-list .blog-list-mv { margin-bottom: 50px;}
/**/
#blog-list .blog-list-mv .logo{ padding: 120px 0 50px; text-align: center;}
#blog-list .blog-list-mv .logo div.set{ display: inline-block; max-width: 300px;}
#blog-list .blog-list-mv .logo div.set svg{ width: 100%; height: auto;}
.category #blog-list .blog-list-mv .logo{ padding: 80px 0 40px;}
.single #blog-list .blog-list-mv .logo{ padding: 40px 0 30px;}
.page #blog-list .blog-list-mv .logo{ padding: 40px 0 30px;}
@media screen and (max-width: 700px) {
#blog-list { margin-top: 60px;}

#blog-list .blog-list-mv .logo{ padding: 120px 0 110px;}
#blog-list .blog-list-mv .logo div.set{ display: inline-block; max-width: 300px;}
}
@media screen and (max-width: 510px) {
.single #blog-list .blog-list-mv .logo div.set{ max-width: 200px;}
.single #blog-list .blog-list-mv .logo{ padding: 30px 0 20px;}
}
/**/
#blog-list .blog-list-mv .commonNav{ width: 90%; max-width: 600px; display: flex; justify-content: center;}
#blog-list .blog-list-mv .commonNav ul{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
#blog-list .blog-list-mv .commonNav ul li{ display: flex; justify-content: center; align-items: center; transition: 0.3s;}
#blog-list .blog-list-mv .commonNav ul li::after{ content:"/"; display: inline; transition: 0.3s ease-in;}
#blog-list .blog-list-mv .commonNav ul li:last-child::after{ content:"";}
#blog-list .blog-list-mv .commonNav ul li a{ font-size: 16px; letter-spacing: 0px; display: block; padding: 0 6px; margin: 0 6px; font-style: italic; position: relative; font-family: 'Shippori Mincho', serif; color: #555;}
#blog-list .blog-list-mv .commonNav ul li a:hover{ color: #000; text-decoration: underline;}

#blog-list .blog-list-mv .commonNav ul li .navli{ font-size: 16px; cursor: pointer; letter-spacing: 2px; display: block; padding: 0 10px; margin: 0 10px; font-family: 'Shippori Mincho', serif; font-style: italic; position: relative; font-family: 'Shippori Mincho', serif;}
#blog-list .blog-list-mv .commonNav ul li .navli:after{ content: ""; width: 0%; height: 2px; position: absolute; left: 0; top: 46%; background: #000;}
/**/
#blog-list .blog-list-mv .commonNav ul li::after, 
#blog-list .blog-list-mv .commonNav ul li .navli{opacity: 0.15;}
#blog-list .blog-list-mv .commonNav ul li:hover .navli{opacity:1;}
#blog-list .blog-list-mv .commonNav ul li .navli:hover{ color: #000;}
#blog-list .blog-list-mv .commonNav ul li .navli:hover::after{ animation: navHeader 0.8s ease-in forwards;}
@keyframes navHeader{
0% { width: 0%; right: auto; left: 0;}
30% { width: 90%; right: auto; left: 0;}
70% { width: 90%; right: 10%; left: auto;}
100% { width: 0%; right: 10%; left: auto;}
}
/**/
#blog-list .blog-list-mv .commonNav ul li{transform: rotate(-8deg); opacity: 0; -webkit-transition: 0.6s 0.2s ease-in; -moz-transition: 0.6s 0.2s ease-in; -o-transition: 0.6s 0.2s ease-in; transition: 0.6s 0.2s ease-in;}
.opBody1 #blog-list .blog-list-mv .commonNav ul li{transform: rotate(0deg); opacity:1;}
@media screen and (max-width: 1000px) {
#blog-list .blog-list-mv .commonNav ul li .navli{ font-size: 14px; }
}
@media screen and (max-width: 600px) {
#blog-list .blog-list-mv .commonNav ul li .navli{ font-size: 12px; }
#blog-list .blog-list-mv .commonNav ul li .navli{ font-size: 14px; padding: 0 10px 0 5px; line-height: 40px;}
}


/*------------
 .cateOpen
--------------*/
#categoryMenu{ z-index: -10;}
.cateOpen #categoryMenu{ z-index: 10000;}
/**/
#categoryMenu{ width: 100%; height: 100%; position: fixed;}
#categoryMenu .overRay{ width: 100%; height: 100%; position: fixed; left: 0; top:0%; background: #fff; z-index: 10000; display: none;}
#categoryMenu ul{ transform: rotate(4deg); opacity:0; width: 600px; height: 400px; position: fixed; left: 50%; top: 46%; margin: -200px 0 0 -300px; box-shadow: 0px 20px 80px #ddd; background: #fff;  z-index: 100000; padding: 50px; transition: 0.2s ease-in;}
#categoryMenu ul li{ width: auto; float: left; margin: 8px ;}
#categoryMenu ul li a{ display: block; color: #000; font-weight: bold; border: solid 1px #777; padding: 8px 14px 6px; line-height: 1.1em; border-radius: 4px; font-family: 'Shippori Mincho', serif; font-style: italic;}
#categoryMenu ul li a.hover{ border: solid 1px #eee; color: #aaa;}
#categoryMenu ul li a:hover{ background: #777; color: #fff;}
#categoryMenu .close{ opacity: 0; position: fixed; z-index: -100001; right: 50%; top: 50%; margin: -290px -320px 0 0 ; font-size: 100px; width: 60px; list-style: 1em; text-align: center; cursor: pointer;}
#categoryMenu .close:hover{ color: #777;}
/**/
.cateOpen{ position: fixed;}
.cateOpen #categoryMenu ul{ transform: rotate(0deg); opacity:1; top: 50%;}
.cateOpen #categoryMenu .close{ opacity: 1; z-index: 100001;}
.cateOpen #categoryMenu .overRay{ display: block; cursor: pointer;}
@media screen and (max-width: 700px) {
#categoryMenu ul{ width: 80%; height: 80%; left: 10%; top: 5%; margin: 0;}
.cateOpen #categoryMenu ul{ top: 10%;}
#categoryMenu .close{ right: 5%; top: -3%; margin: 0; font-size: 80px;}
}
@media screen and (max-width: 500px) {
#categoryMenu ul{ padding: 20px;}
}




/*--------------------
一覧
---------------------*/
#blog-list main { width: 100%; padding: 0 3%; max-width: 800px; display: flex; flex-direction: column;}
#blog-list main .h1title { text-align: center; margin:50px 0;}
#blog-list main .h1title h1 { display: inline-block;}
#blog-list main .h1title h1 span{ display: block; padding: 4px 20px; font-size: 24px; font-weight: 300;}
#blog-list main .h1title h1 span br{ display: none;}
@media screen and (max-width: 700px) {
#blog-list main .h1title { text-align: center; padding:0;}
#blog-list main .h1title h1 span{}
#blog-list main .h1title h1 span br{ display: block;}
#blog-list main .h1title h1::before, 
#blog-list main .h1title h1::after{ content: ""; width: 2px; position: absolute; bottom: 0; left:50%; margin-left: -1px;}
#blog-list main .h1title h1::before{ background:#ddd; height: 30px; z-index: 1;} 
#blog-list main .h1title h1::after{ background: #000; z-index: 5;}
}

/*リスト*/
#blog-list main #blog-page-list{ border-bottom: solid 1px #eee; margin-bottom: 20px;}
#blog-list main #blog-page-list, 
#blog-list main #blog-page-list li{ width: 100%; display: flex; flex-direction: column; border-top: solid 1px #eee; position: relative; z-index: 1;}
#blog-list main #blog-page-list li:hover{border-top: solid 1px #fff; overflow: visible; z-index: 10; border-radius: 4px;}

#blog-list main #blog-page-list li a{ width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 45px 15px; background: #fff; box-shadow: 0 0 0 rgba(0,0,0,.0);}
#blog-list main #blog-page-list li a:hover{ box-shadow: 0 10px 12px rgba(0,0,0,.1);}
#blog-list main #blog-page-list li a .image{ width: 100px; height: auto; background: #fff; border-radius: 4px; overflow: hidden;}
#blog-list main #blog-page-list li a .image img{ width: 100%; height: auto;}
#blog-list main #blog-page-list li a:hover .image{ background: #000;}
#blog-list main #blog-page-list li a:hover .image img{ opacity: 0.7;}
/**/
#blog-list main #blog-page-list li a .text{ flex:1; margin-left: 25px; display: flex; flex-direction: column;}
#blog-list main #blog-page-list li a .text h2{ width: 100%; font-size: 20px; font-weight: 300; line-height: 1.8em; letter-spacing: 1px;}
#blog-list main #blog-page-list li a .text h2 br{ display: none;}
#blog-list main #blog-page-list li a .text p{ width: 100%; display: flex; flex-direction: row; align-items: center;margin:10px 20px 0 0;}
#blog-list main #blog-page-list li a .text p span {display: block; line-height: 1em; white-space: nowrap; font-weight: 400; letter-spacing: 1px; text-align: center; margin-right: 15px;}
#blog-list main #blog-page-list li a .text p span.date{ font-size: 12px; color: #888;}
#blog-list main #blog-page-list li a .text p span.cate{ font-size: 10px; padding: 2px 4px; color: #666; border: solid 1px #ccc; border-radius: 3px;}

@media screen and (max-width: 600px) {
#blog-list main #blog-page-list li a{ flex-direction: row-reverse; padding: 30px 10px;}
#blog-list main #blog-page-list li a .image{ width: 18%;}
#blog-list main #blog-page-list li a .text{ margin:0 20px 0 0;}
#blog-list main #blog-page-list li a .text h2{ font-size: 18px; font-weight: 500; margin-left: 0; line-height: 1.4em; }

}


/*------------
 .pager
--------------*/
.pager{ padding: 50px 0 100px; width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start;}
.pager li{ display: block; color: #fff; width: 30px; line-height: 38px; font-style: 14px; height: 38px; margin:6px 4px; text-align: center; background: #999; border-radius:2px;}
.pager li a{ display: block; background: #fff; border: solid 1px #aaa; border-radius:2px; font-weight: 300; color: #888;}
.pager li a:hover{ border: solid 1px #fff; color: #000; box-shadow: 1px 1px 18px #ccc; background: #fff;}



/*------------
 .pager
--------------*/
ul.page-numbers{ padding: 50px 0 100px; width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start;}
ul.page-numbers li{ display: block; color: #fff; width: 34px; height: 48px; margin:6px ; text-align: center;}
ul.page-numbers li > *{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; line-height: 38px; font-style: 14px;  border-radius:2px;}
ul.page-numbers li a{ background: #fff; border: solid 1px #aaa; border-radius:2px; font-weight: 300; color: #888;}
ul.page-numbers li span{ background: #999; color: #fff;}
ul.page-numbers li a:hover{ border: solid 1px #fff; color: #000; box-shadow: 1px 1px 18px #ccc; background: #fff;}