/* HTMLマニュアル 本文 スタイルファイル */
/* （HTML専用の本文スタイルは、common.cssでなくこのファイルに記載してください） */

#main-area section {
    color: #2b383f;
    font-size: 16px;
}

/*============================
タイトル
============================*/
h1, h2 {
    font-size: 25px;
    border-bottom: 1px solid #bdbdbd;
}

h1 {
    margin-top: 10pt;
}

h3 {
    font-size: 20px;
}

/*============================
箇条書き
============================*/
li.list_circle,
li.list_triangle,
li.list_point,
li.list_hyphen,
li.list_asterisk,
li.list_em_asterisk,
li.list_jp_asterisk,
li.list_number,
li.list_alphabet,
li.list_posi_number,
li.list_nega_number,
li.list_comment,
li.list_brackets {
    margin-left: 1.7rem;
}

li.list_circle:before,
/* li.list_triangle:before, */
li.list_point:before,
li.list_hyphen:before,
li.list_asterisk:before,
li.list_em_asterisk:before,
li.list_jp_asterisk:before,
li.list_number:before,
li.list_alphabet:before,
li.list_nega_number:before,
li.list_posi_number:before,
li.list_comment:before,
li.list_brackets:before {
    margin-left: -1.7rem;
    width: 1.7rem;
    color: var(--honda-red-color);
}

/* 箇条書き（丸） */
li.list_circle:before {
    font-size: 0.8em;
}

/* 箇条書き（三角） */
li.list_triangle:before {
    margin-left: -1.1rem;
    margin-right: -0.6rem;
    width: 1.7rem;
    border-left-color: var(--honda-red-color);
}

/* 箇条書き（番号） */
li.list_number:before {
    font-size: 1em;
    content: counter(list_number_counter);
}

/******************************
 * インデント
 */
.layer_1 {
    margin-left: 1.7rem;
}
.layer_2 {
    margin-left: calc(1.7rem * 2);
}
.layer_3 {
    margin-left: calc(1.7rem * 3);
}

/* 文頭装飾付きのインデント */
li.layer_1 {
    margin-left: calc(1.7rem * 2);
}
li.layer_2 {
    margin-left: calc(1.7rem * 3);
}
li.layer_3 {
    margin-left: calc(1.7rem * 4);
}

/* イラスト領域内のインデントの位置を補正 */
.svg_parent .foreign_object > p.layer_1,
.svg_parent .foreign_object > p.layer_2,
.svg_parent .foreign_object > p.layer_3 {
    margin-left: 0;
}

.svg_parent .foreign_object > li.layer_1,
.svg_parent .foreign_object > li.layer_2,
.svg_parent .foreign_object > li.layer_3 {
    margin-left: 0;
    padding-left: 1.7rem;
}

/* 幅100%の表の幅をインデント量に応じて縮める */
.layer_1[style*="width: 100%;"],
.layer_1[style*="width:100%;"] {
    width: calc(100% - 1.7rem) !important;
}

.layer_2[style*="width: 100%;"],
.layer_2[style*="width:100%;"] {
    width: calc(100% - 1.7rem * 2) !important;
}

.layer_3[style*="width: 100%;"],
.layer_3[style*="width:100%;"] {
    width: calc(100% - 1.7rem * 3) !important;
}

/*============================
参照
============================*/
/* ページ参照と索引を「>」アイコンにする #3062 */
a.link_format_cat_rectangle,
a.page {
    color: #fff;
    font-size: 1.2em;
    line-height: 1em;
    display: inline-block;
    position: relative;
    width: 1.6em;
    height: 1.0em;
    background-color: #0066cc;
    vertical-align: -0.25em;
    border-radius: 0.3em;
}

a.link_format_cat_rectangle:before,
a.page:before {
    display: block;
    content: "";
    position: absolute;
    transform: rotate(45deg);
    top: 0.3em;
    left: 0.55em;
    width: 0.4em;
    height: 0.4em;
    background: #fff;
}

a.link_format_cat_rectangle:after,
a.page:after {
    display: block;
    content: "";
    position: absolute;
    top: 0.3em;
    left: 0.35em;
    width: 0.4em;
    height: 0.4em;
    background-color: #0066cc;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ホバー中の参照 */
a.link_format_cat_rectangle:hover,
a.link_format_cat_rectangle:hover:after,
a.page:hover,
a.page:hover:after {
    background-color: #99c9f9;
}

/*============================
イラスト
============================*/
/* イラスト領域 */
div.svg_parent {
    zoom: 1.5; /* オリジナル画像が小さくて見づらいので拡大する */
}

/* キャプション */
div.foreign_object {
    font-size: 0.5em;
    line-height: 1.5; /* イラスト縮小時に行間がつまるのを防ぐ */
}

/* イラスト領域内のイラストの図番号と図タイトル */
div.svg_parent > svg > text {
    font-size: 0.5em;
}

/* イラスト領域内のテキストパラ */
div.foreign_object p {
    font-size: 7pt !important;
    font-weight: 700 !important;
}

/*============================
イラストと表の横スクロール
============================*/
.scroll {
    overflow-x: auto;
    margin-bottom: 10px;
}

.scroll table {
    margin-bottom: 5px;
}

/*============================
表テンプレート
============================*/
table.template_danger,
table.template_warning,
table.template_caution {
    border: 1px solid #e6e6e6;
    border-radius: 3px;
}

table.template_point,
table.template_notice {
    box-shadow: 0 0 5px 0 #eeeeee;
    border: 1px solid #e0e0e0;
}

table.template_danger th,
table.template_warning th,
table.template_caution th {
    padding: 0 !important;
}

table.template_point th,
table.template_notice th {
    padding-top: 15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 0 !important;
}

table.template_danger td,
table.template_warning td,
table.template_caution td {
    padding: 15px !important;
}

table.template_point td,
table.template_notice td {
    padding-top: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 15px !important;
}

/* 危険、警告、注意のヘッダ */
table.template_danger th,
table.template_warning th,
table.template_caution th {
    font-size: 1.6rem;
    text-align: center;
    border: none;
}

table.template_danger th p,
table.template_warning th p,
table.template_caution th p {
    font-size: 1em;
    padding-top: 0;
}

/* 危険、警告、注意の「！」アイコン */
table.template_danger th p::before {
    background-image: url("image/hazard_icon_white.svg");
}

table.template_warning th p::before,
table.template_caution th p::before {
    background-image: url("image/hazard_icon_black.svg");
}

/* 危険、警告、注意のボディ */
table.template_danger td,
table.template_warning td,
table.template_caution td {
    border: none;
}

/* 危険 */
table.template_danger th {
    background-color: red;
    color: #fff
}

table.template_danger td {
    background-color: #fff;
}

/* 警告 */
table.template_warning th {
    background-color: #ff7f00;
    color: #000;
}

table.template_warning td {
    background-color: #fff;
}

/* 注意 */
table.template_caution th {
    background-color: #ff0;
    color: #000;
}

table.template_caution td {
    background-color: #fff;
}

/* 取扱いのポイント、NOTICE */
table.template_point th,
table.template_notice th {
    background-color: #e3f2fd;
    color: #1e88e5;
}

table.template_point th p,
table.template_notice th p {
    display: block;
    border: none;
    background-color: inherit;
    color: inherit;
    padding: 0;
}

table.template_point td,
table.template_notice td {
    background-color: #e3f2fd;
}

/*============================
レイアウト
============================*/
/* 回り込みの無効化 */
/* （前後margin調整不要） */
div.wrap_aside {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/*============================
タブ切替表示
============================*/
.tab_wrap ul.tabs {
    display: flex;
}

.tab_wrap ul.tabs li.tab_btn {
    cursor: pointer;
    padding: 5px 15px;
    font-weight: 700;
}

.tab_wrap ul.tabs li.tab_btn.active {
    color: var(--honda-red-color);
    border-bottom: 2px solid var(--honda-red-color);
}

.tab_wrap ul.tabs li.tab_btn:hover {
    color: var(--honda-red-color);
}

.tab_wrap ul.tab_content {
    margin-bottom: 30px;
    padding: 15px;
    background: #fff;
    border: 1px solid #e0e0e0;
}

.tab_wrap ul.tab_content > li {
    display: none;
}

.tab_wrap ul.tab_content > li.show {
    display: block;
}

/*============================
アコーディオン
============================*/
.inner_res {
    margin-top: 18px;
}

.inner_res .more dt {
    padding: 5px 10px;
    background-color: #f5f5f5;
    position: relative;
    cursor: pointer;
}

.inner_res .more dt:hover,
.inner_res .more dt.active {
    color: var(--honda-red-color);
}

.inner_res .more dt > *:first-child {
    font-size: 16px;
    margin-top: 0;
}

.inner_res .more dt > *:first-child::after {
    content: "+";
    font-weight: 700;
    color: #000;
    position: absolute;
    right: 10px;
}

.inner_res .more dt.active > *:first-child::after {
    content: "\2212";
}

.inner_res .more dd {
    border: 1px solid #eeeeee;
    padding: 5px 10px;
}