/* ============================= */
/* ベース */
/* ============================= */


.daily-message-app {
	--daily-message-bg: #fcfaf7;
	--daily-message-card: #ffffff;
	--daily-message-text: #4a4a4a;
	--daily-message-sub: #7a7a7a;
	--daily-message-line: #ece7e1;
	--daily-message-accent: #c7dceb;
	--daily-message-accent-2: #eadfcf;
	--daily-message-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);background: var(--daily-message-bg);color: var(--daily-message-text);padding: 0 0 60px;
}

.daily-message-inner {
	width: min(100%, 960px);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.daily-message-hero {padding: 56px 0 24px;}

.daily-message-eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;color: var(--daily-message-sub);
}

.daily-message-title {margin: 0 0 14px;font-size: clamp(30px, 5vw, 44px);line-height: 1.3;font-weight: 600;}

.daily-message-lead {margin: 0;font-size: 16px;line-height: 1.9;color: var(--daily-message-sub);}

.daily-message-root {background: rgba(255, 255, 255, 0.7);border: 1px solid var(--daily-message-line);border-radius: 24px;box-shadow: var(--daily-message-shadow);padding: 24px;backdrop-filter: blur(6px);}

.daily-message-loading,.daily-message-error {padding: 40px 16px;text-align: center;font-size: 15px;color: var(--daily-message-sub);}

.daily-message-progress {display: flex;align-items: center;gap: 8px;margin-bottom: 20px;}

.daily-message-progress-bar {flex: 1;height: 8px;background: #f2ede8;border-radius: 999px;overflow: hidden;}

.daily-message-progress-fill {height: 100%;width: 0%;background: linear-gradient(90deg, #d9e8f2 0%, #efe2d3 100%);border-radius: 999px;transition: width 0.3s ease;}

.daily-message-progress-text {font-size: 13px;color: var(--daily-message-sub);white-space: nowrap;}

.daily-message-question-card,.daily-message-result-panel,.daily-message-start-card {background: var(--daily-message-card);border: 1px solid var(--daily-message-line);border-radius: 24px;padding: 24px;box-shadow: var(--daily-message-shadow);}

/* ============================= */
/* 質問画面（画像背景） */
/* ============================= */

.daily-message-question-card {
	position: relative;

	background: transparent;
	border: none;
	box-shadow: none;

	overflow: hidden;
	min-height: 250px;
	padding: 34px 24px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background-image: none !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* 白レイヤー */
.daily-message-question-card::after {
	display: none;
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.35);
	backdrop-filter: blur(2px);
	z-index: 0;
}

.daily-message-question-label,
.daily-message-choice-list {
	position: relative;
	z-index: 1;
}

.daily-message-question-label {
	text-align: center;
	margin-bottom: 22px;
	font-size: 24px;
	color: #5b4636;
	text-shadow: 0 2px 10px rgba(255,255,255,0.9);
}

.daily-message-choice-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	max-width: 420px;
	width: 100%;
}

.daily-message-choice-btn {
	background: rgba(255,255,255,0.82);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(236,231,225,0.9);

	padding: 14px;
	border-radius: 16px;
	text-align: center;

	cursor: pointer;
	transition: all 0.2s ease;
}

.daily-message-choice-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(0,0,0,0.08);
	background: rgba(255,255,255,0.95);
}

.daily-message-start-card {text-align: center;padding: 42px 24px;}

.daily-message-start-card h2 {margin: 0 0 10px;font-size: 28px;}

.daily-message-start-card p {margin: 0 0 22px;color: var(--daily-message-sub);line-height: 1.9;}

.daily-message-question-label {margin: 0 0 20px;font-size: 24px;line-height: 1.5;}

.daily-message-choice-list {display: grid;grid-template-columns: 1fr 1fr;gap: 12px;}

.daily-message-choice-btn,.daily-message-primary-btn,.daily-message-secondary-btn,.daily-message-share-btn {appearance: none;border: none;border-radius: 16px;cursor: pointer;font: inherit;transition: all 0.2s ease;}

.daily-message-choice-btn {padding: 18px 16px;background: #fcfaf8;border: 1px solid var(--daily-message-line);color: var(--daily-message-text);text-align: left;min-height: 76px;}

.daily-message-choice-btn {transform: translateY(-1px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);background: #fff;}

.daily-message-primary-btn {background: linear-gradient(135deg, #dbe8f0 0%, #f1e5d7 100%);color: #4d4d4d;padding: 14px 22px;font-weight: 600;}

.daily-message-primary-btn {transform: translateY(-1px);}

.daily-message-secondary-btn,.daily-message-share-btn {background: #fff;color: var(--daily-message-text);padding: 12px 18px;border: 1px solid var(--daily-message-line);}

.daily-message-actions,.daily-message-share-row {display: flex;flex-wrap: wrap;gap: 10px;}

/* ▼ スマホ用：シェアボタンを縦並びに */.daily-message-share-row {display: grid;grid-template-columns: repeat(3, 1fr);gap: 8px;}

/* ▼ ボタンをフル幅化 */.daily-message-share-btn {width: 100%;text-align: center;padding: 12px 8px;font-weight: 600;font-size: 13px;}

/* ▼ カードの見せ方調整 */
.daily-message-card-box {
	padding: 0;
	margin: 0 -16px; /* 画面端まで広げる */
	border: none;
	background: transparent;
	box-shadow: none;
}

.daily-message-card-preview {border-radius: 0;overflow: hidden;box-shadow: none;}

/* ▼ PCでは横並びに戻す */@media (min-width: 768px) {.daily-message-card-box {margin: 0;}

.daily-message-card-preview {
	border-radius: 20px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

}

.daily-message-result-grid {display: grid;grid-template-columns: minmax(0, 1fr) 320px;gap: 24px;align-items: start;}

.daily-message-theme-chip {display: inline-flex;align-items: center;padding: 8px 14px;border-radius: 999px;background: #f8f3ee;color: var(--daily-message-sub);font-size: 13px;margin-bottom: 12px;}

.daily-message-result-title {margin: 0 0 12px;font-size: 28px;line-height: 1.5;}

.daily-message-result-text {margin: 0 0 20px;font-size: 16px;line-height: 2;color: var(--daily-message-text);}

.daily-message-score-box,.daily-message-cta-box,.daily-message-card-box {background: #fff;border: 1px solid var(--daily-message-line);border-radius: 20px;padding: 18px;}

.daily-message-side-stack {display: grid;gap: 16px;}

.daily-message-score-list {list-style: none;padding: 0;margin: 0;display: grid;gap: 8px;}

.daily-message-score-list li {display: flex;justify-content: space-between;gap: 12px;font-size: 14px;color: var(--daily-message-sub);}

.daily-message-card-preview {width: 100%;background: #f7f3ee;border-radius: 18px;overflow: hidden;border: 1px solid var(--daily-message-line);}

.daily-message-card-preview canvas {display: block;width: 100%;height: auto;}

.daily-message-cta-box h3,.daily-message-card-box h3,.daily-message-score-box h3 {margin: 0 0 10px;font-size: 18px;}

.daily-message-cta-box p,.daily-message-card-box p {margin: 0 0 14px;font-size: 14px;line-height: 1.9;color: var(--daily-message-sub);}

.daily-message-product-list {display: grid;gap: 12px;margin-top: 12px;}

.daily-message-product-item {padding: 14px;border: 1px solid var(--daily-message-line);border-radius: 16px;background: #fcfaf8;}

.daily-message-product-item strong {display: block;margin-bottom: 6px;font-size: 15px;color: var(--daily-message-text);}

.daily-message-product-item span {display: block;font-size: 13px;color: var(--daily-message-sub);line-height: 1.7;}

.daily-message-note {margin-top: 14px;font-size: 12px;color: var(--daily-message-sub);}

.daily-message-link-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 12px;}

.daily-message-link-card {display: block;border-radius: 16px;overflow: hidden;background: #fff;border: 1px solid var(--daily-message-line);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);transition: transform 0.2s ease, box-shadow 0.2s ease;}

.daily-message-link-card {transform: translateY(-2px);box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);}

.daily-message-link-card img {display: block;width: 100%;height: auto;aspect-ratio: 1 / 1;object-fit: cover;}

@media (max-width: 767px) {
	.daily-message-root,
	.daily-message-question-card,
	.daily-message-result-panel,
	.daily-message-start-card {padding: 18px;border-radius: 20px;}
	
	.daily-message-question-card {
		image-rendering: -webkit-optimize-contrast;
		background-image: inherit !important;

		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;

		min-height: 540px;
		margin: 0 -16px;
		padding: 30px 18px;
	}
	
}
	
.daily-message-choice-list {
	grid-template-columns: 1fr;
}

.daily-message-result-grid {
	grid-template-columns: 1fr;
}

.daily-message-question-label {
	font-size: 22px;
}

.daily-message-result-title {
	font-size: 24px;
}


.daily-message-start-visual-card {position: relative;overflow: hidden;min-height: 440px;display: grid;grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr);align-items: center;gap: 20px;padding: 42px 34px;text-align: left;background:radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 34%),radial-gradient(circle at 80% 22%, rgba(218, 235, 226, 0.75) 0%, rgba(218, 235, 226, 0) 36%),linear-gradient(135deg, #fffdf8 0%, #f8fbf5 48%, #eef7f0 100%);}

.daily-message-start-copy {position: relative;z-index: 3;max-width: 520px;}

.daily-message-start-kicker {margin: 0 0 12px;font-size: 13px;letter-spacing: 0.14em;text-transform: uppercase;color: #8d9a82;}

.daily-message-start-visual-card h2 {margin: 0 0 14px;font-size: clamp(32px, 6vw, 52px);line-height: 1.22;letter-spacing: 0.02em;color: #5b4636;font-weight: 600;}

.daily-message-start-visual-card p {margin: 0 0 22px;color: #756d66;line-height: 1.9;font-size: 15px;}

.daily-message-start-note {margin-top: 16px !important;margin-bottom: 0 !important;font-size: 12px !important;color: #9b938b !important;}

.daily-message-start-image-wrap {position: relative;z-index: 2;align-self: end;height: 100%;min-height: 360px;}

.daily-message-start-image {position: absolute;right: -20px;bottom: -42px;width: min(390px, 48vw);max-height: 520px;object-fit: contain;filter: drop-shadow(0 18px 32px rgba(120, 130, 110, 0.16));pointer-events: none;}

.daily-message-flower-line {position: absolute;z-index: 1;pointer-events: none;opacity: 0.82;}

.daily-message-flower-line::before {content: "";position: absolute;inset: 0;background-repeat: no-repeat;background-size: contain;background-position: center;}

.daily-message-flower-line-top {right: 32px;top: 30px;width: 360px;height: 120px;transform: rotate(-7deg);}

.daily-message-flower-line-bottom {left: 26px;bottom: 18px;width: 420px;height: 130px;transform: rotate(3deg);}

.daily-message-flower-line-top::before,.daily-message-flower-line-bottom::before {background-image: url("data/svg+xml,%3Csvg width='520' height='160' viewBox='0 0 520 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 110 C120 35, 240 30, 500 70' fill='none' stroke='%2394b486' stroke-width='3' stroke-linecap='round' opacity='.65'/%3E%3Cg fill='%23a9c79b' opacity='.78'%3E%3Cellipse cx='92' cy='74' rx='20' ry='8' transform='rotate(-35 92 74)'/%3E%3Cellipse cx='128' cy='58' rx='18' ry='7' transform='rotate(28 128 58)'/%3E%3Cellipse cx='178' cy='50' rx='20' ry='8' transform='rotate(-28 178 50)'/%3E%3Cellipse cx='230' cy='47' rx='18' ry='7' transform='rotate(32 230 47)'/%3E%3Cellipse cx='298' cy='51' rx='20' ry='8' transform='rotate(-30 298 51)'/%3E%3Cellipse cx='358' cy='59' rx='18' ry='7' transform='rotate(30 358 59)'/%3E%3Cellipse cx='430' cy='70' rx='20' ry='8' transform='rotate(-25 430 70)'/%3E%3C/g%3E%3Cg fill='%23fff7dd' stroke='%23e3c98b' stroke-width='2' opacity='.9'%3E%3Ccircle cx='72' cy='86' r='12'/%3E%3Ccircle cx='76' cy='82' r='9'/%3E%3Ccircle cx='68' cy='82' r='9'/%3E%3Ccircle cx='74' cy='91' r='9'/%3E%3Ccircle cx='332' cy='54' r='12'/%3E%3Ccircle cx='336' cy='50' r='9'/%3E%3Ccircle cx='328' cy='50' r='9'/%3E%3Ccircle cx='334' cy='59' r='9'/%3E%3C/g%3E%3C/svg%3E");}

.daily-message-primary-btn {position: relative;z-index: 4;min-width: 210px;box-shadow: 0 10px 24px rgba(190, 160, 120, 0.18);}

@media (max-width: 767px) {.daily-message-start-visual-card {grid-template-columns: 1fr;min-height: 520px;padding: 30px 22px 0;text-align: left;}

.daily-message-start-copy {
	max-width: 100%;
}

.daily-message-start-image-wrap {
	min-height: 250px;
}

.daily-message-start-image {
	right: -44px;
	bottom: -36px;
	width: 72vw;
	max-width: 320px;
}

.daily-message-flower-line-top {
	right: -46px;
	top: 20px;
	width: 290px;
	height: 100px;
}

.daily-message-flower-line-bottom {
	left: -68px;
	bottom: 54px;
	width: 340px;
	height: 110px;
}

.daily-message-start-visual-card h2 {
	font-size: 34px;
}

}

/* 1秒遅れてフェードイン */
.daily-message-start-bg-card {
	position: relative;
	width: 100%;
	max-width: 900px; /* 900px */
	margin: 0 auto;
	aspect-ratio: 16 / 9;

background-repeat: no-repeat;
background-position: center;
background-size: contain;

will-change: opacity, transform;
opacity: 0;
transform: translateY(10px);
animation: fadeInStart 0.8s ease forwards;
animation-delay: 1s;

}

@keyframes fadeInStart {to {opacity: 1;transform: translateY(0);}}

/* テキスト・ボタンエリア */
.daily-message-start-overlay {position: absolute;top: 58%;  
	left: 42%;transform: translate(-50%, -50%);text-align: center;width: 60%;max-width: 420px;}

/* 説明文 */.daily-message-start-sub {font-size: 16px;line-height: 1.8;color: #6f655c;margin-bottom: 20px;}

/* ボタン // ボタン基本（上書き） */
.daily-message-start-btn {position: relative;overflow: hidden;

background: linear-gradient(180deg, #f3e1c8, #e8cfae);
border: none;
border-radius: 999px;

padding: 10px 26px;
font-size: 14px;
font-weight: 600;

color: #5c4a3b;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);

cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;

}

/* ホバー時 */.daily-message-start-btn {transform: translateY(-2px);box-shadow: 0 8px 18px rgba(0,0,0,0.18);}

/* 光エフェクト */.daily-message-start-btn::after {content: "";position: absolute;top: 0;left: -75%;width: 50%;height: 100%;

background: linear-gradient(
	120deg,
	rgba(255,255,255,0) 0%,
	rgba(255,255,255,0.6) 50%,
	rgba(255,255,255,0) 100%
);

transform: skewX(-25deg);
animation: shine 2.8s infinite;

}

/* アニメーション */@keyframes shine {0%   { left: -75%; }50%  { left: 120%; }100% { left: 120%; }}

/* 下テキスト */.daily-message-start-note {margin-top: 16px;font-size: 12px;color: #9a9086;}

/* スマホ最適化 */@media (max-width: 768px) {.daily-message-start-overlay {left: 50%;width: 85%;}

.daily-message-start-sub {
	font-size: 14px;
}

.daily-message-start-btn {
	padding: 12px 28px;
	font-size: 14px;
}