@charset "UTF-8";

        /* --------------------------------------------------
        共通スタイル
        -------------------------------------------------- */



        /* コンセプトセクション */
        .p-brand-point__block.p-brand-point__block--whitetext.concept {
            padding: 105px 0;
        }

        /* タイトル調整 */
        h3.p-brand-point__col2-title.c-title {
            font-size: 26px;
            line-height: 42px;
        }

        h3.p-design-col2__title.material {
            margin-bottom: 15px;
        }


        /* 改行整える */
        .p-design-col2__text:not(:first-child) {
            text-align: justify;
            word-break: break-all;
        }

        /* テキスト共通 */
        .p-brand-point__col2-text {
            line-height: 26px;
            font-size: 15px;
        }

        p#interior_title {
            font-size: 21px;
            margin-bottom: 10px;
        }

        /* 画像比率指定 */
        .p-brand-spec__block-image--portrait img {
            aspect-ratio: 374 / 290;
            width: 100%;
            height: auto;
        }

        /* テキストカラー調整 */
        .p-dresscore-about__heading.c-animation--fade.js-animation-scroll.is-visible {
            color: white;
        }

        /* 特定要素装飾（ゼロ動線） */
        span#block_var {
            background: darkred;
            padding: 7px 5px;
            font-size: 10px;
        }


        /* グリッド（集ダイニング） */
        .p-design-grid__box {
            background: none;
        }

        .p-design-grid__box.c-animation--parent.c-animation--fade.js-animation-scroll.is-visible {
            width: 100%;
        }

        .p-design-grid__content {
            padding: 20px 0 10px;
        }


        .p-design-col2__box.yohaku.c-animation--parent.c-animation--fade.js-animation-scroll.is-visible {
            margin-top: 0px;
        }

        /* 成約バナー（共通） */
        section#goseiyaku {
            background: url(/assets/images/kitchen/ino-quilt-mat/img_banner.png) no-repeat center / 100%;
            padding: 80px;
        }

        .p-brand-banner2__content.goseiyaku {
            padding: 20px;
            margin-left: 0;
            border: none;
            flex: auto;
            -webkit-box-flex: 1;
        }

        .p-brand-banner2__box.goseiyaku02.c-animation--fade.c-animation--parent.js-animation-scroll.is-visible {
            background: rgba(255, 255, 255, 0.8);
            color: #000;

        }

        .p-brand-banner2__box .goseiyaku02 a {
            padding: 10px 0;
        }


        p.p-brand-banner2__title.goseiyaku03 {
            color: #000;
            font-size: 24px;
        }

        span#seikyaku_kikan {
            font-size: 15px;
        }


        .p-brand-banner2__button a {
            background: #333;
            border-radius: 40px;
            display: flex;
            justify-content: center;
            max-width: 169px;
            padding: 15px 0;
            color: #eee;
            font-size: 12px;
            position: relative;
            transition: 0.3s ease-in-out;
        }

        .p-brand-banner2__button a:hover {
            background: #eee;
            color: #333;
        }

        /* 成約バナー */
        section#goseiyaku {
            padding: 0px;
            background-size: cover;
            background-position: top;
            background-size: cover;
            padding: 20px 0px;
        }

        .p-brand-banner2__text {
            margin-top: 10px;
            font-size: 15px;
        }


        /* スライダー調整 */
        #swiper-wrapper-2d9a76a8c382a392 {
            justify-content: unset;
        }

        .c-slider--fade .swiper-slide img {
            width: 100%;
        }

        /* 動画 */
        section.p-top-zeroconductor.l-section.movie {

            background: black;
        }


        /* スライダー初期化 */
        /* .p-kitchen-function__slider--sink .p-kitchen-function__slider-list {
            transform: translate3d(0, 0, 0);
        } */



        /* --------------------------------------------------
        PC用スタイル（768px以上）
        -------------------------------------------------- */
        @media screen and (min-width: 768px) {

            /* ロゴ */
            .p-brand-mv__logo img {
                max-width: 48%;
            }


            /* 各ブロック共通の余白 */
            .p-brand-point__index {
                padding: 100px 0 90px;
            }

            .p-brand-point__block {
                padding: 90px 0;
            }

            .p-design-content,
            div#bnnwe_zeroflow {

                padding: 80px 0;
            }

            .c-craftsmanship.c-animation--fade.c-animation--parent.js-animation-scroll.is-visible {
                margin: 25px 0;
            }

            .p-design-col2__box.c-animation--parent.c-animation--fade.js-animation-scroll.is-visible {
                margin-top: 60px;
            }

            /* 共通英語タイトル */
            span#material_title {
                font-size: 13px;
            }




            /* 動画 */
            section.p-top-zeroconductor.l-section.movie {
                padding-top: 130px;
            }

            .p-top-zeroconductor__movie.c-animation--fade.js-animation-scroll.js-modal-open.is-visible {
                width: 80%;
                margin: 0 auto;
            }

            /* キルトマット画像 */
            .p-brand-point__descriptions-image {
                width: calc(61% - 20px);
            }

            .p-brand-point__col2-content {
                padding: 0 0 0 40px;
            }

            .p-design-col2__image.quiltmat.c-animation--shrink,
            .p-design-col2__image.quiltmat_interior.c-animation--shrink {
                width: 42.3214%;
            }

            .p-design-col2__image.quiltmat_interior.c-animation--shrink.TVISOLA {
                width: 50%;
            }

            .p-design-col2__image.quiltmat_interior.c-animation--shrink.left {
                width: 55.25%;
            }

            /* ゼロ動線レイアウト */
            .p-dresscore-about__box--col2 {
                margin-right: 0;
                flex-direction: inherit;
            }

            .p-dresscore-about__box--col2 .p-dresscore-about__content {
                margin-right: 14px;
            }

            /* スライダー整列 */
            #swiper-wrapper-2d9a76a8c382a392 {
                justify-content: space-around;
            }

            .p-design-grid__wrapper {
                margin-top: 15px;
                display: flex;
            }




            /* 成約バナー */
            .p-brand-banner2__inner {
                width: 80.0625%;
            }


        }

        /* --------------------------------------------------
        SP用スタイル（767px以下）
        -------------------------------------------------- */
        @media screen and (max-width: 767px) {

            .p-brand-mv__logo img {
                max-width: 65%;
            }

            /* コンセプト */
            .p-brand-point__inner.l-section__inner.c-animation--parent.c-animation--fade.js-animation-scroll.is-visible,
            .p-about-vision__title,
            .p-about-vision__category.c-title-english.concept {
                text-align: left;

            }

            h3#concpt_text,
            p#concpt_text {
                text-align: justify;
                word-break: break-all;
            }

            /* タイトルサイズ */
            h3.p-brand-point__col2-title.c-title {
                font-size: 21px;
                line-height: 35px;
            }
            .p-brand-point__col2-text {
                font-size: 13px;
            }


            /* 動画 */
            section.p-top-zeroconductor.l-section.movie {
                padding-top: 60px;
            }

            /* 共通パディング */
            .p-brand-point__index {
                padding: 100px 0 90px;
            }

            .p-design-content,

            div#bnnwe_zeroflow {
                padding: 15px 0 50px;
            }

            .c-craftsmanship.c-animation--fade.c-animation--parent.js-animation-scroll.is-visible {
                margin: 10px 0;
            }

            .p-design-col2__box.c-animation--parent.c-animation--fade.js-animation-scroll.is-visible {
                margin-top: 70px;
            }

            .p-design-col2__content {
                padding: 30px 0;
            }

            /* 英語タイトル */
            span#material_title {
                font-size: 11px;
            }

            /* point03 */
            div#point03 {
                padding: 46px 0 0;
            }

            .p-design-grid__box:not(:first-child),
            .p-design-grid__wrapper {
                margin-top: 40px;
            }

            .p-design-grid__wrapper {
                display: unset;
            }

            /* キルトマット */
            .l-section__inner {
                width: 93.33%;
            }

            .p-brand-point__col2-content {
                padding: 20px 0 25px;
            }

            div#point01_quiltmat {
                display: flex;
                flex-direction: column-reverse;
            }

            /* ゼロ動線レイアウト */
            .p-dresscore-about__box.p-dresscore-about__box--col2 {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
            }

            .p-dresscore-about__content {
                width: 48%;
                margin: 2px;
            }

            .p-dresscore-about__content-title {
                font-size: 13px;
            }

            .p-dresscore-about__content-text {
                margin-top: 7px;
                line-height: 17px;
                font-size: 11px;
            }

            .p-kitchen-function__slider--sink .p-kitchen-function__slider-list {
                transform: translate3d(0, 0, 0) !important;
            }

            /* 成約バナー */
            p.p-brand-banner2__title.goseiyaku03 {
                font-size: 21px;
            }

            .p-brand-banner2__text {
                font-size: 13px;
            }

            div#banner_zeroflow {
                padding-bottom: 11ex;
            }

        }



            .container {
                max-width: 1120px;
                margin: auto;
                /* padding: 20px; */
            }

            .section {
                display: flex;
                flex-direction: column;
            }

            .image-block {
                margin: 20px 0;
            }

            .image-block img {
                width: 100%;
                height: auto;
            }

            .variation-title {
                font-size: 18px;
                margin: 30px 0 10px;
            }

            .variations {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .variation {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                align-items: center;
            }

            .variation-label {
                width: 100px;
                flex-shrink: 0;
                font-size: 12px;
            }


            .box-item {
                width: 100px;
                text-align: center;
                color: #fff;

            }

            .box-item img {
                width: 100px;
                height: 100px;
                object-fit: cover;
                border: 1px solid #ccc;
            }

            .box-label {
                margin-top: 5px;

            }





            @media screen and (min-width: 768px) {
                .section {
                    gap: 12px;
                    align-items: self-start;
                }
            }


            .variation {
                display: block;
            }

            .variations {
                gap: 9px;
            }


            .variation-label {
                margin: 10px 0;
            }

            .item {
                flex: 0 0 215px;
                height: 150px;
            }

            .box-item img {
                width: 80px;
                height: 80px;
            }

            .box-item {
                display: inline-block;
                width: 84px;
            }

            .scroll-container {
                overflow: hidden;
                position: relative;
                margin-top: 46px;
            }

            .scroll-content {
                display: flex;
                gap: 24px;
                animation: scroll-left 20s linear infinite;
                margin-top: 10px;

            }

            .scroll-container:hover .scroll-content {
                animation-play-state: paused;
            }



            .item img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            @keyframes scroll-left {
                0% {
                    transform: translateX(0%);
                }

                100% {
                    transform: translateX(-50%);
                }
            }

            /* スマホ時にスクロール速度を速くする */
            @media screen and (max-width: 768px) {
                .scroll-content {
                    animation: scroll-left 10s linear infinite;
                    gap: 8px;
                }

                .scroll-container {
                    margin-top: 30px;
                }



                .p-design-col2__content.dining {
                    padding: 0px;
                }

            }

            /* ダミー要素でループ感を出す */
            .scroll-content::after {
                content: '';
                display: block;
                width: 0;
            }