/* ============================================================
 * rinka-pillars.css — サイト3本柱の入口カード ＋ りんかワールド
 * トップページ（front-page.php）と /rinka-world/ で読み込む。
 * PC: 3カラムの大きな縦カード / スマホ: 絵文字が左の横長リスト
 * ========================================================== */

/* ---------- 3本柱（トップページ） ---------- */

.rinka-pillars { text-align: center; }

.rinka-pillars__lead {
	margin: -6px 0 18px;
	color: #8a7a86;
	font-size: 15px;
}

.rinka-pillars__grid {
	display: grid;
	gap: 14px;
	margin: 0 auto;
	max-width: 980px;
}

.rinka-pillar {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 26px 18px 20px;
	border-radius: 22px;
	border: 2px solid rgba(255, 255, 255, .9);
	box-shadow: 0 6px 20px rgba(240, 150, 190, .18);
	text-decoration: none;
	color: #5c4a56;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.rinka-pillar:hover {
	transform: translateY(-5px) rotate(-.4deg);
	box-shadow: 0 12px 28px rgba(240, 150, 190, .3);
}
.rinka-pillar--world   { background: linear-gradient(160deg, #ffeef6 0%, #ffe0ee 55%, #ffd6ea 100%); }
.rinka-pillar--toolkit { background: linear-gradient(160deg, #eafaf4 0%, #d9f3ec 55%, #cdeff0 100%); }
.rinka-pillar--library { background: linear-gradient(160deg, #f3efff 0%, #e9e2ff 55%, #f8ecd9 100%); }

.rinka-pillar__deco {
	position: absolute;
	top: 10px;
	right: 14px;
	font-size: 20px;
	opacity: .8;
	animation: rinka-pillar-float 3.4s ease-in-out infinite;
}
@keyframes rinka-pillar-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
	.rinka-pillar__deco { animation: none; }
	.rinka-pillar:hover { transform: none; }
}

.rinka-pillar__emoji { font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.08)); }
.rinka-pillar__name  { font-size: 19px; font-weight: 900; }
.rinka-pillar__en {
	font-family: 'Quicksand', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	color: #b08aa2;
}
.rinka-pillar--toolkit .rinka-pillar__en { color: #6aa79a; }
.rinka-pillar--library .rinka-pillar__en { color: #9a86c9; }
.rinka-pillar__desc { font-size: 13px; line-height: 1.7; }
.rinka-pillar__go {
	margin-top: 8px;
	padding: 7px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .85);
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
	transition: background .2s ease;
}
.rinka-pillar:hover .rinka-pillar__go { background: #fff; }

.rinka-pillars__support {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 18px auto 0;
	padding: 12px 16px;
	max-width: 980px;
	border-radius: 16px;
	background: rgba(255, 240, 247, .7);
	border: 1px dashed rgba(233, 160, 195, .55);
}
.rinka-pillars__support-label { font-weight: 800; font-size: 14px; color: #a3688a; }

/* PC: 3カラムの大カード */
@media (min-width: 768px) {
	.rinka-pillars__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
	.rinka-pillar { padding: 34px 20px 26px; }
	.rinka-pillar__emoji { font-size: 56px; }
}

/* スマホ: 絵文字が左の横長カード（PCと明確にレイアウトを変える） */
@media (max-width: 767px) {
	.rinka-pillar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		text-align: left;
		padding: 16px 16px 14px;
		gap: 4px 14px;
	}
	.rinka-pillar__emoji { font-size: 36px; flex: 0 0 auto; }
	.rinka-pillar__name  { font-size: 17px; }
	.rinka-pillar__en    { display: none; }
	.rinka-pillar__name, .rinka-pillar__desc { flex: 1 1 calc(100% - 60px); }
	.rinka-pillar__desc  { font-size: 12px; margin-left: 50px; margin-top: -2px; }
	.rinka-pillar__go    { margin: 6px 0 0 50px; padding: 5px 14px; font-size: 12px; }
	.rinka-pillar__deco  { display: none; }
}

/* ---------- りんかワールド（/rinka-world/） ---------- */

.rinka-world-hero {
	position: relative;
	margin: 10px 0 26px;
	padding: 52px 20px 46px;
	border-radius: 26px;
	text-align: center;
	background:
		radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .75) 0 8%, transparent 9%),
		radial-gradient(circle at 84% 70%, rgba(255, 255, 255, .6) 0 6%, transparent 7%),
		linear-gradient(160deg, #ffeaf4 0%, #ffdcEC 45%, #e8e4ff 100%);
	border: 2px solid #fff;
	box-shadow: 0 8px 26px rgba(240, 150, 190, .22);
	overflow: hidden;
}
.rinka-world-hero__inner { position: relative; z-index: 1; }
.rinka-world-hero__title { margin: 6px 0 10px; font-size: 28px; font-weight: 900; color: #7a4a66; }
.rinka-world-hero__lead  { max-width: 560px; margin: 0 auto 16px; font-size: 15px; line-height: 1.9; color: #7d6a78; }

.rinka-world-hero__deco { position: absolute; font-size: 26px; opacity: .85; animation: rinka-pillar-float 4s ease-in-out infinite; }
.rinka-world-hero__deco--1 { top: 14%; left: 8%; }
.rinka-world-hero__deco--2 { top: 22%; right: 10%; animation-delay: .6s; }
.rinka-world-hero__deco--3 { bottom: 18%; left: 14%; animation-delay: 1.2s; }
.rinka-world-hero__deco--4 { top: 8%;  left: 46%; animation-delay: 1.8s; }
.rinka-world-hero__deco--5 { bottom: 12%; right: 16%; animation-delay: 2.4s; }

.rinka-world-daily__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	max-width: 760px;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.rinka-world-daily__row { grid-template-columns: repeat(4, 1fr); gap: 14px; }
	.rinka-world-hero__title { font-size: 34px; }
}
.rinka-world-daily__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 16px 10px 14px;
	border-radius: 18px;
	background: #fff;
	border: 2px solid #ffe3f0;
	box-shadow: 0 4px 12px rgba(240, 150, 190, .14);
	text-decoration: none;
	color: #5c4a56;
	transition: transform .2s ease, border-color .2s ease;
}
.rinka-world-daily__card:hover { transform: translateY(-3px); border-color: #f7b8d4; }
.rinka-world-daily__emoji { font-size: 30px; }
.rinka-world-daily__name  { font-weight: 800; font-size: 14px; }
.rinka-world-daily__desc  { font-size: 11px; color: #9a8794; }

.rinka-world-create { text-align: center; }
.rinka-world-create__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
}