@charset "utf-8";
/*
Theme Name: 
Theme URI: 
Description: のテーマです
*/

/*全体スタイル
***************************************/
body {
    font-family:
        "Rounded Mplus 1c",
        "Hiragino Sans",
        "Yu Gothic",
        sans-serif;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.027em;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-feature-settings: "palt";
	
	animation: BgfadeIn 2s ease 0s 1 normal;
	-webkit-animation: BgfadeIn 2s ease 0s 1 normal;
	
	color: #333333;
	
	
	font-size:clamp(18px, 1.6vw, 26px);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dt,
dd,
li,
a,
th,
td {}


/*リンク文字色のスタイル
***************************************/
a:link,
a:visited {
	text-decoration: none;
	overflow: hidden;
	color: #0052a4;
}

a:hover {
	text-decoration: none;
}

/*構造部分
***************************************/
.base {
	padding-left: 0;
	padding-right: 0;
}

#wrapper {
}


#main {
	background:url(../../images/bg.jpg) repeat top center;
	background-size:100%;
	padding-top:15rem;
	padding-bottom:15rem;
}

#shop #main {
	padding-top:24rem;
}

@media (max-width: 1680px) {
	.base {
		padding-left: 4.5rem;
		padding-right: 4.5rem;
	}
}


@media (max-width: 1560px) {
	.base {
		padding-left: 4.5rem;
		padding-right: 4.5rem;
	}
}

@media (max-width: 1260px) {
	.base {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	#wrapper {}

	#main {}
}

@media (max-width: 980px) {
	.base {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	#wrapper {}

	#shop #main {
		padding-top:18rem;
	}


	#primary {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

@media screen and (max-width:767px){
#main {
	padding-top: 7.5rem;
	padding-bottom:7.5rem;
}

#shop #main {
	padding-top:12rem;
}
}

br.pc_none {
	display:none;
}

@media screen and (max-width:540px){
br.pc_none {
	display:inherit;
}
}

/*header
***************************************/
#header {
	width:100%;
    padding: 3rem 4.5rem;
	z-index: 999;
	background:#FFF;
	position: fixed;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
}

#header .header_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header .logo,
#header p {
    margin: 0;
}

#header img {
    display: block;
    max-width: 100%;
    height: auto;
}

#header.fixedmenu {
    padding: 1rem 4.5rem;
	background: rgba(255,255,255,0.9);
}

@media (max-width: 1280px) {
#header,
#header.fixedmenu {
	padding-left: 2rem;
	padding-right: 2rem;
}
}

@media (max-width: 980px) {
#header,
#header.fixedmenu {}
}

@media (max-width: 767px) {
#header {
	padding: 1rem 1rem;
}

#header .logo {
	width:75%;
    max-width: 300px;
}

#header p {
	width:16%;
}
}

@media (max-width: 480px) {
#header.fixedmenu {
    padding: 1rem 1rem;
	background: rgba(255,255,255,0.9);
}
}



/*footer
***************************************/
#footer {
}

#footer .footer_info {
}

.footer_info{
	padding-top:6rem;
	padding-bottom:6rem;
	font-size:clamp(18px, 1.6vw, 24px);
	
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:3%;
}

.footer_info p{
	margin:0;
}

.footer_info p i {
	color:#009ccf;
	margin-right:1rem;
}

.footer_info p a {
	color:#009ccf;
	text-decoration:underline;
}

.footer_info p:first-child{
	flex-shrink:0;
}

.footer_info p:last-child{
	text-align:right;
}

@media screen and (max-width:1120px){
}

@media screen and (max-width:980px){
}

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

	.footer_info{
		flex-direction:column;
		gap:1.5rem;
		padding-top: 4.5rem;
		padding-bottom: 4.5rem;
	}

	.footer_info p:last-child{
		text-align:left;
	}

}

#copy {
	display:block;
	background:#009ccf;
	font-size:clamp(16px, 1.4vw, 20px);
	color: #FFF;
	padding: 1.25rem;
	text-align: center;
	height: 60px;
}

@media (max-width: 1200px) {
}

@media (max-width: 980px) {
}

@media (max-width: 680px) {
}

@media (max-width: 480px) {
}

/*section
***************************************/
#main section {
}

#main section:nth-child(1) {
}

@media (max-width: 980px) {
#main section {
}
}

@media (max-width: 680px) {
#main section {
}
}

/* チェイン表示（fade + move）
***************************************/
.chain-group .chain-item {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 1s ease,
		transform 1s ease;
}

.chain-group .chain-item.fadein-chain {
	opacity: 1;
	transform: translateY(0);
}

/*スマホ用コンタクトボタン
***************************************/

@media screen and (min-width:980px) {
	#sp_contact {
		display: none;
	}

	#sp_link {
		display: none;
	}
}

@media (max-width:980px) {
	#sp_contact {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100%;
		z-index: 9999;
		border-top: 1px solid #FFF;
		border-bottom: 1px solid #FFF;
	}

	#sp_contact ul {
		display: flex;
		-webkit-flex-wrap: wrap;
		/* Safari */
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}

	#sp_contact li {
		width: 25%;
	}

	#sp_contact li:nth-child(2),
	#sp_contact li:nth-child(3),
	#sp_contact li:nth-child(4) {
		border-left: 1px solid #FFF;
	}

	#sp_contact li a {
		background: #0052a4;
		text-decoration: none;
		color: #fff;
		width: 100%;
		padding: 1.2em 0;
		text-align: center;
		display: block;
		font-size: 13px;
		letter-spacing: 0;
		font-family: "Arial", "Noto Sans JP", sans-serif;
		font-weight: 500;
	}

	#sp_contact li:nth-child(2) a {}

	#sp_contact li:nth-child(3) a {}

	#sp_contact a:hover {
		text-decoration: none;
		background: #333;
		color: #FFF;
	}

	#sp_contact li a i {
		margin-right: 0.5rem;
	}

	#sp_link {
		display: block;
		position: absolute;
		top: 10px;
		right: 50px;
		z-index: 100;
	}

	#sp_link ul {
		display: flex;
		-webkit-flex-wrap: wrap;
		/* Safari */
		flex-wrap: wrap;
	}

	#sp_link ul li {
		width: 43px;
		margin: 0 0.25rem;
	}
}


/*ページトップ
***************************************/
div.scroll-btn {
	position: fixed;
	right: 0;
	z-index: 10000;
}

div.scroll-btn a {
	background: rgba(204, 204, 204, 0.5);
	width: 60px;
	height: 60px;
	display: block;
	text-align: center;
	transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-webkit-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out;
}

div.scroll-btn a:hover {
	background: #ff3131;
}

div.scroll-btn a i {
	font-size: 36px;
	line-height: 1.8;
	color: #fff;
	opacity: .8;
	transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-webkit-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out
}

div.scroll-btn a:hover i {
	color: #FFF;
	opacity: 1;
}

@media (max-width: 980px) {
	div.scroll-btn {
		right: 0;
	}
}


.junban {
	margin-bottom:3rem;
	font-size:clamp(14px,1.2vw,18px);
}

#shoplist ul{
	display:grid;
	grid-template-columns:1fr;
	margin:0;
	padding:3rem 4.5rem 6rem 4.5rem;
	background:#FFF;
	border-radius:3rem;
}

#shoplist ul li{
	list-style:none;
	border-bottom:1px solid #DDD;
	padding:3rem 0;
	box-sizing:border-box;
	font-size:clamp(15px,1.6vw,20px);
	line-height:1.4;
}

/* 1行目のラベル */
.shop_area{
	display:inline-block;
	padding:0.2rem 0.5rem 0.25rem 0.5rem;
	margin-right:0.5rem;
	background:#009ccf;
	color:#FFF;
	border-radius:0.5rem;
	font-size:clamp(14px,1.4vw,16px);
	vertical-align:middle;
	transform:rotate(0.03deg);
}

.shop_type{
	display:inline-block;
	padding:0.2rem 0.5rem 0.25rem 0.5rem;
	background:#ff7b77;
	color:#FFF;
	border-radius:0.5rem;
	font-size:clamp(14px,1.4vw,16px);
	vertical-align:middle;
	transform:rotate(0.03deg);
}

/* 2行目：店舗名 */
.shop_name{
	display:block;
	margin-top:0.8rem;
	transform:rotate(0.03deg);
	font-weight:bold;
	margin-bottom: 0.35rem;
}

/* 3行目：郵便番号＋住所 */
.shop_zip,
.shop_address{
	display:inline;
	transform:rotate(0.03deg);
}

.shop_zip::after{
	content:" ";
}

/* 住所の後で改行 */
.shop_address::after{
	content:"";
	display:block;
}

/* 4行目：電話番号 */
.shop_tel{
	display:block;
	margin-top:0.3rem;
	transform:rotate(0.03deg);
}

/* スマホ */
@media (max-width:767px){
	#shoplist ul{
		padding:1rem 1.5rem 3rem 1.5rem;
		border-radius:1.5rem;
	}

	#shoplist ul li{
		padding:2rem 0;
	}
}

/* PCで2列 */
@media screen and (min-width:768px){
	#shoplist ul{
		grid-template-columns:repeat(2,1fr);
		column-gap:4%;
	}
}







/* ==================================================
   🎨 CSS Animation Library - 70 Animations
   カテゴリ別
   トリガー: .trigger-load / .trigger-hover / .trigger-scroll
================================================== */


/* ================= fade 系 ================= */

/* 1. fade-in */
.anim-fade-in {
	opacity: 0;
	transition: opacity 0.5s ease-out;
}

.anim-fade-in.show {
	opacity: 1;
}

/* 2. fade-out */
.anim-fade-out {
	opacity: 1;
	transition: opacity 0.5s ease-out;
}

.anim-fade-out.show {
	opacity: 0;
}

/* 3. fade-up */
.anim-fade-up {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-up.show {
	opacity: 1;
	transform: translateY(0);
}

/* 4. fade-down */
.anim-fade-down {
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-down.show {
	opacity: 1;
	transform: translateY(0);
}

/* 5. fade-left */
.anim-fade-left {
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

.anim-fade-left.show {
	opacity: 1;
	transform: translateX(0);
}

/* 6. fade-right */
.anim-fade-right {
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-right.show {
	opacity: 1;
	transform: translateX(0);
}

/* 7. fade-scale-up */
.anim-fade-scale-up {
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-scale-up.show {
	opacity: 1;
	transform: scale(1);
}

/* 8. fade-scale-down */
.anim-fade-scale-down {
	opacity: 0;
	transform: scale(1.2);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-scale-down.show {
	opacity: 1;
	transform: scale(1);
}

/* 9. fade-rotate-in */
.anim-fade-rotate-in {
	opacity: 0;
	transform: rotate(-15deg);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-rotate-in.show {
	opacity: 1;
	transform: rotate(0);
}

/* 10. fade-blur-in */
.anim-fade-blur-in {
	opacity: 0;
	filter: blur(5px);
	transition: opacity 0.5s ease-out, filter 0.5s ease-out;
}

.anim-fade-blur-in.show {
	opacity: 1;
	filter: blur(0);
}

/* ================= slide 系 ================= */

/* 11. slide-up */
.anim-slide-up {
	transform: translateY(20px);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-up.show {
	transform: translateY(0);
	opacity: 1;
}

/* 12. slide-down */
.anim-slide-down {
	transform: translateY(-20px);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-down.show {
	transform: translateY(0);
	opacity: 1;
}

/* 13. slide-left */
.anim-slide-left {
	transform: translateX(20px);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-left.show {
	transform: translateX(0);
	opacity: 1;
}

/* 14. slide-right */
.anim-slide-right {
	transform: translateX(-20px);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-right.show {
	transform: translateX(0);
	opacity: 1;
}

/* 15. slide-scale-up */
.anim-slide-scale-up {
	transform: translateY(20px) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-scale-up.show {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* 16. slide-scale-down */
.anim-slide-scale-down {
	transform: translateY(-20px) scale(1.2);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-scale-down.show {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* 17. slide-rotate-in */
.anim-slide-rotate-in {
	transform: translateY(20px) rotate(-15deg);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-slide-rotate-in.show {
	transform: translateY(0) rotate(0);
	opacity: 1;
}

/* 18. slide-blur-in */
.anim-slide-blur-in {
	filter: blur(5px);
	opacity: 0;
	transition: filter 1s ease-out, opacity 1s ease-out;
}

.anim-slide-blur-in.show {
	filter: blur(0);
	opacity: 1;
}

/* ================= zoom/scale 系 ================= */


/* 19. zoom-in */
.anim-zoom-in {
	transform: scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-in.show {
	transform: scale(1);
	opacity: 1;
}

/* 20. zoom-out */
.anim-zoom-out {
	transform: scale(1.2);
	opacity: 1;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-out.show {
	transform: scale(1);
	opacity: 0;
}

/* 21. zoom-up */
.anim-zoom-up {
	transform: translateY(20px) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-up.show {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* 22. zoom-down */
.anim-zoom-down {
	transform: translateY(-20px) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-down.show {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* 23. zoom-left */
.anim-zoom-left {
	transform: translateX(20px) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-left.show {
	transform: translateX(0) scale(1);
	opacity: 1;
}

/* 24. zoom-right */
.anim-zoom-right {
	transform: translateX(-20px) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-right.show {
	transform: translateX(0) scale(1);
	opacity: 1;
}

/* 25. zoom-rotate-in */
.anim-zoom-rotate-in {
	transform: rotate(-15deg) scale(0.8);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-rotate-in.show {
	transform: rotate(0) scale(1);
	opacity: 1;
}

/* 26. zoom-blur-in */
.anim-zoom-blur-in {
	filter: blur(5px);
	opacity: 0;
	transition: filter 0.5s ease-out, opacity 0.5s ease-out;
}

.anim-zoom-blur-in.show {
	filter: blur(0);
	opacity: 1;
}

/* ================= flip/rotate 系 ================= */

/* 27. flip-x */
.anim-flip-x {
	transform: rotateX(90deg);
	opacity: 0;
	transition: transform 1s ease-out, opacity 1s ease-out;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.anim-flip-x.show {
	transform: rotateX(0);
	opacity: 1;
}

/* 28. flip-y */
.anim-flip-y {
	transform: rotateY(90deg);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out !important;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.anim-flip-y.show {
	transform: rotateY(0);
	opacity: 1;
}

/* 29. rotate-in */
.anim-rotate-in {
	transform: rotate(-180deg);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	transform-origin: center;
}

.anim-rotate-in.show {
	transform: rotate(0);
	opacity: 1;
}

/* 30. rotate-out */
.anim-rotate-out {
	transform: rotate(0);
	opacity: 1;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	transform-origin: center;
}

.anim-rotate-out.show {
	transform: rotate(180deg);
	opacity: 0;
}

/* ================= attention 系 ================= */

/* 31. shake */
.anim-shake {
	transform: translateX(0);
	transition: none;
}

.anim-shake.show {
	animation: shake-anim 0.5s ease-in-out 3;
}

@keyframes shake-anim {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-5px);
	}

	50% {
		transform: translateX(5px);
	}

	75% {
		transform: translateX(-5px);
	}
}

/* 32. pulse */
.anim-pulse {
	transform: scale(1);
	transition: none;
}

.anim-pulse.show {
	animation: pulse-anim 0.5s ease-in-out infinite;
}

@keyframes pulse-anim {

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

	50% {
		transform: scale(1.1);
	}
}

/* 33. bounce */
.anim-bounce {
	transform: translateY(0);
	transition: none;
}

.anim-bounce.show {
	animation: bounce-anim 0.5s ease-in-out infinite;
}

@keyframes bounce-anim {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

/* 34. wiggle */
.anim-wiggle {
	transform: rotate(0);
	transition: none;
}

.anim-wiggle.show {
	animation: wiggle-anim 0.5s ease-in-out 3;
}

@keyframes wiggle-anim {

	0%,
	100% {
		transform: rotate(0);
	}

	25% {
		transform: rotate(-5deg);
	}

	75% {
		transform: rotate(5deg);
	}
}

/* 35. swing */
.anim-swing {
	transform-origin: top center;
	transition: none;
}

.anim-swing.show {
	animation: swing-anim 0.5s ease-in-out 1;
}

@keyframes swing-anim {
	0% {
		transform: rotate(0);
	}

	20% {
		transform: rotate(15deg);
	}

	40% {
		transform: rotate(-10deg);
	}

	60% {
		transform: rotate(5deg);
	}

	80% {
		transform: rotate(-5deg);
	}

	100% {
		transform: rotate(0);
	}
}

/* ================= entrance 系 ================= */

/* 36. slide-in-left */
.anim-slide-in-left {
	transform: translateX(-100%);
	opacity: 0;
	transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1.6s ease;
}

.anim-slide-in-left.show {
	transform: translateX(0);
	opacity: 1;
}

/* 37. slide-in-right */
.anim-slide-in-right {
	transform: translateX(100%);
	opacity: 0;
	transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1.6s ease;
}

.anim-slide-in-right.show {
	transform: translateX(0);
	opacity: 1;
}

/* 38. slide-in-up */
.anim-slide-in-up {
	transform: translateY(10%);
	opacity: 0;
	transition: transform 0.75s ease-out, opacity 0.75s ease-out;
}

.anim-slide-in-up.show {
	transform: translateY(0);
	opacity: 1;
}

/* 39. slide-in-down */
.anim-slide-in-down {
	transform: translateY(-30%);
	opacity: 0;
	transition: transform 1s ease-out, opacity 1s ease-out;
}

.anim-slide-in-down.show {
	transform: translateY(0);
	opacity: 1;
}

/* 40. fade-in-scale */
.anim-fade-in-scale {
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-in-scale.show {
	opacity: 1;
	transform: scale(1);
}

/* ================= decorative/loop 系 ================= */

/* 41. spin */
.anim-spin {
	animation: spin-anim 2s linear infinite;
}

@keyframes spin-anim {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* 42. spin-reverse */
.anim-spin-reverse {
	animation: spin-reverse-anim 2s linear infinite;
}

@keyframes spin-reverse-anim {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(-360deg);
	}
}

/* 43. pulse-loop */
.anim-pulse-loop {
	animation: pulse-anim 2s ease-in-out infinite;
}

/* 44. bounce-loop */
.anim-bounce-loop {
	animation: bounce-anim 2s ease-in-out infinite;
}

/* 45. wiggle-loop */
.anim-wiggle-loop {
	animation: wiggle-anim 0.5s ease-in-out infinite;
}

/* 46. swing-loop */
.anim-swing-loop {
	animation: swing-anim 2s ease-in-out infinite;
}

/* 47. float */
.anim-float {
	animation: float-anim 3s ease-in-out infinite;
}

@keyframes float-anim {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

/* 48. heartbeat */
.anim-heartbeat {
	animation: heartbeat-anim 1.5s ease-in-out infinite;
}

@keyframes heartbeat-anim {

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

	50% {
		transform: scale(1.2);
	}
}

/* 49. wiggle-small */
.anim-wiggle-small {
	animation: wiggle-small-anim 0.5s ease-in-out infinite;
}

@keyframes wiggle-small-anim {

	0%,
	100% {
		transform: rotate(0);
	}

	50% {
		transform: rotate(3deg);
	}
}

/* 50. shake-small */
.anim-shake-small {
	animation: shake-small-anim 0.3s ease-in-out infinite;
}

@keyframes shake-small-anim {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(2px);
	}
}


/* ================= fade 系 続き ================= */

/* 51. fade-slide-up */
.anim-fade-slide-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-slide-up.show {
	opacity: 1;
	transform: translateY(0);
}

/* 52. fade-slide-down */
.anim-fade-slide-down {
	opacity: 0;
	transform: translateY(-30px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-slide-down.show {
	opacity: 1;
	transform: translateY(0);
}

/* ================= slide 系 続き ================= */

/* 53. slide-in-top-left */
.anim-slide-in-top-left {
	opacity: 0;
	transform: translate(-100%, -100%);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.anim-slide-in-top-left.show {
	opacity: 1;
	transform: translate(0, 0);
}

/* 54. slide-in-top-right */
.anim-slide-in-top-right {
	opacity: 0;
	transform: translate(100%, -100%);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.anim-slide-in-top-right.show {
	opacity: 1;
	transform: translate(0, 0);
}

/* ================= zoom/scale 系 続き ================= */

/* 55. zoom-in-big */
.anim-zoom-in-big {
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-zoom-in-big.show {
	opacity: 1;
	transform: scale(1);
}

/* 56. zoom-out-big */
.anim-zoom-out-big {
	opacity: 1;
	transform: scale(2);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-zoom-out-big.show {
	opacity: 0;
	transform: scale(1);
}

/* ================= flip/rotate 系 続き ================= */

/* 57. rotate-x-in */
.anim-rotate-x-in {
	opacity: 0;
	transform: rotateX(-90deg);
	transform-style: preserve-3d;
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-rotate-x-in.show {
	opacity: 1;
	transform: rotateX(0);
}

/* 58. rotate-y-in */
.anim-rotate-y-in {
	opacity: 0;
	transform: rotateY(-90deg);
	transform-style: preserve-3d;
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-rotate-y-in.show {
	opacity: 1;
	transform: rotateY(0);
}

/* ================= attention 系 続き ================= */

/* 59. pulse-slow */
.anim-pulse-slow {
	transform: scale(1);
	transition: none;
}

.anim-pulse-slow.show {
	animation: pulse-anim 3s ease-in-out infinite;
}

/* 60. shake-slow */
.anim-shake-slow {
	transform: translateX(0);
	transition: none;
}

.anim-shake-slow.show {
	animation: shake-anim 0.5s ease-in-out 3;
}

/* ================= entrance 系 続き ================= */

/* 61. drop-in */
.anim-drop-in {
	opacity: 0;
	transform: translateY(-200%);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.anim-drop-in.show {
	opacity: 1;
	transform: translateY(0);
}

/* 62. fade-in-left-big */
.anim-fade-in-left-big {
	opacity: 0;
	transform: translateX(-200%);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.anim-fade-in-left-big.show {
	opacity: 1;
	transform: translateX(0);
}

/* ================= decorative/loop 系 続き ================= */

/* 63. slow-spin */
.anim-slow-spin {
	animation: spin-anim 10s linear infinite;
}

/* 64. fast-spin */
.anim-fast-spin {
	animation: spin-anim 0.5s linear infinite;
}

/* 65. float-small */
.anim-float-small {
	animation: float-anim 1.5s ease-in-out infinite;
}

/* 66. heartbeat-fast */
.anim-heartbeat-fast {
	animation: heartbeat-anim 0.7s ease-in-out infinite;
}

/* 67. wiggle-tiny */
.anim-wiggle-tiny {
	animation: wiggle-small-anim 0.3s ease-in-out infinite;
}

/* 68. shake-tiny */
.anim-shake-tiny {
	animation: shake-small-anim 0.2s ease-in-out infinite;
}

/* ================= その他 ================= */

/* 69. bounce-small */
.anim-bounce-small {
	animation: bounce-anim 0.5s ease-in-out infinite;
}

/* 70. swing-slow */
.anim-swing-slow {
	animation: swing-anim 3s ease-in-out infinite;
}

.smooth {
	clip-path: inset(0 100% 0 0);
	/* 初期状態：右側を隠す */
	transition: 1s cubic-bezier(0.37, 0, 0.63, 1);
	/* アニメーション設定 */
	transition-property: clip-path;
}

.smooth.show {
	clip-path: inset(0);
	/* アニメーション後：隠れた部分が表示 */
}













.shop_filter{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:30px;
}

.shop_filter input,
.shop_filter select{
    padding:10px 15px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:15px;
    background:#fff;
}

.shop_filter input{
    flex:1;
    min-width:250px;
}

.shop_filter select{
    min-width:180px;
}

.shop_count{
    margin-bottom:20px;
    font-weight:bold;
}

@media(max-width:980px){

.shop_filter{
    flex-direction:column;
}

.shop_filter input,
.shop_filter select{
    width:100%;
}

}