@charset "utf-8";
.is-style-table.font14 table *{ font-size: 14px;}
.is-style-pc-view{ display: block !important;}
.is-style-sp-view{ display: none !important;}
.is-style-rounded{ border-radius: 14px;}
@media screen and (max-width: 650px) {
.is-style-pc-view{ display: none !important;}
.is-style-sp-view{ display: block!important;}
.is-style-rounded{ border-radius: 8px;}
}


/*-----------
共通：絞り込み
--------*/
.search-form{ display: flex; margin-bottom: 5px;}
.screen-reader-text{ display: none !important;}
/**/
#blogList-main #blogList-search { display: flex; flex-direction: column; padding-bottom: 30px;}
#blogList-main #blogList-search .flex{ width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; align-items: flex-end;}
#blogList-main #blogList-search .flex .category{ width: 72%; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;}
#blogList-main #blogList-search .flex .category *{ display: block; font-size: 12px;}
#blogList-main #blogList-search .flex .category dt{ width: 100%; margin-left: 5px;}
#blogList-main #blogList-search .flex select{ display: none;}
#blogList-main #blogList-search .flex .category dd{ margin:0 5px 5px;}
#blogList-main #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-main #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-main #blogList-search .flex .category dd a{}










#blogList-main #blogList-search .flex .category dd a:hover{ border: solid 1px #111; background: #fff; color: #000;}
#blogList-main #blogList-search .flex #searchform{ display: flex; width: 25%; flex-direction: row; justify-content: flex-end;}
#blogList-main #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-main #blogList-search .flex #searchform input[type="text"]:focus{ width:calc(100% - 45px); border: solid 1px #000; box-shadow: none;}
#blogList-main #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-main #blogList-search .flex #searchform button:hover{ border: solid 1px #555;}
@media screen and (max-width: 950px) {
#blogList-main #blogList-search .flex #searchform{ width: 35%;}
}
@media screen and (max-width: 800px) {
#blogList-main #blogList-search .flex #searchform{ width: 52%;}
#blogList-main #blogList-search .flex #searchform input[type="text"], 
#blogList-main #blogList-search .flex #searchform input[type="text"]:focus{ width:calc(100% - 50px);}
#blogList-main #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-main #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-main #blogList-search .tag:hover{ background: #fff;}
#blogList-main #blogList-search .tag * {font-size: 11px; line-height: 1.2em;}
#blogList-main #blogList-search .tag dt{ font-weight: bold; width: 80px;}
#blogList-main #blogList-search .tag dd{ width: calc(100% - 90px); display: block;}
#blogList-main #blogList-search .tag dd a{ margin: 0 5px 5px 0; display: inline-block; text-decoration: underline; color: #777;}
#blogList-main #blogList-search .tag dd:hover a{ color: #ccc;}
#blogList-main #blogList-search .tag dd a:hover{ color: #000; text-decoration: underline;}
@media screen and (max-width: 1000px) {
#blogList-main #blogList-search .flex .category{ width: 65%; }
#blogList-main #blogList-search .flex input[type="text"], 
#blogList-main #blogList-search .flex input[type="text"]:focus{ width: 34%;}
}
@media screen and (max-width: 800px) {
#blogList-main #blogList-search .flex .category *{ display: block; font-size: 11px;}
#blogList-main #blogList-search .flex .category dd span, 
#blogList-main #blogList-search .flex .category dd a{ padding: 0px 5px; border-radius: 4px;}
}
@media screen and (max-width:700px) {
#blogList-main #blogList-search{ padding: 0;}
#blogList-main #blogList-search .flex .category dt{ width: 100%; margin-left: 5px;}
#blogList-main #blogList-search .flex .category { display: none;}
#blogList-main #blogList-search .flex  select, 
#blogList-main #blogList-search .flex input[type="text"]{ width: 46%; display: block; font-size: 13px; height: 30px;}
#blogList-main #blogList-search .flex select{ padding: 4px;}
#blogList-main #blogList-search .flex select:focus{ border: solid 1px #000; box-shadow: none;}
#blogList-main #blogList-search .flex input[type="text"], 
#blogList-main #blogList-search .flex input[type="text"]:focus{ width: 46%;}
#blogList-main #blogList-search .tag{ display: none; border-bottom: solid 2px #111;}
}

@media screen and (min-width:851px) {
.blog header.sticky, 
.blog-post header.sticky{ position: relative;}
}
table{ width: 100%; table-layout: auto; border-collapse: collapse ;}
table.font10 *{ font-size: 10px;}
table.font11 *{ font-size: 11px;}
table.font12 *{ font-size: 12px;}
table.font13 *{ font-size: 13px;}
table.font14 *{ font-size: 14px;}
@media screen and (max-width:850px) {
table td, 
table th { font-size: 13px;}
}
/*------------------------------------------------------------------------------
●blog 一覧

.blog-post #blog-main .blog-article > *{ margin-top: 15px; margin-bottom: 15px; width: 100%; overflow: hidden;}
.blog-post #blog-main .blog-article > figure{ margin-bottom: 0px;}
.blog-post #blog-main .blog-article .column2{ width: 50%;}
.blog-main img{ max-width: 100%; height: auto;}
@media screen and (max-width:850px) {
.blog-post #blog-main .blog-article .column2{ width: 100%;}

}
.blog-post #blog-main .blog-article > h2, 
.blog-post #blog-main .blog-article > h3, 
.blog-post #blog-main .blog-article > h4{ text-align: left; margin-bottom: 20px;}
.blog-post #blog-main .blog-article > h3{ border-bottom: dashed 2px #ccc;} 
.blog-post #blog-main .blog-article > h2{ margin-top: 80px; margin-bottom: 0;}
.blog-post #blog-main .blog-article > h3{ margin-top: 15px; margin-bottom: 15px;}
.blog-post #blog-main .blog-article > h4{ margin-top: 10px;}
@media screen and (max-width:850px) {
.blog-post #blog-main .blog-article > h2{ margin-top: 60px;}
.blog-post #blog-main .blog-article > h3{margin-bottom: 5px;}
.blog-post #blog-main .blog-article > h4{ margin-top: 25px; margin-bottom: 15px;}
}
-----------------------*/

/*-----------
リストスタイル01 ※02~05削除
--------*/
.blog-listTyle01{ background: #fff;}
.blog-listTyle01 #blogList{ display: flex; flex-direction: row; flex-wrap: wrap;}
.blog-listTyle01 #blogList .post-item{ width: 100%; margin: 20px 0; }
.blog-listTyle01 #blogList .post-item a{ border: solid 1px #ccc; padding: 20px 20px 25px; border-radius:6px; background: #fff; box-shadow: 0 0 0 rgba(0,0,0,.2);  display: flex; flex-direction: row;}
.blog-listTyle01 #blogList .post-item a:hover { border: solid 1px #111; border-radius: 4px; box-shadow: 0 5px 12px rgba(0,0,0,.1); }
.blog-listTyle01 #blogList .post-item a * { font-weight: 400; color: #111;}
.blog-listTyle01 #blogList .post-item a .image { width: 35%; aspect-ratio: 6 / 4; display: none; align-items: flex-start; justify-content: center; position: relative; overflow: hidden; border-radius: 4px; background: url("../../img/common/blog.jpg") 50% 50% no-repeat; background-size: 100% auto; border: solid 1px #ddd;}
.blog-listTyle01 #blogList .post-item a .image img{ width: auto; height: 100%; transition: 0.4s; object-fit: cover;}
.blog-listTyle01 #blogList .post-item a:hover .image img{ opacity: 0.6;}
.blog-listTyle01 #blogList .post-item a .text { width: 100%; display: block; padding:0 20px;}
.blog-listTyle01 #blogList .post-item a .text .title h2{ width: 100%; color: #111; font-size: 20px; margin-bottom: 5px; font-weight: 400; text-decoration-thickness: 1px; text-decoration-color: #fff;}
.blog-listTyle01 #blogList .post-item a:hover .text .title h2{ text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: #999;}
.blog-listTyle01 #blogList .post-item a .text .title h3 *{ font-size: 12px; color: #999 !important;}
.blog-listTyle01 #blogList .post-item a .text .title h3, 
.blog-listTyle01 #blogList .post-item a .text .title .date-info{ display: flex; flex-direction: row; justify-content: flex-start; margin-bottom: 15px;}
.blog-listTyle01 #blogList .post-item a .text .title h3 .date, 
.blog-listTyle01 #blogList .post-item a .text .title .date-info .date{ color: #555; margin-right: 20px;}
.blog-listTyle01 #blogList .post-item a .text .title h3 .cate, 
.blog-listTyle01 #blogList .post-item a .text .title .date-info .cate{position: relative;}
.blog-listTyle01 #blogList .post-item a .text .title h3 .cate a,
.blog-listTyle01 #blogList .post-item a .text .title .date-info .cate a{}
.blog-listTyle01 #blogList .post-item a .text p{ font-size: 13px; color: #777; letter-spacing: 200; line-height: 1.2em;}
@media screen and (max-width: 1300px) {
.blog-listTyle01 #blogList .post-item a .image{ width: 40%;}
}
@media screen and (max-width: 1000px) {
.blog-listTyle01 #blogList .post-item a .image{ width: 45%;}
}
@media screen and (max-width: 700px) {
.blog-listTyle01 #blogList{ padding: 10px 0;}
.blog-listTyle01 #blogList .post-item{ width: 100%; margin: 15px 0;}
.blog-listTyle01 #blogList .post-item a { flex-direction: column;}
.blog-listTyle01 #blogList .post-item a .image, 
.blog-listTyle01 #blogList .post-item a .text { margin-bottom: 20px; padding: 0;}
.blog-listTyle01 #blogList .post-item a .image + .text{ width: 100%; margin: 0 0 20px;}
.blog-listTyle01 #blogList .post-item a .text .title{ display: flex; flex-direction: column-reverse;}
.blog-listTyle01 #blogList .post-item a .text .title h2{ margin-bottom: 15px;}
.blog-listTyle01 #blogList .post-item a .text .title h3, 
.blog-listTyle01 #blogList .post-item a .text .title .date-info{ margin-bottom: 5px;}
.blog-listTyle01 #blogList .post-item a .text .title h3 *, 
.blog-listTyle01 #blogList .post-item a .text .title .date-info *{ font-size: 14px; color: #999;}
.blog-listTyle01 #blogList .post-item a .text p{ font-size: 14px; line-height: 1.6em;}
}
@media screen and (max-width: 600px) {
.blog-listTyle01 #blogList .post-item a .text .title h2{ font-size: 22px; line-height: 1.4em;}
.blog-listTyle01 #blogList .post-item a .text .title h3 *, 
.blog-listTyle01 #blogList .post-item a .text .title .date-info *{ font-size: 12px;}
.blog-listTyle01 #blogList .post-item a .text p{ font-size: 12px; color: #666;}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------
●blog 詳細　common

.blog-inner .blog-article{ width:100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.blog-inner * .bold{ font-weight: bold;}
.blog-inner a{ color: var(--link-color); text-decoration: underline; display: inline;}
.blog-inner a:hover{ color:var(--link-hover-color); text-decoration: none;}
-----------------------*/
/*-------------------
投稿　タイトル
----------------------*/
.blog-post-title{ width: 100%; margin: 20px auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.blog-post-title .blog-post-mv{ width: 96%; max-width: 1200px; max-height: 500px; display: block; border-radius: 14px; margin: 0 2% 20px; overflow: hidden; text-align: center;}
.blog-post-title h1{ margin-top: 20px; font-size: 32px !important; margin-bottom: 10px; font-weight: 500; line-height: 1.5em; letter-spacing: 1.8px; border-bottom: solid 4px #000; padding-bottom: 30px;}
.blog-post-title .blog-post-info{ width: 100%; display: flex; flex-direction: row; justify-content: flex-start;  align-items:center; flex-wrap: wrap;}
.blog-post-title .blog-post-info.mb30{ margin-bottom: 0px !important;}
.blog-post-title .blog-post-info p { display: block; margin: 5px 0;}
.blog-post-title .blog-post-info p *{ font-size: 13px;}
.blog-post-title .blog-post-info p .date{ display: inline-block; color: #666; margin-right: 10px; font-size: 15px;}
.blog-post-title .blog-post-info p > a { text-decoration: none; padding: 2px 10px; line-height: 1em; color: #555; border:solid 1px #aaa; border-radius: 20px;}
.blog-post-title .blog-post-info p > a:hover{ background: #eee; color: #111; border: solid 1px #111;}
.blog-post-title .blog-post-info p .tag { display:flex; flex-direction: row; flex-wrap: wrap;}
.blog-post-title .blog-post-info p .tag a{ display:block; margin: 0 5px; color: #777;}
.blog-post-title .blog-post-info p .tag a::before{ content: "#";}
.blog-post-title .blog-post-info p .tag a:hover{ color: #111;}
.blog-post-title .blog-post-info ul{ display: block; flex-direction: row;}
.blog-post-title .blog-post-info ul li { display: inline-block; margin:0 3px 0 0;}
.blog-post-title .blog-post-info ul li a { text-decoration: none; padding: 2px 10px; line-height: 1em; color: #555; border:solid 1px #aaa; border-radius: 20px; font-size:12px; }
.blog-post-title .blog-post-info ul li a:hover{ background: #eee; color: #111; border: solid 1px #111;}
@media screen and (max-width:850px) {
.blog-post-title{ margin-top: 0px;}
.blog-post-title .blog-post-mv{ margin-bottom: 0; margin-top: 15px;}
.blog-post-title .blog-post-info ul li { margin:2px 3px 0 0;}
.blog-post-title .blog-post-info p .date{ font-size: 12px; color: #000; font-weight: bold;}
.blog-post-title .blog-post-info ul li a { padding: 2px 4px; border-radius: 4px; font-size:10px; }
.blog-post-title .blog-post-info p *{ font-size: 10px;}
}
@media screen and (max-width:650px) {
.blog-post-title .blog-post-info{ margin-bottom: 0px  !important;}
.blog-post-title h1{ font-size: 28px !important; line-height: 1.2em; letter-spacing: 1.2px; margin-top: 40px;}
}

/*-------------------
もくじ
----------------------*/
.color-pageIndex { border: solid 1px var(--main-color-1);}
.color-pageIndex li b, 
.color-pageIndex li a { color: var(--main-color-1);}
.normal-pageIndex { border:solid 1px #000;}
.normal-pageIndex li b, 
.normal-pageIndex li a { color: #555;}
.pageIndex{ display: block; padding: 20px 30px 30px; border-radius: 4px;}
.pageIndex li { display: block; margin-left: 10px; position: relative; margin: 8px 0;}
.pageIndex li b{ display: inline-block; margin-bottom: 10px;}
.pageIndex li.h2{ margin-top: 10px;}
.pageIndex li.h2 a{ font-size: 100%; text-decoration: none; }
.pageIndex li.h2 a::before{ content: "・"; left: -1em; position: absolute; top: 0%;}
.pageIndex li.h3 a{ font-size: 86%; text-decoration: none; width: 95%; margin-left:5%; display: block; line-height: 1.2em;}
.pageIndex li.h3 a::before{ content: ""; width: 10px; height: 8px; position: absolute; left: 15px; top: 0%; margin-top: 3px; border-left: solid 1px #555; border-bottom: solid 1px #555;}
.pageIndex li a:hover{ color: blue; text-decoration: underline;}
@media screen and (max-width:850px) {
.pageIndex li.h2 a::before{ content: "〇";}
.pageIndex li.h3 a{ font-size: 92%; padding-left:10px; display: block; line-height: 1.2em; margin: 10px 0 20px;}
.pageIndex li.h3 a::before{ display: none;}
.pageIndex li.h3 a::after{ content: "・"; width: auto; height: auto; position: absolute; left:-6px; top: 0; margin-top: 0; border-left:none; border-bottom: none;}
}

/*-------------------
もくじ　プラグイン
----------------------*/
#toc_container { border: solid 1px #25b4af !important; padding: 15px 25px !important; border-radius: 4px;}
#toc_container > ul > li a, 
#toc_container > ul > li > ul > li a{ color: #25b4af;}
#toc_container { border:solid 1px #000;}
#toc_container p.toc_title{ font-weight: bold; color: #555; margin-bottom: 10px; text-align: left !important;}
#toc_container > ul { display: block;}
#toc_container > ul > li { display: flex; flex-direction: column; margin-bottom: 10px; position: relative;}
#toc_container > ul > li a { font-weight: 94%; width: 100%; display: block; padding-left: 1.2em; text-decoration: none; }
#toc_container > ul > li a::before{ content: "・"; left:0; position: absolute; top: 0%;}
#toc_container > ul > li > ul { display: block; width: 100%; margin: 0 !important;}
#toc_container > ul > li > ul > li{ font-size: 86%; text-decoration: none; width: 100%; display: block; line-height: 1.2em;}
#toc_container > ul > li > ul > li a{ font-size: 90%; text-decoration: none; width: 94%; margin: 0 2% 0 4%; display: block; line-height: 1.2em; padding: 10px; position: relative;}
#toc_container > ul > li > ul > li a::before{ content: ""; width: 10px; height: 8px; position: absolute; left: -8px; top: 10px; border-left: solid 1px #aaa; border-bottom: solid 1px #aaa;}
#toc_container a:hover{ color: var(--main1-color); text-decoration: underline;}
@media screen and (max-width:850px) {
#toc_container > ul > li a::before{ content: "〇";}
#toc_container > ul > li > ul > li a{ width: 96%; margin: 0 2%;}
#toc_container > ul > li > ul > li a::before{ display: none;}
#toc_container > ul > li > ul > li a::after{ content: "・"; height: auto; position: absolute; left:-6px; top: 10px; border-left:none; border-bottom: none; margin: 0 ; }
}

/*-------------------
ページリンク関連
----------------------*/
/*次へボタン*/
#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 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{ 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{ padding: 20px 10px !important; color: #000 !important; border: none!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: url("../../img/common/blog_mini.jpg") 50% 50% no-repeat #fff; background-size: auto 100%; border: solid 1px #ccc;}
.blog_post_list ul li a .img img{ width: 70px; height: 70px; max-width: none; object-fit: cover;}
.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; color: #999; display: block; }
.blog_post_list ul li a:hover p{ text-decoration: underline;}
.blog_post_list ul li a:hover p span{ text-decoration: none !important;}
/**/
.post-widht700 .blog_post_list ul li a{ padding: 10px;}
.post-widht700 .blog_post_list ul li a p{ margin-left: 0; font-size: 13px; display: flex; width: 100%;}
.post-widht700 .blog_post_list ul li a p span { font-size: 11px; color: #777; width: 100px; letter-spacing: 0; padding-right: 15px; margin-top: 2px; white-space: nowrap;}

/*--------------------------------------------------------------------------
	▼共通
------------------------*/
/*一覧のサムネイル使用アイテム*/
.thumD .image{ display: flex;}
.thumD .text .title .h, 
.thumD .text .title .date, 
.thumD .text .title .cate, 
.thumD .text .title .client, 
.thumD .text > p, 
.thumD .text .info-txtP, 
.thumD .text .page-text, 
.thumD .text .comment, 
.thumD .text .e-type{ display: block;}
/*詳細のインナーワイド*/
.postInner{ width: 90%; display: block;}
.post-widht1100 .postInner{ max-width: 1100px;}
.post-widht1000 .postInner{ max-width: 1000px;}
.post-widht900 .postInner{ max-width: 900px;}
.post-widht800 .postInner{ max-width: 800px;}
.post-widht700 .postInner{ max-width: 700px;}
/*詳細のフォントサイズ大中小*/
.postInner .blog-article > h2 span, 
.postInner .blog-article > h3 span, 
.postInner .blog-article > h4 span{ line-height: 1.3em; font-weight: bold;}
.post-fontS .postInner .blog-article > h2 span{ font-size: 22px;}
.post-fontS .postInner .blog-article > h3, 
.post-fontS .postInner .blog-article > h3 span{ font-size: 20px;}
.post-fontS .postInner .blog-article > h4, 
.post-fontS .postInner .blog-article > h4 span{ font-size: 18px;}
.post-fontS .postInner * { font-size: 15px;}
.post-fontM .postInner .blog-article > h2 span{ font-size: 26px;}
.post-fontM .postInner .blog-article > h3, 
.post-fontM .postInner .blog-article > h3 *{ font-size: 18px;}
.borderBox h3{ font-size: 20px !important;}
.post-fontM .postInner .blog-article > h3, 
.post-fontM .postInner .blog-article > h3 span{ font-size: 24px;}
.post-fontM .postInner .blog-article > h4, 
.post-fontM .postInner .blog-article > h4 span{ font-size: 20px;}
.post-fontM .postInner * { font-size: 16px;}
.post-fontL .postInner .blog-article > h2 span{ font-size: 30px;}
.post-fontL .postInner .blog-article > h3 span{ font-size: 26px;}
.post-fontL .postInner .blog-article > h4 span{ font-size: 22px;}
.post-fontL .postInner * { font-size: 18px;}
.post-fontXL .postInner .blog-article > h2 span{ font-size: 34px;}
.post-fontXL .postInner .blog-article > h3 span{ font-size: 28px;}
.post-fontXL .postInner .blog-article > h4 span{ font-size: 24px;}
.post-fontXL .postInner * { font-size: 20px;}
@media screen and (max-width:850px) {
.postInner .blog-article > h2 span{ font-size: 32px;}
.postInner .blog-article > h3 span{ font-size: 28px;}
}
@media screen and (max-width:650px) {
.postInner .blog-article > h2 span{ font-size: var(--blog-sp-h2-size);}
.postInner .blog-article > h3 span{ font-size: var(--blog-sp-h3-size);}
.postInner .blog-article > h4 span{ font-size: var(--blog-sp-h4-size);}
.postInner *{ font-size: var(--blog-sp-font-size); vertical-align: baseline;}
}

/*-----------------------------------------------------------------------------------------------------
postTitle-Type05
-----------------------------*/
.postTitle-Type05 .postInner .setTit, 
.postTitle-Type05 .postInner .setTit *{ opacity:1 !important; transform: translateY(0px) !important;}
/*setting*/
.postTitle-Type05 .postInner .blog-article > h2{ background:#fff; border: solid 3px #333;}
.postTitle-Type05 .postInner .blog-article > h2 span{ color:#000;}
.postTitle-Type05 .postInner .blog-article > h3::before{ background:#C7D1D5;}
/*h2*/
.postTitle-Type05 .postInner .blog-article > h2{ padding:20px ; border-radius: 6px;}
/*h3*/
.postTitle-Type05 .postInner .blog-article > h3{ padding: 12px 5px; position: relative;}
/*.postTitle-Type05 .postInner .blog-article > h3::before{ width: 6px; height: 100%; position: absolute; left: 0; top: 0%; content: "";}*/
/*h4*/
.postTitle-Type05 .postInner .blog-article > h4 { padding: 10px 0;}
@media screen and (max-width:850px) {
.postTitle-Type05 .postInner .blog-article > h2{ padding:15px 15px;}
.postTitle-Type05 .postInner .blog-article > h2 span{ font-size: 32px;}
.postTitle-Type05 .postInner .blog-article > h3 span{ font-size: 28px;}
.postTitle-Type05 .postInner .blog-article > h3{ position: relative;}
}
@media screen and (max-width:600px) {
.postTitle-Type05 .postInner .blog-article > h2 span{ font-size: 24px; font-weight: bold;}
.postTitle-Type05 .postInner .blog-article > h3 span{ font-size: 22px; font-weight: bold;}
.postTitle-Type05 .postInner .blog-article > h4 span{ font-size: 18px;}
}

/*--------------------------------------------------------------------------
	▼一覧の共通MVの指定
------------------------*/
.commonMV-fontXL.first-underMv-title *{ font-size: 70px;}
.commonMV-fontL.first-underMv-title *{ font-size: 60px;}
.commonMV-fontM.first-underMv-title *{ font-size: 50px;}
.commonMV-fontS.first-underMv-title *{ font-size: 40px;}
.commonMV-fontSS.first-underMv-title *{ font-size: 30px;}
/**/
.commonMV-fontXL.second-underMv-title *{ font-size:26px;}
.commonMV-fontL.second-underMv-title *{ font-size:23px;}
.commonMV-fontM.second-underMv-title *{ font-size:20px;}
.commonMV-fontS.second-underMv-title *{ font-size:17px;}
.commonMV-fontSS.second-underMv-title *{ font-size:14px;}
@media screen and (max-width:900px) {
.commonMV-fontXL.second-underMv-title *{ font-size:22px;}
.commonMV-fontL.second-underMv-title *{ font-size:20px;}
.commonMV-fontM.second-underMv-title *{ font-size:16px;}
.commonMV-fontS.second-underMv-title *{ font-size:14px;}
.commonMV-fontSS.second-underMv-title *{ font-size:12px;}
}
@media screen and (max-width:700px) {
.commonMV-fontXL.second-underMv-title *{ font-size:20px;}
.commonMV-fontL.second-underMv-title *{ font-size:18px;}
.commonMV-fontM.second-underMv-title *{ font-size:16px;}
.commonMV-fontS.second-underMv-title *{ font-size:12px;}
.commonMV-fontSS.second-underMv-title *{ font-size:11px;}
}