.column-contents{gap:0}
.column-contents h1{
    color: #555;
    font-size: 26px;
    font-weight:normal;
    line-height: 40px;
    letter-spacing: 1.3px;
    padding:0;
}
.column-contents .date{
    color: #555;
    text-align: right;
    font-size: 13px;
    line-height: normal;
    letter-spacing: 0.65px;
}
.column-contents .category{display: block;}
.column-contents ul{padding-bottom:10px;}

.column-title-box{
    display: flex;
    align-items: flex-start;
    gap: 60px;
    align-self: stretch;
}
.column-title-box .title-left ul{display:none;}
.column-title-box .title-right{
    width:300px;
    flex-shrink: 0;
    flex-grow: 0;
}

.column-page-contents{
    display: flex;
    align-items: flex-start;
    gap: 60px;
    align-self: stretch;
}
.column-page-contents .page-left > section{padding:0px 0px 60px 0px;}
.column-page-contents .page-left .column-img{padding:28px 0px 0px 0px;}
.column-page-contents .page-left img{
    display:inline-block;
    width:100%;
    vertical-align:bottom;
}
.column-page-contents .page-left h2{
    color: #A88627;
    font-size: 22px;
    font-weight: bold;
    line-height: 32px;
    letter-spacing: 0.88px;
    padding:0px 0px 0px 10px;
    border-left:5px solid #A88627;
    margin:0;
}
.column-page-contents .page-left h3{
    color: #A88627;
    font-size: 18px;
    font-weight:bold;
    line-height: normal;
    letter-spacing: 0.72px;
    padding-bottom:8px;
    border-bottom:1px solid #B2AFAA;
    height:auto;
    padding:28px 0px 0px 0px;
    margin:0;
}
.column-page-contents .page-left p{
    margin:0px;
    color: #333;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.64px;
    padding:18px 0px 0px 0;
}

.column-page-contents .page-right{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:40px;
    width:300px;
    flex-shrink: 0;
    flex-grow: 0;
}

.contents-list-box{
    display: flex;
    padding: 40px 20px;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    background: #F9F9F7;
    flex-wrap: wrap;
}
.contents-list-box h2{
    color: #555;
    text-align: center;
    font-size: 17px;
    line-height: 17px;
    letter-spacing: 0.68px;
    margin:0;
    padding:0;
}
.contents-list-box h2 > span{
    color: #CAB68B;
    text-align: center;
    font-size: 12px;
    line-height: 12px; /* 100% */
    letter-spacing: 0.75px;
    display: block;
    padding:10px 0px 0px 0px;
}
.contents-list-box .content-list{
    display: block;
    padding:15px 0px 0px 0px;
}
.contents-list-box .content-list li{
    display: block;
    font-size: 16px;
    font-weight:bold;
    line-height: 24px;
    letter-spacing: 0.64px;
    position: relative;
    padding-left:1.2em;
}
.contents-list-box .content-list li::before{
    content:"・";
    color:#A88627;
    position:absolute;
    top:4px;
    left:0;
}
.contents-list-box .content-list a{color:#A88627}
.sp-box{display:none;}

.recommended{
    padding:40px 20px 30px 20px;
    gap:30px;
}
.rec-box{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.rec-box a{color:#555}
.column-contents .rec-box h3{
    height:auto;
    font-size: 16px;
    font-weight: normal;
    line-height: 26px;
    letter-spacing: 0.64px;
}
.column-contents .rec-box p{
    padding:0;
    margin:0;
    font-size: 12px;
    text-align:right;
    line-height: 26px;
    letter-spacing: 0.48px;
}
#column_top_button{
    position: fixed;
    width:60px;
    bottom: 60px;
    right: 60px;
}
.column-bottom{
    display: flex;
    padding: 0;
    align-items: center;
    gap: 40px;
    align-self: stretch;
}
.column-bottom-sp{display:none;}
.column-bottom > .column-bottom-center{
    display: flex;
    width: 238px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.column-bottom .column-bottom-prev,.column-bottom .column-bottom-next{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    width:calc(320px - 60px);
}
.column-bottom .column-bottom-prev::before, .column-bottom .column-bottom-next::after{
    content:"";
    display: block;
    width:50px;
    height: 50px;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}
.column-bottom .column-bottom-prev{padding:0px 0px 0px 60px;}
.column-bottom a .column-bottom-prev::before{
    background-image: url(../column/images/arrow_left_pc.svg);
    left:0;
}
.column-bottom .column-bottom-next{padding:0px 60px 0px 0px;}
.column-bottom a .column-bottom-next::after{
    background-image: url(../column/images/arrow_right_pc.svg);
    right:0;
}
.column-bottom .column-bottom-center > a{
    display: block;
    width:238px;
    padding:15px 0px;
    text-align:center;
    border:1px solid #B3A175;
    background: #FFF;
}
@media screen and (max-width: 768px){
    .column-contents{
        width:100%;
        gap:30px;
    }
    .column-title-box{
        flex-wrap:wrap;
        gap: 0px;
        width:calc(100% - 40px);
        margin:auto;
    }
    .column-title-box .title-left ul{display:flex;}
    .column-contents h1{
        font-size: 19px;
        line-height: 28px;
        letter-spacing: 0.76px;
        text-align: left;
    }
    .column-contents .date{
        margin:10px 0px 20px 0px;
        font-size: 11px;
        line-height: normal;
        letter-spacing: 0.55px;
    }
    .sp-box{
        display: block;
        width: 100%;
    }
    .pc-box{display:none;}
    .column-page-contents{gap:30px}
    .column-page-contents .page-left{
        width:calc(100% - 40px);
        margin:auto;
    }
    .column-page-contents .page-left > section{padding:0px 0px 20px 0px;}
    .column-page-contents .page-left h2{
        font-size: 17px;
        line-height: 24px;
        letter-spacing: 0.68px;
    }
    .column-page-contents .page-left .column-img{padding:16px 0px 0px 0px}
    .column-page-contents .page-left h3{
        font-size: 16px;
        line-height: normal;
        letter-spacing: 0.64px;
        padding:16px 0px 0px 0px;
    }
    .column-page-contents .page-left p{
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 0.56px;
    }
    .column-page-contents .page-right{width:100%;}
    .recommended{gap:20px}
    .rec-box a{
        display:flex;
        justify-content:flex-start;
        flex-wrap:wrap;
    }
    .rec-box img{
        width:120px;
        display: flex;
        padding:0px 10px 0px 0px;
    }
    .column-contents .rec-box h3{
        display:flex;
        font-size: 13px;
        line-height: 20px;
        letter-spacing: 0.52px;
        width: calc(100% - 130px);
    }
    .column-contents .rec-box p{
        width:100%;
        font-size: 11px;
        text-align: right;
        line-height: 26px;
        letter-spacing: 0.44px;
    }
    .column-title-box .title-right .category-list{display:none;}
    .column-page-contents{
        flex-wrap:wrap;
    }
    .contents-list-box{padding:30px 20px;}
    .contents-list-box .content-list li{
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.56px;
    }
    .column-bottom{display:none;}
    .column-bottom-sp{
        display: flex;
        align-items: center;
        align-self: stretch;
        flex-wrap:wrap;
    }
    .column-bottom-sp .column-bottom-center{
        width:100%;
        text-align:center;
    }
    .column-bottom-sp .column-bottom-center a{
        display: block;
        width:238px;
        margin:auto;
        padding:15px 0px;
        text-align:center;
        color: #B3A175;
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 1.3px;
        border: 1px solid #B3A175;
        background: #FFF;
    }
    .column-bottom-arrow{
        display:flex;
        margin:30px auto 0px auto;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }
    .column-bottom-arrow div{
        width:120px;
        padding:0px 9px;
        position: relative;
    }
    .column-bottom-arrow div::before{
        content:"";
        display:block;
        width:10px;
        height: 17px;
        background-size:cover;
        position: absolute;
        top:0;
        bottom:0;
        margin:auto;
    }
    .column-bottom-arrow a .column-bottom-prev::before{
        background-image: url(../column/images/arrow_left_sp.svg);
        left:-10px
    }
    .column-bottom-arrow a .column-bottom-next::before{
        background-image: url(../column/images/arrow_right_sp.svg);
        right:-10px
    }
    .column-bottom-arrow .column-bottom-prev{border-right:1px solid #B3A175;}
    .column-bottom-arrow a{
        color: #A88627;
        font-size: 11px;
        line-height: 16px;
        letter-spacing: 0.55px;
    }
    .column-page-contents .page-right .column{width:calc(100% - 40px);}
}