/* ========== flos.css のスタイル (c)suke [2020/6/20] ::: [2022/10/29] ========== */

body{
 background: #fff;
 margin: 0 2% 0 2%;
 line-height: 1.1;
}


/* ========== ヘッダー部 ========== */
.header{
 background-color:#777;
 width:100%;
 height:70px;
}

.header1	{padding-left:8px}
.header2	{padding-right:128px}
.header img {margin-top:6px}
.header h1 {
 font-size:24px;
 letter-spacing: 0.1em;
 padding-left:37.5px;
 color:#fff;
 margin-bottom:1px;
}
.header div {
 padding-left:34px;
 font-size:12px;
 color:#fff;
 margin-bottom:10px;
}


/* ========== サイドバー部 ========== */
#snavi{
 width:98px;
 vertical-align:top;
 padding-left:1px;
 background-color:#ddd;
}

#snavi p{
 width:98px;
 margin:0;
 padding-left:4px;
 line-height:1.8em;
 color:#ffffff;
 background-color:#777;
 border-bottom:solid 1px white;
}

#snavi ul{
 list-style: none;
 line-height:1.7;
 margin: 0px;
 padding-left: 0px;
 border-top: 1px solid #999999; /*上部に線を引く*/
}

#snavi li{
 margin: 0, 0, 0, 5px;
 font-size:12px;
 padding: 0;
}

#snavi a{
 background: #ddd; /*背景の色*/
 padding:0px 12px;
 display: block;
 width: 78px ; 
 color: #228;
 text-decoration: none;
 border-bottom: 1px solid #999999;/*下部に線を引く*/
}

#snavi a:hover{
 background: #fff;/*カーソルオーバーの時の背景の色*/
 color: #44f;/*カーソルオーバー時の文字の色*/
 width: 78px; 
}


/* ========== メインコンテンツ部 ========== */
#main{
 width: 100%;
 vertical-align:top;
 padding-left:10px;
 padding-right:10px;
 padding-top:2px;
 padding-bottom:10px;
}

#main h3{
 border-right: #228 0px solid;
 padding-right: 0.5em;
 border-top: #228 0px solid;
 padding-left: 0.5em;
 padding-bottom: 0em;
 margin: 1em 0em 0.3em;
 border-left: #228 20px solid;
 padding-top: 0.2em;
 border-bottom: #228 4px solid;
 color: #228;
}

#main h4{
 padding-right: 20.5em;
 border-top: #228 0px solid;*/
 padding-left: 0.5em;
 padding-bottom: 0em;
 margin: 1em 0em 0.3em;
 padding-top: 0.2em;
 border-bottom: #ccc 12px solid;
 color: #333;
}


/* === テーブルリストの見出し文字の左寄せと間隔調整 === */
#main th{
 float: left;
 margin: 0 5px 0 5px;
}


/* ========== その他の部分 ========== */
/* === 画像の下に文字 === */
.pbox {
 display: inline-block;
 text-align: center;
 font-size: 70%;
}

.pbox img {
 margin: 0px 0px -2px 0px;
 border-width: 0px;
}

.pbox p {
 margin: 0px 0px 2px 0px;
 color: #222;
}

/* === 画像と文字に枠を付ける 【 使用：<div class="waku"><img src="画像.jpg"><p>文字</p></div> 】=== */
.waku {
 display: inline-block;
 text-align: center;
 margin: 1px -1px 1px -1px;/* 枠の外側の余白 */   
 padding:2px;/* 余白 */   
 border:1px solid #333;/* 外枠の色 */   
 background-color:#eee;/* 余白部分の色 */   
}

.waku img {
 margin: 0px 0px -1px 0px;
 border-width: 0px;
}

.waku p {
 margin: 0px 0px 0px 0px;
 font-size: 70%;
 color: #228;
}

/* === 文字に枠を付ける 【 使用：<div class="mojiwaku"><p>文字</p></div> 】=== */
.mojiwaku {
 display: inline-block;
 width: 140px;
 text-align: center;
 margin: 0px 0px 3px 0px;/* 枠の外側の余白 */   
 padding:3px;/* 余白 */   
 border:1px solid #aaa;/* 外枠の色 */   
 background-color:#def;/* 余白部分の色 */   
}

.mojiwaku p {
 margin: 0px 0px 0px 0px;
 color: #222;
}


/* === サムネイル上のカーソルをポインター 【 使用：<img class="ptcursor" src="..." onclick="....."> 】=== */
.ptcursor {
 cursor: pointer
}


/* === 戻るボタン右端 === */
.btn1 {
 display: block;
 margin: 0 0 0 auto;
 cursor: pointer
}