/* Minification failed. Returning unminified contents. (621,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (808,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (811,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (811,45): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (958,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (962,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (962,45): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (1484,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1485,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1486,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1490,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (1502,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (1504,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (1510,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1518,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (1519,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (1524,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1525,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1526,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1531,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1535,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1536,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1540,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1544,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1545,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1546,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1550,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1554,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1558,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1559,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1563,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1567,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1568,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1569,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1573,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1577,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1593,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1594,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1598,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1599,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1603,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1607,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1614,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1616,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (1628,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1629,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1630,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1635,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (1647,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (1649,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (1662,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (1663,39): run-time error CSS1039: Token not allowed after unary operator: '-border' (1668,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1669,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1670,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1675,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1931,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1932,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1933,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1934,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1937,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (1937,45): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (1937,66): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (1938,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (1940,28): run-time error CSS1039: Token not allowed after unary operator: '-bg' (1942,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (1951,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1960,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (1962,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (1977,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (1978,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (1987,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1988,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1989,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1993,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1997,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1998,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1999,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2003,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2007,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2008,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (2008,45): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (2016,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2017,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2018,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2024,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2025,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2029,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2039,34): run-time error CSS1039: Token not allowed after unary operator: '-border' (2040,35): run-time error CSS1039: Token not allowed after unary operator: '-border' (2068,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2073,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2074,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (2074,45): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (2097,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2098,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2099,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2103,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (2116,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (2118,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2124,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2134,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (2135,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (2160,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2161,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2162,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2167,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2175,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2189,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2191,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (2196,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2197,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2204,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (2206,28): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2214,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2215,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2219,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2240,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2241,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2242,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2245,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (2247,28): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2248,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (2255,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2256,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2257,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2275,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2276,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2277,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2287,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2291,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2301,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2313,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2314,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2315,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2318,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (2320,28): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2321,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (2327,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2336,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2337,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2351,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (2353,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2361,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (2362,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (2395,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2397,29): run-time error CSS1039: Token not allowed after unary operator: '-circle' (2405,21): run-time error CSS1039: Token not allowed after unary operator: '-circle' (2406,22): run-time error CSS1039: Token not allowed after unary operator: '-circle' (2565,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2566,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2567,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (2567,40): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (2567,61): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (2568,35): run-time error CSS1039: Token not allowed after unary operator: '-border' (2572,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (2613,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2614,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2615,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2619,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (2631,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (2633,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2650,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (2651,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (2656,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2657,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2658,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2664,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2670,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2698,28): run-time error CSS1039: Token not allowed after unary operator: '-label-color' (2712,17): run-time error CSS1039: Token not allowed after unary operator: '-label-color' (2732,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2733,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2734,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2739,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (2741,28): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2742,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (2754,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (2756,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2771,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (2772,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (2777,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2778,21): run-time error CSS1039: Token not allowed after unary operator: '-color' (2782,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2783,36): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2787,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2788,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (2789,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (2793,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2801,28): run-time error CSS1039: Token not allowed after unary operator: '-bg' (2814,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2818,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2822,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2857,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2863,17): run-time error CSS1039: Token not allowed after unary operator: '-circle' (2864,18): run-time error CSS1039: Token not allowed after unary operator: '-circle' (3029,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3030,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3031,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3034,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3034,45): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3034,66): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3054,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (3056,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3071,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (3072,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (3088,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3089,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3093,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3094,28): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3107,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3111,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3115,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3178,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3184,21): run-time error CSS1039: Token not allowed after unary operator: '-circle-width' (3185,22): run-time error CSS1039: Token not allowed after unary operator: '-circle-width' (3192,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3197,21): run-time error CSS1039: Token not allowed after unary operator: '-icon-width' (3198,22): run-time error CSS1039: Token not allowed after unary operator: '-icon-width' (3286,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (3288,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3302,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (3303,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (3308,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3309,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3321,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3322,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3323,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (3324,36): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3368,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3370,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3370,40): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3469,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3470,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3488,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (3490,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3505,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (3506,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (3567,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3568,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3582,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (3584,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3597,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (3598,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (3649,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3650,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3654,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3655,36): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3659,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (3700,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3701,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3705,40): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3709,40): run-time error CSS1039: Token not allowed after unary operator: '-border' (3710,42): run-time error CSS1039: Token not allowed after unary operator: '-border' (3714,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3715,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3729,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (3731,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3746,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (3747,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (3778,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3782,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3782,40): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3790,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3791,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3792,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3796,26): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3796,47): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3806,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (3808,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3821,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (3822,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (3827,23): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3827,44): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (3848,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (3850,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3863,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (3864,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (3869,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3870,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3874,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3875,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (3876,34): run-time error CSS1039: Token not allowed after unary operator: '-border' (3980,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3981,28): run-time error CSS1039: Token not allowed after unary operator: '-bg' (3985,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3986,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (3987,30): run-time error CSS1039: Token not allowed after unary operator: '-border' (4143,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4144,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4148,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (4149,28): run-time error CSS1039: Token not allowed after unary operator: '-bg' (4157,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4158,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4834,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4843,39): run-time error CSS1039: Token not allowed after unary operator: '-border' (4844,37): run-time error CSS1039: Token not allowed after unary operator: '-border' (4855,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5361,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (5363,36): run-time error CSS1039: Token not allowed after unary operator: '-bg' (5369,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5377,40): run-time error CSS1039: Token not allowed after unary operator: '-border' (5378,42): run-time error CSS1039: Token not allowed after unary operator: '-border' (5383,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5387,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5388,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5389,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5392,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (6134,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6148,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (6165,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (6166,39): run-time error CSS1039: Token not allowed after unary operator: '-border' (6171,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6176,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (6176,45): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (6415,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6423,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (6424,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (6434,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6745,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6752,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (6753,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (6827,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6834,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (6835,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (6942,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6943,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6960,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (6962,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (6975,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (6976,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (6981,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6982,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6987,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7003,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7004,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7008,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7012,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7016,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7017,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7021,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7639,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7640,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7643,37): run-time error CSS1039: Token not allowed after unary operator: '-circle-sp' (7653,21): run-time error CSS1039: Token not allowed after unary operator: '-circle-sp' (7654,22): run-time error CSS1039: Token not allowed after unary operator: '-circle-sp' (7759,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7760,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7812,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7825,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (7842,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (7843,39): run-time error CSS1039: Token not allowed after unary operator: '-border' (7848,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7852,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (7852,45): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (7904,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7905,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7922,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (7924,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (7937,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (7938,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (7943,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7944,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7949,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8027,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8028,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8029,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8030,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8034,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (8034,45): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (8034,66): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (8035,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (8037,28): run-time error CSS1039: Token not allowed after unary operator: '-bg' (8038,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (8138,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8139,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8140,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8141,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8145,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (8146,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (8148,28): run-time error CSS1039: Token not allowed after unary operator: '-bg' (8150,17): run-time error CSS1039: Token not allowed after unary operator: '-color' (8158,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8167,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (8169,32): run-time error CSS1039: Token not allowed after unary operator: '-bg' (8175,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8185,38): run-time error CSS1039: Token not allowed after unary operator: '-border' (8186,39): run-time error CSS1039: Token not allowed after unary operator: '-border' (8570,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8571,23): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (8707,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8709,23): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (8709,49): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (8739,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8903,33): run-time error CSS1039: Token not allowed after unary operator: '-circle' (9034,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9120,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9123,23): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (9123,49): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (9140,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9141,23): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (9145,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9197,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9201,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9299,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9300,23): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (9300,44): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (10153,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10155,23): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (10155,49): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (10155,70): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (10848,41): run-time error CSS1039: Token not allowed after unary operator: '-circle-pc' (10853,25): run-time error CSS1039: Token not allowed after unary operator: '-circle-pc' (10854,26): run-time error CSS1039: Token not allowed after unary operator: '-circle-pc' (11008,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11010,23): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (11010,49): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (11010,70): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (11063,23): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (11063,49): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (11103,23): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' (11204,22): run-time error CSS1039: Token not allowed after unary operator: '-jobs-filter-bar-height' (11378,36): run-time error CSS1030: Expected identifier, found '.' (11378,52): run-time error CSS1031: Expected selector, found ')' (11378,52): run-time error CSS1025: Expected comma or open brace, found ')' (12012,25): run-time error CSS1039: Token not allowed after unary operator: '-header-nav-padding-right' (12520,25): run-time error CSS1039: Token not allowed after unary operator: '-header-nav-padding-right' (13743,32): run-time error CSS1039: Token not allowed after unary operator: '-padding-block' */ .ajax-progress{display:inline-block;padding:1px 5px 2px 5px;}[dir="rtl"] .ajax-progress{float:right;}.ajax-progress-throbber .throbber{display:inline;padding:1px 6px 2px;background:transparent url(/core/misc/throbber-active.gif) no-repeat 0 center;}.ajax-progress-throbber .message{display:inline;padding:1px 5px 2px;}tr .ajax-progress-throbber .throbber{margin:0 2px;}.ajax-progress-bar{width:16em;}.ajax-progress-fullscreen{position:fixed;z-index:1000;top:48.5%;left:49%;width:24px;height:24px;padding:4px;opacity:0.9;border-radius:7px;background-color:#232323;background-image:url(/core/misc/loading-small.gif);background-repeat:no-repeat;background-position:center center;}[dir="rtl"] .ajax-progress-fullscreen{right:49%;left:auto;} .text-align-left{text-align:left;}.text-align-right{text-align:right;}.text-align-center{text-align:center;}.text-align-justify{text-align:justify;}.align-left{float:left;}.align-right{float:right;}.align-center{display:block;margin-right:auto;margin-left:auto;} .js input.form-autocomplete{background-image:url(/core/misc/throbber-inactive.png);background-repeat:no-repeat;background-position:100% center;}.js[dir="rtl"] input.form-autocomplete{background-position:0% center;}.js input.form-autocomplete.ui-autocomplete-loading{background-image:url(/core/misc/throbber-active.gif);background-position:100% center;}.js[dir="rtl"] input.form-autocomplete.ui-autocomplete-loading{background-position:0% center;} .fieldgroup{padding:0;border-width:0;} .container-inline div,.container-inline label{display:inline-block;}.container-inline .details-wrapper{display:block;}.container-inline .hidden{display:none;} .clearfix:after{display:table;clear:both;content:"";} .js details:not([open]) .details-wrapper{display:none;} .hidden{display:none;}.visually-hidden{position:absolute !important;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;word-wrap:normal;}.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static !important;overflow:visible;clip:auto;width:auto;height:auto;}.invisible{visibility:hidden;} .item-list__comma-list,.item-list__comma-list li{display:inline;}.item-list__comma-list{margin:0;padding:0;}.item-list__comma-list li:after{content:", ";}.item-list__comma-list li:last-child:after{content:"";} .js .js-hide{display:none;}.js-show{display:none;}.js .js-show{display:block;} .nowrap{white-space:nowrap;} .position-container{position:relative;} .progress{position:relative;}.progress__track{min-width:100px;max-width:100%;height:16px;margin-top:5px;border:1px solid;background-color:#fff;}.progress__bar{width:3%;min-width:3%;max-width:100%;height:16px;background-color:#000;}.progress__description,.progress__percentage{overflow:hidden;margin-top:0.2em;color:#555;font-size:0.875em;}.progress__description{float:left;}[dir="rtl"] .progress__description{float:right;}.progress__percentage{float:right;}[dir="rtl"] .progress__percentage{float:left;}.progress--small .progress__track{height:7px;}.progress--small .progress__bar{height:7px;background-size:20px 20px;} .reset-appearance{margin:0;padding:0;border:0 none;background:transparent;line-height:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;} .resize-none{resize:none;}.resize-vertical{min-height:2em;resize:vertical;}.resize-horizontal{max-width:100%;resize:horizontal;}.resize-both{max-width:100%;min-height:2em;resize:both;} table.sticky-header{z-index:500;top:0;margin-top:0;background-color:#fff;} .system-status-counter__status-icon{display:inline-block;width:25px;height:25px;vertical-align:middle;}.system-status-counter__status-icon:before{display:block;width:100%;height:100%;content:"";background-repeat:no-repeat;background-position:center 2px;background-size:16px;}.system-status-counter__status-icon--error:before{background-image:url(/core/misc/icons/e32700/error.svg);}.system-status-counter__status-icon--warning:before{background-image:url(/core/misc/icons/e29700/warning.svg);}.system-status-counter__status-icon--checked:before{background-image:url(/core/misc/icons/73b355/check.svg);} .system-status-report-counters__item{width:100%;margin-bottom:0.5em;padding:0.5em 0;text-align:center;white-space:nowrap;background-color:rgba(0,0,0,0.063);}@media screen and (min-width:60em){.system-status-report-counters{display:flex;flex-wrap:wrap;justify-content:space-between;}.system-status-report-counters__item--half-width{width:49%;}.system-status-report-counters__item--third-width{width:33%;}} .system-status-general-info__item{margin-top:1em;padding:0 1em 1em;border:1px solid #ccc;}.system-status-general-info__item-title{border-bottom:1px solid #ccc;} body.drag{cursor:move;}tr.region-title{font-weight:bold;}tr.region-message{color:#999;}tr.region-populated{display:none;}tr.add-new .tabledrag-changed{display:none;}.draggable a.tabledrag-handle{float:left;overflow:hidden;height:1.7em;margin-left:-1em;cursor:move;text-decoration:none;}[dir="rtl"] .draggable a.tabledrag-handle{float:right;margin-right:-1em;margin-left:0;}a.tabledrag-handle:hover{text-decoration:none;}a.tabledrag-handle .handle{width:14px;height:14px;margin:-0.4em 0.5em 0;padding:0.42em 0.5em;background:url(/core/misc/icons/787878/move.svg) no-repeat 6px 7px;}a.tabledrag-handle:hover .handle,a.tabledrag-handle:focus .handle{background-image:url(/core/misc/icons/000000/move.svg);}.touchevents .draggable td{padding:0 10px;}.touchevents .draggable .menu-item__link{display:inline-block;padding:10px 0;}.touchevents a.tabledrag-handle{width:40px;height:44px;}.touchevents a.tabledrag-handle .handle{height:21px;background-position:40% 19px;}[dir="rtl"] .touch a.tabledrag-handle .handle{background-position:right 40% top 19px;}.touchevents .draggable.drag a.tabledrag-handle .handle{background-position:50% -32px;}.tabledrag-toggle-weight-wrapper{text-align:right;}[dir="rtl"] .tabledrag-toggle-weight-wrapper{text-align:left;}.indentation{float:left;width:20px;height:1.7em;margin:-0.4em 0.2em -0.4em -0.4em;padding:0.42em 0 0.42em 0.6em;}[dir="rtl"] .indentation{float:right;margin:-0.4em -0.4em -0.4em 0.2em;padding:0.42em 0.6em 0.42em 0;} .tablesort{display:inline-block;width:16px;height:16px;background-size:100%;}.tablesort--asc{background-image:url(/core/misc/icons/787878/twistie-down.svg);}.tablesort--desc{background-image:url(/core/misc/icons/787878/twistie-up.svg);} div.tree-child{background:url(/core/misc/tree.png) no-repeat 11px center;}div.tree-child-last{background:url(/core/misc/tree-bottom.png) no-repeat 11px center;}[dir="rtl"] div.tree-child,[dir="rtl"] div.tree-child-last{background-position:-65px center;}div.tree-child-horizontal{background:url(/core/misc/tree.png) no-repeat -11px center;} .views-align-left{text-align:left;}.views-align-right{text-align:right;}.views-align-center{text-align:center;}.views-view-grid .views-col{float:left;}.views-view-grid .views-row{float:left;clear:both;width:100%;}.views-display-link + .views-display-link{margin-left:0.5em;} @charset "UTF-8"; /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { -webkit-text-size-adjust: 100%; /* 2 */ line-height: 1.15; /* 1 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { margin: 0.67em 0; font-size: 2em; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-size: 1em; /* 2 */ font-family: monospace, monospace; /* 1 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-size: 1em; /* 2 */ font-family: monospace, monospace; /* 1 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { margin: 0; /* 2 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ font-family: inherit; /* 1 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { overflow: visible; /* 1 */ } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; /* 1 */ } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { padding: 0; border-style: none; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ color: inherit; /* 2 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } @font-face { font-style: normal; font-weight: 400; src: url("../themes/resonac/common/fonts/NotoSansCJKjp-Regular.woff2") format("woff2"); font-family: "Noto Sans CJK JP"; font-display: swap; } @font-face { font-style: normal; font-weight: 700; src: url("../themes/resonac/common/fonts/NotoSansCJKjp-Bold.woff2") format("woff2"); font-family: "Noto Sans CJK JP"; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 62.5%; } body { display: flex; flex-direction: column; min-height: 100vh; color: #333333; font-size: 1.4rem; line-height: 1.6; font-family: "Noto Sans CJK JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Meiryo, Arial, sans-serif; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, dl, dd, ul, ol, td, th, figure, fieldset, button { margin: 0; padding: 0; } li { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } b, em, strong { font-style: normal; font-weight: 700; } strong { font-weight: 700; } small { font-size: inherit; } a { color: #0066c0; text-decoration: none; } img { max-width: 100%; height: auto; vertical-align: top; } input[type=button], input[type=text], input[type=submit], input[type=image], textarea { -webkit-appearance: none; appearance: none; border-radius: 0; font-size: 1.6rem; font-family: inherit; } input[type=search] { -webkit-appearance: none; appearance: none; } button { border: 0; } textarea { resize: vertical; } button, label { cursor: pointer; } iframe { border: 0; } [hidden] { display: none !important; } sup, sub { font-size: 1rem; } sub { bottom: 0; } :target { scroll-margin-top: 95px; } :focus-visible { outline: 3px solid #333333; } :focus:not(:focus-visible) { outline: 0; } footer { margin-top: auto; } /* ---------------------------------------------------------------- Header (.str-header[-*]) ----------------------------------------------------------------- */ /* .str-header ----------------------------------------------- */ .str-header { z-index: 5000; position: sticky; top: 0; left: 0; width: 100%; } .str-header--simple { height: auto; } .str-header__container { background: #ffffff; } .str-header__main { border-bottom: solid 1px #dedede; } .str-header__main-language:not(.is-active) .str-header__language-list { display: none; } .str-header__main-language.is-active .str-header__language-list { display: block; } .str-header__main-language { display: flex; align-items: center; gap: 5px; } .str-header__search-content-btn { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 0 4px 4px 0; background: #00a5c0; box-shadow: 0 0 24px rgba(51, 51, 51, 0.08); } .str-header__search-items { display: flex; } .str-header__search-input { width: 100%; border: none; border-radius: 4px 0 0 4px; background: #ffffff; } .str-header__language-hdg { position: relative; } .str-header__language-hdg::before { display: block; position: absolute; top: 0; left: 0; width: 2px; height: 100%; border-radius: 2px; background: #00a5c0; content: ""; } .str-header__language-items:nth-child(n+2) { border-top: solid 1px #dedede; } .str-header__language-li { position: relative; } .str-header__language-li::before { display: block; position: absolute; top: 50%; width: 7px; height: 2px; transform: translate(-50%, 0); background: #707070; content: ""; } .str-header__language-anchor { color: #333333; transition: 0.3s; } .str-header__language-anchor:hover, .str-header__language-anchor:focus, .str-header__language-anchor:active { color: #00a5c0; } .str-header__language-text { color: #333333; } .str-header__copyright { margin-top: 0; user-select: none; } /* .str-nav ----------------------------------------------- */ .str-nav { background: #f1f1f1; } /* ---------------------------------------------------------------- Breadcrumb (.str-breadcrumb[-*]) ----------------------------------------------------------------- */ /* .str-breadcrumb ----------------------------------------------- */ .str-breadcrumb { --header-nav-padding-right: 43px; display: flex; justify-content: flex-end; padding: 0 15px; background-color: #ffffff; user-select: none; } .str-breadcrumb__inner { padding-left: 3px; overflow-x: hidden; white-space: nowrap; } .str-breadcrumb__list { display: flex; padding: 15px 0; gap: 10px; } .str-breadcrumb__item { position: relative; color: #00a5c0; font-size: 1.2rem; line-height: 1.6; } .str-breadcrumb__item:not(:first-child) { padding-left: 18px; } .str-breadcrumb__item:not(:first-child)::before { display: block; position: absolute; top: 7px; left: 0; width: 6px; height: 6px; transform: rotate(45deg); border-top: 1px solid #00a5c0; border-right: 1px solid #00a5c0; content: ""; } .str-breadcrumb__link { display: inline-block; color: #00a5c0; text-decoration: underline; transition: color 0.3s; } .str-breadcrumb__link:hover, .str-breadcrumb__link:focus, .str-breadcrumb__link:active { text-decoration: none; opacity: 0.6; } /* ---------------------------------------------------------------- Section (.str-section[-*]) ----------------------------------------------------------------- */ /* .str-section ----------------------------------------------- */ .str-section { position: relative; padding: 0 15px; user-select: none; } .str-section__inner { position: relative; max-width: 1280px; margin: 0 auto; } .str-section__inner > *:first-child { margin-top: 0; } .str-section__inner:not(:first-child) { margin-top: 35px; } .str-section__inner--medium { max-width: 1440px; } .str-section__inner--large { max-width: 1600px; } .str-section__inner--bg-color-blue { padding: 30px 15px; border-radius: 8px; background-color: #f2f8f9; } .str-section__main > *:first-child { margin-top: 0; } /* .str-section-second-col2 ----------------------------------------------- */ .str-section-second-col2 { display: flex; user-select: none; } .str-section-second-col2__contents > *:first-child { margin-top: 0; user-select: none; } /* ---------------------------------------------------------------- SideNav (.str-side-nav[-*]) ----------------------------------------------------------------- */ /* .str-side-nav ----------------------------------------------- */ .str-side-nav { max-width: 768px; margin: 35px auto 0; } .str-side-nav__title { font-size: 1.8rem; line-height: 1.6; text-align: center; } .str-side-nav__inner > *:first-child { margin-top: 0; } .str-side-nav__contents { margin-top: 10px; } .str-side-nav__contents > *:first-child { margin-top: 0; } .str-side-nav__box { margin-top: 20px; padding: 20px 40px 35px; border: 1px solid #dddddd; background-color: #ffffff; } .str-side-nav__box--strong { margin-top: 25px; padding: 25px 40px 35px; border-radius: 9px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .str-side-nav__box--strong .str-side-nav__title { position: relative; padding-bottom: 13px; } .str-side-nav__box--strong .str-side-nav__title::before { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; border-radius: 8px; background-color: #e5e5e5; content: ""; } .str-side-nav__box--strong .str-side-nav__contents { margin-top: 18px; } .str-side-nav__cv-btn > *:first-child { margin-top: 0; } .str-side-nav__cv-tel, .str-side-nav__cv-text { margin-top: 16px; } .str-side-nav__cv-tel { margin-top: 15px; } .str-side-nav__cv-tel-link { --padding-block: 10px; display: block; position: relative; padding: var(--padding-block) 50px var(--padding-block) 55px; border-radius: 28px; background-color: #e4eff1; color: #333333; font-size: 2rem; text-align: center; } .str-side-nav__cv-tel-link::before, .str-side-nav__cv-tel-link::after { display: block; position: absolute; top: 0; bottom: 0; margin: auto 0; content: ""; } .str-side-nav__cv-tel-link::before { left: 10px; width: 40px; height: 40px; border-radius: 50%; background-color: #ffffff; } .str-side-nav__cv-tel-link::after { top: 1px; left: 18px; width: 23px; height: 23px; background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/icon-tel-01.svg"); background-size: auto; background-repeat: no-repeat; } .str-side-nav__search-label { color: #06363e; font-size: 1.4rem; } .str-side-nav__search-input { display: block; width: 100%; margin-top: 5px; padding: 16px; border: none; border-radius: 4px; background-color: #f1f1f1; color: #333333; font-size: 1.4rem; } .str-side-nav__search-input::placeholder { color: #999999; } .str-side-nav__search-btn { display: block; position: relative; width: 100%; margin-top: 15px; padding: 14px 45px; border-radius: 4px; background-color: #92aaac; color: #ffffff; font-size: 1.6rem; line-height: 1.6; text-align: center; transition: opacity 0.3s; } .str-side-nav__search-btn:hover, .str-side-nav__search-btn:focus, .str-side-nav__search-btn:active { opacity: 0.6; } .str-side-nav__search-btn::before { display: block; position: absolute; top: 0; bottom: 0; left: 18px; width: 20px; height: 20px; margin: auto 0; background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/icon-search-side-nav-01.svg"); background-size: auto; background-repeat: no-repeat; content: ""; } .str-side-nav__cv-text { font-size: 1.3rem; line-height: 1.6; text-align: center; } .str-footer__sns-ul { display: flex; justify-content: center; } .str-footer__list-ul { display: flex; } .str-footer__list-anchor { color: #06363e; transition: 0.3s; } .str-footer__list-anchor:hover, .str-footer__list-anchor:focus, .str-footer__list-anchor:active { color: #00a5c0; } .str-footer__copyright { width: 100%; background: linear-gradient(275deg, #00a5c0 0%, #0066c0 100%); text-align: center; } .str-footer__copyright-text { margin-top: 0; color: #ffffff; } /* ---------------------------------------------------------------- Heading (.m-hdg[-*]) ----------------------------------------------------------------- */ /* .m-hdg-lv1 ----------------------------------------------- */ .m-hdg-lv1 { position: relative; margin-bottom: 20px; overflow: hidden; color: #ffffff; } .m-hdg-lv1::before { display: block; position: absolute; width: 100%; height: 100%; background: linear-gradient(90deg, #0066c0 0%, #0091c0 30.54%, #00a5c0 100%); content: ""; } .m-hdg-lv1__inner { --padding-block: 20px; position: relative; max-width: 1440px; margin: 0 auto; padding: var(--padding-block) 15px var(--padding-block) 24px; } .m-hdg-lv1__inner--large { max-width: 1600px; } .m-hdg-lv1__title { font-weight: 700; font-size: 2.4rem; line-height: 1.6; user-select: none; } .m-hdg-lv1__sub-title { margin-top: 3px; line-height: 1.6; } .m-hdg-lv1__label { margin-top: 10px; } /* .m-hdg-lv1-article ----------------------------------------------- */ .m-hdg-lv1-article { position: relative; margin-bottom: 35px; overflow: hidden; } .m-hdg-lv1-article__inner { z-index: 1; position: relative; } .m-hdg-lv1-article__head { position: relative; padding: 15px 25px 20px 50px; } .m-hdg-lv1-article__head::before { display: block; position: absolute; top: 0; left: -20px; width: 58px; height: 88px; transform: skewX(-16deg); transform-origin: top; border-bottom-right-radius: 4px; background: linear-gradient(-90deg, #00a5c0 0%, #0091c0 20%, #0066c0 100%); content: ""; } .m-hdg-lv1-article__head--has-category-02 { margin-bottom: 0; } .m-hdg-lv1-article--no-img { margin-bottom: 20px; } .m-hdg-lv1-article--no-img .m-hdg-lv1-article__head { padding-bottom: 0; } .m-hdg-lv1-article__head-inner { display: flex; flex-direction: column; margin: 0 auto; gap: 10px; } .m-hdg-lv1-article__title { font-size: 2rem; line-height: 1.5; } .m-hdg-lv1-article__bottom { display: flex; flex-direction: column-reverse; padding: 0 15px; } .m-hdg-lv1-article__img, .m-hdg-lv1-article__contents { width: 100%; } .m-hdg-lv1-article__img { position: relative; border-radius: 4px; } .m-hdg-lv1-article__img img { width: 100%; } .m-hdg-lv1-article__contents > *:first-child { margin-top: 0; } /* .m-hdg-lv1-second 見出し（フル幅） ----------------------------------------------- */ .m-hdg-lv1-second { position: relative; height: 100%; } .m-hdg-lv1-second::before { display: block; position: absolute; top: 0; left: -15px; width: calc(100% + 30px); height: 100%; background-size: cover; background-repeat: no-repeat; content: ""; } .m-hdg-lv1-second__inner { position: relative; padding: 25px 25px 40px; } .m-hdg-lv1-second__title { color: #ffffff; } .m-hdg-lv1-second__title-en, .m-hdg-lv1-second__title-ja { display: block; line-height: 1.6; } .m-hdg-lv1-second__title-en { margin-bottom: 2px; font-style: italic; font-weight: 400; font-size: 1.4rem; font-family: Arial, sans-serif; } .m-hdg-lv1-second__title-ja { font-size: 2.8rem; } .m-hdg-lv1-second__text { margin-top: 12px; color: #ffffff; font-size: 1.4rem; } /* .m-hdg-lv1-article-02 ----------------------------------------------- */ .m-hdg-lv1-article-02 { margin-top: 15px; } .m-hdg-lv1-article-02__head { display: flex; flex-direction: column-reverse; } .m-hdg-lv1-article-02__title { font-size: 2rem; line-height: 1.4; letter-spacing: 0.05em; } .m-hdg-lv1-article-02__sub-title { margin-top: 5px; font-weight: 700; font-size: 1.6rem; letter-spacing: 0.05em; } .m-hdg-lv1-article-02__date { margin: 0 0 5px; color: #526366; font-weight: 700; font-size: 1.4rem; line-height: 1; text-align: right; } .m-hdg-lv1-article-02__bottom { margin-top: 10px; } .m-hdg-lv1-article-02__bottom > *:first-child { margin-top: 0; } .m-hdg-lv1-article-02__mv { margin-top: 15px; text-align: center; } /* .m-hdg-lv2 ----------------------------------------------- */ .m-hdg-lv2 { margin: 25px 0 10px; padding-bottom: 5px; border-bottom: 2px solid; border-image: linear-gradient(90deg, #00a5c0 0%, #008ac0 55.65%, #0066c0 100%) 1/0 0 2px; } .m-hdg-lv2__title { display: block; font-size: 2rem; line-height: 1.6; } .m-hdg-lv2__sub-text { display: block; font-weight: 400; font-size: 1.2rem; } .m-hdg-lv2__sub-text > *:first-child { margin-top: 0; } /* .m-hdg-lv2-article ----------------------------------------------- */ .m-hdg-lv2-article { position: relative; margin: 25px 0 10px; padding-left: 16px; } .m-hdg-lv2-article::before { display: block; position: absolute; top: 0.1em; left: 0; width: 6px; height: 33px; border-radius: 6px 0; background: linear-gradient(90deg, #00a5c0 0%, #008ac0 55.65%, #0066c0 100%); content: ""; } .m-hdg-lv2-article__title { display: block; font-size: 2rem; line-height: 1.6; } /* .m-hdg-lv3 ----------------------------------------------- */ .m-hdg-lv3 { margin: 20px 0 10px; } .m-hdg-lv3__inner { display: block; position: relative; padding: 0 0 8px; border-bottom: 1px solid #d9e7e9; } .m-hdg-lv3__inner::before, .m-hdg-lv3__inner::after { display: block; position: absolute; top: 0; left: 0; content: ""; } .m-hdg-lv3__inner::before { width: 10px; height: 10px; border-top-left-radius: 2px; background-image: linear-gradient(#00a5c0 0%, #0066c0 100%); background-repeat: no-repeat; } .m-hdg-lv3__inner::after { z-index: 1; width: 11px; height: 11px; background-image: linear-gradient(to bottom right, transparent 50%, #ffffff 50%); background-repeat: no-repeat; } .m-hdg-lv3__title { display: block; padding-left: 17px; font-size: 1.8rem; line-height: 1.6; } .m-hdg-lv3 a { width: 100%; color: #333333; transition: color 0.3s; } .m-hdg-lv3 a .m-hdg-lv3__title { position: relative; padding-right: 30px; } .m-hdg-lv3 a .m-hdg-lv3__title::before, .m-hdg-lv3 a .m-hdg-lv3__title::after { display: block; position: absolute; top: 0; bottom: 0; margin: auto 0; content: ""; } .m-hdg-lv3 a .m-hdg-lv3__title::before { right: 0; width: 24px; height: 24px; border: 1px solid #00a5c0; border-radius: 50%; background-color: transparent; transition: background-color 0.3s; } .m-hdg-lv3 a .m-hdg-lv3__title::after { right: 10px; width: 7px; height: 7px; transform: rotate(45deg); border-top: 1px solid #00a5c0; border-right: 1px solid #00a5c0; } .m-hdg-lv3 a:hover, .m-hdg-lv3 a:focus, .m-hdg-lv3 a:active { color: #00a5c0; } .m-hdg-lv3 a:hover .m-hdg-lv3__title::before, .m-hdg-lv3 a:focus .m-hdg-lv3__title::before, .m-hdg-lv3 a:active .m-hdg-lv3__title::before { background-color: #00a5c0; } .m-hdg-lv3 a:hover .m-hdg-lv3__title::after, .m-hdg-lv3 a:focus .m-hdg-lv3__title::after, .m-hdg-lv3 a:active .m-hdg-lv3__title::after { border-top-color: #ffffff; border-right-color: #ffffff; } /* .m-hdg-lv4 ----------------------------------------------- */ .m-hdg-lv4 { position: relative; margin: 15px 0 10px; padding-left: 16px; } .m-hdg-lv4 + p { margin-top: 10px; } .m-hdg-lv4::before, .m-hdg-lv4::after { display: block; position: absolute; top: 0.25em; left: 0; width: 4px; content: ""; } .m-hdg-lv4::before { height: 18px; background-color: #00a5c0; } .m-hdg-lv4::after { height: 9px; background-color: #d9e7e9; } .m-hdg-lv4__title { display: block; font-size: 1.6rem; line-height: 1.6; } /* .m-hdg-challenge-resolution ----------------------------------------------- */ .m-hdg-challenge-resolution { position: relative; } .m-hdg-challenge-resolution::before { display: block; z-index: -1; position: absolute; left: 0; width: 100%; background: linear-gradient(90deg, #00a5c0 0%, #0066c0 100%); content: ""; } .m-hdg-challenge-resolution__title { display: inline-block; width: 100%; border-radius: 20px 0; background: linear-gradient(90deg, #00a5c0 0%, #0066c0 100%); color: #ffffff; font-weight: bold; text-align: center; } .m-hdg-challenge-resolution__link { display: inline-block; position: relative; padding-left: 18px; color: #333333; text-decoration: none; } .m-hdg-challenge-resolution__link::before { display: block; position: absolute; border-radius: 50%; background: #0066c0; content: ""; } .m-hdg-challenge-resolution__link::after { display: block; position: absolute; transform: rotate(45deg); border-top: solid 1px #ffffff; border-right: solid 1px #ffffff; content: ""; } .m-hdg-challenge-resolution__p { text-align: right; } /* ---------------------------------------------------------------- Text (.m-text[-*]) ----------------------------------------------------------------- */ /* p ----------------------------------------------- */ p { margin-top: 10px; } p a { color: #0066c0; text-decoration: underline; transition: opacity 0.3s; } p a:hover, p a:focus, p a:active { text-decoration: none; opacity: 0.6; } p em { font-weight: 700; } p strong { color: #ff0606; font-weight: 700; } /* .m-text-lead ----------------------------------------------- */ .m-text-lead { margin: 16px 0 10px; color: #526366; font-size: 1.6rem; line-height: 1.7; text-align: center; } .m-text-lead--left { text-align: left; } /* .m-text-lead ----------------------------------------------- */ .m-text-label { margin-top: 8px; font-weight: bold; } .m-text-label__label { width: 100%; border-radius: 9px; background: #00a5c0; color: #ffffff; font-weight: normal; text-align: center; } /* .m-text-box-title ----------------------------------------------- */ .m-text-box-title { margin: 0 0 5px; font-weight: 700; font-size: 1.6rem; line-height: 1.6; } /* ---------------------------------------------------------------- Link (.m-link[-*]) ----------------------------------------------------------------- */ /* .m-link-list ----------------------------------------------- */ .m-link-list { display: grid; grid-template-rows: 1fr; margin-top: 10px; } .m-link-list__item .m-link-list { padding-left: 24px; } .m-link-list__link { --color: #333333; --bg: #0066c0; --border: #0066c0; display: inline-block; position: relative; padding-left: 24px; color: var(--color); line-height: 1.4444444444; transition: color 0.3s; } .m-link-list__link::before { display: block; position: absolute; top: 3px; left: 0; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-link-list__link::after { --border: #ffffff; display: block; position: absolute; top: 8px; left: 4px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-link-list__link:hover, .m-link-list__link:focus, .m-link-list__link:active { --bg: transparent; --border: #0066c0; --color: #0066c0; text-decoration: underline; } .m-link-list__link:hover::after, .m-link-list__link:focus::after, .m-link-list__link:active::after { --border: #0066c0; } .m-link-list__link--icon-color-weak { --bg: transparent; --border: #92aaac; } .m-link-list__link--icon-color-weak::after { --border: #92aaac; } .m-link-list__link--icon-color-weak:hover, .m-link-list__link--icon-color-weak:focus, .m-link-list__link--icon-color-weak:active { --bg: #92aaac; --border: #ffffff; --color: #92aaac; } .m-link-list__link--icon-color-weak:hover::before, .m-link-list__link--icon-color-weak:focus::before, .m-link-list__link--icon-color-weak:active::before { --border: #92aaac; } .m-link-list__link--icon-color-weak:hover::after, .m-link-list__link--icon-color-weak:focus::after, .m-link-list__link--icon-color-weak:active::after { --border: #ffffff; } .m-link-list__link--icon-color-weak-02 { --bg: transparent; --border: #00a5c0; } .m-link-list__link--icon-color-weak-02::after { --border: #00a5c0; } .m-link-list__link--icon-color-weak-02:hover, .m-link-list__link--icon-color-weak-02:focus, .m-link-list__link--icon-color-weak-02:active { --bg: #00a5c0; --border: #ffffff; --color: #00a5c0; } .m-link-list__link--icon-color-weak-02:hover::before, .m-link-list__link--icon-color-weak-02:focus::before, .m-link-list__link--icon-color-weak-02:active::before { --border: #00a5c0; } .m-link-list__link--icon-color-weak-02:hover::after, .m-link-list__link--icon-color-weak-02:focus::after, .m-link-list__link--icon-color-weak-02:active::after { --border: #ffffff; } .m-hdg-challenge-resolution__list .m-link-list { margin-top: 25px; } .m-hdg-lv1-second .m-link-list { margin-top: 15px; } .m-hdg-lv1-second .m-link-list__link { color: #ffffff; } .m-hdg-lv1-second .m-link-list__link::before { --border: #ffffff; --bg: transparent; } .m-hdg-lv1-second .m-link-list__link:hover::before, .m-hdg-lv1-second .m-link-list__link:focus::before, .m-hdg-lv1-second .m-link-list__link:active::before { --border: #92aaac; --bg: #92aaac; } .m-hdg-lv1-second .m-link-list__link:hover::after, .m-hdg-lv1-second .m-link-list__link:focus::after, .m-hdg-lv1-second .m-link-list__link:active::after { --border: #ffffff; } .m-link-list__item.is-current .m-link-list__link { --color: #0066c0; text-decoration: underline; } /* .m-link-list-anchor ----------------------------------------------- */ .m-link-list-anchor { --padding-block: 10px; margin-top: 25px; padding: var(--padding-block) 15px; background-color: #f2f8f9; } .m-link-list-anchor__list { display: grid; grid-template-rows: 1fr; grid-template-columns: 100%; gap: 10px 0; } .m-link-list-anchor__link { --color: #333333; --border: #00a5c0; --bg: transparent; display: flex; position: relative; padding-left: 24px; gap: 0 5px; color: var(--color); line-height: 1.4444444444; transition: color 0.3s; } .m-link-list-anchor__link::before { display: block; position: absolute; top: 3px; left: 0; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-link-list-anchor__link::after { display: block; position: absolute; top: 8px; left: 6px; width: 5px; height: 5px; transform: rotate(45deg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); content: ""; } .m-link-list-anchor__link:hover, .m-link-list-anchor__link:focus, .m-link-list-anchor__link:active { --color: #00a5c0; --border: #ffffff; --bg: #00a5c0; text-decoration: underline; } .m-link-list-anchor__link:hover::before, .m-link-list-anchor__link:focus::before, .m-link-list-anchor__link:active::before { --border: #00a5c0; } /* .m-link-list-toc ----------------------------------------------- */ .m-link-list-toc { border: solid 1px #92aaac; } .m-link-list-toc__link { color: #333333; } .m-link-list-toc__link-num { flex-shrink: 0; } .m-link-list-toc__link-text::before { display: block; position: absolute; border: 1px solid #92aaac; border-radius: 50%; content: ""; } .m-link-list-toc__link-text::after { display: block; position: absolute; width: 5px; height: 5px; transform: rotate(45deg); border-right: 1px solid #92aaac; border-bottom: 1px solid #92aaac; content: ""; } .m-link-list-toc__link-nest { color: #526366; } .m-link-list-toc__link, .m-link-list-toc__link-nest { display: inline-flex; gap: 0 3px; font-weight: 700; transition: color 0.3s; } .m-link-list-toc__link:hover, .m-link-list-toc__link:focus, .m-link-list-toc__link:active, .m-link-list-toc__link-nest:hover, .m-link-list-toc__link-nest:focus, .m-link-list-toc__link-nest:active { color: #00a5c0; text-decoration: underline; } .m-link-list-toc__link:hover .m-link-list-toc__link-text::before, .m-link-list-toc__link:focus .m-link-list-toc__link-text::before, .m-link-list-toc__link:active .m-link-list-toc__link-text::before, .m-link-list-toc__link-nest:hover .m-link-list-toc__link-text::before, .m-link-list-toc__link-nest:focus .m-link-list-toc__link-text::before, .m-link-list-toc__link-nest:active .m-link-list-toc__link-text::before { border-color: #00a5c0; } .m-link-list-toc__link:hover .m-link-list-toc__link-text::after, .m-link-list-toc__link:focus .m-link-list-toc__link-text::after, .m-link-list-toc__link:active .m-link-list-toc__link-text::after, .m-link-list-toc__link-nest:hover .m-link-list-toc__link-text::after, .m-link-list-toc__link-nest:focus .m-link-list-toc__link-text::after, .m-link-list-toc__link-nest:active .m-link-list-toc__link-text::after { border-color: #00a5c0; } .m-link-list-toc__link-details, .m-link-list-toc__link-nest-details { display: block; font-weight: 400; } .m-link-list-toc__list { display: flex; flex-direction: column; gap: 20px 40px; } .m-link-list-toc__dt { font-weight: 700; } .m-link-list-toc__item { position: relative; padding-left: 30px; } /* .m-list-label ----------------------------------------------- */ .m-link-list-label { width: 100%; margin-top: 15px; } .m-link-list-label__ul { display: flex; flex-wrap: wrap; gap: 20px; } .m-link-list-label__li > *:first-child { margin-top: 0; } .m-link-list-label__text { display: inline-block; margin: 0; transition: all 0.3s ease; } .m-link-list-label__anchor { color: #333333; font-weight: 700; font-size: 1.8rem; } .m-link-list-label__anchor:hover .m-link-list-label__text, .m-link-list-label__anchor:focus .m-link-list-label__text, .m-link-list-label__anchor:active .m-link-list-label__text { text-decoration: none; opacity: 0.7; } .m-link-list-label__lbl { margin: 0 11px 0 0; padding: 3px 10px; border-radius: 5px; background-color: #92aaac; color: #ffffff; font-weight: 400; font-size: 1.4rem; } /* .m-link-cv ----------------------------------------------- */ .m-link-cv { z-index: 2000; position: fixed; } @keyframes cv-animation-pc { 0% { transform: scaleX(0) translateX(120px); opacity: 0; } 100% { transform: scaleX(1) translateX(0); opacity: 1; } } @keyframes cv-animation-sp { 0% { transform: scaleY(0) translateY(80px); opacity: 0; } 100% { transform: scaleY(1) translateY(0); opacity: 1; } } .m-link-cv.js-cv-hidden-root { opacity: 1; transition: 0.3s; } .m-link-cv.js-cv-hidden-root.is-hide { visibility: hidden; opacity: 0; } .m-link-cv__text { color: #333333; } .m-link-cv__link { display: flex; flex-direction: column; justify-content: center; background: #f5f5f5; transition: 0.3s; } .m-link-cv__link:hover, .m-link-cv__link:focus, .m-link-cv__link:active { background: #d9e7e9; } .m-link-cv__img { display: flex; align-items: center; justify-content: center; margin: 0 auto; border-radius: 50%; background: #00a5c0; } /* .m-link-media ----------------------------------------------- */ .m-link-media { display: inline-block; position: relative; transition: opacity 0.3s; } .m-link-media:hover, .m-link-media:focus, .m-link-media:active { opacity: 0.6; } .m-link-media--radius { overflow: hidden; border-radius: 8px; box-shadow: 0 3px 24px rgba(0, 0, 0, 0.16); } .m-link-media__icon { display: flex; position: absolute; right: 12px; bottom: 12px; align-items: center; width: 40px; height: 40px; border-radius: 50%; background-color: #e4eff1; } .m-link-media__icon img { margin: auto; } /* ---------------------------------------------------------------- Button (.m-btn[-*]) ----------------------------------------------------------------- */ /* .m-btn ----------------------------------------------- */ .m-btn { display: flex; flex-wrap: wrap; margin-top: 35px; gap: 20px; } .m-btn__icon { display: flex; position: absolute; top: 0; right: 15px; bottom: 0; align-items: center; justify-content: center; width: 30px; height: 30px; margin: auto 0; border-radius: 50%; background-color: #e4eff1; } .m-btn__text { display: block; text-align: center; } .m-btn__btn { --bg: #ffffff; --border: #92aaac; --color: #526366; --padding-block: 18px; position: relative; width: 100%; padding: var(--padding-block) 40px var(--padding-block) var(--padding-block); border: 1px solid var(--border); border-radius: 8px; background-color: var(--bg); box-shadow: 0 0 12px rgba(51, 51, 51, 0.16); color: var(--color); font-size: 1.6rem; line-height: 1.6; transition: opacity 0.3s; display: block; text-align: center; } .m-btn__btn::before { --bg: transparent; display: block; position: absolute; top: 0; right: 15px; bottom: 0; width: 19px; height: 19px; margin: auto 0; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-btn__btn::after { display: block; position: absolute; top: 1px; right: 23px; bottom: 0; width: 5px; height: 5px; margin: auto 0; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-btn__btn:not(:disabled):hover, .m-btn__btn:not(:disabled):focus, .m-btn__btn:not(:disabled):active { opacity: 0.6; } .m-btn__btn--strong { --bg: #92aaac; --border: #92aaac; --color: #ffffff; } .m-btn__btn--strong::before, .m-btn__btn--strong::after { --border: #ffffff; } .m-btn__btn--cv { --bg: #0066c0; --border: #0066c0; --color: #ffffff; } .m-btn__btn--cv::before, .m-btn__btn--cv::after { --border: #ffffff; } .m-btn__btn--icon { --padding-block: 18px; padding: var(--padding-block) 50px var(--padding-block) 25px; } .m-btn__btn--icon::before, .m-btn__btn--icon::after { display: none; } .m-btn__btn:disabled { --bg: #526366; --border: #526366; --color: #ffffff; cursor: not-allowed; opacity: 0.4; } .m-btn__btn:disabled::before { --bg: #ffffff; --border: #ffffff; } .m-btn__btn:disabled::after { --border: #526366; } .m-btn__btn--more::after { top: 0; right: 22px; width: 5px; height: 5px; transform: rotate(45deg); border-top: none; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .m-btn__btn--size-large .m-btn__icon { width: 30px; height: 30px; } .m-btn__btn--tel { padding-left: 50px; } .m-btn__btn--tel .m-btn__text { position: relative; font-size: 2rem; } .m-btn__btn--tel .m-btn__icon { right: auto; left: 15px; background-color: #ffffff; } .m-btn__btn--tel .m-btn__icon-img { max-width: 17px; } .m-btn__btn--tel.m-btn__btn--size-large { --padding-block: 15px; padding-left: 50px; } .str-side-nav .m-btn__btn { --padding-block: 18px; padding: var(--padding-block) 45px var(--padding-block) 30px; } .m-box-document .m-btn { margin-top: 0; } .m-box-document .m-btn__btn { width: 100%; min-width: auto; padding: 18px 40px 18px 20px; border-radius: 8px; } /* .m-btn-parallel ----------------------------------------------- */ .m-btn-parallel { display: grid; grid-template-rows: 1fr; margin-top: 20px; } .m-btn-parallel__btn-text { --bg: #0066c0; --border: #0066c0; --color: #333333; display: block; position: relative; padding-left: 24px; color: var(--color); font-size: 1.4rem; } .m-btn-parallel__btn-text::before { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 16px; height: 16px; margin: auto 0; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-btn-parallel__btn-text::after { --border: #ffffff; display: block; position: absolute; top: 0; bottom: 0; left: 4px; width: 5px; height: 5px; margin: auto 0; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-btn-parallel__sub-text { display: block; margin-top: 8px; color: #526366; font-size: 1.2rem; transition: opacity 0.3s; } .m-btn-parallel__btn { display: flex; position: relative; flex-direction: column; justify-content: center; height: 100%; padding: 15px 10px; border: 1px solid #d9e7e9; background-color: #ffffff; line-height: 1.6; } .m-btn-parallel__btn:not(:disabled):hover .m-btn-parallel__btn-text, .m-btn-parallel__btn:not(:disabled):focus .m-btn-parallel__btn-text, .m-btn-parallel__btn:not(:disabled):active .m-btn-parallel__btn-text { --bg: transparent; --border: #0066c0; --color: #0066c0; text-decoration: underline; } .m-btn-parallel__btn:not(:disabled):hover .m-btn-parallel__btn-text::after, .m-btn-parallel__btn:not(:disabled):focus .m-btn-parallel__btn-text::after, .m-btn-parallel__btn:not(:disabled):active .m-btn-parallel__btn-text::after { --border: #0066c0; } .m-btn-parallel__btn:not(:disabled):hover .m-btn-parallel__sub-text, .m-btn-parallel__btn:not(:disabled):focus .m-btn-parallel__sub-text, .m-btn-parallel__btn:not(:disabled):active .m-btn-parallel__sub-text { opacity: 0.6; } .m-btn-parallel__item.is-current .m-btn-parallel__btn-text { --color: #0066c0; text-decoration: underline; } /* .m-btn-parallel-02 ----------------------------------------------- */ .m-btn-parallel-02 { display: grid; grid-template-rows: 1fr; margin-top: 20px; gap: 10px; } .m-btn-parallel-02__btn-text { --color: #526366; display: block; color: var(--color); font-size: 1.4rem; } .m-btn-parallel-02__btn { --bg: #ffffff; --border: #92aaac; display: flex; position: relative; flex-direction: column; justify-content: center; height: 100%; padding: 20px 15px; border: 1px solid var(--border); border-radius: 8px; background-color: var(--bg); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); line-height: 1.6; text-align: center; transition: background-color 0.3s; } .m-btn-parallel-02__btn:not(:disabled):hover, .m-btn-parallel-02__btn:not(:disabled):focus, .m-btn-parallel-02__btn:not(:disabled):active { --bg: #00a5c0; --border: #00a5c0; } .m-btn-parallel-02__btn:not(:disabled):hover .m-btn-parallel-02__btn-text, .m-btn-parallel-02__btn:not(:disabled):focus .m-btn-parallel-02__btn-text, .m-btn-parallel-02__btn:not(:disabled):active .m-btn-parallel-02__btn-text { --color: #ffffff; } .m-btn-parallel-02__btn--sm { padding: 10px 13px; } .m-btn-parallel-02__btn--sm .m-btn-parallel-02__btn-text { font-size: 1.2rem; } /* .m-btn-hash ----------------------------------------------- */ .m-btn-hash { display: flex; flex-wrap: wrap; margin-top: 10px; gap: 10px; } .m-btn-hash__btn { --bg: #ffffff; --border: #92aaac; --color: #92aaac; display: block; padding: 10px 14px; border: 1px solid var(--border); border-radius: 50px; background-color: var(--bg); color: var(--color); font-size: 1.2rem; line-height: 1; transition: all 0.3s; } .m-btn-hash__btn:hover, .m-btn-hash__btn:focus, .m-btn-hash__btn:active { --bg: #92aaac; --border: #ffffff; --color: #ffffff; } .m-btn-hash__btn-text { position: relative; padding: 0 0 0 7px; } .m-btn-hash__btn-text::before { display: block; position: absolute; left: 0; margin: auto 0; content: ""; content: "#"; } .uq-corporate-ul-carousel .m-btn-hash__btn { --bg: rgba(0 0 0 / 0%); --border: #ffffff; --color: #ffffff; padding: 10px 14px; font-size: 1.2rem; } .uq-corporate-ul-carousel .m-btn-hash__btn-text { padding: 0 0 0 7px; } .uq-corporate-ul-carousel .m-btn-hash__btn:hover, .uq-corporate-ul-carousel .m-btn-hash__btn:focus, .uq-corporate-ul-carousel .m-btn-hash__btn:active { --bg: #92aaac; } .m-panel-card-link-item .m-btn-hash__btn { --border: #92aaac; padding: 10px 14px; font-size: 1.2rem; } .m-panel-card-link-item .m-btn-hash__btn-text { padding: 0 0 0 7px; } .m-box-simple .m-btn-hash__btn:hover, .m-box-simple .m-btn-hash__btn:focus, .m-box-simple .m-btn-hash__btn:active { --border: #92aaac; } /* .m-btn-keyword ----------------------------------------------- */ .m-btn-keyword { display: flex; flex-wrap: wrap; gap: 15px; } .m-btn-keyword__btn { --bg: #ffffff; --border: #92aaac; --color: #333333; display: block; padding: 9px 10px 9px 15px; border: 1px solid var(--border); border-radius: 50px; background-color: var(--bg); color: var(--color); font-size: 1.2rem; transition: background-color 0.3s; } .m-btn-keyword__btn:hover, .m-btn-keyword__btn:focus, .m-btn-keyword__btn:active { --bg: #e4eff1; } .m-btn-keyword__btn-text { position: relative; padding: 0 30px 0 0; } .m-btn-keyword__btn-text::before, .m-btn-keyword__btn-text::after { --bg: #ffffff; --border: #92aaac; display: block; position: absolute; top: 0; bottom: 0; margin: auto 0; content: ""; } .m-btn-keyword__btn-text::before { right: 0; width: 17px; height: 17px; margin: auto 0; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); } .m-btn-keyword__btn-text::after { right: 7px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); } .uq-corporate-ul-carousel-keyword .m-btn-keyword { gap: 0; } html[data-script-enabled=true] .uq-corporate-ul-carousel-keyword .m-btn-keyword { width: max-content; } .uq-corporate-ul-carousel-keyword .m-btn-keyword__item { padding: 7px; } /* ---------------------------------------------------------------- List (.m-list[-*]) ----------------------------------------------------------------- */ /* .m-list ----------------------------------------------- */ .m-list { display: grid; grid-template-rows: 1fr; margin-top: 10px; gap: 15px; } .m-list--lyt-row { display: flex; flex-wrap: wrap; } .m-list__item { --circle: 6px; position: relative; padding-left: calc(var(--circle) + 10px); } .m-list__item::before { display: block; position: absolute; top: 9px; left: 3px; width: var(--circle); height: var(--circle); border-radius: 50%; background-color: #00a5c0; content: ""; } .m-list__item a { color: #0066c0; text-decoration: underline; transition: opacity 0.3s; } .m-list__item a:hover, .m-list__item a:focus, .m-list__item a:active { text-decoration: none; opacity: 0.6; } /* .m-list-order ----------------------------------------------- */ .m-list-order { display: flex; flex-direction: column; margin-top: 25px; gap: 15px; } .m-list-order__item ul, .m-list-order__item ol { margin-top: 15px; padding-left: 20px; } .m-list-order__item-set { display: flex; gap: 8px; } .m-list-order__num { display: block; flex-shrink: 0; min-width: 20px; text-align: right; } .m-list-order__content { display: block; } .m-list-order__content a { color: #0066c0; text-decoration: underline; transition: opacity 0.3s; } .m-list-order__content a:hover, .m-list-order__content a:focus, .m-list-order__content a:active { text-decoration: none; opacity: 0.6; } /* .m-list-note ----------------------------------------------- */ .m-list-note { display: flex; flex-direction: column; margin-top: 15px; gap: 12px; } .m-list-note__item-set { display: flex; gap: 6px; font-size: 1.2rem; line-height: 1.5; } .m-list-note__symbol { display: block; flex-shrink: 0; } .m-list-note__content { display: block; } .m-list-note__content a { color: #0066c0; text-decoration: underline; transition: opacity 0.3s; } .m-list-note__content a:hover, .m-list-note__content a:focus, .m-list-note__content a:active { text-decoration: none; opacity: 0.6; } /* .m-list-des ----------------------------------------------- */ .m-list-des { display: flex; flex-direction: column; margin-top: 15px; gap: 25px 40px; margin: 15px 10px 0px 10px; } .m-list-des__title { font-weight: 700; } .m-list-des__contents > *:first-child { margin-top: 0; } .m-list-des__contents .m-text { margin-top: 15px; } .m-list-des__body { display: flex; flex-direction: column; gap: 3px; } .m-list-des__body--lyt-row { display: grid; grid-template-columns: 120px 1fr; flex-direction: row; gap: 15px; } .m-list-des__body--lyt-row .m-list-des__title { position: relative; padding-right: 15px; } .m-list-des__body--lyt-row .m-list-des__title::before { display: block; position: absolute; top: 0; right: 0; width: 3px; height: 100%; border-radius: 8px; background-color: #e5e5e5; content: ""; } /* .m-list-news ----------------------------------------------- */ .m-list-news { margin-top: 50px; } .m-list-news__title { margin-bottom: 10px; font-size: 2rem; } .m-list-news__item { --padding-block: 25px; --border: #dedede; padding: var(--padding-block) var(--padding-block) var(--padding-block) 30px; border-bottom: 1px solid var(--border); } .m-list-news__item:first-of-type { border-top: 1px solid var(--border); } .m-list-news__head { display: flex; align-items: center; gap: 25px; } .m-list-news__date { display: block; margin-top: 0; color: #526366; font-size: 1.2rem; line-height: 1.4; } .m-list-news__category { display: flex; flex-wrap: wrap; margin-top: 0; gap: 10px; } .m-list-news__category-text { flex-shrink: 0; padding: 2px 13px; border-radius: 2px; background-color: #f1f1f1; color: #526366; font-size: 1.2rem; line-height: 1.4; text-align: center; } .m-list-news__text { display: block; margin-top: 10px; } .m-list-news__link { --color: #333333; --border: #0066c0; --bg: transparent; display: block; position: relative; padding-right: 40px; color: var(--color); } .m-list-news__link::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; height: 24px; margin: auto; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-list-news__link::after { display: block; position: absolute; top: 0; right: 10px; bottom: 0; width: 5px; width: 7px; height: 5px; height: 7px; margin: auto; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-list-news__link:hover, .m-list-news__link:focus, .m-list-news__link:active { --color: #0066c0; --border: #ffffff; --bg: #0066c0; text-decoration: underline; opacity: 1; } .m-list-news__link:hover::before, .m-list-news__link:focus::before, .m-list-news__link:active::before { --border: #0066c0; } /* .m-list-label-product ----------------------------------------------- */ .m-list-label-product { --label-color: #06363e; display: flex; flex-flow: wrap column; margin: 30px 0 20px; } .m-list-label-product__item { display: flex; gap: 20px 30px; } .m-list-label-product__item-contents > *:first-child { margin-top: 0; } .m-list-label-product__item-head { display: flex; align-items: baseline; margin-top: 10px; gap: 9px; } .m-list-label-product__item-label { display: inline-block; flex-shrink: 0; min-width: 78px; margin-top: 0; padding: 4px 16px; background-color: var(--label-color); color: #ffffff; font-size: 1.2rem; line-height: 1.4; text-align: center; } .m-list-label-product__item-text, .m-list-label-product__item-text-supplement { margin-top: 0; font-size: 1.4rem; line-height: 1.6; } .m-list-label-product__item-text { color: var(--label-color); } .m-list-label-product__item-text-supplement { margin-top: 8px; } .m-list-label-product__item-sub-contents > *:first-child { margin-top: 0; } /* .m-list-ranking ----------------------------------------------- */ .m-list-ranking__list { display: grid; grid-template-columns: 100%; gap: 10px; } .m-list-ranking__inner { --bg: #ffffff; --border: #92aaac; --color: #333333; display: block; position: relative; height: 100%; padding: 28px 40px 20px 15px; border: 1px solid var(--border); border-radius: 8px; background-color: var(--bg); color: var(--color); } .m-list-ranking__inner::before { display: block; position: absolute; top: 2px; right: 14px; bottom: 0; width: 19px; height: 19px; margin: auto 0; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-list-ranking__inner::after { display: block; position: absolute; top: 2px; right: 22px; bottom: 0; width: 5px; height: 5px; margin: auto 0; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-list-ranking__inner:hover, .m-list-ranking__inner:focus, .m-list-ranking__inner:active { --color: #92aaac; color: var(--color); } .m-list-ranking__inner:hover::before, .m-list-ranking__inner:focus::before, .m-list-ranking__inner:active::before { --bg: #92aaac; background-color: var(--bg); } .m-list-ranking__inner:hover::after, .m-list-ranking__inner:focus::after, .m-list-ranking__inner:active::after { --border: #ffffff; border-top-color: var(--border); border-right-color: var(--border); } .m-list-ranking__rank { --bg: #00a5c0; display: block; position: absolute; top: -1px; left: -1px; width: 38px; padding: 6px 5px; border-radius: 8px 0; background-color: var(--bg); color: #ffffff; font-size: 1.2rem; line-height: 1; text-align: center; } .m-list-ranking__text { font-size: 1.6rem; line-height: 1.4; } .m-list-ranking__item:nth-of-type(1) .m-list-ranking__rank { --bg: #aa9816; } .m-list-ranking__item:nth-of-type(2) .m-list-ranking__rank { --bg: #838383; } .m-list-ranking__item:nth-of-type(3) .m-list-ranking__rank { --bg: #bb6624; } /* .m-list-faq ----------------------------------------------- */ .m-list-faq { display: flex; flex-direction: column; margin-top: 40px; gap: 10px 0; } .m-list-faq__item { padding: 0 10px; border-radius: 8px; background-color: #f2f8f9; } .m-list-faq__title { padding: 17px 0 15px; } .m-list-faq__title-text { font-size: 1.4rem; line-height: 1.6; } .m-list-faq__inner { display: flex; padding: 0 10px; gap: 10px; background-color: transparent; } .m-list-faq__icon { --circle: 32px; display: flex; position: relative; top: -2px; flex-shrink: 0; justify-content: center; width: var(--circle); height: var(--circle); border-radius: 50%; background-color: #00a5c0; color: #ffffff; font-weight: 700; font-size: 1.4rem; line-height: 29px; } .m-list-faq__contents .m-list-faq__inner { margin-bottom: 15px; padding: 17px 10px 15px; border-radius: 8px; background-color: #ffffff; } .m-list-faq__contents .m-list-faq__icon { background-color: #92aaac; } .m-list-faq__contents-inner > *:first-child { margin-top: 0; } /* ---------------------------------------------------------------- Box (.m-box[-*]) ----------------------------------------------------------------- */ /* .m-box ----------------------------------------------- */ .m-box { display: flex; position: relative; flex-direction: column; margin-top: 35px; padding: 30px 20px; overflow: hidden; border-radius: 8px; box-shadow: 0 0 12px rgba(51, 51, 51, 0.16); } .m-box::before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 6px; border-radius: 8px; background-color: #00a5c0; content: ""; } .m-box__contents > *:first-child { margin-top: 0; } /* .m-box-document ----------------------------------------------- */ .m-box-document { position: relative; margin: 60px 0; padding: 62px 32px 35px; border-radius: 20px; background: #fffdf0; box-shadow: 0 3px 8px -5px rgba(0, 0, 0, 0.3); } .m-box-document__hdg { position: absolute; top: 0; left: 0; width: 100%; padding: 10px 0; border-radius: 15px 0; background: #f1a919; color: #ffffff; text-align: center; } .m-box-document__img { position: relative; width: 100%; } .m-box-document__item { display: flex; flex-direction: column; justify-content: space-between; } .m-box-document__item > *:first-child { margin-top: 0; } .m-box-document__item-lead { margin-top: 0; text-align: center; } .m-box-document__item-lead--em { font-size: 2rem; line-height: 1.6; } .m-box-document--single-cv .m-box-document__item-lead--em { font-size: 1.4rem; } .m-box-document--single-document .m-box-document__item-lead--em { font-size: 1.6rem; } /* .m-box-cv ----------------------------------------------- */ .m-box-cv { margin-top: 35px; } .m-box-cv__inner { padding: 40px 15px; background: linear-gradient(#00a5c0 0%, #008ec0 37.24%, #0066c0 100%); } .m-box-cv__list { display: flex; justify-content: center; gap: 18px; } .m-box-cv__item { width: 100%; overflow: hidden; border-radius: 4px; background-position: top center; background-size: cover; background-repeat: no-repeat; background-color: #ffffff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .m-box-cv__item-inner { padding: 35px 12px 30px; } .m-box-cv__title { font-size: 2rem; line-height: 1.6; text-align: center; } .m-box-cv__text { margin: 10px auto 0; font-size: 1.4rem; line-height: 1.6; text-align: center; } .m-box-cv__btn { display: flex; flex-wrap: wrap; margin-top: 15px; gap: 20px; } .m-box-cv__btn-link { --padding-block: 18px; --border: #ffffff; --bg: transparent; position: relative; width: 100%; padding: var(--padding-block) 40px var(--padding-block) var(--padding-block); border: 1px solid #0066c0; border-radius: 8px; background-color: #0066c0; box-shadow: 0 0 12px rgba(51, 51, 51, 0.16); color: #ffffff; font-size: 1.6rem; line-height: 1.6; transition: opacity 0.3s; } .m-box-cv__btn-link::before { display: block; position: absolute; top: 0; right: 15px; bottom: 0; width: 19px; height: 19px; margin: auto 0; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-box-cv__btn-link::after { display: block; position: absolute; top: 1px; right: 23px; bottom: 0; width: 5px; height: 5px; margin: auto 0; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-box-cv__btn-link:hover, .m-box-cv__btn-link:focus, .m-box-cv__btn-link:active { opacity: 0.6; } .m-box-cv__btn-text { display: block; text-align: center; } /* .m-box-simple ----------------------------------------------- */ .m-box-simple { --padding-block: 10px; --bg: #f2f8f9; z-index: 1; position: relative; margin-top: 25px; padding: var(--padding-block) 15px; background-color: var(--bg); } .m-box-simple > *:first-child { margin-top: 0; } .m-box-simple--wide { --padding-block: 35px; margin: 35px 0; } .m-box-simple--bg-color-blue-02 { --bg: #e4eff1; } .m-box-simple--bg-color-gray { --bg: #f1f1f1; } .m-box-simple--border { --bg: #ffffff; padding: 16px 20px; border: solid 1px #92aaac; } .m-box-simple__contents > *:first-child { margin-top: 0; } /* .m-box-cv-product ----------------------------------------------- */ .m-box-cv-product { position: relative; margin-top: 20px; overflow: hidden; border-radius: 8px; background-color: #f1f1f1; } .m-box-cv-product__title { display: inline-block; min-width: 220px; margin-top: 0; padding: 8px 15px; border-radius: 8px 0; background-color: #92aaac; text-align: center; } .m-box-cv-product__title-inner { color: #ffffff; font-size: 1.4rem; line-height: 1.6; } .m-box-cv-product__text > *:first-child, .m-box-cv-product__btn > *:first-child { margin-top: 0; } .m-box-cv-product__text p { margin-top: 10px; } .m-box-cv-product__text p em { display: block; font-weight: bold; font-size: 1.5rem; text-align: center; } .m-box-cv-product__tel { flex-shrink: 0; margin: 10px auto 0; } .m-box-cv-product__tel-inner { display: flex; position: relative; align-items: center; gap: 0 10px; } .m-box-cv-product__tel-inner::before { --circle-width: 38px; display: block; position: absolute; position: relative; top: 0; left: 0; width: var(--circle-width); height: var(--circle-width); border-radius: 50%; background-color: #00a5c0; content: ""; } .m-box-cv-product__tel-inner::after { --icon-width: 21px; display: block; position: absolute; top: 9px; left: 8px; width: var(--icon-width); height: var(--icon-width); background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/icon-tel-white-01.svg"); background-size: contain; background-repeat: no-repeat; content: ""; } .m-box-cv-product__tel-text { color: #333333; font-size: 2.2rem; line-height: 1; } .m-box-cv-product__text-sm { font-size: 1.3rem; line-height: 1.6; } .m-box-cv-product__contents { display: flex; padding: 15px 20px 20px; gap: 5px 0; } .m-box-cv-product__contents > *:first-child { margin-top: 0; } .m-box-cv-product__wrap .m-box-cv-product__contents { border-top: 1px solid #dddddd; } .m-box-cv-product__wrap .m-box-cv-product__contents:first-child { padding: 20px 0; border-top: none; } .m-box-cv-product__wrap .m-box-cv-product__contents:last-child { padding: 20px 0 30px; border-top: 1px solid #dddddd; } /* ---------------------------------------------------------------- Panel (.m-panel[-*]) ----------------------------------------------------------------- */ /* .m-panel-link ----------------------------------------------- */ .m-panel-link { margin-top: 30px; } .m-panel-link__item { width: 100%; } .m-panel-link__list { display: grid; grid-template-rows: 1fr; grid-template-columns: 100%; gap: 15px; } .m-panel-link__list[data-col-wide="2"] .m-panel-link__item { aspect-ratio: 345/177; } .m-panel-link__list[data-col-wide="3"] .m-panel-link__item { aspect-ratio: 345/177; } .m-panel-link__index { display: flex; z-index: 1; position: relative; align-items: flex-end; height: 100%; padding: 7px 26px 7px 10px; color: #ffffff; } .m-panel-link__index::before { display: block; z-index: 1; position: absolute; right: 5px; bottom: 6px; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-panel-link__index::after { display: block; z-index: 1; position: absolute; right: 11px; bottom: 11px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-panel-link__item-inner { --bg: transparent; --border: #ffffff; display: block; position: relative; height: 100%; transition: opacity 0.3s; } .m-panel-link__item-inner:hover, .m-panel-link__item-inner:focus, .m-panel-link__item-inner:active { opacity: 0.9; } .m-panel-link__item-inner:hover .m-panel-link__index::before, .m-panel-link__item-inner:focus .m-panel-link__index::before, .m-panel-link__item-inner:active .m-panel-link__index::before { --bg: #92aaac; --border: #92aaac; border-color: var(--border); background-color: var(--bg); } .m-panel-link__title { display: block; font-size: 1.6rem; line-height: 1.25; } .m-panel-link__img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .m-panel-link__img::before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333333; content: ""; opacity: 0.44; } .m-panel-link__img > img { width: 100%; height: 100%; object-fit: cover; } /* .m-panel-card ----------------------------------------------- */ .m-panel-card { position: relative; margin-top: 45px; } .m-panel-card__item { --padding-block: 7px; width: 100%; padding: var(--padding-block) var(--padding-block) 14px; border-radius: 8px; background-color: #ffffff; box-shadow: 0 0 24px rgba(51, 51, 51, 0.16); } .m-panel-card__item a.m-panel-card__img { transition: opacity 0.3s; } .m-panel-card__item a.m-panel-card__img::before { display: block; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333333; content: ""; opacity: 0.44; } .m-panel-card__item a:hover.m-panel-card__img, .m-panel-card__item a:focus.m-panel-card__img, .m-panel-card__item a:active.m-panel-card__img { opacity: 0.9; } .m-panel-card--bg-strong { padding: 25px 0 0; } .m-panel-card--bg-strong::before { display: block; z-index: -1; position: absolute; top: 0; left: -15px; width: calc(100% + 30px); height: 268px; background-color: #d9e7e9; content: ""; } .m-panel-card__title { margin-bottom: 25px; color: #00a5c0; font-size: 2.4rem; line-height: 1.4; text-align: center; } .m-panel-card__title-sm { color: #00a5c0; font-size: 1.6rem; } .m-panel-card__title-block { display: block; } .m-panel-card__list { display: grid; position: relative; grid-template-rows: 1fr; grid-template-columns: 100%; max-width: 1280px; margin: 0 auto; gap: 20px; } .m-panel-card__img { display: block; position: relative; aspect-ratio: 329/142; overflow: hidden; border-radius: 4px; } .m-panel-card__img > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .m-panel-card__img-link { display: flex; z-index: 1; position: absolute; align-items: center; justify-content: center; width: 100%; height: 100%; } .m-panel-card__img-link-text { --bg: transparent; --border: #ffffff; display: inline-block; position: relative; padding-right: 25px; color: #ffffff; font-size: 1.6rem; line-height: 1.6; } .m-panel-card__img-link-text::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 16px; height: 16px; margin: auto 0; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-panel-card__img-link-text::after { display: block; position: absolute; top: 0; right: 7px; bottom: 0; width: 5px; height: 5px; margin: auto 0; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-panel-card__contents { margin-top: 10px; padding: 0 15px; } .m-panel-card__contents > *:first-child { margin-top: 0; } /* .m-panel-card-02 ----------------------------------------------- */ .m-panel-card-02 { position: relative; margin-top: 45px; } .m-panel-card-02__heading { margin-bottom: 25px; color: #ffffff; font-weight: 400; font-size: 2.4rem; line-height: 1.6; text-align: center; text-shadow: 0 0 30px rgba(51, 51, 51, 0.16); } .m-panel-card-02--bg-strong { padding: 25px 0 0; } .m-panel-card-02--bg-strong::before { display: block; z-index: -1; position: absolute; top: 0; left: -15px; width: calc(100% + 30px); height: 210px; background: linear-gradient(-90deg, #00a5c0 0%, #0066c0 100%); content: ""; } .m-panel-card-02__list { display: grid; position: relative; grid-template-rows: 1fr; grid-template-columns: 100%; max-width: 1280px; margin: 0 auto; gap: 20px; } .m-panel-card-02__item { width: 100%; } .m-panel-card-02__index { --bg: transparent; --border: #92aaac; display: block; position: relative; margin-top: 15px; padding: 0 35px 0 15px; } .m-panel-card-02__index::before { display: block; position: absolute; top: 2px; right: 8px; width: 19px; height: 19px; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-panel-card-02__index::after { display: block; position: absolute; top: 9px; right: 16px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-panel-card-02__title { display: block; margin-bottom: 10px; font-size: 1.6rem; line-height: 1.6; } .m-panel-card-02__text { display: block; font-size: 1.4rem; line-height: 1.6; } .m-panel-card-02__img { display: block; position: relative; aspect-ratio: 329/142; overflow: hidden; border-radius: 4px; transition: opacity 0.3s; } .m-panel-card-02__img > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .m-panel-card-02__item-inner { display: block; height: 100%; padding: 7px 7px 14px; border-radius: 8px; background-color: #ffffff; box-shadow: 0 0 24px rgba(51, 51, 51, 0.16); color: #333333; } .m-panel-card-02__item-inner:hover .m-panel-card-02__img, .m-panel-card-02__item-inner:focus .m-panel-card-02__img, .m-panel-card-02__item-inner:active .m-panel-card-02__img { opacity: 0.9; } .m-panel-card-02__item-inner:hover .m-panel-card-02__index, .m-panel-card-02__item-inner:focus .m-panel-card-02__index, .m-panel-card-02__item-inner:active .m-panel-card-02__index { --bg: #92aaac; --border: #ffffff; } .m-panel-card-02__item-inner:hover .m-panel-card-02__index::before, .m-panel-card-02__item-inner:focus .m-panel-card-02__index::before, .m-panel-card-02__item-inner:active .m-panel-card-02__index::before { border-color: var(--bg); background-color: var(--bg); } .m-panel-card-02__item-inner:hover .m-panel-card-02__index::after, .m-panel-card-02__item-inner:focus .m-panel-card-02__index::after, .m-panel-card-02__item-inner:active .m-panel-card-02__index::after { border-color: var(--border); } /* .m-panel-card-link ----------------------------------------------- */ .m-panel-card-link { position: relative; margin-top: 20px; } .m-panel-card-link__list { display: grid; grid-template-rows: 1fr; grid-template-columns: 100%; gap: 10px; } .m-panel-card-link__item { width: 100%; border-radius: 8px; background-color: #ffffff; box-shadow: 0 0 24px rgba(51, 51, 51, 0.16); } .m-panel-card-link__inner { display: block; height: 100%; padding: 10px 15px 10px 10px; color: #333333; transition: color 0.3s; } .m-panel-card-link__inner:hover, .m-panel-card-link__inner:focus, .m-panel-card-link__inner:active { color: #92aaac; } .m-panel-card-link__inner:hover .m-panel-card-link__img, .m-panel-card-link__inner:focus .m-panel-card-link__img, .m-panel-card-link__inner:active .m-panel-card-link__img { opacity: 0.9; } .m-panel-card-link__inner:hover .m-panel-card-link__index, .m-panel-card-link__inner:focus .m-panel-card-link__index, .m-panel-card-link__inner:active .m-panel-card-link__index { --bg: #92aaac; --border: #ffffff; } .m-panel-card-link__inner:hover .m-panel-card-link__index::before, .m-panel-card-link__inner:focus .m-panel-card-link__index::before, .m-panel-card-link__inner:active .m-panel-card-link__index::before { background-color: var(--bg); } .m-panel-card-link__inner:hover .m-panel-card-link__index::after, .m-panel-card-link__inner:focus .m-panel-card-link__index::after, .m-panel-card-link__inner:active .m-panel-card-link__index::after { border-top-color: var(--border); border-right-color: var(--border); } .m-panel-card-link__index { --bg: transparent; --border: #92aaac; display: block; position: relative; } .m-panel-card-link__index::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 19px; height: 19px; margin: auto 0; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-panel-card-link__index::after { display: block; position: absolute; top: 0; right: 8px; bottom: 0; width: 5px; height: 5px; margin: auto 0; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-panel-card-link__img { display: block; position: relative; aspect-ratio: 125/72; overflow: hidden; border-radius: 4px; transition: opacity 0.3s; } .m-panel-card-link__img > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; } .m-panel-card-link__text { font-size: 1.4rem; line-height: 1.6; } /* .m-panel-card-link-item ----------------------------------------------- */ .m-panel-card-link-item { --padding-block: 8px; display: block; height: 100%; margin-top: 20px; padding: var(--padding-block) var(--padding-block) 0; border-radius: 6px; background-color: #ffffff; box-shadow: 0 0 24px rgba(51, 51, 51, 0.16); color: #333333; } .m-panel-card-link-item__index { --padding-block: 15px; --bg: transparent; --border: #92aaac; display: block; position: relative; margin-top: 15px; padding: 0 35px var(--padding-block) var(--padding-block); } .m-panel-card-link-item__index::before { display: block; position: absolute; top: 2px; right: 8px; width: 19px; height: 19px; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-panel-card-link-item__index::after { display: block; position: absolute; top: 9px; right: 16px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-panel-card-link-item__index--has-link { padding: 0 0 var(--padding-block) var(--padding-block); } .m-panel-card-link-item__index--has-link::before, .m-panel-card-link-item__index--has-link::after { display: none; } .m-panel-card-link-item__index-inner { display: block; position: relative; padding-right: 35px; color: #333333; } .m-panel-card-link-item__index-inner::before { display: block; position: absolute; top: 2px; right: 8px; width: 19px; height: 19px; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-panel-card-link-item__index-inner::after { display: block; position: absolute; top: 9px; right: 16px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-panel-card-link-item__index-inner:hover::before, .m-panel-card-link-item__index-inner:focus::before, .m-panel-card-link-item__index-inner:active::before { --bg: #92aaac; background-color: var(--bg); } .m-panel-card-link-item__index-inner:hover::after, .m-panel-card-link-item__index-inner:focus::after, .m-panel-card-link-item__index-inner:active::after { --border: #ffffff; border-top-color: var(--border); border-right-color: var(--border); } .m-panel-card-link-item__index-inner:hover .m-panel-card-link-item__img, .m-panel-card-link-item__index-inner:focus .m-panel-card-link-item__img, .m-panel-card-link-item__index-inner:active .m-panel-card-link-item__img { opacity: 0.9; } .m-panel-card-link-item__figure { display: block; position: relative; overflow: hidden; border-radius: 4px; } .m-panel-card-link-item__tag { display: flex; z-index: 1; position: absolute; top: 0; left: -1px; } .m-panel-card-link-item__tag-category, .m-panel-card-link-item__tag-new { display: block; border-bottom-right-radius: 4px; text-align: center; } .m-panel-card-link-item__tag-category { z-index: 1; min-width: 120px; padding: 2px 10px 4px; background-color: #ffffff; color: #00a5c0; font-size: 1.2rem; line-height: 1.2; } .m-panel-card-link-item__tag-new { z-index: 0; position: relative; left: -10px; min-width: 64px; padding: 2px 10px 4px 23px; border-bottom-right-radius: 4px; background-color: #00a5c0; color: #ffffff; font-size: 1rem; } .m-panel-card-link-item__img { display: block; position: relative; aspect-ratio: 2/1; overflow: hidden; transition: opacity 0.3s; } .m-panel-card-link-item__img > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .m-panel-card-link-item__date { margin-bottom: 10px; color: #92aaac; font-weight: 700; font-size: 1.2rem; line-height: 1; } .m-panel-card-link-item__title { display: block; margin-bottom: 5px; font-size: 1.4rem; line-height: 1.5; } .m-panel-card-link-item__text { -webkit-box-orient: vertical; display: block; /* stylelint-disable-next-line value-no-vendor-prefix */ display: -webkit-box; -webkit-line-clamp: 4; margin-top: 5px; overflow: hidden; color: #526366; font-size: 1.2rem; } .m-panel-card-link-item__bottom-contents { display: block; margin-top: 15px; } .m-panel-card-link-item__bottom-contents > *:first-child { margin-top: 0; } a.m-panel-card-link-item:hover .m-panel-card-link-item__index::before, a.m-panel-card-link-item:focus .m-panel-card-link-item__index::before, a.m-panel-card-link-item:active .m-panel-card-link-item__index::before { --bg: #92aaac; background-color: var(--bg); } a.m-panel-card-link-item:hover .m-panel-card-link-item__index::after, a.m-panel-card-link-item:focus .m-panel-card-link-item__index::after, a.m-panel-card-link-item:active .m-panel-card-link-item__index::after { --border: #ffffff; border-top-color: var(--border); border-right-color: var(--border); } a.m-panel-card-link-item:hover .m-panel-card-link-item__img, a.m-panel-card-link-item:focus .m-panel-card-link-item__img, a.m-panel-card-link-item:active .m-panel-card-link-item__img { opacity: 0.9; } /* .m-panel-lyt ----------------------------------------------- */ .m-panel-lyt { max-width: 1280px; margin: 35px auto 0; } .m-panel-lyt__list { display: grid; grid-template-rows: 1fr; gap: 38px; } .m-panel-lyt__item { width: 100%; } .m-panel-lyt__item > *:first-child { margin-top: 0; } /* .m-panel-card-link-item-02 ----------------------------------------------- */ .m-panel-card-link-item-02 { display: flex; margin-top: 20px; padding: 25px 20px 20px; border-radius: 8px; box-shadow: 0 0 24px rgba(51, 51, 51, 0.16); } html[data-script-enabled=true] .m-panel-card-link-item-02 { height: 100%; } html[data-script-enabled=true] .uq-top-solution-carousel .m-panel-card-link-item-02 { box-shadow: 0 0 24px rgba(51, 51, 51, 0); } .m-panel-card-link-item-02__label { margin-bottom: 16px; } .m-panel-card-link-item-02__label-inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 8px; } .m-panel-card-link-item-02__label-type { padding: 2px 32px; border: 1px solid #00a5c0; border-radius: 4px; background-color: #ffffff; color: #00a5c0; font-size: 1.2rem; } .m-panel-card-link-item-02__label-new { padding: 2px 15px; border: 1px solid #00a5c0; border-radius: 4px; background-color: #00a5c0; color: #ffffff; font-size: 1.2rem; } .m-panel-card-link-item-02__title-inner { position: relative; color: #333333; font-weight: 700; font-size: 1.8rem; line-height: 1.4; transition: color 0.3s; } .m-panel-card-link-item-02__title-inner::before { display: inline-block; position: absolute; right: -24px; bottom: 2px; width: 17px; height: 17px; background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/icon-allow-right-01.svg"); background-size: contain; background-repeat: no-repeat; content: ""; transition: background-image 0.3s; } .m-panel-card-link-item-02__title-inner:hover, .m-panel-card-link-item-02__title-inner:focus, .m-panel-card-link-item-02__title-inner:active { color: #92aaac; } .m-panel-card-link-item-02__title-inner:hover::before, .m-panel-card-link-item-02__title-inner:focus::before, .m-panel-card-link-item-02__title-inner:active::before { background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/icon-allow-right-01-hover.svg"); } .m-panel-card-link-item-02__contents { margin-top: 20px; } .m-panel-card-link-item-02__contents > *:first-child { margin-top: 0; } .m-panel-card-link-item-02__contents p { font-size: 1.4rem; } .m-panel-card-link-item-02__img-inner { width: 100%; overflow: hidden; border: 5px solid #ffffff; border-radius: 8px; box-shadow: 0 0 24px rgba(51, 51, 51, 0.16); } .m-panel-card-link-item-02__img-inner > img { width: 100%; } /* ---------------------------------------------------------------- Icon (.m-icon[-*]) ----------------------------------------------------------------- */ /* .m-icon ----------------------------------------------- */ .m-icon { position: relative; top: 0; margin-left: 3px; vertical-align: baseline; } .m-icon--pdf { top: 3px; width: 17px; } .m-icon--excel { top: 2px; width: 16px; } /* .m-icon-label ----------------------------------------------- */ .m-icon-label { --bg: #d9e7e9; --border: #d9e7e9; display: inline-block; min-width: 140px; padding: 3px 18px; border: 1px solid var(--border); background-color: var(--bg); color: #06363e; font-size: 1.2rem; line-height: 1.5; text-align: center; } .m-icon-label--pattern-02 { --bg: #ffffff; --border: #526366; } .str-header__main.is-active .str-header__hamburger-text { border-top: solid 2px transparent; border-bottom: solid 2px transparent; } .str-header__main.is-active .str-header__hamburger-text::before { transform: translate(0, -50%) rotate(45deg); } .str-header__main.is-active .str-header__hamburger-text::after { transform: translate(0, -50%) rotate(-45deg); } /* ---------------------------------------------------------------- Function Carousel (.fn-carousel[-*]) ----------------------------------------------------------------- */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .fn-carousel-list { display: flex; flex-wrap: wrap; } .fn-carousel-list.is-ready { flex-wrap: nowrap; } .fn-carousel-list.is-animate { transition: transform 0.5s ease; will-change: transform; } .fn-carousel-list.is-swipe { transition: all 0.3s ease; will-change: transform; } .fn-carousel-list.is-update { transition: none !important; } .fn-carousel-item { width: 100%; } .fn-carousel-item.is-hidden { z-index: -1; animation: fade-out 0.3s forwards ease; } .fn-carousel-item.is-show { z-index: 0; animation: fade-in 0.3s forwards ease; } /* ---------------------------------------------------------------- Carousel (.m-carousel[-*]) ----------------------------------------------------------------- */ /* .m-carousel ----------------------------------------------- */ .m-carousel { position: relative; margin-top: 35px; border-radius: 8px; background-color: #e4eff1; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .m-carousel__title { display: inline-block; min-width: 206px; padding: 10px 20px; border-top-left-radius: 8px; border-bottom-right-radius: 15px; background-color: #00a5c0; } .m-carousel__title-text { display: block; color: #ffffff; font-size: 1.6rem; text-align: center; } .m-carousel__item { padding: 0 19px; } .m-carousel__item > *:first-child { margin-top: 0; } .m-carousel__inner-wrapper { position: relative; width: 81.4492753623%; margin: 0 auto; } .m-carousel__inner { margin: 0 auto 17px; padding: 15px 0 27px; overflow-x: hidden; } html:not([data-script-enabled=true]) .m-carousel__list { gap: 38px 0; } .m-carousel__ui-prev, .m-carousel__ui-next { position: absolute; top: 0; bottom: 0; width: 30px; height: 30px; margin: auto 0; } .m-carousel__ui-prev { left: -25px; } .m-carousel__ui-next { right: -25px; } .m-carousel__ui-prev-btn, .m-carousel__ui-next-btn { position: relative; width: 100%; height: 100%; border: 1px solid #92aaac; border-radius: 50%; background-color: #e4eff1; cursor: pointer; transition: background-color 0.3s; } .m-carousel__ui-prev-btn::before, .m-carousel__ui-next-btn::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: ""; } .m-carousel__ui-prev-btn:hover, .m-carousel__ui-prev-btn:focus, .m-carousel__ui-prev-btn:active, .m-carousel__ui-next-btn:hover, .m-carousel__ui-next-btn:focus, .m-carousel__ui-next-btn:active { background-color: #92aaac; } .m-carousel__ui-prev-btn:hover::before, .m-carousel__ui-prev-btn:focus::before, .m-carousel__ui-prev-btn:active::before, .m-carousel__ui-next-btn:hover::before, .m-carousel__ui-next-btn:focus::before, .m-carousel__ui-next-btn:active::before { border-color: #ffffff; } .m-carousel__ui-prev-btn::before { left: 4px; width: 7px; height: 7px; transform: rotate(45deg); border-bottom: 1px solid #06363E; border-left: 1px solid #06363E; } .m-carousel__ui-next-btn::before { right: 4px; width: 7px; height: 7px; transform: rotate(45deg); border-top: 1px solid #06363E; border-right: 1px solid #06363E; } .m-carousel__ui-prev-btn-text, .m-carousel__ui-next-btn-text, .m-carousel__ui-play-label, .m-carousel__ui-indicator-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px; overflow: hidden; } .m-carousel__ui-indicator { display: flex; position: absolute; right: 0; bottom: -17px; left: 0; justify-content: center; max-width: fit-content; margin: auto; padding: 8px 10px 7px 27px; gap: 19px; border-radius: 30px; background-color: #ffffff; } .m-carousel__ui-indicator-list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .m-carousel__ui-indicator-item { position: relative; width: 5px; height: 5px; } .m-carousel__ui-indicator-btn { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #92aaac; cursor: pointer; } .m-carousel__ui-indicator-btn[aria-checked=true] { transform: scale(2); background-color: #00a5c0; } .m-carousel__ui-play { position: relative; flex-shrink: 0; width: 19px; height: 19px; border: 1px solid #92aaac; border-radius: 50%; background-color: #ffffff; cursor: pointer; transition: background-color 0.3s; } .m-carousel__ui-play:hover, .m-carousel__ui-play:focus, .m-carousel__ui-play:active { background-color: #92aaac; } .m-carousel__ui-play:not(.is-pause)::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 5px; height: 6px; margin: auto; border-right: 1px solid #92aaac; border-left: 1px solid #92aaac; content: ""; } .m-carousel__ui-play:not(.is-pause):hover::before, .m-carousel__ui-play:not(.is-pause):focus::before, .m-carousel__ui-play:not(.is-pause):active::before { border-right-color: #ffffff; border-left-color: #ffffff; } .m-carousel__ui-play.is-pause::before { display: block; position: absolute; top: 6px; left: 4px; width: 0; height: 0; transform: rotate(28deg); border-top: 7px solid #92aaac; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } .m-carousel__ui-play.is-pause:hover::before, .m-carousel__ui-play.is-pause:focus::before, .m-carousel__ui-play.is-pause:active::before { border-top-color: #ffffff; } /* .m-carousel-02 ----------------------------------------------- */ .m-carousel-02 { position: relative; margin-top: 45px; } .m-carousel-02__title { margin-bottom: 10px; font-weight: 400; font-size: 2rem; text-align: center; } .m-carousel-02__item { padding: 0 5px; } .m-carousel-02__inner-wrapper { position: relative; width: 84.0579710145%; max-width: 570px; margin: 0 auto; } .m-carousel-02__inner { overflow-x: hidden; } html:not([data-script-enabled=true]) .m-carousel-02__list { gap: 20px 0; } .m-carousel-02__item-inner { display: block; height: 100%; background-color: #ffffff; color: #333333; } .m-carousel-02__item-inner:hover .m-carousel-02__item-text-link::before, .m-carousel-02__item-inner:focus .m-carousel-02__item-text-link::before, .m-carousel-02__item-inner:active .m-carousel-02__item-text-link::before { background-color: #92aaac; } .m-carousel-02__item-inner:hover .m-carousel-02__item-text-link::after, .m-carousel-02__item-inner:focus .m-carousel-02__item-text-link::after, .m-carousel-02__item-inner:active .m-carousel-02__item-text-link::after { border-top-color: #ffffff; border-right-color: #ffffff; } .m-carousel-02__item-figure { display: block; position: relative; } .m-carousel-02__item-img { display: block; position: relative; aspect-ratio: 2.642/1; overflow: hidden; } .m-carousel-02__item-img > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .m-carousel-02__item-index { display: block; position: relative; padding: 8px 8px 8px 0; } .m-carousel-02__item-text-link { display: inline-block; position: relative; padding-right: 27px; font-size: 1.4rem; line-height: 1.6; } .m-carousel-02__item-text-link::before { display: block; position: absolute; top: 3px; right: 0; bottom: 8px; width: 19px; height: 19px; border: 1px solid #92aaac; border-radius: 50%; background-color: transparent; content: ""; transition: background-color 0.3s; } .m-carousel-02__item-text-link::after { display: block; position: absolute; top: 10px; right: 8px; bottom: 15px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid #92aaac; border-right: 1px solid #92aaac; content: ""; } .m-carousel-02__ui-prev, .m-carousel-02__ui-next { position: absolute; top: -45px; bottom: 0; width: 30px; height: 30px; margin: auto 0; } .m-carousel-02__ui-prev { left: -35px; } .m-carousel-02__ui-next { right: -35px; } .m-carousel-02__ui-prev-btn, .m-carousel-02__ui-next-btn { position: relative; width: 100%; height: 100%; border: 1px solid #92aaac; border-radius: 50%; background-color: #e4eff1; cursor: pointer; transition: background-color 0.3s; } .m-carousel-02__ui-prev-btn::before, .m-carousel-02__ui-next-btn::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: ""; } .m-carousel-02__ui-prev-btn:hover, .m-carousel-02__ui-prev-btn:focus, .m-carousel-02__ui-prev-btn:active, .m-carousel-02__ui-next-btn:hover, .m-carousel-02__ui-next-btn:focus, .m-carousel-02__ui-next-btn:active { background-color: #92aaac; } .m-carousel-02__ui-prev-btn:hover::before, .m-carousel-02__ui-prev-btn:focus::before, .m-carousel-02__ui-prev-btn:active::before, .m-carousel-02__ui-next-btn:hover::before, .m-carousel-02__ui-next-btn:focus::before, .m-carousel-02__ui-next-btn:active::before { border-color: #ffffff; } .m-carousel-02__ui-prev-btn::before { left: 4px; width: 7px; height: 7px; transform: rotate(45deg); border-bottom: 1px solid #06363E; border-left: 1px solid #06363E; } .m-carousel-02__ui-next-btn::before { right: 4px; width: 7px; height: 7px; transform: rotate(45deg); border-top: 1px solid #06363E; border-right: 1px solid #06363E; } .m-carousel-02__ui-prev-btn-text, .m-carousel-02__ui-next-btn-text, .m-carousel-02__ui-play-label, .m-carousel-02__ui-indicator-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px; overflow: hidden; } .m-carousel-02__ui-indicator { display: flex; justify-content: center; max-width: fit-content; margin: 15px auto 0; padding: 8px 10px 7px 27px; gap: 19px; border-radius: 30px; background-color: #ffffff; } .m-carousel-02__ui-indicator-list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .m-carousel-02__ui-indicator-item { position: relative; width: 5px; height: 5px; } .m-carousel-02__ui-indicator-btn { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #92aaac; cursor: pointer; } .m-carousel-02__ui-indicator-btn[aria-checked=true] { transform: scale(2); background-color: #00a5c0; } .m-carousel-02__ui-play { position: relative; flex-shrink: 0; width: 19px; height: 19px; border: 1px solid #92aaac; border-radius: 50%; background-color: #ffffff; cursor: pointer; transition: background-color 0.3s; } .m-carousel-02__ui-play:hover, .m-carousel-02__ui-play:focus, .m-carousel-02__ui-play:active { background-color: #92aaac; } .m-carousel-02__ui-play:hover .m-carousel-02__ui-play-icon, .m-carousel-02__ui-play:focus .m-carousel-02__ui-play-icon, .m-carousel-02__ui-play:active .m-carousel-02__ui-play-icon { border-color: #ffffff; } .m-carousel-02__ui-play:not(.is-pause)::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 5px; height: 6px; margin: auto; border-right: 1px solid #92aaac; border-left: 1px solid #92aaac; content: ""; } .m-carousel-02__ui-play:not(.is-pause):hover::before, .m-carousel-02__ui-play:not(.is-pause):focus::before, .m-carousel-02__ui-play:not(.is-pause):active::before { border-right-color: #ffffff; border-left-color: #ffffff; } .m-carousel-02__ui-play.is-pause::before { display: block; position: absolute; top: 6px; left: 4px; width: 0; height: 0; transform: rotate(28deg); border-top: 7px solid #92aaac; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } .m-carousel-02__ui-play.is-pause:hover::before, .m-carousel-02__ui-play.is-pause:focus::before, .m-carousel-02__ui-play.is-pause:active::before { border-top-color: #ffffff; } /* .m-carousel-col1-current-number ----------------------------------------------- */ .m-carousel-col1-current-number { max-width: 1280px; border-radius: 8px; background-color: #ffffff; } .m-carousel-col1-current-number__contents { border-radius: 8px; } html[data-script-enabled=true] .m-carousel-col1-current-number__contents { overflow-x: hidden; } .m-carousel-col1-current-number__list { gap: 20px; } html[data-script-enabled=true] .m-carousel-col1-current-number__list { gap: 0; } .m-carousel-col1-current-number__item { width: 100%; } .m-carousel-col1-current-number__item > *:first-child { margin-top: 0; } .m-carousel-col1-current-number__indicator { display: flex; justify-content: center; padding-bottom: 20px; } .m-carousel-col1-current-number__indicator-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; } .m-carousel-col1-current-number__number { position: relative; width: 36px; height: 43px; } .m-carousel-col1-current-number__number::before { display: block; position: absolute; bottom: 15px; left: 50%; width: 30px; height: 1px; transform: translateX(-50%) rotate(-45deg); background-color: #333333; content: ""; } .m-carousel-col1-current-number__number-molecule { position: absolute; top: -6px; left: 3px; font-size: 2.3rem; } .m-carousel-col1-current-number__number-denominator { position: absolute; right: 6px; bottom: 0; font-size: 1.3rem; } .m-carousel-col1-current-number__btn-btn { display: block; z-index: 1; position: relative; width: 25px; height: 25px; border: 1px solid #92aaac; border-radius: 50%; background-color: #ffffff; transition: all 0.3s; } .m-carousel-col1-current-number__btn-btn::before { --border: #92aaac; display: block; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; transform: rotate(45deg); transform: translate(calc(-50% + 2px), -50%) rotate(45deg); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); content: ""; transition: all 0.3s; } .m-carousel-col1-current-number__btn-btn:hover, .m-carousel-col1-current-number__btn-btn:focus, .m-carousel-col1-current-number__btn-btn:active { transform: rotate(0deg); background-color: #92aaac; } .m-carousel-col1-current-number__btn-btn:hover::before, .m-carousel-col1-current-number__btn-btn:focus::before, .m-carousel-col1-current-number__btn-btn:active::before { --border: #ffffff; } .m-carousel-col1-current-number__btn--next .m-carousel-col1-current-number__btn-btn::before { transform: translate(calc(-50% - 2px), -50%) rotate(225deg); } .m-carousel-col1-current-number__btn-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------------- Function Modal Carousel (.fn-modal-carousel-target[-*]) ----------------------------------------------------------------- */ html[data-script-enabled=true] .fn-modal-carousel-target { display: none; z-index: 7000; position: fixed; top: 0; left: 0; align-items: center; width: 100%; height: 100%; padding: 40px 0; overflow: auto; background-color: rgba(82, 99, 102, 0.4); opacity: 0; transition: opacity 0.2s; } html[data-script-enabled=true] .fn-modal-carousel-target.is-open { display: flex; } .fn-modal-carousel-target-inner { position: relative; width: 100%; background-color: #ffffff; } .fn-modal-carousel-target-contents { overflow: hidden; } .fn-modal-carousel-target-list { display: flex; flex-wrap: wrap; } .fn-modal-carousel-target-list.is-ready { flex-wrap: nowrap; } .fn-modal-carousel-target-list.is-animate { transition: transform 0.3s ease; will-change: transform; } .fn-modal-carousel-target-list.is-swipe { transition: all 0.3s ease; will-change: transform; } .fn-modal-carousel-target-list.is-update { transition: none !important; } .fn-modal-carousel-target-item { width: 100%; } /* ---------------------------------------------------------------- Modal Carousel (.m-modal-carousel[-*]) ----------------------------------------------------------------- */ /* .m-modal-carousel ----------------------------------------------- */ .m-modal-carousel__inner { position: relative; width: calc(100% - 40px); margin: auto; padding: 35px 50px 25px; border: 1px solid #92aaac; border-radius: 4px; } .m-modal-carousel__inner:focus { outline: none; } .m-modal-carousel__contents > *:first-child { margin-top: 0; } .m-modal-carousel__item { padding: 0 1px; } .m-modal-carousel__item > *:first-child { margin-top: 0; } .m-modal-carousel__item .m-lyt-media { align-items: center; height: 100%; } .m-modal-carousel__item .m-lyt-media__img { position: relative; } .m-modal-carousel__item .m-lyt-media__img img { width: auto; height: 100%; } .m-modal-carousel__close-btn { position: absolute; top: 10px; right: 10px; width: 25px; height: 25px; background-color: transparent; cursor: pointer; } .m-modal-carousel__close-btn::before, .m-modal-carousel__close-btn::after { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 18px; height: 2px; margin: auto; background-color: #06363e; content: ""; } .m-modal-carousel__close-btn::before { transform: rotate(45deg); } .m-modal-carousel__close-btn::after { transform: rotate(-45deg); } .m-modal-carousel__close-btn-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px; overflow: hidden; } .m-modal-carousel__ui-number { position: relative; width: 36px; height: 43px; } .m-modal-carousel__ui-number::before { display: block; position: absolute; bottom: 15px; left: 50%; width: 30px; height: 1px; transform: translateX(-50%) rotate(-45deg); background-color: #333333; content: ""; } .m-modal-carousel__ui-number-molecule { display: inline-block; position: absolute; top: 3px; left: -6px; min-width: 1.5em; font-size: 1.6rem; text-align: center; } .m-modal-carousel__ui-number-denominator { position: absolute; right: 3px; bottom: 0; font-size: 1rem; } .m-modal-carousel__ui-prev, .m-modal-carousel__ui-next { position: absolute; top: 40%; width: 30px; height: 30px; } .m-modal-carousel__ui-prev { left: 10px; } .m-modal-carousel__ui-next { right: 10px; } .m-modal-carousel__ui-prev-btn, .m-modal-carousel__ui-next-btn { position: relative; width: 100%; height: 100%; border: 1px solid #92aaac; border-radius: 50%; background-color: #ffffff; cursor: pointer; transition: background-color 0.3s; } .m-modal-carousel__ui-prev-btn::before, .m-modal-carousel__ui-next-btn::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: ""; } .m-modal-carousel__ui-prev-btn:hover, .m-modal-carousel__ui-prev-btn:focus, .m-modal-carousel__ui-prev-btn:active, .m-modal-carousel__ui-next-btn:hover, .m-modal-carousel__ui-next-btn:focus, .m-modal-carousel__ui-next-btn:active { background-color: #92aaac; } .m-modal-carousel__ui-prev-btn:hover::before, .m-modal-carousel__ui-prev-btn:focus::before, .m-modal-carousel__ui-prev-btn:active::before, .m-modal-carousel__ui-next-btn:hover::before, .m-modal-carousel__ui-next-btn:focus::before, .m-modal-carousel__ui-next-btn:active::before { border-color: #ffffff; } .m-modal-carousel__ui-prev-btn::before { left: 4px; width: 7px; height: 7px; transform: rotate(45deg); border-bottom: 1px solid #06363E; border-left: 1px solid #06363E; } .m-modal-carousel__ui-next-btn::before { right: 4px; width: 7px; height: 7px; transform: rotate(45deg); border-top: 1px solid #06363E; border-right: 1px solid #06363E; } .m-modal-carousel__ui-prev-btn-text, .m-modal-carousel__ui-next-btn-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------------- Function Tab (.fn-tab[-*]) ----------------------------------------------------------------- */ /* .fn-tab ----------------------------------------------- */ .fn-tab, .fn-tab-parent-panel { opacity: 1; transition: all 0.3s; } .fn-tab[hidden], .fn-tab-parent-panel[hidden] { display: block; visibility: hidden; height: 0; overflow: hidden; transform: translateX(5px); opacity: 0; } /* ---------------------------------------------------------------- Tab (.m-tab[-*]) ----------------------------------------------------------------- */ /* .m-tab ----------------------------------------------- */ .m-tab { margin-top: 30px; } .m-tab__list { display: flex; flex-wrap: wrap; padding: 25px 20px; gap: 20px 15px; background-color: #f2f8f9; } .m-tab__item:not(:last-of-type) { position: relative; padding-right: 15px; } .m-tab__item:not(:last-of-type)::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; height: 27px; margin: auto 0; background-color: #92aaac; content: ""; } .m-tab__btn { display: inline-block; position: relative; color: #333333; font-size: 1.4rem; line-height: 1.6; } .m-tab__btn::before { display: block; visibility: hidden; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #00a5c0; content: ""; opacity: 0; transition: opacity 0.3s; } .m-tab__btn[aria-selected=true] { font-weight: 700; } .m-tab__btn[aria-selected=true]::before { visibility: visible; opacity: 1; } .m-tab__btn:not([aria-selected=true]):hover, .m-tab__btn:not([aria-selected=true]):focus, .m-tab__btn:not([aria-selected=true]):active { text-decoration: underline; } .m-tab__contents > *:first-child, .m-tab__panel > *:first-child { margin-top: 0; } .m-tab__contents { margin-top: 35px; } /* .m-tab-parent ----------------------------------------------- */ .m-tab-parent { margin-top: 30px; } .m-tab-parent__list { display: flex; justify-content: center; gap: 0 7px; border-bottom: 4px solid #00a5c0; } .m-tab-parent__item { width: 31.884057971%; } .m-tab-parent__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 14px 13px 12px; border-radius: 4px 4px 0 0; background-color: #d9e7e9; color: #526366; font-weight: 700; font-size: 1.4rem; line-height: 1.6; text-align: center; transition: background-color 0.3s; } .m-tab-parent__btn[aria-selected=true] { background-color: #00a5c0; color: #ffffff; } .m-tab-parent__btn:not([href]) { background-color: #e9e9e9; color: #bdbdbd; } .m-tab-parent__contents > *:first-child, .m-tab-parent__panel > *:first-child { margin-top: 0; } .m-tab-parent__contents { margin-top: 20px; } /* ---------------------------------------------------------------- Function Scroll Icon (.fn-icon-scroll[-*]) ----------------------------------------------------------------- */ /* .fn-icon-scroll ----------------------------------------------- */ .fn-icon-scroll { position: relative; } .fn-icon-scroll-span { display: none; z-index: 5; position: absolute; top: 50%; left: 50%; width: 128px; height: 128px; transform: translate(-50%, -50%); transition: all 0.2s ease; } [data-script-enabled] .fn-icon-scroll-span { display: block; } .fn-icon-scroll-span.is-animate { opacity: 0; } .fn-icon-scroll-icon { width: 100%; height: auto; } /* ---------------------------------------------------------------- Function Toggle (.fn-toggle[-*]) ----------------------------------------------------------------- */ /* .fn-toggle ----------------------------------------------- */ .fn-toggle-contents { visibility: visible; overflow: hidden; transition: height 0.4s, visibility 0.4s; } html[data-script-enabled=true] .fn-toggle-contents:not(.is-open) { display: block !important; visibility: hidden; height: 0 !important; } /* ---------------------------------------------------------------- Toggle (.m-toggle[-*]) ----------------------------------------------------------------- */ /* .m-toggle ----------------------------------------------- */ .m-toggle { display: flex; flex-direction: column; margin-top: 30px; gap: 10px; } .m-toggle__item { border: 1px solid #d9e7e9; border-radius: 4px; } .m-toggle__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .m-toggle__title-text { font-size: 1.5rem; line-height: 1.6; } .m-toggle__title-text a { padding-left: 24px; transition: color 0.3s; } .m-toggle__title-text a::before { display: block; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .m-toggle__title-text a::after { --border: #ffffff; display: block; position: absolute; top: 9px; left: 4px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .m-toggle__title-text a:hover, .m-toggle__title-text a:focus, .m-toggle__title-text a:active { --color: #0066c0; } .m-toggle__title-text-inner { --bg: #0066c0; --border: #0066c0; --color: #333333; display: block; position: relative; color: var(--color); font-size: 1.4rem; } .m-toggle__title-sub { display: block; margin-top: 2px; color: #333333; font-size: 1.2rem; } .m-toggle__btn-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px; overflow: hidden; } .m-toggle__btn { display: block; position: relative; flex-shrink: 0; width: 26px; height: 25px; border-radius: 4px; background-color: #00a5c0; } .m-toggle__btn::before, .m-toggle__btn::after { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: #ffffff; content: ""; transition: transform 0.4s; } .m-toggle__btn::before { width: 2px; height: 10px; } .m-toggle__btn::after { width: 10px; height: 2px; } .m-toggle__btn[aria-expanded=true]::before { transform: rotate(90deg); } html:not([data-script-enabled=true]) .m-toggle__btn { display: none; } .m-toggle__title-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px; gap: 10px; border-radius: 4px; background-color: #f2f8f9; text-align: left; } .m-toggle__title-inner[aria-expanded=true] .m-toggle__btn::before { transform: rotate(90deg); } .m-toggle__contents-inner { padding: 20px; background-color: #ffffff; } .m-toggle__contents-inner > *:first-child { margin-top: 0; } /* ---------------------------------------------------------------- Function Modal (.fn-modal[-*]) ----------------------------------------------------------------- */ /* .fn-modal ----------------------------------------------- */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } html[data-script-enabled=true] .fn-modal { display: none; z-index: 7000; position: fixed; top: 0; left: 0; align-items: center; width: 100%; height: 100%; padding: 40px 15px; overflow: auto; background-color: rgba(82, 99, 102, 0.4); opacity: 0; } html[data-script-enabled=true] .fn-modal.is-open { display: flex; } html[data-script-enabled=true] .fn-modal[data-show=true] { animation: fade-in 0.3s forwards ease; } html[data-script-enabled=true] .fn-modal[data-show=false] { animation: fade-out 0.3s ease; } .fn-modal-inner { position: relative; width: 100%; background-color: #ffffff; } /* ---------------------------------------------------------------- Modal (.m-modal[-*]) ----------------------------------------------------------------- */ /* .m-modal ----------------------------------------------- */ .m-modal__inner { max-width: 960px; margin: auto; padding: 35px 25px 25px; border: 1px solid #92aaac; border-radius: 4px; } .m-modal__contents > *:first-child { margin-top: 0; } .m-modal__close-btn { position: absolute; top: 10px; right: 10px; width: 25px; height: 25px; background-color: transparent; cursor: pointer; } .m-modal__close-btn::before, .m-modal__close-btn::after { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 18px; height: 2px; margin: auto; background-color: #06363e; content: ""; } .m-modal__close-btn::before { transform: rotate(45deg); } .m-modal__close-btn::after { transform: rotate(-45deg); } .m-modal__close-btn-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------------- Function ShowMore (.fn-show-more[-*]) ----------------------------------------------------------------- */ /* .fn-show-more ----------------------------------------------- */ @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } html[data-script-enabled=true] .fn-show-more-list .fn-hidden-content { display: none; } html[data-script-enabled=true] .fn-show-more-list .fn-hidden-content.is-show { animation: fade-out 0.3s forwards ease; } /* ---------------------------------------------------------------- Function Ir Chart (.m-lyt-iframe[-*]) ----------------------------------------------------------------- */ /* .m-lyt-iframe ----------------------------------------------- */ .m-lyt-iframe { margin-top: 60px; } .m-lyt-iframe__chart { width: 100%; height: 720px; } [data-script-enabled=true] .fn-fade { transform: translateY(20px); opacity: 0; } [data-script-enabled=true] .fn-fade.is-active { transform: translateY(0); opacity: 1; transition: all 0.8s; } [data-script-enabled=true] .fn-fade-h1 { transform: translateY(10px); opacity: 0; } [data-script-enabled=true] .fn-fade-h1.is-active { transform: translateY(0); opacity: 1; transition: all 0.8s; } [data-script-enabled=true] .fn-fade-delay { transform: translateY(20px); opacity: 0; } [data-script-enabled=true] .fn-fade-delay.is-active { transform: translateY(0); opacity: 1; transition: all 0.5s 0.8s; } /* .a11y-hidden：視覚的に隠したい要素がある場合に指定する調整クラス ----------------------------------------------- */ .a11y-hidden { clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px; overflow: hidden; } /* .align-* ----------------------------------------------- */ .align-r { text-align: right !important; } .align-c { text-align: center !important; } .align-l { text-align: left !important; } /* .valign-* ----------------------------------------------- */ .valign-t { vertical-align: top !important; } .valign-m { vertical-align: middle !important; } .valign-b { vertical-align: bottom !important; } /* .w-50 / .w-sp-50：幅調整 ----------------------------------------------- */ .w-5 { width: 5% !important; } .w-10 { width: 10% !important; } .w-15 { width: 15% !important; } .w-20 { width: 20% !important; } .w-25 { width: 25% !important; } .w-30 { width: 30% !important; } .w-35 { width: 35% !important; } .w-40 { width: 40% !important; } .w-45 { width: 45% !important; } .w-50 { width: 50% !important; } .w-33-3 { width: 33.3% !important; } /* .sp-hide .pc-hide：PC/SP表示調整 ----------------------------------------------- */ .mt-40 { margin-top: 40px; } /* ---------------------------------------------------------------- Table (.m-tbl[-*]) ----------------------------------------------------------------- */ /* .m-tbl ----------------------------------------------- */ .m-tbl { margin-top: 10px; } .m-tbl__inner { overflow-x: auto; } .m-tbl__tbl { width: 100%; } .m-tbl th, .m-tbl td { border: 1px solid #dddddd; font-size: 1.8rem; text-align: left; } .m-tbl th > *:first-child, .m-tbl td > *:first-child { margin-top: 0; } .m-tbl th { padding: 12px 16px; background-color: #f1f1f1; font-weight: 700; } .m-tbl th.m-tbl__th--bg-color-blue { background-color: #e4eff1; } .m-tbl th.m-tbl__th--bg-color-green { background-color: #e4f1e4; } .m-tbl th.m-tbl__th--bg-color-red { background-color: #f1e4e4; } .m-tbl th.m-tbl__th--bg-color-dark-green { background-color: #92aaac; color: #ffffff; } .m-tbl td { padding: 20px 16px; font-weight: 400; } .m-tbl td.m-tbl__th--bg-color-blue { background-color: #e4eff1; } .m-tbl td.m-tbl__th--bg-color-green { background-color: #e4f1e4; } .m-tbl td.m-tbl__th--bg-color-red { background-color: #f1e4e4; } .m-tbl td.m-tbl__th--bg-color-dark-green { background-color: #92aaac; color: #ffffff; } .m-tbl__th, .m-tbl thead td { padding: 12px 16px; background-color: #f1f1f1; font-weight: 700; } .m-tbl__title { margin: 0 0 20px; font-size: 2rem; text-align: left; } .m-tbl__caption { margin: 0 0 20px; font-size: 1.6rem; text-align: right; } .m-tbl__icon { vertical-align: middle; } .m-tbl--cell-bg-color-even tbody tr th { font-weight: 400; } .m-tbl--cell-bg-color-even tbody tr:nth-child(odd) th { background-color: #ffffff; font-weight: 400; } .m-tbl--cell-bg-color-even tbody tr:nth-child(even) th, .m-tbl--cell-bg-color-even tbody tr:nth-child(even) td { background-color: #f5f9f9; } /* .m-tbl-sp-break ----------------------------------------------- */ .m-tbl-sp-break { width: 100%; margin-top: 10px; } .m-tbl-sp-break__tbl { width: 100%; } .m-tbl-sp-break th { background-color: #f1f1f1; font-weight: 700; } .m-tbl-sp-break th, .m-tbl-sp-break td { padding: 20px 16px; border: 1px solid #dddddd; font-size: 1.6rem; text-align: left; } .m-tbl-sp-break th > *:first-child, .m-tbl-sp-break td > *:first-child { margin-top: 0; } .m-tbl-sp-break__title { margin-bottom: 20px; font-weight: 700; font-size: 2rem; text-align: left; } .m-tbl-sp-break__caption { margin-bottom: 20px; font-size: 1.6rem; text-align: right; } /* ---------------------------------------------------------------- Layout (.m-lyt[-*]) ----------------------------------------------------------------- */ /* .m-lyt-media ----------------------------------------------- */ .m-lyt-media { display: grid; grid-template-rows: 1fr; margin-top: 40px; gap: 40px; } .m-lyt-media--flex-start { justify-content: flex-start; } .m-lyt-media__img { display: flex; justify-content: center; max-width: 1000px; margin: 0 auto; } .m-lyt-media__img--max-content { max-width: max-content; } .m-lyt-media__img--movie { position: relative; aspect-ratio: 16/9; max-width: 820px; margin: 0 auto; } .m-lyt-media__img--movie > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .m-lyt-media__contents { margin-top: 12px; } .m-lyt-media__contents > *:first-child { margin-top: 0; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation .m-lyt-media__item:nth-child(3n-1) .m-lyt-media__contents { position: relative; margin-top: 0; padding-top: 35px; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation .m-lyt-media__item:nth-child(3n-1) .m-lyt-media__contents::before { display: block; position: absolute; top: 0; right: 0; left: 5px; width: 26px; height: 31px; margin: 0 auto; background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/icon-flow-01.svg"); background-size: cover; background-repeat: no-repeat; content: ""; } .m-lyt-flow .m-lyt-media[data-col-wide="2"], .m-lyt-flow .m-lyt-media[data-col-wide="3"], .m-lyt-flow .m-lyt-media[data-col-wide="4"] { gap: 45px; } .m-lyt-media__caption { font-size: 1.4rem; text-align: center; } /* .m-lyt-map ----------------------------------------------- */ .m-lyt-map { margin-top: 10px; } .m-lyt-map__iframe { position: relative; aspect-ratio: 1/1; } .m-lyt-map__iframe > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .m-lyt-map__bottom { margin-top: 10px; } .m-lyt-map__bottom > *:first-child { margin-top: 0; } /* .m-lyt-grid ----------------------------------------------- */ .m-lyt-grid { display: grid; grid-template-rows: 1fr; margin-top: 40px; gap: 40px; } .m-lyt-grid__item > *:first-child { margin-top: 0; } /* .m-lyt-media-index ----------------------------------------------- */ .m-lyt-media-index { margin-top: 40px; } .m-lyt-media-index__contents { width: 100%; } .m-lyt-media-index__contents > *:first-child { margin-top: 0; } .m-lyt-media-index__inner { display: flex; flex-direction: column-reverse; gap: 25px; } .m-lyt-media-index__inner--reverse-pc { flex-direction: column; } /* .m-lyt-hdg-contents ----------------------------------------------- */ .m-lyt-hdg-contents { display: grid; grid-template-rows: 1fr; grid-template-columns: 100%; margin-top: 40px; gap: 30px; } .m-lyt-hdg-contents__title { padding-bottom: 10px; border-bottom: 4px solid; border-image: linear-gradient(90deg, #00a5c0 0%, #008ac0 55.65%, #0066c0 100%) 1/0 0 4px; } .m-lyt-hdg-contents__title-text { display: block; font-size: 2rem; line-height: 1.6; } .m-lyt-hdg-contents__contents { margin-top: 15px; } .m-lyt-hdg-contents__contents > *:first-child { margin-top: 0; } /* .m-lyt-icon-label ----------------------------------------------- */ .m-lyt-icon-label { display: flex; flex-wrap: wrap; gap: 15px; } /* .m-lyt-flow ----------------------------------------------- */ .m-lyt-flow { display: flex; flex-direction: column; margin-top: 40px; gap: 43px 0; } .m-lyt-flow > *:first-child { margin-top: 0; } .m-lyt-flow__item { position: relative; } .m-lyt-flow__item > *:first-child { margin-top: 0; } .m-lyt-flow__item:not(:last-child) { position: relative; } .m-lyt-flow__item:not(:last-child)::before { display: block; position: absolute; right: 0; bottom: -40px; left: 0; width: 26px; height: 31px; margin: 0 auto; transform: rotate(90deg); background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/icon-flow-01.svg"); background-size: cover; background-repeat: no-repeat; content: ""; } /* ---------------------------------------------------------------- Form (.m-form[-*]) ----------------------------------------------------------------- */ /* .m-form-select ----------------------------------------------- */ .m-form-select { --border: #92aaac; display: inline-block; position: relative; } .m-form-select::before { display: block; position: absolute; top: 2px; right: 15px; bottom: 0; width: 24px; height: 24px; margin: auto; border: 1px solid var(--border); border-radius: 50%; background-color: transparent; content: ""; transition: background-color 0.3s; } .m-form-select::after { display: block; position: absolute; top: -1px; right: 24px; bottom: 0; width: 7px; height: 7px; margin: auto; transform: rotate(45deg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); content: ""; } .m-form-select__select { --padding-block: 10px; -webkit-appearance: none; appearance: none; position: relative; min-width: 140px; padding: var(--padding-block) 50px var(--padding-block) 15px; border: 1px solid #92aaac; background-color: transparent; color: #333333; font-size: 1.4rem; line-height: 1.6; cursor: pointer; } /* .m-form-set ----------------------------------------------- */ .m-form-set { display: flex; align-items: center; margin-top: 20px; gap: 20px; } .m-form-set--flex-end { justify-content: flex-end; } .m-form-set__item { display: block; } .m-form-set__label { font-weight: 400; font-size: 1.4rem; line-height: 1.6; } /* .m-form-search ----------------------------------------------- */ .m-form-search { margin-top: 15px; } .m-form-search__inner { display: flex; } .m-form-search__input { display: block; width: 100%; padding: 20px; border: none; border-radius: 4px 0 0 4px; background-color: #ffffff; box-shadow: 0 0 24px rgba(51, 51, 51, 0.08); color: #333333; font-size: 1.4rem; } .m-form-search__input::placeholder { color: #b9b8b8; } .m-form-search__btn { flex-shrink: 0; width: 60px; border-radius: 0 4px 4px 0; background-color: #00a5c0; } .m-form-search__btn img { width: 20px; } /* .m-form-search-02 ----------------------------------------------- */ .m-form-search-02 { max-width: 840px; margin: 20px auto 0; } .m-form-search-02__inner { display: flex; min-height: 52px; border-radius: 4px; } .m-form-search-02__title { display: flex; position: relative; flex-shrink: 0; align-items: center; margin-top: 0; padding: 10px 10px 10px 12px; border-radius: 4px 0 0 4px; background-color: #f1f1f1; color: #06363e; font-size: 1.2rem; line-height: 1.6; } .m-form-search-02__title::after { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; height: 28px; margin: auto 0; background-color: #92aaac; content: ""; } .m-form-search-02__input { display: block; width: 100%; padding: 12px; border: none; border-radius: 4px 0 0 4px; background-color: #f1f1f1; box-shadow: 0 0 24px rgba(51, 51, 51, 0.08); color: #333333; font-size: 1.4rem; } .m-form-search-02__input::placeholder { color: #b9b8b8; } .m-form-search-02__btn { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 52px; border-radius: 0 4px 4px 0; background-color: #00a5c0; color: #ffffff; } .m-form-search-02__btn-img { display: block; width: 20px; } .m-form-search-02__btn-img img { width: 100%; } /* stylelint-disable no-descending-specificity */ /* ---------------------------------------------------------------- Heading (.uq-top[-*]) ----------------------------------------------------------------- */ /* .uq-top-brand-hdg-lv2 ----------------------------------------------- */ .uq-top-hdg-lv2__inner { color: #333333; line-height: 1.1; } .uq-top-hdg-lv2__title { display: inline-block; position: relative; padding: 0 26px 0 0; font-weight: 700; font-size: 2.4rem; } html[lang=ja] .uq-top-hdg-lv2__title::before { display: block; position: absolute; right: 12px; bottom: 0; width: 1px; height: 15px; transform: rotate(30deg); background-color: #333333; content: ""; } .uq-top-hdg-lv2__sub-title { font-style: italic; font-weight: 400; font-size: 1.2rem; } .uq-top-topics .uq-top-hdg-lv2__inner, .uq-top-company .uq-top-hdg-lv2__inner { color: #ffffff; } html[lang=ja] .uq-top-topics .uq-top-hdg-lv2__title::before, html[lang=ja] .uq-top-company .uq-top-hdg-lv2__title::before { background-color: #ffffff; } /* ---------------------------------------------------------------- #top-body ----------------------------------------------------------------- */ /* .top-main ----------------------------------------------- */ .top-main { overflow-x: hidden; } /* ---------------------------------------------------------------- lyt (.uq-top[-*]) ----------------------------------------------------------------- */ /* .uq-top-mv ----------------------------------------------- */ .uq-top-mv { position: relative; } /* .uq-top-mv-panel ----------------------------------------------- */ .uq-top-mv-panel__list { display: flex; flex-wrap: nowrap; justify-content: center; width: fit-content; gap: 8px; } .uq-top-mv-panel__item { position: relative; border-radius: 8px; background-color: #ffffff; box-shadow: 0 0 14px rgba(0, 0, 0, 0.16); } .uq-top-mv-panel__item::before { display: block; position: absolute; right: 8px; bottom: 8px; width: 14px; height: 14px; border: 1px solid #92aaac; border-radius: 50%; content: ""; transition: all 0.3s; } .uq-top-mv-panel__item::after { --border: #92aaac; display: block; position: absolute; right: 13.5px; bottom: 13px; width: 4px; height: 4px; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; transition: all 0.3s; } .uq-top-mv-panel__item:hover::before, .uq-top-mv-panel__item:focus::before, .uq-top-mv-panel__item:active::before { background-color: #92aaac; } .uq-top-mv-panel__item:hover::after, .uq-top-mv-panel__item:focus::after, .uq-top-mv-panel__item:active::after { --border: #ffffff; } .uq-top-mv-panel__link { display: block; } .uq-top-mv-panel__label { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; border-radius: 8px 8px 0 0; background-color: #f1f1f1; } .uq-top-mv-panel__label-pickup { width: 66px; padding: 5px 0; border-radius: 8px 0 0; background-color: #00a5c0; color: #ffffff; font-style: italic; font-size: 1.3rem; text-align: center; } .uq-top-mv-panel__label-category { width: calc(100% - 66px); padding: 0 10px; color: #526366; font-size: 1.2rem; } .uq-top-mv-panel__contents { display: block; padding: 8px 8px 38px; } .uq-top-mv-panel__contents-img { width: 100%; height: auto; border-radius: 8px; } .uq-top-mv-panel__contents-text { display: block; margin-top: 0; padding: 8px 8px 0; color: #333333; font-size: 1.2rem; } /* .uq-top-news ----------------------------------------------- */ .uq-top-news { position: relative; } .uq-top-news .uq-top-box { margin: 35px 16px; box-shadow: 0 0 0 rgba(51, 51, 51, 0); } .uq-top-news::before { display: block; z-index: -2; position: absolute; left: 0; background-color: #00a5c0; content: ""; } .uq-top-news::after { display: block; z-index: -2; position: absolute; left: 0; background-size: cover; background-repeat: no-repeat; content: ""; } /* .uq-top-topics ----------------------------------------------- */ .uq-top-topics { margin-top: 80px; overflow-x: hidden; } .uq-top-topics__inner { margin: 0 20px; } /* .uq-top-product ----------------------------------------------- */ .uq-top-product { width: 100%; } .uq-top-product__wrap { position: relative; width: 90%; max-width: 1280px; margin: 0 auto; } .uq-top-product__inner { max-width: 1280px; margin-top: 40px; margin-right: 15px; margin-left: 15px; } .uq-top-product__text { margin-top: 12px; font-size: 1.4rem; } .uq-top-product .m-box { background-color: #ffffff; } /* .uq-top-solution ----------------------------------------------- */ /* .uq-top-brand ----------------------------------------------- */ .uq-top-brand { position: relative; margin-top: -140px; } .uq-top-brand::before { display: block; z-index: -2; position: absolute; width: 100%; height: 100%; background-image: url("https://www.resonac.com/themes/resonac/common/img/top/bg-top-brand-hdg-01-sp.webp"); background-position: top; background-size: cover; background-repeat: no-repeat; content: ""; } .uq-top-brand__inner { margin: 0 15px; padding-top: 187px; padding-bottom: 70px; } .uq-top-brand__contents { position: relative; } .uq-top-brand__contents::before { display: block; z-index: -3; position: absolute; top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); background-color: #00a5c0; content: ""; } .uq-top-brand__hdg-lv2 { color: #ffffff; text-align: center; } .uq-top-brand__hdg-lv2-inner { display: flex; flex-direction: column; font-weight: 400; } .uq-top-brand__hdg-lv2-title { font-weight: 700; font-size: 2.4rem; line-height: 1.2; } .uq-top-brand__hdg-lv2-sub-title { margin-top: 8px; font-style: italic; font-size: 1.2rem; line-height: 1.2; } .uq-top-brand__text { margin-top: 18px; color: #ffffff; font-size: 1.6rem; } /* .uq-top-company ----------------------------------------------- */ .uq-top-company { max-width: 1280px; margin: 40px 15px 0; } .uq-top-company .m-panel-card-02 { margin-top: 20px; } .uq-top-company .m-panel-card-02__list { gap: 10px; } .uq-top-company .m-panel-card-02__item-inner { padding-bottom: 0; } .uq-top-company .m-panel-card-02__img { aspect-ratio: 331/205; } .uq-top-company .m-panel-card-02__title { margin: 16px 0 !important; font-weight: 400; font-size: 1.6rem; } /* .uq-top-sustainability ----------------------------------------------- */ .uq-top-sustainability__parallel { margin-top: 14px; } .uq-top-sustainability__parallel-text { margin-top: 0; } .uq-top-sustainability .m-btn-keyword { min-width: 224px; } /* .uq-top-relation ----------------------------------------------- */ .uq-top-relation { margin-top: 42px; padding: 43px 10px 39px; } .uq-top-relation .m-carousel-02 { margin-top: 0; } .uq-top-relation .m-carousel-02__item-index { background-color: #f8fbfc; } /* ---------------------------------------------------------------- list (.uq-top[-*]) ----------------------------------------------------------------- */ /* .uq-top-brand-list ----------------------------------------------- */ .uq-top-brand-list { position: relative; } .uq-top-brand-list::before { display: block; z-index: -2; position: absolute; left: 0; background: #00a5c0; content: ""; } .uq-top-brand-list::after { display: block; z-index: -2; position: absolute; left: 0; background-size: cover; background-repeat: no-repeat; content: ""; } .uq-top-brand-list__inner { display: flex; } .uq-top-brand-list__link { display: block; position: relative; overflow: hidden; } .uq-top-brand-list__link::before, .uq-top-brand-list__link::after { display: block; z-index: 3; position: absolute; content: ""; } .uq-top-brand-list__link::before { right: 8px; bottom: 8px; width: 17px; height: 17px; border: 1px solid #ffffff; border-radius: 50%; } .uq-top-brand-list__link::after { --border: #ffffff; right: 15px; bottom: 13px; width: 6px; height: 6px; transform: rotate(45deg); transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); } .uq-top-brand-list__link:hover .uq-top-brand-list__img, .uq-top-brand-list__link:focus .uq-top-brand-list__img, .uq-top-brand-list__link:active .uq-top-brand-list__img { filter: brightness(0.6); } .uq-top-brand-list__img { aspect-ratio: 3/1; width: 100%; object-fit: cover; background-color: #00a5c0; filter: brightness(0.4); transition: all 0.3s; } .uq-top-brand-list__contents { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); } .uq-top-brand-list__contents-text { display: block; color: #ffffff; font-size: 1.6rem; text-align: center; text-shadow: 1px 1px 10px rgba(51, 51, 51, 0.75); } .uq-top-brand-list__contents-sub-text { display: block; font-size: 1.6rem; } /* .uq-top-sustainability-list ----------------------------------------------- */ .uq-top-sustainability-list { position: relative; margin-top: 20px; } .uq-top-sustainability-list__inner { display: flex; } .uq-top-sustainability-list__link { display: block; position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 0 24px rgba(51, 51, 51, 0.24); transition: all 0.3s; } .uq-top-sustainability-list__link::before, .uq-top-sustainability-list__link::after { display: block; z-index: 3; position: absolute; content: ""; } .uq-top-sustainability-list__link::before { right: 12px; bottom: 12px; width: 17px; height: 17px; border: 1px solid #ffffff; border-radius: 50%; } .uq-top-sustainability-list__link::after { --border: #ffffff; right: 18px; bottom: 18px; width: 6px; height: 6px; transform: rotate(45deg); transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); } .uq-top-sustainability-list__link:hover, .uq-top-sustainability-list__link:focus, .uq-top-sustainability-list__link:active { opacity: 0.7; } .uq-top-sustainability-list__img { width: 100%; background-color: #00a5c0; } .uq-top-sustainability-list__contents { display: block; position: absolute; bottom: 24px; width: 100%; padding: 0 30px 0 22px; } .uq-top-sustainability-list__contents > *:nth-child(1) { margin-top: 0; } .uq-top-sustainability-list__contents-title { display: block; color: #ffffff; font-weight: 700; font-size: 2rem; text-shadow: 1px 1px 10px rgba(51, 51, 51, 0.75); } .uq-top-sustainability-list__contents-text { display: block; margin-top: 10px; color: #ffffff; font-size: 1.4rem; text-shadow: 1px 1px 10px rgba(51, 51, 51, 0.75); } /* ---------------------------------------------------------------- Heading (.uq-top[-*]) ----------------------------------------------------------------- */ /* .uq-top-box ----------------------------------------------- */ /* .uq-top-box ----------------------------------------------- */ /* .uq-top-box-news-tab ----------------------------------------------- */ .uq-top-box-news-tab__head { display: flex; flex-wrap: wrap; gap: 18px; } .uq-top-box-news-tab__tab-list { display: flex; flex-wrap: wrap; gap: 5px; } .uq-top-box-news-tab__tab-item { padding-right: 13px; padding-left: 13px; border-right: 1px solid #dedede; } .uq-top-box-news-tab__tab-item:first-of-type { position: relative; border-left: 1px solid #dedede; } .uq-top-box-news-tab__tab-btn { display: inline-block; color: #333333; font-size: 1.4rem; line-height: 1.6; } .uq-top-box-news-tab__tab-btn[aria-selected=true] { padding-bottom: 2px; border-bottom: 3px solid #00a5c0; color: #00a5c0; font-weight: 700; } .uq-top-box-news-tab__tab-btn:not([aria-selected=true]):hover, .uq-top-box-news-tab__tab-btn:not([aria-selected=true]):focus, .uq-top-box-news-tab__tab-btn:not([aria-selected=true]):active { padding-bottom: 2px; border-bottom: 1px solid #333333; } .uq-top-box-news-tab__tab-content { margin-top: 5px; } .uq-top-box-news-tab__tab-panel > *:first-child { margin-top: 0; } .uq-top-box-news-tab__link { margin-top: 20px; font-size: 1.4rem; text-align: right; } .uq-top-box-news-tab__link-inner { --bg: #ffffff; --border: #0066c0; display: inline-block; position: relative; padding-right: 24px; color: #333333; line-height: 1.4444444444; text-decoration: none; transition: color 0.3s; } .uq-top-box-news-tab__link-inner::before { display: block; position: absolute; top: 3px; right: 0; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .uq-top-box-news-tab__link-inner::after { display: block; position: absolute; top: 8px; right: 6px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .uq-top-box-news-tab__link-inner:hover, .uq-top-box-news-tab__link-inner:focus, .uq-top-box-news-tab__link-inner:active { --bg: #0066c0; --border: #ffffff; opacity: 1; } .uq-top-box-news-tab__link-inner:hover::before, .uq-top-box-news-tab__link-inner:focus::before, .uq-top-box-news-tab__link-inner:active::before { --border: #0066c0; } .uq-top-box-news-tab .m-list-news__item:first-of-type { border-top: 0 solid rgba(51, 51, 51, 0); } .uq-top-box-news-tab .m-list-news__head { gap: 11px; } .uq-top-box-news-tab .m-list-news__text { font-size: 1.4rem; } .uq-top-box-news-tab .m-list-news__link::before { --border: #92aaac; --bg: #ffffff; } .uq-top-box-news-tab .m-list-news__link::after { --border: #92aaac; } .uq-top-box-news-tab .m-list-news__link:hover, .uq-top-box-news-tab .m-list-news__link:focus, .uq-top-box-news-tab .m-list-news__link:active { --color: #92aaac; } .uq-top-box-news-tab .m-list-news__link:hover::before, .uq-top-box-news-tab .m-list-news__link:focus::before, .uq-top-box-news-tab .m-list-news__link:active::before { --border: #ffffff; --bg: #92aaac; } .uq-top-box-news-tab .m-list-news__link:hover::after, .uq-top-box-news-tab .m-list-news__link:focus::after, .uq-top-box-news-tab .m-list-news__link:active::after { --border: #ffffff; } .uq-top-box-news-tab .m-list-news__category-text { min-width: 120px; } /* ---------------------------------------------------------------- Adjust (.uq-top-adjust[-*]) ----------------------------------------------------------------- */ /* .uq-top-adjust-uppercase ----------------------------------------------- */ .uq-top-adjust-uppercase { text-transform: uppercase; } /* ---------------------------------------------------------------- carousel (.uq-top[-*]) ----------------------------------------------------------------- */ /* .uq-top-mv-carousel ----------------------------------------------- */ .uq-top-mv-carousel { position: relative; } .uq-top-mv-carousel__contents { aspect-ratio: 375/382; } .uq-top-mv-carousel__list { position: relative; } .uq-top-mv-carousel__list::before { display: block; z-index: 1; position: absolute; width: 100%; height: 100%; background-color: rgb(0, 0, 0); content: ""; opacity: 0; } .uq-top-mv-carousel__item { opacity: 1; /* stylelint-disable-next-line no-descending-specificity */ } html:not([data-script-enabled=true]) .uq-top-mv-carousel__item { display: none; } html:not([data-script-enabled=true]) .uq-top-mv-carousel__item:nth-child(1) { display: block; } html[data-script-enabled=true] .uq-top-mv-carousel__item { position: absolute; top: 0; left: 0; opacity: 0; } html[data-script-enabled=true] .uq-top-mv-carousel__item:nth-child(1) { opacity: 1; } .uq-top-mv-carousel__item.is-current .uq-top-mv-carousel__item-img { opacity: 1; transition: opacity 6s ease; } .uq-top-mv-carousel__item-img-wrap { aspect-ratio: 375/382; overflow: hidden; } .uq-top-mv-carousel__item-img { aspect-ratio: 375/382; width: 100%; object-fit: cover; } .uq-top-mv-carousel__btn-inner { display: inline-block; padding: 15px 15px 15px 32px; border: 1px solid #ffffff; border-radius: 50px; background-color: rgba(51, 51, 51, 0.5); color: #ffffff; font-size: 1.2rem; line-height: 1; transition: all 0.3s; } .uq-top-mv-carousel__btn-inner:hover, .uq-top-mv-carousel__btn-inner:focus, .uq-top-mv-carousel__btn-inner:active { background-color: #92aaac; } .uq-top-mv-carousel__btn-text { position: relative; padding: 0 30px 0 0; } .uq-top-mv-carousel__btn-text::before { display: block; position: absolute; top: 50%; right: 0; width: 14px; height: 14px; transform: translateY(-50%); border: 1px solid #ffffff; border-radius: 50%; content: ""; } .uq-top-mv-carousel__btn-text::after { display: block; position: absolute; top: 50%; right: 5px; width: 4px; height: 4px; transform: rotate(45deg); transform: translateY(-50%) rotate(45deg); border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; } .uq-top-mv-carousel__ui { display: flex; z-index: 2; position: absolute; border-radius: 50%; box-shadow: 0 0 24px rgba(0, 0, 0, 0.16); } .uq-top-mv-carousel__ui-play-label { clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px; overflow: hidden; } .uq-top-mv-carousel__ui-play { position: relative; flex-shrink: 0; width: 20px; height: 20px; border: 1px solid #ffffff; border-radius: 50%; background-color: rgba(0, 0, 0, 0); cursor: pointer; transition: background-color 0.3s; } .uq-top-mv-carousel__ui-play:hover, .uq-top-mv-carousel__ui-play:focus, .uq-top-mv-carousel__ui-play:active { background-color: #92aaac; } .uq-top-mv-carousel__ui-play:not(.is-pause)::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 5px; height: 6px; margin: auto; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; content: ""; } .uq-top-mv-carousel__ui-play:not(.is-pause):hover::before, .uq-top-mv-carousel__ui-play:not(.is-pause):focus::before, .uq-top-mv-carousel__ui-play:not(.is-pause):active::before { border-right-color: #ffffff; border-left-color: #ffffff; } .uq-top-mv-carousel__ui-play.is-pause::before { display: block; position: absolute; top: 6px; left: 4px; width: 0; height: 0; transform: rotate(28deg); border-top: 7px solid #ffffff; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } .uq-top-mv-carousel__ui-play.is-pause:hover::before, .uq-top-mv-carousel__ui-play.is-pause:focus::before, .uq-top-mv-carousel__ui-play.is-pause:active::before { border-top-color: #ffffff; } /* .uq-top-topics-carousel ----------------------------------------------- */ .uq-top-topics-carousel { width: calc(100% - 32px); margin: 25px auto; background-color: rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .uq-top-topics-carousel__list { gap: 20px; } html[data-script-enabled=true] .uq-top-topics-carousel__list { gap: 0; } .uq-top-topics-carousel__item { width: 100%; } html[data-script-enabled=true] .uq-top-topics-carousel__item { width: 100%; transition: all 0.4s; } .uq-top-topics-carousel__item[aria-hidden=true] { transform: scale(0.8); } .uq-top-topics-carousel__item-img { width: 800px; height: auto; } .uq-top-topics-carousel__ui { display: flex; flex-wrap: nowrap; } .uq-top-topics-carousel__ui-prev, .uq-top-topics-carousel__ui-next { position: absolute; top: 0; bottom: 0; width: 30px; height: 30px; margin: auto 0; } .uq-top-topics-carousel__ui-prev-btn, .uq-top-topics-carousel__ui-next-btn { position: relative; width: 100%; height: 100%; border: 1px solid #92aaac; border-radius: 50%; background-color: #e4eff1; cursor: pointer; transition: background-color 0.3s; } .uq-top-topics-carousel__ui-prev-btn::before, .uq-top-topics-carousel__ui-next-btn::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: ""; } .uq-top-topics-carousel__ui-prev-btn:hover, .uq-top-topics-carousel__ui-prev-btn:focus, .uq-top-topics-carousel__ui-prev-btn:active, .uq-top-topics-carousel__ui-next-btn:hover, .uq-top-topics-carousel__ui-next-btn:focus, .uq-top-topics-carousel__ui-next-btn:active { background-color: #92aaac; } .uq-top-topics-carousel__ui-prev-btn:hover::before, .uq-top-topics-carousel__ui-prev-btn:focus::before, .uq-top-topics-carousel__ui-prev-btn:active::before, .uq-top-topics-carousel__ui-next-btn:hover::before, .uq-top-topics-carousel__ui-next-btn:focus::before, .uq-top-topics-carousel__ui-next-btn:active::before { border-color: #ffffff; } .uq-top-topics-carousel__ui-prev-btn { background-color: #ffffff; } .uq-top-topics-carousel__ui-prev-btn::before { left: 4px; width: 7px; height: 7px; transform: rotate(45deg); border-bottom: 1px solid #06363E; border-bottom: 1px solid #92aaac; border-left: 1px solid #06363E; border-left: 1px solid #92aaac; } .uq-top-topics-carousel__ui-prev-btn:hover, .uq-top-topics-carousel__ui-prev-btn:focus, .uq-top-topics-carousel__ui-prev-btn:active { background-color: #92aaac; } .uq-top-topics-carousel__ui-prev-btn:hover::before, .uq-top-topics-carousel__ui-prev-btn:focus::before, .uq-top-topics-carousel__ui-prev-btn:active::before { border-bottom: 1px solid #ffffff; border-left: 1px solid #ffffff; } .uq-top-topics-carousel__ui-next-btn { background-color: #ffffff; } .uq-top-topics-carousel__ui-next-btn::before { right: 4px; width: 7px; height: 7px; transform: rotate(45deg); border-top: 1px solid #06363E; border-top: 1px solid #92aaac; border-right: 1px solid #06363E; border-right: 1px solid #92aaac; } .uq-top-topics-carousel__ui-next-btn:hover, .uq-top-topics-carousel__ui-next-btn:focus, .uq-top-topics-carousel__ui-next-btn:active { background-color: #92aaac; } .uq-top-topics-carousel__ui-next-btn:hover::before, .uq-top-topics-carousel__ui-next-btn:focus::before, .uq-top-topics-carousel__ui-next-btn:active::before { border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; } .uq-top-topics-carousel__ui-prev-btn-text, .uq-top-topics-carousel__ui-next-btn-text, .uq-top-topics-carousel__ui-play-label, .uq-top-topics-carousel__ui-indicator-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px; overflow: hidden; } .uq-top-topics-carousel__ui-indicator { display: flex; position: initial; right: 0; bottom: -17px; left: 0; justify-content: center; max-width: fit-content; margin: auto; padding: 8px 10px 7px 27px; gap: 19px; border-radius: 30px; background-color: #ffffff; box-shadow: 0 0 24px rgba(0, 0, 0, 0.16); } .uq-top-topics-carousel__ui-indicator-list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .uq-top-topics-carousel__ui-indicator-item { position: relative; width: 5px; height: 5px; } .uq-top-topics-carousel__ui-indicator-btn { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #92aaac; cursor: pointer; } .uq-top-topics-carousel__ui-indicator-btn[aria-checked=true] { transform: scale(2); background-color: #00a5c0; } .uq-top-topics-carousel__ui-play { position: relative; flex-shrink: 0; width: 19px; height: 19px; border: 1px solid #92aaac; border-radius: 50%; background-color: #ffffff; cursor: pointer; transition: background-color 0.3s; } .uq-top-topics-carousel__ui-play:hover, .uq-top-topics-carousel__ui-play:focus, .uq-top-topics-carousel__ui-play:active { background-color: #92aaac; } .uq-top-topics-carousel__ui-play:not(.is-pause)::before { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 5px; height: 6px; margin: auto; border-right: 1px solid #92aaac; border-left: 1px solid #92aaac; content: ""; } .uq-top-topics-carousel__ui-play:not(.is-pause):hover::before, .uq-top-topics-carousel__ui-play:not(.is-pause):focus::before, .uq-top-topics-carousel__ui-play:not(.is-pause):active::before { border-right-color: #ffffff; border-left-color: #ffffff; } .uq-top-topics-carousel__ui-play.is-pause::before { display: block; position: absolute; top: 6px; left: 4px; width: 0; height: 0; transform: rotate(28deg); border-top: 7px solid #92aaac; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } .uq-top-topics-carousel__ui-play.is-pause:hover::before, .uq-top-topics-carousel__ui-play.is-pause:focus::before, .uq-top-topics-carousel__ui-play.is-pause:active::before { border-top-color: #ffffff; } .uq-top-topics-carousel .m-panel-card-link-item { max-width: 100%; height: auto; padding-bottom: 12px; } .uq-top-topics-carousel .m-panel-card-link-item__img { aspect-ratio: 740/370; } .uq-top-topics-carousel .m-panel-card-link-item__index::before { top: 50%; transform: translateY(-50%); } .uq-top-topics-carousel .m-panel-card-link-item__index::after { top: 50%; transform: translateY(-50%) rotate(45deg); } .uq-top-topics-carousel .m-panel-card-link-item__title { margin: 0; } .uq-top-topics-carousel .m-panel-card-link-item .fn-carousel-img { height: auto; } /* ---------------------------------------------------------------- Layout (.uq-corporate-lyt[-*]) ----------------------------------------------------------------- */ /* .uq-corporate-lyt-top ----------------------------------------------- */ .uq-corporate-lyt-top { margin-top: 30px; } .uq-corporate-lyt-top__head { position: relative; padding: 30px 0 60px; } .uq-corporate-lyt-top__head::before { display: block; z-index: 0; position: absolute; top: 0; right: -15px; width: calc(100% + 30px); max-width: 1135px; height: 100%; background-image: url("../Images/bg-corporate-btn-01.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; content: ""; } .uq-corporate-lyt-top__head::after { display: block; z-index: -1; position: absolute; top: 0; left: -15px; width: calc(100% + 30px); height: 100%; background-color: #d9e7e9; content: ""; } .uq-corporate-lyt-top__head > *:first-child { margin-top: 0; } .uq-corporate-lyt-top__bottom { margin-top: -30px; } .uq-corporate-lyt-top__bottom > *:first-child { margin-top: 0; } /* .uq-corporate-lyt-contents ----------------------------------------------- */ .uq-corporate-lyt-contents { margin-top: 15px; padding-bottom: 30px; border-bottom: 1px solid #dedede; } .uq-corporate-lyt-contents > *:first-child { margin-top: 0; } /* ---------------------------------------------------------------- Heading (.uq-corporate-hdg[-*]) ----------------------------------------------------------------- */ /* .uq-corporate-hdg-lv2 ----------------------------------------------- */ .uq-corporate-hdg-lv2 { margin-top: 30px; padding: 5px 10px 6px; background-color: #526366; color: #ffffff; font-weight: 400; font-size: 1.2rem; line-height: 1.5; text-align: center; } /* .uq-corporate-hdg-lv3 ----------------------------------------------- */ .uq-corporate-hdg-lv3 { margin: 20px 0 15px; color: #526366; font-weight: 400; font-size: 2rem; line-height: 1.4; text-align: center; } .uq-corporate-hdg-lv3--strong { font-size: 2.6rem; line-height: 1.3; } /* ---------------------------------------------------------------- Text (.uq-corporate-text[-*]) ----------------------------------------------------------------- */ /* .uq-corporate-text-green ----------------------------------------------- */ .uq-corporate-text-green { margin-top: 15px; color: #6d8b91; font-size: 1.3rem; line-height: 1.8; text-align: center; } /* ---------------------------------------------------------------- Layout (.uq-ir-lyt[-*]) ----------------------------------------------------------------- */ /* .uq-ir-lyt-col2 ----------------------------------------------- */ .uq-ir-lyt-col2 { display: flex; z-index: 1; position: relative; margin-top: 58px; gap: 47px; } .uq-ir-lyt-col2__top > *:first-child { margin-top: 0; } .uq-ir-lyt-col2__bottom > *:first-child { margin-top: 0; } /* ---------------------------------------------------------------- List (.uq-ir-list[-*]) ----------------------------------------------------------------- */ /* .uq-ir-list-comparison ----------------------------------------------- */ .uq-ir-list-comparison { padding-bottom: 10px; border-bottom: 2px solid #e5e5e5; } .uq-ir-list-comparison__inner { display: flex; gap: 10px; } .uq-ir-list-comparison__title { font-size: 2.4rem; line-height: 1.4; } .uq-ir-list-comparison__title-inner { --circle-sp: 19px; --circle-pc: 24px; display: inline-block; position: relative; padding-right: calc(10px + var(--circle-sp)); color: #333333; transition: opacity 0.3s; } .uq-ir-list-comparison__title-inner::before { display: block; position: absolute; top: 9px; right: 0; width: var(--circle-sp); height: var(--circle-sp); border: 1px solid #92aaac; border-radius: 50%; background-color: transparent; content: ""; transition: background-color 0.3s; } .uq-ir-list-comparison__title-inner::after { display: block; position: absolute; top: 16px; right: 8px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid #92aaac; border-right: 1px solid #92aaac; content: ""; } .uq-ir-list-comparison__title-inner:hover, .uq-ir-list-comparison__title-inner:focus, .uq-ir-list-comparison__title-inner:active { color: #92aaac; text-decoration: underline; } .uq-ir-list-comparison__title-inner:hover::before, .uq-ir-list-comparison__title-inner:focus::before, .uq-ir-list-comparison__title-inner:active::before { background-color: #92aaac; } .uq-ir-list-comparison__title-inner:hover::after, .uq-ir-list-comparison__title-inner:focus::after, .uq-ir-list-comparison__title-inner:active::after { border-top-color: #ffffff; border-right-color: #ffffff; } .uq-ir-list-comparison__text { display: flex; flex-wrap: wrap; align-items: center; margin-top: 0; gap: 10px; } .uq-ir-list-comparison__text-inner { font-size: 1.2rem; line-height: 1.6; } .uq-ir-list-comparison__text-inner02 { display: inline-block; font-size: 1.4rem; line-height: 1.6; } .uq-ir-list-comparison__detail-list { display: flex; gap: 5px; } .uq-ir-list-comparison__detail-item { display: flex; position: relative; align-items: center; } .uq-ir-list-comparison__detail-title { display: inline-block; position: relative; top: 4px; flex-shrink: 0; padding: 3px 20px 4px; border: 1px solid #92aaac; border-radius: 16px; background-color: #ffffff; font-size: 1.4rem; line-height: 1; text-align: center; } .uq-ir-list-comparison__detail-text { display: inline-block; min-width: 3.8em; font-size: 3rem; line-height: 1.2; } .uq-ir-list-comparison__detail-text sub { font-size: 1.6rem; } .uq-ir-list-comparison--side { margin-top: 15px; padding: 15px 25px; border-bottom: none; background-color: #f1f1f1; } .uq-ir-list-comparison--side .uq-ir-list-comparison__title { width: 100%; padding-bottom: 4px; border-bottom: 2px solid #00a5c0; font-size: 2rem; } .uq-ir-list-comparison--side .uq-ir-list-comparison__title-inner { --circle-pc: 16px; --circle-sp: 16px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__title-inner::before { top: 7px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__title-inner::after { top: 12px; right: 6px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__contents { width: 100%; } .uq-ir-list-comparison--side .uq-ir-list-comparison__text { gap: 5px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__text-inner { font-size: 1.2rem; } .uq-ir-list-comparison--side .uq-ir-list-comparison__text-inner02 { font-size: 1.3rem; } /* ---------------------------------------------------------------- Box (.uq-ir-box[-*]) ----------------------------------------------------------------- */ /* .uq-ir-box-news-tab ----------------------------------------------- */ .uq-ir-box-news-tab__head { display: flex; flex-wrap: wrap; gap: 15px; } .uq-ir-box-news-tab__category-inner { display: flex; align-items: center; justify-content: flex-end; gap: 20px; } .uq-ir-box-news-tab__category-label { font-size: 1.4rem; line-height: 1.6; } .uq-ir-box-news-tab__category-select-wrap { --border: #92aaac; position: relative; } .uq-ir-box-news-tab__category-select-wrap::before { display: block; position: absolute; top: 2px; right: 15px; bottom: 0; width: 24px; height: 24px; margin: auto; border: 1px solid var(--border); border-radius: 50%; background-color: transparent; content: ""; transition: background-color 0.3s; } .uq-ir-box-news-tab__category-select-wrap::after { display: block; position: absolute; top: 0; right: 24px; bottom: 0; width: 7px; height: 7px; margin: auto; transform: rotate(45deg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); content: ""; } .uq-ir-box-news-tab__category-select { --padding-block: 10px; -webkit-appearance: none; appearance: none; position: relative; padding: var(--padding-block) 50px var(--padding-block) 15px; border: 1px solid #92aaac; background-color: transparent; color: #333333; font-size: 1.4rem; line-height: 1.6; cursor: pointer; } .uq-ir-box-news-tab__tab-list { display: flex; gap: 16px; } .uq-ir-box-news-tab__tab-item:not(:first-of-type) { position: relative; padding-left: 16px; border-left: 1px solid #dedede; } .uq-ir-box-news-tab__tab-item > a:not([aria-selected=true]):hover, .uq-ir-box-news-tab__tab-item > a:not([aria-selected=true]):focus, .uq-ir-box-news-tab__tab-item > a:not([aria-selected=true]):active { text-decoration: underline; } .uq-ir-box-news-tab__tab-btn { display: inline-block; color: #333333; font-size: 1.6rem; line-height: 1.6; } .uq-ir-box-news-tab__tab-btn[aria-selected=true] { padding-bottom: 2px; border-bottom: 3px solid #00a5c0; font-weight: 700; } .uq-ir-box-news-tab__tab-content { margin-top: 15px; } .uq-ir-box-news-tab__tab-panel > *:first-child { margin-top: 0; } .uq-ir-box-news-tab__link { margin-top: 20px; font-size: 1.4rem; text-align: right; } .uq-ir-box-news-tab__link-inner { --bg: #ffffff; --border: #0066c0; display: inline-block; position: relative; padding-right: 24px; color: #333333; line-height: 1.4444444444; text-decoration: none; transition: color 0.3s; } .uq-ir-box-news-tab__link-inner::before { display: block; position: absolute; top: 3px; right: 0; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .uq-ir-box-news-tab__link-inner::after { display: block; position: absolute; top: 8px; right: 6px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); content: ""; } .uq-ir-box-news-tab__link-inner:hover, .uq-ir-box-news-tab__link-inner:focus, .uq-ir-box-news-tab__link-inner:active { --bg: #0066c0; --border: #ffffff; opacity: 1; } .uq-ir-box-news-tab__link-inner:hover::before, .uq-ir-box-news-tab__link-inner:focus::before, .uq-ir-box-news-tab__link-inner:active::before { --border: #0066c0; } html:not([data-script-enabled=true]) .uq-ir-box-news-tab .js-irGetEventXml { display: none; } /* .uq-ir-box-download ----------------------------------------------- */ .uq-ir-box-download { margin-top: 20px; } .uq-ir-box-download__inner { padding: 20px 40px 25px; border: 1px solid #dddddd; border-bottom: none; background-color: #ffffff; } .uq-ir-box-download__title { font-size: 1.8rem; line-height: 1.6; text-align: center; } .uq-ir-box-download__contents { margin-top: 10px; } .uq-ir-box-download__contents > *:first-child { margin-top: 0; } .uq-ir-box-download__btn > *:first-child { margin-top: 0; } .uq-ir-box-download__btn .uq-ir-btn__btn { border-radius: 0 0 8px 8px; } /* ---------------------------------------------------------------- Button (.uq-ir-btn[-*]) ----------------------------------------------------------------- */ /* .uq-ir-btn ----------------------------------------------- */ .uq-ir-btn { display: flex; flex-wrap: wrap; margin-top: 20px; gap: 20px; } .uq-ir-btn__text { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; } .uq-ir-btn__icon { display: flex; position: absolute; top: 0; right: 15px; bottom: 0; align-items: center; justify-content: center; width: 30px; height: 30px; margin: auto 0; border-radius: 50%; background-color: #92aaac; } .uq-ir-btn__btn { --bg: #ffffff; --border: #92aaac; --color: #333333; --padding-block: 10px; position: relative; width: 100%; min-height: 63px; padding: var(--padding-block) 40px var(--padding-block) var(--padding-block); border: 1px solid var(--border); border-radius: 8px; background-color: var(--bg); color: var(--color); font-size: 1.6rem; line-height: 1.6; transition: opacity 0.3s; } .uq-ir-btn__btn:not(:disabled):hover, .uq-ir-btn__btn:not(:disabled):focus, .uq-ir-btn__btn:not(:disabled):active { opacity: 0.6; } .uq-ir-btn__btn--download { border: none; background-color: #e4eff1; } .uq-ir-btn__btn--download .uq-ir-btn__icon { background-color: #ffffff; } /* ---------------------------------------------------------------- Heading (.uq-sustainability-hdg[-*]) ----------------------------------------------------------------- */ /* .uq-sustainability-hdg-lv2 ----------------------------------------------- */ .uq-sustainability-hdg-lv2 { position: relative; } .uq-sustainability-hdg-lv2__inner { position: relative; } .uq-sustainability-hdg-lv2__title { color: #00a5c0; font-size: 2rem; } .uq-sustainability-hdg-lv2__contents { margin-top: 10px; } .uq-sustainability-hdg-lv2__contents > *:first-child { margin-top: 0; } /* ---------------------------------------------------------------- Box (.uq-products-box[-*]) ----------------------------------------------------------------- */ /* .uq-products-box ----------------------------------------------- */ .uq-products-box { position: relative; max-width: 1280px; margin: 30px auto 0; } .uq-products-box__inner { padding: 30px 20px; border-radius: 8px; background-color: #ffffff; box-shadow: 0 0 24px rgba(51, 51, 51, 0.16); } .uq-products-box__block { display: flex; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; gap: 30px; } .uq-products-box__contents { margin-bottom: 15px; } .uq-products-box__contents > *:first-child { margin-top: 0; } .uq-products-box__contents p { font-size: 1.4rem; } .uq-products-box__btn > *:first-child { margin-top: 0; } /* ---------------------------------------------------------------- Button (.uq-products-btn[-*]) ----------------------------------------------------------------- */ /* .uq-products-btn ----------------------------------------------- */ .uq-products-btn { display: flex; flex-wrap: wrap; margin-top: 35px; gap: 20px; } .uq-products-btn__btn { --bg: #00a5c0; --border: #00a5c0; --color: #ffffff; --padding-block: 18px; display: block; position: relative; width: 100%; padding: var(--padding-block) 40px; border: 1px solid var(--border); border-radius: 8px; background-color: var(--bg); box-shadow: 0 0 12px rgba(51, 51, 51, 0.16); color: var(--color); font-size: 1.6rem; line-height: 1.6; text-align: center; transition: opacity 0.3s; } .uq-products-btn__btn::before { --border: #ffffff; display: block; position: absolute; top: 0; bottom: 0; left: 15px; width: 19px; height: 19px; margin: auto 0; border: 1px solid var(--border); border-radius: 50%; background-color: var(--bg); content: ""; transition: background-color 0.3s; } .uq-products-btn__btn::after { --border: #ffffff; display: block; position: absolute; top: -1px; bottom: 0; left: 22px; width: 5px; height: 5px; margin: auto 0; transform: rotate(45deg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); content: ""; } .uq-products-btn__btn:not(:disabled):hover, .uq-products-btn__btn:not(:disabled):focus, .uq-products-btn__btn:not(:disabled):active { opacity: 0.6; } @media screen and (min-width: 768px) { .str-footer__list-ul { justify-content: center; } .str-footer__list-items:nth-of-type(n+2) { margin-left: 40px; } .str-footer__contents { padding: 100px 20px 32px; } } @media screen and (min-width: 769px) { body { font-size: 1.8rem; line-height: 1.8; } :target { scroll-margin-top: 104px; } .str-breadcrumb__item { font-size: 13px; } .str-breadcrumb__item:not(:first-child) { padding-left: 20px; } .str-breadcrumb__item:not(:first-child)::before { top: 8px; width: 7px; height: 7px; } .str-section { padding: 0 60px; } .str-section--padding-wide { padding: 0 120px; } .str-section__inner:not(:first-child) { margin-top: 60px; } .str-section__inner--bg-color-blue { padding: 70px 15px; } .str-section-second-col2__contents { padding-top: 40px; user-select: none; } .str-side-nav__title { font-size: 2.2rem; } .str-side-nav__contents { margin-top: 17px; } .str-side-nav__box--strong .str-side-nav__contents { margin-top: 22px; } .str-side-nav__cv-tel, .str-side-nav__cv-text { margin-top: 20px; } .str-side-nav__cv-tel-link { font-size: 2.2rem; cursor: default; pointer-events: none; } .str-side-nav__cv-text { font-size: 1.6rem; } .m-hdg-lv1 { width: calc(100% - 77px); margin-bottom: 50px; } .m-hdg-lv1--mb-sm { margin-bottom: 30px; } .m-hdg-lv1::before { transform: skewX(-16deg); transform-origin: top; border-bottom-right-radius: 8px; } .m-hdg-lv1__inner { padding: 30px 105px 35px 15px; } .m-hdg-lv1__title { font-size: 4.2rem; user-select: none; } .m-hdg-lv1__sub-title { margin-top: 6px; font-size: 1.8rem; } .m-hdg-lv1-article__title { font-size: 3.6rem; line-height: 1.35; } .m-hdg-lv1-second__title-en { margin-bottom: 5px; font-size: 2.8rem; } .m-hdg-lv1-second__title-ja { font-size: 4.6rem; } .m-hdg-lv1-second__text { max-width: 335px; margin-top: 20px; font-size: 2rem; } .m-hdg-lv1-article-02 { max-width: 1440px; margin: 20px auto 0; } .m-hdg-lv1-article-02__title { font-size: 3.6rem; } .m-hdg-lv1-article-02__sub-title { font-size: 2rem; } .m-hdg-lv1-article-02__date { margin: 0 0 10px; font-size: 1.8rem; } .m-hdg-lv1-article-02__mv { margin-top: 30px; } .m-hdg-lv2 { display: flex; align-items: center; justify-content: space-between; margin: 50px 0 35px; gap: 0 15px; } .m-hdg-lv2__title { font-size: 3.8rem; } .m-hdg-lv2__sub-text { flex-shrink: 0; font-size: 2rem; } .m-hdg-lv2-article { margin: 60px 0 20px; padding-left: 22px; } .m-hdg-lv2-article::before { top: 0.25em; width: 8px; height: 48px; } .m-hdg-lv2-article__title { font-size: 3.8rem; } .m-hdg-lv3 { margin: 50px 0 25px; } .m-hdg-lv3__inner { padding: 10px 0; } .m-hdg-lv3__inner::before { width: 18px; height: 18px; } .m-hdg-lv3__inner::after { width: 19px; height: 19px; } .m-hdg-lv3__title { padding-left: 28px; font-size: 3rem; } .m-hdg-lv3 a .m-hdg-lv3__title { padding-right: 50px; } .m-hdg-lv3 a .m-hdg-lv3__title::before { right: 9px; width: 28px; height: 28px; } .m-hdg-lv3 a .m-hdg-lv3__title::after { right: 20px; width: 8px; height: 8px; } .m-hdg-lv4 { margin: 25px 0 10px; padding-left: 18px; } .m-hdg-lv4::before, .m-hdg-lv4::after { top: 0.65em; } .m-hdg-lv4__title { font-size: 2.4rem; } .m-hdg-challenge-resolution { margin-top: 60px; } .m-hdg-challenge-resolution::before { top: calc(50% - 3px); height: 6px; } .m-hdg-challenge-resolution__title { max-width: 264px; font-size: 3.6rem; } .m-hdg-challenge-resolution__p { margin-top: 0; } .m-hdg-challenge-resolution__link::before { top: 5px; left: 0; width: 24px; height: 24px; } .m-hdg-challenge-resolution__link::after { top: 14px; left: 6px; width: 7px; height: 7px; } p { margin-top: 15px; } .m-text-lead { margin: 24px 0 10px; font-size: 2rem; line-height: 1.8; } .m-text-label { font-size: 1.8rem; } .m-text-label__label { display: inline-block; max-width: 166px; margin-right: 18px; padding: 4px 12px 8px; } .m-text-box-title { font-size: 2.2rem; } .m-link-list { margin-top: 15px; } .m-link-list[data-col-wide="1"] { gap: 15px 0; } .m-link-list[data-col-wide="2"] { grid-template-columns: repeat(2, 1fr); gap: 15px 40px; } .m-link-list[data-col-wide="3"] { grid-template-columns: repeat(3, 1fr); gap: 15px 40px; } .m-link-list[data-col-wide="4"] { grid-template-columns: repeat(4, 1fr); gap: 15px 40px; } .m-link-list[data-col-wide=auto] { display: flex; flex-wrap: wrap; gap: 15px 25px; } .m-link-list[data-col-wide=auto-center] { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px 25px; } .m-link-list__item .m-link-list { padding-left: 34px; } .m-link-list__link { padding-left: 34px; } .m-link-list__link::before { top: 1px; width: 24px; height: 24px; } .m-link-list__link::after { top: 9px; left: 7px; width: 7px; height: 7px; } .m-hdg-challenge-resolution__list .m-link-list { margin-top: 10px; text-align: right; } .m-hdg-lv1-second .m-link-list { margin-top: 35px; } .m-hdg-lv1-second .m-link-list__link { font-size: 2.2rem; } .m-hdg-lv1-second .m-link-list__link::before { top: 4px; } .m-hdg-lv1-second .m-link-list__link::after { top: 12px; } .m-link-list-anchor { --padding-block: 20px; padding: var(--padding-block) 25px; } .m-link-list-anchor__list { display: flex; flex-wrap: wrap; gap: 15px 50px; } .m-link-list-anchor__link { padding-left: 34px; } .m-link-list-anchor__link::before { top: 1px; width: 24px; height: 24px; } .m-link-list-anchor__link::after { left: 8px; width: 7px; height: 7px; } .m-link-list-toc__link-text::before { top: 3px; left: 0; width: 24px; height: 24px; } .m-link-list-toc__link-text::after { top: 10px; left: 9px; width: 7px; height: 7px; } .m-link-list-toc { margin-top: 50px; padding: 52px 62px 49px; } .m-link-list-toc__item-nest { margin-top: 8px; } .m-link-list-toc__list--col2 { flex-flow: row wrap; } .m-link-list-toc__list--col2 .m-link-list-toc__item { width: 100%; max-width: calc(50% - 20px); } .m-link-list-toc__list-nest { margin-left: 25px; } .m-link-list-toc__desc { display: flex; } .m-link-list-toc__dt { flex-shrink: 0; padding-right: 44px; font-size: 1.8rem; } .m-link-list-toc__dd { width: 100%; padding-left: 40px; border-left: solid 1px #d9e7e9; } .m-link-list-label { margin-top: 10px; } .m-link-cv { transform-origin: right center; animation: cv-animation-pc 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .m-link-cv { top: 350px; right: 0; } .m-link-cv__list { border-radius: 8px 0 0 8px; box-shadow: 0 4px 10px -6px #333333; } .m-link-cv__link { padding: 15px 17px; } .m-link-cv__item:nth-of-type(n+2) { border-top: solid 1px #ffffff; } .m-link-cv__item:first-of-type .m-link-cv__link { border-radius: 8px 0 0; } .m-link-cv__item:last-of-type .m-link-cv__link { border-radius: 0 0 0 8px; } .m-link-cv__text { font-size: 1.2rem; text-align: center; } .m-link-cv__img { width: 54px; height: 54px; } a[href^="tel:"] { pointer-events: none; } .m-btn__btn { width: auto; min-width: 288px; } .m-btn__btn::before { top: 1px; } .m-btn__btn--size-large { --padding-block: 30px; min-width: 420px; padding: var(--padding-block) 55px var(--padding-block) 35px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); font-size: 1.8rem; } .m-btn__btn--size-large::before { width: 30px; height: 30px; } .m-btn__btn--size-large::after { right: 28px; width: 7px; height: 7px; } .m-btn__btn--size-large.m-btn__btn--icon { padding-right: 65px; } .m-btn__btn--size-large .m-btn__icon { width: 40px; height: 40px; } .m-btn__btn--tel .m-btn__text { font-size: 1.6rem; } .m-btn__btn--tel.m-btn__btn--size-large { --padding-block: 27px; padding-left: 65px; } .m-btn__btn--tel.m-btn__btn--size-large .m-btn__text { font-size: 2.2rem; } .m-btn__btn--tel.m-btn__btn--size-large .m-btn__icon-img { max-width: initial; } .str-side-nav .m-btn__btn { width: 100%; font-size: 1.8rem; } .str-side-nav .m-btn__btn::before { width: 24px; height: 24px; } .str-side-nav .m-btn__btn::after { right: 25px; width: 7px; height: 7px; } .m-btn--lyt-center { justify-content: center; } .m-btn--lyt-vertical { flex-direction: column; } .m-btn--lyt-vertical .m-btn__btn { width: fit-content; } .m-btn--lyt-vertical.m-btn--lyt-center .m-btn__btn { margin: auto; } .m-btn-parallel { margin-top: 35px; } .m-btn-parallel[data-col-wide="1"] { gap: 15px 0; } .m-btn-parallel[data-col-wide="2"] { grid-template-columns: repeat(2, 1fr); gap: 15px 35px; } .m-btn-parallel[data-col-wide="3"] { grid-template-columns: repeat(2, 1fr); gap: 15px 35px; } .m-btn-parallel__btn-text { padding-left: 44px; font-size: 2rem; } .m-btn-parallel__btn-text::before { width: 24px; height: 24px; } .m-btn-parallel__btn-text::after { left: 7px; width: 7px; height: 7px; } .m-btn-parallel__sub-text { font-size: 1.6rem; } .m-btn-parallel__btn { padding: 20px 25px; } .m-btn-parallel-02 { margin-top: 40px; gap: 20px 32px; } .m-btn-parallel-02[data-col-wide="2"] { grid-template-columns: repeat(2, 1fr); } .m-btn-parallel-02[data-col-wide="3"] { grid-template-columns: repeat(3, 1fr); } .m-btn-parallel-02[data-col-wide="4"] { grid-template-columns: repeat(3, 1fr); } .m-btn-parallel-02[data-col-wide=auto] { display: flex; flex-wrap: wrap; gap: 20px 15px; } .m-btn-parallel-02__btn-text { font-size: 1.8rem; } .m-btn-parallel-02__btn { padding: 18px 20px; } .m-btn-parallel-02__btn--sm { padding: 15px 25px; } .m-btn-parallel-02__btn--sm .m-btn-parallel-02__btn-text { font-size: 1.6rem; } .m-btn-hash__btn { padding: 10px 20px; font-size: 1.6rem; } .m-btn-hash__btn-text { padding: 0 0 0 9px; } .m-box-simple .m-btn-hash__btn { padding: 12px 18px; font-size: 1.5rem; } .m-box-simple .m-btn-hash__btn-text { padding: 0 0 0 8px; } .m-btn-keyword__btn { padding: 12px 15px 12px 30px; font-size: 1.5rem; } .m-btn-keyword__btn-text { padding: 0 40px 0 0; } .m-btn-keyword__btn-text::before { width: 24px; height: 24px; } .m-btn-keyword__btn-text::after { right: 9px; width: 7px; height: 7px; } .m-list__item { padding-left: calc(var(--circle) + 22px); } .m-list__item::before { top: 14px; left: 9px; } .m-list[data-col-wide="2"] { grid-template-columns: repeat(2, 1fr); gap: 15px 40px; } .m-list-order__item ul, .m-list-order__item ol { padding-left: 26px; } .m-list-order__num { min-width: 26px; } .m-list-note__item-set { font-size: 1.4rem; line-height: 1.6; } .m-list-des[data-col-wide="2"] { display: grid; grid-template-columns: repeat(2, 1fr); } .m-list-des__contents .m-text { margin-top: 20px; } .m-list-des__body--lyt-row { grid-template-columns: 220px 1fr; } .m-list-des__body--lyt-row .m-list-des__title { padding-right: 20px; } .m-list-news__title { margin-bottom: 25px; font-size: 2.4rem; } .m-list-news__link { padding-right: 40px; } .m-list-label-product { margin: 30px 0 40px; } .m-list-label-product__item { justify-content: space-between; } .m-list-label-product__item-head { gap: 18px; } .m-list-label-product__item-label { min-width: 96px; font-size: 1.6rem; } .m-list-label-product__item-text, .m-list-label-product__item-text-supplement { font-size: 1.8rem; } .m-list-label-product__item-text-supplement { margin-top: 15px; } .m-list-label-product__item-sub-contents { margin-left: auto; } .m-list-ranking__list { grid-template-columns: repeat(3, 1fr); gap: 30px; } .m-list-ranking__inner { padding: 24px 45px 22px 35px; } .m-list-ranking__inner::before { width: 22px; height: 22px; } .m-list-ranking__inner::after { right: 23px; width: 6px; height: 6px; } .m-list-ranking__text { display: flex; align-items: center; height: 100%; font-size: 1.8rem; } .m-list-faq { gap: 20px 0; } .m-list-faq__item { padding: 0 40px; } .m-list-faq__title { padding: 27px 0 15px; } .m-list-faq__title-text { font-size: 1.8rem; } .m-list-faq__inner { padding: 0 15px; gap: 0 15px; } .m-list-faq__icon { --circle: 40px; top: -6px; font-size: 1.8rem; line-height: 37px; } .m-list-faq__contents .m-list-faq__inner { margin-bottom: 25px; padding: 27px 15px 25px; } .m-box { margin-top: 60px; padding: 35px 50px 40px; } .m-box-cv { margin-top: 110px; } .m-box-cv__inner { margin-bottom: 54px; padding: 24px 15px 0; background: url("https://www.resonac.com/themes/resonac/common/img/shared/bg-box-cv-wrap-01.webp") no-repeat; background-position: top center; background-size: cover; } .m-box-cv__contents { position: relative; top: 54px; max-width: 1600px; margin: 0 auto; } .m-box-cv--before-overlap { margin-top: -80px; } .m-box-cv--before-overlap .m-box-cv__inner { padding-top: 135px; } .m-box-cv--before-overlap .m-box-cv__contents { top: 25px; } .m-box-cv__list { gap: 40px; } .m-box-cv__item { width: 47%; } .m-box-cv__item--contact { background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/bg-box-cv-01.webp"); } .m-box-cv__item--download { background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/bg-box-cv-02.webp"); } .m-box-cv__item--mail { background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/bg-box-cv-03.webp"); } .m-box-cv__item-inner { padding: 90px 24px 80px; } .m-box-cv__title { font-size: 2.6rem; } .m-box-cv__text { max-width: 342px; margin-top: 25px; font-size: 1.6rem; } .m-box-cv__btn { margin-top: 42px; } .m-box-cv__btn-link { --padding-block: 20px; max-width: 342px; margin: 0 auto; padding: var(--padding-block) 55px var(--padding-block) 35px; font-size: 2rem; } .m-box-cv__btn-link::before { top: 1px; width: 30px; height: 30px; } .m-box-cv__btn-link::after { right: 28px; width: 7px; height: 7px; } .m-box-simple { --padding-block: 20px; padding: var(--padding-block) 25px; } .m-box-simple--wide { --padding-block: 45px; margin: 60px 0; } .m-box-simple--border { padding: 25px 40px; } .m-box-cv-product { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-top: 40px; } .m-box-cv-product--only-content { position: relative; justify-content: center; } .m-box-cv-product--only-content .m-box-cv-product__title { position: absolute; top: 0; left: 0; } .m-box-cv-product__title { flex-shrink: 0; min-width: 300px; padding: 4px 30px 6px; font-size: 1.8rem; } .m-box-cv-product__title-inner { font-size: 1.8rem; } .m-box-cv-product__text p { margin-top: 16px; } .m-box-cv-product__text p em { font-size: 2rem; text-align: left; } .m-box-cv-product__tel { margin: 0 0 0 10px; } .m-box-cv-product__tel-inner::before { --circle-width: 44px; } .m-box-cv-product__tel-inner::after { --icon-width: 25px; top: 10px; left: 9px; } .m-box-cv-product__tel-text { font-size: 2.6rem; } .m-box-cv-product__contents { align-items: center; justify-content: center; width: 100%; max-width: 960px; margin: 0 auto; padding: 20px 40px 20px 30px; gap: 0 20px; } .m-box-cv-product__contents--space-between { justify-content: space-between; } .m-box-cv-product__contents--flex-start { justify-content: flex-start; } .m-box-cv-product__wrap { width: 100%; padding: 0 40px 0 30px; } .m-box-cv-product__wrap .m-box-cv-product__contents { justify-content: flex-start; max-width: 1120px; padding: 20px 0; } .m-box-cv-product__wrap .m-box-cv-product__contents .m-box-cv-product__text:first-child { width: 35%; min-width: 300px; } .m-box-cv-product__wrap .m-box-cv-product__title { position: absolute; top: 0; left: 0; } .m-panel-link { margin-top: 60px; } .m-panel-link__list[data-col-wide="2"] { grid-template-columns: repeat(2, 1fr); gap: 38px 4.0740740741%; } .m-panel-link__list[data-col-wide="2"] .m-panel-link__item--short-height { aspect-ratio: 517/238; } .m-panel-link__list[data-col-wide="3"] { grid-template-columns: repeat(3, 1fr); gap: 38px 3.4259259259%; } .m-panel-link__list[data-col-wide="3"] .m-panel-link__item { aspect-ratio: 333/315; } .m-panel-link__index { padding: 25px 40px 10px 15px; } .m-panel-link__index::before { right: 10px; bottom: 10px; width: 24px; height: 24px; } .m-panel-link__index::after { right: 20px; bottom: 19px; width: 7px; height: 7px; } .m-panel-link__title { font-size: 2.4rem; } .m-panel-card { margin-top: 70px; } .m-panel-card__item { --padding-block: 8px; padding: var(--padding-block) var(--padding-block) 25px; } .m-panel-card--bg-strong { padding: 70px 0 0; } .m-panel-card--bg-strong::before { left: -60px; width: calc(100% + 120px); height: 300px; } .str-section--padding-wide .m-panel-card--bg-strong::before { left: -120px; width: calc(100% + 240px); } .m-panel-card__title { margin-bottom: 30px; font-size: 3.6rem; } .m-panel-card__title-sm { font-size: 2.6rem; } .m-panel-card__list { grid-template-columns: repeat(2, 1fr); gap: min(2.8125vw, 36px) 2.8125%; } .m-panel-card__img { aspect-ratio: 386/239; } .m-panel-card__img-link-text { padding-right: 30px; font-size: 2rem; } .m-panel-card__img-link-text::before { width: 19px; height: 19px; } .m-panel-card__img-link-text::after { right: 8px; } .m-panel-card__contents { margin-top: 20px; padding: 0 20px; } .m-panel-card-02 { margin-top: 70px; } .m-panel-card-02__heading { margin-bottom: 30px; font-size: 4rem; } .m-panel-card-02--bg-strong { padding: 70px 0 0; } .m-panel-card-02--bg-strong::before { left: -60px; width: calc(100% + 120px); height: 316px; } .m-panel-card-02__list { grid-template-columns: repeat(3, 1fr); gap: min(2.8125vw, 36px) 2.8125%; } .m-panel-card-02__index { margin-top: 20px; padding: 0 42px 0 16px; } .m-panel-card-02__index::before { right: 8px; width: 24px; height: 24px; } .m-panel-card-02__index::after { top: 10px; right: 18px; width: 7px; height: 7px; } .m-panel-card-02__title { margin-bottom: 10px; font-size: 1.8rem; } .m-panel-card-02__text { font-size: 1.6rem; } .m-panel-card-02__img { aspect-ratio: 386/239; } .m-panel-card-02__item-inner { padding: 8px 8px 25px; } .m-panel-card-link { margin-top: 40px; } .m-panel-card-link__list { grid-template-columns: repeat(3, 1fr); gap: min(3.28125vw, 36px) 3.28125%; } .m-panel-card-link__inner { padding: 9px 9px 15px; } .m-panel-card-link__index { margin: 15px 3px 0 12px; padding-right: 28px; } .m-panel-card-link__index::before { width: 22px; height: 22px; } .m-panel-card-link__index::after { right: 9px; width: 6px; height: 6px; } .m-panel-card-link__img { aspect-ratio: 270/156; } .m-panel-card-link__text { font-size: 1.8rem; } .m-panel-card-link-item { max-width: 500px; margin-top: 60px; } .m-panel-card-link-item__index { margin-top: 20px; padding: 0 42px 30px 16px; } .m-panel-card-link-item__index::before { right: 8px; width: 24px; height: 24px; } .m-panel-card-link-item__index::after { top: 10px; right: 18px; width: 7px; height: 7px; } .m-panel-card-link-item__index--has-link { margin-top: 20px; padding: 0 8px 30px 16px; } .m-panel-card-link-item__index-inner { padding-right: 42px; } .m-panel-card-link-item__index-inner::before { right: 8px; width: 24px; height: 24px; } .m-panel-card-link-item__index-inner::after { top: 10px; right: 18px; width: 7px; height: 7px; } .m-panel-card-link-item__tag-new { padding: 5px 10px 4px 23px; font-size: 1.2rem; line-height: 1; } .m-panel-card-link-item__img { aspect-ratio: 2.584/1; } .m-panel-card-link-item__date { font-size: 1.6rem; } .m-panel-card-link-item__title { margin-bottom: 7px; font-size: 1.6rem; } .m-panel-card-link-item__text { font-size: 1.6rem; } .m-panel-lyt__list { grid-template-columns: repeat(2, 1fr); } .m-panel-card-link-item-02 { flex-wrap: nowrap; margin-top: 40px; padding: 32px; gap: 28px; } .m-panel-card-link-item-02__box { width: 50%; } .m-panel-card-link-item-02__label { margin-bottom: 24px; } .m-panel-card-link-item-02__label-type { padding: 4px 32px; } .m-panel-card-link-item-02__label-new { padding: 4px 15px; } .m-panel-card-link-item-02__title-inner { font-size: 2.4rem; } .m-panel-card-link-item-02__title-inner::before { right: -32px; bottom: 1px; width: 24px; height: 24px; } .m-panel-card-link-item-02__contents { margin-top: 30px; } .m-panel-card-link-item-02__contents p { font-size: 1.6rem; } .m-panel-card-link-item-02__img { width: 50%; } .m-icon { margin-left: 10px; } .m-icon-label { min-width: 240px; padding: 3px 30px; font-size: 1.6rem; } .m-carousel { border-radius: 15px; } .m-carousel__title { min-width: 487px; border-top-left-radius: 15px; } .m-carousel__title-text { font-size: 2rem; } .m-carousel__item { width: 50%; } .m-carousel__inner-wrapper { width: 79.8181818182%; max-width: 878px; } .m-carousel__inner { margin-bottom: 27px; padding: 45px 0 68px; } .m-carousel__ui-prev, .m-carousel__ui-next { width: 44px; height: 44px; } .m-carousel__ui-prev { left: -64px; } .m-carousel__ui-next { right: -64px; } .m-carousel__ui-prev-btn::before, .m-carousel__ui-next-btn::before { width: 10px; height: 10px; } .m-carousel__ui-indicator { bottom: -27px; padding: 12px 12px 12px 32px; gap: 32px; } .m-carousel__ui-indicator-list { gap: 24px; } .m-carousel__ui-indicator-item { width: 8px; height: 8px; } .m-carousel__ui-play { width: 30px; height: 30px; } .m-carousel__ui-play:not(.is-pause)::before { width: 8px; height: 12px; border-right-width: 2px; border-left-width: 2px; } .m-carousel__ui-play.is-pause::before { top: 11px; left: 7px; border-top-width: 10px; border-right-width: 6px; border-left-width: 6px; } .m-carousel-02 { margin-top: 70px; } .m-carousel-02__title { margin-bottom: 40px; font-size: 2.4rem; } .m-carousel-02__item { width: 33.3333333333%; } .m-carousel-02__inner-wrapper { width: 81.25%; max-width: 910px; } .m-carousel-02__item-text-link { font-size: 1.6rem; } .m-carousel-02__ui-prev, .m-carousel-02__ui-next { top: -40px; width: 44px; height: 44px; } .m-carousel-02__ui-prev { left: -60px; } .m-carousel-02__ui-next { right: -60px; } .m-carousel-02__ui-prev-btn::before, .m-carousel-02__ui-next-btn::before { width: 10px; height: 10px; } .m-carousel-02__ui-indicator { margin-top: 20px; padding: 12px 12px 12px 32px; gap: 32px; } .m-carousel-02__ui-indicator-list { gap: 24px; } .m-carousel-02__ui-indicator-item { width: 8px; height: 8px; } .m-carousel-02__ui-play { width: 30px; height: 30px; } .m-carousel-02__ui-play:not(.is-pause)::before { width: 8px; height: 12px; border-right-width: 2px; border-left-width: 2px; } .m-carousel-02__ui-play.is-pause::before { top: 11px; left: 7px; border-top-width: 10px; border-right-width: 6px; border-left-width: 6px; } .m-carousel-col1-current-number { margin: 34px auto 0; } html[data-script-enabled=true] .m-carousel-col1-current-number { box-shadow: 0 3px 6px rgba(0, 0, 0, 0); } html[data-script-enabled=true] .m-carousel-col1-current-number__contents { box-shadow: 0 0 24px rgba(51, 51, 51, 0.16); } .m-carousel-col1-current-number__indicator { justify-content: flex-end; margin-top: 24px; padding-bottom: 0; } .m-carousel-col1-current-number__indicator-inner { gap: 24px; } .m-carousel-col1-current-number__number { width: 40px; height: 50px; } .m-carousel-col1-current-number__number-molecule { font-size: 2.4rem; } .m-carousel-col1-current-number__number-denominator { font-size: 1.4rem; } .m-carousel-col1-current-number__btn-btn { width: 50px; height: 50px; } .m-carousel-col1-current-number__btn-btn::before { width: 12px; height: 12px; } .m-modal-carousel__inner { width: 90vw; max-width: 968px; padding: 60px 80px; border-radius: 8px; } .m-modal-carousel__close-btn { top: 17px; right: 20px; width: 22px; height: 22px; } .m-modal-carousel__close-btn::before, .m-modal-carousel__close-btn::after { width: 23px; } .m-modal-carousel__ui { position: absolute; right: 20px; bottom: 30px; } .m-modal-carousel__ui-number { width: 40px; height: 50px; } .m-modal-carousel__ui-number-molecule { left: -12px; font-size: 2.4rem; } .m-modal-carousel__ui-number-denominator { font-size: 1.4rem; } .m-modal-carousel__ui-prev, .m-modal-carousel__ui-next { top: 45%; width: 44px; height: 44px; } .m-modal-carousel__ui-prev { left: 20px; } .m-modal-carousel__ui-next { right: 20px; } .m-modal-carousel__ui-prev-btn::before, .m-modal-carousel__ui-next-btn::before { width: 10px; height: 10px; } .m-tab { margin-top: 50px; } .m-tab__list { justify-content: center; gap: 35px 40px; } .m-tab__item:not(:last-of-type) { padding-right: 40px; } .m-tab__item:not(:last-of-type)::before { height: 34px; } .m-tab__btn { font-size: 2rem; } .m-tab__btn::before { height: 3px; } .m-tab__contents { margin-top: 50px; } .m-tab-parent { margin-top: 70px; } .m-tab-parent__list { gap: 0 12px; } .m-tab-parent__item { width: 32.7777777778%; } .m-tab-parent__btn { padding: 22px 20px 18px; font-size: 2.2rem; } .m-tab-parent__contents { margin-top: 40px; } [data-script-enabled] .fn-icon-scroll-span { display: none; } .m-toggle { margin-top: 60px; gap: 20px; } .m-toggle__item { border-radius: 8px; } .m-toggle__title-text { font-size: 2.4rem; } .m-toggle__title-text a { padding-left: 44px; } .m-toggle__title-text a::before { top: 3px; width: 24px; height: 24px; } .m-toggle__title-text a::after { top: 11px; left: 7px; width: 7px; height: 7px; } .m-toggle__title-text-inner { font-size: 2rem; } .m-toggle__title-sub { font-size: 1.6rem; } .m-toggle__btn { width: 54px; height: 52px; border-radius: 8px; } .m-toggle__btn::before { height: 16px; } .m-toggle__btn::after { width: 16px; } .m-toggle__title-inner { padding: 22px 22px 22px 35px; border-radius: 8px; } .m-toggle__contents-inner { padding: 50px 79px; } .m-modal__inner { padding: 60px 80px; border-radius: 8px; } .m-modal__close-btn { top: 17px; right: 20px; width: 22px; height: 22px; } .m-modal__close-btn::before, .m-modal__close-btn::after { width: 23px; } .align-r-pc { text-align: right !important; } .align-c-pc { text-align: center !important; } .align-l-pc { text-align: left !important; } .pc-hide { display: none !important; } .m-tbl { margin-top: 20px; } .m-tbl-sp-break { margin-top: 20px; } .m-lyt-media[data-col-wide="2"] { grid-template-columns: repeat(2, 1fr); } .m-lyt-media[data-col-wide="3"] { grid-template-columns: repeat(3, 1fr); gap: 40px 35px; } .m-lyt-media[data-col-wide="4"] { grid-template-columns: repeat(3, 1fr); gap: 40px 35px; } .m-lyt-media:not([data-col-wide="1"]) .m-lyt-media__img img { width: 100%; } .m-lyt-media__contents { margin-top: 16px; } .m-lyt-flow .m-lyt-media { margin: 0 50px; } .m-lyt-flow .m-lyt-media__item:not(:last-child) .m-lyt-media__img { position: relative; } .m-lyt-flow .m-lyt-media__item:not(:last-child) .m-lyt-media__img::before { display: block; position: absolute; top: 0; right: -41px; bottom: 0; width: 26px; height: 31px; margin: auto 0; background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/icon-flow-01.svg"); background-size: contain; background-repeat: no-repeat; content: ""; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation { grid-template-columns: 1fr auto 1fr; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation[data-col-wide="3"] { gap: 40px 25px; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation .m-lyt-media__item:nth-child(3n-1) { display: flex; align-items: center; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation .m-lyt-media__item:nth-child(3n-1) .m-lyt-media__contents { padding-top: 40px; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation .m-lyt-media__item:nth-child(3n-1) .m-lyt-media__contents::before { background-size: contain; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation .m-lyt-media__img::before { display: none; } .m-lyt-flow .m-lyt-media[data-col-wide="2"], .m-lyt-flow .m-lyt-media[data-col-wide="3"], .m-lyt-flow .m-lyt-media[data-col-wide="4"] { gap: 40px 50px; } .m-lyt-media__caption { font-size: 1.6rem; } .m-lyt-map { margin-top: 20px; } .m-lyt-map__iframe { aspect-ratio: 3/1; } .m-lyt-map__bottom { margin-top: 15px; } .m-lyt-grid[data-col-wide="2"] { grid-template-columns: repeat(2, 1fr); } .m-lyt-grid[data-col-wide="3"] { grid-template-columns: repeat(3, 1fr); gap: 40px 35px; } .m-lyt-grid[data-col-wide="4"] { grid-template-columns: repeat(3, 1fr); gap: 40px 35px; } .m-lyt-media-index__img { flex-shrink: 0; max-width: 50%; } .m-lyt-media-index__inner { flex-direction: row-reverse; gap: 40px; } .m-lyt-media-index__inner--border .m-lyt-media-index__img { padding-right: 40px; border-right: 1px solid #dedede; } .m-lyt-media-index__inner--reverse-pc { flex-direction: row; } .m-lyt-hdg-contents { gap: 40px; } .m-lyt-hdg-contents[data-col-wide="2"] { grid-template-columns: repeat(2, 1fr); } .m-lyt-hdg-contents[data-col-wide="3"] { grid-template-columns: repeat(2, 1fr); } .m-lyt-hdg-contents__title { border-bottom-width: 6px; border-image-width: 0 0 6px; } .m-lyt-hdg-contents__title-text { font-size: 3rem; } .m-lyt-hdg-contents__contents { margin-top: 40px; } .m-lyt-icon-label[data-col-wide="1"] { flex-direction: column; } .m-lyt-flow { gap: 65px 0; } .m-lyt-flow__item:not(:last-child)::before { bottom: -52px; } .m-form-select__select { --padding-block: 15px; min-width: 270px; padding: var(--padding-block) 50px var(--padding-block) var(--padding-block); font-size: 1.5rem; } .m-form-set__label { font-size: 1.6rem; } .m-form-search { margin-top: 20px; } .m-form-search__input { padding: 28px 35px; font-size: 2rem; } .m-form-search__btn { width: 84px; } .m-form-search__btn img { width: 26px; } .m-form-search-02 { margin: 30px auto 0; } .m-form-search-02__title { padding: 12px 20px; font-size: 1.6rem; } .m-form-search-02__input { padding: 12px; } .m-form-search-02__btn { width: 120px; gap: 10px; } .uq-top-hdg-lv2__title { padding: 0 40px 0 0; font-size: 3.2rem; } html[lang=ja] .uq-top-hdg-lv2__title::before { right: 19px; height: 20px; } .uq-top-hdg-lv2__sub-title { font-size: 2rem; } .uq-top-mv-panel { z-index: 2; position: absolute; right: 24px; bottom: 24px; width: 724px; } .uq-top-mv-panel__item { width: 33.3333333333%; } .uq-top-news .uq-top-box { margin: 0 auto; } .uq-top-news .uq-top-box::before { border-radius: 0 0 0 8px; } .uq-top-news::before { top: 0; aspect-ratio: 800/1400; width: 41%; min-width: 540px; } .uq-top-news::after { top: 0; aspect-ratio: 800/1773; width: 41%; min-width: 540px; background-image: url("https://www.resonac.com/themes/resonac/common/img/top/bg-top-news-01.webp"); background-size: contain; background-repeat: no-repeat; } .uq-top-topics { margin-top: 114px; } .uq-top-topics__inner { width: 90%; max-width: 1280px; margin: 0 auto; } .uq-top-product { position: relative; } .uq-top-product::before { display: block; z-index: -2; position: absolute; top: 180px; right: 0; aspect-ratio: 800/1440; width: 32%; min-width: 540px; max-width: 800px; background-image: url("https://www.resonac.com/themes/resonac/common/img/top/bg-top-product-list-01.webp"); background-size: contain; background-repeat: no-repeat; content: ""; } .uq-top-product__wrap::before { display: block; z-index: -1; position: absolute; top: -22%; left: -6.5%; width: 106.5%; height: 122%; border-radius: 0 0 8px; background-color: #ffffff; content: ""; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0% 100%); } .uq-top-product__inner { position: relative; width: 90%; margin: 94px auto 0; } .uq-top-product__text { margin-top: 19px; font-size: 1.8rem; } .uq-top-product .m-box { margin: 48px auto 0; padding: 54px 5% 44px; } .uq-top-product .m-panel-card-link__list { gap: 26px; } .uq-top-product .m-panel-card-link__text { font-size: 1.6rem; text-align: center; } .uq-top-solution.uq-top-box { margin-top: 93px; } .uq-top-solution.uq-top-box .uq-top-hdg-lv2 { margin-top: 10px; } .uq-top-brand { margin-top: -100px; } .uq-top-brand::before { background-image: url("https://www.resonac.com/themes/resonac/common/img/top/bg-top-brand-hdg-01.webp"); } .uq-top-brand__inner { width: 80%; max-width: 860px; margin: 0 auto; padding-top: 260px; padding-bottom: 110px; } .uq-top-brand__hdg-lv2-title { font-weight: 400; font-size: 4rem; } .uq-top-brand__hdg-lv2-sub-title { margin-top: 16px; font-size: 2rem; } .uq-top-brand__text { margin-top: 34px; } .uq-top-company { width: 90%; margin: 130px auto 0; } .uq-top-company .m-panel-card-02 { margin-top: 60px; } .uq-top-company .m-panel-card-02__list { grid-template-columns: repeat(4, 1fr); gap: 36px; } .uq-top-company .m-panel-card-02__img { aspect-ratio: 386/239; } .uq-top-company .m-panel-card-02__title { margin: 26px 0; } .uq-top-sustainability__parallel { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; } .uq-top-sustainability__parallel-text { margin: 0 20px 0 0; } .uq-top-relation { position: relative; margin-top: 62px; padding: 0 0 66px; } .uq-top-relation::before { display: block; z-index: -3; position: absolute; top: -500px; left: 0; width: 100%; height: 500px; background-color: #f8fbfc; content: ""; } .uq-top-relation::after { display: block; z-index: -3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f8fbfc; content: ""; } .uq-top-brand-list::before { top: 100%; aspect-ratio: 800/700; width: 41%; min-width: 540px; } .uq-top-brand-list::after { top: 100%; aspect-ratio: 800/1236; width: 41%; min-width: 540px; background-image: url("https://www.resonac.com/themes/resonac/common/img/top/bg-top-company-list-01.webp"); background-size: contain; background-repeat: no-repeat; } .uq-top-brand-list__inner { flex-wrap: nowrap; margin: 0; } .uq-top-brand-list__item { width: 33.333%; } .uq-top-brand-list__link::before { right: 24px; bottom: 24px; width: 24px; height: 24px; } .uq-top-brand-list__link::after { right: 33px; bottom: 32px; width: 8px; height: 8px; } .uq-top-brand-list__img { aspect-ratio: 1/1; width: 100%; } .uq-top-brand-list__contents-text { font-size: 2.8rem; } .uq-top-brand-list__contents-sub-text { margin-top: 20px; font-size: 1.4rem; } .uq-top-sustainability-list { margin-top: 64px; } .uq-top-sustainability-list__inner { flex-wrap: nowrap; margin: 0; gap: 28px; } .uq-top-sustainability-list__link::before { right: 16px; bottom: 16px; width: 24px; height: 24px; } .uq-top-sustainability-list__link::after { right: 25px; bottom: 24px; width: 8px; height: 8px; } .uq-top-sustainability-list__contents { bottom: 48px; } .uq-top-sustainability-list__contents-text { margin-top: 16px; font-size: 1.4rem; } .uq-top-box { position: relative; width: 95%; max-width: 1351px; margin: 120px auto 0; padding: 5% 2.5% 2.5%; } .uq-top-box::before { display: block; z-index: -1; position: absolute; top: 0; right: 0; width: 2000px; height: 100%; border-radius: 0 8px 8px 0; background-color: #ffffff; box-shadow: 0 0 24px rgba(51, 51, 51, 0.16); content: ""; } .uq-top-box--flex-end::before { left: 0; border-radius: 8px 0 0 8px; } .uq-top-box-news-tab { height: 100%; margin: 0 auto; background-color: #ffffff; } .uq-top-box-news-tab__head { align-items: center; justify-content: space-between; } .uq-top-box-news-tab__tab-item { padding-right: 16px; padding-left: 16px; } .uq-top-box-news-tab__tab-content { margin-top: 15px; } .uq-top-box-news-tab__link { margin-top: 25px; font-size: 1.8rem; } .uq-top-box-news-tab__link-inner { padding-right: 34px; } .uq-top-box-news-tab__link-inner::before { top: 1px; width: 24px; height: 24px; } .uq-top-box-news-tab__link-inner::after { top: 9px; right: 10px; width: 7px; height: 7px; } .uq-top-box-news-tab .m-list-news__item { display: flex; position: relative; flex-wrap: nowrap; align-items: center; gap: 16px; } .uq-top-box-news-tab .m-list-news__head { gap: 16px; } .uq-top-box-news-tab .m-list-news__text { margin-top: 0; font-size: 1.5rem; } .uq-top-box-news-tab .m-list-news__link { position: initial; } .uq-top-box-news-tab .m-list-news__link::before { right: 25px; } .uq-top-box-news-tab .m-list-news__link::after { right: 35px; } .uq-top-box-news-tab .m-btn-keyword { justify-content: flex-end; margin-top: 30px; } .uq-top-mv-carousel__contents { aspect-ratio: 1920/787; } .uq-top-mv-carousel__item-img-wrap { aspect-ratio: 1920/787; } .uq-top-mv-carousel__item-img { aspect-ratio: 1920/787; } .uq-top-mv-carousel__box { z-index: 2; position: absolute; bottom: 24px; left: 10%; } .uq-top-mv-carousel__btn-inner { padding: 18px 18px 18px 32px; font-size: 1.5rem; } .uq-top-mv-carousel__btn-text { padding: 0 40px 0 0; } .uq-top-mv-carousel__btn-text::before { width: 24px; height: 24px; } .uq-top-mv-carousel__btn-text::after { right: 10px; width: 7px; height: 7px; } .uq-top-mv-carousel__ui { bottom: 30px; left: 30px; } .uq-top-mv-carousel__ui-play { width: 30px; height: 30px; } .uq-top-mv-carousel__ui-play:not(.is-pause)::before { width: 8px; height: 12px; border-right-width: 2px; border-left-width: 2px; } .uq-top-mv-carousel__ui-play.is-pause::before { top: 11px; left: 7px; border-top-width: 10px; border-right-width: 6px; border-left-width: 6px; } .uq-top-topics-carousel { width: 90%; } html[data-script-enabled=true] .uq-top-topics-carousel { position: relative; width: 70%; max-width: 1000px; margin: 40px auto; } .uq-top-topics-carousel__item { width: calc(50% - 10px); } .uq-top-topics-carousel__ui { justify-content: flex-end; margin-top: 30px; } .uq-top-topics-carousel__ui-prev, .uq-top-topics-carousel__ui-next { width: 44px; height: 44px; } .uq-top-topics-carousel__ui-prev { top: -84px; left: -7%; } .uq-top-topics-carousel__ui-next { top: -84px; right: -7%; } .uq-top-topics-carousel__ui-prev-btn::before, .uq-top-topics-carousel__ui-next-btn::before { width: 10px; height: 10px; } .uq-top-topics-carousel__ui-indicator { bottom: -27px; margin: 0 12px 0 0; padding: 12px 12px 12px 32px; gap: 32px; } .uq-top-topics-carousel__ui-indicator-list { gap: 24px; } .uq-top-topics-carousel__ui-indicator-item { width: 8px; height: 8px; } .uq-top-topics-carousel__ui-play { width: 30px; height: 30px; } .uq-top-topics-carousel__ui-play:not(.is-pause)::before { width: 8px; height: 12px; border-right-width: 2px; border-left-width: 2px; } .uq-top-topics-carousel__ui-play.is-pause::before { top: 11px; left: 7px; border-top-width: 10px; border-right-width: 6px; border-left-width: 6px; } .uq-top-topics-carousel .m-panel-card-link-item { padding-bottom: 32px; } .uq-top-topics-carousel .m-panel-card-link-item__tag-category { padding: 4px 14px 6px; font-size: 1.3rem; } .uq-top-topics-carousel .m-panel-card-link-item__tag-new { padding: 6px 16px 4px 24px; font-size: 1.3rem; } .uq-top-topics-carousel .m-panel-card-link-item__index { margin-top: 32px; margin-right: 30px; margin-bottom: 0; padding: 0 36px 0 22px; } .uq-top-topics-carousel .m-panel-card-link-item__index::before { right: 0; } .uq-top-topics-carousel .m-panel-card-link-item__index::after { right: 10px; } .uq-top-topics-carousel .m-panel-card-link-item__title { font-size: 1.8rem; } .uq-corporate-lyt-top { margin-top: 40px; } .uq-corporate-lyt-top__head { padding: 100px 0 200px; } .uq-corporate-lyt-top__head::before { right: -60px; width: calc(100% + 120px); } .uq-corporate-lyt-top__head::after { left: -60px; width: calc(100% + 120px); } .uq-corporate-lyt-top__bottom { margin-top: -200px; } .uq-corporate-lyt-contents { margin-top: 30px; padding-bottom: 80px; } .uq-corporate-hdg-lv2 { margin: 80px auto 0; font-size: 1.8rem; } .uq-corporate-hdg-lv3 { margin: 50px 0 30px; font-size: 3.6rem; } .uq-corporate-hdg-lv3--strong { font-size: 6rem; } .uq-corporate-text-green { margin-top: 25px; font-size: 2rem; line-height: 2; } .uq-ir-list-comparison { max-width: 910px; margin-left: auto; padding-right: 20px; border-bottom-width: 3px; } .uq-ir-list-comparison__inner { align-items: flex-end; justify-content: space-between; gap: 15px; } .uq-ir-list-comparison__title { font-size: 3rem; line-height: 1.2; } .uq-ir-list-comparison__title-inner { padding-right: calc(10px + var(--circle-pc)); } .uq-ir-list-comparison__title-inner::before { top: 7px; width: var(--circle-pc); height: var(--circle-pc); } .uq-ir-list-comparison__title-inner::after { top: 15px; right: 10px; width: 7px; height: 7px; } .uq-ir-list-comparison__text { justify-content: flex-end; gap: 25px; } .uq-ir-list-comparison__text-inner { font-size: 1.8rem; } .uq-ir-list-comparison__text-inner02 { min-width: 10em; font-size: 1.8rem; } .uq-ir-list-comparison__detail { margin-top: 15px; } .uq-ir-list-comparison__detail-list { gap: 30px; } .uq-ir-list-comparison__detail-item { gap: 15px; } .uq-ir-list-comparison__detail-item:not(:first-of-type) { padding-left: 25px; } .uq-ir-list-comparison__detail-item:not(:first-of-type)::before { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; height: 50px; margin: auto 0; background: linear-gradient(#0066c0 0%, #008ac0 55.65%, #00a5c0 100%); content: ""; } .uq-ir-list-comparison__detail-title { font-size: 1.7rem; } .uq-ir-list-comparison__detail-text { font-size: 4rem; } .uq-ir-list-comparison__detail-text sub { font-size: 1.8rem; } .uq-ir-list-comparison--side { max-width: initial; margin-top: 20px; padding: 18px 15px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__inner { flex-direction: column; align-items: flex-start; gap: 10px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__title { font-size: 2.4rem; } .uq-ir-list-comparison--side .uq-ir-list-comparison__title-inner::before { top: 6px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__title-inner::after { top: 11px; right: 6px; width: 5px; height: 5px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__text { align-items: center; justify-content: space-between; gap: 5px 10px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__text-inner { font-size: 1.3rem; } .uq-ir-list-comparison--side .uq-ir-list-comparison__text-inner02 { font-size: 1.4rem; } .uq-ir-list-comparison--side .uq-ir-list-comparison__detail { width: 100%; margin: 10px auto 0; } .uq-ir-list-comparison--side .uq-ir-list-comparison__detail-list { flex-direction: column; gap: 12px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__detail-item { justify-content: space-between; gap: 5px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__detail-item:not(:first-of-type) { padding-left: 0; } .uq-ir-list-comparison--side .uq-ir-list-comparison__detail-item:not(:first-of-type)::before { display: none; } .uq-ir-list-comparison--side .uq-ir-list-comparison__detail-title { font-size: 1.4rem; } .uq-ir-list-comparison--side .uq-ir-list-comparison__detail-text { font-size: 3rem; } .uq-ir-box-news-tab { height: 100%; padding: 45px 70px 40px; background-color: #ffffff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .uq-ir-box-news-tab__head { align-items: center; justify-content: space-between; } .uq-ir-box-news-tab__category-label { font-size: 1.6rem; } .uq-ir-box-news-tab__category-select { --padding-block: 15px; min-width: 270px; padding: var(--padding-block) 50px var(--padding-block) var(--padding-block); font-size: 1.5rem; } .uq-ir-box-news-tab__tab-btn { font-size: 2.2rem; } .uq-ir-box-news-tab__tab-content { margin-top: 20px; } .uq-ir-box-news-tab__link { margin-top: 25px; font-size: 1.8rem; } .uq-ir-box-news-tab__link-inner { padding-right: 34px; } .uq-ir-box-news-tab__link-inner::before { top: 1px; width: 24px; height: 24px; } .uq-ir-box-news-tab__link-inner::after { top: 9px; right: 10px; width: 7px; height: 7px; } .uq-ir-box-download__inner { padding: 30px 40px 40px; } .uq-ir-box-download__title { font-size: 2.2rem; } .uq-ir-box-download__contents { margin-top: 17px; } .uq-ir-btn__icon { width: 40px; height: 40px; } .uq-ir-btn__btn { min-height: 83px; padding: var(--padding-block) 55px var(--padding-block) 35px; font-size: 1.8rem; } .uq-sustainability-hdg-lv2__inner { width: 69.5918367347%; padding-left: 9.2592592593%; } .uq-sustainability-hdg-lv2__title { font-size: 2.9rem; } .uq-sustainability-hdg-lv2__contents { margin-top: 25px; font-size: 1.6rem; } .uq-products-box { margin: 90px auto 0; } .uq-products-box__inner { padding: 45px; gap: 38px; } .uq-products-box__contents { margin-bottom: 20px; } .uq-products-box__item { width: calc(50% - 15px); } .uq-products-btn { justify-content: center; } .uq-products-btn__btn { padding: var(--padding-block) 40px; font-size: 2.2rem; } .uq-products-btn__btn::before { top: 1px; width: 24px; height: 24px; } .uq-products-btn__btn::after { left: 24px; width: 7px; height: 7px; } } /* Careers Page */ /* === Jobs filter bar layout === */ .jobs-filter-bar { display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 25px; flex-wrap: wrap; } /* === Shared dropdown styling === */ .jobs-filter-bar__dropdown { position: relative; display: inline-block; font-family: 'Noto Sans', sans-serif; } .jobs-filter-bar__dropdown select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #F2F8F9; border: 1px solid #ccc; border-radius: 4px; padding: 8px 32px 8px 12px; font-size: 14px; color: #333; cursor: pointer; min-width: 160px; } .jobs-filter-bar__dropdown select:focus { outline: 2px solid #0078A0; outline-offset: 1px; } /* Custom arrow, replacing native select arrow */ .jobs-filter-bar__dropdown::after { content: ""; position: absolute; right: 12px; top: 50%; width: 0; height: 0; border: 5px solid transparent; border-top-color: #333; transform: translateY(-25%); pointer-events: none; } /* === Search box sizing within the bar === */ .jobs-filter-bar__search { display: flex; align-items: center; } /* === Sticky filter bar === */ .jobs-filter-bar { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 12px; background-color: #fff; padding: 12px 0; transition: box-shadow 0.2s ease; } .jobs-filter-bar.is-sticky { position: fixed; top: 141px; left: 0; width: 100%; z-index: 2000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } /* Spacer only takes up space once the bar is pulled out of flow */ .jobs-filter-bar__spacer { height: 0; } .jobs-filter-bar__spacer.is-active { height: var(--jobs-filter-bar-height, 64px); } /* === Job list container === */ .jobs-list-container { width: 80vw; display: flex; flex-direction: column; align-self: center; margin: 0 auto; overflow-y: scroll; } .jobs-list-container__header { display: block; background-color: #00A5C0; padding: 4px 0; } .jobs-list-container__header h4 { margin: 5px 10px; color: #fff; } .m-box__job_card { display: flex; position: relative; flex-direction: column; margin-top: 15px; padding: 30px 20px; overflow: hidden; border-radius: 8px; box-shadow: 0 0 12px rgba(51, 51, 51, 0.16); } .m-box__job_card::before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 6px; border-radius: 8px; background-color: #00a5c0; content: ""; } a.m-box__job_card { display: block; text-decoration: none; color: inherit; } .m-box__contents span { display: flex; flex-direction: row; align-items: center; justify-items: flex-start; text-align: center; font-family: 'Noto Sans', sans-serif; font-size: medium; gap: 10px; } .m-box__contents span p { margin-top: 0; } /* === Job Description container === */ .jd__container { display: flex; flex-direction: row; align-items: flex-start; gap: 32px; max-width: 1200px; margin: 0 auto; user-select: none; } .jd__content { flex: 1; min-width: 0; } .jd__divider { width: 1px; align-self: stretch; background-color: #ddd; flex-shrink: 0; } .jd__actions { display: flex; flex-direction: column; min-width: 180px; flex-shrink: 0; position: sticky; top: 15vh; } .jd__share-btn { width: 100%; cursor: pointer; font: inherit; } .jobs-scroll-sentinel { height: 1px; width: 100%; } @media screen and (max-width: 768px) { .jobs-filter-bar { flex-direction: column; align-items: stretch; } .jobs-filter-bar__dropdown select { width: 100%; } .jobs-filter-bar.is-sticky { top: 90px; } .jobs-list-container { width: 90vw; } .m-box__job_card { margin-top: 10px; } .jd__container { flex-direction: column; gap: 16px; margin: 0px 10px; user-select: none; } .jd__divider { display: none; } .jd__actions { position: static; flex-direction: column; width: 100%; } .jd__actions .m-btn { flex: 1; margin-top: 10px; } .jd__social-placeholder { display: flex; justify-content: center; } } @media screen and (min-width: 769px) and (max-width: 1140px) { .uq-top-mv-panel { position: initial; width: 100%; background-color: #f2f8f9; } .uq-top-mv-panel__inner { width: 724px; margin: 0 auto; padding: 20px; } .uq-top-mv-carousel__box:has(+ .uq-top-mv-panel) { bottom: 315px; } } @media screen and (min-width: 769px) and (max-width: 1600px) { html[lang=ja] { font-size: 55.56%; } } @media screen and (min-width: 769px) and (max-width: 950px) { .uq-top-company .m-panel-card-02__list { grid-template-columns: repeat(2, 1fr); } .uq-top-sustainability-list__inner { display: grid; grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 769px) and (min-width: 1730px) { .m-link-cv__text { font-size: 1.5rem; } } @media screen and (min-width: 769px) and (min-width: 769px) { .m-box-cv-product--only-content .m-box-cv-product__contents { padding: 59px 40px 20px 30px; } .str-section--padding-wide .m-panel-card-02--bg-strong::before { left: -120px; width: calc(100% + 240px); } } @media screen and (min-width: 1101px) { :target { scroll-margin-top: 141px; } .str-header:not(.str-header--simple) { height: 141px; } .str-header__search { display: flex; position: relative; align-items: center; justify-content: center; width: 40px; height: 40px; border: solid 1px #00a5c0; border-radius: 1000px; background: transparent; transition: 0.3s; } .str-header__search:hover, .str-header__search:focus, .str-header__search:active { background: #e4eff1; } .str-header__search-content { padding: 31px 40px 70px; } .str-header__search-content-wrap { z-index: 10; position: absolute; top: 71px; right: 0; width: 100%; max-width: 552px; overflow: hidden; border-radius: 0 0 8px 8px; background: #ffffff; box-shadow: 0 6px 3px 0 rgba(51, 51, 51, 0.16); transition: 0.3s ease; } .str-header__search-input { border: solid 1px #ededed; box-shadow: 0 0 24px rgba(51, 51, 51, 0.08); } .str-header__search-text { color: #06363e; font-size: 1.4rem; } .str-header__language { display: flex; position: relative; align-items: center; padding-right: 28px; background: transparent; transition: 0.3s; } .str-header__language:hover, .str-header__language:focus, .str-header__language:active { color: #00a5c0; } .str-header__language:hover .str-header__language-icon, .str-header__language:focus .str-header__language-icon, .str-header__language:active .str-header__language-icon { filter: brightness(1); } .str-header__language::before { display: block; z-index: 1; position: absolute; right: 10px; bottom: 10px; width: 6px; height: 6px; transform: rotate(135deg) translate(0, 0); border-top: solid 1.5px #92aaac; border-right: solid 1.5px #92aaac; content: ""; transition: 0.3s; } .str-header__language-hdg { padding-left: 15px; font-size: 1.7rem; } .str-header__language-list { padding: 29px 56px 44px 52px; } .str-header__language-list-wrap { z-index: 10; position: absolute; top: 71px; right: 0; width: 100%; max-width: 1100px; overflow: hidden; border-radius: 0 0 8px 8px; background: #ffffff; box-shadow: 0 6px 3px 0 rgba(51, 51, 51, 0.16); transition: 0.3s ease; } .str-header__language-dl { display: flex; flex-wrap: wrap; margin-right: -46.5px; } .str-header__language-ul { display: flex; margin-top: 14px; } .str-header__language-li { padding-left: 13.5px; } .str-header__language-li::before { left: 0; } .str-header__language-li:nth-child(n+2) { margin-left: 33.5px; } .str-header__language-items { width: 100%; padding-bottom: 16.5px; } .str-header__language-items:nth-child(n+2) { max-width: calc(33.3333333333% - 46.5px); margin-right: 46.5px; padding-top: 17.5px; } .str-header__language-anchor { font-size: 1.6rem; } .str-header__language-icon { margin-right: 2px; filter: brightness(0); transition: 0.3s; } .str-header__main { display: flex; align-items: center; justify-content: space-between; } .str-header__main-content { flex-shrink: 0; user-select: none; } .str-header__main-contents { display: flex; align-items: center; justify-content: flex-end; width: 100%; padding: 13px 62px 17px 0; user-select: none; } .str-header__main-search:not(.is-active) .str-header__search-content { display: none; } .str-header__main-search.is-active .str-header__search-content { display: block; } .str-header__main-details { display: flex; align-items: center; gap: 5px; } .str-header__main-contact { position: relative; } .str-header__copyright { flex-shrink: 0; margin-left: 35.5px; font-size: 2rem; user-select: none; } .str-header__logo { flex-shrink: 0; padding: 16px 40px 12px; border-right: solid 2px #dedede; line-height: 1; } .str-header__contact { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 24px; border: solid 1px #00a5c0; border-radius: 1000px; background: transparent; transition: 0.3s; } .str-header__contact:hover, .str-header__contact:focus, .str-header__contact:active { background: #e4eff1; } .str-header__contact-text { color: transparent; font-size: 0; } .str-header__contact-icon { transform: translate(0, 8px); } .str-header__hamburger { display: none; } .str-nav { position: absolute; top: 71px; left: 0; width: 100%; padding: 19px 43px; } .str-nav__container { display: flex; z-index: 10000; position: absolute; left: 0; width: 100%; overflow: hidden; border-radius: 0 0 8px 8px; background: #ffffff; box-shadow: 0 6px 3px 0 rgba(51, 51, 51, 0.16); transition: 0.3s ease; } .str-nav__contents { position: relative; width: 100%; padding: 33px 30px 64px; } .str-nav__contents-text { margin: 0 0 12px; font-size: 1.6rem; } .str-nav__list { width: 100%; } .str-nav__list--w-sm { width: 35%; } .str-nav__list--border-left { position: relative; padding-left: 40px; } .str-nav__list--border-left::before { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #dedede; content: ""; } .str-nav__list--col-02 .str-nav__list-items { max-width: calc(50% - 30px); } .str-nav__list-items { width: 100%; border-bottom: solid 1px #92aaac; } .str-nav__list-des-dd { margin-top: 24px; } .str-nav__list-ul { display: flex; flex-wrap: wrap; gap: 24px 30px; } .str-nav__list-ul--col[data-col="2"] .str-nav__list-items { max-width: calc(50% - 15px); } .str-nav__list-ul--col[data-col="3"] .str-nav__list-items { max-width: calc(33.3333333333% - 20px); } .str-nav__list--col { display: flex; align-items: baseline; gap: 24px 30px; } .str-nav__list--col[data-col="2"] .str-nav__list-ul { max-width: calc(50% - 15px); } .str-nav__list--col[data-col="3"] .str-nav__list-ul { max-width: calc(33.3333333333% - 20px); } .str-nav__list-anchor { color: #333333; font-size: 1.6rem; transition: 0.3s; } .str-nav__list-anchor:hover, .str-nav__list-anchor:focus, .str-nav__list-anchor:active { color: #00a5c0; } .str-nav__list-media { margin-top: 14px; } .str-nav__list-media-ul { display: flex; } .str-nav__list-media-items { width: 220px; } .str-nav__list-media-items:nth-of-type(n+2) { margin-left: 40px; } .str-nav__list-media-anchor:hover .str-nav__text-content, .str-nav__list-media-anchor:focus .str-nav__text-content, .str-nav__list-media-anchor:active .str-nav__text-content { color: #00a5c0; } .str-nav__nav-anchor { display: inline-block; position: relative; padding-right: 16px; } .str-nav__nav-anchor-text { display: inline-block; background: linear-gradient(#64787a, #64787a) 0 100%/0 1px no-repeat; color: #333333; font-size: 1.8rem; transition: 0.3s; } .str-nav__nav-anchor::before { display: block; z-index: 1; position: absolute; right: 0; bottom: 10px; width: 6px; height: 6px; transform: rotate(135deg) translate(0, 0); border-top: solid 1.5px #92aaac; border-right: solid 1.5px #92aaac; content: ""; transition: 0.3s; } .str-nav__nav-anchor:not(.js-header-dropdown) { padding-right: 0; } .str-nav__nav-anchor:not(.js-header-dropdown)::before { display: none; } .str-nav__nav-anchor:hover .str-nav__nav-anchor-text, .str-nav__nav-anchor:focus .str-nav__nav-anchor-text, .str-nav__nav-anchor:active .str-nav__nav-anchor-text { background-size: 100% 1px; color: #64787a; } .str-nav__nav-ul { display: flex; justify-content: flex-end; } .str-nav__nav-items { margin-left: 48px; } .str-nav__nav-items:first-of-type { margin-left: 0; } .str-nav__nav-items.is-active .str-nav__nav-anchor-text { background-size: 100% 1px; } .str-nav__nav-items.is-active .str-nav__nav-anchor::before { transform: rotate(318deg) translate(-2px, 2px); } .str-nav__nav-items.is-current .str-nav__nav-anchor-text { background: linear-gradient(#00a5c0, #00a5c0) 0 100%/0 1px no-repeat; background-size: 100% 1px; color: #00a5c0; font-weight: 700; } .str-nav__content { display: flex; width: 100%; max-width: 1232px; gap: 0 40px; } .str-nav__hdg { display: inline-block; position: relative; padding: 0 36px 0 0; font-size: 2.2rem; } .str-nav__hdg::before { display: block; position: absolute; right: 0; bottom: -6px; width: 22px; height: 22px; transform: translate(0, -50%); border: solid 1px #92aaac; border-radius: 1000px; content: ""; } .str-nav__hdg::after { display: block; z-index: 1; position: absolute; right: 12px; bottom: 11px; width: 6px; height: 6px; transform: rotate(45deg) translate(0, -50%); border-top: solid 1.5px #92aaac; border-right: solid 1.5px #92aaac; content: ""; } .str-nav__hdg-content { display: flex; align-items: center; justify-content: center; width: 33%; min-width: 250px; max-width: 468px; background: #e4eff1; } .str-nav__hdg-anchor { transform: translateY(-10px); color: #333333; } .str-nav__hdg--details { display: block; color: #00a5c0; font-size: 1.5rem; } .str-nav__img-content { overflow: hidden; border-radius: 8px; } .str-nav__img-content > img { width: 100%; } .str-nav__text-content { position: relative; margin-top: 8px; padding-right: 22px; color: #333333; font-size: 1.6rem; transition: 0.3s; } .str-nav__text-content::before { display: block; position: absolute; top: 14px; right: 0; width: 22px; height: 22px; transform: translate(0, -50%); border: solid 1px #92aaac; border-radius: 1000px; content: ""; } .str-nav__text-content::after { display: block; z-index: 1; position: absolute; top: 13px; right: 11px; width: 6px; height: 6px; transform: rotate(45deg) translate(0, -50%); border-top: solid 1.5px #92aaac; border-right: solid 1.5px #92aaac; content: ""; } .str-nav__text-03 { display: block; position: relative; width: 100%; padding-bottom: 16px; padding-left: 13px; border-bottom: solid 1px #92aaac; font-size: 1.7rem; } .str-nav__text-03::before { display: block; position: absolute; top: 0; left: 0; width: 4px; height: 29px; border-radius: 4px; background: #00a5c0; content: ""; } .str-nav__btn { position: absolute; right: 20px; bottom: 20px; padding-left: 30px; background: transparent; font-size: 1.4rem; } .str-nav__btn::before { display: block; position: absolute; top: 8px; left: -4px; width: 24px; height: 1px; transform: rotate(45deg); background: #333333; content: ""; } .str-nav__btn::after { display: block; position: absolute; top: 8px; left: -4px; width: 24px; height: 1px; transform: rotate(-45deg); background: #333333; content: ""; } .str-breadcrumb { padding: 0 var(--header-nav-padding-right) 0 2.5%; } .str-breadcrumb--second-col2 { width: 69.6%; margin-left: auto; } .str-section--bg-sustainability::before { display: block; z-index: -1; position: absolute; top: 0; right: 0; left: 0; width: 100%; max-width: 1920px; height: 100%; margin: 0 auto; background-image: url("https://www.resonac.com/themes/resonac/common/img/sustainability/bg-sustainability-hdg-lv2-01.webp"); background-position: top right; background-repeat: no-repeat; content: ""; } .str-section__inner--col2 { display: flex; gap: 5%; } .str-section__side-nav { position: relative; flex-shrink: 0; width: 25%; min-width: 400px; } .str-section__main { width: 70%; max-width: 1120px; } .str-section-second-col2 { gap: 2.5%; } .str-section-second-col2__title { width: 30%; } .str-section-second-col2__contents { width: 67.5%; user-select: none; } .str-side-nav { margin-top: -60px; } .str-footer__sns-items:nth-of-type(n+2) { margin-left: 32px; } .str-footer__sns + .str-footer__list { margin-top: 40px; } .str-footer__copyright { padding: 28px 20px; } .m-hdg-lv1-article { margin-bottom: 100px; } .m-hdg-lv1-article__head { max-width: 1920px; margin: 0 auto; padding: 50px 160px 60px; } .m-hdg-lv1-article__head::before { left: calc(-100% - 20px); width: calc(100% + 160px); height: 215px; background: linear-gradient(-90deg, #00a5c0 0%, #0091c0 3%, #0066c0 8%, #0066c0 100%); } .m-hdg-lv1-article__head::after { display: block; position: absolute; right: calc(-100% - 85px); bottom: -8%; width: calc(100% + 168px); height: 215px; transform: skewX(-16deg); transform-origin: top; border-top-left-radius: 4px; background: linear-gradient(90deg, #00a5c0 0%, #0091c0 3%, #0066c0 8%, #0066c0 100%); content: ""; } .m-hdg-lv1-article__head--has-category { padding-top: 35px; } .m-hdg-lv1-article__head--has-category-02 { margin-bottom: 0; } .m-hdg-lv1-article--no-img { margin-bottom: 0; } .m-hdg-lv1-article--no-img .m-hdg-lv1-article__head { padding-bottom: 60px; } .m-hdg-lv1-article__head-inner { max-width: 1440px; } .m-hdg-lv1-article__bottom { max-width: 1760px; margin: 0 auto; padding: 0 160px; } .m-hdg-lv1-article__img { aspect-ratio: 1440/350; overflow: hidden; } .m-hdg-lv1-article__img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .m-hdg-lv1-second { max-width: 570px; } .m-hdg-lv1-second::before { top: -50px; left: -60px; width: calc(100% + 60px); height: calc(100% + 170px); background-position: bottom right; } .m-hdg-lv1-second--corporate::before { max-height: 838px; background-image: url("../Images/bg-corporate-hdg-01.webp"); } .m-hdg-lv1-second--sustainability::before { background-image: url("../Images/bg-sustainability-hdg-01.webp"); } .m-hdg-lv1-second--rd::before { height: calc(100% + 110px); background-image: url("https://www.resonac.com/themes/resonac/common/img/rd/bg-rd-hdg-01.webp"); } .m-hdg-lv1-second--ir::before { height: calc(100% + 100px); background-image: url("https://www.resonac.com/themes/resonac/common/img/ir/bg-ir-hdg-01.webp"); } .m-hdg-lv1-second--products::before { height: calc(100% + 100px); background-image: url("../Images/bg-products-hdg-01.webp"); } .m-hdg-lv1-second--career::before { background-image: url("../Images/careerhome.png"); } .m-hdg-lv1-second__inner { padding: 130px 30px 130px 10px; } .m-box-document .m-btn__btn { min-width: clamp(250px, 23vw, 400px); padding: 20px 50px 20px 20px; font-size: clamp(1.5rem, 1.5vw, 2.3rem); } .m-btn-parallel[data-col-wide="3"] { grid-template-columns: repeat(3, 1fr); } .m-btn-parallel-02[data-col-wide="4"] { grid-template-columns: repeat(4, 1fr); } .m-list-ranking__list { grid-template-columns: repeat(5, 1fr); } .m-box-document { padding: 95px 5% 0; } .m-box-document__inner { display: flex; justify-content: center; gap: 0 30px; } .m-box-document__hdg { max-width: 487px; font-size: 2.8rem; } .m-box-document__img { aspect-ratio: 382/342; min-width: 242px; max-width: clamp(242px, 23vw, 382px); } .m-box-document__img > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .m-box-document__item { width: 50%; max-width: 400px; margin: 0 auto 80px; } .m-box-document__item:nth-child(odd) { width: calc(50% + 30px); max-width: 460px; padding-right: 30px; border-right: solid 1px #dedede; } .m-box-document__item-text { margin-top: 15px; } .m-box-document__item-text-wrap { margin-bottom: 25px; } .m-box-document__item-lead { font-size: 1.8rem; } .m-box-document__item-lead--em { font-size: clamp(1.8rem, 1.8vw, 2.6rem); } .m-box-document--single-cv .m-box-document__item, .m-box-document--single-document .m-box-document__item { width: 100%; max-width: initial; } .m-box-document--single-cv .m-box-document__item:nth-child(odd), .m-box-document--single-document .m-box-document__item:nth-child(odd) { padding-right: 0; border-right: none; } .m-box-document--single-cv .m-box-document__item-lead, .m-box-document--single-document .m-box-document__item-lead { text-align: left; } .m-box-document--single-cv .m-box-document__btn, .m-box-document--single-document .m-box-document__btn { flex-shrink: 0; margin-bottom: 60px; } .m-box-document--single-cv { padding: 95px 5% 0 8.5%; } .m-box-document--single-cv .m-box-document__inner { align-items: center; } .m-box-document--single-cv .m-box-document__item-lead--em { font-size: 2rem; } .m-box-document--single-document .m-box-document__inner { align-items: center; justify-content: space-between; } .m-box-document--single-document .m-box-document__img { max-width: clamp(200px, 23vw, 280px); } .m-box-document--single-document .m-box-document__item-lead--em { font-size: clamp(2rem, 2vw, 3rem); } .m-box-cv__item { width: 31.625%; } .m-box-cv-product__contents { gap: 0 30px; } .m-panel-card-link__list { grid-template-columns: repeat(4, 1fr); } .m-panel-lyt__list { grid-template-columns: repeat(3, 1fr); } .str-nav__nav-items .js-header-dropdown-hook { display: none; } .str-nav__nav-items.is-active .js-header-dropdown-hook { display: flex; } .m-carousel__item { width: 33.3333333333%; } .m-carousel__inner-wrapper { width: 82.375%; max-width: 1318px; } .m-carousel__inner-wrapper--col2 { width: 79.8181818182%; max-width: 878px; } .m-carousel__inner-wrapper--col2 .m-carousel__item { width: 50%; } .m-carousel-02__item { width: 25%; } .m-carousel-02__inner-wrapper { width: 90.625%; max-width: 1160px; } .m-lyt-media[data-col-wide="4"] { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; } .m-lyt-flow .m-lyt-media { margin: 0 70px; } .m-lyt-flow .m-lyt-media__item:not(:last-child) .m-lyt-media__img::before { right: -57px; width: 38px; height: 46px; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation[data-col-wide="3"] { gap: 40px 50px; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation .m-lyt-media__item:nth-child(3n-1) .m-lyt-media__contents { padding-top: 60px; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation .m-lyt-media__item:nth-child(3n-1) .m-lyt-media__contents::before { width: 38px; height: 46px; } .m-lyt-flow .m-lyt-media[data-col-wide="2"], .m-lyt-flow .m-lyt-media[data-col-wide="3"], .m-lyt-flow .m-lyt-media[data-col-wide="4"] { gap: 40px 70px; } .m-lyt-grid[data-col-wide="4"] { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; } .m-lyt-hdg-contents[data-col-wide="3"] { grid-template-columns: repeat(3, 1fr); } .m-lyt-flow { gap: 75px 0; } .m-lyt-flow__item:not(:last-child)::before { bottom: -65px; width: 38px; height: 46px; } .uq-top-relation .m-carousel-02__inner-wrapper { width: 80%; } .uq-ir-lyt-col2 { gap: 2.9375%; } .uq-ir-lyt-col2__top { width: 72.0625%; } .uq-ir-lyt-col2__bottom { width: 25%; } .uq-ir-lyt-col2--medium { gap: 3.2638888889%; } .uq-ir-lyt-col2--medium .uq-ir-lyt-col2__top { width: 68.9583333333%; } .uq-ir-lyt-col2--medium .uq-ir-lyt-col2__bottom { width: 27.7777777778%; } .uq-ir-list-comparison--side { padding: 18px 28px; } .uq-ir-list-comparison--side .uq-ir-list-comparison__detail { width: 82.6086956522%; } } @media screen and (min-width: 1101px) and (max-width: 1600px) { html[lang=ja] .str-header:not(.str-header--simple) { height: 138px; } } @media screen and (min-width: 1141px) { .uq-top-mv-panel__list { justify-content: flex-end; } } @media screen and (min-width: 1200px) { .uq-top-sustainability-list__item { width: 33.333%; } } @media screen and (min-width: 1350px) { .uq-ir-list-comparison { padding: 0 0 20px 45px; } } @media screen and (min-width: 1422px) { .uq-top-box { padding: 64px 32px 32px; } } @media screen and (min-width: 1441px) { .m-hdg-lv1__inner { padding: 30px 105px 35px 0; transform: translateX(35px); } .m-box-document__inner { gap: 0 60px; } .m-box-document__item:nth-child(odd) { width: calc(50% + 60px); padding-right: 60px; } } @media screen and (min-width: 1600px) { .m-panel-card-link-item-02__box { padding: 16px 0 16px 16px; } .uq-top-brand::before { height: 100%; } } @media screen and (min-width: 1601px) { .str-nav__container { top: 70px; } .str-breadcrumb { padding: 0 var(--header-nav-padding-right) 0 40px; } .str-breadcrumb--second-col2 { width: 66%; min-width: 1114px; max-width: 1340px; } } @media screen and (min-width: 1780px) { .str-nav__contents { padding: 34px 30px 64px 50px; } .str-nav__list-media-items { width: 250px; } } @media screen and (min-width: 1920px) { .str-nav__contents { padding: 42px 40px 60px 60px; } .str-nav__list-media-items { width: 280px; } } @media screen and (max-width: 1600px) { .str-nav__container { top: 66px; } } @media screen and (max-width: 1340px) { .uq-ir-list-comparison__inner { display: block; } } @media screen and (max-width: 1100px) { .str-header__language { position: relative; width: 100%; margin-top: 20px; padding: 14px 56px 14px 12px; border-radius: 4px; background: #ffffff; text-align: left; } .str-header__language::before { display: block; position: absolute; top: 0; right: 0; width: 44px; height: 44px; border-radius: 0 4px 4px 0; background: #00a5c0; content: ""; } .str-header__language::after { display: block; z-index: 1; position: absolute; top: 50%; right: 18px; width: 8px; height: 8px; transform: rotate(138deg) translate(-50%, 40%); border-top: solid 2px #ffffff; border-right: solid 2px #ffffff; content: ""; transition: 0.3s; } .str-header__language-hdg { padding-left: 7px; font-size: 1.2rem; } .str-header__language-list { padding: 10.5px 19px 16px; } .str-header__language-list-wrap { z-index: 10; overflow: hidden; border-radius: 0 0 8px 8px; background: #ffffff; transition: 0.3s ease; } .str-header__language-ul { padding-bottom: 9.5px; } .str-header__language-li { padding: 3px 12.5px 0; } .str-header__language-li + .str-header__language-li { padding: 5.5px 12.5px 0; } .str-header__language-li::before { left: 4px; } .str-header__language-items:nth-child(n+2) { padding-top: 8px; } .str-header__language-anchor { font-size: 1.3rem; } .str-header__language-icon { display: none; } .str-header__main-content { display: flex; z-index: 1; position: relative; justify-content: space-between; width: 100%; background-color: #ffffff; user-select: none; } .str-header__main-contents { z-index: 0; position: absolute; top: 0; width: 100%; max-height: 100vh; max-height: 100vh; padding-top: 100px; overflow: auto; transition: 0.3s ease; user-select: none; } .str-header__main.is-active .str-header__main-contents { display: block; } .str-header__main:not(.is-active) .str-header__main-contents { display: none; } .str-header__main-details { display: flex; flex-direction: column-reverse; padding: 24px 27px 130px; background: #e4eff1; } .str-header__main-contact { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; margin: 0 auto; padding: 14px 13px; border-radius: 27px; background: #00a5c0; } .str-header__main-language.is-active .str-header__language::after { display: block; position: absolute; transform: rotate(315deg) translate(10%, 0%); content: ""; } .str-header__main-language { display: none; } .str-header__copyright { z-index: 1; position: relative; padding: 5px 15px 8px; background: #f1f1f1; user-select: none; } .str-header__logo { padding: 16px 20px 10px; line-height: 1; } .str-header__logo-img { width: 112px; } .str-header__search { display: none; } .str-header__search-content { margin-top: 20px; } .str-header__search-text { display: none; } .str-header__contact { background: transparent; } .str-header__contact-text { color: #ffffff; } .str-header__contact-icon { transform: translate(0, 6px); } .str-nav__nav-ul { padding: 0 20px; background: #ffffff; } .str-nav__nav-items { background: #ffffff; } .str-nav__nav-items:nth-of-type(n+2) { border-top: solid 1px #ededed; } .str-nav__nav-anchor { display: block; position: relative; width: 100%; padding: 14px 26px 20px 6.5px; color: #333333; font-size: 1.5rem; } .str-nav__nav-anchor::before { display: block; position: absolute; top: 50%; right: 0; width: 22px; height: 22px; transform: translate(0, -50%); border: solid 1px #92aaac; border-radius: 1000px; content: ""; } .str-nav__nav-anchor::after { display: block; z-index: 1; position: absolute; top: 49%; right: 11px; width: 6px; height: 6px; transform: rotate(45deg) translate(0, -50%); border-top: solid 1.5px #92aaac; border-right: solid 1.5px #92aaac; content: ""; } .str-nav__btn { display: none; } .str-section-second-col2 { flex-direction: column; } .str-footer__sns-items:nth-of-type(n+2) { margin-left: 16px; } .str-footer__copyright { padding: 21px; } .m-hdg-lv1-second::before { left: -60px; width: calc(100% + 120px); background-position: center; } .m-hdg-lv1-second--corporate::before { background-image: url("../Images/bg-corporate-hdg-01-sp.webp"); } .m-hdg-lv1-second--sustainability::before { background-image: url("../Images/bg-sustainability-hdg-01-sp.webp"); } .m-hdg-lv1-second--rd::before { background-image: url("https://www.resonac.com/themes/resonac/common/img/rd/bg-rd-hdg-01-sp.webp"); } .m-hdg-lv1-second--ir::before { background-image: url("https://www.resonac.com/themes/resonac/common/img/ir/bg-ir-hdg-01-sp.webp"); } .m-hdg-lv1-second--products::before { background-image: url("../Images/bg-products-hdg-01-sp.webp"); } .m-hdg-lv1-second--career::before { background-image: url("../Images/careerhome.png"); } .m-box-document__hdg { max-width: 200px; font-size: 1.6rem; } .m-box-document__img { max-width: 242px; margin: 0 auto 20px; } .m-box-document__item:nth-child(odd) { margin-bottom: 25px; padding-bottom: 25px; border-bottom: solid 1px #dedede; } .m-box-document__btn { margin-top: 20px; } .m-box-document--single-cv .m-box-document__item:nth-child(odd), .m-box-document--single-document .m-box-document__item:nth-child(odd) { padding-bottom: 0; border-bottom: none; } .m-box-cv__list { flex-wrap: wrap; } .m-box-cv-product { flex-wrap: wrap; } .str-header__hamburger { position: relative; width: 58px; height: 58px; background: #e4eff1; } .str-header__hamburger-text { position: absolute; top: 50%; left: 50%; width: 20px; height: 14px; transform: translate(-50%, -50%); border-top: solid 2px #00a5c0; border-bottom: solid 2px #00a5c0; color: transparent; font-size: 0; transition: 0.3s; } .str-header__hamburger-text::before, .str-header__hamburger-text::after { display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; transform: translate(0, -50%); background: #00a5c0; content: ""; transition: 0.3s; } .str-nav__nav-items .js-header-dropdown-hook { display: none; } .uq-ir-lyt-col2 { flex-direction: column; } .uq-ir-lyt-col2--medium { flex-direction: column; } .uq-ir-list-comparison--side .uq-ir-list-comparison__contents { max-width: 300px; margin: 0 auto; } .uq-sustainability-hdg-lv2::before { display: block; z-index: -1; position: absolute; top: -40px; right: -15px; left: -15px; width: calc(100% + 30px); max-width: 1920px; height: calc(84.1176470588% + 40px); margin: 0 auto; background-image: url("https://www.resonac.com/themes/resonac/common/img/sustainability/bg-sustainability-hdg-lv2-01.webp"); background-position: center left; background-size: cover; background-repeat: no-repeat; content: ""; } } @media screen and (max-width: 768px) { .str-header__main-contents { padding-top: 93px; user-select: none; } .str-section__inner--bg-color-blue { margin: -35px -15px 0; } .str-section-second-col2__contents { padding-top: 22px; user-select: none; } .str-footer__list-items { font-size: 1.2rem; } .str-footer__list-anchor { color: #738c91; } .str-footer__list-ul { flex-wrap: wrap; gap: 10px; } .str-footer__list-items { width: 100%; max-width: calc(50% - 10px); } .str-footer__list-items--content-full { max-width: initial; } .str-footer__contents { padding: 30px 16px 18px; } .m-hdg-lv1-second::before { left: -15px; width: calc(100% + 30px); } .m-hdg-challenge-resolution { margin-top: 30px; } .m-hdg-challenge-resolution::before { top: calc(50% - 2px); height: 4px; } .m-hdg-challenge-resolution__title { max-width: 155px; padding: 8px; font-size: 1.7rem; } .m-hdg-challenge-resolution__p { margin-top: 25px; } .m-hdg-challenge-resolution__link::before { top: 5px; left: 0; width: 16px; height: 16px; } .m-hdg-challenge-resolution__link::after { top: 10px; left: 4px; width: 5px; height: 5px; } p { line-height: 1.6; } .m-text-label { font-size: 1.4rem; } .m-text-label__label { display: block; max-width: 116px; margin-bottom: 5px; padding: 4px 12px; } .m-link-list[data-col="1"] { grid-template-columns: 100%; gap: 10px 0; } .m-link-list[data-col="2"] { grid-template-columns: repeat(2, 1fr); gap: 10px 25px; } .m-link-list-anchor__num { flex-shrink: 0; } .m-link-list-toc__link-text::before { top: 2px; left: 0; width: 18px; height: 18px; } .m-link-list-toc__link-text::after { top: 8px; left: 6px; } .m-link-list-toc { margin-top: 25px; padding: 19px 20px; } .m-link-list-toc__list { margin-top: 20px; } .m-link-list-toc__list-nest { margin-left: 15px; } .m-link-list-toc__item-nest { margin-top: 10px; } .m-link-list-toc__dt { padding-bottom: 16.5px; border-bottom: solid 1px #d9e7e9; font-size: 1.6rem; text-align: center; } .m-link-list-label__text { color: #0066c0; text-decoration: underline; } .m-link-list-label__anchor { font-size: 1.4rem; } .m-link-cv { transform-origin: center bottom; animation: cv-animation-sp 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .m-link-cv__link { height: 100%; } .m-link-cv { bottom: -1px; left: 0; width: 100%; margin-top: -77px; } .m-link-cv__item { width: 100%; } .m-link-cv__item:nth-of-type(n+2) { border-left: solid 1px #ffffff; } .m-link-cv__list { display: flex; width: 100%; background-color: #ffffff; } .m-link-cv__link { padding: 7px; } .m-link-cv__text { margin-top: 3px; font-weight: 700; font-size: 1.5rem; line-height: 1.3; text-align: center; } .m-link-cv__img { width: 34px; height: 34px; } .m-link-cv__img-icon { width: 18px; } .m-btn__text > em { font-weight: 400; } .m-btn__btn--size-large .m-btn__icon-img { max-width: 13px; } .m-btn__btn--tel.m-btn__btn--size-large .m-btn__icon-img { max-width: 17px; } .m-btn-parallel[data-col="1"] { grid-template-columns: 100%; gap: 10px 0; } .m-btn-parallel-02[data-col="1"] { grid-template-columns: 100%; } .m-btn-parallel-02[data-col="2"] { grid-template-columns: repeat(2, 1fr); } .m-btn-parallel-02[data-col=auto] { display: flex; flex-wrap: wrap; gap: 10px 15px; } .uq-corporate-ul-carousel-keyword .m-btn-keyword { width: max-content; } .m-list[data-col="1"] { grid-template-columns: 100%; gap: 10px 0; } .m-list-label-product__item { flex-flow: wrap column; } .m-box-cv__list { flex-direction: column; } .m-box-cv__item--contact { background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/bg-box-cv-01-sp.webp"); } .m-box-cv__item--download { background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/bg-box-cv-02-sp.webp"); } .m-box-cv__item--mail { background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/bg-box-cv-03-sp.webp"); } .m-box-simple--sp-wide-full { margin-right: -15px; margin-left: -15px; } .m-box-cv-product__btn { margin-top: 20px; } .m-box-cv-product__tel { padding-right: 40px; } .m-box-cv-product__text-sm { text-align: center; } .m-box-cv-product__contents { flex-direction: column; } .m-box-cv-product__wrap { padding: 0 20px; } .m-box-cv-product__wrap .m-box-cv-product__contents { padding: 15px 0 20px; } .m-panel-card-link__inner { display: flex; align-items: center; } .m-panel-card-link__index { width: 60.9375%; padding: 0 25px 0 16px; } .m-panel-card-link__img { width: 39.0625%; } .m-panel-card-link__text { height: 100%; } .m-panel-card-link-item-02 { flex-direction: column; gap: 15px; } .m-carousel-col1-current-number { margin-top: 14px; border-radius: 8px; } html[data-script-enabled=true] .m-carousel-col1-current-number { box-shadow: 0 0 24px rgba(51, 51, 51, 0.16); } .m-modal-carousel__inner { max-width: 500px; } .m-modal-carousel__ui { display: flex; justify-content: center; } .align-r-sp { text-align: right !important; } .align-c-sp { text-align: center !important; } .align-l-sp { text-align: left !important; } .w-sp-5 { width: 5% !important; } .w-sp-10 { width: 10% !important; } .w-sp-15 { width: 15% !important; } .w-sp-20 { width: 20% !important; } .w-sp-25 { width: 25% !important; } .w-sp-30 { width: 30% !important; } .w-sp-35 { width: 35% !important; } .w-sp-40 { width: 40% !important; } .w-sp-45 { width: 45% !important; } .w-sp-50 { width: 50% !important; } .w-sp-33-3 { width: 33.3% !important; } .sp-hide { display: none !important; } .mt-sp-30 { margin-top: 30px; } .m-tbl__tbl { min-width: 884px; } .m-tbl th, .m-tbl td { font-size: 1.6rem; } .m-tbl th.m-tbl__th--sticky { z-index: 1; position: sticky; left: 0; } .m-tbl th.m-tbl__th--sticky::before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-right: 1px solid #dddddd; border-left: 1px solid #dddddd; content: ""; } .m-tbl th.m-tbl__th--sticky::after { display: block; position: absolute; top: 0; right: -16px; width: 15px; height: 100%; background: linear-gradient(to right, rgba(51, 51, 51, 0.1), rgba(0, 0, 0, 0)); content: ""; } .m-tbl td.m-tbl__th--sticky { z-index: 1; position: sticky; left: 0; } .m-tbl td.m-tbl__th--sticky::before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-right: 1px solid #dddddd; border-left: 1px solid #dddddd; content: ""; } .m-tbl td.m-tbl__th--sticky::after { display: block; position: absolute; top: 0; right: -16px; width: 15px; height: 100%; background: linear-gradient(to right, rgba(51, 51, 51, 0.1), rgba(0, 0, 0, 0)); content: ""; } .m-tbl--not-scroll .m-tbl__tbl { min-width: initial; } .m-tbl-sp-break th, .m-tbl-sp-break td { display: block; padding: 14px 16px; font-size: 1.4rem; } .m-tbl-sp-break--not-break th, .m-tbl-sp-break--not-break td { display: table-cell; } .m-lyt-media__img img { width: 100%; } .m-lyt-media[data-col="1"] { grid-template-columns: 100%; } .m-lyt-media[data-col="2"] { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; } .m-lyt-flow .m-lyt-media__item:not(:last-child) { position: relative; } .m-lyt-flow .m-lyt-media__item:not(:last-child)::before { display: block; position: absolute; right: 0; bottom: -40px; left: 0; width: 26px; height: 31px; margin: 0 auto; transform: rotate(90deg); background-image: url("https://www.resonac.com/themes/resonac/common/img/shared/icon-flow-01.svg"); background-size: cover; background-repeat: no-repeat; content: ""; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation { gap: 10px; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation .m-lyt-media__item::before { display: none; } .m-lyt-flow .m-lyt-media.m-lyt-media--has-explanation .m-lyt-media__item:nth-child(3n-1) .m-lyt-media__contents::before { transform: rotate(90deg); } .m-lyt-grid[data-col="1"] { grid-template-columns: 100%; } .m-lyt-grid[data-col="2"] { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; } .m-lyt-media-index__img { text-align: center; } .m-lyt-media-index__inner--border .m-lyt-media-index__img { padding-top: 25px; border-top: 1px solid #dedede; } .m-lyt-media-index__inner--reverse-sp { flex-direction: column; } .m-lyt-media-index__inner--reverse-sp.m-lyt-media-index__inner--reverse-pc { flex-direction: column-reverse; } .m-lyt-icon-label[data-col="1"] { flex-direction: column; } .m-hdg-lv2 .m-form-set--flex-end { justify-content: flex-start; } .m-form-search-02__title { max-width: 24.1279069767%; } .m-form-search-02__btn-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px; overflow: hidden; } .uq-top-mv-panel { padding: 80px 0 22px 15px; overflow-x: hidden; background-color: #f2f8f9; } html:not([data-script-enabled=true]) .uq-top-mv-panel { padding: 0 0 22px 15px; } .uq-top-mv-panel__inner { padding: 27px 0 0; overflow-x: auto; } .uq-top-mv-panel__list { margin: 0 auto 25px; } .uq-top-mv-panel__item { width: 236px; } .uq-top-news .uq-top-box { padding: 0; } .uq-top-news::before { top: calc(100% + 35px); aspect-ratio: 318/369; width: 80%; min-width: 310px; max-width: 320px; } .uq-top-news::after { top: calc(100% + 35px); aspect-ratio: 318/469; width: 80%; min-width: 310px; max-width: 320px; background-image: url("https://www.resonac.com/themes/resonac/common/img/top/bg-top-news-01-sp.webp"); } .uq-top-product .m-box { margin-top: 24px; padding: 33px 15px 40px; border-radius: 0; } .uq-top-product .m-box::before { border-radius: 0; } .uq-top-product .m-panel-card-link__list { grid-template-columns: 1fr 1fr; } .uq-top-product .m-panel-card-link__inner { flex-direction: column; padding: 10px; } .uq-top-product .m-panel-card-link__img { width: 100%; } .uq-top-product .m-panel-card-link__index { width: 100%; margin-top: 10px; padding: 0 25px; } .uq-top-product .m-panel-card-link__text { display: block; font-size: 1.2rem; text-align: center; } .uq-top-solution.uq-top-box { margin: 32px 16px 0; padding: 0; box-shadow: 0 0 24px rgba(51, 51, 51, 0); } .uq-top-relation { background-color: #f8fbfc; } .uq-top-relation .m-carousel-02__title { margin-top: 0; margin-bottom: 22px; font-weight: 700; } .uq-top-relation .m-carousel-02__ui-prev { top: -30px; left: -30px; } .uq-top-relation .m-carousel-02__ui-next { top: -30px; right: -30px; } .uq-top-brand-list { margin-top: -40px; } .uq-top-brand-list::before { top: 40px; aspect-ratio: 310/700; width: 80%; min-width: 310px; max-width: 320px; } .uq-top-brand-list::after { top: 40px; aspect-ratio: 310/1315; width: 80%; min-width: 310px; max-width: 320px; background-image: url("https://www.resonac.com/themes/resonac/common/img/top/bg-top-company-list-01-sp.webp"); } .uq-top-brand-list__inner { flex-direction: column; margin: 0 15px; gap: 1px; } .uq-top-sustainability-list__inner { flex-direction: column; gap: 10px; } .uq-top-box { z-index: -1; margin: 40px 15px 0; padding: 27px 20px 24px; border-radius: 8px; background-color: #ffffff; box-shadow: 0 0 24px rgba(51, 51, 51, 0.16); } .uq-top-box-news-tab__head { flex-direction: column; } .uq-top-box-news-tab .m-list-news__item { padding: 25px 0; } .uq-top-box-news-tab .m-btn-keyword { justify-content: center; margin-top: 20px; } .uq-top-box-news-tab .m-btn-keyword__btn { position: relative; padding: 12px 46px; } .uq-top-box-news-tab .m-btn-keyword__btn-text { position: initial; padding: 0; font-size: 1.4rem; } .uq-top-box-news-tab .m-btn-keyword__btn-text::before { right: 20px; } .uq-top-box-news-tab .m-btn-keyword__btn-text::after { right: 27px; } .uq-top-mv-carousel__item { display: flex; flex-direction: column; gap: 0; background-color: #ffffff; } .uq-top-mv-carousel__box { width: 100%; } .uq-top-mv-carousel__btn { margin: 15px auto; text-align: center; } .uq-top-mv-carousel__ui { right: 16px; bottom: 16px; } .uq-top-topics-carousel__ui { align-items: center; justify-content: center; margin-top: 23px; } .uq-top-topics-carousel__ui-prev { position: initial; left: 20%; margin: 0; } .uq-top-topics-carousel__ui-next { position: initial; right: 20%; order: 3; margin: 0; } .uq-top-topics-carousel__ui-indicator { order: 2; margin: 0 15px; } .uq-top-topics-carousel .m-panel-card-link-item__index { margin-top: 12px; margin-bottom: 0; padding: 0 35px 0 var(--padding-block); } .uq-top-topics-carousel .m-panel-card-link-item__title { font-size: 1.4rem; } .uq-ir-lyt-col2--medium { flex-direction: column; } .uq-ir-list-comparison__inner { display: flex; flex-direction: column; } .uq-ir-list-comparison__detail { width: 82.6086956522%; margin: 10px auto 0; } .uq-ir-list-comparison__detail-list { flex-direction: column; } .uq-ir-list-comparison__detail-item { justify-content: space-between; } .uq-ir-box-news-tab__head { flex-direction: column; } .uq-ir-btn__icon-img { max-width: 16px; } .uq-ir-btn__btn--download .uq-ir-btn__icon-img { max-width: 13px; } .uq-sustainability-hdg-lv2::before { top: -22px; height: calc(84.1176470588% + 22px); background-image: url("https://www.resonac.com/themes/resonac/common/img/sustainability/bg-sustainability-hdg-lv2-01-sp.webp"); } .uq-sustainability-hdg-lv2__title { width: 67.8260869565%; } .uq-sustainability-hdg-lv2__contents { width: 67.8260869565%; } .uq-products-box__block { flex-direction: column; } } @media screen and (max-width: 600px) { .m-modal-carousel__inner { max-width: 400px; } } @media screen and (max-width: 500px) { .m-modal-carousel__inner { max-width: 350px; } } @media screen and (max-width: 400px) { .m-modal-carousel__inner { max-width: 310px; } } .cookieconsent-optin-preferences, .cookieconsent-optin-statistics, .cookieconsent-optin-marketing, .cookieconsent-optin { display: none; } .cookieconsent-optout-preferences, .cookieconsent-optout-statistics, .cookieconsent-optout-marketing, .cookieconsent-optout { display: block; display: initial; } img.contact-us-img { margin-top: 4px; width: 20px; height: 20px; } img.linkedin-img { margin-top: 4px; width: 35px; height: 35px; } .jd__actions .m-btn__btn.m-btn__btn--cv, .jd__actions .m-btn__btn.m-btn__btn--cv:visited, .jd__actions .m-btn__btn.m-btn__btn--cv:hover, .jd__actions .m-btn__btn.m-btn__btn--cv:active { color: #fff !important; text-decoration: none !important; } .jd__actions .m-btn__btn.m-btn__btn--cv { display: flex; justify-content: center; align-items: center; text-align: center; } @font-face{font-style:normal;font-weight:400;src:url("../themes/resonac/common/fonts/NotoSans-Regular.woff2") format("woff2");font-family:"Noto Sans";font-display:swap;}@font-face{font-style:normal;font-weight:700;src:url("../themes/resonac/common/fonts/NotoSans-Bold.woff2") format("woff2");font-family:"Noto Sans";font-display:swap;}body{font-family:"Noto Sans",Arial,sans-serif;}p,a{overflow-wrap:anywhere;}@media screen and (min-width:769px){.uq-top-hdg-lv2__title{font-size:4.4rem;}.uq-top-brand__hdg-lv2-title{font-size:4.4rem;}}