@charset "utf-8";

/* ==========================================================================
   Global Variables & Base Settings
   ========================================================================== */
:root {
	--title-f-size: 18px;
	--txt-f-size: 12px;
	--cap-f-size: 12px;
	--icn-f-size: 10px;
	--badge-f-size: 8px;
	--more-btn-f-size: 12px;
	--ranking-f-size: 10px;
	--section-margin: 40px;
	--slick-dots-margin: 10px;
	--slick-dots: 12px;
	--logo-width: 85px;
	--img-aspect-ratio: 4/3;
	--spring-default: linear(0, 0.0107, 0.0398, 0.0834, 0.138, 0.2003, 0.2677, 0.3379, 0.4089, 0.4791, 0.5471, 0.612, 0.6731, 0.7297, 0.7815, 0.8283, 0.87, 0.9068, 0.9388, 0.9662, 0.9892, 1.0083, 1.0237, 1.0357, 1.0449, 1.0514, 1.0556, 1.058, 1.0587, 1.0581, 1.0563, 1.0538, 1.0506, 1.0469, 1.043, 1.0388, 1.0347, 1.0306, 1.0266, 1.0228, 1.0192, 1.0159, 1.0128, 1.0101, 1.0076, 1.0055, 1.0036, 1.002, 1.0006, 0.9995, 0.9986, 0.9979, 0.9974, 0.997, 0.9967, 0.9966, 0.9966, 0.9966, 0.9967, 0.9968, 0.997, 0.9972, 0.9975, 0.9977, 0.998, 0.9982, 0.9984, 0.9987, 0.9989, 0.9991, 0.9992, 0.9994, 0.9996, 0.9997, 0.9998, 0.9999, 1, 1, 1.0001, 1.0001, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1);
	--spring-transform: linear(0, 0.033, 0.122, 0.247, 0.392, 0.544, 0.688, 0.812, 0.909, 0.975, 1.013, 1.028, 1.027, 1.016, 1.001, 0.988, 0.981, 0.981, 0.986, 0.993, 1, 1.004, 1.005, 1.004, 1.001, 0.999, 0.999, 0.999, 1, 1);
}

/* SP Override for Variables */
@media (width < 768px) {
	:root {
		--title-f-size: 16px;
		--cap-f-size: 11px;
		--badge-f-size: 9px;
		--logo-width: 95px;
		--txt-f-size: 13px;
		--section-margin: 40px;
		--slick-dots: 11px;
	}
}

/* Namespace Reset */
#coa_top_braze {
	position: relative;
	padding: 0;
	margin: 0;
}

#coa_top_braze * {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", Arial, "メイリオ", Meiryo, sans-serif;
	font-feature-settings: "palt";
	letter-spacing: 0.06em;
	text-autospace: normal;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	color: var(--black-color);
}

#coa_top_braze ol,
#coa_top_braze ul {
	list-style-type: none;
}

#coa_top_braze a,
#coa_top_braze p {
	outline: none;
	font-size: inherit;
	text-decoration: none;
}

#coa_top_braze a img {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#coa_top_braze a:hover img {
	opacity: .8;
}

/* Display Utility */
#coa_top_braze .pc {
	display: block;
}

#coa_top_braze .sp {
	display: none;
}

#coa_top_braze *::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

#coa_top_braze *::-webkit-scrollbar-button {
	display: none;
}

#coa_top_braze *::-webkit-scrollbar-thumb {
	background-color: var(--gray-color01);
	border-radius: 10px;
	transition: all ease .3s;
}

#coa_top_braze *::-webkit-scrollbar-thumb:hover {
	background: var(--brand-color);
}

#coa_top_braze *::-webkit-scrollbar-track {
	background-color: var(--gray-color);
	border-radius: 10px;
}


/* ==========================================================================
   Loading Skeleton System (Common)
   ========================================================================== */
#coa_top_braze .loading-section {
	overflow: hidden;
	display: none;
	opacity: 0;
	transition: opacity 1s linear;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	background: #fff;
	height: 100%;
}

#coa_top_braze .loading-section.is-loading-active {
	display: block;
	opacity: 1;
}

#coa_top_braze .loading-section.is-loading-fadeout {
	opacity: 0;
}

#coa_top_braze .skeleton {
	position: relative;
}

#coa_top_braze .skeleton::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	/* 角度を135度（左上から右下への斜めライン）に変更 */
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	/* 全体を1.5秒周期にし、動きにメリハリをつける（linearからease-in-outへ変更推奨） */
	animation: skeleton-animation 1.8s ease-in-out infinite;
}

@keyframes skeleton-animation {

	/* 0%から40%の区間で左上から右下へ移動 */
	0% {
		transform: translate(-100%, 0%);
	}

	60% {
		transform: translate(150%, 0%);
	}

	/* 41%から100%は「間」を作るため、画面外で待機 */
	100% {
		transform: translate(150%, 0%);
	}
}

/* Loading: Title & Structure */
#coa_top_braze .loading-section .title-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--title-f-size);
	font-weight: 700;
	gap: 1em;
	margin-bottom: 0.5em;
}

#coa_top_braze .loading-section .title-container .title-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	width: auto;
}

#coa_top_braze .loading-section .title-container .section-title {
	font-size: var(--title-f-size);
	flex: 0 1 auto;
	line-height: 1.5;
	width: 14em;
	height: 1.2em;
	border-radius: 0.25em;
	background: var(--gray-color);
	overflow: hidden;
	background-image: initial !important;
	padding: 0;
}

#coa_top_braze .loading-section .title-container .section-text {
	font-size: var(--cap-f-size);
	flex: 0 1 auto;
	line-height: 0.8;
	width: 16em;
	height: 1em;
	border-radius: 0.25em;
	background: var(--gray-color);
	overflow: hidden;
	background-image: initial !important;
	padding: 0;
}

#coa_top_braze .loading-section .title-container .more-button {
	font-size: var(--more-btn-f-size);
	text-align: right;
	flex: 0 1 auto;
	white-space: nowrap;
	width: 7.4em;
	height: 3em;
	border-radius: 3em;
	background: var(--gray-color);
	overflow: hidden;
}

/* Loading: Cards & Indicators */
#coa_top_braze .loading-section .loading-indicators {
	display: flex;
	gap: 0.6em;
}

#coa_top_braze .loading-section .loading-indicators .loading-spinner {
	position: relative;
	display: block;
	border-radius: 0.5em;
	background: var(--gray-color);
	overflow: hidden;
	aspect-ratio: 1 / 1.47;
}

#coa_top_braze .loading-section .loading-card__container {
	display: flex;
	gap: 0.6em;
}

#coa_top_braze .loading-section .loading-card__container .loading-card__item {
	height: 100%;
	min-width: 0;
}

@media (width < 768px) {
	#coa_top_braze .loading-section .loading-card__container li:nth-child(n+4) {
		display: none;
	}
}

@media (width < 559px) {
	#coa_top_braze .loading-section .loading-card__container li:nth-child(n+3) {
		display: none;
	}
}

#coa_top_braze .loading-section .loading-card__container .loading-card {
	position: relative;
	display: block;
	border-radius: 0.5em;
	background: #fff;
	overflow: hidden;
	aspect-ratio: 1 / 1.47;
}

#coa_top_braze .loading-section .loading-card__container .loading-card__item .loading-card {
	border: 1px solid var(--gray-color);
	height: 100%;
	display: flex;
	flex-direction: column;
	aspect-ratio: initial;
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__image {
	width: 100%;
	aspect-ratio: var(--img-aspect-ratio);
	background: var(--gray-color);
}

#coa_top_braze .loading-section .loading-card__container .loading-card__item .loading-card .loading-card__image {
	border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__content {
	display: flex;
	flex-direction: column;
	font-size: var(--txt-f-size);
	gap: 0.5em;
	padding: 2em 0.75em 0.75em;
	line-height: 1.2;
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__content .loading-card__title {
	display: block;
	width: 100%;
	height: 1lh;
	background: var(--gray-color);
	border-radius: 0.25em;
	margin: 0 0 1em;
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__body {
	padding: 0.75em;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 0.4em;
	line-height: 1.2;
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__body .loading-card__meta {
	font-size: var(--badge-f-size);
	width: 60%;
	height: 1lh;
	background: var(--gray-color);
	border-radius: 0.25em;
}


#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__body .loading-card__title {
	font-size: var(--txt-f-size);
	width: 100%;
	height: 1lh;
	background: var(--gray-color);
	border-radius: 0.25em;
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__body .loading-card__title-short {
	font-size: var(--txt-f-size);
	width: 80%;
	height: 1lh;
	background: var(--gray-color);
	border-radius: 0.25em;
	margin: 0 0 0.75em;
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__body .loading-card__price {
	font-size: var(--txt-f-size);
	width: 100%;
	height: 1lh;
	background: var(--gray-color);
	border-radius: 0.25em;
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__body .loading-card__price-short {
	font-size: var(--txt-f-size);
	width: 60%;
	height: 1lh;
	background: var(--gray-color);
	border-radius: 0.25em;
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__body .loading-card__footer {
	margin-top: auto;
	display: flex;
	gap: 0.25em;
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__body .loading-card__footer .loading-card__tag {
	font-family: var(--badge-f-size);
	background: var(--gray-color);
	border-radius: 0.25em;
	width: 5em;
	height: 1.2em;
	display: none;
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__content .loading-card__text {
	display: block;
	width: 100%;
	height: 1lh;
	background: var(--gray-color);
	border-radius: 0.25em;
}

#coa_top_braze .loading-section .loading-card__container .loading-card .loading-card__content span:nth-child(3) {
	width: 70%;
}

@media (width < 940px) {

	#coa_top_braze .loading-section .title-container,
	#coa_top_braze .loading-section .loading-card__container,
	#coa_top_braze .loading-section .loading-indicators {
		padding: 0 0.6em;
	}

}


/* ==========================================================================
   Slick Slider Common & Menu Layout
   ========================================================================== */
#coa_top_braze .menu_layout_slide {
	display: none;
	opacity: 0;
	transition: opacity 1s ease-out;
}

#coa_top_braze .menu_layout_slide.slick-initialized {
	display: block;
	opacity: 1;
}

#coa_top_braze .slick-slider.slick-slider:not(:has(.slick-dots)) {
	margin-bottom: var(--section-margin);
}

#coa_top_braze .slick-slide[data-number] {
	display: none;
}

/* Dots Navigation */
#coa_top_braze .slick-dots {
	display: flex;
	justify-content: center;
	gap: calc(var(--slick-dots) / 8);
	width: 100%;
	margin: var(--slick-dots-margin) auto calc(var(--section-margin) - var(--slick-dots-margin));
	list-style: none;
	text-align: center;
	z-index: 3;
}

#coa_top_braze .slick-dots li {
	font-size: 0;
	line-height: 0;
	display: block;
	width: var(--slick-dots);
	padding: calc(var(--slick-dots) / 4);
	aspect-ratio: 1;
	cursor: pointer;
	color: transparent;
	border: 0;
}

#coa_top_braze .slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
	background: transparent;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	border-radius: 50%;
	background: var(--gray-color01);
	transition: all ease .5s;
}

#coa_top_braze .slick-dots li.slick-active button,
#coa_top_braze .slick-dots li:hover button {
	background: var(--brand-color);
}

/* Slick Track & Arrows */
#coa_top_braze .slick-track {
	display: flex;
	gap: 0.6em;
}

#coa_top_braze .slick-track::before,
#coa_top_braze .slick-track::after {
	display: none;
}

#coa_top_braze .slick-track .slick-slide {
	height: auto;
}

#coa_top_braze .slide-arrow {
	position: absolute;
	display: block !important;
	width: 30px;
	top: 0;
	bottom: 15px;
	margin: auto 0;
	z-index: 2;
	cursor: pointer;
	transition: all ease .3s;
	border-radius: 50%;
}

#coa_top_braze .slide-arrow:hover {
	background: rgb(0 0 0 / .3);
}

#coa_top_braze .slide-arrow.slick-disabled {
	display: none !important;
}

#coa_top_braze .next-arrow {
	right: 4px;
}

#coa_top_braze .prev-arrow {
	left: 4px;
	rotate: 180deg;
}

@media (width < 940px) {
	#coa_top_braze .slick-list {
		padding: 0 0.6em;
	}
}


#coa_top_braze .card__privilegetype-tags {
	display: flex;
	gap: 0.25em;
	flex-wrap: wrap;
	align-items: stretch;
	margin-top: auto;
}

#coa_top_braze .card__privilegetype-tags .card__privilegetype-tag {
	display: flex;
	gap: 0.3em;
	align-items: center;
	padding: 0.6em 1em;
	font-size: var(--badge-f-size);
	line-height: 1;
	width: fit-content;
	border-radius: 0.5em;
	border: solid 1px;
	color: var(--blue-color);
	background: #fff;
}

/* #coa_top_braze .card__privilegetype-tags .card__privilegetype-tag::before {
	content: "";
	display: block;
	width: 1.3em;
	aspect-ratio: 1;
} */

/* Card Privilege Tags */
#coa_top_braze .card__privilegetype-tags .type-02 {
	color: var(--orange-color);
	border-color: var(--orange-color);
	padding: 0.5em 0.75em;
}

#coa_top_braze .card__privilegetype-tags .card__privilegetype-tag.type-02::before {
	content: none;
	display: none;
}

#coa_top_braze .card__privilegetype-tags .card__privilegetype-tag.type-04::before {
	background: url(../../common/img/privilegetype/type04.svg) center / contain no-repeat;
}

#coa_top_braze .card__privilegetype-tags .card__privilegetype-tag.type-05::before {
	background: url(../../common/img/privilegetype/type05.svg) center / contain no-repeat;
}

#coa_top_braze .card__privilegetype-tags .card__privilegetype-tag.type-07::before {
	background: url(../../common/img/privilegetype/type07.svg) center / contain no-repeat;
}

#coa_top_braze .card__privilegetype-tags .card__privilegetype-tag.type-08::before {
	background: url(../../common/img/privilegetype/type08.svg) center / contain no-repeat;
}

.card__privilegetype-tag.type-09::before {
	background: url(../../common/img/privilegetype/type09.svg) center / contain no-repeat;
}

/* ==========================================================================
   Section Title Styles
   ========================================================================== */
#coa_top_braze .section-title__container {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--title-f-size);
	font-weight: 700;
	color: var(--black-color);
	gap: 0.25em;
	margin: 0 auto 0.5em;
}

/* #coa_top_braze .section-title__container::before {
	content: "";
	width: 3.5px;
	align-self: stretch;
	background: var(--brand-color);
	display: block;
	border-radius: 3em;
	flex: none;
} */

#coa_top_braze .section-title__container .more_btn {
	width: auto;
	text-align: right;
	flex: 0 1 auto;
	white-space: nowrap;
}

#coa_top_braze .section-title__container .more_btn a {
	display: flex;
	font-size: var(--more-btn-f-size);
	font-weight: 700;
	position: relative;
	color: var(--brand-color);
	align-items: center;
	justify-content: space-between;
	line-height: 1;
	padding: 1em 1.25em;
	border-radius: 3em;
	background: var(--brand-thin-color);
	text-decoration: none;
	transition: all ease .5s;
}

#coa_top_braze .section-title__container .more_btn a:hover {
	background: var(--brand-color);
	color: #fff;
}

#coa_top_braze .section-title__container .section-title__wrapper {
	display: flex;
	gap: 0.25em;
	flex-direction: column;
	flex: 0 1 auto;
}

#coa_top_braze .section-title__container .section-title {
	font-weight: 700;
	line-height: 1.2;
	display: flex;
	gap: 0.25em;
	align-items: center;
	padding: 0;
	height: initial;
	word-break: auto-phrase;
}

#coa_top_braze .section-title__container .section-title__wrapper .title_caption {
	display: block;
	font-size: var(--cap-f-size);
	font-weight: 400;
	color: var(--gray-color02);
}

@media (width < 940px) {
	#coa_top_braze .section-title__container {
		width: calc(100% - 1.2em);
	}
}


/* ==========================================================================
   Section: Special Slide
   ========================================================================== */
/* Loading */
#coa_top_braze #special_slide .loading-section .loading-indicators {
	width: 157%;
	left: 50%;
	transform: translateX(-50%);
}

#coa_top_braze #special_slide .loading-section .loading-indicators .loading-spinner {
	width: 40%;
	border-radius: 7px;
	aspect-ratio: 300 / 225;
}

/* Content */
#coa_top_braze .special_slide {
	display: none;
	opacity: 0;
	transition: opacity 1s ease-out;
}

#coa_top_braze .special_slide.slick-initialized {
	display: block;
	opacity: 1;
}

#coa_top_braze .special_slide>.slick-slide {
	display: none;
}

#coa_top_braze .special_slide a {
	font-size: 0;
	border-radius: 7px;
	display: block;
	overflow: hidden;
	position: relative;
}

#coa_top_braze .special_slide a img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

#coa_top_braze .special_slide a .text_all {
	text-align: center;
	background: linear-gradient(to top, rgba(0, 0, 0, 30%) 0%, rgba(255, 255, 255, 0%) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#coa_top_braze .special_slide a .title {
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	padding: 0 1em;
	line-height: 1.2;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

#coa_top_braze .special_slide a .text {
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	font-size: 12px;
	font-weight: 400;
	padding: 0 1.4em;
	margin: 0.5em 0 1.4em;
	line-height: 1.2;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

@media (width < 768px) {
	#coa_top_braze #special_slide .loading-section .loading-indicators {
		width: 238%;
		padding: 0;
	}

	#coa_top_braze .special_slide {
		padding: 0;
	}

	#coa_top_braze .special_slide a .title {
		font-size: 18px;
	}

	#coa_top_braze .special_slide a .text {
		font-size: var(--txt-f-size);
	}
}


/* ==========================================================================
   Section: Icon Slide
   ========================================================================== */
/* Loading */
#coa_top_braze #icn_slide .loading-section .loading-indicators {
	padding: 0 0.6em;
}

#coa_top_braze #icn_slide .loading-section .loading-indicators .loading-spinner {
	background: none;
	aspect-ratio: initial;
	border-radius: initial;
}

/* 基本設定（720px以上）：9枚表示（10番目以降を非表示） */
#coa_top_braze #icn_slide .loading-section .loading-indicators>div:nth-child(n+10) {
	display: none;
}

/* 719px以下：8枚表示（9番目以降を非表示） */
@media (width < 720px) {
	#coa_top_braze #icn_slide .loading-section .loading-indicators>div:nth-child(n+9) {
		display: none;
	}
}

/* 639px以下：7枚表示（8番目以降を非表示） */
@media (width < 640px) {
	#coa_top_braze #icn_slide .loading-section .loading-indicators>div:nth-child(n+8) {
		display: none;
	}
}

/* 559px以下：6枚表示（7番目以降を非表示） */
@media (width < 560px) {
	#coa_top_braze #icn_slide .loading-section .loading-indicators>div:nth-child(n+7) {
		display: none;
	}
}

/* 479px以下：5枚表示（6番目以降を非表示） */
@media (width < 480px) {
	#coa_top_braze #icn_slide .loading-section .loading-indicators>div:nth-child(n+6) {
		display: none;
	}
}

/* 388px以下：4枚表示（5番目以降を非表示） */
@media (width < 389px) {
	#coa_top_braze #icn_slide .loading-section .loading-indicators>div:nth-child(n+5) {
		display: none;
	}
}

#coa_top_braze #icn_slide .loading-section .loading-indicators .loading-spinner-circle {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--gray-color);
	border-radius: 50%;
}

#coa_top_braze #icn_slide .loading-section .loading-indicators .loading-spinner-text {
	display: block;
	height: 1lh;
	margin: 0.5em auto 0;
	text-align: center;
	font-size: var(--icn-f-size);
	background: var(--gray-color);
	border-radius: 0.25em;
	overflow: hidden;
	width: 6em;
}

/* Content */
#coa_top_braze .icn_slide {
	display: none;
	opacity: 0;
	transition: opacity 1s ease-out;
}

#coa_top_braze #icn_slide .icn_slide.slick-initialized {
	display: block;
	opacity: 1;
	margin: 1em 0 calc(var(--section-margin) / 2);
}

#coa_top_braze .icn_slide .slick-list {
	padding: 0 0.6em;
	min-height: 100px;
}

#coa_top_braze .icn_slide a {
	position: relative;
	color: var(--black-color);
	display: block;
}

#coa_top_braze .icn_slide .history:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1;
	/* background: url(../../common/img/category-icon/history.svg) bottom right / 30% no-repeat; */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 63'%3E%3Ccircle fill='%23fff' cx='54' cy='54' r='9'/%3E%3Ccircle fill='%230e79ea' cx='54' cy='54' r='7.043'/%3E%3Cpath fill='%23fff' d='M54,58.696c-2.589,0-4.696-2.107-4.696-4.696s2.107-4.696,4.696-4.696,4.696,2.107,4.696,4.696-2.107,4.696-4.696,4.696ZM54,50.074c-2.164,0-3.926,1.761-3.926,3.926s1.761,3.926,3.926,3.926,3.926-1.761,3.926-3.926-1.761-3.926-3.926-3.926ZM55.738,56.122c-.103,0-.2-.04-.272-.113l-1.737-1.738c-.071-.071-.113-.17-.113-.272v-2.214c0-.212.173-.385.384-.385s.385.173.385.385v2.014c0,.025.01.049.028.068l1.597,1.597c.15.15.15.394,0,.544-.073.073-.17.113-.272.113h0Z'/%3E%3C/svg%3E");
	background-size: 100%;
}

#coa_top_braze .icn_slide a img {
	width: 100%;
	font-size: 0;
	display: block;
	border-radius: 50%;
}

#coa_top_braze .icn_slide a p {
	margin: 0.5em 0 0;
	text-align: center;
	font-size: var(--icn-f-size);
	word-break: auto-phrase;
}


/* ==========================================================================
   Section: Tag Recommend
   ========================================================================== */
/* Loading */
#coa_top_braze #tag_recommend .loading-section .loading-card__container {
	width: fit-content;
	padding: 0 1em 0 0;
	margin: 0 0 1em;
	gap: 1em;
}

#coa_top_braze #tag_recommend .loading-section .loading-card__container .loading-card {
	font-size: var(--txt-f-size);
	background: var(--gray-color);
	border-radius: 3em;
	width: 9em;
	height: 3em;
	aspect-ratio: initial;
}

#coa_top_braze #tag_recommend .loading-section .loading-card__container div:nth-child(3) {
	width: 15em;
}

#coa_top_braze #tag_recommend .loading-section .loading-card__container div:nth-child(4) {
	width: 11em;
}

#coa_top_braze #tag_recommend .loading-section .loading-card__container div:nth-child(6) {
	width: 7em;
}

#coa_top_braze #tag_recommend .tag_recommend_container:has(#tag-list li.tag-listItem) {
	/* border-radius: 0.5em;
	background: var(--brand-thin-color);
	padding: 1em 0; */
	margin-bottom: var(--section-margin);
}

#coa_top_braze #tag_recommend .tag_recommend_container .tag-list-container {
	width: 100%;
	overflow-x: auto;
}

#coa_top_braze #tag_recommend .tag_recommend_container .tag-list-container #tag-list {
	width: fit-content;
	font-size: var(--txt-f-size);
	display: flex;
	gap: 1em;
}

#coa_top_braze #tag_recommend .tag_recommend_container .tag-list-container #tag-list:has(li.tag-listItem) {
	padding: 0 1em 0 0;
	margin: 0 0 1em;
}


@media (width < 940px) {

	#coa_top_braze #tag_recommend .loading-section .loading-card__container,
	#coa_top_braze #tag_recommend .tag_recommend_container .tag-list-container #tag-list:has(li.tag-listItem) {
		padding: 0 0.6em;
	}
}

#coa_top_braze #tag_recommend .tag_recommend_container .tag-list-container #tag-list .tag-listItem .tag-link {
	display: flex;
	justify-content: center;
	gap: 0.25em;
	padding: 1em 1.5em 1em 1em;
	/* border: solid 1px var(--brand-color); */
	border-radius: 3em;
	line-height: 1;
	white-space: nowrap;
	transition: all ease .3s;
	background: var(--brand-thin-color);
	font-size: var(--txt-f-size);
}

#coa_top_braze #tag_recommend .tag_recommend_container .tag-list-container #tag-list .tag-listItem .tag-link:hover {
	color: #fff;
	background: var(--brand-color);
}

#coa_top_braze #tag_recommend .tag_recommend_container .tag-list-container #tag-list .tag-listItem .tag-link::before {
	display: block;
	content: "";
	background: var(--brand-color);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M12.7971 11.7947L9.28524 8.29801C9.95702 7.42384 10.3628 6.33775 10.3628 5.15894C10.3628 2.31126 8.03479 0 5.18138 0C2.32796 0 0 2.31126 0 5.15894C0 8.00662 2.32796 10.3179 5.18138 10.3179C6.33871 10.3179 7.40957 9.93378 8.27424 9.29139L11.7928 12.7947C11.9325 12.9338 12.112 13 12.2916 13C12.4712 13 12.6575 12.9338 12.7905 12.7947C13.0698 12.5166 13.0698 12.0728 12.7905 11.7947H12.7971ZM5.18138 8.90729C3.10617 8.90729 1.41673 7.22517 1.41673 5.15894C1.41673 3.09272 3.10617 1.4106 5.18138 1.4106C7.25659 1.4106 8.94602 3.09272 8.94602 5.15894C8.94602 7.22517 7.25659 8.90729 5.18138 8.90729Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M12.7971 11.7947L9.28524 8.29801C9.95702 7.42384 10.3628 6.33775 10.3628 5.15894C10.3628 2.31126 8.03479 0 5.18138 0C2.32796 0 0 2.31126 0 5.15894C0 8.00662 2.32796 10.3179 5.18138 10.3179C6.33871 10.3179 7.40957 9.93378 8.27424 9.29139L11.7928 12.7947C11.9325 12.9338 12.112 13 12.2916 13C12.4712 13 12.6575 12.9338 12.7905 12.7947C13.0698 12.5166 13.0698 12.0728 12.7905 11.7947H12.7971ZM5.18138 8.90729C3.10617 8.90729 1.41673 7.22517 1.41673 5.15894C1.41673 3.09272 3.10617 1.4106 5.18138 1.4106C7.25659 1.4106 8.94602 3.09272 8.94602 5.15894C8.94602 7.22517 7.25659 8.90729 5.18138 8.90729Z'/%3E%3C/svg%3E");
	width: 1em;
	aspect-ratio: 1;
}

#coa_top_braze #tag_recommend .tag_recommend_container .tag-list-container #tag-list .tag-listItem .tag-link:hover::before {
	background: #fff;
}

/* --- Scrollbar Customization --- */
@-moz-document url-prefix() {
	#coa_top_braze #tag_recommend .tag_recommend_container .tag-list-container {
		scrollbar-width: thin;
		scrollbar-color: var(--gray-color02) var(--gray-color);
	}
}

/* ==========================================================================
   Section: Brand Logo Slide (Grid System)
   ========================================================================== */
/* Loading */
#coa_top_braze #brand-logo__slide .loading-section .loading-indicators {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: 1fr;
	width: fit-content;
	gap: 10px;
	overflow: hidden;
}

@media (width > 767px) {
	#coa_top_braze #brand-logo__slide:has(.brand-logo__item:nth-child(8)) .loading-section .loading-indicators {
		width: 100%;
	}

	#coa_top_braze #brand-logo__slide:has(.brand-logo__item:nth-child(14)) .loading-section .loading-indicators {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, 1fr);
	}
}

@media (width < 767px) {
	#coa_top_braze #brand-logo__slide:has(.brand-logo__item:nth-child(4)) .loading-section .loading-indicators {
		width: 100%;
	}

	#coa_top_braze #brand-logo__slide:has(.brand-logo__item:nth-child(8)) .loading-section .loading-indicators {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, 1fr);
	}
}

#coa_top_braze #brand-logo__slide .loading-section .loading-indicators .loading-spinner {
	width: var(--logo-width);
	aspect-ratio: 1;
	border-radius: 50%;
}

/* --- Base Layout --- */
#brand-logo__slide .brand-logo__list {
	display: none;
}

#brand-logo__slide .brand-logo__list:has(.brand-logo__item) {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: 1fr;
	width: fit-content;
	gap: 10px;
	overflow-x: auto;
	padding: 0;
	margin: 0 0 var(--section-margin);
}

@media (width < 940px) {
	#brand-logo__slide .brand-logo__list:has(.brand-logo__item) {
		padding: 0 0.6em;
	}

	#brand-logo__slide .brand-logo__list:has(.brand-logo__item) {
		margin: 0 0 calc(var(--section-margin) - 10px);
	}
}

/* --- Responsive Grid Logic --- */
/* PC (768px+) */
@media (width > 767px) {
	#brand-logo__slide .brand-logo__list:has(.brand-logo__item:nth-child(8)) {
		width: 100%;
		padding-bottom: 10px;
	}

	#brand-logo__slide .brand-logo__list:has(.brand-logo__item:nth-child(14)) {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, 1fr);
	}
}

/* SP (767px-) */
@media (width < 768px) {
	#brand-logo__slide .brand-logo__list:has(.brand-logo__item:nth-child(4)) {
		width: 100%;
		padding-bottom: 10px;
	}

	#brand-logo__slide .brand-logo__list:has(.brand-logo__item:nth-child(8)) {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, 1fr);
	}
}

/* --- Item Styles --- */
#brand-logo__slide .brand-logo__list .brand-logo__item {
	width: var(--logo-width);
	aspect-ratio: 1;
}

#brand-logo__slide .brand-logo__list .brand-link {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	border: 1px solid var(--gray-color);
	border-radius: 50%;
	overflow: hidden;
	padding: 10%;
	transition: all 0.3s ease;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#brand-logo__slide .brand-logo__list .brand-link.brand-link--with-bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: var(--bg-image);
	background-size: 5000%;
	background-position: left top;
}

#brand-logo__slide .brand-logo__list .brand-logo {
	display: block;
	width: 100%;
	object-fit: contain;
	position: relative;
}

#brand-logo__slide .brand-logo__list .brand-link:hover .brand-logo {
	transform: scale(1.1);
	opacity: 1;
}

/* --- Scrollbar Customization --- */
@-moz-document url-prefix() {
	#brand-logo__slide .brand-logo__list {
		scrollbar-width: thin;
		scrollbar-color: var(--gray-color02) var(--gray-color);
	}
}


/* ==========================================================================
   Section: Ranking (Anchor Positioning)
   ========================================================================== */
/* Loading */
#coa_top_braze #braze_ranking_all .loading-section .loading-tab {
	width: 100%;
	display: flex;
	gap: 0.5em;
	height: 3.9em;
	padding: 0.5em;
	margin: 0 auto 1.5em;
	font-size: var(--txt-f-size);
}

#coa_top_braze #braze_ranking_all .loading-section .loading-tab .loading-tab__button {
	display: block;
	flex: 0 1 auto;
	background: var(--gray-color);
	border-radius: 3em;
}

#coa_top_braze #braze_ranking_all .loading-section .loading-card__container {
	display: grid;
	gap: 0.9em 0.75em;
	grid-template-columns: repeat(2, 1fr);
}

#coa_top_braze #braze_ranking_all .loading-section .loading-card__container .loading-card {
	aspect-ratio: initial;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 0 0.5em;
	padding: 0.75em;
	font-size: var(--txt-f-size);
}

#coa_top_braze #braze_ranking_all .loading-section .loading-card__container .loading-card .loading-card__number {
	width: 2.4em;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--gray-color);
	font-size: var(--ranking-f-size);
}

#coa_top_braze #braze_ranking_all .loading-section .loading-card__container .loading-card .loading-card__image {
	width: 20%;
	display: block;
	border-radius: 5px;
	overflow: hidden;
	order: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

#coa_top_braze #braze_ranking_all .loading-section .loading-card__container .loading-card .loading-card__content {
	gap: 0.6em;
	width: 70%;
	font-size: var(--txt-f-size);
	line-height: 1;
	padding: 0;
}

#coa_top_braze #braze_ranking_all .loading-section .loading-card__container .loading-card .loading-card__content .loading-card__title {
	margin: 0;
}

/* --- Ranking Content Styles --- */

/* 1. Tabs Wrapper & Visibility Logic */
#braze_ranking_all .braze_ranking_block .tabs_wrapper {
	display: none;
}

#braze_ranking_all .braze_ranking_block .tabs_wrapper:has(.tab_insert01 .tab):has(.tab_insert02 .tab),
#braze_ranking_all .braze_ranking_block .tabs_wrapper:has(.tab_insert01 .tab):has(.tab_insert03 .tab),
#braze_ranking_all .braze_ranking_block .tabs_wrapper:has(.tab_insert02 .tab):has(.tab_insert03 .tab) {
	display: block;
	margin: 0 0 1em;
}

/* 2. Tabs Container & Navigation */
#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	gap: 0.5em;
	border-radius: 3em;
}

#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs:has(.tab) {
	padding: 0.5em;
	background: var(--brand-thin-color);
	/* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); */
}

#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab_insert01:not(:has(span)),
#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab_insert02:not(:has(span)),
#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab_insert03:not(:has(span)) {
	display: none;
}

#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab_insert01 span:nth-child(n+2),
#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab_insert02 span:nth-child(n+2),
#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab_insert03 span:nth-child(n+2) {
	display: none;
}

/* 3. Anchor Positioning (The Glider) */
#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab_glider {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: var(--brand-color);
	border-radius: 3em;
	pointer-events: none;
	transition: transform 1s var(--spring-transform),
		width 1s var(--spring-default),
		heigth 1s var(--spring-default);
	opacity: 0;
	display: block;
	/* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); */
}

#braze_ranking_all .tabs:has(.tab.active) .tab_glider {
	opacity: 1;
	/* アクティブタブがあれば表示 */
}

/* Tab Items */
#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab {
	cursor: pointer;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	z-index: 2;
	padding: 1em 0;
	border-radius: 3em;
	color: var(--black-color);
	font-size: var(--txt-f-size);
	text-align: center;
	text-decoration: none;
	line-height: 1;
	background: transparent;
	transition: all ease .3s;
}

#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab:hover {
	color: var(--brand-color);
}

#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab.active {
	color: #fff;
	font-weight: 700;
}

/* ========================================================
   アイコンの設定（Data URI埋め込み版）
   ======================================================== */

/* 1. ベース設定（共通） */
/* #braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab:before {
	content: "";
	display: block;
	width: 1.3em;
	height: 1.3em;
	background-color: var(--blue-color);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
} */

/* 2. アクティブ時の色変更 */
#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab.active::before {
	background-color: #fff;
	/* 白にする */
}


/* 3. 各アイコンの形状定義（SVGコードを直接記述） */

/* --- アクセス (.tab.access) --- */
#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab.access::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M99.5,17.3v65.1c0,.4-.2.8-.3,1.1-1.5,5.8-6.4,9.7-12.4,9.8H13.2c-7.1,0-12.7-5.7-12.7-12.8V19.5C.5,12.3,6.1,6.7,13.3,6.7h73.6c1.4,0,2.8.2,4.2.7,4.7,1.7,7.4,5.1,8.4,10h0v-.1ZM50,43H9c-1.3,0-1.4,0-1.4,1.4v35.4c0,1.1,0,2.1.6,3.1,1.2,2.2,3.1,3.1,5.5,3.1h73.5c3-.2,5.3-2.5,5.3-5.4v-36c0-1.1-.5-1.6-1.6-1.6h-40.9ZM39.9,23.6c0,2.9,2.1,5.1,5,5.1s5.1-2.3,5.1-5.1-2.2-5-5-5-5.1,2.1-5.1,4.9h0v.1ZM25.2,23.6c0,2.9,2.2,5.1,5,5.2,2.8,0,5.1-2.2,5.1-5s-2.2-5-5-5-5.1,2.1-5.1,4.9h0s0-.1,0-.1ZM11.6,23.7c0,2.8,2.2,5,5,5s5-2.2,5-5-2.2-5.1-5.1-5c-2.9,0-5,2.2-5,5h.1Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M99.5,17.3v65.1c0,.4-.2.8-.3,1.1-1.5,5.8-6.4,9.7-12.4,9.8H13.2c-7.1,0-12.7-5.7-12.7-12.8V19.5C.5,12.3,6.1,6.7,13.3,6.7h73.6c1.4,0,2.8.2,4.2.7,4.7,1.7,7.4,5.1,8.4,10h0v-.1ZM50,43H9c-1.3,0-1.4,0-1.4,1.4v35.4c0,1.1,0,2.1.6,3.1,1.2,2.2,3.1,3.1,5.5,3.1h73.5c3-.2,5.3-2.5,5.3-5.4v-36c0-1.1-.5-1.6-1.6-1.6h-40.9ZM39.9,23.6c0,2.9,2.1,5.1,5,5.1s5.1-2.3,5.1-5.1-2.2-5-5-5-5.1,2.1-5.1,4.9h0v.1ZM25.2,23.6c0,2.9,2.2,5.1,5,5.2,2.8,0,5.1-2.2,5.1-5s-2.2-5-5-5-5.1,2.1-5.1,4.9h0s0-.1,0-.1ZM11.6,23.7c0,2.8,2.2,5,5,5s5-2.2,5-5-2.2-5.1-5.1-5c-2.9,0-5,2.2-5,5h.1Z'/%3E%3C/svg%3E");
}

/* --- クーポン (.tab.coupon) --- */
#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab.coupon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M64.1,83.5H30c-1,0-1.5-.5-1.5-1.5v-2.1c0-1.2-.6-1.7-1.6-1.7s-1.6.6-1.7,1.8v2.3c0,1-.3,1.3-1.3,1.3H1.8c-1,0-1.3-.3-1.2-1.3v-17.3c0-1,.3-1.4,1.3-1.6,5.5-1.3,9.1-4.8,10.4-10.2,1.9-7.4-2.7-14.8-10.1-16.6-1.1-.3-1.6-1-1.6-2.1v-16.6c0-1,.467-1.5,1.4-1.5h21.8c1,0,1.5.3,1.4,1.4v2.2c0,1,.8,1.7,1.7,1.7s1.5-.6,1.5-1.7v-2.6c0-.6.3-.9.9-.9h68.5c1.1,0,1.7.6,1.7,1.7v16.9c0,.9-.3,1.3-1.2,1.5-6.5,1.6-10.8,6.6-10.9,13.2-.1,6.6,4.2,11.9,10.4,13.6,1.7.5,1.7.4,1.7,2.2v16.3c0,1.1-.6,1.7-1.8,1.7h-33.7s.1-.1.1-.1ZM25.3,37.7v5.7c0,1.2.6,1.9,1.6,1.9s1.6-.7,1.6-2v-11.2c0-1.3-.5-1.9-1.6-2-1.1,0-1.7.7-1.7,2v5.5h0l.1.1ZM28.5,61.8v-5.7c0-1.2-.6-1.9-1.6-1.9s-1.6.7-1.6,2v11.3c0,1.2.6,1.8,1.6,1.9,1.1,0,1.6-.6,1.6-1.9v-5.6h0v-.1Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M64.1,83.5H30c-1,0-1.5-.5-1.5-1.5v-2.1c0-1.2-.6-1.7-1.6-1.7s-1.6.6-1.7,1.8v2.3c0,1-.3,1.3-1.3,1.3H1.8c-1,0-1.3-.3-1.2-1.3v-17.3c0-1,.3-1.4,1.3-1.6,5.5-1.3,9.1-4.8,10.4-10.2,1.9-7.4-2.7-14.8-10.1-16.6-1.1-.3-1.6-1-1.6-2.1v-16.6c0-1,.467-1.5,1.4-1.5h21.8c1,0,1.5.3,1.4,1.4v2.2c0,1,.8,1.7,1.7,1.7s1.5-.6,1.5-1.7v-2.6c0-.6.3-.9.9-.9h68.5c1.1,0,1.7.6,1.7,1.7v16.9c0,.9-.3,1.3-1.2,1.5-6.5,1.6-10.8,6.6-10.9,13.2-.1,6.6,4.2,11.9,10.4,13.6,1.7.5,1.7.4,1.7,2.2v16.3c0,1.1-.6,1.7-1.8,1.7h-33.7s.1-.1.1-.1ZM25.3,37.7v5.7c0,1.2.6,1.9,1.6,1.9s1.6-.7,1.6-2v-11.2c0-1.3-.5-1.9-1.6-2-1.1,0-1.7.7-1.7,2v5.5h0l.1.1ZM28.5,61.8v-5.7c0-1.2-.6-1.9-1.6-1.9s-1.6.7-1.6,2v11.3c0,1.2.6,1.8,1.6,1.9,1.1,0,1.6-.6,1.6-1.9v-5.6h0v-.1Z'/%3E%3C/svg%3E");
}

/* --- 宿泊施設 (.tab.hotel) --- */
#braze_ranking_all .braze_ranking_block .tabs_wrapper .tabs .tab.hotel::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M.5,50v-26.1c0-1.7.7-3.1,2.2-3.9,1.5-.8,3-.6,4.4.4,1.3.9,1.7,2.3,1.7,3.9v29.9c0,1.067.533,1.6,1.6,1.6,29-.2,58-.2,87-.2,2.4,0,2.1-.3,2.1,2.1v18.4c0,1.7-.7,3-2.2,3.8s-3,.7-4.4-.3c-1.3-.9-1.7-2.2-1.7-3.7v-6c0-.8-.3-1.1-1.1-1.1h-44.7c-11.7.1-23.4,0-35.1.1-1,0-1.5.5-1.5,1.5v5.7c0,2-1.1,3.5-2.8,4.1-1.6.6-3.3,0-4.5-1.2-.8-.9-1-1.9-1-3.1v-26s0,.1,0,.1ZM98.1,52.5c.933,0,1.4-.467,1.4-1.4v-5.7c0-9.1-7.2-16.3-16.3-16.3h-36.8c-5,0-8.5,3.5-8.5,8.5v13.5c0,.933.467,1.4,1.4,1.4h58.8ZM23.9,30.9c-5.6,0-10.1,4.3-10.1,9.8,0,5.6,4.3,10.1,9.9,10.1,5.5,0,9.9-4.4,10-9.9,0-5.4-4.3-9.9-9.7-10,0,0-.1,0-.1,0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M.5,50v-26.1c0-1.7.7-3.1,2.2-3.9,1.5-.8,3-.6,4.4.4,1.3.9,1.7,2.3,1.7,3.9v29.9c0,1.067.533,1.6,1.6,1.6,29-.2,58-.2,87-.2,2.4,0,2.1-.3,2.1,2.1v18.4c0,1.7-.7,3-2.2,3.8s-3,.7-4.4-.3c-1.3-.9-1.7-2.2-1.7-3.7v-6c0-.8-.3-1.1-1.1-1.1h-44.7c-11.7.1-23.4,0-35.1.1-1,0-1.5.5-1.5,1.5v5.7c0,2-1.1,3.5-2.8,4.1-1.6.6-3.3,0-4.5-1.2-.8-.9-1-1.9-1-3.1v-26s0,.1,0,.1ZM98.1,52.5c.933,0,1.4-.467,1.4-1.4v-5.7c0-9.1-7.2-16.3-16.3-16.3h-36.8c-5,0-8.5,3.5-8.5,8.5v13.5c0,.933.467,1.4,1.4,1.4h58.8ZM23.9,30.9c-5.6,0-10.1,4.3-10.1,9.8,0,5.6,4.3,10.1,9.9,10.1,5.5,0,9.9-4.4,10-9.9,0-5.4-4.3-9.9-9.7-10,0,0-.1,0-.1,0Z'/%3E%3C/svg%3E");
}

/* 4. Content Wrapper & Visibility */
#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper {
	display: none;
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper.active {
	display: block;
	opacity: 1;
	transition: opacity 0.5s ease;

	@starting-style {
		opacity: 0;
	}
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .title,
#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .tab_txt {
	display: none;
}

/* 5. Ranking List Style */
#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content {
	counter-reset: rank;
	display: grid;
	gap: 0.75em;
	grid-template-columns: repeat(2, 1fr);
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box {
	min-width: 0;
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box:last-child {
	margin-bottom: var(--section-margin);
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box a {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 0 0.5em;
	padding: 0.75em;
	border-radius: 0.4em;
	background: var(--gray-color);
	border: solid 1px transparent;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box a:hover {
	background: #fff;
	border-color: var(--brand-color);
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box a:hover img {
	opacity: 1;
	scale: 1.1;
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box a::before {
	content: counter(rank);
	counter-increment: rank;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.4em;
	aspect-ratio: 1;
	border-radius: 50%;
	font-size: var(--ranking-f-size);
	font-weight: 700;
	text-align: center;
	color: #fff;
	line-height: 2.4em;
}


/* Badges */
#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box:nth-child(1) a::before {
	background: var(--gold-color);
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box:nth-child(2) a::before {
	background: var(--silver-color);
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box:nth-child(3) a::before {
	background: var(--bronze-color);
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box:nth-child(n+4) a::before {
	color: var(--black-color);
	background: #fff;
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box a img {
	order: 0;
	display: block;
	width: 20%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 5px;
	overflow: hidden;
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box a .menu_text_all {
	width: calc((100% - 3em) * 0.8);
	font-size: var(--txt-f-size);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box a .menu_text_all p {
	line-height: 1.2;
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box a .menu_text_all .menu_title {
	width: 100%;
	margin: 0 0 0.5em;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box a .menu_text_all .menu {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content .braze_ranking_box a .menu_text_all .price {
	width: 100%;
	color: var(--red-color);
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (width < 940px) {

	#braze_ranking_all .braze_ranking_block {
		padding-left: 0.6em;
		padding-right: 0.6em;
	}

	#coa_top_braze #braze_ranking_all .loading-section .loading-tab {
		width: calc(100% - 1.2em);
		height: 4em;
	}
}

@media (width < 768px) {

	#coa_top_braze #braze_ranking_all .loading-section .loading-indicators {
		display: flex;
		flex-direction: column;
	}

	#coa_top_braze #braze_ranking_all .loading-section .loading-card__container {
		display: flex;
		flex-direction: column;
		gap: 1.05em;
	}

 	#braze_ranking_all .braze_ranking_block .tab_content_wrapper .braze_ranking_wrapper .braze_ranking_content {
		display: flex;
		flex-direction: column;
	}

}


/* ==========================================================================
   Section: Ads & Menu Layout (Generic Card Styles)
   ========================================================================== */
/* Ads Loading */

#coa_top_braze #ads_braze .loading-section .title-container {
	font-size: var(--cap-f-size);
	min-height: 1em;
}

#coa_top_braze #ads_braze .loading-section .title-container .more-button {
	font-size: var(--txt-f-size);
}

#coa_top_braze #ads_braze .loading-section .loading-card__container {
	width: 125%;
	padding: 0 0 0 0.6em;
}

#coa_top_braze #ads_braze .loading-section .loading-card__container .loading-card {
	width: 75%;
	aspect-ratio: initial;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-around;
	gap: 5%;
	padding: 0.75em;
	font-size: var(--txt-f-size);
}

#coa_top_braze #ads_braze .loading-section .loading-card__container .loading-card .loading-card__image {
	width: 35%;
	display: block;
	border-radius: 5px;
	overflow: hidden;
	order: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

#coa_top_braze #ads_braze .loading-section .loading-card__container .loading-card .loading-card__content {
	width: 65%;
	font-size: var(--txt-f-size);
	line-height: 1;
	padding: 0;
}

#coa_top_braze #ads_braze .loading-section .loading-card__container .loading-card .loading-card__content .loading-card__title {
	margin: 0;
}

/* Ads Content */
#ads_braze .title {
	font-size: var(--title-f-size);
	font-weight: 700;
	margin: 0 auto 1em;
	color: var(--black-color);
}

#coa_top_braze #ads_braze .section-title__container {
	min-height: initial;
}

#coa_top_braze #ads_braze .section-title__container::before {
	display: none;
}

#coa_top_braze .ads_slide {
	display: none;
	opacity: 0;
	transition: opacity 1s ease-out;
}

#coa_top_braze .ads_slide.slick-initialized {
	display: block;
	opacity: 1;
}

#coa_top_braze .ads_slide .slick-list {
	margin: 0 0 var(--section-margin);
}

#ads_braze .braze_ads a {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 0.5em;
	border-radius: 5px;
	padding: 0.5em;
	background: var(--gray-color);
}

#ads_braze .menu_text_all {
	width: 65%;
	font-size: var(--txt-f-size);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	line-height: 1.2;
}

#ads_braze .braze_ads a img {
	width: 35%;
	display: block;
	border-radius: 5px;
	overflow: hidden;
}

#ads_braze .braze_ads .menu_title {
	margin: 0 0 1em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
	font-weight: 700;
}

#ads_braze .braze_ads .menu {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

#ads_braze .braze_ads .price {
	color: var(--red-color);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
	font-weight: 700;
}

#coa_top_braze .menu_layout_slide a {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--gray-color);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	position: relative;
	border: 1px solid transparent;
	border-radius: 0.5em;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#coa_top_braze .menu_layout_slide a:hover {
	background: #fff;
	border-color: var(--brand-color);
}

#coa_top_braze .menu_layout_slide a:has(.expired):before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	background: #000;
	z-index: 10;
	opacity: .2;
	pointer-events: none;
}

#coa_top_braze .menu_layout_slide a .smallCategory {
	color: var(--gray-color02);
	font-size: var(--badge-f-size);
	display: flex;
	gap: 0.3em;
	align-items: center;
	line-height: 1;
}

#coa_top_braze .menu_layout_slide a .smallCategory::before {
	content: "";
	display: block;
	width: 1.4em;
	aspect-ratio: 1;
	background-color: var(--brand-color);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}

#coa_top_braze .menu_layout_slide a .imgContainer {
	position: relative;
	width: 100%;
	padding: 8% 0;
	background-color: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	overflow: hidden;
	text-align: center;
	aspect-ratio: var(--img-aspect-ratio);
}

#coa_top_braze .menu_layout_slide a .imgContainer .badgeContainer {
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	width: calc(100% - 1em);
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.4em;
	z-index: 5;
	pointer-events: none;
}

#coa_top_braze .menu_layout_slide a .imgContainer .badge {
	display: flex;
	align-items: center;
	gap: 0.3em;
	color: #fff;
	padding: 0.5em 1em;
	font-size: var(--badge-f-size);
	width: fit-content;
	opacity: .9;
	font-weight: 700;
	border-radius: 0.5em;
}

#coa_top_braze .menu_layout_slide a .imgContainer .discount {
	background: var(--red-color);
}

#coa_top_braze .menu_layout_slide a .imgContainer .period {
	background: var(--blue-color);
}

#coa_top_braze .menu_layout_slide a .imgContainer .period.expired {
	background: var(--black-color);
}

#coa_top_braze .menu_layout_slide a .imgContainer img {
	display: block;
	height: 100%;
	object-fit: contain;
	margin: 0 auto;
}

#coa_top_braze .menu_layout_slide a:hover .imgContainer img {
	opacity: 1;
	transform: scale(1.03);
}

#coa_top_braze .menu_layout_slide a .textContainer {
	display: flex;
	flex-direction: column;
	font-size: var(--txt-f-size);
	gap: 0.5em;
	padding: 0.75em;
	line-height: 1.2;
	flex-grow: 1;
}

#coa_top_braze .menu_layout_slide .menu {
	font-size: var(--txt-f-size);
	font-weight: 700;
	overflow: hidden;
	display: -webkit-box;
	box-orient: vertical;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	min-height: 2lh;
	line-height: 1.2;
}

#coa_top_braze .menu_layout_slide .price {
	overflow: hidden;
	display: -webkit-box;
	box-orient: vertical;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: var(--txt-f-size);
	line-height: 1.2;
}

#coa_top_braze .menu_layout_slide .price strong {
	color: var(--red-color);
	font-weight: 700;
}

#coa_top_braze .menu_layout_slide .icn {
	display: flex;
	align-items: center;
	gap: 0.2em;
	width: fit-content;
	padding: 0.3em 0.8em 0.3em 0.5em;
	border-radius: 2em;
	color: #fff;
	font-size: var(--icn-f-size);
	text-align: left;
	display: none;
}

#coa_top_braze .menu_layout_slide .icn::before {
	content: "";
	display: block;
	width: 1.25em;
	aspect-ratio: 1;
	flex: 0 1 auto;
}

#coa_top_braze .menu_layout_slide .ai_recommend_icn {
	background: var(--brand-color);
}

#coa_top_braze .menu_layout_slide .ai_recommend_icn:before {
	background: url(../img/ai-icn.svg) center /100% no-repeat;
}

#coa_top_braze .menu_layout_slide .pastview_icn {
	background: var(--pastview-color);
}

#coa_top_braze .menu_layout_slide .pastview_icn:before {
	background: url(../img/clock-icn.svg) center /contain no-repeat;
}

#coa_top_braze .menu_layout_slide .limitedGoOut_icn {
	background: var(--limitedGoOut-color);
}

#coa_top_braze .menu_layout_slide .limitedGoOut_icn:before {
	background: url(../img/limited01.svg) center /contain no-repeat;
}

#coa_top_braze .menu_layout_slide .limitedLifeService_icn {
	background: var(--limitedLifeService-color);
}

#coa_top_braze .menu_layout_slide .limitedLifeService_icn:before {
	background: url(../img/limited02.svg) center /contain no-repeat;
}

#coa_top_braze .menu_layout_slide .icn_txt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	line-clamp: 1;
	-webkit-line-clamp: 1;
	padding: 0;
	color: #fff;
	overflow: hidden;
	font-size: var(--icn-f-size);
	flex: 0 1 auto;
	width: fit-content;
	min-height: 1lh;
}

#coa_top_braze .menu_layout_slide .area {
	color: var(--gray-color02);
	font-size: var(--badge-f-size);
	display: flex;
	gap: 0.3em;
	align-items: center;
	line-height: 1;
}

#coa_top_braze .menu_layout_slide .area:before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 1.4em;
	height: 1.4em;
	background-color: var(--brand-color);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -6 110 110'%3E%3Cpath d='M34.394,100h-1.561c-.879-.572-1.26-1.352-1.789-2.21L3.208,47.201C-9.092,19.693,18.352-8.788,46.292,2.557c18.9,7.674,25.604,29.2,16.492,47.115-8.251,16.222-18.258,31.902-26.6,48.118-.527.859-.913,1.638-1.789,2.21ZM31.623,16.95c-10.3,1.049-16.953,11.877-13.754,21.638,4.403,13.438,22.949,15.465,30.02,3.212,6.921-11.994-2.612-26.24-16.266-24.85Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -6 110 110'%3E%3Cpath d='M34.394,100h-1.561c-.879-.572-1.26-1.352-1.789-2.21L3.208,47.201C-9.092,19.693,18.352-8.788,46.292,2.557c18.9,7.674,25.604,29.2,16.492,47.115-8.251,16.222-18.258,31.902-26.6,48.118-.527.859-.913,1.638-1.789,2.21ZM31.623,16.95c-10.3,1.049-16.953,11.877-13.754,21.638,4.403,13.438,22.949,15.465,30.02,3.212,6.921-11.994-2.612-26.24-16.266-24.85Z'/%3E%3C/svg%3E");
}

#coa_top_braze .menu_layout_slide .area:empty:before {
	display: none;
}

/* ==========================================================================
   Section: Life Event
   ========================================================================== */
/* Loading */
#coa_top_braze #life_event .loading-section .loading-indicators .loading-spinner {
	aspect-ratio: 15 / 8;
}

/* Content */
#life_event .life_event_list {
	display: grid;
	gap: 0.6em;
	grid-template-columns: repeat(4, 1fr);
}

#life_event .life_event_list .life_event_listItem {
	margin-bottom: var(--section-margin);
}

/* data-number="1" が既にある場合、それ以降の data-number="1" を消す */
.life_event_listItem[data-number="1"]~.life_event_listItem[data-number="1"],
.life_event_listItem[data-number="2"]~.life_event_listItem[data-number="2"],
.life_event_listItem[data-number="3"]~.life_event_listItem[data-number="3"],
.life_event_listItem[data-number="4"]~.life_event_listItem[data-number="4"] {
	display: none;
}

#life_event .life_event_list .life_event_listItem a {
	display: block;
	border-radius: 0.5em;
	overflow: hidden;
}

@media (width < 940px) {
	#coa_top_braze #life_event .loading-section .loading-indicators .loading-spinner {
		aspect-ratio: 1 / 1;
	}

	#life_event .life_event_list {
		padding: 0 0.6em;
	}
}


/* ==========================================================================
   Section: Setting Buttons (Profile/Category)
   ========================================================================== */
/* Loading */
#coa_top_braze #setting_btn .loading-section .loading-indicators .loading-spinner {
	width: 300px;
	height: 43px;
	border-radius: 3em;
}

@media (width < 767px) {
	#coa_top_braze #setting_btn .loading-section .loading-indicators .loading-spinner {
		width: 100%;
		height: auto;
		aspect-ratio: 8/1;
	}
}

/* Content
#coa_top_braze #setting_btn .section-title__container {
	border-left: solid 3px var(--orange-color);
} */

#setting_btn .title {
	font-size: var(--title-f-size);
	font-weight: 700;
	padding: var(--section-margin) 0.3em 0.6em;
	color: var(--black-color);
}

#setting_btn .setting_btn_all .text {
	font-size: var(--txt-f-size);
	line-height: 2;
	margin: 0 0 1em;
}

#setting_btn .setting_btn {
	display: flex;
	justify-content: space-between;
	gap: 1em;
}

.setting_btn .profile_btn~.profile_btn,
.setting_btn .category_btn~.category_btn {
	display: none;
}

#setting_btn .setting_btn p {
	display: flex;
	gap: 0.25em;
	justify-content: center;
	align-items: center;
	font-size: var(--txt-f-size);
	font-weight: 700;
	text-align: center;
	color: var(--brand-color);
	background: var(--brand-thin-color);
	border-radius: 3em;
	padding: 1em;
	margin: 0 0 var(--section-margin);
	position: relative;
	cursor: pointer;
	transition: all ease .5s;
	line-height: 1lh;
	width: 300px;
}

@media (width < 767px) {
	#setting_btn .setting_btn p {
		width: 100%;
	}
}

#setting_btn .setting_btn p .change_txt {
	width: fit-content;
}

#setting_btn .setting_btn p:hover {
	color: #fff;
	background: var(--brand-color);
}


#setting_btn .setting_btn .profile::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -6 110 110'%3E%3Cpath d='M34.394,100h-1.561c-.879-.572-1.26-1.352-1.789-2.21L3.208,47.201C-9.092,19.693,18.352-8.788,46.292,2.557c18.9,7.674,25.604,29.2,16.492,47.115-8.251,16.222-18.258,31.902-26.6,48.118-.527.859-.913,1.638-1.789,2.21ZM31.623,16.95c-10.3,1.049-16.953,11.877-13.754,21.638,4.403,13.438,22.949,15.465,30.02,3.212,6.921-11.994-2.612-26.24-16.266-24.85Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -6 110 110'%3E%3Cpath d='M34.394,100h-1.561c-.879-.572-1.26-1.352-1.789-2.21L3.208,47.201C-9.092,19.693,18.352-8.788,46.292,2.557c18.9,7.674,25.604,29.2,16.492,47.115-8.251,16.222-18.258,31.902-26.6,48.118-.527.859-.913,1.638-1.789,2.21ZM31.623,16.95c-10.3,1.049-16.953,11.877-13.754,21.638,4.403,13.438,22.949,15.465,30.02,3.212,6.921-11.994-2.612-26.24-16.266-24.85Z'/%3E%3C/svg%3E");
}

@media (width < 940px) {
	#setting_btn .setting_btn {
		padding: 0 0.6em;
		gap: 0.6em
	}
}


/* ==========================================================================
   Section: #coa-nonlogin
   ========================================================================== */
#coa-nonlogin * {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial", "Hiragino Kaku Gothic ProN", 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "メイリオ", -apple-system, BlinkMacSystemFont, sans-serif;
	font-feature-settings: "palt";
	letter-spacing: 0.06em;
	color: var(--black-color);
}

#coa-nonlogin .pc {
	display: block;
}

#coa-nonlogin {
	box-sizing: border-box;
	position: relative;
	margin: 0 auto 1em;
	overflow: hidden;
	width: min(100%, 680px);
	--title-f-size: 18px;
	--txt-f-size: 12px;
	--more-btn-f-size: 12px;
	--section-margin: 40px;
	--spring-default: linear(0, 0.0107, 0.0398, 0.0834, 0.138, 0.2003, 0.2677, 0.3379, 0.4089, 0.4791, 0.5471, 0.612, 0.6731, 0.7297, 0.7815, 0.8283, 0.87, 0.9068, 0.9388, 0.9662, 0.9892, 1.0083, 1.0237, 1.0357, 1.0449, 1.0514, 1.0556, 1.058, 1.0587, 1.0581, 1.0563, 1.0538, 1.0506, 1.0469, 1.043, 1.0388, 1.0347, 1.0306, 1.0266, 1.0228, 1.0192, 1.0159, 1.0128, 1.0101, 1.0076, 1.0055, 1.0036, 1.002, 1.0006, 0.9995, 0.9986, 0.9979, 0.9974, 0.997, 0.9967, 0.9966, 0.9966, 0.9966, 0.9967, 0.9968, 0.997, 0.9972, 0.9975, 0.9977, 0.998, 0.9982, 0.9984, 0.9987, 0.9989, 0.9991, 0.9992, 0.9994, 0.9996, 0.9997, 0.9998, 0.9999, 1, 1, 1.0001, 1.0001, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1);
	--spring-transform: linear(0, 0.033, 0.122, 0.247, 0.392, 0.544, 0.688, 0.812, 0.909, 0.975, 1.013, 1.028, 1.027, 1.016, 1.001, 0.988, 0.981, 0.981, 0.986, 0.993, 1, 1.004, 1.005, 1.004, 1.001, 0.999, 0.999, 0.999, 1, 1);
}



#coa-nonlogin .coa-nonlogin__header {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--title-f-size);
	font-weight: 700;
	color: var(--black-color);
	gap: 0.25em;
	margin: 0 auto 0.5em;
	opacity: .5;
}

#coa-nonlogin .coa-nonlogin__header .coa-nonlogin__title {
	flex: 0 1 auto;
	line-height: 1;
	font-size: var(--title-f-size);
	font-weight: 700;
	color: var(--black-color);
}

#coa-nonlogin .coa-nonlogin__header .coa-nonlogin__more-btn {
	width: auto;
	text-align: right;
	flex: 0 1 auto;
	white-space: nowrap;
}

#coa-nonlogin .coa-nonlogin__header .coa-nonlogin__more-btn span {
	display: flex;
	font-size: var(--more-btn-f-size);
	font-weight: 700;
	position: relative;
	color: var(--brand-color);
	align-items: center;
	justify-content: space-between;
	line-height: 1;
	padding: 1em 1.25em;
	border-radius: 3em;
	background: var(--brand-thin-color);
	text-decoration: none;
	transition: all ease .5s;
}

#coa-nonlogin .coa-nonlogin__content {
	display: flex;
	justify-content: center;
	gap: 0.6em;
	list-style: none;
	opacity: .5;
}

#coa-nonlogin .coa-nonlogin__content .coa-nonlogin__item {
	border-radius: 0.5em;
	overflow: hidden;
}


#coa-nonlogin .coa-nonlogin__content .coa-nonlogin__item img {
	display: block;
	width: 100%;
}

#coa-nonlogin .coa-nonlogin__loginBtn {
	position: absolute;
	inset: 0;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
	width: 100%;
	height: 100%;
	text-align: center;
}

#coa-nonlogin .coa-nonlogin__loginBtn p {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

#coa-nonlogin .coa-nonlogin__loginBtn .remark {
	font-size: 12px;
	font-weight: 400;
	word-break: auto-phrase;
	text-wrap: balance;
}

#coa-nonlogin .coa-nonlogin__loginBtn a {
	text-decoration: none;
	display: block;
	width: min(90%, 300px);
	padding: 0.75em 2em;
	background-color: var(--brand-color);
	color: #FFFFFF;
	border-radius: 3em;
	font-size: 16px;
	font-weight: 700;
}

@media (width < 768px) {
	#coa-nonlogin {
		--title-f-size: 16px;
		--txt-f-size: 13px;
		--more-btn-f-size: 13px;
		--more-btn-f-size: 12px;
		padding: 0 10px;
	}

	#coa-nonlogin .pc {
		display: none;
	}

	#coa-nonlogin .coa-nonlogin__header {
		padding: var(--section-padding) 0.6em 0.6em;
	}
}