@charset "UTF-8";

/* 基本色 */

:root {
    --main-color: #FF4A00;
    --accent-color: #afafaf;
    --dark-main-color: #FF4A00;
    --text-bright-color: #fff;
    --icon-color: #fff;
    --icon-bk-color: #ddd;
    --gray-color: #ddd;
    --large-width: 1000px;
    --middle-width: 800px;
}


/* 基本設定： フォントサイズ */

@media (max-width: 599px) {
    :root {
        font-size: 14px;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    :root {
        font-size: 16px;
    }
}

@media (min-width: 800px) {
    :root {
        font-size: 18px;
    }
}

body {
    font-size: 16px;
}



/* 基本設定： ページ全体 */

body {
    margin: 0;
    font-family: 'メイリオ',
    'Hiragino Kaku Gothic Pro',
    'Myriad Web Pro', sans-serif;
}


/* タブナビ */

.tabmenu {
    margin: 25px;
}

.tabnav {
    margin: 0px;
    padding: 0px;
}

.tabnav li {
    display: inline;
}

.tabnav li a {
    display: inline-block;
    background: #ddd;
    color: #333;
    padding: 5px;
    border-radius: 5px 5px 0 0;
    text-decoration: none;
}

.tabnav li a:hover,
.tabnav li a.active {
    background: #afafaf;
    color: #fff;
}

#tabcontent {
    padding: 5px;
    border: 1px dotted #ccc;
}

#tab01 {
    padding: 30px;
}

#tab02 {
    padding: 30px;
}

#tab02 table {
    border-collapse: collapse;
    border-top: solid 1px #b5b5b5;
    font-size: 0.875rem;
}

#tab02 th,
#tab02 td {
    padding-top: 1.0rem;
    padding-bottom: 1.0rem;
    border-bottom: solid 1px #b5b5b5;
}

#tab02 th {
    padding-right: 1rem;
    text-align: left;
    word-break: keep-all;
}

#tab03 {
    padding: 20px;
}

#tab04 {
    padding: 30px;
    font-size: 0.875rem;
}

#tab05 {
    padding: 30px;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .tabmenu .container {
        align-items: center;
        max-width: 1000px;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
    }

    .tabnav ul {
        display: flex;
    }
}