@charset "utf-8";
#news .wrap {padding: 200px 0;}

#news .wrap .side {padding: 0 50px 0 0;}
#news .wrap .side .cat-list {width: 100%; max-width: 400px; padding: 50px; background-color: var(--color-white); box-sizing: border-box; -webkit-mask-image: url("../img/mask_02.svg"); mask-image: url("../img/mask_02.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;}
#news .wrap .side .cat-list ul {display: flex; flex-direction: column; gap: 24px; list-style: none;}
#news .wrap .side .cat-list ul li {position: relative; padding-left: 1.5em; line-height: 1.5;}
#news .wrap .side .cat-list ul li::before {content: "・"; position: absolute; left: 0; top: 0; color: var(--color-text-light);}
#news .wrap .side .cat-list ul li a {color: var(--color-text-light); transition: color 0.3s ease;}
#news .wrap .side .cat-list ul li a:hover {color: var(--color-primary);}
#news .wrap .side .cat-list ul li.active::before ,
#news .wrap .side .cat-list ul li.active a {color: var(--color-primary);}
@media screen and (max-width:1280px) {
    #news .wrap .side {padding: 0 20px 0 0;}
    #news .wrap .side .cat-list {padding: 30px;}
}
@media screen and (max-width:960px) {
    #news .wrap .side {padding: 0; margin: 0 0 100px;}
}
#news .wrap .list .no-post {text-align: center;}

#news .pagination {margin-top: 60px;}
#news .pagination ul.page-numbers {display: flex; justify-content: center; align-items: center; gap: 10px;}
#news .pagination ul.page-numbers li {list-style: none;}
#news .pagination ul.page-numbers li a.page-numbers ,
#news .pagination ul.page-numbers li span.current {width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: var(--color-primary-light); color: var(--color-white); line-height: 1; transition: background-color 0.3s ease;}
#news .pagination ul.page-numbers li a.page-numbers:hover {background-color: var(--color-primary);}
#news .pagination ul.page-numbers li span.current {background-color: var(--color-primary);}
#news .pagination ul.page-numbers li span.dots {display: flex; align-items: center; justify-content: center; min-width: 24px; color: var(--color-primary); line-height: 1; letter-spacing: 2px;}
@media screen and (max-width:1280px) {
    #news .pagination ul.page-numbers li a.page-numbers ,
    #news .pagination ul.page-numbers li span.current {width: 35px; height: 35px;}
}
@media screen and (max-width:768px) {
    #news .pagination ul.page-numbers li a.page-numbers ,
    #news .pagination ul.page-numbers li span.current {width: 30px; height: 30px;}
}

.single .main {margin: 100px auto;}

#content {margin: 0 100px;}
#content .wrap {max-width: 1280px; margin: 0 auto 200px;}
#content .wrap h1 {font-size: 30px; color: var(--color-primary); position: relative; padding: 0 0 0.25em;}
#content .wrap h1::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-image: repeating-linear-gradient(to right, var(--color-primary) 0 2px, transparent 2px 4px);}
#content .wrap .cat-date {display: flex; justify-content: space-between; align-items: center; margin: 10px auto;}
#content .wrap .cat-date .cat > ul {list-style: none;}
#content .wrap .cat-date .cat > ul > li {background-color: var(--color-text-light); border-radius: 99px; padding: 0 20px; color: var(--color-bg); font-size: 16px;}
#content .wrap .content {margin: 100px auto 200px;}
#content .wrap .content h1 {font-size: 28px; padding: 0 0 0 0.5em; border-bottom: 1px solid var(--color-accent-yellow); margin: 100px auto 70px;}
#content .wrap .content h2 {font-size: 26px; padding: 0 0 0 0.5em; border-bottom: 1px solid var(--color-accent-yellow); margin: 100px auto 70px;}
#content .wrap .content h3 {font-size: 24px; padding: 0 0 0 0.5em; border-bottom: 1px solid var(--color-accent-yellow); margin: 100px auto 70px;}
#content .wrap .content h4 {font-size: 22px; margin: 100px auto 70px;}
#content .wrap .content h5 {font-size: 20px; margin: 100px auto 70px;}
#content .wrap .content h6 {font-size: 18px; margin: 100px auto 70px;}
#content .wrap .content img {margin: 40px 0 0; width: auto; max-width: 100%;}
#content .wrap .content p,
#content .wrap .content ul,
#content .wrap .content ol {margin: 40px auto 0;}
#content .wrap .content .col-2 {display: flex; margin: 40px auto 0;}
#content .wrap .content .col-2 > * {width: 50%; padding: 0 50px 0 0;}
#content .wrap .content .col-2 > *:last-child {padding: 0 0 0 50px;}
@media screen and (max-width:1280px) {
    #content {margin: 0 50px;}

    #content .wrap h1 {font-size: 28px;}
    #content .wrap .cat-date .cat > ul > li {font-size: 14px;}

    #content .wrap .content h1 {font-size: 26px;}
    #content .wrap .content h2 {font-size: 24px;}
    #content .wrap .content h3 {font-size: 22px;}
    #content .wrap .content h4 {font-size: 20px;}
    #content .wrap .content h5 {font-size: 18px;}
    #content .wrap .content h6 {font-size: 16px;}
    #content .wrap .content .col-2 > * {padding: 0 25px 0 0;}
    #content .wrap .content .col-2 > *:last-child {padding: 0 0 0 25px;}
}
@media screen and (max-width:960px) {
    #content .wrap .content .col-2 {display: block;}
    #content .wrap .content .col-2 > * {width: 100%; padding: 0;}
    #content .wrap .content .col-2 > *:last-child {padding: 0; margin: 40px auto 0;}
}
@media screen and (max-width:768px) {
    #content {margin: 0 20px;}

    #content .wrap h1 {font-size: 26px;}
    #content .wrap .cat-date .cat > ul > li {font-size: 12px; padding: 0 10px;}

    #content .wrap .content h1 {font-size: 24px;}
    #content .wrap .content h2 {font-size: 22px;}
    #content .wrap .content h3 {font-size: 20px;}
    #content .wrap .content h4 {font-size: 18px;}
    #content .wrap .content h5 {font-size: 16px;}
    #content .wrap .content h6 {font-size: 14px;}
}
@media screen and (max-width:590px) {

    #content .wrap h1 {font-size: 24px;}

    #content .wrap .content h1 {font-size: 22px;}
    #content .wrap .content h2 {font-size: 20px;}
    #content .wrap .content h3 {font-size: 18px;}
    #content .wrap .content h4 {font-size: 16px;}
    #content .wrap .content h5 {font-size: 14px;}
    #content .wrap .content h6 {font-size: 12px;}
}