@font-face {
    font-family: 'GenSekiGothic';
    src: url('../fonts/GenSekiGothic-L.woff') format('woff');
    font-weight: 300;
}
@font-face {
    font-family: 'GenSekiGothic';
    src: url('../fonts/GenSekiGothic-M.woff') format('woff');
    font-weight: 500;
}
@font-face {
    font-family: 'GenSekiGothic';
    src: url('../fonts/GenSekiGothic-B.woff') format('woff');
    font-weight: 700;
}
@font-face {
    font-family: 'GenSekiGothic';
    src: url('../fonts/GenSekiGothic-H.woff') format('woff');
    font-weight: 900;
}
h1, h2, h3, h4, h5, span, a, label { letter-spacing: 1px !important; }
h3 { line-height: 50px !important; }
span, label { line-height: 30px !important; }
:root {
    /* main */
    --color-orange: #f08e4d;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-dark-gray: #2e3333;
    /* client */
    --color-light-orange: #fbe3d5;
    --color-standard-orange: #f09048;
    --color-dark-orange: #e26a3e;
    /* specialist */
    --color-light-blue: #e0eeef;
    --color-standard-blue: #268eae;
    --color-dark-blue: #2b559d;
    /* family */
    --color-light-yellow: #fff4d6;
    --color-standard-yellow: #f0e264;
    --color-dark-yellow: #f0bb41;
    /* caregiver */
    --color-light-green: #c5e3d3;
    --color-standard-green: #26af81;
    --color-dark-green: #1f9369;
    /* admin */
    --color-light-gray: #cccccc;
    --color-standard-gray: #666666;
    --color-dark-gray: #2e3333;
    /* for gradient */
    --color-gradient-dark-client: #ed6d3d;
    --color-gradient-light-client: #edb098;
    --color-gradient-dark-specialist: #2e59a7;
    --color-gradient-light-specialist: #4994c4;
    --color-gradient-dark-family: #fac03d ;
    --color-gradient-light-family: #fad789;
    --color-gradient-dark-caregiver: #9ebc19;
    --color-gradient-light-caregiver: #c1c98b;
    --color-gradient-dark-admin: #898781;
    --color-gradient-light-admin: #b4b2ae;
}
#header {
    background-color: var(--color-orange);
    padding: 9px 0;
    a {
        text-decoration: none;
        color: var(--color-white);
        padding: 5px 10px;
        white-space: nowrap;
        float: right;
        font-family: GenSekiGothic;
        font-weight: 500;
        cursor: pointer;
    }
    a:hover {
        color: var(--color-black);
    }
    .to_register_btn {
        margin: 0 10px;
        border: 1px solid var(--color-black);
        border-radius: 30px;
        color: var(--color-black) !important;
        background-color: var(--color-white) !important;
        font-weight: 300;
        cursor: pointer;
    }
    .to_register_btn:hover {
        border: 1px solid var(--color-white);
        color: var(--color-white) !important;
        background : linear-gradient(to right, var(--color-gradient-dark-client), var(--color-gradient-light-client));
        box-shadow: 0 0 5px 0px var(--color-standard-gray);
    }
}
#introduction::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 0;
    width: 100%;
    height: calc(75vh + 18px);
    max-height: 650px;
    background-color: var(--color-orange);
    transform: skewY(-7.6deg); 
    z-index: -1;
}
#introduction {
    background-color: var(--color-orange);
    max-width: 100vw;
    height: 10vw;
    min-height: 100px;
    .logo {
        margin: 30px 0 0 100px;
        width: 150px;
    }
    .title {
        margin: 10px 0 0 100px;
        font-size: 4rem;
        font-family: GenSekiGothic;
        font-weight: 700;
    }
    .subtitle {
        margin: 0 0 0 100px;
        font-size: 2.3rem;
        font-family: GenSekiGothic;
        font-weight: 700;
    }
    .title_info {
        margin: 15px 0 0 100px;
        width: 270px;
        font-size: 1rem;
        display: block;
        font-family: GenSekiGothic;
        font-weight: 300;
    }
    .to_register_btn {
        text-decoration: none;
        display: inline-block;
        margin: 15px 0 0 100px;
        padding: 8px 15px;
        border: 1px solid var(--color-black);
        border-radius: 30px;
        color: var(--color-black) !important;
        background-color: var(--color-white) !important;
        cursor: pointer;
    }
    .to_register_btn:hover {
        border: 1px solid var(--color-white);
        color: var(--color-white) !important;
        background : linear-gradient(to right, var(--color-gradient-dark-client), var(--color-gradient-light-client));
        box-shadow: 0 0 5px 0px var(--color-standard-gray);
    }
    --circle-width: calc(30vw + 125px);
    .circle {
        position: absolute;
        width: var(--circle-width);
    }
    .phone_l {
        transition: all 1s ease-out;
        position: absolute;
        left: calc(var(--circle-width) * 0.22);
        width:175px;
        z-index: 3;
    }
    .phone_r {
        transition: all 1s ease-out;
        position: absolute;
        left: calc(var(--circle-width) * 0.48);
        width:175px;
        z-index: 2;
    }
    .title2 {
        position: relative;
        z-index: 1;
        justify-content: center;
        h1 {
            padding-top: 12vh;
            text-align: center;
            font-size: 2.3rem;
            font-family: GenSekiGothic;
            font-weight: 700;
        }
        span {
            text-align: center;
            font-size: 1rem;
            font-family: GenSekiGothic;
            font-weight: 300;
            margin-bottom: 45px;
            letter-spacing: 5px !important;
        }
        .show_all { width: 60%; }
        h2 {
            padding-top: 5vh;
            text-align: center;
            font-size: 1.5rem;
            font-family: GenSekiGothic;
            font-weight: 700;
        }
    }
}
#details {
    max-width: 90%;
    h1 {
        text-align: center;
        font-size: 2.3rem;
        font-family: GenSekiGothic;
        font-weight: 700;
        margin-top: 45px;
    }
    .arrow {
        background-color: var(--color-white);
        border-radius: 30px;
        padding: 5px;
        margin: 10px 0 25px 0;
    }
    h2 {
        margin-top: 5px;
        text-align: center;
        font-size: 1.5rem;
        font-family: GenSekiGothic;
        font-weight: 700;
    }
    h3 {
        text-align: center;
        font-size: 1rem;
        font-family: GenSekiGothic;
        font-weight: 500;
        width: var(--icon-width);
        margin-bottom: 0;
        line-height: 25px !important;
    }
    span {
        font-size: 1rem;
        font-family: GenSekiGothic;
        font-weight: 300;
        display: block;
        margin-bottom: 25px;
    }
    .role {
        border: 5px solid var(--color-white);
        border-radius: 15px;
        padding-bottom: 50px;
    }
    --icon-width: 12.5vw;
    .icon {
        width: var(--icon-width);
        margin: 25px 0;
    }
    .download_icon_container{
        margin-right: 25px;
    }
    .download_icon {
        width: calc(var(--icon-width) * 0.75);
        margin-bottom: 5px;
    }
    .download_text {
        width: calc(var(--icon-width) * 0.75);
    }
    .w-1 {
        display: none;
        width: 100%;
        margin-top: -15px;
    }
    .w-3 {
        width: calc(var(--icon-width) + 7.5vw);
        display: block;
    }
    .w-9 {
        display: none;
        width: 60% !important;
        border-left: 1px solid var(--color-black);
        padding-left: 50px;
        span { text-align: left; }
        .to_btn {
            display: none;
            text-decoration: none;
            padding: 8px 15px;
            margin: 10px 0;
            border: 1px solid var(--color-black);
            border-radius: 30px;
            color: var(--color-black);
            background-color: var(--color-white);
            font-family: GenSekiGothic;
            font-weight: 300;
            cursor: pointer;
        }
        .to_btn:hover {
            border: 1px solid var(--color-white);
            color: var(--color-white) !important;
            box-shadow: 0 0 5px 0px var(--color-standard-gray);
        }
    }
    .specialist:hover { background : linear-gradient(to right, var(--color-gradient-dark-specialist), var(--color-gradient-light-specialist)); }
    .client:hover { background : linear-gradient(to right, var(--color-gradient-dark-client), var(--color-gradient-light-client)); }
    .family:hover { background : linear-gradient(to right, var(--color-gradient-dark-family), var(--color-gradient-light-family)); }
    .caregiver:hover { background : linear-gradient(to right, var(--color-gradient-dark-caregiver), var(--color-gradient-light-caregiver)); }
}
#role_detail {
    .detail-icon {
        width: 4.5vw;
        height: auto;
        position: absolute;
        z-index: 1;
        top: 25px;
        border: 15px solid var(--color-white);
        border-radius: 100px;
    }
    .detail-box {
        border: 10px solid var(--color-white);
        border-radius: 20px;
    }
    .detail-title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0 -15px 0;
    }
    .detail-title-image {
        height: 7vh;
        min-height: 70px;
        width: auto;
    }
    .detail-title-image-l {
        height: 7vh;
        min-height: 70px;
        width: auto;
    }
    .detail-title-image-s {
        display: none;
    }
    .detail-content-box {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        width: 90%;
        padding: 2vw 0;
        background-color: var(--color-white);
        margin: 15px 0 50px 0;
    }
    .detail-image {
        width: 90%;
    }
    .btn-style {
        text-decoration: none;
        padding: 8px 18px;
        white-space: nowrap;
        font-family: GenSekiGothic;
        font-weight: 700;
        border: 1px solid var(--color-black);
        border-radius: 30px;
        color: var(--color-black) !important;
        background-color: var(--color-white) !important;
        cursor: pointer;
    }
    .btn-return-style {
        text-decoration: none;
        padding: 8px 18px;
        white-space: nowrap;
        font-family: GenSekiGothic;
        font-weight: 700;
        border: 1px solid var(--color-white);
        border-radius: 30px;
        color: var(--color-white) !important;
        background-color: var(--color-black) !important;
        cursor: pointer;
    }
    .detail-text-container {
        align-items: center;
    }
    .detail-text {
        font-family: GenSekiGothic;
        font-weight: 500;
        text-align: center;
        font-size: 1.5rem;
        padding: 0 15%;
        overflow-wrap: break-word;
        color: var(--color-white);
    }
    #detail_specialist {
        max-width: 90%;
        margin-top: 60px;
        .btn-style:hover, .btn-style.active {
            border: 1px solid var(--color-white);
            color: var(--color-white) !important;
            background : linear-gradient(to right, var(--color-gradient-dark-specialist), var(--color-gradient-light-specialist));
            box-shadow: 0 0 5px 0px var(--color-standard-gray);
        }
        .detail-content-box { border: 2px solid var(--color-standard-blue); }
        .detail-text-container { height: 50%; }
    }
    #detail_client {
        max-width: 90%;
        .btn-style:hover, .btn-style.active {
            border: 1px solid var(--color-white);
            color: var(--color-white) !important;
            background : linear-gradient(to right, var(--color-gradient-dark-client), var(--color-gradient-light-client));
            box-shadow: 0 0 5px 0px var(--color-standard-gray);
        }
        .detail-content-box { border: 2px solid var(--color-standard-orange); }
        .detail-text-container { height: 60%; }
    }
    #detail_family {
        max-width: 90%;
        .btn-style:hover, .btn-style.active {
            border: 1px solid var(--color-white);
            color: var(--color-white) !important;
            background : linear-gradient(to right, var(--color-gradient-dark-family), var(--color-gradient-light-family));
            box-shadow: 0 0 5px 0px var(--color-standard-gray);
        }
        .detail-content-box { border: 2px solid var(--color-standard-yellow); }
        .detail-text-container { height: 60%; }
    }
    #detail_caregiver {
        max-width: 90%;
        .btn-style:hover, .btn-style.active {
            border: 1px solid var(--color-white);
            color: var(--color-white) !important;
            background : linear-gradient(to right, var(--color-gradient-dark-caregiver), var(--color-gradient-light-caregiver));
            box-shadow: 0 0 5px 0px var(--color-standard-gray);
        }
        .detail-content-box { border: 2px solid var(--color-standard-green); }
        .detail-text-container { height: 60%; }
    }
    #detail_admin {
        max-width: 90%;
        .btn-style {
            text-decoration: none;
            padding: 8px 18px;
            white-space: nowrap;
            font-family: GenSekiGothic;
            font-weight: 700;
            border: 1px solid var(--color-white);
            border-radius: 30px;
            color: var(--color-white) !important;
            background-color: var(--color-black) !important;
            cursor: pointer;
        }
        .btn-style:hover, .btn-style.active {
            border: 1px solid var(--color-white);
            color: var(--color-white) !important;
            background : linear-gradient(to right, var(--color-gradient-dark-admin), var(--color-gradient-light-admin));
            box-shadow: 0 0 5px 0px var(--color-standard-gray);
        }
        .detail-content-box { border: 2px solid var(--color-standard-gray); }
    }
}
#service_process {
    --map-height: calc(100vw * 3127 / 1921);
    height: var(--map-height);
    max-width: none;
    background-image: url("../img/yuqu_images/process_background.png");
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    h2 {
        text-align: center;
        font-size: 2rem;
        font-family: GenSekiGothic;
        font-weight: 500;
        width: var(--icon-width);
    }
    .process-icon-container {
        display: flex;
        justify-content: center;
    }
    .process-icon {
        /* for mushroom animation this should be 0 first */
        /* height: calc(var(--map-height) / 19); */
        height: 0;
        width: auto;
        margin: 0 -0.5vw;
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    .process-block1 {
        position: absolute;
        top: calc(var(--map-height) * 0.005);
        right: 17%;
    }
    .process-block2 {
        position: absolute;
        top: calc(var(--map-height) * 0.23);
        left: 5%;
    }
    .process-block3 {
        position: absolute;
        top: calc(var(--map-height)* 0.42);
        right: 3%;
    }
    .process-block4 {
        position: absolute;
        top: calc(var(--map-height)* 0.6);
        left: 11%;
    }
    .process-info1 {
        position: absolute;
        height: calc(var(--map-height) * 2.3 / 19);
        width: auto;
        bottom: calc(var(--map-height) * 0.07);
        left: 6%;
    }
    .process-info2 {
        position: absolute;
        height: calc(var(--map-height) * 2.3 / 19);
        width: auto;
        bottom: calc(var(--map-height) * 0.1);
        left: 22%;
    }
    .process-info3 {
        position: absolute;
        height: calc(var(--map-height) * 2.5 / 19);
        width: auto;
        bottom: calc(var(--map-height) * 0.11);
    }
    .process-info4 {
        position: absolute;
        height: calc(var(--map-height) * 2.3 / 19);
        width: auto;
        bottom: calc(var(--map-height) * 0.1);
        right: 22%;
    }
    .process-info5 {
        position: absolute;
        height: calc(var(--map-height) * 2.3 / 19);
        width: auto;
        bottom: calc(var(--map-height) * 0.07);
        right: 6%;
    }
    .process-slogan {
        position: absolute;
        height: calc(var(--map-height) * 0.8 / 19);
        width: auto;
        bottom: calc(var(--map-height) * 0.035);
    }
}
#service_datas {
    h1 {
        text-align: center;
        font-size: 2.5rem;
        font-family: GenSekiGothic;
        font-weight: 900;
        word-break: keep-all;
    }
    h2 {
        margin-top: 5px;
        text-align: center;
        font-size: 1.4rem;
        font-family: GenSekiGothic;
        font-weight: 500;
    }
    h3 {
        margin-top: 5px;
        text-align: center;
        font-size: 1.5rem;
        font-family: GenSekiGothic;
        font-weight: 500;
        display: none;
    }
    .chart1 {
        position: relative;
        .title { margin: 20px 0 10px 28%; }
        .coordinate {
            width: 50%;
            position: absolute;
            left: 38%;
        }
        .data1 {
            width: 6%;
            position: absolute;
            left: 51%;
        }
        .data2 {
            width: 6%;
            position: absolute;
            left: 63.5%;
        }
        .data3 {
            width: 6%;
            position: absolute;
            left: 76%;
        }
        .logo {
            /* for mushroom animation this should be 0 first */
            /* width: 10%; */
            width: auto;
            position: absolute;
            left: 83.5%;
        }
    }
    .chart2 {
        position: relative;
        .title { margin: 20px 28% 10px 0; }
        .coordinate {
            width: 50%;
            position: absolute;
            right: 38%;
        }
        .data1 {
            width: 8%;
            position: absolute;
            right: 76%;
        }
        .data2 {
            width: 8%;
            position: absolute;
            right: 65%;
        }
        .data3 {
            width: 8%;
            position: absolute;
            right: 54%;
        }
        .data4 {
            width: 8%;
            position: absolute;
            right: 43%;
        }
        .logo {
            /* for mushroom animation this should be 0 first */
            /* width: 10%; */
            width: auto;
            position: absolute;
            right: 32%;
        }
    }
    .datas {
        display: flex;
        justify-content: space-around;
        .box {
            padding: 4vh 2vw;
            border-top: 1px solid var(--color-black);
        }
        .odometer {
            display: flex;
            justify-content: center;
            margin: 0 -50px;
            span{ line-height: normal !important; }
        }
        .unit {
            font-size: 2.5rem;
            font-family: GenSekiGothic;
            font-weight: 900;
        }
    }
}
#pictures {
    padding: 0 8vw;
    .image-popup img {
        display: block;
        height: auto;
        width: 100%;
        object-fit: cover;
    }
    h2 {
        margin: 10px 0 5px 0;
        font-size: 1.4rem;
        font-family: GenSekiGothic;
        font-weight: 700;
    }
    h3 {
        font-size: 1rem;
        font-family: GenSekiGothic;
        font-weight: 500;
        line-height: 1rem !important;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--color-black);
    }
}
.mfp-close, .mfp-wrap { cursor: default !important; }
.mfp-wrap { display: flex; justify-content: center; }
.mfp-container { position: static !important; max-width: 80%; }
#about_us {
    h2 {
        font-size: 1rem;
        font-family: GenSekiGothic;
        font-weight: 300;
        line-height: 25px;
    }
    .content {
        background-color: var(--color-light-orange);
        padding: 25px 20vw;
    }
    .contact_l {
        display: flex;
        align-items: center;
    }
    .contact_s {
        display: none;
        align-items: center;
    }
}
#registration {
    font-size: 1.2rem;
    font-family: GenSekiGothic;
    font-weight: 500;

    .form-style {
        border: 2px solid var(--color-orange);
        border-radius: 30px;
        padding: 30px 10vw;
    }
    input {
        border: 1px solid var(--color-black);
        border-radius: 10px;
        padding: 4px 6px;
    }
    select {
        border: 1px solid var(--color-black);
        border-radius: 10px;
        padding: 6px 6px;
    }
    .address-title-s { display: none; }
    .address-title-l { display: block; }
    .county { margin-right: 15px; }
    .divider {
        border-bottom: 6px dotted var(--color-orange);
        width: calc(100% + 20px);
        margin: 20px 0 20px -10px;
    }
}

@media (max-width: 769px) {
    h3 { line-height: 25px !important; }
    span { line-height: 20px !important; }
    #header{
        #header-container {
            display: flex;
            justify-content: center;
        }
        .additional_btn { display: none !important; }
    }
    #introduction::before {
        height: 72vh;
        max-height: 620px;
    }
    #introduction {
        .logo { margin: 0 0 0 50px; }
        .title, .subtitle, .title_info, .to_register_btn { margin-left: 50px; }
        .circle, .phone_l, .phone_r { display: none; }
        .title2 {
            h1 { padding-top: 13vh !important; }
            .show_all { width: 85% !important; }
        }
    }
    #details {
        .arrow {
            margin: 10px 10px 10px 0;
            padding: 1px;
        }
        .role { padding: 0 0 5px 0; }
        .w-1 { display: none !important; }
        .w-3 {
            margin-bottom: 5px;
            h2 { margin: 15px 0 0 0; }
            h3 { display: none !important; }
        }
        .w-9 {
            border: none;
            padding-left: 0;
            span { display: none !important; }
            img {
                width: calc(var(--icon-width) * 1.65);
                margin-bottom: 0;
            }
            .download_icon_container { margin-right: 5px; }
            .download_text { display: none; }
            .to_btn { display: inline-block; }
        }
    }
    #role_detail {
        .detail-icon { display: none; }
        .detail-box { padding: 0; }
        .detail-title-image {
            height: 6vh;
            min-height: 60px;
        }
        .detail-title-image-l { display: none; }
        .detail-title-image-s {
            display: block;
            height: 6vh;
            min-height: 60px;
            width: auto;
            margin-bottom: 10px;
        }
        .detail-content-box { width: 100%; }
        .detail-image { width: 100%; }
        .btn-style { padding: 3px 13px; }
        .col-md-5, .col-md-4 {
            justify-content: center !important;
            padding: 1.5vw 0 0 0 !important;
        }
        .col-md-6 {
            justify-content: center !important;
            padding: 1.5vw 0 1vw 0 !important;
        }
        .detail-text-container { align-items: baseline; }
        .detail-text {
            font-size: 1rem;
            padding: 5vw 5vw;
            word-break: break-all;
        }
        #detail_specialist { padding: 0; }
        #detail_client { padding: 0; }
        #detail_family { padding: 0; }
        #detail_caregiver { padding: 0; }
        .btn-return-style { display: none !important; }
        #detail_admin {
            padding: 0;
            h3 { width: 90% !important; }
            span { padding: 2.5vw 5vw !important; }
        }
    }
    #service_process {
        h2 { font-size: 1rem; }
        .icon { height: 65px; }
        .process-block2 {
            top: calc(var(--map-height) * 0.2);
        }
        .process-block3 {
            top: calc(var(--map-height)* 0.42);
            right: 13%;
        }
        .process-block4 {
            top: calc(var(--map-height)* 0.6);
            left: 12%;
        }
        .process-info3 {
            height: calc(var(--map-height) * 2.3 / 19);
        }
    }
    #service_datas {
        .title { margin: 20px 0 10px 0 !important; }
        .chart1{
            .coordinate { left: 22%; }
            .data1 { left: 35%; }
            .data2 { left: 47.5%; }
            .data3 { left: 60%; }
            .logo { left: 67.5%; }
        }
        .chart2 {
            .coordinate { right: 25%; }
            .data1 { right: 63%; }
            .data2 { right: 52%; }
            .data3 { right: 41%; }
            .data4 { right: 30%; }
            .logo { right: 19%; }
        }
    }
    #pictures { padding: 0 24px; }
    #about_us {
        .content { padding: 25px 5vw; }
        .contact_l { display: none; }
        .contact_s { display: flex; }
    }
    #registration {
        .form-style {
            padding: 30px 5vw;
            margin-left: 10px;
            margin-right: 10px;
        }
        .address-title-s { display: block; }
        .address-title-l { display: none; }
        .divider {
            width: 100%;
            margin-left: 0;
        }
    }
}