/**
 * 夏のキャンペーン（SUMMER TRIAL 2026）CTAバナー スタイル
 * template-parts/summer-campaign.php と対で使用。
 * テーマのCSS変数（--primary-color / --secondary-color / --accent-color）を継承。
 */

:root {
	--summer-teal: var(--primary-color, #00A0A0);
	--summer-coral: var(--secondary-color, #F88379);
	--summer-yellow: var(--accent-color, #FFD700);
	--summer-ink: #0b3d3d;
}

/* ========================================================
   1. ヘッダー直下 告知バー
   ======================================================== */
.summer-bar {
	display: block;
	text-decoration: none;
	background: linear-gradient(100deg, #00b3b3 0%, #00a0a0 45%, #ff9a76 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
	z-index: 900;
}
.summer-bar::after { /* 光の走査アニメ */
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
	transform: skewX(-20deg);
	animation: summerShine 5s ease-in-out infinite;
}
@keyframes summerShine {
	0%, 60% { left: -60%; }
	100% { left: 130%; }
}
.summer-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 9px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.summer-bar__tag {
	background: rgba(255,255,255,.22);
	border: 1px solid rgba(255,255,255,.4);
	padding: 3px 12px;
	border-radius: 50px;
	font-weight: 700;
	font-size: .82rem;
	white-space: nowrap;
	backdrop-filter: blur(4px);
}
.summer-bar__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.summer-bar__text strong { font-size: .98rem; font-weight: 700; }
.summer-bar__sub { font-size: .76rem; opacity: .92; }
.summer-bar__btn {
	background: #fff;
	color: var(--summer-ink);
	font-weight: 800;
	font-size: .88rem;
	padding: 7px 18px;
	border-radius: 50px;
	white-space: nowrap;
	box-shadow: 0 3px 10px rgba(0,0,0,.18);
	transition: transform .25s ease, box-shadow .25s ease;
}
.summer-bar__arrow { transition: transform .25s ease; display: inline-block; }
.summer-bar:hover .summer-bar__btn { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.summer-bar:hover .summer-bar__arrow { transform: translateX(4px); }

@media (max-width: 600px) {
	.summer-bar__inner { gap: 10px; padding: 8px 12px; }
	.summer-bar__tag { display: none; }
	.summer-bar__text strong { font-size: .84rem; }
	.summer-bar__sub { font-size: .7rem; }
	.summer-bar__btn { font-size: .78rem; padding: 6px 14px; }
}

/* ========================================================
   2. 追従フローティングバナー
   ======================================================== */
.summer-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998;
	max-width: 340px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .3s ease, transform .3s ease;
}
.summer-float.is-visible { opacity: 1; transform: translateY(0); }
.summer-float__link {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, #00a0a0 0%, #007e8c 100%);
	color: #fff;
	text-decoration: none;
	padding: 14px 16px 14px 14px;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0,86,96,.35);
	border: 2px solid rgba(255,255,255,.25);
	position: relative;
}
.summer-float__badge {
	background: var(--summer-yellow);
	color: var(--summer-ink);
	font-weight: 800;
	font-size: .62rem;
	letter-spacing: .5px;
	padding: 5px 8px;
	border-radius: 8px;
	white-space: nowrap;
	flex-shrink: 0;
}
.summer-float__body { display: flex; flex-direction: column; line-height: 1.3; }
.summer-float__title { font-size: .95rem; font-weight: 800; }
.summer-float__desc { font-size: .72rem; opacity: .92; margin-top: 2px; }
.summer-float__cta {
	display: none; /* コンパクト表示のため非表示。リンク全体がタップ領域 */
}
.summer-float__close {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	color: #555;
	border: none;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.summer-float__close:hover { color: #000; }
.summer-float__link:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,86,96,.45); transition: all .25s ease; }

@media (max-width: 600px) {
	.summer-float { right: 10px; left: 10px; bottom: 12px; max-width: none; }
	.summer-float__title { font-size: .9rem; }
}
/* モバイルで記事下部の操作バーと重ならないよう少し上げる */
@media (max-width: 768px) {
	.single .summer-float { bottom: 84px; }
}

/* ========================================================
   3 & 4. ブログ記事用 大型バナー
   ======================================================== */
.summer-blog {
	display: block;
	text-decoration: none;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(125deg, #00a8a8 0%, #008a94 55%, #f88379 130%);
	box-shadow: 0 14px 40px rgba(0,120,128,.28);
	color: #fff;
	margin: 32px 0;
	border: 1px solid rgba(255,255,255,.18);
}
.summer-blog.is-top { margin: 0 0 36px; } /* 記事冒頭 */
.summer-blog__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 12% 20%, rgba(255,215,0,.35), transparent 42%),
		radial-gradient(circle at 88% 80%, rgba(255,255,255,.22), transparent 45%);
	pointer-events: none;
}
.summer-blog__content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 30px;
	flex-wrap: wrap;
}
.summer-blog__left { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.summer-blog__badge {
	display: inline-block;
	align-self: flex-start;
	background: rgba(255,255,255,.2);
	border: 1px solid rgba(255,255,255,.45);
	padding: 5px 14px;
	border-radius: 50px;
	font-weight: 800;
	font-size: .78rem;
	letter-spacing: .5px;
	backdrop-filter: blur(4px);
}
.summer-blog__copy {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.35;
	text-shadow: 0 2px 8px rgba(0,60,64,.25);
}
.summer-blog__features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.summer-blog__feat {
	font-size: .8rem;
	font-weight: 600;
	background: rgba(255,255,255,.16);
	padding: 5px 12px;
	border-radius: 8px;
	white-space: nowrap;
}
.summer-blog__right {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.summer-blog__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--summer-ink);
	font-weight: 800;
	font-size: 1.02rem;
	padding: 14px 26px;
	border-radius: 50px;
	box-shadow: 0 6px 18px rgba(0,0,0,.2);
	transition: transform .25s ease, box-shadow .25s ease;
	white-space: nowrap;
}
.summer-blog__cta svg { transition: transform .25s ease; }
.summer-blog__deadline { font-size: .78rem; font-weight: 600; opacity: .95; }
.summer-blog:hover .summer-blog__cta { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 26px rgba(0,0,0,.3); }
.summer-blog:hover .summer-blog__cta svg { transform: translateX(4px); }

@media (max-width: 768px) {
	.summer-blog__content { flex-direction: column; align-items: stretch; text-align: center; padding: 24px 20px; gap: 18px; }
	.summer-blog__badge { align-self: center; }
	.summer-blog__copy { font-size: 1.22rem; }
	.summer-blog__features { justify-content: center; }
	.summer-blog__right { width: 100%; }
	.summer-blog__cta { width: 100%; justify-content: center; font-size: .98rem; padding: 14px 20px; }
}
@media (max-width: 420px) {
	.summer-blog__copy { font-size: 1.08rem; }
	.summer-blog__feat { font-size: .72rem; padding: 4px 10px; }
}

/* アニメーション抑制設定を尊重 */
@media (prefers-reduced-motion: reduce) {
	.summer-bar::after { animation: none; }
	.summer-float, .summer-blog__cta, .summer-bar__btn { transition: none; }
}