/* ============================================================
heyhey 詩吟ポータル デザインシステム
------------------------------------------------------------
使い方（サブページ担当向け）:
-
※サブディレクトリからは href="../assets/css/site.css"
- Google Fonts（Shippori Mincho B1 / Zen Kaku Gothic New）の
も index.html の からコピーしてください。
------------------------------------------------------------
主要クラス:
.site-header / .site-footer … 共通ヘッダー・フッター
.container … 中央寄せコンテナ (max 1120px)
.section / .section--alt … セクション余白・交互背景
.btn .btn-primary|-secondary|-ghost … ボタン
.card … 白カード（角丸16px＋影）
.badge .badge--coming-soon|--beta|--live|--growing … バッジ
.is-coming-soon … links.js が付ける準備中状態
.reveal … スクロールフェードイン対象
.faq details/summary … FAQアコーディオン
============================================================ */
/* ---------- 1. デザイントークン ---------- */
:root {
/* 紙（背景） */
--color-paper: #F8F5EF;
--color-card: #FFFFFF;
/* 墨（テキスト） */
--color-ink: #22211E;
--color-ink-strong: #1A1A1A;
--color-ink-soft: #59564F;
/* 抹茶（ブランド）と深緑（読めるアクセント） */
--color-matcha: #B4D455;
--color-matcha-soft: #EAF3D2;
--color-deep-green: #5B7444;
--color-deep-green-dark: #465935;
/* 金・朱 */
--color-gold: #D8B25F;
--color-gold-soft: #F3E8CD;
--color-vermilion: #B8472E; /* 朱: 白文字とのコントラスト確保のためやや深め */
--color-vermilion-dark: #9E3A24;
/* 罫線・影 */
--color-border: #E5DFD2;
--shadow-card: 0 4px 16px rgba(34, 33, 30, 0.07), 0 1px 4px rgba(34, 33, 30, 0.05);
--shadow-card-hover: 0 12px 28px rgba(34, 33, 30, 0.12), 0 2px 8px rgba(34, 33, 30, 0.06);
--shadow-header: 0 2px 12px rgba(34, 33, 30, 0.08);
/* タイポグラフィ */
--font-heading: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
--font-body: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
/* レイアウト */
--container-max: 1120px;
--radius-card: 16px;
--radius-btn: 999px;
--section-pad-y: 4.5rem;
--header-height: 64px;
}
/* ---------- 2. ベース ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 12px);
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.9;
color: var(--color-ink);
background-color: var(--color-paper);
-webkit-font-smoothing: antialiased;
overflow-wrap: anywhere;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.5;
color: var(--color-ink-strong);
margin: 0 0 1rem;
}
p {
margin: 0 0 1rem;
}
a {
color: var(--color-deep-green);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--color-deep-green-dark);
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul {
padding-left: 1.2em;
}
:focus-visible {
outline: 3px solid var(--color-deep-green);
outline-offset: 2px;
border-radius: 4px;
}
/* ---------- 3. レイアウト ---------- */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: 1.25rem;
}
.section {
padding-block: var(--section-pad-y);
}
.section--alt {
background-color: #F2EDE2;
}
.section--dark {
background-color: var(--color-ink-strong);
color: #F4F1EA;
}
.section--dark h2,
.section--dark h3 {
color: #F8F5EF;
}
.section__lead {
max-width: 42em;
margin-inline: auto;
text-align: center;
color: var(--color-ink-soft);
}
.section--dark .section__lead {
color: #D8D4CA;
}
.section-title {
font-size: clamp(1.5rem, 4.5vw, 2.1rem);
text-align: center;
margin-bottom: 1.25rem;
position: relative;
padding-bottom: 0.9rem;
}
.section-title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 56px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--color-matcha), var(--color-gold));
}
.grid {
display: grid;
gap: 1.5rem;
}
@media (min-width: 640px) {
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
.grid--3 { grid-template-columns: repeat(3, 1fr); }
}
/* 画像＋テキストの2カラム（モバイルは縦積み） */
.split {
display: grid;
gap: 2rem;
align-items: center;
}
@media (min-width: 820px) {
.split { grid-template-columns: 1fr 1fr; }
.split--reverse > .split__media { order: 2; }
}
.split__media img {
width: 100%;
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
background-color: var(--color-matcha-soft);
}
/* ---------- 4. ボタン ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.85em 1.9em;
border-radius: var(--radius-btn);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
text-decoration: none;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn:hover {
text-decoration: none;
transform: translateY(-2px);
}
.btn-primary {
background-color: var(--color-vermilion);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(184, 71, 46, 0.35);
}
.btn-primary:hover {
background-color: var(--color-vermilion-dark);
color: #FFFFFF;
box-shadow: 0 8px 20px rgba(184, 71, 46, 0.4);
}
.btn-secondary {
background-color: transparent;
color: var(--color-deep-green);
border-color: var(--color-deep-green);
}
.btn-secondary:hover {
background-color: var(--color-deep-green);
color: #FFFFFF;
}
.btn-ghost {
background-color: transparent;
color: var(--color-ink);
border-color: transparent;
text-decoration: underline;
text-underline-offset: 4px;
padding-inline: 1em;
}
.btn-ghost:hover {
color: var(--color-deep-green);
transform: none;
}
.btn--small {
font-size: 0.9rem;
padding: 0.55em 1.3em;
}
.btn--large {
font-size: 1.08rem;
padding: 1em 2.4em;
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
justify-content: center;
}
/* ---------- 5. カード ---------- */
.card {
background-color: var(--color-card);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.card {
color: inherit;
}
a.card:hover {
text-decoration: none;
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.card__media {
aspect-ratio: 16 / 10;
overflow: hidden;
background: linear-gradient(135deg, var(--color-matcha-soft), var(--color-gold-soft));
}
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card__body {
padding: 1.25rem 1.4rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
flex-grow: 1;
}
.card__title {
font-size: 1.12rem;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5em;
}
.card__text {
font-size: 0.93rem;
color: var(--color-ink-soft);
margin: 0;
flex-grow: 1;
}
.card__arrow {
color: var(--color-deep-green);
font-weight: 700;
font-size: 0.9rem;
margin-top: 0.5rem;
}
/* ---------- 6. ステータスバッジ ---------- */
.badge {
display: inline-block;
padding: 0.15em 0.8em;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.8;
white-space: nowrap;
vertical-align: middle;
background-color: var(--color-border);
color: var(--color-ink-soft);
}
.badge--coming-soon,
.badge[data-status="coming-soon"] {
background-color: #EAE6DB;
color: #6B675E;
}
.badge--beta,
.badge[data-status="beta"] {
background-color: var(--color-gold-soft);
color: #8A6A25;
}
.badge--live,
.badge[data-status="live"] {
background-color: var(--color-matcha-soft);
color: var(--color-deep-green-dark);
}
.badge--growing,
.badge[data-status="growing"] {
background-color: #DCEDF3;
color: #2F6577;
}
/* ---------- 7. 準備中リンク（links.js が付与） ---------- */
.is-coming-soon {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
position: relative;
filter: grayscale(0.35);
}
a.is-coming-soon::after {
content: "（準備中）";
font-size: 0.85em;
font-weight: 700;
margin-left: 0.25em;
}
/* カード全体が準備中の場合はカード内に注記しない（バッジで表現） */
a.card.is-coming-soon::after {
content: none;
}
/* ---------- 8. ヘッダー ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background-color: rgba(248, 245, 239, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.site-header.is-scrolled {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: var(--shadow-header);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: var(--header-height);
}
.site-header__brand {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.02rem;
color: var(--color-ink-strong);
white-space: nowrap;
}
.site-header__brand:hover {
text-decoration: none;
color: var(--color-deep-green);
}
.site-header__logo {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-matcha);
}
.site-nav {
display: none;
align-items: center;
gap: 1.1rem;
flex-wrap: nowrap;
}
.site-nav a {
color: var(--color-ink);
font-size: 0.92rem;
font-weight: 500;
white-space: nowrap;
}
.site-nav a:hover {
color: var(--color-deep-green);
text-decoration: none;
}
.site-nav .btn {
font-size: 0.88rem;
padding: 0.5em 1.2em;
}
@media (min-width: 1120px) {
.site-nav { display: flex; }
}
/* ハンバーガーボタン */
.nav-toggle {
appearance: none;
background: none;
border: none;
padding: 0.5rem;
cursor: pointer;
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
}
.nav-toggle__bar {
display: block;
width: 24px;
height: 2px;
border-radius: 2px;
background-color: var(--color-ink-strong);
transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* モバイルメニュー */
.mobile-menu {
display: none;
background-color: var(--color-card);
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-header);
}
.mobile-menu.is-open {
display: block;
}
.mobile-menu__list {
list-style: none;
margin: 0;
padding: 0.75rem 1.25rem 1.25rem;
}
.mobile-menu__list a {
display: block;
padding: 0.7rem 0.4rem;
color: var(--color-ink);
font-weight: 500;
border-bottom: 1px solid var(--color-border);
}
.mobile-menu__list a:hover {
color: var(--color-deep-green);
text-decoration: none;
}
.mobile-menu__list li:last-child a {
border-bottom: none;
}
.mobile-menu__cta {
margin-top: 0.75rem;
}
@media (min-width: 1120px) {
.nav-toggle { display: none; }
.mobile-menu { display: none !important; }
}
/* ---------- 9. ヒーロー ---------- */
.hero {
position: relative;
overflow: hidden;
min-height: min(88vh, 720px);
display: flex;
align-items: center;
/* 画像が無くても成立するグラデーション。hero-main.webp があれば重なる */
background:
linear-gradient(160deg, rgba(248, 245, 239, 0.9) 0%, rgba(234, 243, 210, 0.55) 55%, rgba(243, 232, 205, 0.65) 100%),
url("../img/hero-main.webp") center / cover no-repeat,
linear-gradient(180deg, #F8F5EF 0%, #EFE9DC 100%);
}
.hero__canvas {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.hero__canvas canvas {
width: 100%;
height: 100%;
display: block;
}
.hero__inner {
position: relative;
z-index: 2;
padding-block: 5.5rem 4.5rem;
text-align: center;
}
.hero__title {
font-size: clamp(1.65rem, 5.4vw, 3rem);
line-height: 1.6;
letter-spacing: 0.04em;
margin-bottom: 1.25rem;
text-wrap: balance;
}
.hero__lead {
max-width: 36em;
margin: 0 auto 2.25rem;
font-size: clamp(0.95rem, 2.6vw, 1.1rem);
color: var(--color-ink-soft);
text-wrap: pretty;
}
/* ---------- 10. FAQ（details/summary アコーディオン） ---------- */
.faq {
max-width: 780px;
margin-inline: auto;
display: grid;
gap: 0.9rem;
}
.faq details {
background-color: var(--color-card);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: 0;
overflow: hidden;
}
.faq summary {
list-style: none;
cursor: pointer;
padding: 1.1rem 3rem 1.1rem 1.4rem;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.02rem;
position: relative;
transition: background-color 0.2s ease;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "";
position: absolute;
right: 1.4rem;
top: 50%;
width: 10px;
height: 10px;
border-right: 2px solid var(--color-deep-green);
border-bottom: 2px solid var(--color-deep-green);
transform: translateY(-70%) rotate(45deg);
transition: transform 0.25s ease;
}
.faq details[open] summary::after {
transform: translateY(-30%) rotate(-135deg);
}
.faq summary:hover {
background-color: var(--color-matcha-soft);
}
.faq__answer {
padding: 0 1.4rem 1.3rem;
font-size: 0.95rem;
color: var(--color-ink-soft);
}
.faq__answer p {
margin-bottom: 0.5rem;
}
/* ---------- 11. フッター ---------- */
.site-footer {
background-color: var(--color-ink-strong);
color: #D8D4CA;
padding-block: 3.5rem 2rem;
font-size: 0.92rem;
}
.site-footer a {
color: #EDEAE2;
}
.site-footer a:hover {
color: var(--color-matcha);
}
.site-footer__grid {
display: grid;
gap: 2rem;
margin-bottom: 2.5rem;
}
@media (min-width: 720px) {
.site-footer__grid {
grid-template-columns: 1.3fr 1fr 1fr 1fr;
}
}
.site-footer__heading {
font-family: var(--font-heading);
font-size: 1rem;
color: #F8F5EF;
margin-bottom: 0.8rem;
}
.site-footer__list {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__list li {
margin-bottom: 0.45rem;
}
.site-footer__meta {
border-top: 1px solid rgba(248, 245, 239, 0.15);
padding-top: 1.5rem;
text-align: center;
font-size: 0.82rem;
color: #A6A29A;
}
.site-footer__legal {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.25rem;
}
.site-footer__legal a {
color: #C9C5BC;
font-size: 0.82rem;
}
.site-footer__legal a:hover {
color: #F8F5EF;
text-decoration: underline;
}
/* ---------- 12. スクロールフェードイン ---------- */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* JSが無効な環境では最初から表示する */
.no-js .reveal {
opacity: 1;
transform: none;
}
/* ---------- 13. ユーティリティ ---------- */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 2rem; }
.note-link {
font-size: 0.88rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* YouTube 統計表示 */
.stats-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.stat-box {
background-color: var(--color-card);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: 1rem 1.75rem;
text-align: center;
min-width: 160px;
}
.stat-box__label {
display: block;
font-size: 0.8rem;
font-weight: 700;
color: var(--color-ink-soft);
}
.stat-box__value {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 700;
color: var(--color-ink-strong);
}
.stat-box__unit {
font-size: 0.85rem;
color: var(--color-ink-soft);
margin-left: 0.2em;
}
/* Kindle 書籍ミニカード */
.book-card .card__media {
aspect-ratio: auto;
background-color: #FAF8F3;
padding: 1rem;
}
.book-card .card__media img {
height: 230px;
object-fit: contain;
}
.book-card__links {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.75rem;
}
/* SNS ピルリンク */
.pill-links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
.pill-links a {
display: inline-flex;
align-items: center;
gap: 0.4em;
background-color: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 0.5em 1.3em;
font-size: 0.92rem;
font-weight: 500;
color: var(--color-ink);
box-shadow: var(--shadow-card);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pill-links a:hover {
text-decoration: none;
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
color: var(--color-deep-green);
}
/* 導入文（ファーストビュー直下） */
.intro-section {
padding-block: 3.25rem;
}
.intro-lead {
max-width: 40em;
margin-inline: auto;
text-align: center;
}
.intro-lead p {
font-size: 1.05rem;
line-height: 2;
color: var(--color-ink-soft);
margin-bottom: 0.9rem;
}
.intro-lead p:last-child {
font-family: var(--font-heading);
font-size: 1.18rem;
font-weight: 500;
color: var(--color-ink-strong);
margin-top: 1.5rem;
margin-bottom: 0;
}
/* 7日間講座「届く内容」リスト */
.day-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.day-list li {
display: flex;
align-items: baseline;
gap: 0.9rem;
background-color: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 0.65rem 1rem;
box-shadow: var(--shadow-card);
}
.day-list__day {
flex: 0 0 auto;
min-width: 3.2em;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.9rem;
color: var(--color-deep-green);
}
.day-list__text {
color: var(--color-ink);
}
@media (min-width: 640px) {
.day-list--full {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
}
/* このサイトについて */
.about-site {
max-width: 46em;
margin-inline: auto;
text-align: center;
}
.about-site p {
color: var(--color-ink-soft);
margin-bottom: 0.75rem;
}
/* ---------- 13b. メルマガ導線（トップ用ブロック＋各ページ下部の帯） ---------- */
/* 抹茶系の背景に朱ボタンで、目を引くが上品に。 */
.mailmag {
background: linear-gradient(135deg, var(--color-matcha-soft) 0%, #F3EEDD 100%);
border: 1px solid var(--color-matcha);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: 2rem 1.75rem;
text-align: center;
}
.mailmag__eyebrow {
display: inline-block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.08em;
color: var(--color-deep-green-dark);
background-color: rgba(255, 255, 255, 0.7);
border-radius: 999px;
padding: 0.25em 1em;
margin-bottom: 0.9rem;
}
.mailmag__title {
font-size: clamp(1.25rem, 3.6vw, 1.7rem);
margin: 0 0 0.75rem;
color: var(--color-ink-strong);
}
.mailmag__text {
max-width: 40em;
margin: 0 auto 1.5rem;
color: var(--color-ink-soft);
font-size: 0.98rem;
}
.mailmag__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.1rem;
align-items: center;
justify-content: center;
}
.mailmag__more {
font-size: 0.9rem;
font-weight: 500;
}
/* トップページ用の大きめブロック */
.mailmag--feature {
padding: 2.75rem 2rem;
}
/* 各ページ下部の帯（やや控えめ） */
.mailmag--band {
padding: 1.75rem;
}
.mailmag--band .mailmag__title {
font-size: clamp(1.15rem, 3.2vw, 1.45rem);
}
.mailmag--band .mailmag__text {
margin-bottom: 1.2rem;
font-size: 0.94rem;
}
/* ---------- 13c. 書籍カード（小カード・アフィリエイト注記） ---------- */
.book-card--small .card__body {
padding: 1.1rem 1.2rem 1.25rem;
}
.book-card--small .card__title {
font-size: 0.98rem;
line-height: 1.6;
}
.books-affiliate-note {
font-size: 0.8rem;
color: var(--color-ink-soft);
text-align: center;
margin-top: 1.25rem;
}
/* ---------- 14. アニメーション抑制設定への対応 ---------- */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal {
opacity: 1;
transform: none;
}
/* ヒーローの3D演出はJS側でも初期化しない（hero.js参照） */
.hero__canvas {
display: none;
}
}