/* html, body {
  overflow-x: hidden;
} */

/* * { outline: 1px solid red; } */


/* ---------------------------------------------- */
/* key-visual */
/* ------------------------- */

#top {
height: 100vh;
}


h1 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 2;
    position: absolute;
    top: 78%;
    left: 15%;
    display: block;
}

/* スライドショー枠 */


.slideshow {
    position: absolute;
    top: 55%;       /* 縦中央基準 */
    left: 60%;      /* 中央より右に配置（60%で調整） */
    transform: translate(-50%, -50%);
    width: 53vw;    /* 画面幅の53% */
    aspect-ratio: 5 / 3; /* 比率を維持 */
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 300px;
}

/* 画像設定 */
.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 4s ease-in-out;
}

.slideshow img.active {
  opacity: 1;
}

@media only screen and (max-width: 960px) {
        h1 {
        text-align: right;
        right: 8vw;
        top: 86%;        
        }

        /* スライドショー枠 */
        .slideshow {
        position: relative; /* ← 中央配置にするなら absolute は外す */
        top: 47%;
        left: 50%;
        width: 84%;        /* 画面幅いっぱい */
        /*max-width: 647px;   大きすぎ防止の上限 */
        aspect-ratio: 9 / 10; /* デフォは横長比率 */
        overflow: hidden;
        }

        /* 画像設定 */
        .slideshow img {
        position: absolute;
        object-fit: cover; /* 縦横比を保ちつつ枠いっぱいに */
        object-position: center;    /* 中央を基準にトリミング */
        opacity: 0;
        transition: opacity 4s ease-in-out;
        }
    
}

@media only screen and (max-width: 767px) {
    h1 {
        font-size: 1.8rem;
        right: 7vw;
        top: 83%;  
    }


    .slideshow {
        width: 84vw;            /* ビューポート幅いっぱい */
        height: 65vh;           /* ビューポート高さいっぱい */
        position: relative;
        /* overflow: hidden; */
        display: block; 
            /* aspect-ratio: 20 / 27; */
    }

    .slideshow img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;             /* 幅いっぱい */
        height: 100%;            /* 高さいっぱい */
        object-fit: cover;       /* 切り抜いて画面いっぱいに表示 */
  } 

}



.free-shipping {
    text-align: center;
    font-size: 1.4rem;
    padding-bottom: 10px;
}

@media only screen and (max-width: 767px) {
    .free-shipping {
        padding-bottom: 5px;
    }
}


 /* ---------------------------------------------- */
/* バナー banner-circle */
/* ------------------------- */

.banner_circle {
    position: relative;
}

.banner_circle_wrapper {
    background-color: #FAE37D;
    border-radius: 50%;/*角丸*/
    width: 130px;
    height: 130px;
    position: relative;
    left: 85%;
}

@media only screen and (max-width: 1100px) {
    .banner_circle_wrapper {
        left: 81%;
    }
}

@media only screen and (max-width: 960px) {
    .banner_circle {
        padding-top: 4em;
    }
    .banner_circle_wrapper {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media only screen and (max-width: 767px) {
    .banner_circle {
        padding-top: 5em;
    }
}



.center-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
}

.circle-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 130px;
  height: 130px;
  animation: rotate 20s linear infinite;
}

.circle-text text {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    fill: #133463;
}

/* 円を回転させるアニメーション */
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}





/* ---------------------------------------------- */
/* ニュース */
/* ------------------------- */

.top-background{
    background-image: url(../img/top-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center bottom; 
    width: 100%;
}


#top_news h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding-right: 40px;
}

#top_news time {
    font-family: "Montserrat", sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    padding-right: 32px;
}

#top_news h3 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
}

#top_news {
    border-top: solid 1px #C4C4C4;
}

#top_news .container {
    display: flex;
    padding-top: 70px;
    padding-left: 3rem;
    padding-right: 3rem;
}

.top_news_wrapper {
    display: flex;
    padding-bottom: 8px;
}

@media only screen and (max-width: 960px) {
    #top_news h2 {
        padding-bottom: 30px;
    }
    
    #top_news .container {
        display: block;
    }
}

@media only screen and (max-width: 767px) {

    #top_news .container {
        padding-top: 40px;
    }
    .top_news_wrapper {
        display: block;
        padding-bottom: 12px;
    }
}


/* ---------------------------------------------- */
/* 人気商品 */
/* ------------------------- */

#bs h2 {
    font-size: 2.8rem;
}

#bs .deco {
    color: #D9D9D9;
}

#bs p {
    font-family: "Shippori Mincho", serif;
    font-size: 2rem;
    font-weight: 400;
}

#bs .bs-4 p,
#bs .bs-5 p,
#bs .bs-6 p {
    font-size: 1.8rem;
}

#bs {
    margin-top: 150px;
}

.bs-title {
    max-width: 1000px;
    margin: 0 auto;
    padding-left: 3rem;
}

#bs .bs-top_wrapper {
    position: relative;
}

#bs a:hover {
    opacity: 0.7;
    transition: opacity 0.7s ease;
}

#bs .bs-1 {
    position: relative;
    top: -60px;
    z-index: 10;
}

#bs .bs-2 {
    position: relative;
    top: -220px;
    z-index: 8;
}

#bs .bs-3 {
    position: relative;
    top: -390px;
}

.bs-wrapper {
    width: 44vw;
}

.bs-wrapper picture {
    display: block;
    width: 100%;
    aspect-ratio: 570 / 417; 
    overflow: hidden;
}

.bs-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* 中央を維持してトリミング */
    object-position: center; /* 常に中央部分を表示 */
    display: block;

    /* max-width: 570px; */
}


#bs .bs-1,
#bs .bs-3 {
   margin: 0 0 0 auto;
}

.bs-1 picture,
.bs-3 picture {
    border-radius: 20px 0 0 20px; 
}

.bs-2 picture {
    border-radius: 0 20px 20px 0; 
}

#bs .bs-2 .bs-item {
    justify-content: flex-end;
    padding-right: 34px;
}



@media only screen and (max-width: 960px) {
    #bs {
        margin-top: 100px;
    }


    #bs h2 {
    font-size: 2.5rem;
    }

    #bs .bs-title {
        padding-bottom: 7rem;
    }


    #bs .bs-top_wrapper {
    display: flex;
    flex-direction: column;
    gap: 120px; 
    }

    /* PC用の重なりをリセット */
    #bs .bs-1,
    #bs .bs-2,
    #bs .bs-3 {
        position: static;
        top: auto;
        width: 70%;   /* 好きな横幅 */
        margin: 0;    /* PC用のauto解除 */

    }

     /* 交互に配置 */
    #bs .bs-1,
    #bs .bs-3 {
        align-self: flex-end; /* 右寄せ */
    }

    #bs .bs-2 {
        align-self: flex-start; /* 左寄せ */
    }

}

@media only screen and (max-width: 767px) {
    .bs-title {
        padding-left: 1.5rem;
    }
    .bs-title .deco {
        padding-top: 0;
    }
     #bs .bs-top_wrapper {
        gap: 110px;
     }

    #bs .bs-1,
    #bs .bs-2,
    #bs .bs-3 {
        width: 90%;
    }
    #bs p {
        font-size: 1.7rem;
    }
    #bs .bs-4 p, #bs .bs-5 p, #bs .bs-6 p {
        font-size: 1.6rem;
    }
}


/* 人気商品のボタン */

#bs .bs-btn {
    background: #92979D;
    cursor: pointer;
    display: block;
    width: 50px;
    border-radius: 50%;
    border: solid 1px #C4C4C4;
    aspect-ratio: 1/1;
    position: relative;
    margin-left: 24px;
}

@media only screen and (max-width: 960px) {
    #bs .bs-btn {
        display: none;
    }
}

#bs a:hover .bs-btn {
    background: #81868B;
    border: solid 1px #ABABAB;
     transform: scale(1.1,1.1);
     /* left: 5px; */
     transition: transform 1s ease; /* なめらかに */
     /* opacity: 0.9; */
}

#bs .bs-btn:before {
    padding-bottom: 0px;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    /* bottom: 0; */
    content: "";
    height: 7px;
    width: 7px;
    /* margin: auto; */
    position: absolute;
    right: 46%;
    top: 43%;
    transform: rotate(45deg);
    transition: right .3s;
}

.bs-item {
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-left: 34px;
}



#bs .bs-4 picture,
#bs .bs-5 picture,
#bs .bs-6 picture {
    aspect-ratio: 1 / 1;
    border-radius: 20px;
}

.bs-4 .bs-item,
.bs-5 .bs-item,
.bs-6 .bs-item {
    justify-content: space-between;
    padding-left: 5px;
    padding-right: 5px;
}

.bs-bottom_wrapper {
    display: flex;
    position: relative;
    gap: 48px;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: -300px;
    padding-bottom: 291px;
    padding-left: 10px;
    padding-right: 10px;
}

.bs-bottom_wrapper .bs-5 {
    position: relative;
    top: 83px;
}

.bs-bottom_wrapper .bs-6 {
    position: relative;
    top: 166px;
}

@media only screen and (max-width: 960px) {
    #bs .bs-bottom_wrapper {
        display: flex;
        flex-direction: column;
        gap: 0px;
        margin-top: 120px;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 320px;
    }

    .bs-item {
        padding-top: 14px;
        padding-left: 10px;
    }

    .pc {
        display: none;
    }

    #bs .bs-4 picture,
    #bs .bs-5 picture,
    #bs .bs-6 picture {
        aspect-ratio: 570 / 417; /* 初期値：スマホは同じ比率 */
    }

    #bs .bs-4 picture,
    #bs .bs-6 picture {
        border-radius: 0 20px 20px 0; /* ← 左上・左下だけ丸み */
    }

    #bs .bs-5 picture {
        border-radius: 20px 0 0 20px; 
    }

    #bs .bs-4,
    #bs .bs-5,
    #bs .bs-6 {
        width: 60%;
        margin: 0;
    }

    #bs .bs-4,
    #bs .bs-6 {
        align-self: flex-start; /* 右寄せ */
    }

    #bs .bs-5 {
        align-self: flex-end; /* 左寄せ */
    }


    #bs .bs-4 .bs-item p,
    #bs .bs-6 .bs-item p {
        text-align: right;
        padding-right: 10px;
        margin-left: auto; /* flex内で要素を右に寄せる */
    }

 }

@media only screen and (max-width: 767px) {
     #bs .bs-bottom_wrapper {
        margin-top: 110px;
        padding-bottom: 280px;
     }

     #bs .bs-bottom_wrapper .bs-item {
        padding-top: 10px;
     }


    #bs .bs-4,
    #bs .bs-5,
    #bs .bs-6 {
        width: 75%;
    }
}




/* ---------------------------------------------- */
/* ご利用ガイド */
/* ------------------------- */

#top_guide {
    margin-top: -2px;
    background-color: #283D5A;
    background-image: url(../img/guide-background.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#top_guide .container {
    padding: 140px 30px;
}

#top_guide h2 {
    font-size: 2.5rem;
}

#top_guide h3 {
    font-size: 2.3rem;
}

#top_guide h2,
#top_guide h3 {
    text-align: center;
}

#top_guide .deco {
    color: #ABABAB;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    #top_guide .container {
        padding: 100px 0;
    }
    #top_guide .deco {
        padding-top: 0;
    }
}


.top_guide-list,
.top_procure-list_wrapper
 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 80px;
}

.top_guide-item,
.top_procure-item
 {
    width: 270px;
}


.top_guide-icon,
.top_guide-item dt,
.top_procure-circle,
.top_procure-item dt
 {
    text-align: center;
}

.top_guide-item dt,
.top_procure-item dt {
    font-family: "Shippori Mincho", serif;
    font-size: 2rem;
    font-weight: 500;;
    padding-bottom: 30px;
    padding-top: 10px;
}

.top_guide-icon img {
    width: 30px;
}

.top_guide-icon_gift img {
    width: 36px;
}

.top_guide-item dd,
.top_procure-item dd {
    margin-left: 0;
}



/* ご利用ガイドボタン（仕入れ共通） */

.top_guide-btn {
    border-radius: 25px;
    border: solid 1px #C4C4C4;
    display: block;
    height: 50px;
    margin-top: 60px;
    padding-top: 9px;
    position: relative;
    text-align: left;
    width: 270px;
}

.top_guide-item_first-user .top_guide-btn {
    margin-top: 30px;
}

.top_guide-btn span {
    display: block;
    font-family: "Shippori Mincho", serif;
    padding-left: 26px;
}

.top_guide-btn span::after {
    padding-bottom: 0px;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    content: "";
    height: 7px;
    width: 7px;
    margin: auto;
    position: absolute;
    right: 26px;
    top: 43%;
    transform: rotate(45deg);
    transition: right .5s;
}

.top_guide-btn span:hover::after {
    right: 22px;
}

.top_guide-btn_goods img {
    width: 50%;
}

@media only screen and (max-width: 960px) {
    .top_guide-list,
    .top_procure-list_wrapper
     {
        display: grid;
        grid-template-columns: repeat(2, 270px);
        justify-content: center;
        gap: 100px;
    }
     /* 3つ目は1列目に配置 → 左を揃える */
    .top_guide-item:nth-child(3),
    .top_procure-item:nth-child(3) {
        grid-column: 1 / 2;
    }

}

@media (max-width: 767px) {
    .top_guide-list,
    .top_procure-list_wrapper {
        gap: 85px;
    }
    .top_guide-btn {
        margin-top: 30px;
    }

    .top_guide-list,
    .top_procure-list_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center; /* 中央寄せ */
    }

    .top_guide-item,
    .top_procure-item {
        width: 270px;
    }
}


/* ---------------------------------------------- */
/* 仕入れについて */
/* ------------------------- */

.top_procure-list {
    margin-top: 100px;
    position: relative;
}

.top_procure-list .border {
    border-bottom: solid 1px #C4C4C4;
    display: block;
    width: 76px;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
}


.top_procure-list h3 {
    padding-top: 30px;
}

.top_procure-list_wrapper {
    margin-top: 60px;
}


.top_procure-circle img {
    width: 150px;
}

.top_procure-item .top_guide-btn {
    margin-top: 30px;
}

.top_procure-item .top_procure-oem-btn {
    margin-top: 145px;
}

@media only screen and (max-width: 960px) {
    .top_procure-list_wrapper {
        margin-top: 80px;
    }
    .top_procure-item .top_procure-oem-btn {
        margin-top: 30px;
    }
}