でもう1段包むことがあり（別件で
display:contentsにして無効化している）、その場合は直下の要素ではなく
さらにその中の要素が実質のコンテンツになるため、両方のパターンに対応する */
.eam-page .eam-prose .wp-block-group[class*="is-style-eam-full"] > *,
.eam-page .eam-prose .wp-block-group[class*="is-style-eam-full"] > .wp-block-group__inner-container > *{
max-width:960px;margin-left:auto;margin-right:auto;
}
/* テーマカラー背景（フル幅） */
.eam-page .eam-prose .wp-block-group.is-style-eam-full-brand{
background:var(--pink);color:#171310;
}
.eam-page .eam-prose .wp-block-group.is-style-eam-full-brand h1,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-brand h2,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-brand h3,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-brand h4,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-brand h5,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-brand h6,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-brand strong,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-brand b{
color:#171310 !important;
}
.eam-page .eam-prose .wp-block-group.is-style-eam-full-brand::after{content:none;}
/* テーマカラー薄め背景（フル幅） */
.eam-page .eam-prose .wp-block-group.is-style-eam-full-brand-light{
background:var(--bg-faint);color:var(--ink);
}
/* ダーク背景（フル幅） */
.eam-page .eam-prose .wp-block-group.is-style-eam-full-dark{
background:#111111;color:#ffffff;
}
.eam-page .eam-prose .wp-block-group.is-style-eam-full-dark h1,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-dark h2,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-dark h3,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-dark h4,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-dark h5,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-dark h6,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-dark strong,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-dark b{
color:#ffffff !important;
}
.eam-page .eam-prose .wp-block-group.is-style-eam-full-dark a{color:var(--pink-bright);}
/* ライトグレー背景（フル幅） */
.eam-page .eam-prose .wp-block-group.is-style-eam-full-light{
background:#eeece7;color:#2a2622;
}
/* ホワイト背景（フル幅） */
.eam-page .eam-prose .wp-block-group.is-style-eam-full-white{
background:#ffffff;color:#2a2622;
}
/* グラデーション背景（フル幅） */
.eam-page .eam-prose .wp-block-group.is-style-eam-full-gradient{
background:linear-gradient(135deg,var(--pink) 0%,var(--pink-bright) 100%);
color:#171310;
}
.eam-page .eam-prose .wp-block-group.is-style-eam-full-gradient h1,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-gradient h2,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-gradient h3,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-gradient h4,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-gradient h5,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-gradient h6,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-gradient strong,
.eam-page .eam-prose .wp-block-group.is-style-eam-full-gradient b{
color:#171310 !important;
}
/* ============================================================
* 固定ページ用パターン化されたTOPセクション
* （WHY / COURSE / Before-After / CONCEPT / FLOW）は、TOPページでは
*
直下に置かれる前提で全幅デザインになっているため、固定ページの
* 本文（幅が制限された.eam-prose内）に挿入されたときも同じように
* 画面いっぱいに突き抜けるようにする。VOICE（.eam-voice）は単体で
* 全幅breakoutを持っているためここでは対象外。
* ============================================================ */
.eam-page .eam-prose .eam-strength,
.eam-page .eam-prose .eam-courses,
.eam-page .eam-prose .eam-ba,
.eam-page .eam-prose .eam-concept,
.eam-page .eam-prose .eam-flow,
.eam-page .eam-prose .eam-section-head,
.eam-page .eam-prose .eam-section-head-dark,
.eam-page .eam-prose .eam-section-head-white,
.eam-page .eam-prose .eam-reservebanner{
position:relative;
left:50%;
margin-left:-50vw;
width:100vw;
max-width:100vw;
box-sizing:border-box;
}
/* 予約バナー（eam/reservation-banner）：背景画像フルブリード＋中央寄せテキスト＋ボタン */
.eam-reservebanner{
position:relative;min-height:420px;
display:flex;align-items:center;justify-content:center;
overflow:hidden;text-align:center;
}
.eam-reservebanner__media{position:absolute;inset:0;}
.eam-reservebanner__media img{position:absolute !important;inset:0;width:100% !important;height:100% !important;object-fit:cover;display:block;margin:0;max-width:none;}
.eam-reservebanner__media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);}
.eam-reservebanner__panel{position:relative !important;z-index:2 !important;padding:60px 24px;max-width:640px;margin:0 auto;}
.eam-reservebanner__label{display:block;font-family:var(--sans);font-weight:700;letter-spacing:.26em;font-size:13px;text-transform:uppercase;color:#ffffff;margin-bottom:14px;}
/* 環境によって wp:paragraph のカスタムclassNameが保存時に落ちることがあるため、
クラスに頼らず「パネル内の最初の段落＝ラベル」という位置関係でも同じ見た目になるようにする */
.eam-reservebanner__panel p:first-of-type{
display:block;font-family:var(--sans);font-weight:700;letter-spacing:.26em;
font-size:13px;text-transform:uppercase;color:#ffffff !important;margin-bottom:14px;
}
.eam-page .eam-prose .eam-reservebanner__title{
color:#ffffff !important;font-family:var(--sans);font-weight:700;
font-size:clamp(28px,3.4vw,48px);line-height:1.25;letter-spacing:.04em;
text-shadow:0 4px 20px rgba(0,0,0,.5);margin:0 0 24px;padding-bottom:20px;
}
/* ビアンカクリニック参考：見出し下の白い区切り線（本文用h2::afterのゴールドを上書き） */
.eam-page .eam-prose .eam-reservebanner__title::after{
left:50%;right:auto;
transform:translateX(-50%);
width:56px;
background:rgba(255,255,255,.85);
}
.eam-reservebanner__badge{
display:inline-block;border:1px solid #ffffff;color:#ffffff;
font-size:16px;padding:8px 22px;border-radius:2px;margin:0 0 24px;
}
.eam-reservebanner .wp-block-buttons{justify-content:center;}
/* 見出し（太字幾何学サンセリフ英字＋サブタイトル）パターン（eam/gradient-heading）
文字色は白背景＝黒／黒背景＝白を想定した固定色（黒がデフォルト）。
見出しブロックを選択し、右サイドバーの「色」→「テキスト」から白に変更すれば、
黒背景セクションに置いたときもそのまま読める配色に切り替えられる */
.eam-gradient-head{text-align:center;padding:40px 24px 8px;}
.eam-page .eam-prose .eam-gradient-head .eam-gradient-title{
font-family:'Poppins',var(--sans);
font-weight:800;
font-size:clamp(36px,6vw,64px);
letter-spacing:.02em;
text-transform:uppercase;
line-height:1.2;
margin:0 0 16px;
padding-bottom:0;
color:#171310;
}
.eam-page .eam-prose .eam-gradient-head .eam-gradient-title::after{content:none !important;}
.eam-gradient-subtitle{
font-family:var(--sans);
font-size:16px;
font-weight:500;
color:#4a5568;
letter-spacing:.02em;
margin-bottom:0;
}
/* 環境によってwp:paragraph／wp:headingのカスタムclassNameが保存時に落ちることがあるため、
クラスに頼らず「見出しブロック内の位置関係」でも同じ見た目になるようにする */
.eam-page .eam-prose .eam-gradient-head h2{
font-family:'Poppins',var(--sans);font-weight:800;
font-size:clamp(36px,6vw,64px);letter-spacing:.02em;text-transform:uppercase;
line-height:1.2;margin:0 0 16px;padding-bottom:0;
color:#171310;
}
.eam-page .eam-prose .eam-gradient-head h2::after{content:none !important;}
.eam-gradient-head p:first-of-type{
font-family:var(--sans);font-size:16px;font-weight:500;color:#4a5568;letter-spacing:.02em;
margin-bottom:0;
}
/* セクション見出し（透過・本文入り）パターン専用：背景色は指定せず、
ページ本体の背景（白）をそのまま透かす。他の2パターンと横幅を揃えるための余白のみ付与 */
.eam-section-head{
padding:74px 0;
}
/* セクション見出し（ダーク背景）パターン専用：FLOWと同じ黒グラデーション背景 */
.eam-section-head-dark{
background:linear-gradient(120deg,#141414,#1c1c1c);
padding:74px 0;
}
/* セクション見出し（白背景）パターン専用：COURSE等と同じ白背景 */
.eam-section-head-white{
background:#ffffff;
padding:74px 0;
}
/* ダーク背景パターン内の本文は白文字にする（そのままだと本文は基本の黒文字を継承してしまうため） */
.eam-page .eam-prose .eam-section-head-dark p:not(.eam-eyebrow){
color:rgba(255,255,255,.85);
}
/* グループブロックに「レイアウトタイプ」が指定されていない場合、
WordPressは中身を でもう1段
包んでしまうことがある（サイト側のWordPress/ブロックエディターの挙動）。
このラッパーが挟まると、display:grid / flex の対象が「本来並べたいカード」
ではなく「ラッパーdiv1個」になってしまい、カードが縦積みで崩れて見える。
ラッパー自体を display:contents にして無かったことにし、
その中の要素が親（.eam-courses__grid 等）に直接並ぶようにする。 */
.eam-page .eam-prose .wp-block-group__inner-container{
display:contents;
}
/* エディター内でもプレビュー表示（editor-style用） */
.editor-styles-wrapper .wp-block-group.is-style-eam-full-brand{background:var(--pink,#c9a96a);color:#171310;padding:40px 20px;}
.editor-styles-wrapper .wp-block-group.is-style-eam-full-brand-light{background:#f6f5f3;color:#2a2622;padding:40px 20px;}
.editor-styles-wrapper .wp-block-group.is-style-eam-full-dark{background:#111;color:#fff;padding:40px 20px;}
.editor-styles-wrapper .wp-block-group.is-style-eam-full-light{background:#eeece7;color:#2a2622;padding:40px 20px;}
.editor-styles-wrapper .wp-block-group.is-style-eam-full-white{background:#ffffff;color:#2a2622;padding:40px 20px;border:1px solid #e8e4de;}
.editor-styles-wrapper .wp-block-group.is-style-eam-full-gradient{background:linear-gradient(135deg,#c9a96a,#ddc48f);color:#171310;padding:40px 20px;}
/* ============================================================
セクション背景（装飾配置の基準となる position:relative）
============================================================ */
.eam-about,.eam-concept,.eam-courses,.eam-strength,.eam-ba,.eam-artist,.eam-voice,.eam-flow,.eam-faq,.eam-access,.eam-bottomcta{
position:relative;
}
/* ============================================================
Q&Aブロック（Swellの「Q&A」ブロックのような質問・回答セット）
固定ページのブロックエディターで挿入する eam/qa-block パターン用。
汎用タグではなく eam-qa- 接頭辞のクラスのみを使うため、
フロント表示にもブロックエディター内プレビューにもそのまま適用される。
============================================================ */
.eam-qa-block{
display:flex;flex-direction:column;
margin:1.8em 0;
border:1px solid #333;
border-radius:12px;
overflow:hidden;
background:#171310;
}
/* WordPressコアの .wp-block-group.is-layout-flow（グループブロックの既定レイアウト）や
.is-layout-flex 側の詳細度に負けないよう、詳細度を最大限上げて確実に横並びにする */
.eam-qa-block.eam-qa-block .eam-qa-block__row.eam-qa-block__row{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:flex-start !important;
gap:16px;
padding:20px 22px;
margin:0;
}
.eam-qa-block__row--q{
border-bottom:1px dashed #3a3a3a;
position:relative;
padding-right:56px;
cursor:pointer;
}
.eam-qa-block__row--q::after{
content:"+";
position:absolute;
right:22px;top:18px;
font-size:22px;
font-weight:300;
line-height:1;
color:#eeece7;
transition:transform .25s ease;
}
.eam-qa-block.is-open .eam-qa-block__row--q::after{
transform:rotate(45deg);
}
.eam-qa-block__row--a{
background:#1c1c1c;
overflow:hidden;
max-height:0;
transition:max-height .3s ease, padding .3s ease;
}
.eam-qa-block.eam-qa-block .eam-qa-block__row--a.eam-qa-block__row--a{
padding-top:0 !important;
padding-bottom:0 !important;
}
.eam-qa-block.is-open.eam-qa-block.is-open .eam-qa-block__row--a.eam-qa-block__row--a{
padding-top:20px !important;
padding-bottom:20px !important;
}
.eam-qa-block__badge{
flex:0 0 auto;
width:32px;height:32px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--heading);
font-weight:700;
font-size:16px;
line-height:1;
margin:0;
}
.eam-qa-block__row--q .eam-qa-block__badge{
position:relative;
overflow:hidden;
background:#ffffff;
color:#171310;
animation:eamQaGlow 2.6s ease-in-out infinite;
}
.eam-qa-block__row--q .eam-qa-block__badge::after{
content:"";
position:absolute;
top:-60%;left:-60%;
width:40%;height:220%;
background:rgba(255,255,255,.9);
transform:rotate(25deg);
animation:eamQaShine 3.2s ease-in-out infinite;
}
@keyframes eamQaGlow{
0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.4);}
50%{box-shadow:0 0 12px 4px rgba(255,255,255,.4);}
}
@keyframes eamQaShine{
0%{left:-60%;}
22%{left:130%;}
100%{left:130%;}
}
@media (prefers-reduced-motion:reduce){
.eam-qa-block__row--q .eam-qa-block__badge,
.eam-qa-block__row--q .eam-qa-block__badge::after{
animation:none;
}
}
.eam-qa-block__row--a .eam-qa-block__badge{
background:transparent;
border:2px solid #eeece7;
color:#eeece7;
}
.eam-qa-block__content{
flex:1 1 auto;
min-width:0;
padding-top:4px;
}
.eam-qa-block__text{
margin:0 0 1em;
font-size:15px;
line-height:1.9;
color:#eeece7;
}
.eam-qa-block__text:last-child{
margin-bottom:0;
}
.eam-qa-block__row--q .eam-qa-block__text{
font-weight:700;
}
/* ============================================================
症例写真スライダー（固定ページ用パターン：eam/case-slider）
TOPページの Before/After と同じカルーセル（.eam-carousel--loop）を
固定ページの本文でも使えるようにしたもの。
============================================================ */
/* .eam-casecard は figure.wp-block-image 自身に付く（画像ブロック＝スライド1枚） */
.eam-casecard{margin:0;}
.eam-page .eam-prose .eam-casecard img,
.eam-casecard img{
display:block;width:100%;
aspect-ratio:1 / 1;object-fit:cover;
border-radius:8px;
box-shadow:var(--shadow-sm);
}
/* ============================================================
固定ページ本文エリア：読みやすさ優先でライト配色に戻す
ページ上部の .eam-pagehero（バナー）・.eam-breadcrumb はダークのまま。
本文（.eam-pagebody / .eam-page .eam-prose 以下）と、投稿一覧・検索・
404はここでライト配色に上書きする。ページ内で黒・グレーの帯を使いたい
場合は、グループブロックのスタイルから
「ホワイト／ライトグレー／ブラック背景（フル幅）」を選んで挿入できる。
============================================================ */
.eam-pagebody{background:#ffffff;}
.eam-page .eam-prose{color:#2a2622;}
.eam-page .eam-prose h2,
.eam-page .eam-prose h3,
.eam-page .eam-prose h5,
.eam-page .eam-prose h6,
.eam-page .eam-prose strong,
.eam-page .eam-prose b{color:#2a2622;}
/* .eam-eyebrow は元々var(--ink)（ダーク背景前提の色）のため、そのままだと
固定ページ（白背景）で見出しパターン単体を挿入したときに白文字＝見えなくなる。
個別セクションのクラス（.eam-voice .eam-eyebrow 等）が無い場所でも
読める色をデフォルトにしておく */
.eam-page .eam-prose .eam-eyebrow{color:#171310;}
/* ただし --light 修飾（CONCEPT等、暗い背景画像に重ねる用）は白のまま維持する */
.eam-page .eam-prose .eam-eyebrow.eam-eyebrow--light{color:rgba(255,255,255,.85) !important;}
.eam-page .eam-prose .eam-h2--light{color:#ffffff !important;}
.eam-page .eam-prose mark{background:#eeece7;color:var(--pink-deep);}
.eam-page .eam-prose blockquote{background:#f6f5f3;color:#8a8078;}
.eam-page .eam-prose figcaption{color:#8a8078;}
.eam-page .eam-prose p > img,
.eam-page .eam-prose figure img,
.eam-page .eam-prose .wp-block-image img{box-shadow:0 4px 14px rgba(0,0,0,.08);}
.eam-page .eam-prose table{background:#ffffff;}
.eam-page .eam-prose th,
.eam-page .eam-prose td{border-color:#e8e4de;}
.eam-page .eam-prose th{background:#f6f5f3;color:#2a2622;}
.eam-page .eam-prose hr,
.eam-page .eam-prose .wp-block-separator{border-top-color:#e8e4de;}
.eam-page .eam-prose code,
.eam-page .eam-prose pre{background:#f6f5f3;color:#2a2622;}
.eam-entry{border-bottom-color:#e8e4de;}
.eam-entry__title a{color:#2a2622;}
.eam-entry__meta{color:#8a8078;}
.eam-entry__content{color:#2a2622;}
.eam-single__meta{color:#8a8078;}
.eam-postnav{border-top-color:#e8e4de;}
.eam-noposts{color:#2a2622;}
.eam-searchform .search-field,
.eam-searchform input[type="search"],
.eam-searchform input[type="text"]{background:#ffffff;color:#2a2622;border-color:#e8e4de;}
.eam-pagination a,
.eam-pagination .current,
.eam-pagination .page-numbers{color:#2a2622;border-color:#e8e4de;}
.eam-pagination a:hover{background:#f6f5f3;}