/*-----------------------
   Attic or Garret
   スタイルシート
   2021/10/22 ver5
-----------------------*/
@charset "Shift_JIS";

/*----------------
   ユニバーサルセレクタ
----------------*/
/* 
   IE6とFirefox10の上下余白の違いのためhrタグを除外したいが
   IE6では:not(hr) が無効(*以降の{}内も反映されず)になるため
   * {margin: 0px;} の設定自体を無効とする 
   hrの初期状態ではIE6とFirefox10上下余白はほぼ同じとなる
   * {margin: 0px;} の実行後にhr {margin: 1ex;}とすると
   IE6で高さが2倍近くなってしまう */
/*
* {
	margin: 0px;
}
*/
html,body,img,h1,h2,h3,h4 {
	margin: 0px;
}

/*---------------
   html / body
---------------*/
/* タイプ(要素)セレクタ (順位下位) */
html { 
	height:100%;			/* 背景をページの下まで伸ばすおまじない */
} 
body { 
	text-align: center;

/*
	font-size: 75%;
	font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif;
*/
	font-family: "Helvetica Neue",
	Arial,
	"Hiragino Kaku Gothic ProN",
	"Hiragino Sans",
	Meiryo,
	sans-serif;

/*	color: #444444;*/ /* 標準文字色 */
/*	background-image: url('img/bg_1Ee_01.png');
	background-position: top left;
	background-repeat: repeat-x;
	min-width: 884px;
*/
	height:100%;			/* 背景をページの下まで伸ばすおまじない */ 
}
/* Safari用ハック 文字サイズ調整 使えない20170411 */
/*\*/
html:\66irst-child body
{
	/*font-size: 70%;*/
}
/* end */

/*
img
{
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
}
*/

/*------------
   clearfix
------------*/
.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
* html .clearfix {height:1px;}

/*------------
   背景設定
------------*/
/* 
   IE6(Firefox10はOK)ではセレクタのクラス指定に問題があるため
	次のような記述は使わずに別セレクタとして複数定義する

   #background.road {  
   	   background-image: url('img/background-road.gif');
   }
   #background.road a:link {
 	   color:#60b0ff;	
   }
*/

/*--------------------
   バックグラウンド
   ブラウザサイズによって変更
--------------------*/
@media screen and (min-width: 918px) {
  #background,#background-road {
	background-color: #f3f3f3;
	background-image: url('img/background.gif');
	background-repeat: repeat-y;
	height: 100%;			/* 背景をページの下まで伸ばすおまじない */
	min-height: 100%;		/* 背景をページの下まで伸ばすおまじない */
	background-position: center;	/* 中央寄せレイアウト */
	text-align: center;		/* 中央寄せレイアウト IE6必須 */
  }
  #background {
	background-image: url('img/background.gif');
  }
  #background-road {
    background-image: url('img/background-road.gif');
  }
  #hpb-container {
	position: relative;
  }
  #hpb-inner { /* ページの左右の余白調整 */
	margin-left: 20px; /* 25 */
	margin-right: 25px; /* 25 */
	/* margin-top: 10px; */ 
	margin-bottom: 0px;
    padding-top:10px; /* margin-topだと上部が白いベルトになるのでpadding-topに変更*/
  }
  .basic-inner { /* indexを使わないときの左右の余白調整 */
	margin: 0px 20px 0px 20px;
    padding-top:10px; /* margin-topだと上部が白いベルトになるのでpadding-topに変更*/
  }
  .site-box-index {
	width : 900px;			/* 背景画像の表示範囲-左右のパッド分 */
	padding-top: 0px;		/* 上パッド */
	padding-bottom: 14px;		/* 下パッド */
	margin: 0px auto;
	/* margin-left: 25px; */	/* 左寄せの際に必要 */
	text-align: left;
  }
  .site-box {
	width : 884px;			/* 背景画像の表示範囲-左右のパッド分 */
					/* 左右のパッドはwidthで設定 */
	padding-top: 8px;		/* 上パッド */
	padding-bottom: 14px;		/* 下パッド */
	margin: 0px auto;
	/* margin-left: 25px; */	/* 左寄せの際に必要 */
	text-align: left;
  }
}
@media screen and (max-width: 917px) {
  #background,#background-road {
	height: 100%;			/* 背景をページの下まで伸ばすおまじない */
	min-height: 100%;		/* 背景をページの下まで伸ばすおまじない */
	text-align: center;		/* 中央寄せレイアウト IE6必須 */
  }
  #background-road {
	background-image: url('img/base-01.gif');
	background-repeat: repeat;
  }
  #hpb-container {
	position: relative;
  }
  #hpb-inner { /* ページの左右の余白調整 */
	margin-left: 8px; /* 25 */
	margin-right: 12px; /* 25 */
	/*margin-top: 11px;*/ /* topを11pxにしないとタイトルに下線がでる? */
	margin-bottom: 0px;
    padding-top:11px; /* margin-topだと上部が白いベルトになるのでpadding-topに変更*/
  }
  .basic-inner { /* indexを使わないときの左右の余白調整 */
	margin: 0px 10px 0px 10px;
    padding-top:10px; /* margin-topだと上部が白いベルトになるのでpadding-topに変更*/
  }
  .site-box-index {
	padding: 0px 0px 6px 0px;	/* 下側6px分はFirefox10のURL表示分の予備 */
	text-align: left;
  }
  .site-box {
	padding: 8px 8px 14px 8px;	/* 下側6px分はFirefox10のURL表示分の予備 */
	text-align: left;
  }

  /*--------------
    モバイルフレンドリー
  --------------*/
  #background body, #background-road body {
	  -webkit-text-size-adjust : 100%!important; /* Safari対応? */
  }
  #background img, #background-road img {
	  /*max-width : 100%;*/
      max-width:917px;		/* 2021/11/26　修正 */
	  height : auto;
  }
  #background iframe, #background-road iframe {
	  max-width : 100%; /* ＰＣで見ると横が伸びちゃう */
  }

  /*------------------------------------------------
    iframeのアスペクト比を固定 (ブラウザ幅が917px以下のときのみ)
  --------------------------------------------------*/
  #iframe-wrapper {
    position: relative;
    width: 100%;
  }
  #iframe-wrapper:before {
    content:"";
    display: block;
    padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
  }
  #iframe-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* 背景をページの下まで伸ばしたい時の子セレクタ設定 */
body > #background{ 
	height:auto; 
}
body > #background-road {
	height:auto; 
}

#hpb-inner:after {
	content: ".";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}

/*------------
  タイトル ボックス
------------*/
#title-belt {
	background-color: #85AEDA;
	background-image: url('img/croud-belt2.gif');
	background-repeat: no-repeat;
	text-align: left;
	min-height:98px; /* 以下 最低高さの確保 */
	height:98px;
    display: flex; /* 複数要素の場合 */
    align-items: center; /* 複数要素の場合に高さが違うときにセンターで揃える */
}
#title-belt-dark {
	background-color: #404040;
	text-align: left;
	min-height:98px; /* 以下 最低高さの確保 */
    display: flex; /* 複数要素の場合 */
    align-items: center; /* 複数要素の場合に高さが違うときにセンターで揃える */
}

.title-logo {
	border:none;
	padding-top: 0px;
	width: 113px;
	height: 85px;
    flex-shrink: 0;	/* flexboxの子要素をコンテナー要素にあわせて伸縮させない */
}
.title-caption {
	padding-left: 64px;
	/*padding-top: 16px;*/
	font-size: 1.3em;
	font-weight: bold;
    line-height: 1.2; 
}
.title-caption a {
	color: #000000!important;	/* 最優先 !importantを使って継承をブロック */
	text-decoration:none!important;	/* 最優先 !importantを使って継承をブロック */
}
.title-caption h1 {
	font-size:1.4em;
	font-weight: bold;
}

#title-belt .title-caption-top {
	color: #ffffff;
	padding-left: 64px;
	font-size: 1.3em;
	font-weight: bold;
    line-height: 1.2; 
}
#title-belt2 {
	border: 1px solid #000000;
	padding: 2px;
	margin: 0px auto;
	min-height:90px; /* 以下 最低高さの確保 */
	text-align: left;
    display: flex; /* 複数要素の場合 */
    align-items: center; /* 複数要素の場合に高さが違うときにセンターで揃える */
}
#title-logo2 {
	padding-left: 4px;
	width: 113px;
	height: 85px;
	border:none;
}
#title-caption2 {
    margin: 0 0 2px 0; /* 微調整 */
	padding-left: 40px;
	font-size: 1.5em;
	font-weight: bold;
    line-height: 1.1; 
}
#title-caption2 h1 {
	font-size:1.4em;
	font-weight: bold;
}
#title-caption2 h1 > img {
	margin: 10px 0 0 5px;
}

#separate-bar {
	background-color: #e6e6e6;
	width: 100%;
	text-align: left;
}

/*-----------
  定形マージン
------------*/
.basic-tight-side-margin{
	margin: 0px 30px;
	text-align: left;
}
.basic-loose-side-margin{
	margin: 0px 40px;
	text-align: left;
}

/*-----------------
  文字色修飾 (span)
------------------*/
span.default {
	color:  #00CC00;
}
span.detail {
	color:  #60b0ff;
}
span.mutter {
	color:  #A0A0A0;
}
span.caution {
	color:  #dd4040;
}
span.digit-val { /* 数字 */
	color:  #ff0000;	/* 最優先 !importantを使って継承をブロック */
}
span.reserved {
	color:  #0000ff;
}
span.comment {
	color:  #009384;
}
span.absolut-break {
	word-break: break-all;	/* 長い英数字/記号を必ず折り返させる */
}
span.highlight-yellow {
	background: linear-gradient(transparent 85%, #f5ff00 15%);
}
span.highlight-green {
	background: linear-gradient(transparent 85%, #80ff00 15%);
}

/*----------
  リンク修飾
----------*/
a:link {
	/*color: #60b0ff;*/
        /* color: #0645ad;*/ /* wiki */
        color: #0044cc; /* Bing */
	/*text-decoration: underline;*/
}
a:visited {
	color: #0b0080; /* wiki */
	/*text-decoration: underline;*/
}
a:hover {
	color: #E47911; /* amazon */
	text-decoration: none;
}
a:active {
	color: #E47911;
	text-decoration: none;
}

/*-----------
 　pクラス定義
-----------*/
p2 {/* 共通設定！！！現状無効 */
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	padding-right: 0.1em;
	padding-left: 0.1em;
	line-height: 1.4;
	text-align: left;
}
p.large {
	font-size: 1.2em;
	margin-bottom: 1em;
	padding-left: 10px;
}
p.indent {
	padding-left: 5px;
}
p.vspace-half {
   margin-top: 0.2em; /* 0.75文字分の行間 */ 
   margin-bottom: 0.5em;  /* 0.5文字分の行間 */
   line-height: 1.2em
}
p.vspace-three-quarter {
   margin-top: 0em; /* 0.75文字分の行間 */ 
   margin-bottom: 0.75em; /* 0.75文字分の行間 */
   line-height: 1.2em
}
p.vspace-1 {
   margin-bottom: 1em;
}
p.vspace-three-second {
   margin-bottom: 1.5em; /* 1.5文字分の行間 */
}
p.vspace-2 {
   margin-bottom: 2em;  /* 2文字分の行間 */
}
/*--------------------
   文字の修飾　(Class)
--------------------*/
.italic { /* Windows Vista のメイリオ フォントの文字列が斜体にならないことがある */
	font-family: MS UI GOTHIC, sans-seif;
	font-style  : italic; 
	font-size: 1.2em;
	color: #A0A0A0;
}

/*------------
  PickUp リスト 
------------*/
#pickup-list{
	background-color: #e7e7e7;
	padding: 8px;
	text-align: left;
}
/* 文字と画像が混在の場合、出来るだけ画像のマージンで対応した方が綺麗に並ぶ */
#pickup-list img {
	width: 133px;
	height: 100px;		
	margin-right: 11px;
	margin-left: 11px;
	margin-top: 4px;
	margin-bottom: 0px;
	padding: 0px;
	border: 1px solid;
}

/*-------------------------------------
  iframe バリアブルレウアウト調整 （ニコニコ対応）
-------------------------------------*/
@media screen and (min-width: 918px) { /* ブラウザサイズが918ドット以上 */
  .iframe-layout{				/* iframeで表示したコンテンツを横並びにする */
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
	padding:0px;
    margin: 0px 0px 10px 0px;
  }
  .iframe-layout-right-side > div:not(#iframe-wrapper) {
	padding:0px;
    margin: 0px 10px 0px 0px;
  }
  .iframe-layout-left-side > div:not(#iframe-wrapper) {
	padding:0px;
    margin: 0px 0px 0px 10px;
  }
  .iframe-layout-both-side > div:first-child[id="iframe-wrapper"] {
	padding:0px;
    margin: 0px 10px 0px 0px;
  }
  .iframe-layout-left-side > div.link-text {
	max-width:45%;
  }
}
@media screen and (max-width: 917px) { /* ブラウザサイズが917ドット以下 */
  .iframe-layout{
	padding:0px;
    margin: 0px 0px 0px 0px;
	max-width: 560px;/*!important;*/
  }
  .iframe-layout > div {
	padding:0px;
    margin: 0px 0px 10px 0px;
  }
  .iframe-layout > div:not(#iframe-wrapper) {
	max-width:100%;/*!important;*/
  }
}
/* photoswipe対応 */
.iframe-layout ul{
	margin: 0px;
	padding: 0px;
	list-style-type:none;		/* 黒い点を消す */
}
.iframe-layout li{
	margin: 0px;
    padding: 0px;
	border-style: none;
}
.iframe-layout li > a > img{
	border: 1px solid;/*!important;*/
}

/*----------
  flex リスト
----------*/
/* flexは要素の縦幅が異なる場合でも対応する */
.list-flex {
	margin: 2px;
	padding: 0px;
	display: flex;
	flex-flow: row wrap;
	/*justify-content: space-between;*/
	/* align-items: stretch; */ /* デフォルト */
	text-align: left;
}
/* 文字と画像が混在の場合、出来るだけ画像のマージンで対応した方が綺麗に並ぶ */
.list-flex > div{ /* クラスlist-flexの子セレクタ */
	margin: 0px;
	padding: 0px;
	text-align: center;
}

/*-----------
  float リスト
-----------*/
/* 英文字と日本語は文字の高さが異なる、英語のみの場合は全角スペースの挿入しか対応策がない */
.list-float ul {
	margin: 2px;
	padding: 0px;
	list-style-type:none;		/* 黒い点を消す */
	text-align: center;
}
.list-float li {
	margin: 0px;
	padding: 0px;
	float: left;
	border-style: none;
}
/*
  clearfix以前の対応
  <span><p /></span>
*/
.list-float p {
	clear: both;
}
.list-float span {
	height:0px;			/* spanでIE6のpタグ改行をキャンセル */
}

/*------------------------------
  イメージリスト ボックス 横並び (class)
------------------------------*/
.image-list{
	margin: 0px;
    padding: 4px 0px 0px 3px;/*!important;*/
	text-align: left;
}
.image-list ul{
	margin: 0px;
	padding: 0px;/*!important;*/
	list-style-type:none;		/* 黒い点を消す */
	text-align: left;
}
.image-list li{
	margin: 0px 0px 1px 0px;
    padding: 0px 10px 6px 0px;/*!important;*/
	float: left;
	border-style: none;/*!important;*/
}
.image-list img{
	margin: 0px;
	padding: 0px;
	border: 1px solid;/*!important;*/
}
/*
  clearfix以前の対応
  <span><p /></span>
*/
.image-list p{
	clear: both;
}
.image-list span{
	height:0px;			/* spanでIE6のpタグ改行をキャンセル */
}

/*------------------------------
  イメージリスト ボックス 縦並び (class)
------------------------------*/
.image-list-vertical{
	margin: 0px;
	padding: 0px;/*!important;*/
	text-align: left;
}
.image-list-vertical ul{
	margin: 0px;
	padding: 0px;/*!important;*/
	list-style-type:none;		/* 黒い点を消す */
	text-align: left;
}
.image-list-vertical li{
	margin: 0px;
	padding: 0px!/*!important;*/
	border-style: none;/*!important;*/
    vertical-align: top;
}
.image-list-vertical img{
	margin: 0px 10px 10px 0px;
	padding: 0px;
	border: 1px solid;/*!important;*/
}

.image-list-vertical table{
	margin: 0px;
	padding: 0px;
	border: 0px;
	border-collapse: separate;
	border-spacing: 0px;
}

/*-----------------------------------------
  イメージサイズを整える (class[子孫])
-----------------------------------------*/
/* 高さ揃え */
.size-small img{
	height: 100px !important;	/* 最優先 !importantを使って継承をブロック */
	width: auto !important;	/* 最優先 !importantを使って継承をブロック */
}
.size-five-split img{
	height: 125px !important;	/* 最優先 !importantを使って継承をブロック */
	width: auto !important;	/* 最優先 !importantを使って継承をブロック */
}
.size-mid img{
	height: 160px !important;	/* 最優先 !importantを使って継承をブロック */
	width: auto !important;	/* 最優先 !importantを使って継承をブロック */
}
.size-large img{
	height: 200px !important;	/* 最優先 !importantを使って継承をブロック */
	width: auto !important;	/* 最優先 !importantを使って継承をブロック */
}
.size-large iframe{
	height: 200px;
	width: 355px;
}
.size-half-split img{
	height: 225px !important;	/* 最優先 !importantを使って継承をブロック */
	width: auto !important;	/* 最優先 !importantを使って継承をブロック */
}
.size-half-split iframe{
	height: 225px;
	width: 400px;
}
.size-big img{
	height: 260px !important;	/* 最優先 !importantを使って継承をブロック */
	width: auto !important;	/* 最優先 !importantを使って継承をブロック */
}
.size-biggest img{
	height: 512px !important;	/* 最優先 !importantを使って継承をブロック */
	width: auto !important;	/* 最優先 !importantを使って継承をブロック */
}
.size-big iframe{
	height: 260px;
	width: 462px;
}
.size-youtube-default iframe{
	height: 315px;
	width: 560px;
}
/* 幅さ揃え */
.size-small-width img{
	width: 133px !important;	/* 150 最優先 !importantを使って継承をブロック */
	height: auto !important;	/* 最優先 !importantを使って継承をブロック */
}
.size-mid-width img{
	width: 212px !important;	/* 最優先 !importantを使って継承をブロック */
	height: auto !important;	/* 最優先 !importantを使って継承をブロック */
}
.size-large-width img{
	width: 260px !important;	/* 最優先 !importantを使って継承をブロック */
	height: auto !important;	/* 最優先 !importantを使って継承をブロック */
}

/*----------------------
  flex リスト (Side Ball)
----------------------*/
.side-ball-flex {
	margin: 2px 0px 2px 15px ;
	padding: 0px;
	display: flex;
	flex-flow: row wrap;
	text-align: left;
	/*justify-content: space-between;*/
	/* align-items: stretch; */ /* デフォルト */
    align-items: center;
}
.side-ball-flex > div{ /* 子セレクタ */
	background-repeat: no-repeat;
    background-position: left center;
    background-image: url('img/b_blue.gif'); /* デフォルト色 */
	padding-left: 16px;
	text-align: left;/*!important;*/
	min-width: 140px;
	margin: 3px 1px;
}
div.side-ball-blue > div{
	background-image: url('img/b_blue.gif');
}
div.side-ball-sky > div{
	background-image: url('img/b_sky.gif');
}
div.side-ball-yellow{
	background-image: url('img/b_yellow.gif')!important;	/* 最優先 !importantを使って継承をブロック */
}

/*-------------------------
  リスト用 ボックス
-------------------------*/
#table-list dl {
	margin: 0px;
	padding: 0px;
}
#table-list dl dt {
	float: left;
	padding: 2px;
	font-weight: bold;
	text-align: left;
}
#table-list dl dd {
	padding: 2px;
	text-align: left;
}

/*-------------------------
  マニュアル 記述用
-------------------------*/
#manual-documents {
	margin-top: 5px; /* 2023/04/20 10px -> 5px */
	margin-bottom: 10px; /* 2020/06/14 20px -> 10px */
	font-weight: normal;
}

#manual-documents div.tab {
	margin-top: 10px;
	padding-left: 15px;
	margin-bottom: 10px;
	background-color: #ffffff;
	font-weight: normal;
	color:  #000000;
	background-color: #ffffff;
}

#manual-documents div.category {
	border: 2px #888888 solid; 
	margin-top: 10px;
	padding-left: 20px;
	margin-bottom: 10px;
	background-color: #ffffff;
	font-weight: normal;
	color:  #000000;
	background-color: #ffffff;
	font-size: 1em;
}

#manual-documents div.group {
	border: 1px #000000 solid;
	padding-left: 20px;
	margin-right: 15px;
	margin-bottom: 10px;
	font-weight: normal;
	color:  #000000;
	background-color: #ffffff;
}

#manual-documents div.item {
	margin-top: 5px; /* 2023/04/20 10px -> 5px */
	padding-left: 20px;
	margin-right: 5px;
	margin-bottom: 10px;
	font-weight: normal;
	color:  #000000;
	background-color: #ffffff;
}

#manual-documents div.tab p.caption {
	margin: 0px 0px 10px -15px!important;/* 最優先 !importantを使って継承をブロック */
	padding: 10px!important;	/* 最優先 !importantを使って継承をブロック */
	border: 1px #000000 solid;
	font-size: 1.3em;
	font-weight: bold;
	color:  #000000!important;	
	background-color: #f3f3f3!important;	/* 最優先 !importantを使って継承をブロック */
}

#manual-documents div.category p.caption {
	margin: 0px 0px 10px -20px!important;/* 最優先 !importantを使って継承をブロック */
	padding: 5px!important;	/* 最優先 !importantを使って継承をブロック */
	border: none!important;	/* 最優先 !importantを使って継承をブロック */
	font-size: 1.2em;
	font-weight: bold;
	color:  #000000!important;	
}

#manual-documents div.group p.caption {
	margin: 0px 0px 10px -20px!important;/* 最優先 !importantを使って継承をブロック */
	padding: 5px!important;	/* 最優先 !importantを使って継承をブロック */
	border: none!important;	/* 最優先 !importantを使って継承をブロック */
	font-size: 1.1em;
	font-weight: bold;
	color:  #000000!important;	
}

#manual-documents div.item p.caption {
	margin: 5px 0px 0px -20px!important;/* 最優先 !importantを使って継承をブロック */
	/*padding: 4px!important;	*//* 最優先 !importantを使って継承をブロック */
	border: none!important;	/* 最優先 !importantを使って継承をブロック */
	background-color: transparent!important;	/* 最優先 !importantを使って継承をブロック */
	color:  #000000!important;	
}

#manual-documents span.default {
	color:  #00CC00!important;	/* 最優先 !importantを使って継承をブロック */
}

#manual-documents p.translation {
	color:  #60b0ff!important;	/* 最優先 !importantを使って継承をブロック */
}

#manual-documents span.translation {
	color:  #60b0ff!important;	/* 最優先 !importantを使って継承をブロック */
}

#manual-documents p.caption span.translation {
	margin-left: 10px;
}

#manual-documents p.value,span.value {
	color:  #0000ff!important;	/* 最優先 !importantを使って継承をブロック */
}

/*-------------------------
  マニュアル 記述用
-------------------------*/
.code-documents {
	margin: 4px 20px 4px 0px;
	padding: 5px;
	border-radius: 5px 5px 5px 5px ;
	background-color: #E4E8F8;
}

br.br-space {
	margin-bottom: 8px;
}

/*-------------------------
  コメント記述用
-------------------------*/
.add-comment{
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 10px;
}
.add-comment ul {
	margin: 0px;
	padding-left: 1.3em;/*!important;*/
	list-style-type:none;		/* 黒い点を消す */
	text-align: left;
}
.add-comment li {
        text-indent:-1.3em;
	padding: 0px;/*!important;*/
        list-style-type:none;
	border-style: none;/*!important;*/
}

/*-------------------------
  折りたたみ用
-------------------------*/
.fold-box {
	margin: 0px;
	padding: 0px;
	margin-left: -6px; /* New */
    margin-top: 8px;
    margin-bottom: 10px;
	background-color: #F0F0F0;
}
.fold-box-dark {
	margin: 0px;
	padding: 0px;
	margin-left: -3px; /* New */
    margin-top: 8px;
    margin-bottom: 10px;
	background-color: #808080;
}
.fold-box-dark a, .fold-box a {
	padding-right: 10px;
}
.fold-box-dark img, .fold-box img {
	padding-right: 10px;
	padding-left: 4px;
    vertical-align: middle;
	padding-bottom: 1px; /* New */
}

/*------------------------------
  画像横のテキストを上下中央に配置する
------------------------------*/
.vertical-middle p {
        display: table-cell;
        vertical-align: middle;
        margin: 0;
}
        
/*-------------------
  マーカー付きリストを作る
-------------------*/
#topic-list ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#topic-list ul li {
	text-align: left;
	line-height: 1.4;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #aaaaaa;
}
#line-adjust {
	line-height:1.5em;
}
ul.no-indent {
	margin: 4px 0 4px 1em;
	padding: 0px;
}

/*--------------------------------------
   画像にマウスオンした際のエフェクト
--------------------------------------*/
a:hover img {
	filter: alpha(opacity=60);	/* IE */
	-moz-opacity:0.6;		/* Firefox / Netscape */
	opacity:0.6;			/* CSS3.0 */
	background: #fff;		/* 背景色 白、背景色を指定しないと一部不具合、指定すると透過で不具合 */
}
a:hover img.efect-transparent {
	filter: alpha(opacity=100);	/* IE用 */
	opacity:1.0;			/* CSS3.0 */
	background: transparent;	/* 背景色 透明、背景色を指定しないと一部不具合、指定すると透過で不具合 */
}
a:hover img.no-efect {
	filter: alpha(opacity=100);	/* IE用 */
	opacity:1.0;			/* CSS3.0 */
	background: transparent;	/* 背景色 透明、背景色を指定しないと一部不具合、指定すると透過で不具合 */
}

/*--------------------------------------------------
   テーブル用 (class)
   CSS関係なく、スペースのないアルファベットの連続は折り返されない
--------------------------------------------------*/
.table-style {
    margin: 0px;
	padding-top: 4px; /* 2023/04/20 0px -> 4px */
	padding-bottom: 8px; /* 2023/04/20 4px -> 8px */
}
.table-style table {
	border-collapse: collapse;
	padding: 8px;
}
.table-style table td {
	padding: 3px;
}
table.table-style-noborder {
	margin: 0px;
	padding: 0px;
	border: 0px;
	border-collapse: separate;
	border-spacing: 0px;
}
table.table-style-noborder td {
    /*word-wrap: break-word;*/
    vertical-align: top; /* valign より優先 */
	margin: 0px;
	padding: 0 10px 3px 0;
	border: 0px;
}

/*----------------
  方向表示ありリンク
----------------*/
/* flexは要素の縦幅が異なる場合でも対応する */
.direction-link {
    margin-bottom:12px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	/*align-items: stretch;*/
	text-align: left;
}
.direction-link > div { /* 子セレクタ */
    margin: 0px;
	display: flex;
	flex-flow: row wrap;
	/*ustify-content: space-between;*/
	align-items: center;
	text-align: left;
}
div.direction-link > div > span { /* 子セレクタの子セレクタ */
	font-size: 150%;
    font-weight: bold;
    margin:0 4px;
}
div.direction-link > div > a { /* 子セレクタの子セレクタ */
	font-size: 120%;
}
div.direction-link > div > a > span { /* 子セレクタの子セレクタの子セレクタ */
	font-size: 80%;
}

/*----------------
  Notepad++
----------------*/
.sc0 {
}
.sc1 {
	color: #008000;
}
.sc2 {
	color: #FF0000;
}
.sc4 {
	color: #FF8000;
}
.sc5 {
	font-weight: bold;
	color: #0000FF;
}
.sc6 {
	color: #808080;
}
.sc7 {
	color: #808080;
}
.sc9 {
	color: #804000;
}
.sc10 {
	font-weight: bold;
	color: #000080;
}
.sc11 {
}
.sc16 {
	color: #8000FF;
}


/*---------
  必要？？↓
---------*/

/*--------------------------------------
   定義リスト用 (class)
--------------------------------------*/
.definition-custom dl {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 30px;
	margin-left: 0;
	padding: 0;
	zoom: 100%;
}
.definition-custom dt {
	float: left;
	margin: 0;
	text-align: left;
	line-height: 16px;
	min-height: 16px;
	font-weight: bold;
	width: 170px !important;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 10px;
	color: #5A6F76;
}
.definition-custom dd {
	margin: 0;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	text-align: left;
	line-height: 16px;
	min-height: 16px;
	padding-left: 180px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #aaaaaa;
}
*:first-child + html .definition-custom dd {
	/* for IE7 */
	padding-left: 10px;
	min-height: 20px;
}
* html .definition-custom dd {
	/* for IE6 */
	padding-left: 0px;
	height: 20px;
}
.definition-custom dl:after {
	content: ".";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}

/*
.left {
	float: left;
}
.right {
	float: right;
}
*/
a.download {				/* インライン要素 */
	line-height: 2em;		/* 行の高さの制御 */
	vertical-align: baseline;	/* 行の縦方向の位置 */
	font-size: 1.25em !important;	/* 最優先 !importantを使って継承をブロック */	
	font-weight: bold !important;	/* 最優先 !importantを使って継承をブロック */
}

/*---------
  必要？？↑
---------*/

/*-------------------------
  テーブルCSS化 ボックス
-------------------------*/
/*
div#table-replace{
  display:block;
  position: relative;
  border: solid 1px rgb(100,100,100);
  margin: 10px 160px 10px 20px;
}
div#table-replace p.fig{
  position: absolute;
  right: -100px;
  margin: 0px;
}
div#table-replace p img.border{
  position: absolute;
  background-color: white;
}
div#table-replace p img.left{
  left: -1px;
}
div#table-replace p img.right{
  right: -1px;
}
div#table-replace p img.top{
  top: -1px;
}
div#table-replace p img.bottom{
  bottom: -1px;
}
div#table-replace p img.center{
  top: 20px;
  right: -30px
}
div#table-replace ul{
  display: block;
  margin: 10px;
  padding-left: 0px;
}
div#table-replace ul li{
  display: block;
  margin-left: 0px;
  padding-left: 20px;
  text-align: right;
}
div#table-replace ul > li:first-child {
  border-bottom: 1px rgb(100,100,100) solid;
  text-align: left;
}
*/

/*----------------------------------
   タイトルボックス ref ORUKA1951 
----------------------------------*/
/* 外枠から文字と画像がはみ出る clearfix */
/*
div.box{
	border:1px solid red;
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 620px;
	padding:0px;
}
div.box p{
	width: 180px;
	float:left;
	margin: 10px 20px 0px 10px;
}
div.box>ul{
	margin: 10px 5px 0px 5px;
	width: 120px;
	float:left;
	padding: 2px;
}
div.box>ul li{
	margin-left: 2em;
	list-style-image: url(gif/rarw.gif);
	padding: 0px;
	list-style-position: out-side;
}
div.box hr{
	clear: left;
	visibility: hidden;
	margin:0px;
}
*/

/*-------------------------
   XHTML / HTML サンプル
-------------------------*/
/* 
   スペーサーGIF代用
   改行されてから挿入されてしまう

   <div style="clear: both;width: auto;height: 10px;"><!--></div>

   マージン一括変更
   リンク設定されているIMGタグ内にマージン設定を入れると
   拡がったサイズの破線枠が残る場合があり綺麗でない(Firefox10)

   style="margin: 上下px 左右;"
   style="margin: 上px 右px 下px 左px;"
   値を1つ指定した場合：指定した値が[上下左右]のマージンになります。
   値を2つ指定した場合：記述した順に[上下][左右]のマージンになります。
   値を3つ指定した場合：記述した順に[上][左右][下]のマージンになります。
   値を4つ指定した場合：記述した順に[上][右][下][左]のマージンになります。

*/

/*-------------------------
   注意事項！
-------------------------*/
/*
   <CENTER>タグは非推奨

   IE6で標準モード(以下)の際に
   ↓----ここから
	   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">
   ↑----ここまで
   <CENTER>指定が内部の<TD>タグまで強制継承される
   TABLEタグの位置調整は<TABLE>タグにalign設定を追加して対応する
   <TD>タグのalign設定は入れ子にした<TABLE>の全ての要素に影響する
   ※結論:TABLEレイアウトでは互換モードを使った方が良い。
   http://www7b.biglobe.ne.jp/~homepage-note/hpb-ed-11.html

*/

/*------------------------------------------------------------------------------

   HPB16 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

------------------------------------------------------------------------------*/

/*--------------------------------------------------------
  レイアウト設定
--------------------------------------------------------*/
#hpb-header {
	height: 89px;
	margin-top: 0.5em;
	text-align: left;
	vertical-align: middle;
	padding-left: 170px;
	background-color: #B8B8B8;
	background-image : url(img/atticlogo-side.gif);
	background-position: 2px center;
	background-repeat: no-repeat;
}

#hpb-title {
	margin-top: 0px;
}

#hpb-main {
	margin-right: 0px; /*10*/
	margin-bottom: 10px;
	padding-top: 0px;
	text-align: left;
	min-height: 400px;
}

 /* ?????? 2017/04/23 */
* html #hpb-main {
	/* for IE6 */
	height: 400px;
}

#hpb-content {
	text-align: left;
	margin-top: 0px;
	margin-right: 30px;
	margin-bottom: 0px;
	margin-left: 30px;
	padding: 0;
	position: relative;
}

/*--------------------------------------------------------
  共通レイアウトパーツ設定 main_1Ee_2c.css
--------------------------------------------------------*/
#hpb-footer {
	margin: 20px;
}

/* フッター内パーツ */
#hpb-footerMain {
	/*width: 300px;*/
	float: right;
	padding-top: 10px;
}

#hpb-footerMain p {
	/* コピーライト文字設定 */
	font-size: 0.8em;
	text-align: right;
	padding-right: 10px;
}

/*--------------------------------------------------------
  基本パーツデザイン設定
--------------------------------------------------------*/
#hpb-skip {
	/* ヘッダースキップの非表示 */
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-indent: -9999px;
}

/*hr*/
#toppage-topics hr {
	width: 100%;
	height: 1px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	clear: both;
	border-top-width: 1px;
	border-top-style: none;
	border-right-width: 1px;
	border-right-style: none;
	border-left-width: 1px;
	border-left-style: none;
	color: #ffffff;
	border-bottom-width: 1px;
	border-bottom-style: none;
}

#head-indent {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: 30px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

#head-indent div.h2-direct {
	margin-left: -15px;
        padding: 0;
}

#head-indent h2 {
	margin-left: -30px;
}

#head-indent h3 {				/* h3タグは基本8回まで */
	margin-left: -15px;
}

#head-indent hr {
	margin-left: -15px;
}

#hpb-main h2 {
	margin-top: 17px; /* 12->14->17 */
	margin-bottom: 10px;
	border-left: solid 15px #00A2E8; /* 9->14->15 / #F89A07->#DCDCDC->0066FF->00A2E8*/ 
	background-color: #F0F0F0;
	font-size:1.2em;
        line-height: 1.6; /* 1.4->1.6 */ 
	text-indent: 0em;
	padding-left: 0.4em;
}

#hpb-main h3 {				/* h3タグは基本8回まで */
	margin-top: 12px; /* 12 */
	margin-bottom: 10px;
	border-left: solid 11px #0066FF; /* 9->11 / #808080->#00A2E8->#0066FF*/ 
	background-color: #F0F0F0;
	font-size:1em;
        line-height: 1.4;
	text-indent: 0em;
	padding-left: 0.4em;
    display: flex; /* 複数要素の場合 */
    white-space : pre; /* 入れ子内で半角スペースが表示されないので追加 */
    /*justify-content:space-between;*/ /* 複数要素の場合 */ /* marginで右寄せに変更したのでコメントアウト */
    align-items: center; /* 複数要素の場合に高さが違うときにセンターで揃える */
}
#hpb-main h3 > a.index{
    margin-right:5px;
    margin-left:auto; /* marginで右寄せ */
    min-width:58px; /* auto */
    white-space: nowrap;
	text-decoration:none;
/*
	position: absolute;
	top: 100%;
	right: 5px;
	-webkit-transform : translateY(-100%);
	transform : translateY(-100%);
*/
}
#hpb-main h3 > a.index > img{
	margin-right: 4px;
	margin-bottom: 1px;
	border-style:none;
}

#hpb-main h4 {				/* h4タグは基本8回まで */
	margin-top: 12px; /* 12 */
	margin-bottom: 10px;
	margin-left: -6px; /* New */
	border-left: solid 9px #808080; /* 6->9 / #D0D0D0->#DCDCDC->808080*/ 
	background-color: #F0F0F0;
	font-size:1em;
        line-height: 1.4; 
	text-indent: 0em;
	padding-left: 0.4em;
}

/* フォームパーツ設定 */
input.button {
	margin-top: 10px;
	margin-bottom: 15px;
}

textarea.neko { /* クラス指定 */
	width: 400px;
	height: 200px;
}

input.l {
	width: 400px;
}
input.m {
	width: 250px;
}
input.s {
	width: 150px;
}

/* メインコンテンツ内基本パーツ */

#hpb-main img.left {
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 10px;
	float: left;
}

#hpb-main img.right {
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 20px;
	float: right;
}

/* メインコンテンツ内基本パーツ */

#pagetop {
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	text-align: right;
}

#pagetop a {
	/* ページの先頭へのリンク設定 */
	display: block;
	margin-left: auto;
	width: 105px;
	height: 20px;
	overflow: hidden;
	background-image : url(img/returnTop_1Ee.png);
	background-position: top left;
	background-repeat: no-repeat;
	text-align: left;
	text-indent: -9999px;
}

/* トップページ デザイン定義 */
#toppage-news h3 span.ja {		/* h3タグは基本8回まで */
	display: none;
}

/*-----------------------
   新しいレイアウト
   2017/04/22 追加
-----------------------*/
#new_layout {
	margin-right: 0px; /*10*/
	margin-bottom: 10px;
	padding-top: 0px;
	text-align: left;
	min-height: 400px;
}

#new_layout h2 {
	margin-top: 12px;
	margin-bottom: 10px;
	font-size:1.2em;
	padding-top: 0px;
	padding-bottom: 0px;
}

#new_layout h2:before {
    color: #0066FF;
    content: "■";
}

#new_layout h3 {				/* h3タグは基本8回まで */
	margin-top: 12px;
	margin-bottom: 10px;
	font-size:1em;
	padding-top: 0px;
	padding-bottom: 0px;
}

#new_layout h3:before {
    color: #0099FF;
    content: "■";
}

/* h4タグは基本8回まで */

/* フォームパーツ設定 */
input.button {
	margin-top: 10px;
	margin-bottom: 15px;
}

textarea {
	width: 400px;
	height: 200px;
}

input.l {
	width: 400px;
}
input.m {
	width: 250px;
}
input.s {
	width: 150px;
}

/* メインコンテンツ内基本パーツ */

#new_layout dl {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 30px;
	margin-left: 0;
	padding: 0;
	zoom: 100%;
}

#new_layout dt {
	float: left;
	margin: 0;
	text-align: left;
	line-height: 16px;
	min-height: 16px;
	font-weight: bold;
	width: 170px !important;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 10px;
	color: #5A6F76;
}

#new_layout dd {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	text-align: left;
	line-height: 16px;
	min-height: 16px;
	padding-left: 180px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #aaaaaa;
}

*:first-child + html #new_layout dd {
	/* for IE7 */
	padding-left: 10px;
	min-height: 20px;
}

* html #new_layout dd {
	/* for IE6 */
	padding-left: 0px;
	height: 20px;
}

#new_layout dl:after {
	content: ".";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}

#new_layout img.left {
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 10px;
	float: left;
}

#new_layout img.right {
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 20px;
	float: right;
}

/* new_layout 追加 */

#new_layout span.default {
	color:  #00CC00!important;	/* 最優先 !importantを使って継承をブロック */
}

#new_layout span.detail {
	color:  #60b0ff!important;	/* 最優先 !importantを使って継承をブロック */
}

#new_layout span.mutter {
	color:  #A0A0A0!important;	/* 最優先 !importantを使って継承をブロック */
}

#new_layout span.caution {
	color:  #dd4040!important;	/* 最優先 !importantを使って継承をブロック */
}

/*-----------------------
   New topic
   2017/04/22 追加
-----------------------*/
#topic_layout {
	margin: 0px;
	padding: 8px 8px 0px 8px; /* 値を4つ指定した場合：記述した順に[上][右][下][左]のマージンになります。 */
	text-align: left;
    background-color: #e8e8e8;
}

#topic_layout .logo {
	padding: 2px 2px;
	margin: 2px 2px;
	width: auto;
    background-color: #ffffff;	/* 最優先 !importantを使って継承をブロック */
}

#topic_layout ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#topic_layout ul li {
	text-align: left;
	line-height: 1.4;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #aaaaaa;
}