/* ==========================================================================
   corop マイページ 左メニュー  ―― WordPress とは独立（w2/aspx MyPage 用）
   --------------------------------------------------------------------------
   ● 単体完結（他CSSに依存しません）。クラスは全て "mp-" プレフィックス。
   ● w2(aspx) の MyPage 左カラムに、下記マークアップ + この CSS を入れて使う想定。
     画像パス（icons/*.svg）は w2 側の配置に合わせて置換してください。
   ● 色トークン（Figma）:
       ブラック #4C4948 / オレンジ #D79000 / 薄オリーブ #dcd7c4 / ホワイト #F3F2F1
   ========================================================================== */

.mp-menu {
	--mp-ink: #4c4948;
	--mp-orange: #d79000;
	--mp-bg: #dcd7c4;
	box-sizing: border-box;
	width: 339px;
	min-height: 100%;
	padding: 40px 24px 48px;
	background: var(--mp-bg);
	color: var(--mp-ink);
	font-family: "Avenir", "Avenir Next", "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
.mp-menu * { box-sizing: border-box; }

/* ===== 上部：丸アイコン3つ ===== */
.mp-menu__quick {
	display: flex;
	gap: 6px;
	margin-bottom: 44px;
}
.mp-menu__quick-item {
	flex: 1 1 0;          /* 3等幅カラム＝アイコン幅を均等に */
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;  /* 円とラベルを各カラム中央に */
	gap: 8px;
	text-decoration: none;
	color: var(--mp-ink);
	transition: opacity 0.2s ease;
}
.mp-menu__quick-item:hover { opacity: 0.75; }
.mp-menu__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--mp-orange);
}
.mp-menu__circle img { width: 28px; height: 28px; display: block; }
.mp-menu__quick-label { font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; text-align: center; }

/* ===== 見出し（注文情報 / 会員情報 / その他 / ログアウト）===== */
.mp-menu__group { margin-bottom: 34px; }
.mp-menu__heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.1em;
}
.mp-menu__hicon { display: block; flex-shrink: 0; }
.mp-menu__hicon--member { width: 45px; height: 34px; }
.mp-menu__hicon--logout { width: 33px; height: 25px; }

/* 合成アイコン（ベース＋パーツを重ねる） */
.mp-ico { position: relative; display: block; flex-shrink: 0; }
.mp-ico img { position: absolute; display: block; }
.mp-ico .base { inset: 0; width: 100%; height: 100%; }
.mp-ico--order { width: 33px; height: 35px; }
.mp-ico--order .p1 { top: 16.27%; left: 25.4%; right: 33.22%; bottom: 34.91%; width: auto; }
.mp-ico--order .p2 { top: 16.27%; left: 71.83%; right: 13.94%; bottom: 34.91%; width: auto; }
.mp-ico--other { width: 29px; height: 29px; }
.mp-ico--other .p1 { top: 45.29%; left: 20.3%; right: 20.3%; bottom: 45.29%; width: auto; }

/* ===== リンク（・○○○）===== */
.mp-menu__links {
	list-style: none;
	margin: 0;
	padding: 0 0 0 4px;
}
.mp-menu__links li { margin-top: 10px; }
.mp-menu__links a {
	color: var(--mp-ink);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}
.mp-menu__links a::before { content: "・"; text-decoration: none; }
.mp-menu__links a:hover { opacity: 0.65; }

/* ログアウト */
.mp-menu__logout {
	margin: 0;
	padding-top: 4px;
}
.mp-menu__logout a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--mp-ink);
	text-decoration: none;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.1em;
	transition: opacity 0.2s ease;
}
.mp-menu__logout a:hover { opacity: 0.7; }

/* ===== レスポンシブ（左メニューが狭い場合は全幅に）===== */
@media (max-width: 360px) {
	.mp-menu { width: 100%; padding: 32px 20px 40px; }
}