@charset "UTF-8";

body figure video {
    margin: 0 !important;
}

h2 {
    font-size: 30px;
    line-height: 1.4;
    text-align: left;
    margin-right: auto;
    margin-bottom: 40px;
}


.fv-video {
    margin-right: 10.3% !important;
    text-align: left;
    aspect-ratio: 0;
    position: relative;
}

@media (max-width: 1200px) {
    .fv-video {
        margin-right: 6.8% !important;
        height: auto;
    }

    .cont-Wrap {
        margin: 0 6.8%;
        padding-bottom: 100px;
    }
}

.fv-video video {
    height: 700px !important;
    object-fit: cover;
}

.fv-txt {
    position: absolute;
    font-size: 10.3vw;
    line-height: 1;
/*     opacity: 0.5; */
    margin-top: -20%;
    right: 0;
    text-align: right;
}

@media (max-width: 769px) {
    .fv-txt {
        font-size: 18.4vw;
        margin-top: -31%;
    }
}

.front_l {
    /* width: 100%; */
    padding-bottom: 70px;
    display: flex;
    text-align: left;
    margin-top: 5%;
}

.front_l .btn {
    text-align: right;
    margin-top: 20px;
    margin-left: auto;
}


.front_l h2 {
    margin-right: 6vw;
    font-size: 30px;
    line-height: 1.4;
    text-align: left;
}


.br2 {
    display: none;
}

@media screen and (min-width:1440px) {

    .pc-item2 {
        display: block;
    }
}

@media screen and (max-width:1200px) {
    .front_l {
        padding-top: 8vw;
    }
}

@media screen and (max-width:769px) {
    h2 {
        margin-bottom: 30px;
    }

    .front_l {
        padding-top: 25vw;
        display: block;
        width: auto;
    }


}



/* ----------------------------------------------------
インテリ・キッチン・バスルーム
---------------------------------------------------- */


.image-box {
    display: flex;
}

.image-box .wp-block-image {
    width: 33.333% !important;
    height: 33vw !important;
    overflow: hidden;
    margin: 0;
}

.image-box .image1 img {
    width: 100%;
    height: 200% !important;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

.image-box .image2 img {
    width: 100%;
    height: 200% !important;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

.image-box .image3 img {
    width: 100%;
    height: 140% !important;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

.image-box .image1,
.image-box .image2,
.image-box .image3 {
position: relative;
}
.image-box .image1::after,
.image-box .image2::after,
.image-box .image3::after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2%;
    z-index: 3;
    color: #5C1317;
    font-size: 6vw;
    font-weight: 600;
    pointer-events: none;
        line-height: 1;
  }

@media screen and (max-width:769px) {
    .image-box {
        display: none;
    }

    /* .image-box .wp-block-image {
        width: 100% !important;
        height: 70vw !important;
    } */
}



/* ============================
   スマホだけ固定スクロール
   ============================ */
/* ============================
   PC / SP 表示切り替え
   ============================ */

/* PCではSP用を非表示 */
.sp-fixed-gallery {
  display: none;
}

/* スマホではPC用を非表示 */
@media screen and (max-width: 768px) {
  .pc-parallax {
    display: none;
  }

  .sp-fixed-gallery {
    display: block;
  }
}


/* ============================
   SP固定ギャラリー
   ============================ */


@media screen and (max-width: 768px) {
  .sp-fixed-gallery {
    display: block;
    position: relative;
    height: 400vh;
    overflow: visible !important;
  }

  .sp-fixed-gallery__sticky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
  }

  /* セクション内に入ったら固定 */
  .sp-fixed-gallery__sticky.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }

  /* セクションの最後まで来たら下で止める */
  .sp-fixed-gallery__sticky.is-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
  }

  .sp-fixed-gallery__item {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition:
      opacity 0.6s ease,
      visibility 0.6s ease;
  }

  .sp-fixed-gallery__item.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }

  .sp-fixed-gallery__item img {
    width: 100%;
    height: 140% !important;
    object-fit: cover;
    display: block;
    will-change: transform;
  }

  .sp-fixed-gallery__item::after {
    /* content: attr(data-title); */
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.5%;
    z-index: 3;
    color: #5C1317;
    font-size: 70px;
    font-weight: 600;
    pointer-events: none;
        line-height: 1;
  }

  .sp-fixed-gallery__item:nth-child(1)::after {
    content: "Interior";
  }

  .sp-fixed-gallery__item:nth-child(2)::after {
    content: "Kitchen";
  }

  .sp-fixed-gallery__item:nth-child(3)::after {
    content: "Bathroom";
  }

  

}



@media screen and (max-width: 768px) {
  .wp-block-group:has(.sp-fixed-gallery),
  .entry-content:has(.sp-fixed-gallery),
  .wp-site-blocks:has(.sp-fixed-gallery) {
    overflow: visible !important;
  }
}

/* @media screen and (max-width: 768px) {
  .sp-fixed-gallery {
    outline: 3px solid red;
  }

  .sp-fixed-gallery__sticky {
    outline: 3px solid blue;
  }
} */
/* ----------------------------------------------------
/* ===== NEWS セクション全体 ===== */

.front-news {
    padding: 50px 0;
}

.front-news_r {
    position: relative;
}

.front-news_r p {
    text-align: center;
    margin: auto;
}


.front-news_l {
    width: 30%;
    text-align: left;
}


.front-news-section {
    padding: 80px 0;
    background: #fff;
}

.front-news-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    gap: 80px;
}


@media screen and (max-width:769px) {
    .front-news {
        display: block;
        /* width: 95%; */
        margin: 6.8%;
    }

    .front-news_l,
    .front-news_r {
        width: 100%;
        margin: 0 0 40px;
    }

}

/* marker消し */
.news-tabs2 ul,
.news-tabs2 li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-tabs2 li::marker {
    content: "";
}

/* 念のため */

/* タブ */
.news-tabs2 ul {
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 25px;
}

.news-tab {
    appearance: none;
    width: 100px;
    height: 30px;
    border: 1px solid #cfcfcf;
    background: #fff;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: -1px;
}

.news-tab.is-active {
    border-bottom: none;

}

/* パネル（必要ならアニメ） */
.news-panel[hidden] {
    display: none !important;
}

.front-news .news-title {
    font-weight: 400;
    font-size: 16px;
}

.front-news .news-meta {
    gap: 20px;
    margin-bottom: 25px;
}

.front-news .news-card {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.front-news .news-list {
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    padding-top: 25px;
    padding-bottom: 50px;
}

.front-news .btn {
    text-align: right;
    margin-left: auto;
}

@media screen and (max-width:769px) {
    .news-tab {
        width: auto;
        padding: 5px 10px;
        font-size: 11px;
    }
}



/* ============================
   リクルートのスライド 
   ============================ */
.jcraft-Wrap {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 0 10.3%;
    padding-bottom: 140px;
}

.Japanese_Craftsmanship {
    width: 100%;
    height: 600px;
    text-align: left;
    margin-right: auto;
    aspect-ratio: 4 / 3;
    position: relative;
}

.Japanese_Craftsmanship-txt {
    position: absolute;
    font-size: 7vw;
    line-height: 1;
    opacity: 0.5;
    bottom: -5%;
    left: -8%;
}

.slide_im {
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 と同じ */
    opacity: 0;
    animation: fade 18s infinite;
    /* 3枚 × 3sずつ = 9秒で1周 */
}

.slide_im img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* 各スライドの開始時間をずらす */
.slide_im:nth-child(1) {
    animation-delay: 0s;
}

.slide_im:nth-child(2) {
    animation-delay: 6s;
}

.slide_im:nth-child(3) {
    animation-delay: 12s;
}

.slide_im:nth-child(4) {
    animation-delay: 18s;
}

/* フェードアニメーション */
@keyframes fade {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0;
    }

    /* ← 5% → 10% にしてフェードイン長め */
    30% {
        opacity: 1;
    }

    48% {
        opacity: 0;
    }

    /* ← 35% → 40% にしてフェードアウト長め */
    100% {
        opacity: 0;
    }
}

.front_product {
    margin: 0 10.3%;
}

@media (max-width: 1200px) {
    .jcraft-Wrap,
    .front_product{
  margin: 0 6.8%;
}
.Japanese_Craftsmanship-txt {
    left: -2%;
}
}

@media screen and (max-width: 768px) {
    .jcraft-Wrap {
        margin: 0;
            padding-bottom: 45%;
    }

    .Japanese_Craftsmanship {
        width: 100%;
        height: 50vw;
    }

    .Japanese_Craftsmanship-txt {
        position: absolute;
        font-size: 11vw;
        opacity: 0.5;
        bottom: -50%;
        left: 0;
        margin: 0 6.8%;
    }
}

/* ============================
   CSSだけで作る無限横スクロール
   ============================ */

.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 70px;
    margin-bottom: 50px;
}

.slider-track {
    display: flex;
    width: max-content;
    gap: 10px;
    animation: loopScroll 35s linear infinite;
    will-change: transform;
}

.slide {
    flex: 0 0 auto;
    width: 500px;
    height: 350px;
    overflow: hidden;
}

.slide img {
    display: block;
    width: 100% !important;
    height: 350px !important;
    object-fit: cover;
}

/* ホバーで一時停止したい場合 */
/* .slider:hover .slider-track {
    animation-play-state: paused;
} */

@keyframes loopScroll {
    0% {
        transform: translateX(0);
    }

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

/* タブレット */
@media screen and (max-width: 769px) {
    .slider-track {
        gap: 13px;
    }

    .slide {
        width: 200px;
        height: 170px;
    }

    .slide img {
        height: 170px !important;
    }
}

/* スマホ */
@media (max-width: 480px) {
    .slider {
        margin-top: 50px;
    }

    .slider-track {
        animation-duration: 20s;
    }
}