@charset "utf-8";

/* ==========================================================================
   Variables & Root Settings (CSS変数・ルート設定)
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       1. Layout & Size (レイアウト・サイズ)
       ---------------------------------------------------------------------- */
    --site-width-pc: 1200px;
    --slide-offset: 0%;
    --slide-width: 100%;

    /* ----------------------------------------------------------------------
       2. Colors (カラー設定)
       ---------------------------------------------------------------------- */
    /* 背景色 */
    --header-bg: #000;
    --footer-bg: #202020;
    --hamburger-bg: #F8F6F6;
    --gray-bg: #F2F4F5;
    --gray-hover-bg: #ddd;

    /* 文字色・枠線色 */
    --text-color: #333;
    --border-color: #ccc;
    --header-color: #fff;
    --footer-color: #fff;
    --hamburger-color: #ccc;

    /* ----------------------------------------------------------------------
       3. Common Styles (共通スタイル・アニメーション)
       ---------------------------------------------------------------------- */
    --basic-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.3) 0px 3px 10px 0px;
    --basic-opacity: .6;
    --basic-transition: all .4s;
}

/* --- レスポンシブ変数切り替え (タブレット・PC) --- */
@media (min-width: 600px) {
    :root {
        --slide-offset: 20%;
        --slide-width: 60%;
    }
}