@charset "utf-8";
/* CSS Designed by SUDO Masaaki 2012-2016 */

/* font1はゲーム内で使用。font2はcssで使用 */

@font-face {
    font-family: 'font1';
    src:url('../fonts/PixelMplus10-Regular.woff') format('woff'),
        url('../fonts/PixelMplus10-Regular.ttf') format('truetype');
}

/*
@font-face {
    font-family: 'font2';
    src: local("Arial");
}
*/

body {
    font-family: font1 , system-ui, "Hiragino Sans", "YuGothic", "Arial", sans-serif;
/*    font-family: 100%/1.4, Helvetica, Arial, Verdana, "メイリオ", Calibri, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;*/
/*    font-family: 'font2';*/
    margin: 0;
    padding: 0;
    background-color: rgb(51, 102, 204);
    position: relative;
}

html {
    overflow-y:scroll;
    height:100%;
    width: 100%;
    margin-bottom:1px;
}


canvas {
    touch-action: none; /* スクロールやズームの動作を無効化 */
    user-select: none; /* テキスト選択を無効化 */
}

/* 背景をブラーに。http://www.webopixel.net/javascript/975.html */

/* *は総称セレクタ。::before はマッチした要素の最初の子要素となる擬似要素を生成します。 */
*::before, * {
    box-sizing: border-box; /* padding と border の幅を要素の幅と高さに含める. */
}


/* background-clip: content-box を指定してpaddingするとコンテンツの部分のみ背景画像を適用できる */
.container1::before {
    content: ""; /* セレクタで指定した疑似要素にコンテンツを挿入する。今回は何も入れない */
    position: absolute;
    background-clip: content-box;
/*    width: 80%;
    min-width: 640px;
    max-width: 1200px;
*/    height: 100%;
    /*    padding: 0 auto;*/
    top: 0;
    left: 50%; /*この疑似要素の起点が、container1 の50%地点になる。*/
    margin-left: -420px; /* 次にmargin-leftを本要素の半分だけマイナスにオフセット  */
    -webkit-filter: blur(6px);
    filter: blur(6px);
    /*    filter: invert(100%);*/
    /*    filter: grayscale(100%);*/
}

/* 実際のwindow表示領域にすっぽり被せて背景にするコンテナ */
.container1 {
    position: relative;
/*    width: 80%;
    min-width: 640px;
    max-width: 1200px;
*/    float:none;
    margin: 0px auto;
    /* 両側を自動値として中央揃え。.container の幅を 100% に設定した場合は必要ないが */
    padding:0 0;
/*    -webkit-box-shadow: inset 0px 0px 7px 3px rgba(0, 0, 0, 0.6);*/
    box-shadow:  inset 0px 0px 7px 3px rgba(0, 0, 0, 0.6);
    box-shadow: none;
}

/* 以下の操作により、container1および最初の子である疑似要素に、同じ拡大率の同じ画像を適用している */
.container1::before, .container1 {
    background-color: rgb(24,24,34);
    background-color: hsla(150, 100%, 37%, 1);
    background-color: hsla(210, 10%, 15%, 1); /* v033 */
    background-color: hsla(218, 10%, 99%, 1); /* lighter theme */

    background-image: none;
    background-position: top center;
    background-repeat: repeat;
    background-attachment: fixed;
}


/*  本文を包含するコンテナ  */
.container2 {
    z-index: 30;
    position: relative;
    margin: 0px auto 0px auto;
    padding: 6px 0px 20px 0px;
    clear: both;
    float:none;
    height:auto;
    width: 90%;
    min-width: 560px;
    max-width: 840px;

    /* 本文コンテナの背景 */
    background-color: rgb(24, 24, 34);
    background-color: hsla(210, 100%, 50%, 0);
    background-color: hsla(210, 10%, 15%, 1); /* v033 */
    color: rgba(250, 250, 255, 1); /* darker theme */

    background-color: hsla(210, 10%, 95%, 0.42); /* lighter theme */
    background-color: hsla(210, 100%, 99.9%, 1); /* lighter theme */
    color: hsl(210, 10%, 5%); /* lighter theme */
    color: hsl(28, 100%, 5%); /* lighter theme */

    text-align: left;
    font-weight: 300;
    text-shadow: -1px -1px 0.5px rgba(5, 5, 5, 0.30);
    text-shadow: none;

    border-top: none;
    border-bottom: none;
    border-left:  1px solid rgba(20, 20, 30, 0.25);
    border-right: 1px solid rgba(20, 20, 30, 0.25);

    box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .53);
    box-shadow: none;

    background-image: none;
    background-position: top center;
    background-repeat: repeat;
    background-attachment: scroll;
}


/* id でゲームを指定。 */
#gamebase {
    position:relative;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center top;
    margin: 0;
    padding: 0;
    outline: none;
    border:none;
}

#gamebutton, #config {
    border:none;
    margin: 0;
    padding: 0;
    outline: none;
}


/* Floating message window */

.floatConfig, .floatDebug {
    background: none;
    font-size: small;
    list-style: none;
    margin: 0;
    padding: 0;
    border:none;
    outline: none;
    position:fixed;
}

.floatConfig {
    z-index:100000; /* ちなみにz-indexをhtmlに直書きすると動かない */
    left:0px;
}

#debug {
    border:none;
    outline: none;
}

.floatDebug {
    z-index:100100; /* ちなみにz-indexをhtmlに直書きすると動かない */
    right:0px;
}


a img {
    border: none;
}

a:link {
    color: hsl(340, 100%, 35%);
    outline: 0;
    text-decoration: underline;
}

a:hover, a:active, a:focus {
    text-decoration: none;
    outline:0;
}

a:visited {
    color: hsl(28, 0%, 10%);
}

ul, ol, dl {
    padding: 0;
    margin: 0;
    text-align:left;
}


/* ~~ 冒頭に記号をつけないリスト形式 ~~ */
.nomark {
    list-style-type: none;
    padding-left: 1em;
}


/* h1 本文のルート要素で1回しか登場しない。 h2 セクション h3 サブセクション h4 サブサブセクション h6 パラグラフ→本文と同じ装飾 */
h1, h2 ,h3, h4 {
/*    color: #FFF;*/
}

h1 {
    text-align: center;
    font-size: 30px; font-size: 1.875em;
    line-height: 36px; line-height: 1.4em;
    border-left: 0px solid #555;
    border-right: 0px solid #555;
    border-bottom: 2px solid #555;
    font-weight: 300;
    margin: 0px 15px 12px 0px;
    padding: 10px 15px 7px 11px;
}

h2, h3 {
    font-weight: 400;
    border-bottom: 2px solid #555;
}

h2 {
    font-size: 28px;	font-size: 1.75em;
    line-height: 32px; line-height: 1.4em;
    margin: 0px 15px 12px 0px;
    padding: 30px 15px 3px 8px;
}

h3 {
    font-size: 16px;	font-size: 1.25em;
    line-height: 32px; line-height: 1.4em;
    margin: 0px 15px 12px 0px;
    padding: 20px 15px 3px 5px;
}

h4, h5, h6 {
    margin: 0px 15px 10px 0px;
    padding: 4px 15px 2px 15px;
    /*layout-grid-line: auto;*/
}

h4,h5 {
    border-left: 2px solid #555;
}

p {
    margin-top: 0;
    margin-bottom: 0.8em;
    padding-right: 1em;
    padding-left: 2px;
}

i {
    font-style: italic !important;
}


/* ~~ 本文のスタイル ~~ */
/* 2カラムの場合はdiv class="content" 100%幅の1カラムレイアウトの場合はdiv class="content-wide"で指定する。 */

.content, .content-wide {
    height:auto;
    margin:0;
    padding: 0 0 0 17px;
    line-height: 1.8em;
}

.content {
    width:74%;
    max-width: 66em;
    float: left;
    text-align: justify;
    border-left: 1px solid #666;
    border-left: 1px solid rgb(240, 245, 255);
}

.content-wide {
    width:100%;
    float: none;
    text-decoration: none;
    text-align: left;
}


.content ul, .content ol, .content-wide ul, .content-wide ol {
    text-align: left;
    padding: 0px 1em 0.5em 1.5em;
}

.content ul li, .content ol li, .content ul p, .content ol p ,
.content-wide ul li, .content-wide ol li, .content-wide ul p, .content-wide ol p {
    text-align: left;
    font-size: 100%;
    margin-top:0;
    margin-bottom:0.5em;
    line-height:1.8em;
}



/* preはソーステキストの改行をそのまま反映する書式。プログラムコードサンプルなどに使う  */

pre {
    overflow: auto;
    margin: 0px 10px 1em 1em;
    padding: 10px 10px 8px 15px ;

    font-size: 9pt;
    line-height: 12.5pt;
    white-space: pre-wrap;      /* CSS3 */
    word-wrap: break-word;      /* IE 5.5+ */

    text-shadow: none;
    background-color: rgb(245,245,250);

    border-top: 1px solid #BBB;	border-bottom: 1px solid #F9F9F9;
    border-left: 1px solid #999;	border-right: 1px solid #DDD;

    border-radius: 6px 6px 6px 6px;
}



/* ~~ ヘッダ全体を包含するクラス ~~ */

#cap {
    margin: 0 0 0 0;
    padding:0 0 0 0;

    background-color: hsla(28, 10%, 15%, 1); /* lighter theme */

    background-image: none;
    background-image: url(../image/halftone254g.png);
    background-position: top center;
    background-repeat: repeat;
    background-attachment: fixed;


    font-family: URW Palladio L, Optima, Futura LT Book, Futura, Candara, Myriad Pro, Calibri, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Arial, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
/*    text-shadow: -1px -1px 0.5px rgba(45, 45, 60, 0.8);*/

    border-bottom: 1px solid rgba(10, 10, 25, 0.05);
}

.header {
    font-weight: 200;
    color: rgba(240, 240, 245, 1);
    letter-spacing: 2px;
    width:auto;
    height: auto;
    float: none;
    margin: 0;
    padding: 10px 20px 10px 20px;
    clear: both; /* この clear プロパティにより .container は、カラムの範囲がどこまでかを認識してその範囲を含めるようになります。 */
    position:relative;

    border-top: 1px solid rgba(10, 10, 10, 0.11);
    border-bottom: 1px solid rgba(10, 10, 15, 0.31);
}

.header1L {
    font-weight: 200;
    position: absolute;
    margin:0;
    padding:0;
    font-size:22pt;
    line-height: 1em;
    width:auto;
    float:left;
    text-align: left;
}

.header1L:first-line {

}

.header1R {
    margin:0;
    width:auto;
    min-height:60px;
    font-size:11pt;
    line-height: 2em;
    float:right;
    text-align: right;
    font-variant: small-caps;

    background-image: url(../image/sudori166.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-bottom: 0;
    padding-right: 96px;
    background-size:83px 100px;
}


/* ~~ フッター ~~ */

.footer {
/*    color: #FFF;
    text-shadow: -1px -1px 1px rgba(45, 45, 60, 0.9);
*/
    margin: 0;
    padding: 16px 14px 0px 18px;

    text-align: left;
    line-height: 1.2em;
    border: none;

    position: relative;/* IE6 に、適切にクリアするための hasLayout を指定します。 */
    clear: both; /* この clear プロパティにより .container は、カラムの範囲がどこまでかを認識してその範囲を含めるようになります。 */

}


.footer a, .footer a:visited {
/*    color: #FFF;*/
}



/* ~~ その他の float/clear クラス ~~ */
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
    float: right;
    margin-left: 8px;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* clearixによるフロート解除 */
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:"";
    clear:both;
    height:0;
}
/* cleafix for ie7 */
.clearfix {
    display:inline-block;
}

.clearfix {
    display:block;
}