@charset "UTF-8";
/* ==========================================
 * USEN-ALMEX 60周年特設サイトボタン用アニメーション
 * ========================================== */
/* ボタン本体のデザイン */
        .almex-60th-solid-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(255, 255, 255, 0.95); /* 通常時は「不透明な白」 */
            border: 1px solid #d4af37; /* ゴールド極細枠 */
            padding: 10px 32px;
            border-radius: 9999px; /* 完全な丸み */
            color: #003366; /* ALMEXブルー */
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-decoration: none; /* リンクの下線を消す */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* ボタンの下に引く自然な影 */
            transition: all 0.3s ease; /* 動きをなめらかにする */
            cursor: pointer;
        }

        /* 「60th Anniversary /」の部分（赤文字） */
        .almex-60th-solid-btn .text-accent {
            font-weight: 400;
            color: #E50012; /* USENグループ赤 */
            margin-right: 8px;
            transition: color 0.3s ease;
        }

        /* カーソルを合わせた（ホバーした）ときのデザイン */
        .almex-60th-solid-btn:hover {
            transform: scale(1.05); /* ボタンが1.05倍に少し大きくなる */
            background-color: #E50012; /* 背景が「赤」になる */
            color: #ffffff; /* 文字が「白」になる */
            border-color: #E50012; /* 枠線も「赤」になる */
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); /* 影が少し深くなる */
        }
        
        /* ホバーしたときの赤文字部分の処理 */
        .almex-60th-solid-btn:hover .text-accent {
            color: #ffffff; /* 背景が赤になるので、文字も「白」に変えて見やすくする */
        }

        /* ボタンの上をキラッと走る光沢エフェクト */
        .btn-gold-shine {
            position: relative;
            overflow: hidden;
        }
        .btn-gold-shine::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -100%;
            width: 35%;
            height: 200%;
            background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.4) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(30deg);
            transition: none;
            pointer-events: none;
        }
        .btn-gold-shine:hover::after {
            left: 150%;
            transition: all 0.8s ease-in-out;
        }

        .logo-60th {
         width: 110px;  /* ロゴの横幅（お好みのサイズに調整してください） */
         height: auto;  /* 縦横比を崩さないための自動設定 */
         margin: 8px;
        }

        .techhos-60th {
         width: 360px;
         height: auto;
        }

        .scroll-down {
         width: 90px;
         height: auto;
        }