@charset "UTF-8";
/* CSS Document */
:root{
    --blue:#449FFE;
    --blue-light:#EFF5FB;
    --orange:#ff6600;
}

img{width: 100%;}

.mb-0px{margin-bottom: 0!important}

.txt-nowrap{white-space: nowrap !important;}


/* -----------------------------------
   PC/SP 表示切り替え
 * ----------------------------------- */
.pc{display: block !important}
.sp{display: none !important}
@media (width <= 768px) {
.pc{display: none !important}
.sp{display: block !important}    
}

/* -----------------------------------
	ヘッダー
----------------------------------- */
h1 a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
h1 span {margin-left: 0px;}
#nav li.nav-pulldown ul.pulldown-list {width: 120px;}
#nav li.nav-pulldown#nav-dosha ul.pulldown-list {width: 200px;}
@media (min-width: 769px) and (max-width: 920px) {
h1{
    min-width: 300px;
    width: 28%;
    line-height: 1
}
h1 a {
    line-height: 1;
    font-size: 14px;
}
#nav{
    max-width: 500px;
    width: 70%;
}
#nav li a{font-size: 11px}
}
@media screen and (max-width: 768px) {
#nav li.nav-pulldown ul.pulldown-list,
#nav li.nav-pulldown#nav-dosha ul.pulldown-list {width: 100%;}
}
    
/* -----------------------------------
	ボタン
----------------------------------- */
.container-btn__right {
	text-align: center;
	margin: 15px auto;
	display: flex;
	justify-content: end;
}
a.btn-bl{
    border-radius: 6px;
    padding: 8px 10px 6px;
    display: inline-block;
    background-color: var(--blue);
    color: #ffffff;
    line-height: 1.2;
    text-align: center;
}
a.btn-bl:hover{background-color: var(--orange)}

/* -----------------------------------
	カラム
----------------------------------- */
@media screen and (max-width: 768px) {
section h2{width: 90% !important}
}

/* -----------------------------------
	見出し
----------------------------------- */
@media screen and (max-width: 768px) {
.block-half{width: 100% !important}
}


/* -----------------------------------
	凡例
----------------------------------- */
.risk-a1-44 {
    background-color: #0c000c!important;
    color: #fff
}
.risk-a1-32 {
    background-color: #a0a!important;
    color: #fff
}
.risk-a1-22 {
    background-color: #ff2800!important;
    color: #fff
}
.risk-a1-12 {
    background-color: #f2e700!important;
    color: #000
}
.risk-a1-0 {
    background-color: transparent;
    color: #000
}
.risk-b1-44 {
    background-color: #0c000c!important;
    color: #fff
}
.risk-b1-34 {
    background-color: #6c008c!important;
    color: #fff
}
.risk-b1-32 {
    background-color: #e62dff!important;
    color: #fff
}
.risk-b1-22 {
    background-color: #fa4600!important;
    color: #fff
}
.risk-b1-12 {
    background-color: #faf500!important;
    color: #000
}
.tex_risk-a1-12 {
    color: #f2e700!important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), 0px 0px 2px rgba(0, 0, 0, 0.8);
}

.ooame-lv4 {
    background-color: #0c000c!important;
    color: #fff
}
.ooame-lv3 {
    background-color: #a0a!important;
    color: #fff
}
.ooame-lv2 {
    background-color: #ff2800!important;
    color: #fff
}
.ooame-lv1 {
    background-color: #f2e700!important;
    color: #000
}
.ooame-lv0 {
    background-color: transparent;
    color: #000;
    border-color: #555
}
.ooame-lvN {
    background-color: #d7d7d7!important;
    color: #000
}

.ooame-lv3__txt{color: #a0a!important;} 


/* -----------------------------------
	用語集
----------------------------------- */
#list-words{
    column-count: 2;
    column-gap: 20px;
    width: auto;
}
@media screen and (max-width: 768px) {
#list-words{column-count: 1;}
}

/* -----------------------------------
	利用上の注意
----------------------------------- */
.diag {
  background:
    linear-gradient(
      to bottom right,
      transparent 49%,
      #000 50%,
      #000 51%,
      transparent 52%
    );
}





/* -----------------------------------
   多言語翻訳時のメニュー折り返し対策
   （英語・タガログ語等、日本語より文字数が多い言語でメニューが
   　1行に収まらない場合、js/nav-responsive-fix.js が <html> に
   　"force-sp" クラスを付与し、SP版と同じハンバーガーメニュー
   　表示に切り替える。ここではその見た目を定義する。
   　（.force-sp 配下のセレクタは、SP用メディアクエリ内の既存
   　　ルールと同じ内容だが、幅に関係なく強制適用するため
   　　クラス指定にして詳細度で上書きする） 2026-09-10 追加）
----------------------------------- */
html.force-sp .luxbar-hamburger {
    display: block;
}
html.force-sp .luxbar-navigation {
    flex-flow: column;
}
html.force-sp .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
    overflow: hidden;
    height: 50px;
}
html.force-sp .luxbar-checkbox:checked ~ .luxbar-menu {
    height: 100vh;
    overflow: auto;
}
html.force-sp .luxbar-menu {
    height: auto;
    min-height: 50px;
}
html.force-sp header {
    height: auto;
}
html.force-sp #menu,
html.force-sp #nav {
    display: block;
    width: 100%;
}
html.force-sp #nav {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
}
html.force-sp #nav li:not(.luxbar-header) {
    padding: 15px;
    height: auto;
    /* PC版の #nav li{display:flex} が残っていると、liがテキスト幅に
       縮んでしまい、右端に絶対配置している矢印（▶）がすぐ隣に
       くっついて見えるため、実機SP版と同じブロック要素（横幅いっぱい）
       に変更する。 */
    display: block;
}
html.force-sp #nav li.luxbar-header {
    height: 50px;
}
html.force-sp #nav li a {
    display: block;
    color: #fff;
    position: relative;
    height: auto;
    border-left: none;
    /* PC版の text-align:center が残っていると実機SP版と見た目が
       ズレるため、左寄せに戻す */
    text-align: left;
}
html.force-sp #nav li br {
    display: none !important;
}
html.force-sp #nav li.nav-pulldown #pulldown-list li {
    border-bottom: none;
    padding-right: 0;
}
html.force-sp #nav li a::after {
    content: "▶";
    position: absolute;
    right: 0px;
}
/* PC版のマウスホバー時の白背景（#nav li:hover等、!important指定）が、
   実機のSP版には存在しない（スマホはマウスホバーがないため）のに
   force-sp（PCの広い画面でマウス操作）だと反応してしまい、
   白背景＋薄い青文字で見えにくくなっていたための対策。
   ホバー時は色を変えず、元の配色のままにする。 */
html.force-sp #nav li:hover,
html.force-sp #nav li a:hover,
html.force-sp #nav li.nav-pulldown:hover,
html.force-sp #nav li.nav-pulldown a:hover {
    /* 白背景にすると読みにくくなるため、うっすらと白を重ねる
       だけの控えめなハイライトにして、マウスが乗っていることが
       分かるようにする（文字色はそのまま白で読みやすさを維持） */
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}
html.force-sp #nav li.active,
html.force-sp #nav li.active a {
    background-color: #FFFFFF !important;
    color: #44a0ff !important;
}
html.force-sp .luxbar-menu-material-cyan,
html.force-sp .luxbar-menu-material-cyan .dropdown ul {
    background-color: #888888;
}
html.force-sp h1 a {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: block;
    background-color: #44a0ff;
    font-size: 16px;
    padding-left: 10px;
}
html.force-sp #nav li.nav-pulldown ul.pulldown-list,
html.force-sp #nav li.nav-pulldown#nav-dosha ul.pulldown-list {
    width: 100%;
    /* PC版のホバー式プルダウン（position:absolute; visibility:hidden）を解除し、
       実機のSP版と同じく常に表示された縦並びのリストにする。
       （実機のSP版は @media (min-width:769px) の外側にあるため、
       　そもそもこのホバー式CSSが適用されない＝常に表示されている） */
    position: static;
    visibility: visible;
    opacity: 1;
    background-color: transparent;
}
/* PC版のプルダウン用「▼」は、実機のSP版には存在しない見た目のため、
   force-sp時は非表示にする。 */
html.force-sp #nav li.nav-pulldown:after {
    content: none;
}
html.force-sp .luxbar-menu-material-cyan {
    /* 実機のSP版（@media max-width:768px）と同じグレー背景にする */
    background-color: #888888;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
html.force-sp .luxbar-menu-material-cyan .dropdown ul {
    background-color: #ffffff;
}

/* -----------------------------------
   SP⇔PC切替時の残留スクロールバー対策
   （メニュー開いた状態からPC幅へ戻した際、
   #nav / .luxbar-menu が overflow:auto の
   まま幅が縮んで内部スクロールバーが
   表示される不具合の対策）
   あわせて、luxbar.min.css 側の
   @media (max-width:900px) .luxbar-menu {
     transition: 0.6s ease;
   }
   による切替アニメーションが、force-sp の
   ON/OFF切替と重なって表示が不安定になる
   のを防ぐため、このメニューに限り
   transition を無効化する。
   2026-09-10 追加
----------------------------------- */
#nav,
.luxbar-menu {
    transition: none !important;
}

/* -----------------------------------
   プルダウンメニュー：長い翻訳文での重なり対策
   （common.cssの
     #nav li.nav-pulldown ul.pulldown-list li a
     { height: 34px; line-height: 34px; }
   が1行分の固定高さのため、タガログ語等の長い
   翻訳文が折り返すと同じ枠内に複数行が重なって
   表示されてしまう不具合の対策。
   高さを可変にし、幅も少し広げる。）
   2026-09-10 追加
----------------------------------- */
#nav li.nav-pulldown ul.pulldown-list {
    width: 220px;
}
#nav li.nav-pulldown#nav-dosha ul.pulldown-list {
    width: 260px;
}
/* 「#nav li { height:35px; display:flex }」という共通ルールが
   このドロップダウン内のliにもかかってしまい、a側をheight:autoに
   しても親liの高さ35pxで頭打ちになって次の項目と重なっていたため、
   liごとheight:autoに解除する。 */
#nav li.nav-pulldown ul.pulldown-list li {
    height: auto !important;
    display: block !important;
}
#nav li.nav-pulldown ul.pulldown-list li a {
    height: auto !important;
    min-height: 34px;
    line-height: 1.4;
    padding: 8px 10px;
    display: block !important;
    align-items: unset;
}


/* -----------------------------------
   ページ内目次（用語集 #list-words／操作方法 #list-words-manual）
   多言語翻訳時の表示崩れ対策  2026-10-15 追加
   ・body の text-align:justify が継承され、英語等の長文が
   　折り返すと単語間が不自然に空く → 左揃えに戻す
   ・折り返した2行目が「▶」の下に回り込む → ぶら下げインデント化
   ・1項目が段（カラム）の境目で分断される → 段内で分割しない
   ・長い単語（URL・複合語等）で段からはみ出す → 任意位置で改行可
----------------------------------- */
#list-words li,
#list-words-manual li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 4px;
}
#list-words li a,
#list-words-manual li a {
    display: block;
    position: relative;
    padding-left: 1.2em;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.5;
}
#list-words li a:before,
#list-words-manual li a:before {
    position: absolute;
    left: 0;
    top: 0;
    line-height: inherit;
}
#list-words,
#list-words-manual {
    column-gap: 24px;
}


/* -----------------------------------
   force-sp（翻訳時のハンバーガー表示）で、画面幅 769〜920px の時に
   ヘッダーが「左だけ青・右は灰色」になり、メニューを開くと
   右側 500px だけに表示される不具合の対策  2026-10-15 追加
   原因：上の @media (min-width:769px) and (max-width:920px) にある
   　　　PC用の h1{width:28%} / #nav{max-width:500px; width:70%} /
   　　　#nav li a{font-size:11px} が force-sp 時にも残っていたため。
   　　　また body の text-align:justify により、タイトルが折り返すと
   　　　「Dosha　　Alert」のように単語間が空いていた。
   対策：force-sp 時はこれらを実機SP版（768px以下）と同じ値に戻す。
----------------------------------- */
html.force-sp h1 {
    width: 100%;
    min-width: 0;
    line-height: inherit;
}
html.force-sp h1 a {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 右端のハンバーガーボタン（×）と重ならないよう余白を確保 */
    padding-right: 60px;
    box-sizing: border-box;
}
html.force-sp #nav {
    max-width: none;
    width: 100%;
}
html.force-sp #nav li a {
    font-size: inherit;
}
/* PC版プルダウン項目の左白線（#nav li.nav-pulldown の border-left）が
   force-sp 時にも残り、メニュー左端に縦線が出るため消す */
html.force-sp #nav li.nav-pulldown {
    border-left: none;
}


/* -----------------------------------
   769〜920px でサイト名（h1）が「タイトル／解説」の2行に
   折り返す不具合の対策  2026-10-15 追加
   ・h1 の固定幅（28%／min-width:300px）をやめ、メニューの残り幅を
   　すべてタイトルに使う（メニューは中身の幅だけ確保）
   ・タイトルを1行（nowrap）にし、文字を少しだけ小さくする
   ・それでも収まらない場合は js/nav-responsive-fix.js が検知して
   　SP版（ハンバーガー）表示に切り替える
----------------------------------- */
@media (min-width: 769px) and (max-width: 920px) {
    html:not(.force-sp) h1 {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }
    html:not(.force-sp) h1 a {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        font-size: 13px;
    }
    html:not(.force-sp) #nav {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
}


/* -----------------------------------
   SP版（768px以下）でメニューを開いた時、プルダウン内の項目
   （各情報について／操作方法／Language の下の項目）が
   左側 220〜260px の幅しかなく、▶が途中に表示される不具合の対策
   2026-10-15 追加
   原因：上の「プルダウンメニュー：長い翻訳文での重なり対策」
   　　　（2026-09-10）の width:220px／260px がメディアクエリ外に
   　　　書かれており、SP版の width:100% を後から上書きしていたため。
----------------------------------- */
@media screen and (max-width: 768px) {
    #nav li.nav-pulldown ul.pulldown-list,
    #nav li.nav-pulldown#nav-dosha ul.pulldown-list {
        width: 100%;
    }
    /* 見出し（各情報について 等）の下線と項目間の区切り線を、
       翻訳時のハンバーガー表示（force-sp）と同じ見た目にそろえる */
    #nav li.nav-pulldown ul.pulldown-list li {
        border-top: 1px solid #FFFFFF;
    }
}


/* -----------------------------------
   force-sp（翻訳時のハンバーガー表示）でページ先頭の見出しが
   ヘッダーの下に隠れる不具合の対策  2026-10-15 追加
   原因：force-sp ではヘッダーが position:fixed（高さ50px）になるが、
   　　　本文（#wrapper）の上余白は PC用の 10px のままだったため。
   　　　（実機SP版は @media (max-width:768px) で margin-top:60px）
   あわせて、ページ内リンク（目次の「▶」）でジャンプした時に
   見出しが固定ヘッダーに隠れないよう、スクロール位置に余白を取る。
----------------------------------- */
html.force-sp #wrapper {
    margin-top: 60px;
}
html.force-sp {
    scroll-padding-top: 60px;
}
@media screen and (max-width: 768px) {
    html {
        scroll-padding-top: 60px;
    }
}


/* -----------------------------------
   force-sp と実機SP版のメニュー見た目の差異解消  2026-10-15 追加
   （ホーム／用語集／利用上の注意 の行だけ、PC用の
   　#nav li a{padding:.3em .5em; line-height:1.2} が残り、
   　SP版より行が6px高く、文字が6px右にずれていたため）
   ※プルダウン内の項目（padding:8px 10px）は対象外
----------------------------------- */
html.force-sp #nav > li:not(.nav-pulldown) > a {
    padding: 0;
    line-height: inherit;
}


/* -----------------------------------
   SP版（768px以下）にも、force-sp と同じマウスホバー時の
   控えめなハイライトを追加  2026-10-15 追加
   ・(hover: hover) で、マウス等ホバーできる端末のみに限定する。
   　スマホ・タブレットのタッチ操作ではタップ後に色が残る
   　（sticky hover）ため適用しない。
   ・選択中（.active）の白背景＋青文字はホバー時も維持する。
----------------------------------- */
@media screen and (max-width: 768px) and (hover: hover) {
    #nav li:hover,
    #nav li a:hover,
    #nav li.nav-pulldown:hover,
    #nav li.nav-pulldown a:hover {
        background-color: rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
    }
    #nav li.active,
    #nav li.active a {
        background-color: #FFFFFF !important;
        color: #44a0ff !important;
    }
}
/* 選択中の項目にマウスを乗せると、プルダウン用のホバー指定
   （#nav li.nav-pulldown a:hover、詳細度が高い）が勝って
   白背景＋白文字になり文字が見えなくなるため、選択中の項目は
   ホバー時も白背景＋青文字のままにする（SP版・force-sp共通） */
@media screen and (max-width: 768px) and (hover: hover) {
    #nav li.nav-pulldown li.active,
    #nav li.nav-pulldown li.active:hover,
    #nav li.nav-pulldown li.active a,
    #nav li.nav-pulldown li.active a:hover {
        background-color: #FFFFFF !important;
        color: #44a0ff !important;
    }
}
html.force-sp #nav li.nav-pulldown li.active,
html.force-sp #nav li.nav-pulldown li.active:hover,
html.force-sp #nav li.nav-pulldown li.active a,
html.force-sp #nav li.nav-pulldown li.active a:hover {
    background-color: #FFFFFF !important;
    color: #44a0ff !important;
}


/* -----------------------------------
   ハンバーガーボタンのアクセシビリティ対応  2026-10-15 追加
   ・従来はチェックボックスが display:none のため、読み上げソフト
   　やキーボード（Tabキー）から操作できなかった。
   　見た目は非表示のまま、読み上げ・キーボード操作の対象にする
   　（HTML側で aria-label="メニューを開く／閉じる" を付与）。
   ・キーボードで選択中は、ハンバーガーボタンに白い枠を表示する。
   ・PC表示（横並びメニュー）ではボタン自体が無いため、従来どおり
   　完全に非表示にして Tab キーの移動対象から外す。
----------------------------------- */
.luxbar-checkbox {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
}
.luxbar-checkbox:focus-visible ~ .luxbar-menu .luxbar-hamburger {
    outline: 2px solid #ffffff;
    outline-offset: -3px; /* メニュー枠（overflow:hidden）で枠線が切れないよう内側に描く */
}
@media screen and (min-width: 769px) {
    html:not(.force-sp) .luxbar-checkbox {
        display: none;
    }
}