/*==============================*/
/*スライド*/
/*==============================*/
    .slide-newmark {
        position: relative;
        overflow: hidden;
    }
    .newmark-tag {
        position: absolute;
        background: #bd2828;
        color: #fff;
        transform: rotate(-45deg);
        height: 100px;
        width: 100px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        top: -50px;
        left: -50px;
        padding-bottom: 6px;
    }
    .newmark-tag.pick {
        background: #1c1c1c;
    }
    .newmark-tag.default {
        background: #cb333b;
    }

    .slick-slide {
        display: flex;
        align-items: center;
        height: auto;
    }
    .slider a {
        width: 100%;
        display: block;
        padding: 0 5px;
    }
    video {
        width: 100%;
        height: auto;
    }
    .pd-b {
        padding-bottom: 2rem;
    }
    /*スライドボタン非表示　必要であれば表示*/
    button.slick-prev.slick-arrow, button.slick-next.slick-arrow {
        display: none!important;
    }
    #wp-cosme-TOP .slider.slick-initialized {;
        margin: 0 auto 3rem;
    }
    #wp-cosme-TOP .slick-dots {
        display: block;
    }
    #wp-cosme-TOP .slick-dots li {
        width: 20px;
    }
    ul.slider.slick-initialized.slick-slider.slick-dotted video,
    ul.slider.slick-initialized.slick-slider.slick-dotted img {
        height: auto;
        width: 100%;
    }
    /*  以下追加*/
    .slick-initialized .slick-slide {
        justify-content: center;
        display: flex;
    }
    .slider-wrapper {
      visibility: hidden;
    }
    .slider-wrapper.slick-loaded {
      visibility: visible;
    }
    @media screen and (max-width: 600px) {
        ul.slider.slick-initialized.slick-slider.slick-dotted video,
        ul.slider.slick-initialized.slick-slider.slick-dotted img {
        }
        .pd-b {
            padding-bottom: 1rem;
        }
    }



/*==============================*/
/*スライド下検索窓*/
/*==============================*/
    .dc-search input:focus, .dc-search input {
        background: #f7efeb;
    }
    .dc-search input::placeholder, .dc-search input:focus {
        color: #866761;
    }
    .dc-search input {
        border: none;
        border-radius: 50px;
        margin-bottom: 1.5rem;
    }
    .dc-search.search--toppage {
        display: block;
        margin-block: 0 3rem;
    }
    .col-12.dc-headline.Topttl-center.mobile {
        display: block;
    }
    .dc-keywords__list.mobile {
        margin-bottom: 2rem;
        justify-content: center;
        flex-wrap: wrap;
        width: 90%;
        margin-inline: auto;
        display: flex;
    }
    .dc-keywords__list.mobile a {
        background: none;
        color: #1c1c1c;
        border: solid 1px #1c1c1c;
        border-radius: 100px;
        padding: .6rem 2rem;
        font-size: 1.2rem;
        display: block;
    }
    .dc-keywords__list.mobile a::before {
        content: "#";
    }


    @media screen and (min-width: 769px) {
        .dc-search.search--toppage {
            width: calc(100vw - 70%);
            margin-top: 3rem;
            margin-inline: auto;
        }
        
        .dc-search .dc-search-button {
            right: 2.5rem;
            left: unset;
        }    
    }


/*==============================*/
/*アイテムランキング*/
/*==============================*/

    .category-buttons {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        margin-bottom: 1rem;
    }

    .category-btn {
        padding: 1rem 2rem;
        border: none;
        border-bottom: solid 3px #ddd;
        background-color: unset;
        cursor: pointer;
        font-size: 1.4rem;
        transition: background-color 0.3s;
        ;
    }

    .category-btn.active {
        background-color: unset;
        border-bottom-color: #444;
        font-weight: bold;
        position: relative
    }
    .category-btn.active::after {
        position: absolute;
        bottom: -12px;
        width: 20px;
        height: 12px;
        background-color: #444;
        left: 50%;
        transform: translate(-50%, 0);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        content: '';
    }

    .ranking-items {
        display: flex;
        flex-direction: column;
    }

    .ranking-item {
        display: none;
    }

    .ranking-item.active {
        display: block;
    }
    @media screen and (max-width: 768.98px) {
        .category-buttons {
            list-style: none;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-wrap: nowrap;
            position: relative;
            padding-bottom: 2rem;
        }
        .category-btn {
            flex: 0 0 auto;
            margin-right: 0;
            font-size: 1.3rem;
            width: 27%;
        }
        .category-buttons {
            -ms-overflow-style: none;  /* IE/Edge 対応 */
            scrollbar-width: none;     /* Firefox 対応 */
        }
        .category-buttons::-webkit-scrollbar {
            display: none;             /* Chrome/Safari 対応 */
        }
    }



/*==============================*/
/*独自コンテンツ*/
/*==============================*/
    .wp-feature-archive-btn {
        background: #000;
        color: #fff;
        display: block;
        margin: 0 auto 2rem;
        padding: 10px 0;
        text-align: center;
    }
    .wp-feature-archive-btn:hover {
        color: #fff;
    }
    .content-asset.fixed-contents-under-slide .flex-2column {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
    }
    .content-asset.fixed-contents-under-slide .flex-2column a {
        width: 49%;
    }

    .content-asset.fixed-contents-under-slide a {
        display: block;
        margin-bottom: 1rem;
        width: 100%;
    }
    .content-asset.fixed-contents-under-slide a img {
        width: 100%;
    }

    @media screen and (max-width:768.98px) {
        .flex-contents-textbook {
            margin-bottom: 0;
            width: 100%;
        }
        .content-asset.fixed-contents-under-slide a {
            margin-bottom: .5rem;
        }

    }



/*==============================*/
/*コーデブログ記事×3読み込み*/
/*==============================*/

    .cdb-coord-slider-wrapper {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        margin: 1rem auto;
    }
    /*個々の記事かこったdiv 見える範囲*/
    .cdb-coord-slider-track {
        display: inline-flex;
        gap: 2rem;
        padding-bottom: 2rem;
        width: 90%;
    }
    /*個々の記事*/
    #experience-container .article-block {
        flex: 0 0 100%;
        scroll-snap-align: start;
        background: #fff;der-box;
    }
    #experience-container .coordinate-blog-detail {
        white-space: normal;
    }

    .cdb-coord-slider-wrapper .dc-box {
        background: none;
        border: none;
        padding: 0;
    }
    .cdb-coord-slider-wrapper .dc-box p {
        font-size: 1.1rem;
        line-height: 1.6;
        font-weight: 500;
        text-align: justify;
        word-break: break-all;
    }
    #experience-container .coordinate-blog-title {
        white-space: normal;
        font-size: 1.6rem;
        font-weight: 300;
        letter-spacing: 0.5px;
        margin-block: 2rem 1.2rem;
    }

    /*アイテムリンク*/
    #experience-container .item-list ul {
        border-bottom: solid 1px #1c1c1c;
        border-top: solid 1px #1c1c1c;
        padding-block: 2rem;
        margin-block: 0;
        position: relative;
    }
    #experience-container .item-list ul::before {
        content: "Items";
        position: absolute;
        top: -1rem;
        background: #fff;
        padding-right: 1.5rem;
        font-weight: 500;
    }
    #experience-container .item-list ul li:nth-child(n+4) {
        display: none;
    }
    #experience-container .item-list ul li:nth-child(-n+2) {
        margin-bottom: 1rem;
    }
    #experience-container .item-list li a {
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
    }
    #experience-container .item-list img {
        width: 20%;
        height: auto;
    }
    #experience-container .item-list .item-detail {
        width: 77%;
        font-size: 1.2rem;
    }
    #experience-container .item-list .product-name {
        font-weight: 500;
        line-height: 1.4;
        margin: 0;
    }
    #experience-container .product {
        margin-top: .5rem;
    }

    /*スクロールバー調整*/
    .cdb-coord-slider-wrapper::-webkit-scrollbar {
        height: 9px; /* 横スクロールバーの高さ */
    }
    .cdb-coord-slider-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }
    .cdb-coord-slider-wrapper::-webkit-scrollbar-thumb {
        background-color: #ccc;  /* 色をおしゃれグレーに */
        border-radius: 3px;
    }

    /*moreボタン*/
    .moreLink.coord-blog {
        width: 50%;
        border: solid 1px #cb333b;
        margin-inline: auto;
        margin-block: 1.5rem 0;
        padding: 1rem;
        border-radius: 100px;
    }

    @media screen and (min-width: 769px) {
        .cdb-coord-slider-track {
            flex-direction: column;
            width: 100%;
            gap: 6rem;
        }
        .cdb-coord-slider-wrapper .dc-box p, 
        #experience-container .item-list .product-name {
            font-size: 1.3rem;
        }
        #experience-container .coordinate-top-blog {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }
        #experience-container .coordinate-blog-title {
            font-size: 2.2rem;
            margin-top: 0;
        }
        #experience-container .thumbnail-content {
            width: 50%;
        }
        #experience-container .coordinate-blog-detail {
            width: 50%;
        }
        #experience-container .item-list img {
            width: 22.5%;
        }
        #experience-container .item-list .item-detail {
            width: 75%;
        }
        #experience-container .item-list li:nth-child(n+5) {
            display: none;
        }

    }


/*==============================*/
/*コーデランキング読み込み*/
/*==============================*/
    .coordinate-ranking .dc-tags-wrapper {
        display: none;
    }
    .coordinate-ranking .dc-layout-3-2 .dc-col:nth-child(n+6) {
        display: none;
    }
    .dc-layout-3-2 .dc-col {
        margin: 0;
        width: unset;
        padding: 0;
        flex: unset;
    }
    .coordinate-ranking figcaption {
        display: none;
    }
    .coordinate-ranking .dc-main-body img {
        height: auto;
        width: 100%;
        margin: 0;
        object-fit: cover;
    }
    
    .coordinate-ranking .dc-row.article-contents {
        flex-wrap: nowrap;
        gap: 1.5rem;
    }
    .coordinate-ranking .dc-row.article-contents::-webkit-scrollbar {
        height: 10px;
        width: 2px;
        background-color: #fff; 
    }
    .coordinate-ranking .dc-row.article-contents::-webkit-scrollbar-thumb {
        background: #ddd;
        width: 2px;
        border-radius: 100px;
    }
    .coordinate-ranking h2 {
        display: none;
    }
    .coordinate-ranking .dc-article-tile {
        position: relative;
    }
    .coordinate-ranking .dc-row.article-contents {
        counter-reset: number 0;
    }
    .coordinate-ranking .dc-col .dc-article-tile::before {
        align-items: center;
        background: #cb333b;
        color: #fff;
        counter-increment: number 1;
        content: counter(number) "";
        display: flex;
        height: 2.5rem;
        justify-content: center;
        position: absolute;
        width: 2.5rem;
        z-index: 2;
    }
    .coordinate-title-link h3 {
        font-size: 2.2rem;
        font-weight: 500;
        text-align: center;
        margin: 3rem auto;
    }
    .coordinate-link-flex {
        align-items: center;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .coordinate-title-link {
        margin: 0 auto 3rem;
        width: 100%;
    }

    .coordinate-link-flex a {
        background: #444;
        border-radius: 100px;
        color: #fff;
        display: block;
        font-size: 2rem;
        padding: .5rem 0;
        text-align: center;
        width: 33%;
    }

    @media screen and (max-width: 768.98px) {
        .coordinate-ranking .dc-row.article-contents {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-wrap: nowrap;
            gap: 1rem;
        }
        .coordinate-ranking .dc-layout-3-2 .dc-col {
            flex: 0 0 43%;
        }
        .coordinate-link-flex a {
            font-size: 1.5rem;
        }
        .coordinate-title-link h3 {
            font-size: 1.6rem;
            margin: 2rem 0;
        }
        .coordinate-ranking .dc-row.article-contents::-webkit-scrollbar {
            display: none;
        }
        .coordinate-ranking .dc-row.article-contents::-webkit-scrollbar-thumb {
            display: none;
        }
    }



/*==============================*/
/*新着コーディネート読み込み*/
/*==============================*/

    .futureshop-parts-coordinate-new-post .pagination {
        display: none;
    }
    .futureshop-parts-coordinate-new-post .dc-article-tile__date {
        margin: 0;
    }
    .futureshop-parts-coordinate-new-post .dc-article-tile__caption {
        color: #000;
        line-height: 1.6;
        margin-top: .5rem;
    }
    .futureshop-parts-coordinate-new-post .dc-row .dc-col:nth-of-type(n+6) {
        display: none;
    }
    .futureshop-parts-coordinate-new-post .dc-row {
        flex-wrap: nowrap;
        margin-inline: 0;
        gap: 2rem;
    }

    .futureshop-parts-coordinate-new-post .dc-article-tile__body {
        margin-top: 1rem;
    }
    .futureshop-parts-coordinate-new-post .dc-layout-3-2 .dc-col {
        margin: 0;
    }
    .coordinate-new-post-btn {
        background: #000;
        color: #fff;
        display: block;
        margin-bottom: 4rem;
        padding: 1rem 0;
        text-align: center;
    }
    .coordinate-new-post-btn:hover {
        color: #fff;
    }
    .futureshop-parts-coordinate-new-post .dc-layout-3-2, 
    .futureshop-parts-coordinate-new-post figure {
        margin: 0;
    }


    @media screen and (max-width: 769px) {
        .futureshop-parts-coordinate-new-post .dc-row .dc-col:nth-of-type(n+5) {
            display: block;
        }
        .futureshop-parts-coordinate-new-post .dc-row .dc-col:nth-of-type(n+10) {
            display: none;
        }
        .futureshop-parts-coordinate-new-post .dc-article-tile__imagelink img {
            margin-top: 0;
        }
        
        .futureshop-parts-coordinate-new-post .dc-row.article-contents {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-wrap: nowrap;
            gap: 1rem;

        }
        .futureshop-parts-coordinate-new-post .dc-layout-3-2 .dc-col {
            flex: 0 0 43%;
        }
        .futureshop-parts-coordinate-new-post .dc-article-tile__caption {
            font-size: 1.2rem;
            text-align: left;
            word-break: break-all;
        }
    }




/*==============================*/
/*フラッグ部分*/
/*==============================*/

    /*見出しレイアウト調整*/
    .wave-wrapper .dc-layout-head {
        margin-top: 0;
        color: #f7efeb;
    }
    .wave-wrapper img {
        height: auto;
    }
    .wave-background {
        margin-block: 6rem;
    }
    .wave-background picture {
        display: block;
    }
    .wave-background picture:first-child {
        margin-bottom: -1px;
    }
    .wave-background picture:last-child {
        margin-top: -1px;
    }
    /*SVG*/
    .wave-background.Atype .wave-wrapper, 
    .wave-background.Btype .wave-wrapper {
        padding-block: 3rem;
    }
    .wave-background.Atype .wave-wrapper {
        background: #cb333b;
    }
    .wave-background.Btype .wave-wrapper {
        background: #866761;
    }
    /*テキスト白指定*/
    .wave-background .front-text, 
    .wave-background .contents-overview, 
    .wave-background .product-infomation {
        color: #f7efeb;
    }
    .contents-list a .front-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        text-align: center;
        text-shadow: 0px 0px 6px #333;
    }
    .contents-list a .front-text .contents-title  {
        font-size: 2rem;
        font-weight: 400;
    }
    .contents-list a .front-text .contents-title img {
        width: 50%;
    }
    .contents-list a .front-text .auen-info-text {
        font-size: 1.2rem;
        margin-block: .5rem 1.5rem;
    }
    .auen-unique-block .contents-list {
        margin-bottom: 2rem;
    }
    .wave-background .contents-list a {
        position: relative;
        display: block;
    }
    .wave-background .more-button {
        border: solid 1px;
        border-radius: 100px;
        width: fit-content;
        padding: .3rem 2rem;
        margin: 0 auto;
    }
    .wave-background .contents-overview {
        margin: 0;
        font-size: 1.2rem;
        width: 90%;
        text-align: justify;
        word-break: break-all;
        margin-inline: auto;
        margin-top: 1.2rem;
        line-height: 1.7;
    }

    /*ブラウン*/
    .auen-unique-block.only-topic {
        align-items: center;
    }
    .wave-background .bg-white-button {
        display: block;
        text-align: center;
        border: solid 1px #cb333b;
        border-radius: 100px;
        color: #cb333b;
        background: #f7efeb;
        padding-block: 1rem;
        letter-spacing: 1px;
        font-weight: 500;
    }
    .wave-background .product-name {
        font-size: 1.6rem;
        font-weight: 500;
        margin-top: 1rem;
    }
    .wave-background .product-name small {
        display: block;
        font-size: 1.2rem;
        margin-top: .5rem;
    }
    .wave-background .contents-overview.w-unset {
        width: 100%;
        margin-block: 1rem 2rem;
    }
    @media screen and (min-width: 769px) {
        .auen-unique-block {
            align-items: flex-start;
            display: flex;
            gap: 4rem;
        }
        .wave-background .product-name {
            margin-top: 0;
        }
        .wave-background .product-infomation {
            width: 70%;
        }
    }


/*==============================*/
/*特集記事読み込み*/
/*==============================*/
    /*表示数*/
    .feature-contents-load-data .dc-row .dc-col:nth-of-type(n+4) {
        display: none;
    }
    /*レイアウト調整*/
    .feature-contents-load-data .dc-row.article-contents {
        flex-direction: column;
    }
    .feature-contents-load-data .dc-col {
        width: 100%;
        padding: 0;
        margin-block: 0 2rem;
    }
    /*日付とタイトル枠*/
    .feature-contents-load-data .dc-article-tile__date {
        display: none;
    }
    .feature-contents-load-data .dc-article-tile__imagelink img {
        margin: 0;
    }
    .feature-contents-load-data .dc-article-tile__caption {
        line-height: 1.6;
        margin-top: .5rem;
        color: #1c1c1c;
        font-size: 1.3rem;
        text-align: left;
        word-break: break-all;
        letter-spacing: 1px;
        font-weight: 300;
    }
    /*謎要素削除*/
    .feature-contents-load-data .pagination {
        display: none;
    }
    @media screen and (min-width: 768px) {
        .feature-contents-load-data .dc-row.article-contents {
            flex-direction: unset;
            flex-wrap: nowrap;
            gap: 20px;
        }
        .feature-contents-load-data .dc-article-tile__caption {
            margin-top: 1.2rem;
        }
        .feature-contents-load-data .dc-col {
            margin-bottom: 0;
        }    
    }



/*==============================*/
/*SEO記事・ニュース記事読み込み*/
/*==============================*/
    /*記事表示件数*/
    .contents-load-data .dc-row .dc-col:nth-of-type(n+4) {
        display: none;
    }
    /*記事大枠*/
    .dc-container.contents-load {
        margin-bottom: 4rem;
    }
    /*記事外枠*/
    .contents-load-data .dc-layout-3-2 .dc-col {
        width: 100%;
        border-top: solid 1px #1c1c1c;
        padding: 12px 0;
    }
    .contents-load-data .dc-layout-3-2 .dc-col:nth-of-type(3), 
    .contents-load-data .dc-layout-3-2 .dc-col:nth-of-type(4) {
        border-bottom: solid 1px #1c1c1c;
        margin: 0;
    }
    /*記事中枠*/
    .contents-load-data .dc-article-tile__imagelink {
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
    }
    .contents-load-data .dc-article-tile__imagelink img {
        margin: 0;
    }
    .contents-load-data .dc-article-tile__imagelink picture {
        width: 28%;
    }
    .contents-load-data .dc-article-tile__imagelink figcaption {
        width: 68%;
    }
    .contents-load-data .dc-row.article-contents {
        margin-bottom: 10px;
    }
    @media screen and (min-width: 768px) {
        /*記事大枠*/
        .contents-load-data .dc-row.article-contents {
            display: grid;
            grid-template-columns: repeat(2, 2fr);
            gap: 0 20px;
        }
        .contents-load-data .dc-row .dc-col:nth-of-type(n+4) {
            display: unset;
        }
        .contents-load-data .dc-row .dc-col:nth-of-type(n+5) {
            display: none;
        }
    }
    /*日付とタイトル枠*/
    .contents-load-data .dc-article-tile__body {
        display: flex  ;
        flex-direction: column-reverse;
    }
    /*日付*/
    .contents-load-data .dc-article-tile__date {
        margin-block: 0;
        color: #866761;
        margin-top: 4px;
    }
    /*タイトル*/  
    .contents-load-data .dc-article-tile__caption {
        line-height: 1.6;
        margin-top: 0;
        color: #1c1c1c;
        font-size: 1.3rem;
        text-align: left;
        word-break: break-all;
        letter-spacing: 1px;
        font-weight: 300;
    }
    /*謎要素削除*/
    .contents-load-data .pagination {
        display: none;
    }
    /*動きリセット*/
    .contents-load-data .dc-article-tile__imagelink, 
    .contents-load-data .dc-main-body a, 
    .contents-load-data .dc-main-body a img
     {
        transform: none !important;
        transition: none !important;
    }
    /*専用遷移リンク*/
    .contents-loadarea-btn {
        display: block;
        color: #866761;
        font-weight: 500;
        font-size: 1.3rem;
        letter-spacing: 1px;
        width: fit-content;
        margin-inline: auto 0;
    }
    .contents-loadarea-btn:hover {
        color: #866761;
        text-decoration-line: none;
    }