/**
 * 64タイプあるある — aruaru.css
 */

.ar-page {
	min-height: 80vh;
	padding-bottom: 60px;
}

/* ===== ヒーロー ===== */
.ar-hero {
	position: relative;
	padding: 60px 0 50px;
	overflow: hidden;
	text-align: center;
}
.ar-hero__bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #f3ecfb, #fdf0f6, #e8daf5);
	z-index: -1;
}
.ar-hero__label {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #8b6cc1;
	margin-bottom: 10px;
}
.ar-hero__title {
	font-size: 1.9rem;
	font-weight: 900;
	background: linear-gradient(135deg, #6b3fa0, #d65c9a);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 12px;
}
.ar-hero__desc {
	font-size: 0.9rem;
	color: #4a3560;
	line-height: 1.7;
}

/* ===== セレクター ===== */
.ar-selector {
	background: rgba(255,255,255,0.9);
	border-radius: 16px;
	padding: 20px;
	margin: 20px 0 28px;
	box-shadow: 0 4px 16px rgba(139,108,193,0.08);
}
.ar-selector__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	color: #4a3560;
	margin-bottom: 10px;
}
.ar-selector__row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ar-selector__select {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid rgba(139,108,193,0.2);
	border-radius: 12px;
	background: #fff;
	font-size: 0.9rem;
	color: #2d2055;
	font-family: inherit;
	cursor: pointer;
}
.ar-selector__select:focus {
	outline: none;
	border-color: #8b6cc1;
}

/* ===== タイプヘッダー ===== */
.ar-type-header {
	display: flex;
	align-items: center;
	gap: 16px;
	background: linear-gradient(135deg, #fff, #f3ecfb);
	border-radius: 20px;
	padding: 20px;
	margin-bottom: 28px;
	box-shadow: 0 6px 20px rgba(139,108,193,0.1);
}
.ar-type-header__img {
	width: 100px;
	height: 100px;
	border-radius: 16px;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: 0 4px 12px rgba(139,108,193,0.2);
}
.ar-type-header__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ar-type-header__code {
	font-size: 0.82rem;
	font-weight: 800;
	color: #8b6cc1;
	font-family: "Poppins", sans-serif;
}
.ar-type-header__name {
	font-size: 1.3rem;
	font-weight: 900;
	color: #2d2055;
	margin: 0;
}
.ar-type-header__sub {
	font-size: 0.78rem;
	color: #6b5f7d;
}

/* ===== セクションタイトル ===== */
.ar-section-title {
	font-size: 1.1rem;
	font-weight: 800;
	color: #4a3560;
	margin: 28px 0 14px;
	padding-left: 10px;
	border-left: 4px solid #8b6cc1;
}

/* ===== カードグリッド ===== */
.ar-cards__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.ar-card {
	background: #fff;
	border-radius: 16px;
	padding: 20px;
	position: relative;
	box-shadow: 0 3px 12px rgba(139,108,193,0.08);
	border: 2px solid transparent;
	transition: transform 0.2s, box-shadow 0.2s;
}
.ar-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(139,108,193,0.15);
}
.ar-card--mbti {
	border-color: rgba(139,108,193,0.15);
	background: linear-gradient(135deg, #fff, #faf6fe);
}
.ar-card--svaf-s { border-color: rgba(51,164,116,0.25); background: linear-gradient(135deg, #fff, #f0faf5); }
.ar-card--svaf-v { border-color: rgba(66,152,180,0.25); background: linear-gradient(135deg, #fff, #f0f7fa); }
.ar-card--svaf-a { border-color: rgba(228,174,58,0.25); background: linear-gradient(135deg, #fff, #fef9ed); }
.ar-card--svaf-f { border-color: rgba(155,89,182,0.25); background: linear-gradient(135deg, #fff, #f5ecf7); }

.ar-card__num {
	font-size: 0.72rem;
	font-weight: 800;
	color: #8b6cc1;
	font-family: "Poppins", sans-serif;
	margin-bottom: 8px;
}
.ar-card__text {
	font-size: 1rem;
	font-weight: 600;
	color: #2d2055;
	line-height: 1.6;
	margin: 0 0 14px;
}
.ar-card__save {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, #8b6cc1, #d65c9a);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(139,108,193,0.25);
	transition: transform 0.2s, box-shadow 0.2s;
}
.ar-card__save:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(139,108,193,0.35);
}

/* ===== シェア ===== */
.ar-share {
	text-align: center;
	margin: 32px 0;
	padding: 20px;
	background: rgba(255,255,255,0.8);
	border-radius: 16px;
}
.ar-share p {
	font-size: 0.88rem;
	font-weight: 700;
	color: #4a3560;
	margin-bottom: 12px;
}
.ar-share__btns {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.ar-share__btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	color: #fff !important;
}
.ar-share__btn--x { background: #000; }
.ar-share__btn--line { background: #06c755; }

/* ===== CTA ===== */
.ar-cta {
	background: linear-gradient(135deg, #6b3fa0, #8b6cc1);
	border-radius: 20px;
	padding: 36px 24px;
	margin: 40px 0 20px;
	text-align: center;
	color: #fff;
}
.ar-cta h2 {
	font-size: 1.3rem;
	font-weight: 900;
	margin-bottom: 10px;
	color: #fff;
}
.ar-cta p {
	font-size: 0.88rem;
	line-height: 1.7;
	margin-bottom: 20px;
	color: rgba(255,255,255,0.9);
}
.ar-cta__btns {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 320px;
	margin: 0 auto;
}
.ar-cta__btn {
	display: inline-block;
	padding: 14px 24px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 800;
	transition: transform 0.2s, box-shadow 0.2s;
}
.ar-cta__btn--primary {
	background: #f0c040;
	color: #4a3560 !important;
	box-shadow: 0 4px 14px rgba(240,192,64,0.3);
}
.ar-cta__btn--secondary {
	background: rgba(255,255,255,0.15);
	color: #fff !important;
	border: 2px solid rgba(255,255,255,0.3);
}
.ar-cta__btn:hover { transform: translateY(-2px); }

/* ===== PC ===== */
@media (min-width: 768px) {
	.ar-hero__title { font-size: 2.6rem; }
	.ar-hero__desc { font-size: 1rem; }
	.ar-selector__row { flex-direction: row; }
	.ar-selector__select { flex: 1; }
	.ar-cards__grid { grid-template-columns: repeat(2, 1fr); }
	.ar-type-header__img { width: 140px; height: 140px; }
	.ar-type-header__name { font-size: 1.6rem; }
	.ar-cta__btns { flex-direction: row; max-width: none; justify-content: center; }
}
@media (min-width: 1024px) {
	.ar-cards__grid { grid-template-columns: repeat(3, 1fr); }
}