/* aomori.css — 青森店サテライトTOP（jin-child固定ページ用・外部読込） */
/* dears-sections.css */ /* ========================================================= ディアーズ フロントページ 追加セクション用スタイル ========================================================= */ :root{ --dears-btn: #7A1E3D; --dears-btn-light: #ad4866; --dears-btn-dark: #5a1830; --dears-btn-top: #ad4866; --dears-btn-border: #621830; --dears-btn-border-deep: #4d1226; --dears-btn-shadow: rgba(122, 30, 61, 0.22); --dears-btn-shadow-hover: rgba(122, 30, 61, 0.28); --dears-btn-gradient: #7A1E3D; --dears-btn-gradient-hover: #853049; /* タイポグラフィ（元LP / JIN hl-custom 準拠） */ --dears-font-body: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; --dears-font-heading: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif; --dears-color-text: #333333; --dears-color-heading: #333333; --dears-body-size: 16px; --dears-body-line: 1.6; --dears-body-margin: 0 0 1em; --dears-h2-size: 22px; --dears-h2-line: 1.5; --dears-h2-weight: 400; --dears-h3-size: 1.3em; --dears-h3-line: 1.5; --dears-img-radius: 24px; --dears-content-width: 760px; } /* ---- タイポグラフィ統一（.dears-front 全体） ---- */ .dears-front{ color: var(--dears-color-text); font-family: var(--dears-font-body); font-size: var(--dears-body-size); line-height: var(--dears-body-line); } .dears-front p:not(.dmenu-lead), .dears-front li, .dears-front td, .dears-front th, .dears-front .jin-ac-box02-inner, .dears-front .jin-ac-box02-inner p{ font-family: var(--dears-font-body); font-size: var(--dears-body-size); line-height: var(--dears-body-line); color: var(--dears-color-text); text-align: left; } .dears-front h2{ font-family: var(--dears-font-heading); font-size: var(--dears-h2-size); font-weight: var(--dears-h2-weight); line-height: var(--dears-h2-line); color: var(--dears-color-heading); text-align: center; margin: 0 0 2em; } .dears-front h3, .dears-front h4{ font-family: var(--dears-font-heading); font-size: var(--dears-h3-size); line-height: var(--dears-h3-line); color: var(--dears-color-heading); text-align: left; } .dears-front h4{ color: #000000; } /* ---- ページ見出し(H1)を非表示 ---- FV画像・カード内見出しと重複するため非表示にする。 ※FVはWP側（#main-image）のため、.dears-front があるページでも消す。 */ .home .cps-post-header, .home .cps-post-title.entry-title, .cps-post-box:has(.dears-front) .cps-post-header, .cps-post-box:has(.dears-front) .cps-post-title.entry-title, .cps-post-box:has(.dears-front) .cps-post-header .writer{ display: none !important; } /* WP側FV（#main-image）直下のテーマ余白を除去 */ .home #main-image, .home .main-image, body.home #main-image.main-image{ margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; } .home #main-image img, .home .main-image img{ display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; vertical-align: top !important; } .home #main-image + .clearfix, .home .main-image + .clearfix{ display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } .home #contents, body.home div#contents, .cps-post-box:has(.dears-front) .cps-post-header + .cps-post-main-box, .cps-post-box:has(.dears-front) .cps-post-main-box, .cps-post-main.hl-custom:has(.dears-front), .cps-post-main:has(.dears-front), #onecolumn:has(.dears-front) #contents, #contents:has(.dears-front), .cps-post-box.hentry:has(.dears-front), .cps-post-box.hentry:has(.dears-front) .cps-post{ margin-top: 0 !important; padding-top: 0 !important; } @media (max-width: 767px){ body.home div#contents, .home #contents{ padding-top: 0 !important; margin-top: 0 !important; } } /* SVG（.dsat 内は末尾の jin-safe ブロックで再指定） */ /* グローバル svg 指定はテーマを壊すため削除 */ .dears-section-cta2{ margin-top: 40px; } .dmenu-lead-guide2{ text-align: center; } /* ---- フッター直前の余白を除去（.dears-closing 内の padding は維持） ---- */ .home .cps-post-main.hl-custom:has(.dears-front), .home #onecolumn:has(.dears-front), .home #contents:has(.dears-front), .home .cps-post-box:has(.dears-front){ padding-bottom: 0 !important; margin-bottom: 0 !important; } .home .cps-post-main.hl-custom .dears-front{ margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ---- クイックナビ上の余白を詰める（トップページのみ） ---- */ .home #contents{ margin-top: 0 !important; padding-top: 0 !important; } .home .cps-post-box{ padding-top: 0 !important; } .home .cps-post-main{ padding-top: 0 !important; } .home .quick-nav{ margin-top: 16px !important; } /* ---- キャッチコピー（quick-nav 直下） ---- */ .dears-catch{ margin: 0 auto; padding: 64px 20px; text-align: center; color: #4f474c; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif; font-weight: 500; font-size: clamp(20px, 2.6vw, 28px); line-height: 2; letter-spacing: .14em; } @media (max-width: 767px){ .dears-catch{ padding: 44px 20px; font-size: 19px; line-height: 1.95; letter-spacing: .1em; } } /* ---- 導入：お悩み訴求（WP側FV直下） ---- */ .dears-intro{ padding: 64px 20px 72px; background: #ffffff; } .dears-intro-card{ max-width: var(--dears-content-width); margin: 0 auto; padding: 0; color: var(--dears-color-text); font-family: var(--dears-font-body); } .dears-intro-title{ margin: 0 0 2em; text-align: center; font-family: var(--dears-font-heading); font-size: 1.6rem; font-weight: var(--dears-h2-weight); line-height: var(--dears-h2-line); letter-spacing: .04em; color: var(--dears-color-heading); } .dears-intro-lead{ margin: 0 0 48px; text-align: center; font-size: 16px; line-height: 2.1; letter-spacing: .06em; color: #5a5156; } .dears-intro-subhead{ margin: 0 0 28px; font-size: 18px; font-weight: 600; letter-spacing: .08em; color: #3f3438; } .dears-check{ list-style: none; margin: 0 0 48px; padding: 0; } .dears-check li{ position: relative; padding-left: 40px; margin-bottom: 0.5em; font-size: var(--dears-body-size); line-height: 1.45; letter-spacing: 0; color: var(--dears-color-text); } .dears-check li:last-child{ margin-bottom: 0; } .dears-check li::before{ content: ""; position: absolute; left: 2px; top: 0.05em; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a93a5d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13l5.5 5.5L20.5 5.5'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .dears-intro-text{ margin: var(--dears-body-margin); font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); text-align: left; } .dears-intro-text:last-child{ margin-bottom: 0; } @media (max-width: 767px){ .dears-intro{ padding: 44px 16px 52px; } .dears-intro-title{ font-size: 1.2rem; line-height: var(--dears-h2-line); margin-bottom: 28px; } .dears-intro-lead{ font-size: 15px; line-height: 2; margin-bottom: 36px; } .dears-intro-subhead{ font-size: 16.5px; margin-bottom: 22px; } .dears-check li{ font-size: 15px; padding-left: 34px; margin-bottom: 10px; line-height: 1.45; } .dears-check li::before{ width: 21px; height: 21px; } .dears-intro-text{ font-size: 14.5px; line-height: 2; } } /* ---- お悩み共感（店舗検索直下） ---- */ .dears-concern-section{ position: relative; padding: 72px 20px 80px; background-color: #ffffff; background-image: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.98)), url("https://dears-salon.com/wp-content/uploads/2026/06/1c7558976e32a6281e41ac8df8bcee94.png"); background-position: center top; background-size: cover; background-repeat: no-repeat; } .dears-concern-inner{ max-width: var(--dears-content-width); margin: 0 auto; } .dears-concern-heading{ margin: 0 0 2.5em; text-align: left; } .dears-concern-title{ display: inline-block; margin: 0; padding: 0 0 16px; border: 0; border-bottom: 1px solid #b8aaaa; text-align: left; font-family: var(--dears-font-heading); font-size: clamp(1.35rem, 2.5vw, 1.65rem); font-weight: var(--dears-h2-weight); line-height: 1.65; letter-spacing: .04em; color: var(--dears-color-heading); } .dears-concern-title::after{ display: none; content: none; } .dears-concern-list{ list-style: none; margin: 0 0 2.5em; padding: 0; text-align: left; } .dears-concern-list li{ position: relative; margin-bottom: 1em; padding-left: 40px; font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); } .dears-concern-list li:last-child{ margin-bottom: 0; } .dears-concern-list li::before{ content: ""; position: absolute; left: 2px; top: 0.05em; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a93a5d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13l5.5 5.5L20.5 5.5'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .dears-concern-body p{ margin: 0 0 1em; font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); text-align: left; } .dears-concern-body p:last-child{ margin-bottom: 0; } .dears-concern-body strong{ font-weight: 700; } @media (max-width: 767px){ .dears-concern-section{ padding: 56px 16px 64px; } .dears-concern-title{ font-size: 1.3rem; line-height: 1.7; padding-bottom: 14px; } .dears-concern-list{ margin-bottom: 2em; } .dears-concern-list li, .dears-concern-body p{ font-size: 15px; line-height: 1.75; } .dears-concern-list li{ padding-left: 34px; } .dears-concern-list li::before{ width: 21px; height: 21px; } } /* ---- ディアーズの髪質改善なら（お悩み共感の次） ---- */ .dears-solution-section{ position: relative; padding: 72px 20px 80px; background-color: #f6f2ef; overflow: hidden; } .dears-solution-section::before, .dears-solution-section::after{ content: ""; position: absolute; background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; mix-blend-mode: multiply; opacity: .85; } .dears-solution-section::before{ width: min(92vw, 860px); aspect-ratio: 1024 / 575; } .dears-solution-section::after{ width: min(72vw, 640px); aspect-ratio: 1024 / 575; } .dears-solution-section::before{ top: 0; left: 0; background-image: url("https://dears-salon.com/parts/ver8/test-a/img/shadow_part_01.png"); background-position: top left; } .dears-solution-section::after{ right: 0; bottom: 0; background-image: url("https://dears-salon.com/parts/ver8/test-a/img/shadow_part_02.png"); background-position: bottom right; } .dears-solution-inner{ position: relative; z-index: 1; max-width: var(--dears-content-width); margin: 0 auto; } .dears-solution-title{ margin: 0 0 2.2em; text-align: center; font-family: var(--dears-font-heading); font-size: clamp(1.35rem, 2.5vw, 1.65rem); font-weight: 500; line-height: 1.6; letter-spacing: .16em; color: #866255; } .dears-solution-title::after{ display: none; content: none; } .dears-solution-duo{ display: flex; align-items: center; justify-content: center; gap: 36px; margin-bottom: 2.2em; } .dears-solution-circle{ flex: 0 1 260px; margin: 0; text-align: center; } .dears-solution-circle-img{ position: relative; width: 200px; height: 200px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; background: #fff; flex-shrink: 0; } .dears-solution-circle-img img{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center center; display: block; } .dears-solution-circle figcaption{ display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; font-family: var(--dears-font-heading); color: #866255; } .dears-solution-circle-sub{ font-size: clamp(0.95rem, 1.8vw, 1.05rem); line-height: 1.5; letter-spacing: .08em; } .dears-solution-circle-main{ font-size: clamp(1.15rem, 2.2vw, 1.35rem); line-height: 1.5; letter-spacing: .1em; } .dears-solution-x{ flex: 0 0 auto; font-family: var(--dears-font-heading); font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 200; line-height: 1; color: #b5a295; margin-top: -48px; } .dears-solution-divider{ display: block; width: 100%; max-width: 100%; height: 0; margin: 0 auto 2.5em; border: 0; border-top: 1px solid #c8bbb2; } .dears-solution-lead{ margin-bottom: 2.5em; } .dears-solution-lead p{ margin: 0 0 1em; font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); text-align: center; } .dears-solution-lead p:last-child{ margin-bottom: 0; } .dears-solution-lead-points{ list-style: none; margin: 0 0 1em; padding: 0; max-width: none; width: 100%; text-align: left; } .dears-solution-lead-points:last-child{ margin-bottom: 0; } .dears-solution-lead-points li{ position: relative; display: block; margin-bottom: .45em; padding-left: 1.1em; font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); text-align: left; } .dears-solution-lead-points li:last-child{ margin-bottom: 0; } .dears-solution-lead-points li::before{ content: "・"; position: absolute; left: 0; top: 0; } .dears-solution-anxiety{ margin-bottom: 3em; padding: 40px 48px 44px; background: #ececec; text-align: center; } .dears-solution-anxiety-title{ margin: 0 0 2em; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif; font-size: clamp(16px, 1.9vw, 18px); font-weight: 700; line-height: 1.9; letter-spacing: .04em; color: #1a1a1a; text-align: center; } .dears-solution-anxiety-title strong{ font-weight: 700; } .dears-solution-anxiety-list{ list-style: none; margin: 0; padding: 0; text-align: left; /* display: inline-block; */ max-width: 100%; } .dears-solution-anxiety-list li{ position: relative; margin-bottom: .45em; padding-left: 1.1em; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif; font-size: clamp(14px, 1.6vw, 16px); font-weight: 400; line-height: 1.9; letter-spacing: .02em; color: #1a1a1a; } .dears-solution-anxiety-list li:last-child{ margin-bottom: 0; } .dears-solution-anxiety-list li::before{ content: "・"; position: absolute; left: 0; top: 0; } .dears-solution-support-heading{ display: flex; align-items: center; justify-content: center; gap: 24px; margin: 0 0 2em; max-width: 920px; margin-left: auto; margin-right: auto; } .dears-solution-support-heading h3{ margin: 0; flex: 0 0 auto; font-family: var(--dears-font-heading); font-size: clamp(1rem, 1.8vw, 1.15rem); font-weight: 500; line-height: 1.5; letter-spacing: .12em; color: #866255; white-space: nowrap; } .dears-solution-support-line{ flex: 1 1 0; max-width: 320px; height: 1px; background: #c8bbb2; } .dears-solution-support-duo{ display: flex; align-items: center; justify-content: center; gap: 64px; margin-bottom: 2.5em; max-width: 920px; margin-left: auto; margin-right: auto; width: 100%; } .dears-solution-support-item{ display: flex; align-items: center; gap: 20px; flex: 1 1 0; max-width: 420px; min-width: 280px; } .dears-solution-support-item-img{ position: relative; flex: 0 0 110px; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; background: #fff; } .dears-solution-support-item-img img{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center center; display: block; } .dears-solution-support-item-label{ display: flex; flex-direction: column; gap: 4px; margin: 0; font-family: var(--dears-font-heading); color: #866255; text-align: left; } .dears-solution-support-sub{ font-size: clamp(0.95rem, 1.8vw, 1.05rem); font-weight: 700; line-height: 1.5; letter-spacing: .08em; } .dears-solution-support-main{ font-size: clamp(1.15rem, 2.2vw, 1.35rem); font-weight: 700; line-height: 1.5; letter-spacing: .1em; } .dears-solution-support-body p{ margin: 0 0 1.5em; font-size: var(--dears-body-size); line-height: var(--dears-body-line); color: #866255; text-align: center; } .dears-solution-check{ list-style: none; margin: 0; padding: 0; } .dears-solution-check li{ position: relative; margin-bottom: 1.5em; padding-left: 40px; font-size: var(--dears-body-size); line-height: var(--dears-body-line); color: #866255; text-align: left; } .dears-solution-check li:last-child{ margin-bottom: 0; } .dears-solution-check li::before{ content: ""; position: absolute; left: 2px; top: 0.05em; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23866255' stroke-width='1.4'/%3E%3Cpath d='M7.5 12.2l3.2 3.3L16.8 8.8' fill='none' stroke='%23866255' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .dears-solution-check-title{ display: block; margin-bottom: .35em; font-family: var(--dears-font-heading); font-weight: 700; color: #866255; } @media (max-width: 767px){ .dears-solution-section{ padding: 56px 16px 64px; } .dears-solution-section::before{ width: min(96vw, 520px); } .dears-solution-section::after{ width: min(82vw, 440px); } .dears-solution-duo{ flex-direction: column; gap: 20px; } .dears-solution-x{ margin: -12px 0 0; transform: rotate(0deg); } .dears-solution-circle{ flex-basis: auto; width: 100%; max-width: 300px; } .dears-solution-circle-img{ width: 190px; height: 190px; } .dears-solution-anxiety{ padding: 32px 24px 36px; } .dears-solution-support-duo{ flex-direction: column; align-items: stretch; gap: 24px; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; } .dears-solution-support-item{ width: 100%; max-width: none; min-width: 0; margin: 0; justify-content: flex-start; } .dears-solution-support-line{ max-width: 72px; } .dears-solution-support-heading h3{ font-size: 1.05rem; } .dears-front .dears-concern-section .dears-concern-title, .dears-concern-section h2.dears-concern-title, .dears-concern-section .dears-concern-title{ font-size: 1.3rem !important; } .dears-front .dears-solution-section .dears-solution-title, .dears-solution-section h2.dears-solution-title, .dears-solution-section .dears-solution-title{ font-size: 1.3rem !important; } .dears-solution-section .dears-solution-circle-sub{ font-size: 0.95rem !important; } .dears-solution-section .dears-solution-circle-main{ font-size: 1.15rem !important; } .dears-solution-lead p, .dears-solution-lead-points li, .dears-solution-anxiety-list li, .dears-solution-support-body p, .dears-solution-check li{ font-size: 15px; line-height: 1.75; } } /* ---- ３つのこだわり ---- */ .dears-kodawari{ position: relative; padding: 72px 20px 80px; background-color: #faf7f4; background-image: linear-gradient(rgba(250,247,244,.82), rgba(250,247,244,.82)), url("https://dears-salon.com/wp-content/uploads/2026/06/1c7558976e32a6281e41ac8df8bcee94.png"); background-position: center; background-size: cover; background-repeat: no-repeat; } .dears-kodawari-title{ margin: 0 0 2.6em; text-align: center; font-family: var(--dears-font-heading); font-size: var(--dears-h2-size); font-weight: var(--dears-h2-weight); line-height: var(--dears-h2-line); letter-spacing: .04em; color: var(--dears-color-heading); } .dears-kodawari-title .num{ font-size: 1.35em; font-weight: 600; margin-right: .04em; } .dears-kodawari-grid{ max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .dears-kodawari-col{ text-align: left; } .dears-kodawari-col > .dears-kodawari-h3, .dears-kodawari-h3{ display: table !important; width: max-content; max-width: 100%; margin: 8px auto 28px !important; padding: 0 8px 2px; text-align: center !important; font-family: var(--dears-font-heading); font-size: 18px; font-weight: 600; line-height: var(--dears-h3-line); letter-spacing: 0; color: var(--dears-color-heading); border-bottom: none; background: linear-gradient(transparent 54%, rgba(243, 228, 210, 0.92) 54%); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .dears-kodawari-h3::before, .dears-kodawari-h3::after{ content: none; display: none; } .dears-kodawari-img{ margin: 0 0 22px; } .dears-kodawari-img img{ width: 100%; display: block; border-radius: var(--dears-img-radius); } .dears-kodawari-body{ text-align: left; } .dears-kodawari-body p{ margin: var(--dears-body-margin); font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); text-align: left; } .dears-kodawari-body p:last-child{ margin-bottom: 0; } .dears-kodawari-body .em{ color: #a93a5d; } .dears-kodawari-body ul{ margin: var(--dears-body-margin); padding-left: 1.4em; font-size: var(--dears-body-size); line-height: var(--dears-body-line); color: var(--dears-color-text); text-align: left; } .dears-kodawari-body li{ margin-bottom: 6px; } @media (max-width: 920px){ .dears-kodawari-grid{ grid-template-columns: 1fr; gap: 48px; max-width: 560px; } .dears-kodawari-title{ margin-bottom: 36px; } .dears-kodawari-col > .dears-kodawari-h3, .dears-kodawari-h3{ margin: 4px auto 18px !important; } } @media (max-width: 767px){ .dears-kodawari{ padding: 48px 16px 56px; } .dears-kodawari-h3{ font-size: 18px; } .dears-kodawari-body p, .dears-kodawari-body ul{ font-size: 14.5px; } } /* ---- ５つの約束事 ---- */ /* 全幅(full-bleed)：本文コラムを飛び出して画面端まで背景を広げる （.dears-values / .dflow-section / .dfaq-section はテーマの .section で全幅になるため、 クラス section を持たないこれらも同じく全幅に揃える） */ .dears-intro, .dears-concern-section, .dears-solution-section, .dears-kodawari, .promise-section, .voice-section, .menu-section, .dgift-section, .store-search-section, .dears-reservation-section, .dears-cases-section{ /* jin-child: フルブリード無効（横幅崩壊防止） */ margin-left: 0; margin-right: 0; } .promise-section{ padding: 84px 20px 92px; background: #ffffff; } .promise-inner{ max-width: 1060px; margin: 0 auto; } .promise-title{ margin: 0 0 60px; text-align: center; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif; font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; letter-spacing: .16em; color: #3f3438; } .promise-item{ display: flex; align-items: center; gap: 50px; margin-bottom: 68px; } .promise-item:last-child{ margin-bottom: 0; } .promise-item.reverse{ flex-direction: row-reverse; } .promise-img{ flex: 1 1 45%; min-width: 0; } .promise-img img{ width: 100%; display: block; border-radius: var(--dears-img-radius); } .promise-text{ flex: 1 1 55%; min-width: 0; } .promise-head{ display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; } .promise-head span{ font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif; font-size: clamp(30px, 3.2vw, 42px); font-weight: 500; line-height: 1; letter-spacing: .02em; color: #a93a5d; flex-shrink: 0; } .promise-head h3{ margin: 0; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif; font-size: 18px; font-weight: 600; letter-spacing: .06em; line-height: 1.5; color: #3f3438; } .promise-text > p{ margin: var(--dears-body-margin); font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); text-align: left; } .promise-text ul{ list-style: none; margin: 0; padding: 0; } .promise-text li{ position: relative; padding-left: 30px; margin-bottom: 1em; font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); text-align: left; } .promise-text li:last-child{ margin-bottom: 0; } .promise-text li::before{ content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a93a5d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13l5.5 5.5L20.5 5.5'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .promise-note{ margin: 30px 0 0; font-size: 14px; line-height: 2; letter-spacing: .03em; color: #6b636a; } .promise-head-pc{ display: flex; } .promise-head-sp{ display: none; } @media (max-width: 900px){ .promise-section{ padding: 56px 16px 64px; } .promise-title{ margin-bottom: 44px; } .promise-item, .promise-item.reverse{ flex-direction: column; gap: 20px; margin-bottom: 48px; } .promise-img, .promise-text{ flex: 1 1 100%; width: 100%; } .promise-head-pc{ display: none; } .promise-head-sp{ display: flex; margin-bottom: 6px; } } /* ---- ディアーズが大切にしていること ---- */ .dears-values{ position: relative; overflow: hidden; background-color: #faf7f4; background-image: linear-gradient(rgba(250,247,244,.82), rgba(250,247,244,.82)), url("https://dears-salon.com/wp-content/uploads/2026/06/1c7558976e32a6281e41ac8df8bcee94.png"); background-position: center; background-size: cover; background-repeat: no-repeat; } /* 背景写真レイヤー：セクション背景と統一するため非表示 */ .dears-values-bg{ display: none; } .dears-values-bg img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* 文字を読みやすくする白の半透明オーバーレイ */ .dears-values-bg::after{ content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.82); } .dears-values .section-content{ position: relative; z-index: 2; } .dears-values-lead{ max-width: 840px; margin: 0 auto 46px; } .dears-values-lead p{ margin: var(--dears-body-margin); font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); text-align: left; } .dears-values-lead p:last-child{ margin-bottom: 0; } .dears-values-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .dears-value-card{ background: rgba(255,255,255,.66); border: 1px solid #ece3da; border-radius: 16px; padding: 38px 30px 34px; box-shadow: 0 14px 34px rgba(91,74,80,.07); } .dears-value-icon{ width: 140px; height: 140px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 0; box-shadow: none; color: #b89a63; } .dears-value-icon img{ width: 100%; height: 100%; object-fit: contain; background: none; border-radius: 0; display: block; } .dears-value-icon svg{ width: 58px; height: 58px; } .dears-value-h3{ margin: 0 0 22px; text-align: center !important; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif; font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; letter-spacing: .02em; line-height: 1.4; color: #3f3438; white-space: nowrap; } .dears-value-body p{ margin: 0; padding: 16px 0; font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); text-align: left; } .dears-value-body p:first-child{ padding-top: 0; } .dears-value-body p:last-child{ padding-bottom: 0; } @media (max-width: 880px){ .dears-values-grid{ grid-template-columns: 1fr; gap: 20px; max-width: 560px; margin: 0 auto; } .dears-value-h3{ font-size: 17px; letter-spacing: .03em; } } /* ---- お客様の声 ---- */ .voice-section{ position: relative; padding: 80px 20px 88px; background-color: #faf7f4; overflow: hidden; } .voice-section::before{ content: ""; position: absolute; inset: 0; background-image: url("https://dears-salon.com/parts/ver8/test-a/img/voice-bg.png"); background-position: center bottom; background-size: cover; background-repeat: no-repeat; opacity: .45; pointer-events: none; z-index: 0; } .voice-inner{ position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; } @media (min-width: 768px){ .voice-inner{ max-width: 1200px; } } .voice-title{ margin: 0 0 2em; text-align: center; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif; font-size: clamp(26px, 3.2vw, 38px); font-weight: 500; line-height: 1.6; letter-spacing: .1em; color: #3f3438; } .voice-title::after{ display: none; } .voice-sub{ margin: 0 0 3em; text-align: left; font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); } .voice-scroll{ position: relative; margin-top: 0; padding: 0 48px; } .voice-scroll-viewport{ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; container-type: inline-size; } .voice-scroll-viewport::-webkit-scrollbar{ display: none; } .voice-scroll-track{ display: flex; gap: 26px; padding-bottom: 2px; } .voice-scroll-track .voice-card{ flex: 0 0 calc((100% - 52px) / 3); flex: 0 0 calc((100cqi - 52px) / 3); min-width: 0; margin: 0; scroll-snap-align: start; } .voice-scroll-arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 1px solid #ece3da; border-radius: 50%; background: rgba(255,255,255,.92); color: #7A1E3D; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; box-shadow: 0 8px 20px rgba(91,74,80,.12); transition: opacity .2s ease, transform .2s ease; } .voice-scroll-arrow:hover:not(:disabled){ transform: translateY(-50%) scale(1.04); } .voice-scroll-arrow:disabled{ opacity: .3; cursor: default; pointer-events: none; } .voice-scroll-prev{ left: 0; } .voice-scroll-next{ right: 0; } /* 口コミ画像（透過PNG） */ .voice-card{ background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; overflow: visible; width: 100%; } .voice-card img{ width: 100% !important; max-width: 100% !important; height: auto !important; display: block; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; vertical-align: top; object-fit: contain; object-position: top center; } /* iOS Safari: 横スクロール内カードは個別fadeで画像が出ないことがあるため可視化を保証 */ .voice-card.dears-reveal{ opacity: 1 !important; transform: none !important; } .voice-card img{ opacity: 1 !important; visibility: visible !important; } @media (max-width: 820px){ .voice-section{ padding: 56px 16px 64px; } } @media (max-width: 767px){ .voice-inner{ max-width: none; } .voice-scroll{ margin-left: -16px; margin-right: -16px; padding: 0 40px; } .voice-scroll-arrow{ width: 36px; height: 36px; font-size: 22px; } .voice-scroll-prev{ left: 4px; } .voice-scroll-next{ right: 4px; } .voice-scroll-viewport{ padding-left: 0; padding-right: 0; scroll-padding-left: 16px; scroll-padding-right: 16px; } .voice-scroll-track{ gap: 14px; padding-left: 16px; padding-right: 16px; } .voice-scroll-track .voice-card{ flex: 0 0 82%; flex: 0 0 82cqi; } } /* ---- 髪質改善メニュー・料金 ---- */ .menu-section{ position: relative; padding: 72px 20px 80px; background: #fff; } .menu-section::before{ display: none; content: none; } .menu-section > *{ position: relative; z-index: 1; } .dmenu-title{ margin: 0 0 1.8em; text-align: center; font-family: var(--dears-font-heading); font-size: clamp(1.5rem, 2.8vw, 1.85rem); font-weight: 500; line-height: 1.65; letter-spacing: .14em; color: #866255; } .dmenu-title-em{ font-size: 1.55em; letter-spacing: .06em; } .dmenu-title::after{ display: none; content: none; } .dmenu-lead{ max-width: 760px; margin: 0 auto 1em; text-align: center; font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); } .dmenu-lead-guide{ max-width: 760px; margin: 0 auto 1em; padding: 0; list-style: none; text-align: center; font-size: var(--dears-body-size); line-height: var(--dears-body-line); letter-spacing: 0; color: var(--dears-color-text); } .dmenu-lead-guide li{ display: block; padding: 0; margin: 0 0 4px; } .dmenu-lead-guide li::before{ content: none; } .dmenu-lead-guide li:last-child{ margin-bottom: 0; } .dmenu-lead-last{ margin-bottom: 0; } .dmenu-popular-heading{ display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 920px; margin: 2.4em auto 0; } .dmenu-popular-line{ flex: 1 1 0; max-width: 200px; height: 1px; background: #c8bbb2; } .dmenu-popular-label{ flex: 0 0 auto; font-family: var(--dears-font-heading); font-size: clamp(1rem, 1.8vw, 1.1rem); font-weight: 500; letter-spacing: .12em; color: #866255; white-space: nowrap; } .dmenu-list{ max-width: 920px; margin: 32px auto 0; } /* 共通：見出し */ .dmenu-h3{ margin: 0 0 14px; padding: 0; border: 0; font-family: var(--dears-font-heading); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; letter-spacing: .08em; color: #866255; } .dmenu-feature .dmenu-h3{ margin: 0 0 14px; padding-right: 0; font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 500; letter-spacing: .14em; color: #866255; } .dmenu-body{ min-width: 0; padding-right: 0; } .dmenu-feature:not(:has(.dmenu-num)) .dmenu-body{ padding-right: 0; } .dmenu-body .dmenu-desc:last-child{ margin-bottom: 0; } .dmenu-compact .dmenu-h3{ padding-left: 0; border-left: 0; line-height: 1.5; } .dmenu-desc{ margin: 0 0 12px; font-size: 16px; line-height: 1.9; letter-spacing: .02em; color: #5e4137; text-align: left; } .dmenu-feature .dmenu-desc:last-child{ margin-bottom: 0; } .dmenu-desc-note{ margin-top: 4px; font-size: 12.5px; line-height: 1.75; } .dmenu-badge{ display: none; } .dmenu-note{ margin: 0 0 14px; font-size: 13px; line-height: 1.95; letter-spacing: .02em; color: #6f6166; } .dmenu-attn{ margin: -4px 0 16px; font-size: 12.5px; line-height: 1.7; letter-spacing: .02em; color: #7a1f3d; } /* チェックリスト */ .dmenu-check{ list-style: none; margin: 0 0 18px; padding: 0; } .dmenu-check li{ position: relative; padding-left: 28px; margin-bottom: 8px; font-size: 13.5px; line-height: 1.65; letter-spacing: .02em; color: #4c4448; } .dmenu-check li::before{ content: ""; position: absolute; left: 0; top: .12em; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23d4a574' stroke-width='1.6'/%3E%3Cpath d='M7.5 12.2l2.8 2.8 6.2-6.2' stroke='%23d4a574' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } /* 料金表 */ .dmenu-spec{ background: #fff; border: none; border-radius: 20px; overflow: hidden; margin-top: 20px; padding: 4px 0; } .dmenu-spec table{ width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; } .dmenu-spec th, .dmenu-spec td{ border: 0; padding: 15px 18px; text-align: left; vertical-align: top; line-height: 1.75; } .dmenu-spec tr:first-child th, .dmenu-spec tr:first-child td{ vertical-align: middle; } .dmenu-spec tr + tr th, .dmenu-spec tr + tr td{ border-top: 1px solid #ece4dd; } .dmenu-spec th{ width: 108px; box-sizing: border-box; white-space: nowrap; background: transparent; color: #866255; font-weight: 500; font-size: 14px; letter-spacing: .08em; text-align: right; padding-right: 14px; padding-left: 20px; border-right: 1px solid #d5c8bc; } .dmenu-spec td{ color: #5a5156; background: #fff; padding-left: 18px; padding-right: 22px; } .dmenu-spec tr:first-child th, .dmenu-spec tr:first-child td{ padding-top: 18px; padding-bottom: 16px; } .dmenu-compact .dmenu-spec th, .dmenu-compact .dmenu-spec td{ background: #fff; } .dmenu-price{ color: #5e2a2a; font-family: var(--dears-font-heading); font-size: clamp(1.65rem, 3.2vw, 1.9rem); font-weight: 600; letter-spacing: .04em; } .dmenu-compact .dmenu-price{ font-size: clamp(1.4rem, 2.8vw, 1.6rem); } .dmenu-price small{ font-size: 12px; font-weight: 400; color: #6f6166; margin-left: 4px; } .dmenu-price-note{ display: block; margin-top: 6px; font-size: 12.5px; font-weight: 400; line-height: 1.6; color: #6f6166; letter-spacing: .02em; } /* メニューカード */ .dmenu-feature{ position: relative; display: flex; flex-direction: column; gap: 22px; margin-bottom: 80px; padding: 32px 36px 28px; background: #f6f2ef; border-radius: 32px; } .dmenu-top{ display: grid; grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); column-gap: 28px; align-items: start; } .dmenu-figure{ display: block; padding: 0; } .dmenu-num{ position: absolute; top: -46px; right: 30px; z-index: 2; line-height: 1; padding-left: 0; pointer-events: none; } .dmenu-num--img{ width: clamp(72px, 12vw, 140px); } .dmenu-num-img{ display: block; width: 100%; height: auto; mix-blend-mode: screen; } .dmenu-num:not(.dmenu-num--img){ display: flex; align-items: baseline; gap: 1px; } .dmenu-num .label{ display: inline; margin: 0; font-family: var(--dears-font-heading); font-style: italic; font-size: 13px; font-weight: 400; letter-spacing: .04em; color: #866255; } .dmenu-num .no{ display: inline; margin: 0; font-family: var(--dears-font-heading); font-style: italic; font-size: clamp(2.6rem, 5.5vw, 3.4rem); font-weight: 400; line-height: 1; color: #866255; } .dmenu-figure img{ width: 100%; height: auto; aspect-ratio: 10 / 11; max-width: none !important; object-fit: cover; object-position: center center; display: block; border-radius: 20px; } .dmenu-content{ display: block; } /* 通常メニュー（旧 compact・互換） */ .dmenu-compact{ display: grid; grid-template-columns: min(34%, 220px) 1fr; gap: 20px 28px; align-items: start; padding: 24px; margin-top: 0; margin-bottom: 24px; border-top: 0; background: #f6f2ef; border-radius: 16px; } .dmenu-compact-left{ padding-right: 0; } @media (max-width: 860px){ .menu-section{ padding: 56px 16px 64px; } .dmenu-popular-line{ max-width: 56px; } .dmenu-feature{ gap: 10px; max-width: none; margin: 0 0 48px; padding: 16px 14px 14px; border-radius: 20px; } .dmenu-top{ grid-template-columns: 1fr; column-gap: 0; row-gap: 10px; } .dmenu-body{ padding-right: 0; } .dmenu-feature .dmenu-h3, .dmenu-h3{ margin: 0 0 6px; padding-right: 0; text-align: left; font-size: 1.2rem; } .dmenu-num{ top: -25px; right: 16px; } .dmenu-num--img{ width: clamp(64px, 14vw, 96px); } .dmenu-figure{ display: block; padding: 10px 12px; max-width: clamp(200px, 58vw, 260px); margin-left: auto; margin-right: auto; } .dmenu-figure img{ aspect-ratio: 4 / 5; border-radius: 16px; } .dmenu-desc{ font-size: 14px; line-height: 1.55; margin-bottom: 6px; } .dmenu-desc-note{ font-size: 11px; line-height: 1.5; } .dmenu-spec{ margin-top: 0; } .dmenu-spec table, .dmenu-spec tbody, .dmenu-spec tr{ display: block; width: 100%; } .dmenu-spec th, .dmenu-spec td{ display: block; width: auto; max-width: 100%; box-sizing: border-box; } .dmenu-spec tr + tr th, .dmenu-spec tr + tr td{ border-top: 0; } .dmenu-spec tr{ border-top: 1px solid #ece4dd; } .dmenu-spec tr:first-child{ border-top: 0; } .dmenu-spec th{ width: auto; border-right: 0; text-align: left; font-size: 13px; padding: 8px 12px 1px; } .dmenu-spec td{ text-align: left; font-size: 12px; line-height: 1.6; padding: 0 12px 8px; } .dmenu-spec tr:first-child th{ padding-top: 6px; } .dmenu-num .no{ font-size: 2.2rem; } .dmenu-compact{ grid-template-columns: 1fr; gap: 16px; max-width: none; margin: 0 0 20px; padding: 20px 18px; } .dmenu-price{ font-size: 1.25rem; } } /* ========================================================= 施術の流れ（タイムライン） ========================================================= */ .section.dflow-section{ position: relative; overflow: hidden; background-color: #faf7f4; background-image: linear-gradient(rgba(250,247,244,.82), rgba(250,247,244,.82)), url("https://dears-salon.com/wp-content/uploads/2026/06/1c7558976e32a6281e41ac8df8bcee94.png"); background-position: center; background-size: cover; background-repeat: no-repeat; } .dflow-inner{ position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 8px 0 0; } .dflow-title{ text-align: center; font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", serif; font-size: 30px; font-weight: 600; letter-spacing: .12em; color: #3f3438; margin: 0 0 2em; } .dflow-lead{ text-align: left; font-size: var(--dears-body-size); line-height: var(--dears-body-line); color: var(--dears-color-text); letter-spacing: 0; margin: 0 auto 40px; max-width: 640px; } .dflow-list{ position: relative; } /* 各ステップ */ .dflow-step{ display: grid; grid-template-columns: 44px 1fr; gap: 22px; position: relative; padding-bottom: 34px; } .dflow-step::before{ content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: #ecd9df; z-index: 0; } .dflow-step:first-child::before{ top: 18px; } .dflow-step:last-child::before{ bottom: auto; height: 18px; } .dflow-rail{ display: flex; justify-content: center; } .dflow-no{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #7a1f3d; color: #fff; font-size: 15px; font-weight: 600; flex-shrink: 0; } .dflow-body{ min-width: 0; } .dflow-content{ display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 24px; align-items: start; } .dflow-main{ padding-top: 0; } .dflow-h3{ margin: 0 0 14px; font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", serif; font-size: 18px; font-weight: 600; letter-spacing: .05em; color: #3f3438; } .dflow-desc{ margin: 0; font-size: var(--dears-body-size); line-height: var(--dears-body-line); color: var(--dears-color-text); letter-spacing: 0; text-align: left; } .dflow-main .dflow-desc + .dflow-desc{ margin-top: 0.85em; } .dflow-photo{ align-self: start; } .dflow-photo img{ width: 100%; display: block; border-radius: var(--dears-img-radius); aspect-ratio: 4 / 3; object-fit: cover; } /* サブブロック：2種類のオリジナル髪質改善エステ */ .dflow-sub{ position: relative; padding: 2px 0 34px 66px; } .dflow-sub::before{ content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: #ecd9df; z-index: 0; } .dflow-sub-title{ text-align: center; font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", serif; font-size: 15px; font-weight: 600; letter-spacing: .1em; color: #7a1f3d; margin: 0 0 22px; } .dflow-sub-item{ display: grid; grid-template-columns: 1fr 220px; gap: 22px; margin-bottom: 18px; } .dflow-sub-item:last-child{ margin-bottom: 0; } .dflow-sub-main{ padding-top: 2px; } .dflow-sub-h5{ margin: 0 0 6px; font-size: 14.5px; font-weight: 600; letter-spacing: .04em; color: #3f3438; position: relative; padding-left: 16px; } .dflow-sub-h5::before{ content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #7a1f3d; } /* 締めのコメント */ .dflow-closing{ display: flex; align-items: flex-start; gap: 16px; max-width: 860px; margin: 14px auto 0; background: #f7eeec; border-radius: 12px; padding: 24px 28px; } .dflow-closing-icon{ flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: #7a1f3d; } .dflow-closing-icon svg{ width: 32px; height: 32px; } .dflow-closing p{ margin: 0; font-size: 13.5px; line-height: 1.95; color: #5a5156; letter-spacing: .02em; } @media (max-width: 780px){ .dflow-title{ font-size: 21px; } .dflow-step{ grid-template-columns: 38px 1fr; gap: 14px 16px; padding-bottom: 28px; } .dflow-step::before{ left: 18px; } .dflow-no{ width: 32px; height: 32px; font-size: 14px; } .dflow-content{ grid-template-columns: 1fr; gap: 12px; } .dflow-photo{ max-width: 360px; } .dflow-sub{ padding-left: 54px; } .dflow-sub::before{ left: 18px; } .dflow-sub-item{ grid-template-columns: 1fr; gap: 12px; } .dflow-sub-item .dflow-photo{ grid-column: 1; margin-top: 0; } .dflow-closing{ padding: 20px; gap: 12px; } } /* ========================================================= よくいただくご質問（FAQアコーディオン） ========================================================= */ .section.dfaq-section{ background: #F8F3EE !important; position: relative; overflow: hidden; } .dfaq-title{ font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", serif; font-weight: 600; letter-spacing: .12em; } .dfaq-section .section-content{ position: relative; z-index: 1; max-width: 920px; } .dfaq-section .section-content > p{ text-align: center; color: #6f6166; font-size: 13.5px; line-height: 2; margin: 0 0 6px; } .dfaq-section .jin-ac-box02:first-of-type{ margin-top: 30px; } .dfaq-section .jin-ac-box02 + p{ margin-top: 32px; } .dfaq-section .jin-ac-box02{ position: relative; border: 1px solid #efe2e7; border-radius: 14px; margin: 0 auto 14px; max-width: 860px; background: #fff; overflow: hidden; box-shadow: 0 6px 18px rgba(91,74,80,.05); } .dfaq-section .jin-ac-box02-title{ background: #fff; margin: 0; padding: 20px 56px 20px 62px; font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", serif; font-weight: 500; font-size: 15px; color: #3f3438; letter-spacing: .03em; line-height: 1.65; cursor: pointer; position: relative; transition: background .25s ease; } .dfaq-section .jin-ac-box02-title:hover{ background: #fdf9f8; } .dfaq-section .jin-ac-box02-title::before{ content: "Q"; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #7a1f3d; color: #7a1f3d; font-family: "Shippori Mincho", "Yu Mincho", serif; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .dfaq-section .jin-ac-box02-title::after{ content: ""; position: absolute; right: 26px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #a98792; border-bottom: 2px solid #a98792; transform: translateY(-70%) rotate(45deg); transition: transform .25s ease; } .dfaq-section .jin-ac-box02.open .jin-ac-box02-title::after{ transform: translateY(-30%) rotate(-135deg); } .dfaq-section .jin-ac-box02-inner{ position: absolute; margin-top: 0; padding: 0; background: #faf4f2; border-radius: 0; opacity: 0; visibility: hidden; transform: translateY(-8px); overflow: hidden; transition: opacity .35s ease, transform .35s ease, visibility .35s ease; } .dfaq-section .jin-ac-box02.open .jin-ac-box02-inner, .dfaq-section .jin-ac-box02-inner.open{ position: relative; opacity: 1; visibility: visible; transform: none; padding: 20px 28px 24px 62px; overflow: visible; max-height: none; } .dfaq-section .jin-ac-box02.open .jin-ac-box02-inner::before, .dfaq-section .jin-ac-box02-inner.open::before{ content: "A"; position: absolute; left: 20px; top: 18px; color: #7a1f3d; font-family: "Shippori Mincho", "Yu Mincho", serif; font-size: 19px; font-weight: 600; line-height: 1; } .dfaq-section .jin-ac-box02-inner p{ margin: 0 0 12px; font-size: 13.5px; line-height: 1.95; color: #6f6166; text-align: left; } .dfaq-section .jin-ac-box02-inner p:last-child{ margin-bottom: 0; } .dfaq-section .jin-ac-box02-inner ul{ list-style: none; margin: 4px 0 12px; padding-left: 0; } .dfaq-section .jin-ac-box02-inner li{ display: block; font-size: 13.5px; line-height: 1.9; color: #6f6166; text-align: left; } .dfaq-section .jin-ac-box02-inner li::before{ content: none; } .dfaq-section .dfaq-slider{ max-width: 640px; margin: 0 auto; border-radius: var(--dears-img-radius); overflow: hidden; } .dfaq-section .dfaq-slider .dears-slider-track img{ aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--dears-img-radius); } @media (max-width: 780px){ .dfaq-section .jin-ac-box02-title{ padding: 16px 42px 16px 54px; font-size: 14px; } .dfaq-section .jin-ac-box02-title::before{ left: 14px; width: 26px; height: 26px; font-size: 13px; } .dfaq-section .jin-ac-box02-title::after{ right: 18px; } .dfaq-section .jin-ac-box02.open .jin-ac-box02-inner, .dfaq-section .jin-ac-box02-inner.open{ padding: 16px 18px 20px 54px; } .dfaq-section .jin-ac-box02.open .jin-ac-box02-inner::before, .dfaq-section .jin-ac-box02-inner.open::before{ left: 14px; } } /* ========================================================= ホームケア3点セットプレゼント ========================================================= */ .dgift-section{ padding: 0 20px; background: #ffffff; } .dgift-banner{ display: block; max-width: var(--dears-content-width); margin: 0 auto; text-decoration: none; } .dgift-banner img, .dgift-banner-img{ width: 100%; height: auto; display: block; vertical-align: top; border-radius: var(--dears-img-radius); } @media (max-width: 767px){ .dgift-section{ padding: 0 16px; } } /* ========================================================= 施術事例（タブ＋カードグリッド） ========================================================= */ .simple-box6{ background: #f5efe6; border: 1px dashed #d8c9bb; border-radius: 10px; padding: 14px 24px; margin: 18px auto; max-width: 520px; } .simple-box6 ul{ margin: 0; padding-left: 1.3em; } .case-tabs{ display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 28px 0 24px; } .case-tabs .tab-btn{ border: 1px solid #cfc0b5; border-bottom-width: 2px; background: linear-gradient(180deg, #fff 0%, #f7f2ed 100%); color: #6f6166; padding: 11px 22px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.4; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 8px rgba(91,74,80,.08); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease; } .case-tabs .tab-btn:hover{ border-color: var(--dears-btn); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 12px var(--dears-btn-shadow); } .case-tabs .tab-btn.active{ background: var(--dears-btn-gradient); color: #fff; text-shadow: 0 1px 2px rgba(61, 16, 32, 0.28); border-color: var(--dears-btn-border); border-bottom-color: var(--dears-btn-border-deep); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 10px var(--dears-btn-shadow); } .case-tabs .tab-btn:active{ transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.12), 0 1px 4px var(--dears-btn-shadow); } .case-content{ display: none; } .case-content.active{ display: block; } /* 色落ちが早い：事例から非表示 */ .case-tabs .tab-btn[data-tab="colorfade"], .case-content#colorfade{ display: none !important; } .case-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; justify-content: center; } .case-card{ text-align: center; margin: 0; } .case-card img{ width: 100%; height: auto; display: block; border-radius: var(--dears-img-radius); } .case-card h4{ margin: 12px 0 4px; font-size: 17px; border: none; padding: 0; } .case-card p{ margin: 0; color: #6f6166; font-size: 14px; } @media (max-width: 767px){ .case-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; } /* スマホのみ：上部3・下部2（中央寄せ） */ .case-tabs{ display: grid; grid-template-columns: repeat(6, max-content); justify-content: center; column-gap: 10px; row-gap: 10px; } .case-tabs .tab-btn:nth-child(1){ grid-column: 1 / 3; } .case-tabs .tab-btn:nth-child(2){ grid-column: 3 / 5; } .case-tabs .tab-btn:nth-child(3){ grid-column: 5 / 7; } .case-tabs .tab-btn:nth-child(4){ grid-column: 2 / 4; } .case-tabs .tab-btn:nth-child(5){ grid-column: 4 / 6; } .case-tabs .tab-btn{ padding: 8px 16px; font-size: 13.5px; } } /* ---- 施術事例セクション ---- */ .dears-cases-section{ padding-top: 96px !important; padding-bottom: 96px !important; padding-left: 20px; padding-right: 20px; margin-top: 0 !important; margin-bottom: 0 !important; text-align: center; background: #fff; } .dears-cases-inner{ max-width: 980px; margin: 0 auto; } .dears-cases-title{ margin: 0 0 2em !important; padding: 0 !important; font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif !important; font-size: 1.5rem !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: .06em; color: #3f3438 !important; text-align: center !important; border: 0 !important; } .dears-cases-title::after{ display: none; content: none; } .dears-cases-lead{ max-width: 760px; margin: 0 auto 1.5em !important; font-size: var(--dears-body-size); line-height: 1.8 !important; color: var(--dears-color-text); text-align: center; } .dears-cases-section .dears-cases-note-card{ max-width: 560px; margin: 40px auto; } .dears-cases-section .dears-cases-note-body p{ margin: 0; padding: 12px 0; text-align: left; font-size: var(--dears-body-size); line-height: var(--dears-body-line); color: var(--dears-color-text); } .dears-cases-section .dears-cases-note-body p:first-child{ padding-top: 0; } .dears-cases-section .dears-cases-note-body p:last-child{ padding-bottom: 0; } .dears-cases-section .case-tabs{ margin: 44px 0 36px; column-gap: 12px; row-gap: 12px; } .dears-cases-section .case-grid{ gap: 32px; margin-bottom: 12px; } .dears-cases-section .case-card h4{ margin: 18px 0 8px; } .dears-cases-section .case-card p{ margin: 0 0 4px; } /* 髪質改善の推移（PC: 横一列 / SP: カルーセル） */ .case-progress{ margin: 56px auto 0; max-width: 100%; padding: 0; } .case-progress-heading{ margin: 0 0 36px; text-align: center; } .case-progress-kicker{ margin: 0 0 12px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .24em; line-height: 1.4 !important; color: #ad4866 !important; text-align: center !important; } .case-progress-title{ margin: 0 !important; padding: 0 !important; border: 0 !important; background: none; text-align: center !important; } .case-progress-title span{ display: inline-flex; align-items: center; gap: 18px; font-family: var(--dears-font-heading); font-size: 1.28rem !important; font-weight: 600 !important; letter-spacing: .14em; line-height: 1.5 !important; color: #3f3438 !important; } .case-progress-title span::before, .case-progress-title span::after{ content: ""; flex: 0 0 36px; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, #c9b5a8); } .case-progress-title span::after{ background: linear-gradient(90deg, #c9b5a8, transparent); } .case-progress-wrap{ position: relative; } .dfaq-section .case-progress--faq{ margin: 0; max-width: 100%; } .dfaq-section .case-progress--faq .case-progress-heading{ margin-bottom: 24px; } .dfaq-section .case-progress--faq .case-progress-title span{ font-size: 1.1rem !important; } .dfaq-section .jin-ac-box02.open .case-progress--faq .case-progress-viewport{ overflow-x: auto; } .case-progress-viewport{ overflow: visible; } .case-progress-track{ display: grid; /* step + arrow を繰り返す（現在5枚） */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 8px; width: 100%; } .case-progress-step{ min-width: 0; margin: 0; } .case-progress-step img{ width: 100%; height: auto; display: block; border-radius: var(--dears-img-radius); } .case-progress-step figcaption{ margin: 10px 0 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--dears-color-text); text-align: center; } .case-progress-arrow{ display: flex; align-items: center; justify-content: center; align-self: center; margin-top: -1.6em; color: var(--dears-btn); } .case-progress-arrow svg{ width: 22px; height: 22px; display: block; } .case-progress-nav{ display: none; } @media (max-width: 767px){ .case-progress{ margin-top: 40px; } .case-progress-heading{ margin-bottom: 28px; } .case-progress-kicker{ margin-bottom: 10px !important; font-size: 11px !important; letter-spacing: .2em; } .case-progress-title span{ gap: 12px; font-size: 1.1rem !important; letter-spacing: .1em; } .case-progress-title span::before, .case-progress-title span::after{ flex-basis: 24px; width: 24px; } .case-progress-wrap{ margin-left: -16px; margin-right: -16px; padding: 0 40px; } .case-progress-viewport{ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; container-type: inline-size; scroll-padding-left: 16px; scroll-padding-right: 16px; } .case-progress-viewport::-webkit-scrollbar{ display: none; } .case-progress-track{ display: flex; gap: 14px; padding: 0 16px 2px; width: auto; } .case-progress-step{ flex: 0 0 82%; flex: 0 0 82cqi; scroll-snap-align: start; } .case-progress-step img{ border-radius: 12px; } /* FAQ内：余白が狭いのでカード幅・矢印位置を調整 */ .dfaq-section .case-progress--faq .case-progress-wrap{ margin-left: -10px; margin-right: -10px; padding: 0 34px; } .dfaq-section .case-progress--faq .case-progress-step{ flex: 0 0 86%; flex: 0 0 86cqi; } .dfaq-section .case-progress--faq .case-progress-prev{ left: 0; } .dfaq-section .case-progress--faq .case-progress-next{ right: 0; } .case-progress-step figcaption{ margin-top: 8px; font-size: 13px; } .case-progress-arrow{ display: none; } .case-progress-nav{ display: flex; align-items: center; justify-content: center; position: absolute; top: calc(50% - 14px); transform: translateY(-50%); width: 36px; height: 36px; border: 1px solid #ece3da; border-radius: 50%; background: rgba(255,255,255,.92); color: #7A1E3D; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; box-shadow: 0 8px 20px rgba(91,74,80,.12); transition: opacity .2s ease, transform .2s ease; } .case-progress-nav:hover:not(:disabled){ transform: translateY(-50%) scale(1.04); } .case-progress-nav:disabled{ opacity: .3; cursor: default; pointer-events: none; } .case-progress-prev{ left: 4px; } .case-progress-next{ right: 4px; } } /* セクション末尾CTA（施術事例・メニュー等） */ .dears-section-cta{ margin: 56px auto 0; padding: 0 20px; text-align: center; clear: both; } .dears-cases-section .dears-section-cta{ max-width: 1000px; margin-top: 72px; } .menu-section .dears-section-cta{ max-width: 1000px; } /* ========================================================= セクション余白・見出しの統一 ========================================================= */ /* 各セクションの上下余白を統一（左右の全幅指定はそのまま維持） */ .dears-closing, .dears-intro, .dears-concern-section, .dears-solution-section, .dears-kodawari, .promise-section, .section.dears-values, .voice-section, .menu-section, .section.dflow-section, .section.dfaq-section, .dgift-section, .dears-reservation-section{ padding-top: 72px !important; padding-bottom: 72px !important; margin-top: 0 !important; margin-bottom: 0 !important; } .cps-post-main.hl-custom .dears-front .dgift-section, .dears-front .dgift-section{ padding-top: 0 !important; padding-bottom: 0 !important; background: #ffffff !important; } .cps-post-main.hl-custom .dears-front .store-search-section, .dears-front .store-search-section{ padding-top: 56px !important; padding-bottom: 72px !important; background: #ffffff !important; margin-top: 0 !important; margin-bottom: 0 !important; } .cps-post-main.hl-custom .dears-front .store-search-section .store-search-card, .cps-post-main.hl-custom .dears-front .store-search-section #dears-store-search, .dears-front .store-search-section .store-search-card, .dears-front .store-search-section #dears-store-search{ margin-top: 0 !important; margin-bottom: 0 !important; } .cps-post-main.hl-custom .dears-front .dears-intro-card, .cps-post-main.hl-custom .dears-front .dears-concern-inner, .cps-post-main.hl-custom .dears-front .dears-solution-inner, .cps-post-main.hl-custom .dears-front .dgift-banner, .cps-post-main.hl-custom .dears-front .store-search-card, .dears-front .dears-intro-card, .dears-front .dears-concern-inner, .dears-front .dears-solution-inner, .dears-front .dgift-banner, .dears-front .store-search-card{ max-width: var(--dears-content-width) !important; margin-left: auto !important; margin-right: auto !important; } /* 店舗検索カード：ラッパー未使用時のみ margin で区切る（上部は .store-search-section の padding を使用） */ .cps-post-main.hl-custom .dears-front > .store-search-card, .dears-front > .store-search-card{ margin-top: 72px !important; margin-bottom: 72px !important; } .cps-post-main.hl-custom .dears-front #dears-store-search, .dears-front #dears-store-search{ margin-left: auto !important; margin-right: auto !important; } /* ご予約・お問い合わせ */ .dears-reservation-section{ position: relative; overflow: hidden; padding-left: 20px; padding-right: 20px; text-align: center; background: #ffffff; } .dears-reservation-inner{ max-width: 980px; margin: 0 auto; } .dears-reservation-title{ margin: 0 0 2em !important; padding: 0 !important; font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif !important; font-size: 1.5rem !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: .06em; color: #3f3438 !important; text-align: center !important; border: 0 !important; } .dears-reservation-title::after{ display: none; content: none; } .dears-reservation-section > p, .dears-reservation-inner > p{ max-width: 760px; margin-left: auto !important; margin-right: auto !important; margin-bottom: 1em !important; font-size: var(--dears-body-size); line-height: var(--dears-body-line) !important; color: var(--dears-color-text); text-align: left !important; } .dears-reservation-section > img, .dears-reservation-inner > img{ margin: 8px auto 24px !important; display: block; } .dears-reservation-section .jin-2column{ max-width: 920px; margin: 32px auto 0; text-align: left; } .dears-reservation-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; max-width: 920px; margin: 32px auto 0; text-align: left; align-items: stretch; } .dears-reservation-item{ display: flex; flex-direction: column; height: 100%; padding: 28px 24px 24px; background: rgba(255,255,255,.78); border: 1px solid #ebe3dc; border-radius: 14px; box-shadow: 0 8px 24px rgba(91,74,80,.05); } .dears-reservation-item p{ margin: 0 0 12px; font-size: 14.5px; line-height: 2 !important; color: #5a5156; } .dears-reservation-item p:last-child{ margin-bottom: 0; } .dears-reservation-item-cta{ margin-top: auto; padding-top: 20px; } .dears-reservation-btn{ display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 14px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 600; letter-spacing: .03em; line-height: 1.5; text-align: center; text-decoration: none !important; color: #fff !important; text-shadow: 0 1px 2px rgba(61, 16, 32, 0.28); cursor: pointer; background: var(--dears-btn-gradient); border: 1px solid var(--dears-btn-border); border-bottom-width: 3px; border-bottom-color: var(--dears-btn-border-deep); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px var(--dears-btn-shadow); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; box-sizing: border-box; } .dears-reservation-btn:hover{ transform: translateY(-2px); background: var(--dears-btn-gradient-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 18px var(--dears-btn-shadow-hover); } .dears-reservation-btn:active{ transform: translateY(1px); border-bottom-width: 1px; box-shadow: inset 0 2px 5px rgba(0,0,0,.16), 0 2px 8px var(--dears-btn-shadow); } .dears-reservation-note{ font-size: 14px !important; color: #7a7075 !important; } .dears-reservation-section .store-search-card--in-reservation{ margin: 2.5em auto 3em !important; max-width: 860px; text-align: center; } .dears-reservation-section .store-search-card--in-reservation h2{ margin-bottom: 2em !important; } .dears-reservation-section .jincol-h3{ margin: 0 0 20px !important; padding: 16px 0 14px !important; border-bottom: 1px solid #e6dcd4 !important; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important; font-size: 18px !important; font-weight: 700 !important; color: #3f3438 !important; text-align: center !important; background: none !important; } .dears-reservation-section .jin-2column-left p, .dears-reservation-section .jin-2column-right p{ font-size: 14.5px; line-height: 2 !important; color: #5a5156; } @media (max-width: 767px){ .dgift-section, .cps-post-main .dgift-section, .cps-post-main.hl-custom .dgift-section, .dears-front .dgift-section, .cps-post-main .dears-front .dgift-section, .cps-post-main.hl-custom .dears-front .dgift-section{ padding-left: 16px !important; padding-right: 16px !important; } .store-search-card, #dears-store-search, #dears-store-search-2, .dears-front .store-search-card, .dears-front #dears-store-search, .dears-front #dears-store-search-2, .cps-post-main .store-search-card, .cps-post-main.hl-custom .store-search-card, .cps-post-main .dears-front .store-search-card, .cps-post-main.hl-custom .dears-front .store-search-card, .cps-post-main .dears-front #dears-store-search, .cps-post-main.hl-custom .dears-front #dears-store-search, .cps-post-main .dears-front #dears-store-search-2, .cps-post-main.hl-custom .dears-front #dears-store-search-2{ margin-left: 16px !important; margin-right: 16px !important; max-width: calc(100% - 32px) !important; width: auto !important; box-sizing: border-box !important; } .dears-front > .store-search-card, .cps-post-main .dears-front > .store-search-card, .cps-post-main.hl-custom .dears-front > .store-search-card{ margin-top: 44px !important; margin-bottom: 44px !important; } .dears-reservation-section{ padding-left: 16px; padding-right: 16px; } .dears-cases-section{ padding-top: 64px !important; padding-bottom: 64px !important; padding-left: 16px; padding-right: 16px; text-align: left; } .dears-cases-section .dears-cases-lead{ margin-bottom: 1.25em !important; line-height: 1.85 !important; } .dears-cases-section .dears-cases-note-card{ margin: 32px auto; padding: 30px 24px 28px; } .dears-cases-section .dears-cases-note-body p{ padding: 10px 0; } .dears-cases-section .case-tabs{ margin: 36px 0 28px; } .dears-cases-section .case-grid{ gap: 20px; } .dears-cases-section .dears-section-cta{ margin-top: 56px; } .dears-reservation-title, .dears-cases-title{ font-size: 1.2rem !important; } .dears-reservation-grid{ grid-template-columns: 1fr; gap: 32px; } .dears-reservation-item{ padding: 24px 20px 20px; } } /* 各セクションの見出しを統一（1.5rem・明朝・下線なし・余白） */ .dears-kodawari-title, .promise-title, .dears-values .section-content h2, .voice-title, .dmenu-title, .dflow-title, .dfaq-title, .store-search-card h2, .dears-cases-title, .dears-reservation-title, .dears-closing h2, .home .cps-post-main > h2{ font-size: 1.5rem !important; font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif !important; line-height: 1.5 !important; margin: 0 0 2em !important; } .dears-concern-title::after, .dears-solution-title::after, .dears-kodawari-title::after, .promise-title::after, .dears-values .section-content h2::after, .voice-title::after, .dmenu-title::after, .dflow-title::after, .dfaq-title::after, .store-search-card h2::after, .dears-cases-title::after, .dears-reservation-title::after, .dears-closing h2::after, .dears-front h2::after, .home .cps-post-main > h2::after{ display: none !important; content: none !important; } @media (max-width: 767px){ .dears-closing, .dears-intro, .dears-concern-section, .dears-solution-section, .dears-kodawari, .promise-section, .section.dears-values, .voice-section, .menu-section, .section.dflow-section, .section.dfaq-section, .dgift-section, .dears-reservation-section{ padding-top: 44px !important; padding-bottom: 44px !important; } } /* ========================================================= JIN（テーマ）ベースCSSとの競合上書き .cps-post-main 配下の既定スタイルを当方デザイン優先で打ち消す 対象: p(余白/行間) / a(下線) / img(下余白) / ul・li(左余白・行頭) / table(罫線) ※当方コンポーネント内に限定して上書き（本文の他要素はテーマ既定のまま） ========================================================= */ /* --- 段落：テーマの padding-bottom:2rem を打ち消し（余白は各クラスの margin で管理） --- */ .dears-intro p, .dears-concern-section p, .dears-solution-section p, .dears-kodawari p, .promise-section p, .dears-values p, .voice-section p, .menu-section p, .dflow-section p, .dfaq-section p, .dears-reservation-section p, .dears-cases-section p, .dgift-section p, .store-search-section p, .store-search-card p, .quick-nav p, .dears-closing p, .case-tabs p, .case-content p{ padding-bottom: 0 !important; margin-top: 0 !important; } /* 施術事例：表示中カードの画像と「悩み」のあいだ余白 */ .case-card.dears-reveal.is-visible > p, .cps-post-main .case-card.dears-reveal.is-visible > p, .cps-post-main.hl-custom .case-card.dears-reveal.is-visible > p{ margin-top: 0 !important; padding-top: 14px !important; } /* --- 行間・本文：テーマの p { line-height:1.6em !important } に統一 --- */ .cps-post-main.hl-custom .dears-front p:not(.dears-intro-title):not(.dmenu-lead):not(.dmenu-desc):not(.dmenu-desc-note):not(.case-progress-kicker):not(.voice-sub):not(.store-search-lead):not(.dears-cases-lead), .cps-post-main.hl-custom .dears-front li, .cps-post-main .dears-front p:not(.dears-intro-title):not(.dmenu-lead):not(.dmenu-desc):not(.dmenu-desc-note):not(.case-progress-kicker):not(.voice-sub):not(.store-search-lead):not(.dears-cases-lead), .cps-post-main .dears-front li{ font-family: var(--dears-font-body) !important; font-size: var(--dears-body-size) !important; line-height: var(--dears-body-line) !important; color: var(--dears-color-text) !important; text-align: left !important; } .cps-post-main.hl-custom .dears-front h2, .cps-post-main .dears-front h2{ font-family: var(--dears-font-heading) !important; font-size: var(--dears-h2-size) !important; font-weight: var(--dears-h2-weight) !important; line-height: var(--dears-h2-line) !important; color: var(--dears-color-heading) !important; text-align: center !important; margin: 0 0 2em !important; } .cps-post-main.hl-custom .dears-front .dears-intro .dears-intro-title{ font-family: var(--dears-font-heading) !important; font-size: 1.6rem !important; line-height: var(--dears-h2-line) !important; font-weight: var(--dears-h2-weight) !important; letter-spacing: .04em !important; margin: 0 0 2em !important; padding-bottom: 0 !important; color: var(--dears-color-heading) !important; text-align: center !important; } .cps-post-main.hl-custom .dears-front .dears-intro .dears-intro-text{ font-family: var(--dears-font-body) !important; font-size: var(--dears-body-size) !important; line-height: var(--dears-body-line) !important; letter-spacing: 0 !important; margin: var(--dears-body-margin) !important; padding-bottom: 0 !important; color: var(--dears-color-text) !important; text-align: left !important; } .cps-post-main.hl-custom .dears-front .dears-check li, .cps-post-main .dears-front .dears-check li{ line-height: 1.45 !important; margin-bottom: 12px !important; } .cps-post-main.hl-custom .dears-front .store-search-lead, .cps-post-main .dears-front .store-search-lead, .cps-post-main.hl-custom .dears-front p.store-search-lead, .cps-post-main .dears-front p.store-search-lead{ margin-bottom: 30px !important; display: inline-block !important; text-align: center !important; } .cps-post-main.hl-custom .dears-front .voice-sub, .cps-post-main .dears-front .voice-sub, .cps-post-main.hl-custom .dears-front p.voice-sub, .cps-post-main .dears-front p.voice-sub{ margin-bottom: 3em !important; text-align: left !important; } .cps-post-main.hl-custom .dears-front .dears-cases-lead, .cps-post-main .dears-front .dears-cases-lead{ text-align: center !important; } .cps-post-main.hl-custom .dears-front .dmenu-lead, .cps-post-main .dears-front .dmenu-lead, .cps-post-main.hl-custom .menu-section .dmenu-lead, .cps-post-main .menu-section .dmenu-lead{ text-align: center !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 1em !important; } .cps-post-main.hl-custom .dears-front .dmenu-lead-last, .cps-post-main .dears-front .dmenu-lead-last, .cps-post-main.hl-custom .menu-section .dmenu-lead-last, .cps-post-main .menu-section .dmenu-lead-last{ margin-bottom: 0 !important; } .cps-post-main.hl-custom .dears-front .dflow-lead, .cps-post-main .dears-front .dflow-lead{ margin-bottom: 40px !important; } .cps-post-main.hl-custom .dears-front .dmenu-lead-guide, .cps-post-main .dears-front .dmenu-lead-guide, .cps-post-main.hl-custom .menu-section .dmenu-lead-guide, .cps-post-main .menu-section .dmenu-lead-guide{ text-align: center !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 1em !important; } .cps-post-main.hl-custom .dears-front .dmenu-lead-guide li, .cps-post-main .dears-front .dmenu-lead-guide li, .cps-post-main.hl-custom .menu-section .dmenu-lead-guide li, .cps-post-main .menu-section .dmenu-lead-guide li{ text-align: center !important; } .cps-post-main.hl-custom .dears-front .dears-cases-note-body p, .cps-post-main .dears-front .dears-cases-note-body p{ text-align: left !important; } /* --- リンク：テーマの text-decoration:underline を解除 --- */ .dears-intro a, .dears-kodawari a, .promise-section a, .dears-values a, .voice-section a, .menu-section a, .dflow-section a, .dfaq-section a, .dgift-section a, .dgift-banner-link, .store-search-section a, .store-search-card a, .quick-nav a, .case-tabs a, .case-content a{ text-decoration: none !important; } /* --- 画像：テーマの img{ margin-bottom:20px } を打ち消し（余白はラッパーで管理） --- */ .dears-intro img, .dears-kodawari img, .promise-section img, .dears-values img, .voice-section img, .menu-section img, .dflow-section img, .dfaq-section img, .dgift-section img, .store-search-section img, .store-search-card img, .quick-nav img, .case-tabs img, .case-content img{ margin-bottom: 0 !important; border-radius: var(--dears-img-radius); } .dears-values-bg img, .dears-value-icon img, .voice-card img{ border-radius: 0 !important; } /* --- リスト：テーマの ul li{ padding:0 0 0 25px; margin-bottom:.35em; display:block } を上書き --- */ /* JINテーマの行頭丸（.cps-post-main ul > li:before { background-color }）を無効化 */ /* ※ background: none は background-image 付き独自アイコンまで消すため使わない */ .cps-post-main ul > li::before, .cps-post-main ol > li::before{ background-color: transparent !important; } /* アイコン付き独自リストの行頭位置と行間を本来の値へ戻す */ .dears-intro .dears-check li{ padding: 0 0 0 40px !important; margin-bottom: 12px !important; line-height: 1.45 !important; } .dears-intro .dears-check li:last-child{ margin-bottom: 0 !important; } .dears-concern-section .dears-concern-list li{ display: block !important; padding: 0 0 0 40px !important; margin-bottom: 1em !important; } .dears-concern-section .dears-concern-list li:last-child{ margin-bottom: 0 !important; } .dears-concern-section .dears-concern-list li::before{ content: "" !important; position: absolute !important; left: 2px !important; top: 0.05em !important; width: 24px !important; height: 24px !important; border-radius: 0 !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a93a5d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13l5.5 5.5L20.5 5.5'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; } .cps-post-main.hl-custom .dears-front .dears-concern-section .dears-concern-title, .cps-post-main .dears-front .dears-concern-section .dears-concern-title, .dears-front .dears-concern-section .dears-concern-title, .dears-concern-section h2.dears-concern-title, .dears-concern-section .dears-concern-title{ font-size: clamp(1.35rem, 2.5vw, 1.65rem) !important; } .menu-section .dmenu-figure img{ width: 100% !important; height: auto !important; aspect-ratio: 10 / 11 !important; max-width: none !important; object-fit: cover !important; border-radius: 20px !important; } @media (min-width: 861px){ .menu-section .dmenu-body, .cps-post-main.hl-custom .menu-section .dmenu-body, .cps-post-main .menu-section .dmenu-body, .cps-post-main.hl-custom .dears-front .menu-section .dmenu-body, .cps-post-main .dears-front .menu-section .dmenu-body{ display: block !important; padding-right: 0 !important; padding-left: 0 !important; } .menu-section .dmenu-top, .cps-post-main.hl-custom .menu-section .dmenu-top, .cps-post-main .menu-section .dmenu-top, .cps-post-main.hl-custom .dears-front .menu-section .dmenu-top, .cps-post-main .dears-front .menu-section .dmenu-top{ display: grid !important; grid-template-columns: minmax(280px, 38%) minmax(0, 1fr) !important; column-gap: 28px !important; } .menu-section .dmenu-desc, .menu-section .dmenu-body p.dmenu-desc, .cps-post-main.hl-custom .menu-section .dmenu-body p.dmenu-desc, .cps-post-main .menu-section .dmenu-body p.dmenu-desc, .cps-post-main.hl-custom .dears-front .menu-section .dmenu-body p.dmenu-desc, .cps-post-main .dears-front .menu-section .dmenu-body p.dmenu-desc{ font-size: 16px !important; line-height: 1.9 !important; } .menu-section .dmenu-spec th, .cps-post-main.hl-custom .menu-section .dmenu-spec th, .cps-post-main .menu-section .dmenu-spec th, .cps-post-main.hl-custom .dears-front .menu-section .dmenu-spec th, .cps-post-main .dears-front .menu-section .dmenu-spec th{ font-size: 16px !important; } } .cps-post-main.hl-custom .dears-front .dears-solution-section .dears-solution-title, .cps-post-main .dears-front .dears-solution-section .dears-solution-title, .dears-front .dears-solution-section .dears-solution-title, .dears-solution-section h2.dears-solution-title, .dears-solution-section .dears-solution-title{ font-size: clamp(1.35rem, 2.5vw, 1.65rem) !important; letter-spacing: .16em !important; color: #866255 !important; } .dears-solution-section .dears-solution-circle-img img{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; } .dears-solution-section .dears-solution-support-item-img img{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; } .dears-solution-section .dears-solution-circle figcaption, .dears-solution-section .dears-solution-circle-sub, .dears-solution-section .dears-solution-circle-main{ font-family: var(--dears-font-heading) !important; color: #866255 !important; text-align: center !important; } .dears-solution-section .dears-solution-circle-sub{ font-size: clamp(0.95rem, 1.8vw, 1.05rem) !important; } .dears-solution-section .dears-solution-circle-main{ font-size: clamp(1.15rem, 2.2vw, 1.35rem) !important; } .dears-solution-section .dears-solution-support-heading h3, .dears-solution-section .dears-solution-support-item-label, .dears-solution-section .dears-solution-support-sub, .dears-solution-section .dears-solution-support-main, .dears-solution-section .dears-solution-support-body p, .dears-solution-section .dears-solution-check li, .dears-solution-section .dears-solution-check-title{ color: #866255 !important; } .dears-solution-section .dears-solution-support-heading h3, .dears-solution-section .dears-solution-support-sub, .dears-solution-section .dears-solution-support-main, .dears-solution-section .dears-solution-check-title{ font-family: var(--dears-font-heading) !important; } .dears-solution-section .dears-solution-support-sub, .dears-solution-section .dears-solution-support-main, .dears-solution-section .dears-solution-check-title{ font-weight: 700 !important; } .dears-solution-section .dears-solution-support-item-label{ display: flex !important; flex-direction: column !important; gap: 4px !important; text-align: left !important; } @media (max-width: 767px){ .dears-solution-section .dears-solution-support-duo{ width: 100% !important; max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; } .dears-solution-section .dears-solution-support-item{ width: 100% !important; max-width: none !important; margin: 0 !important; justify-content: flex-start !important; } } .dears-solution-section .dears-solution-anxiety{ background: #ececec !important; text-align: center !important; } .dears-solution-section .dears-solution-anxiety-title, .dears-solution-section .dears-solution-anxiety-title strong{ font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif !important; font-size: clamp(16px, 1.9vw, 18px) !important; font-weight: 700 !important; color: #1a1a1a !important; text-align: center !important; margin-bottom: 2em !important; } .dears-solution-section .dears-solution-lead-points{ width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } .dears-solution-section .dears-solution-lead-points li{ position: relative !important; display: block !important; padding: 0 0 0 1.1em !important; margin-bottom: .45em !important; text-align: left !important; } .dears-solution-section .dears-solution-lead-points li:last-child{ margin-bottom: 0 !important; } .dears-solution-section .dears-solution-lead-points li::before{ display: block !important; content: "・" !important; position: absolute !important; left: 0 !important; top: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; } .dears-solution-section .dears-solution-anxiety-list li{ position: relative !important; display: block !important; padding: 0 0 0 1.1em !important; margin-bottom: .45em !important; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif !important; color: #1a1a1a !important; text-align: left !important; } .dears-solution-section .dears-solution-anxiety-list li:last-child{ margin-bottom: 0 !important; } .dears-solution-section .dears-solution-anxiety-list li::before{ display: block !important; content: "・" !important; position: absolute !important; left: 0 !important; top: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; } .dears-solution-section .dears-solution-check li{ padding: 0 0 0 40px !important; margin-bottom: 1.5em !important; } .dears-solution-section .dears-solution-check li:last-child{ margin-bottom: 0 !important; } .dears-solution-section .dears-solution-check li::before{ display: block !important; content: "" !important; position: absolute !important; left: 2px !important; top: 0.05em !important; width: 24px !important; height: 24px !important; border-radius: 0 !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23866255' stroke-width='1.4'/%3E%3Cpath d='M7.5 12.2l3.2 3.3L16.8 8.8' fill='none' stroke='%23866255' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; } .promise-section .promise-text li{ padding: 0 0 0 30px !important; margin-bottom: 13px !important; } .promise-section .promise-text li:last-child{ margin-bottom: 0 !important; } .menu-section .dmenu-check li{ padding: 0 0 0 28px !important; margin-bottom: 8px !important; } .menu-section .dmenu-check li:last-child{ margin-bottom: 0 !important; } .menu-section .dmenu-lead-guide li{ display: block !important; padding: 0 !important; margin: 0 0 4px !important; text-align: center !important; } .menu-section .dmenu-lead-guide li:last-child{ margin-bottom: 0 !important; } /* こだわり本文の通常リスト（クラス無しul）は、テーマで display:block にされ マーカー(・)が消えるため、リストマーカーを復活させる */ .dears-kodawari .dears-kodawari-body ul{ padding-left: 1.4em !important; } .dears-kodawari .dears-kodawari-body li{ display: list-item !important; list-style: disc !important; padding-left: 0 !important; margin-bottom: 6px !important; } /* --- テーブル：テーマの border:1px #ccc / padding:8px / word-break:break-all を上書き --- */ .menu-section .dmenu-spec table{ border: 0 !important; margin-bottom: 0 !important; word-break: normal !important; table-layout: fixed !important; } .menu-section .dmenu-spec th, .menu-section .dmenu-spec td{ border: 0 !important; border-bottom: 0 !important; padding: 15px 18px !important; word-break: normal !important; } .menu-section .dmenu-spec th{ background: transparent !important; color: #866255 !important; width: 108px !important; border-right: 1px solid #d5c8bc !important; text-align: right !important; font-size: 14px !important; padding-right: 14px !important; padding-left: 20px !important; } .menu-section .dmenu-spec tr + tr th, .menu-section .dmenu-spec tr + tr td{ border-top: 1px solid #ece4dd !important; } .menu-section .dmenu-compact .dmenu-spec th{ background: transparent !important; } .menu-section .dmenu-spec tr:last-child th, .menu-section .dmenu-spec tr:last-child td{ border-bottom: 0 !important; } @media (max-width: 860px){ .menu-section .dmenu-spec{ margin-top: 0 !important; } .menu-section .dmenu-spec table, .menu-section .dmenu-spec tbody, .menu-section .dmenu-spec tr{ display: block !important; width: 100% !important; } .menu-section .dmenu-spec th, .menu-section .dmenu-spec td{ display: block !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; text-align: left !important; } .menu-section .dmenu-spec tr + tr th, .menu-section .dmenu-spec tr + tr td{ border-top: 0 !important; } .menu-section .dmenu-spec tr{ border-top: 1px solid #ece4dd !important; } .menu-section .dmenu-spec tr:first-child{ border-top: 0 !important; } .menu-section .dmenu-spec th{ width: auto !important; border-right: 0 !important; text-align: left !important; font-size: 13px !important; padding: 8px 12px 1px !important; } .menu-section .dmenu-spec td{ text-align: left !important; font-size: 12px !important; line-height: 1.6 !important; padding: 0 12px 8px !important; } .menu-section .dmenu-spec tr:first-child th, .menu-section .dmenu-spec tr:first-child td{ padding-top: 0 !important; } .menu-section .dmenu-spec tr:first-child th{ padding-top: 6px !important; } } .menu-section .dmenu-price{ color: #5e2a2a !important; } .menu-section .dmenu-feature{ background: #f6f2ef !important; border-radius: 32px !important; } .menu-section .dmenu-desc{ color: #5e4137 !important; font-size: 16px !important; line-height: 1.9 !important; margin: 0 0 12px !important; text-align: left !important; } .menu-section .dmenu-desc-note{ font-size: 12.5px !important; } .menu-section .dmenu-h3{ color: #866255 !important; font-size: clamp(1.1rem, 2vw, 1.3rem) !important; font-weight: 500 !important; letter-spacing: .14em !important; } @media (max-width: 860px){ .menu-section .dmenu-top{ grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 10px !important; } .menu-section .dmenu-body{ display: block !important; padding-right: 0 !important; } .menu-section .dmenu-h3{ margin: 0 0 6px !important; padding-right: 0 !important; text-align: left !important; color: #866255 !important; font-size: 1.2rem !important; font-weight: 500 !important; letter-spacing: .14em !important; } .menu-section .dmenu-figure{ padding: 10px 12px !important; max-width: clamp(200px, 58vw, 260px) !important; margin-left: auto !important; margin-right: auto !important; } .menu-section .dmenu-figure img{ aspect-ratio: 4 / 5 !important; border-radius: 16px !important; } .menu-section .dmenu-desc, .menu-section .dmenu-body p.dmenu-desc, .cps-post-main.hl-custom .dears-front .menu-section .dmenu-body p.dmenu-desc, .cps-post-main .dears-front .menu-section .dmenu-body p.dmenu-desc{ font-size: 14px !important; line-height: 1.55 !important; margin-bottom: 6px !important; } .menu-section .dmenu-desc-note{ font-size: 11px !important; line-height: 1.5 !important; } .menu-section .dmenu-feature{ gap: 10px !important; padding: 16px 14px 14px !important; border-radius: 20px !important; } .menu-section .dmenu-price{ font-size: 1.25rem !important; } } @media (max-width: 767px){ .dears-intro .dears-check li{ padding-left: 34px !important; margin-bottom: 10px !important; line-height: 1.45 !important; } } /* ========================================================= 最後に（クロージング） テーマ既定（左寄せ全幅・ワインレッドの矢印ボタン）を 当方デザインに統一する。本番/ローカル共通で .dears-closing を使用 ========================================================= */ .dears-closing{ margin-left: 0; margin-right: 0; padding: 72px 20px; background: #ffffff; } .dears-closing-inner{ max-width: 760px; margin: 0 auto; text-align: center; } .dears-closing h2{ margin: 0 0 2em !important; padding: 0 !important; font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif !important; font-weight: 500 !important; font-size: 1.5rem !important; line-height: 1.5 !important; color: #3f3438 !important; text-align: center !important; border: 0 !important; } .dears-closing h2::after{ display: none; content: none; } .dears-closing p{ margin: var(--dears-body-margin) !important; padding-bottom: 0 !important; font-size: var(--dears-body-size); line-height: var(--dears-body-line) !important; letter-spacing: 0; color: var(--dears-color-text); text-align: left !important; } .dears-closing-text p{ word-break: keep-all; line-break: strict; overflow-wrap: anywhere; } .dears-closing-text p:last-child{ margin-bottom: 0 !important; } .dears-closing-actions{ margin-top: 36px; } .dears-closing p:last-of-type{ margin-bottom: 0 !important; } /* ボタン群：立体的なCTAボタンに統一 */ .dears-section-cta .color-button02-big a, .dears-closing .color-button02-big a, .dears-front .color-button02-big a{ display: flex; align-items: center; justify-content: center; min-height: 54px; background: var(--dears-btn-gradient) !important; color: #fff !important; text-decoration: none !important; text-align: center; text-shadow: 0 1px 2px rgba(61, 16, 32, 0.28); padding: 16px 24px !important; border-radius: 12px; border: 1px solid var(--dears-btn-border); border-bottom-width: 3px; border-bottom-color: var(--dears-btn-border-deep); font-size: 15px; font-weight: 600; letter-spacing: .03em; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px var(--dears-btn-shadow); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .dears-section-cta .color-button02-big, .dears-closing .color-button02-big, .dears-front .color-button02-big{ display: block; max-width: 520px !important; width: 100% !important; margin: 0 auto; } .dears-closing .color-button02-big{ margin: 14px auto 0; } .dears-closing .color-button02-big:before, .dears-section-cta .color-button02-big:before, .dears-front .color-button02-big:before{ display: none !important; } .dears-section-cta .color-button02-big a:hover, .dears-closing .color-button02-big a:hover, .dears-front .color-button02-big a:hover{ transform: translateY(-2px); background: var(--dears-btn-gradient-hover) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 18px var(--dears-btn-shadow-hover); } .dears-section-cta .color-button02-big a:active, .dears-closing .color-button02-big a:active, .dears-front .color-button02-big a:active{ transform: translateY(1px); border-bottom-width: 1px; box-shadow: inset 0 2px 5px rgba(0,0,0,.16), 0 2px 8px var(--dears-btn-shadow); } /* テーマの矢印アイコン・改行は非表示にして見た目を統一 */ .dears-section-cta .color-button02-big a .jic-sc, .dears-section-cta .color-button02-big a .jic, .dears-section-cta .color-button02-big br, .dears-closing .color-button02-big a .jic-sc, .dears-closing .color-button02-big a .jic, .dears-closing .color-button02-big br{ display: none !important; } @media (max-width: 767px){ .dears-closing{ padding: 44px 16px; } .dears-closing h2{ font-size: 1.9rem !important; } .dears-closing-text p{ font-size: 14px; line-height: 2; text-align: left !important; } } /* ========================================================= JIN子テーマ（wp-custom-css）との競合上書き 本番HTMLでは .cps-post-main.hl-custom 配下に本文が入る。 子テーマの .hl-custom h2 / .section / .color-button02-big 等を打ち消す。 ========================================================= */ /* --- .hl-custom h2 { font-size:1.3rem } を全セクション見出しで無効化 --- */ .cps-post-main.hl-custom .dears-kodawari-title, .cps-post-main.hl-custom .dears-concern-title, .cps-post-main.hl-custom .dears-solution-title, .cps-post-main.hl-custom .promise-title, .cps-post-main.hl-custom .dears-values .section-content h2, .cps-post-main.hl-custom .voice-title, .cps-post-main.hl-custom .dmenu-title, .cps-post-main.hl-custom .dflow-title, .cps-post-main.hl-custom .dfaq-title, .cps-post-main.hl-custom .dears-cases-title, .cps-post-main.hl-custom .store-search-card h2, .cps-post-main.hl-custom > h2, .cps-post-main.hl-custom .dears-closing h2, .cps-post-main.hl-custom .dears-reservation-title{ font-size: 21px !important; font-weight: 500 !important; font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif !important; line-height: 1.5 !important; text-align: center !important; margin: 0 0 2em !important; } .cps-post-main.hl-custom .dmenu-title{ font-size: 21px !important; } .cps-post-main.hl-custom .dears-concern-title{ font-size: 21px !important; } .cps-post-main.hl-custom .dears-solution-title{ font-size: 21px !important; letter-spacing: .16em !important; color: #866255 !important; } .cps-post-main.hl-custom > h2{ margin: 0 0 24px !important; } /* --- 子テーマ .section { background:#EDE9DC; margin/padding } を打ち消し --- */ .cps-post-main .section.dears-values, .cps-post-main .section.dflow-section, .cps-post-main .section.dfaq-section, .cps-post-main .menu-section, .cps-post-main .dears-reservation-section, .cps-post-main .dears-cases-section{ margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 96px !important; padding-bottom: 96px !important; } .cps-post-main .section.dears-values{ background-color: #faf7f4 !important; background-image: linear-gradient(rgba(250,247,244,.82), rgba(250,247,244,.82)), url("https://dears-salon.com/wp-content/uploads/2026/06/1c7558976e32a6281e41ac8df8bcee94.png") !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; } .cps-post-main .dears-reservation-section{ background: #ffffff !important; } .cps-post-main .menu-section{ background: #fff !important; } .cps-post-main .dears-kodawari{ background-color: #faf7f4 !important; background-image: linear-gradient(rgba(250,247,244,.82), rgba(250,247,244,.82)), url("https://dears-salon.com/wp-content/uploads/2026/06/1c7558976e32a6281e41ac8df8bcee94.png") !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; } .cps-post-main .section.dflow-section{ background-color: #faf7f4 !important; background-image: linear-gradient(rgba(250,247,244,.82), rgba(250,247,244,.82)), url("https://dears-salon.com/wp-content/uploads/2026/06/1c7558976e32a6281e41ac8df8bcee94.png") !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; } .cps-post-main .section.dfaq-section{ background: #F8F3EE !important; } .cps-post-main .dears-closing{ background: #ffffff !important; } .cps-post-main .store-search-section{ background: #ffffff !important; margin-top: 0 !important; margin-bottom: 0 !important; } .cps-post-main .dears-reservation-section .dears-reservation-btn, .cps-post-main.hl-custom .dears-front .dears-reservation-section .dears-reservation-btn{ display: flex !important; text-decoration: none !important; color: #fff !important; font-weight: 600 !important; cursor: pointer !important; background: var(--dears-btn-gradient) !important; border: 1px solid var(--dears-btn-border) !important; border-bottom-width: 3px !important; border-bottom-color: var(--dears-btn-border-deep) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px var(--dears-btn-shadow) !important; filter: none !important; } .cps-post-main .dears-reservation-section .dears-reservation-btn:hover, .cps-post-main.hl-custom .dears-front .dears-reservation-section .dears-reservation-btn:hover{ transform: translateY(-2px) !important; background: var(--dears-btn-gradient-hover) !important; } /* --- セクションCTA・最後に：子テーマ .color-button02-big（#751a3d / width:75%）を上書き --- */ .cps-post-main .dears-section-cta .color-button02-big, .cps-post-main .dears-closing .color-button02-big{ width: 100% !important; max-width: 520px !important; margin-left: auto !important; margin-right: auto !important; } .cps-post-main .dears-section-cta .color-button02-big a, .cps-post-main .dears-section-cta .color-button02-big a:hover, .cps-post-main .dears-section-cta .color-button02-big:before, .cps-post-main .dears-closing .color-button02-big a, .cps-post-main .dears-closing .color-button02-big a:hover, .cps-post-main .dears-closing .color-button02-big:before, .cps-post-main.hl-custom .dears-front .color-button02-big a, .cps-post-main.hl-custom .dears-front .color-button02-big a:hover{ background: var(--dears-btn-gradient) !important; filter: none !important; border: 1px solid var(--dears-btn-border) !important; border-bottom-width: 3px !important; border-bottom-color: var(--dears-btn-border-deep) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px var(--dears-btn-shadow) !important; } .cps-post-main .dears-section-cta .color-button02-big a:hover, .cps-post-main .dears-closing .color-button02-big a:hover, .cps-post-main.hl-custom .dears-front .color-button02-big a:hover{ transform: translateY(-2px) !important; background: var(--dears-btn-gradient-hover) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 18px var(--dears-btn-shadow-hover) !important; } .cps-post-main .dears-section-cta .color-button02-big a, .cps-post-main .dears-closing .color-button02-big a, .cps-post-main.hl-custom .dears-front .color-button02-big a{ padding: 16px 24px !important; font-weight: 600 !important; min-height: 54px !important; } .cps-post-main .dears-section-cta .color-button02-big:hover:before, .cps-post-main .dears-closing .color-button02-big:hover:before{ box-shadow: none !important; transform: none !important; } .cps-post-main .dears-closing-text p{ line-height: var(--dears-body-line) !important; text-align: left !important; word-break: keep-all; line-break: strict; } @media (max-width: 767px){ .cps-post-main .dears-cases-section, .cps-post-main .dears-closing{ padding-top: 64px !important; padding-bottom: 64px !important; } .cps-post-main .section.dears-values, .cps-post-main .section.dflow-section, .cps-post-main .section.dfaq-section, .cps-post-main .menu-section, .cps-post-main .dears-reservation-section{ padding-top: 44px !important; padding-bottom: 44px !important; } .cps-post-main.hl-custom .dears-kodawari-title, .cps-post-main.hl-custom .promise-title, .cps-post-main.hl-custom .dears-values .section-content h2, .cps-post-main.hl-custom .voice-title, .cps-post-main.hl-custom .dflow-title, .cps-post-main.hl-custom .dfaq-title, .cps-post-main.hl-custom .dears-cases-title, .cps-post-main.hl-custom .store-search-card h2, .cps-post-main.hl-custom > h2, .cps-post-main.hl-custom .dears-closing h2, .cps-post-main.hl-custom .dears-reservation-title{ font-size: 21px !important; margin-bottom: 2em !important; } .cps-post-main.hl-custom .dmenu-title{ font-size: 21px !important; } } /* ========================================================= JINテーマ全面リセット（.dears-front ラッパー内） frontpage.html の本文を <div class="dears-front"> で囲む。 JIN / 子テーマの .cps-post-main / .hl-custom 既定を一括無害化する。 ========================================================= */ /* --- 段落・行間 --- */ .cps-post-main.hl-custom .dears-front p:not(.dears-intro-title):not(.dears-intro-text){ padding-bottom: 0 !important; margin-top: 0 !important; } /* dears-intro：上記 .dears-front 本文ルールで統一 */ .cps-post-main.hl-custom .dears-front .dears-intro .dears-intro-text:last-child{ margin-bottom: 0 !important; } /* --- 見出し：.hl-custom h2/h3/h4 の縮小・過剰余白・装飾線を無効化 --- */ .cps-post-main.hl-custom .dears-front h2:not(.dears-concern-title), .cps-post-main.hl-custom .dears-front h3, .cps-post-main.hl-custom .dears-front h4{ border: 0 !important; background: none !important; box-shadow: none !important; } .cps-post-main.hl-custom .dears-front .dears-concern-title{ display: inline-block !important; margin: 0 !important; padding: 0 0 16px !important; border: 0 !important; border-bottom: 1px solid #b8aaaa !important; font-size: clamp(1.35rem, 2.5vw, 1.65rem) !important; text-align: left !important; } .cps-post-main.hl-custom .dears-front .dears-concern-heading, .cps-post-main.hl-custom .dears-front .dears-concern-list{ text-align: left !important; } .cps-post-main.hl-custom .dears-front h3{ margin-top: 0 !important; padding-left: 0 !important; } .cps-post-main.hl-custom .dears-front h2::before, .cps-post-main.hl-custom .dears-front h3::before, .cps-post-main.hl-custom .dears-front h4::before{ display: none !important; content: none !important; background: none !important; } /* デザイン側で意図的に付けている装飾は復活させる */ .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02-title::before, .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02-title::after, .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02.open .jin-ac-box02-inner::before, .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02-inner.open::before{ display: block !important; content: "" !important; } .cps-post-main.hl-custom .dears-front .dears-kodawari-col > .dears-kodawari-h3, .cps-post-main.hl-custom .dears-front .dears-kodawari-h3{ display: table !important; width: max-content !important; max-width: 100% !important; margin: 8px auto 28px !important; text-align: center !important; background: linear-gradient(transparent 54%, rgba(243, 228, 210, 0.92) 54%) !important; -webkit-box-decoration-break: clone !important; box-decoration-break: clone !important; box-shadow: none !important; } @media (max-width: 920px){ .cps-post-main.hl-custom .dears-front .dears-kodawari-col > .dears-kodawari-h3, .cps-post-main.hl-custom .dears-front .dears-kodawari-h3{ margin: 4px auto 18px !important; } } .cps-post-main.hl-custom .dears-front .dears-kodawari-h3::before, .cps-post-main.hl-custom .dears-front .dears-kodawari-h3::after{ content: none !important; display: none !important; background: none !important; } .cps-post-main.hl-custom .dears-front .dears-value-h3{ text-align: center !important; } .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02-title::before{ content: "Q" !important; display: flex !important; } .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02.open .jin-ac-box02-inner::before, .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02-inner.open::before{ content: "A" !important; } .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02.open .jin-ac-box02-inner, .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02-inner.open{ opacity: 1 !important; visibility: visible !important; position: relative !important; transform: none !important; overflow: visible !important; max-height: none !important; } .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02.open .jin-ac-box02-inner p, .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02-inner.open p, .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02.open .jin-ac-box02-inner li, .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02-inner.open li{ display: block !important; visibility: visible !important; opacity: 1 !important; } .cps-post-main.hl-custom .dears-front .dfaq-section .jin-ac-box02:not(.open) .jin-ac-box02-inner:not(.open){ opacity: 0 !important; visibility: hidden !important; position: absolute !important; padding: 0 !important; overflow: hidden !important; } /* --- リスト：JINの行頭丸（ul/ol > li:before）を完全無効化 --- */ .cps-post-main.hl-custom .dears-front ul > li::before, .cps-post-main.hl-custom .dears-front ol > li::before{ display: none !important; content: none !important; background: none !important; background-color: transparent !important; width: 0 !important; height: 0 !important; } .cps-post-main.hl-custom .dears-front ul > li, .cps-post-main.hl-custom .dears-front ol > li{ padding-left: 0; margin-bottom: 0; } /* チェックリスト等：独自 ::before アイコンを完全復元（background-image まで明示） */ .cps-post-main.hl-custom .dears-front .dears-check li::before, .cps-post-main .dears-check li::before{ display: block !important; content: "" !important; position: absolute !important; left: 2px !important; top: 0.05em !important; width: 24px !important; height: 24px !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a93a5d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13l5.5 5.5L20.5 5.5'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; } .cps-post-main.hl-custom .dears-front .dears-concern-list li::before, .cps-post-main .dears-concern-list li::before{ display: block !important; content: "" !important; position: absolute !important; left: 2px !important; top: 0.05em !important; width: 24px !important; height: 24px !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a93a5d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13l5.5 5.5L20.5 5.5'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; } .cps-post-main.hl-custom .dears-front .dears-solution-check li::before, .cps-post-main .dears-solution-check li::before, .dears-front .dears-solution-check li::before{ display: block !important; content: "" !important; position: absolute !important; left: 2px !important; top: 0.05em !important; width: 24px !important; height: 24px !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23866255' stroke-width='1.4'/%3E%3Cpath d='M7.5 12.2l3.2 3.3L16.8 8.8' fill='none' stroke='%23866255' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; } .cps-post-main.hl-custom .dears-front .dears-solution-check li, .cps-post-main .dears-solution-check li, .dears-front .dears-solution-check li{ position: relative !important; display: block !important; padding-left: 40px !important; } .cps-post-main.hl-custom .dears-front .dears-solution-lead-points li::before, .cps-post-main .dears-solution-lead-points li::before, .dears-front .dears-solution-lead-points li::before{ display: block !important; content: "・" !important; position: absolute !important; left: 0 !important; top: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; } .cps-post-main.hl-custom .dears-front .dears-solution-lead-points li, .cps-post-main .dears-solution-lead-points li, .dears-front .dears-solution-lead-points li{ position: relative !important; display: block !important; padding: 0 0 0 1.1em !important; margin-bottom: .45em !important; } .cps-post-main.hl-custom .dears-front .dears-solution-anxiety-list li::before, .cps-post-main .dears-solution-anxiety-list li::before, .dears-front .dears-solution-anxiety-list li::before{ display: block !important; content: "・" !important; position: absolute !important; left: 0 !important; top: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; } .cps-post-main.hl-custom .dears-front .dears-solution-anxiety-list li, .cps-post-main .dears-solution-anxiety-list li, .dears-front .dears-solution-anxiety-list li{ position: relative !important; display: block !important; padding: 0 0 0 1.1em !important; margin-bottom: .45em !important; } .cps-post-main.hl-custom .dears-front .promise-text li::before, .cps-post-main .promise-text li::before{ display: block !important; content: "" !important; position: absolute !important; left: 0 !important; top: 0.2em !important; width: 18px !important; height: 18px !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a93a5d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13l5.5 5.5L20.5 5.5'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; } .cps-post-main.hl-custom .dears-front .dmenu-check li::before, .cps-post-main .dmenu-check li::before{ display: block !important; content: "" !important; position: absolute !important; left: 0 !important; top: .12em !important; width: 18px !important; height: 18px !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23d4a574' stroke-width='1.6'/%3E%3Cpath d='M7.5 12.2l2.8 2.8 6.2-6.2' stroke='%23d4a574' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; } @media (max-width: 767px){ .cps-post-main.hl-custom .dears-front .dears-check li::before, .cps-post-main .dears-check li::before{ width: 21px !important; height: 21px !important; } } /* --- リンク・画像 --- */ .cps-post-main.hl-custom .dears-front a{ text-decoration: none; } .cps-post-main.hl-custom .dears-front a:hover{ opacity: 1; } .cps-post-main.hl-custom .dears-front img{ margin-bottom: 0 !important; max-width: 100%; height: auto; border-radius: var(--dears-img-radius); } .cps-post-main.hl-custom .dears-front .dears-values-bg img, .cps-post-main.hl-custom .dears-front .dears-value-icon img, .cps-post-main.hl-custom .dears-front .voice-card img, .cps-post-main .dears-front .voice-card img, .voice-section .voice-card img{ border-radius: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: block !important; object-fit: contain !important; } /* --- テーブル：JINの gray border を dmenu 以外にも --- */ .cps-post-main.hl-custom .dears-front table{ border: 0 !important; margin-bottom: 0 !important; word-break: normal !important; } .cps-post-main.hl-custom .dears-front table th, .cps-post-main.hl-custom .dears-front table td{ border: 0 !important; } /* --- 子テーマ .section 背景 --- */ .cps-post-main.hl-custom .dears-front .section{ margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 72px !important; padding-bottom: 72px !important; } .cps-post-main.hl-custom .dears-front .simple-box6{ background: #f5efe6 !important; } /* --- ボタン：color-button02-big（最後に以外にも万一あれば） --- */ .cps-post-main.hl-custom .dears-front .color-button02-big:before{ display: none !important; } @media (max-width: 767px){ .cps-post-main.hl-custom .dears-front .dears-intro .dears-intro-title{ font-size: 1.2rem !important; line-height: var(--dears-h2-line) !important; margin-bottom: 2em !important; } .cps-post-main.hl-custom .dears-front .dears-intro .dears-intro-text{ font-size: var(--dears-body-size) !important; line-height: var(--dears-body-line) !important; } .cps-post-main.hl-custom .dears-front .dears-check li, .cps-post-main .dears-front .dears-check li{ margin-bottom: 10px !important; } .cps-post-main.hl-custom .dears-front .section, .cps-post-main.hl-custom .dears-front .dears-closing{ padding-top: 44px !important; padding-bottom: 44px !important; } } .cps-post-main.hl-custom .dears-front .menu-section p.dmenu-lead, .cps-post-main .dears-front .menu-section p.dmenu-lead{ text-align: center !important; } .cps-post-main.hl-custom .dears-front .menu-section .dmenu-lead-guide, .cps-post-main .dears-front .menu-section .dmenu-lead-guide, .cps-post-main.hl-custom .dears-front .menu-section .dmenu-lead-guide li, .cps-post-main .dears-front .menu-section .dmenu-lead-guide li{ text-align: center !important; } @media (max-width: 767px){ .voice-sub, .dears-cases-section, .dears-cases-lead, .dmenu-lead, .dmenu-lead-guide, .dmenu-lead-guide li, .cps-post-main.hl-custom .dears-front .voice-sub, .cps-post-main .dears-front .voice-sub, .cps-post-main.hl-custom .dears-front p.voice-sub, .cps-post-main .dears-front p.voice-sub, .cps-post-main.hl-custom .dears-front .dears-cases-lead, .cps-post-main .dears-front .dears-cases-lead, .cps-post-main.hl-custom .dears-front .dmenu-lead, .cps-post-main .dears-front .dmenu-lead, .cps-post-main.hl-custom .menu-section .dmenu-lead, .cps-post-main .menu-section .dmenu-lead, .cps-post-main.hl-custom .dears-front .dmenu-lead-guide, .cps-post-main .dears-front .dmenu-lead-guide, .cps-post-main.hl-custom .menu-section .dmenu-lead-guide, .cps-post-main .menu-section .dmenu-lead-guide, .cps-post-main.hl-custom .dears-front .dmenu-lead-guide li, .cps-post-main .dears-front .dmenu-lead-guide li, .cps-post-main.hl-custom .menu-section .dmenu-lead-guide li, .cps-post-main .menu-section .dmenu-lead-guide li, .cps-post-main.hl-custom .dears-front .menu-section p.dmenu-lead, .cps-post-main .dears-front .menu-section p.dmenu-lead, .cps-post-main.hl-custom .dears-front .menu-section .dmenu-lead-guide, .cps-post-main .dears-front .menu-section .dmenu-lead-guide, .cps-post-main.hl-custom .dears-front .menu-section .dmenu-lead-guide li, .cps-post-main .dears-front .menu-section .dmenu-lead-guide li, .menu-section .dmenu-lead-guide li{ text-align: left !important; } .dears-cases-lead, .dmenu-lead, .dmenu-lead-guide, .cps-post-main.hl-custom .dears-front .dears-cases-lead, .cps-post-main .dears-front .dears-cases-lead, .cps-post-main.hl-custom .dears-front .dmenu-lead, .cps-post-main .dears-front .dmenu-lead, .cps-post-main.hl-custom .menu-section .dmenu-lead, .cps-post-main .menu-section .dmenu-lead, .cps-post-main.hl-custom .dears-front .dmenu-lead-guide, .cps-post-main .dears-front .dmenu-lead-guide, .cps-post-main.hl-custom .menu-section .dmenu-lead-guide, .cps-post-main .menu-section .dmenu-lead-guide{ margin-left: 0 !important; margin-right: 0 !important; } } /* --- メニュー：PC向け最終上書き（テーマ・dears-front 有無どちらでも効く） --- */ @media (min-width: 861px){ .menu-section .dmenu-body, .cps-post-main .menu-section .dmenu-body, .cps-post-main.hl-custom .menu-section .dmenu-body{ padding-right: 0 !important; } .menu-section .dmenu-top, .cps-post-main .menu-section .dmenu-top, .cps-post-main.hl-custom .menu-section .dmenu-top{ grid-template-columns: minmax(280px, 38%) minmax(0, 1fr) !important; } .menu-section .dmenu-body .dmenu-desc, .menu-section .dmenu-body p.dmenu-desc, .cps-post-main .menu-section .dmenu-body p.dmenu-desc, .cps-post-main.hl-custom .menu-section .dmenu-body p.dmenu-desc{ font-size: 16px !important; line-height: 1.9 !important; } .menu-section .dmenu-spec th, .cps-post-main.hl-custom .menu-section .dmenu-spec th, .cps-post-main .menu-section .dmenu-spec th, .cps-post-main.hl-custom .dears-front .menu-section .dmenu-spec th, .cps-post-main .dears-front .menu-section .dmenu-spec th{ font-size: 16px !important; } } /* --- 店舗検索：スマホ向け最終上書き（.dears-front 有無どちらでも効く） --- */ @media (max-width: 767px){ .store-search-card, #dears-store-search, #dears-store-search-2, .dears-front .store-search-card, .dears-front #dears-store-search, .dears-front #dears-store-search-2, .cps-post-main .store-search-card, .cps-post-main.hl-custom .store-search-card, .cps-post-main .dears-front .store-search-card, .cps-post-main.hl-custom .dears-front .store-search-card, .cps-post-main .dears-front #dears-store-search, .cps-post-main.hl-custom .dears-front #dears-store-search, .cps-post-main .dears-front #dears-store-search-2, .cps-post-main.hl-custom .dears-front #dears-store-search-2{ margin-left: 16px !important; margin-right: 16px !important; max-width: calc(100% - 32px) !important; width: auto !important; box-sizing: border-box !important; } } /* ========================================================= 見出しサイズ（FV直下：Bパターンと同じ 1.6rem / その他 21px） ========================================================= */ .dears-front .dears-intro-title, .cps-post-main .dears-front .dears-intro .dears-intro-title, .cps-post-main.hl-custom .dears-front .dears-intro .dears-intro-title{ font-size: 1.6rem !important; } .dears-front h2, .cps-post-main .dears-front h2, .cps-post-main.hl-custom .dears-front h2, .cps-post-main.hl-custom .dears-kodawari-title, .cps-post-main.hl-custom .dears-concern-title, .cps-post-main.hl-custom .dears-solution-title, .cps-post-main.hl-custom .promise-title, .cps-post-main.hl-custom .dears-values .section-content h2, .cps-post-main.hl-custom .voice-title, .cps-post-main.hl-custom .dmenu-title, .cps-post-main.hl-custom .dflow-title, .cps-post-main.hl-custom .dfaq-title, .cps-post-main.hl-custom .dears-cases-title, .cps-post-main.hl-custom .store-search-card h2, .cps-post-main.hl-custom > h2, .cps-post-main.hl-custom .dears-closing h2, .cps-post-main.hl-custom .dears-reservation-title, .dears-kodawari-title, .promise-title, .voice-title, .dmenu-title, .dflow-title, .dfaq-title, .dears-cases-title, .dears-reservation-title, .dears-concern-title, .dears-solution-title, .store-search-card h2{ font-size: 21px !important; } @media (max-width: 767px){ .dears-front .dears-intro-title, .cps-post-main .dears-front .dears-intro .dears-intro-title, .cps-post-main.hl-custom .dears-front .dears-intro .dears-intro-title{ font-size: 1.2rem !important; } .dears-front h2, .cps-post-main .dears-front h2, .cps-post-main.hl-custom .dears-front h2, .cps-post-main.hl-custom .dmenu-title, .dmenu-title, .dflow-title{ font-size: 21px !important; } } /* --- 3つのこだわり / 5つの約束事 / 施術の流れ：h3 = 18px --- */ .dears-kodawari-h3, .cps-post-main .dears-kodawari-h3, .cps-post-main.hl-custom .dears-kodawari-h3, .cps-post-main.hl-custom .dears-front .dears-kodawari-h3, .promise-head h3, .cps-post-main .promise-head h3, .cps-post-main.hl-custom .promise-head h3, .cps-post-main.hl-custom .dears-front .promise-head h3, .dflow-h3, .cps-post-main .dflow-h3, .cps-post-main.hl-custom .dflow-h3, .cps-post-main.hl-custom .dears-front .dflow-h3{ font-size: 18px !important; } /* dears-animations.css */ /* ========================================================= ディアーズ フロントページ アニメーション ========================================================= */ @media (prefers-reduced-motion: no-preference){ /* ---- 導入タイトル：少し遅れてふわっと表示 ---- */ .dears-intro-title{ opacity: 0; transform: translateY(12px); animation: dears-intro-title-in .8s cubic-bezier(.22, 1, .36, 1) .35s forwards; } @keyframes dears-intro-title-in{ to{ opacity: 1; transform: none; } } /* ---- ホームケアプレゼント：タイトル ---- */ .dgift-head .dgift-heading-sub, .dgift-head .dgift-heading-main{ opacity: 0; transform: translateY(10px); animation: dears-intro-title-in .65s cubic-bezier(.22, 1, .36, 1) forwards; } .dgift-head .dgift-heading-sub{ animation-delay: .22s; } .dgift-head .dgift-heading-main{ animation-delay: .35s; } .dgift-ribbon{ opacity: 0; animation: dears-intro-title-in .5s ease .1s forwards; } /* ---- スクロール表示 ---- */ .dears-reveal{ opacity: 0; transform: translateY(24px); transition: opacity .45s ease, transform .45s ease; transition-delay: var(--dears-reveal-delay, 0ms); will-change: opacity, transform; } .dears-reveal.is-visible{ opacity: 1; transform: none; } /* ---- ３つのこだわり：左から順に下から上へフェードイン ---- */ .dears-kodawari-title.dears-reveal{ transform: translateY(28px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); } .dears-kodawari-col.dears-reveal{ opacity: 0; transform: translateY(40px); transition: opacity .72s cubic-bezier(.22, 1, .36, 1), transform .72s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--dears-reveal-delay, 0ms); } .dears-kodawari-col.dears-reveal.is-visible{ opacity: 1; transform: none; } /* ---- クイックナビ：ページ読み込み時 ---- */ .quick-nav-item.dears-reveal-load{ opacity: 0; transform: translateY(10px); animation: dears-nav-in .4s ease forwards; animation-delay: calc(var(--dears-reveal-delay, 0ms) + .1s); } @keyframes dears-nav-in{ to{ opacity: 1; transform: none; } } /* ---- メニュー：ゴールド枠のフェードイン ---- */ .menu-section::before{ opacity: 0; transition: opacity .6s ease .15s; } .menu-section.dears-frame-visible::before{ opacity: 1; } /* ---- フローティング診断ボタン ---- */ .floating-shindan{ animation: dears-float 4s ease-in-out infinite; } @keyframes dears-float{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } } .floating-shindan:hover{ animation: none; } /* ---- 画像ホバー ---- */ .dears-kodawari-img img, .promise-img img, .dflow-photo img, .dears-value-icon img, .case-card img{ transition: transform .45s ease; } .dears-kodawari-img:hover img, .promise-img:hover img, .dflow-photo:hover img, .dears-value-icon:hover img, .case-card:hover img{ transform: scale(1.03); } /* ---- CTAボタン ---- */ .dears-section-cta .color-button02-big a, .dears-closing .color-button02-big a{ transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease; } .dears-section-cta .color-button02-big a:hover, .dears-closing .color-button02-big a:hover, .dears-front .color-button02-big a:hover{ transform: translateY(-2px); background: var(--dears-btn-gradient-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 18px rgba(122, 30, 61, 0.28); } /* ---- FAQアコーディオン ---- */ .jin-ac-box02{ transition: box-shadow .25s ease; } .jin-ac-box02.open{ box-shadow: 0 6px 20px rgba(91,74,80,.08); } } @media (prefers-reduced-motion: reduce){ .dears-reveal{ opacity: 1; transform: none; } .dears-kodawari-col.dears-reveal{ opacity: 1; transform: none; } .dears-intro-title{ opacity: 1; transform: none; animation: none; } .dgift-ribbon, .dgift-head .dgift-heading-sub, .dgift-head .dgift-heading-main{ opacity: 1; transform: none; animation: none; } } /* satellite-top.css */ /* ========================================================= Dears サテライトサイト — トップページ ========================================================= */ :root{ --dsat-max: 760px; --dsat-pad: 20px; --dsat-header-h: 56px; } .dsat{ color: var(--dears-color-text, #333); font-family: var(--dears-font-body, "Yu Gothic", "Hiragino Sans", sans-serif); background: #fff !important; /* jin-child 固定ページではフルブリード禁止（横幅崩壊防止） */ margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 0 !important; padding-top: 0 !important; } /* ---- FV直下のテーマ余白を除去（PC/SP出し分けは維持） ---- */ .responsive-header-pc, .responsive-header-sp, #main-image, .main-image{ margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; } .responsive-header-pc img, .responsive-header-sp img, #main-image img, .main-image img{ width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; vertical-align: top !important; border-radius: 0 !important; } /* PC既定：SP非表示 */ .responsive-header-sp{ display: none !important; } .responsive-header-pc{ display: block !important; } .responsive-header-pc img{ display: block !important; } @media (max-width: 767px){ .responsive-header-pc{ display: none !important; } .responsive-header-sp{ display: block !important; } .responsive-header-sp img{ display: block !important; } } #main-image img, .main-image img{ display: block !important; } #main-image + .clearfix, .main-image + .clearfix, .responsive-header-pc + .clearfix, .responsive-header-sp + .clearfix{ display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } .cps-post-box:has(.dsat), .cps-post-box:has(.dears-front), .cps-post-box:has(.dsat) .cps-post, .cps-post-box:has(.dears-front) .cps-post, .cps-post-box:has(.dsat) .cps-post-main-box, .cps-post-box:has(.dears-front) .cps-post-main-box, .cps-post-main:has(.dsat), .cps-post-main:has(.dears-front), .cps-post-main.hl-custom:has(.dsat), .cps-post-main.hl-custom:has(.dears-front), #contents:has(.dsat), #contents:has(.dears-front), #onecolumn:has(.dsat) #contents, #onecolumn:has(.dears-front) #contents{ margin-top: 0 !important; padding-top: 0 !important; } .dsat img{ max-width: 100%; height: auto; display: block; } /* ---- Header ---- */ .dsat-header{ position: sticky; top: 0; z-index: 100; height: var(--dsat-header-h); background: rgba(255,255,255,.96); border-bottom: 1px solid #e8ddd0; backdrop-filter: blur(8px); } .dsat-header-inner{ max-width: var(--dsat-max); margin: 0 auto; padding: 0 var(--dsat-pad); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .dsat-logo{ display: inline-flex; align-items: center; text-decoration: none; color: #7A1E3D; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: 1.15rem; font-weight: 600; letter-spacing: .12em; } .dsat-logo img{ height: 28px; width: auto; } .dsat-header-link{ display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 4px; background: #7A1E3D; color: #fff !important; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; } .dsat-header-link:hover{ background: #853049; } /* ---- Hero (full-bleed) ---- */ .dsat-hero{ position: relative; width: 100%; min-height: min(78vh, 640px); display: grid; place-items: end stretch; overflow: hidden; background: #2a1a1e; } .dsat-hero-media{ position: absolute; inset: 0; } .dsat-hero-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .dsat-hero-shade{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,12,18,.18) 0%, rgba(30,12,18,.15) 40%, rgba(30,12,18,.72) 100%); pointer-events: none; } .dsat-hero-copy{ position: relative; z-index: 1; max-width: var(--dsat-max); width: 100%; margin: 0 auto; padding: 28px var(--dsat-pad) 36px; color: #fff; } .dsat-hero-brand{ margin: 0 0 8px; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: clamp(1.75rem, 6.5vw, 2.35rem); font-weight: 600; letter-spacing: .08em; line-height: 1.35; text-shadow: 0 2px 18px rgba(0,0,0,.35); } .dsat-hero-lead{ margin: 0; font-size: 14px; line-height: 1.7; letter-spacing: .04em; color: rgba(255,255,255,.92); max-width: 28em; } /* ---- Section shell ---- */ .dsat-section{ padding: 48px 0; } .dsat-section--cream{ background: #fbf8f0; } .dsat-inner{ max-width: var(--dsat-max); margin: 0 auto; padding: 0 var(--dsat-pad); } .dsat-section-title{ margin: 0 0 18px; text-align: center; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: clamp(1.25rem, 4.2vw, 1.5rem); font-weight: 600; letter-spacing: .08em; line-height: 1.5; color: #333; } .dsat-section-lead{ margin: 0 auto 22px; max-width: 36em; text-align: center; font-size: 15px; line-height: 1.85; color: #5e4137; } /* ---- CTA ---- */ .dsat-cta{ padding: 8px 0 0; text-align: center; } .dsat-cta-wrap{ margin-left: 0; margin-right: 0; padding: 28px var(--dsat-pad); background: #fff !important; background-color: #fff !important; } .cps-post-main .dsat-cta-wrap, .cps-post-main.hl-custom .dsat-cta-wrap, .cps-post-main .dsat .dsat-cta-wrap, .cps-post-main.hl-custom .dsat .dsat-cta-wrap{ margin-left: 0 !important; margin-right: 0 !important; background: #fff !important; background-color: #fff !important; } /* FV直下のホームケア写真 ※ dears-sections の .dears-front .dgift-section{padding-top:0} より詳細度を上げる */ .dsat.dears-front > .dgift-section, .cps-post-main .dsat.dears-front > .dgift-section, .cps-post-main.hl-custom .dsat.dears-front > .dgift-section{ padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; background: #fff !important; } .dsat.dears-front > .dgift-section .dgift-banner, .cps-post-main .dsat.dears-front > .dgift-section .dgift-banner, .cps-post-main.hl-custom .dsat.dears-front > .dgift-section .dgift-banner{ max-width: var(--dears-content-width, 760px); } .dsat-cta-wrap--top{ padding-top: 28px !important; padding-bottom: 36px; } .dsat-cta-wrap--top .dsat-cta, .dsat-cta-wrap--top .dears-section-cta{ margin-top: 0 !important; padding-top: 0 !important; } .dsat-cta-wrap--menu{ padding-top: 0 !important; padding-bottom: 48px !important; } .dsat-cta-wrap--menu .dsat-cta, .dsat-cta-wrap--menu .dears-section-cta{ margin-top: 0 !important; padding-top: 0 !important; } .dsat-cta-wrap--menu .dsat-cta-note--ornament{ margin-top: 0 !important; margin-bottom: 20px !important; } .dsat .menu-section{ padding-bottom: 24px !important; } .dsat-cta-wrap--top .dsat-cta-note--ornament{ margin-top: 0; margin-bottom: 16px; } .dsat-sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* サテライトでは悩み訴求画像を出さない */ .dsat .dears-concern-visual{ display: none !important; } .dsat-cta .color-button02-big, .dsat .dears-section-cta .color-button02-big{ display: block; margin: 0 auto; max-width: 340px; } .dsat-cta .color-button02-big a, .dsat .dears-section-cta .color-button02-big a{ display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 22px; border-radius: 4px; background: #7A1E3D !important; color: #fff !important; text-decoration: none !important; font-size: 16px; font-weight: 600; letter-spacing: .06em; box-shadow: 0 6px 16px rgba(122,30,61,.22); } .dsat-cta .color-button02-big a:hover, .dsat .dears-section-cta .color-button02-big a:hover{ background: #853049 !important; } .dsat-cta-note{ margin: 0 0 10px; text-align: center; font-size: 12px; color: #8a7a7e; letter-spacing: .04em; } .dsat-cta .dsat-cta-note--ornament{ margin-top: 0; margin-bottom: 16px; } .dsat-cta-note--ornament{ display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 16px; max-width: 360px; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: 13px; font-weight: 500; letter-spacing: .1em; color: #866255; line-height: 1.5; } .dsat-cta-note--ornament::before, .dsat-cta-note--ornament::after{ content: ""; flex: 1 1 48px; max-width: 64px; height: 1px; background: linear-gradient(90deg, transparent, #c8bbb2 18%, #c8bbb2 82%, transparent); } .dsat-cta-note--ornament span{ flex: 0 0 auto; position: relative; padding: 0 2px; } /* ---- Problem (wireframe: うねり・広がり・ダメージ・朝の手間) ---- */ .dsat-problem-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; } .dsat-problem-grid li{ margin: 0; padding: 18px 12px; background: #fff; border: 1px solid #e8ddd0; border-radius: 12px; text-align: center; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: 15px; font-weight: 600; letter-spacing: .08em; color: #7A1E3D; line-height: 1.45; } .dsat-problem-body{ font-size: 15px; line-height: 1.9; color: #333; } .dsat-problem-body p{ margin: 0 0 1em; } .dsat-problem-body p:last-child{ margin-bottom: 0; } /* ---- Solution tweaks inside satellite ---- */ .dsat .dears-solution-section, .dsat .dears-concern-section{ padding-left: 0; padding-right: 0; } .dsat .dears-solution-inner, .dsat .dears-concern-inner, .dsat .dears-cases-inner, .dsat .voice-inner, .dsat .dfaq-section .section-content{ max-width: var(--dsat-max); margin-left: auto; margin-right: auto; padding-left: var(--dsat-pad); padding-right: var(--dsat-pad); } /* ---- Cases / voice / FAQ spacing ---- */ .dsat .dears-cases-section, .dsat .voice-section, .dsat .dfaq-section{ margin: 0; } .dsat .voice-section{ background: #fbf8f0; } .dsat .dfaq-section{ background: #fff; padding-top: 48px; padding-bottom: 24px; } .dsat .dfaq-title{ text-align: center; } /* ---- Footer ---- */ .dsat-footer{ padding: 36px var(--dsat-pad) 48px; background: #2a1a1e; color: rgba(255,255,255,.82); text-align: center; } .dsat-footer-inner{ max-width: var(--dsat-max); margin: 0 auto; } .dsat-footer-brand{ margin: 0 0 14px; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: 1.05rem; letter-spacing: .14em; color: #fff; } .dsat-footer-nav{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0 0 16px; padding: 0; list-style: none; } .dsat-footer-nav a{ color: rgba(255,255,255,.78); text-decoration: none; font-size: 12px; letter-spacing: .04em; } .dsat-footer-nav a:hover{ color: #fff; } .dsat-footer-copy{ margin: 0; font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .04em; } /* ---- Menu carousel ---- */ .menu-section .dmenu-carousel{ position: relative; max-width: 920px; margin: 32px auto 0; padding: 0 48px 12px; } .menu-section .dmenu-carousel-viewport{ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; container-type: inline-size; } .menu-section .dmenu-carousel-viewport::-webkit-scrollbar{ display: none; } .menu-section .dmenu-carousel-track{ display: flex; gap: 24px; padding: 52px 12px 16px; width: max-content; box-sizing: border-box; } .menu-section .dmenu-carousel-track .dmenu-feature{ box-sizing: border-box; flex: 0 0 calc(100cqi - 24px); width: calc(100cqi - 24px); max-width: calc(100cqi - 24px); min-width: 0; margin-bottom: 0; overflow: visible; scroll-snap-align: center; scroll-snap-stop: always; } .menu-section .dmenu-carousel-track .dmenu-top, .menu-section .dmenu-carousel-track .dmenu-body, .menu-section .dmenu-carousel-track .dmenu-spec, .menu-section .dmenu-carousel-track .dmenu-spec table{ max-width: 100%; } .menu-section .dmenu-carousel-arrow{ position: absolute; top: calc(50% + 20px); transform: translateY(-50%); width: 42px; height: 42px; border: 1px solid #ece3da; border-radius: 50%; background: rgba(255,255,255,.92); color: #7A1E3D; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; box-shadow: 0 8px 20px rgba(91,74,80,.12); transition: opacity .2s ease, transform .2s ease; } .menu-section .dmenu-carousel-arrow:hover:not(:disabled){ transform: translateY(-50%) scale(1.04); } .menu-section .dmenu-carousel-arrow:disabled{ opacity: .3; cursor: default; pointer-events: none; } .menu-section .dmenu-carousel-prev{ left: 0; } .menu-section .dmenu-carousel-next{ right: 0; } @media (max-width: 860px){ .menu-section .dmenu-carousel{ padding: 0 36px 8px; } .menu-section .dmenu-carousel-track{ gap: 16px; padding: 44px 8px 12px; } .menu-section .dmenu-carousel-track .dmenu-feature{ flex: 0 0 calc(100cqi - 16px); width: calc(100cqi - 16px); max-width: calc(100cqi - 16px); } .menu-section .dmenu-carousel-arrow{ width: 36px; height: 36px; font-size: 22px; } } @media (min-width: 768px){ :root{ --dsat-header-h: 64px; } .dsat-hero{ min-height: min(72vh, 700px); } .dsat-section{ padding: 64px 0; } .dsat-problem-grid{ grid-template-columns: repeat(4, 1fr); gap: 12px; } .dsat-logo{ font-size: 1.25rem; } .dsat-logo img{ height: 32px; } } /* stores/.../satellite-top.css */ /* ========================================================= Dears サテライトサイト — 盛岡（店舗詳細 統合）追加スタイル ※ satellite-top.css を前提に、盛岡固有の要素のみ定義 ========================================================= */ /* ---- Anchor scroll (CTA -> 店舗情報) ---- */ /* ---- Anchor scroll (CTA -> 店舗情報) ---- */ html{ scroll-behavior: smooth; } #dears-shop, .dsat-shop-unit{ scroll-margin-top: 16px; } /* ---- Shop section shell（WP全文幅＋中央寄せ） ---- */ .dsat-shop-section{ padding: 56px 0 48px; margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; box-sizing: border-box; } .cps-post-main .dsat-shop-section, .cps-post-main.hl-custom .dsat-shop-section, .cps-post-main .dsat .dsat-shop-section, .cps-post-main.hl-custom .dsat .dsat-shop-section{ margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .dsat-shop-section .dsat-inner{ max-width: var(--dsat-max, 760px); width: 100%; margin-left: auto !important; margin-right: auto !important; padding-left: var(--dsat-pad, 20px); padding-right: var(--dsat-pad, 20px); box-sizing: border-box; } /* WP wpautop が挿入する <br>/<p> でレイアウトが壊れないようにする （住所セル内の改行 br は維持） */ .dsat-shop-picker br, .dsat-line-flow br, .dsat-line-flow-step br, .dsat-shop-gallery br, .dsat-shop-facility br, .dsat-shop-reserve-sub br, .dsat-shop-reserve-primary br, .dsat-shop-map br, .dsat-shop-block > br, .dsat-shop-unit > br, .dsat-shop-section .dsat-inner > br{ display: none !important; } .dsat-shop-section .dsat-inner > p:empty, .dsat-shop-unit > p:empty{ display: none !important; } .cps-post-main .dsat-shop-section p, .cps-post-main.hl-custom .dsat-shop-section p{ padding-bottom: 0 !important; } .dsat-shop-kicker{ margin: 0 0 6px !important; text-align: center; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: 12px; letter-spacing: .22em; color: #a98a7a; } .dsat-shop-section .dsat-section-title, .cps-post-main .dsat-shop-section .dsat-section-title, .cps-post-main.hl-custom .dsat-shop-section .dsat-section-title{ margin: 0 0 6px !important; padding: 0 !important; } .dsat-shop-name{ margin: 0 0 12px !important; text-align: center; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: clamp(1.15rem, 4.5vw, 1.45rem); font-weight: 600; letter-spacing: .08em; color: #7A1E3D; } .dsat-shop-area-lead{ margin: 0 0 18px; text-align: center; font-size: 14px; line-height: 1.8; color: #5a4a40; } /* ---- Multi-store picker ---- */ .dsat-shop-picker{ display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 32px; width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; } .dsat-shop-picker-btn, a.dsat-shop-picker-btn, .cps-post-main a.dsat-shop-picker-btn, .cps-post-main.hl-custom a.dsat-shop-picker-btn{ display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 12px 10px; border: 1px solid #e2d5c6; border-radius: 10px; background: #fff !important; color: #7A1E3D !important; text-decoration: none !important; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: 15px; font-weight: 600; letter-spacing: .06em; box-shadow: 0 2px 8px rgba(122, 30, 61, .04); box-sizing: border-box; } .dsat-shop-picker-btn:hover, a.dsat-shop-picker-btn:hover, .cps-post-main a.dsat-shop-picker-btn:hover{ border-color: #c39a6b; background: #fffaf5 !important; color: #7A1E3D !important; text-decoration: none !important; } .dsat-shop-picker-sub{ font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .08em; color: #9a7f6c; } /* ---- Per-store unit ---- */ .dsat-shop-unit{ display: block; margin: 0 0 28px; padding: 22px 16px 18px; border: 1px solid #ece1d3; border-radius: 14px; background: rgba(255,255,255,.55); box-sizing: border-box; } .dsat-shop-unit:last-child{ margin-bottom: 0; } .dsat-shop-unit-title, .cps-post-main .dsat-shop-unit-title, .cps-post-main.hl-custom .dsat-shop-unit-title{ margin: 0 0 2px !important; padding: 0 !important; text-align: center; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: clamp(1.1rem, 4vw, 1.35rem); font-weight: 600; letter-spacing: .08em; color: #7A1E3D; } .dsat-shop-unit-meta, .cps-post-main .dsat-shop-unit-meta, .cps-post-main.hl-custom .dsat-shop-unit-meta{ margin: 0 0 12px !important; padding: 0 !important; text-align: center; font-size: 12px; letter-spacing: .1em; color: #9a7f6c; } .dsat-shop-block--shared{ margin-bottom: 28px; padding-top: 4px; } /* ---- Blocks ---- */ .dsat-shop-block{ margin: 0 0 30px; } .dsat-shop-block:last-child{ margin-bottom: 0; } .dsat-shop-subtitle, .cps-post-main .dsat-shop-section .dsat-shop-subtitle, .cps-post-main.hl-custom .dsat-shop-section .dsat-shop-subtitle{ margin: 0 0 8px !important; padding: 0 0 6px !important; border-bottom: 1px solid #e2d5c6; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: 1.05rem; font-weight: 600; letter-spacing: .06em; color: #4a3b33; } /* ---- Basic info table（WP/テーマの table→block 化を打ち消す） ---- */ .dsat-shop-table, .cps-post-main .dsat-shop-table, .cps-post-main.hl-custom .dsat-shop-table{ display: table !important; width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; table-layout: auto !important; font-size: 14px; line-height: 1.7; background: #fff; border: 1px solid #ece1d3; border-radius: 10px; overflow: hidden; margin: 0 !important; } .dsat-shop-table tbody, .cps-post-main .dsat-shop-table tbody{ display: table-row-group !important; } .dsat-shop-table tr, .cps-post-main .dsat-shop-table tr{ display: table-row !important; } .dsat-shop-table th, .dsat-shop-table td, .cps-post-main .dsat-shop-table th, .cps-post-main .dsat-shop-table td, .cps-post-main.hl-custom .dsat-shop-table th, .cps-post-main.hl-custom .dsat-shop-table td{ display: table-cell !important; float: none !important; width: auto !important; text-align: left !important; vertical-align: top !important; border-bottom: 1px solid #f0e7db !important; box-sizing: border-box !important; } .dsat-shop-table tr:last-child th, .dsat-shop-table tr:last-child td{ border-bottom: 0 !important; } .dsat-shop-table th, .cps-post-main .dsat-shop-table th, .cps-post-main.hl-custom .dsat-shop-table th{ width: 8em !important; min-width: 8em !important; max-width: none !important; padding: 12px 14px 12px 20px !important; background: #f8f2e9 !important; color: #6b5647 !important; font-weight: 600; letter-spacing: .04em; white-space: nowrap; } .dsat-shop-table td, .cps-post-main .dsat-shop-table td, .cps-post-main.hl-custom .dsat-shop-table td{ width: auto !important; padding: 12px 20px 12px 16px !important; color: #333 !important; } .dsat-shop-table p, .cps-post-main .dsat-shop-table p{ margin: 0 !important; padding: 0 !important; } .dsat-shop-table a{ color: #7A1E3D; text-decoration: none; } .dsat-shop-table a:hover{ text-decoration: underline; } /* ---- Access ---- */ .dsat-shop-access-text{ margin: 0 0 14px; font-size: 14px; line-height: 1.85; color: #333; } .dsat-shop-map{ position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #ece1d3; } .dsat-shop-map iframe{ display: block; width: 100%; height: 260px; border: 0; } .dsat-shop-map-placeholder{ display: grid; place-items: center; height: 200px; background: repeating-linear-gradient(45deg, #f3ece2, #f3ece2 12px, #efe6d9 12px, #efe6d9 24px); color: #b09a86; font-size: 13px; letter-spacing: .08em; } /* ---- Gallery（常に3枠基準のサイズ。2枚でも1枚幅は同じ） ---- */ .dsat-shop-gallery, .cps-post-main .dsat-shop-gallery{ display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; width: 100%; box-sizing: border-box; } .dsat-shop-gallery--lead{ margin: 0 0 20px; } .dsat-shop-picker--quad{ max-width: 640px; } .dsat-shop-picker--quad .dsat-shop-picker-btn{ font-size: 14px; min-height: 52px; padding: 10px 8px; } .dsat-shop-photo, .cps-post-main .dsat-shop-photo, figure.dsat-shop-photo{ position: relative !important; margin: 0 !important; padding: 0 !important; border-radius: 8px; overflow: hidden !important; background: #f3ece2; aspect-ratio: 1 / 1 !important; width: 100% !important; box-sizing: border-box !important; } .dsat-shop-photo img, .cps-post-main .dsat-shop-photo img, .cps-post-main.hl-custom .dsat-shop-photo img, figure.dsat-shop-photo img{ position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; border-radius: 0 !important; } .dsat-shop-facility{ margin: 0; padding: 0; list-style: none; } .dsat-shop-facility li{ position: relative; padding: 4px 0 4px 18px; font-size: 14px; line-height: 1.7; color: #333; } .dsat-shop-facility li::before{ content: ""; position: absolute; left: 2px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: #c39a6b; } /* ---- Reserve ---- */ .dsat-shop-reserve-lead{ margin: 0 0 14px !important; padding: 0 !important; font-size: 14px; line-height: 1.85; color: #333; } .dsat-shop-reserve-primary{ margin: 0 0 16px; text-align: center; } .dsat-shop-reserve-line{ display: flex; align-items: center; justify-content: center; max-width: 340px; min-height: 54px; margin: 0 auto; padding: 14px 22px; border-radius: 4px; background: #06C755; color: #fff !important; text-decoration: none !important; font-size: 16px; font-weight: 600; letter-spacing: .06em; box-shadow: 0 6px 16px rgba(6,199,85,.24); } .dsat-shop-reserve-line:hover{ background: #05b34c; } .dsat-shop-reserve-sub{ margin: 0; padding: 0; list-style: none; border-top: 1px solid #ece1d3; } .dsat-shop-reserve-sub li{ display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid #ece1d3; font-size: 14px; } .dsat-shop-reserve-label{ flex: 0 0 4.5em; color: #6b5647; font-weight: 600; letter-spacing: .04em; } .dsat-shop-reserve-sub a{ color: #7A1E3D; text-decoration: none; } .dsat-shop-reserve-sub a:hover{ text-decoration: underline; } /* ---- CTA wrap for shop ---- */ .dsat-cta-wrap--shop{ padding-top: 24px; padding-bottom: 8px; } @media (max-width: 767px){ .dsat-shop-section{ padding: 48px 0 32px; } .dsat-shop-section .dsat-inner{ padding-left: 16px; padding-right: 16px; } .dsat-shop-section .dsat-section-title, .cps-post-main .dsat-shop-section .dsat-section-title{ margin: 0 0 4px !important; } .dsat-shop-name{ margin: 0 0 10px !important; font-size: 1.2rem; } .dsat-shop-area-lead{ margin: 0 0 14px; font-size: 13px; line-height: 1.7; } .dsat-shop-picker{ gap: 8px; margin: 0 0 28px; } .dsat-shop-picker-btn, a.dsat-shop-picker-btn{ min-height: 48px; padding: 10px 8px; font-size: 14px; } .dsat-shop-block--shared{ margin-bottom: 20px; padding-top: 2px; } .dsat-shop-unit{ margin: 0 0 18px; padding: 18px 16px 16px; border-radius: 12px; } .dsat-shop-unit-title, .cps-post-main .dsat-shop-unit-title{ margin: 0 0 1px !important; font-size: 1.05rem; } .dsat-shop-unit-meta, .cps-post-main .dsat-shop-unit-meta{ margin: 0 0 8px !important; } .dsat-shop-block{ margin: 0 0 18px; } .dsat-shop-subtitle, .cps-post-main .dsat-shop-section .dsat-shop-subtitle{ margin: 0 0 6px !important; padding: 0 0 5px !important; font-size: .98rem; } .dsat-shop-gallery, .cps-post-main .dsat-shop-gallery{ gap: 6px; margin: 0 0 12px; } .dsat-shop-gallery--lead{ margin: 0 0 12px; } .dsat-shop-table th, .dsat-shop-table td, .cps-post-main .dsat-shop-table th, .cps-post-main .dsat-shop-table td{ font-size: 13px; line-height: 1.65; } .dsat-shop-table th, .cps-post-main .dsat-shop-table th, .cps-post-main.hl-custom .dsat-shop-table th{ width: 7.8em !important; min-width: 7.8em !important; max-width: none !important; padding: 12px 14px 12px 22px !important; } .dsat-shop-table td, .cps-post-main .dsat-shop-table td, .cps-post-main.hl-custom .dsat-shop-table td{ padding: 12px 16px 12px 14px !important; } .dsat-shop-access-text{ margin: 0 0 10px; font-size: 13px; line-height: 1.75; } .dsat-shop-map iframe{ height: 220px; } .dsat-shop-reserve-lead{ margin: 0 0 12px; font-size: 13px; line-height: 1.75; } .dsat-shop-reserve-primary{ margin: 0 0 12px; } .dsat-shop-reserve-line{ max-width: none; min-height: 48px; padding: 12px 16px; font-size: 15px; } .dsat-shop-reserve-sub li{ gap: 10px; padding: 10px 2px; font-size: 13px; } .dsat-shop-reserve-label{ flex: 0 0 3.8em; } .dsat-shop-facility li{ padding: 3px 0 3px 16px; font-size: 13px; line-height: 1.65; } .dsat--b .dsat-line-flow{ gap: 10px; margin: 0 0 14px; } .dsat--b .dsat-line-flow-step{ padding: 12px 12px; } .dsat--b .dsat-line-flow-heading{ margin: 0 0 10px; font-size: 14px; } } @media (min-width: 768px){ .dsat-shop-section{ padding: 72px 0 64px; } .dsat-shop-map iframe{ height: 320px; } .dsat-shop-unit{ padding: 28px 24px 22px; } .dsat-shop-picker{ gap: 14px; max-width: 520px; margin-left: auto; margin-right: auto; } .dsat-shop-table th, .cps-post-main .dsat-shop-table th, .cps-post-main.hl-custom .dsat-shop-table th{ width: 8.5em !important; min-width: 8.5em !important; max-width: none !important; padding: 14px 16px 14px 24px !important; } .dsat-shop-table td, .cps-post-main .dsat-shop-table td, .cps-post-main.hl-custom .dsat-shop-table td{ padding: 14px 24px 14px 18px !important; } } /* ========================================================= UX改善（盛岡専用・.dsat--b にスコープ） ========================================================= */ /* 下部固定バーに隠れないよう余白を確保 */ .dsat--b{ padding-bottom: 76px; } /* ---- 優先度1: CTAラベルの下向き矢印（ページ内スクロールを明示） ---- */ .dsat--b .dsat-cta-arrow{ display: inline-block; margin-left: .5em; animation: dsatb-nudge 1.6s ease-in-out infinite; } @keyframes dsatb-nudge{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(3px); } } @media (prefers-reduced-motion: reduce){ .dsat--b .dsat-cta-arrow{ animation: none; } } /* ---- 優先度1: 常時表示の予約バー（sticky CTA） ---- */ .dsat-stickybar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); border-top: 1px solid #ece1d3; backdrop-filter: blur(8px); box-shadow: 0 -6px 20px rgba(91,74,80,.10); transform: translateY(120%); transition: transform .28s ease; pointer-events: none; } .dsat-stickybar.is-visible{ transform: translateY(0); pointer-events: auto; } .dsat-stickybar-btn{ display: flex; align-items: center; justify-content: center; max-width: 480px; min-height: 52px; margin: 0 auto; padding: 12px 20px; border-radius: 6px; background: #7A1E3D; color: #fff !important; text-decoration: none !important; font-size: 16px; font-weight: 600; letter-spacing: .06em; box-shadow: 0 6px 16px rgba(122,30,61,.22); } .dsat-stickybar-btn:hover{ background: #853049; } /* ---- 優先度3: カルーセル位置インジケーター ---- */ .dsat-carousel-counter{ margin: 12px auto 0; text-align: center; font-size: 12px; letter-spacing: .12em; color: #8a7a7e; font-variant-numeric: tabular-nums; } .dsat-carousel-counter b{ color: #7A1E3D; font-weight: 700; } /* ---- 優先度4: FAQ を ＋／− アイコンに（開閉が一目で分かる） ---- */ .dsat--b .dfaq-section .jin-ac-box02-title{ cursor: pointer; } .dsat--b .dfaq-section .jin-ac-box02-title:focus-visible{ outline: 2px solid #7A1E3D; outline-offset: 2px; } .dsat--b .dfaq-section .jin-ac-box02-title::after{ content: ""; right: 22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 0; transform: none; background: linear-gradient(#7A1E3D, #7A1E3D) center / 16px 2px no-repeat, linear-gradient(#7A1E3D, #7A1E3D) center / 2px 16px no-repeat; transition: opacity .2s ease; } .dsat--b .dfaq-section .jin-ac-box02.open .jin-ac-box02-title::after{ transform: none; background: linear-gradient(#7A1E3D, #7A1E3D) center / 16px 2px no-repeat; } /* ---- 優先度5: 施術事例タブをセグメント風に（選択が明確） ---- */ .dsat--b .case-tabs .tab-btn[aria-selected="true"], .dsat--b .case-tabs .tab-btn.active{ box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(122,30,61,.28); } .dsat--b .case-tabs .tab-btn:not(.active){ background: #fff; } /* ---- 優先度5: 解決策の「＋」を丸囲みで組み合わせを明示 ---- */ .dsat--b .dears-solution-x{ display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; margin: -20px 0 0; border-radius: 50%; background: #c39a6b; color: #fff; font-size: 1.5rem; font-weight: 400; line-height: 1; } @media (max-width: 767px){ .dsat--b .dears-solution-x{ margin: -8px 0; } } /* ---- LINE予約のカンタン3ステップ ---- */ .dsat--b .dsat-line-flow-heading{ margin: 0 0 10px !important; padding: 0 !important; text-align: center; font-family: var(--dears-font-heading, "Shippori Mincho", serif); font-size: 15px; font-weight: 600; letter-spacing: .06em; color: #4a3b33; } .dsat--b .dsat-line-flow{ display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: none; } .dsat--b .dsat-line-flow-step{ position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; padding: 14px 16px; background: #fff; border: 1px solid #ece1d3; border-radius: 12px; } .dsat--b .dsat-line-flow-num{ grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #06C755; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; } .dsat--b .dsat-line-flow-icon{ position: absolute; top: 12px; right: 14px; width: 22px; height: 22px; color: #06C755; opacity: .9; } .dsat--b .dsat-line-flow-icon svg{ width: 100%; height: 100%; display: block; } .dsat--b .dsat-line-flow-label{ grid-column: 2; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #333; line-height: 1.5; } .dsat--b .dsat-line-flow-desc{ grid-column: 2; font-size: 12px; color: #8a7a7e; line-height: 1.5; } /* ステップ間の矢印：スマホ（縦並び）では非表示、横並び時のみ表示 */ .dsat--b .dsat-line-flow-step:not(:last-child)::after{ content: none; display: none; } @media (min-width: 700px){ .dsat--b .dsat-line-flow{ grid-template-columns: repeat(3, 1fr); gap: 20px; } .dsat--b .dsat-line-flow-step{ grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; text-align: center; padding: 22px 16px 18px; gap: 6px; } .dsat--b .dsat-line-flow-num{ grid-row: auto; margin-bottom: 4px; } .dsat--b .dsat-line-flow-icon{ position: static; width: 26px; height: 26px; margin-bottom: 2px; } .dsat--b .dsat-line-flow-label, .dsat--b .dsat-line-flow-desc{ grid-column: auto; } /* 横並び時は右向き矢印 */ .dsat--b .dsat-line-flow-step:not(:last-child)::after{ content: ""; display: block; position: absolute; left: auto; right: -14px; top: 50%; bottom: auto; width: 8px; height: 8px; border-right: 2px solid #c8d8cb; border-bottom: 2px solid #c8d8cb; transform: translateY(-50%) rotate(-45deg); z-index: 1; } } /* ---- LINE flow: WP挿入brでも崩れないよう明示 ---- */ .dsat--b .dsat-line-flow{ display: grid !important; width: 100%; box-sizing: border-box; } .dsat--b .dsat-line-flow-step{ display: grid !important; box-sizing: border-box; } /* ========================================================= jin-child 固定ページ耐性（青森） - 100vw / calc(50% - 50vw) の入れ子フルブリードが #contents 内で横幅崩壊（細い縦帯）を起こすため無効化 - wpautop の br/p でグリッドが壊れないようにする ========================================================= */ .dsat.dears-front, .cps-post-main .dsat.dears-front, .cps-post-main.hl-custom .dsat.dears-front, .cps-post-box .dsat.dears-front{ margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: clip; background: #ffffff !important; color: #333333 !important; } .dsat.dears-front .dgift-section, .dsat.dears-front .dsat-cta-wrap, .dsat.dears-front .dears-intro, .dsat.dears-front .dears-concern-section, .dsat.dears-front .dears-solution-section, .dsat.dears-front .dears-kodawari, .dsat.dears-front .promise-section, .dsat.dears-front .voice-section, .dsat.dears-front .menu-section, .dsat.dears-front .store-search-section, .dsat.dears-front .dears-reservation-section, .dsat.dears-front .dears-cases-section, .dsat.dears-front .dears-closing, .dsat.dears-front .dsat-shop-section, .dsat.dears-front .dfaq-section, .dsat.dears-front .dflow-section, .dsat.dears-front .dears-values, .cps-post-main .dsat .dsat-cta-wrap, .cps-post-main .dsat .dsat-shop-section, .cps-post-main.hl-custom .dsat .dsat-cta-wrap, .cps-post-main.hl-custom .dsat .dsat-shop-section{ margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* 店舗セクションの 100vw 指定を打ち消し */ .dsat-shop-section, .cps-post-main .dsat-shop-section, .cps-post-main.hl-custom .dsat-shop-section, .cps-post-main .dsat .dsat-shop-section, .cps-post-main.hl-custom .dsat .dsat-shop-section{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* 本文カラム内の中央寄せは維持 */ .dsat.dears-front .dsat-inner, .dsat.dears-front .dgift-banner, .dsat.dears-front .dears-concern-inner, .dsat.dears-front .dears-solution-inner, .dsat.dears-front .dears-closing-inner{ max-width: var(--dears-content-width, var(--dsat-max, 760px)); width: 100%; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } /* wpautop が .dsat 全体に差し込む br を無効化（住所セル内は除外） */ .dsat.dears-front > br, .dsat.dears-front > p:empty, .dsat.dears-front section > br, .dsat.dears-front .dears-concern-list > br, .dsat.dears-front .dears-solution-duo > br, .dsat.dears-front .dears-solution-lead > br, .dsat.dears-front .case-tabs > br, .dsat.dears-front .case-grid > br, .dsat.dears-front .dmenu-carousel > br, .dsat.dears-front .voice-track > br, .dsat.dears-front .jin-ac-box02 > br, .dsat.dears-front .dsat-cta > br, .dsat.dears-front .color-button02-big > br{ display: none !important; } /* グローバル svg fill 打ち消しは .dsat 内に限定（テーマアイコンを壊さない） */ .dsat svg, .dears-front svg{ fill: none !important; }

/* ホットペッパー画像導線（店舗ファイル内・common-01非依存） */ .dsat-shop-reserve-primary{ display: grid !important; gap: 12px; margin: 0 0 16px; text-align: center; } .dsat-shop-reserve-hotpepper, a.dsat-shop-reserve-hotpepper, .cps-post-main a.dsat-shop-reserve-hotpepper, .cps-post-main.hl-custom a.dsat-shop-reserve-hotpepper{ display: block !important; max-width: 300px; width: 100%; margin: 0 auto; padding: 0 !important; min-height: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; line-height: 0; color: transparent !important; text-decoration: none !important; box-sizing: border-box; } .dsat-shop-reserve-hotpepper:hover, a.dsat-shop-reserve-hotpepper:hover, .cps-post-main a.dsat-shop-reserve-hotpepper:hover{ opacity: .92; background: transparent !important; text-decoration: none !important; } .dsat-shop-reserve-hotpepper img{ display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; border: 0; }

/* =========================================================
   青森：FV直下余白調整（外部CSS）
   - 外側（#contents等）の余白は無し
   - コンテンツ本体は max-width で中央寄せ
   - ギフト上のみ padding-top: 30px
   ========================================================= */
body.home:has(.dsat) .cps-post-header,
body.page:has(.dsat) .cps-post-header,
body.home:has(.dears-front) .cps-post-header,
body.page:has(.dears-front) .cps-post-header,
.cps-post-box:has(.dsat) .cps-post-header,
.cps-post-box:has(.dears-front) .cps-post-header,
.cps-post-box:has(.dsat) .cps-post-title.entry-title,
.cps-post-box:has(.dears-front) .cps-post-title.entry-title,
.cps-post-box:has(.dsat) .cps-post-header .writer,
.cps-post-box:has(.dears-front) .cps-post-header .writer,
#onecolumn:has(.dsat) h1.cps-post-title.entry-title,
#onecolumn:has(.dears-front) h1.cps-post-title.entry-title{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

body.home:has(.dsat) #contents,
body.page:has(.dsat) #contents,
body.home:has(.dears-front) #contents,
body.page:has(.dears-front) #contents,
#contents:has(.dsat),
#contents:has(.dears-front),
#onecolumn:has(.dsat),
#onecolumn:has(.dears-front),
.cps-post-box:has(.dsat),
.cps-post-box:has(.dears-front),
.cps-post-main:has(.dsat),
.cps-post-main:has(.dears-front),
.cps-post-main-box:has(.dsat),
.cps-post-main-box:has(.dears-front),
.cps-post-box:has(.dsat) .cps-post,
.cps-post-box:has(.dears-front) .cps-post{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 外側の余白は無し（全幅背景用） */
body.home:has(.dsat) #contents,
body.page:has(.dsat) #contents,
body.home:has(.dears-front) #contents,
body.page:has(.dears-front) #contents,
#contents:has(.dsat),
#contents:has(.dears-front){
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.cps-post-main:has(.dsat) > p:empty,
.cps-post-main:has(.dears-front) > p:empty,
.cps-post-main:has(.dsat) > p:has(> br):not(:has(img)):not(:has(a)):not(:has(span)):not(:has(strong)):not(:has(em)):not(:has(div)),
.cps-post-main:has(.dears-front) > p:has(> br):not(:has(img)):not(:has(a)):not(:has(span)):not(:has(strong)):not(:has(em)):not(:has(div)),
.dsat.dears-front > p:empty,
.dsat.dears-front > p:has(> br):not(:has(img)):not(:has(a)):not(:has(span)):not(:has(strong)){
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.dsat.dears-front{
  margin-top: 0 !important;
  padding-top: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* コンテンツ本体は中央寄せ */
.dsat.dears-front .dgift-banner,
.dsat.dears-front .dsat-inner,
.dsat.dears-front .dears-concern-inner,
.dsat.dears-front .dears-solution-inner,
.dsat.dears-front .dears-closing-inner,
.dsat.dears-front .promise-inner,
.dsat.dears-front .dears-intro-card,
.dsat.dears-front .store-search-card,
.dsat.dears-front .dfaq-inner,
.dsat.dears-front .dflow-inner,
.dsat.dears-front .voice-inner,
.dsat.dears-front .menu-inner,
.dsat.dears-front .dears-cases-inner,
.cps-post-main .dsat.dears-front .dgift-banner,
.cps-post-main .dsat.dears-front .dsat-inner{
  max-width: var(--dears-content-width, var(--dsat-max, 760px)) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* セクション内の左右はコンテンツ用の小さな余白のみ（外側テーマ余白ではない） */
.dsat.dears-front .dgift-section,
.dsat.dears-front .dsat-cta-wrap,
.dsat.dears-front .dears-concern-section,
.dsat.dears-front .dears-solution-section,
.dsat.dears-front .dears-kodawari,
.dsat.dears-front .promise-section,
.dsat.dears-front .voice-section,
.dsat.dears-front .menu-section,
.dsat.dears-front .dears-cases-section,
.dsat.dears-front .dears-closing,
.dsat.dears-front .dsat-shop-section,
.dsat.dears-front .dfaq-section{
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

.dsat.dears-front > .dgift-section,
.cps-post-main .dsat.dears-front > .dgift-section,
.cps-post-main.hl-custom .dsat.dears-front > .dgift-section{
  margin-top: 0 !important;
  padding-top: 30px !important;
  padding-bottom: 0 !important;
}

#main-image + .clearfix,
.main-image + .clearfix{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}