@charset "utf-8";

/*============================================================

Design Tokens

============================================================*/
:root {

    /*========================================================
    Color
    ========================================================*/

    /* 基本文字色 */
    --color-text: #000;

    /* 補助文字色 */
    --color-text-sub: #666;

    /* メインカラー */
    --color-primary: #3b7185;

    /* サブカラー */
    --color-secondary: #eaf3f5;

    /* アクセントカラー */
    --color-accent: #d99b7c;

    /* 背景色 */
    --color-bg: #fff;

    /* 薄い背景色 */
    --color-bg-sub: #f7f7f7;

    /* ボーダー */
    --color-border: #ddd;


    /*========================================================
    Font Family
    ========================================================*/

    --font-family-base:
        'Lato',
        'Noto Sans JP',
        sans-serif;


    /*========================================================
    Font Size
    ========================================================*/

    /* 基本文字サイズ */
    --font-size-base: 1.6em;
    --font-size-base-sp: 1.4em;
    

    /* Heading : PC */
    --font-size-h1: 3.6rem;
    --font-size-h2: 2.8rem;
    --font-size-h3: 2.4rem;
    --font-size-h4: 2.1rem;
    --font-size-h5: 1.8rem;
    --font-size-h6: 1.6rem;


    /* Heading : Tablet */
    --font-size-h1-tablet: 3.2rem;
    --font-size-h2-tablet: 2.5rem;
    --font-size-h3-tablet: 2.2rem;
    --font-size-h4-tablet: 2rem;
    --font-size-h5-tablet: 1.8rem;
    --font-size-h6-tablet: 1.6rem;


    /* Heading : Smartphone */
    --font-size-h1-sp: 2.8rem;
    --font-size-h2-sp: 2.3rem;
    --font-size-h3-sp: 2rem;
    --font-size-h4-sp: 1.8rem;
    --font-size-h5-sp: 1.6rem;
    --font-size-h6-sp: 1.4rem;


    /*========================================================
    Font Weight
    ========================================================*/

    --font-weight-normal: 400;
    --font-weight-bold: 700;


    /*========================================================
    Line Height
    ========================================================*/

    --line-height-base: 1.8;

    --line-height-tight: 1.3;

    --line-height-paragraph: 2;
    --line-height-paragraph-sp: 1.8;


    /*========================================================
    Letter Spacing
    ========================================================*/

    --letter-spacing-base: 0;


    /*========================================================
    Paragraph
    ========================================================*/

    --paragraph-margin-bottom: 1.5em;
    --paragraph-margin-bottom-sp: 1.2em;


    /*========================================================
    Layout
    ========================================================*/

    /* サイト全体の最大横幅 */
    --container-width: 1200px;

    /* 必要に応じて使う横幅 */
    --container-width-wide: 1400px;
    --container-width-narrow: 800px;


    /*========================================================
    Inner Padding
    ========================================================*/

    /* 左右の基本余白 */
    --inner-padding: 20px;

    /* スマートフォン左右余白 */
    --inner-padding-sp: 15px;
/*    --inner-padding-sp: 45px;*/


    /*========================================================
    Column
    ========================================================*/

    --column-gap: 40px;
    --column-gap-small: 30px;
    --column-gap-sp: 20px;

    --sidebar-width: 300px;


    /*========================================================
    Space
    ========================================================*/

    --space-0: 0;

    --space-xs: .5rem;

    --space-sm: 1rem;

    --space-md: 2rem;

    --space-lg: 3rem;

    --space-xl: 4rem;

    --space-2xl: 6rem;

    --space-3xl: 8rem;


    /*========================================================
    Border Radius
    ========================================================*/

    --radius-none: 0;

    --radius-sm: 4px;

    --radius-md: 8px;

    --radius-lg: 16px;

    --radius-xl: 24px;

    --radius-round: 9999px;


    /*========================================================
    Border
    ========================================================*/

    --border-width: 1px;

    --border-default:
        var(--border-width)
        solid
        var(--color-border);


    /*========================================================
    Shadow
    ========================================================*/

    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, .08);

    --shadow-md:
        0 4px 16px rgba(0, 0, 0, .10);

    --shadow-lg:
        0 8px 24px rgba(0, 0, 0, .12);


    /*========================================================
    Transition
    ========================================================*/

    --transition-fast: .2s ease;

    --transition-base: .3s ease;

    --transition-slow: .5s ease;


    /*========================================================
    Z-index
    ========================================================*/

    --z-base: 1;

    --z-header: 100;

    --z-drawer: 500;

    --z-modal: 1000;

}