@charset "utf-8";
@font-face {
  font-family:favorites;
  src:url(data:application/x-font-ttf;charset=utf-8;base64,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) format("truetype");
  font-weight:400;
  font-style:normal
}
[class*=" sf-icon-"],
[class^=sf-icon-] {
  font-family:favorites!important;
  speak:none;
  font-style:normal;
  font-weight:400;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
.sf-icon-spinner:before {
  content:"\e97b"
}
.sf-icon-favorite:before {
  content:"\e9d9"
}
.sf-icon-checkmark:before {
  content:"\ea10"
}
.sf-icon-bookmark:before {
  content:"\e8e6"
}
.sf-icon-love:before {
  content:"\e87d"
}
.sf-icon-wishlist:before {
  content:"\e89a"
}
.sf-icon-like:before {
  content:"\e8dc"
}
.sf-icon-star-empty:before {
  content:"\e600"
}
.sf-icon-star-full:before {
  content:"\e601"
}

.simplefavorite-button.preset {
	padding: 10px;
	border-radius: 5px;
}
.favorites-list li img {
  float:none;
  margin-right:1em
}
.areaBox li a, .areaBox li a span {
		text-decoration: none
}
.areaWrap {
		flex-basis: 100%
}
.areaBox {
		padding: 10px;
		background: #fff;
		margin: 10px
}
.areaDes {
		padding: 10px;
		font-size: 14px;
		background-color: #fffcec;
		margin: 0 auto 10px
}
.areaBox ul {
		background-color: #fff;
		padding: 10px;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start
}
.subArea a {
		font-size: 1pc
}
.areaBox li {
		text-align: center;
		flex-basis: 50%;
		margin-bottom: 30px;
		vertical-align: top;
		position: relative
}
.areaBox li .inner {
		background-color: #eee;
		margin: 5px;
		padding-top: 10px
}
.areaBox li p {
		font-size: 9pt;
		padding: 10px;
		text-align: left
}
.areaBox li img {
		width: 90%;
		margin: auto;
		overflow: hidden;
		display: block;
		transition-duration: .3s
}
.imgWrap {
		overflow: hidden;
		width: 20pc;
		height: 180px
}
.areaBox li img:hover {
		transform: scale(1.1);
		transition-duration: .3s
}
.areaBox li a span {
		display: block;
		margin: 10px;
		background-color: #005e99;
		padding: 5px 10px;
		border-radius: 30px;
		color: #fff;
		font-size: 2.5vw
}
.areaBox li a span:hover {
		background-color: #f90
}
.emptyMark {
		border: 3px solid #f33;
		border-radius: 75pt;
		width: 70px;
		height: 70px;
		line-height: 70px;
		font-size: 1pc;
		color: #f33;
		font-weight: 700;
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		background-color: #fff;
		transform: rotate(20deg)
}
@media screen and (min-width:768px) {
		.favorite {
				margin: 0 20px
		}
		.areaBox li {
				text-align: center;
				flex-basis: 33%;
				margin-bottom: 30px;
				vertical-align: top
		}
		.areaBox li a span {
				font-size: 1.2rem
		}
}
@media screen and (min-width:1130px) {
		.favorite {
				margin: 0 0 0 40px
		}
		.areaBox li {
				flex-basis: 20%
		}
}

/* 260326お気に入りボタン設置 */
.title-and-fav {
    display: flex;
    align-items: flex-end !important;
    justify-content: space-between;
    gap: 16px; /* タイトルとボタンの間隔 */
}


.simplefavorite-button {
	font-size: 12px;
	padding: 8px 16px;
	border: none;
	border-radius: 2px;
	position: relative;
	background-color: #fff;
	box-shadow: 0 4px 12px #141b38;
	font-weight: bold;
	white-space: nowrap;
	cursor: pointer;
	margin-bottom: 8px;
}

/* 星 */
.simplefavorite-button::before {
	content: "\f005";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #FFCC00;
	padding-right: 4px;
	display: inline-block;
	transition: color 0.3s;
	transform-origin: center;
	position: relative;
	z-index: 2;
}

.simplefavorite-button.active::before {
	animation: starPop 0.4s ease;
	color: #00479D;
}

@keyframes starPop {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.4);
	}

	100% {
		transform: scale(1);
	}
}

/* パーティクル */
.simplefavorite-button::after {
	content: "";
	position: absolute;
	left: 15%;
	top: 50%;
	width: 6px;
	height: 6px;
	background: #FFCC00;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
	z-index: 1;
}

/* クリック時にアニメーション */
.simplefavorite-button.active::after {
	animation: particles 0.6s forwards;
}

@keyframes particles {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 1;
		box-shadow:
			0 0 0 #FFCC00,
			0 0 0 #FFCC00,
			0 0 0 #FFCC00,
			0 0 0 #FFCC00,
			0 0 0 #FFCC00,
			0 0 0 #FFCC00,
			0 0 0 #FFCC00,
			0 0 0 #FFCC00;
	}

	50% {
		transform: translate(-50%, -50%) scale(1);
		box-shadow:
			0 -25px #FFCC00,
			18px -18px #FFCC00,
			25px 0 #FFCC00,
			18px 18px #FFCC00,
			0 25px #FFCC00,
			-18px 18px #FFCC00,
			-25px 0 #FFCC00,
			-18px -18px #FFCC00;
	}

	100% {
		transform: translate(-50%, -50%) scale(0.5);
		opacity: 0;
		box-shadow:
			0 -35px #FFCC00,
			25px -25px #FFCC00,
			35px 0 #FFCC00,
			25px 25px #FFCC00,
			0 35px #FFCC00,
			-25px 25px #FFCC00,
			-35px 0 #FFCC00,
			-25px -25px #FFCC00;
	}
}
/* お気に入りボタンレスポンシブ */
@media screen and (min-width:768px) {
.simplefavorite-button {
	font-size: 16px;
}
}