@charset "shift_jis";

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/*

CSSが適用されない場合、以下をチェック
●「 } 」が「 }} 」のように重なっていないか
● 全角のスペースが入っていないか

*/


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/* 基本的にはthに適用する。そうすれば、echotableやechoajaxでテーブルを取得してEchoしても、thTitleが適用される */

.th_h1 {
    /* 
    
    ＠＠fixedmidashiの固定列が白くなる　
    ●Table内でCSSでwhite-space: nowrapを使うと、fixedmidashiの固定列が白くなる。【注意】これを適用した状態で、overflow_scrollのJQを使う方法を実行すると、fixedmidashiの固定列が白くなってしまうので注意→2022/7/30JQではなくjsでも白くなるので使うのやめた
    ●上記と似たような現象として、Table内の固定列で、URLなどの英語のため、セルを文字がはみ出している場合も、fixedmidashiの固定列が白くなる。

    ※PHPで、タイトル行は、Thを結合してしまえば、文字をはみ出させても問題ないかもしれない。試してない。

    ＠＠fixedmidashiのスクロールバーだけ行固定されて、行自体が固定がされないことがある。

    */
    font-weight: bold;
    /* importantを指定して最優先でCSS適用にしないとダメ
     	上記がいないと、Tableに、table14_a11を適用した状態で、Thにth_h1を適用してもフォントサイズが変更できない。多分、th_h1の優先順位が低いのだっと思う。よくわからないん。
	 */
    font-size: 18px !important;
    font-size: 1.8rem !important;
    line-height: 1.5 !important;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    color: #ffffff;
    /* フォントの色 #4d4d4d　　 */
    background-color: #808080;
    border-color: #808080;
    text-align: left;
}

.trtitle>th,
.trtitle>td {
    background-color: #cccccc;
    /* white-space: nowrap;*/
    /* 文字をはみ出させる。【注意】これを適用した状態で、overflow_scrollのJQを使う方法を実行すると、fixedmidashiの固定列が白くなってしまうので注意 */
    font-weight: bold;
    font-size: 130%;
}


/* *********************************************************************** */


/* BODYのmarginを0にしないとフッターが画面横幅いっぱいに広がらない *
/* *********************************************************************** */

BODY {
    padding: 0;
    margin: 0;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
}


/* *********************************************************************** */


/* 全体のフォントサイズ設定 */


/* 個々のtableにある全てのセルのフォントサイズを指定する場合は、各td,tr要素にCSSを適用する(tableだけにCSSを適用するだけではダメ)。 */


/* ただし、各セルの中にあるA要素もフォントサイズを指定したい場合は、各A要素にCSSを適用する必要がある。 */


/* *********************************************************************** */

HTML {
    font-size: 62.5%;
    /* 計算しやすいようにroot要素に10px相当のサイズを指定 */
    -webkit-overflow-scrolling: touch;
    /*［CSS］iOS（iPhone）でスクロールがガタガタする時の対処法  https://www.kopjapan.com/blog/web/13/ */
}

BODY,
tbody,
table,
tr,
td,
th,
p,
div,
a {
    font-size: 14px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.4rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
    /*＠＠スマホの横揺れ防止。以下設定すれば　width:100%;で指定した範囲の中に、margin以外の要素が入るようになり、marginさえ指定しなければ、はみ出さなくなります。
    分かりづらかったら全要素に適用しちゃって良いんじゃないでしょうか。　
    【注意】以下はPCで実行してはダメ。以下をPCで実行すると、xxとzzでfrexmidashiが左右に微妙に横揺れする。https://qiita.com/nbfujiwara/items/271d04e64f579e8ac1f2

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    */
    
    /*
    padding: 0;
    margin: 0;
	*/
}

CODE,
BLOCKQUOTE {
    font-size: 12px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}


/* *********************************************************************** */


/* 全体の行間設定 */


/* *********************************************************************** */

BODY,
tbody,
table,
tr,
td,
th,
p,
div,
a {
    line-height: 1.8;
}

BODY {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

TABLE {
    border-top: 1px solid #cbcbb1;
    border-right: 1px solid #cbcbb1;
    /* border:0px; */
    border-collapse: collapse;
    /* table-layout: fixed; */
    /*基本は、列幅を固定レイアウトにしたほうが良い。しかし、左記を実行すると消費税ページのレイアウトが崩れる。*/
}

table.mytable {
    table-layout: fixed;
}


/* 説明文用　左寄せで罫線なし　「 」(空白)は直下だけでなく全ての要素　「>」は、直下だけの要素を意味する。 */

.tablebun,
.tablebun>tbody>tr>th,
.tablebun>tbody>tr>td,
.tablebun>tr>th,
.tablebun>tr>td {
    table-layout: fixed;
    margin-right: auto;
    /* tableなどの要素を左寄せ（左揃え） 　※align="center"　はCSSでは使えない*/
    border-style: none none none none;
    border-top-style: none;
    border-right-style: none;
    width: 100%;
    /* 【注意】左記がないと、<table id="setumei" class="tablebun norow0 nocol0">　の中にある<div id="myoutput1000">にzzなどを出力すると、ブラウザ幅を小さくしたとき、zzの表にスクロールバーが表示されず、大きく表示されてしまう。*/
}

table.table14_a11 tr th,
table.table14_a11 tr td,
table.table14_a11 tbody tr th,
table.table14_a11 tbody tr td {
    font-size: 14px;
    font-size: 1.4rem;
    /* スマホのRem指定 ※スマホの通常フォントは1.4Remにしているので、小さめはこれ以下、大き目はこれ以上  */
    line-height: 1.5;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    padding: 3px;
    /* セル内余白 */
}

table.table13_a11 tr th,
table.table13_a11 tr td,
table.table13_a11 tbody tr th,
table.table13_a11 tbody tr td {
    font-size: 13px;
    font-size: 1.3rem;
    /* スマホのRem指定 ※スマホの通常フォントは1.4Remにしているので、小さめはこれ以下、大き目はこれ以上  */
    line-height: 1.5;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    padding: 3px;
    /* セル内余白 */
}

table.table12_a11 tr th,
table.table12_a11 tr td,
table.table12_a11 tbody tr th,
table.table12_a11 tbody tr td {
    font-size: 12px;
    font-size: 1.2rem;
    /* スマホのRem指定 ※スマホの通常フォントは1.4Remにしているので、小さめはこれ以下、大き目はこれ以上  */
    line-height: 1.5;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    padding: 3px;
    /* セル内余白 */
}

table.table11_a11 tr th,
table.table11_a11 tr td,
table.table11_a11 tbody tr th,
table.table11_a11 tbody tr td {
    font-size: 11px;
    font-size: 1.1rem;
    /* スマホのRem指定 ※スマホの通常フォントは1.4Remにしているので、小さめはこれ以下、大き目はこれ以上  */
    line-height: 1.5;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    padding: 3px;
    /* セル内余白 */
}

table.table10_a10 tr th,
table.table10_a10 tr td,
table.table10_a10 tbody tr th,
table.table10_a10 tbody tr td,
table.table10_a10 a {
    font-size: 10px;
    font-size: 1rem;
    /* スマホのRem指定 ※スマホの通常フォントは1.4Remにしているので、小さめはこれ以下、大き目はこれ以上  */
    line-height: 1.5;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    padding: 3px;
    /* セル内余白 */
}
table.table_thcenter tr th,
table.table_thcenter tr td,
table.table_thcenter tbody tr th,
table.table_thcenter tbody tr td,
table.table_thcenter a {
    text-align: center/* table内のセル（td）内を文字を中央揃え(中央寄せする)場合は「text-align: center」を指定しましょう。*/
}
.th_center{
    text-align: center/* table内のセル（td）内を文字を中央揃え(中央寄せする)場合は「text-align: center」を指定しましょう。*/
}

/* tableの中のA要素は、基本的には、公式詳細リンクなので、全て小さくする  */

table.table14_a11 a,
table.table13_a11 a,
table.table12_a11 a,
table.table11_a11 a {
    font-size: 11px;
    font-size: 1.1rem;
    line-height: 1.5;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    padding: 3px;
    /* セル内余白 */
}

table.table14_a11 tr th div,
table.table13_a11 tr th div,
table.table12_a11 tr th div,
table.table11_a11 tr th div {
    /* importantを指定して最優先でCSS適用にしないとダメ
     	上記がいないと、Tableに、table14_a11を適用した状態で、Thにth_h1を適用してもフォントサイズが変更できない。多分、th_h1の優先順位が低いのだっと思う。よくわからないん。
	 */
    font-size: 11px !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    font-size: 11px;
    font-size: 1.1rem;
    line-height: 1.5;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
}


/* 自分で作成した公式詳細リンクにsfが適用されている。これは、全て小さくする  */

.sf a {
    font-size: 11px;
    font-size: 1.1rem;
    /* スマホのRem指定 ※スマホの通常フォントは1.4Remにしているので、小さめはこれ以下、大き目はこれ以上  */
    line-height: 1.5;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
}
.normal14 a {

    font-size: 14px !important;
    font-size: 1.4rem !important;
    /* スマホのRem指定 ※スマホの通常フォントは1.4Remにしているので、小さめはこれ以下、大き目はこれ以上  */
    line-height: 1.5 !important;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    padding: 3px !important;
    /* セル内余白 */

}

/*
table.mytable th,
table.mytable td{
	line-height: 1.3;

}
*/


/*

列の非表示.0列目〜　→　Tableタグに適用する
table内の1番目のTrの中のThの列を非表示

	【注意】
	.nocol0 tr td:nth-of-type(1)  ,  .nocol0 tr th:nth-of-type(1){}	という書き方はダメ。
	これだと、親テーブルにCSS設定し、親テーブルの中に、入れ子の子テーブルがある場合、その入れ子テーブルにもCSSが適用されてしまう　

	以下のように、　> セレクタを使うと ある要素の直下の階層にある要素にスタイルに適用される
*/

table.nocol0>tbody>tr>th:nth-of-type(1),
table.nocol0>tbody>tr>td:nth-of-type(1),
table.nocol0>tr>th:nth-of-type(1),
table.nocol0>tr>td:nth-of-type(1) {
    display: none;
}

table.nocol1>tbody>tr>th:nth-of-type(2),
table.nocol1>tbody>tr>td:nth-of-type(2),
table.nocol1>tr>th:nth-of-type(2),
table.nocol1>tr>td:nth-of-type(2) {
    display: none;
}

table.nocol2>tbody>tr>th:nth-of-type(3),
table.nocol2>tbody>tr>td:nth-of-type(3),
table.nocol2>tr>th:nth-of-type(3),
table.nocol2>tr>td:nth-of-type(3) {
    display: none;
}

table.nocol3>tbody>tr>th:nth-of-type(4),
table.nocol3>tbody>tr>td:nth-of-type(4),
table.nocol3>tr>th:nth-of-type(4),
table.nocol3>tr>td:nth-of-type(4) {
    display: none;
}

table.nocol4>tbody>tr>th:nth-of-type(5),
table.nocol4>tbody>tr>td:nth-of-type(5),
table.nocol4>tr>th:nth-of-type(5),
table.nocol4>tr>td:nth-of-type(5) {
    display: none;
}


/* table内の1番目のTrの中のThの行を非表示

	【注意】
	.norow0 tr:nth-of-type(1) th{}	という書き方はダメ。
	これだと、親テーブルにCSS設定し、親テーブルの中に、入れ子の子テーブルがある場合、その入れ子テーブルにもCSSが適用されてしまう　

	以下のように、　> セレクタを使うと ある要素の直下の階層にある要素にスタイルに適用される
*/

table.norow0>tbody>tr:nth-of-type(1) th,
table.norow0>tbody>tr:nth-of-type(1) td,
table.norow0>tr:nth-of-type(1) th,
table.norow0>tr:nth-of-type(1) td {
    /*　//FixedMidashi の　_fixedhead　のメリット・デメリット・注意点は、DBの　HP作成・テーブル　シートを参照　*/
    font-size: 0px;
    height: 0px;
    border-bottom: 0;
    /*


*/
}

table.norow1>tbody>tr:nth-of-type(2) th,
table.norow1>tbody>tr:nth-of-type(2) td,
table.norow1>tr:nth-of-type(2) th,
table.norow1>tr:nth-of-type(2) td {
    font-size: 0px;
    height: 0px;
    border-bottom: 0;
}

table.norow2>tbody>tr:nth-of-type(3) th,
table.norow2>tbody>tr:nth-of-type(3) td,
table.norow2>tr:nth-of-type(3) th,
table.norow2>tr:nth-of-type(3) td {
    font-size: 0px;
    height: 0px;
    border-bottom: 0;
}

table.norow3>tbody>tr:nth-of-type(4) th,
table.norow3>tbody>tr:nth-of-type(4) td,
table.norow3>tr:nth-of-type(4) th,
table.norow3>tr:nth-of-type(4) td {
    font-size: 0px;
    height: 0px;
    border-bottom: 0;
}

table.norow4>tbody>tr:nth-of-type(5) th,
table.norow4>tbody>tr:nth-of-type(5) td,
table.norow4>tr:nth-of-type(5) th,
table.norow4>tr:nth-of-type(5) td {
    font-size: 0px;
    height: 0px;
    border-bottom: 0;
}

table.norow5>tbody>tr:nth-of-type(6) th,
table.norow5>tbody>tr:nth-of-type(6) td,
table.norow5>tr:nth-of-type(6) th,
table.norow5>tr:nth-of-type(6) td {
    font-size: 0px;
    height: 0px;
    border-bottom: 0;
}

table.norow6>tbody>tr:nth-of-type(7) th,
table.norow6>tbody>tr:nth-of-type(7) td,
table.norow6>tr:nth-of-type(7) th,
table.norow6>tr:nth-of-type(7) td {
    font-size: 0px;
    height: 0px;
    border-bottom: 0;
}

table.norow7>tbody>tr:nth-of-type(8) th,
table.norow7>tbody>tr:nth-of-type(8) td,
table.norow7>tr:nth-of-type(8) th,
table.norow7>tr:nth-of-type(8) td {
    font-size: 0px;
    height: 0px;
    border-bottom: 0;
}

width100 {
    width: 100%;
}

table.tabletate th,
table.tabletate td {
    width: 100%;
    display: block;
}

ul,
ol {
    padding-left: 20px;
    padding-right: 0px;
    padding-top: 1px;
    padding-bottom: 10px;
    /*↑padding: 10px 10px 10px 30pxとまとめて書くこともできますね。*/
    /* https://saruwakakun.com/html-css/reference/list-space */
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/*

クラス開始

*/


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.color_eee {
    background-color: #eeeeee;
    background-color: #fafafa;
}

.color_ccc {
    background-color: #cccccc;
}

.color_fff {
    background-color: #ffffff;
}

.menutitle {
    /* margin:2px 4px 2px 4px; /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
    /*padding:1px 4px 1px 4px; ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
    /*color : #ffffff; フォントの色 */
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    vertical-align: bottom;
    /* background: #e9e9e9;   */
    font-weight: bold;
}


/* マウスオーバー時に画像をポップアップする */


/* こんにちは、かわいい<a href="#" class="p">犬<span><img src="/inu.jpg" alt="犬"></span></a>ですね。 */


/* <a href="#" title="" class="popup"><img src="img/thum01.png" width="160" height="138" alt=""><img src="img/01_over.jpg" width="285" height="220" alt="" class="large"></a> */

a.p:hover {
    position: relative;
    text-decoration: none;
}

a.p span {
    display: none;
    position: absolute;
    top: 5em;
    left: 0;
}

a.p:hover span {
    border: none;
    display: block;
    width: 210px;
}





.w100 {
    width: 100%;
    max-width: 100%;
    /* 画面をはみ出る場合のみ100％に拡大する*/
}
.w30 {
    width: 30%;
    max-width: 30%;
    /* 画面をはみ出る場合のみ100％に拡大する*/
}s
.w0 {
    width: 0%;
    display: none;
}


/* マウスオーバー時に画像を拡大する */

.imouse {
    width: 100%;
    height: auto;
    /* 左記がないと、同じ比率で拡大しない*/
    /* z-index: 1;*/
}

.imouse:hover {
    position: relative;
    /* 相対位置。本来その要素が配置される場所を基準に配置される。*/
    text-decoration: none;
    /*border: 1px dashed gray; 枠の色*/
    display: block;
    top: 10px;
    left: -100px;
    /*左からの位置*/
    width: 500px;
    height: auto;
    /* 左記がないと、同じ比率で拡大しない*/
    /* z-index: 10; */
    /* 画像を最前面にする*/
}


/* ******************************************************************* */


/*マウスオーバーで画像をポップアップ*/


/*http://rgrg.blog61.fc2.com/blog-entry-594.html */


/* ******************************************************************* */


/*■■■拡大リンクボタン*/

.thumbnail {
    position: relative;
    /* 相対位置。本来その要素が配置される場所を基準に配置される。*/
    z-index: 0;
}

.thumbnail:hover {
    background-color: transparent;
    z-index: 50;
}


/*■■■ポップアップ画像*/


/*ポップアップ前のspan*/

.thumbnail span {
    position: absolute;
    /* 絶対位置。ウィンドウ、または親要素を基準に配置される*/
    visibility: hidden;
    background-color: #eeeeee;
    /*余白の色*/
    padding: 5px;
    left: 0px;
    /*-1000pxはダメ。jquery.lazyload.js　と　echoの時に、遅延読み込みで表示できない。layzr.jsは大丈夫*/
    width: 20px;
    height: auto;
    border: 1px dashed gray;
    /*枠の色*/
    color: black;
    /*文字の色*/
    text-decoration: none;
}


/*ポップアップ前の画像*/

.thumbnail span img {
    border-width: 0;
    padding: 2px;
    /*余白の幅*/
}


/*ポップアップ後のspan*/

.thumbnail:hover span {
    /*拡大画像のポップアップ時*/
    visibility: visible;
    top: 2em;
    /*上からの位置*/
    left: 0px;
    /*左からの位置  ★動的に変更する　*/
}


/*ポップアップ後のspan*/

.thumbnail:active span {
    /*拡大画像のポップアップ時*/
    position: absolute;
    /* 絶対位置。ウィンドウ、または親要素を基準に配置される*/
    visibility: hidden;
    background-color: #eeeeee;
    /*余白の色*/
    padding: 5px;
    left: 0px;
    border: 1px dashed gray;
    /*枠の色*/
    color: black;
    /*文字の色*/
    text-decoration: none;
}


/* PCの画面幅に応じて、ページ幅を変更する場合は、hpbsite.css　と　hpbsite_new_sumaho.css　の両方に記述する */

.width_950_1200 {
    max-width: 1200px;
    /* 最大幅 */
    min-width: 950px;
    /* 最小幅 */
    width: 95%;
}

.width_950_1300 {
    max-width: 1300px;
    /* 最大幅 */
    min-width: 950px;
    /* 最小幅 */
    width: 95%;
}

.width_950_1400 {
    max-width: 1400px;
    /* 最大幅 */
    min-width: 950px;
    /* 最小幅 */
    width: 95%;
}

.width_950_1500 {
    max-width: 1500px;
    /* 最大幅 */
    min-width: 950px;
    /* 最小幅 */
    width: 95%;
}


/* 主にTableに設定する。英数や句読点を文の途中でも強制的に改行して折り返し。これがないと、スマホで英単語がはみ出る。 */

.English_kaigyou {
    word-break: break-all;
    /* 主にTableに設定する。英数や句読点を文の途中でも強制的に改行して折り返し。これがないと、スマホで英単語がはみ出る。 */
}


/* 改行なし */

.div_nokaigyou {
    display: inline-block;
    display: inline;
}


/* テーブル要素に対して、中にあるフォームを改行なし */

table.table_nokaigyou tr th form,
table.table_nokaigyou tr td form,
table.table_nokaigyou tbody tr th form,
table.table_nokaigyou tbody tr td form {
    display: inline-block;
    display: inline;
}

TH {
    /* padding: 0px 10px; padding: 0px 1rem;*/
    font-weight: normal;
    left: 1.5em;
    vertical-align: top;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-left-style: solid;
    border-bottom-style: solid;
    border-left-color: #cbcbb1;
    border-bottom-color: #cbcbb1;
}

TD {
    /* padding: 0px 10px; padding: 0px 1rem;*/
    vertical-align: top;
}

.cellyohaku_all8px {
    padding: 8px;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定 */
    padding: 0.8rem;
}

.cellyohaku_topbottom8px {
    padding-top: 8px;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定 */
    padding-top: 0.8rem;
    padding-bottom: 8px;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定 */
    padding-bottom: 0.8rem;
}


/* 文字を下揃えにする →画像に対してCSSを設定する。*/

.textbottom {
    vertical-align: bottom;
}

.textmiddle {
    vertical-align: middle;
}

.texttop {
    vertical-align: top;
}


/* *********************************************************************** */


/* 以下は主にTDに対して使う */


/* *********************************************************************** */


/* 線を追加 */

.THSenAdd_TR {
    border-top: 1px solid #cbcbb1;
    border-right: 1px solid #cbcbb1;
}

.THSenAdd_T {
    border-top: 1px solid #cbcbb1;
}

.THSenAdd_T_black {
    border-top: 4px solid #000000;
}

.THSenAdd_R {
    border-right: 1px solid #cbcbb1;
}


/* 線を消去 */

.THSenNo_ALL {
    border-style: none none none none;
}

.THSenNo_LR {
    border-left-style: none;
    border-right-style: none;
}

.THSenNo_LB {
    border-left-style: none;
    border-bottom-style: none;
}

.THSenNo_L {
    border-left-style: none;
}

.THSenNo_B {
    border-bottom-style: none;
}

.THSenNo_TB {
    border-top-style: none;
    border-bottom-style: none;
}

.ClassBorderLR_noTB {
    border-bottom-style: none;
    border-top-style: none;
}

.ClassBorderLTR_noB {
    border-bottom-style: none;
}

.ClassBorderNone {
    border-style: none none none none;
}

.ClassBorderLRB_noT {
    border-top-style: none;
}

.ClassBorderTB_noLR {
    border-left-style: none;
    border-right-style: none;
}

.ClassBorderRTB_noL {
    border-left-style: none;
}

.ClassBorderLTB_noR {
    border-right-style: none;
}

.ClassBorderR_noLTB {
    border-top-style: none;
    border-left-style: none;
    border-bottom-style: none;
}

.ClassBorderL_noRTB {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

.ClassBorderLT_noRB {
    border-right-style: none;
    border-bottom-style: none;
}

.ClassBorderLB_noRT {
    border-top-style: none;
    border-right-style: none;
}

.ClassBorderRB_noLT {
    border-top-style: none;
    border-left-style: none;
}

.ClassBorderRT_noLB {
    border-left-style: none;
    border-bottom-style: none;
}

.ClassBorderB_noLRT {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
}

.ClassBorderT_noLRB {
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

.ClassBorderLRTB {
    border-width: thin thin thin thin;
    border-style: solid solid solid solid;
    border-color: #cbcbb1 #cbcbb1 #cbcbb1 #cbcbb1;
}


/* Table全て　罫線消去　*/

table.table_border_allnone,
table.table_border_allnone>tbody>tr>th,
table.table_border_allnone>tbody>tr>td,
table.table_border_allnone>tr>th,
table.table_border_allnone>tr>td {
    border-style: none none none none;
    border-top-style: none;
    border-right-style: none;
}


/* Tableの中の　th だけ　罫線消去　*/

table.table_border_thnone>tbody>tr>th,
table.table_border_thnone>tbody>tr>td,
table.table_border_thnone>tr>th,
table.table_border_thnone>tr>td {
    border-style: none none none none;
}

.marumaru {
    font-weight: bold;
    /* color : #ff0000; フォントの色 */
    color: #ff0000;
    text-shadow: 2px 8px 6px #fbfb00, 0px -5px 35px #ffff00;
    font-size: 32px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 3.2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.maru {
    font-weight: bold;
    /* color : #ff0000; フォントの色 */
    font-size: 22px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 2.2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.kobetu_midashi_fontsize_per {
    font-size: 70%;
}

.Rem36px {
    font-size: 36px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 3.6rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem32px {
    font-size: 32px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 3.2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem26px {
    font-size: 26px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 2.6rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem22px {
    font-size: 22px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 2.2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem20px {
    font-size: 20px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem18px {
    font-size: 18px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.8rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem16px {
    font-size: 16px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.6rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem13px {
    font-size: 13px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.3rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem13px_GyoukanNashi {
    font-size: 13px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.3rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
    line-height: 1.2;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
}

.Rem12px {
    font-size: 12px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem12px_GyoukanNashi {
    font-size: 12px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
    line-height: 1.2;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
}

.Rem11px {
    font-size: 11px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.1rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem11px_important {
    font-size: 11px !important;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.1rem !important;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem9px {
    font-size: 11px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.1rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem10px {
    font-size: 10px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.Rem8px {
    font-size: 8px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 0.8rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}


/* *********************************************************************** */


/* 個別のフォントサイズ設定 */


/* 基本的には上で設定するが、PCとスマホの倍率を変えたい場合など、個別に設定する場合は、ここにPC用を記述 */


/* スマホ用は、別の　hpbsite_sumaho.cssに記述 */


/* *********************************************************************** */

.RemSideMenu {
    font-size: 13px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.3rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}
.BokasiSideMenu * a,
.RemSideMenu * a{
	color:#000000;
}
#mokuji * a{
	color:#000000;
}


/* 入力･書類･他の背景 */

.KaikeiKinou {
    /* background-color : #fff8f4; */
    border: 1px solid #cbcbb1;
}


/* 会計ソフト比較表のタイトルのフォントサイズ ※スマホは、hpbsite_sumaho.cssで別定義している */

.RemSoftHyouTitle {
    font-size: 12px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
    line-height: 1.2;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
}


/* 会計ソフト比較表の中のフォントサイズ ※スマホは、hpbsite_sumaho.cssで別定義している*/

.RemSoftHyouNaka {
    font-size: 14px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.4rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
    line-height: 1.6;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    /* border-bottom: 1px solid #cbcbb1; */
}


/* 会計ソフト比較表の中のフォントサイズ ※スマホは、hpbsite_sumaho.cssで別定義している*/

.RemSoftginkou {
    font-size: 13px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.3rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
    line-height: 1.5;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    /* border-bottom: 1px solid #cbcbb1; */
}

.kome {
    background: #e9e9e9;
}


/* 会計ソフト比較表の中のフォントサイズ ※スマホは、hpbsite_sumaho.cssで別定義している*/

.ninki {
    /* text-decoration: underline;   下線 */
    font-style: italic;
    /* 斜体 */
    /* color : #ff0000; フォントの色 */
    color: #ff0000;
    text-shadow: 2px 8px 6px #fbfb00, 0px -5px 35px #ffff00;
    font-size: 11px;
    font-size: 1.1rem;
}

.ninkibig {
    /* text-decoration: underline;   下線 */
    font-style: italic;
    /* 斜体 */
    font-weight: bold;
    /* color : #ff0000; フォントの色 */
    color: #ff0000;
    text-shadow: 2px 8px 6px #fbfb00, 0px -5px 35px #ffff00;
    font-size: 14px;
    font-size: 1.4rem;
}


/* HojinSoftレビューの基本情報〜ポイント�Cの全体の文字開始位置設定 */


/* ※スマホの場合はhpbsite_sumaho.cssで変更している */

.rebyu_indent {
    padding-left: 9em;
    /* 文字全体を右へ 【注意】rebyu_indentのpadding-left　と　rebyu_imgのpadding-left　は同じ値にする。そうしないと画像がずれる*/
    text-indent: -5em;
    /* 1行目だけ左へ */
}


/*HojinSoftレビューの画像のあるTableに設定　※これがないと、画像が中央によらない*/

.indent_tablezu {
    padding-left: 0.5em;
    /* ソフトレビューの文字と画像のあるTableの間隔 ※この値を変更するときは注意！スマホも実機で確認すること*/
    text-indent: 0em;
    /* これは0にしないとダメ※これがないと、画像が中央によらない */
}


/* ******************************************************************************** */


/* 【1文字の字下げ】　HojinSoftレビューの基本情報〜ポイント�Cの各コメントの文字開始位置設定 */


/* ******************************************************************************** */


/* 【TdまたはThに対して、1文字の字下げ】*/

.indenttdth,
.indent_kaikeirebyu {
    padding-left: 1.2em;
    /* 文字全体を右へ */
    text-indent: -1.5em;
    /* 1行目だけ左へ */
}


/* 【文章Spanに対して1文字の字下げ】  */

.indentapan_gyoukannasi {
    display: inline-block;
    /*   <span>などのインライン要素をプロックレベル要素にする */
    padding-left: 1.2em;
    /* 文字全体を右へ */
    text-indent: -1.2em;
    /* 1行目だけ左へ */
    
}

.indentapan {
    
    display: block;
    /* <span>などのインライン要素をプロックレベル要素にする */
    padding-left: 1.2em;
    /* 文字全体を右へ */
    text-indent: -1.2em;
    /* 1行目だけ左へ */
    margin-bottom: 2em;


}
.indentapan_rd_setumeibun {
/*   rdの説明文、及び、 xxzzの説明文で使用している */


    display: block;
    /*   <span>などのインライン要素をプロックレベル要素にする */
    padding-left: 1.2em;
    /* 文字全体を右へ */
    text-indent: -1.2em;
    /* 1行目だけ左へ */
    margin-bottom: 0.5em;
}

/* ↓基本的には、Spanの中にTable要素を入れるのは、HTML5非推奨だから、以下は使わない。  */


/* HTML5非推奨だが、もしも上記indentapanの中にtableがある場合は、そのtableにこのCSSを適用しないとダメ。こうしないと、iphoneで、Tableの中の文字が左へはみ出してしまう。 */

.indent_none {
    padding-left: 0em;
    /* 文字全体を右へ */
    text-indent: 0em;
    /* 1行目だけ左へ */
}


/* 【テーブル自体に対して、1文字分の字下げ】 table要素に対して、単独で適用する。 */

.indenttable {
    margin-left: 1em;
    /* テーブルの外側の左余白を一文字分あける　*/
    width: 96%;
    /* テーブルの幅を1文字分短くする。左記がなく、上記だけだと、スマホ画面からテーブルが1文字分はみ出してしまう。*/
}


/* HojinSoftレビューの基本情報〜ポイント�Cのフォント設定 */

.rebyu_point {
    position: relative;
    /* beforeとafterで位置指定するときは、相対位置にする */
    padding: 3px 5px 0px 10px;
    padding: 0.3rem 0.5rem 0rem 1rem;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
    border-bottom: 1px solid #0c0c0c;
    border-bottom: 0.1rem solid #0c0c0c;
    color: #0c0c0c;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 14px;
    line-height: 1.4rem;
}


/* 下の四角のレイアウト */


/*

.rebyu_point:before {
    position: absolute;
    bottom: 6px;
    bottom: 0.6rem;

    left: 0;
    width: 13px;
    width: 1.3rem;
    height: 13px;
    height: 1.3rem;
    border: 1px solid #ff4646;
    border: 0.1rem solid #ff4646;
    content: "";
}
*/


/* 上の四角のレイアウト */


/*
.rebyu_point:after {
    position: absolute;
    bottom: 13px;
    bottom: 1.3rem;

    left: 9px;
    left: 0.9rem;
    width: 10px;
    width: 1.0rem;
    height: 10px;
    ;
    height: 1.0rem;
    border: 1px solid #ff7d7d;
    border: 0.1rem solid #ff7d7d;
    content: "";
}
 */

.ClassBorder_Bottom {
    /* box-shadow: 0 3px 3px 0 rgba(0,0,0,.15);  /* ぼかし １番目の値→正は右へ、負は左へ　２番目の値→正は下へ、負は上へ*/
}

.padding0 {
    padding: 0px 0px;
}

.margin0padding0 {
    margin: 0px;
    padding: 0px;
}

.ClassPoint {
    font-weight: bold;
    color: red;
    text-decoration: underline;
}


/* 比較ページで使っている強調　*/
.point {

    display: inline-block;
    /*上記を設定しないとダメ。左記を設定しないと、<span class="point">の中に、display:inline-blockを設定したSpanがあると、一部の行にここで設定しているCSSが反映されない。例えば、https://keiripoint.com/80Soft/0001pos.html　の選び方の機能ポイントで問題が起きる。
    しかし、上記を設定すると、箇条書きの中に、このCSSを適用すると、ブロックなので改行されてしまう*/

    
    color: #ec0000;
    font-weight: bold;

    background-color: #FFFFE0;

    background-color: #FEFCF5;

    background-color: #FDFDE6;

    
    
    /*
    font-weight: bold;

    background-color: #fef3b3;
    border: 1px solid #feed89;
    border-bottom: 1px solid;
    
    
    
    
    */
    
    /*background: linear-gradient(transparent 70%, #ffffcc 0%); */

    /*
    border: 1px solid #ffffcc;
    border-radius: 3px;
     */

    /* 角の丸み */
}


/* 全ページ（主に比較ページ以外）で使っている強調　*/
STRONG {
    color: #ec0000;
    /*
    
    font-weight: bold;
    
    background-color: #fef3b3;
    border: 1px solid #feed89;
    */
    
    
    /*
    background-color: #ffffcc;    
    border: 1px solid #ffffcc;
    border-radius: 3px;
    */



    /* 角の丸み */
}

STRONG:before {
    /* content: "◎"; 『良い』 [良い] 【良い】*/
    /* content:url(https://keiripoint.com/image/ecalic039-png/Point3.png); */
    color: #ff0000;
}


/* コメント　吹き出し風 */

.Coment {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 8px;
    background: #ffffe8;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #feed89;
    font-weight: normal;
}

.ClassSTRONG_a {
    background-color: #ffbe7d;
}

.ClassSTRONG_b {
    background-color: #fec2ca;
}

.STRONG_a_wakuari {
    background-color: #ffbe7d;
    border: solid 1px #da7c0c;
}

.STRONG_b_wakuari {
    background-color: #cbff9b;
    border: 1px dashed #5da900;
}

.STRONG_c_wakuari {
    /*background-color : #5b9bd5;	*/
    background-color: #e1edf7;
    border: 1px solid #3480cb;
    /*color: #ffffff; */
    border-radius: 8px;
    /* 角の丸み */
}

.STRONG_d_wakuari {
    /*background-color : #7777cf;	*/
    background-color: #f3f3fc;
    border: 1px solid #bdbde8;
    /*color: #ffffff; */
}

/* マウスを置いて拡大ボタン */
A.popdown  {
    /* スマホは、再定義している */
    border-radius: 4px;
    /* 角の丸み */
    border: 1.5px solid #3399ff;
    background-color: #3366ff;
    /* #ddddff #c4c4ff */
    font-weight: bold;
    font-size: 9px !important;
    /*  */
    color: #fffffd;
    /* #3e3eff; */
    padding: 0px 3px 0 3px !important;
    /* */
    /*［上］ と ［右］ と ［下］ と ［左］ を指定 */
    text-decoration: none;
    /* white-space: nowrap;fixedmidashiのずれや白くなったりの原因になる可能性があるので使っていない*/
    /* 拡大ボタンを改行させない */


    /* display: inline-block; 左記を実行すると、TDなどの親要素にインデントが設定されていた場合、ずれる */
    /* 背景画像に虫眼鏡設定 */
    /* background-image: url("https://keiripoint.com/image/ecalic039-png/kakudai6.png"); */
    /*左記のようにCSSで背景画像として虫眼鏡を設定しないとダメ。HTML側でA要素の後に、imgで虫眼鏡画像を記述すると、画像ポップアップ後、A要素の中で虫眼鏡画像にマウスを載せると、mouseenterイベントが無駄に何回も発生してしまう。 */
    /* background-position: 2% 10%; */
    /* 画像を左から5％　上から40％の位置に配置 */
    background-repeat: no-repeat;
    position: relative;
    /* top:-3px;文字を上へ3pxずらす */
    /* left:8px; 文字を右へ3pxずらす */
}

A.popdown:after {
    /* 以下は▲吹き出し部分　https://generator.web-alpha.info/fukidashi/index.php#step1 */
    border: solid transparent;
    content: "";
    top: 30;
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(51, 102, 255, 0);
    /* ▲の高さ */
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 8px;
    border-right-width: 8px;
    margin-left: -8px;
    border-bottom-color: #3366ff;
    bottom: 100%;
    left: 50%;
    /* 吹き出し位置　中央は50％ */
}

A.popup {
    border-radius: 4px;
    /* 角の丸み */
    /* border: 1px dashed rgba(142, 142, 255, 0.8);
    */
    font-size: 14px;
    background-color: rgba(51, 102, 255, 0) !important;
    color: rgba(255, 255, 255, 0) !important;
    
    
    /* ←不透明0％。つまり透明　color: #8e8eff; */
    padding: 30px 40px;
    margin-top:  -35px;
    margin-left:  -40px;

    /* display: inline-block; 左記を実行すると、TDなどの親要素にインデントが設定されていた場合、ずれる */
    text-align: center;


    
    
    /* white-space: nowrap;fixedmidashiのずれや白くなったりの原因になる可能性があるので使っていない*/
    /* 拡大ボタンを改行させない */


    /* 背景画像に虫眼鏡設定 */
    /* background-image: url("https://keiripoint.com/image/ecalic039-png/kakudai5.png"); */
    /*左記のようにCSSで背景画像として虫眼鏡を設定しないとダメ。HTML側でA要素の後に、imgで虫眼鏡画像を記述すると、画像ポップアップ後、A要素の中で虫眼鏡画像にマウスを載せると、mouseenterイベントが無駄に何回も発生してしまう。 */
    background-position: 10% 40%;
    /* 画像を左から5％　上から40％の位置に配置 */
    background-repeat: no-repeat;
}
/* 解説ボタン */
A.popcomentdown  {
    
    /* スマホは、再定義している */
    border-radius: 4px;
    /* 角の丸み */
    border: 1.5px solid #3399ff;
    background-color: #3366ff;
    /* #ddddff #c4c4ff */
    font-weight: bold;
    font-size: 9px !important;
    /*  */
    color: #fffffd;
    /* #3e3eff; */
    padding: 0px 10px 0 10px !important;
    /* */
    /*［上］ と ［右］ と ［下］ と ［左］ を指定 */
    text-decoration: none;

    /* white-space: nowrap;fixedmidashiのずれや白くなったりの原因になる可能性があるので使っていない*/
    /* 拡大ボタンを改行させない */


    /* display: inline-block; 左記を実行すると、TDなどの親要素にインデントが設定されていた場合、ずれる */


    /* 背景画像に虫眼鏡設定 */
    /* background-image: url("https://keiripoint.com/image/ecalic039-png/kakudai6.png"); */
    /*左記のようにCSSで背景画像として虫眼鏡を設定しないとダメ。HTML側でA要素の後に、imgで虫眼鏡画像を記述すると、画像ポップアップ後、A要素の中で虫眼鏡画像にマウスを載せると、mouseenterイベントが無駄に何回も発生してしまう。 */
    /* background-position: 2% 10%; */
    /* 画像を左から5％　上から40％の位置に配置 */
    background-repeat: no-repeat;
    position: relative;
    /* top:-3px;文字を上へ3pxずらす */
    /* left:8px; 文字を右へ3pxずらす */
}
A.popcomentup {

    border-radius: 4px;
    /* 角の丸み */
    border: 1px dashed rgba(142, 142, 255, 0.8);

    /* */
    font-size: 15px;
    background-color: rgba(51, 102, 255, 0) !important;
    color: rgba(255, 255, 255, 0) !important;
    /* ←不透明0％。つまり透明　color: #8e8eff; */


    padding: 7px 30px;
    margin-top:  -15px;
    margin-left:  -20px;


    /* display: inline-block; 左記を実行すると、TDなどの親要素にインデントが設定されていた場合、ずれる */
    text-align: center;



    
    /* white-space: nowrap; fixedmidashiのずれや白くなったりの原因になる可能性があるので使っていない*/



    /* 拡大ボタンを改行させない */
    /* 背景画像に虫眼鏡設定 */
    /* background-image: url("https://keiripoint.com/image/ecalic039-png/kakudai5.png"); */
    /*左記のようにCSSで背景画像として虫眼鏡を設定しないとダメ。HTML側でA要素の後に、imgで虫眼鏡画像を記述すると、画像ポップアップ後、A要素の中で虫眼鏡画像にマウスを載せると、mouseenterイベントが無駄に何回も発生してしまう。 */
    /* background-position: 10% 40%; */
    /* 画像を左から5％　上から40％の位置に配置 */
    background-repeat: no-repeat;
}



.kasanetd {
    position: relative;
}


/* 一番背後の画像 HTMLのStyleで記述する*/

.kasaneimg0 {
    position: relative;
    /*　これがないとzindexが効かない　 http://qiita.com/oyaoyaoya/items/0a56493f85f7cf5ee8f0 */
    z-index: 20;
}


/* 背後から一つ上の画像 HTMLのStyleで記述する*/

.kasaneimg1 {
    position: absolute;
    top: 50px;
    left: 50px;
    /* 以下は、最初はHTMLのStyleで記述しておく。
	マウスオーバー時、Javaで、重なっている全画像を取得する(htmlのimgにdata-kasane="aaa_0" "aaa_1"とか任意属性を付加して、ループすればよい)。
	次に、各画像のz-indexを変更する https://syncer.jp/javascript-reference/element/style　*/
    z-index: 1;
}

A.mokujiA {
    color: #ffffff;
}

A {
    color: #3e3eff;
    color: #0055ff;
    text-decoration: none;
    vertical-align: bottom;
    /*line-height: 1.0;  行間 */
}

A:hover {
    color: #0099ff;
    text-decoration: underline;
    vertical-align: bottom;
    /* line-height: 1.0; 行間 */
}






/* セル単位でリンクできるようにする */

a.LinkCell {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化 */
}


/* セル単位でリンクできるようにする */

a.bordernone {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化 */
    text-decoration: none;
    /* 下線なし */
}

.bordernone a {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化 */
    text-decoration: none;
    /* 下線なし */
}

EM {
    color: #ffffff;
    font-weight: bold;
    font-style: normal;
}

.Classmidashi_1 {
    font-size: 1.5px;
    font-weight: bold;
    color: #ffffff;
    background-color: #cbcbb1;
    border-width: 1px 1px 1px 1px;
    border-style: solid solid solid solid;
    border-color: #cbcbb1 #cbcbb1 #cbcbb1 #cbcbb1;
}

.ClassMidashi_2 {
    font-size: 1.3px;
    border-color: #cbcbb1 #cbcbb1 #cbcbb1 #cbcbb1;
    color: #ffffff;
    background-color: #cbcbb1;
}

.ClassMidashi_3 {
    background-color: #cbcbb1;
    border-color: #cbcbb1 #cbcbb1 #cbcbb1 #cbcbb1;
    color: white;
}

H1 {
    /* box-shadow: 0 -3px 3px 0px rgba(0,0,0,.15) inset;  /* ぼかし １番目の値→正は右へ、負は左へ　２番目の値→正は下へ、負は上へ*/
    /* border: 1px solid #999999;*/
    padding: 2px;
    background-color: #eeeeee;
    background-repeat: repeat-x;
    background-position: top;
    padding: 20px 0px 20px 24px;
    padding: 2rem 2rem 2rem 2rem;
    border: 1px solid #4d4d4d; 

    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
    margin: 0px 0px 0px 0px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 
    */
    margin-top: 0.1em;
    margin-bottom: 1em;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
    font-size: 28px;
    font-size: 2.8rem;
    /* 以前のH1に以下のClassMenu2のCSSを追記した */
    background: #E5E5E5;
    
    /* W3C  */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow: 1px 1px 1px #333;
    /* box-shadow:0 3px 3px 0 rgba(0,0,0,.15); /* ぼかし １番目の値→正は右へ、負は左へ　２番目の値→正は下へ、負は上へ*/
}

H2 {
    /* 見出しのH2に、見出し番号＋見出し数　を設定する のは、00js_bottom.jsで実行している */
    /* box-shadow: 0 -3px 5px 0px rgba(247,247,247,1) inset; */
    /* ぼかし １番目の値→正は右へ、負は左へ　２番目の値→正は下へ、負は上へ*/
    border: 1px solid #999999;
    border: 0.1rem solid #999999;
    /* 赤線 
    border-bottom: 2px solid #ff5b5b;
    border-bottom: 0.2rem solid #ff5b5b;*/
    /* border-left: 7px solid #ff5b5b; */
    color: #4d4d4d;
    /* フォントの色 */
    background: #E5E5E5;
    /* 余白 */
    padding: 1px;
    padding: 0.1rem;
    padding: 20px 0px 20px 20px;
    padding: 2rem 0rem 2rem 2rem;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
    /* margin:0px 0px 5px 0px;margin:0rem 0rem 0.5rem 0rem; */
    /* margin-top : 0.1em; margin-bottom : 1em; */
    font-size: 30px;
    font-size: 3rem;

    
}
/*
h2 {
    border-bottom: solid 3px #cce4ff;
    position: relative;
    }
    
h2:after {
    position: absolute;
    content:  ;
    display: block;
    border-bottom: solid 3px #5472cd;
    bottom: -3px;
    width: 20%;
}
*/
/* スマホは、スマホのCSSで別途定義している */

.H2_midasi {
    font-size: 70px;
    color: #4d4d4d;
    /* フォントの色
    background: #ffffff; */
    padding: 8px 13px 8px 13px;
    padding: 0.8rem 1.3rem 0.8rem 1.3rem;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
    border-radius: 3px;
    /* 角の丸み */
}

H3 {
    position: relative;
    /* beforeとafterで位置指定するときは、相対位置にする */
    border: 2px solid #E5E5E5;
    /* 赤線
    border-bottom: 2px solid #ff5b5b;
    border-bottom: 0.2rem solid #ff5b5b; */
    /* border-left: 4px solid #ff5b5b; */
    padding: 2px;
    padding: 15px 0px 15px 24px;
    padding: 1.5rem 0rem 1.5rem 2.4rem;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
    margin: 0px 0px 5px 0px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    color: #0b0b0b;
    /* フォントの色 */
    font-size: 22px;
    font-size: 2.5rem;
    background: #eceaea;
}


/*
H3:before {


	// 下の四角のレイアウト
    position: absolute;

    top: 25px; top: 2.5rem; //上を基準に四角の位置を決める

    left: 8px;left: 0.8rem;
    width: 5px;width: 0.5rem;
    height: 20px;height: 2.0rem; // beforeとafterのheightは同じにする

	background-color : #e0e0e0;

    content: "";

}
H3:after {

	// 上の四角のレイアウト
	position: absolute;

    top: 5px; top: 0.5rem;   // 上を基準に四角の位置を決める

    left: 8px;left: 0.8rem;
    width: 5px;width: 0.5rem;
    height: 20px;height: 2.0rem; // beforeとafterのheightは同じにする

	background-color : #dbdbdb;

    content: "";
}

*/

H4 {
    border: 1px solid #999999;
    border-bottom: 1px solid #ff5b5b;
    border-bottom: 0.1rem solid #000000;
    border-left: 2px solid #ff5b5b;
    padding: 2px;
    background: #6a6a6a;
    padding: 10px 0px 10px 24px;
    padding: 1rem 0rem 1rem 2.4rem;
    margin: 0px 0px 5px 0px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    color: #ffffff;
    /* フォントの色 */
    font-size: 18px;
    font-size: 1.8rem;
}

H5 {
    border: 1px solid #999999;
    padding: 2px;
    background-repeat: repeat-x;
    background-position: top;
    background: #c9c9c9;
    padding: 0px 0px 3px 8px;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
    margin: 0px 0px 5px 0px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-size: 16px;
    font-size: 1.6rem;
}


/* 小さ目四角2つの見出し　　http://kinomemo.info/create/1839/ */


/* スマホでは、四角を消去している。そうしないと、文字数が多い時に画面幅が広がってしまう */

.midasisikaku_s {
    position: relative;
    /* beforeとafterで位置指定するときは、相対位置にする */
    padding: 3px 10px 0px 30px;
    padding: 0.3rem 1rem 0rem 3rem;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
    border-bottom: 1px solid #ff7d7d;
    border-bottom: 0.1rem solid #ff7d7d;
    color: #ec0000;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 14px;
    line-height: 1.4rem;
}

.midasisikaku_s:before {
    /* 下の四角のレイアウト */
    position: absolute;
    bottom: 6px;
    bottom: 0.6rem;
    /* 下を基準に四角の位置を決める */
    left: 0;
    width: 13px;
    width: 1.3rem;
    height: 13px;
    height: 1.3rem;
    border: 1px solid #ff4646;
    border: 0.1rem solid #ff4646;
    content: "";
}

.midasisikaku_s:after {
    /* 上の四角のレイアウト */
    position: absolute;
    bottom: 13px;
    bottom: 1.3rem;
    /* 下を基準に四角の位置を決める */
    left: 9px;
    left: 0.9rem;
    width: 10px;
    width: 1rem;
    height: 10px;
    height: 1rem;
    border: 1px solid #ff7d7d;
    border: 0.1rem solid #ff7d7d;
    content: "";
}

.komidasi {
    position: relative;
    color: #111;
    font-size: 1.143em;
    font-weight: bold;
    margin: 0 0 1.5em;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
    padding: 0.5em 0.5em 0.5em 1.7em;
    border-bottom: 3px solid #b92a2c;
}

.komidasi:before {
    content: "";
    position: absolute;
    background: #d48789;
    top: 0;
    left: 0.4em;
    height: 12px;
    width: 12px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.komidasi:after {
    content: "";
    position: absolute;
    background: #d26466;
    top: 1em;
    left: 0;
    height: 8px;
    width: 8px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
}


/* サイドメニューの目次 */

.SideMokuji1 {
    border-bottom: 1px solid #999999;
    padding: 2px;
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 4px 8px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
    border-left: 3px solid #000000;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-weight: bold;
    font-size: 14px;
    font-size: 1.4rem;
}


/* ページ先頭の目次 */

.PageMokuji {
    /* box-shadow: 0 -3px 3px 0px rgba(0,0,0,.15) inset; /* ぼかし １番目の値→正は右へ、負は左へ　２番目の値→正は下へ、負は上へ*/
    border-bottom: 1px solid #999999;
    padding: 2px;
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 4px 8px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
    border-left: 3px solid #4d4d4d;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-weight: bold;
}

.ClassTitle {
    /* box-shadow: 0 3px 3px 0 rgba(0,0,0,.15); /* ぼかし １番目の値→正は右へ、負は左へ　２番目の値→正は下へ、負は上へ*/
    border: 1px solid #999999;
    padding: 2px;
    background-repeat: repeat-x;
    background-position: top;
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 3px 8px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-weight: bold;
    font-size: 16px;
    font-size: 1.6rem;
}

.ClassFontBokasi {
    text-shadow: 1px 1px 1px #333;
}

.ClassMoji_10Point {
    font-size: 13px;
}

.ClassMoji_105Point {
    font-size: 14px;
}

.ClassMoji_9Point {
    font-size: 12px;
}

.ClassMoji_9P_GyoukanNashi {
    font-size: 12px;
    line-height: 1.2;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
}

.ClassMoji_10P_GyoukanNashi {
    font-size: 13px;
    line-height: 1.2;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
}

.ClassMoji_105P_GyoukanNashi {
    font-size: 14px;
    line-height: 1.2;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
}

.ClassMoji_GyoukanNashi {
    line-height: 1.2;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
}

.ClassMoji_11Point {
    font-size: 15px;
}

.ClassMoji_12Point {
    font-size: 16px;
}

.ClassMoji_14Point {
    font-size: 18px;
}

.ClassMoji_16Point {
    font-size: 20px;
}

.ClassMoji_22Point {
    font-size: 28px;
}

.ClassMoji_8Point {
    font-size: 10px;
}

.ClassMoji_50Point {
    font-size: 50px;
}

.ClassMoji_60Point {
    font-size: 60px;
}


/* 丸く囲むだけ  */

.fukidashi {
    border-radius: 5px;
    /* 角の丸み */
    border: 2px solid #ff0000;
}


/* 丸く囲むだけ  */

.WakuMaruOnly {
    border-radius: 7px;
    /* 角の丸み */
    border: 4px solid #000000;
}

.waku {
    border-radius: 5px;
    /* 角の丸み */
    border: 1px solid #4d4d4d;
}

.WakuMaruOnly_1px {
    border-radius: 5px;
    /* 角の丸み */
    border: 1px solid #bdbd9d;
}


/* 赤枠 */

.WakuMaruOnly_red {
    border-radius: 5px;
    /* 角の丸み */
    border: 4px solid #ff0000;
}

.ClassWakuOnly {
    /* -webkit-border-radius:2px; */
    /* -moz-border-radius:2px; */
    /* border-radius:2px;  角丸 */
    /* box-shadow:0 2px 2px 0 rgba(0,0,0,.15); /* ぼかし １番目の値→正は右へ、負は左へ　２番目の値→正は下へ、負は上へ*/
    border: 1px solid #999999;
    padding: 2px;
}

.ClassWakuMaruOnly {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    /* border-radius:2px;  /* 角の丸み */
    /* box-shadow:0 2px 2px 0 rgba(0,0,0,.15); /* ぼかし １番目の値→正は右へ、負は左へ　２番目の値→正は下へ、負は上へ*/
    border: 1px solid #999999;
    padding: 2px;
}

.ClassFutoWakuMaruOnly {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    /* border-radius:2px;  /* 角の丸み */
    /* box-shadow:0 2px 2px 0 rgba(0,0,0,.15); /* ぼかし １番目の値→正は右へ、負は左へ　２番目の値→正は下へ、負は上へ*/
    border: 3px solid #999999;
    padding: 2px;
}


/* サイドメニューのぼかし */

.BokasiSideMenu {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    /* border-radius:3px;  /* 角の丸み */
    /* box-shadow:0 2px 2px 0 rgba(0,0,0,.15); /* ぼかし １番目の値→正は右へ、負は左へ　２番目の値→正は下へ、負は上へ*/
    border: 1px solid #e8e8e8;
    padding: 3px;
    background-color: #eeeeee;
}

.kakumaru {
    border-radius: 0.5em;
    /* 角の丸み */
    border: 1px solid #999999;
}

.kakumaru_dashed {
    border-radius: 0.5em;
    /* 角の丸み */
    border: 1px dashed #999999;
}

.ClassMenu1_Koi {
    background: #e0e0e0;
    /* Old browsers */
    background: -moz-linear-gradient( top, #e0e0e0 0%, #E5E5E5 50%, #d9d9d9 51%, #999999 100%);
    /* FF3.6+ */
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, #e0e0e0), color-stop(50%, #E5E5E5), color-stop(51%, #d9d9d9), color-stop(100%, #999999));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient( top, #e0e0e0 0%, #E5E5E5 50%, #d9d9d9 51%, #999999 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient( top, #e0e0e0 0%, #E5E5E5 50%, #d9d9d9 51%, #999999 100%);
    /* Opera11.10+ */
    background: -ms-linear-gradient( top, #e0e0e0 0%, #E5E5E5 50%, #d9d9d9 51%, #999999 100%);
    /* IE10+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#999999', GradientType=0);
    /* IE6-9 */
    background: linear-gradient( top, #e0e0e0 0%, #E5E5E5 50%, #d9d9d9 51%, #999999 100%);
    /* W3C */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow: 1px 1px 1px #333;
    /* box-shadow:0 3px 3px 0 rgba(0,0,0,.15); */
}

.ClassMenu2 {
    background: #E5E5E5;
    
    /* W3C  */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    /* text-shadow:1px 1px 1px #333; */
    /* box-shadow:0 3px 3px 0 rgba(0,0,0,.15); */
    font-weight: bold;
}

.divmenu {
    width: 100%;
    /*
    background-color: #eeeeee;
    background-color: #fafafa;
    border: 1px solid #cbcbb1;
    */
}

.zentaikakomi {
    border: 3px solid #5a5a5a;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.zentaimoji {
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #5a5a5a;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    font-weight: bold;
    padding: 4px;
    /*［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
    background: #f5f5f5;
    /* Old browsers  */
    /* 角の丸み */
    border-top-left-radius: 10px;
    /* 左下 */
    border-top-right-radius: 20px;
    /* 右下 */
    border-bottom-left-radius: 3px;
    /* 左下 */
    border-bottom-right-radius: 3px;
    /* 右下 */
    border-top-left-radius: 1rem;
    /* 左下 */
    border-top-right-radius: 1rem;
    /* 右下 */
    border-bottom-left-radius: 0rem;
    /* 左下 */
    border-bottom-right-radius: 0rem;
    /* 右下 */
}

.ClassMenu2_WakuAri {
    background: #f5f5f5;
    /* Old browsers  */
    background: -moz-linear-gradient( top, #f5f5f5 0%, #e9e9e9 50%, #e0e0e0 51%, #E5E5E5 100%);
    /* FF3.6+  */
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(50%, #e9e9e9), color-stop(51%, #e0e0e0), color-stop(100%, #E5E5E5));
    /* Chrome,Safari4+  */
    background: -webkit-linear-gradient( top, #f5f5f5 0%, #e9e9e9 50%, #e0e0e0 51%, #E5E5E5 100%);
    /* Chrome10+,Safari5.1+  */
    background: -o-linear-gradient( top, #f5f5f5 0%, #e9e9e9 50%, #e0e0e0 51%, #E5E5E5 100%);
    /* Opera11.10+  */
    background: -ms-linear-gradient( top, #f5f5f5 0%, #e9e9e9 50%, #e0e0e0 51%, #E5E5E5 100%);
    /* IE10+  */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#E5E5E5', GradientType=0);
    /* IE6-9  */
    background: linear-gradient( top, #f5f5f5 0%, #e9e9e9 50%, #e0e0e0 51%, #E5E5E5 100%);
    /* W3C  */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow: 1px 1px 1px #333;
    /* box-shadow:0 2px 2px 0 rgba(0,0,0,.15);*/
    border: 1px solid #999999;
    padding: 2px;
}

.ClassMenu2_HPtitle {
    font-size: 30px;
    text-shadow: 2px 2px 2px #333;
}

.img_border {
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #EAEAEA ;
}
/* 画像は左へ */

.img_left {
    float: left;
    margin-right: 20px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
}


/* 画像は右へ */

.img_right {
    float: right;
    margin-left: 20px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
}


/* 画像だけ中央 ※文字は中央揃えしない ※画像に設定*/

.img_center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* 画像をDivで囲んで中央揃えにする */

.div_imgcenter {
    text-align: center;
}


/* 以下はテスト。後で削除可能 */

.img_righttest {
    float: right;
    vertical-align: middle;
}


/* 以下はテスト。後で削除可能 */

.test11 {
    display: inline-block;
    vertical-align: middle;
}


/* 以下はテスト。後で削除可能 */

.erabikata {
    background-image: url(https://keiripoint.com/80Soft/image/erabikata_1test.gif);
    background-position: center right;
    background-repeat: no-repeat;
}

IMG {
    vertical-align: middle;
    /* 画像の右にくるテキストの上位置は、基本真ん中 */
}

img.img_aligntop {
    vertical-align: top;
    /* 画像の右にくるテキストの上位置は、上 */
}

img.img_alignbottom {
    vertical-align: bottom;
    /* 画像の右にくるテキストの上位置は、上 */
}

img.img_alignleft {
    vertical-align: left;
    /* 画像の右にくるテキストの上位置は、上 */
}

img.img_alignright {
    vertical-align: right;
    /* 画像の右にくるテキストの上位置は、上 */
}

.img_zentai {
    display: inline-block;
    border: solid 1px #8e8eff;
    overflow: hidden;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    /* -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); */
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    /* box-shadow: 0px 0px 7px -5px rgba(0, 0, 0, 0.8); */
    margin: 2px 0px 4px 0px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
}

.iwaku {
    /* display: inline-block; */
    border: solid 1px #ccced0;
    /* margin:2px 0px 4px 0px; */
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
}

.img_100 {
    max-width: 100%;
    /* 値1が上、値2が右、値3が下、値4が左の余白です。*/
}

.img_70per {
    max-width: 70%;
    height: auto;
    /* 左記がないと、同じ比率で拡大しない*/
}

.img_80per {
    max-width: 80%;
    height: auto;
    /* 左記がないと、同じ比率で拡大しない*/
}

.img_85per {
    max-width: 85%;
    height: auto;
    /* 左記がないと、同じ比率で拡大しない*/
}

.img_90per {
    max-width: 90%;
    height: auto;
    /* 左記がないと、同じ比率で拡大しない*/
}

.i100 {
    max-width: 100%;
    /* 画面をはみ出る場合のみ100％に拡大する*/
    height: auto;
    /* 左記がないと、同じ比率で拡大しない*/
}

.img_100per {
    max-width: 100%;
    /* 画面をはみ出る場合のみ100％に拡大する*/
    height: auto;
    /* 左記がないと、同じ比率で拡大しない*/
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/*  ここから会計ソフト比較ページ  */


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/* 会計ページのtableの設定 余白なし  */


/* ※IEだと太線になってしまうので border-spacing: 0px;border-collapse: collapse; はとった  */

.KaikeiSoft_Table {
    border-style: none none none none;
}

.BorderKakomi_Red {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 4px;
    padding: 0.5px 0.5px;
    background: #f5f5f5;
    /* ボタンの枠  色を変更するときは要修正 border: solid 1px #fe9600;  */
    border-color: #fe9600;
    /* 枠の色  */
    border-style: double;
    /* 枠の種類  */
}


/* 会計ページのソフト名の背景  */


/* 個人  */

.KaikeiSoft_K {
    font-weight: bold;
    color: #ff4500;
    font-size: 16px;
    font-size: 1.6rem;
    vertical-align: middle;
    /* vertical-align:top; 上位置を揃える */
}


/* 会計ページのソフト名の背景  */


/* 法人 */

.KaikeiSoft_H {
    font-weight: bold;
    color: #4e8c00;
    font-size: 16px;
    font-size: 1.6rem;
    vertical-align: middle;
    /* vertical-align:top;  上位置を揃える */
}

.HojinSoft_SoftName_Font {
    font-size: 12px;
    font-size: 1.2rem;
}

.HojinSoft_SoftKankaku {
    display: inline;
}


/* 会計ページのWindowsやパッケージなどの背景  */


/* 個人  */

.KaikeiYouso_K {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 4px;
    padding: 0.5px 0.5px;
    color: #616161;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #fbdcb7;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fff8f4), to(#ffeadd));
    background: -moz-linear-gradient(top, #fff8f4, #ffeadd);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fff8f4', endColorstr='#ffeadd');
    background: linear-gradient(to bottom, #fff8f4, #ffeadd);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 12px;
    /* フォントサイズだけ、スマホ利用時にスマホCSSで変更している  */
    font-size: 1.2rem;
    font-weight: normal;
}

.KaikeiYouso_H {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 4px;
    padding: 0.5px 0.5px;
    color: #616161;
    /* フォントの色 */
    background: #abff44;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #88ff88;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#f5ffec), to(#e6ffce));
    background: -moz-linear-gradient(top, #f5ffec, #e6ffce);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f5ffec', endColorstr='#e6ffce');
    background: linear-gradient(to bottom, #f5ffec, #e6ffce);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 12px;
    /* フォントサイズだけ、スマホ利用時にスマホCSSで変更している  */
    font-size: 1.2rem;
    font-weight: normal;
}

.KaikeiYouso_ {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 4px;
    padding: 0.5px 0.5px;
    color: #616161;
    /* フォントの色 */
    background: #616161;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #616161;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: normal;
}

.KaikeiComent {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 8px;
    padding: 0.5px 0.5px;
    background: #ffffe8;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #ff874d;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: normal;
}

.KaikeiSoftPoint {
    font-weight: bold;
    color: #ec0000;
    background-color: #fef3b3;
}


/* ページ内の下詳細ボタン  */


/* 個人  */

A.syousaibutton_big {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    /* 角の丸み */
    border-top-left-radius: 3px;
    /* 左下 */
    border-top-right-radius: 3px;
    /* 右下 */
    border-bottom-left-radius: 30px;
    /* 左下 */
    border-bottom-right-radius: 30px;
    /* 右下 */
    border-top-left-radius: 3rem;
    /* 左下 */
    border-top-right-radius: 3rem;
    /* 右下 */
    border-bottom-left-radius: 30rem;
    /* 左下 */
    border-bottom-right-radius: 30rem;
    /* 右下 */
    /* -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;
}

A.syousaibutton_big:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* ページ内の下詳細ボタン  */


/* 個人  */

A.syousaibutton_small {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    /* 角の丸み */
    border-top-left-radius: 3px;
    /* 左下 */
    border-top-right-radius: 3px;
    /* 右下 */
    border-bottom-left-radius: 30px;
    /* 左下 */
    border-bottom-right-radius: 30px;
    /* 右下 */
    border-top-left-radius: 3rem;
    /* 左下 */
    border-top-right-radius: 3rem;
    /* 右下 */
    border-bottom-left-radius: 30rem;
    /* 左下 */
    border-bottom-right-radius: 30rem;
    /* 右下 */
    /* -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: bold;
}

A.syousaibutton_small:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}

.KaikeiButton_Yohaku {
    width: 30px;
}


/* 会計ページの外部リンクのボタン小さい　【注意】KaikeiButtonはAタグに設定、KaikeiCmdはdiv要素に設定する。両方の内容は同じ */


/* 個人  ※スマホのフォントサイズは、HTMLに記述しているJABA関数ComentVisibleで切り替えている */

A.KaikeiButton_S_K {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    /* 角の丸み */
    /* -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    /* 【注意】font-sizeは、JavascriptのComentVisibleで設定している。ここで設定しても意味がない */
    font-weight: bold;
    padding: 1px 15px;
    /*  詳細ボタン等の余白　上下→左右の順 ※スマホは、hpbsite_new_sumahoで別定義している。そうしないとボタンが画面幅はみ出してしまう*/
}

A.KaikeiButton_S_K:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 法人 　【注意】KaikeiButtonはAタグに設定、KaikeiCmdはdiv要素に設定する。両方の内容は同じ ※スマホのフォントサイズは、HTMLに記述しているJABA関数ComentVisibleで切り替えている*/

A.KaikeiButton_S_H {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    /* フォントの色 */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    /* 角の丸み */
    /* -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #5da900;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#abd082), to(#5da900));
    background: -moz-linear-gradient(top, #abd082, #5da900);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#abd082', endColorstr='#5da900');
    background: linear-gradient(to bottom, #abd082, #5da900);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    /* 【注意】font-sizeは、JavascriptのComentVisibleで設定している。ここで設定しても意味がない */
    font-weight: bold;
    padding: 1px 15px;
    /*  詳細ボタン等の余白　上下→左右の順 ※スマホは、hpbsite_new_sumahoで別定義している。そうしないとボタンが画面幅はみ出してしまう*/
}

A.KaikeiButton_S_H:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 会計ページの▼ボタン ※KaikeiButtonとは、paddingだけ異なる*/


/* 個人  ※スマホのフォントサイズは、HTMLに記述しているJABA関数ComentVisibleで切り替えている*/

A.SankakuButton_S_K {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: top;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    /* 角の丸み */
    /* -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    /* 【注意】font-sizeは、JavascriptのComentVisibleで設定している。ここで設定しても意味がない */
    font-weight: bold;
    padding: 0px 0px;
    /*  ※KaikeiButtonとは、paddingだけ異なる */
    vertical-align: top;
}

A.SankakuButton_S_K:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 会計ページの▼ボタン ※KaikeiButtonとは、paddingだけ異なる*/

A.SankakuButton_S_H {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    /* フォントの色 */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    /* 角の丸み */
    /* -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #5da900;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#abd082), to(#5da900));
    background: -moz-linear-gradient(top, #abd082, #5da900);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#abd082', endColorstr='#5da900');
    background: linear-gradient(to bottom, #abd082, #5da900);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    /* 【注意】font-sizeは、JavascriptのComentVisibleで設定している。ここで設定しても意味がない */
    font-weight: bold;
    padding: 0px 0px;
    /*  ※KaikeiButtonとは、paddingだけ異なる */
}

A.SankakuButton_S_H:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 公式サイトへのリンク　【注意】KaikeiButtonはAタグに設定、KaikeiCmdはdiv要素に設定する。両方の内容は同じ */


/* 個人  ※スマホのフォントサイズは、HTMLに記述しているJABA関数ComentVisibleで切り替えている*/


/* 【現在利用なし】使うときはstopを外す */

A.stopKaikeiButton_HP_K {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.2em;
    /* 角の丸み */
    /* -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* box-shadow: 0 1px 2px rgba(0,0,0,.2); */
    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
}


/* 【現在利用なし】使うときはstopを外す */

A.stopKaikeiButton_HP_K:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 公式サイトへのリンク　法人 　【注意】KaikeiButtonはAタグに設定、KaikeiCmdはdiv要素に設定する。両方の内容は同じ ※スマホは、hpbsite_sumaho.cssで別定義している*/


/* 【現在利用なし】使うときはstopを外す */

A.stopKaikeiButton_HP_H {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    /* フォントの色 */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.2em;
    /* 角の丸み */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #5da900;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#abd082), to(#5da900));
    background: -moz-linear-gradient(top, #abd082, #5da900);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#abd082', endColorstr='#5da900');
    background: linear-gradient(to bottom, #abd082, #5da900);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
}


/* 【現在利用なし】使うときはstopを外す */

A.stopKaikeiButton_HP_H:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 戻るボタン */

A.KaikeiButton_Back {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    /* フォントの色 */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
    /* 角の丸み */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #ff0000;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#ff6428), to(#ff0000));
    background: -moz-linear-gradient(top, #ff6428, #ff0000);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff6428', endColorstr='#ff0000');
    background: linear-gradient(to bottom, #ff6428, #ff0000);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-weight: bold;
}

A.KaikeiButton_Back:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 会計ページの外部リンクのボタン大きい→【注意】Aタグに設定する。こうすればボタン余白からもリンク開ける  */


/* 個人  */


/*http://mk2012.main.jp/blog/code/2012/01/css3.html */

A.KaikeiButton_Big_K {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    /* フォントの色 */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    font-size: 18px;
    font-size: 1.8rem;
    padding: 5px 0px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    /* 角の丸み */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-weight: bold;
}

A.KaikeiButton_Big_K:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 法人 */

A.KaikeiButton_Big_H {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    /* フォントの色 */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    font-size: 18px;
    font-size: 1.8rem;
    padding: 5px 0px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    /* 角の丸み */
    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #5da900;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#abd082), to(#5da900));
    background: -moz-linear-gradient(top, #abd082, #5da900);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#abd082', endColorstr='#5da900');
    background: linear-gradient(to bottom, #abd082, #5da900);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-weight: bold;
}

A.KaikeiButton_Big_H:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 会計ページの外部リンクのボタン小さい　【注意】KaikeiButtonはAタグに設定、KaikeiCmdはdiv要素に設定する。両方の内容は同じ  */


/* 個人  */

.KaikeiCmd_S_K a {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    border-radius: 0.5em;
    /* 角の丸み */
    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    /* 【注意】font-sizeは、JavascriptのComentVisibleで設定している。ここで設定しても意味がない */
    font-weight: bold;
    padding: 1px 15px;
    /*  詳細ボタン等の余白　上下→左右の順 ※スマホは、hpbsite_new_sumahoで別定義している。そうしないとボタンが画面幅はみ出してしまう*/
}

.KaikeiCmd_S_K:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 法人 　【注意】KaikeiButtonはAタグに設定、KaikeiCmdはdiv要素に設定する。両方の内容は同じ */

.KaikeiCmd_S_H a {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    /* フォントの色 */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    /* 角の丸み */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #5da900;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#abd082), to(#5da900));
    background: -moz-linear-gradient(top, #abd082, #5da900);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#abd082', endColorstr='#5da900');
    background: linear-gradient(to bottom, #abd082, #5da900);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    /* 【注意】font-sizeは、JavascriptのComentVisibleで設定している。ここで設定しても意味がない */
    font-weight: bold;
    padding: 1px 15px;
    /*  詳細ボタン等の余白　上下→左右の順 ※スマホは、hpbsite_new_sumahoで別定義している。そうしないとボタンが画面幅はみ出してしまう*/
}

.KaikeiCmd_S_H:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 個人 　【注意】KaikeiButtonはAタグに設定、KaikeiCmdはdiv要素に設定する。両方の内容は同じ */

.KaikeiCmd_Big_K a {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    /* フォントの色 */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    font-size: 18px;
    font-size: 1.8rem;
    padding: 5px 0px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    /* 角の丸み */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-weight: bold;
}

.KaikeiCmd_Big_K:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 法人  　【注意】KaikeiButtonはAタグに設定、KaikeiCmdはdiv要素に設定する。両方の内容は同じ */

.KaikeiCmd_Big_H a {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    /* フォントの色 */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    font-size: 18px;
    font-size: 1.8rem;
    padding: 5px 0px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    /* 角の丸み */
    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #5da900;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#abd082), to(#5da900));
    background: -moz-linear-gradient(top, #abd082, #5da900);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#abd082', endColorstr='#5da900');
    background: linear-gradient(to bottom, #abd082, #5da900);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-weight: bold;
}

.KaikeiCmd_Big_H:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 公式サイトへのリンク　【注意】KaikeiButtonはAタグに設定、KaikeiCmdはdiv要素に設定する。両方の内容は同じ */

.kousikilink20 a {
    display: block;
    width: 20%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.2em;
    /* 角の丸み */
    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
}

.kousikilink40 a {
    
    display: block;
    width: 40%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;


    /* 角の丸み */
    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
}

.kousikilink60 a {
    /* display: block; */
    /* width: 60%; */
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    
    
    /* display: inline-block;*/

    
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);


    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    /* 角の丸み */


    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;

    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #cb8812;


    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#e39713), to(#f47a20));
    background: -moz-linear-gradient(top, #e39713, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e39713', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #e39713, #f47a20);

    opacity: 0.9;


    
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    
    display: inline-block;
    /* width: 30%; *//* 【注意】Widthをここで設定すると、xx比較表のプラン別でボタンが高くなってしまうのでダメ*/
    height: 100%;
    margin-left: 1%;
    margin-right: 1%;
    /* display: inline-block;*/



    padding-left: 1.2em;
    /* 文字全体を右へ */
    padding-right: 1.2em;
    /* 文字全体を右へ */
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
}
.shousai60 a {

    /* display: block; */
	/* width: 60%; */
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #939393;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    
    /* text-shadow: 0 1px 1px rgba(0, 0, 0, .1); */
    border-radius: 0.5rem;

    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    
    /* 角の丸み */
    color: #7A7A7A;
    /* フォントの色 */
    background: #f78d1d;
    
    
    
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #C6C6C6;
    
    
    
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#eeeeee));
    background: -moz-linear-gradient(top, #eeeeee, #eeeeee);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee');
    background: linear-gradient(to bottom, #eeeeee, #eeeeee);
    
    opacity: 0.9;
    
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 14px;
    font-size: 1.4Rem;
    font-weight: bold;
    
    display: inline-block;
    /* width: 20%; *//* 【注意】Widthをここで設定すると、xx比較表のプラン別でボタンが高くなってしまうのでダメ*/
    height: 100%;
    margin-left: 1%;
    margin-right: 1%;

    /* display: inline-block;*/
	padding-left: 1.2em;    /* 文字全体を右へ */
	padding-right: 1.2em;    /* 文字全体を右へ */
    
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
}

.kobetu_w30 a {
    width: 30%;
}
.kobetu_kousikiLink a {

        /* display: block; */
    /* width: 60%; */
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    /* text-shadow: 0 1px 1px rgba(0, 0, 0, .1); */
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.2em;
    /* 角の丸み */
    color:  #3366ff;
    /* border-bottom: solid 1px #3366ff; */
    /* フォントの色 */
    /* ボタンの枠  色を変更するときは要修正 */
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    /*
    border: solid 1px #c6c6c6;
    background: #f78d1d;
    background: -webkit-gradient( linear, left top, left bottom, from(#eeeeee), to(#eeeeee));
    background: -moz-linear-gradient(top, #eeeeee, #eeeeee);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee');
    background: linear-gradient(to bottom, #eeeeee, #eeeeee);
    opacity: 0.9;
    */

    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-block;
    padding-left: 1.2em;
    /* 文字全体を右へ */
    padding-right: 1.2em;
    /* 文字全体を右へ */
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
}

table.kobetu_kousikibutton a {

    
    display: inline-block;

    font-size: 20px ;
    font-size: 2.0rem;
    /* スマホのRem指定 ※スマホの通常フォントは1.4Remにしているので、小さめはこれ以下、大き目はこれ以上  */
    line-height: 2;
    /* 行間 1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。行間は単位はつけないことをおススメ*/
    padding: 3px 30px;
    /* セル内余白 PCとスマホで、Paddingは切り替えている*/

}

/* 個人  ※スマホは、hpbsite_sumaho.cssで別定義している*/


/* 【現在利用なし】使うときはstopを外す */

.stopKaikeiCmd_HP_K a {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.2em;
    /* 角の丸み */
    color: #fef4e9;
    /* フォントの色 */
    background: #f78d1d;
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
}


/* 【現在利用なし】使うときはstopを外す */

.stopKaikeiCmd_HP_K:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 公式サイトへのリンク　法人 　【注意】KaikeiButtonはAタグに設定、KaikeiCmdはdiv要素に設定する。両方の内容は同じ ※スマホは、hpbsite_sumaho.cssで別定義している*/


/* 【現在利用なし】使うときはstopを外す */

.stopKaikeiCmd_HP_H a {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    /* フォントの色 */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.2em;
    /* 角の丸み */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #5da900;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#abd082), to(#5da900));
    background: -moz-linear-gradient(top, #abd082, #5da900);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#abd082', endColorstr='#5da900');
    background: linear-gradient(to bottom, #abd082, #5da900);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
}


/* 【現在利用なし】使うときはstopを外す */

.stopKaikeiCmd_HP_H:hover {
    opacity: 0.7;
    /* ボタンの透過 */
}


/* 【現在利用なし】会計ページの◎背景 ※ぼかしはしていない。印刷すると枠だけ印刷されるため  */

.KaikeiBokashiNijyuumaru {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 5px;
    /* 角の丸み */
    background-color: #ffd9d9;
    font-size: 26px;
    color: #ec0000;
    /* フォントの色 */
}


/* HojinSoftのソフトレビューのおすすめ文 のCSS */

.Osusume {
    font-weight: bold;
    color: #ec0000;
    /* background-color : #fef3b3; */
    background-color: #fef3b3;
    background-color: #ffeeee;
    border-radius: 5px;
    /* 角の丸み */
    border: 1px solid #ffeeee;
    /* border: 1px solid #ff7575; */
    /* border-radius:5px;   角の丸み */
}


/*
.Osusume:before {
    content: "◎";
    color: #ff0000;
}
*/


/* 『良い』 [良い] 【良い】*/


/* content:url(https://keiripoint.com/image/ecalic039-png/ecalic010_025.gif); */


/* HojinSoftのこんな方におすすめ のCSS */

.Osusume2 {
    position: relative;
    /* beforeとafterで位置指定するときは、相対位置にする */
    /* border-left: 5px solid #ff0000; */
    border-bottom: 2px solid #ff0000;
    border-bottom: 0.2rem solid #ff0000;
    padding: 2px;
    padding: 0.2rem;
    /* background-color : #f5f5f5;*/
    background-repeat: repeat-x;
    background-position: top;
    padding: 5px;
    padding: 0.5rem;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
    /* margin:0px 0px 5px 0px;margin:0rem 0rem 0.5rem 0rem; */
    /* margin-top : 0.1em; margin-bottom : 1em; */
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ec0000;
    /* 2文字目から字下げインデント */
    padding-left: 6em;
    /* 文字全体を右へ */
    text-indent: -6em;
    /* 1行目だけ左へ */
}

.Osusume_No {
    font-weight: bold;
    /* background-color : #fef3b3; */
    background-color: #e1e1e1;
    border: 1px dashed #e1e1e1;
}

.tokucyou {
    /*

    border-radius: 5px;
    border: 1px solid #D3D3D3;

     */
    /* 角の丸み */
    /* border-top: 1px dashed #D3D3D3; */
}

.akamaru {
    background-color: #ffb5b5;
    border-radius: 5px;
    /* 角の丸み */
    border: 3px solid #999999;
}

.aomaru {
    background-color: #4ed2fe;
    border-radius: 5px;
    /* 角の丸み */
    border: 3px solid #999999;
}

.orangemaru {
    background-color: #ffcb97;
    border-radius: 5px;
    /* 角の丸み */
    border: 3px solid #999999;
}

.akafont {
    background-color: #ff0000;
    border-radius: 5px;
    /* 角の丸み */
    border: 1px solid #ff9595;
    color: #ffffff;
    /* フォントの色 */
}


/* 会計ページの優れている機能の背景 ※ぼかしはしていない。印刷すると枠だけ印刷されるため  */

span.ok,
span.Ok {
    background-color: #ffd9d9;
    background-color: #ffeeee;
    border-radius: 5px;
    /* 角の丸み
    /* border: 1px solid #ff9595; */
    border: 1px solid #ffe2e2;
    /* 薄いピンク */
    color: #ec0000;
    /* フォントの色 */
}

th.ok,
th.Ok,
td.ok,
td.ok {
    background-color: #ffd9d9;
    background-color: #ffeeee;
    border-radius: 5px;
    /* 角の丸み
    /* border: 1px solid #ff9595; */
    /* border: 1px solid #ff9595; 濃い目のピンク */
    color: #ec0000;
    /* フォントの色 */
}


/* 会計ページのダメ機能の背景 ※ぼかしはしていない。印刷すると枠だけ印刷されるため */

.ng,
.Ng {
    background-color: #c8c8c8;
    background-color: #e1e1e1;
    background-color: #ededed;
    /* border: 1px dashed #7f7f7f; */
}

.kaikeimidasi {
    font-size: 42px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 4.2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.verygood {
    font-size: 20px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
    color: #ff0000;
    /* フォントの色 */
    font-weight: bold;
}

.good {
    font-size: 18px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.8rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
    color: #ff0000;
    /* フォントの色 */
}

.sankaku {
    font-size: 18px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.8rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}

.batu {
    font-size: 18px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.8rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}


/* 会計ページの総合ランクの根拠セル */

.kaikeirankriyuu {
    /* padding-left: 1em; */
    /* text-indent: -1em; */
}


/* 会計ページの凡例-各ソフトの表のタイトルのイメージ */

.KaikeiPointTitle_K {
    background-color: #fff8f4;
    border: 1px solid #cbcbb1;
}


/* 会計ページの凡例-各ソフトの表のタイトルのイメージ */

.KaikeiPointTitle_H {
    background-color: #f5ffec;
    border: 1px solid #cbcbb1;
}


/* 会計ページの凡例-各ソフトの表のタイトルのイメージ */

.KaikeiPointTitle {
    border: 1px solid #cbcbb1;
}


/* 会計ページのソフト名囲み ※ぼかしはしていない。印刷すると枠だけ印刷されるため */

.KaikeiSoftKakomi {
    border-radius: 5px;
    /* 角の丸み */
    border: 1px solid #cbcbb1;
}


/*HojinSoftページ比較表のタイトルセル（人気、費用など）  */

a.PointCell {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
}

a.PointCell:hover {
    opacity: 0.6;
    /* ボタンの透過 */
}


/* 会計ページの「このページの内容」 */

.KaikeiThisPage {
    background-color: #ff0000;
    border: 1px solid #ff0000;
    color: #ffffff;
    /* フォントの色 */
}

.isogi {
    /* color : #ffffff;フォントの色 */
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    /* ボタンの枠  色を変更するときは要修正 */
    border-bottom: solid 1px #ff0000;
    font-weight: bold;
}

.kokuzei {
    color: #ffffff;
    /*フォントの色 */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #002c6d;
    background-color: #002c6d;
    padding: 0px 3px;
    /* 余白　上下→左右 */
}

.zuno {
    color: #ffffff;
    /* フォントの色 */
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #ff5353;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#ff6428), to(#ff7d7d));
    background: -moz-linear-gradient(top, #ff6428, #ff7d7d);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff6428', endColorstr='#ff7d7d');
    background: linear-gradient(to bottom, #ff6428, #ff7d7d);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    background-color: #ff7d7d;
    font-weight: bold;
    padding: 0px 5px;
    /* 余白　上下→左右 */
}

.no {
    border-radius: 50%;
    /* 丸 */
    color: #ffffff;
    /* フォントの色 */
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #ff5353;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#f74343), to(#fa5050));
    background: -moz-linear-gradient(top, #f74343, #fa5050);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f74343', endColorstr='#fa5050');
    background: linear-gradient(to bottom, #f74343, #fa5050);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    background-color: #fa5050;
    font-weight: bold;
    padding: 0px 5px;
    /* 余白　上下→左右 */
}

.zuwaku2 {
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 3px #ff5353;
    border-radius: 3px;
    /* 角の丸み */
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    font-weight: bold;
    padding: 0px 3px 0px 3px;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定すると文字位置指定できる */
}

.zuwaku {
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 3px #ff5353;
    font-size: 11px;
    font-size: 1.1rem;
}


/* 全行を1文字下げ  【注意】IE8はずれるが未対応。*/

.indentall_1 {
    padding-left: 1em;
    /* 文字全体を右へ */
}

.indentall_2 {
    padding-left: 2em;
    /* 文字全体を右へ */
}

.indentall_3 {
    padding-left: 3em;
    /* 文字全体を右へ */
}

.indentall_4 {
    padding-left: 4em;
    /* 文字全体を右へ */
}

.indentall_5 {
    padding-left: 5em;
    /* 文字全体を右へ */
}


/* 全行を1文字下げ  【注意】IE8はずれるが未対応。*/

.indentallspan_1 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 1em;
    /* 文字全体を右へ */
}

.indentallspan_2 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 2em;
    /* 文字全体を右へ */
}

.indentallspan_3 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 3em;
    /* 文字全体を右へ */
}

.indentallspan_4 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 4em;
}

.indentallspan_5 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 5em;
}


/* 2行目以降を1文字下げ 【注意】IE8はずれるが未対応。*/

.indent_1 {
    padding-left: 1em;
    /* 文字全体を右へ */
    text-indent: -1em;
    /* 1行目だけ左へ */
}

.indent_2 {
    padding-left: 2em;
    /* 文字全体を右へ */
    text-indent: -2em;
    /* 1行目だけ左へ */
}

.indent_3 {
    padding-left: 3em;
    /* 文字全体を右へ */
    text-indent: -3em;
    /* 1行目だけ左へ */
}

.indent_4 {
    padding-left: 4em;
    /* 文字全体を右へ */
    text-indent: -4em;
    /* 1行目だけ左へ */
}

.indent_5 {
    padding-left: 5em;
    /* 文字全体を右へ */
    text-indent: -5em;
    /* 1行目だけ左へ */
}

.indent_6 {
    padding-left: 6em;
    /* 文字全体を右へ */
    text-indent: -6em;
    /* 1行目だけ左へ */
}

.indent_7 {
    padding-left: 7em;
    /* 文字全体を右へ */
    text-indent: -7em;
    /* 1行目だけ左へ */
}

.indent_8 {
    padding-left: 9em;
    /* 文字全体を右へ */
    text-indent: -9em;
    /* 1行目だけ左へ */
}

.indent_9 {
    padding-left: 9em;
    text-indent: -9em;
}

.indent_10 {
    padding-left: 9em;
    text-indent: -9em;
}

.indent_15 {
    padding-left: 15em;
    /* 文字全体を右へ */
    text-indent: -15em;
    /* 1行目だけ左へ */
}


/* 2行目以降を1文字下げ  【注意】IE8はずれるが未対応。*/

.indentspan_1 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 1em;
    /* 文字全体を右へ */
    text-indent: -1em;
    /* 1行目だけ左へ */
}

.indentspan_2 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 2em;
    /* 文字全体を右へ */
    text-indent: -2em;
    /* 1行目だけ左へ */
}

.indentspan_3 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 3em;
    /* 文字全体を右へ */
    text-indent: -3em;
    /* 1行目だけ左へ */
}

.indentspan_4 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 4em;
    /* 文字全体を右へ */
    text-indent: -4em;
    /* 1行目だけ左へ */
}

.indentspan_5 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 5em;
    text-indent: -5em;
}

.indentspan_6 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 6em;
    text-indent: -6em;
}

.indentspan_7 {
    display: block;
    /*<span>などのインライン要素をプロックレベル要素にする */
    padding-left: 7em;
    text-indent: -7em;
}

span.s_nokaigyou {
    white-space: nowrap;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/*  pagetopボタン  */


/*  http://www.nxworld.net/tips/page-top-appears-scroll.html  */


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/* ■■■■■■■■■■■■■■■■■■■■■■■ */


/*  全ページの右下に表示される「▲」ボタン  */


/*  スマホ時は、CSSで再定義している  */


/* ■■■■■■■■■■■■■■■■■■■■■■■ */

.pagetop {
    display: none;
    position: fixed;
    bottom: 3px;
    right: 8px;
    padding: 2px;
    padding: 0.2rem;
}

.pagetop a {
    display: block;
    width: 40px;
    width: 4rem;
    height: 40px;
    height: 4rem;
    line-height: 40px;
    line-height: 4rem;
    /* border-radius: 50px; */
    background-color: #333;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-size: 1.8rem;
    text-decoration: none;
    opacity: 0.75;
    /* 透過 */
}

.pagetop:hover {
    opacity: 0.65;
    /* 透過 */
}


/* ■■■■■■■■■■■■■■■■■■■■■■■ */


/*  Hojinsoftページの右下に表示される「ランキングトップ」ボタン  */


/*  スマホは、邪魔になるので「hpbsite_sumaho.css」で非表示にしている  */


/* ■■■■■■■■■■■■■■■■■■■■■■■ */


/* 下から1番目のボタンは、ページ先頭へボタン */


/* 下から2番目のボタン */

.pagetop2 {
    /* display: none; */
    position: fixed;
    bottom: 60px;
    right: 8px;
    padding: 2px;
    padding: 0.2rem;
}


/* 下から3番目のボタン */

.pagetop3 {
    /* display: none; */
    position: fixed;
    bottom: 100px;
    right: 8px;
    padding: 2px;
    padding: 0.2rem;
}


/* 下から4番目のボタン */

.pagetop4 {
    /* display: none; */
    position: fixed;
    bottom: 140px;
    right: 8px;
    padding: 2px;
    padding: 0.2rem;
}


/* 下から5番目のボタン */

.pagetop5 {
    /* display: none; */
    position: fixed;
    bottom: 180px;
    right: 8px;
    padding: 2px;
    padding: 0.2rem;
}


/* 下から6番目のボタン */

.pagetop6 {
    /* display: none; */
    position: fixed;
    bottom: 220px;
    right: 8px;
    padding: 2px;
    padding: 0.2rem;
}


/* 下から2番目〜6番目のボタンのaタグ　　スマホは、スマホ用CSSで非表示にしている */

.pagetop2 a,
.pagetop3 a,
.pagetop4 a,
.pagetop5 a,
.pagetop6 a {
    display: block;
    width: 40px;
    width: 4rem;
    height: 40px;
    height: 4rem;
    line-height: 40px;
    line-height: 4rem;
    /* border-radius: 40px; */
    font-size: 12px;
    font-size: 1.2rem;
    background-color: #4d4d4d;
    border: solid 1px #3c3c3c;
    /*  */
    text-align: center;
    color: #fff;
    text-decoration: none;
    opacity: 0.75;
    /* 透過 */
}


/* 下から7番目のボタン */

.pagetop7 {
    /* display: none; */
    position: fixed;
    bottom: 265px;
    right: 8px;
    padding: 2px;
    padding: 0.2rem;
}

.pagetop7 a {
    display: block;
    width: 40px;
    width: 4rem;
    height: 40px;
    height: 4rem;
    background-color: #333;
    border: solid 1px #000000;
    text-align: center;
    color: #fff;
    font-size: 10px;
    font-size: 1rem;
    text-decoration: none;
    line-height: 40px;
    line-height: 4rem;
    opacity: 0.75;
    /* 透過 */
}

.pagetop2:hover,
.pagetop3:hover,
.pagetop4:hover,
.pagetop5:hover,
.pagetop6:hover,
.pagetop7:hover {
    opacity: 0.65;
    /* 透過 */
}


/* ■■■■■■■■■■■■■■■■■■■■■■■ */


/*  サイドメニューの右下に表示される「▲」ボタン  */


/* ■■■■■■■■■■■■■■■■■■■■■■■ */

.menutop {
    position: relative;
    bottom: 45px;
    /* 相対的に上に移動 */
    left: 3px;
    /* 相対的に左に移動 */
    /* right: 3px; */
    /* padding:2px;padding:0.2rem; */
}

.menutop a {
    display: block;
    width: 25px;
    height: 25px;
    background-color: #333;
    border-radius: 25px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    line-height: 25px;
    opacity: 0.75;
    /* 透過 */
}

.menutop:hover {
    opacity: 0.65;
    /* 透過 */
}

A.menutop1 {
    display: block;
    width: 100%;
    height: 100%;
    /* ★ブロック化  */
    text-decoration: none;
    /* 下線なし */
    /* リンクの下線を消す Aタグにクラスを設定すればよい */
    color: #ffffff;
    /* フォントの色 */
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    font-size: 18px;
    font-size: 1.8rem;
    background-color: #333;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-size: 1.2rem;
    text-decoration: none;
    opacity: 0.75;
    /* 透過 */
}

A.menutop1:hover {
    opacity: 0.65;
    /* 透過 */
    background: #000000;
    /* 背景色 */
}

.printlink a {
    background: #4d4d4d;
    /* 背景色 */
    color: #fff;
    /* フォント色 */
    font-size: 10px;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    width: 50px;
    width: 5rem;
    height: 50px;
    height: 5rem;
    line-height: 50px;
    line-height: 5rem;
    padding: 2px;
    position: fixed;
    top: 5px;
    right: 3px;
    opacity: 0.75;
    /* 透過 */
    border: 1px solid #4d4d4d;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
}

.printlink:hover {
    opacity: 0.65;
    /* 透過 */
}

.downlink a {
    background: #4d4d4d;
    /* 背景色 */
    color: #fff;
    /* フォント色 */
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    width: 17px;
    width: 1.7rem;
    padding: 2px;
    position: fixed;
    top: 10px;
    left: 5px;
    opacity: 0.5;
    /* 透過 */
    /* font-weight : bold; */
    border-top-left-radius: 5px;
    /* 左下 */
    border-top-right-radius: 5px;
    /* 右下 */
    border-bottom-left-radius: 5px;
    /* 左下 */
    border-bottom-right-radius: 5px;
    /* 右下 */
    border-top-left-radius: 0rem;
    /* 左下 */
    border-top-right-radius: 1rem;
    /* 右下 */
    border-bottom-left-radius: 0rem;
    /* 左下 */
    border-bottom-right-radius: 1rem;
    /* 右下 */
}

.downlink:hover {
    opacity: 0.65;
    /* 透過 */
    background: #000000;
    /* 背景色 */
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/*  サイトポリシーテスト　現在は使っていない  */


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/* ヘッダー  */

#header {
    height: 129px;
    width: 100%;
}


/* メイン（本文＋サイドメニュー部分）の外枠  */


/* ■■■以下でHeightを指定しないと画像が表示されない問題がある。  */


/* ■■■以下で画像表示にする場合は、レイアウトを固定しなければならない。  */

#outlinebg {
    /* height: 1290px; */
    width: 1140px;
    margin: 0px auto;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
    /* background: url(../image/xOutlinebg.gif) repeat-y; */
}


/* メイン（本文＋サイドメニュー部分）  */

.mainside {
    width: 950px;
    text-align: left;
    margin: 0px auto;
    /* 中央へ */
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
    /* word-spacing: 0.5em; */
    /* overflow:hidden; 余分なpaddingなどを消去 */
}


/* 本文  */

#main {
    width: 700px;
    float: left;
    margin: 0px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
}


/* サイドメニュー  */

#side {
    width: 250px;
    float: right;
    margin: 0px;
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
}


/* ヘッダー  */

#footer {
    /* 【注意】BODYのmarginを0にしないとフッターが画面いっぱいに広がらない */
    width: 100%;
    /* margin: 0px; */
    background: #eeeeee;
}


/* フッターのメニュー一覧 */

.footer_font {
    font-size: 14px;
}

.footer_font a {
    font-size: 14px;
    color: #2424ff;
    text-decoration: none;
    /* 下線なし */
}

.outer_main {
    text-align: left;
    margin: 0px auto;
    /* 中央へ */
    /* margin：全体(文字･背景)を移動  padding：文字だけ移動 */
    /* word-spacing: 0.5em; */
    /* overflow:hidden; 余分なpaddingなどを消去 */
}

.inner_main_side300px {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.inner_main_side300px>div:nth-of-type(1) {
    width: calc(100% - 300px);
    /* メイン幅はサイド幅300pxの残りにする */
}

.inner_main_side300px>div:nth-of-type(2) {
    width: 300px;
}

.inner_main_side270px {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.inner_main_side270px>div:nth-of-type(1) {
    width: calc(100% - 270px);
    /* メイン幅はサイド幅260pxの残りにする */
}

.inner_main_side270px>div:nth-of-type(2) {
    width: 270px;
}

.inner_main_side250px {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.inner_main_side250px>div:nth-of-type(1) {
    width: calc(100% - 250px);
    /* メイン幅はサイド幅260pxの残りにする */
}

.inner_main_side250px>div:nth-of-type(2) {
    width: 250px;
}


/* 07.リボン型の見出し（切りっぱなし）
.heading07{
	position:relative;
	padding:0px;
	background:#f45e5e;
 	color : #ffffff;
	font-weight:bold;
}
*/

.ninki {
    /* text-decoration: underline;   下線 */
    font-style: italic;
    /* 斜体 */
    /* color : #ff0000; フォントの色 */
    color: #ff0000;
    text-shadow: 2px 8px 6px #fbfb00, 0px -5px 35px #ffff00;
    font-size: 11px;
    font-size: 1.1rem;
}

.ninki_big_K {
    /* text-decoration: underline;   下線 */
    /* color : #ff0000; フォントの色 */
    /* font-style:italic; 斜体 */
    color: #ff0000;
    /*

                text-shadow:
                    0 0 10px #ff4000,
                    0 0 20px #ff4000,
                    0 0 40px #ff4000,
                    0 0 60px #ff4000,
                    0 0 80px #ff4000;


                text-shadow:
                    0 0 10px #fbfb00,
                    0 0 20px #fbfb00,
                    0 0 40px #fbfb00,
                    0 0 60px #fbfb00,
                    0 0 80px #fbfb00;

	*/
    font-size: 26px;
    font-size: 2.6rem;
    vertical-align: middle;
    text-shadow: 4px 12px 12px #fbfb00, 0px -10px 35px #ffff00;
    font-weight: bold;
}

.ninki_big_H {
    /* text-decoration: underline;   下線 */
    /* color : #ff0000; フォントの色 */
    /* font-style:italic; 斜体 */
    color: #ff0000;
    font-size: 16px;
    font-size: 1.6rem;
    vertical-align: middle;
    text-shadow: 4px 12px 12px #fbfb00, 0px -10px 35px #ffff00;
    font-weight: bold;
}

.kakisansyou {
    /* text-decoration: underline;   下線 */
    font-style: italic;
    /* 斜体 */
    /* color : #ff0000; フォントの色 */
    color: #ff0000;
    text-shadow: 2px 8px 6px #fbfb00, 0px -5px 35px #ffff00;
    font-size: 14px;
    font-size: 1.4rem;
}


/* 表示する */

.display_inline {
    display: inline;
}

.display_none {
    display: none;
}

.visible_none {
    visibility: collapse;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/*

カスタマイズしたラジオボタンとチェックボックス【チェック風】
http://webdev.jp.net/checkbox-radio-custom-css/

HTML側の記述
<div class="myradiocheck" style="margin: 0"> ←margin: 0にしないと、行間が空いてしまう
	<INPUT type="radio" name="chkfilter_k" id="radio_filter_k0" value="全て"><LABEL for="radio_filter_k0">全て</LABEL>
</div>
htmlの構成はinputの次にlabelを配置し、idとforで連動させるようにしておきます。

*/


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.myradiocheck {
    /* padding: 6px;padding: 0.6rem; */
}


/* input[type=checkbox] の属性セレクタでチェックボックスやラジオボタンを取得 */

.myradiocheck input[type=radio], .myradiocheck input[type=checkbox] {
    display: inline-block;
    margin-right: 6px;
    margin-right: 0.6rem;
}

.myradiocheck input[type=radio] + label, .myradiocheck input[type=checkbox] + label {
    position: relative;
    display: inline-block;
    margin-right: 12px;
    margin-right: 1.2rem;
    /* font-size: 14px;font-size: 1.4rem; */
    /* line-height: 30px;line-height: 3rem; */
    cursor: pointer;
}


/* css3に対応していないブラウザでは、元のinput要素がそのまま表示されるように */


/* labelにチェックボックスやラジオボタンの見た目を当てている部分を */


/* @media (min-width: 1px) {} で囲む(IE8は、メディアクエリのこの書式に対応していないのを逆に利用)。 */

@media (min-width: 1px) {
    /* CSS3に対応しているブラウザでは、display: none; でinput要素(チェックボックスやラジオボタン)を隠します。 */
    .myradiocheck input[type=radio], .myradiocheck input[type=checkbox] {
        display: none;
        margin: 0;
    }
    /* + label の隣接セレクタで、inputの隣にあるlabelを取得しlabelのほうへ任意のチェックボックスやラジオボタンの見た目を設定 */
    .myradiocheck input[type=radio] + label, .myradiocheck input[type=checkbox] + label {
        padding: 0 0 0 24px;
        padding: 0 0 0 2.4rem;
        /* 文字を右にずらす */
    }
    .myradiocheck input[type=radio] + label::before, .myradiocheck input[type=checkbox] + label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /* */
        display: block;
        width: 18px;
        width: 1.8rem;
        height: 18px;
        height: 1.8rem;
        margin-top: -9px;
        margin-top: -0.9rem;
        background: #fff;
    }
    /* チェックマークの囲み(グレー部分)やラジオの囲み(グレー部分)　→擬似要素::before、::afterをつかう */
    .myradiocheck input[type=radio] + label::before {
        border: 1px solid #a8a8a8;
        border: 0.1rem solid #a8a8a8;
        border-radius: 30px;
        border-radius: 3rem;
    }
    .myradiocheck input[type=checkbox] + label::before {
        border: 1px solid #a8a8a8;
        border: 0.1rem solid #a8a8a8;
    }
    /* input[type=checkbox]:checked の擬似クラスで、選択中の状態を取得し */
    /* その隣にあるlabelへ、選択状態のチェックボックスやラジオボタンの見た目を設定しています。     */
    .myradiocheck input[type=radio]:checked + label::after, .myradiocheck input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
        top: 50%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /* */
        display: block;
    }
    /* チェック自体やラジオの丸自体(色のついた部分) */
    .myradiocheck input[type=radio]:checked + label::after {
        left: 5px;
        left: 0.5rem;
        width: 8px;
        width: 0.8rem;
        height: 8px;
        height: 0.8rem;
        margin-top: -4px;
        margin-top: -0.4rem;
        background: #f47a20;
        /* ラジオの丸自体の色 */
        border: 1px solid #da7c0c;
        border: 0.1rem solid #da7c0c;
        /* ラジオの丸自体の囲み色(これがないと印刷したとき丸が表示されない) */
        border-radius: 8px;
        border-radius: 0.8rem;
    }
    .myradiocheck input[type=checkbox]:checked + label::after {
        left: 3px;
        left: 0.3rem;
        width: 16px;
        width: 1.6rem;
        height: 8px;
        height: 0.8rem;
        margin-top: -8px;
        margin-top: -0.8rem;
        border-left: 3px solid #f47a20;
        border-left: 0.3rem solid #f47a20;
        /* チェック自体の色 */
        border-bottom: 3px solid #f47a20;
        border-bottom: 0.3rem solid #f47a20;
        /* チェック自体の色 */
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}


LABEL {
    cursor: pointer;
    
    color: #000000;
    text-decoration: underline;
    
    
    /* 文字の縁取り	
    color: #696969 ;
	-webkit-text-stroke-width: 0.5px;
	-webkit-text-stroke-color: #000000;
	
    */


    /* 文字のぼかし
    */    
    color: #000000;
	text-shadow: 0px 0px 1.5px #696969;/*水平方向の距離 垂直方向の距離 影のぼかし半径 影の色*/
    
    
}

LABEL:hover {
    color: #0099ff;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* 【全比較ページで利用】

ラジオボタンのタブメニュー風 
https://www.pressmantech.com/tech/coding/3658




/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.tabmenu{
	position: relative;
	width: 100%;
	height: 60px;/* タブメニュー高さ調整時はここを変更 */
	font-size: 0;
}

/* チェックなしタブメニューのラジオだけに適用 */
.tabmenu input[type=radio] + em{

	position: relative;
	z-index: 100;
	display: inline-block;
	margin: 0 2px 0 8px;
	padding: 2px 0 0;
	min-width: 80px;
	-webkit-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
	background: #ddd;
	color: #000;
	text-align: center;
	
	font-style: normal;
	line-height: 50px;/* タブメニュー高さ調整時はここを変更 */
	cursor: pointer;


	font-size: 16px;

	
    color: #585858;
    text-align: center;
    padding: 1px 40px;
    
    /* 余白　上下→左右 */
    /* ボタンの枠  色を変更するときは要修正 */
    border: 1px solid #a8a8a8;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background-image: -webkit-gradient( linear, left top, left bottom, from(#f9f9f9), to(#eeeeee));
    background: -moz-linear-gradient(#f9f9f9, #eeeeee);
    text-decoration: none;

	
}
/* チェックされているタブメニューのラジオだけに適用 */
.tabmenu input[type=radio]:checked + em{

	background: #0ae;
	color: #fff;
	
	
	
	color: white;
	font-weight:bold;
  
    background: #f78d1d;
      
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);  
	
}

/* タブの中身 */
.tabmenu span{
	position: absolute;
	top: 50px;/* タブメニュー高さ調整時はここを変更 */
	left: 0;
	display: block;
	margin: 4px 0 0;
	padding: 0px;
	width: 100%;
	height: 4px;
	border: 1px solid #f47a20;
	background: #f47a20;

	-webkit-border-radius: 0 6px 6px 6px;
	border-radius: 0 6px 6px 6px;
	font-size: 1px;
}
.tabmenu input[type=radio]{
	display: none;
}

/* emはタブメニュー の下に▼を出したい場合
.tabmenu input[type="radio"]:checked + em::after {
	position: absolute;
	left: 50%;
	display: block;
	margin-left: -9px;
	border: 9px solid transparent;
	border-top: 9px solid #0ae;
	content: "";
}
*/
.tabmenu input[type="radio"] + em ~ span{
	display: none;
}
.tabmenu input[type="radio"]:checked + em ~ span{
	display: block;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* 【全比較ページで利用】

ラジオボタンのボタン風 

https://www.jaga.biz/web-dev-html-css/change-checkbox-radio/ 
HTML側は、以下の記述。class="radiobutton"　記述して、文字をSpanで囲む
<form class="radiobutton" style="font-size:16px">
    <label><input type="radio" onclick="clickevent(this,'thistable_top');" name="____shouhinplan" data-alltekiyouname="____shouhinplan"  value="shouhin"><span>商品表示</span></label>
    <label><input type="radio" onclick="clickevent(this,'thistable_top');" name="____shouhinplan" data-alltekiyouname="____shouhinplan"  value="plan"><span>プラン表示</span></label>
</form>
*/   


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* チェックボックスを消して、ラベル部分しか見えないようにするため、次のようなCSSを記述します。*/
.radiobutton label {
	position: relative;
	display: inline-block;
}

.radiobutton label input[type=radio] {
	position: absolute;
	opacity: 0;
}


/* チェックなしのラジオだけに適用　※「+」は「隣の要素」ということで、この場合チェックボックスの隣のspanということになります。 */
.radiobutton label input[type=radio] + span {
/*
	display: block;
	
	color: blue;
	border: 1px solid #cbcbb1;
	
	line-height: 2rem;
	
	
	padding: 0rem 2.5rem;

	*/
	
    display: block;
    
	/* border-radius: 0.5rem; 丸みをつける*/
    
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;

    color: #585858;
    text-align: center;
    padding: 1px 20px;
    /* 余白　上下→左右 */
    /* ボタンの枠  色を変更するときは要修正 */
    border: 1px solid #a8a8a8;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background-image: -webkit-gradient( linear, left top, left bottom, from(#f9f9f9), to(#eeeeee));
    background: -moz-linear-gradient(#f9f9f9, #eeeeee);
    text-decoration: none;

}







/* チェックされているラジオだけに適用 */
.radiobutton label input[type=radio]:checked + span {

	color: white;
	font-weight:bold;
  
    background: #f78d1d;
      
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #da7c0c;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
    background: -moz-linear-gradient(top, #fbb642, #f47a20);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
    background: linear-gradient(to bottom, #fbb642, #f47a20);  
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/*
【会計ソフト比較ページだけで利用】
カスタマイズしたラジオボタンとチェックボックス【ボタン風】
http://myspacekaizou.blog17.fc2.com/blog-entry-55.html

HTML側の記述
<ul class="myradiobutton"  style="list-style:none;"><!-- list-style:none;で、ul･li タグの左側「・」を非表示にしている -->
	<li>
		<INPUT type="radio" id="radio_visibletabe0_h" name="radio_visibletabe_h" value="0" onclick="ComentVisible('click','0')">
		<LABEL for="radio_visibletabe0_h"  style="font-weight : bold;">レビュー形式<SPAN class="Rem12px">　(比較表付)</SPAN></LABEL>
	</li>
	<li>
		<INPUT type="radio" id="radio_visibletabe1_h" name="radio_visibletabe_h"  value="1" onclick="ComentVisible('click','1')">
		<LABEL for="radio_visibletabe1_h"  style=" font-weight : bold;">比較表形式</LABEL>
	</li>
</ul>
htmlの構成はinputの次にlabelを配置し、idとforで連動させるようにしておきます。

*/


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.myradiobutton {
    display: inline-block;
    margin: 0;
    padding: 0;
    clear: both;
}


/* css3に対応していないブラウザでは、元のinput要素がそのまま表示されるように */


/* labelにチェックボックスやラジオボタンの見た目を当てている部分を */


/* @media (min-width: 1px) {} で囲む(IE8は、メディアクエリのこの書式に対応していないのを逆に利用)。 */

@media (min-width: 1px) {
    .myradiobutton li {
        float: left;
        position: relative;
        /* width: 70px; */
    }
    .myradiobutton li:hover {
        opacity: 0.8;
        /* ボタンの透過 */
    }
    .myradiobutton li input {
        height: 100%;
        width: 100%;
        opacity: 0;
        /* ラジオボタンを透明化する */
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }
    /* ラジオボタンのチェックなしのラベル　→デザインの変更はここでする */
    .myradiobutton li input+label {
        color: #585858;
        display: block;
        text-align: center;
        padding: 5px 23px;
        /* 余白　上下→左右 */
        /* ボタンの枠  色を変更するときは要修正 */
        border: 1px solid #a8a8a8;
        /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
        background-image: -webkit-gradient( linear, left top, left bottom, from(#f9f9f9), to(#eeeeee));
        background: -moz-linear-gradient(#f9f9f9, #eeeeee);
        text-decoration: none;
        /* 下線なし */
        /* リンクの下線を消す Aタグにクラスを設定すればよい */
    }
    .myradiobutton li:first-child input+label {
        border-radius: 4px 0 0 4px;
    }
    .myradiobutton li:last-child input+label {
        border-radius: 0 4px 4px 0;
        border-left: none;
    }
    .myradiobutton input[type=radio]:checked {
        cursor: auto;
        /* チェックしたらマウスポインタを矢印に戻す */
    }
    /* ラジオボタンをチェックしたときのラベル　→デザインの変更はここでする */
    .myradiobutton li input:checked+label {
        /* ボタンの枠  色を変更するときは要修正 */
        border: solid 1px #da7c0c;
        /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
        background: #f78d1d;
        background: -webkit-gradient( linear, left top, left bottom, from(#fbb642), to(#f47a20));
        background: -moz-linear-gradient(top, #fbb642, #f47a20);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbb642', endColorstr='#f47a20');
        background: linear-gradient(to bottom, #fbb642, #f47a20);
        /* IE10, Firefox 16.0+, Opera 12.50+  */
        color: #fff;
    }
}


/* SNSソーシャルボタンの横並び */


/* display:inline-block　のままだと、スマホ画面幅320のとき画面幅に収まらないので、スマホ時は、hpbsite_new_sumaho.cssで変更している */

.snsb {
    display: inline-block;
    /* 横並び */
    vertical-align: bottom;
}


/* PCではスマホHPタイトルを非表示にしておき、スマホのときはこのCSSを変更してスマホHPタイトルを表示する */

.suma_HPTitle_display {
    display: none;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


/*

ふきだし

*/


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.arrow_box {
    position: relative;
    background: #ff2b2b;
    color: #ffffff;
    padding: 1px 3px 1px 3px;
    /*［上］ と ［右］ と ［下］ と ［左］ を指定 */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    /* 角丸 */
    font-size: 12px;
    /* PCのIE8以下はpx指定　※remサポートしないためpx指定。サポートするブラウザには、次の行でremで上書き */
    font-size: 1.2rem;
    /* PCのIE9以上とスマホはRem指定　※html要素のフォントサイズ10pxが基準 */
}


/*
.arrow_box:after, .arrow_box:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(255, 43, 43, 0);
	border-right-color: #ff2b2b;
	border-width: 5px;
	margin-top: -5px;
}
.arrow_box:before {
	border-color: rgba(255, 87, 36, 0);
	border-right-color: #ff5724;
	border-width: 6px;
	margin-top: -6px;
}
*/


/* *********************************************************************** */


/* 簿記の仕訳全てに以下スタイルを設定済 */


/* *********************************************************************** */

.bokisiwake_width {
    width: 400px;
    max-width: 400px;
}


/* 表のタイトル科目部分 */

.bokikamoku_title {
    background-color: #666666;
    color: #ffffff;
    text-align: center;
}


/* 表のタイトル金額部分 */

.bokikingaku_title {
    background-color: #666666;
    color: #ffffff;
    text-align: center;
}


/* 表の科目部分 */

.bokikamoku_cell {
    text-align: center;
}


/* 表の金額部分 */

.bokikingaku_cell {
    text-align: center;
    word-break: break-all;/* kaigyou 　*/
}


/* *********************************************************************** */


/* 作業用のＣＳＳ */


/* *********************************************************************** */


/* 優先 */

.yuusen {
    outline: none;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
    /* 角の丸み */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #ff0000;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: -webkit-gradient( linear, left top, left bottom, from(#ff6428), to(#ff0000));
    background: -moz-linear-gradient(top, #ff6428, #ff0000);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff6428', endColorstr='#ff0000');
    background: linear-gradient(to bottom, #ff6428, #ff0000);
    /* IE10, Firefox 16.0+, Opera 12.50+  */
    font-weight: bold;
    font-size: 20px;
    font-size: 2rem;
    margin: 1.3;
    padding: 5px;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定 */
}


/* 優先 */

.atode {
    outline: none;
    text-align: center;
    text-decoration: none;
    /* 下線なし */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
    /* 角の丸み */
    /* ボタンの枠  色を変更するときは要修正 */
    border: solid 1px #0000ff;
    /* ボタンの背景色。上から下に色を設定する  色を変更するときは要修正 */
    background: #8080ff;
    font-weight: bold;
    font-size: 36px;
    font-size: 3.6rem;
    margin: 1.3;
    padding: 5px;
    /* ［上］ と ［右］ と ［下］ と ［左］ を指定 */
}

.aka {
    font-weight: bold;
    color: #ff0000;
    font-size: 16px;
}

.orange {
    font-weight: bold;
    color: #ee7800;
    font-size: 16px;
}


/*横スクロールしますメッセージ PCは白文字、スマホは赤文字にしている*/

.msg_softhyou_wrap {
    display: none;
}

.phpprint {
    display: none;
    background: #ffff00;
}

a.sf {
    /* font-size : 1rem  3px ;	 */
}

.yayoiS_rank0 {
    font-size: 16px;
    font-size: 1.6rem;
    display: none;
}

.yayoiS_rank1 {
    font-size: 16px;
    font-size: 1.6rem;
    display: none;
    /*

	display:none;

	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;

	white-space:nowrap;
	text-indent:0;
	overflow:visible;



*/
}

.yayoiS_rank0k {
    font-size: 16px;
    font-size: 1.6rem;
    display: none;
}

.yayoiS_rank1k {
    font-size: 16px;
    font-size: 1.6rem;
    display: none;
}

.yayoiS_rank0h {
    font-size: 16px;
    font-size: 1.6rem;
    display: none;
}

.yayoiS_rank1h {
    font-size: 16px;
    font-size: 1.6rem;
    display: none;
}


/* Table回り込み→tableを左へ */

table.left {
    float: left;
}


/* Table回り込み→tableを右へ */

table.right {
    float: right;
}


/* tableなどの要素を中央揃えなどにする 　※align="center"　はCSSでは使えない*/

.left {
    margin-right: auto;
}

.right {
    margin-left: auto;
}

.center {
    /* tableなどを中央揃えにする 　※align="center"　はCSSでは使えない*/
    margin-left: auto;
    margin-right: auto;
}


/* tableなどの要素を左寄せ（左揃え）、右寄せ（右揃え）、中央揃えなどにする 　※align="center"　はCSSでは使えない*/

.yleft {
    margin-right: auto;
}

.yright {
    margin-left: auto;
}

.ycenter {
    /* tableなどを中央揃えにする 　※align="center"　はCSSでは使えない*/
    margin-left: auto;
    margin-right: auto;
}

.scrol_leftrightbutton_fixed {
    position: fixed;
    top: 50vh;
    top: 0;
    /* height:50vh; */
    left: 300;
}


/*以下で横スクロール   スマホでも常にスクロールバーを表示　https://m.designbits.jp/15041514/　*/

.softhyou_wrap {
    overflow-x: auto;
    /* overflow: scroll; */
    /*　-webkit-overflow-scrolling:touch;  左記を指定すると慣性スクロールが実装できます。スムーズな動きでいい感じです。だが、これがあると、スマホでも常にスクロールバーを表示されなくなる */
    /* syouhizentaiページなど消費税関係ページで画像の横スクロールがきかない */
    width: 100vw;
    /* 親要素を無視して画面幅に指定。これがないと、syouhizentaiページなど消費税関係ページで画像の横スクロールがきかない。 https://csshtml.work/overflow-bad/#overflow-xscroll*/
    /*以下を試したがダメ。 */
    /* overflow: auto; */
    /* white-space: nowrap; 　←これを追加すると、自動改行されなくなるので、Table横スクロール時に文字がセルをはみ出すのでダメ*/
}

.scrol_hamidai_off {
    /*　スクロールバーを表示。→PCとスマホで利用
	　
	　以下は、PCとスマホの両方で、常に実行しても問題ないと思う。
		tableの幅を100％にすれば、スクロールバーは必ず表示されない。
		tableの幅をピクセル固定にすれば、tableの幅を超えたときにスクロールバーは必ず表示される。
	*/
    overflow-x: auto;
    width: 100%;
    /* 100【%】ならスクロールバー表示されない */
}


/*
***************************************************************************************************************************

必要なパターンは
●テーブル幅100％　
　→常にスクロール表示なし

●テーブル幅ピクセル単位
　→はみ出しありスクロールあり

  →はみ出しなしスクロールあり



	画面幅950px以上の場合は、テーブルをはみ出して表示して、スクロールバーを表示する。この場合は、テーブルのスクロールバーでテーブルを横スクロールする
	画面幅950px以下の場合は、テーブルにスクロールバーを表示させない。この場合は、ウインドウのスクロールバーでテーブルを横スクロールする

***************************************************************************************************************************
*/


/* 	画面幅950px以上の場合、はみ出して */

@media screen and (min-width: 950px) {
    /*　スクロールバーを表示。→PCとスマホで利用
	　
	　以下は常に実行しても問題ないと思う。
		tableの幅を100％にすれば、スクロールバーは必ず表示されない。
		tableの幅をピクセル固定にすれば、tableの幅を超えたときにスクロールバーは必ず表示される。
	*/
    /*　**************************
	tableの親要素divに対して設定
	****************************** */
    .scrol_hamidai_tableleft {
        overflow-x: auto;
        width: 100%;
        /*　親要素をはみ出して、画面幅まで広げる。→PCだけで利用 */
        /*　width: 100vw;	*/
        background: #e5ee34;
    }
    div.scrol_hamidai_tableleft>table {
        /* 左揃え */
        /* margin-right: auto; */
    }
    /*　**************************
	tableの親要素divに対して設定
	****************************** */
    .scrol_hamidai_tablecenter {
        overflow-x: auto;
        width: 100%;
        /*　親要素をはみ出して、画面幅まで広げる。→PCだけで利用 */
        /*  */
        margin: 0 calc(50% - 50vw);
        /* 中央配置 */
        width: 100vw;
        background: #eece34;
        /*　以下はダメ

			position: absolute;
			left: -100%;
			right: -100%;
			width: 100vw;
			margin: auto;
			*/
    }
    div.scrol_hamidai_tablecenter>table {
        /* tableなどを中央揃えにする 　※align="center"　はCSSでは使えない*/
        margin-left: auto;
        margin-right: auto;
    }
}

.w100vw2 {
    /*画面幅　100％くらい */
    margin-left: 0;
    margin-right: 0;
}


/*　**************************
設定した要素に対して直接実行
****************************** */


/* 	画面幅950px以下の場合、marginを初期化0する →初期化しないと、*/

@media screen and (max-width: 930px) {
    .w100vw {
        margin: 0;
    }
    .w70vw {
        margin: 0;
    }
    .w50vw {
        margin: 0;
    }
    .w40vw {
        margin: 0;
    }
    .w30vw {
        margin: 0;
    }
    .w20vw {
        margin: 0;
    }
    .w10vw {
        margin: 0;
    }
    .w0vw {
        margin: 0;
    }
}


/* 	画面幅950px以上の場合、はみ出して */

@media screen and (min-width: 930px) {
    .w100vw {
        margin: 0 calc(((50vw - 50%) / 1) * -1);
        /* 画面余白、めいいっぱい、はみ出す */
    }
    .w70vw {
        /* 画面余白70％はみ出す */
        /* 親要素に収まっている子要素を左右はみ出させる https://twotone.me/web/2077/   https://note.com/toya_n/n/n2ae52760d750

		●margin: 0 calc(((50vw - 50%) / 1.5 ) * -1);	　の意味
			「50vw」→ブラウザのウィンドウの片方の幅	「- 50%」→指定した子要素の片方の幅を取得しウィンドウの幅から引く。
			これを左右行い子要素からはみ出させるために「* -1」でネガティブマージンにする
			margin →要素をずらす

		●【注意】一つのページに、w70vwが複数ある場合、Ajaxのw70vwだけ幅が、Firefoxで、ウインドウリサイズ時に、VW　が変更されないときがある。
			ウインドウを左右にリサイズすると、幅が一定にならない。また、ウインドウを左右にリサイズするスピードによっても、幅の大きさが異なってしまう。
			→ウインドウをリサイズした後、FFの画面更新すれば、正常にVWが表示される。

			サファリも同様の問題があるらしい。Safariにはリサイズしても、「vw」の大きさが再計算されないバグがあるからです。　https://web-design-textbook.com/recipe/text-responsive.html

		●【注意】親テーブルにmarginが設定されていたら、レイアウトが崩れて画面幅をはみ出した。
			親テーブルのmarginを削除したら直った。


		●width: 100vw;　→幅を画面幅いっぱいに指定

		*/
        margin: 0 calc(((50vw - 50%) / 1.5) * -1);
        /*padding: 0 calc((100vw - 100%) / 3); 　【注意】左記は実行してはダメ。左記を実行すると、Overflowの中にあるTableがはみ出さなくなってしまう。*/
    }
    .w50vw {
        margin: 0 calc(((50vw - 50%) * 0.5) * -1);
        /* 画面余白50％だけはみ出す */
        /* 画面余白50％はみ出す */
    }
    .w40vw {
        margin: 0 calc(((50vw - 50%) * 0.4) * -1);
        /* 画面余白40％だけはみ出す */
    }
    .w30vw {
        margin: 0 calc(((50vw - 50%) * 0.3) * -1);
        /* 画面余白30％だけはみ出す */
    }
    .w20vw {
        margin: 0 calc(((50vw - 50%) * 0.2) * -1);
        /* 画面余白20％だけはみ出す */
    }
    .w10vw {
        margin: 0 calc(((50vw - 50%) * 0.1) * -1);
        /* 画面余白10％だけはみ出す */
    }
    .w0vw {
        margin: 0 0;
        /* 画面余白はみ出さない */
    }
}


/* Table要素に設定する。Table要素の最初のTr内のThに設定される */

.fixedgyou1 th {
    /* 縦スクロール時に固定する */
    position: -webkit-sticky;
    /* Safariブラウザの場合は、こちらの「-webkit-sticky」も必要になります。 */
    position: sticky;
    top: 0;
    /*ブラウザの上からの距離はゼロ*/
    /* tbody内のセルより手前に表示する */
    z-index: 0;
}

.fixedretu3 th:nth-of-type(3) {
    position: -webkit-sticky;
    /* Safariブラウザの場合は、こちらの「-webkit-sticky」も必要になります。 */
    position: sticky;
    left: 0;
    /* 2列目だけを一番左に固定する */
    /*  https://since-inc.jp/blog/8675　のとおり、以下を記述しているが、VSCodeで見るとエラーが出ている */
    &:before {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
    }
}

.sampleLeft {
    position: relative;
    /* ←必要なもの */
}


/* ********************************************************************************************
上部スクロールバーのCSS
********************************************************************************************** */

.scrollup {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    height: 17px;
    /* background: #FFFFFF;     */
    /* border-bottom: 3px solid #FFFFFF;/* 横スクロールバーが表示されているときは、白い下線を引く。横スクロールバーが表示されているときは、白い下線を消す。 　←これはJSで実行して切り替えているいる*/
    z-index: 9999;
    /* 画像ポップアップは、jsでzindex　10000に設定している。 */
    overflow-x: auto;
    overflow-y: hidden;
    /* 左記を実行し、縦スクロールバーを非表示にしないとダメ。これがないと、CromeとEdgで、縦スクロールバーが表示されてしまうため、横スクロールバーの一番右に余分な四角が表示されてしまう。*/
    /*
	    以下はスクロールバーを細くする方法。Firefoxしかscrollbar-width: thinは実行できないからダメ。
	    <div  class ="scrollup" style="width:100%;height:10px;z-index:10000;scrollbar-width: thin;   overflow-x: auto;"></div>
	*/
}


/* scrollup を適用したdivの一つ目の子要素divの高さ設定*/

.scrollup div:nth-of-type(1) {
    height: 17px;
}

.fixedtop {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    right: 0;
}

.scrollup22 {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    /* background: #FFFFFF;     */
    /* border-bottom: 3px solid #FFFFFF;/* 横スクロールバーが表示されているときは、白い下線を引く。横スクロールバーが表示されているときは、白い下線を消す。 　←これはJSで実行して切り替えているいる*/
    overflow-x: auto;
    overflow-y: hidden;
    /* 左記を実行し、縦スクロールバーを非表示にしないとダメ。これがないと、CromeとEdgで、縦スクロールバーが表示されてしまうため、横スクロールバーの一番右に余分な四角が表示されてしまう。*/
    /*
	    以下はスクロールバーを細くする方法。Firefoxしかscrollbar-width: thinは実行できないからダメ。
	    <div  class ="scrollup" style="width:100%;height:10px;z-index:10000;scrollbar-width: thin;   overflow-x: auto;"></div>
	*/
}


/* ローディングを画面前面の全体に表示するように設定します。
http://program-memo.com/archives/396
画面前面の全体に表示 */

#loading_box {
    width: 100%;
    height: 100%;
    /* background: #FFF; */
    opacity: 0.8;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90000;
}


/* 画面の中心にローディング画像を表示する */

#loading_box img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    width: auto;
}


/* 横並びにする */

.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}


/* 横並びにする。設定したDivの中のDivは横並び2列にする。zzxxでは縦並び、rdでは横並び2列にするために使用

	zzでは、flex2retu を消去して、縦並びにしている

*/

.flex2retu {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.flex2retu div {
    width: 50%;
    padding-right: 10px;
    
/*
    padding-right: 10%;
    padding-left: 10%;
*/

}
.flex2retu div div img{

	width: 300px !important;/* スマホは100％にしている */
	height: 200px !important;/* スマホは100％にしている */
	object-fit: cover; /* 縦横比を保持して、ボックスが画像で埋まるようにリサイズされます。縦横のうち小さい方を基準にしてリサイズされ、ボックスからはみ出した部分はトリミングされます。 */
	
}


/* PCは2列表示、スマホは1列表示 */

.pc2retu_suma1retu {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    width: 100%;
}

.pc2retu_suma1retu div {
    width: 50%;
    padding-right: 10px;
}


/* どこでもリンクの表示  */

.dokodemolink_true a {
    display: inline;
}

.dokodemolink_false a {
    display: none;
}

.mojihyouji1,
.mojihyouji2,
.mojihyouji3,
.mojihyouji4,
.mojihyouji5,
.mojihyouji6,
.mojihyouji7,
.mojihyouji8,
.mojihyouji9 {
    display: none;
}
label,input{
    text-decoration: none; /* 全てのラジオボタン等の下線を消去する。 */
}