@charset "utf-8";

/*---------------------------------------------------------
コラム
---------------------------------------------------------*/
/* アーカイブ */
#column-archive{
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr);
    
    .card-box{
        background: #fff;
        border: 1px solid #efefef;
        border-radius: 1vh;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .pct{
        width: 100%;
        height: 200px;
        margin: 0;
        overflow: hidden;
    }
    .pct img{
        width: 100%;
        height: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        display: block;
    }
    .txt-box{
        padding: 1rem;
    }
    .new-icon{
    background: #F9C34B;
    line-height: 1;
    padding: 3px 5px;
    font-weight: 700;
    color: #fff;
    }
    .date,.new-icon,.tag a{
     font-size: 12px;
    }
    .title{
     margin: 1rem 0;
     font-weight: 700;
    }
    hr{
        margin: 1em 0;
    }
    .tag a{
    background: #01A56F;
    color: #fff;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 1vh;
    display: inline-block;
    }
    .pagination-wrapper {
    text-align: center;
    margin-top: 40px;
}

.pagination-wrapper .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
}

.pagination-wrapper .page-numbers {
    padding: 8px 16px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
}

.pagination-wrapper .page-numbers.current {
    background-color: #333;
    color: #fff;
    border-color: #333;
}
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
#column-archive{
        grid-template-columns: 1fr;
        gap: 20px;
    .card{
        flex-direction: row;
    }
    .pct {
        height: 120px;
    }
    .pct img {
        aspect-ratio: 1 / 1;
    }
    .txt-box {
        padding: 1rem;
        width: 70%;
    }
}
}

/* 詳細 */
div#ez-toc-container ul li::before{
        content: "";
}

.column-info{
    section{padding: 0 0 4vh !important;}
    p{margin: 0 0 2rem;}
    h2{
    font-size: clamp(1.8rem, 3vw, 2.25rem);
        color: #01A56F;
        border-left: 10px solid rgba(1, 165, 111,.5);
        padding-left: 15px;
        padding-top: 4px;
        padding-bottom: 4px;
        font-weight: 700;
        margin: 0 0 2vh;
    }
    h3{}
    h4{}
    .txt_bold{
        font-weight: 700;
        color: #007440;
    }
    ul li{
        list-style: inherit !important;
        margin-top: .5em;
        margin-bottom: .5em;
        padding-left: 1.2em;
        position: relative;
    }
    ul li::before{
        content: "•";
        position: absolute;
        left: 0;
        color: #000;
    }
    table{
        width: 100%;
        margin-top: .5em;
        margin-bottom: 1em;
        border-collapse: collapse;
        border-spacing: 0;
    }
    table th,table td{
        padding: 10px;
    vertical-align: middle;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    }
    table th{
        background: rgba(198, 183, 124, 0.05);
        position: relative;
        white-space: nowrap;
    }
    table td{
        border-left: none;
        border-right: none;
        background: none;
        text-align: left;
        font-weight: normal;
    }
    .column-table caption{
        margin-bottom: 0.5em;
    }
    .h1-ttl p{font-size: clamp(2rem, 3vw, 3rem);margin: 0;}
    .expert-advice{
        background:rgba(196,231,220,0.4);
        padding: 1.5em;
    }
    
/* 監修者 */
    .supervisor-area{
        padding: 0 0 6vh !important;
        width: 90%;
        max-width: 800px;
        margin: 0 auto;
        .supervisor-box{
            border: 1px solid #ddd;
            padding:2vh 2vw;
            h2{
             font-size: clamp(1.8rem, 3vw, 1.8rem);
            }
            .supervisor-contents{
                display: flex;
                gap: 30px;
                h3{
                margin: 0 0 2vh;
                }
                h3 span{
                font-size: clamp(2rem, 3vw, 2.25rem);
                font-weight: 700;
                color: #01A56F;
                background-image: -webkit-linear-gradient(transparent 60%, #FED104 60%);
                background-image: linear-gradient(transparent 60%, #FED104 60%);
                }
                .supervisor-pct{
                    position: relative;
                    overflow: hidden;
                    border-radius: 50%;
                    width: 100%;
                    max-width: 200px;
                    img{
                         height: 100%;
                         width: 100%;
                         top: 0;
                         left: 0;
                         max-width: 100%;
                         -moz-transform: none;
                         -ms-transform: none;
                         -webkit-transform: none;
                         transform: none;
                         object-fit: cover;
                    }
                }
            }
        }
        @media (max-width: 480px) {
            .supervisor-contents{
                flex-direction: column;
                align-items: center;
                gap: 0 !important;
                h3{text-align: center;}
            }
        }
    }
    
/* ナビゲーション */
.post-navigation {
        width: 90%;
        max-width: 600px;
        margin: 0 auto;
        }
.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.nav-previous, .nav-archive, .nav-next {
    flex: 1;
}
.nav-previous { text-align: left; }
.nav-archive  { text-align: center; }
.nav-next     { text-align: right; }
/* ボタン本体のデザイン */
.nav-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #fff;
    border:2px solid #01A56F;
    color: #01A56F;
    font-size: 14px;
    font-weight: bold;
    border-radius: 30px;
    transition: all 0.3s ease;
    min-width: 120px;
    text-align: center;
}
/* ホバー */
.nav-links a:hover .nav-btn {
    background-color: #01A56F;
    color: #fff;
    text-decoration: none;
}
.nav-links a {
    text-decoration: none;
}
/* スマホ対応 */
@media (max-width: 480px) {
    .nav-btn {
        padding: 8px 10px;
        font-size: 12px;
        min-width: 90px;
    }
}
}

.column-contents-ttlBox{
    padding: 5vh 0 6vh !important;
    
    .date{
        background: #01A56F;
        padding: .5rem 1rem;
        color: #fff;
        margin-top: 5vh;
    }
    h1{
        margin: 1.5rem 0;
        font-size: clamp(1.6rem, 3vw, 2.5rem);
        font-weight: 700;
        line-height: 1.3;
    }
    .main-pct{
        width: 100%;
        max-width: 800px;
        height: 400px;
        margin: 0 auto;
        overflow: hidden;
    }
    .main-pct img{
        width: 100%;
        height: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        display: block;
    }
}
/* カテゴリー一覧 */
.column-category-list{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .column-category-list > li{
        padding: 0;
    }
    .column-category-list > li::before{
        content: "" !important;
    }
    .column-category-list > li a{
        background: #007440;
        padding: 10px 15px;
        border-radius: 1vh;
        color:#fff;
    }

/* 目次 */
 article.article.column-info #ez-toc-container {
        margin: 6vh auto 6vh !important;
        a{
            font-size: clamp(1.4rem, 3vw, 1.8rem) !important;
            color: #01A56F;
            line-height: 2;
            text-decoration: underline;
        }
    }

.ez-toc-section /* スクロール先をセレクタに */ {
    margin-top: -100px;
    padding-top: 100px;
}

div#ez-toc-container .ez-toc-title {
    font-weight: 500;
}
div#ez-toc-container .ez-toc-title {
    font-size: clamp(1.4rem, 1.6vw, 1.6rem) !important;
}
div#ez-toc-container ul li, div#ez-toc-container ul li a {
    font-size: clamp(1.4rem, 1.6vw, 1.6rem) !important;
}
.ez-toc-wrap-center {
    margin: 0 auto 4em !important;
}
#ez-toc-container {
    width: 90% !important;
    max-width:800px !important;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
}