@charset "UTF-8";

:root {
    --polygon-height: 100px;
    --counter-font-size: 1em;
    --counter-size: 1.4em;
    --cost-category-1: #0000FF;
    --cost-category-2: #FF570D;
}

.cost_category_1 {
    color: var(--cost-category-1);
}

.cost_category_2 {
    color: var(--cost-category-2);
}

.question_counter {
    font-size: var(--counter-font-size);
    font-weight: bold;
    display: inline-block;
    width: var(--counter-size);
    height: var(--counter-size);
    line-height: var(--counter-size);
    border-radius: 50%;
    text-align: center;
    background-color: #FF570D;
    color: #FFFFFF;
    margin-right: 10px;
}

/*-------------------------------------------
 Simulator/Resource/template/admin/index.twig
---------------------------------------------*/
.simulator_admin_option_search {
    .accordion {
        display: flex;
        justify-content: center;
    }

    &.search-box .input_search {
        margin-right: 0;
        float: none;
    }

    @media screen and (min-width: 768px) {
        &.search-box .input_search {
            margin-inline: 0;
        }
    }
}

.simulator_admin_option_result {
    .box-body {
        border-top: none;
    }

    .item_box:last-child > div {
        border-bottom: 1px solid #D1D8D9;
    }
}

/*--------------------------------------------
 Simulator/Resource/template/admin/option.twig
----------------------------------------------*/
/*----------------------------------------------
 Simulator/Resource/template/admin/question.twig
------------------------------------------------*/
.simulator_admin {
    .cost {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .taxRate {
            @media screen and (max-width: 991px) {
                margin-top: 5px;
            }
        }

        p {
            margin: 0;
        }
    }

    .edit_box_title {
        font-weight: bold;
        font-size: 18px;
    }

    .btn-default {
        margin: 0.5rem;
    }
}

/*------------------------------------------------------------------
 Simulator/Resource/template/default/Block/plg_simulator_header.twig
--------------------------------------------------------------------*/
.simulator_header {
    color: #000000;
    padding-block: 2rem;
    padding-inline: 1rem;
    margin-bottom: 3rem;
    font-weight: bold;
    font-size: 2.4rem;
    text-align: center;
    line-height: 1;
    background-color : #FFFFFF;
    background-image:

        repeating-linear-gradient( 60deg,
        rgba(204, 255, 255, 1) 0px 1px,
        rgba(153, 255, 255, .5) 1px 21px,
        rgba(204, 255, 255, .5) 21px 61px,
        rgba(153, 255, 255, .5) 61px 81px
        ),
        repeating-linear-gradient( -60deg,
        rgba(204, 255, 255, 1) 0px 1px,
        rgba(153, 255, 255, .5) 1px 21px,
        rgba(204, 255, 255, .5) 21px 61px,
        rgba(153, 255, 255, .5) 61px 81px
        );

    background-color: #FFFFFF;
    background-image: linear-gradient(90deg, rgba(204, 255, 255, .5) 50%, transparent 50%),
                    linear-gradient(rgba(204, 255, 255, .5) 50%, transparent 50%);
    background-size: 40px 40px;

    @media screen and (min-width: 768px) {
        font-size: 3.2rem;
    }

    .header_highlight_1 {
        color: #008800;
    }

    .header_highlight_2 {
        color: #FF570D;
    }

    .header_main {
        margin-block: 3%;
        font-weight: bold;
        font-size: 4.8rem;
        color: rgba(0, 0, 0, 0);
        text-shadow: 3px 3px 0 #FF570D;
        -webkit-text-stroke: 1px #FF0000;
        text-stroke: 1px #FF0000;
        padding: 0 0 10px;
        @media screen and (min-width: 768px) {
            font-size: 7.2rem;
        }
    }

    .header_question_counter_wrapper {
        display: inline-flex;
        align-items: center;
    }

    .header_question_counter {
        margin-right: 0;
    }

    .cost {
        background: linear-gradient(transparent 50%, #FFFF88 50%);

        svg {
            vertical-align: middle;
            width: 20px;
            height: 20px;
            @media screen and (min-width: 768px) {
                width: 26px;
                height: 26px;
            }
        }
    }

    .notes_wrapper {
        font-size: 2.4rem;
        text-align: left;
        display: inline-block;
        margin-inline: auto;
        margin-block-end: 1em;

        li {
            text-indent: -1em;
            padding-left: 1em;
        }
    }
}

/*---------------------------------------------
 Simulator/Resource/template/default/index.twig
-----------------------------------------------*/
.simulator_default {
    color: #000000;

    h2 {
        font-size: 2.4rem;

        @media screen and (min-width: 768px) {
            font-size: 2.8rem;
        }
    }

    h3 {
        color: #008000;
        font-size: 2rem;

        @media screen and (min-width: 768px) {
            font-size: 2.2rem;
        }
    }

    .question_wrapper {
        margin-inline: auto;
        position: relative;

        &:first-child {
            padding-block: 2em;
            padding-inline: 1em;
        }

        &:not(:first-child) {
            padding-block: 8em 2em;
            padding-inline: 2em;
        }

        @media screen and (min-width: 768px) {
            &:first-child {
                padding-block: 4em 2em;
            }

            &:not(:first-child) {
                padding-block: 8em 2em;
            }
        }
    
        &:nth-child(odd) {
            background: #E6FFE9;
        }

        &:nth-child(even) {
            background: #DDFFFF;
        }

        &::after {
            content: "";
            position: absolute;
            height: var(--polygon-height);
            width: 100%;
            clip-path: polygon(0 0,50% 100%,100% 0);
            background-color: inherit;
            left: 0;
            bottom: calc(var(--polygon-height) * -1);
            z-index: 2;
        }
    }

    .question {
        margin: .5em auto;
        max-width: 650px;
        width: 100%;
    }

    .options_wrapper {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 16px;

        @media screen and (min-width: 768px) {
            grid-template-columns: 1fr 1fr;
        }
    }

    input[type="radio"] {
        display: none;
    }

    label {
        margin: 10px;
        background-color: #FFFFFF;
        border: 3px solid #DDDDDD;
        border-radius: 10px;
        padding: 1em;
        font-weight: bold;
        cursor: pointer;

        &:has(img) {
            grid-row: span 2;
            display: grid;
            grid-template-rows: subgrid;
            gap: 8px;
        }

        img {
            margin-inline: auto;
            display: block;
        }

        .option_text {
            font-size: 1.6rem;
            position: relative;
            line-height: 1.4;
            display: flex;
            padding-left: 1.8em;

            @media screen and (min-width: 768px) {
                font-size: 1.8rem;
            }

            &::before {
                content: "";
                display: inline-block;
                margin-right: .4em;
                min-width: 1.4em;
                min-height: 1.4em;
                vertical-align: middle;
                border-radius: 50%;
                background: #CCCCCC;
                position: absolute;
                left: 0;
                top: -0.2rem;
            }

            &::after {
                content: "";
                display: block;
                width: 0.7em;
                height: 0.4em;
                border-left: 3px solid #FFFFFF;
                border-bottom: 3px solid #FFFFFF;
                transform: rotate(-45deg);
                position: absolute;
                top: 0.5rem;
                left: 0.35em;
            }
        }
    }

    input[type="radio"]:checked + label {
        background-color: #FFFFDD;
    }

    input[type="radio"]:checked + label > .option_text::before {
        background: #2196F3;
    }

    input[type="radio"]:checked + label > .option_text::after {
        border-left-color: #FFFFFF;
        border-bottom-color: #FFFFFF;
        opacity: 1;
    }

    .question_total {
        margin-top: 1em;
        padding: 1.6em;
        font-size: 2rem;
        text-align: center;
        background: #FFFFFF;

        .question_total_1 {
            color: var(--cost-category-1);
        }

        .question_total_2 {
            color: var(--cost-category-2);
        }

        .question_total_cost_info {
            text-align: left;
            font-size: 1.4rem;

            @media screen and (min-width: 768px) {
                font-size: 1.6rem;
            }

            &:not(:last-child) {
                margin-bottom: 0.5em;
            }

            ul {
                list-style-position: inside;
                font-size: 1.2rem;

                @media screen and (min-width: 768px) {
                    font-size: 1.4rem;
                }

                li {
                    text-indent: -1em;
                    padding-left: 1em;
                }
            }
        }

        .question_total_price_wrapper {
            font-size: 2.2rem;
            font-weight: bold;

            @media screen and (min-width: 768px) {
                font-size: 2.4rem;
            }
        }

        .cost_breakdown {
            display: none;

            ul {
                list-style-type: "・";
            }
        }

        .cost_note {
            display: none;

            ul {
                list-style-type: "※";
            }
        }

        .unsupported {
            color: #FF570D;
        }
    }

    .total_price {
        font-size: 3.2rem;
    }

    .question_title {
        display: flex;

        &::before {
            content: attr(data-question-counter);
            font-weight: bold;
            display: inline-block;
            min-width: var(--counter-size);
            min-height: var(--counter-size);
            width: var(--counter-size);
            height: var(--counter-size);
            border-radius: 50%;
            text-align: center;
            background-color: #FF570D;
            color: #FFFFFF;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .question_note {
        font-size: 1.4rem;
        font-weight: bold;

        @media screen and (min-width: 768px) {
            font-size: 1.6rem;
            margin-left: 2.4em;
        }
    }

    .simulator_result {
        font-size: 2.2rem;
        font-weight: bold;
        margin-top: 15rem;
        text-align: center;

        @media screen and (min-width: 768px) {
            font-size: 2.4rem;
        }

        .simulator_result_cost {
            margin-bottom: 1rem;
        }

        .simulator_result_note {
            font-size: 1.4rem;

            @media screen and (min-width: 768px) {
                font-size: 1.6rem;
            }
        }

        .svg {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .selected_all {
        padding: 1.6em;
        background: #FFFFCC;
        border: 3px solid #FE4D01;

        .total_price_wrapper {
            font-size: 2.8rem;
            color: #FF3333;

            @media screen and (min-width: 768px) {
                font-size: 3.2rem;
            }

            #total {
                font-size: 4.8rem;
            }
        }
    }

    .highlight {
        color: #FF570D;
    }

    .hidden {
        display: none;
        opacity: 0;
    }

    .show {
        display: block;
        animation-name: fadeIn;
        animation-fill-mode: forwards;
        animation-duration: 1s;
    }

    @keyframes fadeIn{
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
    }
}