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

/*============================
タイトル
============================*/
h2 {
    font-size: 112%;
    line-height: 140%;
    font-weight: bold;
    color: #fff;
    background-color: #222;
    font-weight: bold;
    padding: 6px 14px;
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", MS-PGothic, sans-serif;
}

div.l3_alias > h2:first-child {
    margin-top: 0;
    margin-bottom: 20px;
}

h3 {
    font-size: 150%;
    font-weight: 600;
    margin: 20px 0 15px 0;
    padding: 5px 0 5px 0px;
    border-left: none;
    border-bottom: 1px solid #000;
    background: none;
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", MS-PGothic, sans-serif;
}

h4 {
    font-size: 100%;
    line-height: 150%;
    font-weight: bold;
    margin: 35px 0 15px 0;
    padding: 5px 0 5px 22px;
    border-bottom: 1px solid #ccc;
    background: url(./image/icon_square.png) no-repeat 0 10px;
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", MS-PGothic, sans-serif;
}

h4:before {
    content: none;
}

/*============================
文
============================*/
/* 太字 */
b {
    font-weight: bolder;
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", MS-PGothic, sans-serif;
}

/*============================
箇条書き
============================*/
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;
    margin-top: 5px;
}

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_comment:before,
li.list_brackets:before {
    margin-left: -1.7rem;
    width: 1.7rem;
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", MS-PGothic, sans-serif;
}

li.list_nega_number:before,
li.list_posi_number:before {
    margin-left: -1.7rem;
    width: 1.7rem;
}

/* インデント付きの箇条書き */
li.layer_1 {
    margin-left: calc(1.7rem + 1.7rem);
}

li.layer_2 {
    margin-left: calc(1.7rem + 1.7rem * 2);
}

li.layer_3 {
    margin-left: calc(1.7rem + 1.7rem * 3);
}

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

/* 箇条書き（三角） */
li.list_triangle:before {
    margin-left: -1.1rem;
    margin-right: -0.6rem;
    width: 1.7rem;
}

/* 箇条書き（番号） */
li.list_number:before {
    font-size: 1em;
    font-weight: bolder;
}

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

/* 文頭装飾付きのインデント */
h4.layer_1,
li.layer_1 {
    margin-left: calc(1.7rem * 2);
}
h4.layer_2,
li.layer_2 {
    margin-left: calc(1.7rem * 3);
}
h4.layer_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 */
.content a.link_format_cat_rectangle,
.content a.page {
    color: #fff;
    font-size: 1.2em;
    line-height: 1em;
    display: inline-block;
    position: relative;
    width: 1.6em;
    height: 1.0em;
    background-color: #99c9f9;
    vertical-align: -0.25em;
    border-radius: 0.3em;
    margin-left: 5px;
}

.content a.link_format_cat_rectangle:before,
.content 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;
}

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

/* ホバー中の参照 */
.content a[href]:hover,
.content a[href]:hover:after {
    background-color: #0066cc;
}

/*============================
表のセルの縦書き
============================*/
/* 文字は下から上、表示開始位置は下揃え、文字列の縦位置はトップ */
th[rotate="90"].valign_top.align_left,
td[rotate="90"].valign_top.align_left {
    vertical-align: bottom;
    text-align: left;
}

/* 文字は下から上、表示開始位置は中央揃え、文字列の縦位置はトップ */
th[rotate="90"].valign_top.align_center,
td[rotate="90"].valign_top.align_center {
    vertical-align: middle;
    text-align: left;
}

/* 文字は下から上、表示開始位置は上揃え、文字列の縦位置はトップ */
th[rotate="90"].valign_top.align_right,
td[rotate="90"].valign_top.align_right {
    vertical-align: top;
    text-align: left;
}

/* 文字は下から上、表示開始位置は下揃え、文字列の縦位置は中央 */
th[rotate="90"].valign_middle.align_left,
td[rotate="90"].valign_middle.align_left {
    vertical-align: bottom;
    text-align: center;
}

/* 文字は下から上、表示開始位置は中央揃え、文字列の縦位置は中央 */
th[rotate="90"].valign_middle.align_center,
td[rotate="90"].valign_middle.align_center {
    vertical-align: middle;
    text-align: center;
}

/* 文字は下から上、表示開始位置は上揃え、文字列の縦位置は中央 */
th[rotate="90"].valign_middle.align_right,
td[rotate="90"].valign_middle.align_right {
    vertical-align: top;
    text-align: center;
}

/* 文字は下から上、表示開始位置は下揃え、文字列の縦位置はbottom */
th[rotate="90"].valign_bottom.align_left,
td[rotate="90"].valign_bottom.align_left {
    vertical-align: bottom;
    text-align: left;
}

/* 文字は下から上、表示開始位置は中央揃え、文字列の縦位置はbottom */
th[rotate="90"].valign_bottom.align_center,
td[rotate="90"].valign_bottom.align_center {
    vertical-align: middle;
    text-align: left;
}

/* 文字は下から上、表示開始位置は上揃え、文字列の縦位置はbottom */
th[rotate="90"].valign_bottom.align_right,
td[rotate="90"].valign_bottom.align_right {
    vertical-align: bottom;
    text-align: left;
}

/* 下から上に表記する */
th[rotate="90"] > *,
td[rotate="90"] > * {
    white-space: nowrap;
    writing-mode: tb-lr;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

/*============================
表の色
============================*/
.backcolor_gray {
    background-color: #efefef;
}

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

.scroll > table {
    min-width: 900px;
    margin-bottom: 5px;
}

/*============================
イラスト
============================*/
/* イラスト領域 */
.svg_parent {
    zoom: 1.5;

    /* Firefox */
    /* -moz-transform: scale(1.5);
    -moz-transform-origin: top left; */
}

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

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

/*============================
表テンプレート
============================*/
/* 共通（危険、警告、注意） */
table.template_danger,
table.template_warning,
table.template_caution {
    border-left-width: 9px;
    border-left-style: solid;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

table.template_danger th,
table.template_warning th,
table.template_caution th {
    font-weight: bold;
    font-size: 122%;
    padding: 3px;
}

table.template_danger th p,
table.template_warning th p,
table.template_caution th p {
    text-align: center;
    text-align-last: center;
}

table i.icon_warning {
    background-image: url(./image/icon_warning.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-left: -10px;
    margin-right: 10px;
}

table span.edit_font_hazard {
    display: none;
}

table.template_danger td,
table.template_warning td,
table.template_caution td {
    padding: 8px;
}

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

table.template_danger {
    border-left-color: #FF0000;
}

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

table.template_warning {
    border-left-color: #FF7F00;
}

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

table.template_caution {
    border-left-color: #FFFF00;
}

/* アドバイス（標準版にないテンプレートtemplate_notice_e_usa, template_notice_normalが存在） */
table.template_notice th > p,
table.template_notice_e_usa th > p,
table.template_notice_normal th > p {
    background-color: #E5E5E5;
}

table.template_notice .edit_withoutwhite:first-child,
table.template_notice_e_usa .edit_withoutwhite:first-child,
table.template_notice_normal .edit_withoutwhite:first-child {
    background-color: #00FFFF;
    font-weight: bold;
    padding: 2px 4px;
}

table.template_notice td,
table.template_notice_e_usa td,
table.template_notice_normal td {
    padding: 8px !important;
}

/* このページを見ている人へのおすすめページ */
table.template_recommend {
    border-left: solid 9px #000;
    margin-top: 40px;
}

table.template_recommend th {
    background-color: #000;
    color: #fff;
    font-size: 90%;
    font-weight: bold;
    padding: 4px;
}

table.template_recommend td {
    border-bottom: 1px solid #ccc;
    padding: 8px 12px 8px 20px;
}

/* 単語中の折り返しを許可：罫線あり、スペック表 */
table.template_borders th,
table.template_borders td,
table.template_specifications th,
table.template_specifications td {
    overflow-wrap: break-word;
}

/*============================
表紙
============================*/
/* 車体画像（ビジュアル目次へのリンク） */
.content a.directLink:hover {
    background-color: #fff !important; /* 通常の参照のcssを打ち消し */
}

/* 警告灯/表示灯一覧 */
.inner_res {
    border-left: solid 9px #000;
    margin-top: 18px;
}

.inner_res .more {
    border: 1px solid #aaa;
    border-left-style: none;
}

.inner_res .more dt {
    padding: 10px 10px 10px 15px;
    cursor: pointer;
}

.inner_res .more dt.active {
    background-color: #efefef;
}

.inner_res .more dt h4 {
    margin: 0;
    padding: 0;
    padding-left: 16px;
    border: none;
    background: url(./image/icon_plus.png) 0 50% no-repeat;
}

.inner_res .more dt.active h4 {
    background-image: url(./image/icon_minus.png);
}

.inner_res .more dd {
    padding: 10px 10px 10px 15px;
}

.inner_res #warningList {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
}

.inner_res #warningList li {
    width: 100px;
    background-color: black;
    border: solid 1px silver;
    border-radius: 6px;
    margin: 3px;
}

.inner_res #warningList .warningList_icon {
    display: flex;
}

.inner_res #warningList .warningList_icon img {
    max-width: 70%;
    min-width: 40%;
    margin: 0 auto;
    padding: 5px;
}

/*============================
ビジュアル目次
============================*/
/* tippyjsのテーマ（吹き出しと拡大画像の両方で使用） */
/* https://atomiks.github.io/tippyjs/ */
.tippy-box[data-theme~='custom'] {
    background-color: #fff;
    border: 1px solid #aaa;
    color: #000;
    font-size: 8px;
}

.tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: #fff;
}
.tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: #fff;
}
.tippy-box[data-theme~='custom'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: #fff;
}
.tippy-box[data-theme~='custom'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: #fff;
}

/* 吹き出しのマーカー */
.visualIndexPoint {
    transform: translate(-50%,-50%); /* 要素の中心を位置基準点とする */
    border: 8px double red;
    border-radius: 50%;
}

.visualIndexPoint:hover {
    border-color: deepskyblue;
}

/* 吹き出し */
.visualIndexLink {
    display: none;
}

.visualIndexLinkComponent {
    border-top: 1px solid #ddd;
    padding: 5px;
}

.visualIndexLinkComponent:first-child {
    border: none;
}

.visualIndexLinkComponent a {
    color: #000;
}

.visualIndexLinkComponent a:hover {
    background-color: #fff !important; /* 通常の参照のcssを打ち消し */
    color: #1e8eb3;
}

/* 拡大画像のマーカー */
.enlargeRange {
    transform: translate(-50%,-50%); /* 要素の中心を位置基準点とする */
    border: 3px solid #3399cc;
    background-color: rgba(51,153,204,0.5);
    cursor: pointer;
}

/* 拡大画像 */
.enlargeImage {
    display: none;
}

.enlargeImage .svg_parent,
.tippy-box[data-theme~='custom'] .svg_parent {
    zoom: 1; /* 通常のイラスト領域1.5倍拡大を打ち消し */

    /* Firefox */
    /* -moz-transform: scale(1);
    -moz-transform-origin: top left; */
    font-size: 1rem; /* Firefoxではキャプションの大きさを正しくするために必要。Firefox以外には影響なし */

    /* svg_parentは、ldoc html変換で作成される。svg_parentのdivへのenlargeImageComponentクラス追加は手間がかかりそうなので断念。 */
}

/* 右側と左側の切替 */
.change_nav {
    text-align: center;
    text-align-last: auto;
    margin-top: 10px;
}

.change_nav li {
    display: inline;
    padding: 5px 50px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #999;
    color: var(--honda-red-color);
    cursor: pointer;
}

.change_nav li:hover {
    background-color: #fff;
}

.change_nav li:first-child {
    border-radius: 20px 0 0 20px;
}

.change_nav li:last-child {
    border-radius: 0 20px 20px 0;
}

.change_nav li.active {
    color: #fff;
    background-color: var(--honda-red-color);
    border-bottom: 1px solid #990000;
}

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

.tab_wrap ul.tabs li.tab_btn {
    cursor: pointer;
    padding: 5px 15px;
    font-weight: 700;
    text-align: left;
    line-height: 1.2;
}

.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;
}