/* =======================================
   全体共通のスタイル (全デバイスに適用)
   ======================================= */
html {
    scroll-behavior: smooth; 
}

body {
    font-family: "Noto Sans JP", sans-serif;
    margin: 0;
    padding: 0;
    min-width: 1280px;
}

h1 {
    margin: 0 auto;
    text-align: center;

    img {
        width: 350px;
    }
}

h2 {
    color: #323246;
    font-size: 42px;
    font-weight: 800;
    text-align: center;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 15px #fff;
}

h3 {
    color: #323246;
    font-size: 32px;
    font-weight: 800;
    background-color: rgb(64, 144, 247, 0.2);
    border-radius: 8px;
    text-align: center;
}

section.layout-section {
    position: relative;
}

/* 画像の共通スタイル */
.device-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

/* 背景 */
#bg-image {
    position: fixed;
    pointer-events: none;
    z-index: -1;

    .entrance {
        position: relative;
        left: 12%;
        width: 80%;
        animation: floatEntrance 10s ease-in-out infinite alternate;
    }

    #bg-layer-particle-1 {
        background-image: url('./particle_01.png');
    }
    #bg-layer-particle-2 {
        background-image: url('./particle_02.png');
    }
    #bg-layer-particle-3 {
        background-image: url('./particle_03.png');
    }
    #bg-layer-particle-4 {
        background-image: url('./particle_04.png');
    }
    #bg-layer-particle-5 {
        background-image: url('./particle_05.png');
        opacity: 0.8;
    }

    .parallax-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover; 
        background-repeat: no-repeat;
        pointer-events: none;
        will-change: transform;
        opacity: 0.2;
    }
}

@keyframes floatEntrance {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(0);
    }
}

/* 言語切り替えセクション全体を画面右上に固定 */
#language-switcher {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    font-size: 18px;
    color: #4090f7;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; 
    opacity: 1;

    &.switcher-hidden {
        transform: translateX(100%); 
        opacity: 0;
    }

    ul {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    li {
        /* リンクと現言語表示の間に区切り線 (例: パイプ | ) を挿入 */
        margin-right: 10px; 
        padding-right: 10px; 
        border-right: 1px solid #ccc;
        a {
            color: #8686a0;
            text-decoration: none;
        }
    }
    li:last-child {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
    }
}

.layout-box {
    position: relative;
    width: 1200px;
    max-width: 90%;
    margin: 30px auto 90px;
    color: #323246;
    font-size: 18px;
    
    border: 4px solid #333333;
    border-radius: 28px;
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.5) 70%,
        rgba(222, 222, 222, 0.5) 70%,
        rgba(222, 222, 222, 0.5) 100%
    );
    background-size: 100% 5px;

    padding: 0 40px 40px;

    &.alice {
        border: 4px solid #4090f7;
        background-image: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.5) 70%,
            rgba(194, 222, 254, 0.5) 70%,
            rgba(194, 222, 254, 0.5) 100%
        );
        margin-top: 140px;
        &::after {
            content: "ALICE SYSTEM";
            position: absolute;
            bottom: -1px;
            left: 50%;
            transform: translateX(-50%);

            width: 300px;
            height: 30px;
            background-color: #4090f7;
            
            clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
            
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            
            z-index: 10;
        }

        h3 {
            display: inline-block;
            padding: 6px 40px;
            margin: 60px 0 0;
        }
    }
}

.layout-apply {
    text-align: center;
    margin-bottom: 60px;

    a.btn-apply {
        display: block;
        width: 330px;
        height: 100px;
        padding: 40px 90px 0;
        margin: 0 auto;
        color: #ffffff;
        font-size: 40px;
        font-weight: 800;
        text-decoration: none;
        background-image: url(./pc/btn_apply.png);
        background-repeat: no-repeat;
    }
    a.link-kiyaku {
        font-size: 20px;
        color: #323246;
        text-decoration: none;
        &::after {
            content: " ";
            display: inline-block;
            width: 14px;
            height: 14px;
            background-image: url(./pc/icon_gaibulink.png);
            background-repeat: no-repeat;
        }
    }
}

#bosyu-innner {
    margin: 0 auto;
    font-size: 26px;
    text-align: center;
}

div#layout-reward {
    width: 1200px;
    margin: 0 auto 80px;
    text-align: center;

    h2 {
        display: inline-block;
    }

    p {
        color: #323246;
        font-size: 20px;
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        list-style: none;
        padding: 0;

        &.list1 li {
            background-image: url(./pc/bg_sankatokuten.png);
            p.title {
                color: #fb9e19;
            }
        }
        &.list2 li {
            background-image: url(./pc/bg_katsudotokuten.png);
            p.title {
                color: #79cd1f;
            }
        }
        li {
            position: relative;
            aspect-ratio: 616 / 294;
            width: 600px;
            flex-shrink: 0;
            flex-grow: 0;
            background-repeat: no-repeat;

            div.label {
                color: #ffffff;
                font-size: 28px;
                font-weight: 800;
                position: absolute;
                top: 16px;
                left: 90px;
            }
            p.title {
                font-size: 28px;
                font-weight: 800;
                position: absolute;
                top: 50px;
                width: 100%;
            }
            p.detail {
                color: #323246;
                font-size: 20px;
                font-weight: 800;
                position: absolute;
                top: 120px;
                left: 0;
                width: 100%;
            }
        }
    }
}

footer {
    background-image: url("./pc/bg_footer.png");
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    height: 264px;
    margin-top: 160px;
    margin-bottom: 0;

    div.container {
        position: relative;
        padding-top: 120px;

        a.go-to-top {
            display: block;
            position: absolute;
            top: 30px;
            left: 50%;
            transform: translateX(-40%);
            width: 24px;
            height: 22px;
            background-image: url("./pc/btn_gototop.png");
            background-repeat: no-repeat;

            span {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: -1px;
                padding: 0;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }
        }

        a.home {
            display: block;
            aspect-ratio: 1272 / 742;
            width: 200px;
            position: absolute;
            left: 100px;
            top: 100px;
            
            background-image: url("./logo.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;

            transition: opacity 0.3s ease;
            &:hover {
                opacity: 0.7;
            }

            span {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: -1px;
                padding: 0;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0 40px;
            list-style: none;
            font-size: 12px;
            padding: 0 180px 0 0;
            li {
                position: relative;
                flex-shrink: 0;
                flex-grow: 0;
                a {
                    color: #ffffff;
                }
            }
        }

        div.download {
            position: absolute;
            width: 420px;
            top: 90px;
            right: 40px;

            a {
                text-decoration: none;
                transition: opacity 0.3s ease;
                &:hover {
                    opacity: 0.7;
                }

                img {
                    width: 200px;
                }
            }
            p {
                font-size: 11px;
            }
        }

        p.copyright {
            text-align: center;
            font-size: 12px;
            opacity: 0.6;
            margin-top: 80px;
        }
    }
}

#kiyaku {
    div.layout-box {
        padding: 0 80px 60px;
        width: 1000px;
        columns: #323246;
    }

    h2 {
        color: #323246;
        font-size: 42px;
        font-weight: 800;
    }

    h3 {
        text-align: left;
        background-color: inherit;
        margin-bottom: 0;
    }

    a {
        color: #4090f7;
    }

    p {
        margin-block-start: 0.5em;
    }

    ul {
        li {}
    }

    h4.table-title {
        text-align: center;
    }

    table {

        width: 1000px;
        font-size: 16px;
        border-collapse: collapse;

        th {
            color: #ffffff;
            padding: 4px 8px;
            border: 1px solid #cccccc;
        }
        td {
            padding: 4px 8px;
            border: 1px solid #cccccc;
        }
        td.val {
            text-align: center;
        }

        .pc-only {
            display: table-row;
        }

        &.table-blue {
            margin-bottom: 30px;

            thead {
                tr {
                    th {
                        background-color: #1075f7;
                    }
                }
            }
            tbody {
                tr {
                    th {
                        background-color: #4090f7;
                    }
                    td {
                        background-color: #f2f8ff;
                    }
                }
            }
        }

        &.table-orange {
            thead {
                tr {
                    th {
                        background-color: #f16918;
                    }
                }
            }
            tbody {
                tr {
                    th {
                        background-color: #f58441;
                    }
                    td {
                        background-color: #fff7f2;
                    }
                }
            }
        }

        &.table-green {
            margin-bottom: 60px;

            thead {
                tr {
                    th {
                        background-color: #00c75d;
                    }
                }
            }
            tbody {
                tr {
                    th {
                        background-color: #20e67d;
                    }
                    td {
                        background-color: #f3fff9;
                    }
                }
            }
        }

    }
}

/* =======================================
   PC向けのスタイル
   ======================================= */
@media (min-width: 769px) {
    /* SP用とPC用の画像の初期設定 */
    /* デフォルトではPC用画像を表示し、SP用画像を非表示にします */
    .sp-only {
        display: none !important;
    }
    .pc-only {
        display: block;
    }

    h2.bosyu {    
        top: -360px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);

        z-index: 999;
        
        display: flex;
        justify-content: center;
        align-items: center;
        
        img {
            width: 1574px;
            max-width: inherit;
        }
    }

    .char4 {
        position: absolute;
        bottom: -180px;
        right: 220px;
    }
}

/* =======================================
   スマートフォン向けのスタイル (画面幅 768px以下)
   ======================================= */

@media (max-width: 768px) {
    body {
        padding-top: 40px;
        min-width: 100vw;
    }

    h1 {

        img {
            width: 40vw;
        }
    }

    h2 {
        font-size: 6.5vw;
        margin: 0;
        font-weight: 800;
    }

    h2.bosyu {
        width: 100vw;
        margin: -50px 0 0;
        img {
            width: 100vw;
            margin: 0;
        }
    }

    h3 {
        font-size: 3.4vw;
    }

    /* --- 画像の切り替え --- */
    /* 画面幅が768px以下の場合、SP用を表示し、PC用を非表示にする */
    .sp-only {
        display: block;
    }
    .pc-only {
        display: none !important; 
    }

    .layout-box {
        width: 84vw;
        margin: 10px auto 60px;
        padding: 1.5em 5vw 40px;
        font-size: 3.1vw;

        &::before {
            top: -10px;
        }

        &.alice {
            margin-top: 10px;

            h3 {
                display: block;
                font-size: 4.8vw;
                margin: 0;
                padding: 10px 2vw;
            }

            #bosyu-innner {
                font-size: 4.0vw;
                text-align: left;
            }
        }
    }

    .layout-apply {
        a.btn-apply {
            font-size: 6.5vw;
            width: 80vw;
            height: 2em;
            padding: 1em 0px 0;
            margin: 0 auto 10px;
            background-size: 80vw;
            text-align: center;
        }
        a.link-kiyaku {
            font-size: 3.1vw;
            &::after {
                content: " ";
                display: inline-block;
                background-image: url(./pc/icon_gaibulink.png);
                background-size: 1em;
                width: 1em;
                height: 1em;
            }
        }
    }


    div#layout-reward {
        width: 90vw;

        p {
            font-size: 3.5vw;
        }

        h2 img {
            width: 90vw;
        }

        ul {
            li {
                max-width: 100vw;
                margin: 0 0 20px -5vw;
                
                div.label {
                    font-size: 4.3vw;
                    top: 7%;
                }
                p.title {
                    font-size: 4.3vw;
                    top: 30%;
                }
                p.detail {
                    font-size: 3.1vw;
                    top: 55%;
                }
            }
        }
    }

    /* 背景 */
    #bg-image {
        .entrance {
            left: 0;
            width: 100vw;
        }
        .parallax-layer {
            height: 100vh;
        }
    }

    #kiyaku {

        div.layout-box {
            max-width: 88vw;
            margin: 0 auto;
            padding: 20px 4vw;
            font-size: 3.1vw;
        }

        h2 {
            font-size: 5.7vw;
        }

        h3 {
            font-size: 4vw;
        }

        h4 {
            font-size: 3.1vw;
        }

        table {
            max-width: 90vw;
            width: auto;
            font-size: 2.7vw;

            .pc-only {
                display: none;
            }
            .sp-only {
                display: table-row;
            }
        }
    }

    footer {
        background-image: url("./sp/bg_footer.png");
        background-position: top;
        background-size: 100vw;
        height: auto;
        padding-top: 20vw;
        margin-top: 80px;

        div.container {
            padding-top: 0px;
            text-align: center;
            background-color: #4190f7;

            a.go-to-top {
                top: -12.6vw;
                width: 6vw;
                height: 6vw;
                transform: translateX(-50%);
                background-image: url("./sp/btn_gototop.png");
                background-size: contain;
            }

            a.home {
                position: relative;
                width: 50vw;
                top: 0;
                left: auto;
                margin: 0 auto;
            }

            ul {
                margin-top: 40px;
                padding: 0;
                li {
                    font-size: 3.1vw;
                }
            }

            div.download {
                position: relative;
                width: 100vw;
                top: 0;
                left: 0;
                margin-top: 40px;

                a {
                    img {
                        width: 40vw;
                    }
                }

                p {
                    font-size: 1.86vw;
                    text-align: left;
                    width: 70vw;
                    margin: 0 auto;
                }
            }

            p.copyright {
                font-size: 1.86vw;
                margin-top: 40px;
                margin-bottom: 0px;
                padding-bottom: 20px;
            }
        }
    }
}