@charset "UTF-8";
/* CSS Document */

html {
	background: #3B2371;
}

/* -----------------------------------
    汎用クラス
   ----------------------------------- */
body, td, th, h1, h2, h3, h4, h5, h6 { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
body { font-size: 13px; color: #333333; line-height: 1.5; background-color: #FFFFFF; -webkit-text-size-adjust : none; margin: 0; }

@media (max-width: 639px) {
  body { font-size: 14px; word-wrap: break-word;}
}
a { text-decoration: none; }
a:link { color: #00F; transition: all 0.3s linear; }
a:visited { color: #800080; }
a:hover { color: #F60; transition: all 0.3s linear; }
a:active { color: #F00; }
a:hover img { filter: alpha(opacity=60); opacity: 0.6; transition: all 0.3s linear; }

.textRed { color: #F00; }

.marginTop0px { margin-top: 0px !important; }
.marginTop3px { margin-top: 3px !important; }
.marginTop5px { margin-top: 5px !important; }
.marginTop10px { margin-top: 10px !important; }
.marginTop15px { margin-top: 15px !important; }
.marginTop20px { margin-top: 20px !important; }
.marginTop30px { margin-top: 30px !important; }
.marginTop35px { margin-top: 35px !important; }
.marginTop50px { margin-top: 50px !important; }
.marginTop100px { margin-top: 100px !important; }
.marginBottom0px { margin-bottom: 0px !important; }
.marginBottom3px { margin-bottom: 3px !important; }
.marginBottom5px { margin-bottom: 5px !important; }
.marginBottom10px { margin-bottom: 10px !important; }
.marginBottom15px { margin-bottom: 15px !important; }
.marginBottom20px { margin-bottom: 20px !important; }
.marginBottom30px { margin-bottom: 30px !important; }
.marginTopBottom5px { margin-top: 5px !important; margin-bottom: 5px !important; }
.marginTopBottom10px { margin-top: 10px !important; margin-bottom: 10px !important; }
.marginLeft0px { margin-left: 0px !important; }
.marginLeft5px { margin-left: 5px !important; }
.marginLeft10px { margin-left: 10px !important; }
.marginLeft15px { margin-left: 15px !important; }
.marginLeft20px { margin-left: 20px !important; }
.marginRight10px { margin-right: 10px !important; }
.marginRight20px { margin-right: 20px !important; }
.marginRight30px { margin-right: 30px !important; }
.marginRight50px { margin-right: 50px !important; }
.marginRightLeft5px { margin-right: 5px !important; margin-left: 5px !important;}
.marginRightLeft10px { margin-right: 10px !important; margin-left: 10px !important;}
.marginRightLeft15px { margin-right: 15px !important; margin-left: 15px !important;}
.paddingLeft5px { padding-left: 5px !important; }
.paddingLeft10px { padding-left: 10px !important; }
.paddingLeft20px { padding-left: 20px !important; }
.paddingRight0px { padding-right: 0px !important; }
.paddingRight5px { padding-right: 5px !important; }
.paddingRight10px { padding-right: 10px !important; }
.paddingRight20px { padding-right: 20px !important; }
.paddingTop5px { padding-top: 5px !important; }
.paddingBottom10px { padding-bottom: 10px !important; }
.paddingBottom30px { padding-bottom: 30px !important; }
.paddingTopBottom2px { padding-top: 2px !important; padding-bottom: 2px; }

/* -----------------------------------
    ヘッダー
   ----------------------------------- */
#header-fix {
	position: fixed;
	z-index: 1000;
	top: 0px;
	left: 0px;
	width: 100%;
}
#main-header {
	background-color: #F0F0F0;
}
#logo {
	width: 30%;
}
#logo img {
	width: 100%
}
@media (max-width: 768px) {
#header-fix {
	position: relative;
}
#main-header {
	height: 40px;
}
#logo {
	width: 80%;
}
#logo img {
	width: 60%
}
}
@media (max-width:440px) {
#logo img {
	width: 100%
}
}

/* -----------------------------------
    ナビゲーション
   ----------------------------------- */
#main-nav{
	background: #3B2371;
}
.navbar {
	min-height: 0;
	margin-bottom: 0
}
.navbar-default {
	background: 0 0;
	border: none
}
.navbar-collapse {
	padding-right: 0;
	padding-left: 0;
	box-shadow: none
}
.navbar-nav>li {
	float: none;
}
.navbar-nav>li>a {
	padding: 0;
	white-space: nowrap;
	text-align: center
}
.navbar-nav>li>a {
	line-height: 45px;
	height: 45px;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
	color: #3B2371;
	background-color: #F9F2FC;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{
	color: #3B2371;
	background-color: #F9F2FC;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{
	color: #3B2371;
	background-color: #F9F2FC;
}
.navbar-default .navbar-nav>li>a{
	color: #fff;
}
.navbar-default .navbar-toggle:hover .icon-bar{
	background-color: #F9F2FC;
}
.dropdown-menu {
	background-color: #F9F2FC;
	border: none;
	border-radius: 0px 0px 4px 4px;
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.3);
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
	padding: 0px;
}
.dropdown-menu>li>a {
	line-height: 2;
	color: #3B2371;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
	text-decoration: none;
	color: #ffffff;
	background-color: #3B2371;
}


@media (max-width:768px) {
.navbar-collapse {
	max-height: none
}
.navbar-nav>li {
	float: none;
	width: auto;
	display: block
}
.navbar-nav {
	margin: 0
}
.navbar-collapse {
	border-top: 0;
	background: #009EB8

}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
	color: #fff
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
	color: #149cd7
}
.dropdown-header {
	color: #FFF
}
.hidephone {
	display: none
}
.copyright-block .left {
	text-align: center
}
}

.navbar-inverse {
	background-color: transparent;
	border: none;
}

/* -----------------------------------
   スマホ用メニューボタン
 * ----------------------------------- */
@media (max-width: 768px) {
.spTopNavi {
	position: absolute;
	right: 0;
	top: 0;
}
  .visible-xs {
    display: block !important;
  }
}

#right-menu {
	position: absolute;
	z-index: 100000;
	background-color: #3B2371;
	right: 0px;
	width: 40px;
	height: 40px;
	text-align: center;
	color: #FFFFFF;
}
a#right-menu {
	text-decoration: none;
}
#right-menu .oi {
	font-size: 18px;
}
#right-menu span#menu  {
	font-size: 7px;
	position: absolute;
	bottom: 3px;
	right: 8px;
}

#sidr-right #spMenu li a .oi {
	display: inline-block;
	padding-left: 0px;
	padding-right: 3px;
	font-size: 13px;

}

/* -----------------------------------
   ページ下ナビ
 * ----------------------------------- */
.pager {
	padding-left: 0;
	margin: 20px 0;
	list-style: none;
	text-align: center
}
.pager li {
	display: inline
}
.pager li>a {
	display: inline-block;
	padding: 5px 14px;
	background-color: #F9F2FC;
	border: 1px solid #3B2371;
	border-radius: 0px;
	color: #3B2371;
}
.pager>li>a:hover,
.pager>li.active>a,
.pager>li.active>a:hover {
	background-color: #3B2371;
	color: #FFFFFF;
}
.pager>li>a:hover:before,
.pager>li.active>a:before,
.pager>li.active>a:hover:before  {
	font-family: 'Icons';
	content: '\e032';
	color: #ffffff;
	margin: 0px 4px 0 0px;
	font-size: 10px;
}

#bottom-nav {
	border-top: 2px solid #F9F2FC;
	padding-top: 15px;
}

@media (max-width: 640px) {
.pager li {
	display: block
	border-bottom: 1px solid #3B2371;
	width: 100%;
}
.pager li>a {
	display: block;
	padding: 5px 14px;
	background-color: #ffffff;
	border-bottom: 1px solid #3B2371;
	border-top: none;
	border-left: none;
	border-right: none;
}
}

/* -----------------------------------
   タブ表示
 * ----------------------------------- */
.nav-tabs {
	border-bottom: 1px solid #F9F2FC;
}
.nav>li>a {
	color: #333333;
	font-weight: bold;
}
.nav>li>a:hover {
	text-decoration: none;
	background-color: #F9F2FC;
	color: #3B2371;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover {
	color: #3B2371;
	background-color: #fff;
	border: 1px solid #F9F2FC;
	border-bottom-color: transparent;
	cursor: default;
	font-weight: bold;
}
.nav-tabs>li.active>a:before  {
	font-family: 'Icons';
	content: '\e02c';
	color: #3B2371;
	margin: 0px 4px 0 0px;
	font-size: 10px;
}
/*リスクタブ*/
/*操作方法タブ*/
#lisk-tab, 
#manual-tab {
	margin-top: 15px;
}
#lisk-tab>li>a,
#manual-tab>li>a {
	color: #3B2371;
	background-color: #F9F2FC;
	border: 1px solid #F9F2FC;
	border-bottom-color: transparent;
}
#lisk-tab>li>a:hover,
#manual-tab>li>a:hover {
	text-decoration: none;
	background-color: #3B2371;
	border: 1px solid #3B2371;
	color: #fff;
}
#lisk-tab>li.active>a,
#lisk-tab>li.active>a:hover,
#manual-tab>li.active>a,
#manual-tab>li.active>a:hover {
	color: #000;
	background-color: #fff;
	border: 1px solid #F9F2FC;
	border-bottom-color: transparent;
}
#lisk-tab>li.active>a:before,
#manual-tab>li.active>a:before {
	color: #000;
}

@media (max-width: 768px) {
#lisk-tab li,
#manual-tab li {
	display: block;
	width: 100%;
}
.nav-tabs>li>a {
	border-radius: 4px;
}
.nav>li>a {
	padding: 6px 15px
}
}

/* -----------------------------------
   カラム
 * ----------------------------------- */

#contents-main {
	margin: 80px auto 10px;
	padding: 15px;
}
.content-block {
	padding: 0px 20px;
	margin-bottom: 20px;
}
.contentInner-block {
	padding: 10px 20px 0px;
}
.sp-block {
	padding-left: 100px;
	padding-right: 100px;
}

@media (max-width: 768px) {
#contents-main {
	margin: 0px auto 0px;
}
.sp-block {
	padding-left: 0px;
	padding-right: 0px;
}
}
@media (max-width: 640px) {
.contents-img {
	margin: 10px auto;
	width: 85%;
}
.content-block {
	padding: 0px 0px 15px;
}
.contentInner-block {
	padding: 10px 0px 0px;
}
}


/* -----------------------------------
   見出し
 * ----------------------------------- */

h2 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: bold;
	background-color: #ECECEC;
	padding: 10px 15px 6px;
	color: #3B2371;
}
h3 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 3px solid #F9F2FC;
}
h4 {
	margin-top: 10px;
	margin-bottom: 5px;
	font-size: 15px;
	font-weight: bold;
	background-color: #ECECEC;
	padding: 6px 12px 3px;
}
h5 {
	margin-top: 10px;
	margin-bottom: 5px;
	font-weight: bold;
}
.caption {
	font-size: 12px;
	line-height: 1.2;
	margin-top: 10px;
	margin-bottom: 10px;
}
.link-gaibu:before  {
	font-family: 'Icons';
	content: '\e061';
	color: #2EA5FF;
	margin: 0px 4px 0 0px;
	font-size: 10px;
}
.link-naibu:before  {
	font-family: 'Icons';
	content: '\e08a';
	color: #2EA5FF;
	margin: 0px 4px 0 0px;
	font-size: 10px;
}

span.br {
	display: none;
}

@media (max-width: 640px) {
h2 {
	margin-top: 0px;
	font-size: 20px;
	background-color: #ECECEC;
	padding: 8px 12px 4px;
}
h3 {
	margin-top: 12px;
	margin-bottom: 5px;
	font-size: 17px;
}
span.br {
	display: inline;
}
}


/* -----------------------------------------
   テーブルデザイン
 * ----------------------------------------- */

.tableTdLeft,
.tableTdCenter {
	width: 100%;
}
.tableTdLeft th,
.tableTdCenter th {
	padding: 4px 3px 1px;
	border: 1px solid #999999;
	font-size: 100%;
	font-weight: normal;
	line-height: 1.2;
	text-align: center;
	background-color: #E9E9E9;
}
.tableTdLeft td,
.tableTdCenter td {
	padding: 4px 3px 1px;
	border: 1px solid #999999;
	line-height: 1.2;
	text-align: left;
	word-break:break-all
}
.tableTdCenter td {
	text-align: center;
}
th.tableTextCenter,
td.tableTextCenter {
	text-align: center;
}
td.textJustify {
	text-align: justify;
}

.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
	background-color: #F6FCFD
}

/* -----------------------------------
   ナンバリング
 * ----------------------------------- */

ol.number {
	counter-reset: item;
	list-style: none;
}
.number li {
	display: block;
	padding-left: 2em;
}
.number li:before {
	content: counters(item, "-")".";
	counter-increment: item;
	display: inline-block;
	margin-right: 12px;
	margin-left: -2em;
}

/* -----------------------------------
   操作方法ナンバリング
 * ----------------------------------- */
ol.manual-text {
	counter-reset: item;
	list-style: none;
}
.manual-text li {
	display: block;
	margin-top: 10px;
	padding-bottom: 15px;
	padding-left: 2em;
}
.manual-text li:before {
	content: counters(item, "-")"";
	counter-increment: item;
	width: 18px;
	height: 18px;
	background-color: #FF0000;
	color: #FFFFFF;
	display: inline-block;
	text-align: center;
	margin-right: 8px;
	margin-left: -2em;
}
ol.manual-text ol.hanrei-container {
}
.manual-text li .hanrei-container li {
	margin-left: -2em;
	margin-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px dotted #C0C0C0;
}
.manual-text li .hanrei-container li:before {
	content: none;
}
@media (max-width: 640px) {
.manual-text li {
	margin-top: 0px;
	padding-bottom: 10px;
}
}
.manual-text li.as-note::before {
  content: "※";
  counter-increment: none; /* この項目ではカウンタを進めない（任意） */
  /* バッジの見た目はそのまま流用されます（幅・背景色など） */
}


/* -----------------------------------
   ページ内リンク
 * ----------------------------------- */
#words-left li a,
#words-right li a {
	background-image: url(../images/icon_arrow.png);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 10px;
}

/* -----------------------------------
   ボタン
 * ----------------------------------- */
.btn {
	padding: 3px 8px 1px;
	background-color: #666666;
	border-color: #5E5E5E;
	color: #FFFFFF;
	margin-bottom: 10px;
}

/* -----------------------------------
    囲み
   ----------------------------------- */
.well {
	min-height: auto;
	padding: 10px 15px;
	margin-bottom: 10px;
	margin-top: 10px;
	background-color: #F7F7F7;
}

/* -----------------------------------
    ページトップ
   ----------------------------------- */
#page-top {
	position: fixed;
	right: 15px;
	z-index: 100000;
}
#page-top a {
	width: 70px;
	height: 70px;
	border-radius: 70px;
	background: #666;
	text-align: center;
	display: block;
	vertical-align: middle;
	line-height: 1.2;
	padding-top: 20px;
}
#page-top p a #pc-text {
	font-size: 11px;
	display: block;
	color: #fff;
}
#page-top p a #sp-text {
	display: none;
}

@media (max-width: 640px) {
#page-top a {
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background: #666;
	text-align: center;
	padding-top: 10px;
}
#page-top p a #sp-text {
	font-size: 25px;
	display: block;
	color: #fff;
}
#page-top p a #pc-text {
	display: none;
}
}

/* ▼ 注意ボックス（赤枠＋赤文字） */
.manual-text li.note-box {
  border: 1px solid #ff0000;
  color: #d10000;          /* 本文の文字色も赤系に */
  padding: 12px 12px 12px 2.2em; /* 左は番号分のインデントとバッジ分を考慮 */
  margin-top: 12px;
}

/* ▼ この行は番号を出さない＆カウンタを進めない */
.manual-text li.no-number::before {
  content: none;
  counter-increment: none;
}

/* （参考）番号バッジの縦中央揃えをしていない場合は推奨 */
.manual-text li::before {
  line-height: 18px; /* 既存の width/height が 18px のため */
}


/* -----------------------------------
   フッター
 * ----------------------------------- */
#footer {
	background: #3B2371;
	padding-top: 15px;
	color: #fff;
	padding-bottom: 30px;
}
#footer p a {
	text-align: center;
	color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	display: block;
	font-size: 14px;
}




:root{
  --overlay-backdrop: rgba(50,50,50,0.7); /* 背景グレーの濃さ（α=0〜1） */
  --viewport-pad-x: 24px;  /* ビューポート左右余白(px) */
  --viewport-pad-y: 24px;  /* ビューポート上下余白(px) */
}

/* サムネイル */
.thumb-wrapper{ display:grid; grid-template-columns:1fr; gap:1rem; }
.thumb{
  display: block; width: 100%; overflow:hidden; cursor:zoom-in;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease;
}
.thumb:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.thumb:focus-visible{ outline:3px solid var(--accent); }
.thumb img{ width:100%; height:auto; display:block; }
figcaption{ margin-top:.5rem; text-align:center; font-size:.9rem; color:#888; }

/* オーバーレイ（ウインドウ中央に確実に配置） */
.overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: var(--overlay-backdrop);
  z-index: 9999;
  opacity: 0;
  transition: opacity .18s ease;
  box-sizing: border-box;
}
.overlay[aria-hidden="false"]{
  display: flex !important;
  opacity: 1;
}

/* A: ボックスモード（横95% × 縦70%） */
.overlay[data-mode="boxed"] .modal{
  position: relative;
  width: 95vw !important;
  height: 70vh !important;
  max-width: 1400px;               /* 横長画面の上限（任意） */
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
  border-radius: 12px;
  margin: 0 !important;
}

/* B: フルスクリーン */
.overlay[data-mode="fullscreen"] .modal{
  position: relative;
  width: 100vw !important;
  height: 100vh !important;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
  border-radius: 0;
}

/* 画像表示領域（ズーム＆パン対象） */
.viewport{
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #000;
  border-radius: 12px;
  padding: var(--viewport-pad-y) var(--viewport-pad-x);
  box-sizing: border-box;
  touch-action: none;     /* タッチ端末での誤スクロール抑止 */
  cursor: zoom-in;        /* 等倍時のカーソル */
}
.viewport.is-zoomed{ cursor: grab; }
.viewport.is-zoomed:active{ cursor: grabbing; }

/* 等倍時：object-fit で常に中央＆短辺基準（contain） */
#zoomImg{
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;                     /* 非ズーム時は transform 不使用 */
  transition: transform .18s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* ズーム時：transform（translate + scale）を適用 */
.viewport.is-zoomed #zoomImg{
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  object-fit: unset;
  object-position: unset;
  transform-origin: 0 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--scale, 1));
}

/* 閉じるボタン等 */
.close-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  border: none;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 20px;
}
.close-btn:hover{ background: rgba(0,0,0,.75); }
.close-btn:focus-visible{ outline: 3px solid var(--accent); }

/* ヘルプ（左下） */
.help{
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: #fff;
  font-size: .85rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  pointer-events: none;
}

/* 背面スクロール抑止 */
body.modal-open{ overflow: hidden; }


/* ピンアイコン */
.pin-icon {
  width: 14px;       /* 好きなサイズに調整 */
  height: auto;
  vertical-align: middle; /* 文章の高さに馴染ませる */
  margin: 0 2px;
}