@charset "utf-8";

/* LANGUAGE SELECTOR
--------------------------------------------------- */
:root{
	--purple:#8529CD;
	--hover-bg:#f3e8ff;
	--text-default:#333;
	--font-size:14px;
	--lefticon-size:15px;
	--arrow-size:10px;
	--check-size:16px;
	--list-width:125px;
}

/* ------------------------------
   Language ボタン（トリガー）
------------------------------ */
.combo-area{
	text-align: right;
}
.combo{
	position:relative;
	display:inline-block;
}
.combo__btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:6px;

	padding:8px 36px 8px 30px;

	background:#fff;
	border:1px solid transparent; /* open時に1px borderになっても揺れない */
	border-radius:4px;

	font-size:var(--font-size);
	color:var(--text-default);

	cursor:pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.combo__btn:hover{
	background:var(--hover-bg);
}
.combo__btn:focus-visible{
	outline:2px solid color-mix(in srgb, var(--purple), #ffffff 35%);
	outline-offset:2px;
}
.combo__btn:focus:not(:focus-visible),
.combo__list [role="option"]:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}
.combo.open .combo__btn{
	border-color:var(--purple);
	background:var(--hover-bg);
}

/* 左アイコン（マスク） */
.combo .left-icon{
	position:absolute;
	left:10px;
	width:var(--lefticon-size);
	height:var(--lefticon-size);
	background-color:currentColor;
	-webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8xIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgOSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTE0LjU2LDIwLjYyYy41NC0uODgsMS0yLjAzLDEuMzMtMy4zN2gzLjRjLTEuMTUsMS41OS0yLjgsMi44LTQuNzMsMy4zN1pNMTIsMjFjLS42NywwLTEuNjgtMS4zNi0yLjM0LTMuNzVoNC42OGMtLjY2LDIuMzktMS42OCwzLjc1LTIuMzQsMy43NVpNNC43LDE3LjI1aDMuNGMuMzMsMS4zNC43OSwyLjQ5LDEuMzMsMy4zNy0xLjkzLS41Ny0zLjU4LTEuNzgtNC43My0zLjM3Wk0xNi40OCwxMi43NWg0LjQ4Yy0uMDksMS4wNi0uMzYsMi4wNy0uNzksM2gtMy45N2MuMTUtLjk0LjI1LTEuOTUuMjgtM1pNOS4zMiwxNS43NWMtLjE2LS45LS4yNy0xLjkxLS4zLTNoNS45N2MtLjA0LDEuMDktLjE0LDIuMS0uMywzaC01LjM2Wk0zLjA0LDEyLjc1aDQuNDhjLjAzLDEuMDUuMTMsMi4wNi4yOCwzaC0zLjk3Yy0uNDMtLjkzLS43LTEuOTQtLjc5LTNaTTE2LjQ4LDExLjI1Yy0uMDMtMS4wNS0uMTMtMi4wNi0uMjgtM2gzLjk3Yy40My45My43LDEuOTQuNzksM2gtNC40OFpNMTQuNjgsOC4yNWMuMTYuOS4yNywxLjkxLjMsM2gtNS45N2MuMDMtMS4wOS4xNC0yLjEuMy0zaDUuMzZaTTcuNTIsMTEuMjVIMy4wNGMuMDktMS4wNi4zNi0yLjA3Ljc5LTNoMy45N2MtLjE1Ljk0LS4yNSwxLjk1LS4yOCwzWk0xOS4zLDYuNzVoLTMuNGMtLjMzLTEuMzQtLjc5LTIuNDktMS4zMy0zLjM3LDEuOTMuNTcsMy41OCwxLjc4LDQuNzMsMy4zN1pNOS40NCwzLjM4Yy0uNTQuODgtMSwyLjAzLTEuMzMsMy4zN2gtMy40YzEuMTUtMS41OSwyLjgtMi44LDQuNzMtMy4zN1pNMTIsM2MuNjcsMCwxLjY4LDEuMzYsMi4zNCwzLjc1aC00LjY4Yy42Ni0yLjM5LDEuNjgtMy43NSwyLjM0LTMuNzVaTTEyLDEuNUM2LjIsMS41LDEuNSw2LjIsMS41LDEyczQuNywxMC41LDEwLjUsMTAuNSwxMC41LTQuNywxMC41LTEwLjVTMTcuOCwxLjUsMTIsMS41WiIvPgo8L3N2Zz4=');
	mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8xIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgOSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTE0LjU2LDIwLjYyYy41NC0uODgsMS0yLjAzLDEuMzMtMy4zN2gzLjRjLTEuMTUsMS41OS0yLjgsMi44LTQuNzMsMy4zN1pNMTIsMjFjLS42NywwLTEuNjgtMS4zNi0yLjM0LTMuNzVoNC42OGMtLjY2LDIuMzktMS42OCwzLjc1LTIuMzQsMy43NVpNNC43LDE3LjI1aDMuNGMuMzMsMS4zNC43OSwyLjQ5LDEuMzMsMy4zNy0xLjkzLS41Ny0zLjU4LTEuNzgtNC43My0zLjM3Wk0xNi40OCwxMi43NWg0LjQ4Yy0uMDksMS4wNi0uMzYsMi4wNy0uNzksM2gtMy45N2MuMTUtLjk0LjI1LTEuOTUuMjgtM1pNOS4zMiwxNS43NWMtLjE2LS45LS4yNy0xLjkxLS4zLTNoNS45N2MtLjA0LDEuMDktLjE0LDIuMS0uMywzaC01LjM2Wk0zLjA0LDEyLjc1aDQuNDhjLjAzLDEuMDUuMTMsMi4wNi4yOCwzaC0zLjk3Yy0uNDMtLjkzLS43LTEuOTQtLjc5LTNaTTE2LjQ4LDExLjI1Yy0uMDMtMS4wNS0uMTMtMi4wNi0uMjgtM2gzLjk3Yy40My45My43LDEuOTQuNzksM2gtNC40OFpNMTQuNjgsOC4yNWMuMTYuOS4yNywxLjkxLjMsM2gtNS45N2MuMDMtMS4wOS4xNC0yLjEuMy0zaDUuMzZaTTcuNTIsMTEuMjVIMy4wNGMuMDktMS4wNi4zNi0yLjA3Ljc5LTNoMy45N2MtLjE1Ljk0LS4yNSwxLjk1LS4yOCwzWk0xOS4zLDYuNzVoLTMuNGMtLjMzLTEuMzQtLjc5LTIuNDktMS4zMy0zLjM3LDEuOTMuNTcsMy41OCwxLjc4LDQuNzMsMy4zN1pNOS40NCwzLjM4Yy0uNTQuODgtMSwyLjAzLTEuMzMsMy4zN2gtMy40YzEuMTUtMS41OSwyLjgtMi44LDQuNzMtMy4zN1pNMTIsM2MuNjcsMCwxLjY4LDEuMzYsMi4zNCwzLjc1aC00LjY4Yy42Ni0yLjM5LDEuNjgtMy43NSwyLjM0LTMuNzVaTTEyLDEuNUM2LjIsMS41LDEuNSw2LjIsMS41LDEyczQuNywxMC41LDEwLjUsMTAuNSwxMC41LTQuNywxMC41LTEwLjVTMTcuOCwxLjUsMTIsMS41WiIvPgo8L3N2Zz4=');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
}

/* 右矢印アイコン（互換性のため translate ではなく transform を使用） */
.combo .arrow{
	position:absolute;
	right:10px;
	top:50%;
	width:var(--arrow-size);
	height:var(--arrow-size);
	background-color:currentColor;

	-webkit-mask:url("data:image/svg+xml;utf8,\
	<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'>\
	  <path d='M3 4 6 7 9 4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' />\
	</svg>") no-repeat center / contain;
	mask:url("data:image/svg+xml;utf8,\
	<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'>\
	  <path d='M3 4 6 7 9 4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' />\
	</svg>") no-repeat center / contain;

	transform:translateY(-50%) rotate(0deg);
	transform-origin:center;
	transition:transform .15s, background-color .2s;
}

.combo.open .arrow{
	transform:translateY(-50%) rotate(180deg);
	background-color:var(--purple);
}

/* ------------------------------
   ドロップダウン全体（白カード）
------------------------------ */
.combo__list{
	position:absolute;
	top:calc(100% + 2px);
	left:50%;
	transform:translateX(-50%);

	width:var(--list-width);
	max-width:calc(100vw - 16px);

	background:#fff;
	border-radius:4px;
	box-shadow:0 8px 24px rgba(0,0,0,.12);

	margin:0;
	padding:8px 4px 4px;

	list-style:none;
	z-index:1000;
}

/* 固定ヘッダ "Language" */
.combo__header{
	text-align:center;
	font-size:var(--font-size);
	color:var(--purple);
	padding:12px;
	background:#f6eaff;
	font-weight:600;
	pointer-events:none;
}

/* option（統合：重複定義を削除） */
.combo__list [role="option"]{
	position:relative;
	padding:10px 40px 10px 16px;
	text-align:left;

	border-radius:3px;
	font-size:var(--font-size);
	color:#000;

	cursor:pointer;
	outline:none;
}
.combo__list [role="option"]:hover{
	background:var(--hover-bg);
	color:var(--purple);
}
.combo__list [role="option"]:focus-visible{
	background:var(--hover-bg);
	color:var(--purple);
}

/* 選択中（紫＋チェック） */
.combo__list [role="option"][aria-selected="true"]{
	color:var(--purple);
}
.combo__list [role="option"][aria-selected="true"]::after{
	content:"";
	position:absolute;
	right:14px;
	top:50%;
	transform:translateY(-50%);

	width:var(--check-size);
	height:var(--check-size);

	background-color:currentColor;
	-webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8xIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgOSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTIyLjUsNS41NmwtMS4wNi0xLjA2LTEzLjE5LDEzLjE5LTUuNjktNS42OS0xLjA2LDEuMDYsNi43NSw2Ljc1LDE0LjI1LTE0LjI1WiIvPgo8L3N2Zz4=');
	mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8xIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNi4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgOSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTIyLjUsNS41NmwtMS4wNi0xLjA2LTEzLjE5LDEzLjE5LTUuNjktNS42OS0xLjA2LDEuMDYsNi43NSw2Ljc1LDE0LjI1LTE0LjI1WiIvPgo8L3N2Zz4=');
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
	-webkit-mask-size:contain;
	mask-size:contain;
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
}

@media (prefers-reduced-motion: reduce){
	.combo__btn,
	.combo .arrow{
		transition:none;
	}
}