@charset "utf-8";

/**
 * Theme Name: Mizupika Elegant Base
 * Description: 女性らしく清潔感のあるエレガントデザイン
 */

/* =========================================================
   1. PC・スマホ表示切り替え（最優先ルール）
========================================================= */
@media screen and (min-width: 769px) {
    .sp-only { display: none !important; }
}
@media screen and (max-width: 768px) {
    .pc-only { display: none !important; }
}

/* =========================================================
   2. VARIABLES（変数管理）
========================================================= */
:root {
    /* 参考画像に基づいた、より洗練されたカラーパレット */
    --c-primary: #7894A3;     /* 上品なくすみ水色 */
    --c-secondary: #5C707C;   /* テキストや見出し用の少し濃い水色 */
    --c-accent: #E5DCD3;      /* 枠線などに使う上品なベージュ */
    --c-accent-dark: #C4B5A5; /* テキスト用の濃いベージュ */
    
    --c-bg-body: #FDFCFB;     /* 温かみのあるオフホワイト */
    --c-bg-light: #F7F5F0;    /* 背景用の薄いベージュ */
    
    --c-text: #595552;        /* 墨色（真っ黒を避けて柔らかく） */
    --c-text-light: #99938E;
    --c-border: #EAE6DF;
    --c-line: #06C755;

    --font-jp-sans: 'Noto Sans JP', sans-serif;
    --font-jp-min: 'Noto Serif JP', serif;
    --font-base: var(--font-jp-sans); /* 本文はゴシックで読みやすく */

    --header-height: 85px;
    --inner-width: 1040px;
    --space-section:80px;
}

/* =========================================================
   3. RESET & BASE STYLES
========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font-base);
    color: var(--c-text);
    background-color: var(--c-bg-body);
    line-height: 2;
    letter-spacing: 0.06em;
}
a { color: inherit; text-decoration: none; transition: 0.3s; }
a:hover { opacity: 0.7; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
.font-serif { font-family: var(--font-jp-min); font-weight: 500; letter-spacing: 0.1em; }

/* =========================================================
   4. UTILITY & DECORATIONS
========================================================= */
.inner { max-width: var(--inner-width); margin: 0 auto; padding: 0 24px; }
.l-section { padding: var(--space-section) 0; }
.u-bg-light { background-color: var(--c-bg-light); }
.u-text-center { text-align: center; }
.u-mt-40 { margin-top: 40px; }
.u-mt-60 { margin-top: 60px; }
.u-mb-20 { margin-bottom: 20px; }
.u-color-primary { color: var(--c-primary); font-weight: bold; }

/* エレガントなセクションヘッダー */
.c-section-header { text-align: center; margin-bottom: 60px; display: flex; flex-direction: column; align-items: center; }
.c-section-en { font-family: var(--font-jp-min); color: var(--c-accent-dark); font-size: 1rem; letter-spacing: 0.15em; font-style: italic; margin-bottom: 10px; }
.c-section-title { font-size: 2.2rem; color: var(--c-secondary); margin-bottom: 20px; }
/* ダイヤ型の装飾（参考画像のようなエレガントなアクセント） */
.c-decoration-diamond { width: 6px; height: 6px; background-color: var(--c-primary); transform: rotate(45deg); position: relative; }
.c-decoration-diamond::before, .c-decoration-diamond::after { content: ''; position: absolute; top: 3px; width: 40px; height: 1px; background-color: var(--c-accent); }
.c-decoration-diamond::before { right: 15px; }
.c-decoration-diamond::after { left: 15px; }

/* エレガントなボタン */
.c-btn { display: inline-flex; justify-content: center; align-items: center; padding: 18px 60px; background-color: var(--c-primary); color: #fff; border-radius: 50px; font-size: 1.05rem; letter-spacing: 0.1em; box-shadow: 0 5px 15px rgba(120, 148, 163, 0.3); transition: 0.3s; border: none; font-family: var(--font-jp-min); }
.c-btn:hover { background-color: var(--c-secondary); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(120, 148, 163, 0.4); color: #fff; }
.c-btn--outline { background-color: transparent; border: 1px solid var(--c-primary); color: var(--c-primary); box-shadow: none; }
.c-btn--outline:hover { background-color: var(--c-primary); color: #fff; }

/* =========================================================
   5. HEADER & NAV (Fixed)
========================================================= */
.l-header { position: fixed; top: 0; width: 100%; height: var(--header-height); background: rgba(253, 252, 251, 0.95); backdrop-filter: blur(8px); z-index: 1000; box-shadow: 0 2px 20px rgba(0,0,0,0.03); border-bottom: 1px solid var(--c-border); }
.l-header__inner { display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 20px;
max-width: 1280px;
    margin: 0 auto;
}
.l-header__logo img { height: 48px; }
.l-header__nav ul { display: flex; gap: 40px; list-style: none; }
.l-header__nav a { color: var(--c-secondary); font-size: 0.95rem; font-family: var(--font-jp-min); letter-spacing: 0.08em; transition: color 0.3s; }
.l-header__nav a:hover { color: var(--c-accent-dark); }

.l-header__hamburger { width: 30px; height: 20px; position: relative; cursor: pointer; }
.l-header__hamburger span { position: absolute; width: 100%; height: 2px; background: var(--c-primary); transition: 0.3s; }
.l-header__hamburger span:nth-child(1) { top: 0; }
.l-header__hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.l-header__hamburger span:nth-child(3) { bottom: 0; }
.l-header__hamburger.is-active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.l-header__hamburger.is-active span:nth-child(2) { opacity: 0; }
.l-header__hamburger.is-active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
.l-header__hamburger.is-active span { background-color: var(--c-secondary); }

.p-sp-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--c-bg-light); z-index: 999; opacity: 0; visibility: hidden; transition: 0.4s; display: flex; align-items: center; justify-content: center; }
.p-sp-nav.is-active { opacity: 1; visibility: visible; }
.p-sp-nav ul { text-align: center; list-style: none; }
.p-sp-nav li { margin-bottom: 35px; }
.p-sp-nav a { font-size: 1.4rem; color: var(--c-secondary); font-family: var(--font-jp-min); letter-spacing: 0.1em; }
/* =========================================================
   MARKER (黄色アンダーライン)
========================================================= */
.u-marker-yellow {
    /* サイトに馴染む上品なソフトイエローを指定 */
    background: linear-gradient(transparent 60%, #FDE047 60%);
    font-weight: bold;
    color: var(--c-secondary); /* 文字色を少し濃くして視認性を高める */
    padding: 0 4px; /* マーカーの左右に少しだけ余白を持たせる */
    display: inline;
}
/* =========================================================
   14. PAGE HEADER (下層ページ共通)
========================================================= */
.p-page-header { 
    position: relative; 
    padding-top: var(--header-height); 
    height: 350px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    overflow: hidden;
}
.p-page-header__bg { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    z-index: -1; 
}
.p-page-header__bg img { 
    width: 100%; height: 100%; object-fit: cover; 
    opacity: 0.3; /* 画像を薄くして上品に */
}
/* 背景画像の上のオーバーレイ（ベージュっぽくする） */
.p-page-header__bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(253,252,251,0.7), rgba(247,245,240,0.9));
}
.p-page-header__title { 
    font-size: 3rem; 
    color: var(--c-primary); 
    margin-bottom: 5px; 
    letter-spacing: 0.15em; 
}
.p-page-header__sub { 
    font-size: 1rem; 
    color: var(--c-secondary); 
    letter-spacing: 0.1em; 
}

/* =========================================================
   15. SERVICE DETAILS (下層コンテンツ)
========================================================= */
.p-service-lead__text { font-size: 1.1rem; line-height: 2.2; }

/* Z型レイアウト */
.p-service-details { padding-top: 80px; padding-bottom: 120px; }
.p-service-detail { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 80px; 
}
.p-service-detail:last-child { margin-bottom: 0; }
.p-service-detail.is-reverse { flex-direction: row-reverse; } /* 偶数番目は左右反転 */

.p-service-detail__img { 
    width: 48%; 
    position: relative; 
}
/* エレガントな写真枠 */
.p-service-detail__img::before {
    content: '';
    position: absolute;
    top: 15px; right: -15px; bottom: -15px; left: 15px;
    border: 1px solid var(--c-accent);
    z-index: 0;
}
.p-service-detail.is-reverse .p-service-detail__img::before {
    right: 15px; left: -15px; /* 反転時は枠も反転 */
}
.p-service-detail__img img { 
    width: 100%; 
    border-radius: 4px; 
    position: relative; 
    z-index: 1; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.p-service-detail__content { width: 45%; }
.p-service-detail__content h3 { 
    font-size: 1.6rem; 
    color: var(--c-secondary); 
    margin-bottom: 10px; 
}
.p-service-detail__time { 
    display: inline-block; 
    background-color: var(--c-bg-body); 
    border: 1px solid var(--c-accent-dark); 
    color: var(--c-secondary); 
    padding: 4px 15px; 
    font-size: 0.85rem; 
    border-radius: 50px; 
    margin-bottom: 20px; 
    font-family: var(--font-jp-sans);
}
.p-service-detail__desc { line-height: 2.2; }

/* ポリシーボックス（道具・注意事項） */
.p-policy-box { 
    background-color: #fff; 
    border: 1px solid var(--c-border); 
    padding: 50px; 
    margin-bottom: 30px; 
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}
.p-policy-box.is-alert { 
    background-color: var(--c-bg-light); 
    border-color: var(--c-accent-dark); 
}
.p-policy-box__title { 
    font-size: 1.3rem; 
    color: var(--c-secondary); 
    border-bottom: 1px dashed var(--c-accent); 
    padding-bottom: 15px; 
    margin-bottom: 20px; 
}
.p-policy-box p { margin-bottom: 0; }
.p-policy-box small { color: var(--c-text-light); display: block; margin-top: 10px; line-height: 1.6;}

/* ご利用ケース（グリッド） */
.p-cases-grid { display: flex; gap: 30px; justify-content: center; }
.p-case-card { 
    width: 48%; 
    background: #fff; 
    border: 1px solid var(--c-border); 
    border-radius: 8px; 
    overflow: hidden; 
}
.p-case-card__head { 
    background-color: var(--c-accent); 
    color: var(--c-secondary); 
    font-family: var(--font-jp-min); 
    text-align: center; 
    padding: 20px; 
    font-size: 1.2rem; 
    font-weight: bold; 
    letter-spacing: 0.1em;
}
.p-case-card.is-recommend { border: 2px solid var(--c-primary); }
.p-case-card.is-recommend .p-case-card__head { 
    background-color: var(--c-primary); 
    color: #fff; 
}
.p-case-card__body { padding: 40px 30px; }
.p-case-card__lead { 
    text-align: center; 
    font-weight: bold; 
    color: var(--c-secondary); 
    margin-bottom: 20px; 
    font-size: 1.1rem; 
}
.p-case-card ul { 
    list-style: none; 
    padding-left: 0; 
}
.p-case-card li { 
    position: relative; 
    padding-left: 20px; 
    margin-bottom: 15px; 
    line-height: 1.8; 
}
/* リストの黒丸をエレガントなダイヤに変更 */
.p-case-card li::before { 
    content: ''; 
    position: absolute; 
    left: 0; top: 12px; 
    width: 6px; height: 6px; 
    background-color: var(--c-primary); 
    transform: rotate(45deg); 
}
/* =========================================================
   6. MAIN VISUAL (Magazine Style)
========================================================= */
.p-mv { 
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 85vh;
    padding-top: 50px;
    padding-bottom: 50px;
    width: 90%;
	margin:0 auto;
    max-width: 1260px;
}
.p-mv__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 85vh;
    padding-top: 50px;
}
.p-mv__content { width: 45%;
    padding-right: 3%;
	position: relative; z-index: 2; }
.p-mv__sub {
	color: var(--c-accent-dark);
    font-size: 1.3vw;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.p-mv__copy {
font-size: clamp(18px, 3.4vw, 54px); color: var(--c-secondary); line-height: 1.5; margin-bottom: 30px; }
.p-mv__desc { font-size: 1.1rem; line-height: 2.2; margin-bottom: 30px; }
.p-mv__desc .highlight { color: var(--c-primary); font-size: 1.6rem; font-family: var(--font-jp-min); border-bottom: 1px solid var(--c-primary); }
.p-mv__note { font-size: 0.85rem; color: var(--c-text-light); border-left: 2px solid var(--c-accent); padding-left: 15px; }
.p-mv__img { width:65%; position: relative; }
.p-mv__img::after { content: ''; position: absolute; top: 20px; right: -20px; bottom: -20px; left: 20px; border: 1px solid var(--c-accent); z-index: -1; }
.p-mv__img img { width: 100%; height: 650px; object-fit: cover; box-shadow: 0 15px 40px rgba(0,0,0,0.06); }

/* =========================================================
   7. SERVICES (Double Border Style)
========================================================= */
.p-services__lead { text-align: center; margin-bottom: 60px; font-size: 1.15rem; color: var(--c-secondary); letter-spacing: 0.08em; }
.p-services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
/* 外側の枠 */
.p-service-card { background: #fff; padding: 8px; border: 1px solid var(--c-border); box-shadow: 0 5px 20px rgba(0,0,0,0.02); transition: 0.3s; }
.p-service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }
/* 内側の枠（二重線表現） */
.p-service-card__inner { border: 1px solid var(--c-accent); padding-bottom: 20px; height: 100%; display: flex; flex-direction: column; }
.p-service-card__img { overflow: hidden; margin-bottom: 20px; }
.p-service-card__img img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.6s ease; }
.p-service-card:hover .p-service-card__img img { transform: scale(1.05); }
.p-service-card__title { text-align: center; font-size: 1.25rem; color: var(--c-secondary); margin: 0; }
.p-service-card__title span { font-size: 0.85rem; color: var(--c-accent-dark); display: block; margin-top: 5px; font-family: var(--font-jp-sans); }

/* =========================================================
   8. REASONS (Elegant Timeline)
========================================================= */
.p-reasons .inner { max-width: 850px; }
.p-reason { display: flex; align-items: flex-start; margin-bottom: 50px; background: #fff; padding: 50px; border: 1px solid var(--c-border); position: relative; }
/* 背景の装飾番号 */
.p-reason__num { font-size: 5rem; color: var(--c-accent); opacity: 0.25; line-height: 1; position: absolute; top: 15px; left: 20px; font-style: italic; }
.p-reason__content { position: relative; z-index: 2; padding-left: 50px; }
.p-reason__content h3 { font-size: 1.45rem; color: var(--c-secondary); border-bottom: 1px solid var(--c-accent); padding-bottom: 15px; margin-bottom: 20px; }

/* =========================================================
   9. PRICING (Elegant Frame)
========================================================= */
.p-campaign { background: var(--c-bg-body); border: 2px solid var(--c-accent-dark); padding: 40px; text-align: center; margin-bottom: 60px; position: relative; }
.p-campaign::before { content: ''; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; border: 1px solid var(--c-border); pointer-events: none; }
.p-campaign__title { color: var(--c-secondary); font-size: 1.7rem; margin-bottom: 20px; line-height: 1.6; }

.p-price-cards { display: flex; justify-content: center; gap: 40px; }
/* 外枠 */
.p-price-card { background: #fff; width: 45%; padding: 10px; border: 1px solid var(--c-border); text-align: center; position: relative; }
/* 内枠 */
.p-price-card__inner { border: 1px solid var(--c-accent); padding: 40px 20px; height: 100%; }

.p-price-card.is-recommend { border: 2px solid var(--c-primary); box-shadow: 0 10px 30px rgba(120, 148, 163, 0.15); }
.p-price-card.is-recommend .p-price-card__inner { border: 1px solid rgba(120, 148, 163, 0.3); }
.p-price-card__badge { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); background: var(--c-primary); color: #fff; padding: 6px 30px; border-radius: 50px; font-size: 0.95rem; font-family: var(--font-jp-min); letter-spacing: 0.1em; z-index: 2; }

.p-price-card h4 { font-size: 1.3rem; color: var(--c-secondary); margin-bottom: 25px; letter-spacing: 0.1em; }
.p-price-card__amount { font-size: 1.1rem; color: var(--c-text); margin-bottom: 15px; font-family: var(--font-jp-min); }
.p-price-card__amount span { font-size: 2.8rem; font-weight: bold; color: var(--c-secondary); margin: 0 5px; }
.p-price-card__note { font-size: 0.85rem; color: var(--c-text-light); margin-top: 25px; }

/* =========================================================
   10. BLOG SLIDER
========================================================= */
.p-blog-card { display: block; margin: 0 15px; background: #fff; padding: 8px; border: 1px solid var(--c-border); transition: 0.3s; }
.p-blog-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.p-blog-card__img { overflow: hidden; }
.p-blog-card__img img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.5s; }
.p-blog-card:hover .p-blog-card__img img { transform: scale(1.05); }
.p-blog-card__body { padding: 25px 20px; text-align: center; border: 1px solid var(--c-border); border-top: none; }
.p-blog-card__body time { font-size: 0.85rem; color: var(--c-accent-dark); font-family: var(--font-jp-sans); letter-spacing: 0.1em; }
.p-blog-card__title { font-size: 1.15rem; margin-top: 15px; margin-bottom: 0; line-height: 1.6; color: var(--c-text); }

/* =========================================================
   11. FLOATING CTA
========================================================= */
.p-floating-cta { position: fixed; bottom: 25px; right: 25px; z-index: 99; display: flex; flex-direction: column; gap: 15px; }
.p-floating-cta__btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 230px; padding: 18px; border-radius: 50px; color: #fff !important; font-family: var(--font-jp-min); letter-spacing: 0.1em; font-weight: bold; text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,0.2); transition: 0.3s; }
.p-floating-cta__btn:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
.p-floating-cta__btn.is-tel { background-color: var(--c-primary); }
.p-floating-cta__btn.is-line { background-color: var(--c-line); }
.p-floating-cta__btn i { font-size: 1.5rem; }
.p-floating-cta__btn span { text-align: left; line-height: 1.3; }
.p-floating-cta__btn small { font-family: var(--font-jp-sans); font-weight: normal; font-size: 0.75rem; letter-spacing: 0; }
/* =========================================================
   11. FLOATING CTA (Fixed Layout)
========================================================= */
.p-floating-cta { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    z-index: 99; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}
.p-floating-cta__btn { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 12px; 
    width: 240px; 
    padding: 18px 20px; 
    border-radius: 50px; 
    color: #fff !important; 
    font-family: var(--font-jp-min); 
    letter-spacing: 0.1em; 
    font-weight: 500; 
    text-align: center; 
    box-shadow: 0 5px 20px rgba(120, 148, 163, 0.35); 
    transition: 0.3s; 
    border: 1px solid rgba(255,255,255,0.2);
}
.p-floating-cta__btn:hover { 
    transform: scale(1.03) translateY(-3px); 
    box-shadow: 0 8px 25px rgba(120, 148, 163, 0.45); 
}
.p-floating-cta__btn.is-tel { background-color: var(--c-primary); }
.p-floating-cta__btn.is-line { background-color: var(--c-line); }
.p-floating-cta__btn i { font-size: 1.6rem; }
.p-floating-cta__btn span { text-align: left; line-height: 1.3; font-size: 1.05rem; }
.p-floating-cta__btn small { font-family: var(--font-jp-sans); font-size: 0.75rem; letter-spacing: 0; opacity: 0.9; }

/* =========================================================
   12. FOOTER
========================================================= */
.l-footer { 
    border-top: 1px solid var(--c-border); 
    padding-top: 80px; 
    /* PC表示時、右下のフローティングCTAに被らないように右に余白を持たせる */
    padding-bottom: 0;
    position: relative;
    z-index: 10;
}
.l-footer__wrap { 
    display: flex; 
    justify-content: space-between; 
    padding-bottom: 60px;
    padding-right: 250px; /* CTAボタン分のスペースを確保 */
}

/* フッター左：情報エリア */
.l-footer__info { width: 45%; }
.l-footer__logo { margin-bottom: 25px; }
.l-footer__logo img { height: 45px; }
.l-footer__desc { 
    font-size: 1.05rem; 
    color: var(--c-secondary); 
    margin-bottom: 30px; 
    line-height: 1.8; 
    letter-spacing: 0.1em;
}
.l-footer__company { 
    border-left: 2px solid var(--c-accent-dark); 
    padding-left: 20px; 
    font-size: 0.9rem; 
    color: var(--c-text); 
    line-height: 2;
}
.l-footer__name { font-weight: bold; font-size: 1.1rem; color: var(--c-primary); margin-bottom: 10px; font-family: var(--font-jp-min); letter-spacing: 0.1em; }

/* フッター右：ナビゲーションエリア */
.l-footer__nav { 
    width: 50%; 
    display: flex; 
    justify-content: space-between; 
    gap: 40px;
}
.l-footer__nav-col { width: 48%; }
.l-footer__nav-title { 
    font-size: 1.2rem; 
    color: var(--c-secondary); 
    border-bottom: 1px solid var(--c-accent); 
    padding-bottom: 10px; 
    margin-bottom: 20px; 
    letter-spacing: 0.1em;
}
.l-footer__nav-col ul { list-style: none; }
.l-footer__nav-col li { margin-bottom: 15px; }
.l-footer__nav-col a { 
    color: var(--c-text); 
    font-size: 0.95rem; 
    transition: 0.3s; 
    display: inline-block;
}
.l-footer__nav-col a:hover { color: var(--c-primary); transform: translateX(5px); }

/* コピーライト */
.l-footer__copyright { 
    background-color: var(--c-primary); 
    color: #fff; 
    text-align: center; 
    padding: 20px 0; 
    font-size: 0.85rem; 
    font-family: var(--font-jp-sans); 
    letter-spacing: 0.05em;
}

/* =========================================================
   13. MEDIA QUERIES (Smartphone 768px以下)
========================================================= */
@media screen and (max-width: 768px) {
    /* フローティングCTAをスマホ下部にベタ付け固定 */
    .p-floating-cta { 
        bottom: 0; 
        right: 0; 
        width: 100%; 
        flex-direction: row; 
        gap: 0; 
        z-index: 100;
    }
    .p-floating-cta__btn { 
        width: 50%; 
        border-radius: 0; 
        padding: 12px 5px; 
        flex-direction: column; 
        gap: 6px; 
        font-size: 0.9rem; 
        box-shadow: none; 
        border: none;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
    .p-floating-cta__btn.is-line { border-left: 1px solid rgba(255,255,255,0.2); }
    .p-floating-cta__btn span { text-align: center; font-size: 0.95rem; }
    .p-floating-cta__btn small { display: none; }
    
    /* フッターレイアウト調整 */
    .l-footer { 
        padding-top: 60px; 
        /* ★重要: スマホの固定CTAボタンにフッターの文字が隠れないよう下部に大きな余白を設ける */
        padding-bottom: 80px; 
    }
    .l-footer__wrap { 
        flex-direction: column; 
        padding-right: 0; 
        padding-bottom: 30px;
    }
    .l-footer__info { width: 100%; margin-bottom: 50px; text-align: center; }
    .l-footer__company { border-left: none; padding-left: 0; display: inline-block; text-align: left; }
    
    .l-footer__nav { width: 100%; flex-direction: column; gap: 40px; }
    .l-footer__nav-col { width: 100%; }
    .l-footer__nav-title { text-align: center; }
    .l-footer__nav-col ul { text-align: center; }
}
/* =========================================================
   12. MEDIA QUERIES (Smartphone 768px以下)
========================================================= */
@media screen and (max-width: 768px) {
    :root {
        --header-height: 70px;
        --space-section: 80px;
    }
    body { font-size: 0.95rem; line-height: 1.8; }
    
    .l-header__inner { padding: 0 20px; }
    .l-header__logo img { height: 38px; }
    
    .p-mv__inner { flex-direction: column; padding-top: 30px; min-height: auto; }
    .p-mv__content { width: 100%; padding-right: 0; margin-bottom: 40px; text-align: center; }
    .p-mv__copy { font-size: 2.2rem; }
    .p-mv__img { width: 100%; }
    .p-mv__img::after { display: none; /* スマホでは装飾枠を消してすっきりさせる */ }
    .p-mv__img img { height: 350px; border-radius: 5px; }
    
    .c-section-title { font-size: 1.8rem; }
    .c-btn { padding: 16px 40px; width: 100%; }
    
    .p-services__grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .p-service-card__img img { height: 140px; }
    .p-service-card__title { font-size: 1.1rem; }
    
    .p-reason { padding: 30px 20px; }
    .p-reason__num { top: 5px; left: 10px; font-size: 3.5rem; }
    .p-reason__content { padding-left: 0; margin-top: 40px; }
    .p-reason__content h3 { font-size: 1.25rem; }
    
    .p-campaign { padding: 25px 15px; }
    .p-campaign__title { font-size: 1.4rem; }
    
    .p-price-cards { flex-direction: column; gap: 30px; }
    .p-price-card { width: 100%; }
    .p-price-card__inner { padding: 30px 15px; }
    
    /* フローティングCTAをスマホ下部に固定（押しやすい設計） */
    .p-floating-cta { bottom: 0; right: 0; width: 100%; flex-direction: row; gap: 0; }
    .p-floating-cta__btn { width: 50%; border-radius: 0; padding: 12px; flex-direction: column; gap: 5px; font-size: 0.85rem; box-shadow: none; }
    .p-floating-cta__btn span { text-align: center; }
    .p-floating-cta__btn small { display: none; }
	/* 下層ページヘッダー（スマホ） */
    .p-page-header { height: 250px; }
    .p-page-header__title { font-size: 2.2rem; }
    
    /* Z型レイアウトをスマホでは縦並びに */
    .p-service-detail,
    .p-service-detail.is-reverse { 
        flex-direction: column; 
        margin-bottom: 60px; 
    }
    .p-service-detail__img { width: 100%; margin-bottom: 30px; }
    .p-service-detail__img::before { display: none; /* スマホでは装飾枠を消す */ }
    .p-service-detail__content { width: 100%; }
    
    /* ポリシーボックス（スマホ） */
    .p-policy-box { padding: 30px 20px; }
    .p-policy-box__title { font-size: 1.2rem; }
    
    /* ご利用ケース（スマホ） */
    .p-cases-grid { flex-direction: column; gap: 20px; }
    .p-case-card { width: 100%; }
    .p-case-card__body { padding: 30px 20px; }
}