/*
* クリニックのサイトの見た目（pw/04-design-mock.html 第6版）。gs-clinic-design.php が clinic.grandast.co.jp だけで読む。
* ブロックの「追加 CSS クラス」（gs-hero・gs-sec など）で効く。表のページとブロックの編集画面の両方で読む。
* 2026-11-06 0.1.0（Session 24。Claude）。英字の小見出し・丸い枠のラベル・左だけの線・見出しの下の短い線は使わない。
*/
:root {
--gs-navy: #072540;
--gs-navy-2: #0c3157;
--gs-gold: #e5a614;
--gs-gold-ink: #8a5f00;
--gs-sky: #f2f5f8;
--gs-cream: #fbfaf2;
--gs-line: #dde3ea;
--gs-ink: #16273b;
--gs-ink-2: #4d5d6f;
--gs-deep: #041a2e;
--gs-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "BIZ UDPMincho", "MS PMincho", serif;
--gs-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
--gs-pad: 20px;
--gs-width: 1080px;
}
@media (min-width: 900px) {
:root { --gs-pad: 40px; }
}
/* ───────── サイト全体の文字 ───────── */
body.gs-clinic,
.editor-styles-wrapper {
font-family: var(--gs-sans);
color: var(--gs-ink);
line-height: 1.9;
letter-spacing: .03em;
}
/* 見出しだけ意味のまとまりで折り返す（本文は行の端まで詰める。本文にも効かせると、行の途中で早めに折れて見える） */
body.gs-clinic :is(h1, h2, h3, summary),
.editor-styles-wrapper :is(h1, h2, h3, summary) {
word-break: auto-phrase;
}
/* トップのページ: テーマの本文の上下の余白をなくす */
body.gs-top .wp-site-blocks > main,
body.gs-top .wp-block-post-content {
margin-top: 0;
margin-bottom: 0;
}
/* 全幅の帯（gs-hero・gs-news・gs-fc・gs-sec・gs-ai）は、帯どうしの間をあけない */
body :is(.gs-hero, .gs-news, .gs-fc, .gs-sec, .gs-ai) {
margin-top: 0;
margin-bottom: 0;
}
/* ───────── ボタン ───────── */
.gs-btns,
body .gs-sec .wp-block-buttons,
body .gs-ai .wp-block-buttons {
gap: 12px;
}
body .gs-btn .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0 30px;
border: 0;
border-radius: 2px;
font-family: var(--gs-sans);
font-size: 15px;
font-weight: 700;
letter-spacing: .04em;
line-height: 1.5;
text-decoration: none;
transition: background-color .2s, color .2s;
}
body .gs-btn.gs-btn--gold .wp-block-button__link { background: var(--gs-gold); color: var(--gs-navy); }
body .gs-btn.gs-btn--gold .wp-block-button__link:hover { background: #f0b52a; }
body .gs-btn.gs-btn--navy .wp-block-button__link { background: var(--gs-navy); color: #fff; }
body .gs-btn.gs-btn--navy .wp-block-button__link:hover { background: var(--gs-navy-2); }
body .gs-btn.gs-btn--white .wp-block-button__link { background: #fff; color: var(--gs-navy); min-height: 46px; padding: 0 22px; font-size: 14px; }
body .gs-btn.gs-btn--white .wp-block-button__link:hover { background: #e9eef4; }
body .gs-btn.gs-btn--ghost .wp-block-button__link { background: transparent; color: #fff; border: 1px solid currentColor; }
body .gs-btn.gs-btn--ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, .1); }
body .gs-btn.gs-btn--arrow .wp-block-button__link::after {
content: "→";
display: inline-block;
margin-left: 10px;
transition: transform .25s;
}
body .gs-btn.gs-btn--arrow .wp-block-button__link:hover::after { transform: translateX(4px); }
body .gs-btn .wp-block-button__link:focus-visible { outline: 2px solid var(--gs-gold); outline-offset: 3px; }
@media (max-width: 480px) {
body .gs-btns .wp-block-button,
body .gs-cta .wp-block-button { flex: 1 1 100%; }
body .gs-btns .wp-block-button__link,
body .gs-cta .wp-block-button__link { width: 100%; }
}
/* 文の中のリンク（矢印つき） */
body .gs-link a,
body .gs-partner__note a {
font-weight: 700;
color: var(--gs-navy);
text-decoration: none;
border-bottom: 1px solid var(--gs-navy);
padding-bottom: 2px;
}
body .gs-link a::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform .25s; }
body .gs-link a:hover::after { transform: translateX(3px); }
body .gs-partner__note a::after { content: "↗"; display: inline-block; margin-left: 6px; transition: transform .25s; }
body .gs-partner__note a:hover::after { transform: translate(2px, -2px); }
/* ───────── 節（全幅の帯の中を 1080px にそろえる。X-T9 は本文の枠が 1100px で、全幅の帯はそこから画面の幅に広げるので、余白は画面の幅〔100vw〕を基準に計算する） ───────── */
body .gs-sec {
padding: 72px max(var(--gs-pad), calc((100vw - var(--gs-width)) / 2));
}
@media (min-width: 900px) {
body .gs-sec { padding-top: 120px; padding-bottom: 120px; }
}
body .gs-sec > * { margin-top: 0; margin-bottom: 0; }
body .gs-sec h2.wp-block-heading {
font-family: var(--gs-serif);
font-size: 28px;
line-height: 1.5;
font-weight: 600;
letter-spacing: .08em;
color: var(--gs-navy);
margin: 0 0 20px;
}
@media (min-width: 900px) {
body .gs-sec h2.wp-block-heading { font-size: 38px; }
}
body .gs-sec .gs-lead { color: var(--gs-ink-2); max-width: 46em; margin: 0; }
/* ───────── 最初の画面（カバー） ───────── */
body .gs-hero.wp-block-cover {
min-height: 560px !important;
padding: 140px max(var(--gs-pad), calc((100vw - var(--gs-width)) / 2)) 56px;
align-items: flex-end;
justify-content: flex-start;
overflow: hidden;
color: #fff;
background: #0b2238;
}
@media (min-width: 900px) {
body .gs-hero.wp-block-cover { min-height: 680px !important; padding-top: 120px; padding-bottom: 96px; }
}
body .gs-hero .wp-block-cover__image-background { object-position: 50% 30%; }
body .gs-hero .wp-block-cover__background {
opacity: 1 !important;
background: linear-gradient(180deg, rgba(4, 26, 46, .15) 0%, rgba(4, 26, 46, .55) 45%, rgba(4, 26, 46, .88) 100%) !important;
}
@media (min-width: 900px) {
body .gs-hero .wp-block-cover__background {
background: linear-gradient(90deg, rgba(4, 26, 46, .86) 0%, rgba(4, 26, 46, .6) 42%, rgba(4, 26, 46, .05) 75%) !important;
}
}
body .gs-hero .wp-block-cover__inner-container { width: 100%; max-width: none; margin: 0; color: #fff; }
body .gs-hero .wp-block-cover__inner-container > * { margin-top: 0; margin-bottom: 0; }
body .gs-hero h1.wp-block-heading {
font-family: var(--gs-serif);
font-size: clamp(26px, 8vw, 60px);
line-height: 1.45;
font-weight: 600;
letter-spacing: .08em;
color: #fff;
margin: 0 0 24px;
}
body .gs-hero .gs-hero__sub {
display: block;
font-family: var(--gs-sans);
font-size: 15px;
font-weight: 700;
letter-spacing: .24em;
line-height: 1.6;
margin-top: 18px;
color: rgba(255, 255, 255, .92);
}
@media (min-width: 900px) {
body .gs-hero .gs-hero__sub { font-size: 19px; margin-top: 22px; }
}
body .gs-hero .gs-hero__lead { max-width: 34em; color: rgba(255, 255, 255, .92); margin: 0 0 30px; }
/* ───────── お知らせ ───────── */
body .gs-news {
padding: 18px max(var(--gs-pad), calc((100vw - var(--gs-width)) / 2));
border-bottom: 1px solid var(--gs-line);
font-size: 14px;
}
body .gs-news > * { margin: 0; }
body .gs-news strong { color: var(--gs-navy); margin-right: 20px; }
/* ───────── 3つの特徴（第6版: 写真を暗く沈めた全幅の帯〔カバー〕に、白い文字で3列。スマホは縦に3つ） ───────── */
body .gs-fc.wp-block-cover {
min-height: 0;
padding: 72px max(var(--gs-pad), calc((100vw - var(--gs-width)) / 2));
align-items: flex-start;
overflow: hidden;
color: #fff;
background: #0b2238;
}
body .gs-fc .wp-block-cover__image-background { object-position: 50% 40%; }
body .gs-fc .wp-block-cover__background {
opacity: 1 !important;
background: linear-gradient(180deg, rgba(4, 26, 46, .78) 0%, rgba(4, 26, 46, .88) 100%) !important;
}
body .gs-fc .wp-block-cover__inner-container { width: 100%; max-width: none; margin: 0; color: #fff; }
body .gs-fc .wp-block-cover__inner-container > * { margin-top: 0; margin-bottom: 0; }
body .gs-fc h2.wp-block-heading {
font-family: var(--gs-serif);
font-size: 28px;
line-height: 1.5;
font-weight: 600;
letter-spacing: .08em;
color: #fff;
}
body .gs-fc .gs-fc__cols { display: grid; grid-template-columns: 1fr; gap: 0; margin: 40px 0 0; border-top: 1px solid rgba(255, 255, 255, .45); }
body .gs-fc .gs-fc__cols > .wp-block-column {
display: grid;
grid-template-columns: 52px 1fr;
column-gap: 12px;
align-content: start;
margin: 0;
padding: 26px 0 28px;
border-bottom: 1px solid rgba(255, 255, 255, .18);
}
/* 余白を消す指定は弱くしておく（番号・見出しの下の余白を、下の指定で付けられるように） */
body .gs-fc :where(.gs-fc__cols > .wp-block-column > *) { margin: 0; }
body .gs-fc .gs-fc__n { grid-row: 1 / span 2; font-family: var(--gs-serif); font-size: 28px; line-height: 1.15; letter-spacing: .1em; color: rgba(255, 255, 255, .62); }
body .gs-fc h3.wp-block-heading { grid-column: 2; margin-top: 0; margin-bottom: 10px; font-family: var(--gs-serif); font-size: 21px; line-height: 1.55; font-weight: 600; letter-spacing: .05em; color: #fff; }
body .gs-fc .gs-fc__cols > .wp-block-column > p:not(.gs-fc__n) { grid-column: 2; font-size: 14.5px; line-height: 1.85; color: rgba(255, 255, 255, .86); }
@media (min-width: 900px) {
body .gs-fc.wp-block-cover { padding-top: 120px; padding-bottom: 120px; }
body .gs-fc h2.wp-block-heading { font-size: 38px; }
body .gs-fc .gs-fc__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; }
body .gs-fc .gs-fc__cols > .wp-block-column { display: block; padding: 36px 36px 0; border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, .18); }
body .gs-fc .gs-fc__cols > .wp-block-column:first-child { padding-left: 0; border-left: 0; }
body .gs-fc .gs-fc__n { display: block; font-size: 48px; margin-bottom: 26px; }
body .gs-fc h3.wp-block-heading { font-size: 24px; margin-bottom: 16px; }
body .gs-fc .gs-fc__cols > .wp-block-column > p:not(.gs-fc__n) { font-size: 15px; }
}
/* ───────── サービス（画像なしのブロック。スマホは2列でタイトルだけ） ───────── */
body .gs-svc { background: var(--gs-sky); }
body .gs-svc .gs-svc__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 36px;
}
body .gs-svc__grid > * { margin: 0; }
body .gs-sv {
position: relative;
display: flex;
flex-direction: column;
padding: 16px 14px 34px;
background: #fff;
border: 1px solid #d3dce6;
transition: transform .35s, border-color .35s, box-shadow .35s;
}
body .gs-sv > * { margin: 0; }
body .gs-sv .gs-sv__cat { font-size: 11.5px; line-height: 1.6; color: var(--gs-ink-2); letter-spacing: .08em; margin-bottom: 6px; }
body .gs-sv h3.wp-block-heading { font-family: var(--gs-serif); font-size: 16px; line-height: 1.55; font-weight: 600; letter-spacing: .03em; color: var(--gs-navy); }
body .gs-sv h3 a { color: inherit; text-decoration: none; }
body .gs-sv h3 a::before { content: ""; position: absolute; inset: 0; }
body .gs-sv h3 a:focus-visible { outline: none; }
body .gs-sv:focus-within { outline: 2px solid var(--gs-navy); outline-offset: 2px; }
body .gs-sv p:not(.gs-sv__cat) { word-break: auto-phrase; display: none; font-size: 14px; line-height: 1.75; color: var(--gs-ink-2); margin-top: 10px; }
body .gs-sv::after { content: "→"; position: absolute; right: 14px; bottom: 8px; color: var(--gs-navy); transition: transform .25s; }
body .gs-sv:hover { transform: translateY(-4px); border-color: var(--gs-navy); box-shadow: 0 14px 30px rgba(7, 37, 64, .10); }
body .gs-sv:hover::after { transform: translateX(4px); }
@media (min-width: 600px) {
body .gs-svc .gs-svc__grid { gap: 14px; }
body .gs-sv { padding: 24px 22px 40px; }
body .gs-sv h3.wp-block-heading { font-size: 18px; }
body .gs-sv p:not(.gs-sv__cat) { display: block; }
}
@media (min-width: 1100px) {
body .gs-svc .gs-svc__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
body .gs-sv h3.wp-block-heading { font-size: 17.5px; }
}
/* ───────── 無料ツールの帯（紺の地） ───────── */
body .gs-tools { background: var(--gs-navy); color: #fff; }
body .gs-tools h2.wp-block-heading { color: #fff; }
body .gs-tools .gs-lead { color: rgba(255, 255, 255, .85); }
body .gs-tools .gs-tools__grid { gap: 20px; margin-top: 36px; }
body .gs-tl {
position: relative;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .2);
transition: background-color .35s, border-color .35s;
}
body .gs-tl:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); }
body .gs-tl > * { margin: 0; }
body .gs-tl .gs-tl__ph { aspect-ratio: 16 / 9; overflow: hidden; background: #fff; margin: 0; }
body .gs-tl .gs-tl__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 1.2s cubic-bezier(.2, .6, .2, 1); }
body .gs-tl:hover .gs-tl__ph img { transform: scale(1.04); }
body .gs-tl .gs-tl__b { display: grid; gap: 6px; padding: 22px 22px 24px; }
body .gs-tl .gs-tl__b > * { margin: 0; }
body .gs-tl .gs-tl__sub { font-size: 13px; color: rgba(255, 255, 255, .7); letter-spacing: .06em; }
body .gs-tl h3.wp-block-heading { font-family: var(--gs-serif); font-size: 22px; line-height: 1.5; font-weight: 600; letter-spacing: .04em; color: #fff; }
body .gs-tl .gs-tl__b > p:not(.gs-tl__sub) { margin: 4px 0 14px; color: rgba(255, 255, 255, .88); font-size: 15px; }
body .gs-tl .wp-block-button__link::before { content: ""; position: absolute; inset: 0; }
@media (min-width: 900px) {
body .gs-tools .gs-tools__grid { gap: 28px; margin-top: 48px; }
body .gs-tl .gs-tl__b { padding: 28px 30px 30px; }
}
/* ───────── 院内の AI（写真と文） ───────── */
body .gs-ai.wp-block-media-text { background: #fff; grid-template-columns: 100% !important; }
body .gs-ai .wp-block-media-text__media { position: relative; min-height: 280px; overflow: hidden; grid-column: 1; grid-row: 1; align-self: stretch; }
body .gs-ai .wp-block-media-text__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
body .gs-ai .wp-block-media-text__content { grid-column: 1; grid-row: 2; padding: 56px var(--gs-pad) 64px; }
body .gs-ai .wp-block-media-text__content > * { margin-top: 0; margin-bottom: 0; }
body .gs-ai h2.wp-block-heading {
font-family: var(--gs-serif);
font-size: 28px;
line-height: 1.5;
font-weight: 600;
letter-spacing: .08em;
color: var(--gs-navy);
margin-bottom: 20px;
}
body .gs-ai .wp-block-media-text__content > p { margin-bottom: 1em; }
body .gs-ai .gs-ai__pts { margin: 0 0 24px; padding-left: 1.2em; }
body .gs-ai .gs-ai__pts li { margin-bottom: 8px; }
body .gs-ai .gs-ai__uses { margin: 0 0 28px; font-size: 14px; color: var(--gs-ink-2); border-top: 1px solid var(--gs-line); border-bottom: 1px solid var(--gs-line); padding: 14px 0; }
body .gs-ai .gs-ai__uses strong { color: var(--gs-navy); margin-right: 8px; }
@media (min-width: 900px) {
body .gs-ai.wp-block-media-text { grid-template-columns: 1fr 1fr !important; }
body .gs-ai .wp-block-media-text__media { grid-column: 2; grid-row: 1; min-height: 100%; }
body .gs-ai .wp-block-media-text__content { grid-column: 1; grid-row: 1; padding: 120px 64px 120px max(40px, calc((100vw - var(--gs-width)) / 2)); }
body .gs-ai h2.wp-block-heading { font-size: 38px; }
}
/* ───────── サービス提供体制 ───────── */
body .gs-partner { background: var(--gs-cream); }
body .gs-partner .gs-partner__cols { gap: 28px; margin: 0; }
body .gs-partner .wp-block-column > * { margin-top: 0; margin-bottom: 0; }
body .gs-partner .gs-partner__logo { background: #fff; width: 100%; max-width: 230px; aspect-ratio: 1; display: grid; place-items: center; margin: 0; }
body .gs-partner .gs-partner__logo img { width: 86%; height: auto; }
body .gs-partner .wp-block-column > p { line-height: 2; margin-bottom: 1em; }
body .gs-partner .gs-partner__note { font-size: 14px; line-height: 1.9; color: var(--gs-ink-2); border-top: 1px solid #e3e0d2; padding-top: 18px; margin: 28px 0 0; }
body .gs-partner .gs-partner__note a { display: inline-block; margin-top: 6px; }
@media (min-width: 900px) {
body .gs-partner .gs-partner__cols { gap: 64px; }
body .gs-partner h2.wp-block-heading { font-size: 32px; white-space: nowrap; }
body .gs-partner .wp-block-column:last-child { padding-top: 76px; }
}
/* ───────── 開業ガイド ───────── */
body .gs-guide .gs-guide__cols { gap: 40px; margin-top: 40px; }
body .gs-guide .wp-block-column > * { margin-top: 0; margin-bottom: 0; }
body .gs-guide h3.wp-block-heading {
font-family: var(--gs-serif);
font-size: 19px;
font-weight: 600;
color: var(--gs-navy);
padding-bottom: 12px;
border-bottom: 2px solid var(--gs-navy);
margin: 0 0 6px;
}
body .gs-guide .gs-guide__list { list-style: none; margin: 0; padding: 0; }
body .gs-guide .gs-guide__list li { padding: 12px 0; border-bottom: 1px solid var(--gs-line); font-size: 15px; margin: 0; }
body .gs-guide .gs-guide__list a { color: inherit; text-decoration: none; display: block; }
body .gs-guide .gs-guide__list a:hover { color: var(--gs-gold-ink); }
body .gs-guide .gs-guide__steps { counter-reset: gs-step; }
body .gs-guide .gs-guide__steps li::before {
counter-increment: gs-step;
content: counter(gs-step, decimal-leading-zero);
font-family: var(--gs-serif);
color: var(--gs-gold-ink);
margin-right: 10px;
}
body .gs-guide .gs-guide__specs { list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-wrap: wrap; }
body .gs-guide .gs-guide__specs li { font-size: 15px; padding: 6px 0; margin: 0; }
body .gs-guide .gs-guide__specs li:not(:last-child)::after { content: "／"; color: #b4bdc8; margin: 0 6px; }
@media (min-width: 900px) {
body .gs-guide .gs-guide__cols { gap: 48px; }
}
/* ───────── セミナー・コラム ───────── */
body .gs-info { background: var(--gs-sky); }
body .gs-info .gs-info__cols { gap: 48px; margin: 0; }
body .gs-info .wp-block-column > * { margin-top: 0; margin-bottom: 0; }
body .gs-info h3.wp-block-heading { font-family: var(--gs-serif); font-size: 21px; font-weight: 600; color: var(--gs-navy); margin: 0 0 16px; }
body .gs-info .gs-semi__dl { list-style: none; margin: 0 0 20px; padding: 0; font-size: 14px; }
body .gs-info .gs-semi__dl li { margin: 0 0 4px; display: grid; grid-template-columns: 5em 1fr; gap: 12px; }
body .gs-info .gs-semi__dl strong { color: var(--gs-navy); }
body .gs-info .gs-semi__org { font-size: 12.5px; color: var(--gs-ink-2); margin-top: 14px; }
body .gs-info .gs-cols__list { list-style: none; margin: 0 0 20px; padding: 0; }
body .gs-info .gs-cols__list li { display: flex; flex-direction: column-reverse; padding: 12px 0; border-bottom: 1px solid #c9d3de; margin: 0; }
body .gs-info .gs-cols__list .wp-block-latest-posts__post-title { font-weight: 600; font-size: 15px; line-height: 1.6; text-decoration: none; color: var(--gs-ink); }
body .gs-info .gs-cols__list .wp-block-latest-posts__post-title:hover { color: var(--gs-gold-ink); }
body .gs-info .gs-cols__list .wp-block-latest-posts__post-date { font-size: 12.5px; color: var(--gs-ink-2); margin: 0; }
@media (min-width: 900px) {
body .gs-info .gs-info__cols { gap: 72px; }
}
/* ───────── よくある質問 ───────── */
body .gs-faq .gs-faq__list { max-width: 880px; margin-top: 8px; }
body .gs-faq .gs-faq__list > * { margin: 0; }
body .gs-faq .wp-block-details { border-bottom: 1px solid var(--gs-line); }
body .gs-faq .wp-block-details:first-child { border-top: 1px solid var(--gs-line); }
body .gs-faq .wp-block-details summary {
list-style: none;
cursor: pointer;
display: grid;
grid-template-columns: 1fr 20px;
gap: 16px;
padding: 20px 2px;
font-weight: 700;
color: var(--gs-navy);
}
body .gs-faq .wp-block-details summary::-webkit-details-marker { display: none; }
body .gs-faq .wp-block-details summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1.2; }
body .gs-faq .wp-block-details[open] summary::after { content: "−"; }
body .gs-faq .wp-block-details > p { margin: 0 2px 20px; color: var(--gs-ink-2); }
/* ───────── 最後の誘い ───────── */
body .gs-cta { background: var(--gs-navy); color: #fff; }
body .gs-cta .gs-cta__in { gap: 24px; align-items: center; }
body .gs-cta .gs-cta__txt > * { margin: 0; }
body .gs-cta h2.wp-block-heading { color: #fff; margin: 0 0 8px; letter-spacing: .06em; }
body .gs-cta .gs-cta__txt p { color: rgba(255, 255, 255, .85); }
@media (min-width: 900px) {
body .gs-cta h2.wp-block-heading { font-size: 36px; }
}
/* ───────── ヘッダー（テンプレートパーツ「ヘッダー」に貼るブロック。上に残る） ───────── */
body.gs-clinic .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 30; }
body.gs-clinic.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
body.gs-clinic.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}
@media (max-width: 600px) {
body.gs-clinic.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
}
body .gs-hd {
position: relative;
gap: 20px;
align-items: center;
min-height: 72px;
margin: 0;
padding: 8px max(var(--gs-pad), calc((100% - 1160px) / 2));
background: #fff;
border-bottom: 1px solid var(--gs-line);
}
body .gs-hd > * { margin: 0; }
body .gs-hd .gs-hd__brand { gap: 14px; margin-right: auto; }
body .gs-hd .gs-hd__brand > * { margin: 0; }
body .gs-hd .gs-hd__logo img { display: block; width: 104px; height: auto; }
body .gs-hd .gs-hd__tag { font-size: 12px; font-weight: 700; line-height: 1.45; letter-spacing: .06em; color: var(--gs-navy); }
body .gs-hd .gs-hd__nav { display: none; list-style: none; margin: 0; padding: 0; gap: 22px; font-size: 14px; font-weight: 600; }
body .gs-hd .gs-hd__nav li { margin: 0; }
body .gs-hd :is(.gs-hd__nav, .gs-hd__menu-list) a { color: var(--gs-ink); text-decoration: none; }
body .gs-hd :is(.gs-hd__nav, .gs-hd__menu-list) a:hover { color: var(--gs-gold-ink); }
body .gs-hd .gs-hd__cta { display: none; gap: 8px; flex-wrap: nowrap; }
body .gs-hd .gs-hd__cta .wp-block-button__link { min-height: 44px; padding: 0 18px; font-size: 13.5px; }
body .gs-btn.gs-btn--line .wp-block-button__link { background: transparent; color: var(--gs-navy); border: 1px solid var(--gs-navy); }
body .gs-btn.gs-btn--line .wp-block-button__link:hover { background: var(--gs-sky); }
body .gs-hd .gs-hd__menu { margin: 0; border: 0; }
body .gs-hd .gs-hd__menu summary {
list-style: none;
cursor: pointer;
font-size: 13px;
font-weight: 700;
color: var(--gs-navy);
border: 1px solid var(--gs-navy);
padding: 6px 12px;
line-height: 1.6;
}
body .gs-hd .gs-hd__menu summary::-webkit-details-marker { display: none; }
body .gs-hd .gs-hd__menu[open] summary { background: var(--gs-navy); color: #fff; }
body .gs-hd .gs-hd__menu-list {
position: absolute;
left: 0;
right: 0;
top: 100%;
list-style: none;
margin: 0;
padding: 8px var(--gs-pad) 16px;
background: #fff;
border-bottom: 1px solid var(--gs-line);
box-shadow: 0 12px 24px rgba(7, 37, 64, .08);
}
body .gs-hd .gs-hd__menu-list li { margin: 0; }
body .gs-hd .gs-hd__menu-list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--gs-line); font-weight: 600; }
@media (min-width: 1100px) {
body .gs-hd .gs-hd__nav,
body .gs-hd .gs-hd__cta { display: flex; }
body .gs-hd .gs-hd__menu { display: none; }
body .gs-hd .gs-hd__logo img { width: 120px; }
}
/* ───────── フッター（テンプレートパーツ「フッター」に貼るブロック） ───────── */
body .gs-ftr {
margin: 0;
padding: 56px max(var(--gs-pad), calc((100% - var(--gs-width)) / 2)) 28px;
background: var(--gs-deep);
color: rgba(255, 255, 255, .8);
font-size: 13.5px;
line-height: 1.9;
}
body .gs-ftr > * { margin: 0; }
body .gs-ftr a { color: inherit; text-decoration: none; }
body .gs-ftr a:hover { color: #fff; }
body .gs-ftr .gs-ftr__cols { gap: 32px; margin: 0; }
body .gs-ftr .wp-block-column > * { margin: 0; }
body .gs-ftr .gs-ftr__logo { margin: 0 0 12px; }
body .gs-ftr .gs-ftr__logo img { display: block; width: 140px; height: auto; }
body .gs-ftr .gs-ftr__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
body .gs-ftr .gs-ftr__nav > *,
body .gs-ftr .gs-ftr__grp > * { margin: 0; }
body .gs-ftr .gs-ftr__grp strong { display: block; color: #fff; margin-bottom: 8px; }
body .gs-ftr .gs-ftr__grp ul { list-style: none; margin: 0; padding: 0; }
body .gs-ftr .gs-ftr__grp li { margin: 0; padding: 3px 0; }
body .gs-ftr .gs-ftr__c { gap: 8px; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12px; }
body .gs-ftr .gs-ftr__c > * { margin: 0; }
@media (min-width: 900px) {
body .gs-ftr .gs-ftr__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* スマホの下に残るボタン2つ（パソコンの幅では出さない。編集画面では下に置くだけ） */
body .gs-bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
body .gs-bbar > * { margin: 0; }
body .gs-bbar a { display: flex; align-items: center; justify-content: center; min-height: 52px; font-size: 15px; font-weight: 700; text-decoration: none; }
body .gs-bbar .gs-bbar__semi a { background: #fff; color: var(--gs-navy); border-top: 1px solid var(--gs-line); }
body .gs-bbar .gs-bbar__cta a { background: var(--gs-navy); color: #fff; }
body.gs-clinic:has(.gs-bbar) { padding-bottom: 52px; }
.editor-styles-wrapper .gs-bbar { position: static; }
@media (min-width: 1100px) {
body .gs-bbar { display: none; }
body.gs-clinic:has(.gs-bbar) { padding-bottom: 0; }
}
/* ───────── 動き（clinic.js が html に gs-anim、要素に gs-rv・is-in を付ける。編集画面では動かさない） ───────── */
html.gs-anim .gs-rv { opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s ease; transition-delay: calc(var(--gs-d, 0) * .08s); }
html.gs-anim .gs-rv.is-in { opacity: 1; transform: none; }
/* 最初の画面: JS より前に隠しておく（言葉は1行ずつ現れる） */
html.gs-anim .gs-hero .wp-block-cover__inner-container > :not(h1),
html.gs-anim .gs-hero h1 .gs-line {
opacity: 0;
transform: translateY(24px);
transition: opacity 1.2s ease, transform 1.2s ease;
transition-delay: calc(var(--gs-d, 0) * .22s + .25s);
}
html.gs-anim .gs-hero h1:not(.gs-split) { opacity: 0; }
html.gs-anim .gs-hero .gs-line { display: block; }
html.gs-anim .gs-hero.is-in .wp-block-cover__inner-container > :not(h1),
html.gs-anim .gs-hero.is-in h1 .gs-line { opacity: 1; transform: none; }
@keyframes gsHeroZoom { from { transform: scale(1.1); } to { transform: scale(1); } }
html.gs-anim .gs-hero .wp-block-cover__image-background { animation: gsHeroZoom 12s cubic-bezier(.2, .6, .2, 1) both; }
/* 特徴の帯の写真がゆっくり寄る（3つは順に現れる） */
html.gs-anim .gs-fc .wp-block-cover__image-background.gs-rv { opacity: 1; transform: scale(1.08); transition: transform 2.4s cubic-bezier(.2, .6, .2, 1); }
html.gs-anim .gs-fc .wp-block-cover__image-background.gs-rv.is-in { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
html.gs-anim .gs-rv,
html.gs-anim .gs-hero .wp-block-cover__inner-container > *,
html.gs-anim .gs-hero h1 .gs-line { opacity: 1 !important; transform: none !important; transition: none !important; }
html.gs-anim .gs-hero .wp-block-cover__image-background { animation: none; }
body .gs-sv, body .gs-tl .gs-tl__ph img { transition: none; }
}