@charset "utf-8";

#products {
        .wrap {
                padding-top:30px;
                .contents {
                        display:grid;
                        grid-template-columns: 250px 1fr;
                        grid-gap:40px;
                        .contents_inner {
                                order:1;
                                h1 {
                                        font-size: 3.0rem;
                                        margin-bottom:2em;
                                } 
                                .product_list {
                                        display:grid;
                                        grid-template-columns:repeat(3,1fr);
                                        grid-gap:30px 15px;
                                        margin-bottom:60px;
                                        a {
                                                box-shadow:0 3px 6px rgba(0,0,0,.16);
                                                .img {
                                                        img {
                                                                display:block;
                                                                width:100%;
                                                                aspect-ratio:1.2/1;
                                                                object-fit:cover;
                                                        }
                                                }
                                                .detail {
                                                        border:2px solid var(--color_main);
                                                        padding:15px;
                                                        h2 {
                                                                font-size:1.8rem;
                                                                line-height:1.33;
                                                                font-weight:500;
                                                                text-align:center;
                                                                margin:0;
                                                        }
                                                }
                                        }
                                }
                                .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;
                                                        }
                                                }
                                        }
                                }
                                .wp-block-file {
                                        .wp-block-file__button {
                                                padding:.66em 1.5em;
                                        }
                                }
                        }
                        .sidebar {
                                .sidemenu {
                                        h3 {
                                                display:grid;
                                                grid-template-columns:1fr 2em;
                                                height:3em;
                                                background-color:var(--color_main);
                                                &:not(:first-child) {
                                                        margin-top:15px;
                                                }
                                                a {
                                                        align-items:center;
                                                        line-height:1.3;
                                                        padding-left:2em;
                                                        color:#FFFFFF;
                                                        position:relative;
                                                        height:100%;
                                                        display:grid;
                                                        align-items:center;
                                                        justify-content:center;
                                                }
                                                .arrow {
                                                        cursor:pointer;
                                                        position:relative;
                                                        height:100%;
                                                        &::after {
                                                                content:'';
                                                                display:block;
                                                                width:.66em;
                                                                height:.5em;
                                                                background-color:#FFFFFF;
                                                                clip-path:polygon(0 0,100% 0,50% 100%);
                                                                position:absolute;
                                                                top:50%;
                                                                left:50%;
                                                                transform:translate(-50%,-50%) rotate(0deg);
                                                                transition:.3s;
                                                        }
                                                }
                                                &.open {
                                                        .arrow {
                                                                &::after {
                                                                        transform:translate(-50%,-50%) rotate(180deg);
                                                                }
                                                        }
                                                        & + ul {
                                                                display:block;
                                                        }
                                                }
                                        }
                                        ul {
                                                border-left:2px solid #EEF0F3;
                                                border-right:2px solid #EEF0F3;
                                                border-bottom:2px solid #EEF0F3;
                                                display:none;
                                                li {
                                                        &:not(:last-child) {
                                                                border-bottom:2px solid #EEF0F3;
                                                        }
                                                        a {
                                                                display:grid;
                                                                text-align:center;
                                                                align-items:center;
                                                                line-height:1.3;
                                                                min-height:2.8em;
                                                                padding:.5em;
                                                        }
                                                        ul {
                                                                border:none;
                                                                margin-bottom:0;
                                                                display:block;
                                                                li {
                                                                        a {
                                                                        background-color:#F8F8F8; 
                                                                        }
                                                                        &:first-child {
                                                                                border-top:2px solid #EEF0F3;
                                                                        }
                                                                        &:last-child {
                                                                                border-bottom:none;
                                                                        }
                                                                }
                                                        }
                                                }
                                        }
                                }
                        }
                }
        }
        &.single {
                .wrap {
                        .contents {
                                .contents_inner {
                                        overflow:hidden;
                                        h2 {
                                                font-size:2.0rem;
                                                line-height:1.33;
                                                margin-bottom:1.5em;
                                                &::after {
                                                        content:'';
                                                        display:block;
                                                        width:5.5em;
                                                        border-bottom:2px solid var(--color_main);
                                                        margin-top:.25em;
                                                }
                                        }
                                        .product-block1 {
                                                margin-bottom:60px;
                                        }
                                        .product-tablist {
                                                display:grid;
                                                grid-template-columns:repeat(3,1fr);
                                                grid-gap:20px 30px;
                                                margin-bottom:60px;
                                                li {
                                                        border:1px solid #cccccc;
                                                        border-left:15px solid var(--color_main);
                                                        min-height:70px;
                                                        display:grid;
                                                        align-items:center;
                                                        justify-content:center;
                                                        line-height:1.33;
                                                        padding:.5em 1em;
                                                        font-weight:600;
                                                }
                                        }
                                        .product-table {
                                                border-collapse:collapse;
                                                width:100%;
                                                margin-bottom:60px;
                                                thead {
                                                        border:none;
                                                        th {
                                                                background-color:var(--color_main);
                                                                color:#FFFFFF;
                                                                text-align:center;
                                                                vertical-align:middle;
                                                        }
                                                }
                                                tbody {
                                                        tr {
                                                                &:nth-child(even) {
                                                                        background-color:#EFEFEF;
                                                                }
                                                        }
                                                }
                                        }
                                        .product-slider {
                                                padding:0 30px;
                                                .slick-slide {
                                                        h3 {
                                                                font-size:1.8rem;
                                                                line-height:1.33;
                                                                margin:.75em 0 .66em;
                                                        }
                                                }
                                                .slick-arrow {
                                                        width:3rem;
                                                        height:3rem;
                                                        &::before {
                                                                color:var(--color_main);
                                                                font-size:3.0rem;
                                                        }
                                                        &.slick-prev {
                                                                left:0;
                                                        }
                                                        &.slick-next {
                                                                right:0;
                                                        }
                                                }
                                        }
                                        .wp-block-snow-monkey-blocks-spider-slider {
                                                .spider__dots {
                                                        margin-top:.5em;
                                                        button {
                                                                img {
                                                                        object-fit:cover;
                                                                        aspect-ratio:4/3;
                                                                }
                                                        }
                                                }
                                        }
                                }
                        }
                }
        }
}

@media ( hover:hover ){
        
         #products {
                .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){
        
        #products {
                .wrap {
                        .contents {
                                grid-template-columns: 200px 1fr;
                                grid-gap:30px;
                                .contents_inner {
                                        order:1;
                                        h1 {
                                                font-size: 2.6rem;
                                                margin-bottom:1.5em;
                                        } 
                                        .product_list {
                                                grid-template-columns:repeat(2,1fr);
                                                grid-gap:15px;
                                                a {
                                                        .detail {
                                                                border:2px solid var(--color_main);
                                                                padding:15px;
                                                                h2 {
                                                                        font-size:1.6rem;
                                                                }
                                                        }
                                                }
                                        }
                                }
                                .sidebar {
                                        .sidemenu {
                                                ul {
                                                        border-left:2px solid #EEF0F3;
                                                        border-right:2px solid #EEF0F3;
                                                        border-bottom:2px solid #EEF0F3;
                                                        li {
                                                                &:not(:last-child) {
                                                                        border-bottom:2px solid #EEF0F3;
                                                                }
                                                                a {
                                                                        display:grid;
                                                                        text-align:center;
                                                                        align-items:center;
                                                                        line-height:1.3;
                                                                        min-height:2.8em;
                                                                        padding:.5em;
                                                                }
                                                                ul {
                                                                        border:none;
                                                                        margin-bottom:0;
                                                                        li {
                                                                                a {
                                                                                background-color:#F8F8F8; 
                                                                                }
                                                                                &:first-child {
                                                                                        border-top:2px solid #EEF0F3;
                                                                                }
                                                                                &:last-child {
                                                                                        border-bottom:none;
                                                                                }
                                                                        }
                                                                }
                                                        }
                                                }
                                        }
                                }
                        }
                }
                &.single {
                        .wrap {
                                .contents {
                                        .contents_inner {
                                                .product-tablist {
                                                        grid-gap:10px;
                                                        margin-bottom:60px;
                                                        li {
                                                                min-height:60px;
                                                        }
                                                }
                                                .product-table {
                                                        overflow-x:auto;
                                                        table {
                                                                min-width:640px;
                                                        }
                                                }
                                        }
                                }
                        }
                }
        }
        
}

@media screen and (max-width:768px){
        
        #products {
                .wrap {
                        .contents {
                                grid-template-columns: 1fr;
                                grid-gap:50px;
                                .contents_inner {
                                        order:0;
                                        h1 {
                                                font-size: 2.0rem;
                                        } 
                                        .product_list {
                                                grid-gap:10px;
                                                margin-bottom:45px;
                                                a {
                                                        .detail {
                                                                padding:10px;
                                                                h2 {
                                                                        font-size:1.4rem;
                                                                }
                                                        }
                                                }
                                        }
                                        .pagenavi {
                                                .page-numbers {
                                                        gap:.5em .66em;
                                                        font-size:1.2rem;
                                                }
                                        }
                                }
                                .sidebar {
                                        .sidemenu {
                                                ul {
                                                        font-size:1.5rem;
                                                        li {
                                                                ul {
                                                                        font-size:1.4rem;
                                                                }
                                                        }
                                                }
                                        }
                                }
                        }
                }
                &.single {
                        .wrap {
                                .contents {
                                        .contents_inner {
                                                h2 {
                                                        font-size:1.8rem;
                                                        margin-bottom:1em;
                                                }
                                                .product-block1 {
                                                        margin-bottom:60px;
                                                }
                                                .product-tablist {
                                                        grid-template-columns:repeat(2,1fr);
                                                        margin-bottom:45px;
                                                        li {
                                                                min-height:50px;
                                                                font-size:1.5rem;
                                                        }
                                                }
                                                .product-table {
                                                        margin-bottom:45px;
                                                        th,td {
                                                                display:table-cell;
                                                                width:auto;
                                                        }
                                                }
                                                .product-slider {
                                                        padding:0 30px;
                                                        .slick-slide {
                                                                h3 {
                                                                        font-size:1.5rem;
                                                                }
                                                        }
                                                }
                                        }
                                }
                        }
                }
        }
        
}