@charset "UTF-8";

/* CSS custom properties
----------------------------------------- */
:root{
    /* --MainColor:rgba(16,101,176,1.0); */
    --MainColor:rgba(50,50,50,1.0);
    --LinkColor:rgba(16,101,176,1.0);
    --AccentColor:#66bae6;
    --BaseColor:rgba(255,255,255,1.0);
    --PageWidthPC:1200px;
}


/* reset style
---------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, select, main, address, img 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main 
{
    display: block;
    box-sizing: border-box;
}

a {
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: normal;
}

strong {
    font-style: normal;
}

ul li {
    list-style: none;
}

/* text style
---------------------------------------- */

html {
    font-size: 87.5%;
}
body {
    font-size: 1.0rem;
    line-height: 1.8;
    color: #333;
    font-family: Hiragino Kaku Gothic Pro, Yu Gothic Medium, Yu Gothic, Meiryo, sans-serif;
    -webkit-text-size-adjust: none;
}
:lang(zh-cn) {font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif}
:lang(zh-TW) {font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif}
:lang(ko-KR) {font-family: 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', sans-serif}

:lang(zh-cn) .fas{font-family: "Font Awesome 5 Free";}
:lang(zh-TW) .fas{font-family: "Font Awesome 5 Free";}
:lang(ko-KR) .fas{font-family: "Font Awesome 5 Free";}

h1, h2, h3, h4, h5, h6{
    font-weight: bold;
    line-height: 1.0;
}
h1{font-size: 2rem;}
h2{
    color: var(--MainColor);
    font-size: 1.5rem;
    border-bottom: 1px solid var(--MainColor);
    line-height: 1.5;
    margin-bottom: 0.5em;
}
h3{
    font-size: 1.25rem;
    margin-bottom: 0.5em;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}   
a {
    color: var(--LinkColor);
    text-decoration: none;
    transition: all 0.3s;
    text-decoration: underline;
}    
a:hover {
    color: #4682b4;
    text-decoration: underline;
}
a img {
    opacity: 1;
    transition: all 0.3s;
}
table{
    font-size: 1rem;
    border: 1px solid #ccc;
}
th, td{
    border: 1px solid #ccc;
    padding: 0.25em;
}
q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}
sup {
    vertical-align: text-bottom;
}
sub {
    vertical-align: text-top;
}
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-size: 100%;
}
iframe{
    display: block;
    max-width: 100%;
    margin-bottom: 2em;
}


/* .contents.single style 
---------------------------------------- */
del{color: #999;}

h1, h2, h3, h4 {
    margin-top: 3em;
    margin-bottom: 1.5em;
}
h1{
    font-weight: bold;
    color: var(--MainColor);
    position: relative;
    margin-bottom: 0.75em;
    counter-reset: HeadLineNo2;
}
h1:first-of-type{margin-top: 0em;}
h2{
    color: var(--MainColor);
    font-weight: bold;
    counter-increment: HeadLineNo2;
    counter-reset: HeadLineNo3;
    position: relative;
    /* padding-left: 75px; */
    border-bottom: none;
    margin-top: 2em;
    margin-bottom: 0.5em;
}
/* h2::before{
    position: absolute;
    left: 0;
    top: 0;
    color: var(--MainColor);
    content: counter(HeadLineNo1)"."counter(HeadLineNo2);
} */
h3{
    color: var(--MainColor);
    counter-increment: HeadLineNo3;
    counter-reset: HeadLineNo4;
    position: relative;
    /* padding-left: 75px; */
    margin-top: 2em;
    margin-bottom: 0.5em;
}
h2 + div.section_2 h3:first-of-type{
    margin-top: 1em;
}
/* h3::before{
    position: absolute;
    left: 0;
    top: 0;
    color: var(--MainColor);
    content: counter(HeadLineNo1)"."counter(HeadLineNo2)"."counter(HeadLineNo3);
} */
h4{
    color: var(--MainColor);
    font-weight: bold;
    font-size: 1.0rem;
    counter-increment: HeadLineNo4;
    position: relative;
    /* padding-left: 75px; */
    margin-top: 1em;
    margin-bottom: 0.5em;
}
/* h4::before{
    position: absolute;
    left: 0;
    top: 0;
    color: var(--MainColor);
    content: counter(HeadLineNo1)"."counter(HeadLineNo2)"."counter(HeadLineNo3)"."counter(HeadLineNo4);
} */
.Subhead1, .Subhead2{
    color: var(--MainColor);
    font-weight: bold;
    margin-top: 1em;
    counter-reset: Step1No Body_list_No;
}
.Subhead1::before{
    content: "■ ";
}
.Subhead2{
    color: var(--MainColor);
}
.Subhead2::before{
    content: "● ";
}
table{
    width: 100%;
    margin-top: 1em;
    margin-bottom: 2em;
}
th{
    font-weight: bold;
    background-color: #eee;
}
img{vertical-align: middle; margin-left: 0.25em;margin-right: 0.25em;}
.Illust{
    margin: 1em auto 2em;
    text-align: center;
}
.Body_right{
    text-align: right;
}
.Body_bullet{
    padding-left: 1em;
    position:relative;
}
.Body_bullet::before{
    content: "●";
    font-size: 10px;
    position: absolute;
    left: 0;
    top: 0.5em;
}
.Body_list{
    counter-increment: Body_list_No;
    position: relative;
    padding-left: 2em;
}
.Body_list::before{
    content: counter(Body_list_No);
    position: absolute;
    left: 0;
}
.Body_list.list_start{
    counter-reset:Body_list_No;
}
.Step1_body{
    counter-increment: Step1No;
    position: relative;
    padding-left: 2em;
    counter-reset: Step2No;
}
.Step1_body::before{
    font-weight: bold;
    color: var(--MainColor);
    content: counter(Step1No);
    position: absolute;
    left: 0;
}
.Step1_body:first-of-type{
    counter-reset: Step1No;
}
.Step1_bullet + .Step1_body{
    margin-top: 1em;
}
.Step1_next{
    margin-left: 2em;
    margin-bottom: 1em;
}
.Step1_bullet{
    margin-left: 2em;
    padding-left: 1em;
    position:relative;
}
.Step1_bullet::before{
    content: "・";
    position: absolute;
    left: 0;
}

.Step2_body{
    counter-increment: Step2No;
    position: relative;
    padding-left: 2em;
    margin-left: 2em;
}
.Step2_body::before{
    content: counter(Step2No)".";
    position: absolute;
    left: 0;
}
.Table_left_bold{
    font-weight: bold;
}
.Table_center{
    text-align: center;
}
.Table_bullet{
    padding-left: 1em;
    position:relative;
}
.Table_bullet::before{
    content: "・";
    position: absolute;
    left: 0;
}

.note{
    display: block;
    background-color:rgba(56,135,200,0.1);
    border-left: 3px solid rgba(56,135,200,1.0);
    padding: 0.5em 0.5em 0.5em 5em;
    position: relative;
    margin: 1em 0 2em;
}
.note::before{
    font-size: 1.2em;
    font-weight: bold;
    color: rgba(56,135,200,1.0);
    content: "メモ";
    position: absolute;
    top: 0.2em;
    left: 0.5em;
}
:lang(en-US) .note{padding-left: 6em;}
:lang(en-US) .note::before{content: "NOTE";}
:lang(zh-cn) .note::before{content: "备注";}
:lang(zh-TW) .note::before{content: "備註";}
:lang(ko-KR) .note::before{content: "메모";}

.Note_bullet{
    margin: 0;
    position: relative;
    padding-left: 1em;
}
.Note_bullet::before{
    font-weight: bold;
    color: rgba(56,135,200,1.0);
    content: "・";
    position: absolute;
    left:0em;
}
.ref{
    display: block;
    background-color:rgba(69,159,161,0.1) ;
    padding: 0.5em 0.5em 0.5em 5em;
    border-left: 3px solid rgba(69,159,161,1.0);
    position: relative;
    margin: 1em 0 2em;
}
.ref::before{
    content: "参照";
    font-size: 1.2em;
    font-weight: bold;
    color: rgba(69,159,161,1.0);
    position: absolute;
    top: 0.2em;
    left: 0.5em;
}
:lang(en-US) .ref{padding-left: 10em;}
:lang(en-US) .ref::before{content: "REFERENCE";}
:lang(zh-cn) .ref::before{content: "参照";}
:lang(zh-TW) .ref::before{content: "参照";}
:lang(ko-KR) .ref::before{content: "참조";}

.Ref_bullet{
    margin: 0;
    position: relative;
    padding-left: 1em;
}
.Ref_bullet::before{
    font-weight: bold;
    color: rgba(69,159,161,0.5);
    content: "・";
    position: absolute;
    left:0em;
}
.important{
    display: block;
    color: #333;
    font-weight: bold;
    background-color:rgba(195,61,115,0.1) ;
    padding: 0.5em 0.5em 0.5em 5em;
    border-left: 3px solid rgba(195,61,115,1.0);
    position: relative;
    margin: 1em 0 2em;
}
.important::before{
    content: "重要";
    font-size: 1.2em;
    font-weight: bold;
    color: rgba(195,61,115,1.0);
    position: absolute;
    top: 0.2em;
    left: 0.5em;
}
:lang(en-US) .important{padding-left: 10em;}
:lang(en-US) .important::before{content: "IMPORTANT";}
:lang(zh-cn) .important::before{content: "重要";}
:lang(zh-TW) .important::before{content: "重要";}
:lang(ko-KR) .important::before{content: "중요";}

.Important_bullet{
    margin: 0;
    position: relative;
    padding-left: 1em;
}
.Important_bullet::before{
    font-weight: bold;
    color: rgba(195,61,115,0.5);
    content: "・";
    position: absolute;
    left:0em;
}
.PL_Warning_table, .PL_Caution_table, .PL_Danger_table, .PL_Notice_table {
    border: 0;
}
.PL_Warning_table th, .PL_Caution_table th, .PL_Danger_table th, .PL_Notice_table th{
    border-left: 0;
    border-right: 0;
    background-color: #fff;
} 
th:has(.PL_start_danger, .PL_start_warning, .PL_start_caution, .PL_start_notice){
    padding: 0;
    border: 0;
}


.PL_start_danger, .PL_start_warning, .PL_start_caution, .PL_start_notice{
    height: 3em;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    position: relative;
}
.PL_start_danger::before, .PL_start_warning::before, .PL_start_caution::before, .PL_start_notice::before{
    content: "";
    height: 3em;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 24px;
}
.PL_start_danger::before{
    background-color:rgba(230, 0, 18, 1.0) ;
    background-image: url(img/danger_ja.svg);
}
.PL_start_warning::before{
    background-color:rgba(240, 131, 0, 1.0) ;
    background-image: url(img/warning_ja.svg);
}
.PL_start_caution::before{
    background-color:rgba(255, 227, 0, 1.0) ;
    background-image: url(img/caution_ja.svg);
}
.PL_start_notice::before{
    background-color:rgba(0, 72, 146, 1.0) ;
    background-image: url(img/notice_ja.svg);
}

:lang(en-US) .PL_start_danger::before{background-image: url(img/danger_en.svg);}
:lang(en-US) .PL_start_warning::before{background-image: url(img/warning_en.svg);}
:lang(en-US) .PL_start_caution::before{background-image: url(img/caution_en.svg);}
:lang(en-US) .PL_start_notice::before{background-image: url(img/notice_en.svg);}

:lang(zh-TW) .PL_start_danger::before{background-image: url(img/danger_tw.svg);}
:lang(zh-TW) .PL_start_warning::before{background-image: url(img/warning_tw.svg);}
:lang(zh-TW) .PL_start_caution::before{background-image: url(img/caution_tw.svg);}
:lang(zh-TW) .PL_start_notice::before{background-image: url(img/notice_tw.svg);}

:lang(zh-cn) .PL_start_danger::before{background-image: url(img/danger_cn.svg);}
:lang(zh-cn) .PL_start_warning::before{background-image: url(img/warning_cn.svg);}
:lang(zh-cn) .PL_start_caution::before{background-image: url(img/caution_cn.svg);}
:lang(zh-cn) .PL_start_notice::before{background-image: url(img/notice_cn.svg);}

:lang(ko-KR) .PL_start_danger::before{background-image: url(img/danger_kr.svg);}
:lang(ko-KR) .PL_start_warning::before{background-image: url(img/warning_kr.svg);}
:lang(ko-KR) .PL_start_caution::before{background-image: url(img/caution_kr.svg);}
:lang(ko-KR) .PL_start_notice::before{background-image: url(img/notice_kr.svg);}

.PL_body, .PL_bold, .PL_bullet{
    /* margin-left: 2em; */
    position: relative;
}
.PL_body{
    font-weight: normal;
}
.PL_bold{
    font-weight: bold;
}
.PL_bullet{
    padding-left: 1em;
    font-weight: normal;
}
.PL_body.prohibition_mark, .PL_bold.prohibition_mark, .PL_bullet.prohibition_mark, .PL_body.instruction_mark, .PL_bold.instruction_mark, .PL_bullet.instruction_mark{
    margin-left: 4em;
}

.PL_bullet::after{
    font-weight: bold;
    color: rgba(0,0,0,0.5);
    content: "・";
    position: absolute;
    left:0em;
}
th:has(.PL_instruction_mark, .PL_prohibition_mark), td:has(.PL_instruction_mark, .PL_prohibition_mark){
    width: 5em;
}
.PL_instruction_mark, .PL_prohibition_mark{
    min-height: 3em;
}
.PL_instruction_mark::before, .PL_prohibition_mark::before{
    display: block;
    content: "";
    height: 3em;
    width:3em;
}

.PL_prohibition_mark::before{
    background-image: url(img/prohibition_mark.svg);
    background-size: cover;  
}
.PL_instruction_mark::before{
    background-image: url(img/instruction_mark.svg);
    background-size: cover;
}




.red{color: rgba(255, 0, 0, 1.0);}
.blue{color: rgba(0, 0, 255, 1.0);}
.green{color: rgba(0, 255, 0, 1.0);}
.red_b{color: rgba(255, 0, 0, 1.0);font-weight: bold;}
.blue_b{color: rgba(0, 0, 255, 1.0);font-weight: bold;}
.green_b{color: rgba(0, 255, 0, 1.0);font-weight: bold;}
.bold_itaric{font-weight: bold;font-style: italic;}
.marker{position: relative;}
.marker::before{
    display: inline-block;
    content: "";
    background-color: rgba(255, 255, 0, 0.5);
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 1em;
    top: 0.25em;
}

.Narrow_space{height: 1em;}
.caption{text-align: center;}
.Illust_no_space{text-align: center;margin: 0;}
.Illust_no_space img{vertical-align: middle; margin: 0;}

@media (min-width: 768px) {
    html{
        font-size: 100%;
    }
 }

/* media query PC
---------------------------------------- */
@media (min-width: 1024px) {
 
}
/* media query Print
---------------------------------------- */
@media print {

}