@charset "UTF-8";
/* ============================================================================
かなくぼピアノ教室 — リニューアル v3（クラシック・エレガント）
コンセプト：「グランドピアノ」
----------------------------------------------------------------------------
・配色はグランドピアノに由来：
エスプレッソ（黒鍵の漆黒）× アイボリー（象牙鍵盤）× アンティークブラス（金具）
・セクション識別クラス（.rn-*）と装飾要素は renewal.js が付与します。
・アニメーションは prefers-reduced-motion を尊重します。
============================================================================ */
/* ----------------------------------------------------------------------------
0. デザイントークン（正式パレット「グランドピアノ」）
---------------------------------------------------------------------------- */
:root {
--rn-accent: #a8813f; /* アンティークブラス：アクセント・ラベル・CTA */
--rn-deep: #2a231e; /* エスプレッソ：フッター・ボタン塗り */
--rn-night: #1c1713; /* ディープエスプレッソ：グラデーション最深部 */
--rn-accent-soft: #c9a662; /* ライトブラス：ホバー・明るいアクセント */
--rn-base: #f7f2e7; /* ウォームアイボリー：サイト全体の基調背景 */
--rn-ink: #2f2620; /* 見出し：エスプレッソ寄りのダークブラウン */
--rn-text: #4a4038; /* 本文：柔らかいダークブラウン */
--rn-paper: #fbf7ef; /* カード等の淡い紙色 */
--rn-paper-2: #efe6d3; /* テーブル見出し等の濃いめアイボリー */
--rn-ivory: #f3ead8; /* 生徒様の声セクション背景（上） */
--rn-ivory-2: #ece0c8; /* 同（下） */
--rn-line: #ddd0ba; /* 罫線：ウォームタウプ */
--rn-line-soft: #e8ddc8;
/* rgb成分（rgba()での透過表現用）。パレット差し替え時はこの3つも忘れず変更する */
--rn-accent-rgb: 168, 129, 63;
--rn-deep-rgb: 42, 35, 30;
--rn-night-rgb: 28, 23, 19;
--rn-serif-jp: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
--rn-serif-en: "Cormorant Garamond", "Noto Serif JP", Georgia, "Times New Roman", serif;
--rn-section-py: clamp(4rem, 2.2rem + 6vw, 7.5rem);
--rn-container: min(1120px, 92vw);
--rn-ease: cubic-bezier(.22, .61, .36, 1);
--rn-shadow-soft: 0 24px 50px -30px rgba(var(--rn-deep-rgb), .35);
/* --- SWELL本体のグローバル変数も同パレットへ --------------------------- */
--color_main: #a8813f;
/* htag はSWELLでは「h2装飾バーの背景色」に使われるためブラスに */
--color_htag: #a8813f;
--color_bg: #f7f2e7;
--color_header_bg: #f7f2e7;
--color_header_text: #2f2620;
--color_text: #4a4038;
--color_footer_bg: #2a231e;
--color_footer_text: #f7f2e7;
/* リンクはブラスを一段深めて可読性を確保（白地でコントラスト比 約4.9:1） */
--color_link: #8f6a2e;
/* Q&A・リストの記号色も同系に整える */
--color_faq_q: #a8813f;
--color_faq_a: #2f2620;
--color_list_check: #a8813f;
--color_list_num: #a8813f;
/* SWELLの「テーマアクセント」派生色のうち、寒色（ティール/シアン/緑）を
パレットへ寄せる。暖色系（deep01赤・deep04橙）と、記事内で使う
マーカー/アイコンの多色パレットは表現力のため据え置く。 */
--color_deep02: #a8813f; /* was #00bac9 ティール */
--color_deep03: #2a231e; /* was #63a84d 緑 */
--color_gradient1: #f3ead8; /* was #d8ffff 薄シアン */
--color_gradient2: #e8ddc8; /* was #87e7ff 薄シアン */
}
html {
scroll-behavior: smooth;
}
::selection {
background: rgba(var(--rn-accent-rgb), .18);
color: inherit;
}
/* ----------------------------------------------------------------------------
1. ベースタイポグラフィ
---------------------------------------------------------------------------- */
body {
letter-spacing: .02em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.l-mainContent h1,
.l-mainContent h2,
.l-mainContent h3,
.l-mainContent h4,
.p-postList__title,
.c-postTitle,
.entry-title {
font-family: var(--rn-serif-jp);
font-weight: 500;
letter-spacing: .055em;
line-height: 1.65;
}
.l-mainContent p {
line-height: 2.0;
}
/* ----------------------------------------------------------------------------
2. セクション見出し（英語ラベル＋日本語H2＋クラシック飾罫）
---------------------------------------------------------------------------- */
.l-mainContent p.is-style-section_ttl {
margin-bottom: .55em !important;
line-height: 1;
}
.l-mainContent p.is-style-section_ttl .swl-fz,
.l-mainContent p.is-style-section_ttl strong {
font-family: var(--rn-serif-en) !important;
font-style: italic;
font-weight: 500 !important;
font-size: 1.65rem !important;
letter-spacing: .14em;
color: var(--rn-accent);
}
/* トップページのセクション見出し（白・アイボリー地の上に置かれるもの）。
文字色の指定は .home スコープに限定する——下層ページのh2は
SWELLの「塗りバー型」デザイン（ブラス地＋白文字）のため、
ここで文字色を上書きすると読めなくなる。 */
.l-mainContent .swell-block-fullWide h2.wp-block-heading,
.l-mainContent .wp-block-group h2.wp-block-heading {
font-family: var(--rn-serif-jp);
font-weight: 500;
letter-spacing: .08em;
line-height: 1.55;
margin-top: 0;
}
.home .l-mainContent .swell-block-fullWide h2.wp-block-heading,
.home .l-mainContent .wp-block-group h2.wp-block-heading {
font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.3rem);
color: var(--rn-ink);
}
/* 飾罫：細線 ─ ◇ ─ 細線 */
.l-mainContent p.is-style-section_ttl + h2.wp-block-heading::after,
.l-mainContent .swell-block-fullWide__inner > h2.wp-block-heading.has-text-align-center::after {
content: "";
display: block;
width: 132px;
height: 10px;
margin: 1em auto 0;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
/* ----------------------------------------------------------------------------
3. 出現アニメーション（renewal.js が .rn-reveal を付与）
---------------------------------------------------------------------------- */
/* 遷移定義は常時、非表示状態は「.rn-in が付くまで」に限定（:not で詳細度問題を回避） */
html.rn-anim .rn-reveal {
transition:
opacity 1s var(--rn-ease),
transform 1s var(--rn-ease),
filter 1s var(--rn-ease);
transition-delay: calc(var(--rn-i, 0) * 95ms);
}
html.rn-anim .rn-reveal:not(.rn-in) {
opacity: 0;
transform: translateY(28px);
}
/* 見出しはブラー→フォーカスの夢見心地な出現 */
html.rn-anim h2.rn-reveal:not(.rn-in),
html.rn-anim p.is-style-section_ttl.rn-reveal:not(.rn-in) {
filter: blur(7px);
transform: translateY(16px);
}
/* 画像・カードはわずかに拡大しながら */
html.rn-anim figure.rn-reveal:not(.rn-in),
html.rn-anim .swell-block-column.rn-reveal:not(.rn-in) {
transform: translateY(24px) scale(.965);
}
/* ----------------------------------------------------------------------------
4. ヘッダー / グローバルナビ
---------------------------------------------------------------------------- */
.l-header {
border-bottom: 1px solid var(--rn-line);
}
.l-header__gnav .c-gnav__item > a,
.l-fixHeader__gnav .c-gnav__item > a {
font-family: var(--rn-serif-jp);
font-weight: 500;
letter-spacing: .06em;
transition: color .3s ease;
}
.c-gnav__itemText { position: relative; }
.c-gnav__item > a .c-gnav__itemText::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 1px;
background: var(--rn-accent);
transform: scaleX(0);
transform-origin: center;
transition: transform .4s var(--rn-ease);
}
.c-gnav__item > a:hover .c-gnav__itemText::after {
transform: scaleX(1);
}
/* 追従ヘッダーは磨りガラスで（ウォームアイボリー） */
.l-fixHeader {
background: rgba(247, 242, 231, .86) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--rn-line), 0 12px 30px -22px rgba(var(--rn-deep-rgb), .4);
}
/* キーボード操作時のフォーカスリングもブラスで統一 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid var(--rn-accent);
outline-offset: 2px;
}
/* ----------------------------------------------------------------------------
5. ヒーロー（没入型 + Ken Burns + Scroll indicator）
---------------------------------------------------------------------------- */
.home .p-mainVisual.-height-img {
height: min(86vh, 840px);
overflow: hidden;
}
.home .p-mainVisual .swiper,
.home .p-mainVisual .swiper-wrapper,
.home .p-mainVisual__slide,
.home .p-mainVisual__imgLayer {
height: 100%;
}
.home .p-mainVisual.-height-img .p-mainVisual__img {
width: 100%;
height: 100% !important;
object-fit: cover;
}
/* ゆったりとしたKen Burns（スライドごとに方向を変える） */
html.rn-anim .home .p-mainVisual__img {
animation: rn-kenburns 26s var(--rn-ease) infinite alternate;
transform-origin: 62% 40%;
will-change: transform;
}
html.rn-anim .home .p-mainVisual__slide:nth-child(even) .p-mainVisual__img {
transform-origin: 30% 60%;
}
@keyframes rn-kenburns {
from { transform: scale(1); }
to { transform: scale(1.09); }
}
/* 下部を静かに沈めるグラデーション */
.home .p-mainVisual__imgLayer::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(var(--rn-night-rgb), 0) 52%, rgba(var(--rn-night-rgb), .38) 100%);
pointer-events: none;
}
/* Scroll indicator（renewal.jsが注入） */
/* 画像内の中央コピーと重ならないよう右下に配置 */
.rn-scroll {
position: absolute;
right: 34px;
bottom: 24px;
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
pointer-events: none;
}
.rn-scroll__label {
font-family: var(--rn-serif-en);
font-style: italic;
font-size: 13px;
letter-spacing: .3em;
color: #fff;
text-shadow: 0 1px 8px rgba(var(--rn-night-rgb), .55);
}
.rn-scroll__line {
width: 1px;
height: 64px;
background: rgba(255,255,255,.35);
position: relative;
overflow: hidden;
}
.rn-scroll__line::after {
content: "";
position: absolute;
left: 0; top: -40%;
width: 100%;
height: 40%;
background: #fff;
animation: rn-scrolldrop 2.2s var(--rn-ease) infinite;
}
@keyframes rn-scrolldrop {
0% { top: -40%; }
70% { top: 100%; }
100% { top: 100%; }
}
/* ----------------------------------------------------------------------------
6. セクションの余白と背景リズム（単調にならないように）
---------------------------------------------------------------------------- */
.l-mainContent .swell-block-fullWide.pc-py-40,
.l-mainContent .swell-block-fullWide.pc-py-60,
.l-mainContent .swell-block-fullWide.pc-py-80 {
padding-top: var(--rn-section-py) !important;
padding-bottom: var(--rn-section-py) !important;
}
.l-mainContent .swell-block-fullWide__inner.l-article {
max-width: var(--rn-container);
}
/* --- 6a. イントロ（白＋ゴーストワード＋写真カード） --- */
.rn-intro {
position: relative;
overflow: hidden;
}
.rn-intro > * { position: relative; z-index: 1; }
/* 本文は写真カードと重ならない幅に */
.rn-intro p {
max-width: 44em;
margin-left: auto;
margin-right: auto;
}
.rn-ghost {
position: absolute;
z-index: 0 !important;
top: -0.02em;
left: 50%;
transform: translateX(-50%);
font-family: var(--rn-serif-en);
font-style: italic;
font-weight: 500;
font-size: clamp(6rem, 15vw, 14rem);
line-height: 1;
color: var(--rn-accent);
opacity: .055;
white-space: nowrap;
pointer-events: none;
user-select: none;
}
/* 教室写真の額装カード（PC広幅のみ・ゆらゆらと浮く） */
.rn-photo {
position: absolute;
z-index: 0 !important;
display: none;
width: min(13vw, 210px);
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
border: 8px solid #fff;
border-radius: 2px;
box-shadow: 0 22px 44px -22px rgba(var(--rn-deep-rgb), .45);
pointer-events: none;
}
.rn-photo-1 {
background-image: url("../../uploads/2022/04/IMG_6956.jpg"); /* グランドピアノと楽譜 */
left: max(1.5vw, 20px);
top: 50%;
transform: rotate(-5deg);
}
.rn-photo-2 {
background-image: url("../../uploads/2025/02/3-1.jpg"); /* 鍵盤に手 */
right: max(1.5vw, 20px);
top: 26%;
transform: rotate(4deg);
}
@media screen and (min-width: 1280px) {
.rn-photo { display: block; }
html.rn-anim .rn-photo-1 { animation: rn-float1 7s ease-in-out infinite alternate; }
html.rn-anim .rn-photo-2 { animation: rn-float2 8s ease-in-out infinite alternate; }
}
@keyframes rn-float1 {
from { transform: rotate(-5deg) translateY(0); }
to { transform: rotate(-4deg) translateY(-12px); }
}
@keyframes rn-float2 {
from { transform: rotate(4deg) translateY(0); }
to { transform: rotate(3deg) translateY(-14px); }
}
/* --- 6b. お知らせ（エディトリアルなリストへ再構成） --- */
.rn-news .wp-block-group.is-style-stitch {
border: 1px solid var(--rn-line) !important;
border-radius: 2px;
box-shadow: var(--rn-shadow-soft);
padding: clamp(1.9rem, 1.1rem + 3vw, 3.2rem) !important;
}
.rn-news .p-postList {
display: block !important;
}
.rn-news .p-postList__item {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid var(--rn-line-soft);
}
.rn-news .p-postList__item:first-child {
border-top: 1px solid var(--rn-line-soft);
}
.rn-news .p-postList__link {
display: flex;
align-items: center;
gap: clamp(1rem, 2.5vw, 1.6rem);
padding: 1.1rem .3rem;
position: relative;
}
.rn-news .p-postList__thumb {
flex: 0 0 108px;
width: 108px;
margin: 0 !important;
border-radius: 3px;
overflow: hidden;
}
.rn-news .c-postThumb__figure {
aspect-ratio: 16 / 10;
}
.rn-news .p-postList__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column-reverse;
justify-content: center;
gap: .35rem;
padding-right: 2rem;
}
.rn-news .p-postList__title {
font-size: 1.02rem;
margin: 0;
line-height: 1.7;
text-align: left;
}
.rn-news .p-postList__meta,
.rn-news .p-postList__times,
.rn-news .p-postList__body {
text-align: left;
}
/* カード型由来の flex-grow による日付〜タイトル間の間延びを解消 */
.rn-news .p-postList__meta {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
}
.rn-news .p-postList__excerpt {
display: none;
}
/* アイキャッチ未設定の記事は上品なノーイメージ表示に */
.rn-news .c-postThumb__figure {
background: linear-gradient(135deg, var(--rn-paper-2) 0%, var(--rn-base) 100%);
position: relative;
}
.rn-news .c-postThumb__figure:has(img[src*="no_img"], img[data-src*="no_img"])::after {
content: "♪";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--rn-accent);
opacity: .45;
}
.rn-news .c-postThumb__figure img[src*="no_img"],
.rn-news .c-postThumb__figure img[data-src*="no_img"] {
opacity: 0;
}
/* 日付は時計アイコンなしのセリフ数字ですっきりと */
.rn-news .icon-posted::before {
display: none;
}
.rn-news .p-postList__meta,
.rn-news .p-postList__times {
margin: 0;
}
/* ホバーで矢印がすっと現れる */
.rn-news .p-postList__link::after {
content: "\2192";
position: absolute;
right: .4rem;
top: 50%;
translate: -8px -50%;
font-family: var(--rn-serif-en);
font-size: 1.2rem;
color: var(--rn-accent);
opacity: 0;
transition: opacity .35s ease, translate .35s var(--rn-ease);
}
.rn-news .p-postList__link:hover::after {
opacity: 1;
translate: 0 -50%;
}
/* --- 6c. レッスン（淡いグラデ＋浮遊する音符） --- */
.rn-lessons {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, var(--rn-paper-2) 100%) !important;
overflow: hidden;
}
.rn-lessons::before {
content: "";
position: absolute;
inset: 0;
/* 音符はごく控えめに（大人の教室らしい静けさを保つ） */
background-image: url('data:image/svg+xml;utf8,');
background-size: 640px 640px;
pointer-events: none;
}
/* カード画像（円形・文字焼き込み）の彩度もわずかに抑える */
.rn-lessons .swell-block-column img {
filter: saturate(.85) drop-shadow(0 18px 26px rgba(var(--rn-deep-rgb), .22));
}
.rn-lessons .swell-block-column:hover img {
filter: saturate(1) drop-shadow(0 30px 38px rgba(var(--rn-deep-rgb), .32));
}
.rn-lessons > * { position: relative; }
/* レッスンカード：ふわりと浮かぶ（filterは上の彩度調整ルールと統合） */
.rn-lessons .swell-block-column figure {
margin: 0;
}
.rn-lessons .swell-block-column img {
transition: transform .55s var(--rn-ease), filter .55s ease;
}
.rn-lessons .swell-block-column:hover img {
transform: translateY(-10px);
}
/* --- 6d. 講師・特徴の写真帯（深いティールの静かな幕間） --- */
.rn-band {
position: relative;
}
.rn-band::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg,
rgba(var(--rn-night-rgb), .66) 0%,
rgba(var(--rn-deep-rgb), .3) 52%,
rgba(var(--rn-night-rgb), .56) 100%);
pointer-events: none;
}
.rn-band .swell-block-fullWide__inner {
position: relative;
z-index: 1;
}
.rn-band figure.wp-block-image img {
border-radius: 4px;
box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55);
outline: 1px solid rgba(255, 255, 255, .35);
outline-offset: 6px;
/* バナー画像のポップな彩度を静かに抑える */
filter: saturate(.78) brightness(.97);
transition: transform .5s var(--rn-ease), box-shadow .5s ease, filter .5s ease;
}
.rn-band figure.wp-block-image a:hover img {
filter: saturate(.95) brightness(1);
}
.rn-band figure.wp-block-image a:hover img {
transform: translateY(-6px) scale(1.015);
box-shadow: 0 40px 70px -26px rgba(0, 0, 0, .65);
}
/* --- 6e. 生徒様の声（アイボリーの間奏＋グリッドカード） --- */
.rn-voice {
background: linear-gradient(180deg, var(--rn-ivory) 0%, var(--rn-ivory-2) 100%) !important;
}
.rn-voice > .swell-block-fullWide__inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px 28px;
max-width: min(1000px, 92vw);
}
.rn-voice > .swell-block-fullWide__inner > * {
grid-column: 1 / -1;
margin-bottom: 0 !important;
}
.rn-voice > .swell-block-fullWide__inner > h2 {
margin-bottom: 1.2rem !important;
}
.rn-voice > .swell-block-fullWide__inner > .swell-block-balloon {
grid-column: auto;
height: 100%;
}
@media screen and (max-width: 768px) {
.rn-voice > .swell-block-fullWide__inner {
grid-template-columns: 1fr;
gap: 18px;
}
}
/* 吹き出し → 上質なカードへ（余白の乱れを解消） */
.rn-voice .c-balloon {
display: flex !important;
flex-direction: column !important;
height: 100%;
position: relative;
margin: 0 !important;
padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
background: #fff;
border: 1px solid rgba(214, 226, 221, .9);
border-radius: 6px;
box-shadow: 0 20px 40px -30px rgba(var(--rn-deep-rgb), .38);
transition: transform .45s var(--rn-ease), box-shadow .45s ease;
}
.rn-voice .swell-block-balloon:hover .c-balloon {
transform: translateY(-5px);
box-shadow: 0 30px 52px -30px rgba(var(--rn-deep-rgb), .5);
}
/* 飾りの引用符 */
.rn-voice .c-balloon::after {
content: "\201D";
position: absolute;
top: 10px;
right: 24px;
font-family: var(--rn-serif-en);
font-size: 84px;
line-height: 1;
color: var(--rn-accent);
opacity: .13;
pointer-events: none;
}
/* アイコン＋名前を横並びのヘッダー行に */
.rn-voice .c-balloon__icon {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 14px;
width: 100%;
margin: 0 0 1rem !important;
padding-bottom: .9rem;
border-bottom: 1px solid var(--rn-line-soft);
}
.rn-voice .c-balloon__icon .c-balloon__iconImg {
width: 52px !important;
height: 52px !important;
border-radius: 50% !important;
border: 1px solid var(--rn-line);
flex: 0 0 52px;
margin: 0 !important;
}
.rn-voice .c-balloon__iconName {
font-family: var(--rn-serif-en);
font-size: .92rem;
letter-spacing: .05em;
color: var(--rn-deep);
white-space: normal;
text-align: left;
margin: 0 !important;
flex: 0 1 auto;
}
/* 本文：吹き出しの矢印・枠・背景を取り払う */
.rn-voice .c-balloon__body,
.rn-voice .c-balloon__text,
.rn-voice .c-balloon__body.-speaking {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
font-family: var(--rn-serif-jp) !important;
line-height: 2 !important;
letter-spacing: .02em;
}
/* 短い声のカードは本文を縦中央に置き、空白を「余裕」に見せる */
.rn-voice .c-balloon__body {
flex: 1;
display: flex !important;
align-items: center;
}
.rn-voice .c-balloon__text {
width: 100%;
}
/* デフォルトのカラフルな人物アイコンはモノトーンに落として上品に */
.rn-voice .c-balloon__iconImg {
filter: grayscale(1) opacity(.75);
background: var(--rn-paper-2);
}
.rn-voice .c-balloon__shapes,
.rn-voice .c-balloon__before,
.rn-voice .c-balloon__after {
display: none !important;
}
/* --- 6f. ブログ（現状のカード型を保ちつつ品よく） --- */
.rn-blog .wp-block-group.is-style-stitch,
.l-mainContent .wp-block-group.is-style-stitch {
border: 1px solid var(--rn-line) !important;
border-radius: 2px;
box-shadow: var(--rn-shadow-soft);
padding: clamp(1.9rem, 1.1rem + 3vw, 3.2rem) !important;
}
/* --- 6f-2. ブログパーツ内（ブログ枠・YouTube・教室概要）も見出しシステムを統一 --- */
/* 英語ラベル（Blog / Information など） */
.p-blogParts p.is-style-section_ttl .swl-fz,
.p-blogParts p.is-style-section_ttl strong {
font-family: var(--rn-serif-en) !important;
font-style: italic;
font-weight: 500 !important;
font-size: 1.45rem !important;
letter-spacing: .14em;
color: var(--rn-accent);
}
/* 日本語タイトル（ラベル直後の段落、または h2） */
.p-blogParts p.is-style-section_ttl + p.is-style-section_ttl,
.p-blogParts h2.is-style-section_ttl {
font-family: var(--rn-serif-jp);
font-style: normal;
font-weight: 500;
font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
letter-spacing: .08em;
color: var(--rn-ink);
line-height: 1.55;
}
.p-blogParts p.is-style-section_ttl + p.is-style-section_ttl strong,
.p-blogParts p.is-style-section_ttl + p.is-style-section_ttl .swl-fz {
font-family: var(--rn-serif-jp) !important;
font-style: normal !important;
font-size: inherit !important;
letter-spacing: .08em;
color: var(--rn-ink);
}
/* 飾罫も同様に */
.p-blogParts p.is-style-section_ttl + p.is-style-section_ttl::after,
.p-blogParts h2.is-style-section_ttl.has-text-align-center::after {
content: "";
display: block;
width: 132px;
height: 10px;
margin: 1em auto 0;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
/* --- 6g. 教室概要（写真を上品な額装で） --- */
.rn-info figure img,
.rn-info .wp-block-image img {
border-radius: 3px;
box-shadow: 0 16px 32px -20px rgba(var(--rn-deep-rgb), .4);
}
/* ----------------------------------------------------------------------------
7. 記事リスト（サムネイル・タイトル）全般
---------------------------------------------------------------------------- */
.p-postList__title {
font-size: 1rem;
line-height: 1.7;
transition: color .3s ease;
}
.p-postList__link:hover .p-postList__title {
color: var(--rn-deep);
}
.p-postList__thumb,
.c-postThumb {
overflow: hidden;
border-radius: 3px;
}
.c-postThumb__img,
.p-postList__thumb img {
transition: transform .6s var(--rn-ease);
}
.p-postList__link:hover .c-postThumb__img,
.p-postList__link:hover .p-postList__thumb img {
transform: scale(1.05);
}
.c-postTimes,
.p-postList__times {
font-family: var(--rn-serif-en);
letter-spacing: .05em;
}
/* ----------------------------------------------------------------------------
8. ボタン（アウトライン＋光のスウィープ）
---------------------------------------------------------------------------- */
.swell-block-button__link,
.is-style-more_btn .btn_text,
.wp-block-button__link {
font-family: var(--rn-serif-jp);
font-weight: 500;
letter-spacing: .12em;
border-radius: 2px;
transition: background-color .4s ease, color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.is-style-more_btn .btn_text {
display: inline-block;
position: relative;
overflow: hidden;
padding: .9em 2.6em;
border: 1px solid var(--rn-accent);
color: var(--rn-deep);
background: transparent;
}
.is-style-more_btn .btn_text::before {
content: "";
position: absolute;
top: 0;
left: -130%;
width: 55%;
height: 100%;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .6), transparent);
transform: skewX(-20deg);
transition: left .7s var(--rn-ease);
}
/* ホバーはエスプレッソの塗り（ブラス塗り＋白字より上品でコントラストも高い） */
.is-style-more_btn .btn_text:hover {
background: var(--rn-deep);
border-color: var(--rn-deep);
color: #fff;
box-shadow: 0 16px 30px -14px rgba(var(--rn-deep-rgb), .55);
}
.is-style-more_btn .btn_text:hover::before {
left: 150%;
}
/* ----------------------------------------------------------------------------
9. 吹き出し（ブログ記事内などトップ以外は従来レイアウトのまま上品に）
---------------------------------------------------------------------------- */
.p-postContent .c-balloon__body,
.l-mainContent :not(.rn-voice) > .swell-block-balloon .c-balloon__body {
font-family: var(--rn-serif-jp);
line-height: 1.95;
}
.c-balloon__iconName {
letter-spacing: .04em;
}
/* ----------------------------------------------------------------------------
10. 下部固定CTA・フッター
---------------------------------------------------------------------------- */
.inner_bfb {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-top: 1px solid var(--rn-line);
}
.inner_bfb .bfb_topText {
font-family: var(--rn-serif-jp);
letter-spacing: .08em;
}
.inner_bfb .bfb_btn {
font-family: var(--rn-serif-jp);
letter-spacing: .1em;
border-radius: 2px;
}
.l-footer {
border-top: 3px solid var(--rn-accent);
background: linear-gradient(180deg, var(--rn-deep) 0%, var(--rn-night) 100%);
/* 下部固定CTA（高さ約74px）にフッター末尾が隠れないように */
padding-bottom: 96px;
}
.l-footer a,
.l-footer p {
letter-spacing: .04em;
}
.l-footer__foot .c-copyright,
.copyright {
font-family: var(--rn-serif-en);
letter-spacing: .1em;
}
/* ----------------------------------------------------------------------------
11. 下層ページ共通
---------------------------------------------------------------------------- */
.p-postContent h2,
.p-postContent h3 {
font-family: var(--rn-serif-jp);
font-weight: 500;
letter-spacing: .05em;
}
.p-postContent blockquote {
border-left: 2px solid var(--rn-accent);
background: var(--rn-paper);
font-family: var(--rn-serif-jp);
font-style: italic;
}
/* 本文テーブル（料金表・教室概要） */
.post_content table,
.p-postContent table {
border-collapse: collapse;
border: 1px solid var(--rn-line);
}
.post_content table th,
.post_content table td,
.p-postContent table th,
.p-postContent table td {
border: 1px solid var(--rn-line);
padding: .9em 1.1em;
}
.post_content table th,
.p-postContent table th {
font-family: var(--rn-serif-jp);
font-weight: 500;
letter-spacing: .04em;
background: var(--rn-paper-2);
color: var(--rn-ink);
}
/* --- お問い合わせフォーム --- */
.contact-item-title {
font-family: var(--rn-serif-jp) !important;
letter-spacing: .04em;
}
.contact-item-title span,
.required,
.optional {
letter-spacing: .06em;
font-family: var(--rn-serif-en);
}
.contact-item input,
.contact-item textarea,
input.wpcf7-form-control.wpcf7-text,
input.wpcf7-form-control.wpcf7-email,
input.wpcf7-form-control.wpcf7-tel,
textarea.wpcf7-form-control.wpcf7-textarea {
border-radius: 5px !important;
border: 1px solid var(--rn-line) !important;
background: var(--rn-paper) !important;
transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.contact-item input:focus,
.contact-item textarea:focus,
input.wpcf7-form-control:focus,
textarea.wpcf7-form-control:focus {
border-color: var(--rn-accent) !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(var(--rn-accent-rgb), .12) !important;
outline: none !important;
}
.contact-submit {
border: 1px solid var(--rn-accent) !important;
background: var(--rn-accent) !important;
border-radius: 3px !important;
padding: .5em 2.6em !important;
transition: background-color .35s ease, box-shadow .35s ease, transform .35s ease !important;
}
.contact-submit,
.contact-submit .wpcf7-submit,
.contact-submit i {
color: #fff !important;
}
.contact-submit .wpcf7-submit {
font-family: var(--rn-serif-jp) !important;
letter-spacing: .14em !important;
}
.contact-submit:hover {
background: var(--rn-deep) !important;
box-shadow: 0 16px 30px -14px rgba(var(--rn-accent-rgb), .55) !important;
transform: translateY(-2px);
}
input.wpcf7-submit {
background: var(--rn-accent) !important;
border-radius: 3px !important;
font-family: var(--rn-serif-jp) !important;
letter-spacing: .12em !important;
}
input.wpcf7-submit:hover {
background: var(--rn-deep) !important;
}
/* ----------------------------------------------------------------------------
11-e. お問合せ後の流れ（エレガントな縦型タイムライン）
既存の