/* ============================================ 星座ページ共通CSS（zodiac.css）対象: zodiac.html / zodiac-*.html / zodiac-*-{a,b,o,ab}.html common.css を先に読み込んだ上で使用する。 ============================================ 星座別カラー（テーマ変数）のように星座キーを指定するとその星座の色に切り替わる。現在は牡羊座（aries）分のみ実装済み。他の11星座は下記と同じ形式で追加する（--color-sign / --color-sign-light / --color-sign-rgb / --color-sign-soft の4値）。 --color-element 系は火・地・風・水の4エレメント共通の色（一覧ページのバッジ等で使用）。 ============================================ */ [data-sign="aries"] { --color-sign: #c0392b; --color-sign-light: #fff2ee; --color-sign-rgb: 192, 57, 43; --color-sign-soft: #e87060; --color-element: #c0392b; /* 火のエレメント */ --color-element-rgb: 192, 57, 43; --color-element-soft:#ff9b90; } /* TODO: 他11星座を追加（牡牛座～魚座） */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .breadcrumb__item+.breadcrumb__item::before { content: "›"; margin-right: 6px; } .page-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 100px; font-size: 0.82rem; font-weight: 700; } .hero-badge--fire { background: rgba(var(--color-element-rgb), 0.2); color: var(--color-element-soft); border: 1px solid rgba(var(--color-element-rgb), 0.4); } .hero-badge--planet { background: rgba(212, 175, 55, 0.12); color: var(--color-accent); border: 1px solid rgba(212, 175, 55, 0.3); } .hero-badge--quality { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.15); } .page-hero__symbol-block { text-align: center; flex-shrink: 0; } .page-hero__big-symbol { font-size: 6rem; line-height: 1; filter: drop-shadow(0 0 24px rgba(var(--color-sign-rgb), 0.5)); } .page-hero__symbol-en { font-family: var(--font-latin); font-size: 1rem; color: var(--color-accent); letter-spacing: 0.15em; margin-top: 4px; } .data-card { background: var(--color-base); border-radius: var(--radius-md); padding: 28px 24px; margin-bottom: 40px; color: #fff; } .data-card__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width:600px) { .data-card__grid { grid-template-columns: repeat(3, 1fr); } } .data-item__label { font-size: 0.75rem; color: var(--color-accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; } .data-item__value { font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); line-height: 1.5; } .prose+.prose { margin-top: -8px; } .personality-section { margin-bottom: 48px; } .keyword-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .keyword-tag { display: inline-flex; align-items: center; padding: 6px 14px; font-size: 0.82rem; border-radius: 100px; background: var(--color-sign-light); border: 1px solid rgba(var(--color-sign-rgb), 0.2); color: var(--color-sign); font-weight: 700; } .love-section { margin-bottom: 48px; } .love-tabs { display: flex; gap: 4px; margin-bottom: 20px; } .love-tab-btn { flex: 1; padding: 10px 12px; border: 1px solid #dedad0; border-radius: var(--radius-sm); background: #fff; font-family: var(--font-sans); font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: var(--transition); color: var(--color-sub); min-height: 44px; } .love-tab-btn.is-active { background: var(--color-base); color: var(--color-accent); border-color: var(--color-base); } .love-tab-content { display: none; } .love-tab-content.is-active { display: block; } .love-box { background: #fff; border: 1px solid #dedad0; border-radius: var(--radius-md); padding: 20px 22px; } .love-box p { font-size: 0.93rem; line-height: 1.9; color: var(--color-text); margin-bottom: 14px; } .love-box p:last-child { margin-bottom: 0; } .love-point-title { font-size: 0.88rem; font-weight: 700; color: var(--color-base); margin-top: 16px; margin-bottom: 8px; padding-left: 10px; border-left: 3px solid var(--color-sign); } .love-point-list { display: flex; flex-direction: column; gap: 6px; } .love-point-item { font-size: 0.88rem; line-height: 1.7; padding-left: 18px; position: relative; color: var(--color-text); } .love-point-item::before { content: "♥"; position: absolute; left: 0; color: var(--color-sign); font-size: 0.75rem; top: 0.15em; } .work-section { margin-bottom: 48px; } .work-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; } @media (min-width:600px) { .work-grid { grid-template-columns: repeat(2, 1fr); } } .work-card { background: #fff; border: 1px solid #dedad0; border-radius: var(--radius-md); padding: 20px; transition: var(--transition); } .work-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-gold); } .work-card__icon { font-size: 1.8rem; margin-bottom: 8px; } .work-card__title { font-size: 0.92rem; font-weight: 700; color: var(--color-base); margin-bottom: 10px; } .work-card__desc { font-size: 0.88rem; line-height: 1.8; color: var(--color-text); } .suited-jobs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .job-tag { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; font-size: 0.85rem; font-weight: 700; border-radius: var(--radius-sm); background: var(--color-bg); border: 1px solid #dedad0; color: var(--color-text); transition: var(--transition); } .job-tag:hover { border-color: var(--color-accent); background: rgba(212, 175, 55, 0.06); } .compatibility-section { margin-bottom: 48px; } .compat-card__body {} .compat-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .compat-stars { display: flex; gap: 1px; } .compat-star { font-size: 0.72rem; color: #ccc; } .compat-star.filled { color: var(--color-accent); } .myth-section { margin-bottom: 48px; } .myth-box { background: linear-gradient(135deg, var(--color-base) 0%, #2a1a3e 100%); border-radius: var(--radius-lg); padding: 32px 28px; color: #fff; position: relative; overflow: hidden; } .myth-box::before { content: "♈"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 8rem; opacity: 0.05; pointer-events: none; } .myth-box__title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--color-accent); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .myth-box__text { font-size: 0.92rem; color: rgba(255, 255, 255, 0.82); line-height: 1.95; margin-bottom: 14px; } .myth-box__text:last-child { margin-bottom: 0; } .blood-section { margin-bottom: 48px; } .blood-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width:600px) { .blood-grid { grid-template-columns: repeat(4, 1fr); } } .blood-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 12px; background: #fff; border: 1px solid #dedad0; border-radius: var(--radius-md); text-align: center; transition: var(--transition); } .blood-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-gold); transform: translateY(-3px); } .blood-card__type { font-family: var(--font-latin); font-size: 1.5rem; font-weight: 700; color: var(--color-base); } .blood-card__label { font-size: 0.85rem; font-weight: 700; color: var(--color-text); } .blood-card__sub { font-size: 0.78rem; color: var(--color-sub); line-height: 1.5; } .blood-card__link-text { font-size: 0.8rem; color: var(--color-accent-dim); font-weight: 700; margin-top: 4px; } .zodiac-nav { display: flex; gap: 12px; margin-bottom: 48px; } .zodiac-nav__btn { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border: 1px solid #dedad0; border-radius: var(--radius-md); transition: var(--transition); } .zodiac-nav__btn:hover { border-color: var(--color-accent); box-shadow: var(--shadow-gold); } .zodiac-nav__btn--next { flex-direction: row-reverse; text-align: right; } .zodiac-nav__direction { font-size: 0.75rem; color: var(--color-sub); } .zodiac-nav__name { font-size: 0.92rem; font-weight: 700; color: var(--color-base); } .zodiac-nav__symbol { font-size: 1.4rem; flex-shrink: 0; } .faq-section { margin-bottom: 48px; } .related-section { margin-bottom: 48px; } .sidebar__list-link .symbol { font-size: 1rem; } @media (min-width:960px) { } .breadcrumb__item+.breadcrumb__item::before { content: "›"; margin-right: 6px; } .page-hero__combo { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .combo-badge { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; font-family: var(--font-latin); font-weight: 700; font-size: 1.1rem; flex-shrink: 0; } .combo-badge--zodiac { background: rgba(var(--color-sign-rgb), 0.2); border: 2px solid rgba(var(--color-sign-rgb), 0.5); color: var(--color-sign-soft); } .combo-badge--blood { background: rgba(var(--color-type-rgb), 0.2); border: 2px solid rgba(var(--color-type-rgb), 0.5); color: var(--color-type-soft); } .combo-plus { font-size: 1.1rem; color: rgba(255, 255, 255, 0.4); } .hero-tag--zodiac { background: rgba(var(--color-sign-rgb), 0.18); color: var(--color-sign-soft); border: 1px solid rgba(var(--color-sign-rgb), 0.35); } .hero-tag--blood { background: rgba(var(--color-type-rgb), 0.18); color: var(--color-type-soft); border: 1px solid rgba(var(--color-type-rgb), 0.35); } .hero-tag--combo { background: rgba(212, 175, 55, 0.12); color: var(--color-accent); border: 1px solid rgba(212, 175, 55, 0.3); } .page-hero__symbol-area { text-align: center; flex-shrink: 0; } .hero-symbol-stack { position: relative; display: inline-block; } .hero-symbol-main { font-size: 5rem; line-height: 1; filter: drop-shadow(0 0 24px rgba(var(--color-sign-rgb), 0.65)); } .hero-symbol-blood { position: absolute; bottom: -4px; right: -8px; font-family: var(--font-latin); font-size: 1.1rem; font-weight: 700; color: var(--color-type-soft); background: rgba(26, 26, 46, 0.85); border: 1px solid rgba(var(--color-type-rgb), 0.5); border-radius: 6px; padding: 2px 7px; line-height: 1.4; } .fusion-card { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; } @media (min-width:600px) { .fusion-card { grid-template-columns: 1fr 1fr; } } .fusion-side { border-radius: var(--radius-md); padding: 18px 20px; border: 1px solid; } .fusion-side--zodiac { background: var(--color-sign-light); border-color: rgba(var(--color-sign-rgb), 0.25); } .fusion-side--blood { background: var(--color-type-light); border-color: rgba(var(--color-type-rgb), 0.25); } .fusion-side__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; } .fusion-side--zodiac .fusion-side__label { color: var(--color-sign); } .fusion-side--blood .fusion-side__label { color: var(--color-type); } .fusion-side__title { font-size: 0.92rem; font-weight: 700; margin-bottom: 8px; color: var(--color-base); } .fusion-side__list { display: flex; flex-direction: column; gap: 4px; } .fusion-side__item { font-size: 0.85rem; line-height: 1.65; color: var(--color-text); padding-left: 12px; position: relative; } .fusion-side__item::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 5px; height: 5px; border-radius: 50%; } .fusion-side--zodiac .fusion-side__item::before { background: var(--color-sign); } .fusion-side--blood .fusion-side__item::before { background: var(--color-type); } .combo-box { background: var(--color-base); border-radius: var(--radius-lg); padding: 24px 22px; margin-bottom: 32px; color: #fff; border: 1px solid rgba(212, 175, 55, 0.2); } .combo-box__title { font-size: 0.8rem; color: var(--color-accent); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; } .combo-traits { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width:600px) { .combo-traits { grid-template-columns: repeat(3, 1fr); } } .combo-trait { background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm); padding: 12px 14px; border-left: 3px solid var(--color-accent); } .combo-trait__icon { font-size: 1.2rem; margin-bottom: 4px; } .combo-trait__title { font-size: 0.85rem; font-weight: 700; color: var(--color-accent); margin-bottom: 3px; } .combo-trait__desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); line-height: 1.6; } .work-box { background: #fff; border: 1px solid #dedad0; border-radius: var(--radius-md); padding: 20px 22px; margin-bottom: 20px; } .work-box p { font-size: 0.93rem; line-height: 1.9; color: var(--color-text); margin-bottom: 12px; } .work-box p:last-child { margin-bottom: 0; } .compat-section { margin-bottom: 48px; } .blood-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 40px; } .blood-nav__btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; background: #fff; border: 1px solid #dedad0; border-radius: var(--radius-md); transition: var(--transition); text-align: center; } .blood-nav__btn:hover, .blood-nav__btn--active { border-color: var(--color-accent); box-shadow: var(--shadow-gold); background: rgba(212, 175, 55, 0.04); } .blood-nav__btn--active { background: var(--color-base); } .blood-nav__type { font-family: var(--font-latin); font-size: 1.2rem; font-weight: 700; } .blood-nav__btn--active .blood-nav__type { color: var(--color-accent); } .blood-nav__label { font-size: 0.75rem; color: var(--color-sub); } .blood-nav__btn--active .blood-nav__label { color: rgba(255, 255, 255, 0.7); }/* ============================================ 星座単体ページ用上書き（zodiac-*.html） common.css の既定値との差分のみ。 ============================================ */ .header__logo-sub { color:rgba(255,255,255,0.55); font-family:var(--font-sans); font-size:0.75rem; letter-spacing:0.08em; } .page-hero { background-color:var(--color-base); overflow:hidden; padding-block:52px 44px; position:relative; } .page-hero::before { background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(var(--color-sign-rgb),0.18) 0%,transparent 70%),radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,0.4) 0%,transparent 100%),radial-gradient(1px 1px at 55% 70%,rgba(255,255,255,0.3) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 75% 20%,rgba(212,175,55,0.4) 0%,transparent 100%); content:""; inset:0; pointer-events:none; position:absolute; } .page-hero__inner { display:grid; gap:24px; grid-template-columns:1fr; position:relative; z-index:1; } @media (min-width:600px) { .page-hero__inner { grid-template-columns: 1fr auto; align-items: center; } } .page-hero__eyebrow { align-items:center; color:var(--color-accent); display:inline-flex; font-family:var(--font-latin); font-size:0.78rem; gap:8px; letter-spacing:0.14em; margin-bottom:12px; text-transform:uppercase; } .page-hero__eyebrow::before,.page-hero__eyebrow::after { content:"✦"; font-size:0.6rem; } .page-hero__desc { color:rgba(255,255,255,0.7); font-size:0.95rem; line-height:1.85; max-width:600px; } .trait-grid { display:grid; gap:16px; grid-template-columns:1fr; margin-bottom:24px; } @media (min-width:600px) { .trait-grid { grid-template-columns: repeat(2, 1fr); } } .trait-card { border-radius:var(--radius-md); border:1px solid; padding:20px; } .trait-card--plus { background:#f0fff4; border-color:#a8d5b5; } .trait-card__title { align-items:center; display:flex; font-size:0.88rem; font-weight:700; gap:6px; margin-bottom:12px; } .trait-card--plus .trait-card__title { color:#1a7340; } .trait-card__list { display:flex; flex-direction:column; gap:6px; } .trait-card__item { color:var(--color-text); font-size:0.88rem; line-height:1.7; padding-left:14px; position:relative; } .trait-card__item::before { border-radius:50%; content:""; height:6px; left:0; position:absolute; top:0.6em; width:6px; } .trait-card--plus .trait-card__item::before { background:#1a7340; } .compat-grid { display:grid; gap:12px; grid-template-columns:1fr; } @media (min-width:600px) { .compat-grid { grid-template-columns: repeat(2, 1fr); } } .compat-card { align-items:flex-start; background:#fff; border-radius:var(--radius-md); border:1px solid #dedad0; display:flex; gap:12px; padding:14px 16px; transition:var(--transition); } .compat-card__name { color:var(--color-base); font-size:0.9rem; font-weight:700; } .compat-card__desc { color:var(--color-sub); font-size:0.82rem; line-height:1.7; } .faq-list { display:flex; flex-direction:column; gap:12px; } .faq-item__question { align-items:center; background:none; border:none; color:var(--color-base); cursor:pointer; display:flex; font-family:var(--font-sans); font-size:0.92rem; font-weight:700; gap:12px; justify-content:space-between; min-height:56px; padding:18px 20px; text-align:left; width:100%; } .faq-item__icon { align-items:center; border-radius:50%; border:1px solid rgba(212,175,55,0.5); color:var(--color-accent-dim); display:flex; flex-shrink:0; font-size:1rem; height:24px; justify-content:center; transition:var(--transition); width:24px; } .faq-item__answer { color:var(--color-sub); display:none; font-size:0.88rem; line-height:1.85; padding:0 20px 18px; } .related-grid { display:grid; gap:12px; grid-template-columns:1fr; } @media (min-width:600px) { .related-grid { grid-template-columns: repeat(2, 1fr); } } .related-card { align-items:center; background:#fff; border-radius:var(--radius-md); border:1px solid #dedad0; display:flex; gap:14px; padding:16px 18px; transition:var(--transition); } .related-card__icon { flex-shrink:0; font-size:1.8rem; } .related-card__title { color:var(--color-base); font-size:0.9rem; font-weight:700; margin-bottom:2px; } .related-card__desc { color:var(--color-sub); font-size:0.8rem; } .sidebar__widget { background:#fff; border-radius:var(--radius-md); border:1px solid #dedad0; margin-bottom:24px; overflow:hidden; } .sidebar__widget-title { align-items:center; background:var(--color-base); color:var(--color-accent); display:flex; font-family:var(--font-serif); font-size:0.9rem; font-weight:700; gap:8px; letter-spacing:0.04em; padding:12px 16px; } .sidebar__list { padding:8px 0; } .sidebar__list-link { align-items:center; display:flex; font-size:0.85rem; justify-content:space-between; padding:10px 16px; transition:var(--transition); } .sidebar__list-link .arrow { color:var(--color-sub); font-size:0.75rem; } .sidebar__tool-cta { background:var(--color-base); border-radius:var(--radius-md); margin-bottom:24px; padding:20px 16px; text-align:center; } .sidebar__tool-cta__title { color:var(--color-accent); font-family:var(--font-serif); font-size:0.92rem; font-weight:700; margin-bottom:8px; } .sidebar__tool-cta__desc { color:rgba(255,255,255,0.65); font-size:0.8rem; line-height:1.7; margin-bottom:14px; } .btn { align-items:center; border-radius:100px; border:none; cursor:pointer; display:inline-flex; font-family:var(--font-sans); font-size:0.88rem; font-weight:700; gap:6px; justify-content:center; min-height:44px; padding:12px 24px; transition:var(--transition); white-space:nowrap; } .fade-in { opacity:0; transform:translateY(16px); transition:opacity 0.45s ease,transform 0.45s ease; } /* ============================================ 星座×血液型組み合わせページ用上書き（[data-blood] 属性を持つページにのみ適用） ============================================ */ [data-blood] .header__logo-sub { color:rgba(255,255,255,0.55); font-size:0.75rem; letter-spacing:0.08em; } @media (min-width:960px) { [data-blood] .mega-menu__title { border-bottom:1px solid rgba(212,175,55,0.2); color:var(--color-accent); font-size:0.75rem; grid-column:1/-1; letter-spacing:0.1em; margin-bottom:12px; padding-bottom:8px; text-transform:uppercase; } } [data-blood] .page-hero { background-color:var(--color-base); overflow:hidden; padding-block:44px 36px; position:relative; } [data-blood] .page-hero::before { background:radial-gradient(ellipse 50% 65% at 70% 50%,rgba(var(--color-sign-rgb),0.22) 0%,transparent 70%),radial-gradient(ellipse 30% 40% at 20% 30%,rgba(var(--color-type-rgb),0.18) 0%,transparent 60%),radial-gradient(1px 1px at 25% 50%,rgba(255,255,255,0.4) 0%,transparent 100%); content:""; inset:0; pointer-events:none; position:absolute; } [data-blood] .page-hero__inner { display:grid; gap:20px; grid-template-columns:1fr; position:relative; z-index:1; } @media (min-width:600px) { [data-blood] .page-hero__inner { grid-template-columns: 1fr auto; align-items: center; } } [data-blood] .page-hero__eyebrow { align-items:center; color:var(--color-accent); display:inline-flex; font-family:var(--font-latin); font-size:0.75rem; gap:8px; letter-spacing:0.12em; margin-bottom:10px; text-transform:uppercase; } [data-blood] .page-hero__eyebrow::before,[data-blood] .page-hero__eyebrow::after { content:"✦"; font-size:0.55rem; } [data-blood] .page-hero__title { color:#fff; font-family:var(--font-serif); font-size:clamp(1.6rem,3.5vw,2.3rem); font-weight:700; letter-spacing:0.04em; line-height:1.3; margin-bottom:12px; } [data-blood] .page-hero__desc { color:rgba(255,255,255,0.68); font-size:0.93rem; line-height:1.85; max-width:580px; } [data-blood] .trait-grid { display:grid; gap:16px; grid-template-columns:1fr; margin-bottom:32px; } @media (min-width:600px) { [data-blood] .trait-grid { grid-template-columns: repeat(2, 1fr); } } [data-blood] .trait-card { border-radius:var(--radius-md); border:1px solid; padding:18px 20px; } [data-blood] .trait-card--plus { background:#f0f9f0; border-color:#90c880; } [data-blood] .trait-card__title { font-size:0.88rem; font-weight:700; margin-bottom:10px; } [data-blood] .trait-card--plus .trait-card__title { color:#1a4a1a; } [data-blood] .trait-card__list { display:flex; flex-direction:column; gap:5px; } [data-blood] .trait-card__item { color:var(--color-text); font-size:0.87rem; line-height:1.65; padding-left:13px; position:relative; } [data-blood] .trait-card__item::before { border-radius:50%; content:""; height:5px; left:0; position:absolute; top:0.58em; width:5px; } [data-blood] .trait-card--plus .trait-card__item::before { background:#3a8a3a; } [data-blood] .compat-grid { display:grid; gap:10px; grid-template-columns:1fr; } @media (min-width:600px) { [data-blood] .compat-grid { grid-template-columns: repeat(2, 1fr); } } [data-blood] .compat-card { align-items:flex-start; background:#fff; border-radius:var(--radius-md); border:1px solid #dedad0; display:flex; gap:10px; padding:12px 14px; transition:var(--transition); } [data-blood] .compat-card__symbol { flex-shrink:0; font-size:1.3rem; margin-top:1px; } [data-blood] .compat-card__name { color:var(--color-base); font-size:0.88rem; font-weight:700; margin-bottom:3px; } [data-blood] .compat-card__desc { color:var(--color-sub); font-size:0.8rem; line-height:1.65; } [data-blood] .faq-list { display:flex; flex-direction:column; gap:10px; } [data-blood] .faq-item__question { align-items:center; background:none; border:none; color:var(--color-base); cursor:pointer; display:flex; font-family:var(--font-sans); font-size:0.9rem; font-weight:700; gap:12px; justify-content:space-between; min-height:52px; padding:16px 18px; text-align:left; width:100%; } [data-blood] .faq-item__icon { align-items:center; border-radius:50%; border:1px solid rgba(212,175,55,0.5); color:var(--color-accent-dim); display:flex; flex-shrink:0; font-size:0.95rem; height:22px; justify-content:center; transition:var(--transition); width:22px; } [data-blood] .faq-item__answer { color:var(--color-sub); display:none; font-size:0.87rem; line-height:1.85; padding:0 18px 16px; } [data-blood] .related-grid { display:grid; gap:10px; grid-template-columns:1fr; } @media (min-width:600px) { [data-blood] .related-grid { grid-template-columns: repeat(2, 1fr); } } [data-blood] .related-card { align-items:center; background:#fff; border-radius:var(--radius-md); border:1px solid #dedad0; display:flex; gap:12px; padding:14px 16px; transition:var(--transition); } [data-blood] .related-card__icon { flex-shrink:0; font-size:1.6rem; } [data-blood] .related-card__title { color:var(--color-base); font-size:0.88rem; font-weight:700; margin-bottom:2px; } [data-blood] .related-card__desc { color:var(--color-sub); font-size:0.78rem; } [data-blood] .sidebar__widget { background:#fff; border-radius:var(--radius-md); border:1px solid #dedad0; margin-bottom:20px; overflow:hidden; } [data-blood] .sidebar__widget-title { background:var(--color-base); color:var(--color-accent); font-family:var(--font-serif); font-size:0.88rem; font-weight:700; letter-spacing:0.04em; padding:11px 14px; } [data-blood] .sidebar__list { padding:6px 0; } [data-blood] .sidebar__list-link { align-items:center; display:flex; font-size:0.83rem; justify-content:space-between; padding:9px 14px; transition:var(--transition); } [data-blood] .sidebar__list-link .arrow { color:var(--color-sub); font-size:0.72rem; } [data-blood] .sidebar__tool-cta { background:var(--color-base); border-radius:var(--radius-md); margin-bottom:20px; padding:18px 14px; text-align:center; } [data-blood] .sidebar__tool-cta__title { color:var(--color-accent); font-family:var(--font-serif); font-size:0.9rem; font-weight:700; margin-bottom:6px; } [data-blood] .sidebar__tool-cta__desc { color:rgba(255,255,255,0.65); font-size:0.78rem; line-height:1.7; margin-bottom:12px; } [data-blood] .btn { align-items:center; border-radius:100px; border:none; cursor:pointer; display:inline-flex; font-family:var(--font-sans); font-size:0.87rem; font-weight:700; gap:6px; justify-content:center; min-height:44px; padding:11px 22px; transition:var(--transition); white-space:nowrap; } [data-blood] .fade-in { opacity:0; transform:translateY(14px); transition:opacity 0.42s ease,transform 0.42s ease; } [data-blood] .page-hero__tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; } /* ============================================ 組み合わせページ用追加上書き（common.css に無く、zodiac-aries.html と zodiac-aries-a.html とで値が異なるもの） ============================================ */ [data-blood] .love-box { margin-bottom: 16px; } [data-blood] .love-box p { margin-bottom: 12px; } [data-blood] .love-point-title { margin-top: 0; } [data-blood] .love-point-list { gap: 5px; margin-bottom: 14px; } [data-blood] .love-point-item { line-height: 1.65; } [data-blood] .love-point-item::before { font-size: 0.65rem; top: 0.2em; } [data-blood] .compat-section { margin-bottom: 48px; } [data-blood] .compat-stars { margin-bottom: 3px; } [data-blood] .compat-star { font-size: 0.68rem; } [data-blood] .blood-nav__btn--active { background: var(--color-base); } [data-blood] .blood-nav__type { color: inherit; } [data-blood] .blood-nav__btn--active .blood-nav__type { color: var(--color-accent); } [data-blood] .sidebar__list-link .symbol { font-size: 0.95rem; } [data-blood] .footer__nav-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-blood] .footer__nav-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width:600px) { [data-blood] .footer__nav-title { overflow: visible; text-overflow: clip; white-space: normal; } [data-blood] .footer__nav-link { overflow: visible; text-overflow: clip; white-space: normal; } }