@charset "utf-8";
/* CSS Document */
/* CSS変数システム */
        :root {
            /* カラー */
            --color-text-primary: #392309;
            --color-bg-white: #ffffff;
            --color-pagination-inactive: #e4e4e4;
            --color-pagination-active: #000000;
            
            /* タイポグラフィ */
            --font-family: 'Noto Sans JP', sans-serif;
            --font-size-main-desktop: 1.76vw; /* 24px / 1366px */
            --font-size-main-mobile: 3.4vw; /* 16px / 430px */
            --font-size-copyright: 10px; /* 11px / 1366px */
            --font-weight-bold: 700;
            --font-weight-normal: 400;
            --line-height-main-desktop: 2.56vw; /* 35px / 1366px */
            --line-height-main-mobile: 5.58vw; /* 24px / 430px */
            --line-height-copyright: 1.4; /* 16px / 1366px */
            
            /* スペーシング */
            --space-section-desktop: 7.32vw; /* 100px / 1366px */
            --space-section-mobile: 11.63vw; /* 50px / 430px */
            --space-text-desktop: 2.56vw; /* 35px / 1366px */
            --space-text-mobile: 5.58vw; /* 24px / 430px */
            
            /* その他 */
            --pagination-dot-size: 8.082px;
            --pagination-dot-spacing: 32.331px;
            --carousel-slide-width: 20.35vw; /* 278px / 1366px */
            --carousel-slide-width-small: 53.72vw; /* 231px / 430px */
        }

        /* リセットとベース */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--color-bg-white);
            overflow-x: hidden; background-image: url("../img/bg.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;
        }

        .container {
            width: 100%;
            margin: 0 auto;
            position: relative;
        }

        /* メインビジュアルセクション */
        .hero-section {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 3.51vw 11.42vw 0 11.35vw; /* 48px 156px 0 155px / 1366px */
        }

        .hero-character {
            width: 29.21vw; /* 399px / 1366px */
            height: 44.00vw; /* 601px / 1366px */
            background-image: url("../img/machine.png");
            background-size: cover;
            background-position: center;
            z-index: 2;
        }

        .hero-logo {
            width: 45.61vw; /* 623px / 1366px */
            height: 42.09vw; /* 575px / 1366px */
            background-image:url("../img/logo.png");
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 3;
        }

        /* テキストセクション */
        .text-section {
            padding: var(--space-section-desktop) 0;
            text-align: center;
        }

        .main-text {
            color: var(--color-text-primary);
            font-size: var(--font-size-main-desktop);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-main-desktop);
            max-width: 60vw; /* 622px / 1366px */
            margin: 0 auto;
        }

        /* キャラクター画像セクション */
        .characters-section {
            display: flex;
            justify-content: center;
            gap: 8px;
        }

        .characters-container {
            display: flex;
            gap: 0.59vw; /* 8px / 1366px */
        }

        .character-image {
            width: 19.03367496339678vw; /* 520px / 1366px */
            height: 33.85797950219619vw; /* 925px / 1366px */
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
        }

        .character-kaido {
            background-image:url("../img/1.jpg");
        }

        .character-doflamingo {
            background-image:url("../img/2.jpg");
            width: 19.03367496339678vw; /* 520px / 1366px */
            height: 33.85797950219619vw; /* 925px / 1366px */
        }

        /* ページネーション（モバイルのみ） */
        .pagination {
            display: none;
            justify-content: center;
            align-items: center;
            padding: 0px 0 40px 0;
            gap: 20px;
        }

        .pagination-dots {
            display: flex;
            gap: 16px; /* キャラクター2枚のカルーセルなので間隔を詰める */
        }

        .pagination-dot {
            width: var(--pagination-dot-size);
            height: var(--pagination-dot-size);
            border-radius: 50%;
            background-color: var(--color-pagination-inactive);
        }

        .pagination-dot.active {
            background-color: var(--color-pagination-active);
        }

        .pagination-arrow {
            width: 24px;
            height: 24px;
            cursor: pointer;
            opacity: 0.7;
        }

        .pagination-arrow:hover {
            opacity: 1;
        }

        .arrow-left {
        }

        /* コピーライトセクション */
        .copyright-section {
            padding: 5vw 0;
            text-align: center;
        }

        .copyright-text {
            color: var(--color-text-primary);
            font-size: var(--font-size-copyright);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-copyright);
        }

.table { padding-top: 2em; text-align: left;width: 35em; margin: 0em auto;font-size: var(--font-size-main-desktop);color: var(--color-text-primary);}
table {  width: 100%; font-size: 80%;} 
th,td { border-bottom: 1px solid #392309; padding: 1em 0;text-align: left; vertical-align: top;}
th { }
.main-text p { font-size: 80%; font-weight: normal; margin-top: 1em; text-align: center;}
table a {color: var(--color-text-primary); text-decoration: underline;}
table a:hover { text-decoration: none;}

        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            .table {         font-size: var(--font-size-main-mobile);width: auto; }
            .container {
            }

            .hero-section {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 10.70vw 4.65vw 0 4.65vw; /* 46px 20px 0 20px / 430px */
            }

            .hero-character {
                width: 67.91vw; /* 292px / 430px */
                height: 102.33vw; /* 440px / 430px */
                background-image:url("../img/machine.png");
            }

            .hero-logo {
                width: 83.72vw; /* 360px / 430px */
                height: 77.21vw; /* 332px / 430px */
                background-image:url("../img/logo.png"); margin-bottom: 9.30vw; /* 40px / 430px */
            }

            .text-section {
                padding: var(--space-section-mobile) 4.65vw; /* 20px / 430px */
            }

            .main-text {
                font-size: var(--font-size-main-mobile);
                line-height: var(--line-height-main-mobile);
                max-width: 90.70vw; /* 390px / 430px */
            }

            .characters-section {
                padding-bottom: 0;
                overflow: hidden;
                position: relative;
                justify-content: flex-start;
                display: block;
            }

            .characters-container {
                display: flex;
                transition: transform 0.3s ease;
                gap: 2.33vw; /* 10px / 430px */
                padding-left: 2.33vw; /* 10px / 430px */
            }

            .character-image {
                width: 62.33vw; /* 268px / 430px */
                height: 110.93vw; /* 477px / 430px */
                flex-shrink: 0;
            }

            .character-kaido {
                background-image:url("../img/1.jpg");
            }

            .character-doflamingo {
                background-image:url("../img/2.jpg");
                width: 62.56vw; /* 269px / 430px */
                height: 111.16vw; /* 478px / 430px */
            }

            .pagination {
                display: flex;
                margin-top: 20px;
            }

            .copyright-section {
                padding: 20px 0 40px 0;
            }
        }

        /* 小画面での追加調整 */
        @media (max-width: 480px) {
            .hero-character {
                width: 58.14vw; /* 250px / 430px */
                height: 87.44vw; /* 376px / 430px */
            }

            .hero-logo {
                width: 69.77vw; /* 300px / 430px */
                height: 64.42vw; /* 277px / 430px */
            }

            .characters-container {
                padding-left: 2.33vw; /* 10px / 430px */
            }

            .character-image {
                width: 51.16vw; /* 220px / 430px */
                height: 91.16vw; /* 392px / 430px */
            }

            .character-doflamingo {
                width: 51.40vw; /* 221px / 430px */
                height: 91.40vw; /* 393px / 430px */
            }
        }