/* -------------------------
  re-made.css
---------------------------*/
/* ▼ジャンプMEMO */
/* -- hero -- */
/* -- intro -- */
/* -- line up -- */



/* -- hero -- */
.series_hero_wrap {
    display: flex;
    width: 100%;
    height: 100vh;
    margin-bottom: 100px;
}
.series_hero_title {
    width: 35%;
    background-color: #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: #404040;
}
.title_inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    text-align: left;
    gap: 1rem;
}
.title_inner div {
    font-size: 1.8rem;
}
.title_inner h2 {
    font-size: 4.1rem;
    margin-bottom: 0.5rem;
    font-weight: normal;
    letter-spacing: 0.3rem;
}
.title_inner p {
    font-size: 1.5rem;
}
.series_hero_img {
    width: 65%;
    overflow: hidden;
}
.series_hero_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------- */

@media screen and (max-width: 991px) {
    .series_hero_wrap {
        flex-direction: column-reverse; 
        height: auto;
        margin-bottom: 60px;
    }
    .series_hero_title,
    .series_hero_img {
        width: 100%;
        height: auto;
    }

    .title_inner {
        align-items: center;
    }
    .title_inner div {
        font-size: 1.6rem;
    }
    .title_inner h2 {
        font-size: 3rem;
        letter-spacing: 0.15rem;
        margin-bottom: 0.1rem;
    }
    .title_inner p {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }
    .series_hero_img img {
        height: auto;
    }
}

@media screen and (max-width: 575px) {
    .series_hero_wrap {
        margin-bottom: 25px;
    }
}

@media screen and (max-width: 375px) {
    .series_hero_wrap {
        margin-bottom: 20px;
    }
    .title_inner {
        gap: 0.8rem;
    }
    .title_inner div {
        font-size: 1.5rem;
    }
    .title_inner h2 {
        font-size: 2.5rem;
        margin-bottom: 0.2rem;
    }
}



/* -- intro -- */
.intro_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 150px;
}
.intro_titlebox {
    font-size: 3rem;
    font-weight: normal;
    margin-bottom: 30px;
    padding-left: 2%;
}
.intro_titlebox_border {
    border-bottom: 1px solid #231815;
    padding-bottom: 25px
}
.intro_title_sub {
    display: block;
    font-size: 1.6rem;
    margin-top: 15px;
}
.intro_txtbox {
    margin-left: 3%;
    margin-right: 3%;
}
.intro_txtbox p {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    line-height: 2;
}
/* 左カラム */
.intro_wrap > div:first-child {
    flex: 0 0 58%;
}
/* 右カラム */
.info_img {
    flex: 0 0 45%;
    margin-left: 4%;
}

/* -------- */

@media screen and (max-width: 991px) {
    .intro_wrap {
        margin-bottom: 100px;
    }
    .intro_titlebox {
        font-size: 2.5rem;
        margin-bottom: 25px;
    }
    .intro_title_sub {
        font-size: 1.5rem;
    }
    .intro_txtbox {
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .intro_txtbox p {
        font-size: 1.3rem;
    }
    .info_img {
        margin-left: 3%;
    }
    .view_more_btn {
        padding: 0.8rem 2.5rem;
        font-size: 1.3rem;
    }

}

@media screen and (max-width: 575px) {
    .intro_wrap {
        flex-direction:     column-reverse;
        margin-bottom: 80px;
        padding: 0 1rem;
    }
    .intro_titlebox {
        font-size: 2.4rem;
        margin-top: 10px;
        margin-bottom: 25px;
        text-align: center;
    }
    .intro_title_sub {
        font-size: 1.3rem;
        margin-top: 12px;
    }
    .intro_titlebox_border {
        padding-bottom: 25px
    }
    .intro_txtbox {
        margin-right: 0;
    }
    .intro_txtbox p {
        font-size: 1.4rem;
        padding-left: 0;
    }
    .info_img {
        margin: 20px 0;
    }
    .info_img img {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 375px) {
    .intro_titlebox {
        font-size: 2.4rem;
    }
    .intro_title_sub {
        font-size: 1.3rem;
    }
}



/* ▼公式シリーズ用css
 「freepage-series.css」 */
.series_lineup_list_item a:hover {
    text-decoration: none!important;
    opacity: 0.7;
}

@media screen and (min-width: 769px) {
    .series_lineup_list_item {
        width: 21%!important;
    }
}



/* -- line up -- */
.series_read {
    font-size: 1.5rem;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    line-height: 2.5;
}
.item_price_box {
    margin-top: 2px;
}
.item_price {
    font-size: 15px;
}
.item_price_tax {
    font-size: 12px;
}

/* 色玉レイアウト */
.color-variants {
  margin-top: 8px;
  margin-bottom: 6px;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}
.color-dot {
  position: relative;
  width: 22px;/* 枠＋余白を含む */
  height: 22px;
  border-radius: 50%;
  border: 1px solid transparent; 
  box-sizing: border-box;
  cursor: pointer;
}
.color-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  transform: translate(-50%, -50%);
}
/* 木目風グラデーション */
.color-black::before {
  background: linear-gradient(135deg, #212528, #101214);
}
.color-white::before {
  background: linear-gradient(135deg, #EBF1F1, #C7D1D1);
}
.color-walnut::before {
  background: linear-gradient(135deg, #483829, #2E241A);
}
.color-natural::before {
  background: linear-gradient(135deg, #DCB888, #B89266);
}

/* 選択時 */
.color-dot.selected {
  border-color: #444;
  background-color: #fff;/* 間の余白 */
}

/* -------- */

@media screen and (max-width: 991px) {
    .series_read {
        font-size: 1.3rem;
        margin-top: 20px;
        margin-bottom: 20px;
        line-height: 2.2;
    }
    .color-variants {
        gap: 6px;
    }
}

@media screen and (max-width: 575px) {
    .sec_series {
        margin-bottom: 100px!important;
    }
    .series_read {
        text-align: left;
    }
}
@media screen and (max-width: 375px) {
    .series_read {
        margin-top: 10px;
        margin-bottom: 15px;
        line-height: 2;
    }
    .sec_series {
        margin-bottom: 60px!important;
    }
}

/* -- detail -- */

/* -------- */

@media screen and (max-width: 991px) {}

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

@media screen and (max-width: 575px) {}

@media screen and (max-width: 375px) {}