@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Italiana&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* =========================================================
   CUSTOM PROPERTY（シャインアニメーション用）
   ========================================================= */
@property --shine-x {
	syntax: "<percentage>";
	inherits: false;
	initial-value: -180%;
}

@keyframes ctaShine {
	from { --shine-x: -180%; }
	to   { --shine-x: 360%; }
}

@keyframes ctaGlow {
	from { box-shadow: inset 0 0 24px #2d7c82, 0 4px 12px rgba(0, 0, 0, 0.25); }
	to   { box-shadow: inset 0 0 34px #54c7d0, 0 0 22px rgb(45 124 130 / 42%), 0 12px 30px rgba(0, 0, 0, 0.5); }
}

/* =========================================================
   RESET / BASE
   ========================================================= */
/* .forcms_block img, */
.forcms_block video,
.forcms_block iframe {max-width: 100%;}
.forcms_block ul,
.forcms_block li {list-style: none;}

.breadcrumb{display: none;}
.sp-only{display: none;}

/* スムーススクロール（ページ内リンク） */
html {scroll-behavior: smooth;}
.page_jennie {
	font-family: "Inter", sans-serif;
	color: #1a1a1a;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	width: 100%;
}

.page_jennie {
	width: 100%;
	overflow: hidden;
}

.l-section {width: 100%;}

/* =========================================================
   intro
   ========================================================= */

.sec-intro {
	font-family: "Noto Sans CJK JP" , sans-serif;
	text-align: center;
	color: #fff;
	background: linear-gradient(114.03deg, #000000 9.87%, #2B2020 45.93%, #1E275B 83.79%);
}

/* フォント */
.sec-product-lead h3,
.sec-product-lead .lead-title,
.sec-product-lead .lead-text,
.sec-product-lead .lead-text-s{color: #fff;}

.goods-menu a {
	background: #F3F3F308;
	opacity: 1;
	gap: 42px;
	padding-top: 40px;
	padding-right: 60px;
	padding-bottom: 40px;
	padding-left: 60px;
	border-radius: 30px;
}

/* =========================================================
   goods list
   ========================================================= */
.sec-goods-sunglasses .sec-product-content{background: linear-gradient(143.23deg, #89A4A5 0.01%, #D1D7D0 56.26%, #89A1A1 100.01%);}
.sec-goods-optical .sec-product-content{background: linear-gradient(143.23deg, #7691A4 0.01%, #D6EBEE 56.26%, #9AC6C6 100.01%);}

.sec-goods-sunglasses .sec-product-list li a{background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);}
.sec-goods-optical .sec-product-list li a{background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);}

.sec-goods-sunglasses .sec-product-lead dd::after { background: #9CB1AF; }
.sec-goods-optical .sec-product-lead dd::after { background: #AFCAD8; }

/* =========================================================
   SP ONLY (768px以下) — MV動画の出し分け
   ========================================================= */
@media screen and (max-width: 768px) {

	.sec-goods-sunglasses .sec-product-lead dd::after { background: rgba(158, 177, 175, .5); }
	.sec-goods-optical .sec-product-lead dd::after { background: #b2cad9;}

	/* ---- MV動画 出し分け ---- */
	.mv-video-pc { display: none; }
	.mv-video-sp { display: block; }
	.sec-mv { width: 100%; background: #000; }
	.sec-mv .mv-video { width: 100%; height: auto; }

	/* ---- SP専用要素を表示 ---- */
	.sp-only { display: block; }
	.pc-only { display: none; }

	/* ---- スクロールフェード（PCと同様。JSが .is-show を付与） ---- */
	.js-fade,
	.js-fade-left,
	.js-fade-right,
	.js-fade-up {
		opacity: 0;
		transition: opacity 1s ease, transform 1s ease;
		will-change: opacity, transform;
	}
	.js-fade-left  { transform: translateX(-40px); }
	.js-fade-right { transform: translateX(40px); }
	.js-fade-up    { transform: translateY(40px); }
	.js-fade.is-show,
	.js-fade-left.is-show,
	.js-fade-right.is-show,
	.js-fade-up.is-show {
		opacity: 1;
		transform: translate(0, 0);
	}

	/* 指定要素はSPのみ「下→上」フェードに変更（下から上がってくる） */
	.sec-intro h2,
	.sec-intro .u-text,
	.sec-product-lead dt,
	.sec-product-lead dd {
		transform: translateY(40px);
	}
	.sec-intro h2.is-show,
	.sec-intro .u-text.is-show,
	.sec-product-lead dt.is-show,
	.sec-product-lead dd.is-show {
		transform: translateY(0);
	}

	/* =====================================================
	   INTRO
	   ===================================================== */
	.sec-intro { padding: 48px 24px 56px; }
	.sec-intro h2 {
		font-size: 32px;
		font-weight: 900;
		line-height: 50px;
		margin-bottom: 40px;
	}
	.sec-intro .u-text {
		font-size: 16px;
		font-weight: 400;
		line-height: 28px;
		color: #fff;
		margin-bottom: 32px;
	}
	.sec-intro .u-s-text {
	    font-size: 11px;
   	 	font-weight: 400;
		color: #fff;
    	margin-bottom: 35px;
	}	
	.goods-menu {
		display: flex;
		justify-content: center;
		gap: 8px;
	}
	.goods-menu a {
		/* baseの padding:40/60・radius:30 を上書き */
		flex: 1 1 0;
		min-width: 0;
		gap: 0;
		padding: 22px 14px;
		border-radius: 16px;
		text-align: center;
	}
	.goods-menu-item img { width: 100%; height: auto; }
	.goods-menu-label {
		margin-top: 12px;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.1em;
		color: #fff;
	}
	.goods-menu-item::after {
		content: "";
		display: block;
		width: 48px;
		height: 20px;
		margin: 25px auto 0;
		background: url(../img/arrow.svg) no-repeat center center;
		background-size: contain;
	}

	/* =====================================================
	   GOODS MV（画像内に文言が入っているため画像のみ）
	   ===================================================== */
	.sec-goods-mv { width: 100%; }
	.sec-goods-mv img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* =====================================================
	   GOODS リード（見出し＋リード文＋保証＋動画）
	   ===================================================== */
	.sec-product-content { padding-bottom: 56px; }
	.sec-product-lead { padding: 40px 24px 40px; }
	.sec-product-lead dl { display: block; }
	.sec-product-lead h3 {
		font-size: 32px;
		font-weight: 900;
		margin-bottom: 18px;
		color: #fff;
	}
	.sec-product-lead .lead-body {
		padding-left: 16px;
		border-left: 1px solid rgba(255, 255, 255, 0.7);
		margin-bottom: 22px;
		padding-bottom: 12px;
	}
	.sec-product-lead .lead-title {
		font-size: 18px;
		font-weight: 700;
		line-height: 24px;
		margin-bottom: 12px;
	}
	.sec-product-lead .lead-text {
		font-size: 13px;
		font-weight: 400;
		line-height: 25px;
	}

	.sec-product-lead .lead-text-s {	
		font-size: 11px;
		font-weight: 400;
		line-height: 1.8;
		color: #fff;
		margin-top: 8px;
	}	

	/* 保証について */
	.lead-warranty {
		margin-bottom: 24px;
		padding: 8px 16px 12px;
		background: rgba(255, 255, 255, 0.10);
	}
	.warranty-title {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		margin-bottom: 12px;
		padding-bottom: 4px;
		font-size: 13px;
		font-weight: 400;
		color: #fff;
		border-bottom: 1px solid rgba(255, 255, 255, 0.20);
	}

	.warranty-list { list-style: none; }
	.warranty-list li {
		position: relative;
		padding-left: 14px;
		font-size: 13px;
		line-height: 18px;
		color: #fff;
	}
	.warranty-list li + li { margin-top: 6px; }
	.warranty-list li::before {
		content: "•";
		position: absolute;
		left: 0;
	}

	/* 動画 */
	.sec-product-lead dd {
		position: relative;
		z-index: 0;
	}
	.lead-movie {
		position: relative;
		z-index: 1;
		width: 100%;
		padding: 10px;
		background: #000;
		overflow: hidden;
	}
	.lead-movie iframe {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
		border-radius: 4px;
	}

	.sec-product-lead dd::after {
		content: "";
		position: absolute;
		z-index: -1;
		left: -16px;
		bottom: -16px;
		width: 100%;
		height: 100%;
	}

	/* =====================================================
	   商品リスト（2カラム）
	   ===================================================== */
	.sec-product-list { padding: 0 24px; }
	.sec-product-list ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 20px;
	}
	.sec-product-list li { width: calc((100% - 20px) / 2); }
	.sec-product-list li a {
		display: block;
		height: 100%;
		padding: 16px 14px 18px;
		border-radius: 10px;
	}
	.sec-product-list figure { margin-bottom: 12px; }
	.sec-product-list figure img { width: 100%; height: auto; }
	.product-name {
		font-size: 15px;
		font-weight: 700;
		line-height: 1.4;
		color: #000;
		margin-bottom: 6px;
	}
	.product-sub-name {
		font-size: 11px;
		font-weight: 400;
		color: #000;
		margin-bottom: 8px;
	}
	.product-price {
		font-size: 14px;
		font-weight: 700;
		color: #1a1a1a;
	}

	/* =====================================================
	   ボタン（全幅ピル）
	   ===================================================== */
	.sec-product-btn {
		margin-top: 40px;
		padding: 0 24px;
		text-align: center;
	}
	.sec-store-btn {
		margin-top: 14px;
		padding: 0 24px;
		text-align: center;
	}
	.c-btn {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 56px;
		padding: 8px 24px;
		border-radius: 9999px;
		background: linear-gradient(90deg, #000000 0%, #104144 100%);
		box-shadow: inset 0 0 20px #2d7c82, 0 4px 12px rgba(0, 0, 0, 0.25);
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.4;
		text-align: center;
		overflow: hidden;
		/* PCと同じ発光パルス（hoverなし） */
		animation: ctaGlow 1.35s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
		animation-play-state: paused;
	}
	.forcms_block .c-btn { color: #fff; }
	.c-btn.is-show { animation-play-state: running; }
	/* PCと同じシャイン（光のスジ） */
	.c-btn::before {
		position: absolute;
		z-index: 1;
		top: -45%;
		bottom: -45%;
		left: -18%;
		width: 26%;
		content: "";
		background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 42%) 50%, transparent 100%);
		filter: blur(1px);
		pointer-events: none;
		transform: translateX(var(--shine-x)) rotate(18deg);
		animation: ctaShine 1.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
		animation-play-state: paused;
	}
	.c-btn.is-show::before { animation-play-state: running; }
}

/* =========================================================
   PC ONLY (769px以上)
   ========================================================= */
@media screen and (min-width: 769px) {
	body .forcms_block{margin: 0!important;}

	/* MV：PC動画を表示／SP動画を非表示 */
	.mv-video-pc { display: block; }
	.mv-video-sp { display: none; }

	.sec-box {
		width: 100%;
		max-width: 1440px;
		margin: 0 auto;
		padding: 0 40px;
	}

	/* ---------- 共通フェードアニメーション ---------- */
	.js-fade,
	.js-fade-left,
	.js-fade-right,
	.js-fade-up {
		opacity: 0;
		transition: opacity 1s ease, transform 1s ease;
		will-change: opacity, transform;
	}
	.js-fade-left  { transform: translateX(-60px); }
	.js-fade-right { transform: translateX(60px); }
	.js-fade-up    { transform: translateY(40px); }

	.js-fade.is-show,
	.js-fade-left.is-show,
	.js-fade-right.is-show,
	.js-fade-up.is-show {
		opacity: 1;
		transform: translate(0, 0);
	}

	/* イントロの見出し・本文は「下→上」フェード（下から上がってくる） */
	.sec-intro h2,
	.sec-intro .u-text {
		transform: translateY(40px);
	}
	.sec-intro h2.is-show,
	.sec-intro .u-text.is-show {
		transform: translateY(0);
	}

	/* =====================================================
	   MAIN VISUAL
	   ===================================================== */
	.sec-mv {
		position: relative;
		background: #000;
	}
	.sec-mv .sec-box {
		max-width: 100%;
		padding: 0;
		display: flex;
		justify-content: center;
		overflow: hidden;
	}
	.mv-video {
		/* 初期は max-width:1534px のバナー（中央配置） */
		/* スクロール位置に応じて JS が max-width / border-radius を連続更新（カクつかない） */
		width: 100%;
		/* 初期はブラウザ幅の80%（JSがスクロールで100%まで拡大） */
		max-width: 80%;
		height: auto;
		margin: 0 auto;
		will-change: max-width;
	}
	.mv-video-sp { display: none; }
	.mv-video-pc { display: block; }

	/* =====================================================
	   INTRO
	   ===================================================== */
	.sec-intro {padding: 100px 0 120px;}
	.intro-logo {margin-bottom: 40px;}

	.intro-logo img {
		margin: 0 auto;
		width: 220px;
		height: auto;
	}

	.sec-intro h2 {
		font-size: 48px;
		font-weight: 900;
		letter-spacing: 0.04em;
		line-height: 1.6;
		margin-bottom: 40px;
	}

	.sec-intro .u-text {
		font-size: 20px;
		font-weight: 400;
		line-height: 34px;
		margin-bottom: 40px;
	}

	.sec-intro .u-s-text {
		font-size: 13px;
		font-weight: 400;
		margin-bottom: 40px;
	}	

	.goods-menu {
		display: flex;
		justify-content: center;
		gap: 60px;
	}

	.goods-menu-item {
		display: block;
		width: 532px;
		transition: transform 0.4s ease, opacity 0.4s ease;
	}

	.goods-menu-item img {
		width: 100%;
		height: auto;
	}

	.goods-menu-label {
		margin-top: 42px;
		font-family: "Inter", sans-serif;
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 0.14em;
		color: #fff;
	}

	.goods-menu-item:hover {background: rgb(243 243 243 / 7%);}

	/* goods-menu-item の下に矢印画像 */
	.goods-menu-item::after {
		content: "";
		display: block;
		width: 59px;
		height: 14px;
		margin: 18px auto 0;
		background: url(../img/arrow.svg) no-repeat center center;
		background-size: contain;
		transition: transform 0.4s ease;
	}

	/* =====================================================
	   GOODS 共通
	   ===================================================== */

	/* ---------- グッズ メインビジュアル ---------- */
	.sec-goods-sunglasses .sec-product-content,
	.sec-goods-optical  .sec-product-content{padding-bottom: 100px;}

	.sec-goods-mv {
		position: relative;
		width: 100%;
		background: linear-gradient(180deg, #c7cfd2 0%, #aeb8bd 100%);
		/* スクロールで画像を拡大しても枠からはみ出さないようにクリップ */
		overflow: hidden;
	}
	.sec-goods-mv picture {
		display: block;
		width: 100%;
	}
	.sec-goods-mv img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
		/* スクロール連動ズーム（JSが transform を更新） */
		transform-origin: center center;
		will-change: transform;
	}
	.sec-goods-mv-text {
		position: absolute;
		top: 50%;
		right: 12%;
		transform: translateY(-50%);
		color: #1a1a1a;
		text-align: left;
	}
	.goods-mv-logo img {
		width: 200px;
		height: auto;
		margin-bottom: 18px;
	}
	.goods-mv-catch {
		font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
		font-size: 30px;
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: 0.03em;
		margin-bottom: 16px;
	}
	.goods-mv-note {
		font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
		font-size: 14px;
		font-weight: 500;
		color: #3a3a3a;
	}

	/* ---------- リード（見出し ＋ 動画） ---------- */
	.sec-product-lead {
		width: 100%;
		max-width: 1440px;
		margin: 0 auto;
		padding: 120px 40px 80px;
	}
	.sec-product-lead dl {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 60px;
	}

	.sec-product-lead dt {flex: 1;}
	.sec-product-lead h3 {
		font-size: 56px;
		font-weight: 700;
		margin-bottom: 43px;
		line-height: 1;
	}
	.sec-product-lead .lead-title {
		font-size: 24px;
		font-weight: 700;
		line-height: 36px;
		margin-bottom: 38px;
	}

	.sec-product-lead .lead-body {
		padding-top: 20px;
		padding-left: 32px;
		padding-bottom: 20px;
		border-left: 1px solid rgba(255, 255, 255, 0.7);
	}

	.sec-product-lead .lead-text {
		font-size: 16px;
		line-height: 2;
	}

	.sec-product-lead .lead-text-s {
		font-size: 13px;
		font-weight: 400;
		line-height: 1.8;
		margin-top: 16px;
	}	

	/* 保証について（デザイン参考） */
	.lead-warranty {
		margin-top: 28px;
		padding: 8px 16px 12px;
		background: rgba(255, 255, 255, 0.06);
	}
	.warranty-title {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin-bottom: 16px;
		padding-bottom: 5px;
		font-size: 13px;
		font-weight: 400;
		color: #fff;
		border-bottom: 1px solid rgba(255, 255, 255, 0.20);
	}
	.warranty-list { list-style: none; }
	.warranty-list li {
		position: relative;
		padding-left: 16px;
		font-size: 13px;
		font-weight: 400;
		line-height: 18px;
		color: #fff;
	}
	.warranty-list li + li { margin-top: 4px; }
	.warranty-list li::before {
		content: "•";
		position: absolute;
		left: 0;
	}

	.sec-product-lead dd {
		position: relative;
		z-index: 0;
		flex: 0 1 750px;
		min-width: 0;
	}

	.sec-product-lead dd::after {
		content: "";
		position: absolute;
		z-index: -1;
		left: -40px;
		bottom: -40px;
		width: 100%;
		height: 100%;
	}

	.sec-goods-sunglasses .sec-product-lead dd::after{background: #9CB1AF;}
	.sec-goods-optical .sec-product-lead dd::after{background: #AFCAD8;}

	.lead-movie {
		position: relative;
		z-index: 1;
		width: 100%;
		overflow: hidden;
	}
	
	.lead-movie iframe {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
		/* pointer-events: none; */
	}

	/* ---------- 商品リスト ---------- */
	.sec-product-list {
		width: 100%;
		max-width: 1440px;
		margin: 0 auto;
		padding: 0 40px;
	}
	.sec-product-list ul {
		display: flex;
		flex-wrap: wrap;
		gap: 32px;
	}

	.sec-product-list li {width: calc((100% - 64px) / 3);}
	.sec-product-list li a {
		display: block;
		background: linear-gradient(160deg, #f3f5f1 0%, #e6ebe6 100%);
		border-radius: 24px;
		padding: 40px 40px 40px;
		height: 100%;
		transition: transform 0.4s ease, box-shadow 0.4s ease;
	}

	.sec-product-list figure {
		margin-bottom: 18px;
		overflow: hidden;
	}
	.sec-product-list figure img {
		width: 100%;
		height: auto;
	}
	.sec-product-list li a:hover img{
		transform: scale(1.05);
		opacity: 1;
	}
	.product-name {
		font-size: 20px;
		font-weight: 700;
		letter-spacing: 0.04em;
		margin-bottom: 6px;
	}
	.product-sub-name {
		font-size: 12px;
		font-weight: 400;
		color: #000;
		margin-bottom: 10px;
	}
	.product-price {
		font-size: 16px;
		font-weight: 700;
	}

	/* ---------- ボタン（CSSアニメーション） ---------- */
	.sec-product-btn {
		text-align: center;
		margin-top: 80px;
	}

	.sec-store-btn {
		text-align: center;
		margin-top: 20px;
	}	
	
	.c-btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 411px;
		padding: 10px 70px;
		border-radius: 9999px;
		background: linear-gradient(90deg, #000000 0%, #104144 100%);
		box-shadow: inset 0 0 24px #2d7c82, 0 4px 12px rgba(0, 0, 0, 0.25);
		color: #ffffff;
		font-size: 16px;
		font-weight: 700;
		line-height: 64px;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		transition: filter 180ms ease, transform 180ms ease;
		animation: ctaGlow 1.35s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
		animation-play-state: paused;
	}

	.c-btn.is-show {animation-play-state: running;}
	.c-btn::before {
		position: absolute;
		z-index: 1;
		top: -45%;
		bottom: -45%;
		left: -18%;
		width: 26%;
		content: "";
		background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 42%) 50%, transparent 100%);
		filter: blur(1px);
		pointer-events: none;
		transform: translateX(var(--shine-x)) rotate(18deg);
		/* GSAP: fromTo --shine-x -180% → 360% / duration 1.8s / power2.inOut / repeat:-1 */
		animation: ctaShine 1.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
		/* scrollTrigger（start: top 90%）相当：画面に入るまで停止 */
		animation-play-state: paused;
	}

	.c-btn.is-show::before {animation-play-state: running;}
	.forcms_block .c-btn {color: #fff;}
	.c-btn:hover {
		filter: brightness(1.12);
		transform: translateY(-2px);
	}

	.l-free-main > .forcms_block:not(.p-lensComSearchStore):last-of-type{padding-bottom: 0;}

}