/* P
------------------------------------- */

p {margin-top:0px;margin-bottom:15px;/* 上下、一行空ける。基本はコレ */
margin-right:20px;margin-left:20px;}
	
.pt1 {margin-top:10px;margin-bottom:0px;/* 上だけ一行、空ける*/
margin-right:20px;margin-left:20px;}
	
.pb1 {margin-top:0px;margin-bottom:10px;/* 下だけ一行、空ける */
margin-right:20px;margin-left:20px;}

.p0 {padding:0em;margin:0em;/* 一行空けない */
margin-right:20px;margin-left:20px;}

.ptop {text-indent: 1em;/* 行頭1文字分空ける*/
margin-right:20px;margin-left:20px;}

/* P  ショッピングサイト用
------------------------------------- */

.pwb1 {margin-top:0px;margin-bottom:10px;/* 下だけ一行、空ける */
margin-right:15px;margin-left:15px;}

    
.p1 {padding:0em;margin:0em;/* 一行空けない */}
.pone {text-indent: 1em;/* 行頭1文字分空く*/}

.p2 {margin-top:0px;margin-bottom:10px;/* 下だけ一行、空ける */
margin-right:0px;margin-left:0px;/* 左右、空けない */}
	
    
.blockquote {
width: 470px;
line-height: 1.5em;
margin-top:10px;
margin-bottom:10px;
color:#000000;
font-size: 12px;
padding:10px 5px 10px 10px; 
border:dashed 1px #736357;
background:"img/wallpaper.gif"
letter-spacing: 0.1em;
text-align:left;
}

a img {
    border-style:none;
}

.no_border {
    border-style:none;
}



.tabletop { 
width: 585px; /* テーブルの横幅 */ 
border-collapse: collapse; /* 枠線の表示方法 */ 
border: 1px #191970 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ 
background-color:#FFFFFF;text-align: center;} 


.tabletop TD { 
border: 1px #191970 solid; /* セルの枠線（太さ・色・スタイル） */ 
padding: 5px; /* セル内の余白 */ 
font-size:10pt;
color:#191970;text-align: center;} 


.tableweb { 
width: 400px; /* テーブルの横幅 */ 
border-collapse: collapse; /* 枠線の表示方法 */ 
border: 1px #c0c0c0 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ 
background-color:#ffffff;} 


.tableweb TD { 
border: 1px #c0c0c0 solid; /* セルの枠線（太さ・色・スタイル） */ 
padding: 20px; /* セル内の余白 */ 
} 



.tableweb2 { 
width: 585px; /* テーブルの横幅 */ 
border-collapse: collapse; /* 枠線の表示方法 */ 
border: 1px #b0c4de solid; /* テーブル全体の枠線（太さ・色・スタイル） */ 
background-color:#ffffff; } 


.tableweb2 TD { 
border: 1px #b0c4de solid; /* セルの枠線（太さ・色・スタイル） */ 
padding: 5px; /* セル内の余白 */ 
font-size:13px;} 



.tableweb3 { 
width: 585px; /* テーブルの横幅 */ 
border-collapse: collapse; /* 枠線の表示方法 */ 
border: 1px #ff69b4 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ 
background-color:#ffffff;} 


.tableweb3 TD { 
border: 1px #ff69b4 solid; /* セルの枠線（太さ・色・スタイル） */ 
padding: 5px; /* セル内の余白 */ 
} 


.tablechat { 
width: 585px; /* テーブルの横幅 */ 
border-collapse: collapse; /* 枠線の表示方法 */ 
border-spacing: 0;
border: 1px #ff99a8 solid; /* セルの枠線（太さ・色・スタイル） */ 
background-color:#ffffff;} 


.tablechat TD { 
border: 1px #ff99a8 solid; /* セルの枠線（太さ・色・スタイル） */ 
padding: 5px; /* セル内の余白 */ 
font-size:10pt;
color:#666666;} 


 /* 各ライブチャット、出会い系サイトの解説ページの表 */ 

.tablechat2,.tablechat3,.tabledeai { width: 585px; /* テーブルの横幅 */ 
border-collapse: separate; /* 枠線の表示方法 */ 
border-spacing: 0;
border-right: 1px #b2b2b2 solid;/* テーブル全体の枠線（太さ・色・スタイル） */ 
border-bottom: 1px #b2b2b2 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ 
background-color:#FFFFFF;} 



.tablechat2 th, .tablechat3 th, .tabledeai th {
text-align:center;
border-left: 1px #b2b2b2 solid;
border-top: 1px #b2b2b2 solid;
text-align:center;
background-color:#ffb6c1;
padding:3px; margin:0em;
font-size:11pt;
color:#ffffff;
font-weight:bold; } 

.tablechat2 td, .tablechat3 td,.tabledeai td  { 
border-left: 1px #b2b2b2 solid;/* テーブル全体の枠線（太さ・色・スタイル） */ 
border-top: 1px #b2b2b2 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ 
padding: 4px; /* セル内の余白 */ 
font-size:13px;
color:#232323;background-color: #ffffff; vertical-align:top;} 


.tablechat2 td.citem, .tablechat3 td.citem, .tabledeai td.ditem {
/* tablechat2,3のtd内のclass名citem
------------------------------------- */
background-color: #ffb6c1;
width:27%;
margin:0px;
} 


.tablechat2 P, .tablechat3 P, .tabledeai P {margin-top:0px;margin-bottom:15px;/*tablechat2内のP 下、一行空ける、上は空けない。 */
margin-right:20px;margin-left:20px;/* 左右20pxづつあける */}



.tablechat2 tr:nth-child(odd) td:nth-child(2) { /* 奇数行の2列目のみグレイに変える  */
background:#f5f5f5;
}

.tablechat2 tr:nth-child(even) td:nth-child(2) { /* 偶数行の2列目のみホワイトに変える。
スマホのchromeで見るとピンク色だったので  */
background:#ffffff;
}

.tablechat2 td:nth-child(1){   /* 先頭列はピンク。
ここは、.tablechat2 td.citemで指定するのでもういらないかもだが。いや逆にいちいち指定せず、ここにだけ書けばいいんじゃないか？
 */
background-color:#fffafa;
width:27%;
margin:0px;
}

.tablechat2 td:nth-child(2){   /* 2つ目はホワイト。スマホのChromeで見るとここがピンク色になっちゃうので
⇒上で指定してるのでどっちかいらない　 */
 background: #ffffff;
}

.tablechat2 tr:nth-child(2) td:nth-child(1) { /* 広告バナーのある2行目の1列目のみホワイトに変える  */
background:#ffffff;
}


.tablechat2 tr:nth-child(15) td:nth-child(1) { /* メイン文章のある15行目の1列目のみホワイトに変える  */
background:#ffffff;
}


.tbackwhite{ /* CSS3「nth-child疑似クラス」をやるとなぜか反映されないので
上のようにするしかない */background-color: #ffffff;!important;
}



/* tablechat2の最後の部分、nth-child(15) がnth-child(17) になっただけ
エンジェルライブのみ */ 


.tablechat3 tr:nth-child(odd) td:nth-child(2) { /* 奇数行の2列目のみグレイに変える  */
background:#f5f5f5;
}


.tablechat3 td:nth-child(1){   /* 先頭列はピンク。
 */
 background: #fffafa;
}

.tablechat3 tr:nth-child(2) td:nth-child(1) { /* 広告バナーのある2行目の1列目のみホワイトに変える  */
background:#ffffff;
}

.tablechat3 tr:nth-child(17) td:nth-child(1) { /* メイン文章のある17行目の1列目のみホワイトに変える  */
background:#ffffff;
}


/* 出会い系のtable 上の最後の部分、nth-child(15) がnth-child(16) になっただけ 
ハッピーメールのみ*/ 


.tabledeai tr:nth-child(odd) td:nth-child(2) { /* 奇数行の2列目のみグレイに変える  */
background:#f5f5f5;
}


.tabledeai td:nth-child(1){   /* 先頭列はピンク。
 */
 background: #fffafa;
}

.tabledeai td:nth-child(2){   /* 2つ目はホワイト。
 */
 background: #ffffff;
}
.tabledeai tr:nth-child(2) td:nth-child(1) { /* 広告バナーのある2行目の1列目のみホワイトに変える  */
background:#ffffff;
}

.tabledeai tr:nth-child(16) td:nth-child(1) { /* メイン文章のある16行目の1列目のみホワイトに変える  */
background:#ffffff;
}


.tablekeiyu { 
width: 585px; /* テーブルの横幅 */ 
border-collapse: separate; /* 枠線の表示方法 */ 
border-spacing: 0;
border-right: 1px #b2b2b2 solid;/* テーブル全体の枠線（太さ・色・スタイル） */ 
border-bottom: 1px #b2b2b2 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ 
background-color:#FFFFFF;
} 

.tablekeiyu TH {
border-left: 1px #b2b2b2 solid;
border-top: 1px #b2b2b2 solid;
text-align:center;
background-color:#ffa500;
padding:3px 3px 3px 3px; margin:0em;
font-size:10pt;
color:#ffffff;
font-weight:bold;}

.tablekeiyu TD { 
border-left: 1px #b2b2b2 solid;/* テーブル全体の枠線（太さ・色・スタイル） */ 
border-top: 1px #b2b2b2 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ 
padding: 4px; /* セル内の余白 */ 
font-size:10pt;
color:#232323;} 

.tablekeiyu P {padding:0em 15px 10px 20px;margin:0em;/* 上下左右空けない */}

th.keiyu {
font-size: 10pt;
color:#191970;
background-color:#ffffff;
border-left:#191970 3px solid;
padding:3px 20px;/* 上下3px、左右15px空ける */
margin: 0px 0px 0px 0px;font-weight:bold;text-align:left;
}


/* dt dd CSS
------------------------------------- */

.webtitle { /* 枠のタイトル */ 
background-color:#0a73aa;
/* ----------もう一二段薄い#3B8FBB、更に薄い#6CABCCにしてもいい（ https://color-hex.org/color/0a73aa）]
似た系統の色として、ASPでも使っている#1e4999や、#3b6f99でもいいし、
#F4B301など黄色系の明るい色でもいいかもな--------------------- */
color:#ffffff;
font-size : 10pt;
font-weight:bold;
text-align : left;
padding:3px 3px;
margin:0em ;
border:solid 1px #b2b2b2;/* ------#b0c4deでもいいが------- */
border-bottom:solid 0px ;
background-size: cover; 
}

.webtitle a:link { text-decoration: none; color: #ffffff;
/* webtitle内のリンク色は全ての状態で白で統一 */}
.webtitle a:visited { text-decoration: none ;color: #ffffff;}
.webtitle a:hover  { position: static; text-decoration: underline;
/* リンクだと分かるように触れるとアンダーライン */ color: #ffffff;}
.webtitle a:active { position: static; text-decoration:none; color: #ffffff;} 

.webtitle.rcolor {/* 楽天経済圏のスタンダードカラー */ 
background-color:#BF0000;}


.webtitle.pcolor {/* yahooのスタンダードカラー */ 
    background-color:#FFA500;} 
 
.webtitle.sgcolor {/* スロットゲームのカラー */ 
        background-color:#E6B422;
        
        } 


.web { 
border: 1px #b2b2b2 solid; /* セルの枠線（太さ・色・スタイル） */ 
padding: 5px 3px 5px 0px; /* セル内の余白 */ 
font-size:12px;
background-color:#ffffff;
height:90px;margin-bottom:15px;line-height: 150%;
} 

.web img  { margin:3px 5px 10px 5px; float: left; }


/* 上のmargine0バージョン */ 

.webb { 
border: 1px #b0c4de solid; /* セルの枠線（太さ・色・スタイル） */ 
padding: 3px 0px 5px 3px; /* セル内の余白 */ 
font-size:12px;
background-color:#ffffff;
height:90px;margin-bottom:0px;line-height: 150%;} 

.web2b img {margin:0px 5px 0px 0px; float: left; }


/* 高さがやや長いだけ　宅配dvdや出会い系のとこなど
------------------- */
.web2 { 
border: 1px #b2b2b2 solid; /* セルの枠線（太さ・色・スタイル） */ 
padding: 2px; /* セル内の余白 */ 
font-size:12px;
background-color:#ffffff;
height:80px;margin-bottom:15px;line-height: 150%;} 

.web2 img {margin:5px 5px 0px 0px; float: left; }


 /* 上のマージンゼロバージョン
---------------------------- */
.web2b {
border: 1px #b2b2b2 solid; /* セルの枠線（太さ・色・スタイル） */ 
padding: 2px; /* セル内の余白 */ 
font-size:12px;
background-color:#ffffff;
height:80px;margin:0px;line-height: 150%;} 

.web2b img {margin:0px 5px 0px 0px; float: left; }


/* dmmで使う
------------------- */
.webdmm { 
border: 1px #b2b2b2 solid; /* セルの枠線（太さ・色・スタイル） */ 
padding: 2px; /* セル内の余白 */ 
font-size:12px;
background-color:#ffffff;margin-bottom:15px;line-height: 150%;} 

.webdmm img {margin:0px 5px 0px 0px; float: left; }





/* chat　ライブチャット・出会い系やらで使う
------------------------------------- */


 .chatitle{ /* 枠のタイトル */ 
background-color:#ffb6c1;
/* -----.tablechatに色を合わせてみる-------- */
color:#ffffff;
font-size : 10pt;
font-weight:bold;
text-align : left;
padding:3px 3px;
margin:0em ;
border:solid 1px #b2b2b2;
border-bottom:0px #ffffff solid;
background-size: cover;}

.chatitle a:link { text-decoration: none; color: #ffffff;
/* chatitle内のリンク色は全ての状態で白で統一 */}
.chatitle a:visited { text-decoration: none ;color: #ffffff;}
.chatitle a:hover  { position: static; text-decoration: underline;
/* リンクだと分かるように触れるとアンダーライン */ color: #ffffff;}
.chatitle a:active { position: static; text-decoration:none; color: #ffffff;} 


.chat { 
border: 1px #ff99a8 solid; /* 枠線（太さ・色・スタイル） */ 
border: 1px #b2b2b2 solid; /* .tablechatに色をあわせてみる。以前は上の色 */ 
padding: 3px 0px 5px 3px;  /* セル内の余白 */ 
font-size:12px;
background-color:#ffffff;
height:70px;margin-bottom:15px;line-height: 150%;} 

.chat img {margin:0px 5px 0px 0px;}

.wchatw P {
font-size: 10pt;margin-top:0px;margin-bottom:15px;/* 上下、一行空ける。基本はコレ */
margin-right:13px;margin-left:13px;} 



/* h CSS
------------------------------------- */

h3.keiyu {
font-size: 10pt;
color:#191970;
background-color:#ffffff;
border-left:#191970 3px solid;
border-bottom: solid 1px #ffffff;
padding:1px 4px;
margin: 0px 0px 0px 0px;
}

h3.whead1 {
font-size: 10pt;
color:#191970;
padding:0px 0px 0em 15px; 
background-color:#ffffff;
margin:10px 0px 0em 0em;
font-weight:bold;}

h3.whead {
font-size: 10pt;
color:#191970;
padding:0px 0px 0em 15px; 
background-color:#ffffff;
margin:0em;
font-weight:bold;}

    
h3.webtitle{
font-size: 10pt;
color:#191970;
background-color:#ffffff;
border-left:#191970 3px solid;
border-bottom: solid 1px #ffffff;
padding:1px 4px;
margin: 5px 0px 0px 0px;
}

    
/* ジャンル分けのための上部、文字 */   
h3.webh3 {
width:305px;
font-size: 10pt;
font-weight:normal;
color:#3b6f99;
background-color:#ffffff;
border-left:#4682b4 3px solid;
border-bottom: solid 1px #ffffff;
padding:0px 5px;
margin: 3px 0px 0px 0px;
line-height: 140%;/* 行の高さを指定　これによりコンパクトに縮み（文字の上下幅が）、右メニューのタイトルとそろえることが可能に */
}



h3.chat0 {
    font-size: 11pt;
    font-weight:bold;
    color:#191970;/* 文字色を紺 */
    background-color:#ffffff;       /* 背景色を設定 */   
    border-left:solid 7px #ff7fbf;
    padding:0px 0px 0em 13px;                 /* 文字間隔 */
    margin:11px 0px 6px 0em;}

h3.chat1 {
    font-size: 11pt;
    font-weight:bold;
    color:#191970;/* 文字色を紺 */
    background-color:#ffffff;       /* 背景色を設定 */   
    border-left:solid 7px #ff7fbf;
    padding:0px 0px 0em 13px;                 /* 文字間隔 */
    margin:0px 0px 6px 0em;}
    
    


.setsumei{
position:absolute; left:0px; top:0px; visibility:hidden;
font-size:10pt; line-height:140%; color:#333333; text-align:left;
background-color:#FFFFFF; layer-background-color:#FFFFFF;
border:1px solid #ff69b4; padding:5; padding:5px 5px 5px 5px; width:300px;}

.slive p｛margin-top:0px;margin-bottom:15px;/* 上下、一行空ける。基本はコレ */
margin-right:50px;margin-left:50px;｝



/* imgのマージン alignとvspaceとhspaceはhtml4.01非推奨なので　 
------------------------------------- */
.imgleft {
width: 100%;
}

.imgleft img {
float:left;
padding:5px;
margin:10px 10px 10px 5px;
display:inline;/* IE6対策：floatで回り込むとmarginが2倍になってしまう。
marginで間隔を開けるときはdisplay:inline;を追加するとmarginが通常通り表示されるらしい
------------------------------------- */}

	
.imgleft p {padding:0px;margin:10px;}



/* 出会い系の疑問、質問コーナー
------------------------------------- */

h2.qahead {
font-size:10pt;
color:#191970;/* 文字色を紺 */
background-color:#ffffff;/* 背景色を設定 */
border-bottom:solid 1px #191970;
padding:6px 0px 0px 70px;/* 文字間隔 */
margin:3px 0px 0px 5px;/* 下、少しも空けないパターン */
font-weight:bold;background-image: url("../img/icon_autumn_02/bat-01.gif");
background-repeat: no-repeat;
background-position:-2px -10px;}


h3.qa {/* shigotoのページで使っているやつと一緒 */ 
    font-size: 11pt;
    color:#191970;/* 文字色を紺 */
    background-color:#EEF6FF;       /* 背景色を設定 */   
    border-color:#6AA2DB;
    border-width:1px 1px 1px 7px;
    border-style:solid;
    padding:2px 0px 0px 8px;                /* 文字間隔 */
    margin:5px 0px 10px 5px;}
    
    

/* 目次　右下関連記事メニューリスト */
.webmenul{text-align:right;margin-right:20px;}

.webmenul2 {text-align:right;font-size:10pt;
/* 文字小さい。 */}




/* メディアクエリ。　　ウィンドウ幅が0?500pxの場合に適用するCSS */


@media screen and ( max-width:500px )
{
 img
  {
     max-width: 100%;
     height: auto;
   }

  #outline{
  width:100%;
   }
 
/*==〜以下、画面の横幅が500pxまでの場合のスタイル記入〜==*/


  
.blockquote {
width:98%;
line-height: 
}



.tabletop { table-layout: fixed; /* tableの列幅を均等にする*/ 
word-break: break-word;/* 文字を行から、はみださないように制御*/ 
width: 98%; /* テーブルの横幅 */ } 


.tableweb,.tableweb2,.tableweb3 { table-layout: fixed; /* tableの列幅を均等にする*/ 
word-break: break-word;/* 文字を行から、はみださないように制御*/ 
width: 98%; /* テーブルの横幅 */} 



.tablechat,.tablechat2,.tablechat3,.tabledeai,.tablekeiyu  { table-layout: fixed; /* tableの列幅を均等にする*/ 
word-break: break-word;/* 文字を行から、はみださないように制御*/ 
width: 98%; /* テーブルの横幅 */} 


.col1 { width: 110px; 

/* テーブル内にcolspanがあって横幅指定が効かない時の対処法 
  https://techmemo.biz/css/table-layout-colgroup/ */ 
  
/* スマホで見ると幅が広くなりすぎてるので */ 

}



.tablechat td.citem, .tablechat3 td.citem, .tabledeai td.ditem {
/* tablecのtd内のclass名tchat
------------------------------------- */
width:27%; 
table-layout: fixed;/* tableの列幅を均等にする*/ 
word-break: break-word;/* 文字を行からはみださないように制御*/ 
font-size:0.8em;
} 

.tablechat2 td:nth-child(1), .tablechat3 td:nth-child(1), .tabledeai td:nth-child(1){   /* 
こちらで一気に指定してやればもう上の.tablechat td.citemのように個別に指定する必要はなくなる。
 */width:27%; 
table-layout: fixed;/* tableの列幅を均等にする*/ 
word-break: break-word;/* 文字を行からはみださないように制御*/ 
font-size:0.7em;
}

.tablechat2 tr:nth-child(15) td:nth-child(1) { /* メイン文章のあるtd枠  */
font-size:0.9em;/* 上のが適用されて文字サイズが小さくなりすぎてるので-------- */
}

.tablechat3 tr:nth-child(17) td:nth-child(1) { /* メイン文章のあるtd枠。 */
font-size:0.9em;/* 上のが適用されて文字サイズが小さくなりすぎてるので-------- */
}

.tabledeai tr:nth-child(16) td:nth-child(1) { /* メイン文章のある16行td枠  */
font-size:0.9em;/* 上のが適用されて文字サイズが小さくなりすぎてるので-------- */
}



/* div CSS
------------------------------------- */

.web {width: 97%;font-size:0.7em;
    padding: 3px 3px 5px 0px; /* セル内の余白 */ 
    height:80px;} 


.web img  { margin-top:5px;
        max-width: 80px;
        height: auto;}

.ddtext  { 
            display: block;/* spanはインライン要素なので
            overflow: hidden; が効かないため、
            display:block;を追加する必要がある------------------ */
            overflow: hidden;/* 画像下に文字を回り込ませない*/ 
            padding-top: 2px;
    }
        


/* 上のmargine0バージョン */ 

.webb {width: 97%;font-size:0.7em;} 



/* 高さがやや長いだけ　宅配dvdや出会い系のとこなど
------------------- */
.web2 {width: 97%;font-size:0.7em;} 


 /* 上のマージンゼロバージョン
---------------------------- */
.web2b {width: 97%;font-size:0.7em;} 


/* dmmで使う
------------------- */
.webdmm {width: 97%;font-size:0.7em;} 


.webtitle,.chatitle {width: 97%;font-size:0.75em;
padding-right:0px;/* 横幅が右に少しはみ出していたがこれを指定したら上手いこといった。 */} 


/* chat
------------------------------------- */
.chat { width: 97%;font-size:0.7em;} 


/* 目次　右下関連記事メニューリスト */
.webmenul{text-align:right;margin-right:20px;}

.webmenul2 {padding-right:5px; margin-right:5px; }

}