/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/*!///////////////////////////////////////////*/
/*!//////////// ↓↓↓reset↓↓↓ ////////////*/
/*!///////////////////////////////////////////*/
*, *::before, *::after { box-sizing: border-box;}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl { margin: 0; color: #000;}
a { text-decoration: none;}
ul,ol { padding-left: 0; list-style-type: none;}
dd { margin-left: 0;}
p {font-size: 14px; line-height: 1.75;}
@media screen and (min-width: 768px) { p { font-size: 16px;}}
button {border: 0;}
/*!///////////////////////////////////////////*/
/*!//////////// ↑↑↑reset↑↑↑ ////////////*/
/*!///////////////////////////////////////////*/


/*!////////////////////////////////////////////*/
/*!//////////// ↓↓↓common↓↓↓ ////////////*/
/*!////////////////////////////////////////////*/
body { font-family: "Noto Sans JP", sans-serif;}
@media screen and (max-width: 767px) {
  .sp-none { display: none !important;}}
@media screen and (min-width: 768px) {
  .pc-none {display: none !important;}}
.hidden { display: none !important;}
.image { display: block; width: 100%;}
.wrapper {position: relative; overflow:clip;} /* overflowは適宜hiddenに変更 */
.container {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

body * { min-height: 0vw;} /* clamp用 */

a { transition: .3s; }
a * {pointer-events: none; transition: .3s;} /* サイト計測用 */

img ,svg { width: 100%; height: auto; object-fit: contain; }

/* img {　画像コピー禁止用の場合使用
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
} */

section { position: relative; }

h2 { text-align: center; }

/* 可変改行指定、<wbr>と併用 */
.WBR { word-break: keep-all; overflow-wrap: anywhere; } 

.Grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  gap: 20px;
}

/* .link-button {display: block; width: 100%;} */

/* background用svgの記述
svgタグ内、viewBoxと内容を変更、カラー変更は#が効かないので%23を記述→fill="%23■■■■■■"
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10 8.66.24"><path fill="%23ffffff" d="M7.44,.1l2.44,4.23-2.44,4.23H2.56L.12,4.33,2.56,.1H7.44m.06-.1H2.5L0,4.33l2.5,4.33H7.5l2.5-4.33L7.5,0h0Z"/></svg>') ;
*/
/*!////////////////////////////////////////////*/
/*!//////////// ↑↑↑common↑↑↑ ////////////*/
/*!////////////////////////////////////////////*/

body ,body *{
    min-height:0vw;
    font-family: "Noto Sans JP", sans-serif;
}
section {
    padding:0px;
}
img {
    display:block;
    width: 100%;
    object-fit:contain;
}

.koseikan-blog {
    overflow: clip;
}

.koseikan-blog a ,.koseikan-blog a * {
    transition:.3s;
}
.koseikan-blog a * {
    pointer-events:none;
}
.koseikan-blog a:hover {
  text-decoration: none;
}

.fv {
    padding:86px 0 0;
    position: relative;
    display: grid;
    grid-template-columns: 1fr clamp(min(calc(250vw / 3.75),250px),calc(600vw / 11.6),600px) 1fr;
    /* grid-auto-rows:clamp(min(calc(120vw / 3.75),120px),calc(300vw / 10),300px); */
    grid-auto-rows:100%;
    border-bottom:2px solid #000000;
    margin: 0;
    /* height: calc(clamp(min(calc(120vw / 3.75),120px),calc(300vw / 10),300px) + 86px); */
    /* margin-bottom:clamp(40px,calc(85vw / 10.4),85px); */
}
@media screen and (max-width: 767px) {
.fv {
    padding:44px 0 0;
    /* height: calc(clamp(min(calc(120vw / 3.75),120px),calc(300vw / 10),300px) + 44px); */
}
}
.fv::before ,.fv::after {
    content:"";
    display:block;
    flex:1;
    background-position: center right;
    background-repeat:repeat-x;
    background-size: auto 100%;
    background-image:url(fv_left.svg);
}
.fv::after {
    background-position: center left;
    background-image:url(fv_right.svg);
}
.fv h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: 75 / 34;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(min(calc(20vw / 3.75),20px),calc(40vw / 11.1),40px);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

/* Contents Body Styles */
main {
    position: relative;
    display:grid;
    grid-template-columns: 1fr auto;
    max-width:1110px;
    margin:0 auto;
}
@media screen and (max-width: 767px) {
main {
    grid-template-columns: 1fr;
}
}

main::before {
    content:"";
    position: absolute;
    top:0;
    left:100%;
    width: 100%;
    height:100%;
    display:block;
    background-color: #eaeef1;
    pointer-events:none;
}
.contents-body {
    flex:1;
}
.blog-side {
    background-color: #eaeef1;
    flex:1;
}

.contents-body-container,.blog-side-container {
    max-width: 1040px;
    margin: 0;
    margin-left: auto;
    padding: 0 clamp(20px, 5.33vw, 50px);
}
.blog-side-container {
    width: 360px;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(30px, calc(50vw / 11.1), 50px) 0;
    padding: clamp(70px, calc(130vw / 11.1), 130px) clamp(20px, 5.33vw, 50px);
}
.koseikan-blog--top .contents-body-container {
    margin-top: clamp(70px, calc(130vw / 11.1), 130px);
}
@media screen and (max-width: 767px) {
    .contents-body-container    {
    margin-bottom: 100px;
    }
    .blog-side-container {
        width: 100%;
        max-width: 450px;
    }
}

.article-wrapper {
    position: relative;
    display: block;
    text-decoration: none;
    color: #231815;
    gap: clamp(7px,calc(10vw / 11.1),10px);
}

.contents-top .article-wrapper {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 768px) {
    .article-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 0;
        display: block;
        pointer-events: none;
        background-image: linear-gradient(#c3dff1,#c3dff1);
        background-position: top left;
        background-repeat: no-repeat;
        transition: .3s;
    }
    .article-wrapper--new::after {
        left: -20px;
    }
    .article-wrapper:hover::after {
        height: 50%;
    }
}
@media screen and (max-width: 767px) {
    .article-wrapper--new{
        padding-left: 20px;
        border-left: 1px solid #c3dff1;
    }
}

.article-wrapper * {
margin:0;
padding:0;
text-decoration: none;
}

.article-wrapper p.article-date {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 200;
    font-size: 14px;
    letter-spacing: 0.1em;
}

.article-wrapper h2.article-title {
    font-weight: 700;
    font-size: clamp(20px, 2.5vw, 32px);
    line-height: 1.25;
    text-align:left;
    transform-origin: 0;
}
.article-wrapper:hover .article-title {
    transform: scale(1.02);
}

.article-wrapper span.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* margin-bottom: 1.5em; */
}

.article-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #c3dff1;
    color: #231815;
    font-weight: 400;
    font-size: 14px;
    padding: 4px 20px;
    border-radius: 14px;
    text-decoration: none;
    min-height:28px;
    min-width:140px;
    padding: 5px 15px;
    margin-bottom: .5em;
}

.article-img {
    width: 100%;
    aspect-ratio: 628 / 351; /* SVGの比率を参考に設定 */
    /* background-color: #cecece; */
}

.article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:.3s;
}
.article-wrapper:hover .article-img img ,.blog-recommended_services-container a:hover img {
    transform: scale(.98);
}
.blog-recommended_services-container a:hover img {
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,.2));
}

/* 最新記事 */
.contents-top {
    /* margin-top: clamp(70px, calc(130vw / 11.1), 130px); */
    margin-bottom: clamp(60px, 10vw, 100px);
}

.koseikan-blog--kensaku .contents-top {
    margin-top: clamp(35px, calc(65vw / 11.1), 65px);
}

/* 2件目以降の記事 */
.contents-common {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(calc(265vw / 3.75),265px),1fr));
    gap: 0 clamp(40px, 5vw, 60px);
}
.contents-common .article-wrapper {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    margin-bottom:clamp(40px, 5vw, 60px);
    padding-left:20px;
    border-left:clamp(2px,calc(2.5vw / 14),3px) solid #c3dff1;
}
.contents-common .article-title {
    font-size: clamp(14px, calc(16vw / 11.1), 16px);
    margin:0;
}
.contents-common .article-date {
    font-size: 12px;
    margin: 0 !important;
}
.contents-common .article-tag {
    font-size: 11px;
    padding: 2px 15px;
    min-height:20px;
    min-width:80px;
}

/* ページネーション */
.pagination {
    margin: clamp(30px, 5vw, 50px) auto clamp(60px, 10vw, 80px);
    text-align: center;
    font-size: 18px;
    letter-spacing: 0.1em;
    padding-bottom: 20px;
}
.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
}
.pagination .page-numbers {
    text-decoration: none;
    color: #231815;
}
.pagination .current {
    font-weight: bold;
}

/* Sidebar Styles */
.side-title {
    background-color: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 200;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}


.blog-recommended_services-container {
    display: flex;
    flex-direction: column;
    gap: clamp(15px,calc(20vw / 11.1),20px) 0;
}


.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: clamp(10px,calc(20vw / 11.1),20px);
}

.category-list a {
    position: relative;
    text-decoration: none;
    color: #231815;
    font-size: 16px;
    font-weight: 200;
}
.category-list a:hover {
    text-decoration: underline;
}

.category-list a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 2px;
    transition: .3s;
    pointer-events: none;
    margin: 2px 2px -2px 0;
    background-image: linear-gradient(-135deg, #fff calc(50% - .5px), transparent calc(50% - .5px));
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 0% 0%;
    background-color: #2391e2;
    border: 1px #2391e2 solid;
}
.category-list a:hover::before {
    background-size: 75% 75%;
}

/* .category-list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
    background-color: #231815;
    opacity: .7;
    transform: scale(0, 1);
}
.category-list a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
} */

.keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.keyword-list a {
    display: inline-block;
    background-color: #c3dff1;
    color: #231815;
    font-size: 12px;
    font-weight: 200;
    padding: 4px 15px;
    border-radius: 12px;
    text-decoration: none;
    transition: opacity 0.3s;
}
.keyword-list a:hover {
    opacity: 0.9;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.2));
    transform: translate(0,-1px);
}

.search-form form {
    position: relative;
    background-color: #fff;
    width: 100%;
    min-height: 45px;
    border: 2px solid #2391e2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 30px;
    padding: 5px 40px 5px 20px;
}
.search-form form:hover {
    background-color: #eaeef1;
}

.search-form form input {
    border: 0;
    width: 100%;
    background-color: transparent;
    transition: .3s;
}

.search-form form input:focus-visible {
    border: 0;
    outline: 0;
    /* filter: drop-shadow(0 2px 0 #2391e2); */
}

.search-form form input::placeholder {
    text-align: center;
}

.search-form form input:focus::-webkit-input-placeholder {
	color: rgba(0,0,0,0);
}
.search-form form input:focus::-moz-placeholder {
	color: rgba(0,0,0,0);
}
.search-form form input:focus::-ms-input-placeholder {
	color: rgba(0,0,0,0);
}
.search-form form input:focus::placeholder {
	color: rgba(0,0,0,0);
}

.search-form form button {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0,-50%);
  width: clamp(min(calc(14vw / 3.75),14px),calc(19.9vw / 7.67),19.9px);
  height: clamp(min(calc(14vw / 3.75),14px),calc(19.9vw / 7.67),19.9px);
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18.15 19.9"><path fill="%232391e2" d="M7.61,15.21c-2.17,0-4.33-.92-5.83-2.71C.47,10.94-.15,8.97.03,6.94.21,4.92,1.16,3.09,2.72,1.78,4.27.47,6.24-.15,8.27.03c2.02.18,3.86,1.13,5.16,2.69h0c1.31,1.56,1.93,3.53,1.75,5.55-.18,2.02-1.13,3.86-2.69,5.16-1.42,1.19-3.16,1.78-4.88,1.78ZM7.6,2c-1.31,0-2.58.46-3.59,1.31-1.15.96-1.85,2.31-1.98,3.81s.33,2.94,1.29,4.09c1.99,2.37,5.53,2.68,7.9.69,1.15-.96,1.85-2.31,1.98-3.81s-.33-2.95-1.29-4.09h0c-.96-1.15-2.31-1.85-3.81-1.98-.17-.01-.33-.02-.5-.02Z"/><rect fill="%232391e2" x="13.62" y="11.66" width="2" height="8.6" transform="translate(-6.84 13.13) rotate(-40)"/></svg>');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  transition: .3s;
  border: 0 solid #2391e2;
  background-color:transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.search-form form button:hover {
    background-size: auto 90%;
}

footer {
    min-height: 50px;
    padding: 10px;
    background-color: #000;
    margin: 0 !important;
    display: grid;
    place-items: center;
}
p.footer__text {
    color: #fff;
    font-size: clamp(min(calc(10vw / 3.75),10px),calc(12vw / 7.67),12px);
    text-align: center;
    margin: 0 !important;
}


a.blog-links-button {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    width: calc(100% - 45px - 6em);
    max-width: 200px;
    position: sticky;
    top: 100%;
    left: 2em;
    transform: translate(0,calc(-100% - 2.2em));
    background-color: #2391e2;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 5px 45px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18.15 19.9"><path fill="%23ffffff" d="M7.61,15.21c-2.17,0-4.33-.92-5.83-2.71C.47,10.94-.15,8.97.03,6.94.21,4.92,1.16,3.09,2.72,1.78,4.27.47,6.24-.15,8.27.03c2.02.18,3.86,1.13,5.16,2.69h0c1.31,1.56,1.93,3.53,1.75,5.55-.18,2.02-1.13,3.86-2.69,5.16-1.42,1.19-3.16,1.78-4.88,1.78ZM7.6,2c-1.31,0-2.58.46-3.59,1.31-1.15.96-1.85,2.31-1.98,3.81s.33,2.94,1.29,4.09c1.99,2.37,5.53,2.68,7.9.69,1.15-.96,1.85-2.31,1.98-3.81s-.33-2.95-1.29-4.09h0c-.96-1.15-2.31-1.85-3.81-1.98-.17-.01-.33-.02-.5-.02Z"/><rect fill="%23ffffff" x="13.62" y="11.66" width="2" height="8.6" transform="translate(-6.84 13.13) rotate(-40)"/></svg>');
    background-repeat: no-repeat;
    background-size: auto 19.9px;
    background-position: 20px center;
}
@media screen and (min-width: 768px) {
a.blog-links-button {
    display: none;
    }
}


/* Single Blog Post Styles */
.single-blog .contents-body-container {
    padding-top: clamp(70px, calc(100vw / 11.1), 100px);
    padding-bottom: clamp(70px, calc(130vw / 11.1), 130px);
}

.single-blog .post-header {
    margin-bottom: 2em;
}

.single-blog .post-title {
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: clamp(5px,0.5em,7px);
}

.single-blog .post-date {
    font-size: 14px;
    font-weight: 200;
    color: #555;
    letter-spacing: 0.1em;
    margin-bottom: clamp(8px,1.5em,12px);
}

.single-blog .post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(7px,1.3em,12px);
}

.single-blog .post-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #c3dff1;
    color: #231815;
    font-weight: 400;
    font-size: 14px;
    padding: 4px 20px;
    border-radius: 14px;
    text-decoration: none;
    min-height: 28px;
}

.single-blog .post-divider {
    border: 0;
    border-top: 1px solid #9bc8e4;
    margin-bottom: 3em;
}

.single-blog p.post-top-text {
    font-size: clamp(14px,calc(17vw / 11.1),17px);
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 2em;
}

.single-blog .post-details {
    display: flex;
    flex-direction: column;
    gap: clamp(50px, 8vw, 80px);
}

.single-blog .detail-item {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.single-blog .detail-title-wrapper {
    padding-bottom: clamp(8px,calc(12vw / 11.1),12px);
    background-image:linear-gradient(#2391e2,#2391e2);
    background-repeat: no-repeat;
    background-size: 50px clamp(3px,calc(5vw / 11.1),5px);
    background-position: bottom left;
}

.single-blog .detail-title {
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: 700;
    color: #2391e2;
    text-align: left;
    padding: 0;
    line-height: 1.45;
}

.single-blog .detail-contents p {
    font-size: clamp(13px,calc(16vw / 11.1),16px);
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 0 !important;
}

.detail-contents iframe {
    max-width: 100%;
    margin: 15px auto;
    display: grid;
    place-items: center;
}

.single-blog .detail-image img {
    width: 100%;
    height: auto;
    background-color: #ccecff;
}

.single-blog .post-footer-link {
    margin-top: clamp(5px, 1vw, 10px);
    display: block;
    text-decoration: none;
    max-width: clamp(min(90%,200px),50%,280px);
}

.single-blog .footer-link-content {
    /* padding: 2em; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.single-blog .footer-link-image {
    margin-bottom: 1em;
}

.single-blog .footer-link-image img {
    max-width: 100%;
    height: auto;
}

.post-footer-link:hover .footer-link-image img {
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,.2));
}

p.footer-link-text {
    font-size: clamp(13px,calc(146vw / 11.1),16px);
    line-height: 1.3;
    color: #2391e2;
    font-weight: 700;
    margin: 0 !important;
}

.single-blog-contents {
    display: flex;
    flex-direction: column;
    gap: clamp(min(calc(50vw / 3.75),50px),calc(100vw / 11.1),100px);
    margin-bottom: clamp(min(calc(50vw / 3.75),50px),calc(100vw / 11.1),100px);
}

.breadcrumb-container {
    padding: 5px 0;
    font-size: 12px;
    margin-bottom: 20px;
}

.koseikan-blog--kensaku .breadcrumb-container {
    padding: 5px 0;
    font-size: 12px;
    margin-bottom: clamp(55px,calc(85vw / 11.1),85px);
}

.breadcrumb p {
    margin-bottom:0 !important;
    line-height: 1.25;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px 5px;
}
.breadcrumb li {
    display: flex;
    align-items: center;
}
.breadcrumb li:not(:last-child)::after {
    content: '>';
    margin: 0 0.6em;
    color: #888;
}
.breadcrumb a {
    color: #2391e2;
    text-decoration: none;
}
.itemListElement * {
    font-size: clamp(11px,calc(14vw / 11.1),14px);
}

.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb li:last-child span {
    color: #333;
    font-size: clamp(11px,calc(14vw / 11.1),14px);
}

.blog-blue-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: clamp(250px,calc(300vw / 11.1),300px);
    min-height: clamp(40px,calc(55vw / 11.1),55px);
    background-color: #2391e2;
    border-radius: 30px;
    padding: 10px;
}
.blog-blue-button:hover {
    background-color: #fff;
    filter: drop-shadow(-1px -2px 0 rgba(35, 145, 226, 0.2));
    box-shadow: 1px 3px 0 #2391e2;
}
.blog-blue-button p {
    font-size: clamp(14px,calc(18vw / 11.6),18px);
    font-weight: 700;
    color: #fff;
    margin: 0 !important;
}
.blog-blue-button:hover p {
    color: #2391e2;
}

.post-navigation {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
    gap: 20px;
    background-image: linear-gradient(#ccc,#ccc);
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: center;
}


.post-navigation a {
    display: block;
    text-decoration: none;
    color: #333;
    /* border: 1px solid #ddd; */
    padding: 5px;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
}

/* .post-navigation a:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
} */
.post-navigation a span {
font-size: clamp(12px,calc(14vw / 11.4),14px);
}

.post-navigation a span.nav-previous-title {
font-size: clamp(14px,calc(18vw / 11.4),18px);
}

.post-navigation a:hover .nav-previous-title {
text-decoration: underline;

}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex-basis: 48%;
}

.nav-previous-text {
    padding-bottom: 5px;
    display: inline-block;
}

.post-navigation .nav-next {
    text-align: right;
}

.related-posts {
    margin: 30px 0;
    padding: 20px 0;
    /* border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0; */
    border-radius: 8px;
    /* background-color: #f9f9f9; */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.related-posts-section {
    margin-bottom: 30px;
}

.related-posts-section:last-child {
    margin-bottom: 0;
}

.related-posts-title {
    font-size: clamp(14px,calc(18vw / 11.1),18px);
    font-weight: 500;
    margin-bottom: 10px;
    padding-bottom: 2px;
    border-bottom: 1px solid #888;
}

.related-posts-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.related-posts-list li a:hover {
    text-decoration: underline;
}