@charset "utf-8";
/* CSS Document */
html {
	background-color: #111111;
	overscroll-behavior: none;
	/*overflow-x: hidden;*/
}
body {
	/*font-family: "Outfit", "Montserrat", "Titillium Web Semibold", "Open Sans Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	font-family: "Titillium Web Semibold", "Open Sans Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	background-color: #000;
}
.wrapper {
	/*background-color: #1A1A1A;*/
	color: #FFFFFF;
	/*background-image: url('../contents/img/line_black.png'); 
	background-repeat: repeat;*/
	background-color: #111111;
}
footer {
	/*background-color: #28292A;*/
	width: 100%;
	/*height: 600px;*/
	/*background-image: url('../contents/img/line_black.png'); */
}
.header__img {
	width: 100%;
	/*text-align: center;*/
}
.header__img > a {
	width: 120px;
	margin-top: 25px;
	margin-left: 75px;
	z-index: 12003;
	position: fixed;
}
.header__img > a > img {
	position: relative;
	width: 100%;
}
/*.header__img img{
	width: 120px;
    margin-top: 25px;
    margin-left: 75px;
	z-index: 999;
    position: fixed;
}*/
/* ロゴ：margin での位置決めをやめて top/left に */
.header__img > a {
	position: fixed;
	top: 25px; /* ← ハンバーガーと同じ高さ */
	left: 70px; /* ← 20px(余白) + 30px(ハンバーガー幅) + 20px(間隔) */
	width: 120px;
	z-index: 12003; /* ハンバーガー(z-index:20)の直下くらいに */
	margin: 0 !important; /* 既存の margin-top/left を打ち消し */
}
.header__text {
	/*color: #FFF;*/
	color: rgba(255, 255, 255, 0.75);
	/*text-align: center;*/
	/*padding-top: 30px;*/
	font-weight: bold;
	position: fixed;
	top: 23px;
	/*left: 225px;*/
	right: 40px;
	font-size: 100%;
	z-index: 999;
	cursor: default;
}
.or__txt {
	position: fixed;
	bottom: 23px;
	display: block;
	right: 45px;
	font-size: 120%;
	font-weight: bold;
	/*opacity: 50%;*/
	z-index: 6;
}
.or__txt > a {
	color: #FFF;
	text-decoration: none;
}
.or__txt.is-hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.scroll-down {
	display: none;
}
/*#styleLink {
  display: inline-block;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}

#styleLink .arrow-icon {
  transition: transform 0.2s ease;
}

#styleLink:hover {
  color: rgba(255, 255, 255, 1.0);
}

#styleLink:hover .arrow-icon {
  transform: translateX(4px);
}*/
.slider {
	margin-top: -0px;
}
.main__img img {
	width: 100%;
	height: calc(var(--vh) * 100);
	/*animation: animationZoom 5s linear;
	animation-iteration-count: infinite;*/
	object-fit: cover;
}
.main__img__2 img {
	width: 100%;
	height: calc(var(--vh) * 100);
	/*animation: animationZoom 5s linear;
	animation-iteration-count: infinite;*/
	object-fit: cover;
}
/*.zoom{
	width: 100%;
	height: calc(var(--vh) * 100);
	overflow: hidden;
}
    @keyframes animationZoom {
      100% { transform:scale(1.1)} 
    }*/
@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.15); /* 拡大率 */
	}
}
.add-animation {
	animation: zoomUp 10s linear 0s normal both;
}
.main {
	width: 100%;
	/*background-image: url('../contents/img/line_black.png'); 
	background-repeat: repeat;*/
	position: relative;
	/*background-color: #111111;*/
	/*background-color: rgba(25,25,25,0.70);
	backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);*/
	display: flex;
	flex-direction: column;
	/*gap: 40px;*/
	/*margin-top: 64px;
	margin-bottom: 64px;*/
}
.main__wrapper {
	position: relative;
	width: 100%;
	background-color: #111;
	padding: 40px 0;
}
.main__content {
	position: relative;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	/*margin-bottom: 60px;*/
	padding: 40px;
	/*padding: 100px 40px;*/
	/*background-image: url('../contents/img/line_black.png'); 
	background-repeat: repeat;*/
	/*background-color: #1a1a1a;*/
}
.main__content h2 {
	width: 100%;
	font-size: 180%;
	font-weight: bold;
	text-align: left;
	/*margin-top: 60px;*/
	/*margin-bottom: 15px;*/
}
h2 span {
	font-size: 50%;
	margin-left: 10px;
	font-weight: normal;
	display: none;
}
.sub__content {
	position: relative;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	top: 40px;
}
.sub__content h2 {
	width: 100%;
	font-size: 180%;
	font-weight: bold;
	text-align: left;
}
.section-title {
	/*text-align: center;*/
	font-weight: bold;
	/*font-size: 1.5rem;*/
	color: #fff;
	position: relative;
	/*padding: 10px 0;*/
	padding-bottom: 10px;
	/*margin-bottom: 2em;*/
}
/*.section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}
.section-title::after {
  bottom: 0;
}*/
.main__content__info {
	width: 100%;
	font-size: 90%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-bottom: 15px;
	font-weight: 400;
}
.main__content__info__box {
	/*width: calc(100% - 43px);*/
	width: 100%;
	padding: 20px;
	background-color: #191919;
	text-decoration: none;
	color: #FFF;
	border-left: 3px solid #191919;
}
.main__content__info, .main__content__info__box {
	box-sizing: border-box;
}
.main__content__info {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
/*.main__content__info__box__hover{
	width: calc(100% - 43px);
	padding: 20px;
	background-color: #1C1E20;
	text-decoration: none;
	color: #FFF;
}
.main__content__info__box__hover:hover{
	filter: brightness(120%);
}*/
.main__content__info__txt {
	display: flex;
	align-items: center;
	line-height: 1.4;
}
.main__content__info__txt span {
	font-size: 80%;
	color: rgba(255, 255, 255, 0.6);
	margin-right: 20px;
	line-height: 1.4;
}
/*過去の更新表示ボタン
.news-toggle{
  display:inline-block;
  margin-top:12px;
  padding:8px 16px;
  font-size:90%;
  color:#ddd;
  background: linear-gradient(145deg, #333, #222);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 9999px;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.news-toggle:hover{ background: linear-gradient(145deg, #444, #2a2a2a); transform: translateY(0px); }
*/
/* ==== 最新情報：data-sheet付きの視覚差別化（右端にピル） ==== */
/* data-sheet付きリンク全体のベース */
.main__content__info > a[data-sheet] {
	position: relative;
	/*background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  border-left: 3px solid rgba(255,255,255,0.22);*/
	border-left: 3px solid #292B2D;
	background-color: #1C1E20;
}
/* 右端に「モーダル」バッジ */
.main__content__info > a[data-sheet]::after {
	content: "このリバリーを見る";
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	/* ★ 中央寄せのキモ */
	display: inline-grid; /* or inline-flex */
	place-items: center; /* inline-flexなら align-items:center; justify-content:center; */
	height: 24px; /* 好みで。固定高にして */
	padding: 0 10px; /* 上下0で高さ中心に */
	line-height: 0.9; /* ベースライン影響を切る */
	font-size: 72%;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .90);
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: .95;
	transition: opacity .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}
.main__content__info > a[data-sheet]:hover::after, .main__content__info > a[data-sheet]:focus-visible::after {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	opacity: 1;
}
/* スマホ（980px以下）はバッジごと消す */
@media (max-width: 980px) {
	.main__content__info > a[data-sheet]::after, .main__content__info > a.news-item.is-youtube::after {
		display: none !important;
		content: none !important;
	}
	.main__content__info > a[data-sheet], .main__content__info > a.news-item.is-youtube {
		padding-right: 20px !important;
	}
}
/* モーダルあり (data-sheet付き) のみ width 調整 */
.main__content__info__box[data-sheet] {
	/*width: calc(100% - 43px);*/
}
/* モーダルあり: hoverアクション & バッヂ */
.main__content__info__box[data-sheet]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.1);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
}
@media (hover: hover) and (pointer: fine) {
	.main__content__info__box[data-sheet]:hover::before, .main__content__info__box[data-sheet]:focus-visible::before {
		opacity: 1;
	}
}
.main__content__info__box[data-sheet]::after {
	content: "モーダル";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.8);
	transition: background .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
	.main__content__info__box[data-sheet]:hover::after, .main__content__info__box[data-sheet]:focus-visible::after {
		background: rgba(255, 255, 255, 0.18);
		color: #fff;
	}
}
.main__content__info > a[data-sheet], .main__content__info > a.news-item.is-youtube {
	position: relative;
	border-left: 3px solid #292B2D;
	background-color: #1C1E20;
	padding-right: 132px;
}
.main__content__info > a[data-sheet]::after, .main__content__info > a.news-item.is-youtube::after {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-grid;
	place-items: center;
	height: 24px;
	padding: 0 10px;
	line-height: 0.9;
	font-size: 72%;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .90);
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: .95;
	transition: opacity .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}
.main__content__info > a[data-sheet]::after {
	content: "このリバリーを見る";
}
.main__content__info > a.news-item.is-youtube::after {
	content: "この動画を見る";
}
.main__content__info > a[data-sheet]:hover::after, .main__content__info > a.news-item.is-youtube:hover::after {
	opacity: 1;
	background: rgba(255, 255, 255, 0.16);
}
@media (max-width: 980px) {
	.main__content__info > a[data-sheet], .main__content__info > a.news-item.is-youtube {
		padding-right: 110px;
	}
	.main__content__info > a[data-sheet]::after, .main__content__info > a.news-item.is-youtube::after {
		right: 10px;
		height: 22px;
		padding: 0 8px;
		font-size: 68%;
	}
}
.main__content__info > a[data-sheet]::before, .main__content__info > a.news-item.is-youtube::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.1);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
}
@media (hover: hover) and (pointer: fine) {
	.main__content__info > a[data-sheet]:hover::before, .main__content__info > a[data-sheet]:focus-visible::before, .main__content__info > a.news-item.is-youtube:hover::before, .main__content__info > a.news-item.is-youtube:focus-visible::before {
		opacity: 1;
	}
}
.news-item.is-disabled {
	pointer-events: none;
	cursor: default;
	/*opacity: 0.65;*/
}
.news-item[data-sheet], .news-item[href], .news-item[data-sheet] *, .news-item[href] * {
	cursor: pointer;
}
.main__content__more {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 15px;
	gap: 15px;
}
/*
.main__content__more__box{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
}
.main__content__more__box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
*/
/* 黒グラデーションレイヤー */
/*
.main__content__more__box::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,0) 70%
  );
}
*/
.main__content__more__box {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	width: calc(100% / 3 - 10px);
}
/* 画像 */
.main__content__more__box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
/* ポルシェ式：画像だけ拡大 */
.main__content__more__box:hover img {
	transform: scale(1.05);
}
/* ▼ テキスト＋矢印のレイヤー */
.more-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between; /* ←これ */
	padding: 18px 20px;
	color: #fff;
	z-index: 2;
	/* 黒グラデーション */
	/*background: linear-gradient(
    to top,
    rgba(0,0,0,.95),
    rgba(0,0,0,0) 60%
  );*/
}
.more-text {
	font-size: 120%;
	font-weight: bold;
	line-height: 1.3;
}
.more-arrow {
	flex-shrink: 0; /* 右端固定 */
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5));
}
.main__content__pick {
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	gap: 15px;
	align-items: stretch;
	/*margin-bottom: 15px;*/
}
.main__content__pick__box {
	width: 100%;
	height: 100%;
}
.main__content__pick > a {
	position: relative; /* ← 追加 */
	display: flex;
	width: calc(100% / 3 - 42px);
	/*min-height: 232px;*/
	/*height: 220px;*/
	/*aspect-ratio: 4 / 3;*/
	/*margin-bottom: 10px;*/
	text-decoration: none;
	color: inherit;
	transition: filter 0.2s ease; /* ← じわっとさせる */
	/*background-color: #1C1E20;*/
	/*margin-bottom: 15px;*/
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);
	border: 1px solid hsla(0, 0%, 100%, .08);
	flex-direction: column;
	/*background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));*/
	/*background: linear-gradient(0deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));*/
	/*background: linear-gradient(0deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07));*/
	background: #1C1E20;
	/*backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);*/
	/*background: linear-gradient(145deg, #333 0%, #222 100%);*/
}
/* 背景だけ明るく（このままでOK） */
.main__content__pick > a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.06);
	opacity: 0;
	transition: opacity .2s ease;
	z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
	.main__content__pick > a:hover::before {
		opacity: 1;
	}
}
.main__content__pick > a > .main__content__pick__box {
	position: static;
	z-index: auto;
}
/* 文字や画像だけ前面へ（オーバーレイより上に） */
.main__content__pick > a .img__wrap, .main__content__pick > a .styleName, .main__content__pick > a .carName, .main__content__pick > a .card-meta {
	/* position: relative;*/
	z-index: 1;
}
/* ピックアップカード画像を100pxにトリミング */
.img__wrap {
	height: 110px; /* 高さを固定 */
	overflow: hidden; /* はみ出しを切り捨て */
}
.img__wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 画像を切り取りながらフィット */
	object-position: center center; /* 上下中央でトリミング */
}
/* ピックアップカード画像：ふわっと拡大 */
.main__content__pick .img__wrap img {
	transition: transform 0.2s ease; /* アニメーションを滑らかに */
}
@media (hover: hover) and (pointer: fine) {
	.main__content__pick > a:hover .img__wrap img {
		transform: scale(1.05);
	}
}
.styleName {
	position: relative;
	color: #FFF;
	font-size: 100%;
	font-weight: bold;
}
.carName {
	position: relative;
	font-size: 70%;
	color: #FFF;
}
.card-meta {
	/*position: static;*/
	inset: auto;
	margin-top: 12px;
	bottom: 12px;
	left: 15px;
	right: 15px;
	display: flex;
	justify-content: space-between; /* ← 左右に分割 */
	font-size: 70%;
	color: rgba(255, 255, 255, 0.6);
	font-weight: normal;
	pointer-events: none;
	/*line-height: 1.4;*/
}
.card-meta .contributors {
	display: flex;
	flex-direction: row;
	gap: 12px;
}
.card-meta {
	opacity: 1;
	transition: opacity 0.2s ease;
}
.main__content__pick > a:hover .card-meta {
	opacity: 1;
}
.card-meta .creator, .card-meta .photographer {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: rgba(255, 255, 255, 0.6);
	font-weight: normal;
}
.card-meta .icon {
	stroke: rgba(255, 255, 255, 0.6);
	display: inline-block;
	vertical-align: middle;
}
.pickup-overlay-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(255, 255, 255, 1.0);
	font-size: 13px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.main__content__pick > a:hover .pickup-overlay-text {
	opacity: 1;
}
.main__content__manu {
	/*position: relative;*/
	display: flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	gap: 24px;
}
.main__content__manu a {
	width: calc(100% / 4 - 12px);
	transition: filter 0.2s ease; /* ← じわっとさせる */
}
.main__content__manu a:hover {
	/*transform: scale(1.05);*/
	transition: filter 0.2s ease; /* ← じわっとさせる */
	/*filter: brightness(70%);*/
	filter: brightness(125%);
}
.manu-wrapper {
	position: relative;
	width: 100%;
	/*margin-bottom: 16px;*/
}
.main__content__manu__box {
	position: relative;
	/*height: 200px;*/
	aspect-ratio: 4 / 3;
	z-index: 3;
	background-color: #1C1E20;
	/*background-color: #2d2f30;*/
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: transform 0.3s ease;
}
.manu-shadow {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 100%;
	height: 100%;
	background-color: #1C1E20;
	/*background-color: #2d2f30;*/
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	z-index: 0;
	filter: brightness(80%); /* ← 明度を下げる */
}
.layer1 {
	top: 2px;
	left: 2px;
	z-index: 2;
}
.layer2 {
	top: 6px;
	left: 6px;
	z-index: 1;
}
.layer3 {
	top: 10px;
	left: 10px;
	z-index: 0;
}
.main__content__manu img {
	position: relative;
	z-index: 2;
}
.main__content__manu__box img {
	width: 100%;
	height: auto;
	transition: all 0.2s ease-in-out;
	/*mix-blend-mode: screen;*/
}
.main__content__manu__text {
	position: absolute;
	bottom: 1px; /* 下部に固定 */
	left: 0;
	width: 100%; /* カード幅いっぱい */
	padding: 10px 10px; /* 内側余白 */
	/*background: rgba(0,0,0,0.6);*/ /* 半透明の黒帯 */
	font-weight: bold;
	color: #FFF;
	font-size: 100%;
	display: flex; /* flexで縦中央 */
	flex-direction: column; /* 上下に積む */
	justify-content: center; /* 縦中央寄せ */
	text-align: left;
	box-sizing: border-box;
}
.main__content__manu__text p {
	font-size: 80%;
	font-weight: normal;
	color: rgba(255, 255, 255, 0.65);
	/*margin: 2px 0 0;*/ /* タイトルとの間に少し余白 */
	line-height: 1.4;
}
/*
.main__content__manu::before{
	content:"";
	display: block;
	width:24%;
	order:1;
}
.main__content__manu::after{
	content:"";
	display: block;
	width: 24%;
}
*/
.main__content__manu__box > a > img:hover {
	/*transform: scale(1.05);*/
	filter: brightness(70%);
}
.manu-meta {
	position: absolute;
	bottom: 10px;
	left: 10px;
	font-size: 80%;
	color: rgba(255, 255, 255, 0.65);
	/*text-shadow: 0 0 4px rgba(0,0,0,0.7);*/
	font-weight: 400;
	transition: opacity 0.2s ease;
	/*opacity: 0;*/
	display: none;
}
.main__content__manu__box:hover .manu-meta {
	opacity: 1;
}
/* ホバーで表面カードだけ浮かせる */
.main__content__manu > a .main__content__manu__box {
	transition: transform .2s ease, box-shadow .2s ease;
}
.main__content__manu > a:hover .main__content__manu__box {
	transform: translateY(-5px) translateX(-5px) scale(1.02);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .45);
	z-index: 5;
}
/* 下敷きカードは拡大しない */
.main__content__manu > a:hover .manu-shadow {
	transform: none;
}
.main__content__gall {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
.main__content__gall__box {
	display: block;
	aspect-ratio: 16/9;
	background: #1C1E20;
	width: calc(100% / 4 - 12px);
	overflow: hidden;
}
.main__content__gall__box > a {
	display: block;
	width: 100%;
	height: 100%;
}
.main__content__gall__box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: all 0.2s ease-in-out;
}
.main__content__gall__text {
	position: absolute;
	/*top: 5px;
    left: 5px;*/
	/*background-color: #1A1A1A;*/
	padding: 8px;
	/*opacity: 80%;*/
	margin-top: -170px;
	margin-left: 0px;
	font-weight: bold;
	text-shadow: 0px 0px 10px #000;
}
.main__content__gall__box::before {
	content: "";
	display: block;
	width: 24%;
	order: 1;
}
.main__content__gall__box::after {
	content: "";
	display: block;
	width: 24%;
}
@media (hover: hover) and (pointer: fine) {
	.main__content__gall__box > a > img:hover {
		/*transform: scale(1.05);*/
		filter: brightness(70%);
	}
}
/* gallery の JSON 注入用ラッパーを “透明化” */
#galleryPhotoGrid {
	display: contents;
}
.section-more {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	margin-top: 15px;
	/*margin-bottom: 30px;*/
}
.section-more a {
	display: inline-block;
	color: #ccc;
	text-decoration: none;
	font-weight: 500;
	font-size: 70%;
	padding: 6px 16px;
	background: linear-gradient(145deg, #333 0%, #222 100%);
	border-radius: 9999px;
	transition: background 0.3s ease, color 0.3s ease;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.section-more a:hover {
	background: linear-gradient(145deg, #444 0%, #2a2a2a 100%);
	color: #fff;
}
/*
@media (max-width: 980px) {
  .section-more .icon {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    top: -4px!important;
  }
}*/
.main__content__show {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}
.main__content__show__box {
	width: calc(100% / 2 - 10px);
	/*width: 100%;*/
	/*margin-bottom: 20px;*/
	overflow: hidden;
}
.main__content__show__box video {
	width: 100%;
	height: 100%;
}
/* showcase の JSON 注入用ラッパーを “透明化” */
#showcaseSpinGrid {
	display: contents;
}
.main__content__video {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.main__content__video__box {
	width: calc(100% / 2 - 10px);
	margin-bottom: 20px;
	overflow: hidden;
}
.main__content__video__box video {
	width: 100%;
	height: 100%;
}
/* scapes の JSON 注入用ラッパーを “透明化” */
#scapesVideoGrid {
	display: contents;
}
.main__content__text {
	margin-top: 20px
}
.menu {
	position: fixed;
	top: 0;
	left: -100%;
	width: 300px;
	height: 100%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
	/*background: #1C1E20;*/
	/*background: rgba(24, 24, 24, .35);*/
	/*backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: none;*/
	/*border-right: 1px solid rgba(255,255,255,0.2);*/
	/*border-right: 1px solid hsla(0, 0%, 100%, .08);*/
	/*border-right: 1px solid rgba(255, 255, 255, 0.8);*/
	/*box-shadow: 0 0 30px rgba(0,0,0,0.65);*/
	/*animation: floatGlass 6s ease-in-out infinite alternate;*/
	animation: none;
	z-index: 12003;
	transition: left 0.3s ease;
	padding: 20px;
	background: rgba(17, 17, 17, 0.65);
	/*background: rgba(22, 22, 23, 0.8);*/
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	/*border-right: 1px solid rgba(255, 255, 255, 0.1);*/
	box-shadow: none;
}
/* ゆる〜い浮遊アニメ */
/*@keyframes floatGlass {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(5px); }
}*/
/* メニューが開いているとき */
.menu.open {
	left: 0;
}
/* ボタンのスタイル */
.hamburger {
	position: fixed;
	top: 20px;
	left: 20px;
	width: 30px;
	cursor: pointer;
	z-index: 12004;
	--hb-line: 3px; /* 線の太さ */
	--hb-gap: 5px; /* 線の上下マージン */
}
@media (pointer: coarse), (hover: none) {
	.hamburger::before {
		content: "";
		position: absolute;
		inset: -14px;
	}
}
.hamburger span {
	display: block;
	height: var(--hb-line);
	margin: var(--hb-gap) 0;
	width: 100%;
	background-color: #FFF;
	transition: transform .35s ease, opacity .25s ease;
	transform-origin: center; /* 回転の基点を中央に */
}
/* X 化：中心に寄せて45°回転（サイズに比例して移動） */
.hamburger.active span:nth-child(1) {
	transform: translateY(calc(var(--hb-line) + var(--hb-gap))) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
	opacity: 0;
}
.hamburger.active span:nth-child(3) {
	transform: translateY(calc(-1 * (var(--hb-line) + var(--hb-gap)))) rotate(-45deg);
}
/*
@media screen and (max-width: 980px) and (hover: none) and (pointer: coarse){
  .hamburger{
    width: 90px;
    padding: 15px;
    --hb-line: 9px;
    --hb-gap:  15px;
  }
}*/
/* メニューリストのスタイル */
.menu ul {
	list-style-type: none;
	padding: 0;
	margin-top: 80px;
}
.submenu-manufactures {
	margin-top: 80px;
}
.menu li {
	/*border-bottom: 1px solid #FFF;*/
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.menu li a {
	display: block;
	width: 100%;
	padding: 20px 0;
	text-decoration: none;
	color: #FFF;
}
.menu li:hover {
	background-color: rgba(255, 255, 255, 0.1);
}
.main__content__inline-video {
	position: relative;
	/*top: -12px;*/
	display: flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	gap: 20px;
}
.inline-video-box {
	/*width: 49%;*/
	height: 100%;
	cursor: pointer;
}
.inline-video-box video, .inline-video-box img {
	width: 100%;
	height: auto;
	display: block;
	/*margin-bottom: 10px;*/
}
.inline-video-box {
	position: relative;
	width: calc(100% / 2 - 10px);
	aspect-ratio: 16 / 9; /* ← この行追加 */
	cursor: pointer;
	overflow: hidden;
}
.inline-video-box img {
	width: 100%;
	display: block;
	transition: filter 0.3s ease;
}
/* 再生アイコン */
.inline-video-box::after {
	content: '';
	font-size: 40px; /* ← 小さくした（元は60px） */
	color: rgba(255, 255, 255, 0.8);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: opacity 0.3s ease, color 0.3s ease;
}
/* ホバー時に画像少し暗くして▶を強調 */
/*
.inline-video-box:hover img {
	filter: brightness(80%);
}
*/
.inline-video-box:hover::after {
	color: rgba(255, 255, 255, 0.5); /* 元は1.0 → 控えめに */
}
.inline-video-box.playing::after {
	content: none;
}
.inline-video-box video, .inline-video-box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.inline-video-box > span {
	position: absolute;
	margin-top: 20px;
	margin-left: 20px;
	text-shadow: 0px 0px 5px #000;
}
.inline-video-box[data-autoplay], .inline-video-box[data-autoplay] * {
	pointer-events: none !important;
	-webkit-user-select: none;
	user-select: none;
}
.inline-video-box[data-autoplay] .preplay-btn, .modal-video-box[data-autoplay] .preplay-btn {
	display: none !important;
}
.main__content__inline-video-scapes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}
.inline-video-box-scapes {
	/*width: 49%;*/
	cursor: pointer;
}
.inline-video-box-scapes video, .inline-video-box-scapes img {
	width: 100%;
	height: auto;
	display: block;
}
.inline-video-box-scapes {
	position: relative;
	/*width: 49%;*/
	aspect-ratio: 16 / 9; /* ← この行追加 */
	cursor: pointer;
	overflow: hidden;
}
.inline-video-box-scapes img {
	width: 100%;
	display: block;
	transition: filter 0.3s ease;
}
/* 再生アイコン */
.inline-video-box-scapes::after {
	content: '▶';
	font-size: 40px; /* ← 小さくした（元は60px） */
	color: rgba(255, 255, 255, 0.8);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: opacity 0.3s ease, color 0.3s ease;
}
/* ホバー時に画像少し暗くして▶を強調 */
/*
.inline-video-box-scapes:hover img {
	filter: brightness(80%);
}
*/
.inline-video-box-scapes:hover::after {
	color: rgba(255, 255, 255, 0.5);
}
.inline-video-box-scapes.playing::after {
	content: none;
}
.inline-video-box-scapes > span {
	position: absolute;
	margin-top: 10px;
	margin-left: 10px;
}
.custom-close-btn {
	position: absolute;
	bottom: -74px;
	right: -74px;
	z-index: 1000;
	width: 48px;
	height: 48px;
	border: none;
	background: rgba(0, 0, 0, 0.6);
	color: white; /* ← 通常時は白 */
	border-radius: 50%;
	backdrop-filter: blur(6px);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: color 0.3s ease, background 0.3s ease;
}
.custom-close-btn:hover {
	color: rgba(255, 255, 255, 0.6); /* ← ホバーでやや薄く */
	background: rgba(255, 255, 255, 0.1);
}
.hidden {
	display: none !important;
}
.glass-footer {
	/*background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));*/
	/*background: rgba(24, 24, 28, .35);*/
	background: #191919;
	/*backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);*/
	/*border-top: 1px solid rgba(255,255,255,0.2);*/
	/*box-shadow: 0 -4px 20px rgba(0,0,0,0.4);*/
	color: rgba(255, 255, 255, 0.8);
	padding: 40px 0px;
	font-size: 80%;
	/*background-image: url(../contents/img/line_black.png);
  background-repeat: repeat;*/
	position: relative;
	z-index: 5;
}
/* フッター内の全リンクをホバーで暗く */
.glass-footer a {
	/*transition: filter 0.2s ease, color 0.2s ease;*/
}
.footer-container a:hover {
	filter: brightness(70%);
}
/* まず既存の全体暗転を無効化 */
.belt-card:hover {
	filter: none;
} /* style.css の brightness を打ち消し */ /* ← 現在ここで暗くしてる */
/* ↑ 既存: .belt-card:hover{ filter: brightness(70%); } を上書き */
/* ガラス容器にだけ暗幕を敷く（角丸でクリップ） */
.pickup-belt .main__content__pick__box {
	position: relative; /* ← これが必要 */
	overflow: hidden; /* ← 角丸内にクリップ */
}
.pickup-belt .main__content__pick__box::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit; /* 角丸を継承 */
	background: rgba(0, 0, 0, 0);
	transition: background .2s ease;
	pointer-events: none;
}
/* ホバーで“ガラスごと”ほんのり暗く */
.pickup-belt .belt-card:hover .main__content__pick__box::after {
	background: rgba(0, 0, 0, .18); /* 濃さは好みで .15～.22 */
}
/* 画像は少しだけ個別に落とす（深み出し用・任意） */
.pickup-belt .belt-card .img__wrap img {
	transition: filter .2s ease;
}
.pickup-belt .belt-card:hover .img__wrap img {
	filter: brightness(0.9);
}
/* サイドの余白は container に持たせる：main と同じ 40px */
.footer-container {
	max-width: 1200px;
	padding: 0 40px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/*gap: 40px;*/
	/*text-shadow: 0px 0px 5px #000;*/
}
/* 右カラムは右端＆右寄せ */
.footer-right {
	/* width: 35%;*/
	/*margin-left: auto;*/
	/*text-align: right;*/
}
.footer-logo {
	width: 130px;
	margin-bottom: 10px;
}
.footer-social {
	display: flex;
	gap: 15px;
	/*margin: 15px 0 0;*/
}
.footer-social a {
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.3s ease;
}
.footer-social svg {
	display: block;
}
.footer-left {
	width: 60%;
	display: flex;
	flex-direction: column;
	gap: 15px;
}
/* サイト名 */
.footer-title {
	/*font-weight: 600;
  color: rgba(255, 255, 255, 0.85);*/
	margin-top: -15px !important;
}
/* 注意書き */
.footer-note {
	/*font-size: 90%;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;*/
}
.footer-left p {
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 1.4;
}
.footer-right ul {
	list-style: none;
	padding: 0;
}
.footer-right li {
	/*margin-bottom: 6px;*/
}
.footer-right a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color 0.3s ease;
}
/* ===== Footer middle links (Contact / Privacy / Terms) ===== */
.footer-mid {
	/*flex: 1;*/
	display: flex;
	justify-content: center; /* 赤枠の真ん中に寄せる */
	align-items: flex-start;
}
.footer-legal {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 6px;
}
.footer-legal a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color 0.3s ease;
}
/* hover は既存の .footer-container a:hover の filter が効くので追加しなくてOK */
/* ===== Mobile: 3ブロックを縦積みにして見やすく ===== */
@media (max-width: 980px) {
	.footer-mid, .footer-right {
		width: 100%;
		margin-left: 0;
		justify-content: flex-start;
		margin-top: 16px;
	}
	.footer-links {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		gap: 12px;
	}
	.footer-links--legal {
		border-top: none;
		padding-top: 0;
		margin-top: 8px;
	}
	.footer-left {
		width: 100%;
	}
}
/* ===== Footer column order ===== */
.footer-left {
	order: 1;
}
.footer-mid {
	order: 2;
}
.footer-right {
	order: 3;
}
/* ===== Footer link list (common) ===== */
.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.footer-links a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	transition: color 0.3s ease;
}
/* hover は既存の .footer-container a:hover が効くなら不要 */
/*
.footer-links a:hover{
  color: #fff;
}
*/
/* ===== Legal links only ===== */
.footer-links--legal {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-links--legal a {
	font-size: 0.85rem;
}
/* ===== Footer responsive ===== */
@media (max-width: 980px) {
	.footer-container {
		flex-direction: column;
		align-items: flex-start;
		/*gap: 18px;*/
	}
	.footer-left {
		width: 100%; /* PCの width:60% を無効化 */
	}
	.footer-right {
		margin-left: 0; /* auto を解除して左揃え */
		width: 100%;
	}
	.footer-mid {
		flex: 0 0 auto; /* flex:1 を解除 */
		width: 100%;
		justify-content: flex-start;
	}
	/* リンク列は横並び + 折り返しにして省スペース */
	.footer-links {
		display: flex;
		flex-wrap: wrap;
		gap: 2px 12px;
	}
	.footer-links li {
		margin: 0;
	}
}
.footer-copy {
	flex: 0 0 100%; /* ★必ず1段下に落とす */
	order: 99; /* ★常に最後 */
	margin-top: 17px;
	color: rgba(255, 255, 255, 0.65);
	/*font-size: 12px;*/
}
/* PC：左寄せで自然に */
@media (min-width: 981px) {
	.footer-copy {
		flex-basis: 100%; /* 1行使って下段へ */
	}
}
/* SP：最後に表示 */
@media (max-width: 980px) {
	.footer-copy {
		order: 99;
		margin-top: 40px;
	}
}
/* ==== Custom Modal (Lightbox代替) ==== */
.modal-overlay {
	position: fixed;
	inset: 0;
	/*background: rgba(0,0,0,.65);*/
	/*background: rgba(0,0,0,.35)!important;*/
	z-index: 10000;
	display: none;
	/*backdrop-filter: blur(2px)!important;*/
}
.modal-root {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10001;
	display: none;
	line-height: 0;
}
.modal-glass {
	padding: 100px 100px 0px 100px;
	/*padding: 30px 30px 0px 30px;*/
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.20);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.40);
	display: inline-block;
	min-height: 260px;
}
.modal-img {
	/*max-width: 78vw;*/
	max-width: 79vw;
	/*max-height: 58vh;*/
	max-height: 58vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border: none;
}
/* Close */
.modal-close {
	position: absolute;
	/*right: 30px; top: 30px;*/
	right: 7px;
	top: 7px;
	/*width: 48px; height: 48px;*/
	border: none;
	border-radius: 50%;
	/*background: rgba(0,0,0,0.6);*/
	background: none;
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .2s ease, color .2s ease;
	z-index: 11002;
}
/* Arrows */
.modal-arrow {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.35);
	display: none; /* 画像が複数のときだけ表示 */
	z-index: 10002;
	cursor: pointer;
	backdrop-filter: blur(6px);
}
.modal-arrow:hover {
	background: rgba(255, 255, 255, 0.07);
}
.modal-arrow.left {
	left: 24px;
}
.modal-arrow.right {
	right: 24px;
}
.modal-arrow svg {
	width: 48px;
	height: 48px;
	color: #fff;
}
/* Loader（お好みで） */
.modal-loader {
	position: absolute;
	inset: 0;
	display: none;
	place-items: center;
}
.modal-loader::after {
	content: "";
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: rgba(255, 255, 255, 0.9);
	animation: spin 0.8s linear infinite;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
/* スクロール抑止 */
/*body.modal-open { overflow: hidden; }*/
.custom-modal {
	display: none;
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(6px);
}
.custom-modal-content {
	position: absolute;
	max-width: 90%;
	max-height: 90%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 6px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.custom-close {
	position: absolute;
	bottom: 20px; /* ←右下 */
	right: 20px;
	cursor: pointer;
	color: white;
	background: rgba(0, 0, 0, 0.3);
	padding: 6px;
	border-radius: 50%;
	transition: background 0.3s;
}
.custom-close:hover {
	background: rgba(255, 255, 255, 0.2);
}
.modal-arrow {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.35);
	display: none;
	z-index: 10002;
	cursor: pointer;
	backdrop-filter: blur(6px);
}
.modal-arrow {
	position: absolute; /* ← モーダル基準に */
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	display: none; /* 複数枚のときだけ表示 */
	z-index: 10; /* glass内で十分 */
	cursor: pointer;
}
/* 縁に重ねる（内側に少しだけ余白）*/
.modal-arrow.left {
	left: 10px;
}
.modal-arrow.right {
	right: 10px;
}
/* ボタンのデフォルトを全解除 → 位置を root 基準で再指定 */
button.modal-arrow {
	all: unset;
	position: absolute; /* ← .modal-root 基準 */
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 10002;
	/*padding: 28px;*/
	padding: 20px;
}
/* 縁に重ねる。外へ少しはみ出させたいなら -12px などに */
button.modal-arrow.left {
	left: 0; /* 例: left: -12px; */
}
button.modal-arrow.right {
	right: 0; /* 例: right: -12px; */
}
button.modal-arrow svg {
	width: 44px;
	height: 44px;
	color: #fff;
}
/* ホバー時の背景変化を無効化 */
button.modal-arrow:hover {
	background: none !important;
	background-color: transparent !important;
	opacity: 1 !important; /* デフォルトの半透明化も無効化 */
}
/* 通常時の矢印色を少し明るく */
button.modal-arrow svg {
	width: 44px;
	height: 44px;
	color: #fff;
	/*filter: brightness(0.5);*/
	filter: brightness(1.0);
	transition: .2s ease, color .2s ease;
}
/* さらにホバー時はちょっとだけ強調（任意） */
button.modal-arrow:hover svg {
	filter: brightness(1.0);
}
/* === Inline video: fullscreen button === */
.inline-video-box .fs-btn, .inline-video-box-scapes .fs-btn {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 5;
	display: inline-grid; /* 要素は常に確保 */
	place-items: center;
	padding: 6px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	line-height: 0;
	opacity: 0; /* デフォルトは透明 */
	transition: transform .15s ease, background .2s ease, opacity .2s ease;
}
/* 再生中＋ホバー時のみ表示 */
.inline-video-box.playing:hover .fs-btn, .inline-video-box-scapes.playing:hover .fs-btn {
	opacity: .9;
}
.inline-video-box .fs-btn:hover, .inline-video-box-scapes .fs-btn:hover {
	background: rgba(255, 255, 255, 0.10);
	transform: scale(1.06);
}
.fs-btn svg {
	width: 18px;
	height: 18px;
	color: #fff;
	opacity: .9;
}
/* === 再生中ホバーで中央に一時停止ボタン === */
.inline-video-box .center-btn, .inline-video-box-scapes .center-btn {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	display: none; /* 再生中＋ホバーで出す */
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	place-items: center;
	cursor: pointer;
	transition: transform .15s ease, background .2s ease, opacity .2s ease;
	opacity: .95;
}
.inline-video-box.playing:hover .center-btn, .inline-video-box-scapes.playing:hover .center-btn {
	display: grid;
}
.inline-video-box .center-btn:hover, .inline-video-box-scapes .center-btn:hover {
	background: rgba(255, 255, 255, 0.10);
	transform: translate(-50%, -50%) scale(1.06);
}
.center-btn svg {
	width: 26px;
	height: 26px;
	color: #fff;
	opacity: .95;
}
/* 再生前に表示する再生ボタン（SVG） */
.inline-video-box .preplay-btn {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	transition: transform .15s ease, background .2s ease, opacity .2s ease;
	opacity: .95;
}
.inline-video-box .preplay-btn:hover {
	background: rgba(255, 255, 255, 0.10);
	transform: translate(-50%, -50%) scale(1.06);
}
.inline-video-box .preplay-btn svg {
	width: 26px;
	height: 26px;
	color: #fff;
	opacity: .95;
}
/* 画面に貼り付くヒーロー */
.hero {
	position: relative;
	inset: 0 0 auto 0;
	height: calc(var(--vh) * 100);
	z-index: 0; /* 背景側 */
	pointer-events: none; /* クリックは下の要素へ */
	min-height: calc(var(--vh) * 100);
	overflow: hidden;
}
/* スライド（フェード＋ズーム） */
.hero .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 2500ms ease;
	will-change: opacity, transform;
}
.hero .slide.is-active {
	opacity: 1;
}
.hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 10000ms linear;
}
.hero .slide.is-active.zoom-in img {
	transform: scale(1.15); /* 拡大 */
}
.hero .slide.is-active.zoom-out img {
	transform: scale(1.0); /* 縮小 */
}
/* コンテンツをヒーローより前面に（重なり順の保険） */
.wrapper {
	position: relative;
	z-index: 1;
}
.hero-edge {
	position: fixed;
	inset: 0 0 auto 0; /* 画面上に貼り付く（高さは100vh） */
	height: calc(var(--vh) * 100);
	z-index: 3; /* .wrapper(1) より前、ヘッダー(999)より後でもOK */
	/*pointer-events: none;*/
	min-height: calc(var(--vh) * 100);
}
.hero-edge::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 70px;
	/*position:absolute; top:0; left:0; right:0; height:140px;*/
	background: linear-gradient(to bottom, rgba(0, 0, 0, .70), rgba(0, 0, 0, 0));
	/*background:linear-gradient(to bottom, rgba(0,0,0,.90), rgba(0,0,0,0));*/
}
/* 下辺の淡い影（トップでだけ表示） */
.hero-edge::after {
	content: "";
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: 0;
	/* ← セーフエリアを含めつつ、下に1pxはみ出させてスキマを潰す */
	bottom: calc(-1px - env(safe-area-inset-bottom, 0px));
	/* 既定70pxに + セーフエリア + 2px（上下のオーバースキャン分） */
	height: calc(320px + env(safe-area-inset-bottom, 0px) + 2px);
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, .70), rgba(0, 0, 0, 0));
	opacity: 1;
	transition: opacity .2s ease;
	/*display: none;*/
}
/* モバイルの高さ指定も同様に置き換え */
@media (max-width: 980px) {
	.hero-edge::after {
		height: calc(320px + env(safe-area-inset-bottom, 0px) + 2px);
		background: linear-gradient(to top, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0));
		display: none;
	}
}
/* スクロール後は隠す */
.hero-edge.after-hidden::after {
	opacity: 0;
}
/* スクロール時に影を消す用（従来のクラス名を流用） */
.hero-edge.edge-off::before {
	opacity: 0;
	transition: opacity .25s ease;
}
/* === Pickup Conveyor === */
.pickup-belt {
	position: relative;
	padding: 0px 0px 40px 0px;
	/* 上下うっすら罫線でセクション分離（好み） */
	/*border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.08);*/
	/*background: transparent;
	background-image: url('../contents/img/line_black.png'); 
	background-repeat: repeat; 
	background-color: #1A1A1A;*/
	animation-duration: 70s; /* 45s → 70s（ゆっくり） */
	/*background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(16px) saturate(180%);*/
}
.belt-mask {
	overflow: hidden;
	width: 100%;
	/*height: 208px;*/
	height: 228px;
}
.belt-track {
	display: flex;
	gap: 50px;
	width: max-content; /* 中身サイズに合わせる */
	animation: belt-scroll 90s linear infinite;
}
/*.belt-track:hover{ animation-play-state: paused; }*/ /* ホバーで一時停止 */
@keyframes belt-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	} /* 2列分のうち“半分”分だけ流す */
}
/* ベルト用のカードの縮尺（既存のカードスタイルを流用＆少し小型化） */
.pickup-belt .belt-card {
	display: block;
	width: 356px;
	/*height: 164px;*/
	height: 184px;
	flex: 0 0 auto;
	text-decoration: none;
	/*color: inherit;*/
	/*filter: grayscale(.95) brightness(.65);*/
	margin-top: 6px;
}
.pickup-belt .belt-card {
	/*filter: grayscale(.9) brightness(.8);
	opacity: .7;*/
	/*transition: filter .2s ease, opacity .2s ease, transform .2s ease;*/
}
/*.pickup-belt .belt-card:hover{
	filter: none;
	opacity: 1;
	transform: translateY(-2px);
}*/
.pickup-belt .main__content__pick__box {
	background-color: #1C1E20;
	/*padding: 12px;*/
	padding: 15px;
	border-radius: 8px;
	/*border: 1px solid hsla(0,0%,100%,.20);*/
	border: 1px solid hsla(0, 0%, 100%, .08);
	/*box-shadow: 0 0 6px 0 rgba(0,0,0,.6);*/
	/*aspect-ratio: 4 / 3;
	height: 200px;*
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
	backdrop-filter: blur(16px) saturate(180%);*/
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);
}
.pickup-belt .img__wrap {
	/*height: 200px;*/
	height: 110px;
	/*margin-bottom: 10px;*/
}
.pickup-belt .styleName {
	font-size: 130%;
	opacity: 1.0;
}
.pickup-belt .carName {
	font-size: 90%;
	opacity: 1.0;
}
.pickup-belt .creator {
	font-size: 90%;
	opacity: 1.0;
	color: rgba(255, 255, 255, 0.8);
}
/* モバイルは非表示（動く要素を減らす） */
@media (max-width: 980px) {
	.pickup-belt {
		display: none;
	}
}
/* ユーザーの設定を尊重：動きを止める */
@media (prefers-reduced-motion: reduce) {
	.belt-track {
		animation: none;
	}
}
/* === Pickup Conveyor === */
/* 一番下で読み込みます */
.footer-container {
	position: relative;
	z-index: 999;
}
@media screen and (max-width: 1294px) {
	.main__content {
		width: 1000px;
		margin-right: auto;
		margin-left: auto;
		padding: 40px;
	}
	.sub__content {
		width: 1000px;
	}
	.main__content__pick {
		gap: 15px;
	}
	.main__content__pick > a {
		width: calc(100% / 3 - 42px);
		padding: 15px;
	}
	.main__content__gall__box {
		width: calc(100% / 4 - 12px);
	}
	.inline-video-box {
		width: calc(100% / 2 - 10px);
	}
	.main__content__more {
		gap: 15px;
	}
	.main__content__more__box {
		width: calc(100% / 3 - 10px);
	}
}
@media screen and (max-width: 1100px) {
	.main__content {
		width: 800px;
		margin-right: auto;
		margin-left: auto;
		padding: 40px;
	}
	.sub__content {
		width: 800px;
	}
	.main__content__pick {
		gap: 15px;
	}
	.main__content__pick > a {
		width: calc(100% / 2 - 40px);
		/*aspect-ratio: 4 / 3;*/
		padding: 15px;
	}
	.main__content__gall__box {
		/*width: calc(100% / 4 - 12px) ;*/
		width: calc(100% / 2 - 8px);
	}
	.inline-video-box {
		/*width: calc(100% / 2 - 10px) ;*/
		width: 100% !important;
	}
	.spin-viewer {
		width: 100% !important;
	}
	.main__content__show__box {
		width: 100% !important;
	}
	.main__content__more {
		gap: 15px;
	}
	.main__content__more__box {
		width: calc(100% / 2 - 8px);
	}
}
@media screen and (max-width: 980px) {
	.header__text {
		display: none;
	}
	.or__txt {
		bottom: 15px;
		right: 25px;
	}
	.hero-edge::before {
		height: 135px;
		margin-top: 5px;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0));
	}
	/*.hero-edge::after{
	height: 240px;
	}*/
	.main__content {
		width: 89vw;
		margin-right: auto;
		margin-left: auto;
		padding: 20px;
	}
	.sub__content {
		width: 89vw;
	}
	.main__content__pick {
		gap: 20px;
	}
	.main__content__pick > a {
		width: calc(100% / 1 - 0px);
	}
	.main__content__pick > a:hover .img__wrap img {
		transform: scale(1.00);
	}
	.img__wrap {
		/*height: 100px;*/
		height: 22.4vw;
		overflow: hidden;
		/*margin-bottom: 10px;*/
	}
	.main__content__gall {
		gap: 10px;
	}
	.main__content__gall__box {
		width: calc(100% / 2 - 5px);
	}
	.inline-video-box {
		width: calc(100% / 1 - 0px);
	}
	.inline-video-box > span {
		margin-top: 10px;
		margin-left: 10px;
	}
	.inline-video-box.playing .center-btn, .inline-video-box-scapes.playing .center-btn {
		display: none !important;
	}
	.footer-container {
		width: 90vw;
		padding: 0px;
	}
	.modal-glass {
		padding: 30px 30px 0px 30px;
		border-radius: 12px;
	}
	.spin-viewer {
		width: 100% !important;
	}
	.main__content__more {
		gap: 20px;
	}
	.main__content__more__box {
		width: calc(100% / 1 - 0px);
	}
}
/* ==== Scrollable Sheet Modal ==== */
.sheet-overlay {
	position: fixed;
	inset: 0;
	/*background: rgba(0,0,0,.65);*/
	/*background: rgba(0,0,0,.35);*/
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(2px) saturate(1.05);
	z-index: 11000;
}
.sheet-root {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 11001;
}
.sheet-glass {
	position: relative;
	width: min(884px, 92vw);
	/*max-height: 76vh;
	max-height: 750px;*/
	/*height: min(750px, 76vh);*/
	max-width: 79vw;
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: 0px;
	padding: 40px;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
	/*background: rgba(17, 17, 17, 0.65);*/
	backdrop-filter: blur(20px) saturate(180%);
	/*backdrop-filter: blur(20px) saturate(180%);*/
	/*border: 1px solid rgba(255,255,255,0.20);*/
	border: 1px solid hsla(0, 0%, 100%, .1);
	/*box-shadow: 0 0 30px rgba(0,0,0,0.6);*/
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	/*font-weight: 400;*/
	/*background: #1C1E20;*/
	/*background: #2d2f30;*/
	/*background: #2C3034;*/
}
/* 980px以上だけ適用 */
@media (min-width: 981px) {
	.sheet-glass {
		max-height: min(750px, 76vh);
	}
}
/* デフォルト（PC想定） */
.sheet-glass {
	--sheet-pad-t: 40px;
	--sheet-pad-r: 40px;
	--sheet-pad-b: 40px;
	--sheet-pad-l: 40px;
	padding: var(--sheet-pad-t) var(--sheet-pad-r) var(--sheet-pad-b) var(--sheet-pad-l);
}
/* モバイル */
@media (max-width: 980px) {
	.sheet-glass {
		--sheet-pad-t: 26px;
		--sheet-pad-r: 24px;
		--sheet-pad-b: 24px;
		--sheet-pad-l: 24px;
		/* 既存の padding 指定があるなら、ここは不要。
       ただし「変数のpaddingが勝つ」ように上書きしたいなら残す */
		padding: var(--sheet-pad-t) var(--sheet-pad-r) var(--sheet-pad-b) var(--sheet-pad-l);
	}
}
.sheet-header {
	color: #fff;
}
.sheet-submeta {
	color: rgba(255, 255, 255, 1.00);
	font-size: 90%;
	font-weight: normal;
	margin-bottom: 0px;
}
.sheet-body {
	overflow: auto;
	/*padding-right: 6px;*/
	/*margin-top: 20px;*/
	display: grid;
	gap: 16px;
	overscroll-behavior: none !important;
}
/* figure同士の間隔は、figureの親（=article）で作る */
.sheet-body > .sheet-article {
	display: grid;
	gap: 10px;
}
/* モバイルは間隔だけ少し詰めたいなら */
@media (max-width: 980px) {
	.sheet-body > .sheet-article {
		gap: 8px;
	}
}
/* モーダル内の自動アンカー補正を止める */
.sheet-body, #sheetBody {
	overflow-anchor: none;
}
.sheet-header h3 {
	font-weight: bold;
	font-size: 150%;
	margin-top: -5px;
	padding-right: 24px;
}
.sheet-media img, .sheet-media video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0px;
}
.sheet-media figcaption {
	margin-top: 0px;
	font-size: 90%;
	color: rgba(255, 255, 255, .7);
}
.sheet-close {
	all: unset;
	position: absolute;
	right: 16px;
	top: 15px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	/*background: rgba(0, 0, 0, 0.55);
	background: rgba(255, 255, 255, 0.2);*/
	background: none;
	cursor: pointer;
	transition: transform .15s ease, background .2s ease;
}
.sheet-close:hover {
	transform: scale(1.04);
	background: rgba(255, 255, 255, 0.10);
}
/*body.sheet-open { overflow: hidden; }*/
.sheet-media {
	margin-top: 0px;
	/*margin-bottom: 15px;*/
	margin-right: 0px;
	margin-left: 0px;
}
figcaption > h4 {
	font-weight: bold;
	margin-bottom: 10px;
}
figure {
	margin-bottom: 0px
}
figcaption > span {
	margin-bottom: 15px;
	/*color: rgba(255, 255, 255, 0.75);*/
	color: rgba(255, 255, 255, 1.00);
	font-size: 90%;
	display: block;
}
@media screen and (max-width: 980px) {
	figcaption > span {
		margin-bottom: 15px;
	}
}
figcaption > p {
	/*margin-top: 10px;*/
	/*color: rgba(255, 255, 255, 0.75);*/
	color: #FFF;
	font-size: 90%;
	/*font-weight: bold;*/
}
figcaption > a {
	color: rgba(255, 255, 255, 0.75);
	font-size: 90%;
}
figcaption > a:hover {
	filter: brightness(70%)
}
/* シートのヘッダー直下に置く card-meta 用 */
.sheet-header .card-meta.in-header {
	position: static; /* 絶対配置やめる */
	/*margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.12);*/
	display: flex;
	justify-content: space-between;
	gap: 12px;
	opacity: 1; /* 常時表示 */
	pointer-events: none;
	font-size: 90%;
	/*color: rgba(255,255,255,0.75);*/
	margin-top: 8px;
	margin-bottom: 30px;
	font-weight: 400;
}
.sheet-header .card-meta.in-header .icon {
	stroke: rgba(255, 255, 255, 0.6);
}
/* 記事内に残る既存ルールの干渉を切る */
.sheet-body article .card-meta {
	/* 既存の absolute などが効いていても、
     ヘッダーへ“移動”してしまうので基本無視でOK */
}
/* Sheet 初期非表示を強制 */
.sheet-overlay[hidden], .sheet-root[hidden] {
	display: none !important;
}
/* --- modal のサブメタだけ、文字自動拡大を抑止 --- */
.sheet-submeta {
	-webkit-text-size-adjust: none; /* iOS系Chrome/Safariへの指示 */
	text-size-adjust: none;
	overflow-wrap: anywhere; /* 長文で箱を圧迫しない */
	min-width: 0; /* 親がflexでも縮退OK */
	/*line-height: 1.3;*/
	/* ベースが可変でも暴れないよう、サイズを明示しておく */
	/*font-size: 13px;*/ /* 必要なら 12〜14px で調整 */
}
/* 再計算の口実を減らす（段落単位のオートサイズを誘発しにくく） */
/*.sheet-header { contain: layout paint; }*/
/* sheet内スクロールバー（WebKit系） */
.sheet-body::-webkit-scrollbar {
	width: 10px;
}
.sheet-body::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.25);
	border-radius: 8px;
}
.sheet-body::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .15));
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, .25);
}
.sheet-body {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .35) rgba(0, 0, 0, .25);
} /* Firefox */
@media (max-width: 980px) {
	.sheet-glass {
		width: 88vw;
		/*height: 66vh;*/
		/*height: 75vh;*/
		/*max-height: 400px;*/
		border-radius: 12px;
		padding: 26px 24px 24px 24px;
	}
	.sheet-body {
		font-size: 90%;
	}
	.sheet-header h3 {
		font-size: 120%;
		margin: -5px 0px 4px 0px !important;
	}
	.sheet-submeta {
		font-size: 72%;
	}
	.sheet-overlay {
		/*backdrop-filter: blur(16px)!important;*/
	}
	.sheet-header .card-meta.in-header {
		font-size: 72% !important;
		margin-bottom: 18px;
	}
	/*
	.sheet-media {
		margin-bottom: 10px;
	}
	*/
	/*.modal-close{
	width: 96px;
    height: 96px;
	}
	.sheet-glass .modal-close svg{
		width: 56px;
		height: 56px;
	}*/
	.modal-close svg, .sheet-glass .modal-close svg {
		width: 24px !important;
		height: 24px !important;
	}
	button.modal-arrow svg {
		width: 38px !important;
		height: 38px !important;
	}
}
/* デスクトップだけ：右側だけ溝を確保（左は潰す） */
@media (hover: hover) and (pointer: fine) {
	:root {
		scrollbar-gutter: stable;
	}
}
/* === Sheet entrance/exit animation === */
.sheet-overlay {
	opacity: 0;
	transition: opacity .32s ease;
	pointer-events: none;
}
.sheet-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}
/* 初期状態：見えない＆少し上に */
.sheet-root .sheet-glass {
	opacity: 0;
	transform: translateY(100%) scale(1.00);
	transition: opacity .32s ease, transform .36s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
.sheet-root {
	pointer-events: none;
}
.sheet-root.is-open {
	pointer-events: auto;
}
.sheet-root.is-open .sheet-glass {
	opacity: 1;
	transform: none;
}
.sheet-root.is-closing .sheet-glass {
	opacity: 0;
	/*transform: translateY(-8px) scale(.98);*/
	transform: translateY(100%) scale(1.00);
}
@media (max-width: 980px) {
	.sheet-overlay {
		transition: opacity .38s ease;
	}
	.sheet-root .sheet-glass {
		transition: opacity .38s ease, transform .42s cubic-bezier(.22, .61, .36, 1);
	}
	.sheet-root.is-half.is-closing .sheet-glass {
		opacity: 1;
		transform: translateY(100%) !important;
	}
}
/* モーション弱め希望に配慮 */
@media (prefers-reduced-motion: reduce) {
	.sheet-overlay, .sheet-root .sheet-glass {
		transition: none !important;
	}
	.sheet-root .sheet-glass {
		transform: none !important;
		opacity: 1 !important;
	}
}
/* シート（モーダル）表示中は右下CTAを隠す */
html.sheet-open .or__txt, body.sheet-open .or__txt {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity .2s ease;
}
/* シート（モーダル）表示中は右下CTAとヒーロー下影を隠す */
html.sheet-open .or__txt, body.sheet-open .or__txt {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity .2s ease;
}
/*
html.sheet-open .hero-edge::after,
body.sheet-open .hero-edge::after {
  opacity: 0 !important;
  transition: opacity .2s ease;
}
*/
/* モーダル内で使う時の保険（任意） */
.modal-video-box {
	aspect-ratio: 16 / 9;
	z-index: 1;
	width: calc(100% / 1 - 0px);
}
/* 既存のUIを想定：中央ボタンとFSボタン */
.inline-video-box .center-btn, .inline-video-box .fs-btn {
	position: absolute;
	z-index: 1;
	line-height: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: transform .15s ease, background .2s ease, opacity .2s ease;
	opacity: .9;
}
.inline-video-box .center-btn { /* 中央 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px;
	border-radius: 999px;
}
.inline-video-box .fs-btn { /* 右下 */
	right: 10px;
	bottom: 10px;
	padding: 6px;
	border-radius: 10px;
}
@media (hover: none) and (pointer: coarse) {
	.inline-video-box:not(#scapesVideoGrid .inline-video-box), .inline-video-box:not(#scapesVideoGrid .inline-video-box) *, .inline-video-box-scapes, .inline-video-box-scapes * {
		transition: none !important;
		filter: none !important;
	}
	/* hover/active時の背景・透過レイヤーを消す */
	.inline-video-box:hover, .inline-video-box:active, .inline-video-box-scapes:hover, .inline-video-box-scapes:active, .inline-video-box:hover::before, .inline-video-box:active::before, .inline-video-box-scapes:hover::before, .inline-video-box-scapes:active::before {
		background: none !important;
		opacity: 1 !important;
	}
	/* タップ時のハイライト抑制（iOS/Android両方） */
	.inline-video-box, .inline-video-box-scapes {
		-webkit-tap-highlight-color: transparent;
	}
}
/* JSが <html> に付ける .touch-mode で、iPad含む“モバイル扱い”のときはホバーを殺す */
.touch-mode .inline-video-box:hover::before, .touch-mode .inline-video-box:active::before, .touch-mode .inline-video-box-scapes:hover::before, .touch-mode .inline-video-box-scapes:active::before {
	opacity: 0 !important;
	background: none !important;
	filter: none !important;
}
/* 必要ならホバー時UIも常時表示/非表示をここで制御 */
.touch-mode .inline-video-box:hover .center-btn, .touch-mode .inline-video-box:hover .fs-btn {
	opacity: 1; /* 好みで 0 にしてもOK */
}
/* 既存の “完全遮断” ブロックも残してOK（併用で堅牢） */
/* モーダル用に複製する“ロゴ画像（imgのみ）” */
.modal-logo-dup {
	position: fixed;
	top: 25px;
	left: 75px;
	width: 120px; /* 常にこの幅 */
	height: auto;
	z-index: 9999; /* overlayより前に出す（下にしたいなら 10999 に） */
	pointer-events: none; /* クリックを奪わない */
	display: block;
	opacity: 1;
}
/* PC用 */
.modal-logo-dup {
	position: fixed;
	top: 25px;
	left: 75px;
	width: 120px;
	height: auto;
	z-index: 9999; /* ガラスより前 */
	pointer-events: none;
	display: block;
	opacity: 1;
}
/* スマホ用（中央寄せ） */
@media (max-width: 980px) {
	.modal-overlay {
		/*backdrop-filter: blur(16px);*/
	}
	.modal-logo-dup {
		top: 3%;
		left: 50%;
		transform: translateX(-50%);
		width: 360px; /* そのまま固定 */
	}
	/* Close */
	.modal-close {
		position: absolute;
		right: 7px;
		top: 9px;
		background: none;
		color: #fff;
		cursor: pointer;
		display: grid;
		place-items: center;
		transition: background .2s ease, color .2s ease;
	}
	.modal-download {
		position: absolute;
		right: -3px;
		bottom: -2px;
		background: none;
		color: #fff;
		cursor: pointer;
		display: grid;
		place-items: center;
		transition: background .2s ease, color .2s ease;
	}
	button.modal-arrow {
		padding: 0px;
	}
	/*button.modal-arrow svg {
    width: 88px;
    height: 88px;
	filter: brightness(1.0);
	}
	button.modal-arrow.right{
	right: -4px;
	}
	button.modal-arrow.left{
	left: -4px;
	}
	*/
	.modal-glass > .modal-close {
		right: -8px;
		top: -8px;
	}
}
/*
.menu {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: none;
    border-right: none;
    box-shadow: none;
}
*/
.sheet-overlay {
	/*background: rgba(255, 255, 255, .15);*/
	/*backdrop-filter: blur(12px);*/
}
/*
.sheet-glass {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(16px) saturate(180%);
    border: none;
    box-shadow: none;
}
.modal-overlay {
    background: rgba(255, 255, 255, .15);
	backdrop-filter: blur(12px);
}
.modal-glass {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(16px) saturate(180%);
    border: none;
    box-shadow: none;
}
*/
/* PC用（共通） */
.modal-close, .sheet-glass .modal-close {
	width: 48px;
	height: 48px;
}
.modal-close svg, .sheet-glass .modal-close svg {
	width: 28px;
	height: 28px;
	filter: brightness(0.6);
	transition: filter 0.2s ease; /* ← なめらかに変化 */
}
/* hover時に明るくする */
.modal-close:hover svg, .sheet-glass .modal-close:hover svg {
	filter: brightness(1.0);
}
/* スマホ用（980px以下） */
@media (max-width: 980px) {
	.modal-close, .sheet-glass .modal-close {
		/* width: 96px;
    height: 96px;*/
	}
	.modal-close svg, .sheet-glass .modal-close svg {
		/*width: 56px;
    height: 56px;*/
	}
}
/* モーダル表示中は右下CTAを隠す */
body.modal-open .or__txt {
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
/* モーダル左下レイアウト */
.modal-card-meta {
	position: relative; /*left:28px; right:28px; bottom:22px;*/ /*padding: 10px 0px 0px 0px;*/ pointer-events: none;
}
.modal-card-meta.hidden {
	display: none;
}
.modal-card-meta .meta-stack {
	display: flex;
	flex-direction: column;
	gap: 0px;
	color: #FFF;
	margin-top: 26px;
}
/* タイトル：1行固定＋省略。PCで少し大きめ */
.modal-card-meta .meta-title {
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 120%;
	line-height: 1.25;
	color: #FFF;
	font-weight: bold;
}
/* 概要バッジ：ピックアップ風 */
.modal-card-meta .meta-overview .badge {
	display: inline-block;
	padding: 3px 0px 0px 0px; /*border-radius:.6em;*/
	/*background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);*/
	/*white-space:nowrap;*/ max-width: 100%; /*overflow:hidden;*/ /*text-overflow:ellipsis;*/
	color: #FFF;
	font-size: 70%;
}
/* クローンした .card-meta の保険＋サイズ */
.modal-card-meta .card-meta {
	position: static !important;
	inset: auto !important;
	opacity: 1 !important;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	/*background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18);
  padding:10px 14px; border-radius:10px; pointer-events:none !important;
  font-size:120%;*/
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.6);
}
/* SVGを確実に拡大（テキストに連動） */
.modal-card-meta .icon, .modal-card-meta .card-meta svg, .modal-card-meta .card-meta svg[width], .modal-card-meta .card-meta svg[height] {
	width: 1.2em !important;
	height: 1.2em !important;
	vertical-align: -0.15em;
	stroke: rgba(255, 255, 255, .6);
}
@media (max-width:980px) {
	.modal-card-meta {
		left: 0px;
		right: 0px;
		bottom: 0px; /*text-shadow: 0px 0px 4px #000;*/
	}
	/*.modal-card-meta .meta-title{ font-size:130%; }
  .modal-card-meta .card-meta{ font-size:110%; margin-top: 18px;}*/
}
/* 初期状態：ちょい上・透明 */
.main__content__pick > a {
	opacity: 0;
	transform: translateY(20px) scale(1.00);
	transition:
		opacity .6s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
/* 表示オン */
.main__content__pick > a.is-visible {
	opacity: 1;
	transform: none;
}
/* モーション弱め設定を尊重 */
@media (prefers-reduced-motion: reduce) {
	.main__content__pick > a {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}
/* hidden 属性を確実に無効化しないよう保険 */
.styles-grid [hidden] {
	display: none !important;
}
/* ===== livery.html のカードを index.html と同じトーンに合わせる ===== */
#stylesGrid .style-card {
	position: relative;
	display: flex;
	gap: 12px;
	background-color: #1C1E20;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);
	border: 1px solid hsla(0, 0%, 100%, .08);
	transition: filter .2s ease;
	color: inherit;
	text-decoration: none;
	/*background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));*/
	/*background: linear-gradient(0deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));*/
	/*background: linear-gradient(0deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07));*/
}
#stylesGrid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
@media screen and (max-width: 1294px) {
	#stylesGrid .style-card {
		width: calc(100% / 3 - 42px);
	}
}
@media screen and (max-width: 1100px) {
	#stylesGrid .style-card {
		width: calc(100% / 2 - 40px);
	}
}
@media screen and (max-width: 980px) {
	#stylesGrid {
		gap: 20px;
	}
	#stylesGrid .style-card {
		width: 100%;
	}
}
/* === Moved from livery.html (toolbar, filters, titles) === */
/* Subheader: glassy toolbar */
.subheader-tools {
	position: sticky;
	top: 0;
	z-index: 9;
	/*background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);*/
	/*border-bottom: 1px solid rgba(255,255,255,0.2);*/
	/*background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    backdrop-filter: blur(16px) saturate(180%);*/
	/*background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));*/
	/*background: rgba(24, 24, 24, .35);*/
	/*backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
	
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;*/
	background: rgba(17, 17, 17, 0.65);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	/*border-bottom: 1px solid rgba(255, 255, 255, 0.1);*/
	box-shadow: none;
}
/*
@media screen and (max-width: 980px){
	.subheader-tools{
	position: fixed;
	}
}
*/
.subheader-inner {
	max-width: 1200px;
	padding: 25px 40px 25px;
	margin: 0 auto;
	color: #fff;
}
.breadcrumbs {
	font-size: 80%;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 8px;
}
.breadcrumbs span {
	opacity: .6;
	margin: 0 .4em;
}
.tools-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	align-items: center;
}
.search-box input, .selects select {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
}
/* Custom arrow for selects */
.selects select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 3em;
	background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='rgba(255,255,255,0.6)'>\
  <path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.8em center;
	background-size: 24px 24px;
	height: 40px; /* ← 固定の高さ */
	line-height: 40px; /* テキストを縦中央に */
	padding: 0 2.5em 0 12px; /* 上下は 0 にして中央寄せ */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.view-toggle {
	display: inline-flex;
	gap: 8px;
}
.view-toggle button {
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
}
.view-toggle .is-active {
	background: rgba(255, 255, 255, 0.14);
}
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.chips button {
	padding: 6px 10px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
}
.chips button.is-on {
	background: rgba(255, 255, 255, 0.5);
	color: #fff;
}
/* Titles for style listing page */
.page-title {
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 180%;
	color: #fff;
}
.page-sub {
	color: rgba(255, 255, 255, .65);
	font-size: 90%;
	margin-bottom: 18px;
}
/* List view override: do not change #stylesGrid base layout */
.styles-grid.is-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
}
.styles-grid.is-list .style-card {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 16px;
	align-items: center;
}
/* Responsive tweaks for the toolbar / list */
@media (max-width: 1100px) {
	/* Keep existing #stylesGrid media rules; only list override if used */
	.styles-grid.is-list {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 980px) {
	.subheader-inner {
		padding: 20px 24px;
	}
	.tools-row {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.styles-grid.is-list .style-card {
		grid-template-columns: 1fr;
	}
}
/*:root{
  --meta-h: 20px;
  --meta-pad: 12px;
}*/
/*
#stylesGrid .style-card{
  position: relative;
  padding-bottom: calc(var(--meta-h) + var(--meta-pad));
}
#stylesGrid .style-card .card-meta{
  position: absolute;
  left: 15px; right: 15px;
  bottom: var(--meta-pad);
  opacity: 1;
}*/
/* モバイル（アイコン大きいなら少し増やす） */
/*
@media (max-width: 980px){
  :root{ --meta-h: 20px; --meta-pad: 16px; }
}
*/
/* スマホ：ロゴを上辺中央に固定 */
@media (max-width: 980px) {
	.header__img {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 12003;
	}
	.header__img > a {
		position: fixed; /* ← 子要素を直接固定 */
		top: 25px;
		left: 50%;
		transform: translateX(-50%); /* ← 中央寄せの決め手 */
		margin: 0 !important; /* 既存の margin-top/left を無効化 */
		z-index: 12003; /* ハンバーガーより前に出したいなら上げる */
	}
}
/* === Mobile: hamburger menu = full-screen glass === */
@media (max-width: 980px) {
	.menu {
		box-sizing: border-box;
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100dvh;
		transform: translateX(-100%);
		transition: transform .32s ease;
		padding: calc(env(safe-area-inset-top, 0px) + 64px) clamp(20px, 5vw, 40px) calc(env(safe-area-inset-bottom, 0px) + 28px);
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 12003;
		border: none;
		box-shadow: none;
		/*background: linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.45));
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);*/
	}
	.menu.open {
		transform: translateX(0);
	}
	/* リストの密度と見た目 */
	.menu ul {
		margin-top: 0;
	}
	.menu li {
		border-bottom: 1px solid rgba(255, 255, 255, .35);
	}
	.menu li a {
		padding: 22px 0;
	}
	/* ハンバーガー/クローズは常に前面に */
	.hamburger {
		z-index: 12004;
	}
}
/* メニュー開いてる間は背景スクロール禁止・下CTA等を消す */
body.menu-open {
	overflow: hidden;
}
body.menu-open .or__txt {
	opacity: 0;
	pointer-events: none;
}
body.menu-open .hero-edge::after {
	opacity: 0;
	transition: opacity .2s ease;
}
/* 概要はテキストとして自然に折返し */
.modal-card-meta .meta-overview, .meta-stack .meta-overview {
	line-height: 1.3;
	white-space: normal;
	word-break: break-word;
	font-size: 72%;
}
/* 念のため：旧 .badge が残っていても無効化 */
.meta-overview .badge {
	all: unset;
}
/* 行送りの基準（お好みで微調整） */
/*
:root {
	--title-lh: 1.2;
}
*/
/* タイトルは1行に固定＋高さを確保 */
/*
.main__content__pick .styleName {
	line-height: var(--title-lh);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1em * var(--title-lh));
	font-weight: bold;
}
*/
/* 車名は2行までに固定＋2行ぶんの高さを常に確保 */
/*
.main__content__pick .carName {
	line-height: var(--title-lh);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2em * var(--title-lh));
	font-weight: normal;
}
*/
/* ピックアップリバリーの styleName */
.main__content__pick .styleName {
	display: block; /* ← inline のままだと効かない */
	white-space: nowrap; /* 改行させない */
	overflow: hidden; /* はみ出しを隠す */
	text-overflow: ellipsis; /* … を出す */
	max-width: 100%; /* 親カード幅に合わせる */
}
/* “同じ行のカード高さ”も揃えておく（行内均一化） */
.main__content__pick {
	align-items: stretch; /* flexの行内で同じ高さに */
}
.main__content__pick > a {
	display: flex;
	flex-direction: column;
}
/* カード全体を縦flexにする */
.main__content__pick > a {
	display: flex;
	flex-direction: column;
}
/* 中のボックスを縦方向で分割 */
.main__content__pick__box {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 12px;
}
/* 上側：画像 + タイトル群 */
.img__wrap {
	flex-shrink: 0; /* 画像は固定サイズ */
}
/* styleName + carName を上寄せ */
.styleName, .carName {
	margin: 0; /* 余計なmarginをリセット */
	line-height: 1.4;
}
.styleName {
	margin-bottom: 4px;
}
/* 下側：metaを自動で一番下へ */
.card-meta {
	margin-top: auto; /* ← これで常に最下部に寄る */
}
.header__img > a {
	position: fixed; /* すでに指定済みかもしれないけど保険 */
	z-index: 12003; /* モーダル(10000〜11000)より上にする */
}
/* モーダル内は「操作(manipulation)のみ」→ ダブルタップズームを抑止 */
.modal-root, .modal-root * {
	touch-action: manipulation; /* iOS/Android/Chrome系で効く */
}
/* =========================
   Modal meta block: 共通仕様
   - タイトル群は上
   - metaは下固定（カードと同じ考え方）
   - carNameは最大2行で高さを確保
   ========================= */
/*
:root{
  --modal-title-lh: 1.25;
  --modal-meta-h: 20px;
  --modal-meta-pad: 12px;
}
*/
/* タイトル＋サマリー＋meta の入れ物を“カードと同じ仕組み”に */
.modal-card-meta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0; /* 余白は親のレイアウトに依存 */
	padding-bottom: calc(var(--modal-meta-h) + var(--modal-meta-pad));
	pointer-events: none; /* 既存方針を維持 */
}
/* styleName＝1行固定（上ぞろえ） */
.modal-card-meta .meta-title {
	line-height: var(--modal-title-lh);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1em * var(--modal-title-lh)); /* 1行分確保 */
	white-space: normal; /* 既存nowrapを上書き */
	text-overflow: ellipsis;
}
/* carName＝最大2行（上ぞろえ＋常に2行分の高さ） */
.modal-card-meta .meta-overview {
	line-height: var(--modal-title-lh);
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 最大2行 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2em * var(--modal-title-lh)); /* 2行分確保＝改行の有無で高さ不変 */
	white-space: normal;
	font-weight: normal;
}
/* metaは“下ぞろえ固定” */
.modal-card-meta .card-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--modal-meta-pad);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	opacity: 1; /* 常時表示 */
	pointer-events: none;
	font-size: 72%; /* 見やすければそのまま */
}
/* アイコンの見た目は既存を踏襲 */
.modal-card-meta .card-meta .icon {
	stroke: rgba(255, 255, 255, .75);
}
/* モバイルでも暴れないよう “自動拡大オフ” を保険で */
@media (max-width: 980px) {
	.modal-card-meta {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}
}
:root {
	--sheet-title-lh: 1.25;
	--sheet-meta-h: 20px;
	--sheet-meta-pad: 12px;
}
.sheet-header {
	display: flex;
	flex-direction: column;
	position: relative;
}
/* タイトル：最大2行。基本は1行想定 */
.sheet-header h3 {
	line-height: var(--sheet-title-lh);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	/* まずは1行ぶんだけ確保 */
	min-height: calc(1em * var(--sheet-title-lh));
	margin: -5px 0 4px 0;
}
/* JSで「2行必要」と判定されたときだけ高さを増やす */
.sheet-header h3.is-2line {
	min-height: calc(2em * var(--sheet-title-lh));
}
/* サブメタ：常に最大2行でOK */
.sheet-header .sheet-submeta {
	line-height: var(--sheet-title-lh);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: calc(2em * var(--sheet-title-lh));
	white-space: normal;
	margin: 0;
}
/* metaは下ぞろえ固定 */
.sheet-header .card-meta.in-header {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--sheet-meta-pad);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 90%;
	pointer-events: none;
}
@media (max-width: 980px) {
	.sheet-header h3, .sheet-header .sheet-submeta {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}
}
/* === livery.html 専用ツールバーを常に一段下げる === */
.subheader-tools {
	z-index: 8;
}
@media (max-width: 1700px) {
	.subheader-inner {
		padding: 67px 40px 25px;
	}
}
/* === モバイル：下スクロールでツールバーを「40pxだけ覗かせて」退避 === */
@media (max-width: 980px) {
	.subheader-tools {
		position: fixed !important;
		z-index: 8;
		transition: transform .5s ease, opacity .5s ease;
		will-change: transform;
		isolation: isolate; /* ::after と中身の積層を安定させる */
		width: 100%;
	}
	/* 退避時は中身を完全に消す（高さはtransformで隠すので崩れない） */
	.subheader-tools.tools-peek .subheader-inner {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	/* 40px の「覗き」ハンドル（背景の地） */
	.subheader-tools::after {
		content: "";
		position: absolute;
		inset: 0 0 auto 0; /* 上側に貼る */
		background: rgba(26, 26, 26, .60); /* 透け防止の地色（好みで調整） */
		z-index: 0;
		pointer-events: none; /* クリックは親に通す */
	}
	.subheader-tools > .subheader-inner {
		position: relative;
		z-index: 1;
	}
	/* 退避量： (全高 - 40px) だけ上へ。JSが --toolsH をセットする */
	.subheader-tools.tools-peek {
		transform: translateY(calc(-1 * (var(--toolsH, 140px) - 69px)));
		opacity: 1.0; /* 好みで */
	}
}
/* === Sticky footer（コンテンツが少なくてもフッターを最下部に） === */
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%; /* 古いブラウザ向け */
	min-height: 100dvh; /* 新しい端末の正しいビューポート基準 */
	display: flex;
	flex-direction: column;
}
.main {
	flex: 1 0 auto; /* 余白を受け持って縦に伸びる */
}
/* 念のため：フッターを列末に */
.glass-footer {
	margin-top: auto;
}
/* PC（981px以上）では非表示 */
@media (min-width: 981px) {
	#toolsQuickBtn {
		display: none !important;
	}
}
/* === モバイル用：クイック検索ボタン === */
@media (max-width: 980px) {
	.tools-quick-btn {
		display: inline-flex;
		position: absolute;
		top: 265px;
		right: 12px;
		width: 40px;
		height: 40px;
		/*border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);*/
		align-items: center;
		justify-content: center;
		color: #fff;
		/*box-shadow: 0 6px 20px rgba(0,0,0,.35);*/
		z-index: 2;
		opacity: 0; /* デフォルト非表示 */
		pointer-events: none; /* 当たり判定も切る */
		transition: opacity .5s ease;
	}
	/* ★ tools-peek（覗き状態）のときだけ出す */
	.subheader-tools.tools-peek .tools-quick-btn {
		opacity: 1;
		pointer-events: auto;
	}
}
/* PCで消している既存ルールを上書き（表示する） */
@media (min-width: 981px) {
	#toolsQuickBtn {
		display: none !important;
	} /* 既に書いてあってもこのまま強制 */
}
/* 端末共通：右上に固定（祖先transformの影響を受けない） */
.tools-quick-btn {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + 12.5px);
	right: 12px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 11999;
	opacity: 1;
	pointer-events: none;
	transition: opacity .35s ease;
}
/* 画面が“tools-peek状態”のときだけ見せる（:has で親子関係に依存しない） */ :root:has(.subheader-tools.tools-peek) .tools-quick-btn {
	opacity: 1;
	pointer-events: auto;
}
/* モバイルだけ当たり判定を少し大きくしたい場合（任意） */
@media (max-width: 980px) {
	.tools-quick-btn {
		width: 44px;
		height: 44px;
	}
}
/* === toolsQuickBtn: モバイルでは常時クリック可＆ポインター表示 === */
@media (max-width: 980px) {
	.tools-quick-btn {
		opacity: 1 !important;
		pointer-events: auto !important;
		cursor: pointer; /* ポインター表示 */
	}
}
/* PCは従来どおり非表示（既存ルール有効） */
/* 右上ボタンのアイコンは svg でも span でも回せるように */
.tools-quick-btn > * {
	transition: transform .35s ease, opacity .35s ease;
}
.tools-quick-btn[data-state="open"] > * {
	transform: rotate(180deg); /* 開いたらクルッ */
}
/* ハンバーガーと同じ太さのX（--hb-lineを再利用、なければ3px） */
.tools-quick-btn .xmark {
	--hb-line: var(--hb-line, 3px); /* フォールバック＝3px */
	position: relative;
	width: 32px;
	height: 32px;
	display: inline-block;
}
.tools-quick-btn .xmark::before, .tools-quick-btn .xmark::after {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	top: 50%;
	height: var(--hb-line);
	background: #fff;
	border-radius: calc(var(--hb-line) / 2);
	transform-origin: 50% 50%;
}
.tools-quick-btn .xmark::before {
	transform: translateY(-50%) rotate(45deg);
}
.tools-quick-btn .xmark::after {
	transform: translateY(-50%) rotate(-45deg);
}
/* === stylesGrid: フィルタ時の「パララッ」表示 === */
#stylesGrid.is-revealing .style-card {
	opacity: 0;
	transform: translateY(20px) scale(1.00);
	transition:
		opacity .45s ease, transform .60s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
#stylesGrid.is-revealing .style-card.is-revealed {
	opacity: 1;
	transform: none;
}
/* モーション弱めを尊重 */
@media (prefers-reduced-motion: reduce) {
	#stylesGrid.is-revealing .style-card {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}
/*.selects select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
  border-color: rgba(255,255,255,0.3);
}*/
/* 検索ボックス右端のクリアボタン */
.search-box {
	position: relative;
}
.search-box input[type="search"] {
	padding-right: 40px; /* ボタン分の余白を確保 */
}
/* デフォルトのcancelボタンを消す */
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.search-clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #fff;
	display: none; /* 入力があるときだけ表示 */
}
.search-clear svg {
	stroke: #fff; /* 白 */
	display: block;
}
/* モバイル専用：検索クリアボタンを小さく＆灰色 */
@media (max-width: 980px) {
	.search-clear {
		right: 16px;
		transform: translateY(-50%) scale(0.8); /* 小さく */
	}
	.search-clear svg {
		stroke: #9C9C9C; /* ← ここを固定色に */
		width: 20px;
		height: 20px;
	}
}
/* モバイル（980px以下）ではクリアボタンを非表示 */
/*@media (max-width: 980px){
  .search-clear {
    display: none !important;
  }
}*/
@media (max-width: 980px) {
	.card-meta .creator svg, .card-meta .photographer svg {
		width: 15px !important;
		height: 15px !important;
	}
}
@media (max-width: 980px) {
	/* カード内の creator / photographer だけ */
	.style-card .card-meta .creator svg, .style-card .card-meta .photographer svg, .main__content__pick .card-meta .creator svg, .main__content__pick .card-meta .photographer svg {
		width: 15px !important;
		height: 15px !important;
		vertical-align: middle;
		position: relative;
		/*top: -1px;*/
	}
}
/* タッチデバイス（スマホ＋iPad全方向）ではシート内スクロールバーを非表示 */
@media (hover: none) and (pointer: coarse) {
	.sheet-body {
		-ms-overflow-style: none; /* IE/Edge */
		scrollbar-width: none; /* Firefox */
	}
	.sheet-body::-webkit-scrollbar {
		display: none; /* Chrome/Safari/WebKit */
	}
}
/* ===== PC既定：横並び ===== */
.subheader-inner .tools-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.subheader-inner .search-box {
	flex: 1;
	min-width: 180px;
}
.subheader-inner .selects {
	flex: 0 0 auto;
}
#styleShare.is-placeholder {
	color: rgba(118, 118, 118, 1.0);
}
/* プルダウンを開いたリスト内は常に白 */
#styleShare option {
	color: #fff;
}
/* ===== モバイル：縦並び（以前の挙動を復元） ===== */
@media (max-width: 980px) {
	.subheader-inner .tools-row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.subheader-inner .search-box {
		flex: 0 0 auto;
		width: 100%;
	}
	.subheader-inner .selects {
		width: 100%;
	}
	.subheader-inner .selects select {
		width: 100%;
	}
}
.no-results {
	width: 100%;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	/*font-size: 95%;*/
	padding: 40px 0;
}
/*#newsEmpty.no-results {
  font-size: 105.5%;
}*/
.no-results {
	font-size: 0.9rem;
}
#newsEmpty.no-results {
	font-size: 0.9rem;
} /* ←この2行目は消してもOK */
/* === ギャラリー画像 hover 暗転 === */
.main__content__gall__box img {
	transition: filter 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
	.main__content__gall__box:hover img {
		filter: brightness(70%);
	}
}
/* modal内の日付(created-at)を中央揃えに */
.modal-card-meta .card-meta .created, .modal-card-meta .card-meta .created-at {
	display: inline-flex; /* インラインフレックスに */
	align-items: center; /* 縦中央揃え */
	gap: 4px; /* アイコンとテキストの間隔 */
	vertical-align: middle; /* 念のため */
}
/* アイコンは中揃えに固定 */
.modal-card-meta .card-meta .created svg, .modal-card-meta .card-meta .created-at svg {
	vertical-align: middle;
	position: relative;
	top: 0; /* baseline補正をリセット */
}
/* === Gallery の「パララッ」表示 === */
#galleryGrid.is-revealing .main__content__gall__box {
	opacity: 0;
	transform: translateY(20px) scale(1.00);
	transition:
		opacity .45s ease, transform .60s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
#galleryGrid.is-revealing .main__content__gall__box.is-revealed {
	opacity: 1;
	transform: none;
}
/* モーション弱めの環境はアニメ無し */
@media (prefers-reduced-motion: reduce) {
	#galleryGrid.is-revealing .main__content__gall__box {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}
/* Showcase のカード内で確実に高さを持たせる */
.main__content__show__box .inline-video-box {
	display: block; /* ← これが無いと高さ0になる */
	width: 100%; /* 親が49%なので内側は100%でOK */
	width: 100%; /* 親が49%なので内側は100%でOK */
	position: relative;
	aspect-ratio: 16 / 9;
	cursor: pointer;
	overflow: hidden;
}
/* 中身は全面フィット */
.main__content__show__box .inline-video-box img, .main__content__show__box .inline-video-box video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.video-overlay-text {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 12px;
	color: #fff;
	/*text-shadow: 0 0 8px rgba(0,0,0,0.6);*/
	z-index: 2;
	display: flex;
	flex-direction: column;
	/*gap: 4px;*/
	pointer-events: none; /* クリックは動画に通す */
	line-height: 1.5;
}
.video-overlay-text .styleName {
	font-size: 100%;
	font-weight: bold;
	margin-bottom: 0px;
}
.video-overlay-text .carName {
	/*opacity: 0.85;*/
	font-weight: normal;
}
.video-overlay-text > .creator {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: rgba(255, 255, 255, 0.75);
	font-weight: normal;
	font-size: 70%;
}
.video-overlay-text .creator .icon {
	stroke: rgba(255, 255, 255, 0.75);
}
/* ===== 通常ページのみグラデ（モーダル内は除外） ===== */
.inline-video-box:not(.modal-video-box)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.60) 15%, rgba(0, 0, 0, 0.35) 25%, rgba(0, 0, 0, 0.00) 40%);
}
@media (hover: none) and (pointer: coarse) {
	/* 通常時も、タップ(:hover/:active)時も、常にグラデを維持（モーダル除外） */
	.inline-video-box:not(.modal-video-box)::before, .inline-video-box:not(.modal-video-box):hover::before, .inline-video-box:not(.modal-video-box):active::before {
		opacity: 1 !important;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.60) 15%, rgba(0, 0, 0, 0.35) 25%, rgba(0, 0, 0, 0.00) 40%) !important;
	}
}
/* JSが付ける touch-mode でも同様に維持（モーダル除外） */
html.touch-mode .inline-video-box:not(.modal-video-box)::before, html.touch-mode .inline-video-box:not(.modal-video-box):hover::before, html.touch-mode .inline-video-box:not(.modal-video-box):active::before {
	opacity: 1 !important;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.60) 15%, rgba(0, 0, 0, 0.35) 25%, rgba(0, 0, 0, 0.00) 40%) !important;
}
/* ===== Chips（タグボタン）共通：中央揃えを厳密に ===== */
.chips {
	--chipH: 30px;
}
.chips button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--chipH);
	padding: 0 12px;
	line-height: 1;
	box-sizing: border-box;
	/* 既存の見た目（統一仕様） */
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 20px;
	font-size: 90%;
	font-weight: 600;
	transition: background .25s, color .25s, border-color .25s;
}
/* 選択中（is-active / is-on 両対応） */
.chips button.is-active, .chips button.is-on {
	background: #fff;
	color: #000;
	border: 1px solid #fff;
	font-weight: 600; /* 太さ据え置き */
}
@media (max-width: 980px) {
	.main__content__show__box {
		width: 100% !important; /* 1カラム */
	}
	.video-overlay-text {
		top: 10px;
		left: 10px;
		right: 10px; /* ← これも 10px にして左右対称にするのがおすすめ */
		padding: 0; /* 必要なら余白をリセット */
	}
}
.pager {
	display: none !important;
}
/*
:root {
  --toolsH: 0px;
  --headerH: -172px;
}

@media (max-width: 980px){
  :root {
    --headerH: -97px;
  }
}

.main {
  margin-top: calc(-1 * (var(--toolsH) + var(--headerH)));
}
*/
/* 16:9の箱を作って、画像は中で縮小して全体を見せる */
/* 16:9の箱を「必ず」作る（iOS Safariでも安定） */
.ratio-16x9 {
	position: relative;
	display: block;
	background: #1C1E20;
	overflow: hidden;
}
/* 16:9の高さを確定させる */
.ratio-16x9::before {
	content: "";
	display: block;
	padding-top: 56.25%; /* 9/16 = 0.5625 */
}
/* 画像を箱に収める（黒帯OK） */
.ratio-16x9 > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
/* Indexのギャラリーだけスコープ（必要なら #top や .main__content で絞ってOK） */
.main__content__gall .main__content__gall__box {
	display: block;
	aspect-ratio: 16 / 9; /* ← 16:9の箱 */
	background: #1C1E20; /* ← 黒帯 */
	overflow: hidden;
}
/* 画像は“枠の中で収める”。既存の height:100% を打ち消すのがポイント */
.main__content__gall .main__content__gall__box > img {
	width: 100%;
	height: 100%; /* ← ここは維持でもOK。代わりに… */
	object-fit: contain; /* ← これで引き伸ばし禁止（黒帯で収める） */
	display: block;
}
/* ベルトの画像を16:9で気持ちよくフィットさせる */
.pickup-belt .img__wrap {
	/*aspect-ratio: 16 / 9;*/
	height: 110px;
	/*background: #1C1E20;*/
	overflow: hidden;
}
.pickup-belt .img__wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* ヒーローは常にビューポート高いっぱい。dvh を優先してモバイルのURLバー問題も回避 */
#hero {
	height: 100svh;
	position: relative;
	overflow: hidden;
}
/* フォールバック（svh未対応環境はdvh→vhの順で） */
@supports not (height: 100svh) {
	#hero {
		height: 100dvh;
	}
}
@supports not (height: 100dvh) {
	#hero {
		height: 100vh;
	}
}
/* 各スライドは全面に敷く。背景が“帯色”になる */
#hero .slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/*background: #1C1E20;*/
	background: #000;
	/* ★ 以前に入れていた aspect-ratio:16/9 があれば削除してください */
}
/* 画像は箱いっぱいに“収める”。縦横比は維持、はみ出す側は帯になる */
#hero .slide img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* ← これが要！ pillarbox/letterbox を自動で作る */
	display: block;
}
#hero .slide img.is-16x9 {
	object-fit: cover; /* 16:9 の場合だけ全画面フィット */
}
/* （任意）拡大アニメ用があればそのまま使える */
#hero .slide img.add-animation {
	/* 例）transform: scale(1.06); transition: transform 8s ease; など */
}
/* ヒーローの土台にも帯色を敷いておくとフェードの継ぎ目が綺麗 */
#hero {
	background: #1C1E20;
}
/* 動きに敏感なユーザー向けに自動でアニメを切る */
@media (prefers-reduced-motion: reduce) {
	#hero .slide img.add-animation {
		transform: none !important;
		transition: none !important;
	}
}
/* ギャラリー：アスペクト比セレクターのプレースホルダーを薄色に */
#galleryAspect.is-placeholder {
	color: rgba(118, 118, 118, 1.0); /* グレーで薄く */
}
#galleryAspect option {
	color: #fff; /* 開いた中の選択肢は白 */
}
/* ダウンロードボタン（背景なし、SVGだけ調整） */
.modal-download {
	position: absolute;
	right: 15px;
	bottom: 15px;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 11002;
	display: none;
}
/* SVGの初期状態：暗め */
.modal-download svg {
	width: 28px;
	height: 28px;
	stroke: #fff;
	opacity: 0.5; /* ← 白だけど半透明に見える */
	transition: opacity .2s ease;
}
/* マウスオーバー時：完全に白 */
.modal-download:hover svg {
	opacity: 1;
}
/* スマホ用（中央寄せ） */
@media (max-width: 980px) {
	.modal-download {
		right: -3px;
		bottom: -2px;
	}
	.modal-download svg {
		width: 24px;
		height: 24px;
	}
}
#hero {
	position: relative;
	height: 100svh;
	overflow: hidden;
	background: #000; /* お好みで */
}
#hero .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 2.5s ease;
}
#hero .slide.is-active {
	opacity: 1;
}
#hero .slide img {
	position: absolute;
	top: 50%;
	left: 50%;
	/* 中央基準に置く */
	transform: translate(-50%, -50%);
	/* 画面いっぱいに収める */
	width: auto;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}
/* 既存の中央寄せは維持 */
#hero .slide img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* 16:9 近辺（横長）は cover で迫力重視 */
#hero .slide img.is-16x9 {
	object-fit: cover;
	/*width: 110%;
	height: 110%;*/
}
/* 縦長（16:9 から外れるもの）は contain で全体を見せる */
#hero .slide img.is-not-16x9 {
	object-fit: contain;
	height: 100%;
	width: auto;
}
/* ヒーロー共通（既存に追記） */
#hero .slide {
	will-change: opacity;
}
#hero .slide.is-active {
	opacity: 1;
	visibility: visible;
}
#hero .slide.is-hidden {
	visibility: hidden; /* ← フェード後に“描画自体”を止める */
}
#hero .slide img {
	backface-visibility: hidden; /* 合成乱れの抑止 */
	transform: translate(-50%, -50%) translateZ(0); /* GPU層化 */
	will-change: transform;
}
@media (min-width: 981px) {
	#hero .slide img {
		width: 110%;
		height: 110%;
	}
}
#hero .slide video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover; /* containにすれば黒帯で全体表示 */
}
/* スライド自体でクロスフェード（既存）＋レイヤ安定 */
#hero .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 900ms ease;
	will-change: opacity;
	contain: paint; /* フェード時のにじみ/ズレ抑制 */
	isolation: isolate; /* 合成の独立性を確保 */
}
#hero .slide.is-active {
	opacity: 1;
	z-index: 2;
}
#hero .slide.is-hidden {
	opacity: 0;
	visibility: hidden;
	z-index: 1;
}
/* ★ 動画は全面フィット。transformセンタリングは使わない */
#hero .slide video {
	position: absolute;
	inset: 0; /* top:0; right:0; bottom:0; left:0 と同義 */
	width: 100%;
	height: 100%;
	object-fit: cover; /* 黒帯なしで全面カバー */
	backface-visibility: hidden;
	transform: translateZ(0); /* レイヤ固定で微妙なズレ抑止 */
}
/* ヒーローの各スライドを重ねる */
#hero {
	position: relative;
	overflow: hidden;
}
#hero .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 900ms ease; /* ← フェード時間は好みで */
}
/* 表示中のスライド */
#hero .slide.is-active {
	opacity: 1;
	z-index: 2;
}
/* 非表示（フェード完了後だけvisibilityを切る） */
#hero .slide.is-hidden {
	opacity: 0;
	visibility: hidden; /* pointer-events: none でもOK */
	z-index: 1;
}
/* 動画のフィット（既に入れていれば不要） */
#hero .slide video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.27) !important;
	transform-origin: center center;
	width: auto;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}
.hero-cta {
	position: absolute;
	left: clamp(24px, 5vw, 140px);
	bottom: 110px;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: 16px 64px;
	border-radius: 999px;
	color: #fff !important;
	text-decoration: none;
	font-size: 100%;
	font-weight: bold;
	/* ★ 追加：通常時の背景（透明）を明示 */
	background: rgba(255, 255, 255, 0);
	border: 1px solid hsla(0, 0%, 100%, .2);
	-webkit-backdrop-filter: blur(8px) saturate(100%);
	backdrop-filter: blur(8px) saturate(100%);
	overflow: hidden;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	/* ★ 変更：hoverで変えるプロパティもtransitionに含める */
	transition:
		opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
/* 表示状態 */
.hero-cta.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
/* 非表示状態 */
.hero-cta.is-hidden {
	opacity: 0;
	transform: translateY(8px) scale(.98);
	pointer-events: none;
}
/* 通常時は背景を固定（透明） */
.hero-cta {
	background: rgba(255, 255, 255, 0);
	position: absolute;
}
/* ふわっと光るレイヤ */
.hero-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: rgba(255, 255, 255, 0.06);
	transition: opacity .2s ease;
}
/* hover/tapでフェードイン */
.hero-cta:hover::before, .hero-cta:active::before {
	opacity: 1;
}
.hero-cta__icon {
	position: relative;
	width: 1.3em;
	height: 1.3em;
	flex: 0 0 auto;
	opacity: .9;
	top: 0.3em;
	margin-left: 0.2em;
}
/* 980px以下：横いっぱい＆中央配置（はみ出し防止） */
@media (max-width: 980px) {
	.hero-overlay-text {
		bottom: 167px !important;
	}
	.hero-cta {
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 16px;
		/*bottom: 90px;*/
		bottom: 16px;
		width: auto;
		box-sizing: border-box;
		/*padding: 12px 20px;*/
		text-align: center;
	}
}
/* CTAのデフォ状態を明示して、トランジションを確実に効かせる */
.hero-cta {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .28s ease, transform .28s ease;
	will-change: opacity, transform;
}
/* 消すときはフェード（display/visibility は使わない） */
.hero-cta.is-hidden {
	opacity: 0;
	transform: translateY(8px) scale(.98);
	pointer-events: none;
	/* 初回アニメが残っていても隠せるように */
	animation: none !important;
}
/* 置き換え（または transition 行を削除） */
#styleLink {
	display: inline-block;
	color: rgba(255, 255, 255, 0.5);
	transition: color .2s ease, opacity .28s ease, transform .28s ease; /* ←追加 */
}
.hero {
	/* pointer-events: none; ←削除 */
	pointer-events: auto; /* に戻すだけでも可 */
}
/* === Hero Pause Button === */
.hero-pause-btn {
	position: absolute;
	right: clamp(16px, 2vw, 40px);
	bottom: clamp(16px, 2vw, 25px);
	z-index: 60;
	width: 54px;
	height: 54px;
	border-radius: 8px;
	/*border: 1px solid rgba(255,255,255,0.2);*/
	border: 1px solid hsla(0, 0%, 100%, .2);
	/*border: none;*/
	background: rgba(0, 0, 0, 0.0);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: grid;
	place-items: center;
	cursor: pointer;
	outline: none;
	transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.hero-pause-btn:hover { /*transform: scale(1.04);*/ background: rgba(255, 255, 255, 0.06);
}
.hero-pause-btn:active {
	transform: scale(0.98);
}
.hero-pause-btn:focus-visible {
	border-color: rgba(255, 255, 255, 0.85);
}
/* 中のアイコン（再生中は「||」） */
.hero-pause-btn .icon {
	position: relative;
	width: 22px;
	height: 22px;
	display: block;
}
.hero-pause-btn .icon::before, .hero-pause-btn .icon::after {
	content: "";
	position: absolute;
	top: 2px;
	width: 2px;
	height: 18px; /* 縦棒の長さ */
	background: #fff;
	opacity: .95;
	border-radius: 1px;
}
.hero-pause-btn .icon::before {
	left: 6px;
}
.hero-pause-btn .icon::after {
	right: 6px;
}
/* 停止中（is-paused）＝「▶」 */
.hero-pause-btn.is-paused .icon::before, .hero-pause-btn.is-paused .icon::after {
	display: none;
}
/*.hero-pause-btn.is-paused .icon{
  width: 0; height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #fff;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}*/
/* 停止中（is-paused）＝「▶」をアウトラインSVGに */
.hero-pause-btn.is-paused .icon {
	width: 24px;
	height: 24px;
	background: none;
	/* SVGを背景として挿入 */
	background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
      <polygon points='6,4 20,12 6,20 6,4'></polygon>\
    </svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%; /* 大きさは調整可能 */
}
/*
.hero-pause-btn{
  transition: opacity .25s ease;
}
.hero-pause-btn.is-hidden{
  opacity: 0;
  pointer-events: none;
}
*/
/* ← 追加・上書き */
.hero-edge {
	pointer-events: none; /* 背面に透過 */
}
/* .hero-edge 内でクリックさせたい要素だけ戻す */
.hero-edge .hero-cta, .hero-edge #heroPauseBtn {
	pointer-events: auto;
}
/* モーダル表示中はヒーローのCTA・一時停止ボタンを強制的に隠す */
/*
body.sheet-lock .hero-cta,
body.sheet-lock #heroPauseBtn {
  display: none !important;
}
*/
/* 透け対策：シートを常に最前面に固定 */
.sheet-overlay {
	z-index: 20000 !important;
}
.sheet-root {
	z-index: 20001 !important;
}
/* 画像モーダル表示中はヒーローのCTA・一時停止ボタンを隠す */
/*body.modal-lock .hero-cta,
body.modal-lock #heroPauseBtn,
body.modal-lock .hero-edge*/
/*body.modal-lock .header__img > a,
body.modal-lock .hamburger,
body.modal-lock .header__text,
body.modal-lock .tools-quick-btn*/ /*{
  display: none !important;
}*/
/* 万一の透け対策：最前面を確保 */
.modal-overlay {
	z-index: 20000 !important;
}
.modal-root {
	z-index: 20001 !important;
}
/* モーダル中 or 閉じ直後は CTA/一時停止ボタンを非表示にする */
/*
body.modal-open .hero-cta,
body.modal-open .or__txt,
body.modal-open .inline-video-box .center-btn,
body.modal-open .inline-video-box-scapes .center-btn,
body.modal-lock .hero-cta,
body.modal-lock .or__txt,
body.modal-lock .inline-video-box .center-btn,
body.modal-lock .inline-video-box-scapes .center-btn,
body.modal-lock .header-banner__eyebrow,
body.modal-lock .header-banner__card,
body.sheet-lock .header-banner__eyebrow,
body.sheet-lock .header-banner__card,
body.sheet-lock .hero-edge
*/
/*body.sheet-lock .header__img > a,
body.sheet-lock .hamburger,
body.sheet-lock .header__text,
body.sheet-lock .tools-quick-btn*/ /*{
  display: none !important;
}*/
/*
body.sheet-open .header__img > a,
body.sheet-open .hamburger,
body.sheet-open .header__text,
body.sheet-open .tools-quick-btn{
  display: none !important;
}
*/
/* 画像モーダル中＆閉じ直後はヒーロー系を完全に隠す（チラ見え防止用カーテン） */
/*
body.modal-open .hero-edge,
body.modal-lock .hero-edge {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}*/
/* 念のためヒーロー内の補助レイヤーも丸ごと抑止 */
/*
body.modal-open #heroInfo,
body.modal-lock #heroInfo,
body.modal-open .hero-overlay-text,
body.modal-lock .hero-overlay-text,
body.modal-open .hero-dots,
body.modal-lock .hero-dots {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}
*/
.hero-cta, #heroPauseBtn {
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.hero-cta.is-visible, #heroPauseBtn.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity .28s ease, transform .28s ease, visibility 0s;
}
/* === Hero CTA: 強制的に transition 制御へ統一（最優先で上書き） === */
#styleLink {
	/* アニメーションを完全停止（残っていても無効化） */
	animation: none !important;
	/* フェード制御の初期状態（非表示） */
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translateY(8px) scale(.98) !important;
	/* visibility はフェード後に切り替え（遅延） */
	transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s !important;
}
#styleLink.is-visible {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
	transition: opacity .28s ease, transform .28s ease, visibility 0s !important;
}
/* === Hero overlay text (video-overlay-text 相当) === */
.hero-overlay-text {
	position: absolute;
	left: clamp(24px, 5vw, 140px);
	/*bottom: calc(clamp(24px, 10vh, 160px) + 98px);*/
	bottom: 192px;
	z-index: 50;
	display: grid;
	gap: 4px;
	/*width: 100%;*/
	/* 文字スタイル（video-overlay-textに寄せた軽めのグラス） */
	/*padding: 10px 14px;*/
	color: #fff;
	/*font-weight: 600;*/
	/*background: rgba(24,24,28,.28);
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 8px;
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	box-shadow: 0 10px 30px rgba(0,0,0,.25);*/
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .28s ease, transform .28s ease;
	pointer-events: none; /* hero-edge基準で透過だが安全側 */
	display: flex;
	flex-direction: column;
	padding-right: 5vw;
}
.hero-overlay-text.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.hero-overlay-text .styleName {
	font-size: 15px;
	font-weight: bold;
}
.hero-overlay-text .carName {
	font-size: 12px;
	opacity: .85;
}
.hero-overlay-text .creator {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	opacity: .75;
}
.hero-overlay-text .creator .icon {
	stroke: currentColor;
}
.hero-overlay-text .styleName {
	font-size: 300%;
	/* font-weight: 700; */
}
.styleName {
	margin-bottom: 0px;
}
.styleName, .carName {
	margin: 0;
	/* line-height: 2.0; */
}
.styleName {
	position: relative;
	color: #FFF;
	/*font-size: 100%;*/
	font-weight: bold;
}
.hero-overlay-text .carName {
	font-size: 90%;
	opacity: .85;
}
.hero-overlay-text .creator {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 90%;
	opacity: .75;
	/*line-height: 2.0;*/
	/*color: rgba(255, 255, 255, 0.8);*/
	font-weight: 700;
}
@media (max-width: 980px) {
	.hero-overlay-text {
		line-height: 2.0;
		left: 0;
		right: 0;
		display: none;
	}
	.hero-overlay-text .styleName {
		font-size: 140%;
		/* font-weight: 700; */
		left: 15px;
	}
	.hero-overlay-text .carName {
		font-size: 70%;
		opacity: .85;
		left: 15px;
	}
	.hero-overlay-text .creator {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 70%;
		opacity: .75;
		/*line-height: 2.0;*/
		/*color: rgba(255, 255, 255, 0.8);*/
		margin-left: 15px;
	}
	.styleName {
		margin-bottom: 0px;
	}
	.styleName, .carName {
		margin: 0;
		/* line-height: 2.0; */
	}
	.styleName {
		position: relative;
		color: #FFF;
		/*font-size: 100%;*/
		font-weight: bold;
	}
	/* ヒーロー内 overlay の creator アイコン */
	.hero-overlay-text .creator .icon {
		width: 16px !important;
		height: 16px !important;
		vertical-align: middle;
		position: relative;
	}
}
/* モーダル表示中はヒーローメタとドットを隠す */
/*
body.modal-open #heroInfo,
body.sheet-open #heroInfo,
body.modal-open .hero-dots,
body.sheet-open .hero-dots {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .2s ease;
}
*/
#heroPauseBtn {
	touch-action: manipulation; /* ← ダブルタップズーム無効化 */
}
/* ヒーロー全体をクリックできることを示す */
/*#hero {
  cursor: pointer;
}*/
#hero .slide {
	will-change: opacity;
	contain: paint;
}
/*
#hero .slide.is-hidden {
	content-visibility: auto;
}
*/
/* 共通の初期状態（隠す） */
.hero-cta, .hero-dots {
	opacity: 0;
	transform: translate3d(0, 8px, 0) scale(.98);
	pointer-events: none;
	transition: opacity .28s ease, transform .32s cubic-bezier(.2, .6, .2, 1);
	/* ジッター対策 */
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	transform-origin: 50% 0%;
}
/* 表示状態だけ上書き */
.hero-cta.is-visible, .hero-dots.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	pointer-events: auto;
}
/* まとめて両方に適用 */
#scroll-seq, #scroll-seq-photo {
	position: relative;
	width: 100%;
	/*margin-left: calc(50% - 50vw);*/
	background: #111111; /* ←末尾の / は削除されていることを確認 */
	overflow-x: clip;
	/*background-image: url(../contents/img/line_black.png);
    background-repeat: repeat;*/
}
#scroll-seq .seq-pin, #scroll-seq-photo .seq-pin {
	position: sticky;
	top: 0;
	height: 100dvh;
	display: grid;
	place-items: center;
	overflow: hidden;
	/*box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.6);
  border: 2px solid hsla(0, 0%, 100%, .08);*/
}
/* フォールバックも両方 */
@supports not (height: 100dvh) {
	#scroll-seq .seq-pin, #scroll-seq-photo .seq-pin {
		height: 100svh;
	}
}
@supports not (height: 100svh) {
	#scroll-seq .seq-pin, #scroll-seq-photo .seq-pin {
		height: 100vh;
	}
}
/* キャンバス */
#seqCanvas, #seqCanvasPhoto {
	width: 100%;
	height: 100%;
	display: block;
}
/* 左下の小キャプション */
#scroll-seq .video-overlay-text, #scroll-seq-photo .video-overlay-text {
	position: absolute !important;
	left: clamp(24px, 6vw, 140px) !important;
	bottom: clamp(24px, 10vh, 160px) !important;
	width: auto !important;
	max-width: min(80%, 1100px);
	z-index: 10;
	display: inline-flex;
	flex-direction: column;
	color: #fff;
	text-align: left;
	font-size: clamp(18px, 2.5vw, 36px);
	font-weight: bold;
	/*line-height: 2.50;*/
	/*text-shadow: 0 2px 8px rgba(0,0,0,.6);*/
	pointer-events: none;
}
/* スペーサ（演出時間） */
#scroll-seq .seq-spacer, #scroll-seq-photo .seq-spacer {
	height: 700svh;
}
/* ===== Scroll Sequence caption (force bottom-left) ===== */
#scroll-seq .video-overlay-text {
	position: absolute !important;
	inset: auto auto auto auto; /* 既存のtop/rightを無効化 */
	left: clamp(24px, 6vw, 140px) !important;
	bottom: clamp(24px, 10vh, 160px) !important;
	width: auto !important; /* 全幅化を防ぐ */
	max-width: min(80%, 1100px);
	z-index: 10;
	display: inline-flex; /* gridの影響を受けにくくする */
	flex-direction: column;
	/*gap: .4em;*/
	color: #fff;
	text-align: left;
	font-size: clamp(18px, 2.5vw, 36px);
	font-weight: bold;
	/*line-height: 2.50;*/
	/*text-shadow: 0 2px 8px rgba(0,0,0,.6);*/
	pointer-events: none;
}
/* サブ行 */
#scroll-seq .video-overlay-text .styleName {
	font-size: 150%;
	font-weight: bold;
	margin-bottom: 0px;
}
#scroll-seq .video-overlay-text .carName {
	font-weight: normal;
	font-size: 60%;
	/*font-weight: 400;*/
	/*opacity: .9;*/
}
#scroll-seq .video-overlay-text .creator {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	/*font-size: .9em;*/ opacity: .85;
	font-size: 60%;
	font-weight: normal;
}
#scroll-seq .creator .icon {
	width: 24px !important;
	height: 24px !important;
	vertical-align: middle;
	position: relative;
}
@media (max-width: 980px) {
	#scroll-seq .video-overlay-text {
		/*left: 50% !important;
    transform: translateX(-50%) !important;*/
		line-height: 1.50;
		/*width: 100% !important;
    max-width: 90% !important;*/
	}
	#scroll-seq .video-overlay-text .styleName {
		font-size: 150%;
		font-weight: bold;
		margin-bottom: 0px;
	}
	#scroll-seq .video-overlay-text .carName {
		font-size: 80%;
		font-weight: normal;
	}
	#scroll-seq .video-overlay-text .creator {
		font-size: 80%;
	}
	#scroll-seq .creator .icon {
		width: 18px !important;
		height: 18px !important;
		vertical-align: middle;
		position: relative;
	}
}
/* ===== Interlude (between hero and sequence) ===== */
.interlude {
	/*min-height: clamp(280px, 52dvh, 560px);*/
	min-height: clamp(100px, 100px, 100px);
	display: grid;
	place-items: center;
	/*padding: clamp(24px, 6vw, 80px)  clamp(16px, 4vw, 48px);
  padding-bottom: 0px;*/
	color: #fff;
	text-align: center;
	/*background: transparent;*/ /* テキストのみ。必要ならグラデ追加可 */
	background: #111111; /* テキストのみ。必要ならグラデ追加可 */
	display: none;
}
.seq2 {
	padding: clamp(24px, 6vw, 80px) clamp(16px, 4vw, 48px);
}
.interlude__inner {
	max-width: min(1100px, 92vw);
}
.interlude .eyebrow {
	font-size: clamp(12px, 1.2vw, 14px);
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .7;
	/*margin-bottom: .6em;*/
	line-height: 2.2;
}
.interlude .headline {
	font-weight: 100;
	/*font-size: clamp(26px, 6.4vw, 64px);*/
	font-size: 42px;
	line-height: 1.15;
	/*margin: 0 0 .4em;*/
	text-wrap: balance;
}
.interlude .sub {
	font-size: clamp(14px, 2.2vw, 20px);
	opacity: .9;
	line-height: 1.8;
}
/* ふわっと現れる */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}
/* モバイルでは少し下寄せ（手前のヒーローと干渉しないように） */
@media (max-width: 980px) {
	.interlude {
		min-height: clamp(240px, 48dvh, 520px);
	}
}
/* ===== Scroll Sequence: 大見出しコピー（Interludeと同トーン） ===== */
#scroll-seq .seq-copy {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(92vw, 1100px);
	text-align: center;
	color: #fff;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s ease, transform .35s ease;
	z-index: 12; /* キャンバス＆小キャプションより前 */
}
#scroll-seq .seq-copy .headline {
	/* .interlude .headline と同じノリ */
	font-weight: 800;
	font-size: clamp(26px, 6.4vw, 64px); /* ← これが“同じトーン”の肝 */
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
	text-shadow: 0 8px 34px rgba(0, 0, 0, .45);
}
#scroll-seq .seq-copy.is-visible {
	opacity: 1;
}
@media (max-width: 980px) {
	#scroll-seq .seq-copy {
		width: 90vw;
	}
}
#seqCopy {
	opacity: 0;
	transform: translate(-50%, -40%); /* 下に潜ませる */
	transition: opacity .6s ease, transform .6s ease;
}
#seqCopy.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%); /* 元の位置に戻す */
}
/* Scroll sequence entry zoom */
#scroll-seq .seq-pin {
	will-change: transform;
	transform-origin: 50% 50%;
}
#seqCanvas {
	will-change: filter;
}
/* ===== 繋ぎフルブリード ===== */
.connector {
	min-height: clamp(280px, 52dvh, 560px);
	display: grid;
	place-items: center;
	padding: clamp(24px, 6vw, 80px) clamp(16px, 4vw, 48px);
	/*padding: 140px 0px 0px 0px;*/
	color: #fff;
	text-align: center;
	/* background: transparent; */
	background: #111111;
}
.connector__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 40px);
	color: #fff;
}
/* 上の小さい英語（eyebrow） */
.connector__eyebrow {
	font-size: clamp(12px, 1.6vw, 16px);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	/*margin: 0 0 12px;*/
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .6s ease, transform .6s ease;
}
/* メイン見出し */
.connector__headline {
	font-size: clamp(28px, 5.6vw, 68px);
	font-weight: 100;
	margin: 0;
	line-height: 1.2;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s ease .1s, transform .8s cubic-bezier(.22, .61, .36, 1) .1s;
}
/* 下の補足（sub） */
.connector__sub {
	font-size: clamp(14px, 2.4vw, 20px);
	font-weight: 400;
	/*margin: 16px 0 0;*/
	color: #ddd;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s ease .2s, transform .6s ease .2s;
}
/* 表示時（全部ふわっと） */
.connector__eyebrow.is-visible, .connector__headline.is-visible, .connector__sub.is-visible {
	opacity: 1;
	transform: none;
}
.connector__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 40px);
	color: #fff;
}
/* 上の小さい英語（eyebrow） */
.connector__eyebrow {
	font-size: clamp(12px, 1.6vw, 16px);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	/*margin: 0 0 12px;*/
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .6s ease, transform .6s ease;
}
/* メイン見出し */
.connector__headline {
	font-size: clamp(28px, 5.6vw, 68px);
	font-weight: 100;
	margin: 0;
	line-height: 1.2;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s ease .1s, transform .8s cubic-bezier(.22, .61, .36, 1) .1s;
}
/* 下の補足（sub） */
.connector__sub {
	font-size: clamp(14px, 2.4vw, 20px);
	font-weight: 400;
	margin: -7px 0 0;
	color: #ddd;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s ease .2s, transform .6s ease .2s;
}
/* 表示時（全部ふわっと） */
.connector__eyebrow.is-visible, .connector__headline.is-visible, .connector__sub.is-visible {
	opacity: 1;
	transform: none;
}
/* ===== ミッドコピー（中央テキスト） ===== */
#scroll-seq .midcopy, #scroll-seq-photo .midcopy {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	text-align: center;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .35s ease, transform .60s cubic-bezier(.2, .7, 0, 1);
}
#scroll-seq .midcopy__line, #scroll-seq-photo .midcopy__line {
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.15;
	/* 画面に追従して程よく大きく */
	font-size: clamp(28px, 5.2vw, 64px);
	padding: 0 .15em;
	/* うっすらグラスっぽい縁取り（任意） */
	text-stroke: 0.5px rgba(255, 255, 255, .25);
	-webkit-text-stroke: 0.5px rgba(255, 255, 255, .25);
}
#scroll-seq .midcopy.is-show, #scroll-seq-photo .midcopy.is-show {
	opacity: 1;
	transform: translateY(0);
}
/* scroll sequence：入口だけ角丸 → 以降はフラット */
#scroll-seq .seq-pin {
	border-radius: 16px; /* 好きな値に調整 */
	overflow: clip; /* はみ出しを切る（Safariなら overflow:hidden でもOK） */
	transition: border-radius .6s ease;
}
#scroll-seq .seq-pin.is-full {
	border-radius: 0;
}
/* ===== Scroll Scene #2 (Full → Shrink／1枚版) ===== */
#scroll-seq-mini {
	position: relative;
	width: 100%;
	/*background: #000;*/
}
#scroll-seq-mini .seq2-pin {
	position: sticky;
	top: 0;
	height: 100svh; /* ← ここが無いと小さいまま */
	display: grid;
	place-items: center;
	overflow: hidden;
}
#scroll-seq-mini .seq2-frame {
	position: relative;
	width: 100vw;
	height: 100svh; /* ← これも必須 */
}
#seq2Canvas {
	display: block;
	width: 100%;
	height: 100%;
}
/* スクロール量（演出時間）— 大きいほどゆっくり */
#scroll-seq-mini .seq2-spacer {
	height: 260svh;
}
/* ===== Mini Scroll Scene: LiquidGlass Frame ===== */
#scroll-seq-mini .seq2-glassframe {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	transform: none; /* 必要なら scale は外す */
	opacity: 0;
	will-change: transform, opacity;
}
/* 中身をくり抜いた“リング”を1枚で作る（外側へ張り出し） */
#scroll-seq-mini .seq2-glassframe::before {
	/*--framePad: clamp(48px, 8vw, 80px);*/ /* ← 倍の太さ */
	--framePad: 100px;
	/*--framePad: 10px;*/
	content: "";
	position: absolute;
	/* ← ここがポイント：パディング分だけ外側へ張り出す */
	inset: calc(var(--framePad) * -1);
	border-radius: 24px;
	padding: var(--framePad);
	/* Liquid Glass風 */
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
	/*background: #FFF;*/
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow:
		0 0 30px rgba(0, 0, 0, 0.45), inset 0 0 1px rgba(255, 255, 255, 0.30);
	backdrop-filter: blur(12px) saturate(150%);
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	/* 中央をくり抜いて“額縁”だけ残す */
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
/* フレームは相対配置＆はみ出し隠し */
#scroll-seq-mini .seq2-frame {
	position: relative;
	overflow: hidden;
}
/* ブラー背景（キャンバスの下に敷く） */
#scroll-seq-mini .seq2-blurbg {
	position: absolute;
	inset: -6%; /* ブラーの端切れ防止に余白を外へ張り出す */
	background-size: cover;
	background-position: center;
	filter: blur(16px) saturate(120%);
	transform: scale(1.08); /* ブラー縮みの縁を隠す */
	will-change: transform, opacity;
	pointer-events: none;
	z-index: 0; /* ← 背面 */
}
/* キャンバスを前面に */
#seq2Canvas {
	position: relative;
	z-index: 1;
	display: block;
}
/* ===== Scroll Scene #2（mini）: iOS/モバイルの余白対策 ===== */
#scroll-seq-mini .seq2-pin, #scroll-seq-mini .seq2-frame {
	height: 100dvh; /* 動的VHでツールバー差分を吸収 */
}
@supports not (height: 100dvh) {
	#scroll-seq-mini .seq2-pin, #scroll-seq-mini .seq2-frame {
		height: 100svh;
	}
}
/* モバイルでは演出スペーサを短くして“尻あまり”を解消 */
/*
@media (max-width: 980px){
  #scroll-seq-mini .seq2-spacer{ height: 140svh; }
}
*/
/* モバイルは細く */
@media (max-width: 980px) {
	/* 中身をくり抜いた“リング”を1枚で作る（外側へ張り出し） */
	#scroll-seq-mini .seq2-glassframe::before {
		/*--framePad: clamp(48px, 8vw, 80px);*/ /* ← 倍の太さ */
		--framePad: 30px; /* モーダルと同じ額縁の太さ */
	}
}
/* ミニシーケンス用：額縁の中に出すオーバレイテキスト */
.seq2-glassframe .video-overlay-text {
	position: absolute;
	left: clamp(14px, 2.2vw, 22px);
	bottom: clamp(14px, 2.2vw, 22px);
	max-width: min(60ch, 72%);
	color: #fff;
	font-size: clamp(12px, 1.6vw, 14px);
	/* ガラス風のチップ */
	/*padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);*/
	/* 初期は隠す */
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
/* 表示状態 */
.seq2-glassframe .video-overlay-text.is-visible {
	opacity: 1;
	transform: none;
}
/* モバイルは少しコンパクトに */
@media (max-width: 980px) {
	.seq2-glassframe .video-overlay-text {
		font-size: 12px;
		padding: 7px 10px;
		border-radius: 8px;
	}
}
.seq2-glassframe {
	position: relative; /* ← 中の子要素を絶対配置できるように */
}
/* テキストを前面に */
.seq2-glassframe .video-overlay-text {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 5; /* ← キャンバスより上に */
}
/* 1) ガラス枠そのものをキャンバスより前面へ */
#scroll-seq-mini .seq2-glassframe {
	z-index: 2; /* ← これで #seq2Canvas(z=1) より上 */
	position: absolute; /* 既存 */
}
/* 2) 擬似要素（額縁リング）は“下の層”に固定 */
#scroll-seq-mini .seq2-glassframe::before {
	z-index: 0;
}
/* 3) テキストは擬似要素より前面に（=見える層）*/
#scroll-seq-mini .seq2-glassframe .video-overlay-text {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 1; /* ← ::before(z=0) の上、枠(z=2)の中で最前面 */
	pointer-events: none;
}
#scroll-seq-mini .seq2-glassframe .video-overlay-text {
	position: absolute;
	left: 0px;
	right: auto;
	bottom: -90px;
	/* ★ topを完全に殺す */
	top: auto !important;
	inset-block-start: auto !important; /* 論理プロパティ対策 */
	z-index: 1;
	pointer-events: none;
	text-shadow: none;
	line-height: 1.5;
}
.vot-layer {
	bottom: -104px !important;
}
.vot-style {
	font-size: 150%;
	letter-spacing: 0em !important;
	font-weight: bold !important;
}
.vot-car {
	font-size: 90%;
}
.vot-credit .creator {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: rgba(255, 255, 255, 0.75);
	font-weight: normal;
}
.vot-credit .photographer {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: rgba(255, 255, 255, 0.75);
	font-weight: normal;
}
.vot-layer .icon {
	width: 18px !important;
	height: 18px !important;
	stroke-width: 2; /* 線の太さはそのまま */
}
@media (max-width: 980px) {
	.vot-layer {
		margin-top: 25px;
		line-height: 1.5;
	}
	.vot-style {
		font-size: 116%;
	}
	.vot-car {
		font-size: 70%;
	}
	.vot-credit .creator {
		font-size: 70%;
	}
	.vot-credit .photographer {
		font-size: 70%;
	}
	.vot-layer .icon {
		width: 12px !important;
		height: 12px !important;
		stroke-width: 2; /* 線の太さはそのまま */
	}
}
/* 共通デフォルト（お好みで調整） */
#scroll-seq .seq-spacer, #scroll-seq-photo .seq-spacer, #scroll-seq-mini .seq2-spacer {
	height: var(--seq-duration, 700svh);
}
/* 片方だけ変えたいならセレクタを分ける */
#scroll-seq-mini .seq2-spacer {
	height: 150svh;
} /* フォト用 */
#scroll-seq .seq-spacer {
	height: 200svh;
} /* リバリー用（例） */
#scroll-seq-mini .seq2-glassframe .video-overlay-text {
	width: 100%; /* glassと同じ幅 */
	max-width: none; /* 折り返し制限を外す */
	left: 0;
	right: 0;
	margin: 0 auto; /* 中央に揃える */
}
/* #seqInfo の入退場アニメ */
#seqInfo {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.45s ease, transform 0.45s ease;
	will-change: opacity, transform;
}
#seqInfo.is-visible {
	opacity: 1;
	transform: translateY(0);
}
/* 退場（下へスッ） */
#seqInfo.is-hiding {
	opacity: 0;
	transform: translateY(20px);
}
/* scroll-seq 調整 */
#scroll-seq .seq-pin {
	position: sticky;
	top: 0;
	height: 100vh; /* sticky領域を確保 */
	overflow: visible; /* テキストを外にはみ出せる */
}
#scroll-seq .seq-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 32px;
	z-index: 1;
	transition: border-radius 0.4s ease;
}
#scroll-seq .seq-clip.no-radius {
	border-radius: 0; /* 拡大完了後に解除 */
}
/* 基本文字スタイル */
#scroll-seq .seq-intro .copy {
	margin: 0;
	font-weight: bold;
	/*font-size: clamp(28px, 5.5vw, 80px);*/
	font-size: 64px;
	color: #fff;
	/*text-shadow: 0 2px 16px rgba(0,0,0,.6);*/
	white-space: nowrap; /* ← 改行禁止 */
	word-break: keep-all; /* ← CJKでも単語途中で折り返さない */
}
#scroll-seq .seq-intro {
	position: absolute;
	top: -160px; /* 画像の上に配置（調整可） */
	left: 0px; /* #seqInfo と同じ左マージンに */
	/*transform: translateX(-50%);*/
	transform: none;
	z-index: 5;
	pointer-events: none;
	/*display: none;*/
}
/* グラデーション部分 */
#scroll-seq .seq-intro .copy .grad {
	display: inline-block; /* ← ここが折り返しポイントにならないように */
	background: linear-gradient(90deg, #ff6a00, #ff00aa); /* ←色は自由に調整 */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
#scroll-seq .seq-intro .after-grad {
	position: relative;
	display: inline-block;
	color: #fff; /* 白は常に表示 */
}
#scroll-seq .seq-intro .after-grad::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	display: inline-block;
	white-space: inherit;
	line-height: inherit;
	background: linear-gradient(90deg, #ff00aa, #ff6a00);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
/* ズーム開始でフェードイン／戻りでフェードアウト */
#scroll-seq .seq-intro.zoom-started .after-grad::after {
	opacity: 0; /*1でグラデオン0でグラデオフ*/
}
/* scroll-seq-mini 用：carName の高さを常に2行分に固定 */
#scroll-seq-mini .vot-layer .vot-car {
	line-height: 1.4; /* 行間を揃える */
	min-height: calc(1em * 1.4 * 2); /* 2行分の高さ */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden; /* 余分な行を隠す（可変でもOK） */
	text-overflow: ellipsis; /* 長文対策で省略記号（任意） */
	font-weight: 400;
}
@media (max-width: 980px) {
	#scroll-seq .seq-intro {
		top: -100px;
	}
	#scroll-seq .seq-intro .subcopy {
		font-size: 24px !important;
	}
	#scroll-seq .seq-intro .copy {
		font-size: 48px;
	}
}
@media (max-width: 728px) {
	#scroll-seq .seq-intro {
		top: -70px;
	}
	#scroll-seq .seq-intro .subcopy {
		font-size: 16px !important;
		margin: 0 0 -5px 0 !important;
	}
	#scroll-seq .seq-intro .copy {
		font-size: 32px;
	}
}
@media (max-width: 480px) {
	#scroll-seq .seq-intro {
		top: -70px;
	}
	#scroll-seq .seq-intro .subcopy {
		font-size: 16px !important;
		margin: 0 0 -5px 0 !important;
	}
	#scroll-seq .seq-intro .copy {
		font-size: 24px;
	}
}
@keyframes kenburns {
	0% {
		transform: scale(1) translate(0, 0);
	}
	100% {
		transform: scale(1.15) translate(-2%, -2%);
	}
}
.kenburns {
	animation: kenburns 15s ease-in-out forwards;
}
/* ===== Caption: fade only ===== */ :root {
	--cap-fade-ms: 360ms;
	--cap-fade-ease: cubic-bezier(.2, 0, .2, 1);
}
/* #seqInfo に限定して transform の遷移を無効化してフェードだけに */
#seqInfo {
	opacity: 0;
	transform: none !important; /* ← 下からのスライドを打ち消す */
	transition: opacity var(--cap-fade-ms) var(--cap-fade-ease) !important;
	will-change: opacity;
}
#seqInfo.is-visible {
	opacity: 1;
}
#seqInfo.is-hiding {
	opacity: 0;
}
/* お好みでモーション軽減にも対応 */
@media (prefers-reduced-motion: reduce) {
	#seqInfo {
		transition-duration: 0ms;
	}
}
/* Scroll-seq caption: stack lines vertically */
#scroll-seq #seqInfo .cap {
	display: grid; /* 縦に積む */
	grid-auto-rows: min-content;
	row-gap: .35rem; /* 行の間隔 */
}
#scroll-seq #seqInfo .styleName, #scroll-seq #seqInfo .carName {
	display: block; /* それぞれ1行扱いに */
	line-height: 1.15;
}
#scroll-seq #seqInfo .creator {
	display: inline-flex; /* アイコン＋名前を横並び */
	align-items: center;
	gap: .5em;
}
#scroll-seq #seqInfo .creator .icon {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}
.section-subtitle {
	position: relative;
	/*font-size: 1rem;*/
	font-size: 90%;
	color: rgba(255, 255, 255, 0.6);
	/*color: rgba(255, 255, 255, 1.0);*/
	/*font-weight: 400;*/
	text-align: left;
	/*top: 10px;*/
	font-weight: 700;
}
#scroll-seq .seq-intro .subcopy {
	position: relative;
	font-size: 32px; /* 小さめ文字 */
	font-weight: normal;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 -0px 0; /* 下に少し余白を入れて「Dye it in your own」と間隔を確保 */
	/*line-height: 1.4;*/
	left: 0px;
}
.copy .grad, .subcopy .grad {
	background: linear-gradient(270deg, #ff00aa, #ff6a00);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent; /* Safari/iOS対策 */
	display: inline-block; /* 日本語テキストに確実に反映させる */
}
.scroll-seq .decor {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 100%;
	opacity: 1; /* ← 最初から表示 */
	pointer-events: none;
	z-index: 2; /* canvasより前、テキストより後でもOK */
}
.scroll-seq .decor-left {
	left: -120px;
}
.scroll-seq .decor-right {
	right: -120px;
}
@media (max-width: 980px) {
	.scroll-seq .decor {
		display: none;
	}
}
.seq-intro--center {
	opacity: 1;
} /* 初期は見えている */
/* h2ずらすやつ */
.pickup-title, .photo-title {
	text-indent: -0.10em;
}
.showcase-title {
	text-indent: -0.12em;
}
.scapes-title {
	text-indent: -0.06em;
}
/* ----- Pickup: テキストラッパーを縦積みレイアウト ----- */
.main__content__pick .txt__wrap {
	display: flex;
	flex-direction: column;
	gap: 2px; /* 行間の微調整 */
	/*height: 80px;*/ /* 行儀を揃える固定枠（80〜110で好み調整） */
}
/* タイトル */
.main__content__pick .styleName {
	font-weight: 700;
	line-height: 1.2;
}
/*
.main__content__pick .carName {
	--car-lh: 1.3em;
	line-height: var(--car-lh);
	min-height: calc(2 * var(--car-lh));
	max-height: calc(2 * var(--car-lh));
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
*/
/* 横に伸びる原因（flexアイテムの min-width:auto）を潰す */
.main__content__pick > a {
	min-width: 0;
	max-width: 100%;
	overflow: hidden; /* 念のため */
}
/* テキスト側も flex なので同様に */
.main__content__pick > a .main__content__pick__box, .main__content__pick > a .txt__wrap {
	min-width: 0;
}
.main__content__pick .carName {
	display: block;
	max-width: 100%;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* 既存の2行クランプを無効化 */
	-webkit-line-clamp: unset;
	-webkit-box-orient: unset;
}
/* メタ情報を常に txt__wrap の下端へ */
.main__content__pick .card-meta {
	margin-top: auto; /* これだけで下に張り付く */
	font-size: 70%;
	opacity: 1;
	margin-top: 12px;
}
/* ===== All Styles（livery.html）→ index.htmlピックアップと同一仕様に揃える ===== */
/* 1) カード骨格（背景オーバーレイや角丸/枠線/影も index と同じ） */
.styles-grid .style-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: calc(100% / 3 - 42px);
	padding: 15px;
	border-radius: 8px;
	background: #1C1E20;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, .6);
	border: 1px solid hsla(0, 0%, 100%, .08);
	color: inherit;
	text-decoration: none;
	overflow: hidden; /* ::before がはみ出さないように */
}
/* 2) 背景だけふわっと明るく（index の ::before と同じ） */
.styles-grid .style-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, .06);
	opacity: 0;
	transition: opacity .2s ease;
	z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
	.styles-grid .style-card:hover::before {
		opacity: 1;
	}
}
/* 3) 中身は前面へ（テキスト/画像がオーバーレイに隠れない） */
.styles-grid .style-card > * {
	position: relative;
	z-index: 1;
}
/* 4) 画像：高さ固定＋拡大アニメ（index と同じ） */
.styles-grid .style-card .img__wrap {
	height: 110px;
	overflow: hidden;
}
.styles-grid .style-card .img__wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .2s ease;
}
@media (hover: hover) and (pointer: fine) {
	.styles-grid .style-card:hover .img__wrap img {
		transform: scale(1.05);
	}
}
/* 5) テキスト縦フレックス：carName は2行確保、meta は常に最下部 */
.styles-grid .style-card .txt__wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/*height: 96px; */ /* 揃え用。80〜110で調整OK */
}
.styles-grid .style-card .styleName {
	font-weight: bold;
	line-height: 1.2;
}
/*
.styles-grid .style-card .carName {
	--car-lh: 1.3em;
	line-height: var(--car-lh);
	min-height: calc(2 * var(--car-lh));
	max-height: calc(2 * var(--car-lh));
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 70%;
}
*/
.styles-grid .style-card .carName {
	white-space: nowrap; /* 改行させない */
	overflow: hidden; /* はみ出しを隠す */
	text-overflow: ellipsis; /* … を表示 */
}
/* 6) ここが決め手：card-meta を “フロー内” で下貼り付きに */
.styles-grid .style-card .card-meta {
	position: static !important; /* 以前の absolute を打ち消す */
	inset: auto !important;
	margin-top: auto; /* 縦フレックスの下端へ押し付け */
	display: flex;
	justify-content: space-between;
	font-size: 70%;
	color: rgba(255, 255, 255, .6);
	pointer-events: none;
	opacity: 1;
	margin-top: 12px;
}
.styles-grid .style-card .styleName {
	white-space: nowrap; /* 改行させない */
	overflow: hidden; /* はみ出しを隠す */
	text-overflow: ellipsis; /* … を表示 */
}
/* 7) レスポンシブ（任意：index の3列幅に寄せたまま2列/1列へ） */
@media (max-width: 980px) {
	.styles-grid .style-card {
		width: calc(100% / 2 - 42px);
	}
	.styles-grid .style-card .img__wrap {
		height: 22.4vw;
	}
}
@media (max-width: 640px) {
	.styles-grid .style-card {
		width: 100%;
	}
}
.header-social {
	display: inline-flex;
	gap: 8px; /* アイコン間の余白 */
	/*margin-left: 10px;*/ /* tsutchieya.com との距離 */
	vertical-align: middle;
}
.header-social a {
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.3s ease;
}
.header-social a:hover {
	color: #fff;
}
.header-social svg {
	display: block;
}
.header-separator {
	display: inline-block;
	width: 1px;
	height: 24px; /* アイコンと揃うくらいの高さ */
	background: rgba(255, 255, 255, 0.4); /* 半透明の白線 */
	margin: 0 8px; /* 左右の余白 */
	vertical-align: middle;
}
/* ===== ヘッダー右上バナー（縦レイアウト） ===== */
.header-banner {
	position: fixed;
	top: 102px; /* tsutchieya.com のすぐ下 */
	right: 40px;
	z-index: 20;
	display: grid;
	gap: 12px;
	width: 300px; /* 縦型カードの幅（調整可） */
	/*background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));*/
	backdrop-filter: blur(16px) saturate(100%);
	border-radius: 8px;
}
.header-banner__eyebrow {
	position: fixed;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, .75);
	text-align: right;
	letter-spacing: .06em;
	top: 72px;
	right: 40px;
	z-index: 21;
}
.header-banner__card {
	display: flex;
	flex-direction: column; /* ← 縦並び */
	text-decoration: none;
	color: inherit;
	padding: 12px;
	border-radius: 8px;
	/*background: #1C1E20;*/
	border: 1px solid hsla(0, 0%, 100%, .2);
	box-shadow: 0 0 6px rgba(0, 0, 0, .2);
	transition: filter .2s ease, transform .2s ease;
	/*background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));*/
	/*backdrop-filter: blur(16px) saturate(100%);*/
	display: none;
}
.header-banner__img {
	width: 100%;
	height: 70px; /* カード比率を保つ高さ */
	overflow: hidden;
	border-radius: 6px;
	margin-bottom: 8px;
}
.header-banner__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.header-banner__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
.header-banner__body .styleName {
	font-size: 95%;
	font-weight: 700;
	color: #fff;
}
/* carName を2行固定表示にして高さを揃える */
.header-banner__body .carName {
	font-size: 62%;
	color: rgba(255, 255, 255, .85);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 最大2行 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2em * 1.4); /* 2行分の高さを常に確保 */
}
.header-banner__body .card-meta {
	font-size: 62%;
	color: rgba(255, 255, 255, .7);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* モバイルでは非表示 */
@media (max-width: 980px) {
	.header-banner {
		display: none;
	}
}
/* 右上バナーのフェード表示制御 */
.header-banner {
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity .28s ease, transform .28s ease;
}
.header-banner.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
/* 右上ラベル（eyebrow）のフェード表示制御を追加 */
.header-banner__eyebrow, .hero-pause-btn {
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity .28s ease, transform .28s ease;
}
.header-banner__eyebrow.is-visible, .hero-pause-btn.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.header-banner__eyebrow {
	display: none;
}
/* モバイルでは非表示（バナーと同じ扱いに） */
@media (max-width: 980px) {
	.header-banner__eyebrow {
		display: none;
	}
}
.header-banner:hover {
	background: rgba(255, 255, 255, 0.06);
}
/* === Hero Info === */
.hero-overlay-text .styleName {
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* 1行だけ表示 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1em * 1.2); /* 常に1行分の高さ確保 */
	font-weight: bold;
}
.hero-overlay-text .carName {
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 最大2行表示 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2em * 1.2); /* 常に2行分の高さ確保 */
	font-weight: 700;
}
/* video-overlay-text 内のキャプションレイヤーをフェードさせる */
.video-overlay-text .vot-layer {
	opacity: 0;
	transition: opacity .4s ease; /* ← フェード時間は好みで */
	will-change: opacity;
}
.main__content__spin {
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
/* 既存 .spin-viewer {...} はそのまま */
.spin-viewer__caption {
	position: absolute;
	inset: 0 0 auto 0; /* 上部に配置 */
	padding: 20px 24px 40px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: none; /* ←ドラッグの邪魔をしない */
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
/* 上部にうっすらグラデで可読性UP */
.spin-viewer__caption::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 40%;
	background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
	pointer-events: none;
}
.sv-cap__title {
	position: relative;
	z-index: 1;
	font-weight: 800;
	font-size: clamp(16px, 2.4vw, 28px);
	line-height: 1.2;
	letter-spacing: .2px;
}
.sv-cap__meta {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: .5em;
	font-size: clamp(12px, 1.6vw, 14px);
	opacity: .95;
}
.sv-cap__creator {
	pointer-events: auto; /* リンクはクリック可能に戻す */
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.sv-cap__creator:hover {
	border-bottom-color: #fff;
}
.sv-cap__dot {
	opacity: .8;
}
/* スモール画面で余白少なめ */
@media (max-width:480px) {
	.spin-viewer__caption {
		padding: 14px 14px 26px;
	}
}
.spin-viewer {
	position: relative;
	/*width: min(900px, 100%);*/
	/*width: calc(100% / 2 - 10px);*/
	/*width: 100%;*/
	aspect-ratio: 16/9;
	/*margin: 24px auto;*/
	background: #1C1E20;
	/*border-radius: 16px;*/
	overflow: hidden;
	user-select: none;
	touch-action: none; /* スワイプ操作のため水平スクロール抑止 */
	/*box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);*/
}
.spin-viewer__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity .2s ease;
}
.spin-viewer__img {
	user-select: none; /* 選択禁止 */
	-webkit-user-drag: none; /* Safariでのドラッグ防止 */
	pointer-events: none; /* マウスイベント拾わない */
}
.spin-viewer__loader {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #cbd5e1;
	font: 500 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	opacity: .85;
}
.spin-viewer.is-ready .spin-viewer__loader {
	display: none;
}
.spin-viewer.is-dragging {
	cursor: grabbing;
}
.spin-viewer:not(.is-dragging) {
	cursor: grab;
}
/* バッジ本体 */
.spin-viewer__badge {
	position: absolute;
	/*right: 12px;
	bottom: 10px;*/
	display: inline-flex;
	align-items: center;
	/*gap: 6px;*/
	/*padding: 6px 10px;*/
	border-radius: 9999px;
	color: #fff;
	/*background: rgba(0, 0, 0, .45);
	backdrop-filter: blur(6px);
	font: 600 12px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;*/
	letter-spacing: .2px;
	pointer-events: none; /* ←ドラッグの邪魔をしない */
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .25s ease, transform .25s ease;
	/*z-index:4;*/
}
/* 画像の準備ができたら自動でフェードイン（JSが .is-ready を付けてくれる） */
.spin-viewer.is-ready .spin-viewer__badge {
	opacity: .95;
	transform: none;
}
/* ホバー時は少し強調（PCだけ効く） */
.spin-viewer:hover .spin-viewer__badge {
	opacity: 1;
}
/* ドラッグ中は少し控えめに（任意） */
.spin-viewer__badge.is-dim {
	opacity: .35;
}
/* アイコン微調整 */
.sv-badge__icon {
	display: block;
}
.sv-badge__text {
	display: block;
}
/* モーダル（sheet）内では、spin-viewer で縦パンを許可しない */
/*
.sheet-root .spin-viewer,
.sheet-body .spin-viewer{
  touch-action: none !important;
}
*/
/* === Spin swipe hint === */
.spin-hint {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	z-index: 10;
	opacity: 0;
}
/* 表示（フェード） */
.spin-hint.is-show {
	animation: spinHintFade 1.2s ease forwards;
}
@keyframes spinHintFade {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.spin-hint-inner {
	display: flex;
	align-items: center;
	/*gap: 14px;*/
}
/* ★重要：通常時は「止める」＝勝手に再生させない */
.spin-hint-hand {
	border-radius: 50%;
	background: rgba(255, 255, 255, 1.00);
	transform: translateX(-36px);
	animation: none;
}
/*
.spin-hint-arrow {
  width: 42px;
  height: 2px;
  background: rgba(255,255,255,.6);
}
*/
/* ★重要：is-show のときだけ動かす */
.spin-hint.is-show .spin-hint-hand {
	animation: spinSwipe 1.2s ease both;
}
@keyframes spinSwipe {
	from {
		transform: translateX(-36px);
	}
	to {
		transform: translateX(36px);
	}
}
.spin-hint-hand {
	width: 56px;
	height: 56px;
	background: none;
	color: rgba(255, 255, 255, 1.00);
	display: grid;
	place-items: center;
	/*filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));*/
	/* すでに入れてある左スタート位置はそのまま */
	transform: translateX(-36px);
}
.spin-hint-icon {
	width: 100%;
	height: 100%;
	display: block;
}
/* === 背後の暗転オーバレイ === */
.spin-hint::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .2); /* 暗さ */
	opacity: 0;
}
.spin-hint.is-show::before {
	animation: spinHintDim 1.2s ease forwards;
}
@keyframes spinHintDim {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@media (max-width:980px) {
	.spin-hint-hand {
		transform: translateX(-24px);
		width: 40px;
		height: 40px;
	}
	@keyframes spinSwipe {
		from {
			transform: translateX(-24px);
		}
		to {
			transform: translateX(24px);
		}
	}
}
.spin-viewer__badge {
	position: absolute;
	right: 15px;
	bottom: 10px;
	pointer-events: none;
}
.spin-viewer__badge--svg {
	/*width: clamp(48px, 14%, 72px);*/
	width: 48px;
	aspect-ratio: 122.88 / 65.79;
}
.spin-viewer__badge--svg .sv-badge__icon {
	width: 100%;
	height: 100%;
	display: block;
	fill: rgba(255, 255, 255, 1.00);
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
	opacity: .5;
}
.index-top {
	/*margin-top: 40px;*/
}
.index-bottom {
	margin-bottom: 40px;
}
.sheet-body .spin-viewer {
	width: 100% !important;
	aspect-ratio: 16/9;
}
/* 縦スクロールは常にブラウザに任せる（ピンチズームも可） */
.spin-viewer {
	touch-action: pan-y pinch-zoom;
	position: relative;
}
/* showcase の spin-viewer を横幅いっぱいに */
#showcaseGrid .spin-viewer {
	width: 100%;
}
/* ベルト内のカードレイアウト */
#footer-belt .belt-card .main__content__pick__box {
	display: flex;
	flex-direction: column; /* 画像→テキスト の縦積み */
	/*gap: 8px;*/ /* 画像とテキストの間隔 */
}
/* 画像枠は既存に準拠（必要なら高さ比率指定など） */
#footer-belt .belt-card .img__wrap {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}
#footer-belt .belt-card .img__wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* テキストラッパ内で縦積み */
#footer-belt .belt-card .txt__wrap {
	display: flex;
	flex-direction: column;
	/*gap: 2px;*/
	min-height: 0;
}
/* 各行の見た目（お好みで調整） */
#footer-belt .belt-card .styleName {
	display: block;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
/*
#footer-belt .belt-card .carName {
	display: block;
	line-height: 1.25;
	opacity: .9;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}
*/
#footer-belt .belt-card .creator {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: .9em;
	opacity: .75;
	margin-top: 12px;
}
#footer-belt .belt-card .creator .icon {
	flex-shrink: 0;
}
/* ===== ベルトカードのホバー演出 ===== */
@media (hover: hover) {
	/* カード本体：背景を“だけ”明るくするためのレイヤーを仕込む */
	#footer-belt .belt-card .main__content__pick__box {
		position: relative;
		border-radius: 12px; /* 既存値に合わせて */
		overflow: hidden; /* 角からはみ出さない */
	}
	/* 背景だけを明るくする疑似要素（子要素には影響しない） */
	#footer-belt .belt-card .main__content__pick__box::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0; /* 背景層 */
		pointer-events: none;
		background: rgba(255, 255, 255, 0.06);
		opacity: 0;
		transition: opacity .2s ease;
	}
	/* 中身（画像・テキスト）は背景レイヤーより上に */
	#footer-belt .belt-card .img__wrap, #footer-belt .belt-card .txt__wrap {
		position: relative;
		z-index: 1;
	}
	/* 画像を少し拡大（テキストはそのまま） */
	#footer-belt .belt-card .img__wrap {
		overflow: hidden;
		border-radius: inherit;
	}
	#footer-belt .belt-card .img__wrap img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: scale(1); /* 初期 */
		transition: transform .2s ease;
		will-change: transform;
	}
	/* :hover 時の変化 */
	#footer-belt .belt-card:hover .main__content__pick__box::before {
		opacity: 1; /* 背景だけ明るく */
	}
	#footer-belt .belt-card:hover .img__wrap img {
		transform: scale(1.05); /* 画像だけ 4% 拡大（好みで 1.03〜1.06） */
	}
}
/* 動きが苦手な人に配慮（OS設定に追従） */
@media (prefers-reduced-motion: reduce) {
	#footer-belt .belt-card .img__wrap img, #footer-belt .belt-card .main__content__pick__box::before, #footer-belt .belt-card .main__content__pick__box {
		transition: none !important;
	}
}
/* ギャラリーは常時 is-revealing 状態で動くように変更 */
#galleryGrid .main__content__gall__box {
	opacity: 0;
	transform: translateY(20px) scale(1.00);
	transition:
		opacity .45s ease, transform .60s cubic-bezier(.22, .61, .36, 1);
}
#galleryGrid .main__content__gall__box.is-revealed {
	opacity: 1;
	transform: none;
}
/*モーダル別デザイン*/
/*
.modal-glass {
    padding: 10px 10px 0px 10px;
    border-radius: 0px;
    background: #FFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.40);
    display: inline-block;
    min-height: 260px;
}
.modal-card-meta {
    padding: 0 20px;
	padding-bottom: 20px;
    pointer-events: none;
}
.modal-card-meta .meta-stack {
    margin-top: 16px;
}
.modal-card-meta .meta-stack,
.modal-card-meta .meta-title,
.modal-card-meta .card-meta,
.card-meta .creator, .card-meta .photographer,
.modal-card-meta .icon, .modal-card-meta .card-meta svg, .modal-card-meta .card-meta svg[width], .modal-card-meta .card-meta svg[height]{
	color: #000;
	stroke: #000;
}
*/
/* ===== ガラス製トップバー ===== */
.topbar-glass {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 70px; /* 好みで 56–72px */
	opacity: 1;
	pointer-events: none; /* クリックは従来の要素に通す */
	transform: translateY(-6px);
	transition: opacity .22s ease, transform .22s ease;
	/* Liquid Glass */
	/*background: rgba(18,18,18,0.35);*/
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	/*box-shadow:
    0 8px 24px rgba(0,0,0,.35),
    inset 0 -1px 0 rgba(255,255,255,.06);*/
	z-index: 18;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}
/* ヒーローが見えなくなったら有効化 */
body.glass-on .topbar-glass {
	opacity: 1;
	transform: translateY(0);
}
/* ===== Apple風ヘッダー背景 ===== */
body.glass-on .topbar-glass {
	background: rgba(22, 22, 23, 0.8);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 薄い境界線 */
	box-shadow: none; /* Appleは影を使わずシンプル */
}
/* モーダル中に「ヒーローが見えていない場合だけ」出す */
body.modal-open.glass-keep .topbar-glass, body.modal-lock.glass-keep .topbar-glass {
	opacity: 1;
	transform: translateY(0);
}
body.sheet-open.glass-keep .topbar-glass, body.sheet-lock.glass-keep .topbar-glass {
	opacity: 1;
	transform: translateY(0);
}
/* ヒーロー内でシートを開いている間だけ、ハンバーガー・ロゴ・テキストを消す */
body.chrome-hide .hamburger, body.chrome-hide .menu-toggle, body.chrome-hide .header__menu, body.chrome-hide .header__img > a, body.chrome-hide .header__text {
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
body.sheet-open .topbar-glass, body.modal-open .topbar-glass {
	background: rgba(22, 22, 23, 0.8);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: none;
}
.spin360 {
	width: 100%;
}
.spin360 img {
	width: 100%;
	height: auto;
	display: block;
	background: #1C1E20; /* 読み込み中の背景 */
	/* 画像読み込み前の仮比率（任意で変更） */
	aspect-ratio: 16 / 9;
	/*border-radius: 32px;
	  margin-bottom: 80px;*/
}
.spin360 {
	position: relative;
	width: 100%;
	height: 100%;
}
.spin360-overlay-text {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	text-align: center;
	z-index: 2;
	/*line-height: 1.5;*/
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	/*display: none;*/
}
/*
@media (max-width: 980px) {
	.spin360-overlay-text {
		display: none;
	}
}
*/
.spin360-overlay-text__subtitle {
	font-size: clamp(0.8rem, 2vw, 1.2rem);
	/* font-size: 120%; */
	/* opacity: 0.85; */
	/* display: none; */
	font-weight: 700;
}
.spin360-overlay-text__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	/* font-size: 400%; */
	font-weight: bold;
	/* margin-bottom: .4em; */
	line-height: 1.3;
	white-space: nowrap;
}
@media (max-width: 980px) {
	.spin360 {
		position: relative;
		width: 100%;
		height: 100lvh;
		min-height: 100lvh;
		overflow: hidden;
		background: #1C1E20;
	}
	.spin360 img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		aspect-ratio: auto;
	}
}
@supports not (height: 100svh) {
	@media (max-width: 980px) {
		.spin360 {
			height: 100dvh;
			min-height: 100dvh;
		}
	}
}
@supports not (height: 100dvh) {
	@media (max-width: 980px) {
		.spin360 {
			height: 100vh;
			min-height: 100vh;
		}
	}
}
/* hero overlay/cta のフェードアウト（1pxスクロールで適用される is-hidden 用） */
.hero-overlay-text, .hero-cta {
	transition: opacity .45s ease, transform .45s ease;
}
.hero-overlay-text.is-hidden, .hero-cta.is-hidden {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}
/* Apple TV 風 全画面固定動画セクション */
.immersive {
	position: relative;
	height: 150vh; /* セクションを長めに確保する（→スクロールは進む） */
	z-index: -1;
}
.immersive__video {
	position: fixed; /* ← sticky じゃなく fixed */
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1; /* コンテンツの裏に常に固定 */
}
.immersive__overlay {
	position: relative;
	height: 150vh; /* 最初の1画面分でテキストをセンタリング */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	z-index: 1;
	/*display: none;*/
}
/* テキストオーバーレイをsticky化 */
/*
.immersive__overlay {
	position: sticky;
	top: 30%;
	z-index: 2;
	text-align: center;
	color: #fff;
	font-size: 2rem;
	pointer-events: none;
}
*/
.immersive__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	/*font-size: 400%;*/
	font-weight: bold;
	/*margin-bottom: .4em;*/
	line-height: 1.3;
}
.immersive__subtitle {
	/*font-size: clamp(1.2rem, 3vw, 2rem);*/
	font-size: clamp(0.8rem, 2vw, 1.2rem);
	/*font-size: 120%;*/
	/*opacity: 0.85;*/
	/*display: none;*/
	font-weight: 700;
}
/* fixed 背景動画のアク/非アク可視制御 */
.immersive__video {
	opacity: 0;
	visibility: hidden;
	/*transition: opacity .25s ease;*/
	/* 既存: position:fixed; inset:0; object-fit:cover; z-index:-1; を流用 */
}
.immersive.is-active .immersive__video {
	opacity: 1;
	visibility: visible;
}
/* まずはデフォで“非アクティブは隠す” */
.immersive .immersive__poster {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0; /* 動画より1段下（動画はz-index:1想定） */
	transition: opacity .45s ease;
	pointer-events: none;
	will-change: opacity;
}
/* アクティブになったらポスターを表示（＝上書きされない） */
.immersive.is-active .immersive__poster {
	opacity: 1;
	visibility: visible;
}
/* 動画が ready になったら、アクティブでもポスターを退場 */
.immersive.is-active[data-ready="1"] .immersive__poster {
	opacity: 0;
	visibility: hidden;
}
/* モバイルはフェード時間を少し長めに（“パッ”対策） */
/*
@media (max-width: 980px){
  .immersive__video{ transition: opacity .45s ease; }
}
*/
.seq2-frame {
	position: relative;
}
.seq2-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	/*text-shadow: 0 0 8px rgba(0, 0, 0, .65);*/
}
.seq2-subtitle {
	/*font-size: clamp(1.2rem, 3vw, 2rem);*/
	font-size: clamp(0.8rem, 2vw, 1.2rem);
	/*font-size: 120%;*/
	/*opacity: 0.85;*/
	/*margin-bottom: 0.4em;*/
	white-space: nowrap;
	font-weight: 700;
}
.seq2-title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	/*font-size: 400%;*/
	font-weight: bold;
	line-height: 1.3;
	white-space: nowrap;
}
@media (max-width: 980px) {
	.sheet-root.is-half {
		place-items: end center;
	}
	.sheet-root.is-half .sheet-glass {
		width: 100%;
		max-width: 100%;
		border-radius: 24px 24px 0 0;
		transform: translateY(100%);
		box-sizing: border-box;
		border: none;
		border-top: 1px solid hsla(0, 0%, 100%, .1);
		/*height: clamp(420px, 75lvh, 860px) !important;
		max-height: 90lvh !important;
		padding-bottom: calc(16px + env(safe-area-inset-bottom));*/
	}
	.sheet-root.is-half.is-open .sheet-glass {
		transform: translateY(0);
	}
	.sheet-root.is-half {
		align-items: start; /* モバイル時だけ上寄せ */
	}
	.sheet-root .sheet-glass {
		height: var(--sheet-h, auto);
		margin-top: var(--sheet-offset, 0);
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
	}
}
/* モーダル展開中、ヒーローから1pxでもスクロールしていたら隠す */
body.hero-chrome-off .hero-edge .hero-overlay-text, body.hero-chrome-off .hero-edge .hero-cta, body.hero-chrome-off #heroPauseBtn {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity .2s ease;
}
/* === モーダル展開時、スクロールしていたらヒーローUIを消す === */
/* （前にある #styleLink.is-visible の指定を確実に上書き） */
body.hero-ui-off #heroInfo, body.hero-ui-off .hero-cta, body.hero-ui-off #styleLink, /* 念のためIDも */ body.hero-ui-off #styleLink.is-visible, /* これが肝心：後勝ち&!importantを潰す */ body.hero-ui-off #heroPauseBtn {
	display: none !important;
}
/* 影（下端グラデ）も消す */
body.hero-ui-off .hero-edge::after, body.hero-chrome-off .hero-edge::after {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
/* （任意）復帰直後のチラ見え防止：1フレームだけ影のトランジション無効化 */
body.hero-ui-resume .hero-edge::after {
	transition: none !important;
}
/* === 共通：オーバーレイのフェード＆デブラー（ぼかし解除） === */
#sheetOverlay, .sheet-overlay, .modal-overlay {
	opacity: 0;
	pointer-events: none;
	background: rgba(0, 0, 0, 0); /* close時は透明へ */
	backdrop-filter: blur(0px) saturate(1); /* ぼかし0 → 見える */
	-webkit-backdrop-filter: blur(0px) saturate(1);
	transition:
		opacity .30s ease, background-color .30s ease, backdrop-filter .30s ease, -webkit-backdrop-filter .30s ease;
	will-change: opacity, backdrop-filter;
}
#sheetOverlay.is-visible, .sheet-overlay.is-visible, .modal-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
	/*background: rgba(0,0,0,0.18);*/
	background: rgba(0, 0, 0, 0.35);
	/*backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);*/
	/*backdrop-filter: blur(20px) saturate(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);*/
	backdrop-filter: blur(2px) saturate(1.05);
	-webkit-backdrop-filter: blur(2px) saturate(1.05);
	/*backdrop-filter: blur(0px) saturate(1.05);
  -webkit-backdrop-filter: blur(0px) saturate(1.05);*/
}
/* 低モーション設定のユーザーにはアニメ弱め or カット */
@media (prefers-reduced-motion: reduce) {
	#sheetOverlay, .modal-overlay {
		transition: opacity .1s linear;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
}
/* モーダル中の条件一致時だけ、上の影（::before）を消す */
body.modal-edge-top-off .hero-edge::before {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
/* （任意）復帰フレームの“にゅっ”抑制 */
body.hero-ui-resume .hero-edge::before {
	transition: none !important;
}
/* modal glass の基本トランジション（JSが上書きするが保険） */
.modal-root {
	pointer-events: none;
}
.modal-root[style*="display: block"] {
	pointer-events: auto;
}
.modal-glass {
	opacity: 0;
	transform: scale(0.995);
	transition: opacity .28s ease, transform .28s ease;
	will-change: opacity, transform;
}
/* 合成外れ対策：一時レイヤ固定 */
.paint-guard {
	transform: translateZ(0);
	will-change: opacity, transform;
	backface-visibility: hidden;
	contain: paint;
}
/* 可変ブラー（JSで --blur-px を0へアニメ） */
.immersive__video {
	filter: blur(var(--blur-px, 14px));
	will-change: filter;
}
.modal-glass {
	position: relative;
	padding: 0px;
	border-radius: none;
	background: none;
	backdrop-filter: none;
	border: none;
	box-shadow: none;
	min-height: 0px !important;
}
.modal-card-meta .meta-stack .meta-title {
	display: none;
}
.modal-card-meta .meta-overview, .meta-stack .meta-overview {
	font-size: 80%;
}
.meta-stack .card-meta .contributors .creator {
	display: none;
}
.modal-card-meta {
	position: absolute;
	width: 100%;
	top: calc(100% + 0px);
	padding-bottom: 0px;
}
.modal-img {
	max-width: 79vw;
	max-height: 76dvh;
}
@media (max-width: 980px) {
	.modal-img {
		max-width: 100vw;
		max-height: 66dvh;
	}
}
.modal-card-meta .meta-stack {
	margin-top: 0px;
	padding-top: 10px;
}
.modal-card-meta .meta-overview {
	/*min-height: calc(1em * var(--modal-title-lh));*/
	line-height: 1.3;
	min-height: 1em;
}
@media (max-width: 980px) {
	.modal-card-meta .meta-stack {
		padding: 10px 10px;
	}
}
/* ヒーロー上端の写真アプリ風ブラー帯 */
.hero-blur-top {
	position: fixed;
	inset: 0 0 auto 0;
	height: 90px; /* 好みで 120〜200px */
	z-index: 2; /* hero-overlay-text より下か上か調整 */
	backdrop-filter: blur(3px) saturate(100%);
	-webkit-backdrop-filter: blur(3px) saturate(100%);
	/* グラデマスクで下へ行くほど透明化 → 強弱がついたように見える */
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .8) 40%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .8) 40%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none; /* UIを邪魔しない */
}
.hero-blur-top.blur-off {
	display: none !important;
}
button.modal-arrow {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
button.modal-arrow.is-active {
	opacity: 1;
	pointer-events: auto;
}
/* ===== モーダル左右ゾーン ===== */
.modal-zone {
	position: absolute;
	top: 0;
	width: 33%;
	height: 100%;
	cursor: pointer;
	z-index: 5; /* 矢印より後ろにしたいなら調整 */
}
/* 左右 */
.modal-zone.left-zone {
	left: 0;
}
.modal-zone.right-zone {
	right: 0;
}
/* ゾーンにマウスが入ったとき矢印を表示 */
.modal-zone.left-zone:hover ~ .modal-arrow.left, .modal-zone.right-zone:hover ~ .modal-arrow.right {
	opacity: 1;
	pointer-events: auto;
}
.modal-glass .modal-close {
	right: -15px;
	top: -45px;
	/*display: none;*/
}
@media (max-width: 980px) {
	.modal-glass .modal-close {
		right: 0px;
	}
}
/* PC用 */
@media (hover: hover) {
	.modal-arrow {
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
	}
	.modal-arrow.is-active {
		opacity: 1;
		pointer-events: auto;
	}
}
/* モバイル用 */
@media (hover: none) and (pointer: coarse) {
	.modal-arrow {
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
	}
	.modal-arrow.flash {
		opacity: 1;
		pointer-events: auto;
	}
}
.modal-card-meta.no-side-padding .meta-stack {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/*
@media (max-width: 980px){
	.modal-root,
	.modal-glass,
	.modal-img{
	width: 100%;
	}
}
*/
/*
@media (max-width: 980px){
	.modal-root,
	.modal-glass,
	.modal-img{
	box-sizing: border-box;
 	width:100%;
 	scrollbar-gutter: stable both-edges;
	}
}
*/
/* === Showcase: 一括リビール（ギャラリー方式） === */
#showcaseGrid.is-revealing .spin-card {
	opacity: 0;
	transform: translateY(-20px) scale(1.00);
}
#showcaseGrid.is-revealing .spin-card.is-visible {
	opacity: 1;
	transform: none;
}
/* 元のトランジション強度（style / gallery と同じニュアンス） */
.spin-card {
	transition: opacity .6s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
	#showcaseGrid.is-revealing .spin-card, #showcaseGrid.is-revealing .spin-card.is-visible, .spin-card {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}
.seq2-text {
	opacity: 0;
	transform: translate(-50%, -40%); /* 初期は少し下に */
	transition: opacity .7s ease, transform .7s ease;
	pointer-events: none;
}
.seq2-text.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%); /* 中央へ戻る＝下からふわっと */
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.seq2-text {
		transition: none;
	}
}
.modal-card-meta .photographer svg {
	stroke-width: 2 !important; /* creator と同じに */
}
/* iOS Safari対策：実DOMの最上部黒バー（常設） */
/*
#iosTopBlackBar {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: calc(env(safe-area-inset-top, 0px) + 4px);
	background: #000;
	pointer-events: none;
	z-index: 30000;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	backface-visibility: hidden;
}
*/
/* “抜けた時の下地”保険 */
html, body {
	background: #000;
}
/* 一言コメント：角丸で囲う + 反転(差分合成)で“透明っぽい”文字 */
.one-liner {
	display: inline-block;
	margin-top: 20px;
	margin-bottom: 6px;
	padding: 8px 32px;
	border-radius: 12px;
	font-weight: bold;
	/*background: #494949;*/
	/*border: 1px solid hsla(0, 0%, 100%, .14);
    background: rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);*/
}
.one-liner > p, .one-liner > span {
	color: #fff;
}
/* 中身の余白を整える（既存 figcaption > p/span を上書き） */
/*
.one-liner > p{
  margin: 0 0 8px 0;
  font-weight: 700;
  letter-spacing: .02em;
}
.one-liner > span{
  margin: 0;
  display: block;
  line-height: 1.6;
}
*/
/* “反転”の核：背景との「差」で文字が出る（透明反転っぽい見え方） */
@supports (mix-blend-mode: difference) {
	.one-liner {
		background: rgba(255, 255, 255, .20);
	}
	.one-liner > p, .one-liner > span {
		color: #fff;
		mix-blend-mode: difference;
	}
}
.gt7-gallery-btn {
	display: flex;
	flex-direction: column;
	justify-content: center; /* 縦中央 */
	align-items: center; /* 横中央 */
	/*gap: 6px;*/
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	border-radius: 12px;
	background: linear-gradient(90deg, rgba(0, 0, 255, 1), rgba(255, 0, 0, 1));
	color: #fff;
	text-align: center;
	font-weight: bold;
	letter-spacing: .02em;
	line-height: 1.4; /* ← 行ボックスの暴れ防止 */
	text-decoration: none;
	filter: brightness(1) saturate(1);
	transition:
		filter .2s ease, background .25s ease, transform .15s ease;
	will-change: filter, transform;
}
.private {
	background: #494949;
	padding: 15px;
	pointer-events: none;
}
/*
@supports (mix-blend-mode: difference) {
	.private{
		background: rgba(255, 255, 255, .20);
		padding: 15px;
		pointer-events: none;
	}
}
*/
@media (max-width: 980px) {
	.gt7-gallery-btn {
		margin-bottom: 14px;
	}
}
.gt7-gallery-btn:hover {
	filter: brightness(1.35);
}
@media (pointer: coarse) and (hover: none) {
	.gt7-gallery-btn:hover {
		filter: brightness(1.00);
	}
}
/*
.gt7-gallery-btn:hover{
  background: rgba(255,255,255,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transform: translateY(-1px);
}

.gt7-gallery-btn:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
*/
figcaption > a > span {
	display: block;
	font-size: 60%;
	margin-top: 2px;
}
.main__content__form {
	width: 100%;
}
/* ===== 投稿フォーム（雛型）===== */
.submit-card {
	width: calc(100% - 44px);
	margin: 0 auto;
	padding: 22px;
	border-radius: 16px;
	background: #191919;
	/*border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);*/
}
.submit-lead {
	/*margin: 0 0 16px 0;*/
	margin: 0 0 24px 0;
	font-size: 90%;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.70);
}
/* タブの上にある説明文の高さを揃える */
/*
.submit-lead{
  line-height: 1.4;
  min-height: calc(1.4em * 2);
  margin: 0 0 12px 0;
}
*/
.submit-lead .help-link {
	font-size: inherit; /* 本文と同じサイズ */
	line-height: 19px; /* 共有リンクとは？に合わせる */
}
.submit-form {
	width: 100%;
}
.submit-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 14px;
	align-items: start;
}
.field {
	display: grid;
	gap: 8px;
}
.field--full {
	grid-column: 1 / -1;
}
.field-label {
	font-size: 80%;
	color: rgba(255, 255, 255, 0.72);
	letter-spacing: .02em;
}
.field-input, .field-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 12px;
	border-radius: 12px;
	resize: vertical;
	/* ▼ ここが変更点 */
	background: #f4f4f4;
	color: #111;
	border: 1px solid rgba(0, 0, 0, 0.12);
	outline: none;
	transition:
		border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
/* プレースホルダー */
.field-input::placeholder, .field-textarea::placeholder {
	color: rgba(0, 0, 0, 0.45);
}
/* フォーカス時 */
.field-input:focus, .field-textarea:focus {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.22);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}
.field-file {
	width: 100%;
	color: rgba(255, 255, 255, 0.85);
}
.field-help {
	font-size: 75%;
	color: rgba(255, 255, 255, 0.55);
}
.submit-actions {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.submit-btn {
	width: 100%;
	font-size: 100%;
	/*margin: 12px 0;*/
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 32px;
	border-radius: 9999px;
	/* ▼ 青 → 赤 グラデーション */
	background: linear-gradient(90deg, rgba(0, 0, 255, 1.00), rgba(255, 0, 0, 1.00));
	color: #fff;
	font-weight: 600;
	letter-spacing: .02em;
	border: none;
	cursor: pointer;
	box-shadow: 0 0 30px rgba(0, 0, 0, 1.00);
	transition:
		transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.submit-btn:hover {
	filter: brightness(1.35);
}
.submit-note {
	margin: 0;
	font-size: 75%;
	color: rgba(255, 255, 255, 0.55);
}
/* レスポンシブ */
@media (max-width: 980px) {
	/*.submit-card{ width: 89vw; padding: 18px; }*/
	.submit-grid {
		grid-template-columns: 1fr;
	}
}
/* ===== /投稿フォーム（雛型）===== */
/* ラベル行：左（ラベル） 右（ヘルプリンク） */
.field-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
/* 「共有リンクとは？」 */
.help-link {
	appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	color: rgba(255, 255, 255, .72);
	font-size: 80%;
	cursor: pointer;
	text-decoration: underline;
	/*text-underline-offset: 3px;*/
}
.help-link:hover {
	color: rgba(255, 255, 255, .9);
}
/* =========================
   共有リンクとは？（Pickup sheetと同じ展開）
   ========================= */
.sharehelp-sheet {
	/* sheet-glass を活かしつつ中身だけ調整 */
	/*padding: 18px 18px 16px;*/
}
.sharehelp-head {
	/*padding-right: 44px;*/ /* 右上×ボタンの逃げ */
	margin-bottom: 15px;
}
.sharehelp-title {
	/*margin: 2px 0 10px 0;*/
	font-size: 90%;
	color: #fff;
	font-weight: bold;
}
.sharehelp-text {
	margin: 0 0 15px 0;
	color: rgba(255, 255, 255, 0.75);
	/*line-height: 1.7;*/
	font-size: 90%;
}
.sharehelp-scroll img {
	width: 100%;
	margin-top: -24px;
}
.sharehelp-scroll a {
	color: rgba(255, 255, 255, 0.75);
	font-size: 90%;
	margin-top: -24px;
}
.sharehelp-txt-exp {
	color: rgba(255, 255, 255, 0.75);
	font-size: 90%;
	margin-top: -28px;
}
/* sharehelp 内の URL リンクはテキスト幅だけにする */
#shareHelpBody > a {
	display: inline-block;
	width: fit-content;
}
.sharehelp-txt {
	color: #fff;
	font-size: 90%;
	/*margin-bottom: 3px;*/
	font-weight: bold;
	/*margin-bottom: 15px;*/
}
.sharehelp-txt > span {
	color: rgba(255, 255, 255, 0.75);
	font-size: 90%;
	/*margin-bottom: 3px;*/
	font-weight: normal;
}
/* 共有リンク sheet を “中だけスクロール” 構造に */
.sharehelp-sheet {
	display: flex;
	flex-direction: column;
	overscroll-behavior: none !important;
	background: #2d2f30;
	backdrop-filter: none;
}
/* 本文だけスクロール */
.sharehelp-scroll {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	overscroll-behavior: none !important;
	gap: 32px;
}
.sharehelp-scroll {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .35) rgba(0, 0, 0, .25);
}
/* =========================
   モバイル端末ではスクロールバー非表示
   ========================= */
@media (hover: none) and (pointer: coarse) {
	/* WebKit (iOS Safari / Android Chrome) */
	.sharehelp-scroll::-webkit-scrollbar {
		display: none;
	}
	/* Firefox */
	.sharehelp-scroll {
		scrollbar-width: none;
	}
}
.visual-gap {
	position: relative;
	height: 100dvh;
	min-height: 100vh; /* フォールバック */
	overflow: hidden;
	background: #000; /* 念のため */
}
.visual-gap__bg {
	position: absolute;
	inset: 0;
	background-image: url("../contents/img/index/contact.webp");
	background-size: cover;
	background-position: center;
}
.visual-gap::before, .visual-gap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	pointer-events: none;
	z-index: 2;
}
.visual-gap::before {
	top: 0;
	background: linear-gradient(to bottom, rgba(17, 17, 17, 1.00), rgba(0, 0, 0, 0));
}
.visual-gap::after {
	bottom: 0;
	background: linear-gradient(to top, rgba(17, 17, 17, 1.00), rgba(0, 0, 0, 0));
}
.agree-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	/*margin: 0 0 12px;*/
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .78);
	user-select: none;
}
.agree-check input {
	margin-top: 3px; /* 1行目のベースライン合わせ */
	flex: 0 0 auto;
	accent-color: rgba(255, 255, 255, .9); /* 対応ブラウザで効く */
}
.agree-check:has(input:focus-visible) {
	outline: 2px solid rgba(255, 255, 255, .18);
	outline-offset: 6px;
	border-radius: 10px;
}
/* 同意チェックを“1ブロック”にする */
.agree-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	/*margin: 12px 0 12px;*/
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	/*border: 1px solid rgba(255,255,255,.10);*/
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .78);
}
/* クリックしやすさUP */
.agree-check input {
	margin-top: 3px;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	accent-color: rgba(255, 255, 255, .9);
}
/* キーボード操作時だけ、うっすら強調 */
.agree-check input:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .18);
	outline-offset: 4px;
	border-radius: 4px;
}
.scroll-indicator {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 6;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	opacity: .75;
	transition: opacity .25s ease, transform .25s ease;
}
.scroll-indicator svg {
	width: 40px;
	height: 40px;
	stroke: #fff;
	stroke-width: 1;
	fill: none;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
	animation: scrollHint 1.9s ease-in-out infinite;
}
/* 呼吸するように下へ */
@keyframes scrollHint {
	0% {
		transform: translateY(0);
		opacity: .5;
	}
	50% {
		transform: translateY(8px);
		opacity: 1;
	}
	100% {
		transform: translateY(0);
		opacity: .5;
	}
}
.scroll-indicator.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 10px);
}
/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {
	.scroll-indicator svg {
		animation: none;
	}
}
.hero-quickjump {
	position: fixed;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	z-index: 70;
	display: flex;
	gap: 14px;
	align-items: center;
	opacity: .9;
	transition: opacity .25s ease, transform .25s ease;
}
.hqj-btn {
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 12px;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform .15s ease, background .2s ease;
}
.hqj-btn svg {
	width: 28px;
	height: 28px;
	stroke: #fff;
	stroke-width: 1.8;
	fill: none;
	opacity: .92;
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .55));
}
.hqj-btn:hover {
	background: rgba(255, 255, 255, .06);
}
.hqj-btn:active {
	transform: scale(.96);
}
.hqj-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .8);
	outline-offset: 3px;
}
/* 少しスクロールしたら消す（任意） */
.hero-quickjump.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 10px);
}
.hero-quickjump--text {
	position: fixed;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	z-index: 70;
	display: flex;
	gap: 22px;
	align-items: center;
	opacity: .85;
	transition: opacity .25s ease, transform .25s ease;
}
.hqj-text {
	background: none;
	border: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	/*color: #fff;*/
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
	/*transition: opacity .15s ease, transform .15s ease;*/
	transition: color .15s ease, text-shadow .15s ease;
}
.hqj-text:hover {
	color: #fff;
	/*transform: translateY(-1px);*/
}
.hqj-text:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .8);
	outline-offset: 4px;
}
/* スクロールしたら消す */
.hero-quickjump.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 10px);
}
/* hero-edge は pointer-events: none なので quickjump だけクリック復活 */
.hero-edge .hero-quickjump {
	pointer-events: auto;
}
/* fixed をやめて、hero-edge 内 absolute にする */
.hero-edge .hero-quickjump--text {
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	z-index: 70;
}
/* スマホの bottom は今の値を踏襲 */
@media (max-width: 980px) {
	.hero-edge .hero-quickjump--text {
		bottom: 88px;
		width: 100%;
		padding-inline: 16px;
		box-sizing: border-box;
		justify-content: space-between;
		gap: 0;
	}
}
/* 退場アニメもCTAに寄せる（translateY + scale） */
.hero-edge .hero-quickjump.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(8px) scale(.98);
}
/* ===== Floating Submit Card（sheet-glassと同じ“エレベーター”）===== */
.floating-submit {
	position: fixed;
	right: 15px;
	bottom: 15px;
	width: 292px;
	padding: 14px;
	border-radius: 16px;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(20, 20, 20, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 0px 30px rgba(0, 0, 0, 0.60);
	z-index: 1500;
	/* ▼初期：見えない＆下に沈める（自分の高さ=100%ぶん） */
	opacity: 0;
	transform: translateY(100%) scale(1.00);
	will-change: opacity, transform;
	transition:
		opacity .28s ease, transform .32s cubic-bezier(.22, .61, .36, 1);
	/* カード自体はクリック無効（ボタンのみ可） */
	pointer-events: none;
}
/* ボタンだけクリック有効 */
.floating-submit .floating-submit__cta {
	pointer-events: auto;
}
/* 入場（open） */
.floating-submit.is-show {
	opacity: 1;
	transform: none; /* 元位置へ“スッ” */
}
/* 退場（closing）：必要ならJSで is-closing を付ける */
.floating-submit.is-closing {
	opacity: 0;
	/*transform: translateY(-8px) scale(.98);*/
	transform: translateY(-8px) scale(1.00);
}
/* テキスト */
.floating-submit__eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, 0.78);
}
.floating-submit__title {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 700;
}
/* CTA（リンク/ボタン） */
.floating-submit__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12px;
	/*color: rgba(255,255,255,0.78);*/
	text-decoration: none;
}
.floating-submit__cta svg {
	width: 14px;
	height: 14px;
}
.floating-submit .submit-btn {
	box-sizing: border-box;
}
/* モバイル */
@media (max-width: 980px) {
	.floating-submit {
		left: 16px;
		right: 16px;
		width: auto;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}
}
/* モーション弱め希望に配慮 */
@media (prefers-reduced-motion: reduce) {
	.floating-submit {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}
/* ===== close button（pickup modal と同一思想）===== */
.floating-submit__close {
	position: absolute;
	top: 7px;
	right: 7px;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	/*border: 1px solid rgba(255,255,255,.14);*/
	border: none;
	/*background: rgba(20,20,20,.55);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);*/
	background: none;
	display: grid;
	place-items: center;
	cursor: pointer;
	pointer-events: auto; /* カード本体は無効なので必須 */
	transition:
		background .2s ease, border-color .2s ease, filter .2s ease;
}
.floating-submit__close svg {
	width: 24px;
	height: 24px;
	stroke: rgba(255, 255, 255, .75);
	stroke-width: 2;
	stroke-linecap: round;
	fill: none;
	transition: stroke .2s ease;
}
/* hover */
.floating-submit__close:hover {
	/*background: rgba(20,20,20,.75);
  border-color: rgba(255,255,255,.28);*/
	filter: brightness(1.05);
}
/* アイコンだけも少し強調 */
.floating-submit__close:hover svg {
	stroke: rgba(255, 255, 255, 1.00);
	transition: stroke .2s ease;
}
/* active（押した感だけ） */
/*
.floating-submit__close:active{
  filter: brightness(.95);
}
*/
/* フォーカス可視（キーボード操作） */
.floating-submit__close:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, .35);
}
.form__wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 80px;
	margin-top: 40px;
}
/* ===== Tabs (Livery / Photo) ===== */
.submit-tabs {
	display: inline-flex;
	gap: 8px;
	padding: 6px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.08);
	/*border: 1px solid rgba(255,255,255,0.10);*/
	margin: 0 0 16px 0;
}
.submit-tab {
	appearance: none;
	border: none;
	cursor: pointer;
	padding: 10px 14px;
	border-radius: 9999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	font-size: 85%;
	letter-spacing: .02em;
	transition: filter .2s ease, background .2s ease, color .2s ease;
}
.submit-tab:hover {
	filter: brightness(1.2);
}
.submit-tab.is-active {
	background: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.submit-panel[hidden] {
	display: none !important;
}
.tab-anchor {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.agree-block {
	/*margin-top: 10px;*/
}
.agree-note {
	margin: 6px 0 0 0; /* チェックボックス位置に揃える */
	font-size: 75%;
	color: rgba(255, 255, 255, 0.55);
	/*line-height: 1.5;*/
}
.file-preview {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}
.file-thumb {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	/*border: 1px solid rgba(255,255,255,0.10);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);*/
}
.file-thumb img {
	width: 100%;
	height: 96px;
	object-fit: cover;
	display: block;
}
.file-thumb .file-meta {
	padding: 6px 8px;
	font-size: 12px;
	opacity: 0.8;
	line-height: 1.35;
	word-break: break-all;
}
.file-thumb .thumb-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(0, 0, 0, 0.55);
	color: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	display: grid;
	place-items: center;
	line-height: 1;
	font-size: 18px;
	transition: filter .2s ease, transform .2s ease;
}
.file-thumb .thumb-remove:hover {
	filter: brightness(1.2);
	/*transform: scale(1.04);*/
}
.field-label.is-required::after {
	content: " *";
	color: #ff4d4f; /* 赤 */
	margin-left: 2px;
	font-weight: 600;
}
.contact__header {
	position: sticky;
	top: 0;
	z-index: 9;
	height: 70px;
	background: rgba(17, 17, 17, 0.65);
	backdrop-filter: saturate(180%) blur(20px);
}
.contact__header__index {
	display: none;
}
@media (max-width:980px) {
	.contact__header__index {
		height: 5px;
		background: #000;
		display: block;
	}
}
/* privacy sheet 専用：上詰め＋行間を gap で管理 */
.sheet-body.privacy-scroll {
	display: block;
}
/* 各セクション間の gap */
.sheet-body.privacy-scroll > * {
	margin-top: 0;
	margin-bottom: 24px;
}
/* 最後だけ余白を消す */
.sheet-body.privacy-scroll > *:last-child {
	margin-bottom: 0;
}
/* contact：同意まわりを縦積み（上→下）にする */
.submit-actions--stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* help-link を左端に寄せる（念のため） */
.submit-actions--stack .help-link {
	width: fit-content;
}
/* 送信ボタンは横幅100%のまま下へ */
.submit-actions--stack .submit-btn {
	width: 100%;
}
.main__content__privacy {
	width: 100%;
	margin-top: 40px
}
.main__content__privacy__box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin-bottom: 40px;
}
.main__content__privacy__box::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, .65);
}
.main__content__privacy__txt {
	width: 100%;
}
.main__content__privacy__txt ul {
	list-style: disc;
	padding: 16px 20px;
}
.sharehelp-txt ul {
	list-style: disc;
	padding: 6px 0 0 20px;
}
.main__content__privacy__txt a {
	color: #FFF;
}
.privacy-title {
	font-weight: bold;
	margin-bottom: 6px;
}
.main__content__issues__box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin-bottom: 40px;
}
/* ===== Cookie Consent (Liquid Glass-ish / fits your menu tone) ===== */
.cc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 12050; /* menu(12003)より上、モーダルより下にしたければ調整 */
	padding: 15px 15px calc(15px + env(safe-area-inset-bottom));
	display: grid;
	place-items: end center;
	pointer-events: none;
}
.cc[hidden] {
	display: none !important;
}
.cc__card {
	pointer-events: auto;
	/*width:min(920px, calc(100vw - 24px));*/
	border-radius: 16px;
	/*padding:14px 14px 12px;*/
	padding: 20px;
	/*
  background:rgba(17,17,17,0.65);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
*/
	transform: translateY(12px);
	opacity: 0;
	transition: opacity .22s ease, transform .22s ease;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(20, 20, 20, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 0px 30px rgba(0, 0, 0, 0.60);
	/*background: #2d2f30;*/
}
.cc__card a {
	color: #FFF;
}
.cc.is-show .cc__card {
	transform: translateY(0);
	opacity: 1;
}
.cc__title {
	margin: 0 0 6px;
	/*font-size:12px;*/
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
	font-weight: bold;
}
.cc__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	opacity: .92;
}
.cc__desc--ja {
	margin-top: 6px;
	opacity: .86;
}
.cc__link {
	text-decoration: underline;
	/*text-underline-offset:3px;*/
	opacity: .95;
}
.cc__actions {
	margin-top: 12px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.cc__btn {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
	color: inherit;
	border-radius: 999px;
	padding: 10px 14px;
	font-size: 13px;
	cursor: pointer;
	transition: transform .08s ease, background .18s ease, border-color .18s ease;
}
.cc__btn:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.22);
}
.cc__btn:active {
	transform: scale(0.98);
}
.cc__btn--primary {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.16);
}
.cc__prefs {
	margin-top: 12px;
	/*padding-top:12px;*/
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.cc__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	padding: 10px 0;
}
.cc__rowTitle {
	font-size: 13px;
	font-weight: 600;
}
.cc__rowDesc {
	font-size: 12px;
	opacity: .82;
	margin-top: 3px;
}
.cc__pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	font-size: 12px;
	opacity: .9;
	cursor: default;
}
/* Switch */
.cc__switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 26px;
}
.cc__switch input {
	display: none;
}
.cc__slider {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.14);
	transition: .18s ease;
}
.cc__slider::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	left: 3px;
	top: 2px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	transition: .18s ease;
}
#cc-analytics:checked + .cc__slider {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.22);
}
#cc-analytics:checked + .cc__slider::before {
	transform: translateX(18px);
}
.cc__actions--prefs {
	margin-top: 8px;
}
@media (max-width:560px) {
	.cc__actions {
		justify-content: stretch;
	}
	.cc__btn {
		flex: 1 1 auto;
	}
}
.loading {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: grid;
	place-items: center;
	z-index: 13000;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .35s ease;
}
.loading.is-hide {
	opacity: 0;
	pointer-events: none;
}
.loading__inner {
	width: min(520px, 86vw);
	display: grid;
	gap: 6px;
}
/* ローディングの車（SVG）の表示サイズを小さく */
.loading .car {
	width: min(260px, 70vw); /* ← ここでサイズ調整 */
	margin-inline: auto;
	display: block; /* inline-svg由来の余白防止 */
	line-height: 0; /* ← これが効くこと多い */
	transform: scale(0.82); /* ← 20%小さく */
	transform-origin: center;
}
@media (max-width:980px) {
	.loading .car {
		transform: scale(0.65);
	}
}
@media (max-width: 640px) and (hover: none) and (pointer: coarse) {
	#loading {
		display: none !important;
	}
}
.car {
	width: 100%;
}
.car__svg {
	width: 100%;
	height: auto;
	display: none;
	filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .55));
}
.car[data-car="sedan"] .car__svg--sedan {
	display: block;
}
.car[data-car="coupe"] .car__svg--coupe {
	display: block;
}
.car__base {
	fill: rgba(255, 255, 255, .18); /* シルエット */
}
.car__fill {
	fill: rgba(255, 255, 255, .85); /* 塗り色（好みで変更OK） */
}
/* ローディングの塗り（青→赤グラデ） */
.car__fill--grad {
	opacity: .85;
}
.car__wheel {
	fill: rgba(255, 255, 255, .12);
}
.loading__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	color: rgba(255, 255, 255, .72);
	letter-spacing: .04em;
	width: fit-content;
	margin-inline: auto;
	gap: 8px;
	margin-top: -12px;
}
.loading__label {
	font-size: 12px;
}
.loading__pct {
	font-size: 12px;
	color: rgba(255, 255, 255, .9);
}
.loading__bar {
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	overflow: hidden;
}
.loading__barInner {
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: rgba(255, 255, 255, .85);
	transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) {
	.loading {
		transition: none;
	}
	.loading__barInner {
		transition: none;
	}
}
.style-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	width: 100%;
}
.confirm-list {
	display: grid;
	grid-template-columns: 120px 1fr;
	/*gap: 12px 16px;*/
	/*font-size: 90%;*/
}
.confirm-list dt {
	color: rgba(255, 255, 255, 1.0);
}
.confirm-list dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
}
/* =========================
   確認モーダルだけ：上に詰める
   ========================= */
#confirmSheet .sharehelp-scroll {
	flex: 0 0 auto; /* ← sharehelp本体の flex:1 を上書き */
	overflow: visible; /* 内容が少ないならスクロール不要 */
}
/* ボタンブロックの余白＆配置（念のため） */
#confirmSheet .sharehelp-actions {
	margin-top: 16px;
	display: flex;
	justify-content: flex-end;
	/*gap: 12px;*/
}
/*
#confirmSheet .sharehelp-sheet{
  max-height: min(70vh, 520px);
}
*/
/* confirm の本文を縦並びにして、最後の actions を下に押し下げる */
#confirmSheet #confirmBody {
	display: flex;
	flex-direction: column;
	height: 100%;
}
/* ここが肝：actions を常に一番下へ */
#confirmSheet .sharehelp-actions {
	margin-top: auto; /* ★余った高さを上に集める */
	padding-top: 16px;
	display: flex;
	justify-content: flex-end;
	/*gap: 12px;*/
}
/* 以前入れた「confirmだけflexを殺す」設定は邪魔なので無効化 */
#confirmSheet .sharehelp-scroll {
	flex: 1 1 auto; /* ← 0 0 auto をやめる */
	overflow: auto; /* 内容が増えたらスクロール */
}
#confirmSheet .confirm-list {
	display: grid;
	grid-template-columns: 1fr; /* 2列をやめる */
	/*gap: 6px;*/
}
#confirmSheet .confirm-list dt {
	/*margin-top: 12px;*/
	color: rgba(255, 255, 255, 1.00);
	font-size: 90%;
	font-weight: bold;
}
#confirmSheet .confirm-list dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 90%;
	margin-bottom: 15px;
}
#confirmSheet .confirm-footer .is-revise, :is(#confirmSheet, #postConfirmSheet) .confirm-footer .is-revise {
	width: 100%;
	font-size: 100%;
	/* margin: 12px 0; */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 32px;
	border-radius: 9999px;
	background: #494949;
	color: #fff;
	font-weight: 600;
	letter-spacing: .02em;
	border: none;
	cursor: pointer;
	/*box-shadow: 0 0 15px rgba(0, 0, 0, 0.65);*/
	transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
#confirmSheet .confirm-footer .is-primary, :is(#confirmSheet, #postConfirmSheet) .confirm-footer .is-primary {
	width: 100%;
	font-size: 100%;
	/* margin: 12px 0; */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 32px;
	border-radius: 9999px;
	background: linear-gradient(90deg, rgba(0, 0, 255, 1.00), rgba(255, 0, 0, 1.00));
	color: #fff;
	font-weight: 600;
	letter-spacing: .02em;
	border: none;
	cursor: pointer;
	/*box-shadow: 0 0 15px rgba(0, 0, 0, 0.65);*/
	transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
/* マウスオーバー可能な端末だけ hover を有効化 */
@media (hover: hover) and (pointer: fine) {
	#confirmSheet .confirm-footer .is-revise:hover {
		filter: brightness(0.75);
	}
	#confirmSheet .confirm-footer .is-primary:hover {
		filter: brightness(1.35);
	}
}
/* confirm：下部固定フッター（縦並び） */
#confirmSheet .confirm-footer {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	/*padding: 15px;*/
	/*padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));*/
	/*
  background: linear-gradient(
    to top,
    rgba(32,32,32,0.95),
    rgba(32,32,32,0.85) 60%,
    rgba(32,32,32,0)
  );
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,0.08);
	*/
}
/* ボタンを横いっぱいに（任意だけどおすすめ） */
#confirmSheet .confirm-footer .sharehelp-ok {
	width: 100%;
}
@media (max-width:980px) {
	#confirmSheet .confirm-footer {
		margin-bottom: 14px;
	}
}
/* confirm：中身だけスクロール、ボタンは下固定 */
#confirmSheet .sharehelp-sheet {
	display: flex;
	flex-direction: column;
}
#confirmSheet #confirmBody {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden; /* ★ 全体はスクロールさせない */
}
/* 本文スクロール領域 */
#confirmSheet .confirm-main {
	flex: 1 1 auto;
	overflow: auto;
}
/* 長文のはみ出し保険（メール/本文など） */
#confirmSheet .confirm-list dd {
	overflow-wrap: anywhere;
	word-break: break-word;
}
#confirmSheet .confirm-list {
	margin-top: 15px;
}
#postConfirmSheet .confirm-list {
	margin-top: 15px;
}
.confirm-body {
	gap: 20px;
}
.char-counter {
	/*margin-top: 6px;*/
	font-size: 12px;
	color: rgba(255, 255, 255, 0.45);
	text-align: right;
}
/* =========================================================
   confirm（お問い合わせ）と postConfirm（投稿）を完全に同じレイアウトに
   ========================================================= */
/* ホバー（PCだけ） */
@media (hover: hover) and (pointer: fine) {
	:is(#confirmSheet, #postConfirmSheet) .confirm-footer .is-revise:hover {
		filter: brightness(0.75);
	}
	:is(#confirmSheet, #postConfirmSheet) .confirm-footer .is-primary:hover {
		filter: brightness(1.35);
	}
}
/* 下部固定フッター */ :is(#confirmSheet, #postConfirmSheet) .confirm-footer {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
:is(#confirmSheet, #postConfirmSheet) .confirm-footer .sharehelp-ok {
	width: 100%;
}
/* 中身だけスクロール、ボタンは下固定（お問い合わせと同じ） */ :is(#confirmSheet, #postConfirmSheet) .sharehelp-sheet {
	display: flex;
	flex-direction: column;
}
/* ★ここが重要：bodyのIDが confirm/postConfirmで違うので両方対象にする */ :is(#confirmSheet, #postConfirmSheet) :is(#confirmBody, #postConfirmBody) {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}
:is(#confirmSheet, #postConfirmSheet) .confirm-main {
	flex: 1 1 auto;
	overflow: auto;
}
/* 長文保険 */ :is(#confirmSheet, #postConfirmSheet) .confirm-list dd {
	overflow-wrap: anywhere;
	word-break: break-word;
}
/* お問い合わせ側で最終的に採用してる「dt/dd 縦並び（1列）」も揃える */ :is(#confirmSheet, #postConfirmSheet) .confirm-list {
	display: grid;
	grid-template-columns: 1fr;
}
:is(#confirmSheet, #postConfirmSheet) .confirm-list dt {
	color: rgba(255, 255, 255, 1.00);
	font-size: 90%;
	font-weight: bold;
}
:is(#confirmSheet, #postConfirmSheet) .confirm-list dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 90%;
	margin-bottom: 15px;
}
@media (max-width:980px) {
	:is(#confirmSheet, #postConfirmSheet) .confirm-footer {
		margin-bottom: 14px;
	}
}
.confirm-thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 28px;
}
.confirm-thumb {
	margin: 0;
	/*padding: 8px;*/
	border-radius: 12px;
	/*background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);*/
}
.confirm-thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.confirm-thumb figcaption {
	margin-top: 6px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.65);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.confirm-thumbs-more {
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px dashed rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.65);
	font-size: 14px;
}
.confirm-files {
	display: none;
}
@media (max-width: 980px) {
	.confirm-thumbs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* 送信中の“文字だけ”を、暗→明→暗でゆったり左→右に流す */
.is-sending .btn-label {
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0px, rgba(255, 255, 255, .22) 24px, /* 暗 */ rgba(255, 255, 255, .95) 48px, /* 明（山） */ rgba(255, 255, 255, .22) 72px /* 暗 */
		);
	/* 1周期＝72px（←ここを広げると間隔が広がる） */
	background-size: 72px 100%;
	background-position: 0 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: sendingWaveLR 3.6s linear infinite;
	will-change: background-position;
}
@keyframes sendingWaveLR {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 72px 0;
	} /* 左 → 右 */
}
@media (prefers-reduced-motion: reduce) {
	.is-sending .btn-label {
		animation: none;
	}
}
#sheetScrollHint, .sheet-scroll-hint {
	position: absolute;
	left: 50%;
	/*bottom: 36px;*/
	transform: translateX(-50%);
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
}
#sheetScrollHint.is-visible, .sheet-scroll-hint.is-visible {
	opacity: 1;
}
#sheetScrollHint svg.sheet-scroll-arrow, .sheet-scroll-hint svg.sheet-scroll-arrow {
	width: 32px;
	height: 32px;
	color: rgba(255, 255, 255, 1.0);
	/*animation: scrollHintFloat 1.4s ease-in-out infinite;*/
}
#sheetScrollHint svg.sheet-scroll-arrow, .sheet-scroll-hint svg.sheet-scroll-arrow {
	/*animation: scrollHintSnap 0.5s ease-in infinite;*/
	transform-box: fill-box;
	transform-origin: center;
}
/* 追加：表示中だけ animation を付ける */
#sheetScrollHint.is-visible svg.sheet-scroll-arrow, .sheet-scroll-hint.is-visible svg.sheet-scroll-arrow {
	animation: scrollHintSnap 0.5s ease-in infinite;
}
@keyframes scrollHintSnap {
	0% {
		transform: translateY(0);
	}
	4% {
		transform: translateY(6px);
	}
	12% {
		transform: translateY(6px);
	}
	55% {
		transform: translateY(6px);
	}
	100% {
		transform: translateY(0);
	}
}
#sheetScrollHint, .sheet-scroll-hint {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	bottom: calc(var(--sheet-pad-b) + 2px);
}
@media (max-width: 980px) {
	#sheetScrollHint, .sheet-scroll-hint {
		bottom: calc(var(--sheet-pad-b) + env(safe-area-inset-bottom, 0px) - 8px);
	}
}
.sheet-scroll-hint svg.sheet-scroll-arrow {
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6));
}
.sheet-empty {
	padding: 18px 0 6px;
	display: grid;
	gap: 10px;
}
.sheet-empty__lead {
	color: rgba(255, 255, 255, .88);
	font-size: 95%;
	line-height: 1.7;
	margin: 0;
}
.sheet-empty__sub {
	color: rgba(255, 255, 255, .45);
	font-size: 80%;
	margin: 0;
}
.sheet-empty-hero {
	display: block;
	width: 100%;
	user-select: none;
	pointer-events: none;
}
#showcaseSpinGrid .main__content__show__box {
	opacity: 0;
	transform: translateY(20px) scale(1.00);
	transition:
		opacity .45s ease, transform .60s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
#showcaseSpinGrid .main__content__show__box.is-revealed {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	#showcaseSpinGrid .main__content__show__box {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}
#scapesVideoGrid .inline-video-box {
	opacity: 0;
	transform: translateY(20px) scale(1.00);
	transition:
		opacity .45s ease, transform .60s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
#scapesVideoGrid .inline-video-box.is-revealed {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	#scapesVideoGrid .inline-video-box {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}
.more-reveal-section .main__content__more__box {
	opacity: 0;
	transform: translateY(20px) scale(1.00);
	transition:
		opacity .45s ease, transform .60s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
.more-reveal-section .main__content__more__box.is-revealed {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.more-reveal-section .main__content__more__box {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}
/* =========================
   モーダル アスペクト切替
========================= */
.modal-aspect-switch {
	position: static;
	justify-content: flex-end;
	right: 0;
	bottom: -28px;
	display: flex;
	gap: 8px;
	font-size: 12px;
	margin-top: 8px !important;
}
.modal-aspect-switch button {
	background: rgba(255, 255, 255, 0.08);
	/*border:1px solid rgba(255,255,255,0.15);*/
	border: none !important;
	color: #fff;
	padding: 2px 8px;
	border-radius: 0px !important;
	cursor: pointer;
	transition: .2s;
}
.modal-aspect-switch button:hover {
	background: rgba(255, 255, 255, 0.2);
}
.modal-aspect-switch button.is-active {
	background: #fff;
	color: #000;
}
@media (max-width: 980px) {
	.modal-aspect-switch {
		bottom: -72px;
	}
}
.youtube {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 0;
}

.popular-card {
  position: relative;
}

.popular-rank-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
}





/* =========================
   Ranking card colors (no gradient)
========================= */

/* 共通 */
#popularLiveryGrid > a.rank-1,
#popularLiveryGrid > a.rank-2,
#popularLiveryGrid > a.rank-3 {
  border-radius: 8px;
  /*transition: all 0.2s ease;*/
}

/* 1位（金） */
#popularLiveryGrid > a.rank-1 {
  border: 1px solid rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.12);
}

/* 2位（銀） */
#popularLiveryGrid > a.rank-2 {
  border: 1px solid rgba(192, 192, 192, 0.55);
  box-shadow: 0 0 8px rgba(192, 192, 192, 0.10);
}

/* 3位（銅） */
#popularLiveryGrid > a.rank-3 {
  border: 1px solid rgba(205, 127, 50, 0.6);
  box-shadow: 0 0 8px rgba(205, 127, 50, 0.10);
}

/* ホバーで少し強調 */
#popularLiveryGrid > a.rank-1:hover {
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.18);
}

#popularLiveryGrid > a.rank-2:hover {
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.16);
}

#popularLiveryGrid > a.rank-3:hover {
  box-shadow: 0 0 12px rgba(205, 127, 50, 0.16);
}

/* バッジもシンプルに */
#popularLiveryGrid > a.rank-1 .popular-rank-badge {
  background: #ffd700;
  color: #000;
}

#popularLiveryGrid > a.rank-2 .popular-rank-badge {
  background: #c0c0c0;
  color: #000;
}

#popularLiveryGrid > a.rank-3 .popular-rank-badge {
  background: #cd7f32;
  color: #fff;
}

@media (max-width: 980px) {
	.rank{
		margin-top: 0px!important;
	}
}