.wrap_tech {
 max-width: 1280px;
 margin: 0 auto
}
.wrap_tech_in {
 max-width: 1200px;
 margin: 0 auto;
 width: 95%;
}
.wrap_tech_flex {
 display: flex;
 flex-wrap: nowrap;
 column-gap: 50px;
 margin-bottom: 20px;
}
#cover.tech_cover {
 padding-top: 140px;
}
/*Header */
#tech_header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 140px;
 background-color: #222a53;
 z-index: 100;
 color: #fff;
}
#tech_header a {
 color: #fff;
}
#tech_header .tech-site-logo {
 padding: 12px 0 0 0;
}
#tech_header .tech-title {
 padding: 16px 0 0 0;
}
#tech_header_in {
 background-image: url(/wp-content/uploads/2023/07/tech-blog-head-1.webp);
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
}
.admin-bar #tech_header {
 top: 32px;
}
body.category #tech_header, body.single-post.admin-bar #tech_header {}
#tech_header nav {
 background-color: #0f1835;
}
#tech_header .wrap_tech {
 position: relative;
 height: 100px;
 padding: 0;
 box-sizing: border-box;
 max-width: 1200px;
}
#tech_header .tech_head {
 position: absolute;
 right: 0;
 top: 11px;
 width: 300px;
 z-index: 1;
}
.tech_nav_search form, #tech_header .tech_head form {
 position: relative;
 margin-bottom: 15px;
}
.tech_nav_search form input[name="s"], #tech_header .tech_head form input[name="s"] {
 width: 100%;
 padding: 6px 5px 6px 30px;
 border-radius: 8px;
 border: none;
 font-size: 18px;
 box-sizing: border-box;
 height: 35px;
}
.tech_nav_search form button, #tech_header .tech_head form button {
 position: absolute;
 left: 8px;
 top: 9px;
 border: none;
 background-color: transparent;
 cursor: pointer
}
.tech_nav_search form button img, #tech_header .tech_head form button img {
 width: 20px;
 height: auto;
}
#tech_header .tech_head .flex {
 flex-wrap: nowrap;
 column-gap: 20px;
}
.tech_nav_box a, #tech_header .tech_head .flex a {
 display: block;
 width: 50%;
 text-align: center;
 font-weight: bold;
 border: 2px solid #fff;
 border-radius: 8px;
 box-sizing: border-box;
 padding: 6px 0;
 line-height: 1em;
 height: 30px;
 flex-grow: 1;
}
.tech_nav_box a {
 width: auto;
 margin: 8px 0;
}
#tech_header nav ul {
 text-align: center;
 display: flex;
 justify-content: center;
 height: 40px;
}
#tech_header nav ul.sub-menu {
 opacity: 0;
 position: absolute;
 left: 0;
 top: 90%;
 width: 100%;
 min-width: 190px;
 display: block;
 background-color: #0f1835cc;
 z-index: 100;
 text-align: left;
 height: auto;
 font-weight: 500;
 visibility: hidden;
 -moz-transition: 0.3s ease-in-out;
 -o-transition: 0.3s ease-in-out;
 -webkit-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}
#tech_header nav li:hover ul.sub-menu {
 visibility: visible;
 opacity: 1;
 top: 100%;
}
#tech_header nav li {
 position: relative;
}
#tech_header nav li a {
 display: block;
 font-weight: bold;
 line-height: 1.3em;
 padding: 11px 30px;
 -moz-transition: 0.3s ease-in-out;
 -o-transition: 0.3s ease-in-out;
 -webkit-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}
#tech_header nav li a:hover {
 text-decoration: none;
 background-color: #054180;
}
#tech_header nav li .sub-menu a {
 padding: 10px 25px;
 font-weight: 500;
}
#tech_header nav li .sub-menu a:hover {
 background-color: rgba(5, 65, 128, 0.5);
}
/*Body */
.tech_blog_body {
 padding-top: 20px;
}
.single-post .tech_blog_body {
 padding-top: 0;
}
#tech_content {
 max-width: 878px;
 width: 80%;
 box-sizing: border-box;
}
#tech_single_content {
 background-color: #fff;
 padding: 30px 20px;
 margin-bottom: 20px;
}
#aside.tech_aside {
 width: 272px;
}
.single-post #aside.tech_aside {
 padding-top: 20px;
}
#tech_top {
 margin-bottom: 30px;
 gap: 31px;
 flex-wrap: nowrap;
}
#tech_top .magazine {
 width: 30.97%;
 background-color: #666666;
 border-radius: 3px;
 color: #fff;
 box-sizing: border-box;
 flex-grow: 0.34;
 flex-shrink: 0;
 padding: 11px 15px 0px 15px;
 background-image: url(https://www.creationline.com/wp-content/uploads/2023/07/mailicon.svg);
 background-repeat: no-repeat;
 background-position: 93% 86%;
 background-size: 41px;
}
#tech_top .box1 {
 width: calc(69.03% - 31px);
}
#tech_top .magazine .sub {
 font-size: 0.8em;
 line-height: 1.3em;
 margin: 5px;
 font-weight: 100;
}
#tech_top .magazine .title {
 font-size: 26px;
 line-height: 1em;
 letter-spacing: 0;
}
#tech_top .magazine a {
 display: inline-block;
 background-color: #fff;
 text-align: center;
 border-radius: 16px;
 padding: 5px 15px;
 line-height: 1em;
 font-size: 12px;
 color: #666666;
}
.tech_blog_list {
 display: flex;
 flex-wrap: wrap;
 gap: 31px;
}
.tech_blog_list li, .side_list li {
 width: calc(33.3333% - 20.6666667px);
 background-color: #fff;
 position: relative;
 padding-bottom: 33px;
 border: 1px solid #e9e9e9;
 box-sizing: border-box;
 box-shadow: 0 0 5px #00000036;
 border-radius: 3px;
 /*height: 290px;*/
}
.side_list li {
 width: auto;
 margin-bottom: 20px;
}
.side_list li:hover, .tech_blog_list li:hover {
 box-shadow: 0 0 5px #0000002e;
}
.side_list li .date, .tech_blog_list li .date {
 position: absolute;
 bottom: 10px;
 right: 10px;
 font-weight: 400;
}
.side_list li .title, .tech_blog_list li .title {
 padding: 5px 10px;
 /*height: 4.3em;*/
 overflow: hidden;
 position: relative;
}
.side_list li dt, .tech_blog_list li dt {
 text-align: center;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 153px;
 overflow: hidden;
}
.side_list li dt img, .tech_blog_list li dt img {
 -moz-transition: 0.3s ease-in-out;
 -o-transition: 0.3s ease-in-out;
 -webkit-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}
.side_list li:hover dt img, .tech_blog_list li:hover dt img {
 transform: scale(1.1);
}
.side_list li:hover a, .tech_blog_list li:hover a {
 text-decoration: underline;
}
.side_list li .title a, .tech_blog_list li .title a {
 color: initial;
 display: block;
 line-height: 1.4em;
 word-break: break-all;
 letter-spacing: 0;
}
.tech_blog_list.recommend_tech {
 gap: 30px;
 flex-wrap: nowrap;
 margin-top: 5px;
}
#tech_recommend {
 margin-bottom: 30px;
}
.tech_rec_body {
 padding-right: 190px;
 position: relative;
}
.tech_archive_link a {
 position: absolute;
 right: 5em;
 bottom: 0;
 font-weight: bold;
 padding: 5px 5px 5px 16px;
 color: initial;
 text-decoration: none;
 display: block;
 background-image: url(img/right.svg);
 background-position: left center;
 background-size: 9px auto;
 background-repeat: no-repeat;
}
.tech_blog_list.recommend_tech li {
 width: 230px;
 /*height: 230px;*/
 font-size: 12px;
}
.tech_blog_list.recommend_tech li li {
 width: auto;
 height: auto;
}
.tech_blog_list.recommend_tech .date {
 bottom: 2px;
 right: 4px;
}
.tech_blog_list.recommend_tech .tech_cats {
 /*bottom: 21px;*/
}
.like_heart {
 position: absolute;
 right: 0px;
 top: 10px;
 min-width: 32px;
 background-image: url(img/heart_off.svg);
 background-position: 6px center;
 background-repeat: no-repeat;
 background-size: 15px auto;
 cursor: pointer;
 width: auto;
 line-height: 1em;
 box-sizing: border-box;
 z-index: 5;
 background-color: rgb(255 255 255 / 90%);
 border-radius: 15px 0 0 15px;
 padding: 4px 5px 4px 28px;
 font-size: 13px;
}
.like_heart[data-on="1"] {
 background-image: url(img/heart_on.svg);
}
.like_heart.tech_single {
 position: static;
 font-size: 1em;
}
.like_heart.tech_single.tech_bsns {
 padding: 0;
 width: 20px;
 height: auto;
 background-size: auto 92%;
 background-position: center;
}
.tech_blog_list li .title.over:after {
 content: "...";
 background-color: white;
 position: absolute;
 right: 9px;
 bottom: 0;
 z-index: 1;
 width: 1.3em;
 text-align: right;
}
.more_ranking, #get_more_posts {
 cursor: pointer;
 margin: 20px auto 1px auto;
 width: 110px;
 font-weight: bold;
 text-align: left;
 box-sizing: border-box;
 background-image: url(img/under.svg);
 background-repeat: no-repeat;
 background-position: left center;
 padding-left: 30px;
 background-size: 17px auto;
}
ul.tech_cats {
 display: flex;
 /*position: absolute;
 bottom: 32px;
 left: 10px;*/
 padding-top: 2px;
 position: relative;
 left: 10px;
 bottom: 0;
 flex-wrap: wrap;
 gap: 3px;
}
body .tech_cats li {
 width: auto;
 height: auto;
 font-size: 11px;
 box-shadow: none;
 margin: 0;
 padding: 3px 6px;
 border: none;
 line-height: 1em;
 border-radius: 50px;
 position: static;
 background-color: #aaa;
 font-weight: 200;
}
body .tech_cats li a {
 display: block;
 color: #fff;
 text-decoration: none;
}
li:hover .tech_cats li a {
 text-decoration: none;
}
/*Search */
.search_results_text {
 padding-left: 28px;
 background-image: url(img/search-t.svg);
 background-repeat: no-repeat;
 background-size: 20px auto;
 background-position: 0 3px;
 font-size: 1.1em;
 line-height: 1.6em;
}
body.archive #header_in, body.search #header_in {
 max-width: 1200px;
 width: auto;
}
.select_search {
 display: flex;
 margin: 3px 0 30px 0;
 gap: 10px;
 flex-wrap: wrap;
}
.select_search li a {
 display: block;
 background-color: #e1e1e1;
 color: initial;
 padding: 7px 15px;
 border-radius: 8px;
 line-height: 1em;
 font-size: 0.9em;
 border: 1px solid #e1e1e1;
}
.select_search li a:hover, .select_search li.active a {
 background-color: #32a200;
 color: #fff;
 border-color: #32a200;
 text-decoration: none;
}
.bottom_search input {
 width: 100%;
 padding: 8px 35px 8px 8px;
 border-radius: 4px;
 font-size: 18px;
 box-sizing: border-box;
 border: 1px solid #aaa;
 background-color: #f3f3f3;
}
.bottom_search {
 position: relative;
 margin-top: 30px;
}
.bottom_search button {
 position: absolute;
 right: 7px;
 top: 9px;
 background-color: transparent;
 border: none;
 cursor: pointer;
}
.bottom_search button img {
 width: 20px;
 height: 20px;
}
.aside_news li a {
 color: initial;
 text-decoration: none;
}
.aside_news li {
 margin: 5px 0;
 border-bottom: 1px solid #ddd;
 padding: 5px 0;
}
.aside_news li:hover .title {
 text-decoration: underline;
}
.aside_news li a span {
 display: block;
}
.aside_news li .title {
 font-weight: bold;
}
/*Archive*/
.pageLink.newPager {
 margin: 20px 0 0 0;
 text-align: center;
}
.pageLink.newPager .wp-pagenavi {
 text-align: center;
 margin-left: 0;
}
.pageLink.newPager .wp-pagenavi a, .pageLink.newPager .wp-pagenavi span {
 background-color: #0f1835;
}
.pageLink.newPager .wp-pagenavi span.current {
 background-color: transparent;
}
#tech_archive_head h2 {
 font-size: 1.8em;
 line-height: 1.4em;
}
#tech_archive_head {
 min-height: 120px;
}
#tech_archive_head .tech_cat_box a {
 font-size: 1.1rem;
 padding: 5px 15px;
 font-weight: bold;
}
#tech_archive_head .tech_cat_box {
 background-size: 32px;
 padding-left: 47px;
}
.tech_blog_list.tech_archive_list {
 gap: 20px;
}
.tech_blog_list.tech_archive_list li {
 width: 100%;
 /*height: 135px;*/
 padding-bottom: 0;
 border-width: 0.25px;
 height: auto;
}
.tech_blog_list li .exc {
 padding: 9px 0 35px 10px;
 font-size: 0.85em;
 line-height: 1.4em;
 color: #898989;
 height: 1.1em;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}
.tech_blog_list.tech_archive_list li:hover {
 border-width: 0.5px;
}
.tech_blog_list.tech_archive_list li dl {
 display: flex;
}
.tech_blog_list.tech_archive_list li li {
 height: auto;
 width: auto;
 padding-bottom: 6px;
}
.tech_blog_list.tech_archive_list li .exc {
 padding: 9px 0 13px 10px;
}
.tech_blog_list.tech_archive_list li dt {
 width: 240px;
 /*height: 135px;*/
 height: auto;
}
.tech_blog_list.tech_archive_list li dd {
 width: calc(100% - 240px);
 box-sizing: border-box;
 padding: 12px 12px 8px 12px;
}
.tech_blog_list.tech_archive_list li .title {
 padding-right: 70px;
 font-size: 1.2em;
 font-weight: bold;
 height: auto;
}
.tech_blog_list.tech_archive_list li dd .tech_cats {
 /* bottom: 24px;
 left: 12px;*/
 padding: 5px 5px 5px 30px;
 background-image: url(/wp-content/uploads/2023/07/tag.svg);
 background-repeat: no-repeat;
 background-size: 20px auto;
 background-position: left center;
 margin-right: 93px;
}
/*Aside*/
.tech_aside_box {
 margin-bottom: 20px;
}
.tech_aside_empty {
 height: 130px;
}
#aside.tech_aside h4 {
 font-size: 1.4em;
 line-height: 1.3em;
 letter-spacing: 0;
 font-weight: 500;
 position: relative;
 padding: 0 0 3px 0;
 margin-bottom: 15px;
}
#aside.tech_aside h4:after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 min-width: 160px;
 height: 1px;
 background-color: #111;
 width: 100%;
}
.side_list {
 margin-bottom: 30px;
}
span.rank_num {
 position: absolute;
 right: -5px;
 top: -5px;
 font-weight: 400;
 background-color: #6c7ca7;
 z-index: 10;
 padding: 6px 10px;
 font-size: 1em;
 line-height: 1em;
 color: #fff;
 border-radius: 7px;
}
.rank_mid span.rank_num {
 right: auto;
 left: -5px;
}
span.rank_num.rank_1 {
 background-color: #ea4242;
}
span.rank_num.rank_2 {
 background-color: #868686;
}
span.rank_num.rank_3 {
 background-color: #8c5324;
}
#tech_ranking {
 margin-bottom: 20px;
}
.side_list li.rank_mid dl {
 display: flex;
}
.side_list li.rank_mid .date, .side_list li.rank_mid .like_heart {
 display: none;
}
body .side_list li.rank_mid {
 padding-bottom: 0;
 height: 63px;
}
body.single-post .side_list li.rank_mid {
 width: auto;
}
.side_list li.rank_mid dl .title {
 line-height: 1.2em;
 font-size: 12px;
 height: auto;
 padding: 4px 7px;
}
.side_list li.rank_mid dt {
 width: 112px;
 flex-shrink: 0;
 overflow: hidden;
 position: relative;
 display: block;
 height: 63px;
}
.side_list li.rank_mid dt img {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
}
.side_list li.rank_mid dd {
 width: calc(100% - 112px);
 flex-shrink: 0;
 display: flex;
 align-items: center;
}
.ranking_view .side_list li {
 width: 230px;
 /*height: 230px;*/
 margin: 0 auto 20px auto;
 padding-bottom: 30px;
}
.ranking_view .side_list li li {
 width: auto;
 height: auto;
 margin: 0;
}
.ranking_view .side_list li .title {
 /*height: 3em;*/
 font-size: 0.9em;
}
/*Single */
.tech_thumbnail {
 text-align: center;
 margin: 20px 0;
}
.tech_thumbnail img {
 max-width: 528px;
}
#page_title {
 font-size: 2em;
 line-height: 1.4em;
 margin-bottom: 20px;
}
time.tech_datetime {
 display: block;
 font-weight: 100;
 margin: 0 0 10px 0;
}
.bsns ul {
 display: flex;
 gap: 12px;
 justify-content: center;
}
.bsns ul li img {
 width: 25px;
 height: auto;
}
.post_bottom_meta {
 margin: 30px 0;
}
.tech_meta {
 border-bottom: 1px solid #aaa;
 padding: 0 0 10px 0;
 margin-bottom: 20px;
 display: flex;
 justify-content: space-between;
 gap: 30px;
}
.tech_cat_box {
 padding-left: 28px;
 background-image: url(/wp-content/uploads/2023/07/tag.svg);
 background-repeat: no-repeat;
 background-position: left 1px;
 background-size: 19px auto;
 font-weight: 100;
}
.tech_cat_box a {
 color: #fff;
 display: inline-block;
 padding: 3px 6px;
 border-radius: 150px;
 line-height: 1em;
 background-color: #aaa;
 margin: 0 3px 2px 0;
 ont-size: 0.9em;
 font-weight: 400;
}
/*Index */
#aside.tech_aside .cl_slide_index h4 {
 text-align: center;
 font-size: 1rem;
 color: #888;
}
#aside.tech_aside .cl_slide_index h4:after {
 display: none;
}
#aside.tech_aside .cl_slide_index a {
 color: #888;
 text-decoration: none;
 padding: 5px 3px;
 border-radius: 5px;
}
#aside.tech_aside .cl_slide_index a.active {
 background-color: #dadada;
 font-weight: bold;
 color: #666;
}
#aside.tech_aside .cl_slide_index li {
 margin-bottom: 8px;
 line-height: 1.4em;
 position: relative;
}
#aside.tech_aside .cl_slide_index .list_tag_H3 {
 padding-left: 6px;
 margin-left: 12px;
}
#aside.tech_aside .cl_slide_index .list_tag_H4 {
 padding-left: 15px;
 margin-left: 10px;
}
#aside.tech_aside .cl_slide_index .list_tag_H3:after {
 content: "";
 position: absolute;
 left: -11px;
 top: 9px;
 width: 8px;
 height: 1px;
 background-color: #888;
}
#aside.tech_aside .cl_slide_index .list_tag_H4:after {
 content: "";
 position: absolute;
 left: 5px;
 top: 10px;
 width: 2px;
 height: 2px;
 background-color: #888;
 border-radius: 150%;
}
.tech-blog-top span.mv span {
 top: -150px;
}
/*Recommend */
#tech_recommend h4 {
 font-size: 1.3em;
 line-height: 1.3em;
 padding: 0 0 5px 0;
 border-bottom: 1px solid #000;
 margin-bottom: 10px;
}
/*ContentPost */
.content_post {
 line-height: 1.8em;
 font-size: 16px;
}
.content_post ol, .content_post ul, .content_post p, .content_post table {
 margin-bottom: 1.5em;
 line-height: 1.6em;
}
.content_post table {
 max-width: 100%;
 word-break: break-all;
}
.content_post p {
 line-height: 2em;
}
.content_post h1 {
 font-size: 1.8em;
 line-height: 1.4em;
 margin: 1.5em 0 0.7em 0;
}
.content_post h2 {
 margin: 1em 0 0.5em 0;
 font-size: 1.5em;
 font-weight: 700;
 color: #12408f;
}
.content_post h3 {
 margin: 40px 0 15px;
 background-color: #f7f7f7;
 padding: 5px 10px;
 border-radius: 3px;
 font-size: 1.4em;
 font-weight: bold;
 line-height: 1.5em;
}
.content_post h4 {
 font-size: 1.1em;
 margin: 1em 0 0.5em;
 color: #4379d6;
 border-bottom: dotted 2px #9fc2ff;
 padding: 2px 0 5px 5px;
}
.content_post h5 {
 font-size: 1.1em;
 border-left: 10px #12408f solid;
 color: #12408f;
 margin: 1em 0 0.5em;
 padding: 0 0 0 10px;
}
.content_post h6 {
 font-size: 1.1em;
 color: #12408f;
 margin: 1em 0 0.5em;
 background-color: #ddeaff;
 padding: 5px 10px;
 font-weight: bold;
}
.content_post ol li {
 margin: 0.3em 0.5em 0.3em 2em;
 line-height: 1.6;
 list-style: auto;
}
.content_post ol ol, .content_post ul ul {
 margin: 7px 0 10px 0;
}
.content_post ul li {
 margin: 0.3em 0.5em 0.3em 2em;
 list-style-type: disc;
 line-height: 1.6;
}
.content_post a {
 text-decoration: underline;
}
.content_post blockquote {
 margin-bottom: 1.5em;
 margin-right: 40px;
 padding: 15px 15px 1px 15px;
 background-color: #f3f5f9;
}
.content_post code {
 display: inline-block;
 width: auto;
 overflow: auto;
 padding: 2px 8px 1px 8px;
 border: 1px solid #cccccc;
 background-color: #eeeeee;
 line-height: 1.3;
 font-family: monospace;
 color: #000000;
 box-sizing: border-box;
 border-radius: 2px;
 position: relative;
 top: 3px;
}
.content_post img {
 margin-bottom: 10px;
}
.content_post pre {
 display: block;
 overflow-x: scroll;
 margin-bottom: 1.5em;
 padding: 10px;
 border: 1px solid #cccccc;
 background-color: #eeeeee;
 line-height: 1.3;
 color: #000000;
 width: auto;
}
.content_post table td, .content_post table th {
 border: 1px solid #aaa;
 padding: 6px;
}
.content_post table th {
 font-weight: bold;
 background-color: #ededed;
}
.content_post .contact_line div {
 width: 100% !important;
 height: auto !important;
 margin: 0 !important;
}
.content_post .contact_line {
 text-align: center;
 border: 3px solid #cdcdcd;
 border-radius: 34px;
 padding: 25px 1em 5px 1em;
 margin: 2em 0;
}
.content_post .contact_line .pick_catch {
 color: #858585;
 font-weight: bold;
 margin: 0 0 10px 0;
 font-size: 1.8em;
 line-height: 1.4em;
 font-size: 900;
}
.content_post .contact_line div iframe {
 max-height: 125px !important;
 width: 100% !important;
}
/*heart */
#clfview {
 display: block;
 position: fixed;
 right: 3px;
 bottom: 61px;
 width: 47px;
 height: 47px;
 border-radius: 150%;
 box-shadow: 2px 2px 0 #0000004a;
 background-color: #fff;
 background-image: url(img/heart_on.svg);
 background-position: center;
 background-repeat: no-repeat;
 background-size: 42% auto;
 cursor: pointer;
 border: 1px solid #cac9c9;
 -moz-transition: 0.3s ease-in-out;
 -o-transition: 0.3s ease-in-out;
 -webkit-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}
#clfview.active {
 background-image: url(img/close_1.svg)
}
#clfview:hover {
 background-color: #fff4f8;
}
#clflist {
 position: fixed;
 z-index: 105;
 bottom: 100px;
 width: 300px;
 right: 10px;
 background-color: #fff;
 box-shadow: 2px 2px 0 #0000004a;
 border: 1px solid #cac9c9;
 border-radius: 15px;
 box-sizing: border-box;
 padding: 25px;
 max-height: calc(70vh - 140px);
 overflow: auto;
}
#clflist li a {
 color: #1f1819;
 font-size: 0.95em;
 line-height: 1.6em;
 display: block;
}
#clflist li {
 margin: 4px 0;
 position: relative;
 padding: 4px 0 4px 14px;
 border-bottom: 1px dotted #ea5770;
}
#clflist li:before {
 content: "";
 position: absolute;
 left: 0;
 top: 8px;
 width: 5px;
 height: 5px;
 background-color: #ea5770;
 transform: rotate(45deg);
 border-radius: 150%;
}
#clflist li:last-child {
 border: none;
}
#index_open_btn {
 display: none;
}
@media only screen and (max-width: 1200px) {
 #tech_header .wrap_tech {
  padding-left: 10px;
 }
 /*1200*/
}
@media only screen and (max-width: 1100px) {
 #tech_header nav li a {
  padding: 11px 12px;
  letter-spacing: 0;
  line-height: 1em;
  font-size: 1.5vw;
 }
 /*1100*/
}
@media only screen and (max-width: 1000px) {
 #tech_header .wrap_tech {
  padding-left: 10px;
 }
 .tech_blog_list li {
  height: auto;
  padding-bottom: 25px;
  width: calc(33.3333% - 8px);
 }
 .tech_blog_list.tech_archive_list li {
  height: auto;
 }
 .side_list li, .ranking_view .side_list li {
  height: auto;
  padding-bottom: 25px;
  width: auto;
 }
 .ranking_view .side_list li li {
  padding: 3px 6px;
 }
 .tech_blog_list {
  gap: 12px;
 }
 .side_list li dt, .tech_blog_list li dt {
  height: auto;
 }
 .side_list li.rank_mid dl .title, .ranking_view .side_list li .title, .side_list li .title, .tech_blog_list li .title {
  height: auto;
  overflow: visible;
  font-size: 1rem;
 }
 ul.tech_cats {
  /*margin-top: 20px;*/
  position: static;
  padding: 0 0 10px 10px;
 }
 .tech_blog_list li .exc {
  white-space: initial;
  padding-bottom: 0;
  height: auto;
 }
 .wrap_tech_flex {
  gap: 30px;
 }
 body .side_list li.rank_mid dl {
  display: block;
 }
 .side_list li.rank_mid dt {
  width: auto;
  height: auto;
 }
 .side_list li.rank_mid dt img {
  position: static;
 }
 .side_list li.rank_mid dd {
  width: auto;
 }
 body .side_list li.rank_mid {
  height: auto;
 }
 #tech_content {
  width: 72%;
  max-width: 100%;
 }
 #aside.tech_aside {
  width: calc(28% - 30px);
 }
 #tech_top .magazine {
  background-position: 97% 87%;
  background-size: 13% auto;
  padding: 1% 0 0 1%;
 }
 #tech_top .magazine .title {
  font-size: 2.2vw;
 }
 #tech_top .magazine .sub br {
  display: none;
 }
 #tech_top .magazine .sub {
  font-size: 0.8vw;
 }
 #tech_top .magazine a {
  font-size: 1vw;
 }
 .tech_blog_list.recommend_tech li {
  height: auto;
  width: 25%;
  flex-shrink: 1;
 }
 .tech_rec_body {
  padding-right: 0;
 }
 .tech_archive_link a {
  position: static;
  margin: 12px 0 0 0;
  float: right;
 }
 p.tech_archive_link {
  overflow: hidden;
 }
 /*1000*/
}
@media only screen and (max-width: 800px) {
 .wrap_tech_flex {
  display: block;
 }
 #tech_content {
  width: auto;
 }
 #aside.tech_aside {
  width: auto;
  max-width: 500px;
  margin: 30px auto;
 }
 #aside.tech_aside aside {
  display: flex;
  gap: 20px;
 }
 .side1, .side2 {
  width: 50%;
 }
 #tech_index {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 15px !important;
  box-sizing: border-box;
  border-radius: 0 10px 0 0;
  z-index: 10;
  box-shadow: 0 0 5px #0000004d;
  max-width: 250px;
  visibility: hidden;
  opacity: 0;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  color: #fff;
  background-color: rgb(117 117 117 / 97%);
 }
 #tech_index ul {
  overflow: auto;
  max-height: 280px;
 }
 #aside.tech_aside .cl_slide_index .list_tag_H3:after, #aside.tech_aside .cl_slide_index .list_tag_H4:after {
  background-color: #fff;
 }
 #aside.tech_aside .cl_slide_index a.active {
  color: #fff;
  background-color: #595858;
 }
 #aside.tech_aside .cl_slide_index h4, #aside.tech_aside .cl_slide_index a {
  color: #fff;
 }
 #index_open_btn {
  display: block;
 }
 #index_open_btn {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #757575;
  padding: 7px 16px 5px 30px;
  font-weight: bold;
  border-radius: 0 10px 0 0;
  color: #fff;
  cursor: pointer;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  background-image: url(img/upopen.svg);
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 10px auto;
 }
 #tech_index.active {
  visibility: visible;
  opacity: 1;
 }
 #tech_index .index_close {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background-image: url(img/close_w.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70% auto;
  z-index: 10;
 }
 #tech_top {
  margin-bottom: 12px;
 }
 .tech_blog_body {
  padding-top: 12px;
 }
 #tech_top .magazine {
  width: 32.3333%;
 }
 #tech_top {
  gap: 12px;
 }
 #tech_top .box1 {
  width: calc(67.667% - 12px);
 }
 /*800*/
}
@media only screen and (max-width: 782px) {
 html {
  -webkit-text-size-adjust: 100%;
 }
 .admin-bar #tech_header {
  top: 46px;
 }
 #tech_header .tech_head {
  width: 220px;
 }
 #tech_header .tech_head .flex {
  gap: 5px;
  font-size: 0.8em;
 }
 #aside.tech_aside .side2, #aside.tech_aside .side1 {
  display: none;
 }
 .content_post .contact_line .pick_catch {
  font-size: 3.5vw;
 }
 /*782*/
}
@media only screen and (max-width: 700px) {
 #tech_header .tech_head {
  display: none;
 }
 #cover.tech_cover {
  padding-top: 65px;
 }
 .tech-site-logo img {
  width: 115px;
 }
 #tech_header .tech-site-logo {
  padding-top: 3px;
 }
 #tech_header .tech-title {
  padding-top: 7px;
 }
 #tech_header .tech-title img {
  width: 260px;
 }
 #tech_header {
  height: 65px;
 }
 #tech_header .wrap_tech {
  height: auto;
 }
 #tech_header nav {
  position: fixed;
  right: -250px;
  top: 0;
  height: 100%;
  overflow: auto;
  padding: 55px 20px;
  width: 250px;
  z-index: 99;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
 }
 #tech_header nav.active {
  visibility: visible;
  opacity: 1;
  display: block;
  right: 0;
 }
 #tech_header nav ul li {
  float: none;
  padding: 0 10px;
  text-align: left;
 }
 body #smart_btn {
  top: 21px;
  right: 15px;
  z-index: 101;
 }
 body #tech_header #smart_btn span.a, body #tech_header #smart_btn span.b, body #tech_header #smart_btn span.c {
  background-color: #fff;
 }
 #tech_header nav.active {
  visibility: visible;
  opacity: 1;
  display: block;
 }
 #tech_header nav ul {
  display: block;
  height: 100%;
  box-sizing: border-box;
 }
 #tech_header nav li a {
  font-size: 0.95rem;
  padding: 11px 0;
  line-height: 1.3em;
 }
 #tech_header nav .wrap_tech_in {
  max-width: 100%;
  width: 100%;
 }
 #tech_header nav ul.sub-menu {
  display: block;
  position: static;
  opacity: 1;
  visibility: visible;
  width: auto;
  min-width: 0;
  padding: 0;
 }
 #tech_header nav ul li li {
  padding: 0;
 }
 #tech_header nav li .sub-menu a {
  padding: 8px 0 8px 15px;
  font-size: 0.9em;
  color: #fff;
  position: relative;
 }
 #tech_header nav li .sub-menu a:before {
  content: "";
  width: 6px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 14px;
  left: 2px;
 }
 .tech_nav_search.none, .none.tech_nav_box {
  display: block;
 }
 /**/
 .content_post table {
  width: auto !important;
 }
 .tech_blog_list.recommend_tech li {
  width: calc(50% - 10px);
 }
 .tech_blog_list.recommend_tech {
  gap: 20px;
  flex-wrap: wrap;
 }
 .tech_blog_list.tech_archive_list li dt {
  height: auto;
  width: 40%;
  position: relative;
  /*max-height: 21vw;*/
 }
 .tech_blog_list.tech_archive_list li dd {
  width: 60%;
  position: static;
 }
 .tech_blog_list.tech_archive_list li dl {
  position: relative;
 }
 .tech_blog_list.tech_archive_list li .like_heart {
  right: auto;
  left: 0;
  border-radius: 0 15px 15px 0;
  font-size: 0.8em;
 }
 .tech_blog_list.tech_archive_list li dd .tech_cats {
  margin-top: 5px;
 }
 .tech_blog_list.tech_archive_list li .title {
  padding-right: 0;
 }
 .tech_blog_list li .like_heart {
  font-size: 0.8em;
 }
 /*Search*/
 body.search #smart_btn span {
  background-color: #12408f !important;
 }
 /*700*/
}
@media only screen and (max-width: 650px) {
 .scroll_body.admin-bar #tech_header {
  top: 0;
 }
 .tech_blog_list.tech_archive_list li .exc, .tech_blog_list.tech_archive_list li .tech_cats {
  display: none;
 }
 .tech_blog_list.tech_archive_list li .title {
  font-size: 1em;
  font-weight: 400;
  padding: 0;
  height: 4.1em;
  overflow: hidden;
 }
 .tech_blog_list.tech_archive_list li dd {
  padding: 2px 10px 1.8em 10px;
 }
 .tech_blog_list.tech_archive_list li .date {
  font-size: 0.8em;
  text-align: right;
  /*position: static;*/
  line-height: 1em;
 }
 .sm_pickup.none {
  display: block;
  margin-bottom: 12px;
 }
 .sm_pickup_list li {
  font-size: 0.8em;
  line-height: 1.4em;
  margin: 8px 0;
 }
 .sm_pickup_list li span {
  background-color: #3e3e3e;
  color: #fff;
  margin-right: 5px;
  padding: 3px 5px;
  font-size: 0.78em;
  border-radius: 1px;
  font-style: italic;
 }
 .sm_pickup_list li a {
  color: initial;
  display: block;
  overflow: hidden;
  height: 1.3em;
  word-break: break-all;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .tech_blog_list li {
  width: calc(50% - 6px);
 }
 #tech_single_content {
  padding: 20px 0;
 }
 .tech_thumbnail img {
  max-width: 100%;
 }
 .content_post div {
  max-width: 100%;
 }
 .content_post {
  word-break: break-all;
 }
 #tech_top {
  display: block;
 }
 #tech_top .magazine {
  width: auto;
  background-color: #fff;
  color: #3e3e3e;
  position: relative;
  margin-bottom: 10px;
  border: 1px solid #E8E8E8;
  padding: 3px 110px 3px 5px;
  border-radius: 2px;
 }
 #tech_top .box1 {
  width: auto;
 }
 #tech_top .box1 img {
  width: 100%;
 }
 #tech_top .magazine .title {
  font-size: 1.2em;
  font-weight: bold;
 }
 #tech_top .magazine .sub {
  font-size: 0.85em;
  font-weight: 400;
  margin: 3px 0 0 0;
 }
 #tech_top .magazine a {
  font-size: 0.8em;
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-weight: bold;
  background-color: #666666;
  color: #fff;
 }
 /*650*/
}
@media only screen and (max-width: 450px) {
 .single-post #aside.tech_aside {
  width: auto;
 }
 /*450*/
}