﻿

/*** for PC Browser ***/
@media (min-width:401px)
{
.program_quiz_top
{
	width: 100%;
}

.program_quiz_top .outside_top {
    font-size: 1% !important;
    height: auto;
    width: auto;
    position: relative;
    z-index: 10;
}

.program_quiz_top .outsize_title
{
	height: auto;
	width: auto;
	margin: 0px;
	text-align: left;
}

.program_quiz_top .outsize_title .Fix_header2
{
    background: url(../../../Images/water2024/quiz.png) no-repeat center top;
    height: 94px;
}

.program_quiz_top .outsize_bg {
    font-size: 1% !important;
    height: auto;
    width: 350px;
    background: #ffffff;
    border: 7px solid #00ACC5;
    border-radius: 10px 10px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    margin: -70px 35px 10px;
}

.program_quiz_top .outsize_bg .inside_top
{
	disply: none;
	font-size: 1% !important;
	height: 0px;
	width: auto;
}

.program_quiz_top .outsize_bg .inside_bg {
    background: none;
    padding: 80px 8px 5px;
    font-size: large;
}

.program_quiz_top .outsize_bg .inside_bg .Result
{
	text-align: center;
	font-size:xx-large;
}

.program_quiz_top .outsize_bg .inside_bg ul {
    list-style: none;
    margin: 10px 20px;
}

.program_quiz_top .outsize_bg .inside_bg ul li {
    padding: 10px 0;
    font-weight: bold;
}

.program_quiz_top .outside_bottom
{
	display: none;
	font-size: 1% !important;
	height: 0;
	width: auto;
}

/* コンテンツ */
.program_quiz_top .Question_block {
    background: no-repeat;
    display: block;
    min-height: 36px;
    height: auto !important;
    padding: 0;
    font-weight: bold;
}

.program_quiz_top .question_title
{
    background-color: #e0f4c8;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    font-weight: bold;
    margin: 0 0 2px;
    padding: 2px 5px;
}

.program_quiz_top .question_text
{
    padding: 0 0 0 5px;
}

.program_quiz_top .answer_title
{
    background-color: #eef8f9;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    font-weight: bold;
    margin: 10px 0 2px 0;
    padding: 2px 5px;
}

.program_quiz_top .answer
{
    padding: 0 0 0 5px;
}

.program_quiz_top .answer_comment_title
{
    background-color: #eeeeee;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    font-weight: bold;
    margin: 10px 0 2px 0;
    padding: 2px 5px;
}

.program_quiz_top .answer_comment
{
    padding: 0 0 0 5px;
}

#program_quiz_top #quiz_charactor
{
    margin:0px;
    text-indent: -9999px;
}

#program_quiz_top #quiz_subtitle
{
}

#QuizSendButton,
#QuizBackButton {
    border: none;
    background: #254779;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0 auto 10px;
    display: block;
}

.program_quiz_top .outsize_bg .inside_bg ul li > input {
    margin: 5px;
}

.program_quiz_top .outsize_bg .inside_bg ul li > label {
    width: 200px;
    display: inline-block;
    padding: 3px;
    cursor: pointer;
}
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
.program_quiz_top
{
	width: 100%;
}

.program_quiz_top .outside_top {
    font-size: 1% !important;
    height: auto;
    width: auto;
    position: relative;
    z-index: 10;
}

.program_quiz_top .outsize_title
{
	height: auto;
	width: auto;
	margin: 0px;
	text-align: left;
}

.program_quiz_top .outsize_title .Fix_header2
{
    background: url(../../../Images/water2024/quiz.png) no-repeat center top;
    height: 94px;
    background-size: 100%;
}

.program_quiz_top .outsize_bg {
    font-size: 1% !important;
    height: auto;
    width: 300px;
    background: #ffffff;
    border: 7px solid #00ACC5;
    border-radius: 10px 10px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    margin: -80px 5px 10px;
}

.program_quiz_top .outsize_bg .inside_top
{
	disply: none;
	font-size: 1% !important;
	height: 0px;
	width: auto;
}

.program_quiz_top .outsize_bg .inside_bg {
    background: none;
    padding: 80px 8px 5px;
    font-size: large;
}

.program_quiz_top .outsize_bg .inside_bg .Result
{
	text-align: center;
	font-size:xx-large;
}

.program_quiz_top .outsize_bg .inside_bg ul {
    list-style: none;
    margin: 10px 0px;
}

.program_quiz_top .outsize_bg .inside_bg ul li {
    padding: 10px 0;
    font-weight: bold;
}

.program_quiz_top .outside_bottom
{
	display: none;
	font-size: 1% !important;
	height: 0;
	width: auto;
}

/* コンテンツ */
.program_quiz_top .Question_block {
    background: no-repeat;
    display: block;
    min-height: 36px;
    height: auto !important;
    padding: 0;
    font-weight: bold;
}

.program_quiz_top .question_title
{
    background-color: #e0f4c8;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    font-weight: bold;
    margin: 0 0 2px;
    padding: 2px 5px;
}

.program_quiz_top .question_text
{
    padding: 0 0 0 5px;
}

.program_quiz_top .answer_title
{
    background-color: #eef8f9;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    font-weight: bold;
    margin: 10px 0 2px 0;
    padding: 2px 5px;
}

.program_quiz_top .answer
{
    padding: 0 0 0 5px;
}

.program_quiz_top .answer_comment_title
{
    background-color: #eeeeee;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    font-weight: bold;
    margin: 10px 0 2px 0;
    padding: 2px 5px;
}

.program_quiz_top .answer_comment
{
    padding: 0 0 0 5px;
}

#program_quiz_top #quiz_charactor
{
    margin:0px;
    text-indent: -9999px;
}

#program_quiz_top #quiz_subtitle
{
}

#QuizSendButton,
#QuizBackButton {
    border: none;
    background: #254779;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0 auto 10px;
    display: block;
}

.program_quiz_top .outsize_bg .inside_bg ul li > input {
    margin: 5px;
}

.program_quiz_top .outsize_bg .inside_bg ul li > label {
    width: 200px;
    display: inline-block;
    padding: 3px;
    cursor: pointer;
}
}
