/**** section_colors ****/
/* DataFrameを作成/出力する テーマカラー */
.section1_theme_color {
    background: #FF9901;
}
.section1_base_color {
    background: #ffc978;
}

/* DataFrameのデータを検索・調べる・確認する テーマカラー */
.section2_theme_color {
    background: #A8D200;
}
.section2_base_color {
    background: #d0e872;
}

/* DataFrameの整形 テーマカラー */
.section3_theme_color {
    background: #00C996;
}
.section3_base_color {
    background: #75e6c9;
}

/* DataFrameのデータを変更 テーマカラー */
.section4_theme_color {
    background: #001279;
}
.section4_base_color {
    background: #828fd9;
}

/* DataFrameの計算 テーマカラー */
.section5_theme_color {
    background: #FF70FF;
}
.section5_base_color {
    background: #fcbdfc;
}

/**** iconについて ****/
/* アイコン領域の設定 */
.section_icon_area {
    overflow: auto;
}

.section_icon_area:hover {
    opacity: 0.7;
    cursor: pointer;
}

.section_icon_area:hover h3 {
    opacity: 0.7;
}

/* クリックした時のアイコンの展開設定 */
.section_icon_expansion {
    width: 100%;
}

/* アイコンの角を丸める（展開時に角立てる） */
.section_icon_corner {
    border-radius: 10px;
}

/* アイコン画像の設定 */
.section_icon_image {
    width:150px; 
    padding: 5px; 
}

/* アイコン画像を左揃えにする（セクションカードが表示された時に文字を回り込ませる） */
.section_icon_image_float {
    float: left;
}

/* セクション説明文の装飾 */
.section_icon_explain {
    color: #FFFF;
    text-align:left;
    padding-top: 55px;
}

/**** セクションについて ****/
/* セクションカード領域(iconを展開した時) */
.section_card_area {
    width: 100%; 
    overflow: auto; 
    padding-bottom: 3px;
}

/* セクションカードの装飾 */
.section_card {
    position: relative;
    overflow: auto; 
    margin: 3px 0 3px 30px;
}
.section_card a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* クリックで展開される要素 */
.click_element_shown {
    display: none;
}

/* セフクションカードをポインターがオーバーラップした時 */
.section_card:hover {
    opacity: 0.7;
}

/* セクションカードのリンク設定 */
.sectin_card a {
    display: block;
    height: 100%;
    width: 100%;
}

/* セクションカードの画像の設定 */
.section_card img {
    float: left;
    width:85px;
    padding: 2px;
    border-radius: 2px;
    margin: 0;
}

/* セクションカードの説明文 */
.section_card h4 {
    color: #FFFF;
    padding: 25px 0 0 115px;
}

/**** セクション見出しの設定 ****/
/* セクション見出しの装飾 */
.section_head {
    overflow: auto;
    margin: 25px 0 10px 0;
    width: fit-content;
}
.section_head img {
    float: left;
    width:50px;
}
.section_head h2 {
    padding: 5px 20px 5px 15px;
    margin-left: 0;
    display: inline-block;
    color: #FFFF;
}

/**** 子セクション内の設定 ****/
/* 子セクション見出しの装飾 */
.section_child_head {
    overflow: auto; 
    margin: 15px 0 -3px 30px;
}
.section_child_head img {
    float: left; 
    width:50px;
}
.section_child_head h3 {
    padding: 10px 0 0 40px;
}

/* 子セクションの設定・装飾 */
.section_child {
    margin: 16px 24px 8px 0;
    padding: 0 0 0 30px;
    overflow: auto;
}


/* コマンド表示箇所の枠線 */
.command_frame_tab {
    background-color: #B2B2B2;
    border-radius: 10px 10px 0 0;
    width: fit-content;
    padding: 0 10px;
    color:#FFFF;
}
.command_frame {
    border: 4px solid;
    border-color: #B2B2B2;
    border-radius: 0 10px 10px 15px;
    padding: 0 30px 0 30px;
}
.command_2column_style_left {
    display:inline-block;
    line-height: 26.5px;
}
.command_2column_style_right {
    display: inline-block;
    margin-left: 16px;
    font-size: 12px;
    line-height: 26.5px;
}

/* 子セクションのコマンド箇所の表示について */
@media (min-width: 800px) {
    .code_for_pc {
        font-size: 15px;
        padding: 5px 0;
    }
    .code_for_smartphone {
        display: none;
    }
}
@media (max-width: 799px) {
    .code_for_pc {
        display: none;
    }
    .code_for_smartphone {
        white-space: nowrap;
        overflow: auto;
        font-size: 12px;
        padding: 3px 0;
    }
}

/* コマンドの参考画像の設定 */
.command_image {
    white-space: nowrap;
    overflow: auto;
    border-top: 3px dotted #B2B2B2;
}
.command_image img {
    height: 250px;
    text-align: left;
    margin-left: 0;
}

/* サンプルコードの表示・非表示アイコンの設定 */
.example {
    width: fit-content;
    padding-left: 5px;
    padding-right: 5px;
    margin: 5px 0 8px 0;
}
.example:hover {
    cursor:pointer;
}

/* サンプルコードアイコンの装飾(開閉時) */
.ex_hide {
    color: #FFFF;
    background-color: #B0B0B0;
    border-radius: 5px;
    width: fit-content;
    margin-left: 30px;
}
.ex_show {
    color: #BBBBBB;
    background-color: #333333;
    margin-bottom: -7.2px;
}

/* サンプルコード箇所をデフォルトで非表示とする設定 */
.code_default_hide {
    display: none;
}

.bullet::before {
    content: "・";
}


/**** コマンドの装飾 ****/
/* アンダーライン色 */
.under_red {
    border-bottom: dotted 1px red;
}
.under_blue {
    border-bottom: dotted 1px blue;
}
.under_green {
    border-bottom: dotted 1px green;
}
.under_gray {
    border-bottom: dotted 1px gray;
}

/* スマホ表示の番号色 */
.unselect_no_red {
    user-select: none;
    color: red;
}
.unselect_no_blue {
    user-select: none;
    color: blue;
}
.unselect_no_green {
    user-select: none;
    color: green;
}
.unselect_no_gray {
    user-select: none;
    color: gray;
}

.result_table {
    text-align: center;
}
.result_table thead tr th {
    min-width: 20px;
    padding-right: 3px;
}
.result_table tbody tr td {
    min-width: 20px;
    padding-right: 3px;
 }

 #side_table_of_contents ul li {
    list-style: none;
    text-align: left;
    background-color: #fcf0bf;
    border-top: 3px dotted #e3e3e3;
 }

 #side_table_of_contents ul li a[href*="#icon_new"]:hover {
    color: #FF9901;
    transition: 0.5s;
 }
 #side_table_of_contents ul li a[href*="#icon_search"]:hover {
    color: #A8D200;
    transition: 0.5s;
 }
 #side_table_of_contents ul li a[href*="#icon_arrange"]:hover {
    color: #00C996;
    transition: 0.5s;
 }
 #side_table_of_contents ul li a[href*="#icon_edit"]:hover {
    color: #001279;
    transition: 0.5s;
 }
 #side_table_of_contents ul li a[href*="#icon_calculate"]:hover {
    color: #FF70FF;
    transition: 0.5s;
 }