@charset "UTF-8"; /* built: 23 files */ /* ===== 01-tokens.css ===== */ /* ============================================================ 01-tokens — デザイントークン 参照元 miraie テーマの実測値を CSS 変数に整理したもの。 色・書体・余白を変えるときは、まずここを見る。 ============================================================ */ :root { /* --- 書体 ------------------------------------------------ */ --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --font-en: "Albert Sans", sans-serif; /* --- 基本色 ---------------------------------------------- */ --c-text: #333; --c-text-sub: #666; --c-text-mute: #999; --c-bg: #fff; --c-bg-cream: #fdf9f6; --c-bg-gray: #f8f9fa; --c-bg-beige: #f7f5f2; --c-line: #e8e8e8; --c-line-strong: #c7c7c7; /* --- ブランドカラー -------------------------------------- */ --c-blue: #6388ee; /* 脳神経外科 */ --c-navy: #0c3c8b; --c-green: #15c627; /* 脊椎外科 */ --c-pink: #f368b4; /* 内科 */ --c-gold: #de9821; --c-gold-deep: #ca840b; --c-gold-mid: #e49409; --c-hours: #4a7ba7; /* 「診療時間」ボタン */ --c-access: #1877a3; /* 「アクセス」ボタン */ /* --- レイアウト ------------------------------------------ */ --inner-max: 1310px; --inner-w780: 810px; --inner-w1000: 1030px; --inner-w1440: 1470px; --inner-pad: 15px; --pc-min: 1025px; /* 参照元と同じくPCは1025px未満に縮まない */ --sp-cta-h: 13.953vw; /* SP下部固定CTAの高さ（参照元 get_vw(60)） */ /* --- その他 ---------------------------------------------- */ --radius-lg: 30px; --shadow-card: 8px 8px 24px 0 rgb(0 0 0 / 10%); --shadow-pill: 0 10px 20px 0 rgb(0 0 0 / 10%); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ブレークポイント（参照元 _define.scss と同一） max428 / min429 … 細いスマホ max768 / min769 … SP / PC の分岐（主要） max1024 / min1025 max1280 / min1281 SPの寸法は 430px 基準の vw（参照元の get_vw()）。 例) get_vw(60) = 60 / 430 * 100 = 13.953vw */ /* ===== 02-base.css ===== */ /* ============================================================ 02-base — リセットと基本タイポグラフィ ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: hidden; } body { margin: 0; min-width: var(--pc-min); background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; letter-spacing: .05em; -webkit-text-size-adjust: 100%; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } h1, h2, h3, h4, h5, h6, p, span, strong, small, li, td, th, dt, dd { font-feature-settings: "palt"; word-wrap: break-word; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } ul, ol, dl { padding: 0; } li { list-style: none; } a { margin: 0; color: inherit; font-feature-settings: "palt"; text-decoration: none; word-wrap: break-word; } img { width: auto; height: auto; max-width: 100%; line-height: 100%; vertical-align: bottom; } .imgFit { overflow: hidden; } .imgFit img { width: 100%; height: 100%; object-fit: cover; object-position: center; } em { font-style: normal; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; font-weight: normal; vertical-align: top; word-break: break-all; } svg { display: block; } /* --- 表示・非表示の出し分け -------------------------------- */ @media screen and (min-width: 769px) { .pc-none { display: none !important; } } @media screen and (max-width: 768px) { .sp-none { display: none !important; } } @media screen and (min-width: 429px) { .min429-none { display: none !important; } } @media screen and (max-width: 428px) { .max428-none { display: none !important; } } @media screen and (min-width: 1025px) { .min1025-none { display: none !important; } } @media screen and (max-width: 1024px) { .max1024-none { display: none !important; } } @media screen and (min-width: 1281px) { .min1281-none { display: none !important; } } @media screen and (max-width: 1280px) { .max1280-none { display: none !important; } } .f-wbr { word-break: keep-all; } .f-en { font-family: var(--font-en); } /* スクリーンリーダー専用（見出しを視覚的に隠すが読み上げには残す） */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- ホバー ------------------------------------------------ 参照元は transition:.3s ease（全プロパティ）だったが、 CLAUDE.md §8-7 の事故（top等の切替を飲み込む）を避けて 対象プロパティを限定する。 */ @media (hover: hover) and (min-width: 769px) { a, button { transition: opacity .3s var(--ease); } a:hover, button:hover { opacity: .5; } } a, button { cursor: pointer; } /* PCでは電話番号リンクを無効化（参照元と同じ） */ @media screen and (min-width: 769px) { a[href^="tel:"] { pointer-events: none; } } @media screen and (max-width: 768px) { body { min-width: auto; padding-bottom: var(--sp-cta-h); /* SP下部固定CTAの分 */ } } /* --- モーションを減らす設定を尊重（CLAUDE.md §8-13） -------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ===== 03-common.css ===== */ /* ============================================================ 03-common — 全ページ共通のパーツ .cmn-inner … 内側コンテナ .cmn-ttl … 見出し（和文＋欧文） .cmn-bt01/02 … ボタン .cmn-newsList … お知らせリスト .cmn-blogList … ブログカード .cmn-cvBtBox … SP下部の固定CTA ============================================================ */ /* --- 内側コンテナ ------------------------------------------ */ .cmn-inner { width: 100%; max-width: var(--inner-max); margin-inline: auto; padding-inline: var(--inner-pad); } .cmn-inner.w-780 { max-width: var(--inner-w780); } .cmn-inner.w-1000 { max-width: var(--inner-w1000); } .cmn-inner.w-1440 { max-width: var(--inner-w1440); } .c-inner01 { width: 100%; max-width: 1070px; margin-inline: auto; padding-inline: var(--inner-pad); } @media screen and (max-width: 768px) { .cmn-inner, .cmn-inner.w-780, .cmn-inner.w-1000, .cmn-inner.w-1440 { max-width: 100%; padding-inline: 4.651vw; /* get_vw(20) */ } } /* --- 見出し ------------------------------------------------ */ .cmn-ttl { position: relative; z-index: 2; } .cmn-ttl__jp { display: block; color: var(--c-text); font-family: var(--font-serif); font-weight: 500; font-size: 40px; line-height: 1.5; text-align: center; } .cmn-ttl__en { display: block; margin-top: 17px; color: var(--c-text-sub); font-family: var(--font-en); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: .05em; text-align: center; text-transform: uppercase; } .cmn-ttl.is-center { text-align: center; } .cmn-ttl.is-wht .cmn-ttl__jp { color: #fff; } .cmn-ttl.is-wht .cmn-ttl__en { color: #fff; opacity: 1; } @media screen and (max-width: 768px) { .cmn-ttl { text-align: center; } .cmn-ttl__jp { font-size: 6.512vw; } /* get_vw(28) */ .cmn-ttl__en { margin-top: 2.326vw; font-size: 2.791vw; } } /* --- ボタン01（黒い横長ボタン） ---------------------------- */ .cmn-bt01 { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; height: 64px; background: var(--c-text); color: #fff; font-size: 16px; font-weight: 400; letter-spacing: .05em; text-align: center; } .cmn-bt01::before { content: ""; position: absolute; inset: 0 25px 0 auto; margin: auto; width: 10px; height: 20px; background: url("../img/cmn/ico_arrow01.webp") no-repeat center / contain; } .cmn-bt01.is-center { margin-inline: auto; } .cmn-bt01.orange { background: var(--c-gold-deep); } @media screen and (max-width: 768px) { .cmn-bt01 { margin: auto; max-width: 67.442vw; /* get_vw(290) */ height: 13.023vw; /* get_vw(56) */ font-size: 3.256vw; } .cmn-bt01::before { right: 20px; width: 8.5px; height: 8.5px; } } /* --- ボタン02（白地・紺枠のピル） -------------------------- 参照元は ico_arrow01.svg を使っていたが、そのファイルは 本番サーバー上で404だった（＝矢印が出ていない）。 ここでは同じ形をインラインSVGで描いて画像404を無くす。 */ .cmn-bt02 { position: relative; display: flex; align-items: center; width: 100%; max-width: 180px; height: 30px; padding-left: 20px; border: 1px solid var(--c-navy); border-radius: 50px; background: #fff; box-shadow: var(--shadow-pill); color: var(--c-navy); font-size: 14px; font-weight: 700; letter-spacing: .1em; } .cmn-bt02::before { content: ""; position: absolute; inset: 0 20px 0 auto; margin: auto; width: 5px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 0l5 5-5 5' fill='none' stroke='%230C3C8B' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain; } .cmn-bt02.is-center { margin-inline: auto; } @media screen and (max-width: 768px) { .cmn-bt02 { margin: auto; max-width: 69.767vw; /* get_vw(300) */ height: 11.628vw; /* get_vw(50) */ padding-left: 4.651vw; font-size: 3.721vw; } .cmn-bt02::before { width: 4.651vw; height: 4.651vw; } } /* --- お知らせリスト ---------------------------------------- */ .cmn-newsList { display: flex; flex-direction: column; gap: 30px; width: 100%; } .cmn-newsList-item { width: 100%; } .cmn-newsList-item > a { position: relative; display: flex; gap: 20px; align-items: center; } .cmn-newsList-item-dateBox { display: flex; gap: 15px; align-items: center; flex-shrink: 0; } .cmn-newsList-item-dateBox .date { color: var(--c-text-mute); font-family: var(--font-en); font-weight: 400; font-size: 14px; line-height: 1.5; } .cmn-newsList-item-dateBox .category { width: 61px; height: 22px; background: var(--c-gold); color: #fff; font-size: 12px; line-height: 21.5px; letter-spacing: .06em; text-align: center; } .cmn-newsList-item-ttlBox { position: relative; } /* 参照元は

だったが見出し階層が乱れるため

に変更。 どちらの記述でも同じ見た目になるようにしておく。 */ .cmn-newsList-item-ttlBox .ttl, .cmn-newsList-item-ttlBox h2 { font-weight: 400; font-size: 15px; line-height: 1.5; word-break: break-all; } @media screen and (max-width: 768px) { .cmn-newsList { gap: 23px; } .cmn-newsList-item > a { flex-direction: column; gap: 8px; align-items: flex-start; } .cmn-newsList-item-dateBox .date { font-size: 12px; } .cmn-newsList-item-dateBox .category { width: 48px; height: 18px; font-size: 10px; line-height: 18px; } .cmn-newsList-item-ttlBox { overflow: hidden; } .cmn-newsList-item-ttlBox .ttl, .cmn-newsList-item-ttlBox h2 { font-size: 14px; } } /* --- ブログカード ------------------------------------------ */ .cmn-blogList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; margin-top: 40px; } .cmn-blogList-item { background: #fff; box-shadow: var(--shadow-card); } .cmn-blogList-body { padding: 25px 30px; } .cmn-blogList__date { font-family: var(--font-en); font-size: 12px; font-weight: 400; letter-spacing: .05em; line-height: 1.5; } .cmn-blogList__ttl { font-family: var(--font-serif); font-size: 18px; font-weight: 500; letter-spacing: .05em; line-height: 1.75; } .cmn-blogList__txt { margin-top: 15px; font-size: 16px; font-weight: 700; letter-spacing: .1em; line-height: 1.6; } .cmn-blogList__btnBox { margin-top: 15px; } .cmn-blogList__btn { position: relative; color: var(--c-text-sub); font-family: var(--font-en); font-size: 12px; font-weight: 400; letter-spacing: .05em; line-height: 1.5; text-transform: uppercase; } .cmn-blogList__btn::before { content: ""; position: absolute; right: 0; bottom: -5px; width: 100%; height: 1px; background: var(--c-text); opacity: .3; } @media screen and (max-width: 768px) { .cmn-blogList { grid-template-columns: 1fr; gap: 10px; margin-top: 25px; } .cmn-blogList-item { display: grid; grid-template-columns: 100px 1fr; } .cmn-blogList-body { padding: 12px; } .cmn-blogList__imgBox img { aspect-ratio: 1; object-fit: cover; } .cmn-blogList__date { font-size: 10px; } .cmn-blogList__ttl { margin-top: 4px; font-size: 13px; line-height: 1.4; } .cmn-blogList__btnBox { margin-top: -5px; } .cmn-blogList__btn { font-size: 10px; } .cmn-blogList__btn::before { bottom: -2px; } } /* --- SP下部の固定CTA --------------------------------------- */ .cmn-cvBtBox { position: fixed; inset: auto 0 0 0; z-index: 999; display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 100%; margin: auto; } .cmn-cvBtBox a { position: relative; display: grid; place-content: center; width: 100%; height: var(--sp-cta-h); border: 1px solid var(--c-text); background: var(--c-text); } .cmn-cvBtBox a p { color: #fff; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: .1em; text-align: center; } .cmn-cvBtBox a p small { display: block; font-size: 12px; font-weight: 400; } .cmn-cvBtBox a.is-web { border-color: #000; background: #fff; } .cmn-cvBtBox a.is-web p { color: var(--c-text); } .cmn-cvBtBox a.is-hours { border-color: var(--c-hours); background: var(--c-hours); } .cmn-cvBtBox a.is-access { border-color: var(--c-gold); background: var(--c-gold); } .cmn-cvBtBox a.is-access p { color: #fff; } .cmn-cvBtBox a.is-tel p small { font-size: 10px; line-height: 1.35; } /* ===== 04-header.css ===== */ /* ============================================================ 04-header — ヘッダー／グローバルナビ PC : MV上に重なる透過ヘッダー ＋ MV下端に横並びナビ （スクロールで .is-pastMv / .is-navFixed が付く） SP : 54pxの固定バー ＋ ハンバーガーで全画面ナビ ============================================================ */ .header { position: fixed; top: 0; left: 0; z-index: 99999; display: flex; align-items: center; justify-content: space-between; width: 100%; min-width: 1024px; margin-top: 20px; padding: 0 20px; /* CLAUDE.md §8-7：全プロパティ対象の transition は他の切替を飲み込むので限定する */ transition: background-color .3s var(--ease), box-shadow .3s var(--ease); } /* --- ロゴ（マーク画像＋医院名テキスト） -------------------- */ .header-logo { position: relative; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; width: fit-content; max-width: 100%; } .header-logo__primary { position: relative; flex: 0 0 auto; width: auto; max-width: 60px; } .header-logo__primary img { display: block; width: 100%; max-width: 100%; height: auto; vertical-align: top; } .header-logo__side { flex: 0 1 auto; width: auto; min-width: 0; max-width: 14em; color: #fff; font-family: var(--font-serif); font-size: clamp(12px, 2.15vw, 17px); font-weight: 500; line-height: 1.35; letter-spacing: .05em; white-space: normal; transition: color .3s var(--ease); } .header-logo .is-bk { display: none; } .header.is-pastMv .header-logo .is-bk, .header-logo.is-navOn .is-bk { display: block; } .header.is-pastMv .header-logo .is-wht, .header-logo.is-navOn .is-wht { display: none; } .header.is-pastMv .header-logo .header-logo__side, .header-logo.is-navOn .header-logo__side { color: var(--c-text); } .header-logo.is-navOn { z-index: 11; } .header-logo.is-navOn .is-bk { margin-top: 10px; } /* --- 住所・診療時間（PCのみ） ------------------------------ */ .header-address { display: flex; gap: 20px; justify-content: flex-end; } .header-address__map, .header-address__time { position: relative; padding-left: 18px; color: #fff; opacity: .7; font-size: 12px; font-weight: 400; line-height: 1.5; transition: color .3s var(--ease); } .header-address__map::after, .header-address__time::after { content: ""; position: absolute; top: 50%; left: 3px; transform: translateY(-50%); background-repeat: no-repeat; background-size: contain; transition: filter .3s var(--ease); } .header-address__map::after { width: 9px; height: 12px; background-image: url("../img/cmn/ico_map01.webp"); } .header-address__time::after { width: 12px; height: 12px; background-image: url("../img/cmn/ico_time01.webp"); } .header.is-pastMv .header-address__map, .header.is-pastMv .header-address__time { color: var(--c-text); opacity: 1; } .header.is-pastMv .header-address__map::after, .header.is-pastMv .header-address__time::after { filter: brightness(0); } /* --- ヘッダー右のボタン群（TEL / WEB予約 / 診療時間 / IG） -- */ .header-navBtList { display: flex; justify-content: flex-end; gap: 4px; margin-top: 13px; } .header-navBtList > li > a { position: relative; display: flex; align-items: center; justify-content: center; width: 160px; height: 50px; letter-spacing: .1em; } .header-navBtList > li > a p { color: #fff; font-size: 16px; line-height: 1.5; } .header-navBtList-tel > a { border: 1px solid #fff; background: rgb(51 51 51 / 70%); } .header-navBtList-web > a { background: var(--c-gold); } .header-navBtList-hours > a { background: var(--c-access); } .header-navBtList-ig > a { background: #ff30c4; } /* --- ハンバーガー（SPのみ表示） ---------------------------- */ .header-bt { position: absolute; top: 0; right: 0; z-index: 2; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 54px; height: 54px; padding: 1px 0 2px; background: var(--c-gold); transition: background-color .3s var(--ease); } .header-bt__lines { display: grid; gap: 4px; place-content: center; align-content: center; flex-shrink: 0; min-height: 22px; } .header-bt__lines span { display: block; width: 26px; height: 1px; border-radius: 50vw; background: #fff; transition: transform .25s ease, opacity .2s ease, width .2s ease; } .header-bt__label { margin: 2px 0 0; padding: 0; color: #fff; font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; } .header-bt.is-navOn { z-index: 11; } .header-bt.is-navOn .header-bt__lines { display: block; position: relative; width: 22px; height: 22px; margin: 0; padding: 0; } .header-bt.is-navOn .header-bt__lines span { position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; margin: 0; border-radius: 50vw; } .header-bt.is-navOn .header-bt__lines span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .header-bt.is-navOn .header-bt__lines span:nth-child(2) { width: 0; height: 0; opacity: 0; overflow: hidden; } .header-bt.is-navOn .header-bt__lines span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); } /* --- グローバルナビ ---------------------------------------- */ .header-nav { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--inner-max); padding: 0 15px; gap: 60px; /* SPで縦並びになったとき、メニューとSNSの間隔になる */ } @media screen and (min-width: 769px) { .header-nav { z-index: 99998; } /* スクロールでヘッダー直下に来たら固定（JSで .is-navFixed を付与） */ .header-nav.is-navFixed { position: fixed; top: var(--header-nav-fixed-top, 0); right: auto; bottom: auto; left: 50%; transform: translateX(-50%); z-index: 99998; } } .header-navList { display: flex; align-items: center; justify-content: space-between; padding: 5px; border-radius: 6px; background: #424646; color: #fff; } .header-navList__link { position: relative; flex: 1; height: 100%; } /* 1つ目（医院紹介・初めての方へ）は文字数が多いので広くとる */ @media screen and (min-width: 769px) { .header-navList__link:first-child { flex: 1.35 1 0%; min-width: 196px; } } .header-navList__link::before { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 24px; background: #fff; opacity: .3; } .header-navList__link:last-child::before { content: none; } .header-navList__link .link { display: block; padding: 18px 0; position: relative; border-radius: 6px; font-size: 15px; font-weight: 500; text-align: center; transition: background-color .3s var(--ease), color .3s var(--ease); } .header-navList__link .link small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 400; line-height: 1.2; text-align: center; } .header-navList__link .link strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: .1em; line-height: 1.2; text-align: center; } @media (hover: hover) and (min-width: 769px) { .header-navList__link:hover { opacity: 1; } .header-navList__link .link:hover { background: #fff; color: var(--c-text); opacity: 1; } } @media screen and (max-width: 1100px) { .header-navList__link .link strong { font-size: 14px; } } @media screen and (max-width: 1024px) { .header-navList__link .link strong { font-size: 13px; } } /* --- ドロップダウン ---------------------------------------- */ .header-navList__link.is-subLink { cursor: pointer; } .header-navList__link.is-subLink .link { padding-right: 20px; } .header-navList__link.is-subLink .link::after { content: ""; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 11px; height: 11px; background: url("../img/cmn/ico_header01.webp") no-repeat center / contain; } .header-navList__link.is-subLink .link:hover::after { background-image: url("../img/cmn/ico_header02.webp"); } .subLink { position: absolute; z-index: -1; padding: 16px; border-radius: 6px; background: rgb(51 51 51 / 80%); /* CLAUDE.md §8-6：backdrop-filter は内部の position:fixed の基準になる。 この中に fixed 要素を置かないこと。 */ backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); } .subLink::after { content: ""; position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 17px solid rgb(51 51 51 / 80%); } .subLink--menu { top: -230px; left: calc(50% + 200px); transform: translateX(-50%); width: max-content; min-width: 900px; max-width: 900px; } .subLink--menu::after { left: 28%; } .subLink--recruitment { top: -80px; left: 50%; transform: translateX(-50%); width: max-content; min-width: 640px; max-width: 640px; } .subLink--recruitment::after { left: 50%; } .subLink-linkBox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 6px; } .subLink--menu .subLink-linkBox, .subLink--recruitment .subLink-linkBox { grid-template-columns: repeat(4, 1fr); } .subLink--recruitment .subLink-linkBox a { white-space: nowrap; text-align: center; } .subLink-linkBox a { position: relative; padding: 2px; color: #fff; text-align: center; transition: color .3s var(--ease); } .subLink-linkBox a p { display: inline; font-size: 12px; font-weight: 700; } @media (hover: hover) and (min-width: 769px) { .subLink-linkBox a:hover { color: #f5a623; opacity: 1; } } @media screen and (min-width: 769px) { .header-navList__link.is-subLink:hover .link { opacity: 1; } .header-navList__link.is-subLink:hover .subLink { opacity: 1; visibility: visible; z-index: 99999; } } @media screen and (max-width: 1300px) { .subLink { padding: 15px; } .subLink:not(.subLink--menu):not(.subLink--recruitment) { min-width: 300px; max-width: 400px; } .subLink--menu { min-width: 900px; max-width: 900px; } .subLink--recruitment { min-width: 640px; max-width: 640px; } } /* ナビが画面上半分で固定されているときは下向きに開く */ .header-nav.is-subLink-down .subLink { top: auto; border-radius: 10px; } .header-nav.is-subLink-down .subLink::after { top: -17px; bottom: auto; border-top: none; border-bottom: 17px solid rgb(51 51 51 / 80%); } .header-nav.is-subLink-down .subLink--menu { bottom: -220px; } .header-nav.is-subLink-down .subLink--recruitment { bottom: -74px; } .is-plus { display: none; } /* ============================================================ SP（〜768px） ============================================================ */ @media screen and (max-width: 768px) { .header { top: 0; align-items: flex-start; height: 54px; min-width: auto; margin-top: 0; padding: 0 2.791vw 0 0; /* get_vw(12) */ } .header-logo { z-index: 2; gap: 1.395vw; align-items: center; } .header-logo__primary { max-width: 9.302vw; } .header-logo__side { flex: 0 0 auto; max-width: none; white-space: nowrap; } .header-logo.is-navOn .is-bk { margin-top: 0; } .header-nav { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; width: 100%; height: 100%; max-width: none; padding: 72px 16px 0; transform: none; background: rgb(255 255 255 / 80%); backdrop-filter: blur(37px); -webkit-backdrop-filter: blur(37px); opacity: 0; visibility: hidden; overflow: hidden; pointer-events: none; transition: opacity .3s var(--ease), visibility .3s var(--ease); } .header-nav.is-navOn { z-index: 99997; opacity: 1; visibility: visible; pointer-events: auto; } /* padding:5px / border-radius:6px は参照元と同じく解除しない */ .header-navList { flex: 1 1 auto; flex-direction: column; gap: 0; min-height: 0; background: transparent; color: var(--c-text); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .header-navList__link { display: block; width: 100%; text-align: left; border-bottom: 1px solid #d9d9d9; } .header-navList__link::before { content: none; } .header-navList__link::after { content: ""; position: absolute; top: 50%; right: 13px; transform: translateY(-50%) rotate(315deg); width: 8px; height: 8px; border-right: 1px solid var(--c-text); border-bottom: 1px solid var(--c-text); } .header-navList__link.is-subLink::after { content: none; } .header-navList__link.is-subLink .link::after { content: none; } .header-navList__link .link { display: block; width: 100%; padding: 16px 0; border-radius: 0; font-size: 17px; text-align: left; } .header-navList__link .link:hover { background: transparent; } .header-navList__link .link small { text-align: left; } .header-navList__link .link strong { font-size: 16px; font-weight: 500; text-align: left; } /* 開閉ボタン（＋／−） */ .is-plus { position: absolute; top: 24px; right: 10px; display: block; width: 11px; height: 11px; } .is-plus::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; background: url("../img/cmn/ico_nav01.svg") no-repeat center / contain; } .is-plus.is-on::before { background-image: url("../img/cmn/ico_nav02.svg"); } .subLink { position: static; inset: auto; z-index: 1; display: none; flex-wrap: wrap; justify-content: flex-start; gap: 16px; width: 100%; min-width: 0; max-width: 100%; padding: 0; transform: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; visibility: visible; } .subLink::after { content: none; } .subLink.is-open { display: block; } .subLink--menu, .subLink--recruitment { min-width: 0; max-width: 100%; } .subLink-linkBox, .subLink--menu .subLink-linkBox, .subLink--recruitment .subLink-linkBox { grid-template-columns: repeat(3, 1fr); gap: 5px; width: 100%; padding-bottom: 20px; } .subLink--menu .subLink-linkBox { grid-template-columns: 1fr 1fr; } .subLink-linkBox a { width: 100%; padding: 0; border-radius: 0; color: var(--c-text); text-align: left; } .subLink--recruitment .subLink-linkBox a { white-space: normal; text-align: left; } .subLink-linkBox a p { position: relative; font-size: 11px; font-weight: 400; } /* ナビ内のボタン群 */ .header-navBtList { flex-direction: column; gap: 20px; padding: 20px 35px 30px; background: #fff; } .header-navBtList > li > a { width: 100%; height: 80px; justify-content: center; } .header-navBtList > li > a p { padding-left: 0; font-size: 5.581vw; letter-spacing: .1em; } /* SNS（.header-navSns 一式）は削除した。 2026-07-31 の要望「Instagram が左下にあって不恰好・色が派手→消したい」で SPメニュー内のボタンのマークアップを撤去したが、CSS（36行）が残っていた。 LINE予約も廃止が決定しており、この一式はどこからも参照されていないため削除。 Instagramはフッターのロゴリンクに移してある（src/parts/footer.html）。 */ } /* ===== 05-footer.css ===== */ /* ============================================================ 05-footer — フッター 上段：医院情報＋診療カレンダー＋地図 中段：ご予約・お問い合わせ（背景画像＋白いボタンパネル） 下段：サイトマップ的なナビ＋住所＋コピーライト ============================================================ */ /* --- 上段 -------------------------------------------------- */ .footer-topBox { padding: 52px 0; background: var(--c-bg-cream); } .footer-ctaBox { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 52px; padding: 40px; background: #fff; box-shadow: 0 0 16px rgb(0 0 0 / 10%); } .footer-ctaBox__btnBox { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; } .footer-ctaBox__btn { display: block; padding: 20px 10px; border: 1px solid var(--c-text); font-size: 16px; text-align: center; } .footer-ctaBox__btn.orange { border-color: var(--c-gold); background: var(--c-gold); color: #fff; } .footer-contactBox__logo { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.5; letter-spacing: .12em; text-align: center; } .footer-infoBox { margin-top: 10px; text-align: center; } .footer-infoBox__address { font-family: var(--font-serif); font-size: 12px; } .footer-infoBox__walk { margin-top: 6px; font-size: 12px; } .footer-infoBox__tel { margin-top: 6px; font-size: 15px; } /* 参照元は iframe にだけ縦横比を効かせている（img は自然比のまま） */ .footer-mapBox iframe { width: 100%; height: 100%; aspect-ratio: 580 / 380; } .footer-mapBox img { width: 100%; height: auto; } /* --- 診療カレンダー ---------------------------------------- */ .footer-calendarBox { margin-top: 20px; padding: 0 18px 10px; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; } .footer-calendarBox table { width: 100%; } .footer-calendarBox th, .footer-calendarBox td { padding: 6px 0; font-size: 14px; line-height: 1.3; text-align: center; vertical-align: middle; } .footer-calendarBox th { font-weight: 500; font-size: 16px; } .footer-calendarBox td { font-weight: 400; } .footer-calendarBox td.orange { color: var(--c-gold); } .footer-calendarBox tr th:first-child { position: relative; width: 27%; } .footer-calendarBox tr th:first-child::before { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 29px; background: #fff; } .footer-calendarBox tr td:first-child { position: relative; font-weight: 400; white-space: nowrap; } .footer-calendarBox__txt { margin-top: 7px; font-size: 10px; } /* --- 中段：ご予約・お問い合わせ ---------------------------- */ .footer-linkBox { position: relative; padding: 77px 0 170px; background: url("../img/top/bg_sec04_02.webp") no-repeat center / cover; } .footer-linkBox__ttl { display: flex; align-items: center; justify-content: space-between; } /* 見出しの左右に画面端まで伸びる白い罫線 */ .footer-linkBox__ttl .cmn-ttl::before { content: ""; position: absolute; top: 30px; left: calc(-1 * (50vw - 50%)); width: calc(50vw - 50% - 20px); height: 2px; background: #fff; } .footer-linkBox__txt { color: #fff; font-size: 22px; line-height: 1.75; letter-spacing: .1em; } .footer-linkBtns { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 1200px; padding: 40px 80px; background: #fff; box-shadow: 18px 18px 54px rgb(0 0 0 / 11%); } .footer-linkBtns a { position: relative; display: grid; place-content: center; width: 100%; max-width: 330px; height: 109px; background: var(--c-text); color: #fff; font-size: 22px; font-weight: 500; text-align: center; } .footer-linkBtns a small { font-size: 16px; font-weight: 400; } .footer-linkBtns .footer-linkBtns__web { background: var(--c-gold); } /* --- 下段 -------------------------------------------------- */ .footer-btm { padding: 60px 0 70px; background: var(--c-bg-cream); } .footer-inner { width: 100%; max-width: 1200px; margin-inline: auto; } .footer-logo { display: block; max-width: 262px; margin-inline: auto; } .footer-navListBox { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1230px; margin-inline: auto; padding-inline: 15px; } .footer-navList { display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; padding-top: 30px; border-right: 1px solid #e9e5e2; } .footer-navList__item a { font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: .1em; } .footer-navList__item.is-parent { width: 100%; padding-bottom: 15px; font-family: var(--font-serif); } .footer-navList__item.is-child { position: relative; } .footer-navList__item.is-child a { font-size: 14px; } .footer-btmBox { display: flex; align-items: flex-end; justify-content: space-between; max-width: 1230px; margin-inline: auto; margin-top: 21.5px; padding: 25px 15px 0; border-top: 1px solid #e9e5e2; } .footer-btmBox__logo { font-family: var(--font-serif); font-size: 18px; font-weight: 500; line-height: 1.5; } .footer-btmBox__txt { margin-top: 12px; font-size: 12px; font-weight: 400; line-height: 2; } .footer__copyright { font-family: var(--font-serif); font-size: 10px; font-weight: 400; } /* ============================================================ SP（〜768px） ============================================================ */ @media screen and (max-width: 768px) { .footer-topBox { padding: 13.953vw 0; } /* get_vw(60) */ .footer-ctaBox { grid-template-columns: 1fr; gap: 2.326vw; margin-bottom: 12.093vw; padding: 0; } .footer-ctaBox__btnBox { grid-template-columns: 1fr; gap: 10px; } .footer-ctaBox__btn { padding: 16px 0 19px; font-size: 14px; } .footer-contactBox { padding: 30px 20px 20px; } .footer-contactBox__logo { font-size: 4.651vw; } /* get_vw(20) */ .footer-infoBox__address, .footer-infoBox__walk { font-size: 11px; } .footer-infoBox__tel { margin-top: 4px; font-size: 13px; } .footer-mapBox iframe { aspect-ratio: 350 / 300; } .footer-calendarBox { margin-top: 3.488vw; padding: 0; } .footer-calendarBox tr th:first-child { width: 31%; } .footer-calendarBox th { font-size: 3.721vw; } .footer-calendarBox th, .footer-calendarBox td { font-size: 13px; } .footer-calendarBox tr td:first-child { font-size: 12px; } .footer-linkBox { margin-top: 60px; padding: 40px 0 234px; background-image: url("../img/top/bg_sec04_02_sp.webp"); } .footer-linkBox__ttl { flex-direction: column; } .footer-linkBox__ttl .cmn-ttl::before { top: 20px; height: 1px; } .footer-linkBox__ttl .cmn-ttl::after { content: ""; position: absolute; top: 20px; right: calc(-1 * (50vw - 50%)); width: calc(50vw - 50% - 20px); height: 1px; background: #fff; } .footer-linkBox__txt { margin-top: 20px; font-size: 17px; text-align: center; } .footer-linkBtns { grid-template-columns: 1fr; max-width: 310px; padding: 20px; } .footer-linkBtns a { height: 70px; font-size: 18px; } .footer-linkBtns a small { font-size: 14px; } .footer-inner { max-width: 100%; } .footer-btm { padding: 40px 0 100px; } .footer-navListBox { grid-template-columns: 1fr; gap: 20px; padding: 0; } .footer-navList { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 0; padding-top: 0; padding-bottom: 20px; border-right: none; border-bottom: 1px solid #e9e5e2; } .footer-navList:last-child { border-bottom: none; } .footer-navList__item.is-parent { padding-bottom: 0; grid-column: 1 / -1; } .footer-navList__item.is-child a { font-size: 12px; } .footer-btmBox { flex-direction: column; align-items: flex-start; gap: 40px; margin-inline: -15px; padding-top: 40px; } .footer-btmBox__logo { font-size: 16px; } .footer-btmBox__txt { margin-top: 10px; font-size: 10px; } .footer__copyright { font-size: 2.326vw; } } /* ===== 06-lower.css ===== */ /* ============================================================ 06-lower — 下層ページのメインビジュアルとパンくず ============================================================ */ /* --- 下層メインビジュアル ---------------------------------- */ .lowerMv { position: relative; } .lowerMv-inner { height: 400px; } .lowerMv-imgBox { position: relative; height: 100%; } .lowerMv-imgBox::before { content: ""; position: absolute; inset: 0; background: #000; opacity: .5; mix-blend-mode: hard-light; pointer-events: none; } .lowerMv-imgBox img, .lowerMv-imgBox picture { display: block; width: 100%; height: 100%; object-fit: cover; } .lowerMv-txtBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-content: center; width: 100%; height: 100%; text-align: center; } .lowerMv-txtBox-ttl { color: #fff; font-family: var(--font-serif); font-size: 44px; font-weight: 500; } .lowerMv-txtBox-subTtl { margin-top: 14px; color: #fff; font-family: var(--font-en); font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; } @media screen and (max-width: 768px) { .lowerMv-inner, .lowerMv-imgBox { height: 69.767vw; } /* get_vw(300) */ .lowerMv-txtBox-ttl { font-size: 7.907vw; text-align: center; } /* get_vw(34) */ .lowerMv-txtBox-subTtl { margin-top: 12px; font-size: 15px; } } /* --- パンくず ---------------------------------------------- */ .breadcrumb { padding: 20px 0; } .breadcrumb__list { display: flex; align-items: center; flex-wrap: wrap; } .breadcrumb__list__item { display: flex; align-items: center; color: #444; font-size: 12px; line-height: 1.4; letter-spacing: .04em; } .breadcrumb__list__item a { color: #444; } .breadcrumb__list__item + .breadcrumb__list__item::before { content: ">"; display: block; margin: 0 5px; } /* ===== 07-content.css ===== */ /* ============================================================ 07-content — 下層ページ本文（.local__content） 参照元の _local.scss を再構成したもの。 本文はエディタ入力の素直なHTMLなので、 要素セレクタ＋少数のユーティリティクラスで組み立てる。 ============================================================ */ .local { position: relative; display: block; width: 100%; } .local::before { content: ""; position: absolute; top: 80px; left: 0; width: 100%; height: 100%; background: url("../img/local/bg_local.webp") no-repeat 50% 0 / 100% auto; } .local .c-inner { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 50px; } .local .c-inner.m-tm01 { margin-block: 40px; } .local__content { position: relative; display: block; overflow-x: hidden; color: #404040; font-size: 16px; font-weight: 400; line-height: 1.7; } /* --- セクション -------------------------------------------- */ .local__content section { padding: 80px 0; } .local__content section.bg_color, .local__content section.bg_img { position: relative; } .local__content section.bg_color::before, .local__content section.bg_img::before { content: ""; position: absolute; top: 0; left: -80px; z-index: -1; width: calc(100% + 160px); height: 100%; } .local__content section.bg_color::before { background: var(--c-bg-cream); } .local__content section.bg_img::before { background: url("../img/local/bg_qaa01.webp") center / cover; } .local__content .sec-recruit-form { padding: 80px 0; } .local__content .sec-recruit-form .cmn-inner { max-width: 800px; } /* --- 見出し ------------------------------------------------ */ .local__content h2 { position: relative; margin-bottom: 50px; padding-bottom: 30px; color: #32313b; font-family: var(--font-serif); font-size: 32px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; text-align: center; } .local__content h2::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 12px; background: url("../img/local/ico_ttl01.webp") no-repeat center / contain; } .local__content h3 { position: relative; margin: 50px 0 30px; padding: 0 0 10px 20px; border-bottom: 1px solid var(--c-gold); color: var(--c-gold); font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; } .local__content h3::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50px; background: var(--c-gold); } .local__content h3.is_margin { margin-top: 30px; } .local__content h4 { margin: 40px 0 30px; font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: .1em; } .local__content h5, .local__content h6 { margin: 20px 0; font-family: var(--font-serif); font-size: 18px; font-weight: 500; line-height: 1.6; letter-spacing: .1em; } /* --- 本文 -------------------------------------------------- */ .local__content p, .local__content a { font-size: 16px; font-weight: 400; letter-spacing: .05em; line-height: 1.75; } .local__content p + p { margin-top: 12px; } .local__content p.is_center, .local__content a.is_center { text-align: center; } /* 本文中のリンクは大きなボタンになる（参照元の仕様） */ .local__content a[href] { position: relative; display: grid; place-content: center; width: 100%; max-width: 320px; height: 72px; margin-top: 30px; border: 1px solid #32313b; background: #fff; color: #32313b; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: .05em; text-align: center; } .local__content a[href]::before { content: ""; position: absolute; top: 50%; right: 25px; transform: translateY(-50%); width: 13px; height: 13px; background: url("../img/local/ico_arrow01.webp") no-repeat center / contain; } .local__content a[href] + a[href] { margin-left: 20px; } @media (hover: hover) { .local__content a[href]:hover { text-decoration: none; } } .local__content .btn-wrap { display: flex; } .local__content .btn-wrap .cmn-bt01 { display: flex; align-items: center; justify-content: center; padding-right: 50px; } .local__content .btn-wrap .cmn-bt01::before { inset: auto 25px auto auto; top: 50%; transform: translateY(-50%); margin: 0; width: 13px; height: 13px; background-image: url("../img/local/ico_arrow01.webp"); } .local__content .lead { position: relative; margin-bottom: 2em; padding-left: 44px; font-size: 30px; } .local__content .lead::before { content: ""; position: absolute; inset: 25px auto auto 0; width: 32px; height: 2px; background: #111; } .local__content .is-name { display: flex; align-items: center; justify-content: center; gap: 44px; font-size: 30px; font-weight: 600; line-height: 1.6; letter-spacing: normal; text-align: center; } .local__content .is-name span { font-size: 20px; } .local__content .list li { display: flex; align-items: center; font-weight: 400; letter-spacing: 0; } .local__content .list li span { min-width: 140px; font-size: 18px; line-height: 1.8; } .local__content .price { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #ccc; color: #5852a1; font-size: 22px; font-weight: 700; } /* --- リスト ------------------------------------------------ */ .local__content ul, .local__content ol { display: flex; flex-direction: column; margin-bottom: 2em; padding-left: 20px; font-weight: 500; } .local__content ul li { margin-bottom: 1em; margin-left: 2em; list-style: disc; font-weight: 700; } .local__content ul li::marker { color: #32313b; } .local__content ol li { list-style: decimal; } .local__content ul.is_checklist li { list-style: none; } .local__content ul.is_checklist li::before { content: "☑ "; font-size: 20px; } /* --- テーブル ---------------------------------------------- */ .local__content table { width: 100%; margin-bottom: 4em; border: 1px solid var(--c-line); border-collapse: collapse; } .local__content table thead th { padding: 16px 20px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background-color: var(--c-bg-gray); color: var(--c-text); font-size: 16px; font-weight: 600; line-height: 1.6; text-align: left; vertical-align: middle; } .local__content table thead th:last-child { border-right: none; } .local__content table tr { border-bottom: 1px solid var(--c-line); } .local__content table tr:last-child { border-bottom: none; } .local__content table th { padding: 16px 20px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background-color: var(--c-bg-gray); color: var(--c-text); font-size: 16px; font-weight: 500; line-height: 1.6; text-align: left; vertical-align: middle; white-space: nowrap; } .local__content table th:last-child { border-right: none; } .local__content table th.is_blue { background-color: rgb(99 136 238 / 8%); } .local__content table td { padding: 16px 20px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background-color: #fff; color: var(--c-text); font-size: 16px; font-weight: 400; line-height: 1.6; text-align: left; } .local__content table td:last-child { border-right: none; } .local__content table th.is_center, .local__content table td.is_center { text-align: center; } .local__content table th.is_right, .local__content table td.is_right { text-align: right; } .local__content table td.is_left { text-align: left; } .local__content table td.is_price { white-space: nowrap; } /* 幅の広い表はSPで横スクロールさせる（CLAUDE.md §8-9：ページ全体を横に伸ばさない） */ .local__content .table-scroll-wrapper { margin-bottom: 4em; overflow-x: auto; -webkit-overflow-scrolling: touch; } .local__content .table-scroll-wrapper table { margin-bottom: 0; } /* --- 画像 -------------------------------------------------- */ .local__content .imgBox { margin: 50px auto; } .local__content .imgBox.w-80 { width: 80%; } .local__content .imgBox.w-70 { width: 60%; } .local__content .imgBox.w640 { width: 640px; } .local__content .imgBox.w520 { width: 520px; } .local__content .imgBox.w480 { width: 480px; } .local__content .imgBox.w360 { width: 360px; } .local__content .imgBox.w640 img, .local__content .imgBox.w520 img, .local__content .imgBox.w480 img, .local__content .imgBox.w360 img { width: 100%; } .local__content .alignleft { float: left; margin: 0 30px 30px 0; } .local__content .alignright { float: right; margin: 0 0 30px 30px; } .local__content .aligncenter { display: block; margin-inline: auto; } .local__content .youtubeBox { position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; text-align: center; } .local__content .youtubeBox iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* --- カード各種 -------------------------------------------- */ .local__content .card { display: block; width: 100%; } .local__content .card__list { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 40px; padding: 0; } .local__content .card__list > li { width: calc(50% - 15px); } .local__content .card__2list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 50px; margin-bottom: 40px; padding: 0; } .local__content .card__2list .checkBox { margin: 0; } .local__content .card__2list h3, .local__content .card__2list h4, .local__content .card__2list h5, .local__content .card__2list h6 { margin-top: 0; } .local__content .card__2list div iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9; } .local__content .card__2list__item { list-style: none; } .local__content .card__2list__item.is-arrow { position: relative; } .local__content .card__2list__item.is-arrow::after { content: ""; position: absolute; inset: 150px -34px auto auto; margin: auto; width: 16px; height: 18px; /* 参照元は ico_arrow.webp を参照していたが本番で404。同じ形をSVGで描く */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M0 3h9V0l7 9-7 9v-3H0z' fill='%23DE9821'/%3E%3C/svg%3E") no-repeat center / 100% auto; } .local__content .card__2list__item.is-before::before, .local__content .card__2list__item.is-after::before { display: block; color: #817a76; font-size: 30px; font-weight: 400; line-height: 1.2; } .local__content .card__2list__item.is-before::before { content: "BEFORE"; } .local__content .card__2list__item.is-after::before { content: "AFTER"; } .local__content .card__3list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; margin-bottom: 40px; padding: 0; } .local__content .card__3list__item { text-align: center; } .local__content .card__21list { display: grid; grid-template-columns: 2fr 1fr; gap: 40px 30px; margin-bottom: 40px; padding: 0; } .local__content .card__12list { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 0; } .local__content .card__12list:not(:last-child) { margin-bottom: 50px; } .local__content .card__12list h3 { display: flex; align-items: center; margin: 0 0 16px; padding: 12px; border-bottom: none; background: var(--c-gold); color: #fff; font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; } .local__content .card__12list h3::before { content: none; } .local__content .card__12list h3 .recommend { padding: 5px 16px; border-radius: 5px; background: #fff; color: var(--c-gold); font-family: var(--font-sans); font-size: 16px; } .local__content .card__12list p.orange { color: var(--c-gold); } .local__content .card__item { display: flex; } .local__content .card__inner { display: flex; flex-direction: column; gap: 20px; width: 100%; } .local__content .card__title { display: block; padding: 0; font-size: 18px; font-weight: 500; line-height: 22px; text-align: center; } .local__content .card__title::after { display: none; } .local__content .card__img { display: block; width: 100%; } .local__content .card__img picture { position: relative; display: block; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; } .local__content .card__img picture img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* --- 区切り・囲み ------------------------------------------ */ .local__content .line { margin: 40px 0; border-top: 1px solid #d4d8e3; } .local__content .borderBox { padding: 48px; border: 1px solid #d4d8e3; } .local__content .borderBox h2, .local__content .borderBox h3, .local__content .borderBox h4, .local__content .borderBox h5, .local__content .borderBox h6 { margin-top: 0; } .local__content .borderBox p { margin-bottom: 0; } .local__content .borderBox + .borderBox { margin-top: 30px; } .local__content .checkBox { position: relative; width: 100%; max-width: 800px; margin: 60px auto 40px; padding: 30px; border-radius: 10px; background: #fff; } .local__content .checkBox__ttl { position: absolute; inset: 0 auto auto 20px; transform: translateY(-50%); color: #ea8b39; font-size: 20px; font-weight: 700; line-height: 1.1; } .local__content .checkBox__ttl.is_gray { color: #6b6b6b; } .local__content .checkBox ul { display: grid; gap: 0 30px; margin-bottom: 10px; } .local__content .checkBox ul.is_2list { grid-template-columns: repeat(2, 1fr); } .local__content .checkBox ul li { font-size: 16px; font-weight: 700; line-height: 1.7; } .local__content .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } /* --- Q&A --------------------------------------------------- */ .local__content .qaaBox:not(:first-child) { margin-top: 40px; } .local__content .qaaBox dt { position: relative; margin: 0; padding: 22px 20px 21px 54px; background-color: #fff; color: var(--c-gold); cursor: default; font-family: var(--font-serif); font-size: 24px; line-height: 1.5; } .local__content .qaaBox dt::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 80px; background: url("../img/local/ico_qaa01.webp") no-repeat center / contain; } .local__content .qaaBox dd { padding-top: 20px; } /* --- メリット・フロー -------------------------------------- */ .local__content .meritList { padding-left: 0; } .local__content .meritList li { display: grid; grid-template-columns: 160px auto; gap: 40px; list-style: none; } .local__content .meritList li:not(:last-child) { margin-bottom: 40px; } .local__content .meritList__num { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 160px; aspect-ratio: 1 / 1; border: 1px solid #0f2d3d; border-radius: 50%; background: #effaff; color: #0f2d3d; font-size: 20px; font-weight: 400; line-height: 1.7; letter-spacing: .05em; text-align: center; } .local__content .meritList__num span { display: block; font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: .05em; } .local__content .flowList { padding-left: 0; border-top: 1px solid #727171; } .local__content .flowList li { display: grid; grid-template-columns: auto 200px; gap: 40px; padding: 20px 0; border-bottom: 1px solid #727171; list-style: none; } .local__content .flowList li.is_single { grid-template-columns: 1fr; } .local__content .flowList__ttl { margin: 0 0 10px; color: #ea8b39; font-size: 24px; font-weight: 700; line-height: 1.7; } .local__content .flowList p { line-height: 1.5; } /* --- 目次 -------------------------------------------------- */ .local__content .index { padding-top: 24px; } .local__content .index p { margin-top: 0; font-size: 18px; font-weight: 500; letter-spacing: .05em; line-height: 1.75; } .local__content .index-toc { margin-top: 50px; } .local__content .index-toc__head { padding: 6px 10px; background: url("../img/local/bg_index.webp") center / cover; } .local__content .index-toc__ttl { color: #fff; font-family: var(--font-serif); font-size: 24px; font-weight: 600; letter-spacing: .05em; } .local__content .index-toc__list { margin-bottom: 0; padding: 30px; background: var(--c-bg-cream); } .local__content .index-toc__item { margin-bottom: 0; } .local__content .index-toc__item a { display: inline; max-width: none; height: auto; margin: 0; padding: 0; border: none; background: none; color: #32313b; font-size: 16px; font-weight: 500; line-height: 2; letter-spacing: .05em; text-decoration: underline; } .local__content .index-toc__item a::before { content: none; } /* --- 強調ボックス ------------------------------------------ */ .local__content .txtBox { margin-top: 20px; padding: 30px 40px; background: var(--c-bg-cream); } .local__content .txtBox p { font-size: 18px; font-weight: 500; line-height: 1.75; letter-spacing: .05em; } .local__content .txtBox p .orange { color: var(--c-gold); } /* --- 本文内のCTAボタン ------------------------------------- */ .local__content .local-linkBtns { display: flex; gap: 10px; margin-top: 20px; } .local__content .local-linkBtns a { display: grid; place-content: center; width: 100%; max-width: 240px; height: 71px; margin: 0; border: none; background: var(--c-text); color: #fff; font-size: 16px; font-weight: 500; text-align: center; } .local__content .local-linkBtns a::before { content: none; } /* 隣接ボタンの余白指定（a[href] + a[href]）より詳細度を上げて打ち消す */ .local__content .local-linkBtns a[href] + a[href] { margin: 0; } .local__content .local-linkBtns a.local-linkBtns__web { background: var(--c-gold); } .local__content .local-linkBtns a.local-linkBtns__line { background: var(--c-green); } .local__content .local-linkBtns a small { font-size: 14px; font-weight: 400; } /* ============================================================ SP（〜768px） ============================================================ */ @media screen and (max-width: 768px) { .local::before { top: 500px; background-image: url("../img/local/bg_local_sp.webp"); } .local .c-inner { max-width: 590px; padding-inline: 30px; } .local__content section { padding: 60px 0; } .local__content .sec-recruit-form { padding: 60px 0; } .local__content h2 { margin-bottom: 30px; padding-bottom: 20px; font-size: 6.047vw; } /* get_vw(26) */ .local__content h2::before { width: 46px; height: 6px; background-image: url("../img/local/ico_ttl01_sp.webp"); } .local__content h3 { margin: 36px 0 20px; padding-left: 16px; font-size: 20px; } .local__content h3::before { top: 13px; width: 8px; height: 8px; } .local__content h3.is_margin { margin-top: 20px; } .local__content h4 { margin: 30px 0 20px; font-size: 18px; } .local__content p, .local__content a { font-size: 14px; } .local__content a[href] { width: 100%; max-width: 290px; height: 64px; margin: 20px auto 0; font-size: 14px; } .local__content a[href]::before { right: 15px; width: 9px; height: 13px; } .local__content a[href] + a[href] { margin-top: 10px; margin-left: auto; } .local__content .btn-wrap { flex-direction: column; } .local__content .btn-wrap .cmn-bt01 { padding-right: 45px; } .local__content .btn-wrap .cmn-bt01::before { right: 15px; width: 9px; height: 13px; } .local__content .lead { padding-left: 30px; font-size: 23px; } .local__content .lead::before { top: 20px; width: 20px; } .local__content .is-name { flex-direction: column; gap: 10px; font-size: 32px; } .local__content .price { font-size: 18px; } /* テーブル：既定はブロック積み（参照元と同じ） */ .local__content table { table-layout: auto; } .local__content table tr, .local__content table td, .local__content table th { display: block; } .local__content table thead th { padding: 12px 15px; font-size: 14px; } .local__content table th { padding: 12px 15px; border-right: none; border-bottom: none; font-size: 14px; } .local__content table td { padding: 12px 15px; border-bottom: none; font-size: 14px; } /* 横スクロール指定のあるテーブルだけは表のまま */ .local__content .table-scroll-wrapper { margin-bottom: 2em; } .local__content .table-scroll-wrapper table { table-layout: auto; min-width: 560px; } .local__content .table-scroll-wrapper table tr { display: table-row; } .local__content .table-scroll-wrapper table th, .local__content .table-scroll-wrapper table td { display: table-cell; } .local__content .table-scroll-wrapper table thead th, .local__content .table-scroll-wrapper table th, .local__content .table-scroll-wrapper table td { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .local__content .imgBox { margin: 30px 0; } .local__content .imgBox.w-80, .local__content .imgBox.w-70, .local__content .imgBox.w640, .local__content .imgBox.w520, .local__content .imgBox.w480, .local__content .imgBox.w360 { width: 100%; } .local__content .imgBox iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9; } .local__content .alignleft, .local__content .alignright { float: none; display: block; margin: 0 auto 30px; } .local__content .card__list { gap: 30px; } .local__content .card__list > li { width: 100%; } .local__content .card__2list { grid-template-columns: 1fr; gap: 40px 50px; } .local__content .card__2list.is_sp_opposite > div:nth-child(1) { order: 2; } .local__content .card__2list.is_sp_opposite > div:nth-child(2) { order: 1; } .local__content .card__2list__item.is-arrow::after { inset: auto 0 -12px 0; margin: auto; transform: rotate(90deg); } .local__content .card__2list__item.is-before::before, .local__content .card__2list__item.is-after::before { font-size: 24px; } .local__content .card__3list { grid-template-columns: repeat(2, 1fr); } .local__content .card__21list { grid-template-columns: 1fr; gap: 20px; } .local__content .card__21list img { width: 200px; } .local__content .card__21list.is_sp_reverse div:nth-child(1) { order: 2; } .local__content .card__21list.is_sp_reverse div:nth-child(2) { order: 1; } .local__content .card__12list { grid-template-columns: 1fr; gap: 0; } .local__content .card__12list:not(:last-child) { margin-bottom: 30px; } .local__content .card__12list h3 { justify-content: space-between; padding: 8px 12px; font-size: 20px; } .local__content .card__12list h3 .recommend { padding: 6px; font-size: 14px; } .local__content .card__12list.is_sp_reverse div:nth-child(1) { order: 2; } .local__content .card__12list.is_sp_reverse div:nth-child(2) { order: 1; } .local__content .card__12list_img img { width: 100%; aspect-ratio: 330 / 191; object-fit: cover; } .local__content .borderBox { padding: 30px 20px; } .local__content .checkBox { padding: 25px 10px; } .local__content .checkBox ul.is_2list { grid-template-columns: 1fr; } .local__content .grid { grid-template-columns: 1fr; grid-template-areas: "txtbox" "imgbox"; } .local__content .grid .imgBox { grid-area: imgbox; } .local__content .grid .txtBox { grid-area: txtbox; } .local__content .qaaBox { margin-bottom: 30px; } .local__content .qaaBox dt { padding: 10px 0 10px 54px; font-size: 20px; } .local__content .meritList li { grid-template-columns: 1fr; } .local__content .meritList__num { width: 120px; margin: auto; font-size: 18px; } .local__content .meritList__num span { font-size: 28px; } .local__content .flowList li { grid-template-columns: 1fr; gap: 20px; } .local__content .flowList li div img { width: 200px; } .local__content .index { padding: 16px 0 20px; } .local__content .index p { font-size: 15px; } .local__content .index-toc { margin-top: 30px; } .local__content .index-toc__head { padding: 5px 10px; } .local__content .index-toc__ttl { font-size: 20px; } .local__content .index-toc__list { padding: 10px; } .local__content .index-toc__item::marker { font-size: 14px; } .local__content .index-toc__item a { font-size: 14px; } .local__content .txtBox { margin-top: 8px; padding: 20px; } .local__content .txtBox p { font-size: 15px; } .local__content .local-linkBtns { flex-direction: column; align-items: center; gap: 6px; } /* margin は a[href] の SP 指定（20px auto 0）を打ち消す。付くとボタン3つ分ずれる */ .local__content .local-linkBtns a { max-width: 290px; height: 64px; margin: 0; } .local__content .local-linkBtns a small { font-size: 12px; } } /* ===== 08-news.css ===== */ /* ============================================================ 08-news — お知らせ／院長ブログの一覧・記事・ページャ・404 ============================================================ */ /* --- 一覧まわりのレイアウト（サイド + 本文） --------------- */ .newsBox { display: grid; align-items: start; grid-template-columns: 215px auto; gap: 80px; margin: 100px auto; } #navi { width: 100%; max-width: 215px; } .newsBox__pageLink { display: flex; align-items: center; justify-content: center; gap: 60px; width: 100%; max-width: 474px; margin: 60px auto 0; } .newsBox__pageLink__item { min-width: 118px; } .newsBox__pageLink__item a { display: block; padding: 6px 10px; border: 1px solid var(--c-blue); border-radius: 6px; color: var(--c-text); font-size: 15px; font-weight: 500; letter-spacing: .06em; transition: background-color .3s var(--ease), color .3s var(--ease); } .newsBox__pageLink__item a:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; opacity: 1; } .newsBox__pageLink__item.is_center { text-align: center; } .newsBox__pageLink__item.is_prev a { position: relative; text-align: right; } .newsBox__pageLink__item.is_prev a::before { content: ""; position: absolute; top: 0; bottom: 0; left: 10px; margin: auto; width: 0; height: 0; border-style: solid; border-width: 3.5px 8px 3.5px 0; border-color: transparent var(--c-text) transparent transparent; } .newsBox__pageLink__item.is_next a { position: relative; } .newsBox__pageLink__item.is_next a::before { content: ""; position: absolute; top: 0; bottom: 0; right: 10px; margin: auto; width: 0; height: 0; border-style: solid; border-width: 3.5px 0 3.5px 8px; border-color: transparent transparent transparent var(--c-text); } /* --- 一覧カード -------------------------------------------- */ .newsList { width: 100%; max-width: 900px; margin-top: 100px; padding-bottom: 100px; } .newsList-list { display: flex; flex-direction: column; gap: 54px; } .newsList-item { background-color: var(--c-bg-gray); } .newsList-item-link { display: block; padding: 25px 30px; } .newsList-item-date { color: var(--c-blue); font-size: 14px; } .newsList-item-category { margin-left: 10px; padding: 2px 10px; border: 1px solid var(--c-blue); border-radius: 50vh; color: var(--c-blue); font-size: 14px; } .newsList-item-title { margin-top: 20px; font-size: 24px; font-weight: 400; } .newsList-item-text { margin-top: 10px; font-size: 16px; } /* --- サイドナビ（年月・カテゴリー） ------------------------ */ .news_tt { padding: 10px 0; border-top: 3px solid var(--c-blue); border-bottom: 1px solid var(--c-line); color: var(--c-text); font-size: 16px; font-weight: 500; text-align: center; } .news_cate { margin-bottom: 40px; } .news_cate li { padding: 10px 0; border-bottom: 1px solid var(--c-line); color: var(--c-blue); font-size: 16px; font-weight: 400; letter-spacing: .06em; text-align: center; } .navi-date { position: relative; padding: 10px 0 10px 14px; border-bottom: 1px solid var(--c-line); color: var(--c-text); font-size: 16px; font-weight: 400; letter-spacing: .06em; } .navi-date::before { content: ""; position: absolute; top: 22px; left: 0; width: 10px; height: 2px; background: var(--c-blue); } .year_tit { position: relative; color: var(--c-text); cursor: pointer; } .year_tit::before { content: ""; position: absolute; top: 5px; right: 0; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 11px 6.5px 0 6.5px; border-color: var(--c-blue) transparent transparent transparent; transition: transform .3s var(--ease); } .year_tit.is_open::before { transform: rotate(180deg); } .monthlist { display: none; margin-top: 5px; } .monthlist.is_open { display: block; } .monthlist li { line-height: 1.6; } .news_sub { display: flex; align-items: center; margin-bottom: 10px; } .news_sub .date { margin-right: 5px; color: var(--c-text); font-size: 12px; } .news_sub .cate_name { padding: 2px 6px; border: 1px solid var(--c-blue); border-radius: 50vh; color: var(--c-blue); font-size: 10px; } .news_sub .tb_tt { margin-top: 5px; color: var(--c-text); font-size: 15px; font-weight: 700; } .tb_ovn_news { margin-top: 5px; } /* --- 記事本文 ---------------------------------------------- */ .content_post { width: 100%; color: var(--c-text); } .content_post .section { padding: 40px; background: #eff3fd; } .content_post__ttl { margin: 5px 0 40px; color: var(--c-text); font-size: 32px; font-weight: 700; letter-spacing: .06em; } .content_post h2 { padding-bottom: 16px; color: var(--c-text); font-size: 28px; font-weight: 700; word-break: break-all; } .content_post p { margin: 0 0 2.125em; line-height: 2.125em; } .content_post p a { color: var(--c-blue); text-decoration: underline; } .content_post p a:hover { opacity: .8; } .content_post .aligncenter { display: block; margin-inline: auto; } .content_post .news_img { max-width: 612px; height: 400px; margin: 0 auto 20px; background-color: #eff3fd; text-align: center; } .content_post .news_img img { width: 100%; height: 100%; object-fit: contain; } /* --- ページャ ---------------------------------------------- */ .section.pager { display: flex; justify-content: center; margin-top: 48px; } .pagination { display: block; width: 100%; } .pagination__list { display: flex; justify-content: center; gap: 10px; } .pagination__item { display: block; } .pagination .page-numbers { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 16px; transition: background-color .3s var(--ease), color .3s var(--ease); } .pagination .page-numbers.current { background-color: #eee; color: #000; } @media (hover: hover) { .pagination a.page-numbers:hover { background-color: #eee; color: #000; } } .wp-pagenavi { display: flex; gap: 6px; } .wp-pagenavi a, .wp-pagenavi span { display: flex; align-items: center; justify-content: center; min-width: 28px; padding: 3px 0; border-radius: 5px; background: var(--c-bg-gray); color: var(--c-text); font-size: 14px; font-weight: 700; } .wp-pagenavi span.current { background: var(--c-blue); color: #fff; } .wp-pagenavi a { transition: background-color .3s var(--ease), color .3s var(--ease); } .wp-pagenavi a:hover { background: var(--c-blue); color: #fff; opacity: 1; } /* --- 404 --------------------------------------------------- */ .notFound { padding: 50px 0; } .notFound__ttl { color: var(--c-navy); font-family: var(--font-serif); font-size: 100px; font-weight: 700; line-height: 1; text-align: center; } .notFound__txt { margin-top: 20px; color: var(--c-navy); font-size: 24px; text-align: center; } .notFound__btn { margin-top: 40px; } .notFound__btn a { margin-inline: auto; } /* ============================================================ SP（〜768px） ============================================================ */ @media screen and (max-width: 768px) { .newsBox { grid-template-columns: 1fr; gap: 70px; margin: 26px auto 40px; } #navi { order: 2; max-width: 100%; } #content { order: 1; } .newsBox__pageLink { position: relative; gap: 10px; max-width: 100%; margin: 40px auto 0; padding-top: 52px; } .newsBox__pageLink__item.is_prev { position: absolute; top: 0; left: 0; } .newsBox__pageLink__item.is_center { margin: auto; } .newsBox__pageLink__item.is_next { position: absolute; top: 0; right: 0; } .content_post { max-width: 100%; } .content_post__ttl { margin-bottom: 30px; font-size: 24px; } .content_post .news_img { max-width: 100%; height: 233px; margin: 0 auto 60px; } .notFound__ttl { font-size: 13.953vw; } /* get_vw(60) */ .notFound__txt { font-size: 3.721vw; } /* get_vw(16) */ .notFound__btn { margin-top: 4.651vw; } } /* ===== 09-top.css ===== */ /* ============================================================ 09-top — TOPページ topMv … キービジュアル（スライダー） sec01 … 3診療科カード ＋ お知らせ sec02 … このようなお悩みはありませんか sec03 … OUR SOLUTIONS ＋ 医院情報 sec04 … ご予約・お問い合わせ ＋ コンセプト sec05 … 当院が選ばれる理由 sec06 … 診療案内 sec07 … 設備・院内紹介 sec08 … 院長ブログ ============================================================ */ /* --- キービジュアル ---------------------------------------- */ .topMv { position: relative; height: 990px; background-color: #fff; } .topMv-img { height: 990px; } .topMv-img img { object-position: top center; } .topMv-slide .splide__track { height: 100%; } .topMv-contentBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; } .topMv-imgBox { width: 100%; max-width: 551px; height: 280px; margin: auto; } .topMv-txtBox__ttl { position: relative; z-index: 2; color: #fff; font-family: var(--font-serif); font-size: 34px; font-weight: 500; line-height: 1.5; letter-spacing: .05em; } .topMv-txtBox__ttl small { font-size: 25px; font-weight: 500; letter-spacing: .05em; } .topMv-txtBox__txt { margin-top: 4px; color: #fff; font-size: 14px; } @media screen and (max-width: 1400px) { .topMv-txtBox__ttl small { font-size: 17px; } } .topMv-listBox-list { display: flex; gap: 2px; width: 100%; max-width: 1091px; margin: 46px auto 0; padding: 5px; background: rgb(255 255 255 / 10%); } .topMv-listBox-list__item { flex: 1 1 0; display: grid; place-content: center; justify-items: center; width: 100%; padding: 18px 0; border: 1px solid rgb(255 255 255 / 60%); background: rgb(255 255 255 / 63%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--c-text); font-family: var(--font-serif); font-size: 14px; font-weight: 700; line-height: 1.6; letter-spacing: .1em; text-align: center; } .topMv-listBox-list__item strong { display: block; margin-bottom: 8px; color: #111; font-size: 20px; font-weight: 700; } /* --- sec01 3診療科 ＋ お知らせ ----------------------------- */ .sec01 { position: relative; z-index: 0; padding: 100px 0 80px; background: var(--c-bg-cream); } .sec01::before { content: ""; position: absolute; top: 0; right: 0; z-index: -1; width: 100%; height: 654px; background: url("../img/top/bg_sec01_01.webp") no-repeat right top / contain; } .sec01 .cmn-inner { position: relative; } .sec01-cardList { display: flex; gap: 20px; } .sec01-card { position: relative; display: flex; flex: 1; flex-direction: column; background: #fff; box-shadow: 18px 18px 54px rgb(0 0 0 / 11%); } .sec01-card__icon { max-width: 156px; margin: -70px auto 0; } .sec01-card__body { display: flex; flex: 1; flex-direction: column; padding: 13px 30px 30px; text-align: center; } .sec01-card__ttl { color: var(--c-blue); font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: .15em; } .sec01-card__sub { margin-top: 14px; padding: 6px; background: #eff3ff; font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: .05em; } .sec01-card__txt { margin-top: 20px; margin-bottom: auto; font-size: 15px; line-height: 1.75; letter-spacing: .05em; } .sec01-card.green .sec01-card__ttl { color: var(--c-green); } .sec01-card.green .sec01-card__sub { background: #e8f9e9; } .sec01-card.pink .sec01-card__ttl { color: var(--c-pink); } .sec01-card.pink .sec01-card__sub { background: #fef0f8; } .sec01-btn { margin-top: 25px; } .sec01-btn__link { display: block; width: 30px; height: 30px; margin: auto; background: url("../img/cmn/ico_arrow04.webp") no-repeat center / contain; } .sec01-bottomBox { display: grid; grid-template-columns: 300px auto; gap: 40px; max-width: 1080px; margin: 80px auto 0; padding: 50px 0; border: 1px solid #e4e0dd; } .sec01-ttlBox { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #e4e0dd; } .sec01 .cmn-ttl__jp { font-size: 28px; } .sec01 .cmn-ttl__en { margin-top: 12px; } /* --- sec02 このようなお悩みは ------------------------------ */ .sec02 { padding: 100px 0 30px; background: url("../img/top/bg_sec02_01.webp") center / cover; } .sec02-contentBox { display: grid; grid-template-columns: auto 175px; gap: 80px; } .sec02-rightBox { position: relative; } /* CLAUDE.md §8-5：縦書きは文字が入る要素だけに限定し、 並び順は grid（物理方向）で決める。 */ .sec02-ttl { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--font-serif); font-size: 46px; font-weight: 600; line-height: 1.25; letter-spacing: .2em; text-shadow: 2px 0 rgb(255 255 255 / 50%), -2px 0 rgb(255 255 255 / 50%), 0 2px rgb(255 255 255 / 50%), 0 -2px rgb(255 255 255 / 50%), 1px 1px rgb(255 255 255 / 50%), -1px -1px rgb(255 255 255 / 50%), 1px -1px rgb(255 255 255 / 50%), -1px 1px rgb(255 255 255 / 50%); } .sec02-check { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-family: var(--font-en); font-size: 11px; font-weight: 400; letter-spacing: .05em; } .sec02-check::before { content: ""; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 1px; height: 210px; background: var(--c-text); opacity: .3; } .sec02-box { position: relative; border: 1px solid #fff; box-shadow: 18px 18px 54px rgb(0 0 0 / 11%); } .sec02-box + .sec02-box { margin-top: 15px; } .sec02-head { position: relative; display: flex; height: 80px; padding: 19px 30px; background: linear-gradient(to right, rgb(99 136 238 / 100%) 0%, rgb(99 136 238 / 61%) 69%, rgb(99 136 238 / 0%) 100%); color: #fff; } .sec02-head__left { display: flex; align-items: center; gap: 68px; } .sec02-head__main { position: relative; font-family: var(--font-serif); font-size: 29px; font-weight: 600; line-height: 1.5; } .sec02-head__main::before { content: ""; position: absolute; top: 50%; right: -53px; width: 40px; height: 1px; background: #fff; } .sec02-head__sub { font-family: var(--font-serif); font-size: 20px; font-weight: 600; } .sec02-head__btn { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 156px; height: 80px; padding-right: 13px; background: var(--c-blue); color: #fff; font-size: 16px; letter-spacing: .05em; } .sec02-head__btn::after { content: ""; position: absolute; top: 50%; right: 23px; transform: translateY(-50%) rotate(315deg); width: 8.5px; height: 8.5px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; } .sec02-box.green .sec02-head { background: linear-gradient(to right, #15c627 0%, rgb(21 198 39 / 55%) 70%, rgb(21 198 39 / 0%) 100%); } .sec02-box.green .sec02-head__btn { background: var(--c-green); } .sec02-box.green .sec02-item__ttl { color: var(--c-green); } .sec02-box.pink .sec02-head { background: linear-gradient(to right, #f368b4 0%, rgb(243 104 180 / 55%) 70%, rgb(243 104 180 / 0%) 100%); } .sec02-box.pink .sec02-head__btn { background: var(--c-pink); } .sec02-box.pink .sec02-item__ttl { color: var(--c-pink); } .sec02-list { display: flex; padding: 20px 0; background: rgb(255 255 255 / 70%); } .sec02-item { flex: 1; padding: 10px 0; border-right: 1px solid rgb(51 51 51 / 15%); text-align: center; } .sec02-item:last-child { border: none; } .sec02-item__ico { max-width: 22px; margin: auto; } .sec02-item__ttl { margin-top: 12px; color: var(--c-blue); font-family: var(--font-serif); font-size: 18px; font-weight: 600; } .sec02-item__sub { margin-top: 10px; color: #707070; font-size: 14px; font-weight: 400; line-height: 1.5; } .sec02-banner { max-width: 1040px; margin: 40px auto 0; } /* --- sec03 OUR SOLUTIONS ----------------------------------- */ .sec03 { position: relative; padding: 140px 0 100px; background: var(--c-bg-cream); } .sec03::before { content: ""; position: absolute; top: 30%; left: 0; width: 85vw; height: 817px; background: url("../img/top/bg_sec03_01.webp") no-repeat left top / cover; } .sec03-contentBox { position: relative; display: flex; gap: 50px; margin-right: calc(50% - 50vw); } .sec03-leftBox { width: 100%; max-width: 526px; } .sec03-rightBox { width: 100%; } .sec03-txt { margin-top: 40px; font-size: 19px; font-weight: 400; line-height: 1.75; } .sec03-list { display: flex; flex-direction: column; gap: 4px; margin-top: 40px; box-shadow: 10px 10px 26px rgb(0 0 0 / 6%); } .sec03-list__item { position: relative; padding: 18px 18px 18px 57px; border: 1px solid #fff; background-color: rgb(255 255 255 / 72%); font-family: var(--font-serif); font-size: 21px; font-weight: 500; } .sec03-list__item::before { content: ""; position: absolute; top: 24px; left: 20px; width: 25px; height: 25px; background: url("../img/cmn/ico_check04.webp") no-repeat center / contain; } .sec03-list__item .orange { color: var(--c-gold-deep); font-weight: 700; } .sec03 .cmn-ttl__jp { text-align: left; } .sec03 .cmn-ttl__en { display: flex; align-items: center; gap: 18px; margin-top: 20px; } .sec03 .cmn-ttl__en::after { content: ""; flex: 1; height: 1px; background: var(--c-text); opacity: .3; } /* スライダーの矢印・ページネーション */ .sec03-slider .splide__arrows { position: absolute; bottom: -80px; display: flex; gap: 10px; } .sec03-slider .splide__arrow { width: 56px; height: 56px; border: none; border-radius: 50%; background: url("../img/cmn/ico_arrow02.webp") no-repeat center / contain; opacity: 1; transition: opacity .3s var(--ease); } .sec03-slider .splide__arrow:hover { opacity: .7; } .sec03-slider .splide__arrow svg { display: none; } .sec03-slider .splide__arrow--next { transform: rotate(180deg); } .sec03-slider .splide__pagination { position: absolute; bottom: -52px; display: flex; justify-content: flex-start; margin-left: 142px; } .sec03-slider .splide__pagination__page { width: 40px; height: 1px; border: none; border-radius: 0; background: #c0b2ac; } .sec03-slider .splide__pagination__page.is-active { height: 2px; background: var(--c-text); } /* 医院情報カード（TOP） */ .sec03-ctaBox { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; padding: 40px; background: #fff; box-shadow: 0 0 16px rgb(0 0 0 / 10%); } .sec03-ctaBox__btnBox { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; } .sec03-ctaBox__btn { display: block; padding: 20px 10px; border: 1px solid var(--c-text); font-size: 16px; text-align: center; } .sec03-ctaBox__btn.orange { border-color: var(--c-gold); background: var(--c-gold); color: #fff; } .sec03-contactBox__logo { font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: .12em; text-align: center; } .sec03-infoBox { margin-top: 10px; text-align: center; } .sec03-infoBox__address { font-family: var(--font-serif); font-size: 12px; } .sec03-infoBox__walk { margin-top: 6px; font-size: 12px; } .sec03-infoBox__tel { margin-top: 6px; font-size: 15px; } .sec03-mapBox iframe { width: 100%; height: 100%; aspect-ratio: 580 / 380; } .sec03-mapBox img { width: 100%; height: auto; } .sec03-calendarBox { margin-top: 20px; padding: 0 18px 10px; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; } .sec03-calendarBox table { width: 100%; } .sec03-calendarBox th, .sec03-calendarBox td { padding: 6px 0; font-size: 14px; line-height: 1.3; text-align: center; vertical-align: middle; } .sec03-calendarBox th { font-size: 16px; font-weight: 500; } .sec03-calendarBox td { font-weight: 400; } .sec03-calendarBox td.orange { color: var(--c-gold); } .sec03-calendarBox tr th:first-child { position: relative; width: 27%; } .sec03-calendarBox tr th:first-child::before { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 29px; background: #fff; } .sec03-calendarBox tr td:first-child { position: relative; font-weight: 400; white-space: nowrap; } .sec03-calendarBox__txt { margin-top: 7px; font-size: 10px; } /* --- sec04 ご予約・お問い合わせ ＋ コンセプト --------------- */ .sec04 .cmn-ttl { position: relative; display: inline-block; } .sec04 .cmn-ttl::before { content: ""; position: absolute; top: 30px; left: calc(-1 * (50vw - 50%)); width: calc(50vw - 50% - 20px); height: 2px; background: #fff; } .sec04 .cmn-ttl__en { text-align: left; } .sec04-linkBox { position: relative; padding: 77px 0 170px; background: url("../img/top/bg_sec04_02.webp") center / cover; } .sec04-linkBox__ttl { display: flex; align-items: center; justify-content: space-between; } .sec04-linkBox__txt { color: #fff; font-size: 22px; line-height: 1.75; letter-spacing: .1em; } .sec04-linkBtns { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 1200px; padding: 40px 80px; background: #fff; box-shadow: 18px 18px 54px rgb(0 0 0 / 11%); } .sec04-linkBtns a { position: relative; display: grid; place-content: center; width: 100%; max-width: 330px; height: 109px; background: var(--c-text); color: #fff; font-size: 22px; font-weight: 500; text-align: center; } .sec04-linkBtns a small { font-size: 16px; font-weight: 400; } .sec04-linkBtns a.sec04-linkBtns__web { background: var(--c-gold); } .sec04-bottomBox { position: relative; z-index: -1; padding: 333px 0 100px; background: url("../img/top/bg_sec04_01.webp") center / cover; } .sec04-conceptBox { position: relative; max-width: 1120px; margin: auto; padding-top: 72px; border: 1px solid #fff; background: rgb(255 255 255 / 20%); box-shadow: inset 0 0 204px rgb(255 255 255 / 90%); /* CLAUDE.md §8-6：この中に position:fixed の要素を置かないこと */ backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); text-align: center; } .sec04-conceptBox::before { content: "Concept"; position: absolute; top: -95px; left: 50%; transform: translateX(-50%); color: var(--c-text-sub); font-family: var(--font-en); font-size: 216px; opacity: .05; text-transform: uppercase; } .sec04-conceptBox__lead { margin-top: 65px; padding: 34px 0 30px; background: url("../img/top/bg_sec04_03.webp") center / cover; } .sec04-conceptBox__txt { font-size: 28px; font-weight: 400; line-height: 1.6; letter-spacing: .1em; } .sec04-conceptBox__txt .orange { color: #e89608; font-size: 28px; text-decoration: underline; text-underline-offset: 10px; } .sec04-conceptBox__txt .orange .dot { position: relative; font-size: 36px; } .sec04-conceptBox__txt .orange .dot::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #e89608; } .sec04-ttl { font-family: var(--font-serif); font-size: 50px; font-weight: 500; line-height: 1.5; letter-spacing: .05em; } .sec04-subTtl { display: inline-block; margin-top: 30px; padding-bottom: 4px; border-top: 2px solid var(--c-gold-mid); border-bottom: 2px solid var(--c-gold-mid); color: var(--c-gold-mid); font-size: 36px; font-weight: 400; line-height: 1.75; letter-spacing: .1em; text-align: center; } .sec04-txtBox { margin-top: 35px; } .sec04-txtBox__txt { font-size: 17px; font-weight: 400; line-height: 2; letter-spacing: .06em; } .sec04-txtBox__txt + .sec04-txtBox__txt { margin-top: 12px; } .sec04-txtBox__txt strong { font-weight: 700; } .sec04-txtBox__txt .orange { color: var(--c-gold-mid); font-weight: 700; } /* --- sec05 当院が選ばれる理由 ------------------------------ */ .sec05 { position: relative; padding: 120px 0; background: linear-gradient(to bottom, transparent 30%, #f9f9f9 30%); } .sec05::before { content: ""; position: absolute; top: 198px; right: 0; z-index: -1; width: 30vw; height: 35vw; background: url("../img/top/bg_sec05_01.webp") no-repeat right top / contain; } .sec05::after { content: ""; position: absolute; top: 346px; left: 0; z-index: -1; width: 40vw; height: 35vw; background: url("../img/top/bg_sec05_02.webp") no-repeat left top / contain; } .sec05-ttl { display: flex; align-items: center; justify-content: center; gap: 28px; text-align: center; } .sec05-ttl::before, .sec05-ttl::after { content: ""; position: relative; top: -18px; flex: 1; height: 1px; background: #c2c2c2; box-shadow: 0 4px 0 #c2c2c2; } .sec05-reasonList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .sec05-reasonList__item { display: flex; padding: 245px 5px 5px; background: url("../img/top/img_sec05_01.webp") center / cover; box-shadow: 18px 18px 54px rgb(0 0 0 / 11%); } .sec05-reasonList__item.item02 { background-image: url("../img/top/img_sec05_02.webp"); } .sec05-reasonList__item.item03 { background-image: url("../img/top/img_sec05_03.webp"); } .sec05-reasonList__item.item02 .sec05-reasonList__subTtl { background: #dcf4e4; } .sec05-reasonList__item.item03 .sec05-reasonList__subTtl { background: #f2e9f3; } .sec05-reasonList__body { display: grid; grid-template-rows: auto auto 1fr; gap: 20px; width: 100%; padding: 27px 25px; border: 1px solid #fff; background: rgb(255 255 255 / 80%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-align: center; } .sec05-reasonList__ttl { font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; } .sec05-reasonList__subTtl { padding: 8px; background: #e8ecf8; font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; } .sec05-reasonList__txt { display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 400; line-height: 1.75; } .sec05-topBox { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 150px; } .sec05-topBox__ttl { color: var(--c-gold-deep); font-family: var(--font-serif); font-size: 44px; font-weight: 500; line-height: 1.4; } .sec05-topBox__ttl small { display: block; color: var(--c-text); font-size: 24px; } .sec05-topBox__mri { position: absolute; top: -16%; right: 0; font-family: var(--font-en); font-size: 220px; font-weight: 400; line-height: 1.5; letter-spacing: .05em; opacity: .05; } .sec05-topBox__txt { margin-top: 25px; font-size: 20px; font-weight: 400; line-height: 1.75; } .sec05-featureList { display: grid; gap: 5px; margin-top: 25px; } .sec05-featureList__item { position: relative; padding: 25px 10px 21px 75px; background: #fff; } .sec05-featureList__item::after { content: ""; position: absolute; top: 0; left: 0; width: 55px; height: 100%; background: url("../img/top/ico_sec05_01.webp") no-repeat center / contain; } .sec05-featureList__item.item02::after { background-image: url("../img/top/ico_sec05_02.webp"); } .sec05-featureList__item.item03::after { background-image: url("../img/top/ico_sec05_03.webp"); } .sec05-featureList__item.item02 .sec05-featureList__ttl { color: var(--c-green); } .sec05-featureList__item.item03 .sec05-featureList__ttl { color: var(--c-pink); } .sec05-featureList__ttl { color: var(--c-blue); font-family: var(--font-serif); font-size: 22px; font-weight: 600; } .sec05-bottomBox { margin-top: 50px; } .sec05-bottomBox__ttl { position: relative; padding: 10px 0 11px; border-top: 1px solid var(--c-text); border-bottom: 1px solid var(--c-text); font-family: var(--font-serif); font-size: 25px; font-weight: 500; line-height: 1.5; letter-spacing: .05em; text-align: center; } .sec05-bottomBox__ttl::before { content: ""; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 23.5px solid transparent; border-right: 23.5px solid transparent; border-top: 15px solid var(--c-text); } .sec05-bottomBox__txt { margin-top: 25px; } .sec05-testList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .sec05-testList__item { padding-bottom: 40px; background: #fff; box-shadow: 18px 18px 54px rgb(0 0 0 / 11%); text-align: center; } .sec05-testList__ttl { display: flex; align-items: center; gap: 15px; margin-top: 30px; color: var(--c-gold-deep); font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: .05em; } .sec05-testList__ttl::before, .sec05-testList__ttl::after { content: ""; flex: 1; height: 1px; background: var(--c-gold-deep); } .sec05-testList__txt { margin-top: 20px; font-size: 16px; font-weight: 400; line-height: 1.75; } .sec05-btn { margin-top: 25px; } .sec05-btn__link { display: block; width: 30px; height: 30px; margin: auto; background: url("../img/cmn/ico_arrow04.webp") no-repeat center / contain; } /* --- sec06 診療案内 ---------------------------------------- */ .sec06 { padding: 100px 10px; } .sec06 .cmn-inner { position: relative; padding: 60px 80px 82px; background: var(--c-bg-cream); } .sec06-ttl { display: flex; align-items: center; justify-content: center; gap: 36px; font-family: var(--font-serif); font-size: 40px; font-weight: 500; line-height: 1.3; letter-spacing: .2em; text-align: center; } .sec06-ttl::before, .sec06-ttl::after { content: ""; position: relative; flex: 1; height: 1px; background: var(--c-text); box-shadow: 0 4px 0 var(--c-text); opacity: .3; } .sec06-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .sec06-card { background: #fff; } .sec06-card__head { position: relative; z-index: 1; display: grid; grid-template-columns: 130px auto; align-items: center; margin-top: 25px; } .sec06-card__head::before { content: ""; position: absolute; top: 50%; right: 0; z-index: -1; transform: translateY(-50%); width: 100%; height: 84px; background: #eff3fd; } .sec06-card__icon { width: 100px; margin-left: 30px; } .sec06-card__ttl { color: var(--c-blue); font-family: var(--font-serif); font-size: 26px; font-weight: 500; letter-spacing: .1em; text-align: center; } .sec06-card__en { color: var(--c-text-mute); font-family: var(--font-en); font-size: 12px; font-weight: 400; text-align: center; } .sec06-card.green .sec06-card__head::before { background: #e8f9e9; } .sec06-card.green .sec06-card__ttl, .sec06-card.green .sec06-card__link a.is-accent { color: var(--c-green); } .sec06-card.pink .sec06-card__head::before { background: #fef0f8; } .sec06-card.pink .sec06-card__ttl { color: var(--c-pink); } .sec06-card__body { padding: 35px 30px 30px; } .sec06-card__list { display: grid; gap: 8px; text-align: center; } .sec06-card__link a { position: relative; display: block; padding: 16px 20px; border: 1px solid #ebebeb; font-size: 16px; font-weight: 400; text-align: left; } .sec06-card__link a::after { content: ""; position: absolute; top: 53%; right: 30px; transform: translateY(-50%) rotate(315deg); width: 8px; height: 8px; border-right: 2px solid var(--c-text); border-bottom: 2px solid var(--c-text); } .sec06-card__link a span { color: var(--c-text-mute); font-size: 13px; } .sec06-card__link a.is-accent { color: var(--c-blue); } .sec06-card__link a.other { display: inline-block; margin-top: 20px; padding: 0; border: none; color: var(--c-text-sub); font-size: 14px; text-align: center; } .sec06-card__link a.other::after { right: -15px; border-right: 2px solid var(--c-text-sub); border-bottom: 2px solid var(--c-text-sub); } .sec06-card__toggle { display: none; } .sec06-other { display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; margin-top: 30px; } .sec06-other__item a { position: relative; display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 24px; padding: 20px; background: #fff; } .sec06-other__item a::after { content: ""; position: absolute; top: 50%; right: 30px; transform: translateY(-50%) rotate(315deg); width: 13px; height: 13px; border-right: 1px solid var(--c-text); border-bottom: 1px solid var(--c-text); } .sec06-other__ttl { color: var(--c-gold-deep); font-family: var(--font-serif); font-size: 22px; font-weight: 500; } .sec06-other__txt { margin-top: 3px; font-size: 16px; } .sec06-btn { position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%); width: 320px; } /* --- sec07 設備・院内紹介 ---------------------------------- */ .sec07 { padding: 52px 0 0; } .sec07-subTtl { display: flex; align-items: center; gap: 15px; transform: translateY(-50%); color: var(--c-gold-deep); font-size: 24px; font-weight: 400; line-height: 1.75; letter-spacing: .1em; } .sec07-subTtl::before, .sec07-subTtl::after { content: ""; flex: 1; height: 1px; background: var(--c-gold-deep); } .sec07-contentBox { position: relative; margin-top: 62px; padding: 0 40px 40px; background: #f9f9f9; } .sec07-itemList { display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px 30px; margin-top: 26px; } .sec07-itemList__img img { width: 100%; } .sec07-itemList__ttl { margin-top: 14px; font-family: var(--font-serif); font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; } .sec07-itemList__txt { margin-top: 12px; font-size: 16px; font-weight: 400; line-height: 1.5; } .sec07-btns { display: flex; justify-content: center; gap: 20px; margin-top: 50px; } .sec07-links { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 100px; } .sec07-links__link { display: flex; flex-direction: column; justify-content: space-around; height: 322px; background: url("../img/top/img_sec07_09.webp") no-repeat center / cover; color: #fff; } .sec07-links__link.staff { background-image: url("../img/top/img_sec07_10.webp"); } .sec07-links__ttl { position: relative; display: flex; align-items: center; color: #fff; font-family: var(--font-serif); font-size: 38px; font-weight: 500; } .sec07-links__ttl span { margin: 0 12px; } .sec07-links__ttl::before { content: ""; width: 40px; height: 1px; background: rgb(255 255 255 / 50%); } .sec07-links__ttl::after { content: ""; flex: 1; height: 1px; background: rgb(255 255 255 / 50%); } .sec07-links__bottom { display: grid; grid-template-columns: auto 88px; align-items: center; justify-content: space-between; width: 100%; padding: 0 50px; } .sec07-links__txt { font-size: 20px; font-weight: 400; line-height: 1.75; } .sec07-links__ico { width: 100%; max-width: 88px; } /* --- sec08 院長ブログ -------------------------------------- */ .sec08 { padding: 80px 0; } .sec08 .cmn-ttl__jp { font-size: 36px; } .sec08 .cmn-ttl__en { margin-top: 7px; } /* 予約CTA「アクセス」ボタン（sec04 / フッター共通） */ .sec04 .sec04-linkBtns a.sec04-linkBtns__access, .footer .footer-linkBtns a.footer-linkBtns__access { background: var(--c-access); } /* ============================================================ SP（〜768px） ============================================================ */ @media screen and (max-width: 768px) { .topMv { display: block; height: auto; min-height: 0; max-height: none; overflow: hidden; } .topMv-slide { height: 561px; } .topMv-img { height: 561px; } .topMv-contentBox { top: 53%; } .topMv-imgBox { max-width: 288px; height: 125px; } .topMv-txtBox { margin-top: 20px; } .topMv-txtBox__ttl { font-size: 22px; } .topMv-listBox-list { flex-direction: column; margin-top: 15px; } .topMv-listBox-list__item { width: 340px; height: 71px; margin: auto; font-size: 12px; letter-spacing: .08em; } .topMv-listBox-list__item strong { margin-bottom: 3px; font-size: 18px; } .sec01 { padding: 2.326vw 0; } .sec01::before { height: 209px; background-size: cover; } .sec01-topBox { margin: 0 -10px; } .sec01-cardList { gap: 5px; } .sec01-card__link { position: absolute; inset: 0; z-index: 1; display: block; } .sec01-card__icon { max-width: 54px; margin-top: -27px; } .sec01-card__body { padding: 8px 10px 15px; } .sec01-card__ttl { font-size: 16px; letter-spacing: .07em; } .sec01-btn { margin-top: 12px; } .sec01-bottomBox { grid-template-columns: 1fr; gap: 5.814vw; padding: 25px 4.651vw 30px; } .sec01-bottomBox .cmn-bt01 { order: 3; margin: 0 auto; } .sec01-ttlBox { display: contents; } .sec01 .cmn-ttl { order: 1; } .sec01 .cmn-newsList { order: 2; } .sec01-btn { order: 3; } .sec01 .cmn-ttl__jp { font-size: 22px; } .sec01 .cmn-ttl__en { margin-top: 2px; font-size: 14px; } .sec02 { padding: 60px 0; background-image: url("../img/top/bg_sec02_01_sp.webp"); } .sec02-contentBox { display: flex; flex-direction: column-reverse; gap: 35px; } .sec02-ttl { writing-mode: horizontal-tb; text-orientation: mixed; padding-bottom: 32px; font-size: 28px; line-height: 1.6; letter-spacing: 0; text-align: center; } .sec02-check::before { content: none; } .sec02-box { padding-bottom: 54px; } .sec02-head { height: auto; padding: 18px; justify-content: center; background: linear-gradient(90deg, rgb(99 136 238 / 40%) 0%, rgb(99 136 238 / 100%) 50%, rgb(99 136 238 / 40%) 100%); } .sec02-box.green .sec02-head { background: linear-gradient(90deg, rgb(21 198 39 / 40%) 0%, rgb(21 198 39 / 100%) 50%, rgb(21 198 39 / 40%) 100%); } .sec02-box.pink .sec02-head { background: linear-gradient(90deg, rgb(243 104 180 / 40%) 0%, rgb(243 104 180 / 100%) 48%, rgb(243 104 180 / 40%) 100%); } .sec02-head__left { flex-direction: column; gap: 0; justify-content: center; } .sec02-head__main { font-size: 24px; } .sec02-head__main::before { content: none; } .sec02-head__sub { position: relative; margin-top: -3px; font-size: 18px; } .sec02-head__sub::before, .sec02-head__sub::after { content: ""; position: absolute; top: 50%; width: 20px; height: 1px; background: #fff; } .sec02-head__sub::before { right: -28px; } .sec02-head__sub::after { left: -28px; } .sec02-head__btn { top: auto; bottom: 0; width: 100%; height: 54px; } .sec02-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 25px 15px; background: #fff; } .sec02-item { border-right: none; } .sec02-item:nth-child(-n+2) { border-bottom: 1px solid rgb(51 51 51 / 15%); } .sec02-box.green .sec02-item:last-child, .sec02-box.pink .sec02-item:last-child { grid-column: 1 / -1; } .sec02-item__ico { max-width: 26px; } .sec02-item__ttl { margin-top: 6px; font-size: 16px; } .sec02-item__sub { margin-top: 4px; font-size: 13px; } .sec03 { padding: 50px 10px 40px; } .sec03::before { top: 18.5%; width: 330px; height: 874px; background-image: url("../img/top/bg_sec03_01_sp.webp"); } .sec03-contentBox { flex-direction: column; gap: 40px; } .sec03-leftBox { padding-right: 30px; } .sec03-txt { margin-top: 30px; font-size: 14px; } .sec03-list { margin-top: 20px; } .sec03-list__item { padding: 14px 14px 14px 43px; font-size: 17px; } .sec03-list__item::before { top: 50%; left: 15px; transform: translateY(-50%); width: 20px; height: 20px; } .sec03 .cmn-ttl__en { margin-top: 16px; } .sec03-slider .splide__arrows { bottom: -60px; gap: 6px; } .sec03-slider .splide__arrow { width: 40px; height: 40px; } .sec03-slider .splide__pagination { bottom: -40px; margin-left: 101px; } .sec03-ctaBox { grid-template-columns: 1fr; gap: 2.326vw; margin-top: 100px; padding: 0; } .sec03-ctaBox__btnBox { grid-template-columns: 1fr; gap: 10px; } .sec03-ctaBox__btn { padding: 16px 0 19px; font-size: 14px; } .sec03-contactBox { padding: 30px 20px 20px; } .sec03-contactBox__logo { font-size: 4.651vw; } .sec03-infoBox__address, .sec03-infoBox__walk { font-size: 11px; } .sec03-infoBox__tel { margin-top: 4px; font-size: 13px; } .sec03-mapBox iframe { aspect-ratio: 350 / 300; } .sec03-calendarBox { margin-top: 3.488vw; padding: 0; } .sec03-calendarBox tr th:first-child { width: 31%; } .sec03-calendarBox th { font-size: 3.721vw; } .sec03-calendarBox th, .sec03-calendarBox td { font-size: 13px; } .sec03-calendarBox tr td:first-child { font-size: 12px; } .sec04 .cmn-ttl::before { top: 20px; height: 1px; } .sec04 .cmn-ttl::after { content: ""; position: absolute; top: 20px; right: calc(-1 * (50vw - 50%)); width: calc(50vw - 50% - 20px); height: 1px; background: #fff; } .sec04 .cmn-ttl__en { text-align: center; } .sec04-linkBox { padding: 40px 0 234px; background-image: url("../img/top/bg_sec04_02_sp.webp"); } .sec04-linkBox__ttl { flex-direction: column; } .sec04-linkBox__txt { margin-top: 20px; font-size: 17px; text-align: center; } .sec04-linkBtns { grid-template-columns: 1fr; max-width: 310px; padding: 20px; } .sec04-linkBtns a { height: 70px; font-size: 18px; } .sec04-linkBtns a small { font-size: 14px; } .sec04-bottomBox { padding: 208px 10px 10px; background: var(--c-bg-cream) url("../img/top/bg_sec04_01_sp.webp") no-repeat top / contain; } .sec04-conceptBox { padding: 40px 20px 0; } .sec04-conceptBox::before { top: -24px; font-size: 71px; } .sec04-conceptBox__lead { margin: 25px -20px 0; padding: 20px; background-image: url("../img/top/bg_sec04_03_sp.webp"); } .sec04-conceptBox__txt { font-size: 16px; line-height: 1.8; text-shadow: 1px 0 rgb(255 255 255 / 60%), -1px 0 rgb(255 255 255 / 60%), 0 1px rgb(255 255 255 / 60%), 0 -1px rgb(255 255 255 / 60%), 1px 1px rgb(255 255 255 / 60%), -1px -1px rgb(255 255 255 / 60%), 1px -1px rgb(255 255 255 / 60%), -1px 1px rgb(255 255 255 / 60%); } .sec04-conceptBox__txt .orange { font-size: 16px; text-underline-offset: 6px; } .sec04-conceptBox__txt .orange .dot { font-size: 20px; } .sec04-conceptBox__txt .orange .dot::before { top: -4px; width: 3px; height: 3px; border: 1px solid rgb(255 255 255 / 60%); } .sec04-ttl { font-size: 28px; } .sec04-subTtl { width: 100%; padding: 10px 0; border-top-width: 1px; border-bottom-width: 1px; font-size: 20px; line-height: 1.5; } .sec04-txtBox { margin-top: 20px; } .sec04-txtBox__txt { font-size: 12px; line-height: 1.7; } .sec05 { z-index: 2; padding: 11.628vw 0 30px; background: linear-gradient(to bottom, transparent 10%, #f9f9f9 10%); } .sec05::before { top: 135px; width: 36vw; height: 45vw; } .sec05::after { top: 43%; width: 80vw; height: 65vw; } .sec05-ttl { gap: 5px; } .sec05-ttl::before, .sec05-ttl::after { top: -13px; } .sec05-ttl::before { margin-left: -20px; } .sec05-ttl::after { margin-right: -20px; } .sec05-reasonList { grid-template-columns: 1fr; } .sec05-reasonList__item { padding: 156px 5px 5px; background: #fff url("../img/top/img_sec05_01_sp.webp") no-repeat center / cover; } .sec05-reasonList__item.item02 { background-image: url("../img/top/img_sec05_02_sp.webp"); } .sec05-reasonList__item.item03 { background-image: url("../img/top/img_sec05_03_sp.webp"); } .sec05-reasonList__body { gap: 15px; padding: 20px 0 15px; } .sec05-reasonList__ttl { font-size: 20px; } .sec05-reasonList__subTtl { padding: 7px; font-size: 16px; } .sec05-topBox { grid-template-columns: 1fr; margin-top: 100px; } .sec05-topBox__ttl { font-size: 36px; text-align: center; } .sec05-topBox__ttl small { font-size: 20px; } .sec05-topBox__mri { top: -37px; right: auto; left: 50%; transform: translateX(-50%); font-size: 120px; } .sec05-topBox__txt { margin-top: 10px; font-size: 16px; text-align: center; } .sec05-topBox__img { margin-top: 30px; } .sec05-featureList { margin-top: 0; } .sec05-featureList__item { padding: 30px 5px 15px; text-align: center; } .sec05-featureList__item::after { content: "01"; width: 100%; height: 20px; padding-bottom: 2px; background: var(--c-blue); color: #fff; font-family: var(--font-en); font-size: 18px; line-height: 22px; text-align: center; } .sec05-featureList__item.item02::after { content: "02"; background: var(--c-green); } .sec05-featureList__item.item03::after { content: "03"; background: var(--c-pink); } .sec05-featureList__ttl { font-size: 18px; } .sec05-featureList__txt { margin-top: 7px; font-size: 14px; } .sec05-bottomBox { margin-top: 20px; } .sec05-bottomBox__ttl { padding: 9px; font-size: 20px; } .sec05-bottomBox__txt { display: flex; margin-top: 12px; font-size: 11px; } .sec05-testList { gap: 5px; margin-top: 36px; } .sec05-testList__item { padding-bottom: 15px; } .sec05-testList__ttl { justify-content: center; margin-top: 15px; font-size: 14px; } .sec05-testList__ttl::before, .sec05-testList__ttl::after { content: none; } .sec05-btn { margin-top: 15px; } .sec06 { padding: 30px 10px; } .sec06 .cmn-inner { padding: 30px 15px 60px; } .sec06-ttl { gap: 15px; padding: 0 15px; font-size: 28px; } .sec06-cards { grid-template-columns: 1fr; gap: 15px; margin-top: 25px; } .sec06-card__head { grid-template-columns: 110px auto; } .sec06-card__head::before { height: 68px; } .sec06-card__icon { width: 80px; } .sec06-card__ttl { font-size: 20px; } .sec06-card__en { font-size: 11px; } .sec06-card__body { padding: 26px 20px 20px; } .sec06-card__list { display: none; } .sec06-card__body.is-open .sec06-card__list { display: block; } .sec06-card__toggle { position: relative; display: block; width: 100%; padding: 16px 20px; border: 1px solid #ebebeb; background: #fff; font-size: 16px; font-weight: 400; text-align: center; } .sec06-card__toggle::after { content: ""; position: absolute; top: 50%; right: 20px; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; border-right: 1px solid var(--c-text); border-bottom: 1px solid var(--c-text); } .sec06-other { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; } .sec06-other__item a { grid-template-columns: 60px 1fr; gap: 19px; padding: 13px 15px 17px; } .sec06-other__item a::after { top: 36px; right: 20px; width: 10px; height: 10px; } .sec06-other__ttl { font-size: 20px; } .sec06-other__txt { margin-top: 0; font-size: 14px; } .sec07 { padding: 13.953vw 0 0; } .sec07-subTtl { gap: 20px; font-size: 16px; text-align: center; } .sec07-contentBox { padding: 0 0 15px; } .sec07-itemList { grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 10px; } .sec07-itemList__ttl { margin-top: 10px; font-size: 15px; text-align: center; } .sec07-itemList__txt { margin-top: 8px; padding-bottom: 12px; font-size: 12px; text-align: center; } .sec07-btns { flex-direction: column; gap: 15px; margin-top: 30px; } .sec07-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 50px; padding: 0 15px; } .sec07-links__link { height: 140px; justify-content: center; gap: 20px; background-image: url("../img/top/img_sec07_09_sp.webp"); } .sec07-links__link.staff { background-image: url("../img/top/img_sec07_10_sp.webp"); } .sec07-links__ttl { font-size: 20px; } .sec07-links__ttl span { margin: 0 7px; } .sec07-links__ttl::before { flex: 1; width: auto; } .sec07-links__bottom { display: flex; justify-content: center; } .sec07-links__ico { width: 36px; height: 36px; } .sec08 { padding: 50px 0; } .sec08 .cmn-ttl__jp { font-size: 28px; } } /* --- sec06 その他リンクのアイコン --------------------------- */ .sec06-other__ico img { width: 100%; } .sec06-other__ico.is-dummy { flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; background: #ddd; } @media screen and (max-width: 768px) { .sec06-other__ico.is-dummy { width: 60px; height: 60px; } } /* --- sec08 固有の上書き（参照元の配信CSSに存在） ------------ */ .sec08 .sec01-bottomBox { margin-top: 0; } .sec08-btn { margin-top: 40px; } @media screen and (max-width: 768px) { .sec08-btn { margin-top: 25px; } } /* ===== 10-form.css ===== */ /* ============================================================ 10-form — 応募フォーム（Contact Form 7） ============================================================ */ .box-contact { padding: 60px 60px 70px; background-color: #eff3fd; } .box-contact .box-ttl { margin: 0 0 20px; padding-bottom: 15px; border-bottom: 1px solid rgb(99 136 238 / 30%); font-size: 28px; font-weight: 600; letter-spacing: .1em; text-align: center; } .box-contact .tac { line-height: 1.5; } /* --- 入力表 ------------------------------------------------ */ .contact-form table { width: 100%; min-width: 0; margin: 0 0 50px; border: none; /* .local__content table の外枠を打ち消す */ border-collapse: collapse; } .contact-form table tr { border: none; border-bottom: 1px dashed #e0e0e0; } .contact-form table th { width: 30%; padding: 20px 40px 20px 0; border: none; background-color: transparent; color: var(--c-text); font-weight: 700; text-align: left; vertical-align: middle; } .contact-form table td { width: 70%; padding: 20px 0; border: none; border-radius: 0; background-color: transparent; color: var(--c-text); font-size: 16px; font-weight: 400; line-height: 1.7; text-align: left; } .contact-form .hissu { display: inline-block; margin-left: 15px; padding: 1px 8px; border-radius: 3px; background: #c33; color: #fff; font-size: 10px; vertical-align: 1px; } .contact-form .is-text-left { text-align: left; } /* --- 入力欄 ------------------------------------------------ */ .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="number"], .contact-form input[type="date"], .contact-form select, .contact-form textarea { appearance: none; -webkit-appearance: none; width: 100%; min-height: 50px; margin: 0; padding: 10px; border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-bg-gray); color: var(--c-text); font-family: inherit; font-size: 16px; } .contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form input[type="tel"]:focus, .contact-form input[type="number"]:focus, .contact-form input[type="file"]:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 2px rgb(99 136 238 / 20%); } .contact-form textarea { height: 200px; resize: vertical; } .contact-form .wrap { display: flex; align-items: center; gap: 15px; } .contact-form .wpcf7-form-control-wrap { flex: 1; } .contact-form .unit { margin: 10px 10px 0; } ul.list-col1 { padding-left: 0; } ul.list-col1 li { list-style: none; } /* --- ラジオ ------------------------------------------------ */ .wpcf7-radio .wpcf7-list-item { display: inline-block; margin: 0 20px 0 0; } .wpcf7-radio label { position: relative; display: flex; align-items: flex-start; } .wpcf7-radio input[type="radio"] { appearance: none; -webkit-appearance: none; flex: 0 0 18px; display: inline-block; width: 18px; height: 18px; margin: 6px 10px 0 0; border: 1px solid #e0e0e0; border-radius: 50px; background-color: var(--c-bg-gray); } .wpcf7-radio input[type="radio"]:checked + span::before { content: ""; position: absolute; top: 11px; left: 5px; z-index: 0; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-blue); } .wpcf7-radio input[type="radio"]:focus-visible { outline: none; border-color: var(--c-blue); } /* --- チェックボックス -------------------------------------- */ .wpcf7-checkbox .wpcf7-list-item { display: inline-block; margin: 0 20px 0 0; } .wpcf7-checkbox label { position: relative; display: flex; align-items: flex-start; } .wpcf7-checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 18px; display: inline-block; width: 18px; height: 18px; margin: 6px 10px 0 0; border: 1px solid #e0e0e0; background-color: var(--c-bg-gray); } .wpcf7-checkbox input[type="checkbox"]:checked + span::before { content: ""; position: absolute; top: 9px; left: 6px; z-index: 0; display: block; width: 6px; height: 10px; border: solid var(--c-blue); border-width: 0 2px 2px 0; transform: rotate(45deg); } .wpcf7-checkbox input[type="checkbox"]:focus-visible { outline: none; border-color: var(--c-blue); } /* --- セレクト ---------------------------------------------- */ .contact-form select::-ms-expand { display: none; } .contact-form .select-wrapper { position: relative; } .contact-form .select-wrapper::after { content: ""; position: absolute; top: 22px; right: 15px; border-style: solid; border-width: 8px 5px 0 5px; border-color: var(--c-blue) transparent transparent transparent; pointer-events: none; } /* --- ファイル ---------------------------------------------- */ .contact-form .file-label { display: inline-block; padding: 10px 40px; border: 1px solid var(--c-line); border-radius: 4px; background-color: var(--c-bg-gray); color: var(--c-text); cursor: pointer; font-size: 13px; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .contact-form .file-label:hover { border-color: var(--c-blue); background-color: var(--c-blue); color: #fff; } .contact-form .file-label input[type="file"] { display: none; } .contact-form .file-message { margin-top: 5px; font-size: 13px; } .contact-form .filebutton { display: inline-block; } .contact-form .fileflex { display: flex; flex-wrap: wrap; gap: 15px; } /* --- 日付・生年月日 ---------------------------------------- */ .contact-form .date-picker input[type="text"] { padding-left: 50px; background-repeat: no-repeat; background-position: left 15px center; background-size: 20px auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23888'%3E%3Cpath d='M149 104c16 0 29-13 29-29V29c0-16-13-29-29-29s-29 13-29 29v46c0 16 13 29 29 29zM363 104c16 0 29-13 29-29V29c0-16-13-29-29-29s-29 13-29 29v46c0 16 13 29 29 29zM435 41h-18v33c0 30-24 55-54 55s-55-25-55-55V41H204v33c0 30-25 55-55 55s-54-25-54-55V41H77c-39 0-70 31-70 70v331c0 39 31 70 70 70h358c39 0 70-31 70-70V111c0-39-31-70-70-70zm36 401c0 20-16 36-36 36H77c-20 0-36-16-36-36V155h430v287z'/%3E%3Crect x='176' y='384' width='63' height='63'/%3E%3Crect x='176' y='287' width='63' height='63'/%3E%3Crect x='78' y='384' width='63' height='63'/%3E%3Crect x='78' y='287' width='63' height='63'/%3E%3Crect x='371' y='189' width='63' height='63'/%3E%3Crect x='273' y='189' width='63' height='63'/%3E%3Crect x='273' y='287' width='63' height='63'/%3E%3Crect x='371' y='384' width='63' height='63'/%3E%3Crect x='371' y='287' width='63' height='63'/%3E%3Crect x='273' y='384' width='63' height='63'/%3E%3Crect x='176' y='189' width='63' height='63'/%3E%3Crect x='78' y='189' width='63' height='63'/%3E%3C/svg%3E"); } .contact-form .reserve-date { display: flex; } .contact-form .reserve-date .date { width: 35%; margin-right: 15px; } .contact-form .reserve-date .time { display: flex; } .contact-form .reserve-date .select-wrapper { width: 100px; } .contact-form .reserve-date .unit { margin: 10px 10px 0; } .contact-form .birth { display: flex; } .contact-form .birth .item { display: flex; } .contact-form .birth .select-wrapper { width: 100px; } .contact-form .birth .unit { margin: 10px 10px 0; } /* --- 送信ボタン -------------------------------------------- */ .contact-form .submit-btn, .contact-form .wpcf7cp-btns { display: flex; justify-content: center; } .contact-form .submit-btn [type="submit"] { -webkit-appearance: none; width: 250px; padding: 22px 40px; border: 1px solid var(--c-blue); border-radius: 4px; outline: none; background: var(--c-blue); color: #fff; cursor: pointer; font-family: inherit; font-size: 16px; letter-spacing: 3px; transition: opacity .3s var(--ease); } .contact-form .submit-btn [type="submit"]:hover { opacity: .7; } .contact-form .submit-btn [type="submit"].back-btn { margin-right: 50px; border: none; background: #888; } .contact-form .wpcf7-not-valid-tip { margin: 5px 0 0; color: #c33; font-size: 11px; font-weight: 700; text-align: left; } .contact-form .wpcf7-spinner { display: none; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { margin: 30px 0 0; border: none; background-color: #c33; color: #fff; font-weight: 700; text-align: center; } .wpcf7 div.wpcf7-response-output.wpcf7-validation-errors { display: none !important; } /* --- 送信中 ------------------------------------------------ */ .loading-wrapper { position: fixed; top: 0; left: 0; z-index: 10000; display: none; width: 100vw; height: 100vh; background-color: rgb(0 0 0 / 25%); } .loading-wrapper.is-visible { display: block !important; } .loading-send { position: fixed; top: 50%; left: 50%; z-index: 10001; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 35px 70px; border-radius: 5px; background: #fff; box-shadow: 0 .4rem .8rem -.1rem rgb(0 32 128 / 10%), 0 0 0 1px #f0f2f7; font-weight: 700; text-align: center; white-space: nowrap; } .loading-send-txt { margin-bottom: 2.326vw; } .loading-send-dot, .loading-send-dot::before, .loading-send-dot::after { content: ""; position: absolute; top: 0; display: inline-block; width: 10px; height: 10px; border-radius: 5px; background-color: var(--c-blue); animation: dot-flashing 1s infinite alternate; } .loading-send-dot { position: relative; margin-top: 5px; animation-delay: .5s; } .loading-send-dot::before { left: -15px; animation-delay: 0s; } .loading-send-dot::after { left: 15px; animation-delay: 1s; } @keyframes dot-flashing { 0% { background-color: #6388ee; } 50%, 100% { background-color: #ccc; } } /* --- 横スクロールできる表のヒント -------------------------- */ .table-scroll-wrapper { position: relative; overflow: auto; } .table-scroll-wrapper.scroll-hint::after { content: "※横にスクロールできます。"; display: none; margin-top: 10px; color: var(--c-text-sub); font-size: 12px; text-align: center; } /* ============================================================ SP ============================================================ */ @media screen and (max-width: 768px) { .box-contact { padding: 30px 25px; } .box-contact .box-ttl { margin-bottom: 15px; font-size: 20px; } .box-contact .tac { font-size: 15px; } .contact-form table { margin: 0 0 30px; } .contact-form table th { display: block; width: 100%; padding: 15px 0 10px; } .contact-form table td { display: block; width: 100%; padding: 0 0 15px; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="number"], .contact-form input[type="date"], .contact-form select, .contact-form textarea { min-height: 10.233vw; /* get_vw(44) */ padding: 2.326vw; font-size: 3.256vw; } .contact-form textarea { height: 34.884vw; } .contact-form .wrap { gap: 2.326vw; } .contact-form .unit { margin: 2.326vw 2.326vw 0; } .wpcf7-radio .wpcf7-list-item, .wpcf7-checkbox .wpcf7-list-item { margin: 0 3.488vw 0 0; } .wpcf7-radio input[type="radio"], .wpcf7-checkbox input[type="checkbox"] { flex-basis: 3.721vw; width: 3.721vw; height: 3.721vw; margin: 1.395vw 2.326vw 0 0; } .wpcf7-radio input[type="radio"]:checked + span::before { top: 2.093vw; left: 1.163vw; width: 1.395vw; height: 1.395vw; } .wpcf7-checkbox input[type="checkbox"]:checked + span::before { top: 1.86vw; left: 1.163vw; width: 1.163vw; height: 1.86vw; } .contact-form .select-wrapper::after { top: 4.186vw; right: 2.791vw; border-width: 1.395vw .93vw 0 .93vw; } .contact-form .file-label { padding: 1.86vw 6.977vw; font-size: 2.791vw; } .contact-form .file-message { margin-top: 1.163vw; font-size: 2.558vw; } .contact-form .fileflex { gap: 10px; justify-content: center; } .contact-form .date-picker input[type="text"] { padding-left: 9.302vw; background-position: left 2.791vw center; background-size: 3.721vw auto; } .contact-form .reserve-date { display: block; } .contact-form .reserve-date .date { width: 100%; margin: 0 0 2.326vw; } .contact-form .reserve-date .select-wrapper, .contact-form .birth .select-wrapper { width: 100%; } .contact-form .birth { flex-wrap: wrap; } .contact-form .birth .item { width: 100%; } .contact-form .birth .item:not(:first-child) { margin-top: 3.488vw; } .contact-form .submit-btn [type="submit"] { width: 250px; padding: 3.488vw; font-size: 3.256vw; } .contact-form .submit-btn [type="submit"].back-btn { margin-right: 5.814vw; } .contact-form .wpcf7-not-valid-tip { margin: 1.163vw 0 0; font-size: 2.326vw; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { margin: 4.651vw 0 0; } .loading-send { padding: 5.814vw 11.628vw; } .loading-send-txt { font-size: 3.256vw; } .loading-send-dot, .loading-send-dot::before, .loading-send-dot::after { width: 1.86vw; height: 1.86vw; border-radius: .93vw; } .loading-send-dot { margin-top: 1.163vw; } .loading-send-dot::before { left: -2.791vw; } .loading-send-dot::after { left: 2.791vw; } .table-scroll-wrapper.scroll-hint::after { margin-top: 1.86vw; font-size: 2.326vw; } } /* ===== 11-slider.css ===== */ /* ============================================================ 11-slider — スライダー（Splide の置き換え） 参照元は Splide（バンドル827KBの一部）を使っていたが、 実際の用途はフェード切替とループ表示だけなので自前で持つ。 CLAUDE.md §8-11：JSが失敗しても画像が消えないよう、 「1枚目は常に表示」を CSS の初期状態にしておく。 ============================================================ */ .splide { position: relative; } .splide__track { position: relative; overflow: hidden; } .splide__list { display: block; margin: 0; padding: 0; list-style: none; } .splide__slide { margin: 0; padding: 0; list-style: none; } .splide__slide img { width: 100%; } /* JS未実行時：1枚目だけ表示（2枚目以降は積まず、素直に隠す） */ .splide:not(.is-ready) .splide__slide:not(:first-child) { display: none; } /* JS実行後：フェードで重ねる */ .splide.is-ready .splide__track { display: grid; } .splide.is-ready .splide__list { display: contents; } .splide.is-ready .splide__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility .8s var(--ease); } .splide.is-ready .splide__slide.is-active { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: reduce) { .splide.is-ready .splide__slide { transition: none; } } /* ページネーション・矢印の基本形（見た目は 09-top.css 側で調整） */ .splide__pagination { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } .splide__pagination__page { padding: 0; border: none; background: none; cursor: pointer; } .splide__arrows { display: flex; } .splide__arrow { padding: 0; border: none; background: none; cursor: pointer; } /* ===== 12-access-post.css ===== */ /* ============================================================ 12-access-post — アクセスページ／記事ページ／診療時間表 .cmn-access* … /access/ の地図・院情報ブロック .single-post* … 院長ブログの記事ページ table.is-schedule… 診療時間表（SPでも折り返さず表のまま出す） ============================================================ */ /* --- アクセス ---------------------------------------------- */ .cmn-access { position: relative; padding: 120px 50px 225px; background: var(--c-bg-beige); } .cmn-access::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 120px 0 0 0; background: #fff; } .cmn-access .cmn-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; } .cmn-access .cmn-inner.access01 { margin-bottom: 100px; } .cmn-access .cmn-inner.access02 { flex-direction: column; } .cmn-access-txtBox { width: 100%; max-width: 520px; } .cmn-access-txtBox__logo { width: 100%; max-width: 420px; margin-bottom: 32px; } .cmn-access-txtBox-list-item { display: flex; align-items: center; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line-strong); } .cmn-access-txtBox-list-item p { font-size: 16px; line-height: 1.6; } .cmn-access-txtBox-list-item p.ttl { width: 110px; font-weight: 700; } .cmn-access-txtBox-list-item p.txt { width: calc(100% - 110px); font-weight: 500; } .cmn-access-mapBox { width: 100%; max-width: 600px; } .cmn-access-mapBox-map { width: 100%; height: 600px; margin-bottom: 40px; border-radius: var(--radius-lg); overflow: hidden; } .cmn-access-mapBox-map iframe { width: 100%; height: 100%; border: 0; } .cmn-access-mapBox-bt { text-align: center; } .cmn-access-mapBox-bt a { position: relative; padding-left: 30px; } /* 参照元は ico_arrow02_org.svg を参照していたが本番で404。同じ形をSVGで描く */ .cmn-access-mapBox-bt a::before { content: ""; position: absolute; inset: 3px auto 0 0; margin: auto; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.2' fill='none' stroke='%23DE9821' stroke-width='1.4'/%3E%3Cpath d='M8 6l4.5 4L8 14' fill='none' stroke='%23DE9821' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / 100% auto; } .cmn-access-mapBox-bt a span { font-size: 16px; font-weight: 500; line-height: 1.2; text-decoration: underline; } .cmn-access-mapBox02 { margin-top: 60px; } /* --- 記事ページ（院長ブログ） ------------------------------ */ .single-post { width: 100%; padding: 80px 0; } .single-post__inner { display: flex; gap: 40px; } .single-post__sidebar { flex-shrink: 0; width: 270px; } .single-post__sidebar-title { width: 100%; margin-top: 15px; padding: 15px; background-color: #eee; color: #000; font-size: 15px; font-weight: 500; line-height: 19px; text-align: center; } .single-post__sidebar-title:first-child { margin-top: 0; } .single-post__card { margin-top: 15px; } .single-post__card-list { display: flex; flex-direction: column; } .single-post__card-inner { position: relative; display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 15px 10px; transition: opacity .3s var(--ease); } .single-post__card-inner::after { content: ""; position: absolute; bottom: 0; left: 0; transform: translateY(-50%); width: 100%; height: 1px; background-color: #ccc; } @media (hover: hover) { .single-post__card-inner:hover { opacity: .5; } } .single-post__card-date { color: #000; font-size: 12px; font-weight: 500; line-height: 16px; } .single-post__card-title { font-size: 13px; font-weight: 500; line-height: 17px; } .single-post__main { display: flex; flex-direction: column; flex-grow: 1; gap: 40px; width: auto; min-width: 1px; max-width: 100%; } .single-post__content { width: 100%; padding: 40px; background-color: rgb(238 238 238 / 10%); } .single-post__content h2 { font-size: 36px; font-weight: 500; line-height: 44px; } .single-post__content h3 { font-size: 32px; font-weight: 500; line-height: 40px; } .single-post__content h4 { font-size: 28px; font-weight: 500; line-height: 36px; } .single-post__content h5 { font-size: 24px; font-weight: 500; line-height: 32px; } .single-post__content h6 { font-size: 20px; font-weight: 500; line-height: 28px; } .single-post__content p { font-size: 16px; font-weight: 500; line-height: 24px; } .single-post__content a { font-size: 16px; font-weight: 500; line-height: 24px; text-decoration: underline; } @media (hover: hover) { .single-post__content a:hover { text-decoration: none; } } /* --- 診療時間表 -------------------------------------------- */ .local__content table.is-schedule thead th { padding: 14px 8px; font-size: 16px; font-weight: 500; line-height: 1.3; text-align: center; vertical-align: middle; } .local__content table.is-schedule tbody th[scope="row"] { padding: 14px 8px; background-color: #fff; color: var(--c-text); font-size: 14px; font-weight: 400; line-height: 1.3; text-align: center; vertical-align: middle; white-space: nowrap; } .local__content table.is-schedule tbody td { padding: 14px 4px; font-size: 14px; font-weight: 400; line-height: 1.3; text-align: center; vertical-align: middle; } .local__content table.is-schedule tbody td.orange { color: var(--c-gold); } .local__content table.is-schedule thead tr th:first-child, .local__content table.is-schedule tbody tr th:first-child { width: 27%; } /* ============================================================ SP（〜768px） ============================================================ */ @media screen and (max-width: 768px) { .cmn-access { padding: 60px 20px 270px; } .cmn-access::before { border-radius: 0 60px 0 0; } .cmn-access .cmn-inner { display: block; } .cmn-access .cmn-inner.access01 { margin-bottom: 80px; } .cmn-access-txtBox { max-width: 100%; } .cmn-access-txtBox__logo { margin: 0 auto 32px; } .cmn-access-txtBox-list-item { display: block; margin-bottom: 32px; padding-bottom: 0; border-bottom: none; } .cmn-access-txtBox-list-item p.ttl { width: 100%; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line-strong); } .cmn-access-txtBox-list-item p.txt { width: 100%; } .cmn-access-mapBox-map { height: 200px; margin: 40px 0; border-radius: 20px; } .cmn-access-mapBox02 { margin-top: 30px; border-radius: 20px; overflow: hidden; } .single-post { padding: 40px 0; } .single-post__inner { flex-direction: column; } .single-post__sidebar { width: 100%; } .single-post__content { padding: 0; background-color: transparent; } .single-post__content h2 { font-size: 30px; line-height: 38px; } .single-post__content h3 { font-size: 28px; line-height: 36px; } .single-post__content h4 { font-size: 26px; line-height: 34px; } .single-post__content h5 { font-size: 22px; line-height: 30px; } .single-post__content h6 { font-size: 18px; line-height: 26px; } .single-post__content p, .single-post__content a { font-size: 14px; line-height: 22px; } /* 診療時間表はSPでも表のまま（ブロック積みにしない） */ .local__content table.is-schedule { table-layout: fixed; width: 100%; min-width: 0 !important; } .local__content table.is-schedule tr { display: table-row; } .local__content table.is-schedule th, .local__content table.is-schedule td { display: table-cell; } .local__content table.is-schedule thead th { padding: 6px 0; font-size: 3.721vw; word-break: keep-all; } .local__content table.is-schedule tbody th { word-break: keep-all; } .local__content table.is-schedule tbody th[scope="row"] { padding: 6px 0; font-size: 12px; } .local__content table.is-schedule tbody td { padding: 6px 0; font-size: 13px; word-break: keep-all; } .local__content table.is-schedule thead tr th:first-child, .local__content table.is-schedule tbody tr th:first-child { width: 31%; } .local__content .table-scroll-wrapper:has(table.is-schedule) { overflow-x: visible; } .local__content .table-scroll-wrapper table.is-schedule { min-width: 0 !important; table-layout: fixed !important; width: 100%; } } /* ===== 13-fix-20260731.css ===== */ /* ============================================================ 13-fix-20260731 — クライアント指摘（HP問題点まとめ.pdf）への対応 後から読んだときに「なぜこうしたか」が分かるよう、指摘ごとに分けて書く。 ============================================================ */ /* ------------------------------------------------------------ 指摘1：不自然な改行がほぼ全ページにある（P1） 例）「骨粗鬆症予防のための生活習／慣」「首や肩の痛みがひど／い」 「治療後の経過（ダウンタイ／ム）」 対応： ・見出しは text-wrap: balance で行数を均す（1文字だけ次行に落ちるのを防ぐ） ・本文は text-wrap: pretty で行末の孤立を避ける ・line-break: strict で「。」「）」「、」が行頭に来ないようにする（禁則処理） ------------------------------------------------------------ */ :where(body) { line-break: strict; overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6, .cmn-ttl__jp, .lowerMv-txtBox-ttl, .sec01-card__ttl, .sec01-card__sub, .sec02-head__main, .sec02-head__sub, .sec02-item__ttl, .sec02-item__sub, .sec03-list__item, .sec04-ttl, .sec04-subTtl, .sec05-reasonList__ttl, .sec05-reasonList__subTtl, .sec05-featureList__ttl, .sec05-testList__ttl, .sec05-topBox__ttl, .sec05-bottomBox__ttl, .sec06-ttl, .sec06-card__ttl, .sec06-other__ttl, .sec07-itemList__ttl, .sec07-links__ttl, .sec07-subTtl, .topMv-txtBox__ttl, .topMv-listBox-list__item, .local__content .index-toc__ttl, .local__content .qaaBox dt, .local__content .card__title, .local__content .flowList__ttl, .cmn-newsList-item-ttlBox .ttl, .cmn-blogList__ttl, .newsList-item-title, .content_post__ttl, .news_ttl { text-wrap: balance; } .local__content p, .local__content li, .local__content dd, .local__content .txtBox p, .single-post__content p, .content_post p, .sec01-card__txt, .sec02-item__sub, .sec03-txt, .sec04-txtBox__txt, .sec04-conceptBox__txt, .sec05-reasonList__txt, .sec05-testList__txt, .sec05-topBox__txt, .sec06-other__txt, .sec07-itemList__txt, .sec07-links__txt { text-wrap: pretty; } /* ------------------------------------------------------------ 指摘2：Q&Aの「Q」バッジが本文にかぶる（P2） 質問が1行のとき、バッジ（80px固定）が質問行（50px）よりも高く、 下の回答文に30px重なって文字を隠していた。 対応：質問行の高さをバッジ以上にして、文字は縦中央にそろえる。 ------------------------------------------------------------ */ .local__content .qaaBox dt { display: flex; align-items: center; min-height: 80px; } /* ------------------------------------------------------------ 指摘3：見出しの「・」の位置が中央でなく少し上にずれている（P4） 2行の見出しでは、丸が行間の中央に来てしまっていた。 対応：1行目の中心にそろえる。 ------------------------------------------------------------ */ .local__content h3::before { top: .75em; /* line-height:1.5 の1行目の中心 */ transform: translateY(-50%); } @media screen and (max-width: 768px) { .local__content h3::before { top: .75em; } } /* ------------------------------------------------------------ 指摘4：箇条書きの余白と文字サイズ（P2） ・上の文との間隔が狭いのに、箇条書き同士の間隔が広く逆になっていた ・説明である箇条書きが本文（料金など）より太く大きく見えていた 対応：上を広く・項目間を狭く。文字は本文より一段小さく、太字をやめる。 ------------------------------------------------------------ */ .local__content ul, .local__content ol { margin-top: 1.5em; margin-bottom: 2em; } .local__content ul li, .local__content ol li { margin-bottom: .5em; font-size: 15px; font-weight: 400; line-height: 1.8; } .local__content .checkBox ul li { font-size: 15px; font-weight: 500; } .local__content .index-toc__list li { margin-bottom: 0; font-size: inherit; } @media screen and (max-width: 768px) { .local__content ul li, .local__content ol li { font-size: 13px; } } /* ------------------------------------------------------------ 指摘5：本文は両端揃えのほうが見栄えがよい（P4） ※院長より「必須ではない」とのことだったが、日本語の長文では 行末が揃うほうが読みやすいため適用する。 ------------------------------------------------------------ */ .local__content p, .local__content dd, .single-post__content p, .content_post p { text-align: justify; text-justify: inter-ideograph; } /* 中央寄せ・ボタン・キャプションは対象外 */ .local__content p.is_center, .local__content .imgBox p, .local__content .local-linkBtns, .local__content .btn-wrap { text-align: initial; } .local__content p.is_center { text-align: center; } /* ------------------------------------------------------------ 指摘6：SPメニューで「診療案内」「採用情報」だけ文字が上にずれる（P4） この2項目だけ で囲まれており、字送り・行高が他と違っていた （高さ51px／他は59px）。 対応：SPでは他の項目と同じ字体・行高にそろえる。 ------------------------------------------------------------ */ @media screen and (max-width: 768px) { .header-navList__link .link strong { font-size: 17px; font-weight: 500; line-height: 1.6; letter-spacing: .05em; } } /* ------------------------------------------------------------ 指摘7：「電話予約・アクセス」がカラーの枠から下にはみ出している（P3） 白いパネルが背景（グラデーション）の外へ60pxはみ出していた。 対応：パネルを枠の中に収め、その分セクションの下余白を詰める。 TOPのsec04とフッターは同じ作りなので両方そろえる。 ------------------------------------------------------------ */ .sec04-linkBtns, .footer-linkBtns { bottom: 40px; } .sec04-linkBox { padding-bottom: 270px; } .footer-linkBox { padding-bottom: 270px; } .sec04-bottomBox { padding-top: 240px; } @media screen and (max-width: 768px) { .sec04-linkBtns, .footer-linkBtns { bottom: 24px; } .sec04-linkBox { padding-bottom: 300px; } .footer-linkBox { padding-bottom: 300px; } .sec04-bottomBox { padding-top: 150px; } } /* ===== 14-req-20260731.css ===== */ /* ============================================================ 14-req-20260731 — クライアント要望「HP修正要望 全体構成.pdf」への対応 ============================================================ */ /* ------------------------------------------------------------ 要望：オレンジのタイトル前の「・」は全ページにわたり不要 「そもそも点の位置がおかしく、もし何かつけるならちゃんとした記号を。 特に『・■』と連続で記号を使っている箇所は意図が不明、不要」 対応：丸を削除し、見出しは左の余白も詰める。 本文中の「■」も原稿から削除済み（src/pages/*.html）。 ------------------------------------------------------------ */ .local__content h3 { padding-left: 0; } .local__content h3::before { content: none; } @media screen and (max-width: 768px) { .local__content h3 { padding-left: 0; } } /* ------------------------------------------------------------ 要望：診療案内メニューを5カテゴリーに分けて視認性をよくしたい 脳神経外科／脊椎外科（せぼね外科）／内科・その他／ ドック検査／自由診療（美容診療） ------------------------------------------------------------ */ .subLink-catBox { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 18px; } .subLink-cat__ttl { margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid rgb(255 255 255 / 35%); color: #f5c37a; font-family: var(--font-serif); font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; } .subLink--menu .subLink-cat .subLink-linkBox { grid-template-columns: 1fr; gap: 2px; } .subLink--menu .subLink-cat .subLink-linkBox a { text-align: left; } .subLink--menu { min-width: 1000px; max-width: 1000px; top: -250px; } @media screen and (max-width: 1300px) { .subLink--menu { min-width: 1000px; max-width: 1000px; } } .header-nav.is-subLink-down .subLink--menu { bottom: -240px; } @media screen and (max-width: 768px) { .subLink-catBox { grid-template-columns: 1fr; gap: 14px; width: 100%; padding-bottom: 20px; } .subLink-cat__ttl { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #d9d9d9; color: var(--c-gold-deep); font-size: 13px; } .subLink--menu .subLink-cat .subLink-linkBox { grid-template-columns: 1fr 1fr; gap: 6px 8px; padding-bottom: 0; } .subLink--menu { min-width: 0; max-width: 100%; top: auto; } } /* ------------------------------------------------------------ 要望：Instagram はメニュー左下の派手なボタンをやめ、 ロゴをTOPの自然なところに置いてリンクにしたい 対応：SPメニュー内のボタンを廃止し、フッターの医院情報の下に ロゴ（インラインSVG）のリンクとして置く。 ------------------------------------------------------------ */ .footer-sns { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--c-text); font-family: var(--font-en); font-size: 13px; letter-spacing: .06em; transition: color .3s var(--ease), opacity .3s var(--ease); } .footer-sns svg { flex-shrink: 0; } @media (hover: hover) and (min-width: 769px) { .footer-sns:hover { color: var(--c-gold-deep); opacity: 1; } } @media screen and (max-width: 768px) { .footer-sns { margin-top: 14px; font-size: 12px; } } /* ------------------------------------------------------------ 要望：TOPの「ご予約・お問い合わせ」が2つあって冗長 → 1つに 対応：TOP sec04 のブロックを削除（原稿側）。 残ったコンセプト部分の上余白を、削除分だけ詰める。 ------------------------------------------------------------ */ .sec04-bottomBox { padding-top: 120px; } @media screen and (max-width: 768px) { .sec04-bottomBox { padding-top: 110px; } } /* ===== 15-req-20260804.css ===== */ /* ============================================================ 15-req-20260804 — クライアント要望 「HP修正要望各ページ① 保険診療メイン.pdf」（全8ページ） 「HP修正要望各ページ②自由診療など.pdf」（全4ページ） 院長からの最重要指摘（①P2 赤字・②P2）： 「HP内の全ページにおいて、適切な改行の使用、行間調整、スペース調整、 太字細字の使いわけ、文字サイズ調整がなされていません。」 「素人がコピペしているだけかのようなページになっている。」 個別の誤字ではなく本文の"読みやすさ"そのものへの指摘なので、 ページ単位ではなく .local__content の基盤をここで直す。 指摘ごとに理由をコメントで残す。 ============================================================ */ /* ------------------------------------------------------------ 要望1：箇条書きが本文より大きく、行間も広い（①P5 スポーツ脳震盪／ ①P6 あたまのかたち／①P7 全身がんMRI／②P1 自由診療 全般） 院長「いきなり字が大きくなり、いきなり行間が広くなるのはおかしい。 むしろ逆。とても見づらい。」 原因：前回(13-fix)で li の font-size は 15px に下げたが、 ul.is_checklist li::before の「☑」が font-size:20px のまま 残っていた。行内に20pxの文字があるため行送りがその分広がり、 「字が大きくなって行間が広がる」状態になっていた。 対応：・マーカーを本文より小さい固定サイズにし、行の高さを押し広げない ・箇条書きは説明文なので本文(16px)より一段小さい15pxを維持 ・項目間は詰め、ブロックの前後だけ空ける ------------------------------------------------------------ */ .local__content ul.is_checklist { padding-left: 0; list-style: none; } .local__content ul.is_checklist li { position: relative; margin-left: 0; padding-left: 1.9em; font-size: 15px; font-weight: 400; line-height: 1.8; } .local__content ul.is_checklist li::before { content: ""; /* ☑ の文字をやめる（行送りを膨らませていた） */ position: absolute; top: .5em; left: 0; width: 1.05em; height: 1.05em; box-sizing: border-box; border: 1.5px solid var(--c-blue); border-radius: 3px; background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.4-7' fill='none' stroke='%236388ee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 78% auto; font-size: inherit; /* 20px指定を打ち消す */ line-height: 1; } /* 通常の箇条書き（disc）も同じ考え方でそろえる。 marker が本文と同じ大きさだと行が膨らむため、字だけ一段小さくする。 あわせて①P7の「文字のスペースも右によっていて違和感が強い」に対応する。 原因：ul の padding-left:20px と li の margin-left:2em が二重にかかり、 本文より 50px 以上も右にずれていた。字下げは1段だけにする。 */ .local__content ul:not(.index-toc__list):not(.card__list):not(.compareCards):not(.pairList):not(.feeList):not(.priceRows):not(.deptList):not(.historyList) { padding-left: 0; } .local__content ul:not(.is_checklist):not(.index-toc__list):not(.card__list):not(.compareCards):not(.pairList):not(.feeList):not(.priceRows):not(.deptList):not(.historyList) > li { margin-left: 1.4em; margin-bottom: .4em; font-size: 15px; font-weight: 400; line-height: 1.8; } .local__content ol { padding-left: 0; } .local__content ol > li { margin-left: 1.6em; margin-bottom: .4em; font-size: 15px; font-weight: 400; line-height: 1.8; } /* li 内の
以降にある補足説明（競技名・薬剤名など）は 主項目より小さくして、主従が読み取れるようにする。 */ .local__content li .li-note { display: block; color: var(--c-text-sub); font-size: .92em; line-height: 1.7; } @media screen and (max-width: 768px) { .local__content ul.is_checklist li, .local__content ul:not(.is_checklist):not(.index-toc__list):not(.card__list) > li, .local__content ol > li { font-size: 13.5px; } } /* ------------------------------------------------------------ 要望2：ページリンクのボタンは押しやすいよう背景色を入れて欲しい（①P8） 「詳しく見る」と「＞」が重なっている（①P5 頭痛ページ） 原因：a[href] は max-width:320px の箱に対して内側paddingが無く、 矢印を right:25px に絶対配置していた。ラベルが長いと 中央寄せの文字が矢印の位置まで伸びて重なる。 対応：・矢印のぶんの余白(56px)を右に確保し、物理的に重ならないようにする ・背景をブランド青の淡色にして「押せる」ことを明示（院長の要望） ・ホバー／タップで濃くなる ------------------------------------------------------------ */ .local__content a[href]:not(.local-linkBtns a):not(.cmn-bt01):not(.index-toc__list a) { box-sizing: border-box; max-width: 380px; min-height: 72px; height: auto; padding: 14px 56px 14px 24px; border: 1px solid var(--c-blue); border-radius: 8px; background: rgb(99 136 238 / 8%); color: var(--c-navy); font-weight: 500; line-height: 1.5; transition: background-color .25s var(--ease), box-shadow .25s var(--ease); } .local__content a[href]:not(.local-linkBtns a):not(.cmn-bt01):not(.index-toc__list a)::before { right: 22px; width: 11px; height: 11px; } @media (hover: hover) { .local__content a[href]:not(.local-linkBtns a):not(.cmn-bt01):not(.index-toc__list a):hover { background: rgb(99 136 238 / 18%); box-shadow: 0 4px 12px rgb(12 60 139 / 12%); } } @media screen and (max-width: 768px) { .local__content a[href]:not(.local-linkBtns a):not(.cmn-bt01):not(.index-toc__list a) { max-width: 100%; padding: 12px 48px 12px 18px; font-size: 14px; } } /* ------------------------------------------------------------ 要望3：見出しの1文字だけが2行目に落ちる（①P2） 院長「『へ』の一文字だけ2行目にあるのは変なので、なるべくどの ブラウザでもこういう違和感が減るようなスペース調整、 フォントサイズの調整など。」 text-wrap:balance は Safari で効きが弱く、下層MVの見出しは幅が 狭いため1文字残りが起きやすい。 対応：・MV見出しはSPで文字を少し詰めて1行に収まる余地を作る ・長いタイトルは HTML 側で に 分けて明示的に2行組みにする（要望10も同時に満たす） ------------------------------------------------------------ */ .lowerMv-txtBox-ttl { text-wrap: balance; word-break: normal; overflow-wrap: normal; } .lowerMv-txtBox-ttl .lowerMv-ttl__sub { display: block; margin-top: .35em; font-size: .62em; font-weight: 500; letter-spacing: .04em; } @media screen and (max-width: 768px) { .lowerMv-txtBox-ttl { font-size: 6.05vw; letter-spacing: .02em; } .lowerMv-txtBox-ttl .lowerMv-ttl__sub { font-size: .66em; } } /* ------------------------------------------------------------ 要望4：横スクロールしないと全部が見えない表（①P5 脳梗塞3種／ ①P5 認知症の比較／①P5 めまいの耳と脳／②P2 料金案内） 院長「表が右にスライドしないと全部が見えないので、それであれば 表じゃなくていいと思います。パッと全て見えるように。」 対応：表をやめてカード（.compareCards）に置き換える。 PCは横並び、SPは縦積みで、どの幅でも全項目が一目で見える。 ------------------------------------------------------------ */ .local__content .compareCards { display: grid; gap: 20px; margin: 2em 0 3em; padding: 0; list-style: none; } .local__content .compareCards.is_col3 { grid-template-columns: repeat(3, 1fr); } .local__content .compareCards.is_col2 { grid-template-columns: repeat(2, 1fr); } .local__content .compareCards > li { margin: 0; padding: 0; font-size: inherit; list-style: none; background: #fff; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; } .local__content .compareCards__ttl { margin: 0; padding: 12px 16px; background: rgb(99 136 238 / 10%); color: var(--c-navy); font-family: var(--font-serif); font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; text-align: center; } .local__content .compareCards > li.is_warm .compareCards__ttl { background: rgb(222 152 33 / 12%); color: var(--c-gold-deep); } .local__content .compareCards > li.is_cool .compareCards__ttl { background: rgb(21 198 39 / 10%); color: #0f7a1c; } .local__content .compareCards__body { padding: 16px; } .local__content .compareCards__body dl { margin: 0; } .local__content .compareCards__body dt { margin-top: .9em; color: var(--c-text-sub); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; } .local__content .compareCards__body dt:first-child { margin-top: 0; } .local__content .compareCards__body dd { margin: .15em 0 0; font-size: 14.5px; font-weight: 400; line-height: 1.75; text-align: left; } @media screen and (max-width: 768px) { .local__content .compareCards.is_col3, .local__content .compareCards.is_col2 { grid-template-columns: 1fr; } .local__content .compareCards { gap: 14px; } .local__content .compareCards__ttl { font-size: 15px; padding: 10px 14px; } .local__content .compareCards__body { padding: 14px; } .local__content .compareCards__body dd { font-size: 13.5px; } } /* ------------------------------------------------------------ 要望5：内容と評価ポイントが1:1で対応しているのに縦に並んでいて 分からない（①P7 せぼねドック） 院長「このように内容と評価ポイントで1:1の構図なのですが、縦に 並べられてしまっているためよくわからなくなっています。」 対応：左に検査内容、右に評価ポイントを置く対応表（.pairList）。 SPでは1件ずつのカードに折り返し、矢印で対応関係を示す。 ------------------------------------------------------------ */ .local__content .pairList { margin: 2em 0 3em; padding: 0; list-style: none; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; } .local__content .pairList > li { display: grid; grid-template-columns: 15em 1fr; gap: 0; margin: 0; padding: 0; font-size: inherit; list-style: none; border-top: 1px solid var(--c-line); } .local__content .pairList > li:first-child { border-top: none; } .local__content .pairList__key { position: relative; padding: 16px 30px 16px 18px; background: rgb(99 136 238 / 7%); color: var(--c-navy); font-size: 15px; font-weight: 600; line-height: 1.6; } .local__content .pairList__key::after { /* 1:1の対応を矢印で示す */ content: ""; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--c-blue); } .local__content .pairList__val { padding: 16px 18px; background: #fff; font-size: 14.5px; font-weight: 400; line-height: 1.75; } .local__content .pairList__head { display: grid; grid-template-columns: 15em 1fr; margin-bottom: -1px; } .local__content .pairList__head span { padding: 8px 18px; color: var(--c-text-sub); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; } @media screen and (max-width: 768px) { .local__content .pairList > li { grid-template-columns: 1fr; } .local__content .pairList__key { padding: 12px 16px 22px; font-size: 14px; } .local__content .pairList__key::after { /* SPは下向きの矢印にする */ top: auto; bottom: 6px; right: 50%; transform: translateX(50%); border-width: 7px 5px 0 5px; border-color: var(--c-blue) transparent transparent transparent; } .local__content .pairList__val { padding: 12px 16px; font-size: 13.5px; } .local__content .pairList__head { display: none; } } /* ------------------------------------------------------------ 要望6：文字を貼り付けているだけで見づらい（②P1・②P2 自由診療 全般） 院長「文字貼っているだけ。改善を。なぜ私の元原稿よりみづらく なっているのか。」 元原稿では ①手順の矢印つき経過 ②太字での強調 が使われていた。 対応：経過・流れを表す1行を .stepFlow として矢印区切りで組む。 強調は .is_strong（太字＋色）で、元原稿の意図を再現する。 ------------------------------------------------------------ */ .local__content .stepFlow { display: flex; flex-wrap: wrap; align-items: center; gap: .35em .6em; margin: .6em 0 1.2em; padding: 14px 16px; border-radius: 8px; background: var(--c-bg-cream); font-size: 14.5px; line-height: 1.7; } .local__content .stepFlow > span { position: relative; } .local__content .stepFlow > span + span { padding-left: 1.5em; } .local__content .stepFlow > span + span::before { content: ""; position: absolute; top: 50%; left: .35em; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--c-gold); } .local__content .is_strong { font-weight: 700; color: var(--c-navy); } .local__content .is_note { display: block; margin-top: .6em; color: var(--c-text-sub); font-size: 13.5px; line-height: 1.7; } @media screen and (max-width: 768px) { .local__content .stepFlow { font-size: 13px; padding: 12px 14px; } .local__content .is_note { font-size: 12.5px; } } /* ------------------------------------------------------------ 要望7：料金・予約が「貼り付けているだけ」（①P6 あたまのかたち外来） 院長「右：金額とか、予約とか、貼り付けているだけになっているので、 改善・修正おねがいします。」 対応：金額と予約方法を本文から分離し、目に入る情報カードにする。 ------------------------------------------------------------ */ .local__content .infoCard { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 1.5em 0 2em; padding: 20px 24px; border: 1px solid rgb(222 152 33 / 40%); border-radius: 10px; background: rgb(222 152 33 / 6%); } .local__content .infoCard__item { display: flex; flex-direction: column; gap: 4px; } .local__content .infoCard__label { color: var(--c-gold-deep); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; } .local__content .infoCard__value { color: #32313b; font-family: var(--font-serif); font-size: 20px; font-weight: 600; line-height: 1.4; } .local__content .infoCard__value small { font-size: 13px; font-weight: 400; } @media screen and (max-width: 768px) { .local__content .infoCard { gap: 12px 20px; padding: 16px 18px; } .local__content .infoCard__value { font-size: 17px; } } /* ------------------------------------------------------------ 要望8：診察料の太字/細字が逆（②P1 自由診療） 院長「その他の初診料、再診料だけなぜか細文字。むしろその後の 箇条書きは、細文字でよい。文字も大きすぎる。この箇条書きの ところは診察料についてのただの説明である。なので全体的に もう少しコンパクトなデザインにまとめる必要あり。」 対応：・料金そのもの（初診料・再診料）を太字で目立たせる ・説明の箇条書きは細字・小さめにしてコンパクトにまとめる ------------------------------------------------------------ */ .local__content .feeList { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 20px; margin: 1.2em 0 1.5em; padding: 0; list-style: none; } .local__content .feeList > li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--c-line); font-size: inherit; list-style: none; } .local__content .feeList__name { font-size: 15px; font-weight: 500; } .local__content .feeList__price { color: var(--c-navy); font-size: 18px; font-weight: 700; /* 料金は太字（院長の指摘：ここが細字だった） */ white-space: nowrap; } .local__content .feeList__price small { font-size: 12px; font-weight: 400; } /* 説明の箇条書きはコンパクトに（院長：細文字でよい・大きすぎる） */ .local__content .feeNote { margin: 1em 0 2em; padding: 14px 18px; border-radius: 8px; background: var(--c-bg-gray); } .local__content .feeNote li, .local__content .feeNote p { margin: 0 0 .3em; font-size: 13.5px; font-weight: 400; line-height: 1.75; } .local__content .feeNote li:last-child, .local__content .feeNote p:last-child { margin-bottom: 0; } @media screen and (max-width: 768px) { .local__content .feeList { grid-template-columns: 1fr; gap: 0; } .local__content .feeList__name { font-size: 14px; } .local__content .feeList__price { font-size: 16px; } .local__content .feeNote li, .local__content .feeNote p { font-size: 12.5px; } } /* ------------------------------------------------------------ 要望9：署名「院長」は右側に置くのが適切（②P1 自由診療／②P4 院長紹介） 院長「のところの最後の『院長』は、右側に置くのが適切。」 「院長 福岡俊樹 が左下にありますが、右下が自然です。」 ------------------------------------------------------------ */ .local__content .signature { margin: 1.5em 0 0; font-family: var(--font-serif); font-size: 17px; font-weight: 500; letter-spacing: .08em; text-align: right; } .local__content .signature small { margin-right: .6em; font-size: 13px; font-weight: 400; letter-spacing: .1em; } @media screen and (max-width: 768px) { .local__content .signature { font-size: 15px; } } /* ------------------------------------------------------------ 要望10：略歴の年が横に広がって横スクロールが必要（②P4 院長紹介） 院長「2013~2016年 のところだけスペースがもったいないかと。 ここのせいで、右にスライドしないと経歴が見えない。 せめて 2013 / 2016 みたいに縦だと、だとまだ少しマシに。」 対応：年を固定幅の1カラムにして、範囲は2段（上下）に積む。 これで最長の「2013〜2016年」でも横幅を広げない。 ------------------------------------------------------------ */ .local__content .historyList { margin: 1.5em 0 2.5em; padding: 0; list-style: none; } .local__content .historyList > li { display: grid; grid-template-columns: 5.5em 1fr; gap: 0 18px; margin: 0; padding: 14px 0; border-top: 1px dotted var(--c-line-strong); font-size: inherit; list-style: none; } .local__content .historyList > li:first-child { border-top: none; } .local__content .historyList__year { color: var(--c-navy); font-family: var(--font-en); font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: .02em; white-space: nowrap; } .local__content .historyList__year span { /* 範囲は縦に積む（横に伸ばさない） */ display: block; position: relative; padding-left: .85em; } .local__content .historyList__year span::before { content: "〜"; position: absolute; left: 0; font-size: .8em; } .local__content .historyList__body { font-size: 15px; font-weight: 400; line-height: 1.75; text-align: left; } .local__content .historyList__body .li-note { margin-top: .3em; font-size: 13.5px; } @media screen and (max-width: 768px) { .local__content .historyList > li { grid-template-columns: 4.6em 1fr; gap: 0 12px; padding: 12px 0; } .local__content .historyList__year { font-size: 13.5px; } .local__content .historyList__body { font-size: 13.5px; } .local__content .historyList__body .li-note { font-size: 12.5px; } } /* ------------------------------------------------------------ 支給原稿の指示で追加した「筆頭著者論文」（院長紹介） 論文名（和文の本文より小さめ・欧文）と書誌情報を分けて読みやすくする。 欧文が長いので、どの幅でも折り返して横スクロールしないようにする。 ------------------------------------------------------------ */ .local__content .paperList { margin: 1.5em 0 2em; padding-left: 0; counter-reset: paper; list-style: none; } .local__content .paperList > li { position: relative; margin: 0 0 1.2em; padding: 0 0 1.2em 2.4em; border-bottom: 1px dotted var(--c-line-strong); font-size: inherit; list-style: none; overflow-wrap: anywhere; } .local__content .paperList > li:last-child { border-bottom: none; margin-bottom: 0; } .local__content .paperList > li::before { counter-increment: paper; content: counter(paper); position: absolute; top: .1em; left: 0; display: grid; place-content: center; width: 1.75em; height: 1.75em; border-radius: 50%; background: rgb(99 136 238 / 12%); color: var(--c-navy); font-family: var(--font-en); font-size: 13px; font-weight: 600; } .local__content .paperList__ttl { display: block; color: #32313b; font-size: 14.5px; font-weight: 600; line-height: 1.6; text-align: left; } .local__content .paperList .li-note { margin-top: .35em; font-size: 13px; } @media screen and (max-width: 768px) { .local__content .paperList > li { padding-left: 2.2em; } .local__content .paperList__ttl { font-size: 13.5px; } .local__content .paperList .li-note { font-size: 12px; } } /* ------------------------------------------------------------ 要望11：診療科目の字が右に寄っていて、ここだけフォントが目立つ（①P1 医院紹介） 院長「字の全体的に右に寄っている。また、ここだけフォントの違いが 目立つので自然なフォントに。」 原因：長い1行の

  • を ul の padding-left:20px ＋ li の margin-left:2em で二重に字下げしていたため、本文より 50px 以上右に寄っていた。 対応：科目名（見出し）＋内容（説明）の2段構成にして字下げをなくす。 ------------------------------------------------------------ */ .local__content .deptList { margin: 2em 0 1em; padding: 0; list-style: none; } .local__content .deptList > li { margin: 0 0 18px; padding: 16px 20px; border-left: 3px solid var(--c-blue); border-radius: 0 8px 8px 0; background: var(--c-bg-gray); font-size: inherit; list-style: none; } .local__content .deptList__name { margin: 0 0 .3em; color: var(--c-navy); font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: .05em; line-height: 1.5; } .local__content .deptList__items { margin: 0; font-size: 14.5px; font-weight: 400; line-height: 1.8; text-align: left; } @media screen and (max-width: 768px) { .local__content .deptList > li { padding: 14px 16px; margin-bottom: 14px; } .local__content .deptList__name { font-size: 16px; } .local__content .deptList__items { font-size: 13.5px; } } /* ------------------------------------------------------------ 要望12：Googleマップの導入（①P1 TOP） 院長「MAPですが、今のイラストMAPのほかに、google mapの導入は 可能でしょうか。」→ 可能。イラストMAPは残したまま併設する。 ------------------------------------------------------------ */ .gmap { position: relative; width: 100%; margin-top: 24px; border-radius: 12px; overflow: hidden; background: var(--c-bg-gray); } .gmap iframe { display: block; width: 100%; height: 380px; border: 0; } .gmap__note { margin: 10px 0 0; color: var(--c-text-sub); font-size: 13px; line-height: 1.7; text-align: left; } @media screen and (max-width: 768px) { .gmap iframe { height: 260px; } .gmap__note { font-size: 12px; } } /* ------------------------------------------------------------ 要望13：本文が改行なく詰まっていて、色・囲い・太字などの工夫が無い（①P2） 院長「改行なく字が詰まっていているのみで、色の変化、アンダーバー、 囲い、記号、太字細字など、何も工夫なく見づらい。」 例として挙がった「検査室への持ち込み不可のもの」のような "見出し＋長い列挙" を、囲いのあるブロックに分ける。 ------------------------------------------------------------ */ .local__content .noteBox { margin: 1.5em 0 2em; padding: 20px 24px; border: 1px solid var(--c-line); border-left: 4px solid var(--c-gold); border-radius: 0 10px 10px 0; background: #fff; } .local__content .noteBox__ttl { margin: 0 0 .5em; color: var(--c-gold-deep); font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: .04em; line-height: 1.5; } .local__content .noteBox p, .local__content .noteBox li { font-size: 14.5px; line-height: 1.8; } .local__content .noteBox > :last-child { margin-bottom: 0; } .local__content .noteBox.is_caution { border-left-color: #d9534f; background: rgb(217 83 79 / 4%); } .local__content .noteBox.is_caution .noteBox__ttl { color: #c0392b; } @media screen and (max-width: 768px) { .local__content .noteBox { padding: 16px 18px; } .local__content .noteBox__ttl { font-size: 15px; } .local__content .noteBox p, .local__content .noteBox li { font-size: 13px; } } /* ------------------------------------------------------------ 要望14：料金一覧が表だと見切れる（②P2 料金案内） 院長「見切れるくらいなら表にしなくてよいです。」 対応：料金は「品目名 … 金額」の2列リストにする。どの幅でも収まる。 ------------------------------------------------------------ */ .local__content .priceRows { margin: 1.2em 0 2.5em; padding: 0; list-style: none; border-top: 1px solid var(--c-line); } .local__content .priceRows > li { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 12px 4px; border-bottom: 1px solid var(--c-line); font-size: inherit; list-style: none; } .local__content .priceRows__name { flex: 1 1 auto; font-size: 15px; font-weight: 400; line-height: 1.6; } .local__content .priceRows__name .li-note { margin-top: .2em; } .local__content .priceRows__price { flex: 0 0 auto; color: var(--c-navy); font-size: 16px; font-weight: 700; white-space: nowrap; } .local__content .priceRows__price small { font-size: 11.5px; font-weight: 400; } .local__content .priceRows__price.is_tbd { color: var(--c-text-sub); font-size: 13.5px; font-weight: 500; } .local__content .priceGroup__ttl { margin: 2em 0 .4em; padding-bottom: .3em; border-bottom: 2px solid rgb(99 136 238 / 30%); color: var(--c-navy); font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: .05em; } @media screen and (max-width: 768px) { .local__content .priceRows__name { font-size: 13.5px; } .local__content .priceRows__price { font-size: 14.5px; } .local__content .priceGroup__ttl { font-size: 16.5px; } } /* ------------------------------------------------------------ 要望15：ドックのコース紹介が「ハリボテ感が強い」（①P3 脳ドック） 院長「ここもとても見づらい。ハリボテ感が強い。箇条書きなどが 必要でしょう。」 対応：コース名・所要時間・料金を1つの見出し帯にまとめ、 検査内容と対象者を箇条書きで並べたコースカードにする。 ------------------------------------------------------------ */ .local__content .courseCard { margin: 2em 0; border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; background: #fff; } .local__content .courseCard__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 18px 24px; background: linear-gradient(90deg, rgb(99 136 238 / 12%), rgb(99 136 238 / 4%)); } .local__content .courseCard.is_advance .courseCard__head { background: linear-gradient(90deg, rgb(222 152 33 / 14%), rgb(222 152 33 / 4%)); } .local__content .courseCard__name { margin: 0; color: #32313b; font-family: var(--font-serif); font-size: 22px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; } .local__content .courseCard__time { color: var(--c-text-sub); font-size: 13.5px; font-weight: 500; } .local__content .courseCard__price { margin-left: auto; color: var(--c-navy); font-size: 24px; font-weight: 700; line-height: 1.2; white-space: nowrap; } .local__content .courseCard__price small { font-size: 12.5px; font-weight: 400; } .local__content .courseCard__catch { margin: 0; padding: 12px 24px; border-bottom: 1px solid var(--c-line); background: var(--c-bg-cream); color: var(--c-gold-deep); font-size: 15px; font-weight: 600; line-height: 1.6; text-align: left; } .local__content .courseCard__body { padding: 20px 24px 8px; } .local__content .courseCard__subTtl { margin: 0 0 .4em; color: var(--c-navy); font-size: 14px; font-weight: 700; letter-spacing: .06em; } .local__content .courseCard__body > .courseCard__subTtl:not(:first-child) { margin-top: 1.4em; } .local__content .courseCard__foot { margin: 0; padding: 14px 24px 20px; font-size: 14.5px; line-height: 1.8; text-align: left; } /* おすすめ対象は矢印つきの箇条書き（元原稿の ➢ を再現） */ .local__content .courseCard .is_target { padding-left: 0; list-style: none; } .local__content .courseCard .is_target > li { position: relative; margin-left: 0; padding-left: 1.5em; font-size: 14.5px; line-height: 1.8; list-style: none; } .local__content .courseCard .is_target > li::before { content: ""; position: absolute; top: .72em; left: .15em; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--c-gold); } @media screen and (max-width: 768px) { .local__content .courseCard__head { padding: 14px 16px; } .local__content .courseCard__name { font-size: 18px; } .local__content .courseCard__price { font-size: 20px; margin-left: 0; } .local__content .courseCard__catch { padding: 10px 16px; font-size: 13.5px; } .local__content .courseCard__body { padding: 16px 16px 6px; } .local__content .courseCard__foot { padding: 12px 16px 16px; font-size: 13.5px; } .local__content .courseCard .is_target > li { font-size: 13.5px; } } /* ------------------------------------------------------------ 要望16：Q&Aの「Q」バッジと本文（前回13-fixで min-height:80px にしたが、 質問が2行になるページで下に間延びしていた） 対応：バッジ基準の固定高をやめ、内容にあわせて伸縮させる。 ------------------------------------------------------------ */ .local__content .qaaBox dt { min-height: 0; padding-block: 18px; align-items: center; } /* SPの質問文が20pxと大きく、1行に13文字しか入らないため「か？」だけが次行に 落ちていた（①P2「『へ』の一文字だけ2行目にあるのは変」と同じ現象）。 院長より繰り返し「文字が大きすぎる」とのご指摘もあるため、18pxに下げて 1行に入る文字数を増やす。 */ @media screen and (max-width: 768px) { .local__content .qaaBox dt { font-size: 18px; } } /* ------------------------------------------------------------ Q13：PCヘッダー右上のInstagramボタンの色（2026-08-07 判断を一任いただき対応） 院長「Instagram が左下にあって不恰好・色が派手すぎてあまり」（要望書 2026-07-31） SPメニュー内のボタンは前回撤去したが、PCヘッダーのボタンはピンク #ff30c4 のまま残っていた。 判断：**ボタンは残し、色だけ落とす** ・院長は「ロゴをTOPの自然なところに置いてリンクに」とも書かれており、 Instagramへの導線自体は残したいご意向と読める（フッターにもロゴリンクを設置済み） ・問題は色。ヘッダーの他3つ（電話=濃いグレー／WEB予約=ゴールド／診療時間=青緑）は すべてブランド配色内で、ピンクだけが浮いていた ・そこでブランドの濃紺に変更する。予約系のゴールドと役割が混ざらないよう、 彩度の低い濃紺にして「情報リンク」として控えめに見せる ------------------------------------------------------------ */ .header-navBtList-ig > a { background: var(--c-navy); } @media (hover: hover) { .header-navBtList-ig > a:hover { background: #0a3374; } } /* ------------------------------------------------------------ 要望17：セクション内の余白が詰まりすぎ／空きすぎの調整（①P2 全体） 見出し直後の本文が近く、段落間が空いていなかったため、 「改行なく字が詰まっている」印象になっていた。 対応：段落間を広げ、見出しとの間隔を確保する。 ------------------------------------------------------------ */ .local__content p + p { margin-top: 1.1em; } .local__content h3 + p, .local__content h4 + p { margin-top: .8em; } .local__content p + h4 { margin-top: 2em; } /* ===== 16-anim-20260807.css ===== */ /* ------------------------------------------------------------ ★初期非表示は「演出の仕組みに載っている要素」だけに限定する .js-anim .foo:not(.is-inview) .bar { opacity: 0 } と書くと、.foo に data-anim が無いページでも隠れてしまう。 is-inview を付けるのは [data-anim] を見ているJSだけなので、 そういうページでは **永久に透明** になる。 （/menu/ の診療案内カードのリンク18件が実際に消えていた） そのため親セレクタには必ず [data-anim] を付ける。 ------------------------------------------------------------ */ @charset "UTF-8"; /* ============================================================ 16-anim-20260807 — TOPページのスクロール演出 方針 動きの種類は7つだけに絞る。ばらばらな動きを足すと「盛っただけ」に 見えるので、少数の動きを厳密に使い回す。イージングも1本に統一する。 安全設計（CLAUDE.md §8-11 の実害を繰り返さないため） ・初期状態を隠すのは html.js-anim が付いているときだけ。 JSが読めなければ js-anim が付かず、最初から全部見えている。 ・head の内蔵スクリプトが js-anim を付け、main.js が生きている証 （js-anim-ok）が付かなければ2.5秒で js-anim を外す。 ・表示は transition ではなく animation（明示的な from/to ＋ fill-mode: both）で行う。初回描画前に始まったトランジションは 進まないことがあるため。 ・prefers-reduced-motion では一切動かさない。 既存の変形を壊さないための約束（§8-8） ・.topMv-contentBox は transform: translate(-50%,-50%) で中央寄せ しているので触らない。子要素だけ動かす。 ・.sec02-ttl は writing-mode: vertical-rl（§8-5）。transform を 併用すると軸の解釈がブラウザで変わるため、clip-path だけで見せる。 ・横方向の移動と画像の拡大は overflow:hidden の内側だけで行う（§8-9）。 ============================================================ */ :root { /* 減速が長く効く曲線。機械的に整った印象になる */ --ease-anim: cubic-bezier(.16, 1, .3, 1); --anim-dur: .9s; --anim-dur-s: .7s; --anim-step: 80ms; /* 連続表示の1つあたりの遅れ */ } /* ------------------------------------------------------------ 初期状態 js-anim が付いている間だけ隠す。これが安全弁。 ------------------------------------------------------------ */ .js-anim [data-anim]:not(.is-inview) { opacity: 0; } /* clip-path を使う種類は、隠す方法を種類ごとに分けて書く。 共通の初期化をまとめて書くと、意図的に付けた変形を消してしまう（§8-8）。 */ .js-anim [data-anim="veil"]:not(.is-inview), .js-anim [data-anim="veil-v"]:not(.is-inview) { opacity: 1; } /* ------------------------------------------------------------ 1. rise — 下から静かに上がる。カード・本文の基本 ------------------------------------------------------------ */ @keyframes anim-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .is-inview[data-anim="rise"] { animation: anim-rise var(--anim-dur) var(--ease-anim) both; } /* ------------------------------------------------------------ 2. veil — 幕が上がるように出る。見出し専用 文字の下端から現れるので、日本語の見出しが上品に見える ------------------------------------------------------------ */ @keyframes anim-veil { from { clip-path: inset(0 0 105% 0); transform: translate3d(0, .28em, 0); } to { clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); } } .js-anim [data-anim="veil"]:not(.is-inview) { clip-path: inset(0 0 105% 0); } .is-inview[data-anim="veil"] { animation: anim-veil var(--anim-dur) var(--ease-anim) both; } /* ------------------------------------------------------------ 3. veil-v — 縦書き見出し用。transform を使わず clip-path だけ （§8-5：縦書きと変形の併用はブラウザ差が出るため） ------------------------------------------------------------ */ @keyframes anim-veil-v { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } .js-anim [data-anim="veil-v"]:not(.is-inview) { clip-path: inset(0 0 100% 0); } .is-inview[data-anim="veil-v"] { animation: anim-veil-v 1.1s var(--ease-anim) both; } /* ------------------------------------------------------------ 4. glide — 横から入る。リスト項目・お知らせ 親が overflow:hidden でない場所でも横スクロールを起こさない よう、移動量は小さく（22px）内側方向のみに限る（§8-9） ------------------------------------------------------------ */ @keyframes anim-glide { from { opacity: 0; transform: translate3d(-22px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .is-inview[data-anim="glide"] { animation: anim-glide var(--anim-dur-s) var(--ease-anim) both; } /* ------------------------------------------------------------ 5. zoom — 画像がゆっくり寄りから定位置へ 必ず overflow:hidden の内側（.imgFit 等）の img に当てる（§8-9） ------------------------------------------------------------ */ @keyframes anim-zoom { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } } .is-inview[data-anim="zoom"] { animation: anim-zoom 1.4s var(--ease-anim) both; } /* 画像を含む枠に付ける版：枠はクリップし、中の img だけ動かす */ .js-anim [data-anim="zoom-in"]:not(.is-inview) { opacity: 1; } [data-anim="zoom-in"] { overflow: hidden; } .js-anim [data-anim="zoom-in"]:not(.is-inview) > img, .js-anim [data-anim="zoom-in"]:not(.is-inview) picture > img { opacity: 0; } .is-inview[data-anim="zoom-in"] > img, .is-inview[data-anim="zoom-in"] picture > img { animation: anim-zoom 1.4s var(--ease-anim) both; } /* ------------------------------------------------------------ 6. pop — アイコン・バッジ。少し遅れて軽く現れる ------------------------------------------------------------ */ @keyframes anim-pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } } .is-inview[data-anim="pop"] { animation: anim-pop .6s var(--ease-anim) both; } /* ------------------------------------------------------------ 7. draw — 罫線が引かれる。見出しの下線や区切り ------------------------------------------------------------ */ @keyframes anim-draw { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } .js-anim [data-anim="draw"]:not(.is-inview) { opacity: 1; transform: scaleX(0); } .is-inview[data-anim="draw"] { transform-origin: left center; animation: anim-draw .8s var(--ease-anim) both; } /* ------------------------------------------------------------ 連続表示（stagger） 親に data-anim-stagger を付けると、子が順番に出る。 JSで遅延を計算せずCSSだけで完結させる（JSが落ちても崩れない）。 ------------------------------------------------------------ */ [data-anim-stagger] > *[data-anim].is-inview, [data-anim-stagger] > * > *[data-anim].is-inview { animation-delay: 0ms; } [data-anim-stagger] > *:nth-child(1) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(1)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 0); } [data-anim-stagger] > *:nth-child(2) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(2)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 1); } [data-anim-stagger] > *:nth-child(3) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(3)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 2); } [data-anim-stagger] > *:nth-child(4) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(4)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 3); } [data-anim-stagger] > *:nth-child(5) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(5)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 4); } [data-anim-stagger] > *:nth-child(6) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(6)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 5); } [data-anim-stagger] > *:nth-child(7) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(7)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 6); } [data-anim-stagger] > *:nth-child(8) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(8)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 7); } [data-anim-stagger] > *:nth-child(9) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(9)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 8); } [data-anim-stagger] > *:nth-child(10) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(10)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 9); } [data-anim-stagger] > *:nth-child(11) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(11)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 10); } [data-anim-stagger] > *:nth-child(12) [data-anim].is-inview, [data-anim-stagger] > *:nth-child(12)[data-anim].is-inview { animation-delay: calc(var(--anim-step) * 11); } /* 明示的に遅らせたいものだけ使う手動の遅延 */ [data-anim-delay="1"].is-inview { animation-delay: calc(var(--anim-step) * 2) !important; } [data-anim-delay="2"].is-inview { animation-delay: calc(var(--anim-step) * 4) !important; } [data-anim-delay="3"].is-inview { animation-delay: calc(var(--anim-step) * 6) !important; } [data-anim-delay="4"].is-inview { animation-delay: calc(var(--anim-step) * 9) !important; } /* ------------------------------------------------------------ キービジュアル ページを開いた瞬間の見え方を作る。 ・背景写真：ごくゆっくり寄りから戻す（.imgFit の内側なので安全） ・ロゴ画像 → キャッチコピー → 3つの特徴 の順で立ち上げる ------------------------------------------------------------ */ @keyframes anim-mv-bg { from { transform: scale(1.1); } to { transform: scale(1); } } .js-anim .topMv-img img { animation: anim-mv-bg 14s var(--ease-anim) both; } /* キービジュアルの中身も [data-anim] の仕組みに載せる。 自前のクラスで動かすと、JSの安全網（見回りによる強制表示）が効かない。 実際にここを自前ルールで書いたところ、キャッチコピーが opacity:0 のまま 残る状態を作ってしまった（anim-veil は opacity を戻さないため）。 .topMv-contentBox 自体の transform には触らない（§8-8）。 ★ここが最重要：opacity で隠した要素は、必ず opacity を1に戻す アニメーションを当てること。clip-path や transform だけを動かす キーフレームだと、fill-mode: both でも opacity は戻らない。 */ @keyframes anim-mv-veil { from { opacity: 0; clip-path: inset(0 0 105% 0); transform: translate3d(0, .28em, 0); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); } } .is-inview[data-anim="mv-veil"] { animation: anim-mv-veil 1.15s var(--ease-anim) .35s both; } /* キービジュアルは開いた瞬間に順番に立ち上げる */ .is-inview.topMv-imgBox { animation-delay: .1s; } .is-inview.topMv-listBox-list__item.item01 { animation-delay: .80s; } .is-inview.topMv-listBox-list__item.item02 { animation-delay: .92s; } .is-inview.topMv-listBox-list__item.item03 { animation-delay: 1.04s; } /* ------------------------------------------------------------ セクション別の微調整 ------------------------------------------------------------ */ /* sec01 診療3科のカード：カード本体が上がり、アイコンが少し遅れて出る */ .sec01-card[data-anim] { will-change: opacity, transform; } .js-anim .sec01-card[data-anim]:not(.is-inview) .sec01-card__icon { opacity: 0; } .sec01-card.is-inview .sec01-card__icon { animation: anim-pop .6s var(--ease-anim) .38s both; } /* sec02 チェックリスト：チェックアイコンが本文より先に出る */ .js-anim .sec02-item[data-anim]:not(.is-inview) .sec02-item__ico { opacity: 0; } .sec02-item.is-inview .sec02-item__ico { animation: anim-pop .5s var(--ease-anim) .06s both; } /* sec04 「未来の健康」「健康寿命」の圏点を1つずつ光らせる */ @keyframes anim-dot { from { opacity: 0; transform: translate3d(0, .18em, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .js-anim .sec04-conceptBox__lead[data-anim]:not(.is-inview) .dot { opacity: 0; } .sec04-conceptBox__lead.is-inview .dot { animation: anim-dot .5s var(--ease-anim) both; } .sec04-conceptBox__lead.is-inview .dot:nth-of-type(1) { animation-delay: .10s; } .sec04-conceptBox__lead.is-inview .dot:nth-of-type(2) { animation-delay: .18s; } .sec04-conceptBox__lead.is-inview .dot:nth-of-type(3) { animation-delay: .26s; } .sec04-conceptBox__lead.is-inview .dot:nth-of-type(4) { animation-delay: .34s; } .sec04-conceptBox__lead.is-inview .dot:nth-of-type(5) { animation-delay: .42s; } .sec04-conceptBox__lead.is-inview .dot:nth-of-type(6) { animation-delay: .50s; } /* sec05 3つの理由：番号バッジが先、本文があと */ .js-anim .sec05-reasonList__item[data-anim]:not(.is-inview) .sec05-reasonList__body { opacity: 0; } .sec05-reasonList__item.is-inview .sec05-reasonList__body { animation: anim-rise .8s var(--ease-anim) .16s both; } /* sec06 診療案内カード：見出し→リンク一覧の順で出す */ .js-anim .sec06-card[data-anim]:not(.is-inview) .sec06-card__link { opacity: 0; } .sec06-card.is-inview .sec06-card__link { animation: anim-glide .5s var(--ease-anim) both; } .sec06-card.is-inview .sec06-card__link:nth-child(1) { animation-delay: .22s; } .sec06-card.is-inview .sec06-card__link:nth-child(2) { animation-delay: .27s; } .sec06-card.is-inview .sec06-card__link:nth-child(3) { animation-delay: .32s; } .sec06-card.is-inview .sec06-card__link:nth-child(4) { animation-delay: .37s; } .sec06-card.is-inview .sec06-card__link:nth-child(5) { animation-delay: .42s; } .sec06-card.is-inview .sec06-card__link:nth-child(6) { animation-delay: .47s; } .sec06-card.is-inview .sec06-card__link:nth-child(7) { animation-delay: .52s; } .sec06-card.is-inview .sec06-card__link:nth-child(8) { animation-delay: .57s; } /* ------------------------------------------------------------ 動きを控える設定のときは一切動かさない（§8-13） ここで初期状態の非表示も打ち消しておくのが重要。 打ち消さないと「動かないまま隠れている」状態になる。 ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .js-anim [data-anim], .js-anim [data-anim]:not(.is-inview), .js-anim [data-anim="veil"]:not(.is-inview), .js-anim [data-anim="veil-v"]:not(.is-inview), .js-anim [data-anim="draw"]:not(.is-inview), .js-anim [data-anim="zoom-in"]:not(.is-inview) > img, .js-anim .topMv-txtBox__ttl, .js-anim .topMv-imgBox, .js-anim .topMv-listBox-list__item, .js-anim .sec01-card[data-anim]:not(.is-inview) .sec01-card__icon, .js-anim .sec02-item[data-anim]:not(.is-inview) .sec02-item__ico, .js-anim .sec04-conceptBox__lead[data-anim]:not(.is-inview) .dot, .js-anim .sec05-reasonList__item[data-anim]:not(.is-inview) .sec05-reasonList__body, .js-anim .sec06-card[data-anim]:not(.is-inview) .sec06-card__link { opacity: 1 !important; clip-path: none !important; transform: none !important; animation: none !important; } .js-anim .topMv-img img { animation: none !important; } } /* ===== 17-fix-20260824.css ===== */ /* ============================================================ 17-fix-20260824 — クライアント要望「HP修正依頼.docx」(2026-08-22) ============================================================ */ /* ------------------------------------------------------------ ★最重要：SPメニューの重なりとタップ不具合（1つの原因で両方起きていた） 院長ご報告 ・「一番下の美容内服・注射のメニューが『料金案内』の文字にかぶって写る。 そのためこのメニューが押せません」 ・「Menu内だけ、押した箇所が青くならない／周り全体が青くなる／ 飛べなくなることがある。PC版では全く問題ない」 原因（実測で特定） PC用に `.header-navList__link { flex: 1; height: 100%; }` を指定しているが、 SP側で **リセットし忘れていた**。SPでは `display: block` を上書きしているが、 フレックスアイテムに対する display の指定は外側の並びに影響しないため、 `flex: 1`（= grow1 / shrink1 / basis 0%）が生き残る。 親 `.header-navList` は SP で flex-direction: column ／ overflow-y: auto ／ height 制約あり の状態なので、basis 0% ＋ shrink 1 の子は **中身の高さではなく余りスペースの配分で決まる＝中身より小さく潰れる**。 結果として ・診療案内を開くと中身が箱からあふれ、次の「料金案内」と重なる ・箱の位置と文字の見える位置がずれるため、見えている文字を押しても リンクに当たらない／親要素がハイライトされる（＝周り全体が青くなる） という2つの症状が同時に出ていた。 対処：SPでは中身の高さで並べる（flex を効かせない） ------------------------------------------------------------ */ @media screen and (max-width: 768px) { .header-navList__link { flex: 0 0 auto; /* 中身の高さを尊重する。潰さない */ height: auto; /* PC用の height:100% を打ち消す */ min-height: 0; } /* 開いたサブメニューも中身の高さで確定させる */ .header-nav .subLink, .header-nav .subLink-catBox, .header-nav .subLink-cat { flex: 0 0 auto; height: auto; min-height: 0; } } /* ------------------------------------------------------------ タップの手応えを正す（SPメニュー） ・押した箇所だけが色づくよう、ハイライトの対象をリンク自身にする ・タップ後の待ち時間（ダブルタップ判定の300ms）を無くす ・リンクがマスいっぱいに広がるようにして、見た目と当たり判定を一致させる ------------------------------------------------------------ */ @media screen and (max-width: 768px) { .header-nav a, .header-nav .link, .header-nav .is-plus { -webkit-tap-highlight-color: rgb(99 136 238 / 22%); touch-action: manipulation; } /* 親要素が光らないようにする（「周り全体が青くなる」対策） */ .header-navList, .header-navList__link, .subLink, .subLink-catBox, .subLink-cat, .subLink-linkBox { -webkit-tap-highlight-color: transparent; } /* リンクをマス全体に広げ、押せる範囲を指の大きさに合わせる */ .subLink-linkBox a { display: block; min-height: 44px; /* 指で押しやすい最小サイズ */ padding: 11px 4px; box-sizing: border-box; } .subLink-linkBox a p { display: block; } /* 押している間だけ薄く色を敷いて、押せたことが分かるようにする */ .subLink-linkBox a:active { background: rgb(99 136 238 / 10%); } .header-navList__link .link:active { background: rgb(99 136 238 / 8%); } /* ＋／− の当たり判定を広げる（隣のリンクを誤爆しないように） */ .is-plus { width: 44px; height: 44px; top: 8px; right: 0; } } /* ------------------------------------------------------------ ご要望：診療メニューの文字をワンサイズ大きく 「ここはHPの肝だと思うので、見た目としても押しやすく誘導したい」 ------------------------------------------------------------ */ .subLink-linkBox a p { font-size: 13px; } /* PC 12px → 13px */ @media screen and (max-width: 768px) { .subLink-linkBox a p { font-size: 13px; } /* SP 11px → 13px */ .subLink-cat__ttl { font-size: 13px; } } /* ------------------------------------------------------------ ご要望：自由診療TOPのメニューがSPで右に寄りすぎている 原因：.card__list の li に list-style: disc と margin-left: 2em が 残っていたため、黒丸のぶんだけ右へずれていた （15-req では .card__list を対象外にしていた） ------------------------------------------------------------ */ .local__content .card__list { padding-left: 0; } .local__content .card__list > li { margin-left: 0; list-style: none; } .local__content .card__list > li::marker { content: none; } /* ------------------------------------------------------------ ご要望：イラスト間・イラスト下のオレンジ矢印を削除 顔イボ・首イボ除去／美肌成分深層導入 の PC版・SP版とも ------------------------------------------------------------ */ .local__content .card__2list__item.is-arrow::after { content: none; } /* ------------------------------------------------------------ ご要望：「期待できる効果」の上の余白が小さく下が大きいので逆にしたい 原因：小見出しに margin-top が付いておらず、直後の箇条書きに margin-top: 1.5em が付いていたため上下が逆転していた ------------------------------------------------------------ */ .local__content .courseCard__subTtl { margin-top: 2em; margin-bottom: .5em; } .local__content .courseCard__body > .courseCard__subTtl:first-child, .local__content .courseCard__subTtl:first-child { margin-top: 0; } /* 小見出しの直後に来る箇条書きは、上の余白を詰めて見出しとくっつける */ .local__content .courseCard__subTtl + ul, .local__content .courseCard__subTtl + .feeList, .local__content .courseCard__subTtl + .priceRows { margin-top: .2em; } @media screen and (max-width: 768px) { .local__content .courseCard__subTtl { margin-top: 1.7em; } } /* ------------------------------------------------------------ ご要望：フッター（一番下の診療メニュー）のカテゴリー間に区切りが欲しい 「脊椎外科（せぼね外科）とドック検査の間」 「内科・その他と当院についての間」 「自由診療とその他の間」 に、他の箇所と同じように仕切りかスペースを。 この3箇所は1つの列の中でカテゴリーが続いているため、 列の切り替わりで自然にできる余白が無かった。 2つ目以降の見出し（is-parent）の上に区切り線と余白を入れる。 ------------------------------------------------------------ */ .footer-navList__item.is-parent + .footer-navList__item.is-child { margin-top: 0; } .footer-navList__item.is-child + .footer-navList__item.is-parent { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 22%); } @media screen and (max-width: 768px) { .footer-navList__item.is-child + .footer-navList__item.is-parent { margin-top: 16px; padding-top: 14px; } } /* ===== 18-fix-20260827.css ===== */ /* ============================================================ 2026-08-27 クライアントご指摘の修正 ============================================================ */ /* --- 記事タイトルが本文と同じ見た目になっていた ------------------- ★原因：SEO対応で記事タイトルを h2 → h1 に変更した際、 スタイルが .content_post h2 という要素セレクタで当たっていたため、 h1 になった瞬間に何も効かなくなり、16px・太さ400（本文と同じ）で 表示されていた。 → クラス（.news_ttl）基準で当て直す。要素名を変えても外れない。 本文中の小見出し（.content_post h2）は既存記事で使われているので そのまま残し、タイトルはより大きく＋区切り線で明確に差をつける。 */ .content_post .news_ttl { margin: 4px 0 32px; padding-bottom: 20px; border-bottom: 1px solid rgba(12, 60, 139, .18); color: var(--c-navy); font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; word-break: break-word; } /* 本文の1つ目の要素が見出しでも詰まって見えないようにする */ .content_post .news_ttl + * { margin-top: 0; } /* 本文中の小見出し（客先が記事内で使用中）。タイトルとの差を明確にする */ .content_post h2 { margin-top: 2em; font-size: 24px; } @media screen and (max-width: 768px) { .content_post .news_ttl { margin: 4px 0 24px; padding-bottom: 16px; font-size: 22px; letter-spacing: .02em; } .content_post h2 { font-size: 20px; } } /* --- PCヘッダーのタブ幅 ------------------------------------------ ★「医院紹介」だけが不自然に広く、「診療メニューはこちら」が窮屈で 3行に折り返していた（クライアントご指摘）。 以前のナビは1つ目が「医院紹介・初めての方へ」の2行構成だったため :first-child を広くしていたが、項目が分かれた今は逆効果になっていた。 → 1つ目の特別扱いをやめ、文字数の多い「診療メニューはこちら」に幅を配分する。 */ @media screen and (min-width: 769px) { .header-navList__link:first-child { flex: 1 1 0%; min-width: 0; } .header-navList__link.is-subLink--menu { flex: 1.9 1 0%; min-width: 150px; } } /* 1024px前後の中間幅で「初めての方へ」だけ2行になるため、 その帯だけ文字を少し詰めて1行に収める（1280px以上は変更しない） */ @media screen and (min-width: 769px) and (max-width: 1200px) { .header-navList__link .link { font-size: 14px; letter-spacing: 0; } } /* --- カテゴリーバッジが文字数に追従しない --------------------------- ★バッジに固定幅（PC 61px / SP 48px）が入っており、「開院」「求人」のような 2文字前提の設計だった。「ミライのための健康コラム」を入れたところ 22pxの箱の中で3行に折り返し、1行目の「ミライのた」しか見えていなかった （クライアントご指摘。実測 中身65px vs 箱22px）。 → 内容に合わせて横に伸びる形にする。短い名前は従来どおりの見た目を保つため min-width で下限を残す。今後どんなカテゴリー名を追加しても切れない。 */ .cmn-newsList-item-dateBox .category { width: auto; min-width: 61px; height: auto; min-height: 22px; padding: 0 10px; line-height: 22px; white-space: nowrap; } @media screen and (max-width: 768px) { .cmn-newsList-item-dateBox .category { width: auto; min-width: 48px; height: auto; min-height: 18px; padding: 0 8px; line-height: 18px; } } /* ===== 19-fix-20261005.css ===== */ /* ============================================================ 2026-10-05 修正 ============================================================ */ /* --- 本文中の電話番号はボタンにしない --------------------------------- ★本文中のリンクはすべて「矢印付きの大きなボタン」になる作り （.local__content a[href]）。電話番号もそれに巻き込まれ、 ・アクセスの「所在地・連絡先」の表の中で、電話番号の行だけが大きなボタンになる ・PCでは電話リンクを押せない設定（02-base.css）なのに、矢印付きで押せそうに見える 状態だった（2026-09-28 にアクセスへ電話番号を入れた際、見た目を測らず見落とした）。 → 電話番号は文字リンクとして表示する。スマホでは下線を付けて押せることを示す。 既存のボタン指定と同じ詳細度にし、後から読まれるこのファイルで上書きする。 */ .local__content a[href^="tel:"]:not(.local-linkBtns a):not(.cmn-bt01):not(.index-toc__list a) { display: inline; width: auto; max-width: none; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--c-navy); font-size: inherit; font-weight: 700; line-height: inherit; letter-spacing: .04em; text-align: inherit; text-decoration: none; } .local__content a[href^="tel:"]:not(.local-linkBtns a):not(.cmn-bt01):not(.index-toc__list a)::before { content: none; } @media (hover: hover) { .local__content a[href^="tel:"]:not(.local-linkBtns a):not(.cmn-bt01):not(.index-toc__list a):hover { background: none; box-shadow: none; } } @media screen and (max-width: 768px) { .local__content a[href^="tel:"]:not(.local-linkBtns a):not(.cmn-bt01):not(.index-toc__list a) { max-width: none; padding: 0; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; } } /* ===== 20-fix-20261013.css ===== */ /* ============================================================ 2026-10-13 修正（HP修正 20261013 ／ 肌質改善レーザーページ追加） ============================================================ */ /* --- A. TOP メイン画面のスライド ------------------------------------ ・4枚の写真を約10秒ずつ自然に切り替える（切り替えは main.js）。 ・★JSが動かない環境では1枚目だけが見える。2〜4枚目は最初から非表示で、 1枚目の中身（キャッチ・見出し・特長）は従来どおり [data-anim] の仕組みに 載せたまま（CLAUDE.md §8-11）。何かが「消えたまま」になる状態は作らない。 ・切り替えは「前の写真を残したまま、次の写真を上に重ねてフェード」させる。 両方を同時に薄くすると途中で白く抜けるため。 ・ゆっくりした拡大は .topMv-slide の内側で行うので横にはみ出さない（§8-9）。 */ .topMv-slide { position: relative; z-index: 0; /* スライドの重なりをこの中に閉じ込め、文字やメニューより下にする */ overflow: hidden; } /* ★高さは必ず明示する。写真を重ねるため全スライドを絶対配置にしたので、 中身から高さが決まらず 0 に潰れる（PCで背景が真っ白になった）。 SPは 09-top.css の 561px 指定が効いているので PC だけ指定する。 */ @media screen and (min-width: 769px) { .topMv-slide { height: 990px; } } .topMv-slide .splide__list { position: relative; height: 100%; margin: 0; padding: 0; list-style: none; } .topMv-slideItem { position: absolute; inset: 0; opacity: 0; visibility: hidden; } .topMv-slideItem.is-active { z-index: 2; opacity: 1; visibility: visible; transition: opacity 1.6s ease; } .topMv-slideItem.is-leaving { /* 次の写真が重なり終わるまで、前の写真は不透明のまま残す */ z-index: 1; opacity: 1; visibility: visible; } .topMv-slideItem .topMv-img { position: relative; height: 100%; } /* 文字を読みやすくするための薄い影。写真ごとに濃さ・向きを変える */ .topMv-slideItem .topMv-img::after { content: ""; position: absolute; inset: 0; background: var(--mv-shade, none); pointer-events: none; } /* ヘッダーの白い文字（医院名・住所・診療時間）を読めるようにする上端の影。 従来の写真は暗かったので不要だったが、明るい写真（MRI室・イラスト）では 白い文字が背景に溶けて読めなくなったため全スライドに入れる。 */ .topMv-slideItem .topMv-img::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: 190px; background: linear-gradient(180deg, rgb(10 18 32 / var(--mv-top, 30%)) 0%, rgb(10 18 32 / 0%) 100%); pointer-events: none; } .topMv-slideItem.is-s2, .topMv-slideItem.is-s3 { --mv-top: 50%; } .topMv-slideItem.is-s1 { --mv-shade: linear-gradient(180deg, rgb(12 20 34 / 38%) 0%, rgb(12 20 34 / 46%) 55%, rgb(12 20 34 / 30%) 100%); } .topMv-slideItem.is-s2 { --mv-shade: linear-gradient(90deg, rgb(255 255 255 / 0%) 40%, rgb(255 255 255 / 48%) 72%, rgb(255 255 255 / 62%) 100%); } .topMv-slideItem.is-s3 { --mv-shade: radial-gradient(ellipse 60% 55% at 24% 30%, rgb(255 255 255 / 62%) 0%, rgb(255 255 255 / 0%) 100%); } .topMv-slideItem.is-s4 { --mv-shade: linear-gradient(180deg, rgb(28 24 60 / 42%) 0%, rgb(28 24 60 / 10%) 45%, rgb(0 0 0 / 0%) 70%); } /* 写真ごとに見せたい位置（主にスマホで左右が大きく切れるため） */ .topMv-slideItem .topMv-img img { object-position: center; } .topMv-slideItem.is-s2 .topMv-img img { object-position: 46% center; } .topMv-slideItem.is-s3 .topMv-img img { object-position: 74% center; } .topMv-slideItem.is-s4 .topMv-img img { object-position: 56% center; } /* 表示中の写真だけ、ごくゆっくり寄りから戻す（従来の1枚目の演出を全スライドに） */ @keyframes anim-mv-kenburns { from { transform: scale(1.07); } to { transform: scale(1); } } .topMv-slideItem.is-active .topMv-img img, .topMv-slideItem.is-leaving .topMv-img img { animation: anim-mv-kenburns 10s ease-out both; /* 表示8秒＋フェード1.6秒の間ずっと動くように */ } /* 1枚目以外のコメント／1枚目の中身の切り替え */ .topMv-scene { transition: opacity .9s ease, visibility 0s linear .9s; } .topMv-scene:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; } .topMv-scene.is-active { opacity: 1; visibility: visible; transition: opacity 1.2s ease .45s, visibility 0s; } /* 1枚目のキャッチは「もう少し小さめ（控えめ）」に（院長要望） */ .topMv-imgBox { max-width: 440px; height: 224px; } /* 2〜4枚目のコメント */ .topMv-caption { position: absolute; z-index: 1; width: min(46%, 640px); } .topMv-caption__txt { margin: 0; color: #fff; font-family: var(--font-serif); font-size: 44px; font-weight: 500; line-height: 1.6; letter-spacing: .08em; text-shadow: 0 2px 16px rgb(0 0 0 / 45%), 0 0 2px rgb(0 0 0 / 30%); } /* 2枚目は装置が画面の大半を占めるので、PCでは写真を右寄せで見せて右側の壁を広く出し、 その壁の上にコメントを置く（装置の操作パネルに文字が重ならないように） */ @media screen and (min-width: 769px) { .topMv-slideItem.is-s2 .topMv-img img { object-position: 100% center; } } .topMv-caption.is-s2 { top: 36%; right: 9%; width: auto; } /* 右端の額縁にかからない位置 */ .topMv-caption.is-s3 { top: 20%; left: 7%; } .topMv-caption.is-s4 { top: 17%; left: 50%; width: min(80%, 1000px); transform: translateX(-50%); text-align: center; } /* 明るい写真の上は濃紺の文字にする */ .topMv-caption.is-s2 .topMv-caption__txt, .topMv-caption.is-s3 .topMv-caption__txt { color: var(--c-navy); text-shadow: 0 0 18px rgb(255 255 255 / 90%), 0 0 4px rgb(255 255 255 / 85%); } /* 切り替えの表示（ドット）と一時停止 */ .topMv-ctrl { position: absolute; right: 40px; bottom: 140px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 4px 6px 4px 14px; border-radius: 999px; background: rgb(10 18 32 / 32%); /* 明るい写真の上でも白い線が見えるように */ } .topMv-ctrl[hidden] { display: none; } .topMv-dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } .topMv-dot { position: relative; width: 36px; height: 24px; /* 押しやすい大きさは確保し、見た目は細い線にする */ padding: 0; border: 0; background: none; cursor: pointer; } .topMv-dot::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgb(255 255 255 / 55%); box-shadow: 0 0 0 1px rgb(0 0 0 / 15%); transition: background-color .3s ease; } .topMv-dot.is-active::before { background: #fff; } .topMv-pause { position: relative; width: 28px; height: 28px; padding: 0; border: 1px solid rgb(255 255 255 / 75%); border-radius: 50%; background: rgb(0 0 0 / 22%); cursor: pointer; } .topMv-pause::before, .topMv-pause::after { /* 再生中は「一時停止」の2本線 */ content: ""; position: absolute; top: 8px; width: 3px; height: 10px; background: #fff; } .topMv-pause::before { left: 9px; } .topMv-pause::after { left: 14px; } .topMv-pause[aria-pressed="true"]::before { /* 停止中は「再生」の三角 */ left: 10px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #fff; background: none; } .topMv-pause[aria-pressed="true"]::after { content: none; } .topMv-dot:focus-visible, .topMv-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media screen and (max-width: 768px) { .topMv-imgBox { max-width: 240px; height: 104px; } .topMv-caption, .topMv-caption.is-s2, .topMv-caption.is-s3, .topMv-caption.is-s4 { top: 96px; right: 22px; left: 22px; width: auto; transform: none; } .topMv-caption.is-s4 { text-align: center; } .topMv-caption__txt { font-size: 23px; letter-spacing: .06em; } /* スマホは写真の上側に文字が来るので、影の向きを上からに揃える */ .topMv-slideItem.is-s2 { --mv-shade: linear-gradient(180deg, rgb(255 255 255 / 62%) 0%, rgb(255 255 255 / 0%) 45%); } .topMv-slideItem.is-s3 { --mv-shade: linear-gradient(180deg, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 0%) 45%); } .topMv-ctrl { right: 14px; bottom: 8px; gap: 8px; } .topMv-dot { width: 26px; } .topMv-pause { width: 24px; height: 24px; } .topMv-pause::before, .topMv-pause::after { top: 6px; } .topMv-pause::before { left: 7px; } .topMv-pause::after { left: 12px; } .topMv-pause[aria-pressed="true"]::before { left: 8px; } } /* 動きを控える設定：自動では切り替えず（main.js）、拡大の演出も止める */ @media (prefers-reduced-motion: reduce) { .topMv-slideItem.is-active .topMv-img img, .topMv-slideItem.is-leaving .topMv-img img { animation: none !important; } .topMv-slideItem.is-active, .topMv-scene, .topMv-scene.is-active { transition: none !important; } } /* --- D. TOP 設備・院内紹介：PCでも機器名を中央揃えに（院長要望） --- */ @media screen and (min-width: 769px) { .sec07-itemList__ttl, .sec07-itemList__txt { text-align: center; } } /* --- C. 片頭痛：お薬一覧の表 ------------------------------------- PCは表、スマホは薬剤ごとのカードにする（3列を縦に積むだけだと読みにくい） */ .local__content .drugTable { margin-bottom: 3em; } .local__content .drugTable table { margin-bottom: 0; table-layout: fixed; } .local__content .drugTable thead th:nth-child(1) { width: 30%; } .local__content .drugTable thead th:nth-child(2) { width: 15%; text-align: center; } .local__content .drugTable tbody th { background: rgb(99 136 238 / 6%); font-weight: 700; white-space: normal; } .local__content .drugTable td.drugTable__use { color: var(--c-navy); font-weight: 700; text-align: center; white-space: nowrap; } @media screen and (max-width: 768px) { .local__content .drugTable table { border: 0; } .local__content .drugTable table, .local__content .drugTable tbody { display: block; width: 100%; min-width: 0; } /* table-scroll-wrapper の最小幅560pxを解除 */ .local__content .drugTable .table-scroll-wrapper { overflow: visible; } .local__content .drugTable thead { display: none; } /* セルも縦積みにする（行だけ block にしてもセルは表のまま横に並び、右が切れる） */ .local__content .drugTable tbody th, .local__content .drugTable tbody td { display: block; width: auto; border-right: 0; padding: 12px 16px; } .local__content .drugTable tbody td:last-child { border-bottom: 0; } .local__content .drugTable tbody td.drugTable__use { border-bottom: 0; } .local__content .drugTable tbody tr { display: block; margin-bottom: 12px; border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; background: #fff; } .local__content .drugTable tbody tr:last-child { margin-bottom: 0; border-bottom: 1px solid var(--c-line); } .local__content .drugTable tbody th { font-size: 15px; } .local__content .drugTable td.drugTable__use { padding-bottom: 0; text-align: left; } .local__content .drugTable td.drugTable__use::before { content: attr(data-label) "："; color: var(--c-text); font-weight: 400; } } /* --- E. 医院紹介：写真の付記 ------------------------------------ */ .local__content .imgBox.has-caption img { display: block; width: 100%; height: auto; } .local__content .imgBox__caption { margin: 12px 0 0; color: var(--c-text); font-size: 14px; line-height: 1.6; text-align: center; } @media screen and (max-width: 768px) { .local__content .imgBox__caption { font-size: 13px; } } /* ===== 21-fix-20261019.css ===== */ /* ============================================================ 21-fix-20261019 — 2026-10-19 院長要望 A. TOPスライド1枚目に「稲沢市で、頭痛・めまい・しびれ・腰痛なら当院へ。」の帯 B. 新規4ページ（腰部脊柱管狭窄症・腰椎椎間板ヘルニア・舌下免疫療法・健康診断）の部品 ============================================================ */ /* --- A. 症状の帯 ------------------------------------------- 院長の見本：キャッチの下に、金色の細線で挟んだ半透明の帯。症状名だけ大きく金色。 ・背景は左右をぼかして写真になじませる（端がくっきりした箱にしない） ・その下の「脳と体の未来を支える総合健康クリニック」は見本どおり一段小さくする */ .topMv-symptom { position: relative; z-index: 2; display: flex; justify-content: center; margin: 18px auto 0; } .topMv-symptom__in { position: relative; display: inline-block; padding: 12px 72px 13px; background: linear-gradient(90deg, rgb(20 14 8 / 0%) 0%, rgb(20 14 8 / 58%) 16%, rgb(20 14 8 / 58%) 84%, rgb(20 14 8 / 0%) 100%); color: #fff; font-family: var(--font-serif); font-size: 28px; font-weight: 500; line-height: 1.5; letter-spacing: .06em; text-shadow: 0 1px 6px rgb(0 0 0 / 45%); } .topMv-symptom__in::before, .topMv-symptom__in::after { /* 上下の金の細線（中央が濃く、端は消える） */ content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgb(222 182 110 / 0%) 0%, rgb(222 182 110 / 95%) 20%, rgb(222 182 110 / 95%) 80%, rgb(222 182 110 / 0%) 100%); } .topMv-symptom__in::before { top: 0; } .topMv-symptom__in::after { bottom: 0; } .topMv-symptom strong { color: #f0c477; font-size: 36px; font-weight: 700; letter-spacing: .04em; } .topMv-symptom + .topMv-txtBox { margin-top: 14px; } .topMv-symptom + .topMv-txtBox .topMv-txtBox__ttl { font-size: 26px; } .topMv-symptom + .topMv-txtBox .topMv-txtBox__ttl small { font-size: 20px; } .topMv-symptom ~ .topMv-listBox-list { margin-top: 34px; } @media screen and (max-width: 1400px) { .topMv-symptom + .topMv-txtBox .topMv-txtBox__ttl small { font-size: 17px; } } @media screen and (max-width: 768px) { .topMv-symptom { margin-top: 10px; } .topMv-symptom__in { padding: 7px 26px 8px; font-size: 15px; line-height: 1.45; letter-spacing: .03em; } .topMv-symptom strong { font-size: 19px; letter-spacing: .02em; } .topMv-symptom + .topMv-txtBox { margin-top: 8px; } .topMv-symptom + .topMv-txtBox .topMv-txtBox__ttl { font-size: 17px; } .topMv-symptom + .topMv-txtBox .topMv-txtBox__ttl small { font-size: 14px; } .topMv-symptom ~ .topMv-listBox-list { margin-top: 12px; } /* 帯を足した分だけ3つの箱を詰め、右下の切替ボタン（下端8px・高さ約38px）に箱の文字がかからないようにする */ .topMv-symptom ~ .topMv-listBox-list .topMv-listBox-list__item { height: 60px; padding: 8px 0; } .topMv-symptom ~ .topMv-listBox-list .topMv-listBox-list__item strong { margin-bottom: 1px; font-size: 17px; } } /* --- B. 新規4ページの部品 ------------------------------------- ・導入文（目次の上）が複数段落のため、段落の間をあける（既存ページの導入は1段落なので影響しない） ・「〜」を並べた“患者さんの声”は、本文と区別できるよう淡い囲みにする （白い章でもクリーム色の章でも見えるよう、色は淡い青の透過） */ /* 既存の .local__content .index p { margin-top: 0 } より強くする（詳細度で負けて効いていなかった） */ .local__content .index .introBox > * + * { margin-top: 1em; } .local__content .index .introBox > .imgBox { margin-block: 30px; } .local__content .voiceBox { padding: 14px 20px; border-radius: 8px; background: rgb(99 136 238 / 7%); line-height: 1.9; } @media screen and (max-width: 768px) { .local__content .voiceBox { padding: 12px 14px; } } /* ===== 22-fix-20261020.css ===== */ /* ============================================================ 22-fix-20261020 — 2026-10-20 院長要望 A. TOP：3診療科の下に「美容皮膚科 MIRAIE BEAUTY」の横長バナー B. メディカルダイエット：薬の比較表（片頭痛の .drugTable を流用。SPはカード表示） ============================================================ */ /* --- A. 美容皮膚科バナー -------------------------------------- 院長の見本：パール調の淡いピンク地／左にロゴ、中央に「全顔シミ取り放題 9,900円」、 右に「くわしく見る」と女性の写真。写真は右端から左へ溶かして地になじませる。 */ .topBeauty { --tb-ink: #6f5458; /* 見本のくすんだローズ */ --tb-rose: #b88a8f; position: relative; z-index: 0; display: grid; grid-template-columns: max-content 1fr auto; /* ロゴは折り返さない幅を確保 */ align-items: center; gap: 0 36px; max-width: 1200px; min-height: 170px; margin: 40px auto 0; padding: 24px 250px 24px 44px; overflow: hidden; border: 1px solid rgb(184 138 143 / 22%); border-radius: 6px; background: radial-gradient(ellipse 40% 90% at 8% 20%, rgb(255 255 255 / 95%) 0%, rgb(255 255 255 / 0%) 70%), radial-gradient(ellipse 30% 80% at 55% 110%, rgb(244 214 218 / 70%) 0%, rgb(244 214 218 / 0%) 70%), linear-gradient(100deg, #fbf6f6 0%, #f6eced 45%, #f3e7e8 100%); box-shadow: 0 6px 24px rgb(111 84 88 / 10%); color: var(--tb-ink); text-decoration: none; transition: box-shadow .3s ease; /* 対象を限定（§8-7） */ } .topBeauty:hover { box-shadow: 0 10px 30px rgb(111 84 88 / 18%); } .topBeauty__img { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 380px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); } .topBeauty__img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; } .topBeauty__brand { display: grid; justify-items: center; padding-right: 36px; border-right: 1px solid rgb(111 84 88 / 25%); font-family: var(--font-serif); line-height: 1.3; white-space: nowrap; } .topBeauty__en { font-size: 25px; letter-spacing: .12em; } .topBeauty__jp { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 30px; letter-spacing: .2em; } .topBeauty__jp::before, .topBeauty__jp::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; } .topBeauty__body { display: grid; gap: 8px; } .topBeauty__offer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; } .topBeauty__tag { padding: 4px 16px; border-radius: 999px; background: rgb(232 196 200 / 55%); font-family: var(--font-serif); font-size: 18px; letter-spacing: .08em; } .topBeauty__price { color: var(--tb-rose); font-family: var(--font-serif); font-size: 54px; font-weight: 500; line-height: 1; letter-spacing: .02em; background: linear-gradient(180deg, #c9a0a4 0%, #9a6e74 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .topBeauty__price small { margin-left: 2px; font-size: 26px; } .topBeauty__tax { font-size: 13px; letter-spacing: 0; } .topBeauty__txt { font-family: var(--font-serif); font-size: 15px; letter-spacing: .08em; } .topBeauty__btn { position: relative; display: inline-block; min-width: 180px; padding: 13px 46px 13px 30px; background: #3b3536; color: #fff; font-size: 15px; letter-spacing: .1em; text-align: center; } .topBeauty__btn::after { /* 右向きの山形 */ content: ""; position: absolute; top: 50%; right: 20px; width: 7px; height: 7px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: translateY(-50%) rotate(45deg); } @media screen and (max-width: 1200px) { .topBeauty { gap: 0 26px; padding-right: 200px; } .topBeauty__img { width: 300px; } .topBeauty__en { font-size: 21px; } .topBeauty__jp { font-size: 25px; } .topBeauty__price { font-size: 46px; } } /* SP：上にロゴ、その下に料金、最下段にボタン。写真は右側に薄く敷く */ @media screen and (max-width: 768px) { .topBeauty { grid-template-columns: 1fr; justify-items: start; gap: 10px; min-height: 0; margin: 20px 0 0; padding: 18px 40% 18px 18px; } .topBeauty__img { width: 50%; } .topBeauty__img img { object-position: 64% 22%; } .topBeauty__brand { justify-items: start; padding-right: 0; border-right: 0; } .topBeauty__en { font-size: 15px; } .topBeauty__jp { margin-top: 2px; font-size: 20px; gap: 8px; } .topBeauty__jp::before, .topBeauty__jp::after { display: none; } .topBeauty__body { gap: 4px; } .topBeauty__offer { flex-direction: column; align-items: flex-start; gap: 6px; } .topBeauty__tag { padding: 3px 12px; font-size: 13px; } .topBeauty__price { font-size: 36px; } .topBeauty__price small { font-size: 18px; } .topBeauty__tax { font-size: 11px; } .topBeauty__txt { font-size: 12px; letter-spacing: .04em; } .topBeauty__btn { min-width: 0; margin-top: 4px; padding: 10px 40px 10px 22px; font-size: 13px; } } /* --- B. メディカルダイエットの比較表 -------------------------- 片頭痛の表（.drugTable）と同じ部品。列は「薬｜タイプ｜特徴」で、タイプ列を少し広げる */ .local__content .drugTable.is-diet thead th:nth-child(1) { width: 24%; } .local__content .drugTable.is-diet thead th:nth-child(2) { width: 18%; } .local__content .drugTable.is-diet td.drugTable__use { white-space: normal; } /* --- C. AGA の冒頭の料金表：導入文との間をあける（.introBox は 21-fix で定義） */ .local__content .index .introBox > .priceGroup__ttl { margin-top: 2em; } /* ===== 23-fix-20261027.css ===== */ /* ============================================================ 23-fix-20261027 — 2026-10-27 院長要望 A. TOP 美容皮膚科バナーの調整 PC：「くわしく見る」が女性の顔にかかる → 写真の幅だけ右の余白を取り、ボタンが写真に入らないようにする SP：縦に長い → PC のような横長に（文字を小さく、補足の一文はSPでは出さない） B. 健康診断のコース表（PCは表、SPはコースごとのカード） ============================================================ */ /* --- A. 美容皮膚科バナー ------------------------------------- */ .topBeauty { --tb-img: 330px; /* 写真の幅。文字・ボタンはこの手前で止める */ padding-right: calc(var(--tb-img) + 16px); } .topBeauty__img { width: var(--tb-img); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); /* ぼかしは写真の左端（顔より手前）だけ */ mask-image: linear-gradient(90deg, transparent 0%, #000 30%); } .topBeauty__img img { object-position: 60% 30%; } @media screen and (max-width: 1200px) { .topBeauty { --tb-img: 270px; padding-right: calc(var(--tb-img) + 12px); } } @media screen and (max-width: 1024px) { .topBeauty { --tb-img: 230px; gap: 0 20px; padding-left: 30px; } .topBeauty__brand { padding-right: 20px; } .topBeauty__txt { font-size: 13px; } } /* SP：左に文字、右に写真の横長。高さは PC と同じく低めに */ @media screen and (max-width: 768px) { .topBeauty { --tb-img: 44%; grid-template-columns: 1fr; gap: 6px; padding: 14px var(--tb-img) 14px 16px; } .topBeauty__img { width: var(--tb-img); } .topBeauty__img img { object-position: 62% 22%; } .topBeauty__en { font-size: 12px; letter-spacing: .1em; } .topBeauty__jp { margin-top: 0; font-size: 17px; letter-spacing: .16em; } .topBeauty__body { gap: 2px; } .topBeauty__offer { gap: 3px; } .topBeauty__tag { padding: 2px 10px; font-size: 11px; } .topBeauty__price { font-size: 28px; } .topBeauty__price small { font-size: 14px; } .topBeauty__tax { font-size: 10px; } .topBeauty__txt { display: none; } /* 高さを抑えるため SP では省く（PC では表示） */ .topBeauty__btn { margin-top: 2px; padding: 7px 30px 7px 16px; font-size: 12px; } .topBeauty__btn::after { right: 14px; width: 6px; height: 6px; } } /* --- B. 健康診断のコース表 ----------------------------------- */ .local__content .checkupTable { margin: 30px 0 10px; } .local__content .checkupTable table { margin-bottom: 0; table-layout: fixed; } .local__content .checkupTable thead th { padding: 12px 6px; font-size: 14px; line-height: 1.4; text-align: center; vertical-align: middle; } .local__content .checkupTable thead th:nth-child(1) { width: 27%; text-align: left; padding-left: 16px; } .local__content .checkupTable thead th:nth-child(2) { width: 12%; } .local__content .checkupTable .checkupTable__course { padding: 14px 16px; background: rgb(99 136 238 / 6%); font-weight: 700; line-height: 1.5; white-space: normal; } .local__content .checkupTable__note { display: block; margin-top: 2px; color: var(--c-text); font-size: 13px; font-weight: 400; } .local__content .checkupTable .checkupTable__price { color: var(--c-navy); font-size: 17px; font-weight: 700; text-align: center; white-space: nowrap; } .local__content .checkupTable__price small { display: block; font-size: 11px; font-weight: 400; color: var(--c-text); } .local__content .checkupTable .checkupTable__mark { padding: 10px 4px; font-size: 18px; text-align: center; } .local__content .checkupTable__mark.is-yes { color: var(--c-navy); } .local__content .checkupTable__mark.is-no { color: #b5b5b5; } .local__content .checkupTable__legend { margin-top: 8px; font-size: 13px; color: #666; } @media screen and (max-width: 768px) { .local__content .checkupTable table, .local__content .checkupTable tbody { display: block; width: 100%; min-width: 0; border: 0; } .local__content .checkupTable thead { display: none; } .local__content .checkupTable tbody tr { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 12px; overflow: hidden; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; } .local__content .checkupTable tbody tr > * { border-right: 0; border-bottom: 0; } .local__content .checkupTable .checkupTable__course { grid-column: 1 / -1; padding: 12px 14px; font-size: 15px; } .local__content .checkupTable .checkupTable__price { grid-column: 1 / -1; padding: 8px 14px 10px; border-bottom: 1px solid var(--c-line); text-align: left; font-size: 20px; } .local__content .checkupTable__price small { display: inline; margin-left: 2px; } /* 検査項目：「身長・体重・腹囲 ○」の2列の一覧 */ .local__content .checkupTable .checkupTable__mark { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 14px; font-size: 15px; border-top: 1px dashed var(--c-line); } .local__content .checkupTable .checkupTable__mark::before { content: attr(data-label); color: var(--c-text); font-size: 13px; } .local__content .checkupTable__mark.is-no::before { color: #9a9a9a; } } /* PC の表：見出しは折り返してよい（既定の nowrap だと「身長・体重・腹囲」が隣の列に重なる） */ .local__content .checkupTable thead th { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; } .local__content .checkupTable thead th:nth-child(1) { width: 25%; } .local__content .checkupTable thead th:nth-child(2) { width: 11%; } /* --- C. 料金案内：健康診断のカード --------------------------- 1行目：コース名／2行目：左に「当日発行可」などの補足、右に料金。3枚とも同じ並びにそろえる */ .local__content .courseCard.is-checkup .courseCard__head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 16px; } .local__content .courseCard.is-checkup .courseCard__name { grid-column: 1 / -1; } .local__content .courseCard.is-checkup .courseCard__price { margin-left: 0; } @media screen and (max-width: 768px) { .local__content .courseCard.is-checkup .courseCard__head { padding: 14px 16px; } .local__content .courseCard.is-checkup .courseCard__name { font-size: 18px; } .local__content .courseCard.is-checkup .courseCard__time { font-size: 12.5px; } .local__content .courseCard.is-checkup .courseCard__price { font-size: 22px; } }