/* ============================================================
   IY 2026 — design tokens (from IDEA 260711 SVG/PDF)
   ============================================================ */
:root {
	--paper: #f1f8f8;
	--ink: #2e4038; /* 黒は#2e4038に統一(2026-07-11) */
	--green-dark: #2e4038;
	--green-mid: #3e5249;
	--accent: #f13c00;
	--peach: #fcd9bd;
	--mint: #e0ffda;
	--blue-100: #ddeef5;
	--blue-200: #cdf1ef;
	--blue-300: #cddde6;
	--font-latin: century-gothic, "Century Gothic", "Futura", sans-serif;
	--font-jp: "YuGothic", "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
	--font-display: zen-and-haas, var(--font-latin);
	--header-h: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--font-jp);
	color: var(--ink);
	background: var(--paper) url("../img/bg-texture.jpg");
	background-size: 706px auto;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
	padding: 0 48px;
}

.site-header__logo svg { height: 34px; width: auto; display: block; }
/* メニュー展開時はヘッダーのcolor(#f1f8f8)を継承して薄水色になる */

.site-nav--pc { display: flex; gap: 40px; }

.site-nav--pc a {
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: clamp(14px, 1.22vw, 17.6px);
	letter-spacing: -0.02em;
	position: relative;
}

.site-nav--pc a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 100%; height: 2px;
	background: var(--green-dark); /* 深緑 */
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .3s;
}
.site-nav--pc a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ABOUTページ: 右半分が写真なのでナビを白に */
.page-slug-about .site-nav--pc { color: #f1f8f8; }
.page-slug-about .site-nav--pc a { text-shadow: 0 1px 8px rgba(32,31,32,.35); }

/* Hamburger */
.menu-toggle {
	color: var(--green-dark); /* 深緑 */
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	width: 44px; height: 44px;
	background: none; border: 0; cursor: pointer;
}
.menu-toggle span {
	display: block; height: 2px; width: 100%;
	background: currentColor;
	transition: transform .3s, opacity .3s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* SP fullscreen menu (デザイン7頁: ダークグリーン) */
.sp-menu[hidden] { display: none; }
.sp-menu {
	position: fixed; inset: 0; z-index: 90;
	background: var(--green-dark);
	color: #f1f8f8;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: calc(var(--header-h) + 48px) 24px 40px;
	overflow-y: auto;
}
.sp-menu__nav { display: flex; flex-direction: column; align-items: center; gap: 44px; margin-top: 40px; }
.sp-menu__nav a {
	position: relative;
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: 28px;
	letter-spacing: -0.02em;
}
/* タップで丸が描かれる(CIRCLE 02) */
.sp-menu__nav a::after {
	content: "";
	position: absolute;
	/* 全項目ABOUTと同サイズの丸(中央基準の固定サイズ) */
	left: 50%; top: 50%;
	transform: translate(-50%, -50%) scaleX(-1); /* 左右反転(画像+描画方向まるごと) */
	width: 162px; height: 80px;
	background: url("../img/circle-02.png") center / contain no-repeat;
	pointer-events: none;
	opacity: 0;
}
.sp-menu__nav a.is-drawing::after {
	opacity: 1;
	/* 下(180deg)起点・反時計回り */
	-webkit-mask: conic-gradient(from 180deg, transparent calc(360deg - var(--sweep)), #000 0);
	mask: conic-gradient(from 180deg, transparent calc(360deg - var(--sweep)), #000 0);
	animation: circle-draw .45s ease-out both;
}
.sp-menu__footer { text-align: center; margin-top: 64px; }
.sp-menu__logo { width: 180px; margin: 0 auto 28px; /* M3との間隔+8px */ }
.sp-menu__social { display: flex; justify-content: center; align-items: center; gap: 28px; }
.sp-menu__social svg { height: 26px; width: auto; } /* インラインSVG: 白(currentColor)を継承 */
.sp-menu__social a[aria-label="Instagram"] svg { height: 32px; } /* フッターと同比率 */
.sp-menu__domain { font-family: var(--font-latin); font-size: 12px; letter-spacing: -0.02em; margin-top: 20px; }
body.menu-open { overflow: hidden; }
body.menu-open .site-header { color: #f1f8f8; }
body.menu-open .menu-toggle { color: #f1f8f8; } /* クローズボタンは薄水色 */

/* ============================================================
   Hero — TOP.svg実測座標(1440×800基準)
   photo: (710.92,110) 517×690 / mint,peach,orangeはclip-pathで原寸再現
   ============================================================ */
.hero {
	position: relative;
	aspect-ratio: 1440 / 800;
	/* 写真上端(7.64vw)がヘッダー+余白(82px)を割らない範囲で最大70px上げる */
	margin-top: clamp(-70px, calc(82px - 7.64vw), 0px);
	/* TOP BAR(T1-11)がヒーロー下端をまたぐためoverflowは開放 */
}
.hero__shape { position: absolute; inset: 0; /* mint/peachは写真の後ろ */ }
.hero__shape--orange { z-index: 1; /* オレンジ(SL)だけ写真の上 */ }
.hero__shape--mint {
	background: var(--mint);
	mix-blend-mode: multiply;
	clip-path: polygon(85.27% 23.5%, 85.27% 90%, 49.37% 99.95%, 0% 100%, 0% 58.87%, 26.44% 23.5%);
}
/* T1-3: 同一ボックス内にブロックとバーを同居させ、上端を物理的に一致させる */
.hero__peach-wrap {
	position: absolute;
	left: 85.27%; right: 0;
	top: 23.5%; height: 66.49%;
}
.hero__peach-bg {
	position: absolute; inset: 0;
	background: #d3e3ed;
	mix-blend-mode: multiply;
	clip-path: polygon(0 0, 100% 0, 100% 93.85%, 0 100%);
}
.hero__shape--orange {
	background: var(--accent);
	mix-blend-mode: soft-light;
	clip-path: polygon(49.37% 100%, 85.27% 100%, 85.27% 90%);
}
.hero__photo {
	position: absolute;
	left: 49.37%; top: 13.75%;
	width: 35.9%; height: 86.25%;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__copy {
	position: absolute;
	left: 15.46%; top: 63.5%;
	z-index: 2;
	opacity: 0; /* 写真読み込み完了(.is-photo-ready)でフェードイン */
	transition: opacity .5s ease;
}
.hero.is-photo-ready .hero__copy { opacity: 1; }
.hero__name {
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: clamp(20px, 2.22vw, 32px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-bottom: 14px;
}
.hero__role {
	font-family: var(--font-latin);
	font-weight: 400;
	font-size: clamp(15px, 1.667vw, 24px);
	letter-spacing: -0.02em;
	line-height: 1.25; /* 24px時に30px */
}
/* 手描きサークル(TOP-9・レイヤー名: mouse overで出てくる) */
.hero__circle {
	/* 文字サイズ基準で追従(SVG実測: 文字32pxに対し 200×74.5, オフセット -17,-18) */
	position: absolute;
	font-size: clamp(20px, 2.22vw, 32px);
	left: -0.54em; top: -0.56em;
	width: 6.25em; height: 2.33em;
	z-index: 3;
	background: url("../img/circle.png") center / contain no-repeat;
	pointer-events: none;
	-webkit-mask: conic-gradient(from 65deg, #000 var(--sweep), transparent var(--sweep));
	mask: conic-gradient(from 65deg, #000 var(--sweep), transparent var(--sweep));
	/* 描画開始はJSが写真読み込み完了を検知してから(.is-photo-ready) */
}
.hero.is-photo-ready .hero__circle { animation: circle-draw .75s ease-out .35s both; }
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes circle-draw { from { --sweep: 0deg; } to { --sweep: 360deg; } }

/* シアンバー(#0ff ソフトライト・写真上部) & TOP BAR(右端スクロールサイン) */
.hero__cyanbar {
	position: absolute;
	left: 49.37%; top: 13.75%;
	width: 35.9%; height: 10%;
	background: aqua;
	mix-blend-mode: soft-light;
	z-index: 2;
}
.hero__topbar {
	position: absolute;
	right: 0; top: 0; /* 親=T1-3ボックスの上端にそのまま吸着 */
	width: 15.21%; height: auto; /* 2.24% of hero ÷ 14.73%(wrap幅) */
	z-index: 3;
}

/* 星飾り(kazari) — 配置は見た目合わせ
   ゆらぎアニメーション: 拡大100〜110%+基準角±5度。周期・位相を星ごとにずらしてランダム感を出す */
.star {
	position: absolute; z-index: 2; pointer-events: none; height: auto;
	--r: 0deg;
	animation: star-float 4.5s ease-in-out infinite alternate;
}
@keyframes star-float {
	from { transform: rotate(calc(var(--r) - 5deg)) scale(1); }
	to   { transform: rotate(calc(var(--r) + 5deg)) scale(1.1); }
}
/* ヒーロー: 白2つ(ミント上部)+深緑2つ(名前の左) デザイン実測 */
.star--hero-w1 { left: 12%; top: 27.5%; width: 8.1%; animation-duration: 4.8s; animation-delay: -1.2s; }
.star--hero-w2 { left: 22.4%; top: 38%; width: 4.2%; --r: 8deg; animation-duration: 3.9s; animation-delay: -2.8s; }
.star--hero-1 { left: 2.8%; top: 63.6%; width: 5.3%; animation-duration: 5.3s; animation-delay: -0.7s; }
.star--hero-2 { left: 9.4%; top: 61.8%; width: 3.1%; --r: -6deg; animation-duration: 4.4s; animation-delay: -3.1s; }
.star--sp-1 { right: 5.5%; top: 11%; width: 5%; animation-duration: 4.1s; animation-delay: -1.9s; }
.star--sp-2 { left: 8%; bottom: -4%; width: 9%; z-index: 4; animation-duration: 5.1s; animation-delay: -0.4s; }
/* バナー下・MV際の2つ(デザイン2026-07-11追加分) */
.star--bn-1 { right: 6.5%; bottom: 72px; width: 52px; --r: 170deg; animation-duration: 4.6s; animation-delay: -2.2s; }
.star--bn-2 { right: 3%; bottom: -36px; width: 72px; --r: 110deg; z-index: 3; animation-duration: 3.7s; animation-delay: -1.5s; }
.banner-zone { position: relative; }
/* SP専用の星(MV/EVENTS境界) — PCでは非表示 */
.star--mv-1, .star--mv-2 { display: none; }

/* ============================================================
   NEW SINGLE 春風 — 背景はIMG_5756(コラージュ画)
   ============================================================ */
.single-promo {
	position: relative;
	z-index: 2; /* 星(T2-9)が隣接セクション(MV含む)に被れるように前面へ */
	aspect-ratio: 1440 / 837;
	color: #f1f8f8;
	isolation: isolate;
}
/* 背景(ぼかし+乗算レイヤー)はラッパー内でクリップ。星は外にはみ出せる */
.single-promo__bg {
	position: absolute; inset: 0;
	overflow: hidden;
	z-index: -1;
}
.single-promo__bg-img {
	position: absolute; inset: -4%;
	background: url("../img/harukaze-bg.jpg") center / cover no-repeat;
	filter: blur(14px) brightness(.88);
}
/* T2-1 LAYER: 背景の上に乗算で重ねる */
.single-promo__bg-layer {
	position: absolute; inset: 0;
	background: url("../img/harukaze-layer.jpg") center / cover no-repeat;
	mix-blend-mode: multiply;
}
/* コンテンツは1440×837の中央ボックス内に配置(大画面でも間隔を維持) */
.single-promo__inner {
	/* transformだとボタンの抜き文字ブレンドを遮断するためmargin:autoで中央寄せ */
	position: absolute;
	inset: 0;
	margin: auto;
	width: min(100%, 1440px);
	height: min(100%, 837px);
}

/* ジャケット: SVG実測 (235.4, 968.6) 480×480・回転なし */
.single-promo__jacket {
	position: absolute;
	left: 16.35%; top: 20.15%;
	width: min(33.33%, 480px); /* デザイン原寸480pxで頭打ち */
	box-shadow: 0 18px 40px rgba(0,0,0,.3);
}
.single-promo__tape {
	position: absolute;
	width: 34%;
	aspect-ratio: 247 / 92;
	background: url("../img/tape-2.png") center / contain no-repeat;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
	opacity: .85;
}
.single-promo__tape--tl { left: -12%; top: -6%; transform: rotate(-8deg); }
.single-promo__tape--br { right: -12%; bottom: -6%; background-image: url("../img/tape-1.png"); transform: rotate(6deg); }
/* T2-4〜7を一塊として、T2-2(ジャケット中心 y=408.6/837)と縦センター揃え
   ※transformを使うとボタンの抜き文字ブレンドが背景まで届かないためflexで中央寄せ */
.single-promo__text {
	position: absolute;
	left: 56%; top: 0;
	width: 30%; height: 100%;
	padding-bottom: 2.4%; /* 中心を48.8%に補正 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.single-promo__label {
	position: relative;
	font-family: var(--font-latin);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: clamp(20px, 2.64vw, 38px);
	display: inline-block;
	margin-bottom: 10px;
}
/* T2-5 チョーク線(LINE-01〜03.png): スクロール到達で3画をひと繋ぎに描画
   1左→右 / 2右→左 / 3左→右。全て同一位置に重ねる */
.single-promo__line {
	position: absolute;
	left: calc(-13% - 6px); bottom: calc(-0.62em - 34px);
	width: 145%;
	aspect-ratio: 400 / 108;
	background: center / contain no-repeat;
	transform: rotate(8deg);
	opacity: .8;
}
.single-promo__line--1 { background-image: url("../img/line-01.png"); }
.single-promo__line--2 { background-image: url("../img/line-02.png"); }
.single-promo__line--3 { background-image: url("../img/line-03.png"); }

@property --lpx1 { syntax: "<percentage>"; inherits: false; initial-value: -9%; }
@property --lpx2 { syntax: "<percentage>"; inherits: false; initial-value: -9%; }
@property --lpx3 { syntax: "<percentage>"; inherits: false; initial-value: -9%; }

.single-promo__line--1 {
	--lpx1: -9%;
	-webkit-mask-image: linear-gradient(to right, #000 calc(var(--lpx1) - 8%), transparent var(--lpx1));
	mask-image: linear-gradient(to right, #000 calc(var(--lpx1) - 8%), transparent var(--lpx1));
	transition: --lpx1 .2s ease-in 0s;
}
.single-promo__line--2 {
	--lpx2: -9%;
	-webkit-mask-image: linear-gradient(to left, #000 calc(var(--lpx2) - 8%), transparent var(--lpx2));
	mask-image: linear-gradient(to left, #000 calc(var(--lpx2) - 8%), transparent var(--lpx2));
	transition: --lpx2 .2s ease-in .13s;
}
.single-promo__line--3 {
	--lpx3: -9%;
	-webkit-mask-image: linear-gradient(to right, #000 calc(var(--lpx3) - 8%), transparent var(--lpx3));
	mask-image: linear-gradient(to right, #000 calc(var(--lpx3) - 8%), transparent var(--lpx3));
	transition: --lpx3 .2s ease-in .26s;
}
.single-promo__label.is-inview .single-promo__line--1 { --lpx1: 109%; }
.single-promo__label.is-inview .single-promo__line--2 { --lpx2: 109%; }
.single-promo__label.is-inview .single-promo__line--3 { --lpx3: 109%; }
.single-promo__title {
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: clamp(46px, 5.69vw, 82px);
	letter-spacing: 0.1em;
	margin-bottom: 16px;
	text-shadow: 0 2px 14px rgba(0,0,0,.25);
}

.btn {
	display: inline-block;
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: clamp(18px, 2.5vw, 36px);
	letter-spacing: -0.02em;
	padding: 0.35em 1em;
	transition: opacity .25s, transform .25s;
}
.btn:hover { opacity: .75; }
.btn--outline-white { border: 1.5px solid #f1f8f8; border-radius: 4px; color: #f1f8f8; padding: 0.1em 0.85em; transition: background .3s; }
.btn--outline-white { font-size: clamp(14.4px, 2vw, 28.8px); /* 80%サイズ(T2-7/T4-3共通) */ }
/* ホバー: 白塗り+文字を抜いて背景を透かす(screenブレンド) */
.btn--outline-white:hover {
	opacity: 1;
	transform: none;
	background: #f1f8f8;
	color: #000;
	mix-blend-mode: screen;
}
.btn--solid-dark { background: var(--green-dark); color: #f1f8f8; border-radius: 4px; }

/* ============================================================
   バナーゾーン(スライド形式)
   ============================================================ */
.banner-zone { padding: 96px 8%; display: flex; justify-content: center; }
.banner-carousel { position: relative; max-width: 980px; width: 100%; }
.banner-carousel__slide { position: relative; display: block; }
.banner-carousel__slide + .banner-carousel__slide { display: none; }
.banner-carousel__hover {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-latin);
	font-weight: 700;
	color: #f1f8f8;
	font-size: clamp(24px, 2.64vw, 38px);
	letter-spacing: -0.02em;
	background: rgba(46, 64, 56, .6); /* #2e4038 60% */
	opacity: 0;
	transition: opacity .3s;
}
.banner-carousel__slide:hover .banner-carousel__hover { opacity: 1; }

/* ============================================================
   MUSIC VIDEO — 背景はHARUKAZE MV THUMB(1920×1080)
   ============================================================ */
.mv-promo {
	position: relative;
	aspect-ratio: 16 / 9;
	isolation: isolate;
	display: flex;
	align-items: center;
	background: url("../img/mv-bg.jpg") center / cover no-repeat;
}
/* T4-2: デザイン実測 — 左7%・セクション高の40%に垂直センター */
.mv-promo__text {
	position: absolute;
	left: 7%; top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	text-align: left;
}
.mv-promo__title {
	color: #f1f8f8;
	font-weight: 700;
	white-space: nowrap;
	font-size: clamp(35px, 4.78vw, 69px); /* 86pxの80% */
	letter-spacing: 0.08em;
	text-shadow: 0 0 10px rgba(114, 62, 0, .38);
	margin-bottom: 0;
}
.mv-promo__title span {
	font-family: var(--font-latin);
	font-size: clamp(16px, 2.11vw, 30.5px); /* 38pxの80% */
	letter-spacing: -0.02em;
	margin-left: -14px;
	vertical-align: middle; /* 春風の縦中央に揃える */
	position: relative; top: -0.18em;
}
.mv-promo__watch {
	position: absolute;
	left: 50%; bottom: 7.8%;
	transform: translateX(-50%);
	text-shadow: 0 0 10px rgba(114, 62, 0, .38);
}
.mv-promo__watch:hover { transform: translateX(-50%); /* ホバーで動かさない */ }

/* ============================================================
   UPCOMING EVENTS — 背景はEVENTS IMG(2160×1200)
   ============================================================ */
.events {
	position: relative;
	aspect-ratio: 2160 / 1200;
	display: flex;
	align-items: center;
	background: url("../img/events-bg.jpg") center / cover no-repeat, #0d0505;
	color: #f1f8f8;
}
.events__list {
	/* 右端から5%の位置に固定(左%指定だと広い画面で体感が変わらないため) */
	margin-left: auto;
	margin-right: 7.3%;
	width: min(550px, max(38%, 410px)); /* 基本38%・下限410px(INFOが収まる幅) */
}
.events__title {
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: clamp(22px, 2.64vw, 38px);
	letter-spacing: -0.02em;
	text-align: center;
	margin-bottom: 34px;
}
.event-row {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.1vw, 16px);
	background: var(--paper);
	color: var(--ink);
	border-radius: 4px;
	padding: 14px clamp(10px, 1.25vw, 18px);
	margin-bottom: 24px;
}
.event-row__date {
	margin-left: clamp(6px, 1.4vw, 20px); /* 狭い画面では左余白を自動縮小 */
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: clamp(20px, 1.94vw, 28px);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.28em;
}
/* 曜日: 縦積み・日付の高さに対して中央 */
.event-row__dow {
	font-family: var(--font-latin);
	font-size: 0.5em;
	line-height: 1.15;
	writing-mode: vertical-rl;
	text-orientation: sideways; /* 横書きを90度回転 */
	letter-spacing: 0;
}
.event-row__venue { font-family: var(--font-jp); font-weight: 700; font-size: clamp(16px, 1.53vw, 22px); flex: 1; white-space: nowrap; position: relative; top: 1px; }
.event-row__info {
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: clamp(13px, 1.2vw, 17.3px);
	letter-spacing: -0.02em;
	background: #201f20; /* INFOのみ黒のまま */
	color: var(--paper);
	padding: 4px 18px;
	border-radius: 4px;
	transition: background .3s, color .3s;
}
.event-row__info:hover { background: var(--accent); color: #0d0505; /* ホバー時のみ黒 */ }

/* 手描き矢印 ARROW 01-05(MV→EVENTS境界・PC限定)
   スクロール到達(.is-inview)で5画をひと繋ぎに描画 */
.mv-arrow {
	position: absolute;
	right: calc(8% - 60px);
	top: -140px; /* MVとの境界を跨ぐ */
	width: 73px;
	aspect-ratio: 91 / 400;
	z-index: 5;
	pointer-events: none;
}
.mv-arrow__seg {
	position: absolute;
	inset: 0;
	background: center / contain no-repeat;
}
.mv-arrow__seg--1 { background-image: url("../img/arrow-01.png"); }
.mv-arrow__seg--2 { background-image: url("../img/arrow-02.png"); }
.mv-arrow__seg--3 { background-image: url("../img/arrow-03.png"); }
.mv-arrow__seg--4 { background-image: url("../img/arrow-04.png"); }
.mv-arrow__seg--5 { background-image: url("../img/arrow-05.png"); }
/* 初期状態: 全セグメント非表示 */
.mv-arrow__seg--1, .mv-arrow__seg--3, .mv-arrow__seg--4 {
	-webkit-mask: linear-gradient(to bottom, #000 50%, transparent 50%) 0 100% / 100% 200% no-repeat;
	mask: linear-gradient(to bottom, #000 50%, transparent 50%) 0 100% / 100% 200% no-repeat;
}
.mv-arrow__seg--2 {
	-webkit-mask: conic-gradient(from 135deg at 30% 62%, #000 var(--sweep), transparent var(--sweep));
	mask: conic-gradient(from 135deg at 30% 62%, #000 var(--sweep), transparent var(--sweep));
}
.mv-arrow__seg--5 {
	-webkit-mask: linear-gradient(45deg, #000 50%, transparent 50%) 100% 0 / 200% 200% no-repeat;
	mask: linear-gradient(45deg, #000 50%, transparent 50%) 100% 0 / 200% 200% no-repeat;
}
@keyframes arrow-wipe-down {
	from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
	to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}
@keyframes arrow-wipe-diag {
	from { -webkit-mask-position: 100% 0;  mask-position: 100% 0; }
	to   { -webkit-mask-position: 0 100%;  mask-position: 0 100%; }
}
/* 1上→下 / 2右下から時計回り / 3上→下 / 4上→下 / 5左下→右上 */
.mv-arrow.is-inview .mv-arrow__seg--1 { animation: arrow-wipe-down .3s ease-in 0s both; }
.mv-arrow.is-inview .mv-arrow__seg--2 { animation: circle-draw .35s linear .22s both; } /* 1に食い込み */
.mv-arrow.is-inview .mv-arrow__seg--3 { animation: arrow-wipe-down .3s linear .32s both; } /* 2と重ねて角を消す */
.mv-arrow.is-inview .mv-arrow__seg--4 { animation: arrow-wipe-down .2s linear .62s both; }
.mv-arrow.is-inview .mv-arrow__seg--5 { animation: arrow-wipe-diag .3s ease-out .82s both; }
.events__empty { font-family: var(--font-latin); letter-spacing: -0.02em; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	text-align: center;
	padding: 110px 24px 48px;
}
.site-footer__logo { width: 260px; margin: 0 auto 52px; }
.site-footer__logo-link { display: inline-block; }
.site-footer__logo-link:hover { opacity: .7; transition: opacity .3s; }
.site-footer__label {
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: clamp(22px, 2.3vw, 33px);
	letter-spacing: -0.02em;
	margin-bottom: 15px;
}
.site-footer__icons {
	display: flex;
	justify-content: center;
	align-items: center; /* 高さ違いのアイコンを中央線で揃える */
	gap: 34px;
	margin-bottom: 32px;
}
/* インラインSVG: colorだけで色が変わる */
.site-footer__icons a { color: var(--ink); transition: color .3s; }
.site-footer__icons a:hover { color: var(--accent); }
.site-footer__icons svg { height: 27px; width: auto; display: block; }
/* 視覚サイズ合わせ: 小さく見えるアイコンを拡大 */
.site-footer__icons a[aria-label="Spotify"] svg { height: 38px; }
.site-footer__icons a[aria-label="Apple Music"] svg { height: 34px; }
.site-footer__icons a[aria-label="Instagram"] svg { height: 33px; }
.site-footer__domain {
	font-family: var(--font-latin);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: -0.02em;
	margin-top: 72px;
	margin-bottom: 6px;
}
.site-footer__domain a:hover { opacity: .6; }
.site-footer__recaptcha { font-size: 11px; opacity: .55; }
.site-footer__recaptcha a { text-decoration: underline; }

/* ============================================================
   ABOUT (page) — ABOUT.svg実測(1440×800基準)・ウインドウ100%
   ============================================================ */
.about {
	position: relative;
	height: 100vh;
	overflow: hidden;
}
/* 写真: 右半分・下揃え(上がトリミングされる) — デザイン上の優先事項、変更しない */
.about__photo {
	position: absolute;
	right: 0; bottom: 0;
	width: 50%; height: 100%;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

/* 横長ウインドウで写真の中身が上へズレる量(=上トリミング量)。パネルはこれに追従して上へ動く */
:root { --about-crop: max(0px, (50vw * 4 / 3 - 100vh) / 2); } /* 追従は実トリミング量の半分 */

/* 図形(T1と同じパズル構成)。全体を30px上げ */
.about__shape { position: absolute; inset: -30px 0 auto 0; height: 100%; pointer-events: none; }
/* A7/A8: 写真の上トリミング量に追従して上へ移動(顔にパネルが被らない) */
.about__shape--blue {
	background: #edfaff;
	mix-blend-mode: multiply;
	z-index: -1; /* 写真より下 */
	top: calc(-30px - var(--about-crop));
	clip-path: polygon(100% 87.15%, 33.69% 87.15%, 9.85% 55.26%, 9.85% 18.18%, 54.2% 18.18%, 100% 30.9%);
}
.about__shape--mint {
	background: #cdf1ef;
	mix-blend-mode: soft-light;
	top: calc(-30px - var(--about-crop));
	clip-path: polygon(50% 0%, 50% 18.18%, 54.2% 18.18%, 100% 30.9%, 100% 0%);
}
/* A9: 下端そのまま・上端が写真に追従して上がる(=縦に伸びる) */
.about__shape--orange {
	inset: auto;
	left: 50%; right: 0;
	top: calc(87.15% - 30px - var(--about-crop)); bottom: 0;
	height: auto;
	background: #f70;
	mix-blend-mode: soft-light;
	clip-path: none;
}

.about__text {
	position: absolute;
	left: 7%; top: 50%;
	transform: translateY(-52%);
	z-index: 2;
}
.about__name { font-size: 26px; font-weight: 700; letter-spacing: 0.22em; }
.about__kana { font-size: 14px; letter-spacing: 0.34em; margin-bottom: 36px; }
.about__role { font-family: var(--font-latin); font-size: 17px; margin-bottom: 40px; }
.about__bio { font-size: 15px; line-height: 2.3; margin-bottom: 48px; max-width: 36vw; word-break: keep-all; /* 改行は<wbr>指定位置のみ */ }
.about__bio .nb { white-space: nowrap; } /* 「No Reply」等は途中で折り返さない */
.about__social { display: flex; align-items: center; gap: 30px; }
.about__social a { transition: color .3s; }
.about__social a:hover { color: var(--accent); } /* フッターと同じオレンジホバー */
.about__social svg { height: 21px; width: auto; } /* 70% */
.about__social a[aria-label="Instagram"] svg { height: 26px; }

/* 星(写真右上) */
/* A7-8の繋ぎ目(斜めの境界線)に跨がる配置 */
/* 星の追従はパネル(--about-crop)の40%=実トリミング量の20% */
.star--about-1 { right: calc(12% - 100px); top: calc(27.6% - 58px - var(--about-crop) * 0.4); width: 66px; --r: -6deg; animation-duration: 4.7s; animation-delay: -1.4s; }
.star--about-2 { right: calc(7.5% - 80px); top: calc(28.8% - 7px - var(--about-crop) * 0.4); width: 34px; --r: 10deg; animation-duration: 4.1s; animation-delay: -2.6s; }

/* ABOUTはフッター非表示 */
.page-slug-about .site-footer { display: none; }

/* ============================================================
   CONTACT (page)
   ============================================================ */
.contact {
	max-width: 620px;
	margin: 0 auto;
	height: 100vh; /* ウインドウ100%・スクロールなし */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--header-h) 24px 40px; /* 下40px=中央基準で全体20px上げ */
}
.page-slug-contact .site-footer { display: none; }
.contact__title {
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: 40px;
	letter-spacing: -0.02em;
	text-align: center;
	margin-bottom: 18px;
}
.contact label {
	display: block;
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 8px;
}
.contact input[type="text"],
.contact input[type="email"],
.contact textarea {
	width: 100%;
	border: 1.5px solid var(--ink);
	border-radius: 6px;
	background: transparent;
	font: inherit;
	padding: 12px 14px;
	margin-bottom: 22px;
}
.contact textarea { min-height: 170px; resize: vertical; margin-bottom: 36px; /* C3との間隔広め */ }
.contact input[type="text"]:focus,
.contact input[type="email"]:focus,
.contact textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}
.contact input,
.contact textarea { caret-color: var(--accent); }
.contact .btn--solid-dark {
	display: block;
	margin: 0 auto; /* 上間隔=各フィールド間と同じ30px */
	cursor: pointer;
	font: 700 17px var(--font-latin);
	letter-spacing: -0.02em;
	padding: 14px 60px;
	/* C3: 通常=深緑塗り、ホバー=アウトライン(T2-7ルールの反転) */
	background: var(--ink);
	border: 1.5px solid var(--ink);
	border-radius: 4px;
	color: #f1f8f8;
	transition: background .3s, color .3s;
}
.contact .btn--solid-dark:hover {
	opacity: 1;
	transform: none;
	background: transparent;
	color: var(--ink);
}
/* CF7調整: labelとinputの間の<br>を無効化(余白はlabel側で管理) */
.contact .wpcf7-form br { display: none; }
.contact .wpcf7-form-control-wrap { display: block; }
/* 送信結果・エラーメッセージ */
.contact .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 8px 12px;
	border: 1.5px solid var(--ink);
	border-radius: 4px;
	font-size: 14px;
	text-align: center;
}
.contact .wpcf7-not-valid-tip {
	color: var(--accent);
	font-size: 13px;
	margin: 4px 0 0;
}
/* バッジは非表示(規約表記をフッターF5とCONTACT下部に掲示) */
.grecaptcha-badge { visibility: hidden !important; }
.contact__recaptcha { font-size: 11px; opacity: .55; text-align: center; margin-top: 16px; }
.contact__recaptcha a { text-decoration: underline; }

/* ============================================================
   NEWS 一覧 / 記事
   ============================================================ */
.archive-news, .single-article {
	max-width: 760px;
	margin: 0 auto;
	padding: calc(var(--header-h) + 80px) 24px 120px;
}
.archive-news__title {
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: 40px;
	letter-spacing: -0.02em;
	text-align: center;
	margin-bottom: 60px;
}
.news-item {
	display: block;
	padding: 26px 6px;
	border-bottom: 1px solid var(--blue-300);
}
.news-item:hover { background: var(--blue-100); }
.news-item__date {
	font-family: var(--font-latin);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: -0.02em;
	opacity: .6;
}
.news-item__title { font-size: 17px; font-weight: 700; margin-top: 4px; }
.single-article__title { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.single-article__date { font-family: var(--font-latin); font-size: 13px; opacity: .6; margin-bottom: 44px; }
.single-article__body { line-height: 2.2; }
.single-article__body p { margin-bottom: 1.6em; }
.single-article__body img { margin: 2em auto; }

/* ============================================================
   Responsive (SP: デザイン375px準拠)
   ============================================================ */
@media (max-width: 860px) {
	:root { --header-h: 60px; }

	.site-header { padding: 0 20px; }
	.site-header__logo svg { height: 26px; }
	.site-nav--pc { display: none; }
	.menu-toggle { display: flex; z-index: 110; }

	/* セクション順(SPデザイン準拠): hero → banner → single → mv → events */
	.site-main { display: flex; flex-direction: column; }
	.hero { order: 1; }
	.banner-zone { order: 2; }
	.single-promo { order: 3; }
	.mv-promo { order: 4; }
	.events { order: 5; }

	/* Hero: ヘッダーの下から写真(4:5)。名前は写真左下に白 */
	/* SPはTOP BARを非表示にするためoverflow開放が不要 → 星のはみ出しによる横スクロールを防ぐ */
	.hero { aspect-ratio: auto; height: auto; margin-top: 0; padding-top: var(--header-h); overflow-x: clip; /* hiddenだと縦の内部スクロールが生まれる */ }
	.hero__shape, .hero__cyanbar, .hero__topbar, .hero__peach-wrap { display: none; }
	.hero__photo {
		position: relative;
		left: 0; top: 0;
		width: 100%; height: auto;
		aspect-ratio: 4 / 5;
	}
	.hero__copy { left: 20px; top: auto; bottom: 24px; }
	.hero__name { color: #f1f8f8; font-size: 22px; margin: 0; text-shadow: 0 1px 10px rgba(32,31,32,.4); }
	.hero__role { display: none; }
	.hero__circle { font-size: 22px; /* SPの名前サイズに連動 */ }
	/* 星: 白2つ(左上・右端)+緑2つはバナー左上へ */
	.star--hero-1 { left: calc(2.5% + 10px); top: calc(100% + 34px); width: 34px; }
	.star--hero-2 { left: calc(12% + 10px); top: calc(100% + 16px); width: 22px; }
	.star--hero-w1 { left: -5%; top: calc(var(--header-h) + 16px); width: 19%; }
	.star--hero-w2 { left: auto; right: -3%; top: calc(76% + 20px); width: 11%; }

	/* バナー: ヒーロー直下・余白控えめ */
	.banner-zone { padding: 40px 0; }
	.banner-carousel { width: 74.7%; } /* 375px時に280px */
	.star--bn-1, .star--bn-2 { display: none; }

	/* 春風(SP): 縦積み */
	.single-promo { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 64px 24px 72px; z-index: 3; /* T2-9がMVに被れるよう重なり順: T2 > MV > EVENTS */ }
	.single-promo__inner { display: contents; }
	.single-promo__jacket { position: static; width: min(320px, 80%); }
	.single-promo__tape { display: none; }
	.single-promo .btn--outline-white { font-size: 18.7px; } /* T2-7 SP: 14.4pxの130% */
	.single-promo__line { display: none; } /* T2-5 SP非表示 */
	.single-promo__bg-layer { background-size: 100% 100%; } /* 試しに極端: 画像全幅を枠に押し込み */
	.single-promo__text { position: static; width: auto; height: auto; padding-bottom: 0; }
	.single-promo__title { font-size: 39.6px; margin-top: -22px; margin-bottom: 12px; } /* 44pxの90%・上間隔はT4の春風→MUSIC VIDEOと同じ約12px */
	.star--sp-1 { display: none; }
	.star--sp-2 { left: calc(4% - 45px); bottom: -23px; width: 31.2%; }

	/* MV(SP): 画像の下にダーク帯 */
	.mv-promo { aspect-ratio: auto; display: block; background: #2b2628; overflow-x: clip; } /* star--mv-1の右はみ出し対策(hidden不可: 縦スクロール化する) */
	.mv-promo::before {
		content: "";
		display: block;
		aspect-ratio: 1 / 1; /* 正方形トリミング(中央・左右カット) */
		background: url("../img/mv-bg.jpg") 68% center / cover no-repeat;
	}
	.mv-promo__text { position: static; transform: none; margin: 0; padding: 44px 24px 0; text-align: center; }
	.mv-promo__title { font-size: 39.6px; white-space: normal; color: #f1f8f8; } /* 44pxの90% */
	.mv-promo__watch { color: #f1f8f8; border-color: #f1f8f8; }
	.events__title { color: #f1f8f8; }
	.mv-promo__title span {
		display: block;
		margin: -11px 0 0; /* 春風との間隔=T2のNEW SINGLE→春風と同じ約12px */
		font-size: 18px; /* 20pxの90% */
		font-weight: 700;
		letter-spacing: -0.02em;
		position: static;
	}
	.mv-promo__watch { position: static; transform: none; display: table; margin: 22px auto 72px; font-size: 18.7px; }
	/* MV/EVENTS境界の星(デザインSP準拠) */
	.mv-promo { position: relative; z-index: 2; } /* T4-5がEVENTSに隠れないよう引き上げ */
	.star--mv-1 { display: block; left: auto; right: -13px; bottom: 52px; width: 40px; --r: 12deg; animation-duration: 4.9s; animation-delay: -1s; }
	.star--mv-2 { display: block; left: auto; right: calc(7% - 5px); bottom: -26px; width: 90px; --r: -8deg; animation-duration: 4.2s; animation-delay: -2.4s; }
	.mv-promo__watch:hover { transform: none; }

	/* EVENTS(SP): 縦画像→リスト。INFOは全幅バーで2行目 */
	.events { aspect-ratio: auto; display: block; background: #1a1a1a; }
	.events::before {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 563 / 885;
		/* 下端を#1a1a1aへクロスフェードさせてシームレスに */
		background:
			linear-gradient(to bottom, rgba(26,26,26,0) 90%, #1a1a1a 100%),
			url("../img/events-bg-sp.jpg") center / cover no-repeat;
	}
	.events__list { margin: 0; width: auto; padding: 0 16px 72px; }
	.event-row:last-child { margin-bottom: 0; } /* 最終行の下=セクション余白72pxのみ */
	.events__title { text-align: center; font-size: 21px; margin-top: -40px; } /* 上間隔40px詰め */
	.event-row { flex-wrap: wrap; row-gap: 10px; padding: 12px 14px; }
	.event-row__date { margin-left: 4px; gap: calc(0.28em - 4px); /* 曜日との間隔を4px詰め */ }
	.event-row__info { flex-basis: 100%; text-align: center; padding: 3px 0; font-size: 16px; line-height: 1.5; }

	.mv-arrow { display: none; } /* 矢印はPC限定 */
	.site-footer { padding-top: 72px; }
	/* アイコンを一回り小さく(間隔は維持) */
	.site-footer__icons svg { height: 22px; }
	.site-footer__icons a[aria-label="Spotify"] svg { height: 30px; }
	.site-footer__icons a[aria-label="Apple Music"] svg { height: 27px; }
	.site-footer__icons a[aria-label="Instagram"] svg { height: 26px; }
	.site-footer__logo { width: 210px; margin-bottom: 44px; }

	.about { height: auto; overflow: visible; }
	/* 写真: ページ最上部からフル幅(ヘッダー裏まで)・トリミングなしで全面表示 */
	.about__photo { position: relative; width: 100%; height: auto; }
	.about__photo img { height: auto; }
	/* 写真に重なるヘッダーは薄水色 */
	.page-slug-about .site-header { color: #f1f8f8; }
	.page-slug-about .menu-toggle { color: #f1f8f8; }
	/* A7: 写真直下・右上の三角パネル */
	.about__shape--blue {
		inset: auto; left: 0; right: 0;
		top: calc(100vw * 4 / 3 - 100px); /* 100px上げ */
		height: 64vw;
		clip-path: polygon(calc(34% + 40px) 0, 100% 0, 100% 100%); /* 40px右へ */
	}
	/* A9: 本文中ほどの全幅帯(SLでクリーム色になる) */
	.about__shape--orange {
		inset: auto; left: -120px; right: 120px; /* 120px左へ(右は空きOK) */
		top: calc(100vw * 4 / 3 + 77vw + 60px);
		height: 49vw;
		clip-path: none;
		opacity: .5;
	}
	/* A8: 最下部の斜め帯 */
	.about__shape--mint {
		inset: auto; left: -240px; right: 240px; bottom: -80px;
		height: 48vw;
		clip-path: polygon(0 0, 100% 62%, 100% 100%, 0 100%);
		opacity: .7;
	}
	.about__shape { z-index: -1; } /* A7~A9はテキスト・アイコンより下 */
	.about__text { position: static; transform: none; max-width: none; padding: 48px 24px 40px; }
	.about__kana { font-size: 15px; }
	.about__role { font-size: 14px; }
	.about__bio { max-width: none; }
	.about__social { justify-content: center; }
	/* 星(深緑): 写真下端の継ぎ目に跨がる */
	.star--about-1 { right: 11.5vw; top: calc(100vw * 4 / 3 - 7vw - 8px); width: 13.5vw; --r: -96deg; /* 逆方向に90度回転 */ }
	.star--about-2 { right: 5.8vw; top: calc(100vw * 4 / 3 - 1vw + 16px); width: 6.7vw; }
	.page-slug-about .site-footer { display: none; }

	/* SP: 内容が100vhを超えるため固定高をやめて自然な高さ+スクロールに */
	.contact { height: auto; min-height: 100svh; padding: calc(var(--header-h) + 40px) 36px 64px; }
	/* C2を圧縮して1画面に収めやすく */
	.contact input[type="text"],
	.contact input[type="email"],
	.contact textarea { padding: 9px 12px; margin-bottom: 16px; }
	.contact textarea { height: 140px; min-height: 120px; margin-bottom: 28px; }
	.contact__title { font-size: 32px; margin-bottom: 36px; /* C1上げ+下間隔広め */ }
	.contact label { font-size: 15px; margin-bottom: 5px; }
}