@charset "UTF-8";

/* フォントインポート */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

/* スクロール位置調整
-------------------------------- */
html {
  font-size: 100%;
}
@media screen and (max-width: 1000px) {
    html {
        font-size: 78%;
    }
}

/* reset
-------------------------------- */
.l-container {
    max-width: 100%;
    padding: 0;
}

/* settings
---------------------------------------------------*/
:root {
    --font-family1: "Noto Sans JP", sans-serif;
    --font-family2: "EB Garamond", serif;;
    /* 最大幅 */
    --max-width1: 1200px;
    --max-width2: 980px;
    --max-width3: 820px;
    /* 背景色 */
    --bg-color1: #f4eed8;
    --bg-color2: #f2f9ec;
    --bg-color3: #022e4a00;
    --bg-color4: #e5e5e5;
    --header-bk-color: rgba(0,0,0,.8);
    --footer-bk-color: #4c4c4c;
    /* アクセントカラー */
    --accent-color1: #9f9f9f;
    --accent-black: #555;
    /* 文字色 */
    --font-color-bass: #4d4d4d;
}

/* 共通設定
---------------------------------------------------*/
/* 表示・非表示 */
.pc {
    display: block;
}
.pc-in {
    display: inline-block;
}
.sp, .sp-in {
    display: none;
}
@media screen and (max-width: 1000px) {
    .sp {
        display: block;
    }
    .sp-in {
        display: inline-block;
    }
    .pc, .pc-in {
        display: none;
    }
}

/* flex */
.flex {
    display: flex;
    flex-wrap: wrap;
    &.-jc {
        justify-content: center;
    }
    &.-jsa {
        justify-content: space-around;
    }
    &.-jsb {
        justify-content: space-between;
    }
    &.-ac {
        align-items: center;
    }
    &.-afe {
        align-items: flex-end;
    }
}
.fl-sh { flex-shrink: 0; }
.fl-gr { flex-grow: 1; }

/*フォント設定*/
h1, h2, h3, h4, h5, h6, p, a, li {
    font-family: var(--font-family1);
    line-height: 1.8em;
}
p:last-child {
    margin-bottom: 0;
}

/* 背景色 */
.-bg-wh { background: white; }
.-bg-bk { background: var(--header-bk-color); }
.-bg-cr { background: var(--bg-color1); }
.-bg-bg { background: var(--bg-color2); }
.-bg-gr { background: var(--bg-color4); }
.-bg-img1 {
    background: url(../img/top-concept-img01.webp) repeat-y top center / cover;
}
.-bg-img2 {
    background: url(../img/top-story-img01.webp) repeat-y top center / cover;
}
.-bg-img3 {
    background: url(../img/top-news-img01.webp) repeat-y top center / cover;
}

/* 背景装飾 */
.-deco1 {
    position: relative;
    z-index: 2;
    &::before, &::after {
        position: absolute;
        content: "";
        aspect-ratio: 13 / 4;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        z-index: -1;
    }
    &::before {
        width: 85%;
        top: 12rem;
        left: 8%;
        background-image: url(../img/bg_graphic_01.webp);
    }
    &::after {
        width: 70%;
        bottom: 0;
        right: 6%;
        background-image: url(../img/bg_graphic_02.webp);
    }
}
@media screen and (max-width: 1000px) {
    .-deco1 {
        &::before, &::after {
            width: 100%;
            transform: scale(1.1);
        }
        &::before {
            top: 6.5rem;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        &::after {
            bottom: 19%;
        }
    }
}

/* 画像 */
img {
    vertical-align: top;
}

/* その他 */
.font-en { font-family: var(--font-family2); font-weight: 600; }

.tx-c { text-align: center; }
.tx-r { text-align: right; }

.skew-x-5 { transform: skewX(-5deg); }
.skew-x-10 { transform: skewX(-10deg); }

/* icon-menu
-------------------------------- */
:root {
    --menu-icon-w: 1.5rem;
}
.icon-menu {
    display: flex;
    flex-wrap: wrap;
    & a {
        display: block;
        width: var(--menu-icon-w);
        height: var(--menu-icon-w);
        background: white;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        &.-account {
            mask-image: url(../img/icon-user.svg);
            -webkit-mask-image: url(../img/icon-user.svg);
        }
        &.-cart {
            mask-image: url(../img/icon-cart.svg);
            -webkit-mask-image: url(../img/icon-cart.svg);
        }
        &.-insta {
            mask-image: url(../img/icon-insta.svg);
            -webkit-mask-image: url(../img/icon-insta.svg);
        }
    }
    & a:not(:last-child) {
        margin-right: calc(var(--menu-icon-w) * 1.1);
    }
}
body:not(.home) .icon-menu {
    & a {
        background: var(--accent-black);
    }
}

@media screen and (max-width: 1000px) {
    .icon-menu {
        margin: 0 1.5rem 0 auto;
        & a:not(:last-child) {
            margin-right: calc(var(--menu-icon-w) * .8);
        }
    }
}

.l-wrapper {
    position: relative;
}


/* header
-------------------------------- */

/* ハンバーガーメニューOPEN時はスクロール禁止 */
body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

:root {
    --header-h: 90px;
    --header-logo-w: 280px;
    --hb-menu-w: 1.3rem;
}
header.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
.header-body {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: var(--header-h);
    max-width: var(--max-width1);
    margin: 0 auto;
    padding: 0 1rem;
}
@media screen and (max-width: 1000px) {
    :root {
        --header-h: 60px;
        --header-logo-w: 180px;
        --hb-menu-w: 1.2rem;
    }
    body.home header.site-header {
        background: var(--header-bk-color);
    }
    .header-body {
        padding: 0 2rem;
    }
}

.header-logo {
    display: flex;
    max-width: var(--header-logo-w);
}

/* ハンバーガーメニュー */
.hb-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--fv-wrap-h);
    background: url(../img/header-menu-bk01.webp) no-repeat center /cover;
    z-index: 2;
    max-width: 0;
    overflow: hidden;
    transition: .5s;
    margin: 0 calc(50% - 50vw);
    & .hb-menu-inner {
        position: relative;
        height: 100%;
        &::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0,0,0,.7);
        }
        & .hb-menu-box {
            display: none;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            width: fit-content;
            height: 100%;
            background: rgba(255,255,255,0);
            margin: 0 auto;
            & a {
                display: block;
                margin: 0 auto;
                font-size: 1.4rem;
                font-family: var(--font-family2);
                font-weight: 600;
                color: white;
                text-decoration: none;
                margin-bottom: 1em;
                transform: skewX(-10deg);
            }
        }
    }
}
.hb-area {
    position: relative;
    z-index: 999;
    padding-right: 5rem;
    & .hb-icon {
        position: relative;
        width: var(--hb-menu-w);
        height: calc(var(--hb-menu-w) * 1.2);
        cursor: pointer;
        & span {
            position: absolute;
            display: block;
            left: 0;
            right: 0;
            margin: auto;
            width: 100%;
            height: 2px;
            background: white;
            transition: .5s;
            &:nth-child(1) {
                top: 0;
            }
            &:nth-child(2) {
                top: 31%;
            }
            &:nth-child(3) {
                bottom: 32%;
            }
            &:nth-child(4) {
                bottom: 0;
            }
        }
    }
}
.active {
    & .hb-area {
        & .hb-icon {
            position: relative;
            & span {
                &:nth-child(1) {
                    bottom: 0;
                    transform: rotate(45deg);
                }
                &:nth-child(2) {
                    opacity: 0;
                }
                &:nth-child(3) {
                    opacity: 0;
                }
                &:nth-child(4) {
                    top: 0;
                    transform: rotate(-45deg);
                }
            }
        }
    }
    & .hb-menu {
        max-width: 100vw;
        & .hb-menu-box {
            display: flex;
        }
    }
}
body:not(.home) .header-body {
    & .hb-icon {
        & span {
            background: var(--accent-black);
        }
    }
}
body:not(.home) .header-body.active {
    & .hb-icon {
        & span {
            background: white;
        }
    }
}

@media screen and (max-width: 1000px) {
    .hb-area {
        order: 2;
        padding-right: 0;
    }
    .hb-menu {
        left: auto;
        right: 0;
        background: url(../img/header-menu-bk01-sp.webp) no-repeat 78% 48% /cover;
        & .hb-menu-inner {
            & .hb-menu-box {
                width: 65%;
                margin-left: auto;
                & a {
                    font-size: 5vw;
                    margin-bottom: .8em;
                }
            }
        }
    }    
}


/* ボタン
-------------------------------- */
.btn {
    width: fit-content;
    margin: 5rem auto 3rem;
    & .-viewmore {
        position: relative;
        display: block;
        width: fit-content;
        height: fit-content;
        text-decoration: none;
        & span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: fit-content;
            aspect-ratio: 15 / 13;
            background: var(--accent-color1);
            mask: url(../img/hexagon-shape.svg) no-repeat center / contain;
            -webkit-mask: url(../img/hexagon-shape.svg) no-repeat center / contain;
            color: white;
            padding: 1em;
            z-index: 2;
        }
        &::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            bottom: -10%;
            right: -15%;
            background: var(--accent-color1);
            mask: url(../img/hexagon-shape.svg) no-repeat center / contain;
            -webkit-mask: url(../img/hexagon-shape.svg) no-repeat center / contain;
            opacity: .5;
        }
    }
}
@media screen and (max-width: 1000px) {
    .btn {
        margin: 3rem auto 2rem;
    }
}


/* ページコンテンツデザイン（共通）
-------------------------------- */
body:not(.home) .l-content {
    padding-top: var(--header-h);
}

.l-main {
    width: 90%;
    max-width: var(--max-width2);
    margin: 0 auto;
}

.contents-wrap {
    width: 100%;
    &.-main {
        padding: 6rem 0;
    }
    & .-inner {
        max-width: var(--max-width1);
        margin: 0 auto;
        & > *:last-child {
            margin-bottom: 0;
        }
    }
}
@media screen and (max-width: 1000px) {
    .contents-wrap {
        &.-main {
            padding: 5rem 0;
        }
    }
}

/* 見出し */
.h2-head,
.product-page .contents-wrap h2 {
    font-size: 2.2rem;
    font-family: var(--font-family2);
    text-align: center;
    font-weight: 600;
    margin: 0 auto 3rem;
    letter-spacing: .2em;
}
.h3-head,
.product-page .contents-wrap h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 auto 2rem;
    letter-spacing: .1em;
}
.head-comment {
    & img {
        margin-bottom: 3rem;
    }
}
@media screen and (max-width: 1000px) {
    .h2-head {
        font-size: 1.6rem;
        margin: 0 auto 2.5rem;
    }
    .h3-head {
        font-size: 1.2rem;
        text-align: center;
        margin: 0 auto 1.5rem;
    }
    .head-comment {
        & img {
            margin-bottom: 2.5rem;
        }
    }
}

/* コンテンツ内デザイン */
.contents-area {
    width: 90%;
    max-width: var(--max-width2);
    margin: 0 auto 6rem;
    & .contents-inner {
        max-width: var(--max-width3);
        margin: 0 auto;
    }
    & p {
        font-size: .95rem;
        line-height: 2.5;
        margin-bottom: 1.5rem;
    }
}
.contents-img {
    margin: 4rem auto;
    &.-full {
        width: 100%;
    }
    &.-mid {
        width: 74%;
    }
    & p.-caption {
        text-align: center;
        font-size: .9rem;
        margin: 1em 0 0;
    }
}
@media screen and (max-width: 1000px) {
    .contents-area {
        margin-bottom: 3rem;
        & p {
            line-height: 2;
            font-size: 3.5vw;
            text-align: center;
        }
    }
    .contents-img {
        margin: 2.5rem auto;
        &.-mid {
            width: 100%;
        }
    }
}


/* 商品一覧の表示デザイン
-------------------------------- */
:root {
    --product-icon-w: 3rem;
}
.product-loop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 0;
    margin: 0 auto;
    & .product-box {
        width: 47%;
        margin-bottom: 2rem;
        & .product-name {
            & h3 {
                text-align: center;
                font-family: var(--font-family2);
                font-weight: 600;
                font-size: 1.5rem;
                margin-bottom: 0;
            }
        }
        & .product-price {
            text-align: center;
            font-family: var(--font-family2);
            font-weight: 600;
            font-size: 1.3rem;
            margin: 0 auto 1rem;
        }
        & .product-add-to-cart {
            text-align: center;
            margin: 0 auto 1.5rem;
            & button {
                line-height: 1;
                background: #6c6c6c;
                font-size: .9rem;
                border: none;
                color: white;
                padding: .35em;
            }
        }
        & .product-icons {
            display: flex;
            flex-wrap: wrap;
            width: fit-content;
            height: fit-content;
            margin: 0 auto 1.2rem;
            & .product-icon {
                width: var(--product-icon-w);
                height: var(--product-icon-w);
                border: 3px solid;
                border-radius: 9999px;
                &.-artist {
                    border-color: #d95c3d;
                }
                &.-producer {
                    border-color: #2a8090;
                }
                &:not(:last-child) {
                    margin-right: 1rem;
                }
                & img {
                    border-radius: 9999px;
                    padding: 5%;
                }
            }
        }
        & .product-story {
            text-align: center;
            & a {
                position: relative;
                display: inline-block;
                text-decoration: none;
                line-height: 1;
                padding: .5em .7em .5em .8em;
                color: var(--font-color-bass);
                &::after {
                    position: absolute;
                    content: "";
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: .5em;
                    border-bottom: 1px solid #8b8a8a;
                    border-right: 2px solid #8b8a8a;
                    transform: skewX(45deg);
                }
            }
        }
    }
}
@media screen and (max-width: 1000px) {
    .product-loop {
        justify-content: center;
        & .product-box {
            width: 76%;
        }
    }
}

/* トップページ
-------------------------------- */
:root {
    --fv-wrap-h: 100vh;
}
.top-page {

    /* FV - ファーストビュー - */
    & .contents-wrap.-fv {
        & .fv-img-wrap {
            position: relative;
            width: 100%;
            height: var(--fv-wrap-h);
            background: url(../img/mv-img02.webp) no-repeat center 70% / cover;
        }
    }

    /* Touch / CONCEPT */
    & .-concept .-inner {
        max-width: 100%;
    }
    & .contents-wrap.-concept {
        & .-tx {
            padding: 0 5%;
            & h2, p {
                color: white;
            } 
        }
        & .-img, .-movie {
            position: relative;
            & p.concept-caption {
                position: absolute;
                color: white;
                font-size: 4.9rem;
                font-family: var(--font-family2);
                font-weight: 400;
                letter-spacing: .05em;
                opacity: .3;
            }
        }
        & .-sec1 {
            position: relative;
            & .-tx {
                padding-left: calc(3vw * 5);
                & h2 {
                    position: relative;
                    width: fit-content;
                    font-family: var(--font-family2);
                    font-size: min(4.5rem, 6vw);
                    font-weight: 600;
                    padding-top: 2.3em;
                    margin: -1.5rem auto 5rem 0;
                    line-height: 1;
                    letter-spacing: .08em;
                    z-index: 2;
                    &::before {
                        position: absolute;
                        content: "";
                        top: 0;
                        left: 15%;
                        width: auto;
                        height: 2.5em;
                        aspect-ratio: 151 / 228;
                        background: url(../img/concept-number.png) no-repeat center / cover;
                        opacity: .6;
                        z-index: -1;
                    }
                }
                & p {
                    position: relative;
                    width: fit-content;
                    text-align: right;
                    font-size: min(1.33rem,1.4vw);
                    letter-spacing: .4em;
                    margin: 0 auto 0 8em;
                    z-index: 2;
                }
            }
            & .-img {
                width: fit-content;
                padding-right: calc(1vw * 7);
                & img {
                    width: auto;
                    height: 70vh;
                    aspect-ratio: 35 / 59;
                    object-fit: cover;
                }
                & p.concept-caption {
                    bottom: -.92em;
                    right: .2em;
                }
            }
        }
        & .-sec2 {
            position: relative;
            & .-tx {
                padding-top: 5rem;
                padding-left: 12%;
                & p {
                    position: relative;
                    font-size: 1.1rem;
                    line-height: 3.2;
                    z-index: 2;
                }
            }
            & .-img {
                width: fit-content;
                height: fit-content;
                & img {
                    width: auto;
                    height: 47vh;
                }
                margin-top: -6rem;
                & p.concept-caption {
                    bottom: -.92em;
                    right: -1em;
                }
            }
        }
        & .-sec3 {
            position: relative;
            margin-top: 5rem;
            & .-movie {
                width: fit-content;
                padding-top: 3rem;
                margin-left: 10%;
                & video {
                    display: block;
                    width: auto;
                    height: 75vh;
                }
                & p.concept-caption {
                    bottom: -.15em;
                    right: -4.55em;
                }
            }
            & .-img {
                width: fit-content;
                height: fit-content;
                & img {
                    width: auto;
                    height: 47vh;
                }
                & p.concept-caption {
                    bottom: -.94em;
                    right: 2em;
                }
            }
        }
    }

    /* TABLET / PRODUCT */

    /* BEAN / STORY */
    & .contents-wrap.-bean {
        & .story-message {
            width: 90%;
            max-width: var(--max-width2);
            margin: 0 auto;
            & p {
                width: fit-content;
                margin: 0 auto;
                &.-main {
                    font-size: min(4.3rem, 5.7vw);
                    font-family: var(--font-family2);
                    font-weight: 600;
                    letter-spacing: .1em;
                    line-height: 1.3;
                }
                &.-sub {
                    font-size: min(1.3rem, 1.7vw);
                    font-weight: 500;
                    letter-spacing: .1em;
                    margin-top: 1em;
                }
            }
        }
        & .-story-bk {
            position: relative;
            z-index: 2;
            &::before {
                position: absolute;
                content: "";
                top: 23%;
                left: 0;
                width: 100vw;
                aspect-ratio: 240 / 149;
                margin: calc(50% - 50vw);
                background: url(../img/top-story-img02.webp) no-repeat center / cover;
                z-index: -1;
                opacity: .8;
                -webkit-filter: grayscale(1);
                filter: gray;
                filter: grayscale(1);
            }
        }
    }

    /* FACTORY */
    & .contents-wrap.-factory {
        &.-deco1::before {
            top: 5rem;
        }
        & .factory-gallery {
            margin: 5rem 0;
            & .gallery-wrap {
                flex-wrap: nowrap;
                & .view-area {
                    position: relative;
                    margin-bottom: .6%;
                    & img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                & .gallery-area {
                    width: 40%;
                    height: fit-content;
                    & img {
                        width: calc(100% / 3);
                        aspect-ratio: 1 / 1;
                        object-fit: cover;
                        padding: 0 0 2% 2%;
                        cursor: pointer;
                        filter: grayscale(1);
                        transition: filter 0.5s ease;
                        &:hover {
                            filter: grayscale(0);
                        }
                        &.active {
                            filter: grayscale(0);
                        }
                    }
                }
            }
        }
    }

    /* NEWS */
    & .contents-wrap.-news {
        & .news-list {
            margin: 5rem 0 0;
            & a {
                position: relative;
                display: inline-block;
                margin-bottom: 2rem;
                font-size: 1rem;
                padding-right: 6em;
                text-decoration: none;
                color: var(--font-color-bass);
                & .-date {
                    display: block;
                    font-size: 1.1em;
                    font-family: var(--font-family2);
                    margin-bottom: .5em;
                }
                &::after {
                    position: absolute;
                    content: "";
                    width: 3.5em;
                    height: .6em;
                    bottom: .5em;
                    right: 0;
                    border-bottom: 1px solid #8b8a8a;
                    border-right: 2px solid #8b8a8a;
                    transform: skewX(45deg);
                }
            }
        }
    }
}
@media screen and (max-width: 1280px) {
    .top-page {
        & .contents-wrap.-concept {
            & .-sec1 {
                & .-tx {
                    padding-left: 12vw;
                }
                & .-img {
                    padding-right: 0;
                }
            }
        }
    }
}
@media screen and (max-width: 1000px) {
    :root {
        --fv-wrap-h: 100vh;
    }
    .top-page {

        /* FV - ファーストビュー - */
        & .contents-wrap.-fv {
            & .fv-img-wrap {
                background-size: auto 190%;
                background-position: 30% 80%;
            }
        }

        /* Touch / CONCEPT */
        & .contents-wrap.-concept {
            & .-img, .-movie {
                & p.concept-caption {
                    font-size: 3.8rem;
                }
            }
            & .-sec1 {
                & .-tx {
                    padding-right: 5%;
                    margin-right: 0;
                    & h2 {
                        font-size: 11vw;
                        margin-right: 7%;
                        margin-bottom: 2.8em;
                        padding-top: 1em;
                        padding-bottom: 2.1em;
                        &::before {
                            top: auto;
                            bottom: 0;
                            left: 2%;
                            height: 2em;
                        }
                    }
                    & p {
                        font-size: 3.9vw;
                        margin-left: 1em;
                    }
                }
                & .-img {
                    position: absolute;
                    top: 0;
                    right: 0;
                    & img {
                        display: block;
                        width: 57%;
                        height: auto;
                        margin-left: auto;
                    }
                    & p.concept-caption {
                        writing-mode: vertical-rl;
                        right: -.5em;
                        bottom: -3.4em;
                    }
                }
            }
            & .-sec2 {
                & .-tx {
                    padding-top: 15rem;
                    padding-left: 15%;
                    & p {
                        line-height: 3;
                    }
                }
                & .-img {
                    position: absolute;
                    margin-top: 7rem;
                    & img {
                        width: 65%;
                        height: auto;
                    }
                    & p.concept-caption {
                        writing-mode: vertical-rl;
                        right: auto;
                        bottom: -.8em;
                        left: -.5em;

                    }
                }
            }
            & .-sec3 {
                margin-top: 3rem;
                & .-movie {
                    order: 2;
                    padding-top: 7rem;
                    margin-left: 0;
                    margin-bottom: 1rem;
                    & video {
                        width: 60%;
                        height: auto;
                    }
                    & p.concept-caption {
                        writing-mode: vertical-rl;
                        right: auto;
                        bottom: -.8em;
                        left: 52%;
                    }
                }
                & .-img {
                    & img {
                        display: block;
                        width: 75%;
                        height: auto;
                        margin-left: auto;
                    }
                    & p.concept-caption {
                        writing-mode: vertical-rl;
                        bottom: -1em;
                        right: auto;
                        left: 11.8%;
                    }
                }
            }
        }

        /* BEAN / STORY */
        & .contents-wrap.-bean {
            & .story-message {
                & p {
                    text-align: center;
                    &.-main {
                        font-size: 8vw;
                    }
                    &.-sub {
                        font-size: 3vw;
                    }
                }
            }
        }

        /* FACTORY */
        & .contents-wrap.-factory {
            & .factory-gallery {
                margin: 3rem 0 2rem;
                & .gallery-wrap {
                    flex-wrap: wrap;
                    & .view-area {
                        width: 100%;
                        height: 26vh;
                        flex-grow: initial;
                        margin-bottom: .6rem;
                    }
                    & .gallery-area {
                        width: 100%;
                        justify-content: space-between;
                        & img {
                            width: 32%;
                            padding: 0;
                            margin-bottom: 2%;
                        }
                    }
                }
            }
        }

        /* NEWS */
        & .contents-wrap.-news {
            & .news-list {
                margin: 3rem 7% 0;
                & a {
                    font-size: 1rem;
                    &::after {
                        top: 0;
                        bottom: 0;
                        margin: auto 0;
                    }
                    & .-date {
                        font-size: 1.3em;
                    }
                }
            }
        }
    }
}


/* woocommerce 関連スタイル
-------------------------------- */
.single-product .p-breadcrumb {
    display: none;
}

/* デフォルト上書き */
button.single_add_to_cart_button {
    line-height: 1 !important;
    background: #6c6c6c !important;
    font-size: 1.2rem !important;
    border: none !important;
    color: white !important;
    padding: .35em 1em !important;
    border-radius: 0 !important;
    font-weight: normal !important;
}
.woocommerce .quantity .qty {
    width: 3em;
    height: 2.5em;
    font-size: 1.2rem;
}
@media screen and (max-width: 1000px) {
    button.single_add_to_cart_button {
        font-size: 1.6rem !important;
    }
    .woocommerce .quantity .qty {
        width: 3em;
        height: 3em;
        font-size: 1.6rem;
    }
}

/* 商品詳細ページ */
.product-page {
    & .contents-wrap.-pd-contents {
        padding: 2rem 0 8rem;
    }
    & .-pd-img {
        width: 45%;
        height: fit-content;
        margin: 0 2%;
        & img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
        }
    }
    & .-pd-summary {
        width: 39%;
        margin: 0 6%;
        & h1 {
            font-family: var(--font-family2);
            font-size: 1.8rem;
            margin-bottom: .2em;
        }
        & p.-pd-price {
            font-family: var(--font-family2);
            font-size: 1.6rem;
            font-weight: 900;
            margin-bottom: .2em;
        }
        & p.-pd-short-disc {
            margin-bottom: 1em;
            font-size: 1.2rem;
        }
    }
    & .-add-cart {
        margin-bottom: 1.5rem;
        & form {
            display: flex;
            & .quantity {
                margin-right: .5rem;
            }
        }
    }
    & .-pd-gallery {
        & .gallery-thumbnails {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            & .gallery-thumbnail {
                width: 31%;
                height: fit-content;
                margin: 0 1% 3%;
                & img {
                    width: 100%;
                    aspect-ratio: 1 / 1;
                    object-fit: cover;
                }
            }
        }
    }
    & .-pd-story {
        & p {
            text-align: center;
        }
    }
    & .-pd-label {
        position: relative;
        max-width: var(--max-width3);
        max-height: 20.5rem;
        margin: 4rem auto 2rem;
        padding: 4% 6% 8%;
        border: 1px solid var(--font-color-bass);
        transition: 1s;
        overflow: hidden;
        & > h4 {
            font-size: 1.1rem;
        }
        & > p {
            margin-bottom: .6em;
            text-align: left;
        }
        & > p:last-child {
            margin-bottom: 0;
        }
        & .user-guide {
            background: white;
            margin: 1.5rem 0;
            padding: 1rem 1.5rem;
            & h4 {
                font-size: 1rem;
                padding-bottom: .4em;
                margin-bottom: .7em;
                border-bottom: 1px solid gray;
            }
            & p {
                font-size: .9rem;
                line-height: 1.6;
                margin-bottom: 0;
            }
        }
        & .view_more {
            position: absolute;
            content: "";
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 1.2em 1em .8em;
            background: #e5e5e5d4;
            cursor: pointer;
            & span {
                display: block;
                position: relative;
                width: 7em;
                height: 1em;
                margin: 0 auto;
                font-size: .9rem;
                padding-left: 1.6em;
                line-height: 1;
                &::before {
                    display: block;
                    position: absolute;
                    content: "＋ 続きを見る";
                    height: fit-content;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto 0;
                    line-height: 1;
                    font-weight: 500;
                    transition: .5s;
                }
            }
        }
        &.active {
            max-height: 2000px;
            & .view_more {
                & span {
                    &::before {
                        content: "－ 閉じる";
                    }
                }
            }
        }
    }
    & .-pd-other {
        & .product-loop {
            max-width: var(--max-width2);
        }
    }
}
@media screen and (max-width: 1000px) {
    .product-page {
        & .contents-wrap.-pd-contents {
            padding: 0 0 4rem;
        }
        & .-pd-img {
            width: 100%;
            margin: 0 6% 1rem;
            & .-pd-main-image {
                margin-bottom: 4%;
            }
        }
        & .-pd-summary {
            width: 100%;
            & p.-pd-short-disc {
                margin-bottom: 1.2em;
            }
            & p.-pd-price {
                font-size: 1.8rem;
            }
        }
        & .-add-cart {
            & form {
                & .quantity {
                    margin-right: 1rem;
                }
            }
        }
        & .-pd-story {
            & p {
                text-align: left !important;
            }
        }
    }
}


/* form ※プラグイン上書き
-------------------------------- */
.forminator-ui {
    width: 90% !important;
    max-width: var(--max-width3);
    margin: 1rem auto !important;
    & .forminator-label {
        font-family: var(--font-family1);
        font-weight: 600;
    }
    & span.forminator-required {
        color: red;
    }
    & .forminator-checkbox__wrapper {
        align-items: center !important;
    }
    & .forminator-button {
        background: var(--accent-black);
        & span {
            color: white;
        }
    }
}

/* footer
-------------------------------- */
.site-footer {
    background: var(--footer-bk-color);
    & .footer-body {
        max-width: var(--max-width2);
        margin: 0 auto;
        padding: 3rem 5%;
        & .footer-contents {
            & .footer-logo {
                width: 13rem;
                & a {
                    display: block;
                    width: 34%;
                    margin: 0 auto;
                }
                & .footer-copy {
                    width: 100%;
                    color: white;
                    font-size: .65rem;
                    font-family: var(--font-family2);
                    text-align: center;
                    margin-top: .8em;
                }
            }
            & .footer-menu {
                width: fit-content;
                & .g-navi {
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    max-height: 8rem;
                }
                & a {
                    display: block;
                    color: white;
                    width: 10em;
                    font-size: .95rem;
                    font-family: var(--font-family2);
                    text-decoration: none;
                    margin-bottom: .5em;
                    &.footer-none {
                        display: none;
                    }
                }
                & .-menu2 .g-navi a {
                    width: 13em;
                    font-size: .85rem;
                    margin-bottom: .8em;
                }
            }
        }
    }
}
@media screen and (max-width: 1000px) {
    .site-footer {
        & .footer-body {
            padding: 10%;
            & .footer-contents {
                align-items: flex-end;
                & .footer-logo {
                    width: 30%;
                    order: 2;
                    & a {
                        width: 100%;
                    }
                }
                & .footer-menu {
                    width: 65%;
                    & .-menu1, .-menu2 {
                        width: 100%;
                        & .g-navi {
                            width: 100%;
                            max-height: none;
                            & a {
                                width: 100%;
                                font-size: 1.1rem;
                            }
                        }
                    }
                    & .footer-copy {
                        color: white;
                        font-size: 3vw;
                        font-family: var(--font-family2);
                        margin-top: 2em;
                        line-height: 1.7;
                    }
                    & .-menu2 .g-navi a {
                        font-size: 2.8vw;
                    }
                }
            }
        }
    }
}


/* 固定ページ設定（トップページ以外）
-------------------------------- */
:root {
    --post-h1-pd: 3em;
}
.l-content__body {
    padding-bottom: 0;
    margin-bottom: 0;
}
body:not(.home):not(.woocommerce) .l-content__body {
    margin: 3rem auto;
    padding-bottom: 5rem;
}
.p-topArea {
    min-height: 120px;
    margin-top: 0;
    padding: 4rem 0;
    &.-noimg {
        background: url(../img/header-menu-bk01.webp) no-repeat center /cover;
    }
    & h1 {
        position: relative;
        width: fit-content;
        margin: 0 auto;
        font-size: 1.6rem;
        font-family: var(--font-family2);
        color: var(--font-color-accent1);
        padding: 0 calc(var(--post-h1-pd) * 1.3);
    }
    & h1::before, h1::after {
        position: absolute;
        content: "";
        width: var(--post-h1-pd);
        height: 1px;
        background: var(--font-color-accent1);
        top: 0;
        bottom: 0;
        margin: auto 0;
    }
    & h1::before {
        left: 0;
    }
    & h1::after {
        right: 0;
    }
}
.p-breadcrumb {
    width: 90%;
    max-width: var(--max-width1);
    & .p-breadcrumb__list {
        align-items: center;
    }
    & span {
        font-size: 12px;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --post-h1-pd: 2em;
    }
    .l-content__body {
        margin: 2rem auto 0;
    }
    .p-topArea {
        padding: 8rem 0 3rem;
        & h1 {
            font-size: 1.8rem;
        }
    }
}

/* ショッピングガイド */
:root {
    --shipping-table-style-line: 1px solid #ccc;
}
.shipping-table-style {
    width: 95% !important;
    height: 60vh;
    margin: 1rem auto;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: var(--shipping-table-style-line);
    & table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        min-width: 650px;
        min-height: 60vh;
        & thead {
            position: sticky;
            top: 0;
            left: 0;
            z-index: 2;
            background: none;
            border-left: none;
            border-right: none;
            & th {
                color: white;
                background: var(--accent-black);
            }
            & th:first-child {
                position: sticky;
                top: 0;
                left: 0;
                z-index: 1;
            }
        }
        & th, & td {
            font-size: 0.7rem;
            padding: 0.45rem !important;
            vertical-align: middle;
            border: var(--shipping-table-style-line) !important;
        }
    }
}

/* アーカイブページ設定
-------------------------------- */
.p-archive {
    width: 90%;
    max-width: var(--max-width2);
    margin: 0 auto;
}
.p-archive__title h1 {
    font-family: var(--font-family2);
}