/* ==========================================================================
   corop 共通ヘッダー / フッター（最低限・単体完結）
   --------------------------------------------------------------------------
   ● カート（OrderPage）でもマイページでもこれを読む。
   ● ボタン・マイページレイアウト等は pc-style.css 側（ここには入れない）。
   ● クラスは全て "corop-" プレフィックス。
   ========================================================================== */

:root {
	--corop-white:        #ffffff;
	--corop-ink:          #4c4948;
	--corop-olive:        #9d8a3c;
	--corop-olive-tint:   rgba(157, 138, 60, 0.2);
	--corop-orange:       #d79000;
	--corop-paper:        #f3f2f1;
	--corop-footer-bg:    #b1a261;
	--corop-font: "Avenir", "Avenir Next", "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}

/* ========================= w2 枠リセット ========================= */

/* fixed ヘッダー用：枠は高さを取らない */
#Header {
	display: block !important;
	margin: 0;
	padding: 0;
	height: 0;
	overflow: visible !important;
}

/* フッターは BodyFooterMain が #Foot 内に出力するため、枠を潰さない */
#Foot {
	width: 100%;
	clear: both;
	border-top: none;
	margin: 0;
	padding: 0;
	min-height: 0;
	height: auto;
	overflow: visible;
	line-height: normal;
}
#FootNav {
	display: none;
}

/* カート等：.my-wrapper が無いページだけ fixed 分の余白 */
body > form#form1 > #Wrap {
	padding-top: 89px;
	box-sizing: border-box;
}

/* ========================= ヘッダー ========================= */

.corop-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	z-index: 1100 !important;
	height: 89px !important;
	margin: 0;
	padding: 0;
	background: var(--corop-paper) !important;
	font-family: var(--corop-font);
	color: var(--corop-ink);
	opacity: 1 !important;
	box-sizing: border-box !important;
}
.corop-header__bar {
	background: var(--corop-white) !important;
}
.corop-header__inner {
	max-width: 1080px !important;
	margin-inline: auto !important;
	padding: 20px 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	box-sizing: border-box !important;
}

.corop-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.corop-header__logo img {
	width: 122px;
	height: auto;
	display: block;
}

.corop-header__nav {
	display: flex;
	align-items: center;
	gap: 40px;
}
.corop-header__navitem {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--corop-ink);
	text-decoration: none;
	font-size: 15px;
	letter-spacing: 0.1em;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}
.corop-header__navitem:hover {
	opacity: 0.6;
}
.corop-header__navicon {
	width: 38px;
	height: 31px;
	display: block;
	flex-shrink: 0;
}

.corop-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.corop-header__action {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	background: transparent;
	color: var(--corop-ink);
	text-decoration: none;
	font-size: 9px;
	letter-spacing: 0.08em;
	transition: opacity 0.2s ease;
}
.corop-header__action:hover {
	opacity: 0.75;
}
.corop-header__action svg,
.corop-header__action img {
	width: 46px;
	height: 46px;
	display: block;
}

.corop-header__burger { display: none; }
.corop-drawer { display: none; }

/* ========================= フッター ========================= */

.footer {
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1100;
}

/* 旧 footer{}（幅1240等）を打ち消す */
footer.corop-footer {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border-top: none;
}

.corop-footer {
	margin: 0;
	position: relative;
	z-index: 1100;
	background: var(--corop-footer-bg);
	color: var(--corop-paper);
	font-family: var(--corop-font);
}
.corop-footer__inner {
	max-width: 1080px;
	margin-inline: auto;
	padding: 24px 24px 12px;
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas:
		"main   social logo"
		"legal  copy   copy";
	column-gap: 28px;
	row-gap: 18px;
	align-items: start;
}

.corop-footer__main,
.corop-footer__legal {
	margin: 0;
	padding: 0;
	list-style: none;
}
.corop-footer__main {
	grid-area: main;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	max-width: 540px;
}
.corop-footer__legal {
	grid-area: legal;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 6px;
}
.corop-footer__main a,
.corop-footer__legal a {
	color: var(--corop-paper);
	text-decoration: none;
	letter-spacing: 0.1em;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}
.corop-footer__main a { font-size: 15px; }
.corop-footer__legal a { font-size: 11px; }
.corop-footer__main a:hover,
.corop-footer__legal a:hover { opacity: 0.7; }

.corop-footer__logo   { grid-area: logo;   justify-self: end; align-self: center; }
.corop-footer__social { grid-area: social; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 10px; }
.corop-footer__sns { display: inline-flex; align-items: center; transition: opacity 0.2s ease; }
.corop-footer__sns:hover { opacity: 0.7; }
.corop-footer__copy   { grid-area: copy;   justify-self: end; align-self: end; margin-top: 6px; }

.corop-footer__logo img { width: 96px; height: auto; display: block; }
.corop-footer__social img { height: 22px; width: auto; display: block; }
.corop-footer__copy {
	margin: 0;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: var(--corop-paper);
}

/* ========================= SP（〜768px） ========================= */
@media (max-width: 768px) {
	body > form#form1 > #Wrap {
		padding-top: 86px;
	}

	.corop-header {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		z-index: 1100 !important;
		height: 86px !important;
	}
	.corop-header__bar { position: relative; z-index: 30; }
	.corop-header__inner {
		max-width: 100%;
		width: 100%;
		padding: 0 16px !important;
		height: 86px;
		gap: 8px !important;
	}
	.corop-header__logo { flex-shrink: 0; }
	.corop-header__logo img { width: 108px; }

	.corop-header__nav { display: none; }

	.corop-header__actions { gap: 6px; margin-left: auto; }
	.corop-header__action {
		font-size: 8px;
		gap: 2px;
	}
	.corop-header__action svg,
	.corop-header__action img { width: 47px; height: 47px; }

	.corop-header__burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 42px;
		height: 42px;
		padding: 0 8px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	.corop-header__burger-bar {
		display: block;
		height: 2px;
		width: 100%;
		background: var(--corop-ink);
		border-radius: 2px;
		transition: transform 0.25s ease, opacity 0.2s ease;
	}
	.corop-header--open .corop-header__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.corop-header--open .corop-header__burger-bar:nth-child(2) { opacity: 0; }
	.corop-header--open .corop-header__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.corop-drawer {
		position: fixed;
		inset: 86px 0 auto 0;
		z-index: 20;
		background: var(--corop-white);
		border-top: 1px solid #eee;
		box-shadow: 0 12px 24px rgba(0,0,0,0.08);
	}
	.corop-header--open .corop-drawer {
		display: block;
		animation: corop-drawer-in 0.22s ease;
	}
	@keyframes corop-drawer-in {
		from { opacity: 0; transform: translateY(-8px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.corop-drawer__nav { display: flex; flex-direction: column; }
	.corop-drawer__item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 18px 24px;
		color: var(--corop-ink);
		text-decoration: none;
		font-size: 15px;
		letter-spacing: 0.08em;
		border-bottom: 1px solid #f0efec;
	}
	.corop-drawer__item img { width: 22px; height: 22px; }

	.corop-footer__inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 40px 32px 24px;
		gap: 24px;
	}
	.corop-footer__logo   { order: 1; align-self: flex-start; }
	.corop-footer__main   { order: 2; }
	.corop-footer__legal  { order: 3; }
	.corop-footer__social { order: 4; align-self: flex-start; gap: 11px; }
	.corop-footer__copy   { order: 5; align-self: flex-start; }

	.corop-footer__logo img { width: 150px; }

	.corop-footer__main {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(4, auto);
		grid-template-columns: 1fr 1fr;
		gap: 22px 24px;
		max-width: none;
		width: 100%;
	}
	.corop-footer__main a { font-size: 13px; }

	.corop-footer__legal {
		flex-direction: column;
		gap: 14px;
		margin-top: 0;
	}
	.corop-footer__legal a { font-size: 10px; }

	.corop-footer__social img { height: 24px; }
	.corop-footer__copy { font-size: 9px; margin-top: 4px; }
}