/* ==========================================================================
   1. CSS Variables (Design Tokens)
   ========================================================================== */
:root {
    /* --- Colors: Brand & Identity --- */
    --color-primary-blue: #1e3a8a;
    --color-primary-dark: #172554;
    --color-accent-purple: #a855f7;
    --color-accent-blue: #38bdf8;
    --color-bright-blue: #0ea5e9;
    
    /* --- Colors: Text --- */
    --color-text-dark: #1f2937;
    --color-text-light: #4b5563;
    --color-text-gray: #666666;
    --color-text-note: #444444;

    /* --- Colors: UI Components --- */
    --color-border: #e2e8f0;
    --color-price-blue: #327BDB;
    --color-ticket: #327BDB;
    --color-check-grayish: #8fa0b5;
    --color-campaign-red: #f43f5e;
    --color-orange: #f59e0b;
    
    /* --- Colors: Backgrounds --- */
    --color-bg-white: #ffffff;
    --color-bg-light: #eff6ff;
    --color-bg-gray: #f1f5f9;
    --color-table-label-bg: #f0f7ff;

    /* --- Gradients --- */
    --grad-brand: linear-gradient(135deg, #c084fc 0%, #38bdf8 100%);
    --grad-text: linear-gradient(135deg, #9333ea 0%, #0284c7 100%);
    
    /* Buttons & Badges */
    --grad-btn: linear-gradient(to bottom, #327BDB 0%, #6E2AFF 100%);
    --grad-btn-hover: linear-gradient(to bottom, #4d90ea 0%, #8347ff 100%);
    /* Badge Shine Gradient (Blue-Purple Base) */
    --grad-shine-blue: linear-gradient(110deg, #327BDB 20%, #90aefb 45%, #ffffff 50%, #90aefb 55%, #6E2AFF 80%);

    /* Plan Headers */
    --grad-light-header: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
    --grad-std-header: linear-gradient(135deg, #60a5fa 0%, #1e40af 100%);
    --grad-pro-header: linear-gradient(135deg, #3758c2 0%, #020617 100%);
    
    /* Overlays (Rich Navy) */
    --overlay-navy-header: linear-gradient(135deg, rgba(2, 6, 23, 0.85) 0%, rgba(23, 37, 84, 0.8) 100%);
    --overlay-navy-cta: linear-gradient(135deg, rgba(2, 6, 23, 0.85) 0%, rgba(23, 37, 84, 0.8) 100%);

    /* --- Layout Dimensions --- */
    --h-header: 160px;
    --h-price: 130px;
    --h-init: 130px;
    --h-row: 80px;
    --h-chat-total: 240px;
    --max-width: 1080px;

    /* --- Z-Index System --- */
    --z-back: 0;
    --z-base: 1;
    --z-inner: 2;
    --z-under-highlight: 9;
    --z-highlight: 10;
    --z-ui: 20;
    --z-modal: 50;

    /* --- Animation Timing --- */
    --ease-out-smooth: cubic-bezier(0.2, 1, 0.3, 1);
}

/* ==========================================================================
   2. Reset & Base Styles
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 管理バー表示時の上部被り対策 */
body.admin-bar { padding-top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar { padding-top: 46px !important; }
}

body { 
    margin: 0 !important; 
    padding: 0 !important; 
    background-color: var(--color-bg-white);
    color: var(--color-text-dark);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

/* テーマ固有のコンテナ余白を打ち消す */
#primary, 
.site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
img { max-width: 100%; height: auto; vertical-align: bottom; }

/* ==========================================================================
   3. Utilities
   ========================================================================== */
.sp-br { display: none; }
.pc-only { display: inline; }
.text-center { text-align: center !important; }
.bg-white { background-color: #ffffff !important; }
.bg-light { background-color: var(--color-bg-light) !important; }

/* Typography Utilities */
.text-highlight, 
.text-highlight-short { 
    background: none;
    -webkit-background-clip: initial; 
    -webkit-text-fill-color: initial; 
    color: var(--color-primary-blue);
    font-weight: 700; 
    text-shadow: none;
}

/* Animation Utilities */
.js-scroll-trigger {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}
.js-scroll-trigger.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* Keyframes */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes btn-shine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes gradient-shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ==========================================================================
   4. Common Components
   ========================================================================== */
/* Containers */
.price-page-container { width: 100%; margin: 0 auto; }
.section-full {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px clamp(60px, 8vw, 120px) 20px;
    background-color: var(--color-bg-white);
    margin-top: 0;
}
.inner-container { 
    position: relative;
    z-index: var(--z-inner);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; 
    max-width: var(--max-width); 
}

/* Section Header */
.section-header { 
    text-align: center; 
    margin-bottom: clamp(80px, 12vw, 120px); 
    padding-top: clamp(10px, 3vw, 30px); 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    z-index: var(--z-base); 
}
/* Background Text (English - Common) */
.section-header::before {
    content: attr(data-en); 
    position: absolute; 
    top: 50%; left: 50%; 
    z-index: var(--z-back);
    transform: translate(-50%, -50%);
    margin-top: 35px;
    font-family: 'Roboto', sans-serif; 
    font-weight: 900; 
    font-size: clamp(4rem, 12vw, 7rem);
    line-height: 1; 
    letter-spacing: 0.1em;
    background: var(--grad-brand);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    opacity: 0.15;
    pointer-events: none; 
}

/* SYSTEM専用の調整: SYSTEMのみ上に移動させます */
.price-page-container .section-header[data-en="SYSTEM"]::before {
    margin-top: 10px !important;
}

.section-subtitle { 
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif; font-size: 0.8rem; 
    background: var(--grad-brand); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.4em; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; 
    position: relative;
    z-index: var(--z-base);
    color: var(--color-accent-purple);
}
.section-subtitle::before, .section-subtitle::after { 
    content: ""; display: block; width: 30px; height: 1px; margin: 0 15px; 
    background: var(--grad-brand); opacity: 0.8; 
}

.section-title { 
    font-size: clamp(1.8rem, 4vw, 2.4rem); 
    color: var(--color-primary-blue); 
    margin: 0; font-weight: 700; letter-spacing: 0.1em; line-height: 1.4; 
    position: relative;
    z-index: var(--z-base);
}

/* Buttons (CTA) */
.cta-btn { 
    position: relative; display: inline-block; overflow: hidden; 
    padding: 24px 80px; 
    background: var(--grad-btn); color: #fff; 
    text-decoration: none; font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 900; letter-spacing: 0.05em; 
    border: 1px solid #ffffff; 
    border-radius: 50px; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 25px rgba(15, 42, 80, 0.4); 
    transition: all 0.15s ease-out; 
}
.cta-btn::before { 
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; 
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); 
    animation: btn-shine 4s infinite; 
}
.cta-btn:hover { 
    transform: translateY(-2px); 
    background: var(--grad-btn-hover); 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 15px 35px rgba(15, 42, 80, 0.5);
    color: #ffffff !important;
}
.cta-btn:active { 
    transform: translateY(2px); 
    box-shadow: inset 0 2px 0 rgba(0,0,0,0.1), inset 0 0 10px rgba(0,0,0,0.1); 
}
.cta-btn::after { 
    content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: 15px; font-size: 0.9em; 
}

/* Badges */
.pop-badge { 
    position: absolute; top: -15px; left: 50%; z-index: var(--z-ui); 
    transform: translateX(-50%); 
    padding: 6px 24px; 
    background: var(--grad-btn); color: #ffffff; 
    font-size: 0.85rem; font-weight: bold; white-space: nowrap; letter-spacing: 0.05em; 
    border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.2); 
    overflow: hidden; 
}
.pop-badge::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; 
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%); 
    animation: btn-shine 4s infinite; 
}

/* Ribbon Badge (Campaign) */
.ribbon-badge-wrap { position: relative; z-index: 10; display: inline-block; width: 100%; margin-bottom: 10px; text-align: center; }
.ribbon-badge { 
    position: relative; z-index: 1; display: inline-block; padding: 8px 24px; min-width: 200px; 
    background: var(--grad-shine-blue); background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; 
    text-shadow: none; font-size: 0.85rem; font-weight: 800; 
    border: none; border-radius: 4px; 
    box-shadow: 0 4px 10px rgba(50, 123, 219, 0.2);
    overflow: hidden; 
    animation: gradient-shine 3s linear infinite;
}
.ribbon-badge::before {
    content: ""; position: absolute; inset: 0; z-index: -1; 
    border-radius: 4px; padding: 2px; 
    background: var(--grad-shine-blue); background-size: 200% auto;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: gradient-shine 3s linear infinite;
}

/* ==========================================================================
   5. Page Hero (Header)
   ========================================================================== */
.page-header-section {
    width: 100%;
    background: var(--overlay-navy-header), url('https://shuro-shien.or.jp/wp-content/uploads/2025/12/ヘッダー背景.png');
    background-size: cover; background-position: center; 
    color: white; text-align: center; 
    padding: clamp(80px, 12vw, 120px) 20px; 
    position: relative; z-index: var(--z-highlight); 
    overflow: hidden;
}
.page-title { 
    position: relative; display: inline-block; margin: 0; 
    font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 700; line-height: 1.4; letter-spacing: 0.15em; 
    color: #fff; text-shadow: 0 5px 20px rgba(0,0,0,0.8); 
}

/* ==========================================================================
   6. Section: System Overview
   ========================================================================== */
.system-content-wrapper { 
    display: flex; align-items: center; justify-content: space-between; 
    gap: 40px; width: 100%; 
}
.system-col-left { 
    flex: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; 
}
.system-col-right { 
    flex: 3; display: flex; justify-content: flex-end; 
}
.system-col-right img { max-width: 100%; height: auto; }

.system-catch-text { 
    margin-bottom: 0; color: var(--color-text-dark); font-weight: 700; line-height: 2.2; 
}
.system-lead-text { 
    margin-top: 15px; margin-bottom: 30px; color: var(--color-text-dark); line-height: 1.8; text-align: left; 
}
.system-text-lg-catch { font-size: clamp(1.2rem, 3vw, 1.8rem); line-height: 1.5; margin-bottom: 15px; }
.system-text-lg-lead { font-size: 1.1rem; font-weight: 400; }

.system-col-left .cta-wrapper { width: 100%; text-align: left; margin-top: 10px; }
.system-col-left .cta-btn { padding: 18px 40px; font-size: 1.1rem; min-width: auto; }

/* System Image Frame */
.system-img-frame{
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    background: transparent;
}
.system-img-frame picture{
    display: block;
    width: 100%;
    height: 100%;
}
.system-img-frame .intro-img{
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    box-shadow: none;
}
@media (max-width: 768px){
    .system-img-frame{ aspect-ratio: 1 / 1; }
}

/* ==========================================================================
   7. Section: System Details (Intro)
   ========================================================================== */
.intro-h3 { 
    position: relative; z-index: var(--z-base); display: block; 
    margin: clamp(100px, 12vw, 140px) 0 clamp(60px, 8vw, 80px); 
    color: var(--color-primary-blue); font-size: clamp(2.0rem, 4.5vw, 2.6rem); font-weight: 700; 
    text-align: center; letter-spacing: 0.15em; 
}
.intro-h3::before { 
    content: attr(data-step); 
    position: absolute; top: 50%; left: 50%; z-index: var(--z-back);
    transform: translate(-50%, -50%); 
    font-family: 'Roboto', sans-serif; font-weight: 900; 
    font-size: clamp(8rem, 15vw, 12rem); line-height: 1; 
    background: linear-gradient(to bottom, rgba(29, 78, 216, 0.15) 0%, rgba(96, 165, 250, 0.05) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
    pointer-events: none; 
}
.intro-h3 span { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 80px; }
.intro-h3 span::before, .intro-h3 span::after { 
    content: ""; display: block; width: 150px; height: 1px; 
    background: linear-gradient(90deg, transparent 0%, #c084fc 30%, #38bdf8 70%, transparent 100%);
    opacity: 1; 
}

.intro-catch { 
    margin-bottom: 40px; color: var(--color-text-dark); 
    font-size: clamp(1.3rem, 3.5vw, 2.0rem); font-weight: 700; 
    text-align: center; line-height: 1.6; letter-spacing: 0.05em; 
}
.intro-catch-sub { font-size: clamp(1.2rem, 3.2vw, 1.8rem) !important; }

.intro-text { 
    margin-bottom: 40px; color: var(--color-text-dark); 
    font-size: clamp(1rem, 1.5vw, 1.05rem); line-height: 2.0; 
}

.inprofile-process-box { 
    background-color: var(--color-bg-white); 
    padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 60px); 
    border-radius: 12px; 
    border: 1px solid rgba(255,255,255,0.8); 
    box-shadow: 0 20px 50px rgba(0,0,0,0.06); 
    text-align: left; 
}
.inprofile-label { 
    display: flex; align-items: center; justify-content: flex-start; gap: 16px; 
    margin: 0 0 30px; color: #172554; 
    font-size: clamp(1.3rem, 2.5vw, 1.6rem); font-weight: 700; 
}
.inprofile-icon-img { width: 2.4rem; height: 2.4rem; object-fit: contain; margin-bottom: -2px; }

.flow-arrow-container { 
    position: relative; z-index: var(--z-highlight); height: 80px; 
    display: flex; align-items: center; justify-content: center; 
    margin: -40px 0 0; text-align: center; 
}
.flow-arrow-icon { 
    display: flex; align-items: center; justify-content: center; 
    width: 64px; height: 64px; 
    background: var(--grad-btn); color: white; 
    font-size: 1.4rem; 
    border: 6px solid white; border-radius: 50%; 
    box-shadow: 0 10px 30px rgba(110, 42, 255, 0.4); 
}

.result-section { 
    position: relative; z-index: var(--z-base); background: transparent; 
    padding: clamp(60px, 8vw, 80px) clamp(20px, 4vw, 40px); text-align: center; 
}
.result-lead-text { 
    margin-bottom: 30px; color: var(--color-text-dark); 
    font-size: clamp(1.3rem, 3.5vw, 2.0rem); font-weight: 700; letter-spacing: 0.1em; 
}
.result-description { 
    max-width: 800px; margin: 0 auto; 
    color: var(--color-text-dark); font-size: 1.05rem; line-height: 2.2; text-align: center; 
}

/* ==========================================================================
   8. Section: Support Team
   ========================================================================== */
.support-block { margin-bottom: clamp(80px, 10vw, 120px); padding-bottom: clamp(60px, 8vw, 80px); border-bottom: 1px dashed #e0e0e0; }
.support-block:last-child { border-bottom: none; margin-bottom: 0; }

.support-content-row { display: flex; gap: clamp(30px, 5vw, 80px); align-items: flex-start; }
.support-col-text { flex: 6; }
.support-col-img { flex: 4; display: flex; justify-content: center; align-items: center; }

.support-img { 
    width: 100%; max-width: 100%; height: auto; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    border: 1px solid #eaebec; border-radius: 0; 
}

.support-h4-left { 
    display: flex; align-items: center; gap: 24px; 
    margin-top: 0; margin-bottom: 30px; 
    color: var(--color-primary-blue); font-size: clamp(1.5rem, 3vw, 1.8rem); font-weight: 700; 
}

.support-label-gold { 
    position: relative; z-index: 1; display: inline-block; 
    padding: 6px 16px; 
    background: var(--grad-btn); -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
    background-color: transparent; 
    border: none; border-radius: 50px; 
    font-family: 'Roboto', sans-serif; font-size: 0.85rem; font-weight: 700; 
}
.support-label-gold::before {
    content: ""; position: absolute; inset: 0; z-index: -1; 
    border-radius: 50px; padding: 2px; 
    background: var(--grad-btn); 
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 
    -webkit-mask-composite: xor; mask-composite: exclude; 
}

.support-points-box { 
    margin-top: 60px; padding: clamp(40px, 5vw, 60px); 
    background-color: var(--color-bg-white); 
    border-radius: 12px; border: 1px solid #f0f0f0; 
    box-shadow: 0 5px 30px rgba(0,0,0,0.03); 
}
.point-item { display: block; margin-bottom: 20px; }
.point-head { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; width: 100%; }
.point-icon-img { width: 50px; height: 50px; object-fit: contain; display: block; }
.point-title { color: var(--color-primary-blue); font-size: clamp(1.25rem, 2.5vw, 1.45rem); font-weight: 700; line-height: 1.4; }
.point-desc { margin-top: 5px; line-height: 1.8; font-size: 1rem; }

/* Ticket & Examples */
.ticket-examples-container { margin-top: 60px; padding-top: 20px; border-top: none; }
.ticket-ex-title { 
    position: relative; 
    display: block; 
    width: 100%;
    margin: 0 auto 50px; 
    color: var(--color-primary-blue); font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 700; 
    text-align: center; letter-spacing: 0.05em; 
}
.ticket-ex-title::before { 
    content: '\f3ff'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 12px; 
    background: var(--grad-btn); -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
    color: var(--color-ticket); 
}
.ticket-example-block { 
    margin-bottom: 40px; padding: clamp(30px, 4vw, 50px); 
    background: white; border: 1px solid #f5f5f5; border-radius: 10px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); 
}

.ticket-ex-head { 
    display: flex; align-items: center; margin-bottom: 15px; 
    color: var(--color-primary-blue); font-size: 1.1rem; font-weight: 700; 
}
.ticket-ex-head::before { 
    content: "例"; padding: 3px 10px; margin-right: 15px; 
    background: var(--grad-btn); color: white; 
    font-size: 0.75rem; border-radius: 4px; 
    box-shadow: 0 2px 4px rgba(110, 42, 255, 0.25); 
}
.ticket-ex-desc { margin-bottom: 20px; font-size: 1.05rem; line-height: 1.8; }

/* Ensure ticket description small text has breathing room */
.ticket-ex-desc span {
    display: inline-block;
    margin-top: 5px;
    line-height: 1.6;
}

.grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.grid-img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; background: #f9f9f9; border-radius: 6px; }

/* ==========================================================================
   9. Section: Pricing
   ========================================================================== */
/* Contract Notice Box */
.contract-notice-box {
    width: 100%; max-width: 1100px; margin: 0 auto 40px; 
    background-color: #fff; border: none; border-radius: 0; box-shadow: none; overflow: visible; 
    display: flex; flex-direction: row; align-items: center; justify-content: center; 
    gap: 30px; padding: 20px 0;
}
.contract-notice-header {
    width: fit-content; width: -moz-fit-content; flex-shrink: 0; 
    border: 2px solid transparent; 
    background: linear-gradient(#fff, #fff) padding-box, var(--grad-btn) border-box;
    border-radius: 4px; padding: 10px 30px; margin-bottom: 0;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    box-shadow: 0 4px 10px rgba(110, 42, 255, 0.15);
}
.contract-notice-icon {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: var(--grad-btn); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; 
    font-size: 1.2rem; width: auto; height: auto; border: none; box-shadow: none; border-radius: 0;
}
.contract-notice-title {
    display: block; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.05em; margin: 0; white-space: nowrap; 
    background: var(--grad-btn); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; 
}
.contract-notice-body { padding: 0; text-align: left; background: transparent; width: auto; }
.contract-notice-text { display: block; color: var(--color-primary-dark); font-size: 1.15rem; line-height: 1.8; font-weight: 700; }

/* Pricing Group & Tables */
.pricing-group { 
    position: relative; z-index: var(--z-base); 
    width: 100%; max-width: 1100px; margin: 0 auto 40px; 
    background: white; border-radius: 0; 
    border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); 
    box-shadow: none; overflow: visible; 
}
.pricing-wrapper { 
    position: relative; z-index: var(--z-ui); 
    display: flex; align-items: stretch; 
    width: 100%; 
    background: white; border-radius: 0; 
    box-shadow: none; overflow: visible; 
}

/* Columns */
.p-col { position: relative; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--color-border); }
.p-col:first-child { border-radius: 0; }
.p-col:last-child { border-radius: 0; border-right: none; }

.p-col.labels { flex: 0 0 300px; z-index: var(--z-inner); background-color: var(--color-table-label-bg); }
.p-col.plan { 
    flex: 1; min-width: 0; margin: 0; 
    border: 1px solid var(--color-border); border-radius: 0; box-shadow: none; 
    transition: transform 0.3s ease; 
}
.p-col.plan:hover { transform: translateY(-5px); z-index: 50; box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

.p-col.highlight { 
    position: relative; z-index: var(--z-base); margin: 0; background: #fff; 
    border: 1px solid var(--color-border); border-radius: 0; box-shadow: none; 
}

.p-col.labels .p-cell:not(.p-header) { border-left: 1px solid var(--color-border); }
.p-col.highlight .p-cell { border-bottom: 1px solid var(--color-border); }
.p-col.highlight .p-cell:last-child { border-bottom: none; }

/* Cells */
.p-cell { 
    display: flex; align-items: center; justify-content: center; width: 100%; 
    padding: 0 10px; border-bottom: 1px solid var(--color-border); 
    text-align: center; font-size: 0.95rem; 
}
.p-cell:last-child { border-bottom: none; }

.p-col.labels .p-cell { background-color: var(--color-table-label-bg); color: var(--color-text-dark); font-weight: 700; }
.p-col.labels .p-header { background-color: #fff !important; }

/* Row Heights & Layouts */
.p-header { flex-direction: column; height: var(--h-header); border-top: none; color: white; }
.p-price { flex-direction: column; height: var(--h-price); }
.p-init { flex-direction: column; justify-content: center; height: var(--h-init); }
.p-row { height: var(--h-row); }

.chat-container-labels { display: flex; flex-direction: row; width: 100%; height: var(--h-chat-total); border-bottom: 1px solid var(--color-border); }
.chat-label-parent { 
    display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90px; padding: 0 5px; 
    background-color: var(--color-table-label-bg); 
    border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); 
    font-weight: 700; text-align: center; line-height: 1.6; 
}
.chat-label-children { flex: 1; display: flex; flex-direction: column; }

.chat-label-child { 
    height: var(--h-row); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; 
    padding: 0 20px; text-align: left; 
    background-color: var(--color-table-label-bg); 
    border-bottom: 1px solid var(--color-border); font-size: 0.9rem; font-weight: 700; 
}
.chat-label-child:last-child { border-bottom: none; }

.chat-container-plan { height: var(--h-chat-total); display: flex; flex-direction: column; border-bottom: 1px solid var(--color-border); }
.chat-plan-cell { height: var(--h-row); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--color-border); }
.chat-plan-cell:last-child { border-bottom: none; }

/* Plan Header Styles */
.bg-light-header { background: var(--grad-light-header); color: #fff !important; }
.bg-std-header { background: var(--grad-std-header); color: white; }
.bg-pro-header { background: var(--grad-pro-header); color: white; }

.plan-name { display: block; margin-bottom: 10px; font-size: 1.3rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.plan-desc { display: block; opacity: 0.95; font-size: 0.8rem; line-height: 1.5; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* Pricing Text */
.price-val { font-family: 'Roboto'; font-size: clamp(2.2rem, 3vw, 2.6rem); font-weight: 700; color: var(--color-price-blue); line-height: 1; }
.price-unit { margin-left: 2px; color: var(--color-text-dark); font-size: 0.9rem; font-weight: 700; }
.price-tax { display: block; margin-top: 5px; color: var(--color-text-light); font-size: 0.75rem; }

.strike-large { 
    font-size: 1.2rem; color: #666; text-decoration: line-through; 
    text-decoration-color: var(--color-campaign-red); text-decoration-thickness: 1px; 
    display: block; margin-bottom: 4px; font-weight: 700; 
}
.red-zero { color: var(--color-campaign-red); font-weight: 900; font-size: 2.6rem; font-family: 'Roboto'; line-height: 1; }
.unit-sm { font-size: 1rem; font-weight: 700; }

.ticket-wrapper { display: flex; align-items: center; gap: 5px; }
.ticket-count { margin-left: 5px; font-size: 0.9rem; font-weight: 700; }
.text-navy { color: var(--color-ticket); }
.note-sub { font-size: 0.75rem; color: #444; font-weight: normal; margin-top: 2px; display: block; }
.price-page-container .note-sub { 
    font-size: 0.75rem; 
    color: #444; 
    font-weight: normal; 
    margin-top: 8px !important; 
    display: block !important; 
}
.note-sup { font-size: 0.65em; vertical-align: super; line-height: 0; position: relative; top: 0; margin-left: 2px; font-weight: normal; }

.sp-label, .accordion-btn, .mobile-contract-wrap { display: none; }
.sp-details { display: block; width: 100%; }

/* Icons */
.i-check, .check-icon { font-size: 1.4rem; color: var(--color-price-blue); display: inline-block; background: none; -webkit-background-clip: border-box; -webkit-text-fill-color: currentcolor; }
.i-dash, .dash-icon { color: #e0e0e0 !important; font-size: 1.4rem; font-weight: bold; }
.i-orange, .check-orange { color: var(--color-check-grayish) !important; font-size: 1.4rem; }
.i-ticket, .ticket-icon { font-size: 1.2rem; color: var(--color-ticket) !important; }
.i-ticket.off { color: #e0e0e0 !important; }

.notes-section { padding: 10px 0 40px; }

/* Fix for small text spacing being overwritten by theme resets */
.notes-section p {
    margin-bottom: 10px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-note);
}
.notes-section p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   10. Section: FAQ
   ========================================================================== */
.faq-section { width: 100%; max-width: 860px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.faq-item { 
    background: white; border-radius: 8px; border: 1px solid #f0f0f0; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); overflow: hidden; cursor: pointer; 
    transition: box-shadow 0.3s ease; 
}
.faq-item:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
.faq-question-wrap { display: flex; justify-content: space-between; align-items: center; padding: clamp(20px, 4vw, 30px) clamp(20px, 5vw, 40px); width: 100%; }
.faq-question { flex: 1; display: flex; align-items: flex-start; padding: 0; padding-right: 20px; color: var(--color-text-dark); font-size: clamp(1rem, 2vw, 1.1rem); font-weight: 700; line-height: 1.6; margin: 0; }
.faq-q-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 24px; margin-top: -2px; background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%); color: white; border-radius: 50%; font-family: 'Roboto', sans-serif; font-size: 0.9rem; font-weight: 700; }
.faq-toggle-icon { color: var(--color-primary-blue); font-size: 1.2rem; transition: transform 0.3s ease; }
.faq-item.active .faq-toggle-icon { transform: rotate(180deg); }
.faq-answer-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; }
.faq-item.active .faq-answer-wrapper { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer { position: relative; display: flex; align-items: flex-start; padding: 0 clamp(20px, 5vw, 40px) 40px 96px; color: var(--color-text-light); font-size: 1rem; line-height: 1.9; }
.faq-a-icon { position: absolute; left: 40px; top: 0; width: 32px; text-align: center; color: #9333ea; font-family: 'Roboto', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.5; background: var(--grad-btn); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ==========================================================================
   11. Section: Footer / CTA
   ========================================================================== */
.cta-section { 
    position: relative; overflow: hidden; 
    width: 100%; padding: clamp(80px, 10vw, 140px) 20px; 
    text-align: center; color: white;
    background: var(--overlay-navy-cta), url('https://shuro-shien.or.jp/wp-content/uploads/2025/12/ヘッダー背景.png');
    background-size: cover; background-position: center; 
}
.cta-section::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 60%); transform: rotate(30deg); pointer-events: none; }
.cta-text { 
    position: relative; margin-bottom: 60px; 
    font-size: clamp(1.4rem, 4vw, 1.8rem); font-weight: 700; line-height: 1.8; letter-spacing: 0.08em; 
    text-shadow: 2px 2px 5px rgba(15, 23, 42, 0.8), 0 0 40px rgba(30, 58, 138, 0.8), 0 0 90px rgba(30, 58, 138, 0.6), 0 0 150px rgba(30, 58, 138, 0.4); 
}

/* ==========================================================================
   12. Media Queries (Responsive)
   ========================================================================== */
/* --- Mobile Devices (Max Width 1024px) --- */
@media (max-width: 1024px) {
    .sp-br { display: block; content: ""; margin-top: 0; }
    .pc-only { display: none; }
    body .support-points-box { padding: 40px 15px !important; }

    .system-content-wrapper { flex-direction: column; gap: 20px; }
    .system-col-left { order: 2; align-items: center; text-align: center; width: 100%; }
    .system-col-right { order: 1; width: 100%; }
    .system-col-right img { margin: 0; }
    .system-col-left .cta-wrapper { width: 100%; padding: 0 10px; text-align: center !important; }
    .system-col-left .cta-btn { padding: 24px 10px; width: 100%; max-width: 540px; font-size: clamp(1.1rem, 3vw, 1.4rem); }

    /* Support Team Mobile Layout */
    .support-content-row { flex-direction: column; gap: 20px; align-items: center; }
    .support-col-text { display: contents; } 
    .support-h4-left { 
        order: 1; margin-top: 0; margin-bottom: 20px; 
        display: flex; flex-direction: column; align-items: center; justify-content: center; 
        width: 100%; text-align: center; gap: 10px; 
    }
    .support-h4-left span { text-align: center; }
    .support-col-img { order: 2; margin-bottom: 30px; width: 100%; display: flex; justify-content: center; }
    .support-col-text > .intro-text { order: 3; text-align: left; width: 100%; align-self: flex-start; }
    
    .intro-h3 span { gap: 20px; }
    .intro-h3 span::before, .intro-h3 span::after { width: 50px; }
    .cta-btn { padding: 24px 10px; width: 100%; max-width: 540px; }
    
    .point-item { display: block; margin-bottom: 40px; }
    .point-item:last-child { margin-bottom: 0; }
    .support-points-box .point-desc { display: block; font-size: 0.9rem; margin-top: 5px; line-height: 1.6; }
    
    .point-head { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; width: 100%; }
    .point-icon-col { flex: 0 0 60px; }
    
    .ticket-ex-head { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        gap: 10px; 
        line-height: 1.6 !important;
    }
    .ticket-ex-head::before { margin-right: 0; margin-bottom: 5px; }
    .ticket-example-block { padding: 15px; }

    /* Mobile Pricing Table */
    .pricing-group { background: transparent; box-shadow: none; margin-bottom: 0; border: none; overflow: visible; }
    .pricing-wrapper { display: flex; flex-direction: column; gap: 20px; border-radius: 0; box-shadow: none; background: transparent; padding: 0; margin-bottom: 0; overflow: visible; }
    .pricing-footer-pc, .p-col.labels { display: none; }

    .p-col.plan {
        display: block; position: relative; z-index: var(--z-base); 
        width: 100%; margin-bottom: 20px; 
        background: white; border: 1px solid var(--color-border); border-radius: 0 !important; 
        box-shadow: none; overflow: visible !important; 
    }
    .p-col.highlight {
        margin: 0; margin-bottom: 20px; 
        border: 1px solid var(--color-border); border-image: none; 
        z-index: var(--z-base); background-image: none; box-shadow: none; 
    }
    .pop-badge { top: -26px; }

    .ribbon-badge { display: inline-block; min-width: auto; width: auto; padding: 6px 12px; font-size: 0.75rem; white-space: normal; line-height: 1.4; }
    .ribbon-badge-wrap { margin-bottom: 5px; }

    .p-header { 
        flex-direction: column !important; justify-content: center !important; align-items: center !important; 
        height: auto; padding: 30px 20px; 
        border-radius: 0; border-top: none; 
        text-align: center !important; 
    }
    .p-price { 
        position: relative; z-index: 1; 
        flex-direction: column !important; justify-content: center !important; align-items: center !important; 
        height: auto; padding: 24px; background: #fff; border-bottom: 1px solid #eee; text-align: center; 
    }
    .p-price .sp-label { display: block; flex: none; width: auto; max-width: 100%; margin-right: 0; margin-bottom: 5px; font-size: 0.9rem; font-weight: 700; text-align: center; }

    .accordion-btn { 
        position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; 
        width: 100%; height: 64px; padding: 0; 
        background: #f7f7f7; color: var(--color-primary-blue); font-size: 1rem; font-weight: 700; 
        border: none; border-top: 1px solid #eee; cursor: pointer; transition: background 0.2s; pointer-events: auto; 
    }
    .accordion-btn:hover { background: #eeeeee; }
    .accordion-btn i { margin-left: 8px; pointer-events: none; transition: transform 0.3s; }
    .accordion-btn.active i { transform: rotate(180deg); }
    
    .sp-details { position: relative; z-index: 5; display: none; padding: 10px 24px 30px 24px; background: #fff; animation: slideDown 0.3s ease-out; }
    .sp-details.show { display: block !important; }
    
    .p-cell:not(.p-price):not(.p-header), .chat-plan-cell, .chat-label-child { 
        display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; 
        height: auto; padding: 18px 0; text-align: center; border-bottom: 1px solid #f0f0f0; flex-wrap: wrap; 
    }
    .p-cell:last-child { border-bottom: none; }
    .chat-container-plan { height: auto; border: none; }
    .p-init { height: auto; flex-direction: row !important; justify-content: space-between !important; }
    
    .sp-label { 
        display: block; flex: 0 0 50%; width: 50%; max-width: 50%; 
        margin: 0 0 5px 0; padding: 0; 
        color: #666; font-size: 0.85rem; font-weight: 700; text-align: center; box-sizing: border-box; 
    }
    .p-cell:not(.p-price) > div, .chat-plan-cell > div, .chat-plan-cell > i, .p-cell:not(.p-price) > i { 
        flex: 0 0 50%; width: 50%; max-width: 50%; 
        display: flex; justify-content: center; align-items: center; 
        padding: 0; text-align: center; box-sizing: border-box; flex-wrap: wrap; 
    }
    .init-cost-val-col { display: flex; flex-direction: column !important; justify-content: center; align-items: center !important; }
    .ticket-wrapper { justify-content: center; }

    .mobile-contract-wrap { display: none; }
    
    .contract-notice-box {
        flex-direction: column; padding: 24px 15px; border-radius: 0; gap: 15px; 
        border: none; border-image: none;
    }
    .contract-notice-header { font-size: 0.9rem; padding: 6px 20px; margin-bottom: 0; }
    .contract-notice-text { font-size: 0.85rem; line-height: 1.6; text-align: center; }
    .contract-notice-body { text-align: center; }

    .notes-section { padding: 10px 0 40px; }
    .faq-question-wrap { padding: 20px; }
    .faq-q-icon { margin-right: 15px; width: 28px; height: 28px; font-size: 0.8rem; }
    .faq-answer { padding: 0 20px 20px 63px; }
    .faq-a-icon { left: 20px; width: 28px; font-size: 1rem; }
    .faq-question { font-size: 0.85rem; } 

    .result-lead-text { 
        margin-bottom: 30px; 
        color: var(--color-text-dark); 
        font-size: clamp(1.3rem, 3.5vw, 2.0rem); 
        font-weight: 700; 
        letter-spacing: 0.1em; 
        line-height: 1.6 !important;
    }
}

/* --- Smartphone Landscape & Smaller Tablets background switch --- */
@media (max-width: 768px) {
     .section-header::before { top: 75%; margin-top: 0; font-size: 18vw; line-height: 1; }
     /* SP Images */
     .page-header-section {
        background-image: var(--overlay-navy-header), url('https://shuro-shien.or.jp/wp-content/uploads/2025/12/ヘッダー背景_sp.png');
    }
    /* Footer uses SP header bg as well per design */
    .cta-section {
        background-image: var(--overlay-navy-cta), url('https://shuro-shien.or.jp/wp-content/uploads/2025/12/ヘッダー背景_sp.png');
    }
}

/* --- PC Hero View Adjustment (100vh fit) --- */
@media (min-width: 1025px) {
    .hero-wrapper {
        min-height: 100vh;
        width: 100%;
        display: flex; flex-direction: column; 
        overflow: visible; 
    }
    .hero-wrapper .page-header-section {
        flex: none;
        padding: 100px 20px;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
    }
    .hero-wrapper .section-full {
        min-height: 100vh;
        flex: none;
        padding: 40px 20px 60px 20px; 
        display: flex; align-items: center;
    }
    .hero-wrapper .inner-container {
        height: 100%; display: flex; flex-direction: column; justify-content: center;
        width: 100%; 
    }
    .hero-wrapper .section-header {
        margin-bottom: 80px; padding-top: 0; 
    }
    /* SYSTEM section H2 background text adjustment */
    .hero-wrapper .section-header::before {
        margin-top: 30px;
        font-size: 6rem;
    }
    .hero-wrapper .system-content-wrapper {
        height: auto; flex: 1; align-items: center; max-height: none; 
    }
    .hero-wrapper .system-col-right {
        flex: 3; height: auto; display: flex; align-items: center; justify-content: center;
    }
    .hero-wrapper .system-catch-text { line-height: 1.8; }
    .hero-wrapper .system-lead-text { margin-bottom: 20px; }
}