のデフォルトマージンをリセット */ } .fixed-button__text { opacity: 0; transition: opacity 0.3s ease 0.1s; margin-left: var(--spacing-sm); color: var(--accent-dark); } /* PC ホバーエフェクト */ .fixed-button-tel:hover, .fixed-button-web:hover { background-color: var(--white); padding-right: calc(var(--spacing-lg) + 140px); } .fixed-button-tel:hover .fixed-button__text, .fixed-button-web:hover .fixed-button__text { opacity: 1; } .fixed-button-tel:hover .fixed-button__p, .fixed-button-web:hover .fixed-button__p { display: none; } @media screen and (max-width: 768px) { /* スマホ用コンテナ（バー全体） */ .fixed-nav-sp { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; background-color: var(--white); /* 背景色 */ box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 上向きの影 */ z-index: 1000; } /* 各ボタン（電話とWEB予約） */ .fixed-button-tel, .fixed-button-web { /* PC用の fixed, right, bottom, 既存のpadding, radius, shadow, width, height, border をリセット */ position: static; right: auto; bottom: auto; width: 50%; /* 2つのボタンで均等に分割 */ height: auto; /* 高さを自動調整 */ border: none; border-radius: 0; box-shadow: none; padding: var(--spacing-sm); /* バーの高さ（上下余白） */ background-color: transparent; /* コンテナの背景色に合わせる */ overflow: visible; transition: none; /* PC用ホバーエフェクト解除 */ /* OOCSS: PCとSPで共通の flex, align-items は継承 */ display: flex; align-items: center; justify-content: center; /* 中央揃え */ } /* ボタン間の区切り線 (不要であれば削除) */ .fixed-button-tel { /* :root に --gray-border のような変数があれば置き換えてください */ border-right: 1px solid #eee; } /* リンクエリアのスタイル調整 */ .fixed-button-tel a, .fixed-button-web a { /* (変更) 縦並び -> 横並び (デフォルトのrow) */ flex-direction: row; justify-content: center; align-items: center; width: 100%; height: auto; padding: 5px 0; /* リンクエリア内の余白 */ color: var(--primary-blue); /* テキスト色を再指定 */ } .fixed-button__icon { width: 24px; height: 24px; margin-bottom: 0; /* (変更) 縦並び用のマージン削除 */ margin-right: 5px; /* (追加) アイコンとテキストの間隔 */ } /* (変更) 「電話」「予約」のテキストは非表示 */ .fixed-button__p { display: none; } /* (変更) 「電話で問い合わせ」「WEB予約」のテキストを表示 */ .fixed-button__text { display: block; /* または inline */ opacity: 1; /* PC用スタイルを上書き */ margin-left: 0; /* PC用スタイルを上書き */ color: var(--accent-dark); /* PC用スタイルを継承（または var(--primary-blue) など） */ font-size: 13px; /* サイズ調整 */ line-height: 1; transition: none; /* PC用トランジション解除 */ } /* スマホではホバーエフェクト（横に伸びる）を無効化 */ .fixed-button-tel:hover, .fixed-button-web:hover { background-color: transparent; padding-right: var(--spacing-sm); /* paddingを元に戻す */ } .fixed-button-tel:hover .fixed-button__text, .fixed-button-web:hover .fixed-button__text { display: block; /* (変更) 常時表示 */ } .fixed-button-tel:hover .fixed-button__p, .fixed-button-web:hover .fixed-button__p { display: none; /* 常時非表示 */ } /* .is-expanded（JS制御）も無効化 */ .fixed-button-tel.is-expanded, .fixed-button-web.is-expanded { background-color: transparent; padding-right: var(--spacing-sm); } .fixed-button-tel.is-expanded .fixed-button__text, .fixed-button-web.is-expanded .fixed-button__text { display: block; /* (変更) 常時表示 */ } } /* ================================== * TOP info 音岩瀬 * =================================== */ .wpcf7{ width: 90% !important; max-width: 1144px !important; } .wpcf7-form-control{ margin-bottom: 15px; } @media screen and (max-width: 768px) { .wpcf7{ width: 90% !important; } } .wpcf7 input[type=submit]{ color: var(--primary-blue)!important; border-color: var(--primary-blue)!important; } .wpcf7 input[type=submit]:hover{ color: #fff!important; background-color: var(--primary-blue-dark)!important; border-color: var(--primary-blue-dark)!important; } .form-control, .wpcf7 .wpcf7-validation-errors, .wpcf7 input[type=color], .wpcf7 input[type=date], .wpcf7 input[type=datetime-local], .wpcf7 input[type=datetime], .wpcf7 input[type=email], .wpcf7 input[type=file], .wpcf7 input[type=month], .wpcf7 input[type=number], .wpcf7 input[type=range], .wpcf7 input[type=search], .wpcf7 input[type=submit], .wpcf7 input[type=tel], .wpcf7 input[type=text], .wpcf7 input[type=time], .wpcf7 input[type=url], .wpcf7 input[type=week], .wpcf7 select, .wpcf7 textarea{ color: var(--primary-blue)!important; background-color: #fff; border-color: unset!important; outline: 0; box-shadow: unset!important; } /* ================================== * TOP info * =================================== */ .top-info__deco{ position: absolute; top: 0; width: 100%; } /* =================================== * テキスト切り抜き見出し * ==================================== */ /* 全体のコンテナ（基準点） */ .reveal-heading { position: relative; } /* ... h2共通のスタイル ... */ .reveal-heading__blur { filter: blur(3px); } /* ... ダーク ... */ .reveal-heading__sharp { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* このcsvの中身の形にくり抜かれる */ -webkit-mask-image: url('/wp-content/themes/understrap-child/images/top/circle-mask.svg'); mask-image: url('/wp-content/themes/understrap-child/images/top/circle-mask.svg'); -webkit-mask-size: 164px; mask-size: 164px; -webkit-mask-position: center; mask-position: left; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #f8f8f8; /* くり抜かれた部分がぼやけないようにサイトの背景色と同じ色を指定*/ align-content: center; } /* ... ソフト ... */ .reveal-heading__sharp-soft { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* このcsvの中身の形にくり抜かれる */ -webkit-mask-image: url('/wp-content/themes/understrap-child/images/top/circle-mask.svg'); mask-image: url('/wp-content/themes/understrap-child/images/top/circle-mask.svg'); -webkit-mask-size: 164px; mask-size: 164px; -webkit-mask-position: center; mask-position: left; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #ffffff; /* くり抜かれた部分がぼやけないようにサイトの背景色と同じ色を指定*/ align-content: center; } /* ================================== 診療時間 (Schedule) ==================================== */ /* --- コンポーネント --- */ /** * コンポーネント全体 (.schedule-info) */ /*診療時間テーブル (.schedule-table)*/ .schedule-table { width: 100%; border-collapse: collapse; text-align: center; } .schedule-table th, .schedule-table td { padding: 8px 16px; font-weight: normal; /* thのデフォルトの太字を解除 */ vertical-align: middle; } /* ヘッダー行 (月火水...) */ .schedule-table thead tr { border-bottom: 1px solid var(--accent); } /* 時間表示の列 (9:00~) */ .schedule-table thead th { border-right: 1px solid var(--accent); } .schedule-table tbody th { border-right: 1px solid var(--accent); padding-right: 24px; white-space: nowrap; /* 時間表記が改行されないように */ } /* 休診 (／) のスタイル */ .schedule-table .is-closed { color: var(--accent-dark); font-size: 20px; /* スラッシュを少し大きく見せる */ } @media (max-width: 768px) { .schedule-table th, .schedule-table td { padding: 8px 8px; } .schedule-table tbody th { padding-right: unset; } } /* ================================== * Full Width Text ==================================== */ /* コンポーネントのコンテナ */ .full-width-text-container { padding-right: 0; overflow: hidden; position: absolute; top: 0; left: 0; } .full-width-text { font-size: 5.2vw; white-space: nowrap; line-height: 1.2; margin: 0; padding: 0; } .top-section{ margin-top: -7px; padding-top: 90px; } @media (max-width: 768px) { .full-width-text{ font-size: 11vw; } .top-section{ padding-top: 240px; padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); } .top-section-img{ position: absolute; top: 15px; right: -67px; width: 56%; z-index: -1; } } /* =================================== TOP concept トップページ コンセプト ====================================== */ .top-concept__dr{ position: absolute; bottom: 0; width: clamp(280px, 34%, 390px); } .top-concept__img-box{ position: relative; height: 800px; } .top-concept__blur-deco{ position: absolute; bottom: 0; } .top-concept__heading{ position: absolute; top: 26%; left: 42%; } .top-concept__text-box{ width: 50%; position: absolute; top: 52%; left: 42%; } .top-concept__circle-w{ position: absolute; left: 40px; top: 146px; } .top-consept__point-img{ position: absolute; top: 0; right: 0; z-index: 0; } @media (max-width: 768px) { .top-concept__heading{ top: 5%; left: 7%; } .top-concept__text-box{ top: 18%; left: 5%; width: 90%; } .top-concept__circle-w{ top: 412px; max-width: unset; } .top-concept__img-box{ height: 1100px; } } /* =================================== * Component: Points Grid * =================================== */ .c-points-grid { display: flex; } .line-pink::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 60%; background-color: var(--accent-pink); } .c-point-item { flex: 1; /* 3つの要素を均等な幅にする */ padding: var(--spacing-xxl) var(--spacing-xl); position: relative; /* 疑似要素を配置するための基準となります */ padding-right: 20px; } /* 最後の要素だけは右側の境界線を消す */ .c-point-item:last-child { border-right: none; } .top-concept__point{ background-image: url('images/top/bg_01.png'); background-repeat: no-repeat; background-size: clamp(270px, 45%, 490px); background-position: top right; } @media (max-width: 768px) { .top-concept__point{ background-size: clamp(270px, 40%, 490px); background-position: top right; } .line-pink::after { display: none; } } /* =================================== * Responsive: for Tablet & Mobile * =================================== */ @media (max-width: 768px) { .c-points-grid { flex-direction: column; /* 縦並びにする */ border-bottom: none; /* 下の線をなくす */ } .c-point-item { border-right: none; /* 右の線をなくす */ border-bottom: 1px solid var(--border-color); /* 代わりに下の線を追加 */ } } /* =================================== * ボタン * =================================== */ .c-button { /* ① グラデーション背景の準備 */ background-image: var(--accent-bright); background-size: 0% 100%; /* ② 初期状態では幅を0にして隠す */ background-position: left; background-repeat: no-repeat; /* ③ アニメーションの設定 */ transition: background-color 0.3s ease-out, color 0.3s ease-out; background-color: transparent; /* 以下は既存のスタイル */ display: inline-flex; align-items: center; justify-content: space-between; width: 320px; padding: var(--spacing-lg) var(--spacing-xl); border: 1px solid var(--accent-bright); text-decoration: none; cursor: pointer; } .c-button span { position: relative; /* テキストが背景より手前に来るように */ } /* ④ ホバー時の変化 */ .c-button:hover { background-color: var(--primary-blue-light); color: var(--white)!important; border-color: var(--primary-blue); } .c-button--ghost::after { content: ''; border-bottom: 2px solid var(--text-color-light); border-right: 2px solid var(--text-color-light); width: 8px; height: 8px; transform: rotate(-45deg); transition: border-color 0.3s ease-out, transform 0.3s ease-out; } .c-button:hover::after { border-color: var(--white); /* 矢印の色も白に変更 */ transform: translateX(4px) rotate(-45deg); } .c-button--ghost:hover::after { transform: translateX(4px); } .top-consept__button{ text-align: center; } /* =================================== * top 全額治療 top-full-mouth * =================================== */ .top-full-mouth{ height: 1280px; position: relative; } .top-full-mouth__text-box{ width: 50%; } .top-full-mouth__blur-deco{ position: absolute; right: -200px; top: 25px; } .top-full-mouth__img{ width: 620px; position: absolute; right: 0; top: 80px; } .top-full-mouth__img-copy{ position: absolute; right: 40px; top: 440px; } .top-full-mouth__circle-w{ position: absolute; bottom: 100px; right: -200px; width: clamp(585px, 65%, 750px); } @media (max-width: 768px) { .top-full-mouth__circle-w{ top:unset; bottom: 90px; right: -80px; left: 0; max-width: clamp(430px, 110%, 610px); } } /* =================================== * クォーテーションマーク * =================================== */ .c-quote-heading { /* ① テキストと引用符を横並びにする */ display: flex; align-items: center; } /* 開始のクォーテーションマーク */ .c-quote-heading::before { content: ''; background-image: url('images/top/quotation.png'); background-size: contain; /* サイズを親要素に合わせる */ background-repeat: no-repeat; width: 16px; height: 16px; margin-right: var(--spacing-sm); transform: scaleX(-1); } /* 終了のクォーテーションマーク */ .c-quote-heading::after { content: ''; background-image: url('images/top/quotation.png'); background-size: contain; background-repeat: no-repeat; width: 16px; height: 16px; margin-left: var(--spacing-sm); } /* =================================== * 診療案内 * =================================== */ .top-medhical__blur-deco{ position: absolute; top: 6px; } .top-medical__heading{ position: absolute; left: 13%; top: 180px; } .top-medhical__heading-outer{ height: 380px; } .top-full-mouth__text-box{ padding-top: var(--spacing-section-lg); } .top-medical__top{ background-image: url('images/top/top-madical__deco_2.png'); background-repeat: no-repeat; background-size: 48%; background-position: top right; } @media (max-width: 768px) { .top-full-mouth__text-box{ width: 100%; } .top-medhical__heading-outer{ height: 260px; } .top-medical__heading{ left: 15%; top: 90px; } .top-medhical__blur-deco{ top: -90px; } .top-medhical__blur-deco svg{ width: 500px; } .top-full-mouth__text-box{ padding-top: unset; } .top-medical__top{ background-image:unset; } } /* =================================== * 診療案内 メニュー (調整版) * =================================== */ /* --- グリッドレイアウト --- */ .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg) var(--spacing-md); list-style: none; padding: 0; margin: 0; } /* --- カード全体 --- */ .service-card { /* 変更: display:flex に position:relative と overflow:hidden を統合 */ display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative; /* 子要素を絶対配置するための基準 */ overflow: hidden; /* はみ出した要素を隠す (このデザインの核) */ background-color: var(--secondary); text-decoration: none; transition: var(--transition); } .service-card:hover { transform: translateY(-5px); opacity: 0.9; /* ホバー表現はお好みで */ } /* 追加: アイコン背景の円を疑似要素で作成 */ .service-card::before { content: ''; position: absolute; top: 25px; left: 30px; transform: translate(-50%, -50%); width: 75px; /* 円のサイズ */ height: 75px; /* 円のサイズ */ background-color: var(--primary-blue); border-radius: 50%; z-index: 1; /* コンテンツより下に配置 */ transition: var(--transition); } /* --- カード本体エリア --- */ .service-card__body { position: relative; z-index: 2; display: flex; align-items: center; padding: var(--spacing-lg) var(--spacing-md); min-height: 72px; } .service-card__icon-wrapper { position: absolute; top: 9px; left: 11px; } .service-card__icon { width: 42px; height: auto; } .service-card__title { font-size: var(--font-size-md); padding-left: var(--spacing-xxxl); margin: 0; } /* --- カードフッターエリア --- */ .service-card__footer { /* 変更: z-indexを追加 */ position: relative; z-index: 2; background-color: var(--primary-blue-dark); padding: calc(var(--spacing-unit) * 1.5) var(--spacing-lg); border-top: 1px solid var(--primary-blue); } .service-card__link { display: flex; align-items: center; position: relative; /* 矢印(疑似要素)の基準位置 */ font-family: var(--font-family-en); font-size: var(--font-size-sm); color: var(--text-color-light); letter-spacing: 0.1em; text-transform: uppercase; } /* 変更: 矢印のデザインを新しいものに変更 */ /* 矢印の「>」部分 */ .service-card__link::before { content: ''; position: absolute; top: 50%; right: 0; width: 11px; height: 8px; border-top: 1px solid var(--text-color-light); transform: translateY(-50%) rotate(45deg); } /* 矢印の「長い横線」部分 */ .service-card__link::after { content: ''; position: absolute; top: 50%; right: 0px; /* 「>」の手前に配置 */ width: 25px; height: 1px; background-color: var(--text-color-light); margin-left: 0; /* 元の指定をリセット */ font-weight: normal; /* 元の指定をリセット */ } @media (max-width: 768px) { .service-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .service-card::before { /* スマホでは円を少し小さくする調整例 */ width: 60px; height: 60px; top: 16px; left: 25px; } .service-card__body { /* display: block; は元の指定を活かすなら削除も可 */ padding: var(--spacing-md); min-height: 80px; } .service-card__icon { width: 31px; } .service-card__title { font-size: 13px; position: absolute; top: 51px; padding-left: 5px; } .service-card__footer { padding: var(--spacing-sm) var(--spacing-lg); } .service-card__link { font-size: var(--font-size-xs); } .service-card__icon-wrapper { top: 4px; left: 11px; } } /* ---------------------------------------------------------------- Scroll Slider / 無限横スクロールスライダー ----------------------------------------------------------------- */ /* スライダーの見える範囲を定義するコンテナ */ .scroll-slider-container { overflow: hidden; /* このボックスからはみ出た要素を隠す */ width: 100%; } /* 実際にアニメーションで動くラッパー */ .scroll-slider { display: flex; animation: scrollAnimation 40s linear infinite; } /* マウスが乗ったらアニメーションを一時停止する（ユーザビリティ向上） */ .scroll-slider-container:hover .scroll-slider { animation-play-state: paused; } .scroll-slider-section{ max-width: 1440px; margin: 0 auto; } /* 各画像アイテム */ .scroll-item { flex-shrink: 0; width: 357px; } .scroll-item img { width: 100%; height: auto; display: block; /* 画像下の余分な隙間をなくす */ } .scroll-slider__bura{ position: absolute; top:0; } .top-facilities__text{ position: absolute; bottom: -60px; right: 100px; } /* アニメーションの動きを定義 */ @keyframes scrollAnimation { 0% { transform: translateX(0); /* 開始時（初期位置） */ } 100% { /* 1セット分（画像8枚 + 余白）の合計幅だけ左に移動させる */ transform: translateX(calc(-270px * 8)); } } @media (max-width: 768px) { .top-facilities__text{ position: absolute; bottom: -48px; right: 0; } } /* ---------------------------------------------------------------- banner 横長バナー ----------------------------------------------------------------- */ .recruit-banner{ width: 90%; max-width: 900px; } .recruit-banner{ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; display: block; margin: 0 auto; } .recruit-banner:hover{ /* Y軸（縦方向）に-8px移動（上に動く） */ transform: translateY(-8px); /* 影を大きく、濃くして浮いた感じを強調 */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } /* ========================================================================== Footer ========================================================================== */ /* アンカーリンクのデフォルトスタイルリセット */ .site-footer a { color: inherit; text-decoration: none; transition: opacity 0.3s; } /* Understrapの .container を想定 */ .container { max-width: 1140px; margin: 0 auto; padding: 0 15px; } .footer-inner{ max-width: 95%; margin-left: auto; padding: var(--spacing-section); } .footer-logo{ position: absolute; top: -20px; left: -16px; width: clamp(70px, 10%, 120px); } @media (max-width: 768px) { .footer-inner{ padding: var(--spacing-md); } .site-footer{ padding-bottom: 40px; } } /* ========================================================================== Footer Layout ========================================================================== */ .footer-grid { display: grid; grid-template-columns: 1fr 1fr; /* 左:右 の比率を調整 */ gap: 60px; max-width: 1200px; margin: 0 auto; } .footer-section-title { font-size: 16px; margin-bottom: 15px; } /* ========================================================================== Footer Left Column ========================================================================== */ .footer-grid__left > div:not(:last-child) { margin-bottom: 30px; /* 各要素間の下に余白 */ } .footer-branding { display: flex; align-items: center; } .footer-info dl { display: grid; grid-template-columns: 40px 1fr; gap: 8px 10px; margin: 0; } .footer-info dd { margin: 0; } .footer-branding__text{ max-width: 1200px; margin: 0 auto; } .icon-calendar{ display: flex; align-items: center; } /* ========================================================================== Footer メニュー ========================================================================== */ .footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); /* 3 → 2 に変更 */ gap: 30px 20px; /* 縦横の隙間を調整 */ align-items: start; /* 各列の上端を揃える */ } .footer-nav ul { margin: 0; padding: 0; list-style: none; } .nav-button { display: block; width: clamp(170px,80%,270px); border: 1px solid var(--color-footer-border); padding: 12px 20px 12px 15px; text-align: left; position: relative; background-color: var(--primary-blue); } /* ナビゲーションボタンの > */ .nav-button::after { content: '>'; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--color-footer-text-muted); } .nav-button:hover{ opacity: 0.6; } /* ボタン同士の余白 */ .footer-nav__column > ul:first-child li:not(:last-child) { margin-bottom: 15px; } /* サブリストの上のメインボタンの余白 */ .footer-nav__sublist li a { display: block; padding: 6px 0 6px 20px; position: relative; } .footer-nav__sublist li a :hover{ color: var(--color-accent-dark) ; } /* サブリストの └ */ .footer-nav__sublist li a::before { content: '└'; position: absolute; left: 0; top: 6px; color: var(--color-footer-text-muted); } /* ========================================================================== Footer Google マップ ========================================================================== */ .g-map{ width: 100%; height: 500px; } .g-map-wrap{ max-width: 1200px; margin: 0 auto; } /* ========================================================================== copy-light コピーライト ========================================================================== */ .copy-light{ padding-left: 5%; } /* ========================================================================== Responsive (for Tablet & Smartphone) ========================================================================== */ @media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr; /* 1カラムレイアウトに */ gap: 50px; } .footer-nav { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* コンテンツ量に応じて自動調整 */ gap: 40px 20px; } } @media (max-width: 768px) { .site-footer { padding: 0; } } /** * ================================================================= * Component: .footer-cta-group (フッターCTA) * =================================================================*/ /* .footer-cta-group { display: flex; } */ .footer-cta { width: 100%; /* 2個にする時は50%に変更 */ display: flex; align-items: center; justify-content: center; padding: 24px; text-decoration: none; transition: background-color 0.2s; background-color: var(--primary-blue-dark); } /* 1つ目のリンクにだけ、右側に仕切り線を引く .footer-cta:first-child { border-right: 1px solid var(--accent-dark); } */ /* * アイコン (i タグ) * アイコンフォントのサイズと色を指定 */ .footer-cta i { font-size: 40px; margin-right: 16px; } /* ========================================================================== 下層ページ ========================================================================== */ /* ====================================== 下層ページのアイキャッチ ========================================== */ .sub-top-outer{ padding-top: 0; } .sub-top__bura-svg{ width: 101%; } .sub-top{ height: 700px; } .sub-top__bura{ position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .page-title{ position: absolute; left: 0; bottom: 120px; text-shadow: 4px 4px 11px rgb(255 255 255); } .sub-top__bg-circle{ position: absolute; left: 117px; width: 705px; z-index: -1; bottom: 61px; filter: blur(5px); } .sub-top__img{ position: absolute; bottom: 200px; max-width: unset; width: 100%; top: 50%; transform: translateY(-50%); } .sub-top-outer{ left: 50%; transform: translateX(-50%); } .info{ padding-top: var(--spacing-section-lg); } @media (max-width: 991px) { .sub-top__bura-svg{ height: 500px; } .sub-top{ height: 500px; } .page-title{ bottom: 5px; } } @media (max-width: 768px) { .sub-top__bura{ top: -10px; transform: unset; height: 569px; width: 205%; left: -49%; } .sub-top__img{ width: 200%; top: 63px; left: 50%; transform: translateX(-50%); right: -320px; max-height: 427px; } .info{ padding-top: 0; } .page-title{ left: -20px; bottom: 115px; } } /* ====================================== 当院のコンセプト ページ ========================================== */ .sub-full-mouth__inner{ max-width: 1140px; margin: 0 auto; position: relative; padding-left: var(--spacing-section-lg); padding-right:var(--spacing-section-lg); } .sub-full-mouth-dr{ max-width: 270px; } .sub-full-mouth__twxt{ max-width: 80%; } .sub-full-mouth-deco-text{ position: absolute; right: -65px; bottom: 75px; } .sub-full-mouth-dr{ position: absolute; bottom: -61px; right: 95px; } .sub-full-mouth-deco{ position: absolute; right:-10%; bottom: 315px; width: 260px; } .sub-full-mouth{ padding-bottom: 300px; } @media (max-width: 991px) { .sub-full-mouth-deco{ right: -4%; top: unset; bottom: -43px; width: 256px; } .sub-full-mouth{ margin: var(--spacing-xl); } .sub-full-mouth-deco-text { right: 14px; bottom: -288px; } .sub-full-mouth-dr{ bottom: -420px; right: 180px; } .sub-full-mouth__twxt{ max-width: 100%; } .sub-full-mouth{ padding-bottom: 500px; } } @media (max-width: 768px) { .greeting__name{ right: 5%; } .sub-greeting-dr{ padding-left: 0; } .greeting__name-jp{ line-height: 17px; } .greeting__name-en{ line-height: 31px; } .sub-full-mouth { margin: var(--spacing-md); } .sub-full-mouth__inner{ padding: var(--spacing-md); } .sub-full-mouth-deco-text{ right: 14px; bottom: -135px; } .sub-full-mouth-dr{ bottom: -420px; right: 70px; } } /* ====================================== 当院のコンセプト 挨拶 ========================================== */ .greeting__name{ position: absolute; bottom: 13%; right: 45px; text-align: end; } .sub-greeting-dr{ padding-left: 20px; } .greeting__name-en{ font-size: 2.5vw; font-size: clamp(25px,2.5vw,37px); } @media (max-width: 991px) { .greeting__name{ font-size: 40px; } } @media (max-width: 768px) { .greeting__name{ right: 5%; } .sub-greeting-dr{ padding-left: 0; } .greeting__name-jp{ line-height: 17px; } .greeting__name-en{ line-height: 31px; } } /* ========================================================================== コンポーネント (Components) ========================================================================== */ /** * 汎用セクション見出し */ .section-title { text-align: center; } /** * 経歴リスト (HISTORY) */ .history-list { max-width: 500px; /* リストが広がりすぎないように最大幅を指定 */ margin-left: auto; margin-right: auto; } .history-list__item { display: flex; /* 年と内容を横並びにする */ align-items: flex-start; /* 上揃え */ } .history-list__year { width: 140px; /* 年が入る部分の幅を固定 */ flex-shrink: 0; /* 幅が縮まないようにする */ font-size: var(--font-size-accent); } /** * 所属学会リスト (AFFILIATION) */ .affiliation-list { max-width: 500px; margin-left: auto; margin-right: auto; } .affiliation-list__item { position: relative; padding-left: 1.2em; /* ビュレット分のスペースを確保 */ } /* CSSでリストの先頭の「・」を生成 */ .affiliation-list__item::before { content: '・'; position: absolute; left: 0; top: 0; } .history-list__description{ margin-top: auto; margin-bottom: auto; } .sub-greeting__bottom{ width: 45%; margin: 0 0 0 auto; } .sub-greeting{ background-image: url(images/sub/greeting-dr04.png); background-repeat: no-repeat; background-size: clamp(545px, 53%, 800px); background-position: bottom 213px left -90px; } @media (max-width: 768px) { .sub-greeting{ background-image: url(images/sub/greeting-dr05.png); background-size: clamp(425px, 117%, 520px); background-position: bottom 10px right 3px; padding-bottom: 250px; } .history-list__year { width: 90px; font-size: var(--font-size-xxl); } } /* ====================================== 当院のコンセプト 当院の特徴 ========================================== */ .point-title{ position: relative; display: inline-block; /* テキストの幅にサイズを合わせる */ padding-bottom: 15px; /* 下線との余白 */ } .point-title::after { /* 下線本体 */ content: ''; position: absolute; left: 0; bottom: 0; /* 下線のデザイン */ width: 65%; /* テキストの幅に対して50%の長さ */ height: 1px; background-color: var(--accent-pink); } .feature-image-01{ background-image: url(images/sub/features-01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .feature-image-02{ background-image: url(images/sub/features-02.png); background-repeat: no-repeat; background-position: center; background-size: cover; } .feature-image-03{ background-image: url(images/sub/features-03.png); background-repeat: no-repeat; background-position: center; background-size: cover; } .feature-content{ padding: var(--spacing-xxxl) ; } @media (max-width: 768px) { .feature-content{ padding-left: unset; padding-right: unset; padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); } } /* ===================================== 医院案内 基本情報 ========================================== */ .info-item { display: flex; align-items: stretch; /* ラベルとデータの高さを揃える */ } .info-label { background-color: var(--color-brand-darkblue); color: var(--color-white); font-weight: bold; padding: 8px 15px; width: 120px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 8px; } .info-data { padding: 16px 20px; margin: 0; line-height: 1.6; display: flex; align-items: center; flex-grow: 1; } /* タブレット (例: 767px 以下) */ @media (max-width: 768px) { .info-label{ width: 98px; } } /* ---------------------------------- 駐車場のご案内 (.parking-info) * ---------------------------------- */ .parking-description { margin-bottom: 20px; line-height: 1.7; } /* ---------------------------------- * FAQコンポーネント スタイル * ---------------------------------- */ .faq-section { font-family: var(--font-family-faq-base); width: 100%; margin-left: auto; margin-right: auto; } .faq-header { text-align: left; } .faq-title { font-size: var(--font-size-faq-title); /* 24px */ font-weight: bold; color: var(--color-faq-title); margin: 0; letter-spacing: 1px; } .faq-subtitle { font-size: var(--font-size-faq-subtitle); /* 14px */ color: var(--color-faq-subtitle); margin: 0; margin-top: 5px; } .faq-list { margin: 0; padding: 0; } .faq-item { /* ルール: 要素間の余白はbottomで調整 */ margin-bottom: var(--spacing-faq-small); /* 10px */ background-color: var(--color-faq-q-bg); border-radius: var(--border-radius-faq); overflow: hidden; margin: 15px; padding: 16px 32px; } .faq-item:last-child { margin-bottom: 0; } .faq-question { margin: 0; /* dtのデフォルトマージンリセット */ } .faq-question-button { /* OOCSS: buttonスタイルリセット (skin) */ appearance: none; border: none; background: none; padding: 0; margin: 0; font-family: inherit; text-align: left; cursor: pointer; /* OOCSS: レイアウト */ display: flex; align-items: center; width: 100%; /* OOCSS: テーマ */ background-color: transparent; /* 親(.faq-item)の色を継承 */ color: var(--color-faq-q-text); padding: var(--spacing-faq-medium); /* 20px */ font-size: var(--font-size-faq-base); /* 16px */ line-height: 1.5; } .faq-icon-q, .faq-icon-a { font-weight: bold; font-size: 20px; margin-right: var(--spacing-faq-small); /* 10px */ line-height: 1; /* 高さを揃える */ } .faq-icon-q { color: var(--color-faq-q-text); } .faq-question-text { flex: 1; /* テキストが残りの幅をすべて埋める */ padding-right: var(--spacing-faq-small); } /* --- トグルアイコン (+/-) --- */ .faq-toggle-icon { width: 20px; height: 20px; margin-left: auto; /* 右端に配置 */ position: relative; flex-shrink: 0; /* 縮まないように */ } .faq-toggle-icon::before, .faq-toggle-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; /* アイコンのサイズ */ height: 2px; /* アイコンの太さ */ background-color: var(--color-faq-q-text); transform: translate(-50%, -50%); transition: transform 0.3s ease; } .faq-toggle-icon::after { /* 縦棒 (初期状態は +) */ transform: translate(-50%, -50%) rotate(90deg); } /* --- 回答 --- */ .faq-answer { margin: 0; background-color: var(--color-faq-a-bg); color: var(--color-faq-a-text-body); line-height: 1.7; font-size: var(--font-size-faq-base); /* ▼▼▼ 修正 (grid の代わりに max-height) ▼▼▼ */ max-height: 0; overflow: hidden; transition: grid-template-rows 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out, opacity 0.3s ease-out; /* ここを追加 */ /* ▲▲▲ 修正 ▲▲▲ */ opacity: 0; /* ここを追加 */ } /* JS無効時のフォールバック (HTMLの[hidden]属性が有効) */ .faq-answer[hidden] { display: none; } .faq-answer-content { display: flex; align-items: flex-start; padding: var(--spacing-faq-large); /* ← パディングはここでOK */ } /* --- 開いたときのスタイル --- */ .faq-question:has(.faq-question-button[aria-expanded="true"]) + .faq-answer { /* ▼▼▼ 修正 (grid の代わりに max-height) ▼▼▼ */ /* 回答が十分収まる高さを指定 (例: 100vh や 1000px など) */ max-height: 100vh; transition: grid-template-rows 0.3s ease-in, padding-top 0.3s ease-in, padding-bottom 0.3s ease-in, opacity 0.3s ease-in; /* ここを追加 */ opacity: 1; /* ここを追加 */ /* ▲▲▲ 修正 ▲▲▲ */ } /* * ========================================================================== * サービスリンク コンポーネント (.service-links) * ========================================================================== */ .service-links { font-family: var(--font-primary); width: 100%; } .service-links-list { display: grid; /* デスクトップ: 4カラムレイアウト */ grid-template-columns: repeat(4, 1fr); /* アイテム間の隙間 */ column-gap: 40px; row-gap: 0; list-style: none; margin: 0; padding: 0; } .service-links-item { /* グリッドアイテム自体に特別なスタイルは不要 */ } .service-links-link { display: flex; flex-direction: row; align-items: center; position: relative; padding-bottom: 15px; text-decoration: none; color: var(--color-service-text); transition: opacity 0.3s; margin-left: 8px; margin-right: 8px; gap: 8px; padding-left: 8px; } .service-links-link:hover { opacity: 0.7; } /* * 矢印の「線」部分 (疑似要素 ::after) */ .service-links-link::after { content: ''; position: absolute; bottom: 12px; /* padding-bottom の中央付近 */ left: 0; width: 100%; height: 1px; background-color: var(--primary-blue-light); } /* * 矢印の「矢じり」部分 (疑似要素 ::before) */ .service-links-link::before { content: ''; position: absolute; bottom: 8px; right: 10px; width: 0px; height: 20px; border-top: 1px solid var(--primary-blue-light); border-right: 1px solid var(--primary-blue-light); transform: rotate(120deg); } .service-links-icon-wrapper { display: flex; align-items: center; justify-content: center; /* アイコンが無くても高さを確保し、下のテキスト行を揃える */ height: 50px; /* 修正 (30px -> 50px) */ } .service-links-icon { height: 40px; /* 修正 (48px -> 32px) ※実際のアイコンサイズに合わせて要調整 */ width: auto; } /* * -------------------------------------------------------------------------- * 修飾子: .is-flow (治療の流れについて) * -------------------------------------------------------------------------- */ /* * ========================================================================== * レスポンシブ対応 (Understrap のブレークポイントを想定) * ========================================================================== */ /* タブレット (例: 991px 以下) */ @media (max-width: 991px) { .service-links-list { /* 2カラムレイアウトに変更 */ grid-template-columns: repeat(2, 1fr); } .service-links-item.is-flow { /* タブレットでも 2カラム幅 (つまり 100% 幅) を維持 */ grid-column: span 2; } } /* スマートフォン (例: 575px 以下) */ @media (max-width: 575px) { .service-links-list { /* 1カラムレイアウトに変更 */ grid-template-columns: 1fr; row-gap: 20px; /* 隙間を少し詰める */ } .service-links-item.is-flow { /* 1カラム幅に */ grid-column: span 1; } .service-links-icon-wrapper { /* モバイルでは高さを固定せず、アイコンのサイズに任せる */ height: auto; margin-bottom: 8px; } .service-links-item.is-flow .service-links-icon-wrapper { /* .is-flow の場合は、モバイルで不要な空間を削除 */ display: none; } .service-links-item.is-flow .service-links-link { /* モバイルでは単純な左揃えテキストにする */ padding-top: 10px; padding-bottom: 20px; } } /* * ========================================================================== * 診療案内 コンポーネント (.service-detail) * ========================================================================== */ .service-detail{ width: 95%;; max-width: 1140px; margin: 0 auto; } .service-detail-container { display: flex; /* 2カラム間の隙間 */ gap: 40px; } .service-detail-content { flex: 2; min-width: 0; } .service-detail-image-wrapper { flex: 1; min-width: 0; } /* ---------------------------------- * ヘッダー (タイトル + アイコン) * ---------------------------------- */ .service-detail-header { display: flex; justify-content: space-between; align-items: flex-start; position: relative; padding-bottom: 15px; margin-bottom: 25px; } /* 見出しの下線 (疑似要素) */ .service-detail-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--primary-blue-light); } .service-detail-title-group { display: flex; flex-direction: column; } .service-detail-icon { height: 48px; /* サイズは適宜調整 */ margin-top: auto; } .sub-service-detail-icon { height: 80px; margin-top: auto; } /* ---------------------------------- * サブ見出し・本文 * ---------------------------------- */ /* .service-detail-subheading { margin-top: 0; margin-bottom: 25px; } */ .service-detail-body { font-family: var(--font-primary); font-size: 16px; line-height: 1.8; color: var(--color-text-secondary); } .service-detail-body p { margin-top: 0; margin-bottom: 20px; /* 段落間の余白 */ } .service-detail-body p:last-child { margin-bottom: 0; } .service-detail-title-en{ margin-bottom: -45px; } .sub-service-detail-title-en{ font-size: 130px; font-weight:500 ; margin-bottom: -75px; } @media (max-width: 992px) { .sub-service-detail-title-en{ font-size: clamp(42px, 10vw, 80px); margin-bottom: -30px; } } /* * ========================================================================== * レスポンシブ対応 (Understrap のブレークポイントを想定) * ========================================================================== */ /* タブレット (例: 767px 以下) */ @media (max-width: 768px) { .service-detail-container { /* カラムレイアウトを解除し、縦積みに変更 */ flex-direction: column; } .service-detail-image-wrapper { /* 画像を上（または下）に配置。ここではテキストの下に配置 */ /* 順番を変えたい場合は flex-direction: column-reverse; を使用 */ margin-top: 20px; } .service-detail-title-en { font-size: 48px; margin-bottom: -10px; } .service-detail-title-jp { font-size: 24px; } .service-detail-icon { height: 40px; } } /* * ========================================================================== * ホワイトニングページ * ========================================================================== */ .worries-inner{ position: relative; } .sub-whitening-top-img{ position: absolute; top: -170px; right: 0; width: 40%; } @media (max-width: 768px) { .sub-whitening-top-img{ position: unset; width: unset; margin-top: -80px; } } /* * =================================================================== * ホワイトニングページ お悩みチェックリスト * =================================================================== */ /** * コンポーネント全体 (セクション) */ .worry-checklist { font-family: var(--font-family-base); color: var(--color-text-primary); background-color: #ffffff; /* 背景色は白と仮定 */ padding-top: 50px; /* セクション内の上下余白 */ padding-bottom: 50px; /* ルール: セクション間など上下の余白は bottom で調整する */ margin-bottom: 60px; /* 次のセクションとの余白 */ } /** * タイトル (h2) */ .worry-checklist-title { font-size: 22px; /* 見た目からサイズを推定 */ font-weight: 600; /* やや太字 */ text-align: center; margin-top: 0; margin-bottom: 30px; /* タイトルとリストの間の余白 */ } /** * リスト (ul) * リストブロック全体を中央に配置 */ .worry-checklist-list { list-style: none; /* デフォルトの黒丸を削除 */ padding-left: 0; /* デフォルトのpaddingを削除 */ margin-top: 0; margin-bottom: 0; /* リストの最大幅を決めて中央配置（スマホでは全幅） */ max-width: 580px; margin-left: auto; margin-right: auto; } /** * リスト項目 (li) */ .worry-checklist-item { position: relative; /* ::before の配置基準 */ font-size: 16px; line-height: 1.7; /* 行間を少し広めにとる */ /* チェックボックス（::before）のための左余白 */ padding-left: 26px; } /* 最後の項目以外に下の余白を設定 */ .worry-checklist-item:not(:last-child) { margin-bottom: 16px; } /** * カスタムチェックボックス (::before) */ .worry-checklist-item::before { content: ""; display: block; position: absolute; left: 0; /* 行の高さ(1.7)とボックスの高さ(16px)から中央になるよう調整 */ /* ( (16px * 1.7) - 16px ) / 2 = 5.6px */ top: 5px; width: 14px; /* ボックスのサイズ */ height: 14px; background-color: var(--primary-blue-light); } /* * =================================================================== * ホワイトニングページ サロンとの違い * =================================================================== */ /* セクション全体の基本設定 */ .features-section { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: 1.8; } /* セクションタイトル (h2) */ .features-section h2 { font-family: var(--font-family-title); font-size: var(--font-size-h2); font-weight: 600; /* 600=Semibold */ color: var(--color-white); } /* OOCSSコンポーネント: .feature-item */ .feature-item { position: relative; padding-top: 20px; /* 番号が重なるためのスペース確保 */ } .feature-item-number { position: absolute; top: -15px; line-height: 1; left: 0; z-index: 1; } .feature-item-title { padding-left: 75px; } .feature-item-divider { border: 0; height: 1px; background-color: var(--accent); opacity: 1; margin-top: 0; margin-bottom: 10px; position: relative; z-index: 2; /* 番号より手前に配置 */ } .feature-item-description { position: relative; z-index: 2; /* 番号より手前に配置 */ } /* * ---------------------------------------- * 3. コンポーネント: ページ内リンクボタン * ---------------------------------------- */ /* OOCSSのコンポーネント本体 */ .page-link-btn { display: flex; /* Flexboxで内部をレイアウト */ flex-direction: column; /* 縦積み */ align-items: center; /* 水平方向中央揃え */ justify-content: center; /* 垂直方向中央揃え */ width: 100%; /* 親要素(col)いっぱいに広げる */ padding: 30px 20px; box-sizing: border-box; /* paddingを含めて幅を計算 */ border-radius: 8px; text-align: center; transition: background-color 0.3s ease; } /* ホバー/フォーカス時のスタイル */ .page-link-btn:hover, .page-link-btn:focus { background-color: var(--color-primary-dark-hover); color: var(--color-white); /* 色を維持 */ text-decoration: none; } /* * コンポーネントの構成要素 (OOCSS) */ .page-link-btn-icon{ width: 32px; /* アイコンサイズ */ } /* 下部のシェブロン（矢印） */ .page-link-btn-chevron{ font-size: 14px; } /* * 3.1. デュアルホワイトニング用 特殊スタイル */ .icon-dual { display: flex; align-items: center; justify-content: center; } /* + (プラス) アイコンの調整 */ .icon-dual-plus { width: 18px !important; /* 他のアイコンより小さく */ margin: 0 10px; position: relative; top: -3px; /* 垂直位置を微調整 */ } .page-link-btn-chevron { display: inline-block; border-bottom: 1px solid var(--white); border-right: 1px solid var(--white); width: 10px; height: 10px; transform: rotate(45deg); margin-top: 5px; } .icon-flex{ display: flex; align-items: center; } .icon-flex-item{ width: 30px; height: 30px; } .icon-flex-item-plus{ width: 30px; padding-left: 10px; padding-right: 10px; } .section-border-b{ border-bottom: 1px solid var(--accent-bright); } /* * ---------------------------------------- * 4. コンポーネント: 比較表 * ---------------------------------------- */ /* セクション見出し (h2) */ /* レスポンシブラッパー */ .table-responsive-wrapper { overflow-x: auto; /* テーブルがはみ出たら横スクロール */ -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロール */ } /* テーブル本体 */ .comparison-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 16px; } /* セルの共通スタイル */ .comparison-table th, .comparison-table td { padding: 24px 16px; text-align: center; vertical-align: top; line-height: 1.6; } .comparison-table thead th:nth-child(1) { width: 15%; /* 1列目: 項目 */ } .comparison-table thead th:nth-child(2) { width: 23.33%; /* 2列目: ブリッジ */ } .comparison-table thead th:nth-child(3) { width: 23.33%; /* 3列目: 入れ歯 */ } .comparison-table thead th:nth-child(4) { width: 23.33%; /* 4列目: インプラント */ } /* ヘッダーのアイコン + テキスト */ .table-header-item { display: flex; align-items: center; gap: 8px; /* アイコンとテキストの間隔 */ text-align: left; justify-content: center; } .table-header-icon { line-height: 1; color: var(--color-primary-dark); /* アイコンの色 */ } @media (max-width: 768px) { .table-header-item { flex-direction: column; text-align: center; } .comparison-table th, .comparison-table td { padding: 16px 16px; } } /* * ---------------------------------------- * 5. コンポーネント: 評価シンボル (OOCSS) * ---------------------------------------- */ .eval-icon { display: inline-block; width: 24px; height: 24px; border-radius: 50%; /* 常に円形 */ box-sizing: border-box; /* borderを含めてサイズ計算 */ position: relative; vertical-align: middle; /* テキストとの中央揃え */ } /* 修飾子: ○ (is-good) */ .eval-icon.is-good { border: 3px solid var(--color-eval); } /* 修飾子: △ (is-normal) */ .eval-icon.is-normal { width: 0; height: 0; border-style: solid; /* * borderで三角形を作る * 下向きの三角形を作り、CSSで回転させる */ border-width: 0 14px 22px 14px; border-color: transparent transparent var(--color-eval) transparent; /* スタイルリセット */ border-radius: 0; background-color: transparent; /* 位置調整 */ position: relative; top: 4px; } /* 修飾子: ◎ (is-excellent) */ .eval-icon.is-excellent { border: 3px solid var(--color-eval); /* 外円 */ } /* ◎ の内円 (擬似要素) */ .eval-icon.is-excellent::after { content: ''; position: absolute; top: 50%; left: 50%; /* (24px - 3px*2) / 2 = 9px */ width: 12px; height: 12px; transform: translate(-50%, -50%); background-color: var(--color-eval); border-radius: 50%; } /* * ---------------------------------------- * 6. コンポーネント: 星評価 (OOCSS) * ---------------------------------------- */ .star-rating { font-size: 20px; letter-spacing: 2px; white-space: nowrap; color: var(--color-star); /* デフォルト色（星） */ } /* 塗りつぶしの星 */ .star-filled { color: var(--color-star); } /* 空の星 */ .star-empty { color: var(--color-border-light); } /* * ---------------------------------------- *投稿ページ * ---------------------------------------- */ #single-wrapper{ padding-top: 150px !important; padding-bottom: 100px !important; } .byline{ display: none; } .entry-footer{ display: none; } .updated{ display: none; } .post-navigation{ padding-bottom: 20px; } @media (max-width: 768px) { .news-list__date{ display: block; } .news-list__title{ padding: 0; } } /* * =========================================== * セクション基本スタイル * =========================================== */ .section-title { font-family: var(--font-family-title); font-size: var(--font-size-xl); font-weight: 700; color: var(--color-primary); /* 例: メインカラー */ } .subsection-title { font-size: var(--font-size-large); font-weight: 700; border-bottom: 2px solid var(--color-primary); padding-bottom: 8px; } /* （税込価格）などの補足テキスト */ .subsection-title .note { font-size: var(--font-size-small); font-weight: 400; color: var(--color-text-light); margin-left: 8px; } /* * =========================================== * コンポーネント: c-list (リスト) * =========================================== */ .c-list { padding-left: 1.2em; /* ol, ul のデフォルトマージンをemで調整 */ } .c-list li { margin-bottom: 8px; /* li間の余白 */ } /* .c-list--decimal はデフォルトで