@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Serif+JP:wght@200..900&display=swap'); */

@import url('https://fonts.cdnfonts.com/css/eb-garamond-3');

body,
p,
a {
    line-height: 170%;
    font-family: 'EB Gramond', "Noto Serif JP", serif !important;
    letter-spacing: 0.05em;
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
    line-height: 170%;
    font-family: 'EB Gramond', "Noto Serif JP", serif !important;
    font-weight: 400;
    letter-spacing: 0.05em;
}
.wrap {
    width: auto;
}

main.main {
    overflow-x: hidden;
    padding: 0;
}

@media (max-width:834px) {

main.main {
        padding: 0 24px
}
    }

.container {
    position: relative;
    display: flex;
    flex-direction: column;
}

.content {
    margin-top: 0;
}

.body .article {
    margin-bottom: 0;
}
.body .wp-block-group{
    margin-bottom: 0;
}
.entry-content {
    margin: 0;
    padding: clamp(4rem, -0.42rem + 14.73vw, 9rem) 10% 0;
}
@media (max-width:834px) {
.entry-content {
        padding-left: 0;
        padding-right: 0
}
    }

/* ヘッダー */
.header-container {
    position: relative;
    z-index: 9;
}
.header-container .header-container-in {
        background-color: rgba(255, 255, 255, .2);
        width: 100%;
        height: 100px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        padding: 0 40px;
    }
.header-container .header-container-in.fixed-header {
            box-shadow: none;
        }
@media (max-width:834px) {
.header-container .header-container-in.hlt-top-menu {
                flex-direction: row
        }
            }
.header-container .header-container-in .header {
            display: flex;
        }
.header-container .header-container-in .header .header-in {
                display: flex !important;
            }
@media (max-width:834px) {
.header-container .logo {
            display: flex !important
    }
        }
.header-container .logo .site-name {
            padding: 0;
        }
.header-container .logo .site-name .site-name-text {
                font-size: 40px;
                color: #000;
                transition: color .2s ease-in;
            }
@media (max-width:834px) {
.header-container .logo .site-name .site-name-text {
                    font-size: 28px
            }
                }
.header-container .logo .site-name .site-name-text.is-white {
                    color: #fff;
                }
.header-container .navi {
        background-color: transparent;
    }
@media (max-width:1023px) {
.header-container .navi {
            display: flex;
            justify-content: flex-end
    }
        }
@media (max-width:834px) {
.header-container .navi {
            margin-right: 0;
            width: fit-content
    }
        }
.header-container .navi .navi-in {
            transition: opacity .3s;
        }
@media (max-width:834px) {
.header-container .navi .navi-in {
                opacity: 0;
                visibility: hidden;
                position: fixed;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff;
                width: 100%;
                height: 100%
        }
            }
@media (max-width:1023px) {
.header-container .navi .navi-in .menu-pc {
                    display: flex
            }
                }
@media (max-width:834px) {
.header-container .navi .navi-in .menu-pc {
                    flex-direction: column;
                    gap: 1rem
            }
                }
.header-container .navi .navi-in .menu-pc .menu-item {
                    height: auto;

                }
@media (max-width:834px) {
.header-container .navi .navi-in .menu-pc .menu-item {
                        width: 100%

                }
                    }
@media (max-width:834px) {
.header-container .navi .navi-in .menu-pc .menu-item a {
                            font-size: 21px
                    }
                        }
.header-container .navi .navi-in .menu-pc .menu-item a:hover {
                            text-decoration: dashed;
                            color: #000;
                        }
.header-container .navi .navi-in .menu-pc .menu-item a:hover .fa-angle-down {
                            transform: rotate(180deg);
                        }
@media (max-width:834px) {
.header-container .navi .navi-in .menu-pc .menu-item a:hover .fa-angle-down {
                                transform: rotate(0)
                        }
                            }
.header-container .navi .navi-in .menu-pc .menu-item a .has-icon {
                            position: absolute;
                            top: 8px;
                            left: 0;
                            font-size: 16px;
                        }
.header-container .navi .navi-in .menu-pc .menu-item a .has-icon .fa-angle-down {
                                position: absolute;
                                left: 20px;
                            }
@media (max-width:834px) {
.header-container .navi .navi-in .menu-pc .menu-item a .has-icon .fa-angle-down {
                                    left: 0
                            }
                                }
.header-container .navi .navi-in .menu-pc .menu-item a .has-icon .fa-angle-down::before {
                                    color: #333;
                                }
.header-container .navi .navi-in .menu-pc .menu-item a .has-icon .fa-angle-down.is-white::before {
                                    color: #fff;
                                }
@media (max-width:834px) {
.header-container .navi .navi-in .menu-pc .menu-item a .has-icon .fa-angle-down.is-white::before {
                                        color: #333
                                }
                                    }
.header-container .navi .navi-in .menu-pc .menu-item .sub-menu {
                        display: none;
                        flex-direction: column;
                        gap: 8px;
                        padding: 16px;
                        background-color: #222;
                        width: 100%;
                    }
@media (max-width:834px) {
.header-container .navi .navi-in .menu-pc .menu-item .sub-menu {
                            position: relative;
                            background-color: #fff
                    }
                        }
.header-container .navi .navi-in .menu-pc .menu-item .sub-menu a {
                            padding: 0;
                            text-align: center;
                            font-size: 14px;
                        }
.header-container .navi .navi-in .menu-pc .menu-item .sub-menu a .item-label {
                                color: #fff;
                            }
@media (max-width:834px) {
.header-container .navi .navi-in .menu-pc .menu-item .sub-menu a .item-label {
                                    color: #333
                            }
                                }
.header-container .navi .navi-in .menu-pc .menu-item .sub-menu a:hover {
                                background-color: transparent;
                            }
.header-container .navi .navi-in .menu-pc .menu-item .sub-menu .menu-item-has-children a {
                                border-bottom: 1px solid #999;
                            }
.header-container .navi .navi-in .menu-pc .menu-item:hover .sub-menu {
                        display: flex;
                    }
@media (max-width:834px) {
.header-container .navi .navi-in .menu-pc .menu-item:hover .sub-menu {
                            display: none
                    }
                        }
@media (max-width:834px) {
                        .header-container .navi .navi-in .menu-pc .menu-item-has-children.is-clicked .fa-angle-down {
                            transform: rotate(180deg) !important;
                        }

                        .header-container .navi .navi-in .menu-pc .menu-item-has-children.is-clicked .sub-menu {
                            display: flex;
                        }
                    }
.header-container .navi .item-label {
            color: #333;
        }
@media (max-width:834px) {
.header-container .navi .item-label {
                color: #333
        }
            }
.header-container .navi .item-label.is-white {
                color: #fff;
            }
@media (max-width:834px) {
.header-container .navi .item-label.is-white {
                    color: #333
            }
                }
.header-container .navi .hamburger {
            display: none;
            width: 30px;
            height: 25px;
            border: none;
            padding: 0;
            background: none;
            font: inherit;
            cursor: pointer;
            z-index: 99;
        }
@media (max-width:834px) {
.header-container .navi .hamburger {
                display: block
        }
            }
.header-container .navi .hamburger span {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
                height: 3px;
                background-color: #333;
                transition: all 0.3s;
            }
.header-container .navi .hamburger span::before {
                    content: "";
                    width: 100%;
                    height: 3px;
                    border-top: solid 3px #333;
                    background-color: #333;
                    transition: all 0.3s;
                    transform: translateY(-10px);
                }
.header-container .navi .hamburger span::after {
                    content: "";
                    width: 100%;
                    height: 3px;
                    border-top: solid 3px #333;
                    background-color: #333;
                    transition: all 0.3s;
                    transform: translateY(10px);

                }
.header-container .navi .hamburger span.is-white {
                    background-color: #fff;
                }
.header-container .navi .hamburger span.is-white::before {
                        background-color: #fff;
                        border-color: #fff;
                    }
.header-container .navi .hamburger span.is-white::after {
                        background-color: #fff;
                        border-color: #fff;
                    }
.header-container .navi .hamburger.is-clicked+.navi-in {
                    opacity: 1;
                    visibility: visible;
                }
.header-container .navi .hamburger.is-clicked span {
                    height: 0;
                }
.header-container .navi .hamburger.is-clicked span::before {
                        background-color: #333;
                        transform: rotate(45deg) translate(2px, 1px);
                        border-top: solid 3px #333;
                    }
.header-container .navi .hamburger.is-clicked span::after {
                        background-color: #333;
                        transform: rotate(-45deg);
                        border-top: solid 3px #333;
                    }

@media (max-width:834px) {
    .header-container .navi .navi-in .menu-pc .menu-item a .has-icon .fa-angle-down::before {
        color: #333 !important;
    }
}

/* トップページ */
.front-top-page.page .entry-header .eye-catch img {
            aspect-ratio: auto;
            filter: none;
            height: 100vh;
        }

.article .copyContainer {
    margin: clamp(4rem, -0.42rem + 14.73vw, 9rem) 0 clamp(10.5rem, 5.196rem + 17.68vw, 16.5rem);
}

.article .copyContainer .title {
        font-size: 50px;
        margin-bottom: clamp(2rem, 1.558rem + 1.47vw, 2.5rem);
        font-weight: 600;
    }

@media (max-width:834px) {

.article .copyContainer .title {
            font-size: 22px
    }
        }

.article .copyContainer .text {
        font-size: 18px;
    }

@media (max-width:834px) {

.article .copyContainer .text {
            font-size: 14px
    }
        }

.article .copyContainer .wp-block-separator {
        width: 40px;
        margin-bottom: clamp(2rem, 1.558rem + 1.47vw, 2.5rem);
    }

.brands {
    margin-top: clamp(5rem, -7.95rem + 24.84vw, 10rem);
}

.brands .wp-block-media-text__media img {
            aspect-ratio: 3 / 2;
            object-fit: cover;
        }

.brands .wp-block-buttons {
        margin-top: clamp(3rem, 0.348rem + 8.84vw, 6rem);
    }

.news {
    padding: clamp(5rem, -7.95rem + 24.84vw, 10rem) 0;
}

@media (max-width:834px) {

.news {
        flex-direction: column
}
    }

.news .block-news__list .block-news__items {
            padding: 1rem;
            margin-bottom: 0;
            border-top: 1px solid #d9d9d9;
            border-bottom: 1px solid #d9d9d9;
        }

@media (max-width:834px) {

.news .block-news__list .block-news__items {
                padding: 1rem 0
        }
            }

.news .block-news__list .block-news__items p {
                font-weight: 600;
            }

.news .block-news__list .date {
            font-weight: 600;
        }

.news .block-news__list .label {
            background-color: #666666;
            padding: 3px 1rem;
            color: #fff;
            border-radius: 3px;
        }

/* Case */
.mission {
    padding-bottom: clamp(5rem, -7.95rem + 24.84vw, 10rem);
}
.mission .wp-block-image {
        width: 100vw;
        margin: (50% - 50vw)
    }
.mission .wp-block-media-text__media img {
            aspect-ratio: 3 / 2;
            object-fit: cover;
        }
.mission .mission_listContents {
        padding-top: 40%;
    }
@media (max-width:834px) {
.mission .mission_listContents {
            padding: 0
    }
        }
.mission .mission_listContents .mission_listContent {
            display: flex;
            column-gap: 1rem;
            margin-bottom: 0;
            width: 100%;
        }
@media (max-width:1000px) {
.mission .mission_listContents .mission_listContent {
                flex-direction: column
        }
            }
.mission .mission_listContents .mission_listContent .mission_listContent_title {
                display: flex;
                flex: 2;
                align-items: flex-start;
                gap: .5rem;
                font-weight: 600;
                font-size: 22px;
            }
@media (max-width:1000px) {
.mission .mission_listContents .mission_listContent .mission_listContent_title {
                    width: 100%
            }
                }
@media (max-width:834px) {
.mission .mission_listContents .mission_listContent .mission_listContent_title {
                    font-size: 18px
            }
                }
.mission .mission_listContents .mission_listContent .mission_listContent_title p {
                    margin-bottom: 0;
                }
.mission .mission_listContents .mission_listContent .mission_listContent_title p:first-of-type {
                        flex: 1;
                        word-break: normal;
                    }
.mission .mission_listContents .mission_listContent .mission_listContent_title p:last-of-type {
                        flex: 8;
                    }
.mission .mission_listContents .mission_listContent .mission_listContent_text{
                flex: 3;
            }
@media (max-width:1000px) {
.mission .mission_listContents .mission_listContent .mission_listContent_text{
                    width: 100%
            }
                }
.mission .mission_listContents .wp-block-separator {
            width: 100%;
            margin-bottom: 0;
        }

/* ページ下部のギャラリー */
.gallery {
    gap: 0;
    margin-bottom: 0 !important;
    width: 100vw;
    height: auto;
    margin: 0 calc(50% - 50vw);
}
@media (max-width:834px) {
.gallery {
        flex-direction: column
}
    }
.gallery .gallery_left {
        flex: 1;
        margin-bottom: 0;
    }
.gallery .gallery_left img {
            width: 100%;
            height: auto;
        }
.gallery .gallery_right {
        flex: 1;
        gap: 0 !important;
    }
.gallery .gallery_right img {
            height: auto;
        }

/* フッター */
.footer {
    margin-top: 0;
}
@media (max-width:834px) {
.footer .footer-widgets {
            display: block
    }
        }
@media (max-width:834px) {
.footer .footer-widgets .footer-left {
                display: none
        }
            }
@media (max-width:834px) {
.footer .footer-widgets .footer-right {
                display: none
        }
            }
@media (max-width:834px) {
.footer .footer-widgets .footer-center {
                padding: 0
        }
            }
.footer .widget {
        margin: 0;
    }
.footer .footer-bottom {
        margin: 0;
    }
.footer .footer-bottom .navi-footer-in>.menu-footer li {
            border: none;
        }

/* アイキャッチ */
.eye-catch-wrap.display-none {
        display: block;
    }
.eye-catch-wrap .eye-catch {
        margin: 0 calc(50% - 50vw);

    }
.eye-catch-wrap .eye-catch img {
            width: 100vw;
            max-width: none;
            /* @media (max-width:834px) {
          height: 100vh;
      } */
        }
.eye-catch-wrap .eye_catch_logo {
        position: absolute;
        top: 36%;
        left: 50%;
        transform: translateX(-50%);
        width: clamp(7rem, -6.59rem + 26.07vw, 16.875rem);
    }

.article h2 {
    font-size: 27px;
    line-height: 170%;
    padding: 0 24px;
    border-radius: 0;
    letter-spacing: 0.05em;
    background-color: transparent;
    border-left: 1px solid #666666;
}

@media (max-width:834px) {

.article h2 {
        font-size: 21px
}
    }

.article h3 {
    padding: 0;
    border: none;
    font-weight: 600;
}

.wp-block-spacer {
    margin-bottom: 0;
}

.body .wp-block-media-text {
        gap: 1.5rem;
        margin-bottom: clamp(5rem, -7.95rem + 24.84vw, 10rem);
    }

.body .wp-block-media-text:last-of-type {
            margin-bottom: 0;
        }

.body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
                padding: 0 14% 0 0;
            }

@media (max-width:834px) {

.body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
                    padding: 0
            }
                }

.body .wp-block-media-text .wp-block-media-text__content {
            padding: 0 0 0 14%;
        }

@media (max-width:834px) {

.body .wp-block-media-text .wp-block-media-text__content {
                padding: 0
        }
            }


/* ボタンコンポーネント */
.wp-block-button__link {
    display: flex;
    gap: 1rem;
    background-color: #fff;
    border-radius: 999px;
    border: 1px solid #666666;
    padding: 1rem 3rem;
    color: #333;
    font-weight: bold;
}
@media (max-width:834px) {
.wp-block-button__link {
        font-size: 14px
}
    }
.wp-block-button__link::after {
        content: "\f054";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }

/* View More */
.buttonArea a {
        display: flex inline;
        gap: 1rem;
        justify-content: flex-end;
        color: #333;
        text-decoration: none;
        font-weight: bold;
        border-bottom: 1px solid #333;
    }
.buttonArea a::after {
            content: "\f054";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }

/* Pick UPエリア */
.pickup {
    margin-bottom: clamp(5rem, -7.95rem + 24.84vw, 10rem);
}
.pickup.pickup--top {
        margin-top: clamp(5rem, -7.95rem + 24.84vw, 10rem);
    }
.pickup .picup_imagebox {
        justify-content: center;
    }
@media (max-width:834px) {
.pickup .picup_imagebox {
            overflow-x: scroll;
            justify-content: flex-start
    }
        }
.pickup .picup_imagebox .wp-block-image {
            margin-bottom: 0;
            width: auto;
        }
@media (max-width:834px) {
.pickup .picup_imagebox .wp-block-image {
                flex-shrink: 0;
                width: auto;
                height: auto
        }
            }
.pickup .picup_imagebox .wp-block-image img {
                width: 200px;
                height: 200px;
                aspect-ratio: 1 / 1;
                object-fit: contain;
            }
.pickup .wp-block-buttons {
        margin-top: clamp(3rem, 0.348rem + 8.84vw, 6rem);

    }
.pickup .wp-block-buttons .wp-block-button__link::before {
            content: "\f290";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }

/* 動画 */
.video-container {
    max-width: none;
}

/* ファーストビュー */
.entry-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.entry-header .entry-title {
        position: absolute;
        z-index: 1;
        color: #333;
        font-size: clamp(0.75rem, 0.062rem + 1.32vw, 1.25rem);
        line-height: 1.7;
        letter-spacing: 0.005em;
        transform: translateY(20px);
    }
.entry-header .entry-title::after {
            content: '';
            position: absolute;
            bottom: -24px;
            width: 70px;
            height: 3px;
            background-color: #333;
            left: 50%;
            transform: translateX(-50%);
        }
.entry-header .eye-catch img {
        filter: opacity(0.5);
        aspect-ratio: 144 / 55;
        object-fit: cover;
    }
@media (max-width:834px) {
.entry-header .eye-catch img {
            aspect-ratio: 43 / 30
    }
        }

/* 固定ページ*/
/* コピーエリア */
.page .copyArea {
        margin-top: clamp(5rem, -7.95rem + 24.84vw, 10rem);
        margin-bottom: clamp(7.5rem, 3.08rem + 14.73vw, 12.5rem);
    }
.page .copyArea .wp-block-image {
            margin-bottom: clamp(3rem, 2.116rem + 2.95vw, 4rem);
        }
@media (max-width:834px) {
.page .copyArea .wp-block-image {
                width: 100vw;
                margin-left: calc(50% - 50vw);
                margin-right: calc(50% - 50vw)
        }
            }
.page .copyArea .wp-block-image img {
                aspect-ratio: 16 / 9;
                object-fit: cover;
            }
@media (max-width:834px) {
.page .copyArea .copy_textArea {
                flex-direction: column
        }
            }
.page .copyArea .copy_textArea::before {
                content: '';
                background-color: #666;
                align-self: stretch;
                justify-self: stretch;
                width: 1px;
                height: 40px;
                margin: auto;

            }
.page .copyArea .copy_textArea .wp-block-column:has(.catchcppy) {
                font-size: 27px;
                order: -1;
                text-align: center;
                font-weight: 600;
            }
@media (max-width:834px) {
.page .copyArea .copy_textArea .wp-block-column:has(.catchcppy) {
                    font-size: 21px
            }
                }
@media (max-width:834px) {
            .page .copyArea .copy_textArea::before {
                height: 1px;
                width: 40px;
            }
        }
.page .points .wp-block-media-text__media img {
                aspect-ratio: 3 / 2;
                object-fit: cover;
            }
.page .how_to_use {
        margin: clamp(5rem, -7.95rem + 24.84vw, 10rem) 0;
    }

@media (max-width:834px) {
    .entry-header .entry-title::after {
        height: 1px;
    }
}

/* フェードイン */
.fadein {
    opacity: 0;
    transform: translateY(30px);
    transition-property: transform, opacity;
    transition-duration: 1.5s;
    transition-delay: 0s;
}

.fadein.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* 投稿ページ */
.post .entry-header .entry-title {
            font-size: revert;
        }