:root {
    --box: #95BDDB;
    --topbg: #23435C;
    --mainttlbg: #23435C;
    --subttlbg: #3E4F5C;
    --primary: rgb(33, 37, 41);
    --box-shadow: 2px 2px 2px #ccc;
    --tag01: #f9e5c7;
    --tag02: #c7ebf9;
}

body {
    font-family: 'Sora', sans-serif;
    color: var(--primary);
    box-sizing: border-box;
}

.entry-header {
    position: relative;
    background-color: var(--topbg);
    height: 35vh;
    width: 100%;
}

.entry-header h2 {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

/* 検索結果 */
.search {
    padding-top: 80px;
}

.sea-con {}

.sea-con .page-title {}

.sea-con h1 {
    text-align: center;
}

.seach-result {}

.seach-result h2 {}

.seach-result a {}

.ent-tit {
    margin-top: 30px;
}

.search-link {
    color: black;
    background: #CCC;
    width: 100%;
    display: block;
    padding: 5px 10px;
}


/* top */
.top-ttl {
    background-color: var(--mainttlbg);
    width: 100%;
    margin: 0 auto;
    border-top: solid 5px #5d627b;
    box-shadow: 0 2px 2px rgb(0 0 0 / 22%);
    border-radius: 2px;
}

.top-ttl h3 {
    color: white;
    padding: 6px 10px 8px;
    font-weight: bold;
    text-shadow: 3px 3px 1px #343434;
    font-size: 25px;
}

.top-subttl {
    background-color: var(--subttlbg);
    width: 100%;
    margin: 0 auto;
    border-top: solid 5px #5d627b;
    box-shadow: 0 2px 2px rgb(0 0 0 / 22%);
    border-radius: 2px;
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}

.top-subttl h4 {
    font-size: 20px;
    padding: 6px 10px 8px;
    margin-bottom: 0px;
    font-weight: bold;
    color: white;
    text-shadow: 3px 3px 1px #343434
}

.top-subttl p {
    font-weight: bold;
    color: white;
    padding-right: 5px;
    font-size: 25px;
}

.top-subttl a {}

.lower-box {}

.lower-box .lower-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.lower-box .lower-list ul {}

.lower-box .lower-list li {
    margin-right: 5px;
}

.lower-box .lower-list li a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 2px 22px;
    border: 1px solid #CCC;
    border-radius: 4px;
    background-color: var(--tag01);
    box-shadow: 2px 2px 1px #ccc;
    transition: all 0.2s ease;
}

.lower-box .lower-list li a:hover {
    box-shadow: none;
    opacity: .8;
}



.lower-box .top-category-list {
    display: flex;
    flex-wrap: wrap;
}

.lower-box .top-category-list li {}

.lower-box .top-category-list li a {
    display: block;
    background-color: var(--tag01);
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 5px;
    margin-right: 5px;
    color: #21252f;
    font-size: 13px;
    box-shadow: 2px 2px 1px #ccc;
    transition: all 0.2s ease;
}

.lower-box .top-category-list li a:hover {
    box-shadow: none;
    opacity: .8;
}

.lower0 {
    margin-top: 50px;
}
.postbox{
    padding-top: 25px;
}

/* Links */
.link-post {
    border-top: solid 5px #5d627b;
    box-shadow: 0 2px 2px rgb(0 0 0 / 22%);
    border-radius: 2px;
    margin-top: 60px;
}

.link-top h3 {
    background-color: var(--mainttlbg);
    color: white;
    padding: 15px 10px;
    font-weight: bold;
    border-top: solid 5px #5d627b;
    box-shadow: 0 2px 2px rgb(0 0 0 / 22%);
    border-radius: 2px;
    font-size: 25px;
}

.link-top p {
    font-size: 12px;
    text-align: end;
}

.link-post p {
    font-size: 14px;
    width: 90%;
    margin: 0 auto;
}

.link-post img {
    width: 100%;
}

.link-post h4 {
    font-size: 18px;
    font-weight: bold;
}

.link-top h5 {
    text-align: center;
    font-weight: bold;
    padding-top: 15px;
    width: 80%;
    margin: 0 auto;
    font-size: 18px;
}

.link-ttl {
    background-color: var(--subttlbg);
    width: 100%;
    margin: 0 auto;
}

.link-ttl p {
    font-size: 20px;
    padding: 10px;
    margin-bottom: 0px;
    font-weight: bold;
    color: white;
    text-shadow: 3px 3px 1px #343434
    
}

.link-linkerea {}

.link-imgarea {
    border: 1px solid;
    border-radius: 8px;
    border: 1px solid;
    border-radius: 8px;
    width: 95%;
    margin: 0 auto;
    margin-top: 10px;
    padding: 10px;
}
.link-linkerea h4 {
    font-size: 18px;
    font-weight: bold;
}

.link-linkerea p {
    font-size: 12px;
}

.link-linkerea a {
    display: block;
    width: 100%;
    text-align: center;
    border: 1px solid black;
    text-decoration: none;
    color: black;
    margin-top: 20px;
}

.link-post h3 {
    background-color: var(--mainttlbg);
    color: white;
    padding: 15px 10px;
    font-weight: bold;
    font-size: 25px;
}

/* 記事型投稿ページ */
.lower {}

.article-top {}

.article-top p {
    font-size: 12px;
    text-align: end;
}

.article-top h3 {
    background-color: var(--mainttlbg);
    color: white;
    padding: 15px 10px;
    font-weight: bold;
    text-shadow: 3px 3px 1px #343434;
    font-size: 25px;
    border-top: solid 5px #5d627b;
    box-shadow: 0 2px 2px rgb(0 0 0 / 22%);
    border-radius: 2px;
}

.article-top h5 {
    font-weight: bold;
    padding-top: 15px;
    width: 80%;
    margin: 0 auto;
    font-size: 18px;
    text-align: center;
}

.article-area {
    border-top: solid 5px #5d627b;
    box-shadow: 0 2px 2px rgb(0 0 0 / 22%);
    border-radius: 2px;
    margin-top: 60px;
    padding-bottom: 5px;
}

.article-ttl {
    background-color: var(--subttlbg);
    width: 100%;
    margin: 0 auto;
}

.article-ttl h4 {
    font-size: 20px;
    padding: 10px;
    margin-bottom: 0px;
    font-weight: bold;
    color: white;
    text-shadow: 3px 3px 1px #343434
}

.article-text {
    width: 90%;
    margin: 0 auto;
}

.article-text p {
    font-size: 14px;
    padding-top: 15px;
}

.article-linkarea {}

.article-linkarea img {
    width: 100%;
}

.article-linkarea h4 {
    font-size: 18px;
    font-weight: bold;
}

.article-linkarea p {
    font-size: 12px;
}

.article-linkarea a {
    display: block;
    width: 100%;
    text-align: center;
    border: 1px solid black;
    text-decoration: none;
    color: black;
    margin-top: 20px;
}

.article-post {}

.article-post h3 {
    background-color: var(--mainttlbg);
    margin-top: 60px;
    color: white;
    padding: 15px 10px;
    font-weight: bold;
}

.linkarea {
    width: 100%;
    margin-top: 60px;
    margin-bottom: 20px;
    border-top: solid 5px #5d627b;
    box-shadow: 0 2px 2px rgb(0 0 0 / 22%);
    border-radius: 2px;
    padding-bottom: 10px;
}


/* 類似記事 */

.card-textbox {
    transition: all 0.3s ease;
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    box-shadow: var(--box-shadow);
    border: 1px solid #CCC;
    padding: 7px;
    border-radius: 2px;
}

.card-textbox img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    margin-top: 30px;
}
.card-contenterea {
    padding-top: 6px;
}

.card-textbox:hover {
    box-shadow: none;
    opacity: .8;
    transform: translateY(5px);
}

.tag-box {
    font-size: 12px;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    padding: 5px 9px;
}

.tag-box P {
    font-size: 10px;
}
.tagbox a {
}

.tag-box .minitag {
    color: #21252f;
    background-color: var(--tag01);
    padding: 2px 10px;
    border: 1px #CCC;
    border-radius: 5px;
    box-shadow: 2px 2px 1px #ccc;
}
.tag-box .minitag:hover {
    box-shadow: none;
}

.card-textbox h6 {
    font-weight: bold;
    font-size: 20px;
    border-bottom: 1px solid;
    color: #21252f;
    font-size: 16px;
    padding-top: 5px;
}

.card-textbox p {
    color: black;
    margin-bottom: 0px;
    font-size: 11px;
}

.card-effect {
    position: relative;
    overflow: hidden;
}

.card-effect::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    background-color: #ccc;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.35s ease;
    z-index: -1;
}

.card-effect:hover::after {
    opacity: 1;
    top: 0;
}


.similar-list {
    display: flex;
    justify-content: center;
    padding: 0px 15px;
}

.card-item {
    color: black;
}
.card-item a {
    display: block;
    text-decoration: none;
}
.card-item a:hover {
    color: black;
    text-decoration: none;
}

.card-ttl {
    
}

/* Useful型 */
.useful-top {}

.useful-top h3 {
    background-color: var(--mainttlbg);
    color: white;
    padding: 15px 10px;
    font-weight: bold;
    border-top: solid 5px #5d627b;
    box-shadow: 0 2px 2px rgb(0 0 0 / 22%);
    border-radius: 2px;
}

.useful-top p {
    font-size: 12px;
    text-align: end;
}

.useful-top h5 {
    font-weight: bold;
    padding-top: 15px;
    width: 80%;
    margin: 0 auto;
    font-size: 18px;
    text-align: center;
}

.useful-action {}

.useful-action img {
    margin: 0 auto;
    display: block;
    width: 50%;
}


.attention {}

.attention p {
    font-size: 12px;
    text-align: center;
}

.useful-box {}

.useful-area {
    border-top: solid 5px #5d627b;
    box-shadow: 0 2px 2px rgb(0 0 0 / 22%);
    border-radius: 2px;
    margin-top: 50px;
}

.useful-ttl {
    background-color: var(--subttlbg);
    width: 100%;
    margin: 0 auto;
}

.useful-ttl h4 {
    font-size: 20px;
    padding: 10px;
    margin-bottom: 0px;
    font-weight: bold;
    color: white;
}

.useful-html {
    background-color: #e7f9ff;
}

.useful-html p {
    font-size: 14px;
}

.useful-html code {
    font-size: 14px;
    color: var(--dark);
}

.useful-css {
    background-color: #f9e5c7;
}

.useful-css p {
    font-size: 14px;
}

.useful-css code {
    font-size: 14px;
    color: var(--dark);
}

.useful-java {
    background-color: #ffeeff;
}

.useful-java p {
    font-size: 14px;
    color: var(--dark);
}

.useful-commentary {}

.useful-commentary p {}

/* 投稿ページタグ表記 */
.tag-cloud {
    margin-top: 5px;
}

.tag-cloud a {
    background: var(--tag01);
    padding: 3px 8px;
    border-radius: 8px;
    color: #575757;
    box-shadow: 2px 2px 1px #ccc;
    transition: all 0.2s ease;
    margin: 6px 3px;
}

.tag-cloud a:hover {
    opacity: .7;
    box-shadow: none;
}

.tag-cloud2 {
    margin-top: 5px;
}

.tag-cloud2 a {
    background: var(--tag02);
    padding: 3px 8px;
    border-radius: 8px;
    color: #575757;
    box-shadow: 2px 2px 1px #ccc;
    transition: all 0.2s ease;
    margin: 6px 3px;
}

.tag-cloud2 a:hover {
    opacity: .7;
    box-shadow: none;
}



/* footer */
footer {
    color: white;
    background-color: var(--mainttlbg);
    width: 100%;
    text-align: center;
    margin-bottom: 0px;
    padding: 20px;
    margin-top: 80px;
}

footer p {
    margin-bottom: 0px;
}




/*-----------------------------------------------
投稿ページサイドバー
-----------------------------------------------*/
.side-erea {
    position: sticky;
    top: 50px;
}

.sidebar-post {
    margin-top: 1rem;
    margin-left: 1rem;
    border-radius: 2px;
}

.side-box {
    margin-bottom: 35px;
    border-top: solid 5px #5d627b;
    box-shadow: 0 2px 2px rgb(0 0 0 / 22%);
    border-radius: 2px;
}

.side-box h3 {
    font-size: 22px;
    font-weight: bold;
    background: var(--subttlbg);
    padding: 4px 12px;
    margin-bottom: 10px;
    color: white;
}

.side-box h3 img {
    margin-right: 12px;
    width: 12px;
    height: auto;
    padding-bottom: 5px;
}

.side-box .category-list {}

.side-box .category-list {}

.side-box .category-list li {
    list-style: none;
    margin-bottom: 4px;
    padding-left: 10px;
}

.side-box .category-list li a {
    text-decoration: none;
    color: #575757;
    transition: all 0.2s ease;
}

.side-box .category-list li a:hover {
    opacity: .7;
}

.side-box .category-list li .child {}

.side-box .category-list li .child ul {}

.side-box .category-list li .child ul li {}

.side-box .category-list2 {
    display: flex;
    flex-wrap: wrap;
}

.side-box .category-list2 li {
    list-style: none;
    margin: 6px 3px;
}

.side-box .category-list2 li a {
    background: var(--tag01);
    padding: 3px 8px;
    border-radius: 8px;
    color: #575757;
    box-shadow: 2px 2px 1px #ccc;
    transition: all 0.2s ease;
}

.side-box .category-list2 li a:hover {
    opacity: .7;
    box-shadow: none;
}

.side-box .category-list2 li .child {}

.side-box .category-list2 li .child ul {}

.side-box .category-list2 li .child ul li {}