@font-face {
    font-family: "DKG";
    src: url("../fonts/dk_g.woff") format("woff"), url("../fonts/dk_g.otf") format("opentype");
}

@font-face {
    font-family: "DKR";
    src: url("../fonts/dk_r.woff") format("woff"), url("../fonts/dk_r.otf") format("opentype");
}

@font-face {
    font-family: "NotoSymbols";
    src: url("../fonts/NotoSansSymbols-Regular.woff") format("woff"), url("../fonts/NotoSansSymbols-Regular.otf") format("opentype");
}

@font-face {
    font-family: "PSymbol";
    src: url("../fonts/PolySymbol.woff") format("woff"), url("../fonts/PolySymbol.otf") format("opentype");
}

@font-face {
    font-family: "RAN";
    src: url("../fonts/RAlpha_Nega.woff") format("woff"), url("../fonts/RAlpha_Nega.otf") format("opentype");
}

@font-face {
    font-family: "RAP";
    src: url("../fonts/RAlpha_Posi.woff") format("woff"), url("../fonts/RAlpha_Posi.otf") format("opentype");
}

@font-face {
    font-family: "RNN";
    src: url("../fonts/RNum_Nega.woff") format("woff"), url("../fonts/RNum_Nega.otf") format("opentype");
}

@font-face {
    font-family: "RNP";
    src: url("../fonts/RNum_Posi.woff") format("woff"), url("../fonts/RNum_Posi.otf") format("opentype");
}

/*アプリ専用オリジナルフォント*/
@font-face {
    font-family: "DKG_App";
    src: url("../fonts/DK_G_for_App.woff") format("woff"), url("../fonts/DK_G_for_App.otf") format("opentype");
}

.details-page {
    margin-left: -10px;
    margin-right: -10px;
    padding-bottom: 2em;
    overflow: hidden;
    font-size: 1.8rem;
}

.details-page p {
    margin: 0 0 0.5em;
}

.details-page h1,
.details-page h2 {
    margin: 0;
}

.details-page h1 {
    display: block;
    padding: 0.6em 0.6em 0.3em;
    background: #262626;
    background: -webkit-gradient(linear, , from(#404040), to(#262626));
    background: -webkit-linear-gradient(top center, #404040 0%, #262626 100%);
    background: linear-gradient(top center, #404040 0%, #262626 100%);
    font-size: 2.8rem;
    color: #ffffff;
    font: -apple-system-headline;
}

.details-page .main {
    margin: 0 6%;
    width: 88%;
    font: -apple-system-body;
}

.details-page h2 {
    display: block;
    margin: 0 -7.0% 0.5em;
    padding: 0.25em;
    background: #666666;
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    font: -apple-system-subheadline;
}

.details-page .main[chap="Essential"] h2 {
    background: #be6d6d;
}

.details-page h3 {
    margin: 2em -7.0% 1.2em;
    padding: 0.6em;
    border-top: #000000 solid 1px;
    border-bottom: #000000 solid 1px;
    background: #f0f0f0;
    color: #000000;
    font-size: 2.2rem;
    text-align: center;
}

.details-page h4 {
    margin: 3em 0 1em;
    padding: 0.5em;
    background: #f0f0f0;
    font-size: 2.0rem;
    font-weight: bold;
}

.details-page h4:before {
    content: '■';
}

.details-page h5 {
    font-size: 2.0rem;
    font-weight: bold;
    text-decoration: underline;
}

.details-page Block TBox Heading {
    display: block;
    margin-bottom: 0.5em
}

.details-page Block TBox Heading:before {
    content: "▼";
}


/*必読！ドライバーのみなさまへで使用する見出し*/

.details-page .essential-notes {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3em;
}

.warning-read {
    background: #f8e3e3;
    border-left: #be6d6d solid 0.4em;
    border-style: none none none solid;
    padding: 0.2em 0 0.1em 0.6em;
    margin: 1em 0 0.4em;
    font-size: 1.8rem;
    font-weight: normal;
}

.caution-read {
    background: #f8f2e0;
    border-left: #cdb56a solid 0.4em;
    border-style: none none none solid;
    padding: 0.2em 0 0.1em 0.6em;
    margin: 1em 0 0.4em;
    font-size: 1.8rem;
    font-weight: normal;
}

Section[Essential="Warning"] Heading {
    display: block;
    background: #f8e3e3;
    border-left: #be6d6d solid 0.4em;
    border-style: none none none solid;
    padding: 0.2em 0 0.1em 0.6em;
    margin: 1em 0 0.4em;
    font-size: 2.2rem;
    font-weight: bold;
}

Section[Essential="Caution"] Heading {
    display: block;
    background: #f8f2e0;
    border-left: #cdb56a solid 0.4em;
    border-style: none none none solid;
    padding: 0.2em 0 0.1em 0.6em;
    margin: 1em 0 0.4em;
    font-size: 2.2rem;
    font-weight: bold;
}

Section[Essential="Note"] Heading {
    display: block;
    border: 2px solid #000000;
    border-style: solid none;
    padding: 0.2em 0 0.1em 0.6em;
    margin: 1em 0 0.4em;
    font-size: 2.2rem;
    font-weight: bold
}


/*汎用的な見出し*/

.details-page Heading {
    font-weight: bold;
}


/*画像*/

.details-page img {
    display: block;
    width: 100%;
    margin: 1em 0 2em;
}


/*リスト*/

.details-page ul {
    list-style: disc outside;
    margin: 0 0 1em 2em;
    padding: 0;
}

.details-page ul li ul {
    font-size: 90%;
}

.details-page ol {
    list-style: decimal outside;
    margin: 0 0 1em 2em;
    padding: 0;
}


/*黒丸数字リスト*/

.details-page ol[Type="Panel"] > li {
    list-style: none;
    position: relative;
}

.details-page ol[Type="Panel"] > li:before {
    position: absolute;
    left: -1em;
    font-family: "RNN"
}

.details-page ol[Type="Panel"] > li:nth-child(1):before {
    content: "a";
}

.details-page ol[Type="Panel"] > li:nth-child(2):before {
    content: "b";
}

.details-page ol[Type="Panel"] > li:nth-child(3):before {
    content: "c";
}

.details-page ol[Type="Panel"] > li:nth-child(4):before {
    content: "d";
}

.details-page ol[Type="Panel"] > li:nth-child(5):before {
    content: "e";
}

.details-page ol[Type="Panel"] > li:nth-child(6):before {
    content: "f";
}

.details-page ol[Type="Panel"] > li:nth-child(7):before {
    content: "g";
}

.details-page ol[Type="Panel"] > li:nth-child(8):before {
    content: "h";
}

.details-page ol[Type="Panel"] > li:nth-child(9):before {
    content: "i";
}

.details-page ol[Type="Panel"] > li:nth-child(10):before {
    content: "j";
}

.details-page ol[Type="Panel"] > li:nth-child(11):before {
    content: "k";
}

.details-page ol[Type="Panel"] > li:nth-child(12):before {
    content: "l";
}

.details-page ol[Type="Panel"] > li:nth-child(13):before {
    content: "m";
}

.details-page ol[Type="Panel"] > li:nth-child(14):before {
    content: "n";
}

.details-page ol[Type="Panel"] > li:nth-child(15):before {
    content: "o";
}

.details-page ol[Type="Panel"] > li:nth-child(16):before {
    content: "p";
}

.details-page ol[Type="Panel"] > li:nth-child(17):before {
    content: "q";
}

.details-page ol[Type="Panel"] > li:nth-child(18):before {
    content: "r";
}

.details-page ol[Type="Panel"] > li:nth-child(19):before {
    content: "s";
}

.details-page ol[Type="Panel"] > li:nth-child(20):before {
    content: "t";
}

.details-page ol[Type="Panel"] > li:nth-child(21):before {
    content: "u";
}

.details-page ol[Type="Panel"] > li:nth-child(22):before {
    content: "v";
}

.details-page ol[Type="Panel"] > li:nth-child(23):before {
    content: "w";
}

.details-page ol[Type="Panel"] > li:nth-child(24):before {
    content: "x";
}

.details-page ol[Type="Panel"] > li:nth-child(25):before {
    content: "y";
}

.details-page ol[Type="Panel"] > li:nth-child(26):before {
    content: "z";
}

.details-page ul > AttentionTitle {
    margin-left: -1em;
}


/*文字装飾*/

.details-page .bold {
    font-weight: bold;
}

.details-page .underline {
    text-decoration: underline;
}

.details-page .dkg {
    font-family: "DKG";
}

.details-page .dkr {
    font-family: "DKR";
}

.details-page .dm100 {
    color: #ec148d;
}

.details-page .notosymbols {
    font-family: "NotoSymbols";
}

.details-page .psymbol {
    font-family: "PSymbol";
}

.details-page .ran {
    font-family: "RAN";
}

.details-page .rap {
    font-family: "RAP";
}

.details-page .rnn {
    font-family: "RNN";
}

.details-page .rnp {
    font-family: "RNP";
}

.details-page .base-box {
    border-radius: 0.5em;
    overflow: hidden;
}

.details-page .base-box:before {
    font-family: "DKG_App";
    font-size: 1.5em;
    margin: 1em;
}

.details-page .base-box .body {
    width: 92.8571428571%;
    margin: 0 auto 0.75em;
}

.details-page .base-box .readmore-js-toggle {
    width: 100%;
    height: 1.5em;
    position: relative;
    display: block;
}

.details-page .base-box .readmore-js-toggle:before {
    content: " ";
    display: block;
    position: absolute;
    top: 30%;
    left: 50%;
    margin-left: -5.5px;
    z-index: 10;
    background-image: url('../images/arrow_up.svg');
    width: 11px;
    height: 6px;
    -webkit-background-size: 11px auto;
    background-size: 11px auto;
}

.details-page .base-box .readmore-js-collapsed + .readmore-js-toggle:before {
    background-image: url('../images/arrow_down.svg');
}

.details-page .base-box .readmore-js-toggle:after {
    content: " ";
    display: block;
    width: 14.2857142857%;
    height: 80%;
    margin-left: -7.1428571429%;
    position: absolute;
    top: 0%;
    left: 50%;
    z-index: 5;
    border-radius: 0 0 0.5em 0.5em;
    -webkit-box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.25);
    background-color: #fff;
}

.details-page .base-box ul {
    list-style: disc outside;
    margin: 0 0 1em 1em;
    padding: 0;
}

.details-page .base-box ul li ul {
    font-size: 90%;
}

.details-page .base-box ol {
    list-style: decimal outside;
    margin: 0 0 0 1em;
    padding: 0;
}


/*警告*/

.details-page .warning {
    background-color: #f8e3e3;
    margin-bottom: 2em;
    padding-top: 0.5em;
}

.details-page .warning:before {
    content: 'x';
}

.details-page .warning .readmore-js-toggle {
    border-radius: 0 0 0.5em 0.5em;
    background: #be6d6d;
    background: -webkit-gradient(linear, , from(#be6d6d), to(#dc9191));
    background: -webkit-linear-gradient(top center, #be6d6d 0%, #dc9191 100%);
    background: linear-gradient(top center, #be6d6d 0%, #dc9191 100%);
}

.details-page .warning .readmore-js-collapsed + .readmore-js-toggle {
    -webkit-box-shadow: 0 -10px 10px 0 rgba(190, 110, 110, 0.3);
    box-shadow: 0 -10px 10px 0 rgba(190, 110, 110, 0.3);
    display: block;
}


/*注意*/

.details-page .caution {
    background-color: #f8f2e0;
    margin-bottom: 2em;
    padding-top: 0.5em;
}

.details-page .caution:before {
    content: 'y';
}

.details-page .caution .readmore-js-toggle {
    border-radius: 0 0 0.5em 0.5em;
    background: #cdb56a;
    background: -webkit-gradient(linear, , from(#c6aa5a), to(#d4c079));
    background: -webkit-linear-gradient(top center, #c6aa5a 0%, #d4c079 100%);
    background: linear-gradient(top center, #c6aa5a 0%, #d4c079 100%);
}

.details-page .caution .readmore-js-collapsed + .readmore-js-toggle {
    -webkit-box-shadow: 0 -10px 10px 0 rgba(180, 136, 0, 0.3);
    box-shadow: 0 -10px 10px 0 rgba(180, 136, 0, 0.3);
    display: block;
}


/*知識*/

.details-page .note {
    background-color: #e9f2f8;
    margin-bottom: 2em;
    padding-top: 0.5em;
}

.details-page .note:before {
    content: '¡';
}

.details-page .note .readmore-js-toggle {
    border-radius: 0 0 0.5em 0.5em;
    background: #71a6cc;
    background: -webkit-gradient(linear, , from(#71a6cc), to(#a9c8f8));
    background: -webkit-linear-gradient(top center, #71a6cc 0%, #a9c8f8 100%);
    background: linear-gradient(top center, #71a6cc 0%, #a9c8f8 100%);
}

.details-page .note .readmore-js-collapsed + .readmore-js-toggle {
    -webkit-box-shadow: 0 -10px 10px 0 rgba(80, 134, 174, 0.3);
    box-shadow: 0 -10px 10px 0 rgba(80, 134, 174, 0.3);
    display: block;
}


/* mode */

.details-page .modeblock {
    display: block;
}
.details-page .modeblock Mode {
    display: inline-block;
    border: 2px solid #000000;
    border-style: solid none;
    margin: 0.5em 0 0.5em 0;
    padding: 0 0.5em;
}


/* footnote（脚注）*/


/*文章中に＊を埋め込み*/

.details-page footnoteAsterisk {
    display: inline;
}

.details-page footnoteAsterisk:after {
    content: "＊";
    display: inline;
    vertical-align: super;
    font-size: 0.8em;
    color: #666666;
}


/*センテンスの最後に＊付きの脚注を表示*/

.details-page footnoteBox {}

.details-page footnote {
    display: block;
    position: relative;
    padding-left: 1em;
    font-size: 0.9em;
    color: #666666;
}

.details-page footnote:before {
    content: "＊";
    position: absolute;
    left: 0em;
}


.details-page .out-link {
    display: block;
    text-align: right;
}

.details-page .out-link a {
    text-decoration: underline;
}

.details-page .out-link a:before {
    content: "→";
}

.details-page .unit {
    display: block;
    text-align: right;
    font-size: 1.8rem;
}

.details-page .video-container {
    width: 100%;
    height: 0;
    margin-bottom: 2em;
    padding-top: 56%;
    position: relative;
}

.details-page .video-container .video-player {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.sidescroll-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.sidescroll-container {
    top: 0;
    position: absolute;
}


.table-img img {
    margin: 0em;
}