@charset "utf-8";

#topics {
        .wrap {
                .contents {
                        display:grid;
                        grid-template-columns:1fr 250px;
                        grid-gap:40px;
                        .contents_inner {
                                .newslist {
                                        display:grid;
                                        grid-template-columns:repeat(3,1fr);
                                        grid-gap:90px 20px;
                                        margin-bottom:90px;
                                        a {
                                                box-shadow:0 3px 6px rgba(0,0,0,.16);
                                                .img {
                                                        position:relative;
                                                        img {
                                                                display:block;
                                                                width:100%;
                                                                aspect-ratio:1.75/1;
                                                                object-fit:cover;
                                                        }
                                                        .cat {
                                                                font-size:1.4rem;
                                                                position:absolute;
                                                                left:0;
                                                                bottom:0;
                                                                background-color:#FFFFFF;
                                                                color:var(--color_main);
                                                                border:1px solid var(--color_main);
                                                                padding:.66em 1em;
                                                        }
                                                }
                                                .detail {
                                                        padding:20px 15px;
                                                        h2 {
                                                                font-size:1.8rem;
                                                                line-height:1.33;
                                                                text-align:left;
                                                                margin-bottom:.75em;
                                                                padding:0;
                                                        }
                                                        p {
                                                                line-height:1.5;
                                                                &.date {
                                                                        line-height:1;
                                                                        font-size:1.3rem;
                                                                        margin-bottom:.5em;
                                                                }
                                                        }
                                                }
                                        }
                                }
                                .pagenavi {
                                        .page-numbers {
                                                display:flex;
                                                align-items:center;
                                                justify-content:center;
                                                gap:.5em 1em;
                                                font-size:1.4rem;
                                                a,span {
                                                        color:var(--color_main);
                                                        border:1px solid var(--color_main);
                                                        width:2.2em;
                                                        height:2.2em;
                                                        border-radius:50%;
                                                        font-weight:600;
                                                        &.current {
                                                                background-color:var(--color_main);
                                                                color:#FFFFFF;
                                                        }
                                                }
                                        }
                                }
                        }
                        .sidebar {
                                dl {
                                        dt {
                                                font-size:1.8rem;
                                                text-align:center;
                                                background-color:#cccccc;
                                                padding:.66em;
                                        }
                                        dd {
                                                padding:20px 25px;
                                                border-left:1px solid #cccccc;
                                                border-right:1px solid #cccccc;
                                                ul {
                                                        display:grid;
                                                        grid-gap:3px;
                                                        li {
                                                                a {
                                                                        display:block;
                                                                        font-size:1.4rem;
                                                                        background-color:#FFFFFF;
                                                                        color:var(--color_main);
                                                                        border:1px solid var(--color_main);
                                                                        padding:.66em 1em;
                                                                }
                                                        }
                                                }
                                        } 
                                }
                                & > a {
                                        display:grid;
                                        grid-template-columns:repeat(2,auto);
                                        grid-gap:1em;
                                        border:1px solid #333333;
                                        height:50px;
                                        align-items:center;
                                        justify-content:center;
                                        &::before {
                                                content:'';
                                                width:.33em;
                                                height:.33em;
                                                border-top:2px solid #000000;
                                                border-right:2px solid #000000;
                                                transform:rotate(45deg);
                                        }
                                }
                        }
                        
                }
        }
        &.single {
                .wrap {
                        .contents {
                                .contents_inner {
                                        h2 {
                                                font-size:2.0rem;
                                                margin-bottom:1.5em;
                                                &::before {
                                                        content:'■';
                                                        color:var(--color_main);
                                                        margin-right:.33em;
                                                }
                                        }
                                        .post-block1 {
                                                margin-bottom:60px;
                                                .taxonomy-category {
                                                        margin-bottom:20px;
                                                        display:flex;
                                                        flex-wrap:wrap;
                                                        gap:.5em;
                                                        a {
                                                                font-size:1.2rem;
                                                                color:var(--color_main);
                                                                border:1px solid var(--color_main);
                                                                padding:.5em;
                                                        }
                                                }
                                                .wp-block-post-date {
                                                        font-size:1.4rem;
                                                        margin-bottom:.5em;
                                                }
                                                h2 {
                                                        font-size:2.0rem;
                                                        margin-bottom:1em;
                                                        &::before {
                                                                content:none;
                                                        }
                                                }
                                        }
                                        .post-block2 {
                                                margin-bottom:60px;
                                                .wp-block-image {
                                                        margin-top:30px;
                                                }
                                        }
                                        .post-table {
                                                margin-bottom:60px;
                                                tr {
                                                        td {
                                                                &:first-child {
                                                                        background-color:var(--color_main);
                                                                        color:#FFFFFF;
                                                                        font-weight:600;
                                                                        width:30%;
                                                                }
                                                        }
                                                }
                                        }
                                        .post-block3 {
                                                margin-bottom:60px;
                                                .is-layout-flow {
                                                        .is-layout-flex {
                                                                margin-top:30px;
                                                        }
                                                }
                                        }
                                        .post-steps {
                                                margin-bottom:60px;
                                                .is-layout-flow {
                                                        .post-step {
                                                                border:1px solid #cccccc;
                                                                gap:0;
                                                                position:relative;
                                                                .post-step-num {
                                                                        background-color:var(--color_main);
                                                                        display:grid;
                                                                        align-items:center;
                                                                        justify-content:center;
                                                                        p {
                                                                                color:#FFFFFF;
                                                                                font-weight:600;
                                                                        }
                                                                }
                                                                .post-step-detail {
                                                                        padding:1em;
                                                                        h3 {
                                                                                font-size:1.8rem;
                                                                                margin-bottom:1em;
                                                                        }
                                                                }
                                                                &:not(:last-child) {
                                                                        margin-bottom:2em;
                                                                        &::after {
                                                                                content:'';
                                                                                display:block;
                                                                                width:2em;
                                                                                height:1em;
                                                                                background-color:#cccccc;
                                                                                clip-path:polygon(0 0,100% 0,50% 100%);
                                                                                position:absolute;
                                                                                left:calc(10% - 1em);
                                                                                bottom:-1.5em;
                                                                        }
                                                                }
                                                        }
                                                }
                                        }
                                        .post-movie {
                                                iframe {
                                                        width:100%;
                                                        height: auto;
                                                        display:block;
                                                        aspect-ratio:16/9;
                                                }
                                        }
                                }
                        }
                }
        }
}

@media ( hover:hover ){
        
         #topics {
                .wrap {
                        .contents {
                                .contents_inner {
                                        .newslist {
                                                a {
                                                        .img {
                                                                overflow:hidden;
                                                                img {
                                                                        transition:.3s;
                                                                }
                                                        }
                                                        &:hover {
                                                                opacity:1;
                                                                .img {
                                                                        overflow:hidden;
                                                                        img {
                                                                                transition:.3s;
                                                                                transform:scale(1.05);
                                                                                filter:brightness(.8);
                                                                        }
                                                                }
                                                        }
                                                }
                                        }
                                        .pagenavi {
                                                .page-numbers {
                                                        a {
                                                                &:hover {
                                                                        background-color:var(--color_main);
                                                                        color:#FFFFFF;
                                                                        opacity:1;
                                                                }
                                                        }
                                                }
                                        }
                                }
                                .sidebar {
                                        dl {
                                                dd {
                                                        ul {
                                                                li {
                                                                        a {
                                                                                &:hover {
                                                                                        background-color:var(--color_main);
                                                                                        color:#FFFFFF;
                                                                                        opacity:1;
                                                                                }
                                                                        }
                                                                }
                                                        }
                                                } 
                                        }
                                        & > a {
                                                &::before {
                                                     transition:.3s;
                                                }
                                                &:hover {
                                                        background-color:#000000;
                                                        color:#FFFFFF;
                                                        opacity:1;
                                                        &::before {
                                                                border-color:#FFFFFF;
                                                        }
                                                }
                                        }
                                }
                                
                        }
                }
        }

}

@media screen and (max-width:1200px){

}

@media screen and (max-width:1024px){

        #topics {
                .wrap {
                        .contents {
                                grid-template-columns:1fr 220px;
                                grid-gap:30px;
                                .contents_inner {
                                        .newslist {
                                                grid-template-columns:repeat(2,1fr);
                                                grid-gap:30px 20px;
                                                margin-bottom:60px;
                                        }
                                }
                                .sidebar {
                                        & > a {
                                                font-size:1.5rem;
                                        }
                                }
                                
                        }
                }
        }
        
}

@media screen and (max-width:768px){

        #topics {
                .wrap {
                        .contents {
                                grid-template-columns:1fr;
                                grid-gap:50px;
                                .contents_inner {
                                        .newslist {
                                                display:grid;
                                                grid-gap:10px;
                                                margin-bottom:45px;
                                                a {
                                                        .img {
                                                                .cat {
                                                                        font-size:1.1rem;
                                                                        padding:.5em .66em;
                                                                }
                                                        }
                                                        .detail {
                                                                padding:15px 10px;
                                                                h2 {
                                                                        font-size:1.5rem;
                                                                }
                                                                p {
                                                                        font-size:1.4rem;
                                                                        &.date {
                                                                                line-height:1;
                                                                                font-size:1.2rem;
                                                                        }
                                                                }
                                                        }
                                                }
                                        }
                                        .pagenavi {
                                                .page-numbers {
                                                        gap:.5em .66em;
                                                        font-size:1.2rem;
                                                }
                                        }
                                }
                                .sidebar {
                                        dl {
                                                max-width:400px;
                                                margin:0 auto;
                                        }
                                        & > a {
                                                max-width:400px;
                                                margin:0 auto;
                                        }
                                }
                                
                        }
                }
                &.single {
                        .wrap {
                                .contents {
                                        .contents_inner {
                                                h2 {
                                                        font-size:1.8rem;
                                                        margin-bottom:1em;
                                                }
                                                .post-block1 {
                                                        margin-bottom:45px;
                                                        .taxonomy-category {
                                                                margin-bottom:10px;
                                                        }
                                                        .wp-block-post-date {
                                                                font-size:1.4rem;
                                                                margin-bottom:.5em;
                                                        }
                                                        h2 {
                                                                font-size:1.6rem;
                                                                margin-bottom:.5em;
                                                        }
                                                }
                                                .post-block2 {
                                                        margin-bottom:45px;
                                                        .wp-block-image {
                                                                margin-top:30px;
                                                        }
                                                }
                                                .post-table {
                                                        margin-bottom:60px;
                                                        tr {
                                                                td {
                                                                        &:first-child {
                                                                                width:100%;
                                                                        }
                                                                }
                                                        }
                                                }
                                                .post-block3 {
                                                        margin-bottom:45px;
                                                        .is-layout-flow {
                                                                .is-layout-flex {
                                                                        margin-top:20px;
                                                                }
                                                        }
                                                }
                                                .post-steps {
                                                        margin-bottom:45px;
                                                        .is-layout-flow {
                                                                .post-step {
                                                                        .post-step-detail {
                                                                                padding:1em;
                                                                                h3 {
                                                                                        font-size:1.6rem;
                                                                                }
                                                                        }
                                                                        &:not(:last-child) {
                                                                                &::after {
                                                                                        left:calc(50% - 1em);
                                                                                }
                                                                        }
                                                                }
                                                        }
                                                }
                                        }
                                }
                        }
                }
        }

}