/*======================================
共通
======================================*/

@media screen and (max-width:1119px) {
    body {
        overflow-x: clip;
    }
    .is-pc {
        display: none;
    }
    .is-sp {
        display: block;
    }
    #conts {
        width: 100%;
        overflow: inherit;
        overflow-x: clip;
    }
    #contents {
        overflow-x: clip;
    }
    .archive #conts,
    .paged #conts {
        padding-top: 0;
    }
    .hige-column-wrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        row-gap: 16vw;
        padding-inline: 15px;
    }
    .hige-column-wrap .side {
        width: 100%;
        padding: 0 0;
    }
    .hige-column-main-box {
        margin-bottom: 16vw;
    }
    .hige-column-main-box h2 {
        margin-bottom: 4vw;
    }
}

@media screen and (max-width:1119px) {
    .hige-column-list > ul {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 4vw;
    }
    .hige-column-list > ul > li {
        display: block;
        padding: 4vw;
        background: #FFF;
        box-shadow: 0 0 1.333vw rgba(0,0,0,0.16);
        border-radius: 2.667vw;
        overflow: hidden;
    }

    .hige-column-list ul li a {
        display: block;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .hige-column-list ul li a:hover {
        opacity: 0.5;
    }

    .hige-column-list-image {
        width: 100%;
    }

    .hige-column-list-image img {
        object-fit: cover;
    }

    .hige-column-list-title {
        margin-top: 4vw;
        font-size: 4.267vw;
    }

    .hige-column-list-text {
        display: contents;
    }

    .hige-column-list-meta ul {
        display: flex;
        flex-wrap: wrap;
        gap: 1.333vw;
        margin-top: 4vw;
    }

    .hige-column-list-meta ul li a {
        padding: 0.267vw 2.933vw;
        font-size: 3.467vw;
        font-weight: 500;
    }

    .hige-column-list-meta .date {
        margin-top: 2vw;
        font-size: 3.333vw;
        color: #818181;
        line-height: 1.44;
    }
}


/*======================================
ホーム front--page.php
======================================*/

@media screen and (max-width:1119px) {
    .front-pickup-slider {
        position: relative;
        width: 100%;
        height: 79.733vw;
        margin-bottom: 8vw;
        padding-bottom: 9.6vw;
        background: none;
        /* background: linear-gradient(270deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 49%, rgba(187, 161, 113, 1) 50%, rgba(187, 161, 113, 1) 100%); */
    }

    .front-pickup-slider:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: calc(15px + 3vw);
        height: 100%;
        background: #BBA170;
    }

    .front-pickup-slider .swiper {
        width: 100%;
        margin: 0 auto;
    }
    .front-pickup-slider .swiper-wrapper {
        height: calc(79.733vw + 13.333vw);
    }
    .front-pickup-slider .swiper-slide {
        z-index: 101;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: auto;
    }
    .front-pickup-slider .swiper-slide img {
        object-fit: cover;
        width: 100%;
        height: 56.8vw;
    }
    .front-pickup-slider .swiper-slide-inner {
        position: relative;
        width: 100%;
        max-width: 1120px;
        display: flex;
        justify-content: flex-end;
    }

    .front-pickup-slider .pickup-title {
        /* content: "PICK UP"; */
        font-family: "din-2014",sans-serif;
        position: absolute;
        top: 4.933vw;
        left: calc(15px + 6vw);
        transform: translate(0,0) rotate(90deg);
        transform-origin: 0 0;
        padding-left: 0;
        line-height: 1.28;
        font-size: 6vw;
        font-weight: bold;
        letter-spacing: 0.05em;
        z-index: 5;
    }

    .front-pickup-slider .swiper-slide .slider-panel-image {
        display: flex;
        justify-content: flex-end;
        overflow: clip;
        width: 85.467vw;
        height: 56.8vw;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .front-pickup-slider .swiper-slide a:hover {
        opacity: 0.5;
    }

    .slider-panel-text {
        position: absolute;
        left: 15px;
        right: inherit;
        bottom: -13.333vw;
        width: calc(100% - 30px);
        height: 26.667vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 3.333vw 5.333vw 3.333vw;
        background: #000;
        transform: translateX(13.333vw);
    }

    a.slider-panel-title {
        font-size: 3.733vw;
    }

    .slider-panel-meta {
        display: flex;
        align-items: flex-end;
        column-gap: 4.267vw;
        margin-top: 2.533vw;
    }

    .slider-panel-meta .date {
        font-size: 3.2vw;
        color: #ADADAD;
    }

    .slider-panel-meta li a {
        padding: 0.4vw 1.333vw;
        font-size: 2.667vw;
    }

    .swiper-pagination.swiper-pagination-bullets {
        width: 100%;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        text-align: center;
        justify-content: center;
        column-gap: 2.667vw;
    }

    .swiper-pagination-bullet {
        width: 2vw;
        height: 2vw;
    }

    .bg {
        padding-top: 0;
    }
    .archive .bg,
    .paged .bg {
        padding-top: 0;
    }
    .bg .main {
        position: relative;
        padding-top: 6.667vw;
    }
    .bg .main:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: calc(100% + 30px);
        height: calc(100% - 17.333vw);
        transform: translateX(-15px);
        background: #F2F2F2;
        z-index: -1;
    }
    .archive .bg .main:before,
    .paged .bg .main:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: calc(100% + 30px);
        height: 100%;
        transform: translateX(-15px);
        background: #F2F2F2;
        z-index: -1;
    }
    .section-title {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 2.667vw;
    }
    .section-title .en {
        font-family: "din-2014",sans-serif;
        font-weight: bold;
        font-size: 6.533vw;
        letter-spacing: 0.05em;
    }
    .section-title .jp {
        font-size: 3.467vw;
    }
    .hige-column-main-box .banner {
        display: block;
        transform: translateX(-15px);
        width: calc(100% + 30px);
    }
    .hige-column-main-box .banner img {
        max-width: inherit;
        width: 100%;
    }
}


/*======================================
アーカイブ
======================================*/
@media screen and (max-width:1119px) {
    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8vw;
        font-size: 4vw;
        font-family: "din-2014",sans-serif;
    }
    .pagination-select {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pagination .pager {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 9.333vw;
        height: 9.333vw;
    }
    .pagination span {
        color: #333333;
    }
    .pagination .pagination-select-label {
        display: none;
        color: #333333;
    }
    .pagination span.current {
        color: #FFF;
        background: #000;
    }
    .pagination a {
        color: #333333;
        text-decoration: none;
    }
    .pagination a:hover {
        opacity: 0.5;
    }

    .pagination-prev a,
    .pagination-next a {
        display: block;
        width: 9.333vw;
        height: 9.333vw;
        background: url(../images/common/arrow_pagigation.svg) no-repeat center center;
        background-size: 3.333vw 3.6vw;
    }

    .pagination-prev a {
        transform: rotate(180deg);
    }
}

/*======================================
記事
======================================*/

@media screen and (max-width:1119px) {
    .main {
        order: 2;
    }

    .side {
        display: contents;
    }
    
    .side section {
        margin-top: -4vw;
    }

    .side section:first-of-type {
        /* margin-top: 0; */
        margin-top: 16vw;
    }

    .home .side section:first-of-type {
        margin-top: 8vw;
    }

    .hige-column-side-category {
        order: 0;
    }

    .hige-column-side-tags {
        order: 1;
    }

    .hige-column-side-inami {
        order: 3;
    }

    .side .title {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 2.667vw;
        margin-bottom: 3.333vw;
    }

    .side .title .en {
        font-size: 6.533vw;
    }

    .side .title .jp {
        font-size: 3.467vw;
    }

    .hige-column-side-category ul {
        display: flex;
        flex-wrap: wrap;
        gap: 2.667vw;
    }

    .hige-column-side-category ul li a {
        display: block;
        padding: 0.4vw 4vw;
        font-size: 4.8vw;
    }

    .hige-column-side-tags ul {
        display: flex;
        flex-wrap: wrap;
        gap: 2.667vw;
    }

    .hige-column-side-tags ul li a {
        display: block;
        width: fit-content;
        padding: 0.4vw 4vw;
        font-size: 4.8vw!important;
        border-radius: 1.333vw;
    }

    .side .title-sub {
        margin-top: 6.667vw;
        font-size: 4vw;
    }
    .hige-column-side-inami {
        position: relative;
    }
    .hige-column-side-inami:before {
        content: "";
        position: absolute;
        top: 45.333vw;
        left: 0;
        width: calc(100% + 30px);
        height: calc(100% - 45.333vw + 9.733vw);
        transform: translateX(-15px);
        background: #F2F2F2;
        z-index: -1;
    }
    .hige-column-side-inami picture {
        display: block;
        margin-top: 6.667vw;
        margin-inline: auto;
        text-align: center;
    }
    .hige-column-side-inami picture img {
        width: 57.333vw;
    }
    .hige-column-side-inami .history-wrap {
        padding: 0 11.333vw;
    }
    .hige-column-side-inami .name {
        margin-top: 4.933vw;
        margin-bottom: 6.667vw;
        font-size: 5.067vw;
    }
    .hige-column-side-inami .name a {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 4vw;
    }

    .hige-column-side-inami .name span {
        margin-bottom: 0;
        font-size: 4vw;
    }

    .hige-column-side-inami dl.history {
        display: grid;
        grid-template-columns: 13.067vw 1fr;
        column-gap: 6.133vw;
        margin-top: 2.667vw;
        line-height: 2;
    }

    .hige-column-side-inami .history dt {
        margin-top: 0;
        font-size: 3.2vw;
    }

    .hige-column-side-inami .history dd {
        margin-bottom: 0;
        font-size: 3.2vw;
    }
    .hige-column-side-inami ul.history {
        line-height: 2;
    }
    .hige-column-side-inami .history li {
        font-size: 3.2vw;
    }

    .hige-column-side-inami .message p {
        font-size: 3.2vw;
        margin-top: 8.933vw;
        line-height: 1.7;
    }
}

@media screen and (max-width:1119px) {
    #contents .pageTtl {
        width: 100%;
        background: #000;
        padding: 10px 15px;
    }

    #contents .pageTtl .inner {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 1120px;
        margin: 0 auto;
    }

    #contents .pageTtl span {
        color: #FFF;
        font-size: 4.133vw;
        font-weight: 500;
        line-height: 1.4
    }
    .single-main-contents .contents-header h1 {
        /* font-size: 6vw; */
        font-size: 5.067vw;
        line-height: 1.5;
    }
    .single-main-contents .contents-header .meta {
        margin-top: 3.467vw;
        padding-top: 3.467vw;
        font-size: 4.533vw;
    }
    .single-main-contents .mokuji-box .mokuji-ttl {
        font-size: 4.8vw;
        font-weight: bold;
    }
    .single-main-contents .mokuji-box .mokuji-box-inner {
        margin-top: 3.333vw;
        /* padding: 4.533vw 20px; */
        padding: 2.266vw 6.667vw 4.533vw 6.667vw;
        border-radius: 2.666vw;
    }
    .single-main-contents .mokuji-box ol li {
        padding: 2.267vw 0 2.267vw 8vw;
        font-size: 3.733vw;
    }
    .single-main-contents .mokuji-box ol li:before {
        font-size: 5.6vw;
    }
    .single-main-contents .mokuji-box ol li a {
        text-decoration: underline;
    }
    .single-main-contents .contents-fixed-area p {
        /* padding: 20px; */
        padding: 6.667vw;
        font-size: 3.467vw;
    }
    .single-main-contents .contents-flexible-contents .layout_title_h2 h2 {
        border-left: 1.333vw solid #BBA170;
        border-bottom: 2px solid #BBA170;
        font-size: 5.067vw;
        line-height: 1.5;
        margin-top: 10vw;
        padding-bottom: 2vw;
        padding-left: 9.067vw;
        text-indent: -5.067vw;
    }
    .single-main-contents .contents-flexible-contents .layout_single_img {
        margin-top: 6.4vw;
    }
    .single-main-contents .contents-flexible-contents .layout_text_p {
        margin-top: 6.4vw;
        font-size: 3.467vw;
        line-height: 2;
    }
    .single-main-contents .contents-flexible-contents .layout_title_h3 h3 {
        margin-top: 6.4vw;
        padding-bottom: 1.333vw;
        font-size: 4.267vw;
        line-height: 1.5;
    }
    .single-main-contents .contents-flexible-contents .layout_title_h4 h4 {
        margin-top: 4vw;
        font-size: 3.733vw;
        line-height: 1.5;
    }
    .single-main-contents .contents-flexible-contents .layout_title_h4+.layout_text_p {
        margin-top: 1.333vw;
    }
    .single .hige_column_wrap .main {
        margin-bottom: 6.4vw;
    }

    .single-main-contents .contents-flexible-contents .layout_list_tag {
        margin-top: 3.333vw;
    }

    .single-main-contents .contents-flexible-contents .layout_list_tag li {
        display: inline-block;
        margin-right: 1.333vw;
        margin-bottom: 1.333vw;
    }

    .single-main-contents .contents-flexible-contents .layout_list_tag li a {
        display: inline-block;
        padding: 4px 6px;
        color: #FFF;
        background: #707070;
        border-radius: 4px;
        text-decoration: none;
        font-size: 3.333vw;
    }
    .single-main-contents .contents-flexible-contents .layout_banner {
        margin: 12.8vw auto;
        text-align: center;
    }
    .single-main-contents .contents-flexible-contents .layout_banner a {
        transition: unset;
    }
    .single-main-contents .contents-flexible-contents .layout_banner a:hover {
        opacity: 1;
    }
}