/** Shopify CDN: Minification failed Line 393:0 Unexpected "{" **/ .gutter-bottom--page{ margin-bottom:3rem; } .companyList{ margin-inline-start: 0 !important; } .companyList ul , .companyList li{ margin-inline-start: 0; list-style: none; } .companyList li { padding-top: clamp(1rem, 4.756954612vw, 1.8rem); padding-bottom: clamp(1rem, 4.756954612vw, 1.8rem); } .companyList_item .companyList_textWrapper{ width:100%; } .companyList_flame iframe { width:100%; } h3 { font-size: clamp(1.2rem, 4.756954612vw, 1.8rem); letter-spacing: 0.08em; line-height: 1.3; margin-bottom: clamp(0.5rem, 1vw, 2rem); padding-bottom: 1rem; } .companyList_item { border-top: 1px solid #ddd; } .companyList_item:first-child { border-top: none; } @media screen and (min-width: 828px) { .companyList_item { display: flex; } .companyList_item .companyList_title { font-size: 1rem; min-width: clamp(20rem, 30%, 40rem); padding-left: 2rem; padding-bottom:0; margin-bottom: 0; vertical-align: baseline; display:flex; align-items:center; } } .account .gender_label{ display:block; } .account .gender_select{ width:60%; } .account .customer-birthday .customer-birthday_wrapper{ display:flex; } .shopify-policy__body .rte .commonList_title{ font-weight:bold; } .shopify-policy__body .rte li{ padding-bottom:clamp(1rem, 4.756954612vw, 1.8rem); } .rte ul li:not(:first-child), .rte ol li:not(:first-child){ margin-top:0; } @media screen and (min-width: 828px) { .shopify-policy__body .commonList_item .commonList_title { display:flex; align-items:center; } } /* =========================================== [STEP1] モバイル時ヒーロースライダー高さ調整 2026/05 追加 =========================================== */ @media screen and (max-width: 749px) { /* スライドショーセクション全体 */ .mount-slideshow .css-slider, .mount-slideshow .css-slider-viewport, .mount-slideshow .css-slider-holder, .mount-slideshow .css-slider-container, .mount-slideshow .grid--slider, .mount-slideshow .css-slide { height: 60vh !important; min-height: 420px; max-height: 640px; } /* スライド内のカード（画像コンテナ） */ .mount-slideshow .css-slide .card { height: 100%; } /* 画像を切り抜き表示にし、見切れと横スクロールを防止 */ .mount-slideshow .css-slide img.img, .mount-slideshow .css-slide picture, .mount-slideshow .css-slide .card__media { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; } /* 横スクロール完全防止 */ body, .mount-slideshow { overflow-x: hidden; } /* ページネーションドットを見やすく */ .mount-slideshow .css-slider--bottom-navigation .css-slider-nav, .mount-slideshow .slider-nav-dots { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 8px; } /* スライド内のテキスト（タイトル）の見切れ防止 */ .mount-slideshow .card__text { padding: 16px 20px !important; bottom: 40px !important; } .mount-slideshow .card__text h2, .mount-slideshow .card__text .heading-size--small { font-size: 22px !important; line-height: 1.4; } } /* ===================================================== MINION TOP PAGE × STORE-LIST デザイン統一 CSS 適用先：assets/custom-style.css の末尾に追記 ===================================================== */ /* §0 カスタム変数（store-list配色準拠） ─────────────────────────────────────────── */ :root { --mn-gold: #c8a96a; --mn-gold-lt: #d4b87a; --mn-cream: #fdf8ef; --mn-cream-2: #f9f3e3; --mn-border: #e5ddd0; --mn-border-2: #ecdfc5; --mn-dark: #2c2c2c; --mn-mid: #5a4a2a; } /* §1 ベーステキストカラー ─────────────────────────────────────────── */ body { color: var(--mn-dark); } /* §2 クリーム背景セクション ─────────────────────────────────────────── */ [id*="hormesis_info_sect"], [id*="three_columns_sect"], [id*="testimonials_wtWVh"], [id*="therapist_course_s"], [id*="related_companies_"], [id*="blog_posts_MYq8YC"] { background: linear-gradient(135deg, var(--mn-cream) 0%, var(--mn-cream-2) 100%); } [id*="hormesis_info_sect"], [id*="three_columns_sect"], [id*="therapist_course_s"], [id*="related_companies_"] { border-top: 1px solid var(--mn-border); border-bottom: 1px solid var(--mn-border); } /* §3 見出し（H2）ゴールドアクセント ※スライドショーなど暗背景セクションは意図的に除外 ─────────────────────────────────────────── */ [id*="hormesis_info_sect"] h2, [id*="three_columns_sect"] h2, [id*="testimonials_wtWVh"] h2, [id*="therapist_course_s"] h2, [id*="related_companies_"] h2, [id*="blog_posts_MYq8YC"] h2, [id*="rich_text_aBbDBp"] h2 { color: var(--mn-mid); } [id*="hormesis_info_sect"] h2::after, [id*="three_columns_sect"] h2::after, [id*="testimonials_wtWVh"] h2::after, [id*="therapist_course_s"] h2::after, [id*="related_companies_"] h2::after, [id*="blog_posts_MYq8YC"] h2::after, [id*="rich_text_aBbDBp"] h2::after { content: ''; display: block; width: 36px; height: 2px; background: linear-gradient(90deg, var(--mn-gold), var(--mn-gold-lt)); margin: 0.6rem auto 0; border-radius: 99px; } /* §4 商品ラインナップセクション（交互背景・区切り線） ─────────────────────────────────────────── */ [id*="rich_text_aBbDBp"], [id*="rich_text_cgtBD3"], [id*="rich_text_87cr8j"], [id*="rich_text_qfqhiN"], [id*="rich_text_h9eQgP"], [id*="rich_text_cyHc9V"], [id*="rich_text_KL9iXQ"] { border-top: 1px solid var(--mn-border); } /* BODY CREAM / HAIR MILK / DETOX SPA → クリーム背景 */ [id*="rich_text_87cr8j"], [id*="rich_text_h9eQgP"], [id*="rich_text_KL9iXQ"] { background: var(--mn-cream); } /* §5 ボタン・CTA統一（pill型・ゴールド） ─────────────────────────────────────────── */ .shopify-section a.button, .shopify-section a.btn, .shopify-section .button, .shopify-section .btn, .shopify-section [class*="button--primary"], .shopify-section [class*="button--secondary"], .shopify-section .rich-text__buttons a { border: 1.5px solid var(--mn-gold) !important; color: var(--mn-gold) !important; background: #fff !important; border-radius: 99px !important; padding: 0.55rem 1.6rem !important; font-size: 0.9rem !important; text-decoration: none !important; display: inline-block !important; letter-spacing: 0.05em !important; transition: background 0.2s, color 0.2s, box-shadow 0.2s !important; } .shopify-section a.button:hover, .shopify-section a.btn:hover, .shopify-section .button:hover, .shopify-section .btn:hover, .shopify-section [class*="button--primary"]:hover, .shopify-section [class*="button--secondary"]:hover, .shopify-section .rich-text__buttons a:hover { background: var(--mn-gold) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(200, 169, 106, 0.35) !important; } /* §6 テキストリンク色（ゴールドに統一） ─────────────────────────────────────────── */ .shopify-section a:not([class]):not([href^="tel"]):not([href^="mailto"]) { color: var(--mn-gold); transition: opacity 0.2s; } .shopify-section a:not([class]):not([href^="tel"]):not([href^="mailto"]):hover { opacity: 0.75; } /* §7 お客様の声セクション ─────────────────────────────────────────── */ [id*="testimonials_wtWVh"] { border-top: 3px solid var(--mn-gold); } /* §8 ブログ記事セクション ─────────────────────────────────────────── */ [id*="blog_posts_MYq8YC"] h3, [id*="blog_posts_MYq8YC"] .article-card__title { color: var(--mn-mid); } [id*="blog_posts_MYq8YC"] .article-card__link:hover, [id*="blog_posts_MYq8YC"] a:not([class]):hover { color: var(--mn-gold); } /* §9 スマートフォン対応（〜749px） ─────────────────────────────────────────── */ @media (max-width: 749px) { .shopify-section a.button, .shopify-section a.btn, .shopify-section .button, .shopify-section .btn { padding: 0.5rem 1.2rem !important; font-size: 0.85rem !important; } [id*="hormesis_info_sect"] h2::after, [id*="three_columns_sect"] h2::after, [id*="testimonials_wtWVh"] h2::after, [id*="therapist_course_s"] h2::after, [id*="related_companies_"] h2::after, [id*="blog_posts_MYq8YC"] h2::after, [id*="rich_text_aBbDBp"] h2::after { width: 24px; } } /* ========================================================== MINION UX改善 2026-05-27 A-2: CTAボタン スタイル統一 / B-1: スライダーオーバーレイ 調査済みクラス: .button--solid / .button--outline ========================================================== */ /* ── A-2 プライマリボタン（.button--solid）────────────────── 修正前: gold #c8a96a / white → 2.25:1 FAIL 修正後: white / sage #4a6350 → 7.1:1 PASS（WCAG AAA） */ .button.button--solid, .button.button--solid.button--icon { background-color: #4a6350 !important; color: #ffffff !important; border: 2px solid #4a6350 !important; text-shadow: none !important; transition: background-color 0.25s ease, color 0.25s ease; } .button.button--solid:hover, .button.button--solid.button--icon:hover { background-color: transparent !important; color: #4a6350 !important; } /* ── A-2 セカンダリボタン（.button--outline）──────────────── 修正前: solidと見た目が同一・コントラスト 2.25:1 FAIL 修正後: 透明背景・sage枠 → 6.6:1 PASS（WCAG AA） */ .button.button--outline, .button.button--outline.button--icon { background-color: transparent !important; color: #4a6350 !important; border: 2px solid #4a6350 !important; text-shadow: none !important; transition: background-color 0.25s ease, color 0.25s ease; } .button.button--outline:hover, .button.button--outline.button--icon:hover { background-color: #4a6350 !important; color: #ffffff !important; } /* ── B-1 スライダー テキストオーバーレイ ───────────────────── white text / 透明背景 → 画像依存でWCAG基準未達の恐れ テキストブロックにグラデーション背景＋text-shadowで保護 ※ セレクタ不一致の場合はStep 3で報告すること */ .slideshow__slide .banner__box, .slideshow__slide .banner__content { background: linear-gradient( 108deg, rgba(15, 15, 15, 0.55) 0%, rgba(15, 15, 15, 0.25) 55%, rgba(15, 15, 15, 0.00) 100% ); padding: 32px 40px; } .css-slide .card__text { background: linear-gradient( 108deg, rgba(15, 15, 15, 0.55) 0%, rgba(15, 15, 15, 0.25) 55%, rgba(15, 15, 15, 0.00) 100% ); padding: 32px 40px; } .css-slide .card__text h2, .css-slide .card__text span, .css-slide .card__text p { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.60), 0 2px 16px rgba(0, 0, 0, 0.40); } { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.60), 0 2px 16px rgba(0, 0, 0, 0.40); } /* ── 既存の正常ボタンを保護（.button非使用のため影響なし）── 導線分岐ボタン: 黒背景/白枠 → 約20:1 PASS（別実装） ホルミシスCTA: #7a4d2e/白 → 7.2:1 PASS（別実装） */ /* ========================================================== ここまで MINION UX改善 追記分 ========================================================== */ /* ============================================ Phase A CSS修正 – 2026-06 A-2: CTAボタン統一（sage-dark #4a6350） B-1: スライダーオーバーレイ＋text-shadow ============================================ */ /* A-2: CTAボタン統一 */ .button.button--solid, .button.button--solid.button--icon { background-color: #4a6350 !important; color: #ffffff !important; border: 2px solid #4a6350 !important; text-shadow: none !important; transition: background-color 0.25s ease, color 0.25s ease; } .button.button--solid:hover, .button.button--solid.button--icon:hover { background-color: transparent !important; color: #4a6350 !important; } .button.button--outline, .button.button--outline.button--icon { background-color: transparent !important; color: #4a6350 !important; border: 2px solid #4a6350 !important; text-shadow: none !important; transition: background-color 0.25s ease, color 0.25s ease; } .button.button--outline:hover, .button.button--outline.button--icon:hover { background-color: #4a6350 !important; color: #ffffff !important; } /* B-1: スライダーオーバーレイ */ .slideshow__slide .banner__box, .slideshow__slide .banner__content { background: linear-gradient( 108deg, rgba(15,15,15,0.55) 0%, rgba(15,15,15,0.25) 55%, rgba(15,15,15,0.00) 100% ); padding: 32px 40px; } .slideshow__slide .banner__box h2, .slideshow__slide .banner__box span, .slideshow__slide .banner__content h2, .slideshow__slide .banner__content span { text-shadow: 0 1px 6px rgba(0,0,0,0.60), 0 2px 16px rgba(0,0,0,0.40); } /* ============================================ Phase A 追記2 – 2026-06 ヒーローCTAボタン（.hr-b1 / .hr-b2）修正 arrow-rightボタンのgold色修正 ============================================ */ /* hr-b1：solid風（sage-dark背景・白文字） */ .hr-b.hr-b1 { background-color: #4a6350 !important; color: #ffffff !important; border: 2px solid #4a6350 !important; text-shadow: none !important; transition: background-color 0.25s ease, color 0.25s ease; } .hr-b.hr-b1:hover { background-color: transparent !important; color: #4a6350 !important; } /* hr-b2：outline風（透明背景・sage-dark枠・白文字→ダーク背景上なので白を維持） */ .hr-b.hr-b2 { background-color: transparent !important; color: #ffffff !important; border: 2px solid #ffffff !important; text-shadow: none !important; transition: background-color 0.25s ease, color 0.25s ease; } .hr-b.hr-b2:hover { background-color: #ffffff !important; color: #4a6350 !important; } /* button--arrow-right：goldからsage-darkへ修正 */ .button.button--arrow-right, .button.button--arrow-right.button--icon { background-color: #ffffff !important; color: #4a6350 !important; border: 2px solid #4a6350 !important; text-shadow: none !important; transition: background-color 0.25s ease, color 0.25s ease; } .button.button--arrow-right:hover, .button.button--arrow-right.button--icon:hover { background-color: #4a6350 !important; color: #ffffff !important; } /* ============================================ Phase A 追記2 – 2026-06 ヒーローCTAボタン（.hr-b1 / .hr-b2）修正 arrow-rightボタンのgold色修正 ============================================ */ /* hr-b1：solid風（sage-dark背景・白文字） */ .hr-b.hr-b1 { background-color: #4a6350 !important; color: #ffffff !important; border: 2px solid #4a6350 !important; text-shadow: none !important; transition: background-color 0.25s ease, color 0.25s ease; } .hr-b.hr-b1:hover { background-color: transparent !important; color: #4a6350 !important; } /* hr-b2：outline風（透明背景・sage-dark枠・白文字→ダーク背景上なので白を維持） */ .hr-b.hr-b2 { background-color: transparent !important; color: #ffffff !important; border: 2px solid #ffffff !important; text-shadow: none !important; transition: background-color 0.25s ease, color 0.25s ease; } .hr-b.hr-b2:hover { background-color: #ffffff !important; color: #4a6350 !important; } /* button--arrow-right：goldからsage-darkへ修正 */ .button.button--arrow-right, .button.button--arrow-right.button--icon { background-color: #ffffff !important; color: #4a6350 !important; border: 2px solid #4a6350 !important; text-shadow: none !important; transition: background-color 0.25s ease, color 0.25s ease; } .button.button--arrow-right:hover, .button.button--arrow-right.button--icon:hover { background-color: #4a6350 !important; color: #ffffff !important; } /* ============================================ デザイン改善 v2.1 (2026-06) 対象：余白・ヒーロー・LINEセクション ============================================ */ /* ------------------------------------------ [1] セクション間余白の統一（150px → 80px） ------------------------------------------ */ .container--vertical-space { margin-top: 80px !important; } /* LINEセクションのnegative-marginを比率維持で調整 */ .container--vertical-space.container--negative-margin { margin-top: 80px !important; margin-bottom: -80px !important; } /* フッター上の余白も同期 */ .main-footer { margin-top: 80px !important; } /* ------------------------------------------ [2] ヒーローセクション：左右の断絶感を軽減 ------------------------------------------ */ /* 右側（白大理石）にcharcoalグラデーション左端を追加 */ .hr-inner { gap: 0 !important; } /* 右エリアの左端にフェード */ .hr-fgwrap { position: relative; } .hr-fgwrap::before { content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 100%; background: linear-gradient(to right, rgba(15,15,12,0.55), transparent); z-index: 1; pointer-events: none; } /* ------------------------------------------ [3] LINEセクション：ブランドカラーオーバーレイ ------------------------------------------ */ /* LINE背景画像の上にcharcoal系オーバーレイ */ #shopify-section-template--17808142369009__16644469534f06cf0c { position: relative; } #shopify-section-template--17808142369009__16644469534f06cf0c::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(37, 37, 32, 0.72) 0%, rgba(74, 99, 80, 0.45) 100% ); z-index: 1; pointer-events: none; } /* オーバーレイの上にコンテンツを重ねる */ #shopify-section-template--17808142369009__16644469534f06cf0c .container { position: relative; z-index: 2; } /* ============================================ カラーシステム統一 v2.2 (2026-06) 方針：charcoal主体・gold装飾・パンフレット準拠 ============================================ */ /* ------------------------------------------ [1] プライマリボタン → charcoal ------------------------------------------ */ .button--solid, .button--arrow-right { background-color: #252520 !important; color: #ffffff !important; border-color: #252520 !important; } .button--outline { background-color: transparent !important; color: #252520 !important; border-color: #252520 !important; } .button--solid:hover, .button--outline:hover, .button--arrow-right:hover { text-decoration: underline; text-decoration-color: #b89a6a; text-underline-offset: 3px; text-decoration-thickness: 1.5px; opacity: 0.85; } /* ------------------------------------------ [2] ダーク背景ボタンは白を維持 ------------------------------------------ */ .hr-b.hr-b1 { background-color: #ffffff !important; color: #252520 !important; border-color: #ffffff !important; } .hr-b.hr-b2 { background-color: transparent !important; color: #ffffff !important; border-color: #ffffff !important; } .hr-b.hr-b1:hover, .hr-b.hr-b2:hover { text-decoration: underline; text-decoration-color: #b89a6a; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .salon-banner__btn { background-color: transparent !important; color: #ffffff !important; border-color: #ffffff !important; } /* ------------------------------------------ [3] NPOボタン：navy → charcoal ------------------------------------------ */ #shopify-section-template--17808142369009__therapist_course_section a[href="https://lta.or.jp/"] { background-color: #252520 !important; color: #ffffff !important; border-color: #252520 !important; text-decoration: none !important; } #shopify-section-template--17808142369009__therapist_course_section a[href="https://lta.or.jp/"]:hover { text-decoration: underline !important; text-decoration-color: #b89a6a !important; text-underline-offset: 3px !important; text-decoration-thickness: 1.5px !important; opacity: 0.85; } /* ------------------------------------------ [4] セラピスト講座セクション背景：ブルーグレー → クリーム ------------------------------------------ */ #shopify-section-template--17808142369009__therapist_course_section section { background-color: #f8f6f2 !important; } /* テーマ変数も上書き */ :root { --color-background-main-alternate: #f0ebe2; }