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

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

/* メイン部分 */
main { 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; }

/* 下部余白 */
.BottomSpace { margin-bottom:50px !important; }




/* ログトップページ ====================================================================================== */
/* 上部タブ */
ul#Menu { display:flex; list-style:none; margin-bottom:50px; }
#Menu li { width:100%; border-style:solid; border-color:#fff; border-width:0px 0px 0px 2px; text-align:center; font-weight:bold; }
#Menu li:first-child { border-width:0px; }

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


/* ハウスルール説明の目次 */
ul.Mokuji { padding:0px 30px; margin-bottom:50px; }

/* セッションログ一覧部分 */
/* dlで全体を囲み、dtで用語（シナリオタイトル）、ddで詳細（参加者）を記載 */
dl { padding-left:10px; }
dt { color:#000; font-weight:bold; }
dd { color:#000; padding-left:20px; margin-bottom:30px; }

a.multi  { font-weight:bold; }




/* メイン画面 ====================================================================================== */
/* 基本フォント */
p { color:#000; padding:10px; word-break:break-all; }
a { color:#d12b2b; text-decoration:none; }
a:visited { color:#d12b2b; text-decoration:none; }
a:hover, a:active { color:#000; text-decoration:none; }
div { word-break:break-all; }
img{ margin:10px 20px; max-width:90%; height:auto; }


/* 見出し */
h1 { padding:10px; background:#000; font-size:16px; font-weight:bold; color:#fff; }
h2 { padding:10px; background:#bbb; font-size:16px; font-weight:bold; color:#000; margin: 0.67em 0; }
h2 a { color:#000; }


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

footer p { color:#fff; font-weight:bold; }
footer a { color:#d12b2b; text-decoration:none; word-break:break-all; }
footer a:visited { color:#d12b2b; text-decoration:none; }
footer a:hover, footer a:active { color:#fff;    text-decoration:none; }


/* 折り畳み部分 */
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; }


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

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; }




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

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

/* スマホ対応時はdd（参加者情報）は基本的に非表示。1シナリオで複数開催時のみddの日付情報を表示 */
/* そのため、基本：dtで余白取り・dd非表示　複数開催：dt余白なし・ddで余白取り　で対応 */
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%; }
}