input[type="button"] {
	-webkit-appearance: none;
	border-radius: 0;
}

/*
    変数
*/
:root {
    --code-baclground-color : rgb(242, 242, 255) ;
     
}
  


/*基本-------------------------------------------------------------------------------------------*/



/*画像クラス : img タグに適用 (直前に <br> がある必要がある)*/
.StandardImageStyle{
    width : 100% ; 
}




/*コードなどのプレビュー(背景の色が灰色)-------------------------------------------------------------------------------------------*/
pre{
    border-radius: 3px;
    box-sizing: border-box;
    border: 1px dashed gray;
    
	color : black;
	font-size: 12px; 
    line-height: 15px; /*これぐらいがちょうどいい*/
	padding: 10px;
	overflow-x: scroll;
    background-color: var(--code-baclground-color);
}

/* code タグ */
code{
    border-radius: 3px;
    box-sizing: border-box;
    border: 1px dashed gray;

    padding: 1px;
    font-size: 12px; 
    color : black;
    overflow-x: scroll;
    background-color: var(--code-baclground-color);
}



pre b{
	color: rgb(130, 135, 130);
}


/*文章をちょっと丸い枠で囲む*/
/*soft tag -> sftg*/
sftg{
    box-sizing: border-box;
    pointer-events: none;/*クリックの挙動を親要素依存にする*/
    display: inline-block;/*改行の制御*/
    color: gray;
    background-color: white;
    font-size: 8px;
    padding-left: 3px;
    padding-right: 3px;
    border: solid 1px gray;
    border-radius: 8px;
}



/*
    箇条書きなどで、タイトル + 説明を書く場合のタイトル部分
*/
groupblock{
    border: 1px solid black;
    padding: 2px;
    box-sizing: border-box;
}



/*
	下線付き見出しdivクラス
*/
.TitleLine{
	
	border-bottom: solid 1px rgb(147, 163, 234);
	color: rgb(147, 163, 234) ;
	padding-bottom: 7px;
}





/*------------------------------------------------------------------------------------------*/
/*---------------------------------{トグルボタン}---------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

/*
    トグルボタンの構成は以下。
    <div class = "toggleButtonField" onclick = "togglebutton(event)" id = "ボタン識別id">
        <div class = "toggleButton"></div>
    </div>
    <div class = "toggleButtonTitle"> ボタンタイトル </div>

    javascript に togglebutton 関数を定義し、event を検知して、getElementById(e.id) の子要素のアニメーションを実行する。
    子要素のクリック event は感知しないようにする。
*/


/*トグルボタンに関する処理のラッパ*/
.toggleButtonField{
    position: relative;
    margin-left:10px;
    margin-right:10px;
    box-sizing: border-box;
    border-radius: 7px;
    float: left;/* Title で解消する*/
    width:24px;
    height:14px;
    border:solid 2px gray;
    background-color: white;
    /*
        トグルボタンの状態は Field が持つ
        z-index の値を boolean に対応づける
    */
    z-index:0;
}
.toggleButtonField:hover{
    border:solid 2px black;
}
.toggleButtonField .toggleButton{
    pointer-events: none;/*クリックの処理は toggleButtonField に任せる*/
    display:inline-block;
    position: relative;
    width:10px;
    height: 100%;
    top: 0%;
    left: 0%;
    box-sizing: border-box;
    border-radius: 6px;
    /*ボタンがオフの状態 (デフォルト) */
    left: 0%;
    background-color: white;
    border: solid 2px gray;
}
/*トグルボタンをオンにする*/
@keyframes toggleButton_ON {
    0%{/*ボタンがオフの状態*/
        left: 0%;
        background-color: white;
        border: solid 2px gray;
    }100%{/*ボタンがオンの状態*/
        left: 50%;
        background-color: gray;
        border: solid 2px white;
    }
}

/*トグルボタンをオフにする*/
@keyframes toggleButton_OFF {
    0%{/*ボタンがオンの状態*/
        left: 50%;
        background-color: gray;
        border: solid 2px white;
    }100%{/*ボタンがオフの状態*/
        left: 0%;
        background-color: white;
        border: solid 2px gray;
    }
}

/*トグルボタンに付加するタイトル*/
.toggleButtonTitle{
    margin-right: 10px;  
    float: none;/*Field の float を解消*/   
}