@charset "utf-8";


/************************  Style Reset  ************************/

*
    {
    font-style: normal;
    font-weight: normal;
    font-size: 100%;
    text-align: left;
    margin: 0;
    padding: 0;
    border: 0 #000000 solid;
    box-sizing: border-box;
    }

html
    {
    background: linear-gradient(135deg, #f3f4f9 0%, #fafafa 100%);
    padding: 2em 1em;
    min-height: 100vh;
    }

body
    {
    color: #000000;
    background-color: #ffffff;
    padding: 2em 2.5em;
    max-width: 52em;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    font-size: 106.25%;
    line-height: 1.8;
    }

/***********************  Block Elements  ***********************/

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
blockquote,
pre,
address,
table,
div,
figure
    {
    margin: 1.5em 0;
    }

/*  Line Height for Text  */

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
pre,
address,
caption,
figcaption,
div
    {
    line-height: 1.75em;
    }

h1
    {
    font-size: 220%;
    font-weight: 700;
    text-align: center;
    margin-top: 1em;
    padding: 0.6em 1em;
    background: linear-gradient(135deg, #546e7a 0%, #78909c 100%);
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(84, 110, 122, 0.4);
    letter-spacing: 0.05em;
    }

h2
    {
    font-size: 180%;
    font-weight: 700;
    border-left: 6px solid #667eea;
    padding-left: 0.75em;
    margin-top: 2em;
    }

h3
    {
    font-size: 150%;
    font-weight: 600;
    border-bottom: 3px solid #e2e8f0;
    padding: 0.5em 0 0.5em 0.75em;
    }

h4
    {
    font-size: 130%;
    font-weight: 600;
    margin-left: 0.5em;
    padding-left: 0.75em;
    border-left: 4px solid #cbd5e0;
    }

h5
    {
    font-weight: 600;
    border-left: 3px solid #e2e8f0;
    padding-left: 0.75em;
    margin-left: 1em;
    }

h6
    {
    font-weight: 600;
    margin-left: 1em;
    }

p
    {
    margin-left: 1em;
    }

ul
    {
    margin-left: 2.5em;
    }

ul li
    {
    margin: 0.5em 0;
    }

ul li ul
    {
    margin: 0.5em 0 0.5em 2em;
    }

ol
    {
    margin-left: 3em;
    }

ol li
    {
    margin: 0.5em 0;
    }

ol li ol
    {
    margin: 0.5em 0 0.5em 2em;
    }

code
    {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background-color: #eceff1;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
    color: #000000;
    border: 1px solid #e2e8f0;
    }

hr
    {
    height: 2px;
    background: linear-gradient(to right, transparent, #cbd5e0, transparent);
    border: none;
    margin: 2em 0;
    }

table
    {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    }

caption
    {
    caption-side: top;
    text-align: center;
    font-weight: 600;
    margin-bottom: 0.75em;
    }

tr
    {
    transition: background-color 0.2s ease;
    }

tr:hover
    {
    background-color: #f7fafc;
    }

tr:nth-child(even)
    {
    background-color: #f8f9fa;
    }

th
    {
    border: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #546e7a 0%, #78909c 100%);
    color: #ffffff;
    padding: 0.75em 1em;
    text-align: center;
    font-weight: 600;
    }

td
    {
    border: 1px solid #e2e8f0;
    padding: 0.75em 1em;
    }

/********************  Text Semantic Elements  ********************/

a
    {
    color: #000000;
    text-decoration: none;
    background-color: #f5f5f5;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    transition: all 0.3s ease;
    }

a:hover
    {
    background-color: #546e7a;
    color: #ffffff;
    }

strong
    {
    background: linear-gradient(135deg, #fffacd 0%, #fff9c4 100%);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-weight: 600;
    }

/*************************** Custom Classes ***************************/

.tab-name
    {
    display: inline-block;
    background: linear-gradient(135deg, #546e7a 0%, #78909c 100%);
    color: #ffffff;
    padding: 0.3em 0.75em;
    border-radius: 6px;
    font-weight: 700;
    margin-right: 0.5em;
    box-shadow: 0 2px 8px rgba(84, 110, 122, 0.3);
    }

.section
    {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    padding: 1.5em;
    border-radius: 8px;
    margin: 1.5em 0;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

.note
    {
    background: linear-gradient(135deg, #fef5e7 0%, #fdebd0 100%);
    border-left: 5px solid #f39c12;
    padding: 1.5em;
    margin: 1.5em 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

.warning
    {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-left: 5px solid #dc3545;
    padding: 1.5em;
    margin: 1.5em 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

.step
    {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    padding: 1.25em;
    margin: 1em 0;
    border-left: 4px solid #48bb78;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

.feature
    {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    padding: 1em 1.25em;
    margin: 1em 0;
    border-radius: 6px;
    border: 1px solid #bfdbfe;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

.step-number
    {
    display: inline-block;
    width: 2em;
    height: 2em;
    background: linear-gradient(135deg, #546e7a 0%, #78909c 100%);
    color: #ffffff;
    border-radius: 50%;
    text-align: center;
    line-height: 2em;
    margin-right: 0.5em;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(84, 110, 122, 0.3);
    }

.version
    {
    color: #78909c;
    font-size: 0.9em;
    font-style: italic;
    }


/************************************************************************************/
/*******************************                      *******************************/
/*******************************  Mobile Responsive   *******************************/
/*******************************                      *******************************/
/************************************************************************************/
/********************** Media query for screens up to 719px *************************/
/************************************************************************************/


@media screen and (max-width:719px) {

    /************************ Style Reset ************************/

    html
        {
        padding: 0;
        }

    body
        {
        margin: 0;
        padding: 1em;
        border-radius: 0;
        box-shadow: none;
        }

    /************************ Block Elements ************************/

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    hr,
    div
        {
        margin: 1.2em 0;
        }

    /* Line Height for Text */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    dt,
    dd,
    div
        {
        line-height: 1.7em;
        }

    h1
        {
        font-size: 160%;
        padding: 0.5em 0.75em;
        }

    h2
        {
        font-size: 140%;
        }

    h3
        {
        font-size: 125%;
        }

    h4
        {
        font-size: 115%;
        }

    p
        {
        margin-left: 0.5em;
        }

    ul
        {
        margin-left: 1.5em;
        }

    ul li ul
        {
        margin: 0.25em 0 0.25em 1em;
        }

    ol
        {
        margin-left: 2em;
        }

    ol li ol
        {
        margin: 0.25em 0 0.25em 1em;
        }

    code
        {
        font-size: 0.85em;
        }

    /*************************** Custom Classes ***************************/

    .section
        {
        padding: 1em;
        }

    .note
        {
        padding: 1em;
        }

    .warning
        {
        padding: 1em;
        }

    .step
        {
        padding: 1em;
        }

    .feature
        {
        padding: 0.75em 1em;
        }
}