/* =========================
   Reset
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================
   Base
========================= */

body{

    font-family:
        "Noto Sans Devanagari",
        "Noto Sans JP",
        sans-serif;

    background:#f4f7fb;

    color:#333;

    line-height:1.8;
}

/* =========================
   Header
========================= */

header{

    background:
        linear-gradient(
            135deg,
            #dc143c,
            #003893
        );

    color:white;

    text-align:center;

    padding:60px 20px;
}

header h1{

    font-size:2rem;

    margin-bottom:10px;
}

header p{

    font-size:1rem;

    opacity:.95;
}

/* =========================
   Main Area
========================= */

section{

    max-width:900px;

    margin:40px auto;

    padding:0 20px;
}

/* =========================
   Card
========================= */

.card{

    background:white;

    padding:25px;

    border-radius:15px;

    box-shadow:
        0 4px 15px rgba(0,0,0,.08);

    margin-bottom:20px;
}

.card h2,
.card h3{

    margin-bottom:10px;
}

/* =========================
   Form
========================= */

select,
input{

    width:100%;

    padding:12px;

    border:1px solid #ddd;

    border-radius:10px;

    margin-top:8px;

    margin-bottom:20px;

    font-size:1rem;
}

/* =========================
   Button
========================= */

.cta-btn,
.big-button{

    display:block;

    width:100%;

    text-align:center;

    background:#dc143c;

    color:white;

    text-decoration:none;

    border:none;

    border-radius:12px;

    padding:16px;

    font-size:1.1rem;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;
}

.cta-btn:hover,
.big-button:hover{

    opacity:.9;

    transform:translateY(-2px);
}

/* =========================
   Notice
========================= */

.notice{

    background:#fff7f7;

    border-left:6px solid #dc143c;

    padding:20px;

    border-radius:10px;
}

.notice h2{

    color:#dc143c;

    margin-bottom:10px;
}

/* =========================
   Compare Flow
========================= */

.compare-flow{

    max-width:700px;

    margin:0 auto;
}

/* Current Plan */

.flow-card{

    background:white;

    border-radius:15px;

    padding:25px;

    text-align:center;

    box-shadow:
        0 3px 12px rgba(0,0,0,.08);
}

.flow-card h3{

    margin-bottom:10px;
}

.old{

    border-left:8px solid #888;
}

.new{

    border-left:8px solid #dc143c;
}

.flow-price{

    font-size:2.3rem;

    font-weight:bold;

    color:#003893;

    margin:10px 0;
}

/* Arrow */

.arrow{

    text-align:center;

    font-size:3rem;

    color:#dc143c;

    font-weight:bold;

    margin:15px 0;
}

/* Saving Result */

.save-result{

    background:
        linear-gradient(
            135deg,
            #dc143c,
            #ff5b7f
        );

    color:white;

    padding:30px;

    border-radius:15px;

    text-align:center;

    box-shadow:
        0 5px 15px rgba(220,20,60,.25);
}

.save-result h2{

    color:white;

    margin-bottom:10px;
}

/* Recommended Plan */

.recommend-plan{

    background:white;

    border:2px solid #dc143c;

    border-radius:15px;

    padding:25px;

    margin-top:25px;

    text-align:center;
}

.recommend-plan h2{

    color:#dc143c;

    margin-bottom:10px;
}

.recommend-plan h3{

    font-size:1.5rem;

    margin-bottom:10px;
}

/* =========================
   Footer
========================= */

footer{

    background:#222;

    color:white;

    text-align:center;

    padding:30px;

    margin-top:50px;
}

/* =========================
   Mobile
========================= */

@media(max-width:768px){

    header{

        padding:50px 15px;
    }

    header h1{

        font-size:1.6rem;
    }

    .flow-price{

        font-size:1.8rem;
    }

    .arrow{

        font-size:2.5rem;
    }

    .save-result h2{

        font-size:1.4rem;
    }

    .card{

        padding:20px;
    }
}