@charset "utf-8";
/*------------------------
blog-page-wrap
----------------------------*/
@media screen and (min-width: 850px) {
header { background: rgba(255, 255, 255, 1);}
}
.ez-toc-section{ width: 100%; height: 2px; display: block; pointer-events: none; position: absolute; left: 0; top: 0; margin-top: 94vh;}
@media screen and (min-width: 801px) {
#blog-page-wrap{}
}


#blog-page-wrap{ width: 100%; display: block;}
#blog-page-wrap main #blog-main *{ font-size: 15px; color: #333; font-weight: 400;}
#blog-page-wrap main #blog-main b{ font-weight: bold;}
#blog-page-wrap main #blog-main p, 
#blog-page-wrap main #blog-main p *{line-height: 1.8em; letter-spacing: 1px; }
#blog-page-wrap main #blog-main p > .alignnone{ margin: 20px 0;}
#blog-page-wrap main #blog-main h2{display: block; padding: 15px 0; border-bottom: solid 6px #000; margin-top: 30px; position: relative;}
#blog-page-wrap main #blog-main h2, 
#blog-page-wrap main #blog-main h2 .tSpan, 
#blog-page-wrap main #blog-main h2 > .in{ font-size: 34px; color: #000; font-weight: 900; line-height: 1.1em; position: relative;}
#blog-page-wrap main #blog-main h3{ display: block; padding: 10px 0; position: relative;}
#blog-page-wrap main #blog-main h3, 
#blog-page-wrap main #blog-main h3 .tSpan, 
#blog-page-wrap main #blog-main h3  > span.block{ font-size: 28px; letter-spacing: 0; color: #000; font-weight: 700; 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 h3  > .in{ font-size: 20px; color: #000; font-weight: bold; line-height: 1.2em;}
#blog-page-wrap main #blog-main h2 { margin-top: 50px;}
#blog-page-wrap main #blog-main h3 { margin-top: 50px;}
#blog-page-wrap main #blog-main h4 { margin-top: 50px;}

#blog-page-wrap main #blog-main h2.border{ padding: 15px 10px; border: solid 3px #111; margin-bottom: 20px; border-radius: 6px;}
#blog-page-wrap main #blog-main h3.border{ padding: 10px 10px 18px; border: solid 2px #111; margin-bottom: 20px; border-radius: 6px;}
#blog-page-wrap main #blog-main h4.border{ padding: 6px 10px 12px; border: solid 1px #111; margin-bottom: 20px; border-radius: 6px;}


@media screen and (max-width: 800px) {
#blog-page-wrap{ margin-top: 50px;}
#blog-page-wrap main #blog-main *{ font-size: 16px;}
#blog-page-wrap main #blog-main h2, 
#blog-page-wrap main #blog-main h2 .tSpan, 
#blog-page-wrap main #blog-main h2 > .in{ 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  > span.block{ 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 h3  > .in{ font-size: 18px;}
}
/*==============================================
  下層 MV
================================================*/
#titleArea{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin:90px 0 0; position: relative; z-index: 8; background:#000;}
#titleArea .back{ width:100%; height: 100%; position: absolute; z-index: -1; left: 0; top:0; opacity: 0.3; background-size: cover!important;}

#titleArea h1{ width: 100%; display: flex; justify-content: center; padding: 60px 5% 10px;}
#titleArea h1 span{ font-size: 26px; color: #fff; font-weight: normal; line-height: 1.6em;}
#titleArea ul{ width: 100%; float: left; text-align: center; margin-bottom: 60px;}
#titleArea ul li{ display: inline-block; color: #fff; vertical-align: baseline;}
#titleArea ul li:first-child::after{ content: "　―　";}
#titleArea ul li.date{ letter-spacing: 1px;}
#titleArea ul li.cate{ font-size: 18px;}
@media screen and (max-width: 800px) {
#titleArea{ margin:20px 0 0;}

#titleArea h1 span{ font-size: 22px;}
}
@media screen and (max-width: 510px) {
#titleArea{ margin:10px 0 20px;}
#titleArea h1 span{ font-size: 18px; letter-spacing: 0;}
#titleArea ul li.date{ font-size: 13px;}
#titleArea ul li.cate{ font-size: 14px;}
}
/*------------------------
blog-page-wrap
----------------------------*/
#blog-page-wrap main{ width: 100%; display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start;}
#blog-page-wrap main #blog-main{ max-width: 800px; width: 90%; margin:0 5%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#blog-page-wrap main #blog-main > *{ width: 100%;}
/*---------
WriterID
-----------*/
@media screen and (min-width: 1021px) {
body, 
#blog-page-wrap, 
#blog-page-wrap main{ overflow: visible;}
/**/
}
@media screen and (max-width: 1021px) {
#blog-page-wrap main{ flex-direction: column; align-items: center;}
}


/*---------
breadcrumb
-----------*/
#blog-page-wrap .breadcrumb{ width: 100%; display: flex; padding:10px 2% 40px; justify-content: center;}
.opBody1 #blog-page-wrap .breadcrumb{ opacity: 1;}
#blog-page-wrap .breadcrumb ul{ width: 96%; max-width: 900px; display: flex; flex-wrap: wrap;}
#blog-page-wrap .breadcrumb ul li{ display: flex; align-items: center; line-height: 1em;}
#blog-page-wrap .breadcrumb ul li > *{ font-size: 11px; line-height: 0; line-height: 1.2em;}
#blog-page-wrap .breadcrumb ul li strong{ font-weight: bold; color: #000;}
#blog-page-wrap .breadcrumb ul li a{ color: #777;}
#blog-page-wrap .breadcrumb ul li a:hover{ color: #000; text-decoration:underline;}
#blog-page-wrap .breadcrumb ul li::after{ content:">"; display: block; font-size: 11px; margin: 0 5px; line-height: 1em; font-weight: 200; color: #aaa;}
#blog-page-wrap .breadcrumb ul li:last-child::after{ display: none;}
#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;}
#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; text-decoration: underline;}
#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;}
@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; margin-top: 30px;}
#blog-page-wrap div#ez-toc-container .ez-toc-title{ font-size: 14px; font-weight: bold;}


#blog-page-wrap div#ez-toc-container .ez-toc-list li a{ font-size: 13px !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;}
#blog-page-wrap div#ez-toc-container .ez-toc-list > li ul li{ width: 95%; margin:2px 0 2px 5%; line-height: 1.1em; list-style: disc !important; overflow: visible !important; display: list-item !important; padding: 2px 0;}

#blog-page-wrap div#ez-toc-container .ez-toc-list > li 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-list > li ul li a{ font-size: 90%; color: #555 !important; font-weight: 300;}


/*---------
シリーズ
-----------*/
#blog-page-wrap main #blog-main .series{ width: 100%; float: left; padding: 20px 5%; border: solid 4px #eee; border-radius: 4px;}
#blog-page-wrap main #blog-main .series > * {width: 100%; float: left; }
#blog-page-wrap main #blog-main .series p{ font-size: 14px; font-weight: bold;}
#blog-page-wrap main #blog-main .series ul li{ width: 100%; float: left; padding: 4px 0 4px 35px; position: relative; margin:5px 0 ; }
#blog-page-wrap main #blog-main .series ul li a{ color: #CD6567; text-decoration: underline; font-size: 13px;}
#blog-page-wrap main #blog-main .series ul li a:hover{ color: #000; text-decoration: none;}
#blog-page-wrap main #blog-main .series ul li.now::before{ content: "now"; width: 30px; line-height: 30px; vertical-align: middle; border-radius: 100%; background:#CD6567; color: #fff; text-align: center; font-size: 11px; letter-spacing: 0; position: absolute; left: 0; top: 50%; margin-top: -15px;}
#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: 60px; text-align: center; display: block; font-size: 16px; border-radius: 4px;}
#blog-post-bottom #blog_page_link ul li a{ border: solid 1px #555; text-decoration: none; color: #111; font-weight: bold;position: relative;}
#blog-post-bottom #blog_page_link ul li a span{ font-size: 16px;}
#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: "次へ";}
*/
}
/*-------------------
カテゴリー一覧
----------------------*/
.blog_post_list{ width: 100%; border-bottom: solid 1px #ddd; margin-bottom: 100px;}
.blog_post_list h2, 
.blog_post_list h3, 
.blog_post_list h4{ position: relative;}
.blog_post_list h2, 
.blog_post_list h2 a{ font-size: 16px !important;}
.blog_post_list h2 a:hover{ opacity: 0.4; text-decoration: underline;}
.blog_post_list h2{ padding: 20px 10px !important; color: #000 !important; border: none!important; border-bottom: solid 1px #000 !important; border-top: solid 5px #000 !important; font-weight: bold !important; background: none !important; border-radius: 0 !important;} 
/**/
.blog_post_list ul{ margin: 10px 0;}
.blog_post_list ul li{ display: block;}
.blog_post_list ul li a{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 10px 5%; text-decoration: none;}
.blog_post_list ul li a .img{ width: 70px; height: 70px; background: #fff; border: solid 1px #ddd; display: block; position: relative; z-index: 1;}
.blog_post_list ul li a .img::before{ position: absolute; top: 30px; left: 0; text-align: center; width: 100%; height: 24px; font-size: 12px; content: "UMBER"; z-index: 5; line-height: 12px; letter-spacing: 0; color: #777; text-align: center; font-weight: 200;}
.blog_post_list ul li a .img img{ width: 70px; height: 70px; max-width: none; object-fit: cover; position: relative; z-index: 10;}
.blog_post_list ul li a p{ margin-left: 25px; font-size: 16px; font-weight: 500;}
.blog_post_list ul li a p span { font-size: 12px !important; color: #999; display: block; }
.blog_post_list ul li a p br{ display: none;}
.blog_post_list ul li a:hover p{ text-decoration: underline;}
.blog_post_list ul li a:hover p span{ text-decoration: none !important;}
@media screen and (max-width:700px) {
.blog_post_list{ margin-bottom: 0px;}
}









/*-------------------
タウン移管時のお役立ち情報処理
----------------------*/
#blog-page-wrap main #blog-main .author { display: flex; align-items: flex-start; padding: 20px; border: solid 1px #ddd; border-radius: 4px; margin: 50px 0;}
#blog-page-wrap main #blog-main .author .img { display: none;}
#blog-page-wrap main #blog-main .author figure{ width: 200px; display: block; margin-right: 30px; }
#blog-page-wrap main #blog-main .author figure img{ width: 100%; height: auto;}
#blog-page-wrap main #blog-main .author .text { padding-top: 20px; display: flex; flex: 1; flex-wrap: wrap; justify-content: flex-start;}
#blog-page-wrap main #blog-main .author .text h3, 
#blog-page-wrap main #blog-main .author .text h4 { width:130px; height: 22px; margin-top: 4px; display: flex; justify-content: center; align-items: center; font-size: 11px; letter-spacing: 0; color: #444; font-weight: 500; border: solid 1px #666; border-radius: 30px;}
#blog-page-wrap main #blog-main .author .text h5.name{ width: calc(100% - 180px); font-size: 20px; border: none; margin-left: 20px;}
#blog-page-wrap main #blog-main .author .text p{ font-size: 12px; color: #555; line-height: 1.3em; margin-top: 15px;}
#blog-page-wrap main #blog-main .author .text .link_outside { display:flex; width: 100%; margin-top: 10px;}
#blog-page-wrap main #blog-main .author .text .link_outside a{ color: #13718E; font-size: 12px; text-decoration: underline;}

@media screen and (max-width:700px) {
#blog-page-wrap main #blog-main .author { padding: 15px;}
#blog-page-wrap main #blog-main .author figure{ width: 30%; margin-right: 2%; }
#blog-page-wrap main #blog-main .author .text { flex-direction: column; padding: 0;}
#blog-page-wrap main #blog-main .author .text h5.name{ width: 100%; margin:10px 0 0;}
#blog-page-wrap main #blog-main .author .text p{ margin-top: 8px;}
}
@media screen and (max-width:500px) {
#blog-page-wrap main #blog-main .author .text p{ font-size: 11px;}
}

/*-------------------
タウン移管時のお役立ち情報処理
----------------------*/

#blog-page-wrap main #blog-main .column .Left{ width: 100%; display: flex; justify-content: space-between;}
#blog-page-wrap main #blog-main .column .Left p img{ min-width: 350px; height: auto; margin-left: 30px;}

@media screen and (max-width:700px) {
#blog-page-wrap main #blog-main .column .Left{ flex-direction: column;}
#blog-page-wrap main #blog-main .column .Left p { padding: 15px;}
#blog-page-wrap main #blog-main .column .Left p img{ min-width: 100%; height: auto; margin:15px 0;}


}