@charset "UTF-8";
/* =========================================================
 o-btn - Pure CSS component (no SCSS dependencies)
 Uses foundation variables: var(--fs-*), var(--gap*), var(--base-color*), var(--accent-color*), var(--text-color*)
============================================================ */

.p-cart .o-btnCart,
.o-btnCart {
	font-size: var(--fs-p)!important;
	font-weight: 700;
	background: var(--gradient-button04);
	color: var(--text-color04);
	box-shadow: var(--shadow01);
	border-radius: 2px;
	transition: transform var(--transition01, .25s ease), filter var(--transition01, .25s ease), box-shadow var(--transition01, .25s ease);

	display: flex;
	gap: 5px;
	align-items: center; 
	justify-content: center;

	padding: var(--gap04) var(--gap01)!important;

	&::before {
		content: "shopping_cart";
		font-family: "Material Symbols Outlined";
		font-weight: 500;
	}

	&:hover {
		background: var(--gradient-button04);
		filter: brightness(1.2);
		transform: translateY(-4px);
	}
}

/* =========================================================
 o-btn - var
============================================================ */

.o-btn {
	font-weight: 700;
    &.__main01 {
        background: var(--gradient-button03);
        color: var(--text-color04);
		box-shadow: var(--shadow01);

        &:hover {
            filter: brightness(1.2);
            transform: translateY(1px);
        }
		&::before,
		&::after {
			color: var(--text-color04);
		}
    }
    &.__main02 {
        background: var(--gradient-button01);
        color: var(--text-color04);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--gap02);
		box-shadow: var(--shadow01);

        &:hover {
            filter: brightness(1.2);
            transform: translateY(1px);
        }

		&::after {
			content: "";
			width: 10px;
			height: 10px;
			background: var(--gradient-icon01);
		}
		&::before,
		&::after {
			color: var(--text-color04);
		}
    }
	&.__main03 {
        background: var(--gradient-button01);
        color: var(--text-color04);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--gap02);
		box-shadow: var(--shadow01);

        &:hover {
            filter: brightness(1.2);
            transform: translateY(1px);
        }
		&::before,
		&::after {
			color: var(--text-color04);
		}
    }
	&.__main04 {
		background: var(--gradient-button04);
        color: var(--text-color04);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--gap02);
		box-shadow: var(--shadow01);

        &:hover {
            filter: brightness(1.2);
            transform: translateY(1px);
        }
		&::before,
		&::after {
			color: var(--text-color04);
		}
	}
}




.o-btn {
	cursor: pointer;
	overflow: hidden;
	transition: transform var(--transition01, .25s ease), filter var(--transition01, .25s ease), box-shadow var(--transition01, .25s ease);

	&:hover::before {
	}

	/* font-sizes */
	&.__huge {
		font-size: var(--fs-huge);
		line-height: 1.5;
		letter-spacing: .5rem;
	}

	&.__en {
		letter-spacing: .01rem;
		font-family: var(--font-family02, inherit);
	}

	&.__big {
		font-size: var(--fs-big);
	}

	&.__large {
		font-size: var(--fs-large);
	}

	&.__title {
		font-size: var(--fs-title);

		&.__en {
			letter-spacing: .3rem;
		}
	}

	&.__postp {
		font-size: var(--fs-postp);
	}

	&.__p {
		font-size: var(--fs-p);
	}

	&.__mid {
		font-size: var(--fs-mid);
	}

	&.__min {
		font-size: var(--fs-min);
	}

	&.__tiny {
		font-size: var(--fs-tiny);
	}

	/* width / radius */
	&.__radius01 {
        border-radius: var(--radius01);
    }

	&.__radius02 {
		border-radius: var(--radius02);
	}

    &.__radius100 {
		border-radius: 100px;
	}

	&.__wfit {
		width: fit-content;
	}

	&.__w100 {
		width: 100%;
	}

	/* spacing */
	&.__sizes {
		padding: .5rem var(--gap03);
	}

	&.__sizem {
		padding: var(--gap03) var(--gap05);
	}

	&.__sizel {
		padding: var(--gap04) var(--gap07);
	}

	&.__sizexl {
		padding: var(--gap05) var(--gap08);
	}

	/* helpers */
	&.__mw01 {
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
	}

	&.__mw02 {
		max-width: clamp(280px, 100%, 320px);
		margin-left: auto;
		margin-right: auto;
	}
	&.__w100 {
		width: 100%;
	}

	&.__left {
		margin-left: inherit;
	}

	&.__center {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	/* icon helpers (Font Awesome) */
	&.__arrow {
		position: relative;

		&::after {
			content: "\f061";
			font-family: "FontAwesome";
			margin-left: 12px;
			color: #45b4eb;
		}
	}

	&.__fileBefore {
		position: relative;

		&::before {
			content: "\f0f6";
			font-family: "FontAwesome";
			margin-left: 12px;
			font-weight: 500;
			color: #45b4eb;
		}
	}

	&.__fileAfter {
		position: relative;

		&::after {
			content: "\f0f6";
			font-family: "FontAwesome";
			margin-left: 12px;
			font-weight: 500;
			color: #45b4eb;
		}
	}

	/* color variants */
	&.__white {
		color: var(--text-color01);

		.o-icon:before {
			color: var(--text-color01);
		}

		&:hover {
			color: var(--text-color01) !important;
		}
	}

	&.__blue {
		background: linear-gradient(to right, var(--accent-color02), var(--accent-color01));
		color: #fff;
		box-shadow: 0 5px 0 #0968C1;

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #0968C1;
		}
	}

	&.__navy {
		background: var(--base-color01);
		color: #fff;
		box-shadow: 0 5px 0 #1a3244;

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #1a3244;
		}
	}

	&.__orange {
		background-color: #FF6A3C;
		color: #fff;
		box-shadow: 0 5px 0 #C66243;

		&:after {
			color: #fff;
		}

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #C66243;
		}
	}

	&.__green {
		background-color: #22B973;
		color: #fff;
		text-decoration: none;
		box-shadow: 0 5px 0 #1A9A5F;

		&:after {
			color: #fff;
		}

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #1A9A5F;
		}
	}

	&.__gray {
		background: var(--base-color03);
		color: var(--text-color01);
		box-shadow: 0 5px 0 #c5cfd6;

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #c5cfd6;
		}
	}

	&.__gold {
		background: linear-gradient(to right, #C9BA90, var(--accent-color07));
		color: #fff;
		box-shadow: 0 5px 0 #9F8239;

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #9F8239;
		}

		&.__arrow::after,
		&.__fileAfter::after {
			color: var(--text-color02);
		}

		&.__fileBefore::before {
			color: var(--text-color02);
		}
	}

	/* outline */
	&.__border01 {
		border: 1px solid var(--base-color01);
		background-color: transparent;
		color: var(--base-color01);
		transition: color var(--transition01, .25s ease), background-color var(--transition01, .25s ease);

		&:hover {
			color: var(--text-color02);
			background-color: var(--base-color01);
		}
	}

	/* specific */
	&.search {
		min-width: 300px;
		padding: 2.2rem var(--gap00);
		line-height: 1;
	}

	&.keywordsearch {
		padding: var(--gap01) var(--gap00);
		line-height: 1;
	}

	&.denial {
		background: #A0A0A0;
		border-bottom: 3px solid #807f7f;
		color: #fff;
		filter: none;
		text-shadow: 0 0 10px rgba(0, 0, 0, .2);
		cursor: not-allowed;

		.__title {
			line-height: 1.3;
			font-size: 18px;
			margin-bottom: 0;
		}

		.__desc {
			font-size: 12px;
			line-height: 1.6;
			display: block;
		}

		&:hover {
			background: #A0A0A0;
		}
	}
}


/* __iconで始まるクラス名に前方一致でスタイルを適用 */
/* 複数クラスの場合（class="o-btn __iconArrow"）と単一クラスの場合（class="__iconArrow"）の両方に対応 */
.o-btn[class*=" __icon"] {
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: center;

	&::before {
		font-family: "Material Symbols Outlined";
		font-weight: 500;
	}
}
.o-btn.__iconCart {
	&::before {
	content: "shopping_cart";
	}
}
.o-btn.__iconLogin {
	&::before {
	content: "login";
	}
}