/* 全体設定 ======================================================================================== */
@charset 'UTF-8';

* { margin:0; padding:0; }
html,body  { height:100%; }
body       { background:url(http://dara.sakura.ne.jp/TRPG/wallpaper_TRPG.gif) fixed;
             font-family:"メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; font-size:15px; line-height:18pt; }

/* フォント */
p { color:#000; font-size:15px; line-height:18pt; padding:10px; word-wrap:break-word; }
a                 { font-size:15px; line-height:18pt; color:#d12b2b; text-decoration:none; }
a:visited         { color:#d12b2b; text-decoration:none; }
a:hover, a:active { color:#000;    text-decoration:none; }
div { word-wrap:break-word; }


/* メイン画面 ====================================================================================== */

/* 画面枠 */
div#MainArea  { box-sizing:border-box; width:80%; padding:30px 0px; margin:0px auto;
                border-style:solid; border-width:0px 2px 2px 2px; background-color:#fff; outline:none; }

/* 段落区切り部分 */
div.HeaderBar  { background-color:#000; width:100%; margin-top:20px; margin-bottom:20px; }
div.SecBar     { background-color:#bbb; width:100%; margin-top:20px; margin-bottom:20px; }
h1 { color:#fff; font-size:15px; font-weight:bold; line-height:18pt; padding:10px; }
h2 { color:#000; font-size:15px; font-weight:bold; line-height:18pt; padding:10px; }

p.HF { color:#fff; font-weight:bold; font-size:15px; }
a.HF                    { color:#d12b2b; text-decoration:none; word-wrap:break-word; }
a:visited.HF            { color:#d12b2b; text-decoration:none; }
a:hover.HF, a:active.HF { color:#fff;    text-decoration:none; }


/* メニュー部分 */
li.TabMenu { float:left; margin-right:-4px; list-style:none; background-color:#bbb; border-style:solid; border-color:#fff;
             text-align:center; font-weight:bold; color:#000; }
li.Tab_PL    { width:34%; min-width:34%; border-width:0px 2px 0px 0px; }
li.Tab_KP    { width:33%; min-width:33%; border-width:0px 2px 0px 2px; }
li.Tab_Other { width:33%; min-width:33%; border-width:0px 0px 0px 2px; }
li.Tab_Select { padding:15px 0px; background-color:#000; color:#eee; }

li.TabMenu a { display:block; color:#000; padding:15px 0px; }
li.TabMenu a:hover { background-color:#000; color:#d12b2b; }

section.Main_Content { clear:both; padding-top:20px; }


/* セッションログ一覧部分 */
ul.Mokuji { padding:10px 30px; margin-bottom:20px; }
dl { padding-left:10px; }
dt { color:#000; font-size:15px; font-weight:bold; }
dd { color:#000; font-size:15px; padding-left:20px; margin-bottom:30px; }

a.multi  { font-weight:bold; }


/* 折り畳み部分 */
table          { margin:20px 10px; padding:0px; border:none; background-color:#efefef;}
td.FoldButton  { vertical-align:top; text-align:center; }
td.FoldContent { display:none; margin:30px 10px 0px -30px; vertical-align:top; text-align:left; }
span.FoldButton{ cursor:pointer; display:block; width:20px; height:20px; border:1px solid;
                 text-align:center; vertical-align:top;}


/* フッター */
footer { background-color:#000; width:100%; margin-top:20px; margin-bottom:20px; }


/* テキスト装飾などその他 */
p.SubTitle{ padding-bottom:0px; font-size:15px; font-weight:bold; }
p.Indent  { padding-top:0px; margin-left:20px; }

div.dice{ min-height:40px; max-width:90%; background:#ddd url(icon_dice.png) 10px center no-repeat;
          padding:5px 5px 5px 50px; margin:10px 10px 10px 15px; align-items:center;}
div.dice::first-line { font-weight:bold; color:#000; }
div.Event{ min-height:40px; max-width:90%; background:#f5d2d2 url(icon_event.png) 10px center no-repeat;
           padding:5px 5px 5px 50px; margin:20px 10px 20px 15px; display:flex; align-items:center;}

span.Under{ text-decoration:underline; }

img{ margin:10px 20px; max-width:90%; height:auto; }
.BottomSpace{ margin-bottom:50px; }



/* スマホ対応 ====================================================================================== */
@media screen and (max-width:640px){

div#MainArea  { box-sizing:border-box; width:100%; padding:30px 0px; margin:0px auto;
                border-style:solid; border-width:0px 2px 2px 2px; background-color:#fff; outline:none; }

dt { margin-bottom:30px;}
dd { display:none; }
dt.multi   { margin-bottom:0px;}
dd.multi   { display:block; margin-bottom:30px; }
span.multi { display:none; }

div.dice{ max-width:80%; }
}