@charset "utf-8";

/**********
** base
***********************************/

:root {

  /* color */
  --black: #101010;
  --black2: #595959;
  --white: #fff;
  --brown: #754E21;
  --brown2: #A5896E;
  --beige: #F4F2EC;
  --beige2: #EBE5D7;


  /* font-family */
  --font-main: fot-tsukuardgothic-std, sans-serif;
  --font-sub: yu-gothic-pr6n, sans-serif;
}

.bx-main {
  color: var(--black);
  font-family: var(--font-main);
  background-color: #EBE5D7;
}
.itemname,
.price {
  font-family: var(--font-sub);
}

a {
  transition: .3s;
}

a:hover {
  opacity: .7;
}

.u-mobile {
  display: none;
}

.u-desktop {
  display: block;
}

.u-mt {
  margin-top: 140px;
}


@media(max-width: 769px) {
  a:hover {
    opacity: 1;
  }

  .u-mobile {
    display: block;
  }
  .u-desktop {
    display: none;
  }

  #be31 .h1Class {
    margin: .5rem 0 !important;
    padding-left: 10px;
  }
}

/**********
** layout
***********************************/

.bx-inner {
  max-width: 956px;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

/**********
** bx-btn
***********************************/

.bx-btn {
  font-size: 18px;
  font-weight: 700;
  line-height: calc(24 / 18);
  color: var(--white);
  background-color: var(--brown);
  border-radius: calc(infinity * 1px);
  width: min(100%, 269px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 10px;
  margin-inline: auto;
  position: relative;
}
.bx-btn.bx-btn__sm {
  font-size: 16px;
  width: min(100%, 198px);
}
.bx-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  width: 8px;
  height: 15px;
  background: url(../feature/belluna/be31/img/250819/icon_arrow_right.webp?$staticlink$) no-repeat center center / contain;
}
.bx-btn:hover {
  text-decoration: none;
}

/**********
** bx-mv
***********************************/
.bx-mv{
  padding-top: 35px;
  position: relative;
}
.bx-mv::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../feature/belluna/be31/img/250819/bg_mv.webp?$staticlink$) no-repeat center center / cover;
}
.bx-mv_inner {
  width: min(100%, 1152px);
  margin-inline: auto;
  position: relative;
}
.bx-mv_contents {
  display: grid;
  width: min(100%, 420px);
  margin-inline: auto;
}
.bx-mv_img {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  border-top-left-radius: calc(infinity * 1px);
  border-top-right-radius: calc(infinity * 1px);
  overflow: hidden;
  width: min(100%, 599px);
  margin-top: -80px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
.bx-mv_img img {
  aspect-ratio: 599 / 746;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.bx-mv_catch {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  width: min(100%, 308px);
  height: 100%;
  display: flex;
  align-items: center;
  margin-inline: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
.bx-mv_catch img {
  aspect-ratio: 501 / 256;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.bx-mv_content {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  height: 100%;
  padding-block: 52px;
}
.bx-mv_lead {
  width: min(100%, 311px);
  margin-inline: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
.bx-mv_lead img {
  aspect-ratio: 463 / 134;
  object-fit: contain;
  width: 100%;
}
.bx-mv_leadText {
  margin-top: 23px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .01em;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

@media(min-width: 768px) {
  .bx-mv_inner {
    width: min(100%, 1192px);
    padding-inline: 20px;
    box-sizing: border-box;
  }
  .bx-mv_contents {
    grid-template-columns: min(calc(599 / 1440 * 100vw), 599px) 1fr;
    align-items: center;
    gap: 0 52px;
    width: auto;
    margin-inline: 0;
  }
  .bx-mv_img {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: min(100%, 599px);
    margin-top: 0;
    translate: 0 2px;
  }
  .bx-mv_catch {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: min(calc(501 / 1440 * 100vw), 501px);
    margin-inline: 0;
  }
  .bx-mv_content {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    padding-block: 0;
  }
  .bx-mv_lead {
    width: min(calc(463 / 1440 * 100vw), 463px);
    margin-left: 30px;
    margin-right: 0;
  }
  .bx-mv_leadText {
    font-size: min(calc(24 / 1440 * 100vw), 18px);
    letter-spacing: -0.1px;
  }
}
/**********
** bx-coupon
***********************************/

.bx-coupon {
  background-color: var(--brown2);
  position: relative;
}

.bx-coupon_img {
  width: min(100%, 375px);
  margin-inline: auto;
}
.bx-coupon_img img {
  aspect-ratio: 375 / 93;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
@media(min-width: 768px) {
  .bx-coupon_img {
    width: min(100%, 868px);
  }
  .bx-coupon_img img {
    aspect-ratio: 868 / 80;
  }
}

/**********
** bx-recommend
***********************************/

.bx-recommend_item {
  padding-block: 68px 74px;
}
.bx-recommend_item:nth-child(even) {
  background-color: var(--beige);
}
.bx-recommend_head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px 0;
}
.bx-recommend_point {
  width: min(100%, 235px);
  margin-inline: auto;
}
.bx-recommend_point img {
  aspect-ratio: 235 / 46;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.bx-recommend_title {
  width: min(100%, 304px);
  margin-inline: auto;
}
.bx-recommend_title img {
  aspect-ratio: 410 / 81;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.bx-recommend_content {
  margin-top: 36px;
}
@media(min-width: 768px) {
  .bx-recommend_item {
    padding-block: 100px;
  }
  .bx-recommend_title {
    width: min(100%, 410px);
  }
}

/**********
** bx-item
***********************************/

.bx-item {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.bx-item.bx-item__rev {
  gap: 38px;
}
.bx-item_img {
  width: min(100%, 385px);
  margin-inline: auto;
}
.bx-item_img img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.bx-item_link {
  display: flex;
  flex-direction: column;
  gap: 12px 0;
  width: min(100%, 343px);
  margin-inline: auto;
  text-decoration: none;
}
.bx-item_link:hover {
  text-decoration: none;
}
.bx-item_link.bx-item_link__end {
  justify-content: flex-end;
}
.bx-item_catch img {
  object-fit: contain;
  height: 100%;
}
.bx-item_subImg {
  text-align: center;
}
.bx-item_subImg img {
  object-fit: contain;
  height: 100%;
}
.bx-item_subImg.bx-item_subImg__pants,
.bx-item_subImg.bx-item_subImg__denim {
  margin-top: 35px;
}
.bx-item_infoBox {
  width: min(100%, 250px);
  margin-inline: auto;
  text-align: center;
}
.bx-item_name {
  font-size: 13px !important;
  font-weight: 500;
  line-height: calc(16 / 13);
}
.bx-item_name.itemname {
  overflow: unset;
  text-overflow: unset;
  white-space: unset;
}
.bx-item_btnBox {
  margin-top: 14px;
}
@media(min-width: 768px) {
  .bx-item {
    flex-direction: row;
  }
  .bx-item.bx-item__style {
    gap: 84px;
  }
  .bx-item.bx-item__rev {
    flex-direction: row-reverse;
  }
  .bx-item_img,
  .bx-item_link {
    margin-inline: 0;
  }
  .bx-item_subImg.bx-item_subImg__pants,
  .bx-item_subImg.bx-item_subImg__denim {
    margin-top: 0;
  }
}

/**********
** bx-anchor
***********************************/

.bx-anchor {
  padding-block: 71px 54px;
}
.bx-anchor_title {
  width: min(100%, 309px);
  margin-inline: auto;
}
.bx-anchor_title img {
  aspect-ratio: 529 / 171;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.bx-anchor_links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 15px;
  margin-top: 20px;
}
.bx-anchor_imgBox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 163px;
}
.bx-anchor_numImg {
  width: min(100%, 107px);
  margin-inline: auto;
}
.bx-anchor_numImg img {
  aspect-ratio: 107 / 30;
  object-fit: contain;
  height: 100%;
}
.bx-anchor_img {
  margin-top: 8px;
  margin-inline: auto;
  width: min(100%, 163px);
}
.bx-anchor_img img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.bx-anchor_text {
  margin-top: 32px;
  font-size: 15px;
  font-weight: bold;
  line-height: calc(25 / 16);
  text-align: center;
}
@media(min-width: 768px) {
  .bx-anchor {
    padding-block: 86px;
  }
  .bx-anchor_title {
    width: min(100%, 529px);
  }
  .bx-anchor_links {
    gap: 0 52px;
  }
  .bx-anchor_imgBox {
    max-width: 230px;
  }
  .bx-anchor_numImg,
  .bx-anchor_img {
    margin-inline: 0;
  }
  .bx-anchor_img {
    width: min(100%, 230px);
  }
  .bx-anchor_text {
    font-size: 16px;
  }
}

/**********
** bx-item-box
***********************************/

.bx-item-box {
  padding-block: 86px;
}
.bx-item-box:nth-child(odd) {
  background-color: var(--beige);
}
.bx-item-box_style {
  text-align: center;
}
.bx-item-box_style img {
  aspect-ratio: 327 / 59;
  object-fit: contain;
  height: 100%;
}
.bx-item-box_catch {
  margin-top: 15px;
  text-align: center;
}
.bx-item-box_catch img {
  object-fit: contain;
  height: 100%;
}
.bx-item-box_item {
  margin-top: 30px;
  width: min(100%, 320px);
  margin-inline: auto;
}
.bx-item-box_catch.bx-item-box_catch__pants {
  margin-top: 110px;
}
.bx-item-box_coordination {
    margin-top: 58px;
  }

@media(min-width: 768px) {
  .bx-item-box {
    padding-block: 110px;
  }
  .bx-item-box_item {
    width: auto;
  }
  .bx-item-box_catch.bx-item-box_catch__pants {
    margin-top: 0;
  }
  .bx-item-box_catch.bx-item-box_catch__pants + .ajaxSeq {
    margin-top: 110px;
  }
  .bx-item-box_coordination {
    margin-top: 64px;
  }
}

/**********
** bx-item2
***********************************/

.bx-item2 {
  padding-block: 125px;
  background-color: var(--beige);
}
.bx-item2_inner {
  max-width: 1046px;
}
.bx-item2_head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 26px 0;
  width: min(100%, 510px);
  margin-inline: auto;
}
.bx-item2_title img {
  aspect-ratio: 510 / 171;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.bx-item2_lead {
  font-size: 16px;
  font-weight: 700;
  line-height: calc(26 / 16);
  text-align: center;
}
.bx-item2_cards {
  display: grid;
  gap: 80px 0;
  width: min(100%, 335px);
  margin-top: 47px;
  margin-inline: auto;
}
.bx-item2_card:nth-child(4) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.bx-item2_link:hover {
  text-decoration: none;
}
.bx-item2_img {
  text-align: center;
}
.bx-item2_img img {
  object-fit: contain;
  height: 100%;
}
.bx-item2_infoBox {
  width: min(100%, 200px);
  translate: 60%;
  margin-top: -50px;
}
.bx-item2_card:nth-child(2) .bx-item2_infoBox {
  margin-top: -86px;
}
.bx-item2_card:nth-child(3) .bx-item2_infoBox {
  translate: 8%;
  margin-top: -66px;
}
.bx-item2_name {
  font-size: 13px !important;
  font-weight: 500;
  line-height: calc(16 / 13);
}
.bx-item2_name.itemname {
  overflow: unset;
  text-overflow: unset;
  white-space: unset;
}
.bx-item2_price {
  font-size: 16px !important;
  font-weight: 500;
  line-height: calc(24 / 16);
}
.bx-item2_btnBox {
  margin-top: 18px;
}
@media(min-width: 768px) {
  .bx-item2_cards {
    gap: 90px 10px;
    margin-top: 55px;
    margin-inline: 0;
    width: auto;
  }
  .bx-item2_card:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    max-width: 295px;
  }
  .bx-item2_card:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    max-width: 280px;
  }
  .bx-item2_card:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    max-width: 289px;
  }
  .bx-item2_card:nth-child(4) {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
  }
  .bx-item2_img img {
    width: 100%;
  }
}

/**********
** bx-coordination
***********************************/

.bx-coordination_inner {
  width: min(100%, 570px);
  margin-inline: auto;
}
.bx-coordination_link {
  background-color: var(--beige2);
  border-radius: 18px;
  padding: 20px;
  display: block;
}
.bx-coordination_link:hover {
  text-decoration: none;
}
.bx-coordination_titleImg {
  width: min(100%, 277px);
  margin-inline: auto;
  text-align: center;
  margin-top: 14px;
}
.bx-coordination_titleImg img {
  object-fit: contain;
  height: 100%;
}
.bx-coordination_content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 13px;
}
.bx-coordination_img img {
  aspect-ratio: 224 / 239;
  object-fit: contain;
  height: 100%;
}
.bx-coordination_info {
  width: min(100%, 198px);
  text-align: center;
}
.bx-coordination_name {
  font-size: 13px !important;
  font-weight: 500;
  line-height: calc(16 / 13);
}
.bx-coordination_name.itemname {
  overflow: unset;
  text-overflow: unset;
  white-space: unset;
}

.bx-common-price_itemName.itemname {
  white-space: unset;
}

.bx-coordination_price {
  font-size: 16px !important;
  font-weight: 500;
  line-height: calc(24 / 16);
}
.bx-coordination_btnBox {
  margin-top: 10px;
}
@media(min-width: 768px) {
  .bx-coordination_content {
    flex-direction: row;
    gap: 28px;
  }
}

/**********
** mv animation
***********************************/

.fadeIn {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/**********
** 関連アイテム
***********************************/

.bx-common-title {
  max-width: 270px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bx-sub-item {
  background-color: var(--color-blue3);
  padding: 80px 0px 50px;
}

.bx-item_sub {
  margin-top: 0px;
}

.bx-item-link_img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.bx-common-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 8px;
  row-gap: 16px;
  width: 100%;
}

.bx-item_items {
  margin-top: 30px;
}

@media (max-width: 767px) {
  /* スマホだけに適用したいスタイル */
  .bx-common-items {
    grid-template-columns: repeat(2, 1fr);
  }

  .bx-common-title img{
    width: 100%;
    height: 100%;
  }
}