@charset "utf-8";
/* ============================================================
   GOLD 2026 AUTUMN & WINTER / LOOK
   26AW リニューアル版スタイルシート
   main.css + menu.css + opening.css + animate.min.css を統合し、
   このページで実際に使う指定だけを残したもの。
   ============================================================ */

/* ------------------------------------------------------------
   1. リセット / ベース
   ------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	overflow-y: scroll;
	font-size: 62.5%;
}

body {
	margin: 0;
	background: #fff;
	color: #191919;
	/* 26SSと同じシステムフォント。Roboto はクレジットと店舗リンクのみに使う */
	font-family: -apple-system, "system-ui", "Helvetica Neue", "Segoe UI", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.5;
}

h1,
h2,
h3,
p,
figure,
ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	color: inherit;
	text-decoration: none;
}

/* ページ全体のフェードイン（旧 jquery.fademover.js の置き換え）
   JS に依存しないので、スクリプトが落ちても白画面にならない */
body {
	animation: pageIn .8s ease both;
}

@keyframes pageIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#wrapper {
	width: 100%;
	padding: 6px;
	text-align: center;
}

/* ------------------------------------------------------------
   2. ヘッダー / ロゴ
   ------------------------------------------------------------ */
.Header {
	width: 100%;
	position: absolute;
	right: 0;
	padding: 0 30px;
	z-index: 1;
	display: flex;
	align-items: center;
}

.Header__logo a {
	display: block;
	background: url(../images/brandLogo.svg) no-repeat 50%;
	background-size: contain;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.Header__season {
	margin: 10px 0 50px;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
}

.check {
	display: none;
}

.menu-btn,
.close-menu {
	display: none;
}

/* ------------------------------------------------------------
   3. ナビゲーション（common/leftnav.html を読み込む領域）
   ホバー挙動は全リンク共通に統一
   ------------------------------------------------------------ */
.accordion-container {
	position: relative;
	width: 100%;
	margin: 0;
	outline: 0;
}

.drawer-menu li {
	text-align: left;
}

.accordion-title,
.accordion-title2 {
	display: block;
	position: relative;
	margin: 0;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 3.6em;
	text-align: left;
	color: #191919;
	cursor: pointer;
}

.accordion-title2 a,
.accordion-content .child li a {
	display: block;
	color: inherit;
}

.accordion-content .child li a {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.5;
	padding: 4px 0;
	color: #222;
}

/* ナビのホバー：見出し・リンクすべて同じ挙動 */
.accordion-title,
.accordion-title2 a,
.accordion-content .child li a {
	transition: color .25s ease;
}

.accordion-title:hover,
.accordion-title2 a:hover,
.accordion-content .child li a:hover {
	color: #9a9a9a;
}

.accordion-title:hover::after {
	border-color: #9a9a9a;
}

/* アコーディオンの矢印 */
.accordion-title::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 38%;
	display: block;
	width: 6px;
	height: 6px;
	border-top: solid 1px currentColor;
	border-right: solid 1px currentColor;
	transform: rotate(135deg);
	transition: transform .2s ease-in-out, top .2s ease-in-out, border-color .25s ease;
}

.accordion-title.open::after {
	top: 45%;
	transform: rotate(-45deg);
}

.accordion-content {
	display: none;
	padding: 0 0 1.6em 1em;
}

/* ------------------------------------------------------------
   4. LOOK 一覧
   ------------------------------------------------------------ */
.LookSeasonTitle {
	display: none;
}

.look_box {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.Content {
	position: relative;
	/* 26SSと同じ比率指定：写真エリア幅の0.25%が四辺の余白＝写真同士の隙間は0.5% */
	width: 49.5%;
	margin: 0.25%;
}

/* 横位置の写真は2カラムぶち抜きで見せる */
.Content.is-wide {
	width: 99.5%;
}

.Content figure {
	position: relative;
	overflow: hidden;
}

.look_img {
	display: block;
	width: 100%;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 1.1s ease, transform 1.1s ease;
}

.Content.is-inview .look_img {
	opacity: 1;
	transform: none;
}

/* 画像上の暗転 */
.Content::before {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	background: rgba(0, 0, 0, 0);
	transition: background-color .35s ease;
	pointer-events: none;
	z-index: 1;
}

.Content:hover::before,
.Content.is-open::before {
	background: rgba(0, 0, 0, 0.42);
}

/* ------------------------------------------------------------
   5. クレジット
   ------------------------------------------------------------ */
.Content__child {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 48px 14px 14px;
	opacity: 0;
	color: #fff;
	text-align: left;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	transition: opacity .35s ease;
	z-index: 2;
}

.Content:hover .Content__child,
.Content:focus-within .Content__child,
.Content.is-open .Content__child {
	opacity: 1;
	pointer-events: auto;
}

.Content__child li,
.Content__child a {
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0.02em;
	text-align: left;
	color: #fff;
}

/* クレジット同士の上下間隔 */
.Content__child li {
	margin: 0 0 20px;
}

.Content__child li:last-child {
	margin-bottom: 0;
}

.Styling__catName {
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.55;
}

/* カテゴリ（OUTER / TOPS …）は商品名と差をつけつつ、太くしすぎない */
.Styling__credit {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
}

.Content__child a {
	margin: 0;
}

.Content__child a:hover {
	opacity: .7;
	transition: all .8s;
}

.Content__child a::after {
	content: "VIEW MORE";
	display: block;
	margin-top: 9px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* リンクが無いもの（商品ページ未公開など）は半透明で非リンクと分かるように */
.Content__child li.is-unlinked {
	opacity: 0.55;
}

/* ------------------------------------------------------------
   6. フッター / TOPへ戻る
   ------------------------------------------------------------ */
.footer {
	padding: 50px 0 30px;
	font-size: 13px;
	text-align: center;
}

#page_top {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 40;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

#page_top.is-visible {
	opacity: 1;
	visibility: visible;
}

.topBtn {
	display: block;
	width: 48px;
	transition: opacity .3s ease;
}

.topBtn:hover {
	opacity: .6;
}

/* ------------------------------------------------------------
   7. PC（961px 以上）：左固定ナビ + 2カラム
   ------------------------------------------------------------ */
@media screen and (min-width: 961px) {
	:root {
		--nav-w: 250px;
	}

	.Header__logo {
		position: fixed;
		top: 56px;
		left: 60px;
		z-index: 2;
	}

	.Header__logo a {
		width: 124px;
		height: 54px;
		background-position: left center;
	}

	.drawer-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: var(--nav-w);
		height: 100vh;
		padding: 160px 0 0 60px;
		z-index: 1;
	}

	.MainCont {
		margin-left: var(--nav-w);
		padding: 0;
	}

	/* 大型ディスプレイでも写真が間延びしないよう上限だけ設け、右端に揃える */
	.look_box {
		max-width: 1320px;
		margin: 0 0 0 auto;
	}
}

/* ------------------------------------------------------------
   8. タブレット / SP（960px 以下）：上部バー + 右ドロワー + 1カラム
   ------------------------------------------------------------ */
@media screen and (max-width: 960px) {
	:root {
		--drawer-w: min(320px, 86vw);
	}

	.Header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 78px;
		padding: 0 14px;
		background: rgba(255, 255, 255, 0.92);
		-webkit-backdrop-filter: saturate(180%) blur(8px);
		backdrop-filter: saturate(180%) blur(8px);
		z-index: 50;
	}

	.Header__logo {
		position: fixed;
		top: 18px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 61;
	}

	.Header__logo a {
		width: 108px;
		height: 44px;
		background-position: center center;
	}

	.Header__season {
		display: none;
	}

	.menu-btn {
		position: fixed;
		top: 26px;
		right: 14px;
		display: block;
		width: 24px;
		height: 24px;
		cursor: pointer;
		z-index: 63;
	}

	.bar {
		position: absolute;
		left: 50%;
		width: 20px;
		height: 1px;
		background: #111;
		transform: translateX(-50%);
		transition: transform .3s ease, opacity .3s ease, top .3s ease;
	}

	.bar.top {
		top: 4px;
	}

	.bar.middle {
		top: 11px;
	}

	.bar.bottom {
		top: 18px;
	}

	.drawer-menu {
		position: fixed;
		top: 0;
		right: 0;
		width: var(--drawer-w);
		height: 100vh;
		padding: 92px 18px 20px;
		background: #fff;
		box-shadow: -4px 0 18px rgba(0, 0, 0, 0.14);
		transform: translateX(110%);
		transition: transform .3s ease;
		z-index: 58;
	}

	.check:checked~.drawer-menu {
		transform: translateX(0);
	}

	.close-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		display: block;
		background: rgba(0, 0, 0, 0.28);
		visibility: hidden;
		opacity: 0;
		transition: opacity .2s ease, visibility .2s ease;
		z-index: 57;
	}

	.check:checked~.close-menu {
		visibility: visible;
		opacity: 1;
	}

	.check:checked+.menu-btn .top {
		top: 11px;
		transform: translateX(-50%) rotate(45deg);
	}

	.check:checked+.menu-btn .middle {
		opacity: 0;
	}

	.check:checked+.menu-btn .bottom {
		top: 11px;
		transform: translateX(-50%) rotate(-45deg);
	}

	#look_all {
		padding-top: 96px;
	}

	.LookSeasonTitle {
		display: block;
		margin-bottom: 16px;
		font-size: 22px;
		font-weight: 400;
		letter-spacing: 0.14em;
		text-align: center;
	}

	.MainCont {
		padding: 0;
	}
}

@media screen and (max-width: 640px) {
	.Content,
	.Content.is-wide {
		width: 99.5%;
	}

	#look_all {
		padding-top: 88px;
	}

	.LookSeasonTitle {
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.03em;
	}

	.Content__child {
		padding: 40px 10px 10px;
	}

	.Content__child li,
	.Content__child a {
		font-size: 12px;
		line-height: 1.6;
	}

	.Styling__catName {
		font-size: 11px;
	}

	.Content__child li {
		margin-bottom: 15px;
	}

	.Content__child a::after {
		margin-top: 7px;
		font-size: 11px;
	}

	.footer {
		font-size: 10px;
	}

	#page_top {
		right: 12px;
		bottom: 12px;
	}

	.topBtn {
		width: 40px;
	}
}

/* ------------------------------------------------------------
   9. モーション設定を控えめにしているユーザー向け
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

	body {
		animation: none;
	}

	.look_img,
	.Content__child,
	.Content::before {
		transition: none !important;
	}

	.look_img {
		opacity: 1;
		transform: none;
	}
}