@charset "utf-8";
/*@charset "UTF-8";     コメント */
/*css初期設定 start*/
html {
	font-size: 62.5%;
	/*文字標準*/
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	font-style: normal;
	scroll-behavior: smooth;
}
.eng {
	font-family: 'Bellefair', serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 2px;
}
a {
	text-decoration: none;
	/*リンクデコレーションリセット*/
	color: #000;
}
/*大きさの計算*/
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
/*hrリセット*/
hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	width: 100%;
	margin: 0 auto;
	/*文字詰め*/
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
	/*スマホ横向き時のフォントサイズリセット*/
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	line-height: 1.7;
	font-weight: 400;
	color: #fff;
	overflow: visible;
}
/*iOSフォーム要素の初期化*/
input,
button,
textarea,
select {
	-webkit-appearance: none;
	appearance: none;
}
/*画像の調整*/
img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

@media (max-width: 1279px) {
	.sp {
		display: block !important;
	}
	.pc {
		display: none !important;
	}
	.br-sp {
		display: block !important;
	}
}
@media only screen and (min-width: 1280px) {
	.sp {
		display: none !important;
	}
	.pc {
		display: block !important;
	}
	.br-sp {
		display: none !important;
	}
}

/*ヘッダーアイコンサイズ調整　sp*/
#header #name-and-logo img {
	height: 48px;
	width: 150px;
}
/*css初期設定 end*/

/*メインcss*/
.mainWrap {
	display: block;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.wrapper {
	max-width: 1200px;
	margin: 0 auto;
}
.sticky-bg-layer {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-image: url('../images/background_sp.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

.scroll-content-layer {
	position: relative;
	z-index: 2;
	margin-top: -100vh;
}
.catArea {
	width: 100%;
	/* max-width: 730px; */
	margin: 0 auto;
}
.catArea.coodinateParts .catLead {
	padding: 12% 0 10%;
}
.catArea.giftParts .catLead {
	padding: 12% 0 12%;
}
.catArea.coodinateParts .catLead h3 {
	font-size: clamp(40px, 10.66vw, 58px);
	text-decoration: none;
	text-align: center;
	padding-bottom: 3%;
}
.catArea.giftParts .catLead h3 {
	font-size: clamp(40px, 10.66vw, 58px);
	text-decoration: none;
	text-align: center;
	padding-bottom: 3%;
}
.catLead p {
	font-size: 14px;
	text-decoration: none;
	text-align: center;
	line-height: 1.3;
}
.catBlock {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 12%;
}

.catBlock h4 {
	font-size: clamp(32px, 8.53vw, 43px);
	text-decoration: none;
	text-align: center;
}
.catArea.coodinateParts .catBlock p {
	font-size: 14px;
	text-decoration: none;
	text-align: center;
	line-height: 1.3;
	padding: 3% 0 2%;
}
.catArea.giftParts .catBlock p {
	font-size: 14px;
	text-decoration: none;
	text-align: center;
	line-height: 1.3;
}
.credit p {
	font-size: 13px;
}
.catBlock .credit {
	width: 95%;
	margin: 5% auto;
	display: flex;
}
.catBlock .creditFlex50 {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 0 0.5%;
}
.catBlock .creditFlex50 p {
	padding: 1% 0;
	text-align: left;
	line-height: 1.2 !important;
}
.creditFlexInter {
	display: flex;
	width: 100%;
}
.creditFlex33 {
	width: 33%;
	display: flex;
	align-items: center;
	margin: 2% auto;
}
.creditFlex66 {
	width: 66%;
	display: flex;
	align-items: center;
	margin: 0.5% auto;
}
.creditFlex33 p,
.dreditFlex66 p {
	font-size: 12px;
	text-align: left;
}
.catArea.coodinateParts .creditFlex33 p {
	font-size: 12px;
	text-align: left;
}
.catArea.giftParts .creditFlex33 p {
	font-size: 12px;
	text-align: left;
}
a.buyBtn {
	width: 80%;
	border: 1px solid #fff;
	text-align: center;
	font-size: 11px;
	color: #fff;
	box-sizing: border-box;
	text-decoration: none;
}

.slide-title,
.priceSec .priceTxt {
	font-size: 2rem;
	font-style: normal;
	letter-spacing: 0.1rem;
}
/*swiper用css*/
.swipeWrap {
	width: 100%;
	margin-left: auto;
	overflow: hidden;
}
.swiper-wrapper {
	height: auto;
}
.swiper-slide {
	padding-top: 3%;
}

/*	// 2.代わりに親要素で hidden にする*/
.swipeWrap .swiper {
	overflow: visible;
	padding-bottom: 40px;
	/*	  // 1.はみ出させるように visible で上書き*/
}
.catBtn.slide-title {
	text-decoration: none;
	color: #e1444f;
	font-size: 2rem;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2 !important;
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 10;
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
	height: 25px;
	width: 25px;
	top: 45%;
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev:after,
.swiper-button-next:after {
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	height: 25px;
	margin: auto;
	width: 25px;
}

.slide-media.img-cover {
	border-radius: 50%;
	position: relative;
}

.slide-media.img-cover a {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 100;
}

/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 0 20px;
}

/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
	border-radius: 0;
	background-color: #3d3d3d;
	height: 2px;
	width: 20%;
}

.swiper .swiper-slide img.rankNo {
	width: 40px;
}
.categorySec .swiper .swiper-slide img {
	border-radius: 50%;
}

.priceSec {
	width: 100%;
	padding: 8% 0;
}

.priceSec .priceTxt a {
	width: 90%;
	padding: 3%;
	margin-bottom: 2%;
	display: inline-block;
	background-color: #fff;
	border-radius: 10px;
	color: #e1444f;
	text-decoration: none;
}

.priceSec .priceFlex {
	width: 100%;
	margin-top: 5%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	color: #fff;
	text-align: center;
}

.priceSec .priceFlex .price_f {
	width: calc(100% / 2);
	margin-top: 1%;
	position: relative;
	height: 100%;
}
.categorySec h2,
.priceSec h2,
.photoSec h2 {
	font-weight: 400;
	letter-spacing: 0.1rem;
	font-size: 2rem;
	text-align: center;
	padding-bottom: 3%;
}

/* トップに戻る　フローティングボタン */
.float-button__wrap {
	display: none; /*最初は隠す*/
	width: 90px;
	height: auto;
	position: fixed;
	bottom: 16px;
	/* 20250410フッター修正 */
	right: 10px;
	z-index: 10000;
}
.float-button__wrap a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

/* トップに戻る　フローティングボタン */
@media only screen and (min-width: 768px) {
	.catArea.coodinateParts .creditFlex33 p {
		font-size: 14px;
		text-align: left;
	}
	.catArea.giftParts .creditFlex33 p {
		font-size: 14px;
		text-align: left;
	}
	.catBlock .credit {
		width: 70%;
		gap: 5%;
	}
}
/*width:1025px以上*/
@media only screen and (min-width: 1280px) {
	.sticky-bg-layer {
		/* 以下のURLにお手持ちの背景画像のパスを入れてください */
		background-image: url('../images/background_pc.jpg');
	}
	.catArea {
		width: 100%;
		max-width: none;
		margin: 0 auto;
	}
	.catLead p {
		font-size: 18px;
	}
	.catArea.giftParts .catBlock p {
		font-size: 15px;
	}
	.catArea.coodinateParts .catLead {
		padding: 7% 0 5%;
	}
	.catArea.giftParts .catLead {
		padding: 7% 0 5%;
	}
	.catArea.coodinateParts .catLead h3 {
		padding-bottom: 1%;
	}
	.categoryItems {
		width: 90%;
		margin: 0 auto;
	}
	.sec-area h2,
	.priceSec h2 {
		font-weight: 400;
		font-size: 2.2rem;
	}
	.catArea.giftParts .catLead h3 {
		padding-bottom: 1%;
	}

	.catBlock p {
		font-size: 18px;
		padding: 1% 0 3%;
	}
	.catBlock {
		width: 100%;
		max-width: none;
		padding-bottom: 10%;
	}
	.catBlock:nth-of-type(5) {
		padding-bottom: 6%;
	}
	.catBlock .credit {
		width: 34%;
		margin: 0 auto;
		display: flex;
	}

	.creditFlex33 p,
	.creditFlex66 p {
		font-size: 16px;
	}
	.priceSec .priceFlex .price_f {
		width: calc(100% / 4);
	}

	.priceSec .priceTxt a {
		padding: 6% 10%;
	}
	.catArea.coodinateParts .catBlock p {
		padding: 1% 0 2%;
	}
	.sec-area,
	.priceSec {
		padding: 2%;
	}
	.priceSec {
		padding-bottom: 5%;
	}
	.nov-flex.cat-list li:hover {
		background-color: rgb(255, 255, 255, 0.2);
		transition: transform 0.2s;
	}

	.slide:hover {
		opacity: 0.75;
	}

	.price_f:hover {
		opacity: 0.75;
	}
}