@charset "UTF-8";
/*
 * 特定LP固有のCSS
 *
 * 役割: このLPだけで必要なテーマ配色・
 *       CSS変数オーバーライド・LP固有のスタイル調整
 * スコープ: このLPのみ（他LPには影響しない）
 */


/* =============================================
   テーマ変数
============================================= */

:root {

	--color-primary: #003894;
	--color-secondary: #eb6100;
	--color-accent:#FFEB3B;
	--background-color: #fff;
	--text-color: #000;
	--border-radius: clamp(2rem, -0.286rem + 4.76vw, 4rem);
	--font-family-LINE:YakuHanJP,"LINE Seed JP, sans-serif";

}


/* =============================================
   テーマ全体
============================================= */

.htb-pagetop {
	opacity: 1;
	visibility: visible;
}

figure.kari:before {
	content: "仮";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-size: 2rem;
	line-height: 1;
	background: #fff;
	color: red;
	padding: 2rem;
	border: 1px solid;
}

#v-varen .c-nav{
	background-color: transparent;
	padding: 0;
	border: 0;
}
#v-varen .c-nav__menu-toggle{
	background-color:var(--color-primary);
	padding: 10px;
	  width: 90px;
}
#v-varen .js-dialog-menu {
	width: 90%;
	max-width:480px;
	background-color:var(--color-primary);
}
#v-varen .text-wrap {
	text-wrap: pretty;
	word-break: auto-phrase;
}
.dialog-menu-btn span {
  width: 28px;
  height: 2px;
}

@media screen and (max-width: 768px) {
	#v-varen .c-nav__menu-toggle{
		padding: 10px;
		  width: 60px;
	}
	.dialog-menu-btn span {
	  height: 1px;
	}
}

/* =============================================
   ヘッダーCTA位置調整
============================================= */

@media screen and (max-width: 768px) {
	.h-header__cta.sp-side {
		transition: all 0.4s;
	}

	body.scroll .h-header__cta.sp-side {
		bottom: 40%;
		transition: all 0.4s;
	}

	body.upfixed .h-header__cta.sp-side {
		bottom: 35%;
	}

}

@media screen and (max-width: 1024px) {
	body.scroll .h-header__cta.sp-side {
		right: 0;
		background: transparent;
		padding: 0;
		width: 4rem;
		transform: scale(0.8);
		transform-origin: right;
		top: calc(var(--current-header-h, 80px) + 100px);
		top: 30%;
	}

	body.scroll .h-header__cta.sp-side a:before {
		margin: 0 auto;
		width: 100%;
		height: 20px;
	}

	body.scroll .h-header__cta.sp-side a.cta__ticket span,
	body.scroll .h-header__cta.sp-side a.cta__hotel span {
		width: auto;
		writing-mode: vertical-rl;
		letter-spacing: 3px;
	}
}



/* =============================================
   　#v-varen
============================================= */

#v-varen {
	background:var(--background-color);
	color:var(--text-color);
}

#v-varen h3,
#v-varen h4,
#v-varen h5,
#v-varen h6 {
	letter-spacing: 0;
}

#v-varen main {
	font-family: var(--font-family-Zen-Go);
	font-weight: 500;
	overflow: hidden
}
#v-varen  #page__footer{
	color:#fff;
}


/* =============================================
   　#fv
============================================= */

#fv {
  position: relative;
  z-index: 2;
}

#fv .keyvisual {
	position: relative;
	background-color: var(--color-primary);
	border: 4px #fff solid;
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1 / 1.2;
	margin: 0 1.6rem;
	max-width: 1440px;
	overflow: hidden;
	container-type: size; /* 中央からの正確な幾何学スライド計算用 */
}

/* 背景スプリットコンテナ */
#fv .keyvisual__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
}

/* 青レイヤー（ベース全体ブルー） */
#fv .keyvisual__bg-blue {
	position: absolute;
	inset: 0;
	background: var(--color-primary);
}

/* オレンジレイヤー（Vファーレン移動と同時に右下から斜め130度にせり上がり展開） */
#fv .keyvisual__bg-orange {
	position: absolute;
	inset: 0;
	background: linear-gradient(130deg, transparent 49.9%, #eb6100 50%);
	clip-path: inset(0 0 0 100%);
	animation: fvOrangeCmFill 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
	will-change: clip-path, transform;
}

/* 光沢・シャインエフェクト */
#fv .keyvisual__shine {
	position: absolute;
	top: -60%;
	left: -120%;
	width: 60%;
	height: 220%;
	background: linear-gradient(
		105deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.05) 40%,
		rgba(255, 255, 255, 0.45) 50%,
		rgba(255, 255, 255, 0.05) 60%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(25deg);
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	animation: fvShinePass 1.1s cubic-bezier(0.4, 0, 0.2, 1) 1.55s forwards;
}

#fv .keyvisual img {
  width: 45%;
  display: block;
  position: absolute;
  top: 2rem;
  left: 2rem;
  opacity: 0;
  z-index: 1;
  will-change: transform, opacity;
}

/* V・ファーレン長崎ロゴ（センターにポンと拡大出現 ➔ 左上へスライド移動） */
#fv .keyvisual img:first-of-type,
#fv .keyvisual .keyvisual__logo--v-varen {
  animation: fvVvarenLogoCmSp 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ハウステンボスロゴ（オレンジ背景が埋まったタイミングで右下にポンと出現） */
#fv .keyvisual img:nth-of-type(2),
#fv .keyvisual .keyvisual__logo--htb {
  left: auto;
  right: 2rem;
  top: 50%;
  animation: fvHtbLogoCm 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s forwards;
}

@media screen and (min-width: 1024px) {
	#fv .keyvisual {
		aspect-ratio: 16 / 7;
		margin: 0 auto;
		max-width: 1440px;
	}
	#fv .keyvisual img {
	  width: 26%;
	  top: 8%;
	  left: 10%;
	}
	#fv .keyvisual img:first-of-type,
	#fv .keyvisual .keyvisual__logo--v-varen {
	  animation: fvVvarenLogoCmPc 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}
	#fv .keyvisual img:nth-of-type(2),
	#fv .keyvisual .keyvisual__logo--htb {
	  top: 26%;
	  right: 10%;
	}
}

/* アニメーション定義 */
/* SP用：V・ファーレンロゴ（センター出現 ➔ 左上定位置へスライド） */
@keyframes fvVvarenLogoCmSp {
	0% {
		opacity: 0;
		transform: translate(calc(50cqw - 50% - 2rem), calc(50cqh - 50% - 2rem)) scale(0.7);
	}
	32% {
		opacity: 1;
		transform: translate(calc(50cqw - 50% - 2rem), calc(50cqh - 50% - 2rem)) scale(1.1);
	}
	50% {
		opacity: 1;
		transform: translate(calc(50cqw - 50% - 2rem), calc(50cqh - 50% - 2rem)) scale(1.0);
	}
	58% {
		opacity: 1;
		transform: translate(calc(50cqw - 50% - 2rem), calc(50cqh - 50% - 2rem)) scale(1.0);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0) scale(1.0);
	}
}

/* PC用：V・ファーレンロゴ（センター出現 ➔ 左上定位置へスライド） */
@keyframes fvVvarenLogoCmPc {
	0% {
		opacity: 0;
		transform: translate(calc(50cqw - 50% - 10cqw), calc(50cqh - 50% - 8cqh)) scale(0.7);
	}
	32% {
		opacity: 1;
		transform: translate(calc(50cqw - 50% - 10cqw), calc(50cqh - 50% - 8cqh)) scale(1.1);
	}
	50% {
		opacity: 1;
		transform: translate(calc(50cqw - 50% - 10cqw), calc(50cqh - 50% - 8cqh)) scale(1.0);
	}
	58% {
		opacity: 1;
		transform: translate(calc(50cqw - 50% - 10cqw), calc(50cqh - 50% - 8cqh)) scale(1.0);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0) scale(1.0);
	}
}

/* オレンジ背景：右下から斜め130度にせり上がり埋める */
@keyframes fvOrangeCmFill {
	0% {
		clip-path: inset(0 0 0 100%);
		transform: translate(14%, 14%);
		opacity: 0.5;
	}
	100% {
		clip-path: inset(0 0 0 0);
		transform: translate(0, 0);
		opacity: 1;
	}
}

/* ハウステンボスロゴ：右下定位置にポンと拡大出現 */
@keyframes fvHtbLogoCm {
	0% {
		opacity: 0;
		transform: scale(0.7) translateY(16px);
	}
	60% {
		opacity: 1;
		transform: scale(1.08) translateY(-4px);
	}
	100% {
		opacity: 1;
		transform: scale(1.0) translateY(0);
	}
}

@keyframes fvLogoRise {
	0% {
		opacity: 0;
		transform: translateY(24px) scale(0.96);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes fvShinePass {
	0% {
		left: -120%;
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		left: 200%;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#fv .keyvisual,
	#fv .keyvisual__bg,
	#fv .keyvisual__bg-blue,
	#fv .keyvisual__bg-orange,
	#fv .keyvisual img,
	#fv .keyvisual__shine {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
	#fv .keyvisual__shine {
		display: none !important;
	}
}

/* プレオープンページ用：キービジュアル完全静止表示（アニメーション全無効化） */
#v-varen.pre #fv .keyvisual,
#v-varen.pre #fv .keyvisual__bg,
#v-varen.pre #fv .keyvisual__bg-blue,
#v-varen.pre #fv .keyvisual__bg-orange,
#v-varen.pre #fv .keyvisual img,
#v-varen.pre #fv .keyvisual img:first-of-type,
#v-varen.pre #fv .keyvisual img:nth-of-type(2),
#v-varen.pre #fv .keyvisual .keyvisual__logo,
#v-varen.pre #fv .keyvisual .keyvisual__logo--v-varen,
#v-varen.pre #fv .keyvisual .keyvisual__logo--htb,
#v-varen.pre #fv .keyvisual__shine {
	animation: none !important;
	-webkit-animation: none !important;
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	will-change: auto !important;
	transition: none !important;
}

#v-varen.pre #fv .keyvisual__bg-orange {
	clip-path: inset(0 0 0 0) !important;
	transform: none !important;
	opacity: 1 !important;
	animation: none !important;
}

#v-varen.pre #fv .keyvisual__shine {
	display: none !important;
	opacity: 0 !important;
	animation: none !important;
}

#v-varen.pre #fv .keyvisual .keyvisual__logo--v-varen,
#v-varen.pre #fv .keyvisual img:first-of-type {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	left: 2rem !important;
	top: 2rem !important;
}

#v-varen.pre #fv .keyvisual .keyvisual__logo--htb,
#v-varen.pre #fv .keyvisual img:nth-of-type(2) {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	left: auto !important;
	right: 2rem !important;
	top: 50% !important;
}

@media screen and (min-width: 1024px) {
	#v-varen.pre #fv .keyvisual .keyvisual__logo--v-varen,
	#v-varen.pre #fv .keyvisual img:first-of-type {
		left: 10% !important;
		top: 8% !important;
		animation: none !important;
	}

	#v-varen.pre #fv .keyvisual .keyvisual__logo--htb,
	#v-varen.pre #fv .keyvisual img:nth-of-type(2) {
		right: 10% !important;
		top: 26% !important;
		animation: none !important;
	}
}



/* =============================================
   　#term
============================================= */

#term {
  position: relative;
}

#term .circle {
	content: "";
	background: var(--color-primary);
	mask-image: url(../img/index/circle.svg);
	mask-position: center bottom;
	mask-size: 170%;
	mask-repeat: no-repeat;
	width: 100%;
	height: 150%;
	position: absolute;
	top: -50%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	opacity: 0.6;
	transform: scale(0.96);
	transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

#term.is-active .circle {
	opacity: 1;
	transform: scale(1);
}

#term .circle:before {
	content: "";
	border-left: 8px var(--color-secondary) solid;
	border-right: 8px var(--color-secondary) solid;
	width: 100%;
	display: block;
	height: 65%;
}

#term .term-txt {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2.4rem;
	color: #fff;
	padding: 3rem 0 6rem;
}

#term h1 {
	font-size: var(--font-size-headding);
	font-family: var(--font-family-LINE);
	font-weight: 700;
	text-align: center;
	line-height: 140%;
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

#term .text-read {
	font-size: calc(var(--font-size-read) * 0.9);
	font-weight: 500;
	text-align: center;
	line-height: 180%;
	padding: 0 1.6rem;
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.22s, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
	will-change: opacity, transform;
}

/* スクロール発火時（is-active または active クラス付与） */
#term.is-active h1,
#term.active h1 {
	opacity: 1;
	transform: translateY(0);
}

#term.is-active .text-read,
#term.active .text-read {
	opacity: 1;
	transform: translateY(0);
}

@media screen and (min-width: 1024px) {
	#term h1 {
		font-size: calc(var(--font-size-headding) * 1.2);
	}
	#term .term-txt {
	  gap: 4.8rem;
	}
	#term .circle {
		height: 145%;
		mask-position: center bottom;
	}
}

@media (prefers-reduced-motion: reduce) {
	#term .circle,
	#term h1,
	#term .text-read {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =============================================
  #news
============================================= */

.news {
	font-size: calc(var(--font-size-base) * 1);
	font-weight:500;
	padding-bottom: 0.4rem;
	border:2px solid var(--color-secondary);
	border-radius:2rem;
	position: relative;
	width: 100%;
	  max-width: 480px;
}
.news dt{
  text-align: center;
  display: table;
  padding: 0.8rem 1rem;
  line-height: 100%;
  font-size: 80%;
  color: #fff;
  background: var(--color-primary);
  border-radius: 0.5rem 0.5rem 0 0;
  position: absolute;
  top: -1.6rem;
  left: 1rem;
}
.news dd{
	margin: 1.6rem 0.8rem 1.6rem 1.6rem;
	font-size: 85%;
}
.news dd.scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  height: 120px;
}
.news dd.scroll::-webkit-scrollbar {
    width: 3px;
}
.news dd.scroll::-webkit-scrollbar-thumb {
    background:#999;
    border-radius: 6px;
}
.news dd.scroll::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 6px;
}
.news dd a {
  color: #000;
  border-bottom: 1px #eee solid;
  display: block;
  text-decoration: none;
  padding: 1rem 0;
}

.news dd a .text-date {
  display: block;
  line-height: 1;
}


@media screen and (min-width: 1024px) {
	.news dd{
	  padding: 1.6rem 2rem;
	}
}

/* =============================================
  .initiative
============================================= */
.section.inner {
  padding: 0 0 calc(var(--space-section) * 2);
}
.section.inner p {
  max-width: 640px;
}
.page__header {
	padding: 0 0 6rem;
	overflow: visible;
}
.page__header img {
  width: 30%;
  position: relative;
  top: 2rem;
  z-index: 2;
  max-width: 200px;
  opacity: 0;
  transform: translateY(40px) scale(0.85);
  transition: opacity 0.6s ease-out 0.55s, transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s;
  will-change: opacity, transform;
}

/* スクロール到達時のヴィヴィくんポップアップ */
.page__header.is-active img,
.page__header.active img {
  opacity: 1;
  transform: translateY(0) scale(1);
}

h2.type-headding {
	font-size: calc(var(--font-size-headding) * 0.7);
	font-family: var(--font-family-LINE);
	font-weight: 700;
	text-align: center;
	line-height: 140%;
}
.type-headding {
	position: relative;
	transform: rotate(-8deg);
	color: #fff;
	padding: 3rem 1rem;
	transition: color 0.4s ease 0.2s;
}

h2.type-headding.subpage {
  color: var(--color-primary);
}


/* 見出しテキスト本体（帯が出た後に少し拡大して戻るポップバウンド） */
.type-headding__txt {
	display: inline-block;
	opacity: 0;
	transform: scale(0.9);
	will-change: opacity, transform;
}

.page__header.is-active .type-headding__txt,
.page__header.active .type-headding__txt {
	animation: headingTextPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s forwards;
}

/* 番号（#1, #2, #3）のポップアップ */
.type-headding .type-headding__num {
  position: absolute;
  top: -3.6rem;
  font-size: 150%;
  left: 1.6rem;
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  will-change: opacity, transform;
    display: none
}

.page__header.is-active .type-headding .type-headding__num,
.page__header.active .type-headding .type-headding__num {
  animation: numberPopBounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.38s forwards;
}

@keyframes headingTextPop {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	55% {
		opacity: 1;
		transform: scale(1.08); /* ほんのり拡大 */
	}
	80% {
		transform: scale(0.98);
	}
	100% {
		opacity: 1;
		transform: scale(1); /* 定位置 */
	}
}

@keyframes numberPopBounce {
	0% {
		opacity: 0;
		transform: translateY(12px) scale(0.85);
	}
	55% {
		opacity: 1;
		transform: translateY(-4px) scale(1.15); /* ほんのり拡大 */
	}
	80% {
		transform: translateY(1px) scale(0.98);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* 青とオレンジの帯（共通定義） */
.type-headding:before,
.type-headding:after {
	content: "";
	width: 200%;
	height: 100%;
	position: absolute;
	top: 0;
	left: -50%;
	will-change: clip-path;
}

/* 青の帯（左から右へシュッと伸びる） */
.type-headding:before {
	background: var(--color-primary);
	z-index: -1;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}
.type-headding.subpage:before  {
	background:#fff;
}

/* オレンジの帯（右から左へシュッと伸びる） */
.type-headding:after {
	background: var(--color-secondary);
	z-index: -2;
	transform: rotate(16deg);
	clip-path: inset(0 0 0 100%);
	transition: clip-path 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}

/* スクロール到達時：帯が左右から伸びて全開 */
.page__header.is-active .type-headding:before,
.page__header.active .type-headding:before {
	clip-path: inset(0 0 0 0);
}

.page__header.is-active .type-headding:after,
.page__header.active .type-headding:after {
	clip-path: inset(0 0 0 0);
}

/* --- 奇数番目（#support 等：左右の伸びる方向を反転） --- */
.initiative:nth-child(odd) .page__header .type-headding {
  transform: rotate(8deg);
}

.initiative:nth-child(odd) .page__header .type-headding:before {
  clip-path: inset(0 0 0 100%); /* 右から左へ伸びる */
}

.initiative:nth-child(odd) .page__header .type-headding:after {
  transform: rotate(-16deg);
  clip-path: inset(0 100% 0 0); /* 左から右へ伸びる */
}

.initiative:nth-child(odd) .page__header.is-active .type-headding:before,
.initiative:nth-child(odd) .page__header.active .type-headding:before {
  clip-path: inset(0 0 0 0);
}

.initiative:nth-child(odd) .page__header.is-active .type-headding:after,
.initiative:nth-child(odd) .page__header.active .type-headding:after {
  clip-path: inset(0 0 0 0);
}

.initiative:nth-child(odd) .page__header .type-headding .type-headding__num {
  left: auto;
  right: 1.6rem;
}
.initiative:last-child .page__header .type-headding {
  padding: 1.5rem 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.page__header img,
	.type-headding:before,
	.type-headding:after,
	.type-headding__txt,
	.type-headding > span {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}

.initiative .c-card{
	border-radius:0;
}
.initiative .c-card__body {
  gap: calc(var(--card-gap) * 3);
}
.initiative .c-card__txt {
  padding: 0 calc(var(--card-padding) * 0)!important;
width: 100% !important;
  max-width: 1100px;
}


.initiative .c-card__title {
  font-size: calc(var(--card-font-size) * 1.2);
  font-family: var(--font-family-LINE);
  font-weight: 700;
  text-align: center;
  line-height: 140%;
  color: var(--color-secondary);
}
.initiative .c-card__link .btn {
	min-width: 280px;
	background-color: var(--color-primary);
	padding: 1.6rem 4rem;
}
.initiative a.btn span:after{
	content: "";
	width: 15px;
	height: 15px;
	color: var(--color-secondary);
	mask-image:url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20127.36%20192.77%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23eb6100%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234.13%20192.77%206.3%20164.94%2071.71%2099.54%200%2027.83%2027.83%200%20127.36%2099.54%2034.13%20192.77%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
	position: absolute;
	right: 1.6rem;
	top: 50%;
	transform: translateY(-50%);
}
.initiative a.btn.btn-textlink{
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid !important;
  border-radius: 0 !important;
  padding:0.3rem 2rem 0.3rem 0;
  min-width: auto;
}
.initiative a.btn.btn-textlink span:after {
  right: 0;
}
.initiative .c-card__link .btn:hover {
	opacity:0.7;
}

#v-varenday.initiative .c-card__title {
  color: var(--color-primary);
}


#support .news dt{
	display:none;
}
#support .news {
  border-color:var(--color-primary);
}
.box {
  border: 2px solid var(--color-secondary);
  border-radius: 2rem;
  position: relative;
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}


.v-varenday-body {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
}

.v-varenday {
  display: flex;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  flex-wrap: wrap;
    justify-content: center;
}
.v-varenday > *{
position: relative;
}
.v-varenday > *:before{
/*
content: "";
  background: #003894;
  background: linear-gradient(180deg, rgba(0, 56, 148, 0) 0%, rgba(0, 56, 148, 1) 70%);
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: 0;
  left: 0;
  z-index: 1;
*/
}
.v-varenday img{
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.v-varenday > a{
	text-decoration: none;
	background:var(--color-secondary);
	border-radius: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	align-items: center;
	justify-content: center;
	margin-top: 2rem;
	position: relative;
	width: calc(100% / 2 - 1rem);
}
.v-varenday > a:nth-child(even){
	background:var(--color-primary);
}
.v-varenday > a:after{
	content: "詳しくはこちら";
	color: #fff;
	font-size: 80%;
	width: 100%;
	text-align: right;
	padding: 1rem 3rem;
}
.v-varenday > a:before{
	content: "";
	width: 10px;
	height: 10px;
	color: #fff;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: currentColor;
	background-repeat: no-repeat;
	background-position: center;
	mask-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20127.36%20192.77%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23eb6100%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234.13%20192.77%206.3%20164.94%2071.71%2099.54%200%2027.83%2027.83%200%20127.36%2099.54%2034.13%20192.77%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E);
	position: absolute;
	right: 1em;
	bottom: 1.4rem;
	z-index: 3;
}
.v-varenday > a.no-link:before{
display:none;
}
.v-varenday > a.no-link:after{
	content: "詳細は後日公開";
}
.v-varenday > a.no-link.ComingSoon:after{
display:none;
}

.v-varenday  dl{
  position: relative;
  left: 0;
  display: block;
  z-index: 2;
  color: #fff;
  padding: 0rem;
  font-size: calc(var(--card-font-size) * 0.8);
  line-height: 120%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 1.6rem;
  justify-content: space-between;
  font-weight: 900;
  padding: 1rem 1rem;
}
.v-varenday  dt{
	background: #fff !important;
	color: var(--color-secondary) !important;
	display: block !important;
	text-align: center !important;
	padding: 0.5rem !important;
	border-radius: 0 !important;
	font-size: 120% !important;
	max-width: none !important;
	width: 100%;
	border-radius: 9999px !important;
	position: relative;
	margin-top: -2rem;
	border: 2px var(--color-secondary) solid;
}
.v-varenday > a:nth-child(even)  dt{
	color: var(--color-primary) !important;
}
.v-varenday > a:nth-child(even)  dt{
	border: 2px var(--color-primary) solid;
}
.v-varenday  dd{
text-align: center !important;
  line-height: 140%;
}
.v-varenday  dl dd.title{
	padding: 0rem 0.5rem;
	font-weight: 900;
	font-size: 120%;
	color:var(--color-accent);
}
.v-varenday  dl dd.text{
  padding: 0rem 0.5rem;
  font-weight:500;
  font-size:80%;
  line-height: 160%;
}

.v-varenday-body .btn-textlink {
  margin: 0 0 0 auto;
}

/* =============================================
   ファン感謝祭バナー (.v-fan-banner)
   aタグ・divタグ両対応 / テキスト可変対応
============================================= */
.v-fan-banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	  width: calc(100% - 5%);
	max-width: 480px;
	margin: 1rem auto 2rem;
	padding: 2.2rem 3.4rem 1.8rem;
	background-color: var(--color-primary);
	text-decoration: none !important;
	border-radius: 0.4rem;
	box-sizing: border-box;
	box-shadow: 0 4px 12px rgba(0, 56, 148, 0.2);
}

/* aタグの場合のみホバーエフェクトとポインターカーソルを付与 */
a.v-fan-banner {
	cursor: pointer;
	transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

a.v-fan-banner:hover {
	opacity: 0.95;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 56, 148, 0.3);
}

/* 左右のストライプ装飾（オレンジ＋白線） */
.v-fan-banner::before,
.v-fan-banner::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 28px;
	pointer-events: none;
}

.v-fan-banner::before {
	left: 0;
	background: linear-gradient(
		to right,
		var(--color-secondary) 0,
		var(--color-secondary) 12px,
		var(--color-primary) 12px,
		var(--color-primary) 18px,
		#ffffff 18px,
		#ffffff 22px,
		transparent 22px
	);
}

.v-fan-banner::after {
	right: 0;
	background: linear-gradient(
		to left,
		var(--color-secondary) 0,
		var(--color-secondary) 12px,
		var(--color-primary) 12px,
		var(--color-primary) 18px,
		#ffffff 18px,
		#ffffff 22px,
		transparent 22px
	);
}

.v-fan-banner__title {
	color: #ffffff;
	font-family: var(--font-family-LINE);
	font-weight: 800;
	font-style: italic;
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2.1rem);
	line-height: 1.35;
	text-align: center;
	margin: 0 0 1.2rem;
	letter-spacing: 0.03em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	max-width: 100%;
	box-sizing: border-box;
}

/* ボタン（span, a, div いずれでも柔軟に対応） */
.v-fan-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	color: var(--color-primary);
	font-family: var(--font-family-LINE);
	font-weight: 700;
	font-size: clamp(1.1rem, 0.95rem + 0.3vw, 1.35rem);
	padding: 0.45rem clamp(1.4rem, 1rem + 1vw, 2.4rem);
	border-radius: 9999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
	max-width: calc(100% - 1rem);
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* a.v-fan-banner のホバー、または a.v-fan-banner__btn 単体ホバー */
a.v-fan-banner:hover .v-fan-banner__btn,
a.v-fan-banner__btn:hover {
	background-color: var(--color-secondary);
	color: #ffffff;
	cursor: pointer;
}

.v-fan-banner__img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1.6rem;
}
.v-fan-banner__img img{
  aspect-ratio: 16 / 9;
}
.v-fan-banner__img:before {
content: "";
  background: url(../img/index/character04.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  position: absolute;
  z-index: 2;
  bottom: -2.5%;
  right: -2.5%;
  width: 30%;
  height: 30%;
  transform: rotate(15deg);
	
}

@media screen and (max-width: 768px) {
	.v-fan-banner {
		padding: 1.6rem 2.4rem 1.4rem;
	}
	.v-fan-banner::before,
	.v-fan-banner::after {
		width: 20px;
	}
	.v-fan-banner::before {
		background: linear-gradient(
			to right,
			var(--color-secondary) 0,
			var(--color-secondary) 8px,
			var(--color-primary) 8px,
			var(--color-primary) 13px,
			#ffffff 13px,
			#ffffff 16px,
			transparent 16px
		);
	}
	.v-fan-banner::after {
		background: linear-gradient(
			to left,
			var(--color-secondary) 0,
			var(--color-secondary) 8px,
			var(--color-primary) 8px,
			var(--color-primary) 13px,
			#ffffff 13px,
			#ffffff 16px,
			transparent 16px
		);
	}
	.v-fan-banner__title {
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}
	.v-fan-banner__btn {
		font-size: 1.15rem;
		padding: 0.4rem 1.6rem;
	}

}

.initiative .section.inner{
  position: relative;
}
.initiative .section.inner:before{
	content: "";
	mask-image: url(../img/index/circle-line-half.svg);
	mask-position: center bottom;
	mask-size: 170%;
	mask-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	opacity: 0;
	background: var(--color-primary);
	transform: scale(0.1);
	transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;

}
#apass.initiative .section.inner:before{
	content: "";
	mask-image: url(../img/index/circle-half.svg);
	background: var(--color-secondary);
	background: #fbdfcc;

}
#apass.initiative .page__body__inner{
	color:#fff;
	color:var(--color-primary);
}

#v-varenday.is-active .section.inner:before ,
#support.is-active .section.inner:before ,
#apass.is-active .section.inner:before {
  opacity: 1;
  transform: scale(1);
}

@media screen and (max-width: 1023px) {
	#apass {
	  position: relative;
	}
	#apass:before{
    content: "";
    background: #fbdfcc;
    position: absolute;
    width: 100%;
    height: 50%;
    top: 27rem;
    z-index: 0;
	}
}

@media screen and (min-width: 1024px) {
	.page__header img {
	  top: 6rem;
	}
	h2.type-headding {
		font-size: calc(var(--font-size-headding) * 1);
	}
	.type-headding {
		transform: rotate(-4deg);
		padding: 6rem 2rem;
	}
	.type-headding:after {
		transform: rotate(8deg);
	}
	.initiative:nth-child(odd) .page__header .type-headding {
	  padding: 6rem 2rem;
	  transform: rotate(4deg);
	}
	.initiative:nth-child(odd) .page__header .type-headding:after {
	  transform: rotate(-8deg);
	}
	.initiative:last-child .page__header .type-headding {
	  padding: 5rem 1rem;
	}
	.type-headding .type-headding__num {
	  top: -6.4rem;
	  font-size: 180%;
	  left: 10%;
	}
	.initiative:nth-child(odd) .page__header .type-headding .type-headding__num {
	  right: 10%;
	  left: auto;
	}
	.initiative .c-card__body {
	  gap: calc(var(--card-gap) * 2);
	}

	.box {
	 min-width: 550px;
	}
	.v-varenday {
		gap: 2rem;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.v-varenday > a {
	 width: calc(100% / 4 - 2rem);
	}
	.v-varenday > a:before {
	  bottom: 1.6rem;
	}
	#apass.initiative .section.inner:before {
	mask-image: url(../img/index/circle-half.svg);
	  top: -6rem;
	}
}


/* =============================================
 #v-varen_footer
============================================= */

#v-varen_footer{
  background: #f2f2f2;
  margin-top: 6rem;
  z-index: 1;
  position: relative;
}


#v-varen.cms-template main ,
#v-varen.archive main {
  background: var(--color-primary);
  color: #fff;
    position: relative;
}
article.cms-body {
  position: relative;
}
#v-varen.cms-template .cms-body:before,
#v-varen.cms-template .cms-body:after,
#v-varen.archive main:before,
#v-varen.archive main:after  {
	content: "";
	border-left: 4px var(--color-secondary) solid;
	border-right: 4px var(--color-secondary) solid;
	position: absolute;
	width: 96%;
	height: 100%;
	top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#v-varen.cms-template .cms-body:after,
#v-varen.archive main:after {
  border-left: 2px #fff solid;
  border-right: 2px #fff solid;
  width: 90%;
}

#cms__template{
width: 100%;
}
#v-varen.cms-template .img-auto  figcaption {
	position: relative;
	width: 100%;
	text-align: right;
	margin-top: 5px;
}


#cms__template,
.cms__component__blocks_table table td{
	color:#fff;
}
.cms__component__blocks_table table th {
  background: #fff;
 color: var(--color-primary);
}

#cms__template h2{
color:var(--color-secondary);
}

#cms__template p, #cms__template [data-font-size=p]{
	max-width:none;
}
.cms__page__body {
  }
.cms__btn__basic, a.cms__btn__basic {
  background: var(--color-primary);
  text-decoration: none;
    border: 1px #fff solid;
}
[data-icon=sign]:after, a.btn__icon:after {
  color:var(--color-secondary);
	mask-image:url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20127.36%20192.77%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23eb6100%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234.13%20192.77%206.3%20164.94%2071.71%2099.54%200%2027.83%2027.83%200%20127.36%2099.54%2034.13%20192.77%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
}

.character02:before {
  content: "";
  background: url(../img/index/character02.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  display: block;
  height: 130px;
  margin: 0 auto;
}


@media screen and (min-width: 1024px) {
	#v-varen.cms-template .cms-body:before,
	#v-varen.archive main:before {
	  border-left: 12px var(--color-secondary) solid;
	  border-right: 12px var(--color-secondary) solid;
	  width: 96%;
	}
	#v-varen.cms-template .cms-body:after,
	#v-varen.archive main:after {
	  border-left: 4px #fff solid;
	  border-right: 4px #fff solid;
	  width: 94%;
	}
}

/* =============================================
   #apass 料金表コンポーネント (apass-price-box)
============================================= */
.apass-price-box {
	background-color: var(--color-secondary);
	padding: clamp(1.4rem, 1rem + 1vw, 2.4rem);
	border-radius: 2rem;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	box-sizing: border-box;
}

.apass-price-box__inner {
	background-color: #fff;
	border-radius: 1.4rem;
	padding: clamp(1.8rem, 1.2rem + 1vw, 2.6rem) clamp(1.6rem, 1.2rem + 1vw, 2.6rem);
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: clamp(1.6rem, 1rem + 1.2vw, 3rem);
	box-sizing: border-box;
}

/* 左側：長崎県民 */
.apass-price-col--local {
	flex: 1.7;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* 右側：一般 */
.apass-price-col--general {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-left: clamp(1.6rem, 1rem + 1.2vw, 3rem);
	border-left: 2px dotted var(--color-secondary);
	min-width: 0;
}

.apass-price-col__title {
	font-size: clamp(1.4rem, 1.2rem + 0.35vw, 1.6rem);
	font-weight: 700;
	font-family: var(--font-family-LINE);
	color: #111;
	margin: 0 0 1.4rem;
	line-height: 1.3;
	white-space: nowrap;
}

/* 3枚のカード（長崎県民） */
.apass-price-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.6rem, 0.4rem + 0.4vw, 1.2rem);
	flex: 1;
	align-items: stretch;
}

.apass-price-card {
	border: 1.5px solid var(--color-secondary);
	border-radius: 1rem;
	background: #fff;
	padding: clamp(1rem, 0.6rem + 0.6vw, 1.4rem) 0.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 96px;
	box-sizing: border-box;
}

.apass-price-card__label {
	font-size: clamp(1.15rem, 0.95rem + 0.3vw, 1.35rem);
	font-weight: 700;
	color: #111;
	line-height: 1.2;
	margin-bottom: 0.4rem;
	white-space: nowrap;
}

.apass-price-card__price {
	color: var(--color-secondary);
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.apass-price-card__price .num {
	font-size: clamp(2.2rem, 1.6rem + 1.1vw, 3rem);
	letter-spacing: -0.02em;
	font-family: var(--font-family-LINE);
	font-weight: 700;
}

.apass-price-card__price .unit {
	font-size: clamp(1.2rem, 1rem + 0.3vw, 1.5rem);
	font-weight: 700;
	margin-left: 0.05em;
}

.apass-price-card__note {
	font-size: clamp(0.85rem, 0.75rem + 0.15vw, 0.95rem);
	color: #222;
	line-height: 1.2;
	margin: 0.5rem 0 0;
	white-space: nowrap;
}

/* 一般の方 リスト */
.apass-price-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	flex: 1;
	gap: 0.8rem;
}

.apass-price-list__item {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: clamp(1.3rem, 1.1rem + 0.3vw, 1.5rem);
	color: #111;
}

.apass-price-list__item .label {
	font-weight: 700;
	white-space: nowrap;
}

.apass-price-list__item .leader {
	flex: 1;
	border-bottom: 2px dotted #555;
	margin: 0 0.2rem 0.25em;
	min-width: 1rem;
}

.apass-price-list__item .price {
	font-weight: 700;
	font-family: var(--font-family-LINE);
	white-space: nowrap;
}

.apass-price-note {
	font-size: clamp(0.85rem, 0.75rem + 0.15vw, 0.95rem);
	color: #222;
	margin: 0.6rem 0 0;
	text-align: right;
	line-height: 1.2;
	white-space: nowrap;
}

/* SP対応 (〜768px) */
@media screen and (max-width: 768px) {
	.apass-price-box {
		padding: 1.2rem 0.8rem;
		border-radius: 1.6rem;
	}
	.apass-price-box__inner {
		flex-direction: column;
		gap: 1.8rem;
		padding: 1.6rem 0.8rem;
		border-radius: 1.2rem;
	}
	.apass-price-col--general {
		padding-left: 0;
		padding-top: 1.6rem;
		border-left: none;
		border-top: 2px dotted var(--color-secondary);
	}
	.apass-price-col__title {
		text-align: left;
		font-size: 1.35rem;
		white-space: normal;
		margin-bottom: 1rem;
	}
	.apass-price-cards {
		gap: 0.5rem;
	}
	.apass-price-card {
		border: 1.5px solid var(--color-secondary);
		border-radius: 0.8rem;
		padding: 1rem 0.3rem 0.8rem;
		min-height: 96px;
	}
	.apass-price-card__label {
		font-size: 1.25rem;
		font-weight: 700;
		margin-bottom: 0.4rem;
		white-space: nowrap;
	}
	.apass-price-card__price {
		gap: 0.1rem;
	}
	.apass-price-card__price .num {
		font-size: 1.9rem;
		font-weight: 700;
	}
	.apass-price-card__price .unit {
		font-size: 1.2rem;
		font-weight: 700;
	}
	.apass-price-card__note {
		font-size: 0.85rem;
		line-height: 1.25;
		margin-top: 0.35rem;
		transform: none;
		white-space: normal;
		text-align: center;
	}
	.apass-price-list {
		gap: 0.8rem;
	}
	.apass-price-list__item {
		font-size: 1.35rem;
	}
	.apass-price-note {
		font-size: 0.9rem;
		margin-top: 0.6rem;
	}
}

@media screen and (max-width: 375px) {
	.apass-price-box {
		padding: 0.8rem 0.6rem;
	}
	.apass-price-box__inner {
		padding: 1.4rem 0.6rem;
	}
	.apass-price-cards {
		gap: 0.4rem;
	}
	.apass-price-card {
		padding: 0.8rem 0.2rem 0.6rem;
		min-height: 92px;
	}
	.apass-price-card__label {
		font-size: 1.15rem;
	}
	.apass-price-card__price .num {
		font-size: 1.75rem;
	}
	.apass-price-card__price .unit {
		font-size: 1.15rem;
	}
	.apass-price-card__note {
		font-size: 0.8rem;
		line-height: 1.2;
	}
}


#v-varen.archive .v-varenday-body {
}
#v-varen.archive .v-varenday{
  display: flex;
  gap: 1rem;
}
#v-varen.archive .v-varenday{
	display: flex;
	gap: 1rem;
	padding: 0 1rem;
	max-width: 780px;
}

#v-varen.archive .v-varenday .c-card-group {
  gap: calc(var(--card-gap) * 2);
}

#v-varen.archive .v-varenday .c-card-group>.c-card {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1.6rem;
}
#v-varen.archive .v-varenday .c-card-group>.c-card .c-card__img {
  height: 100%;
  width: 100%;
}
#v-varen.archive .v-varenday .c-card-group>.c-card .c-card__img img {
  height: 100%;
}
#v-varen.archive .v-varenday .c-card-group>.c-card .c-card__body {
	gap: calc(var(--card-gap) * 0);
	width: 100%;
}
#v-varen.archive .v-varenday .c-card-group>.c-card .c-card__body >* {
  width: 100%;
  text-align:left;
}

#v-varen.archive .v-varenday .c-card__title {
  font-size: 90%;
  color:#fff;
}
#v-varen.archive .v-varenday p.data {
  font-size: 85%;
}
#v-varen.archive .v-varenday a.btn.btn-textlink {
  color:#fff!important;
  border-color:#fff!important;
    font-size: calc(var(--card-font-size) * 0.7);
}
#v-varen.archive .v-varenday a.btn.btn-textlink span:after {
  width: 12px;
  height: 12px;
  color:#fff;
}


@media screen and (min-width: 1024px) {
	#v-varen.archive .v-varenday .c-card-group>.c-card .c-card__body {
	  gap: calc(var(--card-gap) * 0.5);
	}
	#v-varen.archive .v-varenday .c-card__title {
	  font-size: 110%;
	}
	#v-varen.archive .v-varenday .c-card-group>.c-card {
	  grid-template-columns: 1fr 1.7fr;
	  gap: 2.6rem;
	}
}

/* =============================================
   カウントダウンタイマー (.countdown-timer)
============================================= */
.countdown-timer {
	width: 100%;
	max-width: 520px;
	margin: 2.4rem auto 0;
	padding: clamp(1.6rem, 1.2rem + 1vw, 2.4rem) clamp(1.2rem, 0.8rem + 1vw, 2rem);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 2rem;
	box-shadow: 0 8px 32px rgba(0, 32, 90, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	text-align: center;
	opacity: 0;
	transform: translateY(32px) scale(0.96);
	transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
	will-change: opacity, transform;
	box-sizing: border-box;
}

#term.is-active .countdown-timer,
#term.active .countdown-timer,
.countdown-timer.is-active,
.countdown-timer.active {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.countdown-timer__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-secondary);
	color: #ffffff;
	font-family: var(--font-family-LINE);
	font-weight: 700;
	font-size: clamp(1.2rem, 1rem + 0.4vw, 1.45rem);
	padding: 0.35rem 1.6rem;
	border-radius: 9999px;
	margin: 0 auto 1.6rem;
	box-shadow: 0 3px 10px rgba(235, 97, 0, 0.35);
	letter-spacing: 0.05em;
	line-height: 1.3;
}

.countdown-timer__units {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.4rem, 0.2rem + 0.6vw, 1rem);
	width: 100%;
}

.countdown-timer__unit-box {
	background: #ffffff;
	border-radius: 1.2rem;
	padding: clamp(0.8rem, 0.5rem + 0.6vw, 1.2rem) clamp(0.5rem, 0.3rem + 0.4vw, 0.9rem);
	min-width: clamp(62px, 16vw, 84px);
	flex: 1;
	max-width: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	position: relative;
	box-sizing: border-box;
	border: 1px solid rgba(0, 56, 148, 0.08);
}

.countdown-timer__num {
	font-family: var(--font-family-LINE);
	font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
	color: var(--color-primary);
	letter-spacing: -0.02em;
	display: block;
}

.countdown-timer__unit {
	font-family: var(--font-family-LINE);
	font-size: clamp(1rem, 0.85rem + 0.25vw, 1.15rem);
	font-weight: 700;
	color: #666666;
	margin-top: 0.4rem;
	line-height: 1;
	display: block;
}

.countdown-timer__colon {
	font-family: var(--font-family-LINE);
	font-size: clamp(1.8rem, 1.4rem + 1vw, 2.6rem);
	font-weight: 800;
	color: var(--color-accent);
	margin-bottom: 1.4rem;
	line-height: 1;
	animation: timerColonBlink 1s ease-in-out infinite;
	user-select: none;
}

@keyframes timerColonBlink {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.9); }
}

.countdown-timer__complete-msg {
	font-family: var(--font-family-LINE);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.8rem);
	color: #ffffff;
	background: var(--color-secondary);
	padding: 1rem 2rem;
	border-radius: 1rem;
	margin-top: 1rem;
	line-height: 1.4;
	box-shadow: 0 4px 12px rgba(235, 97, 0, 0.4);
}

@media screen and (max-width: 480px) {
	.countdown-timer {
		margin-top: 1.8rem;
		padding: 1.4rem 0.8rem;
		border-radius: 1.6rem;
	}
	.countdown-timer__units {
		gap: 0.3rem;
	}
	.countdown-timer__unit-box {
		padding: 0.7rem 0.3rem 0.6rem;
		min-width: 54px;
		border-radius: 0.8rem;
	}
	.countdown-timer__num {
		font-size: 1.9rem;
	}
	.countdown-timer__unit {
		font-size: 0.9rem;
		margin-top: 0.3rem;
	}
	.countdown-timer__colon {
		font-size: 1.6rem;
		margin-bottom: 1.1rem;
	}
}

@media screen and (max-width: 360px) {
	.countdown-timer__unit-box {
		min-width: 48px;
		padding: 0.6rem 0.2rem 0.5rem;
	}
	.countdown-timer__num {
		font-size: 1.65rem;
	}
	.countdown-timer__unit {
		font-size: 0.8rem;
	}
	.countdown-timer__colon {
		font-size: 1.3rem;
		margin-bottom: 0.9rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.countdown-timer {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.countdown-timer__colon {
		animation: none !important;
		opacity: 1 !important;
	}
}