@charset "UTF-8";
/* CSS Document */

html { 
	scroll-behavior: auto;  /* ← smooth をやめる */
	overflow-anchor: none;
} 

body {
	overflow-anchor: none;
	margin: 0;
  	padding: 0;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
}

img{vertical-align: middle;}

a {
	text-decoration: none;
}

a:hover img{
	opacity: 0.85;
	filter: alpha(opacity=85);
}

hr {
  	height: 0;
  	margin: 0;
  	padding: 0;
  	border: 0;
}

/*背景*/
.site-bg {
	background-image:url("/hatsuuri-sale2026/img/bg-mobile.webp");
	background-repeat: repeat-y;
	background-size: 100% auto;
  	max-width: 1920px;
  	margin: 0 auto;
	padding: 0 0 5% 0;
}

/* タブレット以上で背景画像を切り替え */
@media screen and (min-width: 768px) {
  .site-bg {
    	background-image: url("/hatsuuri-sale2026/img/bg-tablet.png");
  }
}

@media screen and (min-width: 980px) {
  .site-bg {
    	background-image: url("/hatsuuri-sale2026/img/bg-pc.webp");
  }
}
/*---ここまで---*/

header{
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	/*padding-bottom: 10%;*/
}

/* メインコンテンツを中央寄せ・幅制限 */
.container {
  	max-width: 980px;
  	margin: 0 auto;
}


@media (min-width: 768px){
	header{
	/*padding-bottom: 5%;*/
	}
}

@media (min-width: 980px){
	header{
	/*padding-bottom: 5%;*/
	}
}

/*---ここまで---*/


/*---information---*/
#information{
	background-color: #ffffff;
	margin-top: 10%;
	padding: 10% 0% 7%;
}

.info_title {
	width: 80%;
	margin: 0% 10% 0;
  	background-color: #d0200c;
  	color: #D9B752;
  	font-size: 240%; /* 少し大きめにしてサブタイトル感を出す */
  	font-family: "Noto Sans JP", sans-serif;
  	font-weight: 900; /* 重すぎず、軽すぎないバランス */
  	font-style: normal;
  	padding: 0.5em 0;
  	letter-spacing: 1px; /* 少しだけ文字間を広げて読みやすく */
  	text-align: center; /* 中央揃え */
  	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35); /* 少し強めのシャドウで浮き上がらせる */
  	border-radius: 15px; /* 角を丸めて柔らかさを出す */
}

.newshop_slider {
  width: 96%;
  margin: 5% auto 0;;
}

.slide_item img {
  width: 95%;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

.slide_item:hover img {
  transform: scale(1.03);
}

/* 矢印ボタンの共通スタイル */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  transform: translateY(-50%);
}

/* 左矢印をさらに内側に */
.slick-prev {
  left: 20px; /* ←内側に寄せるならこの数値を大きく */
}

/* 右矢印をさらに内側に */
.slick-next {
  right: 20px;
}

/* 矢印記号の見た目カスタマイズ（← →） */
.slick-prev::before,
.slick-next::before {
  font-family: "slick";
  font-size: 28px;
  line-height: 1;
  opacity: 1;
  color: #000; /* ←黒にする */
}

/* 必要に応じてホバー色なども */
.slick-prev:hover::before,
.slick-next:hover::before {
  color: #555; /* 少し薄めにしてホバー感出す */
}

.slick-dots {
    bottom: -30px; /* ドットの位置を下に20px調整 */
  }

/* ドットナビ */
.slick-dots li button:before {
  color: #666;
}
.slick-dots li.slick-active button:before {
  color: #000;
}


@media (min-width: 768px){
	#information{
		margin-top: 5%;
		padding: 2% 0% 4%;
	}
	
	.info_title {
		width: 60%;
		margin: 3% 20% 0;
  		font-size: 42px; /* 少し大きめにしてサブタイトル感を出す */
  		padding: 0.5em 0;
  		border-radius: 20px; /* 角を丸めて柔らかさを出す */
	}
}

@media (min-width: 980px){
	#information{
		padding: 2% 0% 5%;
	}
	
	.info_title {
		width: 40%;
		margin: 5% 30% 0;
  		font-size: 38px; /* 少し大きめにしてサブタイトル感を出す */
  		padding: 0.5em 0;
  		border-radius: 25px; /* 角を丸めて柔らかさを出す */
	}
}
/*---ここまで---*/


/*---category---*/
#category h2{
	width: 90%;
	margin: 5% auto 0%;
	padding-top: 10%;
}


@media (min-width: 768px){
	#category h2{
		width: 70%;
		margin: 5% auto 10%;
		padding-top: 5%;
	}
}

@media (min-width: 980px){
	#category h2{
		width: 60%;
		margin: 5% auto 5%;
		padding-top: 10%;
	}
}
/*---ここまで---*/



/*---ショップコンテンツ枠---*/
#fashion,
#goods,
#service,
#gourmet,
#amusement{
	width: 96%;
	margin: 10% 2% 0;
}


@media (min-width: 768px){
	#fashion,
	#goods,
	#service,
	#gourmet,
	#amusement{
		width: 96%;
		margin: 5% 2% 0;
	}
}


@media (min-width: 980px){
	#fashion,
	#goods,
	#service,
	#gourmet,
	#amusement{
		width: 100%;
		margin: 3% 0% 0;
	}
}




/* =====================================
   アコーディオン（details/summary版）
   - HTML想定：
     <details class="accordion cat-fashion" name="sale-cat">
       <summary class="accordion-title">...</summary>
       <div class="accordion-content flex">...</div>
     </details>
===================================== */

/* 任意：アコーディオン周辺だけ scroll anchoring を無効化 */
details.accordion {
  overflow-anchor: none;
}

/* details のデフォルト余白などがあれば調整（必要に応じて） */
details.accordion {
  /* margin-bottom: 16px; など必要なら */
}

/* =====================================
   アコーディオン：タイトル帯（summary）
===================================== */

/* summary のデフォルトマーカー（▶︎）を消す */
details.accordion > summary {
  list-style: none;
}
details.accordion > summary::-webkit-details-marker {
  display: none;
}

/* 旧 h3 の装飾を summary に寄せる（h3グローバル汚染を回避） */
.accordion-title {
  position: relative;
  padding: 18px 96px 16px 16px;
  background: linear-gradient(90deg, #f7f1e3 0%, #ffffff 100%);
  border: 2px solid #5c4632;
  border-radius: 6px;
  cursor: pointer;
  text-align: left; /* SP */
  transition: border-color 0.25s ease; /* 視覚安定用 */
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 2px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
}

/* TB / PC：中央寄せ */
@media (min-width: 768px) {
  .accordion-title {
    padding: 18px 96px 16px 96px;
    text-align: center;
  }
}

@media (min-width: 980px) {
  .accordion-title {
    border-radius: 60px;
  }
}

/* 英字 */
.title-en {
  display: block;
  font-size: 12px;
  letter-spacing: 0.15em;
  opacity: 0.8;
}

/* 日本語 */
.title-ja {
  display: block;
  font-size: 18px;
}

@media (min-width: 768px) {
  .title-en {
    font-size: 18px;
    letter-spacing: 0.15em;
    opacity: 0.8;
  }
  .title-ja {
    font-size: 24px;
  }
}

@media (min-width: 980px) {
  .title-en {
    font-size: 20px;
    letter-spacing: 0.15em;
    opacity: 0.8;
  }
  .title-ja {
    margin-top: 5px;
    font-size: 26px;
  }
}

/* =====================================
   Push文言（SP / PC切替）
===================================== */
.accordion-push::before {
  content: "タップで詳細を見る";
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #8a7a65;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

@media (min-width: 768px) {
  .accordion-push::before {
    font-size: 16px;
  }
}

/* PC表記 */
@media (min-width: 980px) {
  .accordion-push::before {
    content: "クリックで詳細を見る";
  }
}

/* OPEN時はフェードアウト（details[open] で判定） */
details.accordion[open] .accordion-push::before {
  opacity: 0;
}

/* =====================================
   矢印
===================================== */
.accordion-arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 12px;
  height: 12px;
  border-right: 3px solid #3a2c20;
  border-bottom: 3px solid #3a2c20;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.35s ease;
}

/* OPEN時（details[open]） */
details.accordion[open] .accordion-arrow {
  transform: translateY(-50%) rotate(-135deg);
}

/* =====================================
   押せる感（SP重要）
===================================== */
@media (hover: none) {
  .accordion-title:active {
    transform: scale(0.98);
  }
}

/* =====================================
   カテゴリ別カラー（テキスト）
===================================== */
.cat-fashion .title-en,
.cat-fashion .title-ja {
  color: #e62e8b;
}

.cat-goods .title-en,
.cat-goods .title-ja {
  color: #db4d03;
}

.cat-service .title-en,
.cat-service .title-ja {
  color: #007ac2;
}

.cat-gourmet .title-en,
.cat-gourmet .title-ja {
  color: #4e922b;
}

.cat-amusement .title-en,
.cat-amusement .title-ja {
  color: #db0a17;
}

/* OPEN時：タイトル帯の枠色を連動（details[open]で判定） */
details.cat-fashion[open] > .accordion-title {
  border-color: #e62e8b;
}
details.cat-goods[open] > .accordion-title {
  border-color: #db4d03;
}
details.cat-service[open] > .accordion-title {
  border-color: #007ac2;
}
details.cat-gourmet[open] > .accordion-title {
  border-color: #4e922b;
}
details.cat-amusement[open] > .accordion-title {
  border-color: #db0a17;
}

/* =====================================
   アコーディオン中身
===================================== */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 0.45s ease,
    opacity 0.45s ease,
    transform 0.25s ease;
  will-change: max-height, opacity, transform;
}

/* OPEN */
details.accordion[open] .accordion-content {
  max-height: 5000px;
  opacity: 1;
  transform: translateY(0);
}

/* SP：縦並び */
.accordion-content .shop_box {
  width: 96%;
  margin: 5% 2% 0;
  padding: 8% 0 5%;
  background-color: #fff;
}

/* タブレット以上：横並び */
@media (min-width: 768px) {
  .accordion-content.flex {
    display: flex;
    flex-wrap: wrap;
  }

  .accordion-content .shop_box {
    width: 48%;
    margin: 2% auto 0;
    padding: 0% 0% 2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* 他カテゴリを“瞬時に閉じる”ための一時クラス（JSで付け外しする場合のみ） */
details.accordion.is-instant .accordion-content {
  transition: none !important;
}

/*---ここまで---*/


/*---shop_box---*/
.copy{
	text-align: center;
}

.period{
	display: inline-block; /* テキストの文量に合わせて幅を可変にする */
  	margin: 2% auto 2%;
  	padding: 0.5% 1em 1% 1em; /* 左右のpaddingをemで指定し適度な余白を確保 */
  	background-color: #E4007F;
  	border-radius: 10px;
  	font-size: 160%;
  	font-weight: 600;
  	line-height: 1.5;
	color: #ffffff;
}

.limited{
	display: inline-block; /* テキストの文量に合わせて幅を可変にする */
  	margin: 2% auto 0%;
  	padding: 0.5% 1em 1% 1em; /* 左右のpaddingをemで指定し適度な余白を確保 */
	background-color: #e60012;
	border-radius: 10px;
	font-size: 140%;
  	font-weight: 600;
	line-height: 1.5;
	color: #ffffff;
}

.circle {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border-radius: 18px;
	border: solid 1px #ffffff;
    font-size: 70%;
    margin: 0 2px;
    vertical-align: middle; /* 縦位置の基準を調整 */
    position: relative;
    top: -2px; /* 2px 上に移動してバランス調整 */
  	font-weight: 600;
}

.circle_2 {
    display: inline-block;
    width: auto;
	padding: 0.5% 0.3em 1% 0.3em; /* 左右のpaddingをemで指定し適度な余白を確保 */
    text-align: center;
    border-radius: 18px;
	border: solid 1px #ffffff;
    font-size: 70%;
    margin: 0 2px;
    vertical-align: middle; /* 縦位置の基準を調整 */
    position: relative;
    top: -2px; /* 2px 上に移動してバランス調整 */
  	font-weight: 600;
}

.circle_black {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border-radius: 18px;
	border: solid 1px #262626;
    font-size: 70%;
    margin: 0 2px;
    vertical-align: middle; /* 縦位置の基準を調整 */
    position: relative;
    top: -2px; /* 2px 上に移動してバランス調整 */
  	font-weight: 600;
}

.sales_copy{
	margin-top: 2%;
	font-size: 200%;
	font-weight: 600;
	line-height: 1.6;
}

.sales_copy_mgt{
	margin-top: 7%;
	font-size: 200%;
	font-weight: 600;
	line-height: 1.6;
}

.sales_copy_circle{
	display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    border-radius: 22px;
	border: solid 1px #e60012;
    margin: 0 2px;
    vertical-align: middle; /* 縦位置の基準を調整 */
    position: relative;
    top: -2px; /* 2px 上に移動してバランス調整 */
	font-size: 85%;
  	font-weight: 600;
}

/*.sales_copy_small{
	margin-top: 3%;
	margin-bottom: -2%;
	font-size: 180%;
	line-height: 1.5;
}*/

.sales_copy_small{
	font-size: 180%;
	font-weight: 600;
	line-height: 1.4;
}

.special_text{
	margin-top: 2%;
	font-size: 240%;
  	font-weight: 600;
	line-height: 1.5;
	color: #e60012;
}

.special_off-price{
	margin-top: 2%;
	font-size: 300%;
  	font-weight: 600;
	line-height: 1.5;
	color: #e60012;
}

.special_off-price_small{
	margin-top: 1%;
	font-size: 180%;
  	font-weight: 600;
  	font-style: normal;
	color: #e60012;
}

.shop_notation{
	margin-top: 2%;
	text-indent: -1em;
  	padding-left: 1em;
	font-size: 120%;
	line-height: 1.5;
}

hr.dotted-stylish {
  	border-top: 2px dotted #999;
  	width: 80%;
  	margin: 3em auto 1em;
}


.image_photo{
	width: 96%;
	margin: 5% 2% 5% 2%;
}


/* ---区切り線--- */
#fashion .separator_line {
	width: 80%;
	margin: 10% auto 0;
  	height: 1.5px;
  	background: #aaa;
	background-image: -webkit-linear-gradient(left, #ddd, #e62e8b, #ddd);
  	background-image: -moz-linear-gradient(left, #ddd, #e62e8b, #ddd);
	background-image: -ms-linear-gradient(left, #ddd, #e62e8b, #ddd);
	background-image: -o-linear-gradient(left, #ddd, #e62e8b, #ddd);
}

#fashion .separator_line_small_area {
	width: 80%;
	margin: 5% auto 0;
  	height: 1.5px;
  	background: #aaa;
	background-image: -webkit-linear-gradient(left, #ddd, #e62e8b, #ddd);
  	background-image: -moz-linear-gradient(left, #ddd, #e62e8b, #ddd);
	background-image: -ms-linear-gradient(left, #ddd, #e62e8b, #ddd);
	background-image: -o-linear-gradient(left, #ddd, #e62e8b, #ddd);
}

#goods .separator_line {
	width: 80%;
	margin: 10% auto 0;
  	height: 1.5px;
  	background: #aaa;
	background-image: -webkit-linear-gradient(left, #ddd, #db4d03, #ddd);
  	background-image: -moz-linear-gradient(left, #ddd, #db4d03, #ddd);
	background-image: -ms-linear-gradient(left, #ddd, #db4d03, #ddd);
	background-image: -o-linear-gradient(left, #ddd, #db4d03, #ddd);
}

#service .separator_line {
	width: 80%;
	margin: 10% auto 0;
  	height: 1.5px;
  	background: #aaa;
	background-image: -webkit-linear-gradient(left, #ddd, #007ac2, #ddd);
  	background-image: -moz-linear-gradient(left, #ddd, #007ac2, #ddd);
	background-image: -ms-linear-gradient(left, #ddd, #007ac2, #ddd);
	background-image: -o-linear-gradient(left, #ddd, #007ac2, #ddd);
}

#gourmet .separator_line {
	width: 80%;
	margin: 10% auto 0;
  	height: 1.5px;
  	background: #aaa;
	background-image: -webkit-linear-gradient(left, #ddd, #4e922b, #ddd);
  	background-image: -moz-linear-gradient(left, #ddd, #4e922b, #ddd);
	background-image: -ms-linear-gradient(left, #ddd, #4e922b, #ddd);
	background-image: -o-linear-gradient(left, #ddd, #4e922b, #ddd);
}

#amusement .separator_line {
	width: 80%;
	margin: 10% auto 0;
  	height: 1.5px;
  	background: #aaa;
	background-image: -webkit-linear-gradient(left, #ddd, #db0a17, #ddd);
  	background-image: -moz-linear-gradient(left, #ddd, #db0a17, #ddd);
	background-image: -ms-linear-gradient(left, #ddd, #db0a17, #ddd);
	background-image: -o-linear-gradient(left, #ddd, #db0a17, #ddd);
}

#campaign .separator_line{
	width: 80%;
	margin: 10% auto 0;
  	height: 1.5px;
  	background: #aaa;
	/*background-image: -webkit-linear-gradient(left, #ddd, #32CD32, #ddd);
  	background-image: -moz-linear-gradient(left, #ddd, #32CD32, #ddd);
	background-image: -ms-linear-gradient(left, #ddd, #32CD32, #ddd);
	background-image: -o-linear-gradient(left, #ddd, #32CD32, #ddd);*/
	background-image: -webkit-linear-gradient(left, #ddd, #FF8C00, #ddd);
  	background-image: -moz-linear-gradient(left, #ddd, #FF8C00, #ddd);
	background-image: -ms-linear-gradient(left, #ddd, #FF8C00, #ddd);
	background-image: -o-linear-gradient(left, #ddd, #FF8C00, #ddd);
}

/*#event .separator_line{
	width: 80%;
	margin: 10% auto 0;
  	height: 1.5px;
  	background: #aaa;
	background-image: -webkit-linear-gradient(left, #ddd, #FF8C00, #ddd);
  	background-image: -moz-linear-gradient(left, #ddd, #FF8C00, #ddd);
	background-image: -ms-linear-gradient(left, #ddd, #FF8C00, #ddd);
	background-image: -o-linear-gradient(left, #ddd, #FF8C00, #ddd);
}*/
/* ---ここまで--- */


.flex_shop{
	width: 90%;
	margin: 5% 5% 0;
	display: flex;
	align-items: center;
}

h4{
	width: 50%;
}

/*h4 img{
	width: 60%;
	margin: 0 20%;
}*/
h4 img{
	width: 80%;
	height: auto;
	display: block;
	margin: 0 10%;
	}

/*h4 span img{
	width: 70%;
	margin: 0 15%;
	align-items: center;
}*/

h4 img:hover {
  	transform: scale(0.9,0.9);
}

.floor{
	width: 50%;
	text-align: center;
}

.shop_name{
	margin-top: 1%;
	font-size: 130%;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 600;
  	font-style: normal;
	line-height: 1.2;
	letter-spacing: 1px;
}

.floor_category_fashion{
	width: 3em;
	margin: 5% auto 0;
	background-color: #e62e8b;
	border-radius: 10px;
	color: #fff;
	font-size: 100%;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 700;
  	font-style: normal;
	line-height: 1.4;
}

.floor_category_goods{
	width: 3em;
	margin: 5% auto 0;
	background-color: #db4d03;
	border-radius: 10px;
	color: #fff;
	font-size: 100%;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 700;
  	font-style: normal;
	line-height: 1.4;
}

.floor_category_service{
	width: 3em;
	margin: 5% auto 0;
	background-color: #007ac2;
	border-radius: 10px;
	color: #fff;
	font-size: 100%;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 700;
  	font-style: normal;
	line-height: 1.4;
}

.floor_category_gourmet{
	width: 3em;
	margin: 5% auto 0;
	background-color: #4e922b;
	border-radius: 10px;
	color: #fff;
	font-size: 100%;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 700;
  	font-style: normal;
	line-height: 1.4;
}

.floor_category_amusement{
	width: 3em;
	margin: 5% auto 0;
	background-color: #db0a17;
	border-radius: 10px;
	color: #fff;
	font-size: 100%;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 700;
  	font-style: normal;
	line-height: 1.4;
}

.category{
	margin-top: 5%;
	font-size: 100%;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	line-height: 1.4;
}


@media (min-width: 768px){
	.period{
		margin: 5% auto 0%;
		border-radius: 15px;
		font-size: 20px;
	}
	
	.limited{
		margin: 5% auto 0%;
		border-radius: 15px;
		font-size: 18px;
	}
	
	.sales_copy{
		margin-top: 5%;
		font-size: 24px;
	}
	
	.sales_copy_mgt{
		margin-top: 7%;
		font-size: 24px;
	}
	
	.sales_copy_small{
		font-size: 24px;
	}
	
	.special_text{
		margin-top: 2%;
		font-size: 27px;
	}

	.special_off-price{
		margin-top: 2%;
		font-size: 34px;
	}
	
	.special_off-price_small{
		margin-top: 1%;
		margin-bottom: -2%;
		font-size: 20px;
	}
	
	.shop_notation{
		margin-top: 2%;
		font-size: 18px;
	}
	
	hr.dotted-stylish {
  		border-top: 2px dotted #999;
  		width: 80%;
  		margin: 1em auto 0;
	}
	
	/* ---区切り線--- */
	#fashion .separator_line,
	#goods .separator_line,
	#service .separator_line,
	#gourmet .separator_line,
	#amusement .separator_line,
	#campaign .separator_line,
	#event .separator_line{
		width: 80%;
		margin: 7% auto 0;
  		height: 2px;
	}
	
	h4{
		width: 45%;
	}

	h4 img{
		width: 90%;
		margin: 0 10%;
	}

	/*h4 span img{
		width: 70%;
		margin: 0 15%;
		align-items: center;
	}*/
	
	.floor{
		width: 55%;
	}
	
	.shop_name{
		margin-top: 1%;
		font-size: 16px;
	}
	
	.floor_category_fashion{
		font-size: 14px;
	}
	
	.floor_category_goods{
		font-size: 14px;
	}
	
	.floor_category_service{
		font-size: 14px;
	}
	
	.floor_category_gourmet{
		font-size: 14px;
	}
	
	.floor_category_amusement{
		font-size: 14px;
	}
	
	

	.category{
		margin-top: 5%;
		font-size: 14px;
	}	
}


@media (min-width: 980px){
	.period{
		margin: 5% auto 0%;
		border-radius: 15px;
		font-size: 22px;
	}
	
	.limited{
		margin: 5% auto 0%;
		border-radius: 15px;
		font-size: 20px;
	}
	
	.sales_copy{
		margin-top: 5%;
		font-size: 24px;
	}
	
	.sales_copy_mgt{
		margin-top: 7%;
		font-size: 24px;
	}
	

	.sales_copy_small{
		font-size: 24px;
	}
	
	.special_text{
		margin-top: 2%;
		font-size: 27px;
	}

	.special_off-price{
		margin-top: 2%;
		font-size: 34px;
	}
	
	.special_off-price_small{
		margin-top: 1%;
		margin-bottom: -2%;
		font-size: 20px;
	}
	
	.shop_notation{
		margin-top: 2%;
		font-size: 18px;
	}
	
	hr.dotted-stylish {
  		border-top: 2px dotted #999;
  		width: 80%;
  		margin: 0.75em auto 0em;
	}
	
	/* ---区切り線--- */
	#fashion .separator_line,
	#goods .separator_line,
	#service .separator_line,
	#gourmet .separator_line,
	#amusement .separator_line{
		width: 80%;
		margin: 7% auto 0;
  		height: 2px;
	}
	
	h4{
		width: 45%;
	}

	h4 img{
		width: 100%;
		margin: 0 0%;
	}

	/*h4 span img{
		width: 70%;
		margin: 0 15%;
		align-items: center;
	}*/
	
	.floor{
		width: 55%;
	}
	
	.shop_name{
		margin-top: 1%;
		font-size: 18px;
	}
	
	.floor_category_fashion{
		font-size: 16px;
	}
	
	.floor_category_goods{
		font-size: 16px;
	}
	
	.floor_category_service{
		font-size: 16px;
	}
	
	.floor_category_gourmet{
		font-size: 16px;
	}
	
	.floor_category_amusement{
		font-size: 16px;
	}
	
	.category{
		margin-top: 5%;
		font-size: 16px;
	}	
}
/*---ここまで---*/


/*---福袋ブロック---*/
#luckybag{
	margin-top: 15%;
}

.background_1 img{
	width: 100%;
	margin-top: -1%;
}

#luckybag h2{
	width: 90%;
	/*margin: 15% auto 0;*/
	margin: 10% auto 0;
}

.luckybag_box{
	width: 100%;
	padding-bottom: 7%;
	/*background-color: #e50012;*/
	background-image:url("/hatsuuri-sale2026/img/back_luckybag.png");
	background-repeat: repeat-y;
	background-size: 100% auto;
}

/*.sub_title{
	width: 100%;
	margin-top: 8%;
}*/

.background_2{
	width: 100%;
	margin-top: 8%;
}

.luckybag_flex{
	width: 98%;
	padding: 0% 1% 0 1%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.luckybag_box li{
	width: 48%;
	margin: 2% 0 0 0;
}

.luckybag_box li img{
	width: 100%;
	height: auto;
	display: block;
}

.luckybag_box aside ul.notation li{
	width: 100%;
	margin: 0% 0 0 0;
}

@media (min-width: 768px){
	#luckybag{
		/*margin-top: 10%;*/
		margin-top: 10%;
	}
	
	.background_1 img{
		margin-top: -1.5%;
	}
	
	#luckybag h2{
		width: 70%;
		/*margin: 10% auto 0;*/
		margin: 5% auto 0;
	}
	
	.luckybag_box{
		padding-bottom: 4%;
	}
	
	.luckybag_flex{
		padding: 0% 1% 2% 1%;
	}
	
	/*.sub_title{
		width: 100%;
		margin-top: 6%;
	}*/
	
	.background_2{
		margin-top: 6%;
	}
	
	/*.luckybag_box li{
		width: 32%;
		margin: 1.5% 0 0 0;
	}*/
}


@media (min-width: 980px){
	#luckybag{
		/*margin-top: 10%;*/
		margin-top: 10%;
	}
	
	.background_1 img{
		margin-top: -3%;
	}
	
	#luckybag h2{
		width: 60%;
		/*margin: 10% auto 0;*/
		margin: 5% auto 0;
	}
	
	.luckybag_box{
		/*padding-bottom: 4%;*/
	}
	
	/*.sub_title{
		width: 100%;
		margin-top: 5%;
	}*/
	
	.background_2{
		margin-top: 5%;
	}
	
	.luckybag_box li{
		width: 32%;
		margin: 1.5% 0 0 0;
	}
}

/*---ここまで---*/






/*---キャンペーンブロック---*/
/*---ブロック枠---*/
/* モバイル（デフォルト） */
#campaign img{
	width: 100%;
	height: auto;
	display: block;
}

.campaign_box {
  width: 90%;
  margin: 5% auto 0%;
  background: linear-gradient(to bottom, #FFF5E6, #FFFFFF);
  position: relative;
  padding: 0% 0 8%;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(50, 205, 50, 0.12);
  overflow: hidden;
}

.campaign_box::before,
.campaign_box::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 8px;
  left: 0;
  background-size: 100% 100%;
}

.campaign_box::before {
  top: 0;
  background: linear-gradient(to right, #FF8C00 0%, #FFB347 100%);
}

.campaign_box::after {
  bottom: 0;
  background: linear-gradient(to right, #FFB347 0%, #FF8C00 100%);
}

/* タブレット以上 */
@media screen and (min-width: 768px) {
  .campaign_box {
    width: 85%;
	margin: 7% auto 0%;
    padding: 0 0 8% 0;
  }

  .campaign_box::before,
  .campaign_box::after {
    height: 10px;
  }
}

/* PC以上 */
@media screen and (min-width: 980px) {
  .campaign_box {
	margin: 5% auto 0%;
    padding: 0 0 10% 0;
  }

  .campaign_box::before,
  .campaign_box::after {
    height: 12px;
  }
}

/*---ブロック枠ここまで---*/

#campaign h2{
	width: 90%;
	/*margin: 15% auto 0;*/
	margin: 5% auto 0;
	padding-top: 10%;
}

#campaign .sub_copy{
	width: 100%;
	margin: 10% auto 0;
}

.bnr_campaign{
	width: 95%;
	margin: 10% auto 0;
}

@media (min-width: 768px){
	#campaign h2{
		width: 70%;
		/*margin: 10% auto 0;*/
		margin: 5% auto 0;
		padding-top: 5%;
	}
	
	#campaign .sub_copy{
		width: 90%;
		margin: 7% 5% 0;
	}
	
	.bnr_campaign{
		width: 90%;
		margin: 7% auto 0;
	}	
}

@media (min-width: 980px){
	#campaign h2{
		width: 60%;
		/*margin: 10% auto 0;*/
		margin: 5% auto 0;
		padding-top: 5%;
	}
	
	#campaign .sub_copy{
		width: 80%;
		margin: 7% 10% 0;
	}
	
	.bnr_campaign{
		width: 80%;
		margin: 7% auto 0;
	}	
}
/*---ここまで---*/


.notation{
	margin: 10% 2% 0;
	text-indent: -1em;
  	padding-left: 1em;
	font-size: 100%;
  	font-weight: 800;
	color: #ffffff;
}

.notation li{
	margin-top: 2%;
	line-height: 1.4;
}

@media (min-width: 768px){
	.notation{
		font-size: 18px;
	}
	
	.notation li{
		margin-top: 1%;
		line-height: 1.4;
	}
}

@media (min-width: 980px){
	.notation{
		margin: 5% 2% 0;
		font-size: 18px;
	}
	
	.notation li{
		margin-top: 1%;
		line-height: 1.4;
	}
}



.digital_flyer{
	width: 60%;
	margin: 7% 20% 0;
}

.digital_flyer img:hover {
  	transform: scale(0.9,0.9);
}

@media (min-width: 768px){
	.digital_flyer{
		width: 50%;
		margin: 5% 25% 0;
	}
}

@media (min-width: 980px){
	.digital_flyer{
		width: 40%;
		margin: 7% 30% 0;
	}
}




/*---footer---*/
footer{
	width: 100%;
    max-width: 980px;
	margin: 5% auto 0;
	padding: 2% 0;
	text-align: center;
	color: #1F1C1C;
	border-bottom: #019e40 solid 4px;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
}

footer ul{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

footer ul li:nth-child(1){
	width: 90%;
	margin: 0 5%;
}

footer ul li:nth-child(2){
	width: 18%;
	margin: 5% 8% 0 0;
}

footer ul li:nth-child(3){
	width: 18%;
	margin: 5% 3% 0 0%;
	padding-left: 5%;
	border-left: #1d4b9f solid 2px; 
}

.access{
	width: 94%;
	margin: 4% 3% 0;
	border-top: #1d4b9f solid 1px;
}

.access dt{
	margin-top: 5%;
	font-size: 120%;
	line-height: 1.6;
}

.access dd{
	margin-top: 3%;
	font-size: 120%;
	line-height: 1.6;
}

.logo img{
	width: 50%;
	margin: 5% 25% 0%;
}

.logo p{
	margin-top: 3%;
	text-align: center;
	font-size: 80%;
}

@media (min-width: 768px){
	footer{
		width: 100%;
		margin: 3% auto 0;
		padding: 2% 0;
	}
	
	footer ul li:nth-child(1){
		width: 70%;
		margin: 0 15%;
	}

	footer ul li:nth-child(2){
		width: 15%;
		margin: 5% 8% 0 0;
	}

	footer ul li:nth-child(3){
		width: 15%;
		margin: 5% 3% 0 0%;
		padding-left: 5%;
		border-left: #1d4b9f solid 2px; 
	}

	.access{
		border-top: #1d4b9f solid 3px;
	}
	
	.access dt{
		margin-top: 3%;
		font-size: 20px;
	}
	
	.access dd{
		margin-top: 1%;
		font-size: 20px;
	}
	
	.logo img{
		width: 30%;
		margin: 3% 35% 0%;
	}
	
	.logo p{
		font-size: 14px;
	}
}


@media (min-width: 980px){
	footer{
		border-bottom: #1d4b9f solid 10px;
	}
	
	footer ul li:nth-child(1){
		width: 60%;
		margin: 0 0 0 3%;
	}

	footer ul li:nth-child(2){
		width: 12%;
		margin: 0% 3% 0 3%;
	}
	
	footer ul li:nth-child(3){
		width: 12%;
		margin: 0% 3% 0 0%;
		padding-left: 3%;
		border-left: #1d4b9f solid 5px;
	}
	
	.access{
		border-top: #1d4b9f solid 3px;
	}
	
	.access{
		border-top: #1d4b9f solid 3px;
	}
	
	.access dt{
		margin-top: 3%;
		font-size: 22px;
	}
	
	.access dd{
		margin-top: 1%;
		font-size: 22px;
	}
	
	.logo img{
		width: 30%;
		margin: 3% 35% 0%;
	}
	
	.logo p{
		font-size: 16px;
	}
}

/*---ここまで---*/


br.sp{
	display: block;
}

br.pc{
	display: none;
	}

.font50{
	font-size: 50%;
}

.font55{
	font-size: 55%;
}

.font60{
	font-size: 60%;
}

.font65{
	font-size: 65%;
}

.font70{
	font-size: 70%;
}

.font75{
	font-size: 75%;
}

.font80{
	font-size: 80%;
}

.font85{
	font-size: 85%;
}

.font90{
	font-size: 90%;
}

.center{
	text-align: center;
}

.character_space{
	letter-spacing: -1px;
}

.character_space2{
	letter-spacing: -2px;
}

.Red{
	color: #e60012;
}

.bold{
	font-weight: 600;
}

.black{
	color: #262626;
}

.magenta{
	color: #e4007f;
}

.mgt10{
	margin-top: 10%!important;
}


@media (min-width: 980px){
	br.sp{
		display: none;
	}
	
	br.pc{
		display: block;
	}
}



/* ---詳細はこちらボタン--- */
.btn_animation{
	display: block;
	margin: 10% auto 0%;
	width: 180px;
	height: 35px;
  	line-height: 35px;
  	font-size: 16px;
  	text-decoration: none;
  	background-color: #e50012;
  	color: #fff;
  	text-align: center;
  	cursor: pointer;
  	border-radius: 78px;
  	animation: btn_animation 3s infinite;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 600;
  	font-style: normal;
}

/*@keyframes btn_animation {
    0% {
        transform: scale(1, 0.8);
    }
    20% {
        transform: scale(0.8, 1.1);
    }
    95% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 0.8);
    }
}*/



@media (min-width: 768px){
	/* ---ボタン--- */
	.btn_animation{
		display: block;
		margin: 5% auto 0%;
		width: 250px;
		height: 45px;
  		line-height: 45px;
  		font-size: 20px;
  		border-radius: 60px;
	}
}

@media (min-width: 980px){
	/* ---ボタン--- */
	.btn_animation{
		display: block;
		margin: 5% auto 0%;
		width: 250px;
		height: 45px;
  		line-height: 45px;
  		font-size: 25px;
  		border-radius: 60px;
	}
}





/*--- スクロール＆ページTOPへ戻る ---*/
/*---改修版---*/
.scroll-top {
  /* 表示位置 */
  position: fixed;
  right: 20px;
  bottom: 10px; /* PC時の標準位置 */
  z-index: 101;

  /* はじめは非表示 */
  opacity: 0;
  visibility: hidden; 
  transition: opacity .5s, visibility .5s;

  /* 縦書き */
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;

  /* 改行禁止 */
  white-space: nowrap;
}

/* アニメーション（transformで上下に動かす） */
.scroll-top {
  animation: arrowmove 1s ease-in-out infinite;
  will-change: transform;
}

/* アニメーション定義 */
@keyframes arrowmove {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); } /* 上方向に少し動かす */
  100% { transform: translateY(0); }
}

/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
  opacity: 1;
  visibility: visible;
}

/* リンク全体の aタグの形状 */
.scroll-top a {
  position: relative; /* 疑似要素の基準位置に */
  text-decoration: none;
  color: #666;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: block;
}

/* スクロールリンクの形状 */
.js-scroll a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 50px;
  background: #666;
}

.js-scroll a::before {
  content: "";
  position: absolute;
  top: 30px;
  right: -6px;
  width: 1px;
  height: 20px;
  background: #666;
  transform: skewX(-31deg);
}

/* Edge IE11 hack */
_:-ms-lang(x), .js-scroll a::before {
  right: -11px;
}

/* ページトップリンクの形状 */
.js-pagetop a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 50px;
  background: #666;
}

.js-pagetop a::before {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  width: 1px;
  height: 20px;
  background: #666;
  transform: skewX(31deg);
}

/* Edge IE11 hack */
_:-ms-lang(x), .js-pagetop a::before {
  right: 0;
}

/*--------------------------------------
  スマホ・タブレット用位置調整
--------------------------------------*/
@media (max-width: 979px) {
  .scroll-top {
    bottom: 80px !important; /* ← 下部ナビと被らないように上げる */
  }
}

/*--------------------------------------
  PC表示時の色調整・サイズ
--------------------------------------*/
@media (min-width: 980px) {
  .scroll-top a {
    color: #000000;
    font-size: 0.5rem;
  }

  .js-scroll a::after,
  .js-pagetop a::after {
    background: #000000;
  }

  .js-scroll a::before,
  .js-pagetop a::before {
    background: #000000;
  }
}





/* ==== 共通ナビスタイル（スマホ・PC共通） ==== */
.category-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
	background: rgba(230, 0, 18, 1); /* ← 背景候補① */
  	backdrop-filter: blur(10px); /* ← ガラス効果をさらに強調（対応ブラウザで有効） */
	/*background-color: #d0200c;*/
  z-index: 100;
  opacity: 1;
  visibility: visible;
}

/* フッター侵入時だけ非表示 */
.category-nav.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s, visibility .4s;
}

/* ==== スマホ（横並び）用：.vertical が付いていない場合 ==== */
.category-nav:not(.vertical) {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; /* 端も含めて均等配置 */
  align-items: center;
  padding: 8px 0; /* 左だけの padding は削除 */
}

.category-nav:not(.vertical) a {
  flex: 1;               /* 行幅を要素数で等分 */
  text-align: center;    /* 中身を中央寄せ */
}

.category-nav:not(.vertical) a img {
  width: 100%;
  max-width: 75px;       /* アイコンの実サイズ調整（必要に応じて変更） */
  height: auto;
  transition: transform 0.3s, outline 0.3s;
}

.category-nav a.active img {
  outline: 2px solid #ffffff;
  border-radius: 8px;
  transform: scale(1.01);
}

/* ==== 縦並び用クラス（PC 想定） ==== */
.category-nav.vertical {
  /*top: 40%;*/
	top: 50%;
  left: auto;
  /*right: 30px;*/
	right: 3%;
  bottom: auto;
  transform: translateY(-50%);
  flex-direction: column;
  width: auto;
  background: transparent;
  padding: 0;
  justify-content: flex-start;
  align-items: center;
}

.category-nav.vertical a {
  flex: 0 0 auto;        /* 縦ナビでは等分しない */
  display: block;
  /*width: 120px;*/
	width: 110px;
  /*margin: 20px 0;*/
	margin: 30px 0;
}

.category-nav.vertical a img {
  width: 100%;
  height: auto;
  display: block;
}

/* 縦並びのときだけスケールアップ */
.category-nav.vertical a.active img {
  transform: scale(1.15);
}