.elementor-723 .elementor-element.elementor-element-e51aea4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-723 .elementor-element.elementor-element-71093a7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-723 .elementor-element.elementor-element-d6fb0e1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-723 .elementor-element.elementor-element-69c88e8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-723 .elementor-element.elementor-element-53a217e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-723 .elementor-element.elementor-element-601bd06{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-723 .elementor-element.elementor-element-0aa1469{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-723 .elementor-element.elementor-element-a83775a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-723 .elementor-element.elementor-element-baf504a{--display:flex;}/* Start custom CSS for html, class: .elementor-element-7f7d06d */.mp-bl-banner-section {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
}
.mp-bl-banner-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* rounded corners? Image doesn't show clearly. Let's keep it square for banner. */
}
.mp-bl-banner-img img {
    width: 100%;
    height: auto;
    display: block;
    min-height: 300px;
    /* Ensure height on mobile */
    object-fit: cover;
}
/* Text Overlay */
.mp-bl-banner-text-wrap {
    position: absolute;
    top: 20%;
    left: 10%;
    /* Specific positioning as per designs usually */
    z-index: 2;
}
.mp-bl-title {
    /* Web font or system Mincho */
    font-size: 3rem;
    /* Large size */
    font-weight: 500;
    color: #fff;
    margin: 0;
    padding-left: 20px;
    /* Space between line and text */
    border-left: 3px solid #000;
    /* Vertical line */
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
    /* In case text overlaps complex image parts, though image seems to have white space there */
}
.mp-bl-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    /* Center vertically */
    transform: translateY(-50%);
    width: 3px;
    /* Line thickness */
    height: 150%;
    /* 1.4 times the text height - Adjust this to make it longer/shorter */
    background-color: #000;
}
/* Responsive */
@media (max-width: 768px) {
    .mp-bl-title {
        font-size: 1.8rem;
        padding-left: 15px;
        border-left-width: 3px;
    }
    .mp-bl-banner-text-wrap {
        top: 15%;
        left: 5%;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0f46554 */.service-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* number circle */
.service-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 22px;
    font-family: serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* text */
.service-text span {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    color: #444;
}

.service-text strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #222;
}

/* themes */
.theme-blue  .service-number { background: #cceeff; }
.theme-green .service-number { background: #d9f2ce; }
.theme-yellow.service-number,
.theme-yellow .service-number { background: #fff5ca; }
.theme-pink  .service-number { background: #ffd6d6; }

/* responsive */
@media (max-width: 991px) {
    .service-summary {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 24px;
    }
}

@media (max-width: 600px) {
    .service-summary {
        grid-template-columns: 1fr;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-26c7f65 *//* Reset & Base */
.mp-section * {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    background-color: #f9f9f9;
}

/* Main BG is light greyish in image? */

.mp-section {
    padding: 80px 20px;
    background-color: #fafafa;
    display: flex;
    justify-content: center;
}

.mp-container {
    width: 100%;
    max-width: 1100px;
}

/* Header */
.mp-header-wrapper {
    text-align: center;
    margin-bottom: 60px;
}

.mp-title-container {
    display: inline-block;
    position: relative;
    margin-bottom: 30px;
    padding: 0 20px;
}

.mp-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    position: relative;
    z-index: 2;
    margin: 0;
    letter-spacing: 0.05em;
}

.mp-title-bg-yellow-brush {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) skew(-10deg);
    width: 110%;
    height: 50%;
    background-color: #fff9c4;
    /* Light Yellow */
    z-index: 1;
    opacity: 0.9;
    border-radius: 4px;
    box-shadow: 2px 2px 0px rgba(238, 238, 238, 0.5);
    /* Rough edges simulation via simple shape for now */
}

.mp-description {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 2;
    color: #444;
    text-align: justify;
    text-align-last: center;
}

/* Cards Grid */
.mp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.mp-card {
    background-color: #fff;
    border: 1px solid #efebe9;
    /* Very subtle border */
    border-radius: 25px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.mp-card-icon {
    margin-bottom: 25px;
    color: #000;
}

.mp-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.mp-card-text {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #555;
    margin-bottom: 30px;
    text-align: left;
    /* Image shows justified or left aligned text block */
    width: 100%;
    flex-grow: 1;
    /* Push button to bottom */
}

.mp-card-btn {
    display: inline-block;
    background-color: #fff59d;
    /* Pastel Yellow button */
    color: #444;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 10px 40px;
    border-radius: 30px;
    transition: background-color 0.2s;
}

.mp-card-btn:hover {
    background-color: #fff176;
}

/* Responsive */
@media (max-width: 768px) {
    .mp-title {
        font-size: 1.6rem;
    }

    .mp-section {
        padding: 40px 20px;
    }

    .mp-card {
        padding: 30px 20px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9318d91 *//* Reset & Base */
.mp-section * {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    background-color: #fff;
}

.mp-section {
    padding: 60px 20px;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.mp-container {
    width: 100%;
    max-width: 900px;
    /* Narrower for calendar look */
}

/* Header */
.mp-header-wrapper {
    text-align: center;
    margin-bottom: 30px;
}

.mp-title-container {
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
    padding: 0 10px;
}

.mp-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a1a;
    position: relative;
    z-index: 2;
    margin: 0;
    letter-spacing: 0.05em;
}

.mp-title-bg-yellow-brush {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 30%;
    background-color: #fffde7;
    /* Very light yellow */
    border-bottom: 3px solid #fdd835;
    /* Stronger yellow underline/brush feel */
    z-index: 1;
    opacity: 0.6;
    border-radius: 20% 80% 20% 80% / 20% 80% 20% 80%;
    /* rough shape */
}

.mp-description {
    max-width: 800px;
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
    text-align-last: center;
}

/* Calendar Nav */
.mp-calendar-nav {
    margin-bottom: 5px;
}

.mp-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.mp-nav-years {
    font-size: 0.9rem;
    color: #555;
    font-weight: 700;
    max-width: 600px;
    margin: 0 auto 10px;
}

.mp-nav-months {
    font-size: 1.1rem;
    color: #333;
    font-weight: 700;
    max-width: 400px;
    margin: 0 auto;
}

.mp-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    padding: 5px 10px;
}

.mp-nav-btn:hover {
    color: #f9a825;
}

/* Calendar Grid */
.mp-calendar-wrapper {
    position: relative;
    margin-bottom: 40px;
}

.mp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 0;
    /* Dashed lines are internal */
}

.mp-day-header {
    background-color: #fff9c4;
    /* Header yellow */
    padding: 15px 5px;
    text-align: center;
    font-weight: 700;
    color: #444;
    border: 1px dashed #ccc;
    /* Dashed border as per image */
}

.mp-day {
    height: 80px;
    /* Tall cells */
    border: 1px dashed #ccc;
    background-color: #fff5e6;
    /* Very light warm bg for cells, image has distinct yellow tint on some rows? Actually looks like cream/yellowish tint */
    background-color: #fff;
    /* Default white per typical calendar, let's use yellow tint for valid days if needed, but image shows yellowish bg for header */
}

/* Alternating bg? The image shows rows having different tints or just lighting? 
   Actually, the image shows a checkerboard or specific coloring?
   Looking closely: "Header is yellow". "31st" row is yellow? No, it looks like just standard background.
   Wait, the selected day "29" is FULL YELLOW. 
   Chat icon days are normal white. 
   Weekend columns (Sun/Sat) usually colored in JP calendars.
   In the image: Sun (left) and Sat (right) columns same color as others? NO.
   All cells seem to have a subtle background or it's just the photo.
   Let's stick to White with dashed lines, and Yellow Header.
*/

.mp-day {
    position: relative;
    padding: 10px;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    background-color: #fff8e1;
    /* Very faint yellow base */
}

/* Header row is distinct */
.mp-day-header {
    background-color: #ffecb3;
    border-color: #ffd54f;
}

/* Grid Borders - Collapsing dashed borders is tricky in CSS Grid 
   Standard border collapse works for table, grid uses gap or individual borders.
   We'll use negative margins or just overlapping borders.
*/
.mp-calendar-grid {
    gap: 0;
}

.mp-day,
.mp-day-header {
    margin: -1px 0 0 -1px;
    /* Overlap borders */
    border: 1px dashed #bdbdbd;
}

/* Empty days */
.mp-day-empty {
    background-color: #fff8e1;
    /* Same as background or transparent */
    pointer-events: none;
}

/* Selected Day */
.mp-day-selected {
    background-color: #fdd835 !important;
    font-weight: 700;
}

/* Post Icon */
.mp-has-post {
    /* Maybe distinct bg? */
}

.mp-post-icon {
    display: block;
    font-size: 1.2rem;
    margin-bottom: -5px;
    color: #333;
}

/* Bubble */
.mp-bubble-wrapper {
    position: relative;
    padding-top: 20px;
    /* Space for pointer */
    max-width: 700px;
    margin: 0 auto;
}

.mp-post-bubble {
    position: relative;
    background: #fff;
    border: 2px solid #fdd835;
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Pointer */
.mp-bubble-pointer {
    position: absolute;
    top: -20px;
    /* Move up */
    left: 50%;
    /* JS will update */
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 20px solid #fdd835;
    /* Same as border color */
    /* To make it look like outline we need inner white pointer too, but simple filled for now matches image roughly (image has Outline pointer actually) */
}

/* Refine pointer to match image (Outline style) */
.mp-bubble-pointer {
    top: -22px;
    border-bottom: 22px solid #fdd835;
}

.mp-bubble-pointer::after {
    content: '';
    position: absolute;
    top: 3px;
    left: -12px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 17px solid #fff;
}


.mp-bubble-header {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #444;
}

.mp-bubble-content {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    outline: none;
    min-height: 80px;
}

.mp-bubble-actions {
    text-align: center;
    margin-top: 20px;
}

.mp-btn-post {
    background-color: #ff5252;
    color: #fff;
    border: none;
    padding: 10px 60px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 82, 82, 0.3);
}

.mp-btn-post:hover {
    background-color: #ff1744;
}

/* Responsive */
@media (max-width: 600px) {
    .mp-day {
        height: 60px;
        font-size: 0.9rem;
        padding: 5px;
    }

    .mp-post-icon {
        font-size: 1rem;
    }

    .mp-title {
        font-size: 1.4rem;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-d6e0dfc */#mp-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
}

/*.mp-popup-overlay {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    background: rgba(0,0,0,.6);*/
/*}*/

.mp-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    max-width: 600px;
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-radius: 10px;
}

.mp-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    border: none;
    background: none;
    cursor: pointer;
}

.mp-row { cursor: pointer; }
.mp-row:hover { background: #f9f9f9; }

.mp-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center !important;;
    gap: 5px !important;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    width: 170px;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
}

.mp-status-draft { background:#f5f5f5; color:#555; }
.mp-status-published { background:#e6f7ea; color:#2e7d32; }
.mp-status-scheduled { background:#fff4e5; color:#ef6c00; }
.mp-status-failed { background:#fdecea; color:#c62828; }
.mp-status-unknown { background:#eee; color:#333; }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-12c7a18 */.mp-btn-post.is-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
  }

  .mp-btn-post.is-loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    animation: mp-spin 0.8s linear infinite;
  }

  @keyframes mp-spin {
    to { transform: rotate(360deg) translateY(-50%); }
  }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e5bf6e7 *//* Reset & Base */
.mp-section * {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    background-color: #fff;
}

.mp-section {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    background-color: #fff;
}

.mp-container {
    width: 100%;
    max-width: 1100px;
}

/* Types Container (Yellow Border Box) */
.mp-types-container-outer {
    position: relative;
    padding-top: 25px;
    /* Space for label */
    max-width: 1000px;
    margin: 0 auto;
}

.mp-types-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff176;
    /* Bright Yellow */
    padding: 10px 40px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #1a1a1a;
    z-index: 5;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.mp-types-box {
    border: 3px solid #fff59d;
    /* Pastel yellow border */
    border-radius: 20px;
    padding: 60px 40px 40px;
    /* Top padding clears label */
    background-color: #fff;
}

/* Row Layout */
.mp-type-row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    justify-content: center;
}

.mp-type-visual {
    flex: 0 0 45%;
    /* Slightly wider for the equation visual */
    text-align: center;
}

.mp-type-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 1px dotted #999;
    display: inline-block;
    padding-bottom: 2px;
}

.mp-type-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    min-height: 120px;
    background-color: #f5f5f5;
    /* Placeholder bg */
    border-radius: 8px;
    object-fit: contain;
}

.mp-type-content {
    flex: 1;
    /* Alignment Fix: Push bubble down to align with image top, 
       accounting for title height (~30-40px) + margin */
    padding-top: 55px;
}

.mp-text-bubble {
    background-color: #fffde7;
    /* Very light yellow bubble */
    padding: 25px;
    border-radius: 20px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
}

/* Connectors (Dashed Line) */
.mp-type-separator {
    width: 90%;
    margin: 40px auto;
    border-top: 2px dashed #999;
    height: 1px;
}

/* Responsive */
@media (max-width: 768px) {
    .mp-type-row {
        flex-direction: column;
        align-items: center;
    }

    .mp-type-visual {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 20px;
    }

    .mp-type-content {
        padding-top: 0;
        /* Reset alignment pad for mobile */
    }

    .mp-types-box {
        padding: 50px 20px 20px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-93531c6 *//* Reset & Base */
.mp-section * {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    background-color: #fff;
}

.mp-section {
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
}

.mp-container {
    width: 100%;
    max-width: 1200px;
}

/* Cost Container (Yellow Border Box) - Reusing style theme */
.mp-cost-container-outer {
    position: relative;
    padding-top: 25px;
    margin: 0 auto 60px;
    /* Margin bottom for CTA button spacing */
}

.mp-cost-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff176;
    /* Bright Yellow */
    padding: 10px 40px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #1a1a1a;
    z-index: 5;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.mp-cost-box {
    border: 3px solid #fff59d;
    /* Pastel yellow border */
    border-radius: 20px;
    padding: 60px 20px 40px;
    background-color: #fff;
}

/* Grid Layout */
.mp-cost-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
}

.mp-cost-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Typography */
.mp-cost-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #333;
}

.mp-cost-price {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1a1a1a;
}

/* Image Frames */
.mp-table-frame {
    width: 100%;
    max-width: 320px;
    border-radius: 8px;
    overflow: hidden;
    /* Frame border styling */
    border: 2px solid #ccc;
    /* Default fallback */
    padding: 5px;
    /* Inner spacing like the image */
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.mp-frame-pink {
    border-color: #ff80ab;
}

.mp-frame-blue {
    border-color: #82b1ff;
}

.mp-frame-green {
    border-color: #69f0ae;
}

.mp-table-img {
    display: block;
    width: 100%;
    height: auto;

    /* Placeholder style */
    min-height: 250px;
    background-color: #f9f9f9;
    object-fit: contain;
}

/* CTA Button */
.mp-cta-wrapper {
    text-align: center;
}

.mp-cta-button {
    display: inline-block;
    background: linear-gradient(90deg, #ff5252 0%, #ff7043 100%);
    /* Orange-Red Gradient */
    color: #fff;
    padding: 15px 60px;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(255, 87, 34, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.mp-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 87, 34, 0.5);
}

/* Responsive */
@media (max-width: 900px) {
    .mp-cost-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .mp-cost-col {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c38e92d *//* Reset & Base */
.mp-section * {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
}

/* Quote Banner Section */
.mp-quote-banner {
    position: relative;
    width: 100%;
    min-height: 700px;
    /* Adjust height based on your image aspect ratio */
    padding: 100px 20px;

    /* Flexbox for centering text, though image suggests text is top-center */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Aligns content to top */

    /* Background Placeholder Styling */
    background-color: #87ceeb;
    /* Sky blue placeholder */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.mp-container {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    /* Spacing from top edge */
}

/* Typography */
.mp-quote-en {
    font-family: 'Playfair Display', serif;
    /* Elegant serif for English */
    font-size: 2.5rem;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.mp-quote-jp {
    font-family: 'Noto Sans JP', sans-serif;
    /* Clean sans-serif for JP */
    font-size: 1.25rem;
    font-weight: 500;
    color: #333;
    margin: 0 0 15px 0;
    letter-spacing: 0.05em;
}

.mp-quote-author {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .mp-quote-banner {
        min-height: 400px;
        /* Smaller height on mobile */
        padding: 60px 20px;
    }

    .mp-quote-en {
        font-size: 1.8rem;
    }

    .mp-quote-jp {
        font-size: 1rem;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-321ada0 *//* Reset & Base */
.mp-section * {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    background-color: #fff;
}

.mp-section {
    padding: 60px 20px;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.mp-container {
    width: 100%;
    max-width: 1200px;
}

/* Header Styles */
.mp-header-wrapper {
    text-align: center;
    margin-bottom: 40px;
}

.mp-title-container {
    display: inline-block;
    position: relative;
    margin-bottom: 25px;
    padding: 0 10px;
}

.mp-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    position: relative;
    z-index: 2;
    margin: 0;
    letter-spacing: 0.05em;
}

/* Yellow brush stroke for Time Post */
.mp-title-bg-yellow {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-1deg);
    width: 105%;
    height: 40%;
    background-color: #fff59d;
    /* Pastel Yellow */
    z-index: 1;
    border-radius: 5px;
    opacity: 0.8;
}

.mp-description {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
    text-align-last: center;
    margin-bottom: 40px;
}

/* Section Labels (Pills) */
.mp-section-label-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.mp-pill-label {
    display: inline-block;
    padding: 8px 30px;
    border-radius: 25px;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.mp-bg-red {
    background-color: #ff5252;
}

.mp-bg-yellow {
    background-color: #fff176;
    color: #444;
}

/* Yellow one has dark text usually */

.mp-mt-50 {
    margin-top: 50px;
}

/* Table Styles */
.mp-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #ddd;
    margin-bottom: 0px;
}

.mp-time-post-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

/* Table Header */
.mp-time-post-table thead th {
    background-color: #fff59d;
    /* Match the yellow theme */
    padding: 15px 10px;
    /* vertical borders are very light or invisible in image 2 */
    border-right: 1px solid #f0e68c;
    color: #333;
    font-weight: 700;
    text-align: center;
    font-size: 0.95rem;
}

.mp-time-post-table thead th:last-child {
    border-right: none;
}

/* Columns */
.mp-col-title {
    width: 25%;
}

.mp-col-recipient {
    width: 10%;
}

.mp-col-date {
    width: 15%;
}

.mp-col-status {
    width: 20%;
}

.mp-col-memo {
    width: 30%;
}

/* Table Body */
.mp-time-post-table td {
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 12px 15px;
    vertical-align: middle;
    font-size: 0.95rem;
    color: #333;
    background-color: #fff;
}

.mp-time-post-table td:last-child {
    border-right: none;
}

.mp-cell-title,
.mp-cell-memo {
    text-align: left;
}

.mp-cell-recipient,
.mp-cell-date,
.mp-cell-status {
    text-align: center;
}

/* User Pill */
.mp-user-pill {
    display: inline-block;
    background-color: #e0e0e0;
    border-radius: 12px;
    padding: 2px 12px;
    min-width: 30px;
    text-align: left;
    /* Looks like text aligns left in the little box */
    font-size: 0.85rem;
    color: #555;
}

/* Date Pills - Same as before */
.mp-date-pill {
    display: inline-block;
    background-color: #e0e0e0;
    /* Greyish in this design too */
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-family: 'Roboto', sans-serif;
    color: #444;
}

/* Status Badges */
.mp-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    width: 170px;
    /* Fixed width */
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
}

/* New Status Colors */
.mp-status-password-set {
    background-color: #f7f3e8;
    /* Pale Beige/Gold */
    color: #8d6e63;
    /* Brownish Gold */
    border: 1px solid #efebe9;
}

.mp-status-password-unset {
    background-color: #e8eaf6;
    /* Pale Blue */
    color: #3949ab;
    border: 1px solid #c5cae9;
}

.mp-status-draft {
    background-color: #e8f5e9;
    /* Pale Green */
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

/* Placeholders */
.mp-input-placeholder {
    display: inline-block;
    background-color: #e0e0e0;
    width: 120px;
    height: 24px;
    border-radius: 12px;
    text-align: left;
    padding-left: 10px;
    line-height: 24px;
    color: #757575;
}

.mp-status-placeholder {
    /* Style it like a badge but different if needed, or reuse */
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    width: 170px;
    cursor: pointer;
    /* Default to unset look or grey */
    background-color: #f5f5f5;
    color: #999;
    border: 1px solid #ddd;
}

.mp-arrow-down {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.6;
}

/* Dropdown Interactions */
#mp-portal-dropdown {
    display: none;
    z-index: 99999 !important;
}

.mp-status-dropdown {
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 8px 0;
    min-width: 170px;
    text-align: left;
}

.mp-dropdown-item {
    padding: 10px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #333;
}

.mp-dropdown-item:hover {
    background-color: #f0f0f0;
}


/* Form Container */
.mp-form-container {
    background-color: #fff9c4;
    /* Light yellow background */
    border: 1px solid #fbc02d;
    /* Gold border */
    border-radius: 20px;
    padding: 40px;
    max-width: 900px;
    margin: 20px auto 0;
}

.mp-form-group {
    margin-bottom: 25px;
}

.mp-label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
    font-size: 0.95rem;
}

.mp-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mp-link-small {
    font-size: 0.85rem;
    color: #333;
    text-decoration: underline;
}

.mp-input,
.mp-textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
    /* Or transparent/white border if aiming for flat look */
    background: #fff;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
}

.mp-input:focus,
.mp-textarea:focus {
    border-color: #fbc02d;
    box-shadow: 0 0 0 2px rgba(251, 192, 45, 0.2);
}

.mp-form-actions {
    text-align: center;
    margin-top: 30px;
}

.mp-btn-post {
    background-color: #ff5252;
    color: #fff;
    border: none;
    padding: 12px 0;
    width: 200px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: 0 4px 10px rgba(255, 82, 82, 0.3);
}

.mp-btn-post:hover {
    background-color: #ff1744;
}

/* Interaction Stuff */
.mp-date-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.mp-date-input-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 50 !important;
}

.mp-cell-title[contenteditable="true"]:empty::before,
.mp-cell-memo[contenteditable="true"]:empty::before {
    content: 'Input text...';
    color: #bbb;
}

/* Responsive */
@media (max-width: 768px) {
    .mp-table-container {
        overflow-x: auto;
    }

    .mp-form-container {
        padding: 20px;
    }

    .mp-btn-post {
        width: 100%;
    }
}/* End custom CSS */