@charset "utf-8";

:root{
    --lightningcss-light:initial;
    --lightningcss-dark: ;
    color-scheme:light;
    --color-surface:#FEFEFE;
    --color-line:#DDC07A;
    --color-text:#FEFEFE;
    --color-muted:#FEFEFE;
    --color-accent:#DDC07A;
    --color-accent-contrast:#FEFEFE;
    --color-surface-hover:color-mix(in oklab, var(--color-surface) 95%, var(--color-text) 5%);
    --color-surface-muted:color-mix(in oklab, var(--color-line) 20%, var(--color-surface));
    --color-axis-line:color-mix(in oklab, var(--color-text) 25%, var(--color-line))
    }

button,dialog,[popover]{font:inherit}button{appearance:none;color:inherit;white-space:normal;-webkit-user-select:none;user-select:none;background:0 0;border:0}
a{color:inherit}
.page{width:100%;margin-inline:auto;padding:0}
.stage{background:var(--color-surface);border:0;border-radius:0;align-content:center;justify-items:center;gap:16px;min-height:100vh;padding:24px;display:grid}
@media (width<=640px){
.stage{padding:16px}}
.button{border:1px solid var(--color-line);background:var(--color-surface);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;min-height:44px;padding-block:0;padding-inline:16px;transition:scale .3s,color .2s,border-color .2s;display:inline-flex}
@media (any-hover:hover){
.button:hover{color:var(--color-accent);border-color:var(--color-accent)}}
.button:active{scale:.98}
.surface-card{--surface-radius:18px;border:1px solid var(--color-line);border-radius:var(--surface-radius);background:var(--color-surface);min-width:0}
.demo-compare{gap:16px;width:100%;min-width:0;display:grid}
.demo-compare>.button{justify-self:end}
.demo-replay{gap:8px}
.demo-replay .replay-icon{flex:none;place-items:center;width:18px;height:18px;display:grid}
.demo-replay .replay-icon:before{content:"";transform-origin:50%;background:currentColor;width:16px;height:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V2L8 6l4 4V7c3.31 0 6 2.69 6 6 0 .34-.03.67-.08 1h2.02c.04-.33.06-.66.06-1 0-4.42-3.58-8-8-8Zm-6 6c0-.34.03-.67.08-1H4.06A8.93 8.93 0 0 0 4 11c0 4.42 3.58 8 8 8v3l4-4-4-4v3c-3.31 0-6-2.69-6-6Z' fill='black'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V2L8 6l4 4V7c3.31 0 6 2.69 6 6 0 .34-.03.67-.08 1h2.02c.04-.33.06-.66.06-1 0-4.42-3.58-8-8-8Zm-6 6c0-.34.03-.67.08-1H4.06A8.93 8.93 0 0 0 4 11c0 4.42 3.58 8 8 8v3l4-4-4-4v3c-3.31 0-6-2.69-6-6Z' fill='black'/%3E%3C/svg%3E") 50%/contain no-repeat}@media (any-hover:hover){
.demo-replay:hover .replay-icon:before{animation:.5s replay-spin}}
@keyframes replay-spin{to{rotate:-1turn}}
.demo-visual{justify-items:center;width:100%;min-width:0;display:grid}
.demo-graph-panel{justify-items:center;gap:10px;width:100%;min-width:0;display:grid}
.close-button{block-size:40px;inline-size:40px;border-radius:999px;flex:none;place-items:center;min-height:40px;padding:0;display:inline-grid}
.close-icon{width:14px;height:14px;transition:rotate .8s var(--spring-bouncy);pointer-events:none;position:relative;rotate:0deg}
@media (any-hover:hover){
.close-button:hover .close-icon{rotate:90deg}}
.close-icon:before,.close-icon:after{content:"";background:currentColor;width:14px;height:2px;position:absolute;top:50%;left:50%;translate:-50% -50%}
.close-icon:before{rotate:45deg}
.close-icon:after{rotate:-45deg}
.demo-picker{border:1px solid var(--color-line);background:var(--color-surface);border-radius:16px;gap:12px;margin:0;padding:8px 12px 12px;display:grid;position:fixed;top:16px;left:16px}
.demo-picker legend{color:var(--color-muted);padding-inline:6px;font-size:.75rem;font-weight:700}
.demo-picker label{cursor:pointer;align-items:center;gap:8px;font-family:Helvetica Neue,sans-serif;transition:all .2s;display:flex}
.demo-picker label:has(input:checked){font-size:1.5rem;font-weight:900}
.demo-picker input{accent-color:var(--color-accent);margin:0}




:root {
        --spring-default: linear(0, 0.0107, 0.0398, 0.0834, 0.138, 0.2003, 0.2677, 0.3379, 0.4089, 0.4791, 0.5471, 0.612, 0.6731, 0.7297, 0.7815, 0.8283, 0.87, 0.9068, 0.9388, 0.9662, 0.9892, 1.0083, 1.0237, 1.0357, 1.0449, 1.0514, 1.0556, 1.058, 1.0587, 1.0581, 1.0563, 1.0538, 1.0506, 1.0469, 1.043, 1.0388, 1.0347, 1.0306, 1.0266, 1.0228, 1.0192, 1.0159, 1.0128, 1.0101, 1.0076, 1.0055, 1.0036, 1.002, 1.0006, 0.9995, 0.9986, 0.9979, 0.9974, 0.997, 0.9967, 0.9966, 0.9966, 0.9966, 0.9967, 0.9968, 0.997, 0.9972, 0.9975, 0.9977, 0.998, 0.9982, 0.9984, 0.9987, 0.9989, 0.9991, 0.9992, 0.9994, 0.9996, 0.9997, 0.9998, 0.9999, 1, 1, 1.0001, 1.0001, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1);
        --spring-snappy: linear(0, 0.0088, 0.0327, 0.068, 0.1117, 0.1614, 0.2149, 0.2706, 0.327, 0.3831, 0.4379, 0.4907, 0.5412, 0.5889, 0.6336, 0.6751, 0.7135, 0.7487, 0.7809, 0.81, 0.8362, 0.8597, 0.8807, 0.8994, 0.9158, 0.9302, 0.9428, 0.9537, 0.9632, 0.9712, 0.9781, 0.9839, 0.9888, 0.9928, 0.9961, 0.9988, 1.001, 1.0026, 1.0039, 1.0049, 1.0055, 1.006, 1.0062, 1.0063, 1.0062, 1.0061, 1.0059, 1.0056, 1.0053, 1.005, 1.0046, 1.0043, 1.0039, 1.0036, 1.0032, 1.0029, 1.0026, 1.0023, 1.0021, 1.0018, 1.0016, 1.0014, 1.0012, 1.0011, 1.0009, 1.0008, 1.0006, 1.0005, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
        interpolate-size: allow-keywords;
        }

        .stage.accordion-stage {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }
        .accordion {
            width:100%;
            /* width: min(520px, calc(100vw - 32px)); */
            display: grid;
            gap: 12px;
        }





        .accordion-item {
            --panel-opacity: 0;
            --summary-rotate: 0deg;
            /* border: 1px solid var(--color-line); */
            border-radius: 0px;
            overflow: clip;
            transition: border-color 0.2s ease;

            /*
            @media (any-hover: hover) {
                &:hover { border-color: var(--color-accent); }
            }
            */

            &[open] {
                --panel-opacity: 1;
                --summary-rotate: 45deg;
                --summary-rotate-arrow: 180deg;

                &::details-content {
                    block-size: auto;
                    transition:
                    block-size 0.6s var(--spring-default),
                    content-visibility 1s allow-discrete;
                }
            }

            /* ***** トリガー設定 ***** */

            summary {
                list-style: none;;
                padding:1.5rem 1.5rem 1.5rem 4rem;
                color:var(--white-color);
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
                font-size:1rem;
                background:#474746;
                border-radius:2px;
                line-height: 150%;

                &::-webkit-details-marker {
                    display: none;
                }
                
                

                .summary-icon {
                    position: relative;
                    flex: none;
                    width: 12px;
                    height: 12px;
                    margin-left: 1rem;
                    display: grid;
                    place-items: center;
                    color: inherit;
                    rotate: var(--summary-rotate);
                    transition:
                    rotate 0.45s var(--spring-snappy),
                    color 0.2s ease;

                    &::before,
                    &::after {
                        content: "";
                        grid-area: 1 / 1;
                        width: 12px;
                        height: 2px;
                        background: #FFF;
                    }

                    &::after {
                        transform: rotate(90deg);
                    }
                }
                
                
                .accordion-arrow {
                    position: relative;
                    margin-inline:auto;
                    flex: none;
                    width: 30px;
                    height: 30px;
                    background: url("../images/parts/icon-arrow-bottom.svg") center center / cover;
                    display: grid;
                    place-items: center;
                    color: inherit;
                    rotate: var(--summary-rotate-arrow);
                    transition: rotate 0.45s var(--spring-snappy), color 0.2s ease;
                }
                

                @media (any-hover: hover) {
                    &:hover .summary-icon {
                      color:#2F3132;
                    }
                }
            }
            
            summary.accordion-btn {
                padding:1.5rem 1.5rem 1.5rem 2rem;
                text-align: center;
                font-size: 1.175em;
                background: #0d293d;
                border:none;
                color:#FFF;
            }

            &::details-content {
                block-size: 0;
                overflow: clip;
                transition:
                block-size 0.3s ease,
                content-visibility 0.3s allow-discrete;
            }

            .item-content {
                padding-block-start: 0px;

                .panel {
                    padding: 8% 10% ;
                    color: var(--color-muted);
                    opacity: var(--panel-opacity);
                    transition: opacity 0.2s linear;
                }
            }
        }
        

        @media screen and (max-width:1024px) {
        .accordion-item { summary { padding:1.25rem 1.25rem 1.25rem 3.5rem; } }
        .accordion-item { summary { .accordion-arrow { width: 24px; height: 24px; } } }
        }
        @media screen and (max-width:767px) {
        .accordion-item { summary { padding:1.25rem 1.25rem 1.25rem 3rem; } }
        }

        .accordion-contents {
        padding:1.5rem 1rem;
        box-sizing: border-box;
        }


/*==================================================================================================

       FAQ

===================================================================================================*/

        .faq-q {
        position: relative;
        box-sizing: border-box;
        background: #EFE3BF;
        padding:1.25rem 1.25rem 1.25rem 4rem;
        border-radius:10px;
        }
        .faq-q:before {
        content: "Q";
        font-weight: 600;
        position: absolute;
        color:var(--white-color);
        
        top: 50%;
        translate:0 -50%;
        left: 1.25rem;
        line-height: 100%;
        font-size: 1.8em;
        margin-top: -.1em;
        font-family:var(--font-family);
        }
        .faq-a {
        position: relative;
        font-size: 1rem;
        line-height: 150%;
        box-sizing: border-box;
        padding: 1.25rem 0 2.25rem 4rem;
        }
        .faq-a:before {
        content: "A";
        font-weight: 600;
        position: absolute;
        top: 1rem;
        left: 1.25rem;
        line-height: 100%;
        font-size: 1.8em;
        font-family:var(--font-family);
        opacity:.7;
        color:#AAA;
        }

        @media screen and (max-width:1024px) {
        .faq-q:before { font-size: 1.5rem; margin-top:-.05em; }
        .faq-a { padding: 1.25rem 0 0.25rem 3.5rem;}
        .faq-a:before { font-size: 1.5rem; top:1.1rem; }
        }

        @media screen and (max-width:767px) {
        .faq-q:before { font-size: 1.25rem; margin-top:0; }
        .faq-a { padding: 1rem 0 0.25rem 3rem; }
        .faq-a:before { font-size: 1.25rem; top:1.1rem; }
        }


.normal-faq-q {
        position: relative;
        box-sizing: border-box;
        list-style: none;;
        padding:1.25rem 1.25rem 1.25rem 4rem;
        color:var(--font-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        /*
        cursor: pointer;
        */
        font-size:1rem;
        background:#EBF3DD;
        border-radius:10px;
        line-height: 150%;
        }
        .bg-gray .normal-faq-q {
        background:#FFF;
        }
        
        .normal-faq-q:before {
        content: "Q";
        font-weight: 600;
        position: absolute;
        color:var(--font-color);
        top: 50%;
        translate:0 -50%;
        left: 1.25rem;
        line-height: 100%;
        font-size: 1.8em;
        margin-top: -.1em;
        font-family:var(--font-family);
        }
        .normal-faq-a {
        position: relative;
        font-size: 1rem;
        line-height: 150%;
        box-sizing: border-box;
        padding: 1.25rem 0 0.25rem 4rem;
        }
        .normal-faq-a:before {
        content: "A";
        font-weight: 600;
        position: absolute;
        top: 1rem;
        left: 1.25rem;
        line-height: 100%;
        font-size: 1.8em;
        font-family:var(--font-family);
        opacity:.5;
        }

        @media screen and (max-width:1024px) {
        .normal-faq-q { padding:1.25rem 1.25rem 1.25rem 3.5rem; }
        .normal-faq-q:before { font-size: 1.5rem; margin-top:-.05em; }
        .normal-faq-a { padding: 1.25rem 0 0.25rem 3.5rem;}
        .normal-faq-a:before { font-size: 1.5rem; top:1.1rem; }
        }

        @media screen and (max-width:767px) {
        .normal-faq-q { padding:1rem 1.25rem 1rem 3rem; }
        .normal-faq-q:before { font-size: 1.25rem; margin-top:0; }
        .normal-faq-a { padding: 1rem 0 0.25rem 3rem; }
        .normal-faq-a:before { font-size: 1.25rem; top:1.1rem; }
        }