@charset "utf-8";
/* ================== common ================== */
    :root {
        --fair_red:#CC0001;
        --fair_pink:#F6C9FF;
        --fair_yellow:#FCE588;
        --fair_green:#AEFCB6;
        --fair_blue1:#149EEA;
        --fair_blue2:#42B9D1;
        --fair_bg: #CFE2F5;
    }
    article h1 { position: relative; z-index: 5; margin-top: 0; margin-bottom: 40px; }
    article h2 { font-size: 48px; }
    article h3 { font-size: 35px; }

    @media (max-width: 699px){
        article h1 { margin-top: 0; margin-bottom: 30px; }
        article h2 { font-size: 30px; }
        article h3 { font-size: 25px; }
    }

/* ================== top ================== */
    .bg_mpro_fair {
        background-color: var(--fair_bg);
        padding-top: 30px;
        padding-bottom: 50px;
        position: relative;
        overflow: hidden;
        isolation: isolate; 
        z-index: 0;
    }
    .bg_mpro_fair::before,
    .bg_mpro_fair::after {
        content: "";
        position: absolute;
        pointer-events: none;
        left: 50%;
        width: 110%;
        height: 320px;
        transform-origin: center;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
    }
    .bg_mpro_fair::before {
        top: 65%;
        background: var(--fair_blue1);
        transform: translate(-50%, -50%) rotate(-5deg) ;
    }
    .bg_mpro_fair::after {
        top: 55%;
        background: var(--fair_blue2);
        transform: translate(-50%, -50%) rotate(10deg);
        z-index: -1;
    }
    @media (max-width: 699px){
        .bg_mpro_fair::before,
        .bg_mpro_fair::after {
            width: 130%;
            height: 200px; 
        }
        .bg_mpro_fair::before {
            top: 50%;
        }
        .bg_mpro_fair::after {
            top: 50%;
        }
    }

/* ================== topic ================== */
    .mpro_fair_topic { 
        padding-bottom: 70px; 
    }
    .mpro_fair_topic_text { 
        box-shadow: 5px 5px 5px rgba(0,0,0,0.2); 
    }
    .mpro_fair_topic_text .mpro_fair_topic_img {
        position: relative;
    }    
    .mpro_fair_topic_text .mpro_fair_topic_img img{
        position: absolute;
        right: -15%; 
        bottom: -130px;
        max-width: 320px; 
        height: auto;
        filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.2));
    }
    @media (max-width: 699px){
    .mpro_fair_topic { 
        padding-bottom: 1em; 
    }
    .mpro_fair_topic_text .mpro_fair_topic_img {
        position: static;
    }
    .mpro_fair_topic_text .mpro_fair_topic_img img  {
        position: static;
        max-width: 80%; 
        height: auto;
        }
    }
/* ================== navi ================== */
    .mpro_fair_nav a {
        position: relative;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
        top: 0;
        background-color: var(--fair_red);
        transition: .2s ease-in-out;
    }
    .mpro_fair_nav a:hover { top: 5px; box-shadow: 0 0; }

/* ================== bottom ================== */
    .bg_mpro_fair_bottom {
        background-color: var(--fair_bg);
        padding-top: 50px;
        padding-bottom: 50px;
    }

  /* ================== balloon ================== */
    .bg_mpro_fair .balloons{
        position:absolute; inset:0;
        overflow:hidden; pointer-events:none; z-index:1;
        --speed: 0.346;
    }

    .bg_mpro_fair .balloon{
        position:absolute;
        left:var(--x, 10%);  
        bottom:-20vh;  
        width:var(--size, 88px);
        aspect-ratio: 0.78; 
        background:
        radial-gradient(35% 35% at 35% 30%, rgba(255,255,255,.85), transparent 60%),
        var(--color, #ffd2e8);
        border-radius: 55% 55% 50% 50% / 62% 62% 38% 38%;
        box-shadow:
        inset 0 -10px 16px rgba(0,0,0,.10),
        0 12px 20px rgba(0,0,0,.15);
        filter: drop-shadow(0 4px 6px rgba(0,0,0,.15));

        --T: calc(var(--dur, 16s) * var(--speed, 1));
        --delayEff: calc(var(--T) * var(--phase, 0));
        opacity: 1;
        animation: mpro_float var(--T) linear var(--delayEff) 1 forwards;
    }

    .bg_mpro_fair .balloon::before{
        content:"";
        position:absolute; left:50%; bottom:-7px;
        width:14px; height:12px; transform:translateX(-50%) rotate(28deg);
        background:var(--color, #ffd2e8);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
    }

    .bg_mpro_fair .balloon::after{
        content:"";
        position:absolute; left:50%; bottom:-82px; transform:translateX(-50%);
        width:1.6px; height:82px;
        background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.25));
        border-radius:1px; opacity:.9;
    }

    @keyframes mpro_float{
        0%   { transform: translateY(0)        translateX(0)    rotate(0deg); }
        50%  { transform: translateY(-60vh)    translateX(10px) rotate(-1.2deg); }
        99.9%{ transform: translateY(-149vh)   translateX(-6px) rotate(0.8deg); }
        100% { transform: translateY(-150vh)   translateX(-8px) rotate(1deg); visibility: hidden; }
    }
    
    .bg_mpro_fair .balloons .balloon:nth-child(1){ --x: -2%;  --size:80px; --color: var(--fair_yellow); --dur:13s; --phase:-0.10; }
    .bg_mpro_fair .balloons .balloon:nth-child(2){ --x: 5%;  --size:65px; --color: var(--fair_green); --dur:14s; --phase:-0.45; }
    .bg_mpro_fair .balloons .balloon:nth-child(3){ --x: 8%; --size:78px; --color: var(--fair_pink); --dur:18s; --phase:-0.65; }
    .bg_mpro_fair .balloons .balloon:nth-child(4){ --x: 92%; --size:82px; --color: #B3E2FF; --dur:11s; --phase:-0.20; }
    .bg_mpro_fair .balloons .balloon:nth-child(5){ --x: 98%; --size:73px; --color: red; --dur:16s; --phase:-0.55; }

    @media (prefers-reduced-motion: reduce){
        .bg_mpro_fair .balloon{ animation:none !important; opacity:1; }
        .bg_mpro_fair .balloon::after{ display:none; }
    }

    @media (max-width: 699px){
        .bg_mpro_fair .balloons .balloon:nth-child(3),
        .bg_mpro_fair .balloons .balloon:nth-child(5){ display:none; }
    }