@charset "utf-8";

/**********
** root
***********************************/

:root {
  /* color */
  --black: #000;
  --black2: #3a3a3a;
  --color-gray: #ededea;
  --color-gray2: #6F809A;
  --color-blue: #998370;
  --color-cream: #8b6767;
  --color-pink: #b9b692;

  /* font-family */
  --font-main: "Noto Sans JP", sans-serif;
  --font-sub: "Marcellus", serif;
  --font-en: "Cormorant Garamond", system-ui;
  --font-mincho: "Shippori Mincho", serif;
}

#ra41{
  font-family: 'Noto Sans JP' !important;
}

#ra41 h2,
#ra41 h3,
#ra41 h4 {
  font-family: "Shippori Mincho", serif !important;
}

.bx-main {
  color: var(--black);
}

a {
  transition: 0.3s;
}

a:hover {
  opacity: 0.7;
  text-decoration: none; /* ホバー時も下線を消す */
}

.bx-mv_img,
.bx-wrap_left,
.bx-links {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
.fadeIn {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

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

.u-mobile {
  display: none;
}

.u-desktop {
  display: block;
}

@media (max-width: 521px) {
  .u-mobile {
    display: block;
  }
  .u-desktop {
    display: none;
  }
}

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

.bx-wrap {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  background: url(../img/241008/wrap_bg.webp) repeat top/contain;
}

.bx-wrap_center {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.bx-section,
.bx-section + .bx-section {
  margin-top: -90px;
  padding-top: 90px;
}

.bx-item + .bx-section {
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 1080px) {
  .bx-wrap {
    grid-template-columns: 40% 45% !important;
  }

  .bx-wrap_right {
    display: none;
  }
}

@media (max-width: 769px) {
  .bx-wrap {
    display: block !important;
  }

  .bx-section,
  .bx-section + .bx-section {
    margin-top: -120px;
    padding-top: 120px;
  }
}

/**********
** bx-wrapRight
***********************************/

.bx-wrapRight {
  position: sticky;
  top: 0%;
  left: 0;
  height: 100vh;
}

.bx-wrapRight_content {
  position: sticky;
  top: 10vw;
  width: 66%;
  margin-inline: auto;
}

/**********
** bx-wrapLeft
***********************************/

.bx-wrapLeft {
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
}

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

.bx-wrapLight_img {
  height: 100%;
}

.bx-wrapLight_img img {
  aspect-ratio: 1012 / 1856;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  opacity: 0;
  animation: fadeAnime 12s ease infinite;
}

.bx-wrapLight_img img:nth-child(1) {
  animation-delay: 0s;
}
.bx-wrapLight_img img:nth-child(2) {
  animation-delay: 4s;
}
.bx-wrapLight_img img:nth-child(3) {
  animation-delay: 8s;
}
.bx-wrapLight_img img:nth-child(4) {
  animation-delay: 12s;
}

@keyframes fadeAnime {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  32% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/**********
** bx-mv
***********************************/

.bx-mv {
  position: relative;
}

.bx-mv_img {
  width: 100%;
}

.bx-mv_img img {
  aspect-ratio: 750 / 750;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.bx-mv_img_1 img {
  width: 100%;
  height: 100%;
  padding: 4%;
  margin-top: 7%;
}

/**********
** bx-mv-intro
***********************************/

.bx-mv-intro {
  text-align: center;
}

.bx-mv-intro_wrap {
  padding-block: 50px;
  background-color: var(--color-gray);
}

.bx-mv-intro_catch {
  font-size: 16px;
  font-weight: 600;
  line-height: calc(57 / 32);
}

.bx-mv-intro_text {
  margin-top: 20px;
  margin-inline: auto;
  font-size: 13px;
  line-height: 2em;
}

.bx-intro_text_1 {
  margin-top: 9px;
  margin-inline: auto;
  font-size: 14px;
}


@media screen and (max-width: 769px) {
  .bx-mv-intro_wrap {
    padding-bottom: 0;
  }
}

/**********
** bx-centerLinks
***********************************/

.bx-centerLinks {
  margin-top: 70px;
  display: none;
}

@media (max-width: 1080px) {
  .bx-centerLinks {
    display: block;
  }
}

/**********
** bx-links
***********************************/

.bx-links_items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}

.bx-links_item img {
  aspect-ratio: 750 / 751;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

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

.box19 {
  position: relative;
  padding:0.25em 1em;
  margin-top: 5%;
}
.box19:before,.box19:after{ 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
  margin: 0 10% 0 10%;
}
.box19:before{
  border-left: solid 1px #000000;
  border-top: solid 1px #000000;
  top:0;
  left: 0;
}
.box19:after{
  border-right: solid 1px #000000;
  border-bottom: solid 1px #000000;
  bottom:0;
  right: 0;
}
.box19 p {
  margin: 0; 
  padding: 0;
}

.box8 {
  padding: 4% 2%;
  margin: 3% 6%;
  color: #232323;
  background: #f3d9c2;
  border-left: solid 10px #f3d9c2;
  line-height: normal;
  font-size: 23px;
  letter-spacing: unset;
}

.copy_text {
  font-size: 19px;
  letter-spacing: 2px;
  line-height: normal;
}

.underline_bold{
  margin: 0 6%;
  border-bottom: 13px solid #f3d9c2;
  }

.bx-item_wrap {
  background: url(../img/240924/item1_bg.webp) repeat top/cover;
  padding-bottom: 100px;
}

#item2 .bx-item_wrap {
  background: url(../img/240924/item2_bg.webp) repeat top/cover;
  margin-top: 0;
}

#item3 .bx-item_wrap {
  margin-top: 0;
}

#item4 .bx-item_wrap {
  margin-top: 0;
}

.bx-item_title {
  margin-inline: auto;
  width: calc(250 / 710 * 100%);
}

.bx-item_title img {
  aspect-ratio: 250 / 147;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.bx-item_main {
  margin-top: 20px;
  padding-inline: 20px;
}

.bx-item_main img {
  aspect-ratio: 750 / 962;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.bx-item_price {
  margin-top: 100px;
}

.bx-item_lists {
  margin-top: 80px;
}

@media screen and (max-width: 769px) {
  .bx-item {
    max-width: 500px;
    margin-inline: auto;
  }
}

/**********
** bx-media
***********************************/

.bx-media {
  position: relative;
}

.bx-media_contents {
  margin-top: -15px;
}

.bx-media_contents + .bx-media_contents {
  margin-top: 14vw;
}

.bx-media_title {
  font-size: clamp(20px, 1.7vw, 26px);
  letter-spacing: ;
  color: white;
  white-space: nowrap;
  margin-bottom: 0;
}

.bx-media_title span {
  background-color: var(--color-blue);
  padding-inline: 8px;
}

.bx-media_title span ~ span {
  display: inline-block;
  margin-top: 4px;
}

.bx-media_title.bx-media_title--2 span {
  background-color: var(--color-gray2);
}

.bx-media_title.bx-media_title--3 span {
  background-color: var(--color-pink);
}

.bx-media_title.bx-media_title--4 span {
  background-color: var(--color-cream);
}

.bx-media_text {
  margin-top: 30px;
  margin-left: 20px;
  width: calc(200 / 1400 * 100vw);
}

.bx-media_text.bx-media_text--2 {
  margin-right: 20px;
  margin-left: auto;
}

.bx-media_text p {
  font-size: 14px;
  line-height: calc(54 / 28);
  letter-spacing: 0.06em;
}

.bx-media_img {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(230 / 1400 * 100vw);
  max-width: 250px;
}

.bx-media_img.item6 {
  width: calc(240 / 1400 * 100vw);
  max-width: 270px;
}

.bx-media_img.item3 {
  max-width: 270px;
}

.bx-media_img.item5 {
  width: calc(250 / 1400 * 100vw);
  max-width: 315px;
}

.bx-media_img.item2 {
  width: calc(244 / 1400 * 100vw);
  max-width: 290px;
}

.bx-media_img.bx-media_img--2 {
  top: 230px;
  left: 0;
  right: initial;
}

.bx-media_img img {
  aspect-ratio: 342 / 580;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.bx-media_img.item5 img {
  aspect-ratio: 414 / 580;
  margin-top: -10px;
}

.bx-media_img.item3 img {
  aspect-ratio: 396 / 580;
}

.bx-media_img.item2 img {
  aspect-ratio: 425 / 580;
  margin-top: -10px;
}

.bx-media_img.item4 img {
  aspect-ratio: 414 / 906;
}

@media screen and (min-width: 1700px) {
  .bx-media_text p {
    font-size: 16px;
    line-height: calc(54 / 28);
  }
}

@media screen and (max-width: 1080px) {
  /* .bx-media_contents + .bx-media_contents {
    margin-top: 160px;
  } */

  .bx-media_text {
    width: calc(200 / 1080 * 100vw);
  }

  .bx-media_img {
    width: calc(280 / 1400 * 100vw);
  }
}

@media screen and (max-width: 769px) {
  .bx-media_contents + .bx-media_contents {
    margin-top: 30vw;
  }

  .bx-media_text {
    width: 175px;
  }

  .bx-media_img,
  .bx-media_img.item2,
  .bx-media_img.item3,
  .bx-media_img.item4,
  .bx-media_img.item5 {
    width: calc(194 / 375 * 100vw);
  }

  .bx-media_img.item7 {
    width: calc(188 / 375 * 100vw);
  }

  .bx-media_img.item6 {
    width: calc(190 / 375 * 100vw);
  }
}

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

.bx-btn {
  font-size: 15px;
  font-weight: 300;
  line-height: calc(25 / 15);
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: white !important;
  display: inline-table;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 120px;
  background-color: #000000;
  border-radius: calc(infinity * 1px);
  text-align: center;
  padding-block: 2px;
  padding-inline: 10px;
}

.bx-btn.bx-btn--2 {
  background-color: var(--color-gray2);
}

.bx-btn.bx-btn--3 {
  background-color: var(--color-pink);
}

.bx-btn.bx-btn--4 {
  background-color: var(--color-cream);
}

.bx-btn::after {
  content: "";
  width: 8px;
  height: 5px;
  background: url(../img/241008/icon_arrow.webp) no-repeat center/contain;
}

.bx-btn:hover {
  text-decoration: none;
}

/**********
** bx-price
***********************************/

.bx-price_imgBox {
  width: calc(655 / 750 * 100%);
  margin-inline: auto;
  position: relative;
}

.bx-price_img img {
  aspect-ratio: 499 / 730;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.bx-price_imgColor {
  position: absolute;
  top: 0;
  right: -30px;
  width: 23px;
}

.bx-price_imgColor img {
  aspect-ratio: 46 / 727;
  object-fit: contain;
  width: 100%;
  height: auto;
}

.bx-price_textBox {
  text-align: center;
}

.bx-price_name.itemname {
  font-size: 14px;
  max-width: 290px;
  margin: 15px auto 0;
  white-space: wrap;
}

.bx-price_box .price,
.bx-price_box .price::after {
  font-size: 25px;
}

.bx-price_btn {
  margin-top: 10px;
  text-align: center;
}

.bx-main-carousel{
  width: calc(94% - 2rem);
}

/**********
** bx-list
***********************************/

.bx-list_title {
  font-size: 22px;
  font-weight: 300;
  text-transform: capitalize;
  color: #000000;
  text-align: left;
  margin-left: 5%;
}

.bx-list_title.color2 {
  color: var(--color-gray2);
}

.bx-list_title.color3 {
  color: var(--color-pink);
}

.bx-list_title.color4 {
  color: var(--color-cream);
}

.bx-list_items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  padding-inline: 24px;
}

.bx-list_link:hover {
  text-decoration: none;
}

.bx-list_img img {
  aspect-ratio: 327 / 410;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.bx-list_name.itemname {
  font-size: 16px;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 行数を指定 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.bx-list_box .price {
  font-size: 22px;
}

.mt-20 {
  margin-top: -20px;
}

.mt170 {
  margin-top: 170px;
}

.bx-list_btn {
  margin-top: 60px;
  text-align: center;
}
.bx-list_btn a {
  border: 1px solid #000;
  background-color: #fff;
  padding: .4em;
  font-size: 16px;
  width: 63%;
  margin-inline: auto;
  display: block;
  position: relative;
}

.bx-list_btn a::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.bx-list_btn a:hover{
  text-decoration: none;
}

.footer {
  padding-bottom: 3em;
}

.feature_nav ul {
  display: flex;
  column-gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
  padding-bottom: 10%;
}

.brandTop {
  width: 70%;
  font-size: 16px;
  background-color: #000;
  margin: 0 auto;
}

.brandTop a {
  align-items: center;
  justify-content: center;
  display: inline-flex;
  color: #fff !important;
  width: 100%;
  height: 35px;
  position: relative;
  font-size: 12px;
}

.feature_nav h2 {
  text-align: center;
}

.morebtn{
  text-align: center;
  margin-top: 30px;
}

.morebtn img{
  width: 64%;
  height: auto;
}