@charset "UTF-8";

.main-wrapper {
overflow: unset;
}

/* ■ テキスト・フォント設定 ==================================================================================== */

body {
font-size: 1.6rem;
color: #8d97a0;
font-family: "Zen Kaku Gothic New", sans-serif;
}

/* フォームにもフォントを指定する場合（#Beta） */
input, select, textarea {
font-family: "Zen Kaku Gothic New",Sans-Serif;
}


.WF1 {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-optical-sizing: auto;
font-style: normal;
}


.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}


h1,h2,h3,h4,h5,h6,th,dt,strong,em {
font-weight: 700;
}

small {
font-size: calc(1.6rem * 0.9);
}

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

	html {
	font-size: calc(10 / 16 * 100%);
	}



}

@media print, screen and (min-width: 768px) {

	html {
	font-size: calc(9 / 16 * 100%);
	}



}

@media print, screen and (min-width: 1110px) {

	html {
	font-size: calc(10 / 16 * 100%);
	}

}


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

.BgWrapper {
    position: relative; /* 疑似要素の基準位置にするため */
    z-index: 1;         /* 中身の要素を上に重ねるため */
}

.BgWrapper::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url(../img/Bg_Visual_SP.jpg) no-repeat center center;
    background-size: 100% auto;
    z-index: -1; /* 背景を最背面に送る */
    pointer-events: none; /* タップをすり抜けさせる */
}

}


@media print, screen and (min-width: 768px) {

    .BgWrapper {
        background: url(../img/Bg_Visual_PC.jpg?ver=26101) center center / cover no-repeat fixed;
    }

	.CenterBoxWrap {
	background-image: url(../img/Bg_Center.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	box-shadow: 10px 0 15px -5px rgba(0, 0, 0, 0.1),
              -10px 0 15px -5px rgba(0, 0, 0, 0.1);
	}

}


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

	.PC {
	display: none;
	}

}


@media print, screen and (min-width: 768px) {

	.SP {
	display: none;
	}

}

/* InView --------------------------------------------------- */

.FadeMv1 {
opacity: 1.0 !important;
transform: translate(0,0) !important;
-webkit-transform: translate(0,0) !important;
transition: 1s;
}

.FadeMv2 {
opacity: 1.0 !important;
transform: translate(0,0) !important;
-webkit-transform: translate(0,0) !important;
transition: 1s;
}

.ItemMain {
opacity: 0;
}

.ItemSub {
opacity: 0;
transform: translate(0,100px);
-webkit-transform: translate(0,100px);
}

.ItemSub1 {
opacity: 0;
transform: translate(-100px,0);
-webkit-transform: translate(-100px,0);
}

.ItemSub2 {
opacity: 0;
transform: translate(100px,0);
-webkit-transform: translate(100px,0);
}

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

	.ItemSub1 {
	transform: translate(0,20px);
	-webkit-transform: translate(0,20px);
	}

	.ItemSub2 {
	transform: translate(0,20px);
	-webkit-transform: translate(0,20px);
	}

}

/* コンテナ =============================================================== */


/* ==========================================
   全体レイアウト (PC表示)
   ========================================== */



@media print, screen and (min-width: 768px) {

	.container {
	  display: grid;
	  /* 左(最小300px可変) | センター(400px固定) | サーチ(320px固定) | 右(最小150px可変) */
	  grid-template-columns: minmax(120px, 1fr) 340px 260px clamp(0px, calc((100vw - 768px) * 0.4), 150px);
	  width: 100%;
	  max-width: 100%;
	  align-items: start; /* カラムの高さを独立させる */
	}

	/* センター */
	.CenterBoxWrap {
	  width: 100%;
	  background-color: #fff;
	  position: relative;
      z-index: 1;
	}

	/* サーチ (画面上部に追従固定) */
	.SearchWrap {
	  width: 100%;
	  height: 100vh;
	  position: sticky;
	  top: 20px; /* 上部からの固定余白（調整可能） */
	  background: #f0f0f0;
/* フレックスボックスを使って子要素を中央に配置する設定 */
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
	}

	/* 左側・右側 */
	.LeftBoxWrap {
	  width: 100%;
	}

	.LeftBox {
	position: fixed;
	top: 9rem;
	left: 1.5rem;
	}

	.LeftBox p {
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.6;
	}

	.LeftBox p span {
	text-decoration: underline;
	}

	.LeftTitle {
	width: 14rem;
	margin-left: -0.5rem;
	}

	.LeftLead1 {
	margin-top: 2rem;
	}

	.RightBoxWrap {
	  width: 100%;
	}

  .RightSnsUnit {
	 position: fixed;
	 top: 5rem;
	 right: 2rem;
  }

	.CenterBoxIn {
	position: relative;
	z-index: 10;
	}

	.CenterBoxIn {
	position: relative; /* 擬似要素の基準位置とするため */
	background-color: #ffffff; /* 背景は白 */
	margin-top: 20rem;
	}

	.CenterBoxIn::before {
	  content: '';
	  position: absolute;
	  top: -10rem;
	  left: 0;
	  width: 100%;
	  height: 100px; /* グラデーションの高さを指定 */
	  z-index: 1; /* 必要に応じて重ね順を調整 */
	  pointer-events: none; /* マウス操作を透過させる場合 */

	  /* 下が白、上が透明のグラデーション */
	  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	}

}

@media print, screen and (min-width: 1110px) {

	.container {
	  display: grid;
	  /* 左(最小300px可変) | センター(400px固定) | サーチ(320px固定) | 右(最小150px可変) */
	  grid-template-columns: minmax(300px, 1fr) 400px 320px minmax(150px, 1fr);
	  width: 100%;
	  max-width: 100%;
	  align-items: start; /* カラムの高さを独立させる */
	}

	.LeftTitle {
	width: 20rem;
	margin-left: -0.5rem;
	}

	.LeftBox {
	position: fixed;
	top: 9rem;
	left: 3rem;
	}

	.LeftBox p {
	color: #fff;
	font-size: 1.6rem;
	line-height: 1.6;
	}

}


/* ==========================================
   スマホ表示 (767px以下の場合)
   ========================================== */
@media only screen and (max-width: 767px) {
  .container {
    display: flex;
    flex-direction: column; /* 縦並び */
    width: 100%;
    box-sizing: border-box;
  }


  /* 左右カラムを非表示 */
  .LeftBoxWrap,
  .RightBoxWrap {
    display: none;
  }

  /* センターとサーチを全幅にし、上からの順番を維持（センター -> サーチ） */
  .CenterBoxWrap {
    order: 2;
    width: 100%;
    background: #fff;
    padding: 0 0 0 0;
  }

  .SearchWrap {
    order: 1;
    width: 100%;
    position: static; /* スマホではsticky固定を解除 */
    margin-top: 20rem;  /* センターとの間隔 */
  }

  .SearchTitle {
  width: 94%;
  margin: 0 auto;
  }

	.SearchBoxIn {
    padding: 3rem 2.5rem;
	}

	.LeadWrap {
	position: relative; /* 擬似要素の基準位置とするため */
	background-color: #ffffff; /* 背景は白 */
	margin-top: 20rem;
	padding-bottom: 5rem;
	padding-left: 2rem;
	padding-right: 2rem;
	text-align: center;
	}

	.LeadWrap::before {
	  content: '';
	  position: absolute;
	  top: -10rem;
	  left: 0;
	  width: 100%;
	  height: 100px; /* グラデーションの高さを指定 */
	  z-index: 1; /* 必要に応じて重ね順を調整 */
	  pointer-events: none; /* マウス操作を透過させる場合 */

	  /* 下が白、上が透明のグラデーション */
	  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	}


}


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

	.Width1 {
	padding: 0 40px;
	}

	.Width1_SP {
	padding: 0 40px;
	}

	.Caption {
	margin-top: 10px;
	font-size: 11px;
	text-align: center;
	}

}


@media print, screen and (min-width: 768px) {

	.Width1 {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
	}

	.Width1_PC {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
	}

	.Caption {
	margin-top: 10px;
	font-size: 12px;
	text-align: center;
	}

}

@media print, screen and (min-width: 1090px) {

	.Width1,
	.Width1_PC {
	padding-right: 0 !important;
	padding-left: 0 !important;
	}

	.Caption {
	margin-top: 10px;
	font-size: 12px;
	text-align: center;
	}

}


/* 中身 =============================================================== */

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


}


@media print, screen and (min-width: 768px) {

	.CenterTitle {
	margin-top: 23rem;
	display: flex;
	justify-content: center;
	}

	.CenterTitle img {
	width: 90%;
	}

}

@media print, screen and (min-width: 1090px) {



}





/* ページトップ =============================================================== */

#js-pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000; /* ローディングより上に */
  width: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease; /* transitionを少し長くして遅出し感を強調 */
  transform: translateY(10px); /* 少し深めから浮かび上がらせる */
}

#js-pagetop.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.PageTopTo {
writing-mode: vertical-rl; /* 右から左へ進む縦書き */
padding-top: 30px;
background: url(../img/Allow_Top.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 10px 24px;
transition: color 0.3s;
cursor: pointer;
}

@media print, screen and (min-width: 768px) {

	#js-pagetop {
  right: 40px;
	}


}


/* -----------------
■ 見出し
------------------- */

.MainLeadUnit p,
.SearchWrap .LeadWrap p {
color: #8e96a1;
}

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

	.TitleCatalog {
	padding: 5rem 0 2rem 0;
	background: #fff;
	}

	.TitleCatalog img {
	width: 80%;
	margin: 0 auto;

	}

	.MainLeadUnit {
	text-align: center;
	}

	.MainLead2 {
	margin-top: 2rem;
	line-height: 1.8;
	white-space: nowrap;
	}

	.MainLead {
	font-size: 2.4rem;
	line-height: 1.6;
	font-weight: 700;
	}


	.SelectedMds {
	text-align: center;
	}

}


@media print, screen and (min-width: 768px) {

	.TitleCatalog {
	width: 80%;
	margin: 11rem auto 4rem auto;
	}

	.MainLeadUnit {
	text-align: center;
	padding: 0 2rem;
	}

	.MainLead2 {
	margin-top: 2rem;
	line-height: 1.6;
	}

	.SelectedMds {
	text-align: center;
	}

	.MainLead {
	font-size: 2.4rem;
	line-height: 1.8;
	font-weight: 700;
	}

}

@media print, screen and (min-width: 1090px) {



}



/* -----------------
■ アイテム一覧
------------------- */

.card:hover {
opacity: 0.5;
transition: 0.2s;
-webkit-transition: 0.2s;
}

.modal-img {
position: relative;
display: inline-block;
background-color: #ffffff; /* 白色の背景 */
margin: 0 5px 15px 0;
}

.modal-img:before {
content: "";
position: absolute;
/* 位置を右下にずらす（数値を変えることでずらし具合を調整できます） */
top: 5px;
left: 5px;
width: 100%;
height: 100%;
background-color: #dbeaff; /* 薄い水色 */
}

.Cate_Wear .modal-img:before {
background-color: #dbeaff; /* 薄い水色 */
}

.Cate_Wear .swiper-slide:before {
background-color: #dbeaff !important;
}

.Cate_Jewelry .modal-img:before {
background-color: #ebe6ca !important; /* 薄い水色 */
}

.Cate_Jewelry .swiper-slide:before {
background-color: #ebe6ca !important;
}

.Cate_Goods .modal-img:before {
background-color: #cfe4df !important; /* 薄い水色 */
}

.Cate_Goods .swiper-slide:before {
background-color: #cfe4df !important;
}

.Cate_Beauty .modal-img:before {
background-color: #e8cbd3 !important; /* 薄い水色 */
}

.Cate_Beauty .swiper-slide:before {
background-color: #e8cbd3 !important;
}

.Cate_Accesory .modal-img:before {
background-color: #f1dcd1 !important; /* 薄い水色 */
}

.Cate_Accesory .swiper-slide:before {
background-color: #f1dcd1 !important;
}

.Cate_Food .modal-img:before {
background-color: #ddd3ce !important; /* 薄い水色 */
}

.Cate_Food .swiper-slide:before {
background-color: #ddd3ce !important;
}



.modal-img img {
position: relative;
}

.cardFloorMds {
display: inline-block !important;
padding: 0.2rem 1.5rem;
font-size: 1.2rem;
letter-spacing: 0.05em;
border-radius: 20px;
border: 1px solid #8c96a0;
}

.cardShop {
margin-top: 1rem;
padding-bottom: 1rem;
font-size: 1.6rem;
line-height: 1.3;
font-weight: 500;
border-bottom: 1px solid #8c96a0;
}

.cardLead {
margin-top: 1rem;
font-size: 1.4rem;
line-height: 1.2;
}

.ItemPrice {
margin-top: 0.5rem;
font-size: 1.2rem;
letter-spacing: normal !important;
}

.card {
margin-top: 2rem;
}

.cardWrap {
padding-bottom: 5rem !important;
}

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

    .container {
    width: 100%;
    margin: 10px auto 0 auto;
    }

	.cardWrap {
	display: flex;
	flex-wrap: wrap;
	margin-top: 3rem;
	padding: 0 2.4rem;
	padding-bottom: 5rem;
    justify-content: space-between;
	}

    .card {
	display: flex;
	flex-direction: column;
    width: calc((100% / 2) - 1rem);
	margin-bottom: 2rem;
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out;
    }

    .card-content {
    text-align: left;
    color: #9ba1ad;
    display: flex;
    flex-direction: column;
    }

    .card-content {
	margin-top: 0.8rem;
    }

    .ItemPrice {
	margin-top: 1rem;
    }

    .card-content .ShopName {
    font-size: 11px;
/*     letter-spacing: 0.1em; */
    margin-bottom: 5px;
    }

    .card-content .ItemName {
    font-size: 13px;
    line-height: 1.4;
    min-height: 35px;
    }

    .cardFloorMds {
	width: 4rem;
	display: flex !important;
	justify-content: center;
	 }

}

@media print, screen and (min-width: 768px) {

	.cardWrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 3rem;
	padding: 0 3rem;
	}

    .card {
	display: flex;
	flex-direction: column;
    width: calc((100% / 2) - 1rem);
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out;
    }

    .card img {
    width: 100%;
    height: auto;
    }

    .card-content {
    text-align: left;
    color: #9ba1ad;
    }

    .card-content .ShopName {
    font-size: 12px;
    margin: 10px 0 5px 0;
/*     letter-spacing: 0.1em; */
    }

    .card-content .ItemName {
    font-size: 14px;
    line-height: 1.4;
/*     letter-spacing: 0.1em; */
    }

    .card .ItemPrice {

    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-align: left;
    color: #9ba1ad;
    }

    .card .ItemPrice span {
    color: #fff;
    background-color: #9B8C6E;
    padding: 3px 10px;
    font-size: 12px;
    letter-spacing: 0.2em;
    float: right;
    margin-top: -4px;
    border-radius: 3px;
    margin-left: 5px;
    }

    .card .ItemPrice_SP {
	display: none;
    }

}

@media print, screen and (min-width: 1090px) {



}


/* -----------------
■ 検索
------------------- */

.SearchList li {
display: inline-block;
margin-right: 10px;
}

.SearchBox .SearcTitle,
.SearchBox .SearcTitle2 {
font-weight: 600;
}

.SearchBox dt {
padding: 6px 10px;
letter-spacing: 0.1em;
}

.SearchResult {
margin-top: 20px;
text-align: center;
letter-spacing: 0.08em;
color: #8e96a1;
}

.SelectedMds {
color: #8e96a1;
}

.SearchResult span {
font-size: 30px;
}

.SearchBoxIn {
color: #8e97a0;
}

.SearchBoxUnit.SearchBoxUnit1 {
margin-top: 1.5rem;
padding: 2rem 1.5rem 1rem 1.5rem;
background: #fff;
}

.SearchBoxUnit.SearchBoxUnit2 {
margin-top: 1.5rem;
padding: 1.5rem 1.5rem 0.5rem 1.5rem;
background: #fff;
}

.SearchBoxUnit3 .SearchBoxUnit {
margin-top: 1.5rem;
padding: 1.5rem 1.5rem 1.5rem 1.5rem;
background: #fff;
font-size: 1.3rem;
text-align: center;
}

.SearcMds {
margin-top: 2rem;
padding-top: 2rem;
text-align: center;
border-top: 1px solid #d1d4d9;
font-weight: 500;
}

.SearchBoxUnit3 {
border-top: 1px solid #d1d4d9;
margin-top: 2rem;
padding-top: 2rem;
}

.SearchBoxUnit3 .SearchBoxUnit {
margin-top: 0;
}

.SearchBox {
padding: 0 2rem;
}

.SearchBox .list_item {
  white-space: nowrap; /* テキストの自動折り返し・改行を禁止 */
}

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

	.SearchBox {
	margin: 0 auto 0 auto;
	padding: 0 0 3rem 0;
	background: #fff;
	}

	.SearchBoxIn {
    background: #f0f0f0;
	}

	.SearchList.SearchListOption {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	}

	.SearchList {
	display: flex;
	flex-wrap: wrap;
	}

	.SearchList li {
	display: block;
	margin-top: 7px;
	margin-right: 0;
	margin-bottom: 0.5rem;
	font-size: 1.4rem;
	}

	.SearchBoxUnit.SearchBoxUnit1 {
	margin-top: 1.5rem;
	padding: 1rem 1.5rem 1.5rem 1.5rem;
	background: #fff;
	}

	.SearchBoxUnit.SearchBoxUnit1 .SearchList li {
	width: calc(100% / 2);
	}

	.SearchBoxUnit.SearchBoxUnit2 {
	margin-top: 1.5rem;
	padding: 1rem 1.5rem 1.5rem 1.5rem;
	background: #fff;
	}

	.SearchList.SearchListOption li {
	width: auto;
	margin-right: 9px;
	}


	.SearchBox dl {
	display: flex;
	align-items: center;
	padding-top: 3px;
	padding-bottom: 10px;
	}

	.SearchBox .PriceUnit {
	padding: 9px 0 2px 0;
	}

	.SearchBox .SearcTitle {
	margin-bottom: 1rem;
	text-align: center;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	}

	.SearchResult {
	display: flex;
    justify-content: center;
    align-items: center;
	font-size: 11px;
	}

	.SearchResult span {
	margin: 0 10px;
	letter-spacing: 0.08em;
	}


	.SearcTitle2 {
	text-align: center;
	}

}

@media print, screen and (min-width: 768px) {

	.SearchBox {
/* position: fixed; や top: 0; は削除し、レイアウト用の余白もリセットします */
    width: 320px;
    max-height: 90vh; /* 画面の高さより大きくなった場合に備える */
    overflow-y: auto; /* 中身が多い場合にスクロールできるようにする */
	margin: 0 auto 0 auto;
	}

	.SearchResult {
	display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5rem;
	}

	.SearchResult span {
	margin: 0 7px;
	letter-spacing: 0.08em;
    font-size: 3.6rem;
	}

	.SelectedMds {
	margin-top: 0.5rem;
	font-size: 1.2rem;
	letter-spacing: 0.08em;
	}

	.SearchList li {
	display: block;
	}

	.SearchBox .list_item {
	margin: 0 0 1rem 0 !important;
	font-size: 1.4rem;
	}

	.SearchBox .list_item.list_item1 {
	margin: 0 20px 0 0;
	}

	.SearchBox .SearcTitle {
	margin-bottom: 10px;
	text-align: center;
	font-size: 1.8rem;
	letter-spacing: 0.04em;
	}

	.SearchBox .PriceUnit {
	padding: 10px 10px 10px 40px;
	}

	.SearcTitle2 {
	font-size: 1.6rem;
	text-align: center;
	}

	.SearchBoxIn {
	width: 23rem;
	margin: auto;
	}

	.SearchBoxUnit {
	margin-top: 1.6rem;
	}

}

@media print, screen and (min-width: 1090px) {


}


 /* ラジオボタン・チェックボックス --------------------------------------------------- */

.SearchBox input[type=checkbox] {
display: none;
}

.SearchBox input[type=checkbox] + label {
display: inline-block;
position: relative;
cursor: pointer;
}

.SearchBox input[type=checkbox] + label::before {
display: block;
position: absolute;
left: 0;
border: 1px solid #8e959f;
background-color: #fff;
content: "";
}

.SearchBox input[type=checkbox] + label::before {
border-radius: var(--border-r);
}

/* 選択時の背景色 */
.SearchBox input[type=checkbox]:checked + label::before {
border: 1px solid #8e959f;
background-color: #fff;
box-shadow: none;
}

.SearchBox input[type=checkbox]:checked + label::after {
display: block;
position: absolute;
content: "";
}

/* チェックボックス選択時のチェックマーク */
.SearchBox input[type=checkbox]:checked + label::after {
width: 8px;
height: 8px;
background-color: #8e959f;
}

.SearchBox .list_Wear input[type=checkbox]:checked + label::after {
background-color: #729fe0;
}

.SearchBox .list_Jewelry input[type=checkbox]:checked + label::after {
background-color: #bbaa56;
}

.SearchBox .list_Accesory input[type=checkbox]:checked + label::after {
background-color: #d0866a;
}

.SearchBox .list_Beauty input[type=checkbox]:checked + label::after {
background-color: #ba586e;
}

.SearchBox .list_Food input[type=checkbox]:checked + label::after {
background-color: #906f5d;
}

.SearchBox .list_Goods input[type=checkbox]:checked + label::after {
background-color: #68a897;
}


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

	.SearchBox input[type=checkbox] + label {
	padding-left: 24px;
	}

	.SearchBox input[type=checkbox] + label::before {
	top: 3px;
	width: 12px;
	height: 12px;
	}

	/* チェックボックス選択時のチェックマークのサイズ・位置 */
	.SearchBox input[type=checkbox]:checked + label::after {
    left: 2px;
    top: 5px;
    width: 8px;
    height: 8px;
	}

}

@media print, screen and (min-width: 768px) {

	.SearchBox input[type=checkbox] + label {
	padding-left: 25px;
	}

	.SearchBox input[type=checkbox] + label::before {
	top: 2px;
	width: 12px;
	height: 12px;
	}

	/* チェックボックス選択時のチェックマークのサイズ・位置 */
	.SearchBox input[type=checkbox]:checked + label::after {
    left: 2px;
    top: 4px;
    width: 8px;
    height: 8px;
	}

}


/* ComingSoonWrap =============================================================== */

.ComingSoonWrap {
background: #79838d;
text-align: center;
padding: 3rem 0;
}

.ComingSoonWrap p {
color: #fff;
}

.ComingMds {
margin-bottom: 1rem;
font-size: 3rem;
}

.ComingLead {
font-size: 1.8rem;
}

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


}


@media print, screen and (min-width: 768px) {



}

@media print, screen and (min-width: 1090px) {



}

/* ComingSoonWrap =============================================================== */

.LoopWrap {
  overflow: hidden; /* 枠からはみ出た部分を隠す */
  width: 100%;      /* 表示する幅（必要に応じて調整してください） */
   aspect-ratio: 1600 / 2231;

  background-image: url(../img/Loop_Back.jpg?ver=261023B); /* 実際の背景画像のパスに変更してください */
  background-size: cover;        /* 枠いっぱいに拡大・縮小して表示 */
  background-position: center;   /* 背景画像の中央を合わせる */
  background-repeat: no-repeat;  /* 画像を繰り返さない */
  display: flex;
  align-items: center; /* 中身（LoopGroup）を上下中央揃え */
}

.LoopGroup {
  display: flex;    /* 画像を横並びにする */
  width: max-content; /* 中身の画像幅に合わせて横長にする */
  /* アニメーションの設定: 8秒で1周、等速、無限ループ */
  animation: loop-animation 8s linear infinite;
  align-items: center;
  will-change: transform;
}

.LoopGroup img {
	width: 20rem;
  display: block;
  /* 画像の大きさを維持したい場合は自動、固定したい場合は幅を指定 */
  height: auto;
}

/* 左から右へ流れるアニメーション定義 */
/* 3枚構成用の右から左へ流れるアニメーション */
@keyframes loop-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* ちょうど1枚分移動したらリセット */
  }
}


/* ComingSoonWrap =============================================================== */

.OtherWrap {
	background: url(../img/Bg_Grad.jpg) repeat-x center bottom;
	text-align: center;
}

.OtherWrap p {
color: #939da6;

}

.OtherWrap .OtherTitle {
	width: 90%;
	margin: auto;
}

.OtherWrap .OtherMds {
margin-top: 4rem;
font-size: 2rem;
line-height: 1.6;
font-weight: 700;
letter-spacing: 0.02em;
}

.OtherWrap .OtherLead {
margin-top: 1.2rem;
font-size: 1.4rem;
line-height: 1.6;
}

.OtherThumb img {
width: 100%;
}

.OtherThumb {
margin-top: 4rem;
}

.OtherCaption {
margin-top: 2rem;
font-size: 1.2rem;
line-height: 1.6;
}

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

	.OtherWrap {
	margin-top: 5rem;
	padding: 0 4rem 6rem 4rem;
	}

	.NoveltyWrap {
	margin-top: 7rem;
	}

	.OtherWrap .OtherLead {
	margin-top: 1.2rem;
	font-size: 1.4rem;
	line-height: 1.6;
	}

	.OtherThumb {
	margin-top: 2rem;
	}

}


@media print, screen and (min-width: 768px) {

	.OtherWrap {
	margin-top: 7rem;
	padding: 0 4rem 8rem 4rem;
	}

	.NoveltyWrap {
	margin-top: 8rem;
	}

	.OtherThumb {
	margin-top: 3.5rem;
	}

}

@media print, screen and (min-width: 1090px) {



}



/* フッター =============================================================== */


/* フッター（KVの後に続く要素として配置） */
.PageFooter {

  padding: 50px 0;
  text-align: center;
}

/* アイコン等のスタイル（元コードに合わせて簡易調整） */
.PageFooter__SocialLinks {
  list-style: none;
  padding: 0;
 /*  display: flex;
  justify-content: center; */
  gap: 10px;
}


.PageFooter {
	position: relative;
	padding: 0 0;
	color: #fff;
	z-index: 1;

	}

.PageFooter__SocialLinks {
	 /*  display: flex;
	gap: 20px;
	justify-content: center; */
	padding: 0;
	margin: 21px 0 0 0;
	list-style: none;
	text-align: center;
	}

.PageFooter__SocialLinks li {
margin-bottom: 5px;
}

.PageFooter__SocialLinks a {
	text-decoration: none;}

.CreditUnit {
padding: 30px 0;

}

.PageFooter .LaforetLogo {
width: 110px;
margin: auto;
}

.Icon {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #000;
	background-repeat: no-repeat;
	background-position: center;

	}

.Icon.-instagram {
  background-image: url('../img/Icon_Instagram.svg');
    background-size: 50%;

    }

.Icon.-x {
  background-image: url('../img/Icon_X.svg');
    background-size: 45%;

    }

.Icon.-facebook {
    background-image: url('../img/Icon_Facebook.svg');
    background-size: 30%;

    }

.Icon.-line {
    background-image: url('../img/Icon_Line.svg');
    background-size: 60%;

    }

.PageFooter__Logo {
	display: flex;
	justify-content: center;
}

.PageFooter__Logo img {
	display: block;
	width: 70px;}

.PageFooter__Copyright {
	margin-top: 10px;
	font-size: 11px;
	text-align: center;}


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

	.PageFooterIn {
	padding: 30px 0 0 0;
	}

	.PageFooter__SocialLinks {
	margin-top: 10px;
	}

	.CreditUnit {
	padding: 20px 0 30px 0;
	}

}

.slider-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 20px; /* スライダー下のテキストとの余白 */
}

.swiper {
  width: 100%;
  height: auto;
  /* padding: 0 10px 100px 10px; ←左右に見切れを作る */
  padding-bottom: 100px;
  box-sizing: border-box;
  overflow: hidden;
}

.swiper-slide {
  width: auto;
  max-width: 320px; /* ←中央スライドの最大幅 */
}


/* --- 矢印のカスタムスタイリング --- */
.swiper-button-prev,
.swiper-button-next {
  z-index: 10;
  width: 20px !important;
  height: 100%;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 左右の位置調整（お好みで調整してください） */
.swiper-button-prev {
	top: 60% !important;
  transform: translateY(-50%) !important; /* 垂直方向中央に固定 */
  left: 110px !important;
  background: url(../img/Allow_L.png) no-repeat;
  background-size: 100% auto;
}
.swiper-button-next {
	top: 60% !important;
  transform: translateY(-50%) !important; /* 垂直方向中央に固定 */
  right: 110px !important;
   background: url(../img/Allow_R.png) no-repeat;
  background-size: 100% auto;
}

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

	.swiper-button-next {
	right: 22px !important;
	background-size: 80% auto;
	}

	.swiper-button-prev {
	left: 35px !important;
	background-size: 80% auto;
	}

}

/* 矢印のアイコンサイズ調整 */
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 16px;
  font-weight: bold;
}

/* ★最初や最後に到達して無効になった矢印を完全に非表示にする設定 */
.swiper-button-disabled {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.swiper-slide-active {

}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

	.mySwiper {
	margin-top: 100px;
	}

	.swiper-slide {
	  /* 固定幅ではなく、画面幅に対する割合で指定するのがコツです */
	   /* width: 65% !important;ここを小さくするほど左右の見切れが大きくなります */
	  height: auto;

	}



.PageFooter__SocialLinks .Icon {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;

	background-repeat: no-repeat;
	background-position: center;

	}

.PageFooter__SocialLinks {
display: flex;
justify-content: center;
}

.PageFooter__SocialLinks .Icon.-instagram {
  background-image: url('../img/Icon_Instagram.svg');
    background-size: 50%;
filter: invert(100%);
    }

.Icon.-x {
.PageFooter__SocialLinks   background-image: url('../img/Icon_X.svg');
    background-size: 45%;
filter: invert(100%);
    }

.PageFooter__SocialLinks .Icon.-facebook {
    background-image: url('../img/Icon_Facebook.svg');
    background-size: 30%;
filter: invert(100%);
    }

.PageFooter__SocialLinks .Icon.-line {
    background-image: url('../img/Icon_Line.svg');
    background-size: 60%;
filter: invert(100%);
    }



}





/* -----------------
■ アイテム詳細
------------------- */

.modal-open {
overflow: hidden;
}

.modal .cardFloorMds {
margin-left: 5rem;
}

.modal .cardShop {
margin-top: 1rem;
margin-left: 5rem;
padding-bottom: 1rem;
font-size: 2rem;
font-weight: 500;
border-bottom: none;
}

.modal .cardShop2 {
font-size: 1.2rem;
margin-left: 5rem;
}

.modal .cardLead {
margin-top: 1rem;
font-size: 1.4rem;
line-height: 1.4;
}


.modal .Slide .swiper-slide:before {
content: "";
position: absolute;
/* 位置を右下にずらす（数値を変えることでずらし具合を調整できます） */
top: 1rem;
left: 1rem;
width: 100%;
height: 100%;
background-color: #dbeaff; /* 薄い水色 */
z-index: -1;
}

.modal .Slide .swiper-slide {
position: relative;
margin-top: 3rem;
padding-bottom: 1rem;
width: auto;
}

.modal .Slide .swiper-slide img {
width: 100%;
height: auto;
display: block;
}

.modal .Slide {
position: relative;
overflow: hidden;
}

.modal .cardItemMds {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #8c96a0;
}

.modal .cardItem {
font-size: 1.4rem;
}

.modal .ItemPrice {
margin-top: 0.8rem;
font-size: 1.4rem;
}

.modal .cardItemMds {
font-size: 1.6rem;
line-height: 1.4;
}

.modal .cardItemLead {
margin-top: 1rem;
font-size: 1.4rem;
line-height: 1.6;
}

.modal-content .OptionList li {
width: auto;
margin: 5px 2px 0 0;
padding: 3px 20px;
font-size: 11px;
color: #fff;
display: inline-block;
text-align: center;
}

.modal-content .OptionList .Option1 {
background: #64a0e6;
}

.modal-content .OptionList .Option2 {
background: #8c96a0;
}

.modal-img2 {
  position: relative;
  width: 100%; /* 親要素のサイズに合わせて調整してください */
  max-width: 600px; /* 例: 最大幅 */
  aspect-ratio: 16 / 15.5; /* 画像の縦横比に合わせて設定（または height を指定） */
}

.modal-img2 > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-img2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2枚目の画像をフェードアニメーションさせる */
.modal-img2 > div:nth-child(2) {
  animation: fade 6s infinite ease-in-out;
}

@keyframes fade {
  0%, 100% {
    opacity: 0; /* 非表示 */
  }
  45%, 55% {
    opacity: 1; /* 表示 */
  }
}


.swiper-wrapper {
justify-content: flex-start !important;
}

.modal .ItemPrice {
margin-bottom: 2rem;
}

.modal .cardleadWrap div {
margin-top: 3rem;
}

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

  .modal {
  display: none;
  position: fixed;
  z-index: 20000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  transition: all 1s ease-in-out;
  }

  .modal-content {
  background: #fff;
  overflow-y: auto; /* モーダル内でのスクロール許可 */
  padding: 50px 0 50px 0;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: show 0.6s linear 0s;
  max-height: 100%;
  margin-bottom: 50px;
  }

  .modal-top {
  display: inline-block;
  position: absolute;
  right: 5px;
  top: 5px;
  }

  .modal-close img {
  margin: 20px 25px 0 0;
  width: 25px;
  }

  .modal-close:hover, .modal-close:focus {
  text-decoration: none;
  cursor: pointer;
  }

  .modal-title {
  color: #FFF;
  }

  .modal-content .OptionList {
  margin: 20px 0 0 0;
  }

  .cardleadWrap {
  padding-right: 5rem;
  padding-left: 5rem;
  }

  .modal-content .OptionList li {
  width: auto !important;
  margin: 5px 5px 0 0;
  padding: 3px 15px;
  font-size: 12px;
  color: #fff;
  display: inline-block;
  text-align: center;
  }

	.modal .Slide {
	margin: 1.5rem auto 0 auto;
	}

	.modal .Slide img {
	width: 100%;
	}

	.modal .cardleadWrap {
	margin-top: 3rem;
	}



	.modal .Slide:before {
	z-index: inherit;
	}

}

@media print, screen and (min-width: 768px) {

.modal {
  display: none;
  position: fixed;
  z-index: 20000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* スクロール禁止 */
  background-color: rgba(0, 0, 0, 0.6);
  transition: all 1s ease-in-out;
}

.modal-content {
  background: #fff;
  overflow-y: auto; /* モーダル内でのスクロール許可 */

  padding: 50px 0 50px 0;
  width: 64rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: show 0.6s linear 0s;
  max-height: calc(100vh - 50px);
  box-sizing: border-box;
  overscroll-behavior-y: contain;
  }

  .modal-top {
  display: inline-block;
  position: absolute;
  right: 5px;
  top: 5px;
  }

  .modal-close img {
  margin: 25px 25px 0 0;
  width: 35px;
  }

  .modal-close:hover, .modal-close:focus {
  text-decoration: none;
  cursor: pointer;
  }

  .modal-content .OptionList {
  margin: 20px 0 0 0;
  }

	.modal .cardleadWrap {
	margin-top: 5rem;
	}

  .cardleadWrap {
	 padding-right: 5rem;
	 padding-left: 5rem;
  }

}


#Footer {
    position: relative;
    z-index: 1100;
}

@media only screen and (max-width: 767px) {
    #Footer {
        padding: 4rem 2rem 4rem 2rem;
    }
}

@media print, screen and (min-width: 768px) {
    #FooterUnit {
        height: 14.2rem;
        padding-top: 3rem;
    }
}



/* -----------------
■ ページTOP
------------------- */

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


}

@media print, screen and (min-width: 768px) {

    .page-top-link a {
    display: block;
    }

    .page-top-link img {
    width: 12px; /* 画像の幅を調整 */
    height: auto; /* 高さを自動調整 */
    }

    .page-top-link {
    position: absolute;
    bottom: 0; /* タブコンテンツ内のページ下部からの距離を調整 */
    right: 15px; /* タブコンテンツ内のページ右端からの距離を調整 */
    z-index: 5; /* 他の要素より手前に表示 */
    }

}

@media print, screen and (min-width: 1090px) {

    .page-top-link {
    right: 0; /* タブコンテンツ内のページ右端からの距離を調整 */
    }

}



/* 春田の追加分 */
@media screen and (min-width: 768px) {
  .SearchWrap {
    top: calc(6rem + 1px);
    height: calc(100vh - (6rem + 1px));
  }
}

/* Keep content already in view at its final position on first paint. */
.ItemSub.is-initial-visible,
.ItemSub1.is-initial-visible,
.ItemSub2.is-initial-visible,
.ItemMain.is-initial-visible {
  opacity: 1 !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
}

/* Scroll reveal: a short lift with a soft landing. */
.ItemSub {
  transform: translate(0, 14px);
  -webkit-transform: translate(0, 14px);
  transition: opacity 700ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 850ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ItemSub.FadeMv2 {
  transition: opacity 700ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 850ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (prefers-reduced-motion: reduce) {
  .ItemSub,
  .ItemSub.FadeMv2 {
    transform: none !important;
    -webkit-transform: none !important;
    transition: none;
  }
}
/* Soft modal entrance, preserving each layout's final position. */
.modal {
  transition: none;
  animation: xmas-modal-backdrop 450ms ease-out both;
}
.modal .modal-content {
  animation: xmas-modal-content-sp 650ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
@media screen and (min-width: 768px) {
  .modal .modal-content {
    animation-name: xmas-modal-content-pc;
  }
}
@keyframes xmas-modal-backdrop {
  from { background-color: rgba(0, 0, 0, 0); }
  to { background-color: rgba(0, 0, 0, 0.6); }
}
@keyframes xmas-modal-content-sp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes xmas-modal-content-pc {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modal .modal-content { animation: none; }
}
/* PC background moves gently across the full scroll range. */
@media screen and (min-width: 768px) {
  body.BgWrapper {
    position: relative;
    isolation: isolate;
    background: none;
  }
  body.BgWrapper::before {
    content: "";
    position: fixed;
    inset: -20vh 0;
    z-index: -1;
    pointer-events: none;
    background: url("/special/xmas_2026/img/Bg_Visual_PC.jpg?ver=26101") center / cover no-repeat;
    transform: translate3d(0, calc(16vh - 32vh * var(--xmas-scroll-progress, 0)), 0);
    will-change: transform;
  }
}
@media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
  body.BgWrapper::before {
    transform: none;
    will-change: auto;
  }
}
/* Brief first-view fade, without moving content or fixed elements. */
body.BgWrapper::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30000;
  background: #fff;
  pointer-events: none;
  animation: xmas-first-view 600ms ease-out both;
}
@keyframes xmas-first-view {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  body.BgWrapper::after { display: none; }
}
@media print {
  body.BgWrapper::after { display: none; }
}

/* Center navigation on the photo; account for slide margin and capped width. */
.modal .Slide { padding-bottom: 0; }
.modal .Slide .swiper-slide { max-width: none; }
.modal .Slide .swiper-button-prev,
.modal .Slide .swiper-button-next {
  top: calc(50% + 1rem) !important;
  width: 20px !important;
  height: 32px;
  margin-top: 0;
  /* Include half of the 1rem decorative offset when centering the visible gap. */
  transform: translate(0.5rem, -50%) !important;
  background-position: center center;
  background-size: 100% auto;
}
.modal .Slide .swiper-button-prev {
  left: calc(50% - (100% - 48px) / 3.6 - 40px) !important;
}
.modal .Slide .swiper-button-next {
  right: calc(50% - (100% - 48px) / 3.6 - 40px) !important;
}
.modal .Slide .swiper-button-prev::after,
.modal .Slide .swiper-button-next::after {
  content: none;
}
@media only screen and (max-width: 767px) {
  .modal .Slide .swiper-button-prev,
  .modal .Slide .swiper-button-next {
    background-size: 80% auto;
  }
  .modal .Slide .swiper-button-prev {
    left: calc(50% - (100% - 16px) / 2.8 - 30px) !important;
  }
  .modal .Slide .swiper-button-next {
    right: calc(50% - (100% - 16px) / 2.8 - 30px) !important;
  }
}