@charset "utf-8";
*{ box-sizing: border-box;}
footer{ z-index: 600;}
main { width: 96%; margin: 0 2%;}
article{ transition: 0.3s;}
.close_aside .hd_logo{ left: 15px !important;}
@media screen and (min-width: 800px) {
.sp_post .hd_logo{ left: 220px !important; position: absolute !important;}
}

@media screen and (max-width: 800px) {
.hd_logo{ position: absolute !important;}
}




/*------------------------
blog-page-wrap
----------------------------*/
#blog-page-wrap{ width: 100%; display: flex; flex-direction: row-reverse;}



/*------------------------
special-menu
----------------------------*/
#special-menu{ width:180px; min-width: 180px; height:100vh; position: sticky; z-index: 500; top: 0; left: 0; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; background-color: #eee; border-right: solid 1px #ccc; opacity: 1; transition: 0.4s;}
.close_aside #special-menu{ position: fixed; left: -300px;}
.full_open_aside #special-menu{ position: fixed; width:100%; z-index: 100000000000000000000;}
#special-menu:hover{ opacity: 1;}
/**/
#special-menu .aside-menu{ width: 100%; height:60px; padding: 0 10px; display: flex; align-items: flex-end; position: relative;}
#special-menu .aside-menu h2{ display: flex; justify-content: flex-start; margin-bottom: 15px;}
#special-menu .aside-menu h2 span{ font-size: 12px; display: inline; border-bottom: solid 3px #222;}
/**/
#special-menu .aside-menu #aside-menu-size{ position: absolute; left: 100px; top: 24px; width: 70px; height: 30px; display:flex; justify-content: space-between; transition: 0.6s;}
#special-menu .aside-menu #aside-menu-size > span{ width: 30px; height: 30px; display: block; position: relative; background: #eee; border: dashed 1px #ddd; border-radius: 2px; cursor: pointer; transition: 0.2s;}
#special-menu .aside-menu #aside-menu-size > span:hover{ border: solid 1px var(--color2); background: var(--color2);}
.full_open_aside #special-menu .aside-menu #aside-menu-size{ left: 120px;}
.full_open_aside #special-menu .aside-menu #aside-menu-size > span{ background: #555; border: dashed 1px #555; }

/**/
#special-menu .aside-menu #aside-menu-size span p{ width: 66px; height: 26px; line-height: 1em; text-align: center; position: absolute; left: -20px; bottom: 22px; background: var(--cursor_color1); border-radius: 2px; font-size:9px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: 0.2s;}
#special-menu .aside-menu #aside-menu-size span p span{ display: block; line-height: 1em; color: #fff; text-align: center; font-size: 7px; margin-bottom: 2px;}
/**/
#special-menu.close .aside-menu #aside-menu-size > span.close, 
#special-menu.side .aside-menu #aside-menu-size > span.side, 
#special-menu.open .aside-menu #aside-menu-size > span.open{ display: none;}
#special-menu .aside-menu #aside-menu-size > span.close::before, 
#special-menu .aside-menu #aside-menu-size > span.close::after{ width: 1px; height: 70%; content: ""; background: #555; position: absolute; top: 15%; left: 50%; transition: 0.2s;}
#special-menu .aside-menu #aside-menu-size > span.close::before{ transform: rotate(45deg);}
#special-menu .aside-menu #aside-menu-size > span.close::after{ transform: rotate(-45deg);}
/**/
#special-menu .aside-menu #aside-menu-size > span.side::before, 
#special-menu .aside-menu #aside-menu-size > span.side::after, 
#special-menu .aside-menu #aside-menu-size > span.open::before, 
#special-menu .aside-menu #aside-menu-size > span.open::after{ width: 1px; height: 40%; content: ""; background: #555; position: absolute; left: 50%; transition: 0.2s;}
#special-menu .aside-menu #aside-menu-size > span.side::before{transform: rotate(45deg); top: 15%;}
#special-menu .aside-menu #aside-menu-size > span.side::after{transform: rotate(-45deg); bottom: 15%;}
#special-menu .aside-menu #aside-menu-size > span.open::before{transform: rotate(-45deg); top: 15%;} 
#special-menu .aside-menu #aside-menu-size > span.open::after{transform: rotate(45deg); bottom: 15%;}
.full_open_aside #special-menu .aside-menu #aside-menu-size > span.side::before, 
.full_open_aside #special-menu .aside-menu #aside-menu-size > span.side::after, 
.full_open_aside #special-menu .aside-menu #aside-menu-size > span.close::before, 
.full_open_aside #special-menu .aside-menu #aside-menu-size > span.close::after{ background: #fff;}

@media screen and (min-width: 800px) {
/*800以上*/
#special-menu .aside-menu #aside-menu-size span:hover p{ bottom: 32px;  opacity: 1;}
#special-menu .aside-menu #aside-menu-size > span.close:hover::before, 
#special-menu .aside-menu #aside-menu-size > span.close:hover::after{ height: 30%; top: 35%; background: #fff;}
#special-menu .aside-menu #aside-menu-size > span.side:hover::before, 
#special-menu .aside-menu #aside-menu-size > span.side:hover::after{ left: 40%; background: #fff;}
#special-menu .aside-menu #aside-menu-size > span.open:hover::before, 
#special-menu .aside-menu #aside-menu-size > span.open:hover::after{ left: 60%; background: #fff;}

}

@media screen and (max-width: 800px) {
/*以下*/
/*
*/
#special-menu{ position: fixed; left: -300px;}

/**/
#special-menu.open{ left: 0;}
.close_aside #special-menu{ width: 100%; position: fixed; left: -100%;}
#special-menu .aside-menu #aside-menu-size > span.side{ display:none !important;}
.full_open_aside #special-menu .aside-menu{ height: 50px;}
.full_open_aside #special-menu .aside-menu #aside-menu-size{ width: 50px; height: 50px; left: auto; right: 0; top: 0;}
.full_open_aside #special-menu .aside-menu #aside-menu-size > span.close{ width: 50px; height: 50px;}
}

/*-----------------------
aside close時のボタン
-------------------------*/
.aside-re-open{ width: 40px; height: 46px; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; background: var(--cursor_color1); border-radius: 0 6px 6px 0; position: fixed; left: -50px; top: 70px; transition: 0.2s; cursor: pointer;}
.aside-re-open.pc{ display: flex; z-index: 999999999999;}
.aside-re-open.sp{ display: none; z-index: 100;}
.scroll .aside-re-open{ top: 10px;}
.close_aside .aside-re-open{ left: 0;}
.bodyfixed .aside-re-open{ z-index: 1; left: -50px;}
.aside-re-open span{ width: 100%; display: block; text-align: center; font-size: 11px; line-height: 9px; color: #fff; padding:4px 2px 0 0;}
.aside-re-open::before, 
.aside-re-open::after{ width: 2px; height: 20%; content: ""; background: #555; position: absolute; left: 50%; transition: 0.2s; background: #fff;}
.aside-re-open::before{transform: rotate(-45deg); top: 56%;} 
.aside-re-open::after{transform: rotate(45deg); bottom: 10%;}
.aside-re-open:hover::before, 
.aside-re-open:hover::after{ left: 60%;}
@media screen and (min-width: 800px) {
/*800以上*/
.aside-re-open:hover{ background:#222; border-radius: 0 2px 2px 0;}
}
@media screen and (max-width: 800px) {
.aside-re-open{ background:rgba(0,0,0,.6);}
.aside-re-open.pc{ display: none;}
.aside-re-open.sp{ display: flex;}
.open_aside .aside-re-open, 
.close_aside .aside-re-open{ left: -100px;}
.scroll.open_aside .aside-re-open, 
.scroll.close_aside .aside-re-open{ left: 0px;}
.aside-re-open{ border-radius: 0 2px 2px 0; top: 10px;}
.scroll .aside-re-open{ top: 5px; left: 0;}
}
/*----------------------
aside メニュー
-------------------------*/
#special-menu nav{ width: 100%; height: calc(98vh - 60px);　overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 10px;}
.full_open_aside #special-menu nav{ padding: 10px 5%;}
#special-menu nav::-webkit-scrollbar { width: 4px; }
#special-menu nav::-webkit-scrollbar-thumb{ background: var(--color2); border-radius: 5px;}
#special-menu nav::-webkit-scrollbar-track-piece {background: #fff;}
#special-menu nav div{ display: flex; flex-direction: column;}
#special-menu nav div{ margin: 15px 0;}
#special-menu nav div h3{ display: flex; justify-content: flex-start;}
#special-menu nav div h3 span{ font-size: 11px; font-weight: bold; line-height: 1.1em; padding: 3px 0;}
#special-menu nav div ul{ width: 100%; display: flex; flex-direction: column;}
#special-menu nav div ul li{ width: 100%; display: block; border-bottom: dashed 1px #eee;}
#special-menu nav div ul li a{ display: block; padding: 6px 3px 6px 15px; font-size: 11px; letter-spacing: 0; color: #555; line-height: 1.4em; text-indent: -1em;}
#special-menu nav div ul li a::before{ content: "・";}
#special-menu nav div ul li a:hover{ color: #000; text-decoration: underline;}
.full_open_aside #special-menu nav div{ margin: 40px 0 20px;}
.full_open_aside #special-menu nav div h3 span{ font-size: 12px;}
.full_open_aside #special-menu nav div ul li{ border-bottom: dashed 1px #ccc;}
.full_open_aside #special-menu nav div ul li a{ padding: 10px 3px 10px 15px; font-size: 12px; display: inline-block;}
@media screen and (max-width: 800px) {
.full_open_aside #special-menu nav div ul li a{ width: 100%;}
.full_open_aside #special-menu nav div{ margin: 20px 0 ;}

}

/*----------------------
メニュー
-------------------------*/
#spc-page-list{ padding:20px 0; width: 100%; display: flex; justify-content: center;}
.sp_post #spc-page-list{ background: #ccc; padding:50px 0 70px;}
#spc-page-list .inner{ width: 90%; margin: 0 5%; max-width: 700px; border:  solid 1px #ddd; border-radius: 10px; padding: 20px; background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.1);}
#spc-page-list .innerWrap{ width: 90%; margin: 0 5%; max-width: 700px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}

#spc-page-list .inner h2{ width: 100%; display: flex; justify-content: flex-start; align-items: center; font-size: 14px; margin-bottom: 25px;}
#spc-page-list .inner h2 span{ font-size: 12px; line-height: 1em; padding: 6px 10px; border-radius: 30px; background: var(--cursor_color2); margin-right: 5px; font-weight: bold; border: solid 1px #111;}
/**/
#spc-page-list .inner nav, 
#spc-page-list .inner nav > div, 
#spc-page-list .inner nav > div ul { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
#spc-page-list .inner nav > div{ margin: 0 0 50px;}
#spc-page-list .inner nav > div h3{ display: flex; margin-bottom: 10px;}
#spc-page-list .inner nav > div h3 span{ font-size: 14px; font-weight: bold; display: block; list-style: 1.4em;}
#spc-page-list .inner nav > div ul li{ width: 100%; display: flex;}
#spc-page-list .inner nav > div ul li a{ width: 100%; display: flex; padding: 5px 10px 5px 30px; color: #111;}
#spc-page-list .inner nav > div ul li a::before{ content: "・"; margin-left: -1em;;}
#spc-page-list .inner nav > div ul li a:hover{ text-decoration: underline;}
@media screen and (max-width: 600px) {
#spc-page-list .inner h2 span{ font-size:2.2vw;}
#spc-page-list .inner nav > div ul { border-bottom: dotted 1px #aaa;}
#spc-page-list .inner nav > div ul li{ border-top: dotted 1px #aaa;}
}
/*----------------------
カテゴリー一覧
-------------------------*/
#cateList .innerWrap{ width: 90%; margin: 0 5% 70px; max-width: 700px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
#cateList .innerWrap ul{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
#cateList .innerWrap ul li{ width: 100%; display: block; margin: 6px 0;}
#cateList .innerWrap ul li a{ width: 100%; display: block; padding: 20px 4%; border-radius: 4px; background: #fff; color:#111; box-shadow: 0 6px 14px rgba(0,0,0,.1); border: solid 1px #ddd;}
#cateList .innerWrap ul li a:hover{ background: var(--color1); box-shadow: 0 0 0 rgba(0,0,0,.1); border: solid 1px #aaa;}}
@media screen and (max-width: 600px) {
#cateList .innerWrap ul li a{ font-size: 14px;}

}

/*----------------------
一覧のタイトル
-------------------------*/
.sp_index #spttl{}
.sp_index #spttl .inner{ width: 90%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin: 100px 5% 0; max-width: 700px;}
.sp_index #spttl .inner h1{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-bottom: 30px;}
.sp_index #spttl.category-ttl .inner h1{ margin-bottom: 10px;}
.sp_index #spttl.category-ttl .inner h2{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; font-size: 15px; font-weight: 200; margin-bottom: 30px;}
.sp_index #spttl.category-ttl .inner h2 a{ display: flex; align-items: center; height: 20px; font-size:11px; list-style: 1em; background:var(--cursor_color4); border: solid 1px #aaa; border-radius: 40px; padding: 4px 10px; color: #000; margin-top: 10px;}
.sp_index #spttl.category-ttl .inner h2 a:hover{ background-color: #111; border: solid 1px #111; color: #fff;}

.sp_index #spttl .inner h1 strong{display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; font-size: 30px; font-weight: 200; letter-spacing: 0.2em;}
.sp_index #spttl .inner h1 strong span{ display: block; font-size: 20px; margin-top: 6px; font-weight: 200; letter-spacing: 0.2em;}
.sp_index #spttl .inner p{ display: block; font-size: 12px;}
@media screen and (max-width: 800px) {
.sp_index #spttl{ padding: 10vh 0 5vh;}
}
@media screen and (max-width: 700px) {
.sp_index #spttl .inner h1 strong{ font-size: 5.0vw; letter-spacing: 0.15em;}
.sp_index #spttl .inner h1 strong span{ font-size: 3.4vw; letter-spacing: 0.15em; margin-top:10px;}

}

/*-----------------------------*/
#blog-page-wrap main .main-colum{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-items: flex-start;}
#blog-page-wrap main #blog-main *{ font-size: 15px; color: #222; font-weight: 300; margin-bottom: 20px; vertical-align: baseline;}
#blog-page-wrap main #blog-main * a{ color:steelblue; text-decoration: underline;}
#blog-page-wrap main #blog-main *  a:hover{ color:#333; text-decoration: none;}
#blog-page-wrap main #blog-main b{ font-weight: bold;}
#blog-page-wrap main #blog-main p{line-height: 1.8em; letter-spacing: 1px;}
#blog-page-wrap main #blog-main p.img-border img{border: solid 1px #ddd;}
#blog-page-wrap main #blog-main p.gray{border: solid 1px #ddd; padding: 20px; background: #eee; border-radius: 4px;}
#blog-page-wrap main #blog-main p *{line-height: 1.8em; letter-spacing: 1px; }
#blog-page-wrap main #blog-main h2{ display: block; padding: 15px 0; border-bottom: solid 1px #000; margin: 30px 0; position: relative;}
#blog-page-wrap main #blog-main h2 span, 
#blog-page-wrap main #blog-main h3 span, 
#blog-page-wrap main #blog-main h4 span{ opacity: 1 !important; -webkit-transform: translateY(0px) !important; transform: translateY(0px) !important; transition: 0  !important;}
#blog-page-wrap main #blog-main h2, 
#blog-page-wrap main #blog-main h2 .tSpan, 
#blog-page-wrap main #blog-main h2 .setTit, 
#blog-page-wrap main #blog-main h2 .setTit span{ font-size: 28px; font-weight: 500; color: #000; line-height: 1.2em; position: relative;}
#blog-page-wrap main #blog-main h3{ display: block; padding: 10px 0; position: relative; margin-bottom: 20px;}
#blog-page-wrap main #blog-main h3, 
#blog-page-wrap main #blog-main h3 .tSpan, 
#blog-page-wrap main #blog-main h3 .setTit, 
#blog-page-wrap main #blog-main h3 .setTit span{ font-size: 22px; letter-spacing: 0; color: #000; font-weight: bold; line-height: 1.2em;}
#blog-page-wrap main #blog-main h4{ display: block; padding: 5px 0;}
#blog-page-wrap main #blog-main h4, 
#blog-page-wrap main #blog-main h4 span, 
#blog-page-wrap main #blog-main h4 .setTit, 
#blog-page-wrap main #blog-main h4 .setTit span{ font-size: 17px; color: #000; font-weight: bold; line-height: 1.2em;}
#blog-page-wrap main #blog-main h2.border{ padding: 15px 10px 20px; border: solid 2px #111; border-radius: 6px;}
#blog-page-wrap main #blog-main h3.border{ padding: 10px 10px 18px; border: solid 2px #111; border-radius: 6px;}
#blog-page-wrap main #blog-main h4.border{ padding: 6px 10px 12px; border: solid 1px #111; border-radius: 6px;}
@media screen and (max-width: 1020px) {
#blog-page-wrap main .main-colum{ width: 100%;}
}
@media screen and (max-width: 800px) {
#blog-page-wrap main #blog-main *{ font-size: 14px;}
#blog-page-wrap main #blog-main h2, 
#blog-page-wrap main #blog-main h2 .tSpa, 
#blog-page-wrap main #blog-main h2 .setTit, 
#blog-page-wrap main #blog-main h2 .setTit span{ font-size: 26px;}
#blog-page-wrap main #blog-main h3, 
#blog-page-wrap main #blog-main h3 .tSpan,
#blog-page-wrap main #blog-main h3 .setTit, 
#blog-page-wrap main #blog-main h3 .setTit span{ font-size: 20px; font-weight: bold;}
#blog-page-wrap main #blog-main h4, 
#blog-page-wrap main #blog-main h4 span, 
#blog-page-wrap main #blog-main h4 .setTit, 
#blog-page-wrap main #blog-main h4 .setTit span{ font-size: 15px;}

}
/*------------------------
blog-page-wrap
----------------------------*/
#blog-page-wrap main #blog-main{ max-width: 740px; width: 90%; margin:0 5%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#blog-page-wrap main #blog-main > *{ width: 100%;}






/*==============================================
  下層 MV
================================================*/
#titleArea{ width: 90%; max-width: 740px; margin: 0 5%; padding-top:120px; display: flex; flex-direction: column-reverse; position: relative; z-index: 8;}
#titleArea h1{ width: 100%; display: flex; justify-items: center; align-items: center;}
#titleArea h1 span{ font-size: 28px; font-weight: 300; line-height: 1.4em;}
#titleArea h2{ display: block;}
#titleArea h2 span{ display: inline-block; background:var(--cursor_color4); color: #666; font-size: 11px; line-height: 1.1em; padding: 4px 6px; border-radius: 3px; margin-bottom: 25px;}
@media screen and (max-width: 600px) {
#titleArea{ padding:100px 0 50px;}
#titleArea h1 span{ font-size: 24px;}
#titleArea h2 span{margin-bottom: 25px;}

}
/*---------
breadcrumb
-----------*/
#blog-page-wrap .breadcrumb{ width: 90%; max-width: 740px; margin: 0 5% 70px; display: flex; flex-direction: column; position: relative; z-index: 8;}
#blog-page-wrap .breadcrumb ul{ width: 100%; display: flex; justify-items: center; align-items: center; flex-wrap: wrap;}
#blog-page-wrap .breadcrumb ul li{ display: flex; align-items: center; }
#blog-page-wrap .breadcrumb ul li::after{ content:">"; font-size: 9px; color: #aaa;}
#blog-page-wrap .breadcrumb ul li:last-child::after{ display: none;}
#blog-page-wrap .breadcrumb ul li a{ display:flex; align-items: center; justify-items: center; padding: 2px 5px; background: #f0f0f0;}
#blog-page-wrap .breadcrumb ul li a  span{ font-size: 9px; line-height: 0; line-height: 1em; color: #777;}
#blog-page-wrap .breadcrumb ul li a:hover span{ color: #000; text-decoration:underline;}
#blog-page-wrap .breadcrumb ul li br{ display: none;}









/*---------
目次：プラグイン
-----------*/
#blog-page-wrap main #toc_container { padding: 10px 10px 10px 20px; background: #f0f0f0; border-radius: 2px; margin-bottom: 40px;}
#blog-page-wrap main #toc_container *{ font-size: 14px !important;}
#ez-toc-container .ez-toc-js-icon-con{ margin-bottom: 0px !important;}
#blog-page-wrap main #toc_container > ul, 
#blog-page-wrap main #toc_container > ul > ul{ width: 100%; display: flex; flex-direction: column;}
#blog-page-wrap main #toc_container > ul > li { width: 96%; display: block; margin:10px 0 6px 4%; line-height: 1.2em; }
#blog-page-wrap main #toc_container > ul > li{list-style: decimal !important; display: list-item !important;}
#blog-page-wrap main #toc_container > ul > li > a{ font-weight: 500; color: #000;}
#blog-page-wrap main #toc_container > ul > li a:hover{ color: #000;}
#blog-page-wrap div#ez-toc-container .ez-toc-list>li ul li a, 
#blog-page-wrap main #toc_container li a{ text-decoration: underline !important;}
#blog-page-wrap div#ez-toc-container .ez-toc-list>li ul li a:hover, 
#blog-page-wrap main #toc_container li a:hover{ text-decoration: underline !important;}
#blog-page-wrap main #toc_container > ul > li > ul li{ }
#blog-page-wrap main #toc_container > ul > li > ul li{ width: 98%; margin:6px 0 2px 2%; line-height: 1.2em; list-style: disc !important; overflow: visible !important; display: list-item !important; padding: 2px 0;}
#blog-page-wrap main #toc_container > ul > li > ul li a{ font-size: 90%; color: #555 !important; font-weight: 300;}
#blog-page-wrap main #toc_container ul li::marker{ font-family: Arial, Helvetica, "sans-serif"; font-weight: bold; position: relative; z-index: 99999999999999999999; opacity: 1;}
#blog-page-wrap div#ez-toc-container .ez-toc-title-container .ez-toc-title-toggle, 
#blog-page-wrap div#ez-toc-container .ez-toc-title-container .ez-toc-title-toggle *{ margin-bottom: 0px !important;}
@media screen and (max-width: 600px) {
#blog-page-wrap main #toc_container *{ font-size: 15px;}
#blog-page-wrap main #toc_container { padding: 20px 10px 20px 25px;}
#blog-page-wrap main #toc_container > ul > li{ width: 94%; margin:10px 0 5px 6%;}
}

/*今回の目次*/
#blog-page-wrap #ez-toc-container { background: #f0f0f0; border: none !important;border-radius: 4px;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow:none !important; display: table; margin-bottom: 1em; padding: 10px 10px 10px 20px !important; position: relative; width: auto;}
#blog-page-wrap div#ez-toc-container .ez-toc-title-container{ padding-right: 100px; position: relative; margin-bottom: 0px !important;}
#blog-page-wrap div#ez-toc-container .ez-toc-title-container .ez-toc-title-toggle{ position: absolute; right: 0; top: 0;}
#blog-page-wrap div#ez-toc-container .ez-toc-title{ font-size: 13px; font-weight: bold;}
#blog-page-wrap div#ez-toc-container .ez-toc-list li a{ font-size: 12px !important;}
#blog-page-wrap div#ez-toc-container .ez-toc-list li a:hover{ color: #000 !important; text-decoration: underline;}
#blog-page-wrap div#ez-toc-container .ez-toc-list > li  { margin: 10px 0 !important; line-height: 1.1em !important; }
#blog-page-wrap div#ez-toc-container .ez-toc-list > li > a{ font-weight: 500; color: #000; margin: 0 !important; text-decoration: none;}
#blog-page-wrap div#ez-toc-container .ez-toc-list > li > a:hover{ text-decoration: underline; color: var(--color1);}
#blog-page-wrap div#ez-toc-container .ez-toc-list > li ul li{ width: 95%; margin:0 0 5px 5%; line-height: 1.1em; list-style: disc !important; overflow: visible !important; display: flex !important; align-items: center; justify-items: flex-start; padding: 2px 0; position: relative;}
#blog-page-wrap div#ez-toc-container .ez-toc-list > li ul li::before{ content: "・"; font-size: 11px; position: absolute; left: -11px; top: 2px;}
#blog-page-wrap div#ez-toc-container .ez-toc-list > li ul li a{ font-size: 90%; color: #555 !important; font-weight: 300; margin: 0px !important;}
#blog-page-wrap div#ez-toc-container .ez-toc-list > li ul.ez-toc-list-level-3{ margin: 5px 0 0 !important;}
.ez-toc-icon-toggle-span{ margin-bottom: 0px !important;}

/*---------
シリーズ
-----------*/
#blog-page-wrap main #blog-main .series{ width: 100%; display: flex; flex-direction: column; padding: 15px 3%; border: solid 2px #eee; border-radius: 2px;}
#blog-page-wrap main #blog-main .series > * {width: 100%; display: flex; flex-direction: column;}
#blog-page-wrap main #blog-main .series p{ font-size: 13px; font-weight: bold;}
#blog-page-wrap main #blog-main .series ul li{ width: 100%; display: block; padding: 4px 0 4px 35px; position: relative; margin:3px 0 ; }
#blog-page-wrap main #blog-main .series ul li a{ color: #555; text-decoration: underline; font-size: 12px;}
#blog-page-wrap main #blog-main .series ul li a:hover{ color: var(--cursor_color1); text-decoration: none;}
#blog-page-wrap main #blog-main .series ul li.now::before{ content: "now"; width: 30px; height: 30px; line-height: 28px; vertical-align: middle; border-radius: 100%; background:var(--color1); color:#fff; text-align: center; font-size: 12px; letter-spacing: 0; position: absolute; left: -1px; top: 50%; margin-top: -15px; text-align: center;}
#blog-page-wrap main #blog-main .series ul li.now{ border: solid 1px #777; color: #fff; background: #777;  border-radius: 30px; font-size: 13px;}
@media screen and (max-width: 600px) {
#blog-page-wrap main #blog-main .series{ padding: 15px 4%;}
#blog-page-wrap main #blog-main .series p, 
#blog-page-wrap main #blog-main .series ul li.now, 
#blog-page-wrap main #blog-main .series ul li a{ font-size: 15px;}
}
/*---------
パーツデザイン
-----------*/
#blog-page-wrap main .dlbox { display: flex; flex-direction: column; padding: 20px; border-radius: 12px; background: #f5f5f5; border: solid 1px #999;}
#blog-page-wrap main .dlbox > *{ width: 100%; display: flex; font-weight: 300;}
#blog-page-wrap main .dlbox dt{ font-size: 16px; font-weight: bold; margin-bottom: 10px; border-bottom: solid 3px #ccc; padding-bottom: 5px;}
#blog-page-wrap main .dlbox dd { font-size: 16px; margin-bottom: 5px;}
#blog-page-wrap main .dlbox dd b{ display: block; margin-right: 5px; letter-spacing: 0; font-size: 14px; color: #000;}
#blog-page-wrap main .dlbox dd span { flex:1; display: block; letter-spacing: 0; font-size: 14px;}















/*-------------------
ページリンク関連
----------------------*/
/*次へボタン*/
#blog-post-bottom{ padding-top: 80px; width: 92%; margin: 0 4%;}
#blog-post-bottom .pageInner{ width: 100%; max-width: 650px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#blog-post-bottom #blog_page_link { width: 100%; margin: 40px 0 100px;}
#blog-post-bottom #blog_page_link ul{ display: flex; flex-direction: row; justify-content: space-between;}
#blog-post-bottom #blog_page_link ul li{ display: block; width: 20%; margin: 0 3%; }
#blog-post-bottom #blog_page_link ul li.list{ width: 38%;}
#blog-post-bottom #blog_page_link ul li > *{ line-height: 50px; text-align: center; display: block; font-size: 13px; border-radius: 2px;}
#blog-post-bottom #blog_page_link ul li a{ border: solid 1px #555; text-decoration: none; color: #111; font-weight: 300; position: relative;}
#blog-post-bottom #blog_page_link ul li a span{ font-size:13px;}
#blog-post-bottom #blog_page_link ul li a:hover{ background: #f0f0f0; border: solid 1px 000; box-shadow: 0 0 0 2px #000;}
#blog-post-bottom #blog_page_link ul li > span{ background: #e5e5e5; color: #888;}
/*icon*/
#blog-post-bottom #blog_page_link ul li.list a span, 
#blog-post-bottom #blog_page_link ul li.list a span::before, 
#blog-post-bottom #blog_page_link ul li.list a span::after{ content: ""; display: block; width: 20px; height: 2px; position: absolute; background: #111; transition: 0.3s;}
#blog-post-bottom #blog_page_link ul li.list a span{ margin-top: -1px; left: 15%; top: 50%;}
#blog-post-bottom #blog_page_link ul li.list a span::before{ margin-top: -6px; left: 0; top: 0;}
#blog-post-bottom #blog_page_link ul li.list a span::after{ margin-top: 6px; left: 0; top: 0;}
#blog-post-bottom #blog_page_link ul li.list a:hover span::before{ margin-top: -4px;}
#blog-post-bottom #blog_page_link ul li.list a:hover span::after{ margin-top: 4px;}
#blog-post-bottom #blog_page_link ul li a::before{ width: 10px; height: 10px; display: block; content: ""; position: absolute; border-bottom: solid 3px #111; top: 50%; margin-top: -7px; transition: 0.4s;}
#blog-post-bottom #blog_page_link ul li:nth-child(1) a::before{ left: 8%; border-left: solid 3px #111; transform:rotate(45deg);}
#blog-post-bottom #blog_page_link ul li:nth-child(1) a:hover::before{ left:6%;}
#blog-post-bottom #blog_page_link ul li:nth-child(2) a::before{ display: none;}
#blog-post-bottom #blog_page_link ul li:nth-child(3) a::before{ right: 8%; border-right: solid 3px #111; transform:rotate(-45deg);}
#blog-post-bottom #blog_page_link ul li:nth-child(3) a:hover::before{ right:6%;}
@media screen and (max-width:800px) {
#blog-post-bottom #blog_page_link { margin: 0px 0 100px;}
#blog-post-bottom #blog_page_link ul li{width: 28%; margin: 0;}
#blog-post-bottom #blog_page_link ul li.list a span{ left: 8%;}
}
@media screen and (max-width:600px) {
#blog-post-bottom #blog_page_link ul li a span{ display: none;}
#blog-post-bottom #blog_page_link ul li a::before{ width: 8px; height: 8px; margin-top: -5px;}
#blog-post-bottom #blog_page_link ul li{width: 25%; margin: 0; }
#blog-post-bottom #blog_page_link ul li.list a{ padding-left: 8%;}
#blog-post-bottom #blog_page_link ul li.list a, 
#blog-post-bottom #blog_page_link ul li:nth-child(1) a::after, 
#blog-post-bottom #blog_page_link ul li:nth-child(3) a::after{ font-size: 13px;}
/*
#blog-post-bottom #blog_page_link ul li:nth-child(1) a::after{ content: "前へ";}
#blog-post-bottom #blog_page_link ul li:nth-child(3) a::after{ content: "次へ";}
*/
}




/*-----------
カテゴリ・タグ一覧
--------*/
#blogList-search { display: flex; flex-direction: column; padding-bottom: 30px;}
#blogList-search .flex{ width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; align-items: flex-end;}
#blogList-search .flex .category{ width: 72%; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;}
#blogList-search .flex .category *{ display: block; font-size: 12px;}
#blogList-search .flex .category dt{ width: 100%; margin-left: 5px;}
#blogList-search .flex select{ display: none;}
#blogList-search .flex .category dd{ margin:0 5px 5px;}
#blogList-search .flex .category dd span{ display: block; line-height: 24px; padding: 2px 10px; border-radius: 6px; background: #666; color: #fff; border: solid 1px #666;}
#blogList-search .flex .category dd a{ background: #f5f5f5; border: solid 1px #f5f5f5; padding: 2px 6px; font-size: 11px; color: #999; border-radius: 3px;}

.term-web-marketing #blogList-search .flex .category dd a{}


#blogList-search .flex .category dd a:hover{ border: solid 1px #111; background: #fff; color: #000;}
#blogList-search .flex #searchform{ display: flex; width: 25%; flex-direction: row; justify-content: flex-end;}
#blogList-search .flex #searchform input[type="text"]{ width:calc(100% - 100px); padding: 4px; border-radius: 2px; position: relative; border: solid 1px #ccc; font-size: 13px; transition: 0.1s;}
#blogList-search .flex #searchform input[type="text"]:focus{ width:calc(100% - 45px); border: solid 1px #000; box-shadow: none;}
#blogList-search .flex #searchform button{ width: 43px; font-size: 12px; margin-left: 2px; background: #fff; border: solid 1px #ccc; border-radius: 2px; cursor: pointer;}
#blogList-search .flex #searchform button:hover{ border: solid 1px #555;}
@media screen and (max-width: 950px) {
#blogList-search .flex #searchform{ width: 35%;}
}
@media screen and (max-width: 800px) {
#blogList-search .flex #searchform{ width: 52%;}
#blogList-search .flex #searchform input[type="text"], 
#blogList-search .flex #searchform input[type="text"]:focus{ width:calc(100% - 50px);}
#blogList-search .flex #searchform button{ width: 40px; padding: 0; font-size: 10px; letter-spacing: 0; margin-left:-1px; word-break: keep-all; white-space: nowrap;}
}


/**/
#blogList-search .tag{ width: 100%; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 10px 20px; border-radius: 6px; background: #f5f5f5; border: solid 1px #ddd;}
#blogList-search .tag:hover{ background: #fff;}
#blogList-search .tag * {font-size: 11px; line-height: 1.2em;}
#blogList-search .tag dt{ font-weight: bold; width: 80px;}
#blogList-search .tag dd{ width: calc(100% - 90px); display: block;}
#blogList-search .tag dd a{ margin: 0 5px 5px 0; display: inline-block; text-decoration: underline; color: #777;}
#blogList-search .tag dd:hover a{ color: #ccc;}
#blogList-search .tag dd a:hover{ color: #000; text-decoration: underline;}
@media screen and (max-width: 1000px) {
#blogList-search .flex .category{ width: 65%; }
#blogList-search .flex input[type="text"], 
#blogList-search .flex input[type="text"]:focus{ width: 34%;}
}
@media screen and (max-width: 800px) {
#blogList-search .flex .category *{ display: block; font-size: 11px;}
#blogList-search .flex .category dd span, 
#blogList-search .flex .category dd a{ padding: 0px 5px; border-radius: 4px;}
}
@media screen and (max-width:700px) {
#blogList-search{ padding: 0;}
#blogList-search .flex .category dt{ width: 100%; margin-left: 5px;}
#blogList-search .flex .category { display: none;}
#blogList-search .flex  select, 
#blogList-search .flex input[type="text"]{ width: 46%; display: block; font-size: 13px; height: 30px;}
#blogList-search .flex select{ padding: 4px;}
#blogList-search .flex select:focus{ border: solid 1px #000; box-shadow: none;}
#blogList-search .flex input[type="text"], 
#blogList-search .flex input[type="text"]:focus{ width: 46%;}
#blogList-search .tag{ display: none; border-bottom: solid 2px #111;}
}