html {
    font-size : 150%; 
}
 
@media screen and (min-width : 1024px){
    html{ font-size : 100%;} 
}
 

/* ページ全体 */
* {
    font-family: sans-serif; 
    margin : 0 ;
    padding : 0 ;
}

/* body全体 */
body {
    text-align : center ;
    background-color:#000 ;
}

img{
     max-width: 100%;
     height: auto;
     display:block;
     margin-left: auto;
     margin-right: auto;
}

/* メールフォーム全体を囲うidタグ */
#contents_wrapper {
    width : 85% ;
    margin : 0 auto 30px ;
    padding : 20px 15px 0 ;
    background : #ffffff;
    border-left : 1px solid #b3b3b3 ;
    border-right : 1px solid #b3b3b3 ;
    border-bottom : 1px solid #b3b3b3 ;
}

/* 入力フォームを囲うclassタグ */
.setting_section {
    margin-bottom : 25px ;
}

/* ボタンを囲うclassタグ */
.button_box {
    clear : both ;
    padding : 8px ;
    text-align : center ;
}

/* 赤文字を表示するためのclassタグ */
.red_txt {
    color: #ff3333;
}

/* 左詰の文字を表示するためのclassタグ */
.left_txt {
    text-align : left;
}

/* 説明文を表示するためのidタグ */
#txt_explain {
    color: #000000;
}

/* コンテンツ内の[p]タグ */
#contents p {
    margin-bottom : 1rem ;
    text-align : left ;
}

/* コンテンツ内の[h3]タグ */
#contents h3 {
    border-left : 10px solid #ff6600;
    border-bottom : 1px solid #ff6600;
    color: #ff6600;
    padding : 5px 10px 5px 6px ;
    text-align : left ;
    font-size : 1.5rem ;
    margin-bottom : 10px ;
}

/* コンテンツ内の内部タグ */
#contents .inner {
    padding : 0 15px ;
}

/* コンテンツ内のフォームに使用する[table]タグ */
#contents table {
    width : 100% ;
    border-collapse : collapse ;
    border-left : 1px solid #b3b3b3 ;
    border-top : 1px solid #b3b3b3 ;
    border-right : none ; 
    border-bottom : none ;
}

/* コンテンツ内のフォームに使用する[th]タグ */
#contents table th {
    border-right : 1px solid #b3b3b3 ;
    border-bottom : 1px solid #b3b3b3 ;
    border-top : none ; 
    border-left : none ;
    background : #444444;
    color: #ffffff;
    padding : 3px 5px ;
}

/* コンテンツ内のフォームに使用する[td]タグ */
#contents table td {
    border-right : 1px solid #b3b3b3 ;
    border-bottom : 1px solid #b3b3b3 ;
    border-top : none ; 
    border-left : none ;
    padding : 3px 5px ;
    text-align : left ;
}

/* フォーム全体 */
#main_table * {
	font-family : sans-serif ;
    font-size : 1.25rem ;
}

/* フォーム内の入力欄 */
#main_table input {
    width : 100% ;
}

/* フォーム内の入力欄 */
#main_table textarea {
    width : 100%  ;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* フォームのボタン */

.button_box input{
    padding: 15px 80px;
   font-size:2em;
    color: #fff;
    background-color: #000;
    border-style: none;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

input[type="radio"] {
    position: relative;
    -webkit-appearance: button;
    appearance: button;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    content: "";
    background-color: #FFFFFF;
    border: 1px solid #999999;
    -webkit-border-radius: 24px;
    border-radius: 24px;
    -webkit-box-shadow: inset 4px 4px 10px rgba(0,0,0,0.2);
    box-shadow: inset 4px 4px 10px rgba(0,0,0,0.2);
    vertical-align: middle;
    cursor: pointer;
}

input[type="radio"]:checked:after {
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    content: "";
    width: 12px;
    height: 12px;
    background: #CC0000;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* klee全体を囲うidタグ */
#wrapper {
    width : 95%;
    margin : 0 auto 30px ;
    padding : 20px 15px 0 ;
}


#main h1 {
font-size:3em; 
letter-spacing: 10px; 
margin: 10px;  
color: #f3f5f8; 
display: inline-block; 

}

#main h2{
font-size:2em; 
margin: 10px;  
color: #C9C9B5; 
display: inline-block; 
text-align : center;

}
#main p {
font-size:1em; 
letter-spacing: 0px; 
margin: 0px;  
color: #ffffff; 
display: inline-block; 
text-align : left;

}

#left {
 margin-left: auto;
 margin-right: auto;
font-size:100%; 
color: #ffffff; 
text-align : left;
}

#bold { 
list-style: none;
color: #FFFF00;
font-size:1.5em;
text-align: left;
}

#sample{
background-color:#222 ;
font-size:0.85em 
color: #CCC; 
text-align : left;
}

#yellow{ 
list-style: none;
color: #FFFF00;
font-size:1em;
text-align: left;
}