@CHARSET "UTF-8";

/* 險倬鹸險ｼ繝€繧ｦ繝ｳ繝ｭ繝ｼ繝峨し繧､繝育畑繧ｹ繧ｿ繧､繝ｫ繧ｷ繝ｼ繝� */

/*=======================================*/
/* margin, padding縺ｮ蛻晄悄蛹�               */
/*=======================================*/
* {
    margin: 0px;
    padding: 0px;
    border: none;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 14px;
    font-size: 1.4rem;
    color: #333;
    font-family: "Avenir Next", "Droid Sans", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", "繝｡繧､繝ｪ繧ｪ", "MS P繧ｴ繧ｷ繝�け", Verdana, Roboto, "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, Meiryo,  "Hiragino Kaku Gothic ProN", sans-serif;
    background-color: #ffffff;
}


/*=======================================*/
/* 繧ｹ繝槭�蟇ｾ蠢懃畑                          */
/*=======================================*/
article, aside, canvas, details, figcaption, figure, header, footer, main, menu, nav, section, summary {
    display: block
}

/*=======================================*/
/* img蜈ｱ騾夊ｨｭ螳�                           */
/*=======================================*/
img { border: none; }

/*=======================================*/
/* ul蜈ｱ騾夊ｨｭ螳�                            */
/*=======================================*/
ul { list-style-type: none; }

/*=======================================*/
/* a蜈ｱ騾夊ｨｭ螳�                             */
/*=======================================*/
a:link { text-decoration: none; }

h1, p { max-height: 100%; }

/*=======================================*/
/* #wrapper                              */
/*=======================================*/
#wrapper { width: 100%; }

/*=======================================*/
/* header                                */
/*=======================================*/
header {}

header h1 {
    background-color: #eee;
    font-size: 16px;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 10px;
    padding: 12px 0 7px; /* 荳� 蟾ｦ蜿ｳ 荳� */
}

header p {
    color: #333;
    margin: 0 15px;
    text-align: center;
}

header p:nth-of-type(1) {
    width: 800px;
    margin: 20px auto;
}

header p:nth-of-type(1) img { 
    width: 800px;
}

/*** 螟ｧ莨壼錐縺ｨ髢句ぎ譌･縺ｮ隕句�縺� ***/
header p:nth-of-type(2), header p:nth-of-type(4) {
    background-color: #f0f0f0;
    width: 800px;
    font-size: 14px;
    font-size: 1.4rem;
    color: #666;
    margin: 3px auto 5px;
    padding: 4px 0 3px;
    /*border-bottom: solid 2px #ddd;*/
}

/*** 螟ｧ莨壼錐縺ｨ髢句ぎ譌･ ***/
header p:nth-of-type(3), header p:nth-of-type(5) {
    /*background-color: #0f0;*/
    width: 800px;
    margin: auto;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
}

/*=======================================*/
/* #contents                             */
/*=======================================*/
#contents {
    /*background-color: #0f0;*/
    width: 800px;
    margin: 25px auto 20px;
    padding: 15px 0px;
    border: 2px solid #dddddd;
    background-color: #fafafa;
}

#contents p {
    text-align: center;
}

#contents p.caption {
    font-size: 11px;
    font-size: 1.1rem;
}

#contents p.no {
    font-size: 14px;
    font-size: 1.4rem;
    margin: 5px 0;
}

#contents p span.err {
    color: #f00;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 5px 0;
}


#contents form p:last-child {
    margin-top: 5px;
}

#contents form input[type=number] {
    width: 85px;
    padding: 5px 14px;
    font-size: 20px;
    font-size: 2.0rem;
    text-align: center;
    border: solid 1px #ddd;
}

#contents form input[type=submit] {
    width: 115px;
    padding: 13px 0 9px; /* 荳� 蟾ｦ蜿ｳ 荳� */
    /*font-family: "Avenir Next", "Droid Sans", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", "繝｡繧､繝ｪ繧ｪ", "MS P繧ｴ繧ｷ繝�け", Verdana, Roboto, "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, Meiryo,  "Hiragino Kaku Gothic ProN", sans-serif;*/
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    border: solid 1px #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background: -moz-linear-gradient(top, #fff, #eee);
    background: -ms-linear-gradient(top, #fff, #eee);
    cursor: pointer;
}

/*=======================================*/
/* footer                               */
/*=======================================*/
footer {
    width: 800px;
    margin: auto;
}

footer p {
    margin: 0 15px;
    text-align: center;
    font-size: 12px;
    font-size: 1.2rem;
    color: #666;
}

/* 繧ｦ繧｣繝ｳ繝峨え蟷�′0縲�479px縺ｮ蝣ｴ蜷医↓驕ｩ逕ｨ縺吶ｋCSS */
@media screen and ( max-width:479px ) {

    header p:nth-of-type(1), header p:nth-of-type(1) img,
    header p:nth-of-type(2), header p:nth-of-type(4),
    header p:nth-of-type(3), header p:nth-of-type(5) {
        width: 100%
    }

    /*** 螟ｧ莨壼錐縺ｨ髢句ぎ譌･縺ｮ隕句�縺� ***/
    header p:nth-of-type(2), header p:nth-of-type(4),
    header p:nth-of-type(3), header p:nth-of-type(5) {
        font-size: 14px;
        font-size: 1.4rem;
    }

    #contents {
        width: 99%;
        margin: 10px auto 20px;
    }

    footer {
        width: 100%;
    }

}