@charset "UTF-8"; /* ============================================================ Reborn LP テーマスタイル （Webフォントの読み込みは index.html ので行う） ============================================================ */ /* width/height属性（CLS対策）と流動レイアウトの両立 */ img { height: auto; } body { color: #333; font-family: "Zen Old Mincho", serif; font-style: normal; font-weight: 400; line-height: 1.5; } main { overflow: hidden; } li { list-style: none; } a { text-decoration: none; color: inherit; cursor: pointer; transition: all .2s; } a:hover, a:focus { opacity: .7; } .sp-display { display: none !important; } /* ===== ヘッダー ===== */ .header { position: fixed; z-index: 10; width: 100vw; height: 72px; display: flex; justify-content: center; background-color: transparent; transition: background-color .2s ease; } .header.scrolled { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); } .header__container { width: 100%; max-width: 1232px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; } .header-ttl img { height: 32px; width: 80px; } .header-content { display: flex; align-items: center; } .header-nav__list { display: flex; align-items: center; margin-right: 24px; } .header-nav__list li:not(:last-child) { margin-right: 24px; } .header-content__btn { display: flex; align-items: center; } .header-content__btn a:not(:last-child) { margin-right: 8px; } /* ===== 共通ボタン ===== */ /* ===== フッター ===== */ .footer { background-image: url(../img/img_bg_3.jpg); background-repeat: no-repeat; background-size: cover; background-blend-mode: lighten; } .footer__container { margin: 0 auto; padding: 48px 16px; width: 100%; max-width: 1232px; } .footer__content { display: flex; justify-content: space-between; margin-bottom: 40px; } .footer-ttl img { height: 32px; width: 80px; } .footer-nav__list { display: flex; align-items: center; margin-right: 24px; } .footer-nav__list li:not(:last-child) { margin-right: 24px; } .footer__copy { text-align: center; font-size: 14px; } /* ===== 共通ボタン ===== */ .btn-counseling { position: absolute; bottom: 58px; right: 0; left: 0; margin: 0 auto; display: flex; width: 493px; height: 87px; justify-content: center; align-items: center; color: #007f91; border-radius: 48px; opacity: .9; background: #fff; box-shadow: 0px 0px 2px 4px rgba(0,174,196,.05); font-family: "Noto Sans JP", sans-serif; font-size: 20px; letter-spacing: 1px; } /* ===== セクション共通 ===== */ .sec-ttl { display: flex; flex-direction: column; align-items: center; margin-bottom: 80px; } .sec-ttl.sec-ttl--emphasis { margin-bottom: 48px; } .sec-ttl h1, .sec-ttl h2, .sec-ttl .menu-ttl { position: relative; font-size: 24px; font-weight: 500; letter-spacing: 2.4px; } .sec-ttl span { display: block; margin-top: 32px; } .sec-ttl--emphasis span { color: #007f91; font-size: 24px; text-align: center; margin-top: 48px; line-height: 1.5; font-weight: 500; letter-spacing: 2.4px; } .sec-ttl h1:after, .sec-ttl h2:after, .sec-ttl .menu-ttl:after { position: absolute; bottom: -12px; content: ''; display: block; width: 100%; height: 16px; background-color: rgba(0,174,196,.1); } /* ===== ファーストビュー ===== */ .sec-fv { position: relative; } .sec-fv__img { position: relative; display: flex; } .sec-fv__img picture { display: flex; width: 100%; } .sec-fv__img img { width: 100%; } /* ===== お悩み ===== */ .sec-concern { position: relative; } .sec-concern:after { position: absolute; right: -41px; bottom: -269px; width: 404px; height: 406px; z-index: 1; content: ''; display: block; background-image: url(../img/img_ellipse_pc_1.png); background-repeat: no-repeat; background-position: center; background-size: contain; } .sec-concern__container { /* 写真4枚の列だけ基準グリッド(1232px)より広げる。 余白40pxにより、ノートPC(〜1440px)では控えめ・大画面では広々に自動で切り替わる */ margin: 0 auto; padding: 80px 40px; width: 100%; max-width: 1560px; } .concern-list { display: flex; justify-content: space-between; } .concern-list__item { width: 23.5%; } .concern-list__img { position: relative; width: 100%; margin-bottom: 16px; } .concern-list__img:after { content: ''; display: block; padding-top: calc(100% / 3 * 2); } .concern-list__img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .concern-list__ttl { text-align: center; font-size: 20px; font-weight: 500; letter-spacing: 1px; } /* ===== Rebornとは ===== */ .sec-about { position: relative; background-image: url(../img/img_bg_3.jpg); background-repeat: no-repeat; background-size: cover; background-color: rgba(255,255,255,.8); background-blend-mode: lighten; } .sec-about:after { position: absolute; left: -120px; top: -148px; width: 236px; height: 230px; z-index: 1; content: ''; display: block; background-image: url(../img/img_ellipse_pc_2.png); background-repeat: no-repeat; background-position: center; background-size: contain; } .sec-about__container { /* メインメッセージの見開き。お悩みセクションと同じワイド帯(1560px)で揃える */ margin: 0 auto; padding: 80px 40px; width: 100%; max-width: 1560px; } .about-lead { margin-bottom: 32px; font-size: 24px; font-weight: 500; letter-spacing: 1.5px; line-height: 1.9; text-wrap: balance; } .about-content { display: flex; justify-content: space-between; align-items: stretch; } .about-content__txt { width: 48%; } .about-content__txt p { margin-bottom: 16px; } .about-content__img { width: 48%; } .about-content__img img { /* テキスト量に合わせて縦にトリミング（相談者の顔が写真右寄りのため62%基準） */ width: 100%; height: 100%; object-fit: cover; object-position: 62% center; border-radius: 8px; } .about-closing { margin-top: 56px; text-align: center; line-height: 1.9; letter-spacing: .02em; text-wrap: balance; } .about-closing__main { margin-top: 12px; color: #007f91; font-size: 22px; font-weight: 500; letter-spacing: 1.5px; line-height: 1.8; } /* ===== Rebornが選ばれる理由 ===== */ .sec-reason { background-image: url(../img/img_bg_1.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(255,255,255,.8); background-blend-mode: lighten; } .sec-reason__container { /* 選ばれる理由もワイド帯(1560px)で揃える */ margin: 0 auto; padding: 80px 40px; width: 100%; max-width: 1560px; } .reason-blocks { /* 2×2の白カード。Z字（上段01,02→下段03,04）で読む */ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .reason-block { padding: 48px; background: rgba(255,255,255,.9); border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,.04); } .reason-block__head { margin-bottom: 24px; } .reason-block__num { display: block; margin-bottom: 12px; color: #007f91; font-size: 24px; letter-spacing: .2em; } .reason-block__head h3 { font-size: 22px; font-weight: 500; letter-spacing: 1px; line-height: 1.6; } .reason-block__body { line-height: 1.9; letter-spacing: .02em; } .reason-block__body p { margin-bottom: 16px; } .reason-block__body p:last-child { margin-bottom: 0; } /* ===== 施術一覧 ===== */ .sec-surgery { background-image: url(../img/img_bg_2.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(255,255,255,.9); background-blend-mode: lighten; } .sec-surgery__container { /* 相談分野もワイド帯(1560px)で揃える */ margin: 0 auto; padding: 80px 40px; width: 100%; max-width: 1560px; } .sec-surgery .sec-ttl { margin-bottom: 24px; } .surgery-lead { margin-bottom: 64px; text-align: center; line-height: 1.9; letter-spacing: .02em; } .surgery-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; } .surgery-list__img { margin-bottom: 16px; } .surgery-list__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; } .surgery-list__ttl { color: #007f91; font-size: 20px; margin-bottom: 8px; } .surgery-list__sub { font-size: 14px; color: #555; line-height: 1.7; letter-spacing: .02em; } .surgery-note { margin-top: 48px; text-align: center; color: #555; letter-spacing: .02em; } /* ===== 提携先クリニック ===== */ .sec-partner { padding: 80px 0; overflow: hidden; } .partner-slider { display: flex; flex-wrap: nowrap; } .partner-slider__slide { display: grid !important; place-content: center; flex-shrink: 0; } .partner-slider__slide img { max-height: 180px; max-width: 200px; } /* ===== Reborn Korea 誘導 ===== */ .sec-korea__container { margin: 0 auto; padding: 80px 16px 0; width: 100%; max-width: 1232px; } .korea-banner { display: flex; align-items: stretch; justify-content: space-between; gap: 48px; padding: 48px 64px; border-radius: 24px; background: linear-gradient(135deg, #007f91, #009bb0); color: #fff; } .korea-banner__eyebrow { margin-bottom: 12px; font-family: "Noto Sans JP", sans-serif; font-size: 13px; letter-spacing: .25em; text-transform: uppercase; opacity: .85; } .korea-banner__ttl { margin-bottom: 16px; font-size: 28px; font-weight: 500; letter-spacing: .05em; } .korea-banner__body { font-size: 15px; line-height: 1.9; letter-spacing: .02em; } .korea-banner__visual { position: relative; flex-shrink: 0; align-self: stretch; width: 400px; border-radius: 16px; overflow: hidden; } .korea-banner__img { width: 100%; height: 100%; object-fit: cover; object-position: 18% 30%; } .korea-banner__visual-overlay { position: absolute; right: 13%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; } .korea-banner__visual-overlay img { width: 92px; height: auto; } .korea-banner__visual-copy { font-family: "Zen Old Mincho", serif; font-size: 15px; font-weight: 500; letter-spacing: .16em; line-height: 1.9; color: #3a505f; text-align: center; } .korea-banner__btn { margin-top: 28px; display: inline-block; padding: 18px 40px; border-radius: 50vh; background: #fff; color: #007f91; font-family: "Noto Sans JP", sans-serif; font-weight: 700; letter-spacing: .05em; transition: transform .2s ease, box-shadow .2s ease; } .korea-banner__btn:after { content: '→'; margin-left: 8px; } .korea-banner__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); } @media screen and (max-width:767px) { .sec-korea__container { padding: 48px 16px 0; } .korea-banner { display: block; padding: 32px 24px; } .korea-banner__visual { width: 100%; aspect-ratio: 3 / 2; margin-top: 24px; border-radius: 12px; align-self: auto; } .korea-banner__btn { margin-top: 24px; } .korea-banner__ttl { font-size: 22px; } .korea-banner__body { font-size: 14px; } .korea-banner__btn { display: block; margin-top: 24px; text-align: center; } } /* ===== ご相談事例 ===== */ .sec-consult { position: relative; background-image: url(../img/img_bg_2.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(255,255,255,.6); background-blend-mode: lighten; } .sec-consult:before { position: absolute; left: 24px; top: -96px; width: 176px; height: 222px; z-index: 1; content: ''; display: block; background-image: url(../img/img_ellipse_pc_3.png); background-repeat: no-repeat; background-position: center; background-size: contain; } .sec-consult__container { /* 相談事例もワイド帯(1560px)で揃える */ margin: 0 auto; padding: 80px 40px; width: 100%; max-width: 1560px; } .consult-cards { /* 2×2の白カード（選ばれる理由と同じ設計言語） */ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .consult-card { padding: 48px; background: rgba(255,255,255,.9); border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,.05); } .consult-card__head { margin-bottom: 24px; } .consult-card__num { display: block; margin-bottom: 12px; color: #007f91; font-size: 18px; letter-spacing: .2em; } .consult-card__head h3 { font-size: 22px; font-weight: 500; letter-spacing: 1px; line-height: 1.6; } .consult-card__meta { display: block; margin-top: 4px; color: #555; font-size: 14px; font-weight: 400; letter-spacing: .05em; } .consult-card__body dt { margin-bottom: 4px; color: #007f91; font-size: 14px; font-weight: 500; letter-spacing: .05em; } .consult-card__body dd { margin-bottom: 16px; line-height: 1.9; letter-spacing: .02em; } .consult-card__body dd:last-child { margin-bottom: 0; } .consult-note { margin-top: 32px; text-align: center; color: #555; font-size: 14px; letter-spacing: .02em; } /* ===== スライダー共通（症例・提携先で使用） ===== */ .slick-track { display: flex; } .slick-slide { height: auto !important; } .slick-dots { padding: 0; display: flex; justify-content: start; position: inherit; } .slick-dots li { width: 20px; height: 20px; cursor: pointer; margin: 0; } .slick-dots li:not(:last-child) { margin: 0 15px 0 0; } .slick-dots li:hover button, .slick-dots li.slick-active button { background-color: #007f91; } .slick-dots li button { display: block; width: 20px; height: 20px; padding: 6px; border: 0; border-radius: 50%; background-color: #d9d9d9; background-clip: content-box; font-size: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .slick-dots li button:before { content: none; } .slick-dots li button:focus-visible { outline: 2px solid #007f91; outline-offset: 2px; } .slick-arrow { height: 60px; width: 60px; background-color: #fff; border-radius: 8px; } .slick-arrow:first-child { margin-right: 10px; } .slick-arrow.next-arrow { background-color: #fff; background-image: url(../img/img_arrow_right.svg); background-size: 18px 12px; background-repeat: no-repeat; background-position: center; } .slick-arrow.prev-arrow { background-image: url(../img/img_arrow_right.svg); background-size: 18px 12px; background-repeat: no-repeat; background-position: center; transform: rotate(180deg); } /* ===== CTA（無料カウンセリング誘導） ===== */ .sec-cta { background-color: #009bb0; } .sec-cta__container { margin: 0 auto; padding: 48px 16px; width: 100%; max-width: 1032px; } .cta-ttl { margin-bottom: 24px; } .cta-ttl h2 { text-align: center; text-shadow: 0px 0px 2px rgba(0,174,196,.05); font-size: 36px; color: #fff; letter-spacing: 3.6px; line-height: 1.5; } .cta-lead { margin-bottom: 32px; text-align: center; color: #fff; letter-spacing: .05em; } .cta-content { display: flex; justify-content: center; } .cta-content__btn { /* FVの白ピルCTAと同じ設計言語（白地×テーマ色） */ display: inline-block; padding: 20px 64px; border-radius: 50vh; background: #fff; box-shadow: 0px 0px 2px 4px rgba(0,174,196,.05); color: #007f91; font-family: "Noto Sans JP", sans-serif; font-size: 20px; letter-spacing: 1px; } /* ===== 症例 ===== */ .sec-case { background-image: url(../img/img_bg_2.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(255,255,255,.8); background-blend-mode: lighten; padding: 80px 0; } .case-slider { margin: 0 auto; padding: 0 16px; max-width: 1232px; } .case-slider__slide { display: flex !important; align-items: center; margin: 0 12px; background-color: #fff; padding: 40px 48px; border-radius: 16px; } .case-slide-img { width: 42%; margin-right: 40px; } .case-slide-img img { width: 100%; border-radius: 24px; } .case-slide-content { width: calc(58% - 40px); } .case-slide-content__ttl { color: #007f91; font-size: 24px; font-weight: 500; letter-spacing: 1px; margin-bottom: 8px; } .case-slide-content__tags { display: flex; flex-wrap: wrap; } .case-slide-content__tags>.tag-item { font-family: "Noto Sans JP", sans-serif; font-size: 12px; font-weight: 400; border-radius: 8px; padding: 0 8px; border: 1px solid #00aec4; margin-bottom: 8px; } .case-slide-content__tags>.tag-item:not(:last-child) { margin-right: 8px; } .case-slide-content__txt { font-size: 16px; font-weight: 400; max-width: 42em; } .case-slider-parts { height: 60px; width: 100%; max-width: 1232px; margin: 0 auto; padding: 0 16px; display: flex; justify-content: space-between; } .case-slider-parts__dot { display: flex; align-items: center; } .case-slider-parts__arrow { display: flex; } .case-note { margin: 24px auto 0; max-width: 1032px; padding: 0 16px; text-align: center; color: #555; font-size: 14px; letter-spacing: .02em; } /* ===== ご利用の流れ ===== */ .sec-flow { /* ご利用の流れもワイド帯(1560px)で揃える */ margin: 0 auto; padding: 80px 40px; width: 100%; max-width: 1560px; } .flow-content { display: flex; justify-content: space-between; } .flow-content__item { position: relative; width: calc((100% - 36px*3) / 4); } .flow-content__item:not(:last-child):after { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: -36px; margin: auto 0; height: 36px; width: 36px; background-image: url(../img/img_arrow_right.svg); background-size: 12px 7.5px; background-repeat: no-repeat; background-position: center; } .flow-card { height: 100%; padding: 24px; border-radius: 24px; border: 1px solid rgba(0,174,196,.5); } .flow-card__top { display: flex; flex-direction: column; align-items: center; } .flow-card__top>.card-img { position: relative; display: block; width: 90%; margin-bottom: 16px; } .flow-card__top>.card-img:before { content: ''; display: block; padding-top: 90%; } .flow-card__top>.card-img>img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .flow-card__top>.card-ttl { display: flex; flex-direction: column; align-items: center; } .flow-card__top>.card-ttl>span { display: inline-block; padding: 4px 24px; text-align: center; background-color: #007f91; letter-spacing: .8px; color: #fff; font-family: "Noto Sans JP", sans-serif; border-radius: 50vh; margin-bottom: 8px; } .flow-card__top>.card-ttl>h3 { color: #007f91; text-align: center; font-size: 20px; font-weight: 500; margin-bottom: 16px; } .flow-card__bottom>.card-txt { font-size: 16px; } /* ===== ご利用料金表 ===== */ .sec-price { background-image: url(../img/img_bg_2.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(255,255,255,.8); background-blend-mode: lighten; } .sec-price__container { margin: 0 auto; padding: 80px 16px; width: 100%; max-width: 1232px; } .sec-price .sec-ttl { margin-bottom: 24px; } .price-lead { margin-bottom: 48px; text-align: center; font-size: 18px; letter-spacing: .05em; } .price-lead strong { color: #007f91; font-weight: 700; } .price-card { margin: 0 auto; max-width: 1040px; padding: 56px 48px; border-radius: 16px; border: 4px solid rgba(0,174,196,.1); background: #fff; } .price-card__cols { /* 2列を内容幅で組み、左右へ振り分けて枠全体を使う（両端はpaddingで確保） */ display: grid; grid-template-columns: auto auto; justify-content: space-between; padding: 0 64px; margin-bottom: 48px; } .price-card__cols .price-card__block:first-child { /* チェックのガター(26px)も列幅に含め、視覚上のセンターを正確に取る */ padding-left: 26px; } .price-card__block h3 { margin-bottom: 16px; color: #007f91; font-size: 18px; font-weight: 500; letter-spacing: 1px; } .price-card__list li { line-height: 1.9; letter-spacing: .02em; } .price-card__list--free li { /* テキストは見出しと同一の左軸。チェックは軸の外側（ガター）にぶら下げる */ position: relative; } .price-card__list--free li:before { content: '✓'; position: absolute; left: -26px; color: #007f91; font-weight: 700; font-family: "Noto Sans JP", sans-serif; } .price-card__price { display: block; margin-top: 4px; color: #007f91; font-size: 28px; font-weight: 700; letter-spacing: 1px; font-family: "Noto Sans JP", sans-serif; } .price-card__price small { font-size: 14px; font-weight: 500; } .price-card__cond { display: block; margin-top: 2px; font-size: 13px; color: #555; } .price-card__note { text-align: center; font-size: 13px; color: #555; line-height: 1.9; } .price-card__note a { text-decoration: underline; } /* ===== よくある質問 ===== */ .sec-faq { position: relative; background-image: url(../img/img_bg_2.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(255,255,255,.8); background-blend-mode: lighten; } .sec-faq:after { position: absolute; right: -76px; bottom: 0; width: 404px; height: 387px; z-index: 1; content: ''; display: block; background-image: url(../img/img_ellipse_pc_6.png); background-repeat: no-repeat; background-position: center; background-size: contain; } .sec-faq__container { margin: 0 auto; padding: 80px 16px; width: 100%; max-width: 1032px; } .faq-list__item { display: block; border-radius: 16px; background: rgba(255,255,255,.5); padding: 24px; cursor: pointer; } .faq-list__item:not(:last-child) { margin-bottom: 16px; } .faq-question { display: flex; width: 100%; justify-content: space-between; align-items: center; } .faq-question>.ttl { display: flex; align-items: flex-start; width: calc(100% - 40px); margin-right: 16px; font-size: 20px; font-weight: 500; max-width: calc(100% - 40px); background-repeat: no-repeat; } .faq-question>.ttl:before { content: 'Q.'; font-size: 24px; line-height: 30px; color: #007f91; font-weight: 500; display: block; margin-right: 8px; } .faq-question>.btn { height: 36px; width: 36px; background-image: url(../img/img_arrow_down.svg); background-size: 12px 7.5px; background-repeat: no-repeat; background-position: center; transition: all .3s; } .faq-list__item.active .btn { transform: rotate(180deg); } .faq-answer { font-size: 16px; overflow: hidden; max-height: 0; margin-top: 0; transition: max-height .3s ease,margin-top .3s ease; } .faq-answer p { /* 'A.'はガターにぶら下げ、本文内のstrong/brでレイアウトが崩れないようにする */ position: relative; padding-left: 34px; max-width: 42em; } .faq-answer p:before { content: 'A.'; position: absolute; left: 0; top: 0; font-size: 20px; color: #007f91; font-weight: 500; } .faq-answer.open { display: flex; } /* ===== レスポンシブ ===== */ @media screen and (max-width:767px) { .header-content__btn /* 後半セクションのSP paddingは従来通り48px (#14) */ .sec-case { padding: 48px 0; } .sec-flow, .sec-price__container, .sec-faq__container { padding: 48px 16px; } .sec-consult__container { padding: 48px 16px; } .consult-cards { grid-template-columns: 1fr; gap: 24px; } .consult-card { padding: 32px 24px; } .consult-card__num { font-size: 16px; } .consult-card__head h3 { font-size: 19px; } .pc-display { display: none !important; } .sp-display { display: block !important; } .sp-display--flex { display: flex !important; } .header-content__menu { position: fixed; background-color: rgba(249,250,251,.9); left: 0; top: 0; height: 100vh; width: 100vw; padding: 0 16px 111px; overflow-y: auto; opacity: 0; transform: translateY(-20px); transition: opacity .3s ease,transform .3s ease; pointer-events: none; } .header-content__menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .header-label { height: 72px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; } .header-label img { height: 25px; width: 62px; } .header-nav__list { display: flex; flex-direction: column; align-items: center; margin-right: 0; } .header-nav__list>li { position: relative; color: #007f91; font-size: 20px; font-weight: 500; letter-spacing: 1px; padding-bottom: 4px; } .header-nav__list>li:after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #00aec4; transition: width .3s ease; } .header-nav__list>li:hover:after { width: 100%; } .header-nav__list>li:not(:last-child) { margin-right: 0; margin-bottom: 36px; } .btn-close { width: 48px; height: 48px; cursor: pointer; background-image: url(../img/img_close.svg); background-repeat: no-repeat; background-position: center; background-size: contain; } .btn-menu { width: 24px; height: 20px; cursor: pointer; background-image: url(../img/img_hamburger.svg); background-repeat: no-repeat; background-position: center; background-size: contain; } /* デフォルト=バー状態（JS不動作時も安全）。全画面スプラッシュは --splash で付与 (#22) */ .btn-counseling { position: fixed; border-radius: 0; padding: 0 24px; bottom: 0; left: 0; width: 100vw; height: 87px; top: auto; background: rgba(0,127,145,.95); color: #fff; font-size: 20px; font-family: "Noto Sans JP", sans-serif; display: flex; justify-content: center; align-items: center; line-height: 1.5; z-index: 100; transition: all .7s ease; overflow: hidden; } .btn-counseling.btn-counseling--splash { height: 100vh; top: 0; background: rgba(0,174,196,.9); font-size: 24px; font-family: "Zen Old Mincho", serif; pointer-events: none; } .btn-counseling.scrolled { height: 87px; background: rgba(0,127,145,.95); color: #fff; font-size: 20px; font-family: "Noto Sans JP", sans-serif; justify-content: center; align-items: center; top: auto; } .sec-fv { overflow: hidden; } .sec-fv__content { height: min(820px, 100svh); background-image: url(../img/img_fv_sp.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 96px; } .sec-fv__content:before { position: absolute; left: -40px; top: 64px; width: 163px; height: 163px; z-index: 1; content: ''; display: block; background-image: url(../img/img_ellipse_sp_1.png); background-repeat: no-repeat; background-position: center; background-size: contain; } .sec-fv__content:after { position: absolute; right: -40px; bottom: 160px; width: 163px; height: 163px; z-index: 1; content: ''; display: block; background-image: url(../img/img_ellipse_sp_2.png); background-repeat: no-repeat; background-position: center; background-size: contain; } .sec-fv__content>.fv-img { margin-bottom: 10px; } .sec-fv__content>.fv-img>img { width: 97px; height: 39px; } .sec-fv__content>p { color: #3a505f; text-shadow: 0px 4px 4px rgba(0,0,0,.25); font-size: 20px; font-weight: 400; letter-spacing: 3.2px; } .sec-ttl { margin-bottom: 48px; } .sec-ttl h2 { line-height: 1.5; } .sec-ttl--emphasis span { font-size: 20px; } .sec-concern:after { display: none; } .sec-concern__container { padding: 48px 16px; } .concern-list { display: block; } .concern-list__item { width: 100%; } .concern-list__item:not(:last-child) { margin-bottom: 40px; } .concern-list__ttl { font-size: 16px; } .about-lead { order: -2; margin-bottom: 24px; font-size: 17px; text-align: center; } .about-closing { margin-top: 40px; } .about-closing__main { font-size: 18px; } .about-content { flex-direction: column; } /* SPはリード→写真→本文の順（txtの箱を外し、orderで差し込む） */ .about-content__txt { display: contents; } .about-content__img { order: -1; width: 100%; margin-bottom: 24px; } .about-content__txt { width: 100%; } .sec-about__container { padding: 48px 16px; } .sec-reason__container { padding: 48px 16px; } .reason-blocks { grid-template-columns: 1fr; gap: 24px; } .reason-block { padding: 32px 24px; } .reason-block__num { margin-bottom: 8px; font-size: 20px; } .reason-block__head { margin-bottom: 16px; } .reason-block__head h3 { font-size: 19px; } .sec-surgery__container { padding: 48px 16px; } .surgery-lead { margin-bottom: 40px; font-size: 14px; } .surgery-list { display: block; } .surgery-list__item { display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; align-items: center; padding: 16px; border-radius: 16px; background-color: #fff; } .surgery-list__item:not(:last-child) { margin-bottom: 16px; } .surgery-list__img { grid-row: 1 / 3; margin-bottom: 0; } .surgery-list__img img { aspect-ratio: 1 / 1; } .surgery-list__ttl { font-size: 17px; margin-bottom: 2px; } .surgery-list__sub { font-size: 12px; } .surgery-note { margin-top: 32px; font-size: 14px; text-align: left; } .sec-partner { padding: 48px 0; } .sec-consult:before { display: none; } .cta-ttl h2 { font-size: 28px; } .cta-lead { margin-bottom: 24px; font-size: 14px; } .cta-content { justify-content: center; } .cta-content__btn { padding: 16px 40px; font-size: 17px; } .case-slider__slide { display: block !important; } .case-slider-parts { justify-content: center; } .case-slider-parts__arrow { display: none; } .flow-content { display: block; } .case-slide-content { width: 100%; } .case-slide-img { width: 100%; margin-bottom: 24px; } .case-slide-img img { border-radius: 8px; } .flow-content__item { width: 100%; } .flow-content__item:not(:last-child):after { content: ''; display: block; position: inherit; top: inherit; bottom: inherit; right: inherit; margin: 0 auto; height: 60px; width: 60px; transform: rotate(90deg); background-size: 24px 15px; } .flow-card__top { flex-direction: column-reverse; } .flow-card__top>.card-img { max-width: 188px; max-height: 188px; } .price-lead { margin-bottom: 32px; font-size: 15px; } .price-card { padding: 32px 24px; } .price-card__cols { grid-template-columns: 1fr; gap: 24px; padding: 0; margin-bottom: 24px; } .price-card__cols .price-card__block:first-child { padding-left: 0; } .price-card__price { font-size: 24px; } .sec-faq:after { display: none; } .footer__container { padding: 48px 16px 96px; } .footer__content { flex-direction: column; align-items: center; } .footer-ttl img { margin-bottom: 24px; } .footer-nav__list { flex-direction: column; align-items: center; margin-right: 0; } /* リンクのタップ領域を44px確保 (#33) */ .footer-nav__list a { display: inline-block; padding: 10px 16px; } .footer-nav__list li:not(:last-child) { margin-right: 0; margin-bottom: 8px; } } /* ===== 提携先クリニック ===== */ /* ===== レイアウト一貫性（ブラッシュアップ） ===== */ /* ===== タイポグラフィ統一（ブラッシュアップ） ===== */ /* 同格カード見出しの字間を多数派の1pxに統一 (#28) */ .faq-question > .ttl, .surgery-list__ttl { letter-spacing: 1px; } /* 中央揃え見出しの1文字孤立を防ぐ（非対応ブラウザでは無害に無視） (#29) */ .sec-ttl h2, .concern-list__ttl, .case-slide-content__ttl { text-wrap: balance; } /* 和文の禁則を強める (#29) */ body { line-break: strict; } /* ===== 症例カードの文字組（2026-07-26 アーサーFB反映） ===== */ /* 施術名・金額の途中改行を防ぐ最小単位 */ .nobr { white-space: nowrap; } /* 見出し: 行間と下余白を広げ、タグ・本文との呼吸を作る */ .case-slide-content__ttl { line-height: 1.55; margin-bottom: 14px; } .case-slide-content__tags { margin-bottom: 10px; } /* 説明文と補足情報（リスク・費用）を分離し、階層を付ける */ .case-slide-content__meta { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(0,127,145,.16); max-width: 42em; } .case-meta-row { display: flex; align-items: baseline; gap: 14px; } .case-meta-row:not(:first-child) { margin-top: 12px; } .case-meta-row dt { flex-shrink: 0; width: 8em; font-family: "Noto Sans JP", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: #007f91; } .case-meta-row dd { font-size: 14px; line-height: 1.8; letter-spacing: .02em; margin: 0; } @media screen and (max-width:767px) { .case-meta-row { display: block; } .case-meta-row dt { width: auto; margin-bottom: 2px; } /* SPの狭いカードでは見出しの禁則を意味単位に固定できない（物理的に収まらない）ため、 文字サイズの最適化＋通常の禁則（line-break:strict）に切り替える。金額のnobrは維持 */ .case-slide-content__ttl { font-size: 19px; } .case-slide-content__ttl .nobr { white-space: normal; } } /* ===== コンバージョン導線（ブラッシュアップ） ===== */ /* ヒーローコピー「迷いを確信に変える」: 画像焼き込みをやめHTMLテキスト化 */ .fv-copy { position: absolute; left: 75.7%; top: 56%; transform: translate(-50%, -50%); font-family: "Zen Old Mincho", serif; font-weight: 500; font-size: 2.35vw; letter-spacing: .24em; color: #3a505f; white-space: nowrap; pointer-events: none; margin: 0; } /* ヘッダーナビの書体をコピーと統一 */ .header-nav__list a { font-family: "Zen Old Mincho", serif; font-weight: 500; } /* FVリードコピー: サービス内容と無料を即伝える (#18) */ .fv-lead { position: absolute; bottom: 170px; left: 0; right: 0; text-align: center; color: #3a505f; font-size: 18px; letter-spacing: 2px; text-shadow: 0 0 8px rgba(255,255,255,.8); } .fv-lead-sp { margin-top: 8px; text-align: center; color: #3a505f; font-size: 13px; letter-spacing: 1px; line-height: 1.7; text-shadow: 0px 4px 4px rgba(0,0,0,.15); } /* 実績数字の強調 (#51) */ .card-txt strong, .reason-block__body strong, .faq-answer strong { color: #007f91; font-weight: 700; } /* 本文の行間・字間を読み物として最適化 (#55) */ .about-content__txt p, .case-slide-content__txt, .flow-card__bottom > .card-txt, .faq-answer p { line-height: 1.9; letter-spacing: .02em; } /* ===== アクセシビリティ（ブラッシュアップ） ===== */ /* スクリーンリーダー専用テキスト (#8) */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* button化した操作要素の見た目リセット (#7,#23,#38) */ .btn-menu, .btn-close, .slick-arrow { border: 0; padding: 0; background-color: transparent; cursor: pointer; } /* ハンバーガーのタップ領域を48pxに拡大（アイコンの見た目は24x20pxのまま） (#7) */ .btn-menu { width: 48px; height: 48px; background-size: 24px 20px; background-position: center; background-repeat: no-repeat; margin-right: -12px; } /* FAQ質問ボタン: 見出しの見た目を継承しフォーカスを可視化 (#23) */ .faq-question .ttl button { all: unset; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; } .faq-question .ttl button:focus-visible, .btn-menu:focus-visible, .btn-close:focus-visible, .slick-arrow:focus-visible { outline: 2px solid #00aec4; outline-offset: 2px; } /* マーキー: 実寸width/heightで帯高さを予約しつつ縦横比を保持 */ .partner-slider__slide img { width: auto; height: auto; } /* ===== PC追従CTA: FV通過後に右下へ固定表示 (#25) ===== */ @media screen and (min-width: 768px) { .btn-counseling.pc-display.pc-fixed { position: fixed; bottom: 24px; right: 24px; left: auto; margin: 0; width: auto; height: 64px; padding: 0 40px; background: #007f91; color: #fff; opacity: 1; box-shadow: 0 4px 16px rgba(0,0,0,.2); z-index: 100; } } /* 装飾のellipseはクリックを奪わない（狭いウィンドウ幅でFAQ等のボタンに被るため） */ .sec-concern:after, .sec-about:after, .sec-consult:before, .sec-faq:after, .sec-fv__content:before, .sec-fv__content:after { pointer-events: none; }