/* ==========================================================================
   corop 共通ヘッダー / フッター  ―― w2システム(aspx EC)にも流用する前提
   --------------------------------------------------------------------------
   ● このファイルは単体で完結しています（他CSSに依存しません）。
   ● w2 へ移植するときは
       1. この header-footer.css を asset/css/ に置く
       2. header.php / footer.php の <header class="corop-header">〜</header>
          と <footer class="corop-footer">〜</footer> のマークアップをコピー
       3. 画像パス（url(...) と <img src>）を w2 側の配置に合わせて置換
     の3点だけで移植できます。
   ● クラスは全て "corop-" プレフィックス。既存サイトのCSSと衝突しません。
   ● 色トークン（Figma変数）はこのファイル内の :root で定義（下記コメント参照）。
   ========================================================================== */

: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; /* フッター地 */
	/* フォント：Latinは Avenir、日本語はゴシックにフォールバック */
	--corop-font: "Avenir", "Avenir Next", "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}

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

.corop-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--corop-paper);
	font-family: var(--corop-font);
	color: var(--corop-ink);
}
.corop-header__bar {
	background: var(--corop-white);
}
.corop-header__inner {
	max-width: 1080px;
	margin-inline: auto;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* ロゴ */
.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;
}

/* 右側アクション（ログイン / カート）
   ※アイコンSVGが角丸背景を内包しているため、ボタン側に背景は付けない */
.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-footer {
	background: var(--corop-footer-bg);
	color: var(--corop-paper);
	font-family: var(--corop-font);
}
/* PC: 左にリンク群、右にロゴ／SNS／コピーライト（grid配置） */
.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__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__sns { display: inline-flex; align-items: center; transition: opacity 0.2s ease; }
.corop-footer__sns:hover { opacity: 0.7; }
.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);
}

/* ハンバーガー / ドロワー（既定＝PCでは非表示） */
.corop-header__burger { display: none; }
.corop-drawer { display: none; }

/* ========================= SP（〜768px）：ハンバーガー式 ========================= */
@media (max-width: 768px) {
	/* SPヘッダーを上部固定 */
	.corop-header { position: sticky; top: 0; z-index: 40; }
	.corop-header__bar { position: relative; z-index: 30; }
	.corop-header__inner {
		max-width: 100%;
		width: 100%;
		padding: 0 16px;
		height: 86px;
		gap: 8px;
	}
	.corop-header__logo { flex-shrink: 0; }
	.corop-header__logo img { width: 108px; }

	/* PC用インラインナビはSPでは隠す（ドロワーに移す） */
	.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); }

	/* ドロワー（Figma node 260:12734／全画面オリーブ・既定は閉じる） */
	.corop-drawer {
		position: fixed;
		inset: 0;
		z-index: 60;
		padding: 0 0 40px;
		background: var(--corop-footer-bg, #b1a261);
		color: var(--corop-white);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.corop-header--open .corop-drawer {
		display: block;
		animation: corop-drawer-in 0.22s ease;
	}
	@keyframes corop-drawer-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* ドロワー上部（ロゴ・ログイン/カート・閉じる）
	   ※ヘッダーバーと寸法を完全に揃える（高さ86px / 左右16px / ロゴ108px /
	     ボタン47px / gap 6px）。ズレるとメニュー開閉で要素が動いて見える */
	.corop-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		height: 86px;
		padding: 0 16px;
	}
	.corop-drawer__logo {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
	}
	.corop-drawer__logo img { width: 108px; height: auto; display: block; }
	.corop-drawer__actions {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-left: auto;
	}
	/* ログイン/カートのボタン地はSVG内で「オリーブ20%の半透明」。
	   白いヘッダーの上では淡いベージュに見えるが、オリーブ地のドロワーでは
	   オリーブ＋オリーブで沈んでしまうため、白を敷いてヘッダーと同じ見た目に揃える */
	.corop-drawer__actions .corop-header__action {
		background: var(--corop-white);
		border-radius: 8px;
		overflow: hidden;
	}
	/* ハンバーガー（42×42・padding 0 8px）と同じ当たり判定に揃える */
	.corop-drawer__close {
		position: relative;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}
	.corop-drawer__close span {
		position: absolute;
		top: 50%;
		left: 8px;
		width: 26px;
		height: 2px;
		border-radius: 2px;
		background: var(--corop-white);
	}
	.corop-drawer__close span:nth-child(1) { transform: rotate(45deg); }
	.corop-drawer__close span:nth-child(2) { transform: rotate(-45deg); }

	/* メインメニュー（英語＋日本語） */
	.corop-drawer__nav {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 26px;
		padding: 0 32px;
	}
	.corop-drawer__item {
		display: flex;
		align-items: baseline;
		gap: 16px;
		padding: 0;
		border: 0;
		color: var(--corop-white);
		text-decoration: none;
	}
	.corop-drawer__en {
		font-size: 30px;
		font-weight: 800;
		letter-spacing: 0.06em;
		line-height: 1.3;
	}
	.corop-drawer__ja {
		font-size: 14px;
		letter-spacing: 0.1em;
	}

	/* サブメニュー・法務リンク */
	.corop-drawer__sub,
	.corop-drawer__legal {
		display: flex;
		flex-direction: column;
		padding: 0 32px;
	}
	.corop-drawer__sub {
		gap: 18px;
		margin-top: 34px;
	}
	.corop-drawer__sub a {
		color: var(--corop-white);
		text-decoration: none;
		font-size: 14px;
		letter-spacing: 0.08em;
	}
	.corop-drawer__legal {
		gap: 10px;
		margin-top: 30px;
	}
	.corop-drawer__legal a {
		color: var(--corop-white);
		text-decoration: none;
		font-size: 12px;
		letter-spacing: 0.06em;
		opacity: 0.9;
	}
	.corop-drawer__social {
		display: flex;
		align-items: center;
		gap: 21px;
		margin-top: 36px;
		padding: 0 32px;
	}
	.corop-drawer__sns { display: inline-flex; align-items: center; }
	.corop-drawer__social img { height: 46px; width: auto; display: block; }

	/* フッターSP：ロゴ→2カラムリンク→法務→SNS→コピー の縦積み（Figma 208-6314） */
	.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; }
	.corop-footer__copy   { order: 5; align-self: flex-start; }

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

	/* メインリンクは2カラム（列方向に流す：左列4件／右列3件） */
	.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 { gap: 11px; }
	.corop-footer__social img { height: 24px; }
	.corop-footer__copy { font-size: 9px; margin-top: 4px; }
}