@charset "UTF-8"; /****************************************************************************** * * リセット（最小構成・destyle系の必要部分のみ） * ※ 触らない。案件ごとの上書きは _base.scss 以降で行う * ******************************************************************************/ *, *::before, *::after { box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* フォーム要素はフォントを継承させる */ input, button, textarea, select { font: inherit; color: inherit; background: none; border: none; border-radius: 0; appearance: none; } /* 動きを減らす設定のユーザーにはアニメーションを止める（a11y必須） */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /****************************************************************************** * * 変数定義（案件ごとに“ここだけ”を書き換える） * ※ 色・フォント・幅はすべてこのファイルに集約する。 * 個別SCSSに生の #hex / px 幅を書かない（規約：SPEC.md 3-2） * * 東京銀座むつみ薬局 LP（Studio版のトレース） * 色は本家の実測値（getComputedStyle）をそのまま採用している * ******************************************************************************/ /* --------------------------------------------------------------------------- * カラー * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * フォント * ※ Webフォントの読み込みは index.html の 側で行う * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * レイアウト・余白 * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * z-index（数値の直書き禁止・必ずここを参照） * ------------------------------------------------------------------------- */ /****************************************************************************** * * mixin / ブレイクポイント / フォントサイズ設計 * ※ このファイルは基本的に案件ごとに書き換えない（共通資産） * ******************************************************************************/ /* --------------------------------------------------------------------------- * ブレイクポイント * 原則：SPファーストで書き、@include mq("md") 以上で上書きする * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * 要素別フォントサイズ + 行間 * 見出し・本文のサイズはここで一元管理し、 * 個別SCSSでは @include responsive-font-style("h2") のように呼び出す * ------------------------------------------------------------------------- */ /* 素のHTML要素にも既定サイズを適用（クラス未指定でも崩れないようにする） */ h1 { font-size: 28px; line-height: 1.4; } @media screen and (min-width: 768px) { h1 { font-size: 32px; line-height: 1.4; } } @media screen and (min-width: 1200px) { h1 { font-size: 40px; line-height: 1.4; } } h2 { font-size: 24px; line-height: 1.4; } @media screen and (min-width: 768px) { h2 { font-size: 28px; line-height: 1.4; } } @media screen and (min-width: 1200px) { h2 { font-size: 32px; line-height: 1.4; } } h3 { font-size: 20px; line-height: 1.5; } @media screen and (min-width: 768px) { h3 { font-size: 22px; line-height: 1.5; } } @media screen and (min-width: 1200px) { h3 { font-size: 26px; line-height: 1.5; } } h4 { font-size: 18px; line-height: 1.5; } @media screen and (min-width: 768px) { h4 { font-size: 18px; line-height: 1.5; } } @media screen and (min-width: 1200px) { h4 { font-size: 22px; line-height: 1.5; } } h5 { font-size: 16px; line-height: 1.6; } @media screen and (min-width: 768px) { h5 { font-size: 16px; line-height: 1.6; } } @media screen and (min-width: 1200px) { h5 { font-size: 18px; line-height: 1.6; } } h6 { font-size: 14px; line-height: 1.6; } @media screen and (min-width: 768px) { h6 { font-size: 15px; line-height: 1.6; } } @media screen and (min-width: 1200px) { h6 { font-size: 16px; line-height: 1.6; } } p { font-size: 14px; line-height: 1.8; } @media screen and (min-width: 768px) { p { font-size: 15px; line-height: 1.8; } } @media screen and (min-width: 1200px) { p { font-size: 16px; line-height: 1.8; } } a { font-size: 14px; line-height: 1.6; } @media screen and (min-width: 1200px) { a { font-size: 16px; line-height: 1.6; } } small { font-size: 12px; line-height: 1.6; } @media screen and (min-width: 1200px) { small { font-size: 13px; line-height: 1.6; } } /* --------------------------------------------------------------------------- * SP / PC 出し分け * ※ 画像の出し分けは可能な限り を使い、 * CSSでの display 切替は「同一内容の装飾」に限定する * ------------------------------------------------------------------------- */ .sp-only { display: none; } @media screen and (max-width: 767px) { .sp-only { display: block; } } .md-only { display: none; } @media screen and (min-width: 768px) { .md-only { display: block; } } .pc-only { display: none; } @media screen and (min-width: 1200px) { .pc-only { display: block; } } /* --------------------------------------------------------------------------- * よく使うパーツ用 mixin * ------------------------------------------------------------------------- */ /****************************************************************************** * * ベーススタイル（素のHTML要素の既定値） * ******************************************************************************/ html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 64px; } body { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 500; line-height: 1.8; letter-spacing: 0.06em; color: #333333; background-color: #FFFFFF; word-break: break-word; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-bottom: 60px; } @media screen and (min-width: 768px) { body { padding-bottom: 0; } } h1, h2, h3, h4, h5, h6 { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 700; color: #333333; } a { color: #D9B82D; text-decoration: none; transition: opacity 0.3s ease; } a:hover, a:focus-visible { opacity: 0.7; } /* キーボード操作時のフォーカスは必ず見える状態を維持する（outline:none 禁止） */ :focus-visible { outline: 2px solid #FF8E00; outline-offset: 2px; } img { display: block; max-width: 100%; height: auto; } button { cursor: pointer; } iframe { display: block; max-width: 100%; border: none; } /* 本文中の強調 */ strong, .is-strong { font-weight: 700; } /* 注釈 */ .is-note { font-size: 12px; line-height: 1.6; } @media screen and (min-width: 1200px) { .is-note { font-size: 13px; line-height: 1.6; } } .is-note { color: #949898; } /****************************************************************************** * * コンテナ（幅・左右余白の基準） * ※ 幅の指定はこのクラス群に任せ、p-* 側で max-width を持たせない * ******************************************************************************/ .l-container { width: 100%; max-width: 1176px; margin-inline: auto; padding-inline: 16px; } @media screen and (min-width: 768px) { .l-container { padding-inline: 0px; } } .l-container--xl { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 16px; } @media screen and (min-width: 768px) { .l-container--xl { padding-inline: 0px; } } .l-container--narrow { width: 100%; max-width: 880px; margin-inline: auto; padding-inline: 16px; } @media screen and (min-width: 768px) { .l-container--narrow { padding-inline: 0px; } } /****************************************************************************** * * セクションの上下余白 * ※ セクション同士の余白は「セクション側」で持つ。 * 要素に margin-bottom を積み上げて調整しない（規約：SPEC.md 3-4） * ******************************************************************************/ .l-section { padding-block: 48px; } @media screen and (min-width: 768px) { .l-section { padding-block: 80px; } } .l-section--alt { background-color: #F6F5EE; } .l-section--white { background-color: #FFFFFF; } .l-section--tight { padding-block: 24px; } @media screen and (min-width: 768px) { .l-section--tight { padding-block: 40px; } } /****************************************************************************** * * 横並び（flex / grid） * ******************************************************************************/ .l-flex { display: flex; flex-wrap: wrap; gap: 24px; } .l-flex--center { justify-content: center; align-items: center; } .l-flex--between { justify-content: space-between; } .l-flex--column { flex-direction: column; } .l-flex--responsive { flex-direction: column; } @media screen and (min-width: 768px) { .l-flex--responsive { flex-direction: row; flex-wrap: nowrap; } } .l-grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media screen and (min-width: 768px) { .l-grid { gap: 32px; } .l-grid--2 { grid-template-columns: repeat(2, 1fr); } .l-grid--3 { grid-template-columns: repeat(3, 1fr); } .l-grid--4 { grid-template-columns: repeat(4, 1fr); } } /****************************************************************************** * * ヘッダー（ロゴ＋TEL/予約ボタン＋メニュー） * ※ LPではグローバルナビを常時表示しない。ドロワー内のページ内アンカーのみ * ******************************************************************************/ .l-header { position: sticky; top: 0; z-index: 1000; background-color: #F6F5EE; } .l-header__inner { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 16px; width: 100%; max-width: 1250px; height: 55px; margin-inline: auto; padding-inline: 16px; } @media screen and (min-width: 768px) { .l-header__inner { justify-content: space-between; height: 100px; padding-inline: 0; } } .l-header__logo { position: absolute; left: 50%; transform: translateX(-50%); flex-shrink: 0; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; } @media screen and (min-width: 768px) { .l-header__logo { position: static; transform: none; font-size: 26px; } } .l-header__logo a { color: #333333; font-size: inherit; line-height: inherit; } .l-header__actions { display: flex; align-items: center; gap: 12px; } .l-header__actions .c-btn { display: none; } @media screen and (min-width: 768px) { .l-header__actions .c-btn { display: inline-flex; } } @media screen and (min-width: 768px) { .l-header__actions { gap: 20px; } } .l-header__menu { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; background: none; border: none; color: #CF1715; } .l-header__menu-bars { display: block; width: 30px; } .l-header__menu-bars span { display: block; height: 3px; border-radius: 2px; background-color: currentColor; transition: transform 0.3s ease, opacity 0.3s ease; } .l-header__menu-bars span + span { margin-top: 5px; } .l-header__menu-label { font-family: "Lato", sans-serif; font-size: 13px; font-weight: 700; line-height: 1; } .l-header__menu[aria-expanded=true] .l-header__menu-bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .l-header__menu[aria-expanded=true] .l-header__menu-bars span:nth-child(2) { opacity: 0; } .l-header__menu[aria-expanded=true] .l-header__menu-bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .l-header__drawer { display: none; background-color: #F6F5EE; border-top: 1px solid #DDDDDD; } .l-header__drawer.is-open { display: block; } @media screen and (max-width: 767px) { .l-header__drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000; width: 278px; max-width: 100%; height: 100%; border-top: none; border-left: 1px solid #DDDDDD; box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12); } .l-header__drawer.is-open { display: flex; flex-direction: column; } } .l-header__drawer-close { display: none; } @media screen and (max-width: 767px) { .l-header__drawer-close { display: flex; flex-direction: column; align-items: center; gap: 2px; align-self: flex-end; margin: 5px 16px 0; padding: 4px; background: none; border: none; color: #CF1715; cursor: pointer; } } .l-header__drawer-close-icon { width: 30px; height: 30px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.4 19-1.4-1.4 5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.4 19-1.4-1.4 5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6z'/%3E%3C/svg%3E") center/contain no-repeat; } .l-header__drawer-list { max-height: min(70vh, 560px); overflow-y: auto; padding: 8px 16px 24px; } @media screen and (max-width: 767px) { .l-header__drawer-list { flex: 1; max-height: none; } } @media screen and (min-width: 768px) { .l-header__drawer-list { max-width: 1250px; margin-inline: auto; padding-inline: 0; } } .l-header__drawer-list li + li { border-top: 1px solid #DDDDDD; } .l-header__drawer-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; color: #CF1715; font-weight: 400; } .l-header__drawer-list a::after { content: ""; flex-shrink: 0; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 5.6 9l1.4-1.4 5 5 5-5L18.4 9z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 5.6 9l1.4-1.4 5 5 5-5L18.4 9z'/%3E%3C/svg%3E") center/contain no-repeat; } /****************************************************************************** * * フッター（LPは最小構成：法定リンク / コピーライト） * ※ プライバシーポリシー・特商法表記は広告出稿の審査要件。省略しない * ******************************************************************************/ .l-footer { background-color: #FFFFFF; padding-block: 16px 20px; text-align: center; } .l-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 12px; } .l-footer__links a { font-size: 12px; line-height: 1.6; } @media screen and (min-width: 1200px) { .l-footer__links a { font-size: 13px; line-height: 1.6; } } .l-footer__links a { color: #949898; text-decoration: underline; } .l-footer__copy { font-size: 12px; line-height: 1.6; } @media screen and (min-width: 1200px) { .l-footer__copy { font-size: 13px; line-height: 1.6; } } .l-footer__copy { font-family: "Lato", sans-serif; color: #333333; letter-spacing: 0.04em; } /****************************************************************************** * * セクション見出し * * パターンA（.c-heading）: “ 見出し ” ＋ 点線 *
*

“ご利用の流れ”

*

・・・・・・・・・・・

*
* ******************************************************************************/ .c-heading { text-align: center; margin-bottom: 32px; } @media screen and (min-width: 768px) { .c-heading { margin-bottom: 48px; } } .c-heading__title { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 28px; font-weight: 700; line-height: 1.4; } @media screen and (min-width: 768px) { .c-heading__title { font-size: 40px; } } .c-heading__quote { margin-top: -0.35em; display: flex; justify-content: center; width: auto; max-width: 100%; height: auto; padding: 0; color: #AEAEAE; font-family: "Roboto", sans-serif; font-size: 64px; font-weight: 700; line-height: 1.4; text-align: center; } .c-heading__dots { margin-top: 4px; color: #D9B82D; font-size: 12px; letter-spacing: 0.35em; line-height: 1; } @media screen and (min-width: 768px) { .c-heading__dots { font-size: 14px; } } /****************************************************************************** * * ボタン * ※ CTAボタンは必ず .c-btn を土台に使う。案件ごとの色は _variables.scss で変える * ※ タップ領域は最低 44px 以上を確保する（a11y / スマホ誤タップ防止） * ******************************************************************************/ .c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 10px 24px; width: 100%; max-width: 420px; border: 2px solid transparent; border-radius: 999px; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: center; letter-spacing: 0.04em; transition: opacity 0.3s ease, box-shadow 0.3s ease; } .c-btn:hover, .c-btn:focus-visible { opacity: 0.85; } .c-btn--sm { min-height: 48px; width: auto; padding: 8px 24px; font-size: 15px; } @media screen and (min-width: 768px) { .c-btn--sm { min-height: 56px; padding: 8px 32px; font-size: 17px; } } .c-btn { /* --- 塗り：赤（電話） ------------------------------------------------- */ } .c-btn--tel { background-color: #CA171C; border-color: #CA171C; color: #FFFFFF; } .c-btn { /* --- 塗り：ゴールド（web予約） --------------------------------------- */ } .c-btn--web { background-color: #D9B82D; border-color: #D9B82D; color: #FFFFFF; } .c-btn { /* --- 白抜き：赤 ------------------------------------------------------- */ } .c-btn--tel-outline { background-color: #FFFFFF; border-color: #CF1715; color: #CF1715; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12); } .c-btn { /* --- 白抜き：ゴールド ------------------------------------------------- */ } .c-btn--web-outline { background-color: #FFFFFF; border-color: #D9B82D; color: #D9B82D; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12); } .c-btn { /* --- アクセント（全文見る・送信） ------------------------------------- */ } .c-btn--accent { background-color: #FF8E00; border-color: #FF8E00; color: #FFFFFF; font-size: 17px; letter-spacing: 0.2em; } .c-btn { /* --- アイコン --------------------------------------------------------- */ } .c-btn__icon { flex-shrink: 0; width: 22px; height: 22px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .c-btn__icon--tel { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E"); } .c-btn__icon--web { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v10H4z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M2 18h20v2H2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v10H4z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M2 18h20v2H2z'/%3E%3C/svg%3E"); } /****************************************************************************** * * CTAブロック（ページ内に4箇所・すべて同じ文言／同じ見た目で統一する） * 左：見出し＋電話/web の白抜きボタン　右：リード＋電話番号＋営業時間 * ******************************************************************************/ .c-cta { background-color: #EFEEEA; padding-block: 24px; } @media screen and (min-width: 768px) { .c-cta { background-color: #FFFFFF; padding-block: 20px; } } .c-cta__inner { display: grid; justify-items: center; gap: 20px; } @media screen and (min-width: 768px) { .c-cta__inner { width: 100%; max-width: 938px; margin-inline: auto; grid-template-columns: 435px 1fr; align-items: center; justify-items: stretch; gap: 48px; } } .c-cta__buttons { display: grid; gap: 12px; justify-items: center; width: 100%; } @media screen and (min-width: 768px) { .c-cta__buttons .c-btn { max-width: 313px; } } .c-cta__label { font-size: 20px; font-weight: 700; line-height: 1.4; } @media screen and (min-width: 768px) { .c-cta__label { font-size: 17px; } } .c-cta__tel { text-align: center; } .c-cta__tel-lead { white-space: nowrap; font-size: min(13px, 3.5vw); line-height: 1.6; } @media screen and (min-width: 768px) { .c-cta__tel-lead { white-space: normal; font-size: 16px; } } .c-cta__tel-number { font-family: "Lato", sans-serif; font-size: 38px; font-weight: 900; line-height: 1.2; letter-spacing: 0.01em; } @media screen and (min-width: 768px) { .c-cta__tel-number { font-size: 52px; } } .c-cta__tel-number a { color: #333333; font-size: inherit; line-height: inherit; } .c-cta__tel-note { font-size: 13px; line-height: 1.7; } @media screen and (min-width: 768px) { .c-cta__tel-note { font-size: 16px; } } .c-cta__tel-note strong { color: #CF1715; } /****************************************************************************** * * 追従CTA（SP：画面下部に固定 / PC：右下） * ※ スクロール後に script.js が .is-visible を付与する * ******************************************************************************/ .c-fixed-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; gap: 8px; padding: 6px 8px; background-color: rgba(255, 255, 255, 0.94); transform: translateY(110%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; pointer-events: none; } .c-fixed-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } @media screen and (min-width: 768px) { .c-fixed-cta { left: auto; right: 24px; bottom: 24px; flex-direction: column; gap: 10px; padding: 0; background-color: transparent; } } .c-fixed-cta__btn { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; padding: 8px 12px; border-radius: 999px; color: #FFFFFF; font-size: 16px; font-weight: 700; line-height: 1.3; text-align: center; } @media screen and (min-width: 768px) { .c-fixed-cta__btn { flex: none; min-width: 220px; min-height: 56px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); } } .c-fixed-cta__btn--line { background-color: #06C755; } .c-fixed-cta__btn--web { background-color: #FF2116; } /****************************************************************************** * * カード（特徴・メニュー・お客様の声などの汎用箱） * ******************************************************************************/ .c-card { background-color: #FFFFFF; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); height: 100%; display: flex; flex-direction: column; } .c-card__pic { position: relative; aspect-ratio: 4/3; overflow: hidden; } .c-card__pic > img, .c-card__pic > video { width: 100%; height: 100%; object-fit: cover; } .c-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } @media screen and (min-width: 768px) { .c-card__body { padding: 24px; } } .c-card__label { font-size: 12px; line-height: 1.6; } @media screen and (min-width: 1200px) { .c-card__label { font-size: 13px; line-height: 1.6; } } .c-card__label { align-self: flex-start; padding: 2px 10px; border-radius: 999px; color: #FFFFFF; background-color: #CF1715; } .c-card__title { font-size: 18px; line-height: 1.5; } @media screen and (min-width: 768px) { .c-card__title { font-size: 18px; line-height: 1.5; } } @media screen and (min-width: 1200px) { .c-card__title { font-size: 22px; line-height: 1.5; } } .c-card__text { font-size: 14px; line-height: 1.8; } @media screen and (min-width: 768px) { .c-card__text { font-size: 15px; line-height: 1.8; } } @media screen and (min-width: 1200px) { .c-card__text { font-size: 16px; line-height: 1.8; } } .c-card__price { margin-top: auto; font-family: "Lato", sans-serif; font-size: 22px; color: #FF8E00; } .c-card__price small { color: #949898; font-family: "M PLUS Rounded 1c", sans-serif; } .c-card--numbered { position: relative; } .c-card--numbered .c-card__num { position: absolute; top: 12px; left: 12px; z-index: 1; font-family: "Lato", sans-serif; font-size: 32px; line-height: 1; color: #76A9B7; } /****************************************************************************** * * お客様の声（吹き出し） * ******************************************************************************/ .c-voice { display: flex; gap: 12px; align-items: flex-start; } .c-voice__avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .c-voice__avatar img { width: 100%; height: 100%; object-fit: cover; } .c-voice__balloon { position: relative; background-color: #FFFFFF; border-radius: 8px; padding: 16px; flex: 1; text-align: left; } .c-voice__balloon::before { content: ""; position: absolute; top: 18px; left: -8px; border-style: solid; border-width: 6px 8px 6px 0; border-color: transparent #FFFFFF transparent transparent; } .c-voice__name { font-size: 12px; line-height: 1.6; } @media screen and (min-width: 1200px) { .c-voice__name { font-size: 13px; line-height: 1.6; } } .c-voice__name { color: #949898; margin-top: 8px; display: block; } /****************************************************************************** * * FAQ（質問ボタン一覧 ＋ 回答モーダル） * ※ 回答は .c-modal の中に入る。構造化データ（FAQPage）と文言を必ず一致させる * ******************************************************************************/ .c-faq { display: grid; gap: 16px; } @media screen and (min-width: 768px) { .c-faq { gap: 24px; } } .c-faq__item { display: grid; grid-template-columns: 48px 1fr 32px; align-items: center; gap: 8px; width: 100%; min-height: 72px; padding: 14px 20px; border: 1px solid #333333; border-radius: 999px; background-color: #FFFFFF; text-align: left; cursor: pointer; transition: opacity 0.3s ease; } @media screen and (min-width: 768px) { .c-faq__item { grid-template-columns: 96px 1fr 48px; gap: 16px; min-height: 108px; padding: 16px 32px; } } .c-faq__item:hover, .c-faq__item:focus-visible { opacity: 0.8; } .c-faq__mark { justify-self: center; font-family: "Lato", sans-serif; font-size: 26px; font-weight: 400; line-height: 1; color: #333333; } @media screen and (min-width: 768px) { .c-faq__mark { font-size: 36px; } } .c-faq__q-text { font-size: 15px; font-weight: 500; line-height: 1.6; } @media screen and (min-width: 768px) { .c-faq__q-text { font-size: 20px; } } .c-faq__plus { justify-self: end; width: 32px; height: 32px; border: 1px solid #333333; border-radius: 50%; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M11 4h2v16h-2z'/%3E%3Cpath d='M4 11h16v2H4z'/%3E%3C/svg%3E") center/18px 18px no-repeat; } @media screen and (min-width: 768px) { .c-faq__plus { width: 40px; height: 40px; } } .c-faq__a p { font-size: 14px; line-height: 1.8; } @media screen and (min-width: 768px) { .c-faq__a p { font-size: 15px; line-height: 1.8; } } @media screen and (min-width: 1200px) { .c-faq__a p { font-size: 16px; line-height: 1.8; } } .c-faq__a p + p { margin-top: 16px; } .c-faq__a ul { margin-top: 12px; } .c-faq__a ul li { font-size: 14px; line-height: 1.8; } @media screen and (min-width: 768px) { .c-faq__a ul li { font-size: 15px; line-height: 1.8; } } @media screen and (min-width: 1200px) { .c-faq__a ul li { font-size: 16px; line-height: 1.8; } } .c-faq__a ul li { padding-left: 1em; text-indent: -1em; } .c-faq__a ul li::before { content: "・"; } /****************************************************************************** * * 料金表・仕様表 * ※ SPで横スクロールさせる場合は .c-table__scroll で包む * （table単体に overflow は効かない） * ******************************************************************************/ .c-table { width: 100%; background-color: #FFFFFF; text-align: left; } .c-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; } .c-table th, .c-table td { font-size: 14px; line-height: 1.8; } @media screen and (min-width: 768px) { .c-table th, .c-table td { font-size: 15px; line-height: 1.8; } } @media screen and (min-width: 1200px) { .c-table th, .c-table td { font-size: 16px; line-height: 1.8; } } .c-table th, .c-table td { padding: 12px 16px; border-bottom: 1px solid #DDDDDD; vertical-align: middle; } .c-table th { font-weight: 700; background-color: #F6F5EE; white-space: nowrap; } .c-table__price { font-family: "Lato", sans-serif; font-size: 1.15em; color: #FF8E00; white-space: nowrap; text-align: right; } .c-table__strike { color: #949898; text-decoration: line-through; font-size: 0.85em; } .c-table tr:last-child th, .c-table tr:last-child td { border-bottom: none; } /****************************************************************************** * * 流れ（ステップ） * ******************************************************************************/ .c-step { display: grid; gap: 24px; text-align: left; counter-reset: step; } .c-step__item { position: relative; background-color: #FFFFFF; border-radius: 16px; padding: 20px 20px 20px 64px; counter-increment: step; } .c-step__item::before { content: counter(step, decimal-leading-zero); position: absolute; left: 16px; top: 20px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-family: "Lato", sans-serif; font-size: 15px; color: #FFFFFF; background-color: #D9B82D; } .c-step__item:not(:last-child)::after { content: ""; position: absolute; left: 33px; top: 60px; bottom: -24px; width: 1px; background-color: #DDDDDD; } .c-step__title { font-size: 18px; line-height: 1.5; } @media screen and (min-width: 768px) { .c-step__title { font-size: 18px; line-height: 1.5; } } @media screen and (min-width: 1200px) { .c-step__title { font-size: 22px; line-height: 1.5; } } .c-step__title { margin-bottom: 8px; } .c-step__text { font-size: 14px; line-height: 1.8; } @media screen and (min-width: 768px) { .c-step__text { font-size: 15px; line-height: 1.8; } } @media screen and (min-width: 1200px) { .c-step__text { font-size: 16px; line-height: 1.8; } } /****************************************************************************** * * 症例モーダル（利用者の声「詳しくはこちら」） * ※ 開閉は script.js（data-modal-open / data-modal-close） * ******************************************************************************/ .c-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; } .c-modal[hidden] { display: none; } .c-modal__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.55); } .c-modal__panel { position: relative; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; padding: 24px 20px 28px; border-radius: 16px; background-color: #FFFFFF; } @media screen and (min-width: 768px) { .c-modal__panel { padding: 32px 32px 36px; } } .c-modal__head { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 16px; } @media screen and (min-width: 768px) { .c-modal__head { grid-template-columns: 132px 1fr; gap: 24px; } } .c-modal__figure img { width: 100%; height: auto; } .c-modal__title { font-size: 17px; font-weight: 700; line-height: 1.5; } @media screen and (min-width: 768px) { .c-modal__title { font-size: 21px; } } .c-modal__age { margin-top: 8px; font-size: 14px; } @media screen and (min-width: 768px) { .c-modal__age { font-size: 16px; } } .c-modal__dots { margin-top: 12px; color: #333333; font-size: 12px; letter-spacing: 0.2em; text-align: center; } .c-modal__table { width: 100%; margin-top: 12px; border-collapse: collapse; } .c-modal__table th, .c-modal__table td { padding: 14px 12px; border-bottom: 1px solid #DDDDDD; font-size: 14px; line-height: 1.8; text-align: left; vertical-align: middle; } @media screen and (min-width: 768px) { .c-modal__table th, .c-modal__table td { padding: 18px 16px; font-size: 15px; } } .c-modal__table th { width: 34%; background-color: #F5F5F5; font-weight: 700; text-align: center; } @media screen and (min-width: 768px) { .c-modal__table th { width: 28%; } } .c-modal__note { font-size: 12px; line-height: 1.6; } @media screen and (min-width: 1200px) { .c-modal__note { font-size: 13px; line-height: 1.6; } } .c-modal__note { margin-top: 16px; color: #949898; } .c-modal__close { display: block; width: 100%; max-width: 420px; min-height: 52px; margin: 24px auto 0; border: none; border-radius: 999px; background-color: #CF1715; color: #FFFFFF; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 17px; font-weight: 700; } /* モーダル表示中は背面をスクロールさせない */ body.is-modal-open { overflow: hidden; } /****************************************************************************** * * Project — このページ固有のスタイル（.p-*） * 東京銀座むつみ薬局 LP * * セクション順： * fv → catch → problem/intro → feature → band → change → compare * → policy → price → flow → message → voice → faq → access → contact * ******************************************************************************/ /* =========================================================================== * 1. FV * ======================================================================== */ .p-fv__image img { width: 100%; height: auto; } @media screen and (min-width: 768px) { .p-fv__image img { aspect-ratio: 1440/840; object-fit: cover; object-position: center; } } /* FV直下のキャッチ（相談実績／あきらめる前に相談してみませんか？） SPはFV画像に同じ文言が焼き込まれているため出さない（本家と同じ挙動） */ .p-catch { display: none; background-color: #F7F6E8; } @media screen and (min-width: 768px) { .p-catch { display: block; padding-block: 40px; } } .p-catch__image { width: 100%; max-width: 1440px; margin-inline: auto; } /* =========================================================================== * 2. 共感・課題提起 * ======================================================================== */ .p-problem__visual { background-color: #949898; } .p-problem__visual img { width: 100%; max-width: 800px; margin-inline: auto; } .p-problem__arrow { padding-block: 24px; text-align: center; } .p-problem__arrow img { width: 102px; margin-inline: auto; } @media screen and (min-width: 768px) { .p-problem__arrow img { width: 220px; } } .p-problem__sp img { width: 100%; } /* 1人1人のお悩みに合わせた漢方薬（枠付きボックス） */ .p-intro { max-width: 1080px; margin-inline: auto; border: 1px solid #D9B82D; padding: 32px 20px 40px; margin-bottom: 24px; } @media screen and (min-width: 768px) { .p-intro { padding: 48px 40px 56px; margin-bottom: 40px; } } .p-intro__head { position: relative; text-align: center; } .p-intro__eyebrow { font-size: 13px; line-height: 1.6; } @media screen and (min-width: 768px) { .p-intro__eyebrow { font-size: 16px; } } .p-intro__title { margin-top: 8px; font-size: 20px; font-weight: 800; line-height: 1.5; } @media screen and (min-width: 768px) { .p-intro__title { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: 52px; font-size: 32px; } } .p-intro__title-text { color: #D9872D; display: flex; flex: none; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; width: auto; max-width: 100%; height: 100%; } .p-intro__diamond { position: absolute; top: 0; width: 46px; } .p-intro__diamond:first-of-type { left: 0; } .p-intro__diamond:last-of-type { right: 0; } @media screen and (min-width: 768px) { .p-intro__diamond { position: static; flex-shrink: 0; width: 106px; } } .p-intro__dots { margin-top: 12px; color: #D9B82D; font-size: 12px; letter-spacing: 0.35em; line-height: 1; } .p-intro__text { font-size: 14px; line-height: 1.8; } @media screen and (min-width: 768px) { .p-intro__text { font-size: 15px; line-height: 1.8; } } @media screen and (min-width: 1200px) { .p-intro__text { font-size: 16px; line-height: 1.8; } } .p-intro__text { margin-top: 24px; } .p-intro__text strong { color: #D9872D; font-weight: 700; } .p-intro__figure { margin-top: 24px; } .p-intro__figure img { width: 100%; max-width: 720px; margin-inline: auto; aspect-ratio: 720/500; object-fit: cover; object-position: 50% 100%; } .p-intro__note { font-size: 12px; line-height: 1.6; } @media screen and (min-width: 1200px) { .p-intro__note { font-size: 13px; line-height: 1.6; } } .p-intro__note { margin-top: 20px; color: #949898; } /* =========================================================================== * 3. 選ばれる6つのポイント * ======================================================================== */ .p-feature { background-color: #FFFFFF; padding-block: 48px; } @media screen and (min-width: 768px) { .p-feature { padding-block: 80px; } } .p-feature__head { text-align: center; margin-bottom: 32px; } @media screen and (min-width: 768px) { .p-feature__head { margin-bottom: 48px; } } .p-feature__eyebrow { font-size: 18px; font-weight: 500; line-height: 1.5; } @media screen and (min-width: 768px) { .p-feature__eyebrow { font-size: 28px; } } .p-feature__title { font-size: 30px; font-weight: 800; line-height: 1.4; } @media screen and (min-width: 768px) { .p-feature__title { font-size: 48px; } } .p-feature__list { display: grid; gap: 24px; } @media screen and (min-width: 768px) { .p-feature__list { gap: 40px; } } .p-feature__item { display: grid; gap: 16px; padding: 24px 20px 28px; border-radius: 20px; background-color: #FFFFFF; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08); } @media screen and (min-width: 768px) { .p-feature__item { grid-template-columns: 1fr 484px; align-items: center; gap: 40px; padding: 40px; border-radius: 24px; } } @media screen and (min-width: 768px) { .p-feature__item--reverse { grid-template-columns: 484px 1fr; } .p-feature__item--reverse .p-feature__body { order: 2; } .p-feature__item--reverse .p-feature__figure { order: 1; } } .p-feature__num { display: flex; justify-content: flex-start; width: auto; max-width: 100%; height: auto; color: #333333; font-family: "Lato", sans-serif; font-size: 20px; font-weight: 900; line-height: 1.4; text-align: left; } .p-feature__name { margin-top: 4px; color: #D9B82D; font-size: 22px; font-weight: 700; line-height: 1.4; } @media screen and (min-width: 768px) { .p-feature__name { font-size: 32px; } } .p-feature__text { font-size: 14px; line-height: 1.8; } @media screen and (min-width: 768px) { .p-feature__text { font-size: 15px; line-height: 1.8; } } @media screen and (min-width: 1200px) { .p-feature__text { font-size: 16px; line-height: 1.8; } } .p-feature__text { margin-top: 16px; } .p-feature__text em { color: #CF1715; font-style: normal; font-weight: 700; } .p-feature__figure img { width: calc(100% - 12px); aspect-ratio: 3/2; object-fit: cover; border-radius: 16px; box-shadow: 12px 12px 0 0 #D9B82D; } @media screen and (min-width: 768px) { .p-feature__figure img { border-radius: 20px; } } /* =========================================================================== * 4-1. 「漢方で出産しやすい身体作りを」帯 * ======================================================================== */ .p-band { position: relative; background-image: url("../images/bg_band.webp"); background-size: cover; background-position: center; padding-block: 32px; text-align: center; } @media screen and (min-width: 768px) { .p-band { padding-block: 40px; } } .p-band__wedge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 165px; } @media screen and (min-width: 768px) { .p-band__wedge { width: 264px; } } .p-band__eyebrow { font-size: 20px; font-weight: 700; line-height: 1.5; } @media screen and (min-width: 768px) { .p-band__eyebrow { font-size: 33px; } } .p-band__title { margin-top: 6px; font-size: 23px; font-weight: 700; line-height: 1.5; } @media screen and (min-width: 768px) { .p-band__title { font-size: 40px; } } .p-band__title em { display: inline-block; margin-right: 8px; padding: 0 8px; border: 2px solid #333333; background-color: #FFFFFF; color: #EE9C51; font-style: normal; font-weight: 800; } .p-band__dots { margin-top: 10px; color: #D9B82D; font-size: 14px; letter-spacing: 0.3em; line-height: 1; } /* =========================================================================== * 4-2. 「漢方」で何が変わるのか？ * ======================================================================== */ .p-change { background-image: url("../images/bg_change.webp"); background-size: cover; background-position: center; padding-block: 48px; } @media screen and (min-width: 768px) { .p-change { padding-block: 80px; } } .p-change__head { text-align: center; margin-bottom: 32px; } @media screen and (min-width: 768px) { .p-change__head { margin-bottom: 48px; } } .p-change__title { font-size: 26px; font-weight: 800; line-height: 1.5; } @media screen and (min-width: 768px) { .p-change__title { font-size: 36px; } } .p-change__dots { margin-top: 10px; color: #D9B82D; font-size: 11px; letter-spacing: 0.3em; line-height: 1; } @media screen and (min-width: 768px) { .p-change__dots { font-size: 13px; } } .p-change__list { display: grid; gap: 20px; } @media screen and (min-width: 768px) { .p-change__list { gap: 32px; } } .p-change__item { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background-color: #FFFFFF; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); } @media screen and (min-width: 768px) { .p-change__item { grid-template-columns: 489px 1fr; align-items: center; gap: 40px; padding: 32px; border-radius: 20px; } } @media screen and (min-width: 768px) { .p-change__item--reverse { grid-template-columns: 1fr 489px; } .p-change__item--reverse .p-change__figure { order: 2; } .p-change__item--reverse .p-change__name { order: 1; } } .p-change__figure img { width: 100%; aspect-ratio: 3/2; object-fit: cover; } .p-change__name { font-size: 20px; font-weight: 800; line-height: 1.5; text-align: center; } @media screen and (min-width: 768px) { .p-change__name { font-size: 26px; } } .p-change__arrow { padding-block: 24px; text-align: center; } .p-change__arrow img { width: 102px; margin-inline: auto; } @media screen and (min-width: 768px) { .p-change__arrow img { width: 220px; } } .p-change__conclusion { padding: 16px 20px; background-color: #FFFFFF; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08); font-size: 15px; font-weight: 500; line-height: 1.6; text-align: center; } @media screen and (min-width: 768px) { .p-change__conclusion { padding: 20px 32px; font-size: 20px; } } /* =========================================================================== * 5. 漢方不妊治療と医療不妊治療 * ======================================================================== */ .p-compare { background-image: url("../images/bg_compare.webp"); background-size: cover; background-position: center; padding-block: 48px; } @media screen and (min-width: 768px) { .p-compare { padding-block: 80px; } } .p-compare__title { margin-bottom: 24px; text-align: center; } .p-compare__title img { margin-inline: auto; width: 100%; max-width: 360px; } @media screen and (min-width: 768px) { .p-compare__title img { max-width: 928px; } } .p-compare__cards { display: grid; gap: 24px; } @media screen and (min-width: 768px) { .p-compare__cards { grid-template-columns: repeat(2, 1fr); gap: 48px; max-width: 990px; margin-inline: auto; } } .p-compare__card { padding: 20px; border-radius: 16px; background-color: #FFFFFF; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08); text-align: center; } @media screen and (min-width: 768px) { .p-compare__card { padding: 32px 40px 40px; border-radius: 20px; } } .p-compare__figure img { width: 100%; aspect-ratio: 391/220; object-fit: cover; } .p-compare__name { margin-top: 16px; font-size: 20px; font-weight: 500; line-height: 1.4; } @media screen and (min-width: 768px) { .p-compare__name { font-size: 24px; } } .p-compare__name em { font-size: 1.25em; font-style: normal; font-weight: 700; } .p-compare__points { margin-top: 16px; } .p-compare__points li { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; padding-block: 12px; border-bottom: 1px solid #DDDDDD; text-align: center; font-size: 13px; line-height: 1.5; } @media screen and (min-width: 768px) { .p-compare__points li { grid-template-columns: 76px 1fr; font-size: 14px; } } .p-compare__no { font-family: "Lato", sans-serif; font-size: 20px; font-weight: 700; line-height: 1; } @media screen and (min-width: 768px) { .p-compare__no { font-size: 24px; } } .p-compare { /* 医療側は箇条書きの頭を揃える（マーカーなしのため中央寄せだと行頭がガタつく） */ } .p-compare__label { text-align: left; font-size: 16px; } @media screen and (min-width: 768px) { .p-compare__label { font-size: 18px; } } .p-compare__marker { justify-self: start; background: linear-gradient(transparent 60%, rgba(217, 184, 45, 0.4) 60%); font-size: 16px; font-weight: 500; } @media screen and (min-width: 768px) { .p-compare__marker { font-size: 18px; } } .p-compare__arrow { margin-top: 12px; font-size: 14px; line-height: 1; } .p-compare__result { margin-top: 8px; font-size: 16px; font-weight: 700; line-height: 1.5; } @media screen and (min-width: 768px) { .p-compare__result { font-size: 18px; } } .p-compare__card--kampo .p-compare__name em { color: #CF1715; } .p-compare__card--kampo .p-compare__arrow, .p-compare__card--kampo .p-compare__result { color: #D9B82D; } .p-compare__card--medical .p-compare__name em { color: #76A9B7; } .p-compare__card--medical .p-compare__arrow, .p-compare__card--medical .p-compare__result { color: #76A9B7; } .p-compare__down { padding-block: 24px; text-align: center; } .p-compare__down img { width: 102px; margin-inline: auto; } @media screen and (min-width: 768px) { .p-compare__down img { width: 220px; } } .p-compare__conclusion { padding: 20px; background-color: #FFFFFF; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08); font-size: 17px; font-weight: 500; line-height: 1.6; text-align: center; } @media screen and (min-width: 768px) { .p-compare__conclusion { max-width: 990px; margin-inline: auto; padding: 32px; font-size: 26px; } } .p-compare__conclusion em { font-style: normal; font-weight: 700; } .p-compare__conclusion strong { color: #CF1715; font-size: 1.5em; } .p-compare__conclusion-unit { display: inline-block; } .p-compare__conclusion-kampo { color: #D9B82D; } .p-compare__conclusion-medical { color: #76A9B7; } /* =========================================================================== * 6. 不妊治療方針 * ======================================================================== */ .p-policy { background-color: #F6F5EE; padding-block: 48px; } @media screen and (min-width: 768px) { .p-policy { padding-block: 40px; } } .p-policy__head { text-align: center; margin-bottom: 24px; } .p-policy__eyebrow { font-size: 13px; line-height: 1.6; } @media screen and (min-width: 768px) { .p-policy__eyebrow { font-size: 16px; } } .p-policy__title { display: inline-flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 800; line-height: 1.4; } @media screen and (min-width: 768px) { .p-policy__title { font-size: 34px; } } .p-policy__title::before, .p-policy__title::after { content: ""; width: 100px; height: 3px; background-image: radial-gradient(#D9B82D 1.5px, transparent 1.5px); background-size: 12px 3px; } @media screen and (min-width: 768px) { .p-policy__title::before, .p-policy__title::after { width: 170px; } } .p-policy__list { display: grid; gap: 24px; max-width: 900px; margin-inline: auto; } @media screen and (min-width: 768px) { .p-policy__list { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .p-policy__item { text-align: center; } .p-policy__icon { display: grid; place-items: center; width: 132px; height: 132px; margin-inline: auto; border-radius: 50%; background-color: #FFFFFF; } @media screen and (min-width: 768px) { .p-policy__icon { width: 176px; height: 176px; } } .p-policy__icon img { width: 60%; height: auto; } .p-policy__name { margin-top: 12px; font-size: 17px; font-weight: 700; line-height: 1.5; } @media screen and (min-width: 768px) { .p-policy__name { font-size: 18px; } } .p-policy__text { margin-top: 8px; font-size: 14px; line-height: 1.8; text-align: left; } .p-policy__text em { color: #CF1715; font-style: normal; font-weight: 700; } /* =========================================================================== * 7. 料金目安 * ======================================================================== */ .p-price { position: relative; background-image: url("../images/bg_price.webp"); background-size: cover; background-position: center; padding-block: 32px; } @media screen and (min-width: 768px) { .p-price { padding-block: 40px; } } .p-price::before { content: ""; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.65); pointer-events: none; } .p-price__panel { position: relative; max-width: 1076px; margin-inline: auto; } .p-price__panel img { width: 100%; height: auto; } .p-price__buttons { position: absolute; top: 75%; bottom: 4%; left: 10.5%; right: 10.5%; display: grid; align-content: center; gap: 8px; } @media screen and (min-width: 768px) { .p-price__buttons { top: 22%; bottom: auto; left: auto; right: 3.5%; width: 33%; gap: 20px; } } .p-price__buttons .c-btn { max-width: none; min-height: 44px; padding-block: 6px; } @media screen and (min-width: 768px) { .p-price__buttons .c-btn { min-height: 56px; padding-block: 10px; } } @media screen and (min-width: 768px) { .p-price__buttons--sp { display: none; } } .p-price__buttons--pc { display: none; } @media screen and (min-width: 768px) { .p-price__buttons--pc { display: grid; } } /* =========================================================================== * 8. ご利用の流れ * ======================================================================== */ .p-flow { padding-block: 48px; } @media screen and (min-width: 768px) { .p-flow { padding-block: 80px; } } .p-flow__list { display: grid; justify-content: center; gap: 40px; } @media screen and (min-width: 768px) { .p-flow__list { grid-template-columns: repeat(6, 91px); align-items: start; gap: 40px 90px; max-width: 996px; margin-inline: auto; } } .p-flow__item { position: relative; max-width: 320px; width: 100%; margin-inline: auto; background-color: #F4F0EC; } @media screen and (min-width: 768px) { .p-flow__item { max-width: none; } .p-flow__item:nth-child(1) { grid-column: 1/3; } .p-flow__item:nth-child(2) { grid-column: 3/5; } .p-flow__item:nth-child(3) { grid-column: 5/7; } .p-flow__item:nth-child(4) { grid-column: 2/4; } .p-flow__item:nth-child(5) { grid-column: 4/6; } } @media screen and (min-width: 768px) { .p-flow__item:not(:nth-child(3)):not(:nth-child(5))::after { content: ""; position: absolute; top: 99px; right: -60px; width: 0; height: 0; border-style: solid; border-width: 16px 0 16px 24px; border-color: transparent transparent transparent #333333; } } .p-flow__figure { position: relative; aspect-ratio: 272/198; background-size: cover; background-position: center; } .p-flow__no { position: absolute; top: 4px; left: 12px; display: flex; justify-content: center; width: auto; max-width: 100%; height: auto; color: #FFFFFF; font-family: "Roboto", sans-serif; font-size: 64px; font-weight: 700; line-height: 1.4; text-align: center; text-shadow: 3px 3px 0 #D9B82D; } .p-flow__name { display: grid; place-items: center; min-height: 62px; padding: 8px 12px; background-color: #D9B82D; color: #FFFFFF; font-size: 17px; font-weight: 700; line-height: 1.4; text-align: center; } .p-flow__text { padding: 14px 16px 20px; font-size: 14px; line-height: 1.8; } .p-flow__text em { color: #CF1715; font-style: normal; font-weight: 700; } /* =========================================================================== * 9. 薬局長・代表メッセージ * ======================================================================== */ .p-message { background-color: #F4F0EB; padding-block: 48px; } @media screen and (min-width: 768px) { .p-message { padding-block: 80px; } } .p-message__panel { position: relative; max-width: 960px; margin-inline: auto; padding: 32px 20px 40px; background-color: #FFFFFF; } @media screen and (min-width: 768px) { .p-message__panel { padding: 56px 132px 64px; } } .p-message__panel + .p-message__panel { margin-top: 56px; } @media screen and (min-width: 768px) { .p-message__panel + .p-message__panel { margin-top: 80px; } } .p-message__panel::before, .p-message__panel::after { content: ""; position: absolute; width: 66px; height: 66px; background: url("../images/deco_corner.svg") center/contain no-repeat; } @media screen and (min-width: 768px) { .p-message__panel::before, .p-message__panel::after { width: 131px; height: 131px; } } .p-message__panel::before { top: -16px; right: -16px; } @media screen and (min-width: 768px) { .p-message__panel::before { top: -20px; right: -20px; } } .p-message__panel::after { bottom: -16px; left: -16px; transform: rotate(180deg); } @media screen and (min-width: 768px) { .p-message__panel::after { bottom: -20px; left: -20px; } } .p-message__head { display: grid; gap: 16px; } @media screen and (min-width: 768px) { .p-message__head { grid-template-columns: 216px 1fr; align-items: center; gap: 48px; } } .p-message__photo img { width: 100%; max-width: 216px; margin-inline: auto; aspect-ratio: 216/284; object-fit: cover; } .p-message__title { color: #DA872C; font-size: 22px; font-weight: 800; line-height: 1.5; } @media screen and (min-width: 768px) { .p-message__title { font-size: 30px; } } .p-message__dots { margin-top: 8px; color: #D9B82D; font-size: 11px; letter-spacing: 0.3em; line-height: 1; } .p-message__name { margin-top: 12px; font-size: 16px; line-height: 1.6; } @media screen and (min-width: 768px) { .p-message__name { font-size: 20px; } } .p-message__name:first-child { margin-top: 0; } .p-message__body { margin-top: 24px; } @media screen and (min-width: 768px) { .p-message__body { margin-top: 40px; } } .p-message__body p { font-size: 14px; line-height: 1.8; } @media screen and (min-width: 768px) { .p-message__body p { font-size: 15px; line-height: 1.8; } } @media screen and (min-width: 1200px) { .p-message__body p { font-size: 16px; line-height: 1.8; } } .p-message__body p + p { margin-top: 20px; } .p-message__more { margin-top: 20px; } .p-message__more[hidden] { display: none; } .p-message__more-wrap { margin-top: 24px; text-align: center; } .p-message__subtitle { font-size: 16px; font-weight: 500; line-height: 1.6; } @media screen and (min-width: 768px) { .p-message__subtitle { font-size: 18px; } } .p-message__history { margin-top: 16px; } .p-message__history dt { margin-top: 20px; font-size: 15px; font-weight: 500; line-height: 1.6; } @media screen and (min-width: 768px) { .p-message__history dt { font-size: 16px; } } .p-message__history dd { font-size: 15px; line-height: 1.7; } @media screen and (min-width: 768px) { .p-message__history dd { font-size: 16px; } } /* =========================================================================== * 10. 利用者の声 * ======================================================================== */ .p-voice__pc { background-image: url("../images/bg_voice_pc.webp"); background-size: cover; background-position: center; padding-block: 40px; } .p-voice__inner { display: grid; grid-template-columns: 504px 1fr; align-items: center; gap: 26px; } .p-voice__lead { padding: 28px 24px; border: 1px solid #D9B82D; background-color: rgba(255, 255, 255, 0.73); } .p-voice__lead-title { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 36px; font-weight: 700; line-height: 1.4; } .p-voice__diamond { width: 59px; flex-shrink: 0; } .p-voice__lead-dots { margin-top: 10px; color: #D9B82D; font-size: 11px; letter-spacing: 0.3em; line-height: 1; text-align: center; } .p-voice__lead-text { margin-top: 16px; font-size: 14px; line-height: 1.8; } .p-voice__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 33px; } .p-voice__card { display: flex; flex-direction: column; padding: 12px 12px 16px; border-radius: 12px; background-color: #FFFFFF; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .p-voice__figure img { width: 100%; height: auto; } .p-voice__name { margin-top: 10px; font-size: 17px; font-weight: 700; line-height: 1.4; text-align: center; } .p-voice__age { margin-top: auto; padding-top: 8px; font-size: 13px; text-align: right; } .p-voice__more { display: block; width: 100%; min-height: 40px; margin-top: 10px; padding: 6px 8px; border: none; border-radius: 999px; background-color: #D9B82D; color: #FFFFFF; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 14px; font-weight: 500; } .p-voice__more span { margin-left: 6px; font-size: 0.8em; } .p-voice { /* --- SP：お喜びのご報告（5件） --- */ } .p-voice__sp { position: relative; background-image: url("../images/bg_voice_sp.webp"); background-size: cover; background-position: center; padding-block: 40px; } .p-voice__sp::before { content: ""; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.65); pointer-events: none; } .p-voice__sp > .l-container { position: relative; } .p-voice__head { text-align: center; margin-bottom: 24px; } .p-voice__dots { color: #D9B82D; font-size: 11px; letter-spacing: 0.3em; line-height: 1; } .p-voice__eyebrow { margin-top: 8px; font-size: 16px; line-height: 1.5; } .p-voice__title { margin-bottom: 8px; font-size: 26px; font-weight: 800; line-height: 1.4; } .p-voice__list { display: grid; gap: 24px; } .p-voice__row { padding: 20px 16px 24px; border-radius: 16px; background-color: #FFFFFF; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); text-align: center; } .p-voice__row-figure img { width: 200px; margin-inline: auto; } .p-voice__row-name { margin-top: 12px; font-size: 17px; font-weight: 700; line-height: 1.5; } .p-voice__row-age { margin-top: 8px; font-size: 13px; } .p-voice__row-text { margin-top: 8px; font-size: 14px; line-height: 1.7; } .p-voice__disclaimer { font-size: 12px; line-height: 1.6; } @media screen and (min-width: 1200px) { .p-voice__disclaimer { font-size: 13px; line-height: 1.6; } } .p-voice__disclaimer { max-width: 1176px; margin: 12px auto 0; padding-inline: 16px; color: #949898; } /* =========================================================================== * 11. よくある質問 * ======================================================================== */ .p-faq { padding-block: 48px; } @media screen and (min-width: 768px) { .p-faq { padding-block: 80px; } } /* =========================================================================== * 12. 店舗紹介 * ======================================================================== */ .p-access { background-color: #F4F0EC; padding-block: 48px; } @media screen and (min-width: 768px) { .p-access { padding-block: 80px; } } .p-access__inner { display: grid; gap: 24px; } @media screen and (min-width: 768px) { .p-access__inner { grid-template-columns: 563px 1fr; align-items: center; gap: 32px; max-width: 1060px; margin-inline: auto; } } .p-access__figure img { width: 100%; aspect-ratio: 3/2; object-fit: cover; } .p-access__table a { color: #333333; font-size: inherit; line-height: inherit; } .p-access__note { margin-top: 8px; font-size: 14px; line-height: 1.6; } .p-access__note strong { color: #CF1715; } .p-access__map { margin-top: 16px; } .p-access__map iframe { display: block; width: 100%; height: 240px; border: 0; border-radius: 8px; } @media screen and (min-width: 768px) { .p-access__map iframe { height: 280px; } } .p-access__banner { margin-top: 40px; text-align: center; } .p-access__banner img { width: 100%; max-width: 528px; margin-inline: auto; } /* =========================================================================== * 13. 無料相談予約フォーム * ======================================================================== */ .p-contact { background-color: #F5F5F5; padding-block: 48px; } @media screen and (min-width: 768px) { .p-contact { padding-block: 100px 110px; } } .p-contact__title { margin-bottom: 32px; font-size: 28px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.4; text-align: center; } @media screen and (min-width: 768px) { .p-contact__title { margin-bottom: 48px; font-size: 40px; } } .p-contact__form { display: grid; gap: 24px; } .p-contact__field { border: none; padding: 0; margin: 0; } .p-contact__label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.4; } @media screen and (min-width: 768px) { .p-contact__label { font-size: 16px; } } .p-contact__req { display: inline-block; padding: 2px 8px; border-radius: 3px; background-color: #FF8E00; color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } .p-contact__input, .p-contact__textarea { width: 100%; padding: 12px 14px; border: 1px solid #DDDDDD; border-radius: 4px; background-color: #FFFFFF; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 16px; line-height: 1.6; color: #333333; } .p-contact__input { min-height: 52px; } .p-contact__textarea { height: 302px; max-width: 100%; padding: 10px; font-weight: 400; letter-spacing: 0; } .p-contact__textarea::placeholder { color: #949898; } .p-contact__check { display: flex; align-items: center; gap: 0; padding-block: 6px; padding-left: 20px; font-size: 15px; cursor: pointer; } .p-contact__check input[type=checkbox], .p-contact__check input[type=radio] { -webkit-appearance: none; appearance: none; flex: none; width: 15px; height: 15px; max-width: calc(100% - 10px); margin: 0 10px 0 0; border: 1px solid #DDDDDD; border-radius: 2px; background-color: #FFFFFF; cursor: pointer; } .p-contact__check input[type=checkbox]:checked, .p-contact__check input[type=radio]:checked { border-color: #FF8E00; background-color: #FF8E00; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.3 12.4 2.2 8.3l1.5-1.5 2.6 2.6 6-6L13.8 5z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px 11px; } .p-contact__check input[type=radio] { border-radius: 50%; } .p-contact__check input[type=radio]:checked { background-image: none; box-shadow: inset 0 0 0 3px #FFFFFF; } .p-contact__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; } .p-contact__line img { width: 116px; height: auto; } .p-contact__subtitle { font-size: 17px; font-weight: 700; line-height: 1.4; } .p-contact__datetime { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; } @media screen and (min-width: 768px) { .p-contact__datetime { gap: 8px; } } .p-contact__year { flex: none; font-size: 15px; } @media screen and (min-width: 768px) { .p-contact__year { font-size: 20px; } } .p-contact__select { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 8px 6px; border: 1px solid #DDDDDD; border-radius: 4px; background-color: #FFFFFF; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 16px; color: #333333; } @media screen and (min-width: 768px) { .p-contact__select { flex: none; width: 96px; padding: 8px 10px; } } .p-contact__privacy { font-size: 14px; line-height: 1.8; } @media screen and (min-width: 768px) { .p-contact__privacy { font-size: 15px; line-height: 1.8; } } @media screen and (min-width: 1200px) { .p-contact__privacy { font-size: 16px; line-height: 1.8; } } .p-contact__submit { margin-top: 8px; text-align: center; } .p-contact__submit .c-btn { max-width: 300px; } /****************************************************************************** * * Utility（!important は使わない） * ※ 微調整をHTML側で済ませたいときだけ使う。多用するならcomponent化を検討 * ******************************************************************************/ /* テキスト配置 */ .u-text-left { text-align: left; } .u-text-center { text-align: center; } .u-text-right { text-align: right; } /* SPは左寄せ・PCは中央（長い日本語本文の可読性のため推奨） */ .u-text-sp-left { text-align: left; } @media screen and (min-width: 768px) { .u-text-sp-left { text-align: center; } } /* 表示制御 */ .u-hidden { display: none; } .u-block { display: block; } .u-inline-block { display: inline-block; } /* ウェイト */ .u-fw-bold { font-weight: 700; } .u-fw-medium { font-weight: 500; } .u-fw-regular { font-weight: 400; } /* マージン（8pxグリッド） */ .u-mt-8 { margin-top: 8px; } .u-mt-16 { margin-top: 16px; } .u-mt-24 { margin-top: 24px; } .u-mt-32 { margin-top: 32px; } .u-mt-40 { margin-top: 40px; } .u-mb-0 { margin-bottom: 0; } .u-mb-8 { margin-bottom: 8px; } .u-mb-16 { margin-bottom: 16px; } .u-mb-24 { margin-bottom: 24px; } .u-mb-32 { margin-bottom: 32px; } .u-mb-40 { margin-bottom: 40px; } /* 幅 */ .u-w-100 { width: 100%; } /* 色 */ .u-color-main { color: #D9B82D; } .u-color-sub { color: #CF1715; } .u-color-accent { color: #FF8E00; } .u-color-white { color: #FFFFFF; } .u-color-weak { color: #949898; } /* 背景 */ .u-bg-main { background-color: #D9B82D; } .u-bg-alt { background-color: #F6F5EE; } .u-bg-white { background-color: #FFFFFF; } /* 改行制御 */ .u-nowrap { white-space: nowrap; } /* 蛍光ペン風マーカー（訴求の強調に使用） */ .u-marker { background: linear-gradient(transparent 60%, #76A9B7 60%); font-weight: 700; } /* 視覚的にのみ非表示（スクリーンリーダーは読み上げる） */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /****************************************************************************** * * アニメーション * ※ スクロール連動は IntersectionObserver（script.js）で is-inview を付与する * ※ prefers-reduced-motion は _reset.scss で一括停止済み * ******************************************************************************/ /* --- 1. フェードイン（スクロール連動の基本形） ------------------------- */ .a-fade-in { opacity: 0; transform: translateY(32px); transition: opacity 0.8s ease, transform 0.8s ease; } .a-fade-in.is-inview { opacity: 1; transform: translateY(0); } .a-fade-in[style*="--delay"] { transition-delay: var(--delay); } /* --- 2. 左右からスライドイン ------------------------------------------- */ .a-slide-left, .a-slide-right { opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; } .a-slide-left.is-inview, .a-slide-right.is-inview { opacity: 1; transform: translateX(0); } .a-slide-left { transform: translateX(-32px); } .a-slide-right { transform: translateX(32px); } /* --- 3. CTAボタンの注視誘導（ふわっと拡縮） ---------------------------- */ @keyframes a-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } .a-pulse { animation: a-pulse 2.4s ease-in-out infinite; } /* --- 4. 上下の動き（スクロール誘導矢印など） --------------------------- */ @keyframes a-updown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .a-updown { animation: a-updown 1.6s ease-in-out infinite; } /* --- 5. スクロールアイコン（FV下部） ----------------------------------- */ @keyframes a-scroll-dot { 0% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } } .a-scroll-icon { position: relative; text-align: center; font-family: "Lato", sans-serif; font-size: 10px; letter-spacing: 0.1em; color: #333333; } .a-scroll-icon::before { content: ""; display: block; width: 18px; height: 30px; margin: 0 auto 6px; border: 1px solid currentColor; border-radius: 50px; } .a-scroll-icon::after { content: ""; display: block; width: 4px; height: 4px; margin: -24px auto 0; border-radius: 50%; background-color: currentColor; animation: a-scroll-dot 2s infinite; }