@charset "utf-8";

:root {
  --form-width:800px;
}

* {font-size:16px; line-height:22px; box-sizing: border-box;}
a {word-break: break-all;}
.header {background-color:#00aaeb !important; color:#fff; padding:15px 10px; }
.header .h1 {line-height:20px; font-size:18px !important; font-weight:normal; text-align:center; text-shadow:none; color:#fff;}
.header .header_title {padding:0px 0px 0px 5px; font-size:14px; line-height:18px; height:44px; width:auto; text-align:left; display:flex; align-items:center;}
.header .header_title .title ruby rt {font-size:10px;}
.header #logout_btn {margin-top:4px;}

#next_before_btn {margin-top:20px;}
h2 {font-size:16px; line-height:24px; background:darkcyan; color:#fff; padding:10px 10px; text-shadow:none;}

.question_title {margin-bottom:10px; width:100%;}
.question_title td {font-size:15px;}
.error-message-top {border:2px solid crimson; margin:20px auto 10px auto; color:crimson; padding:10px 20px; text-shadow:none; font-weight:bold; font-size:14px; line-height:24px;}
.error-message {color:crimson; margin:0; font-weight:700; font-size:16px; line-height:20px;}
.error-message2 {color:crimson; margin:0; font-weight:700; font-size:16px; line-height:20px;}
.header-error-message {background-color:crimson; border-radius:5px; color:#fff; margin:0; font-weight:700; font-size:16px; line-height:24px; padding:10px 20px; text-shadow:none; }

.footer_text {max-width:250px; width:100%; padding:0; margin:40px auto 20px auto; text-align:center;}
.footer_text img {width:100%;}
#footer_copy {font-size:11px; color:#fff; padding:15px 10px; color:#999;
    font-weight:normal; text-shadow:none; text-align:center; background-color: initial !important; border:0;}


.question_title .div0 {margin-bottom:10px;}
.question_title .div1 {margin-top:10px;}
.span1 {color:red; font-weight:bold;}

#mainConentsForm .forms {min-width:300px; max-width:var(--form-width); margin:20px auto;background-color:#fff;padding:20px;margin-bottom:20px;
    border-radius:10px;box-shadow: 0px 0px 3px rgba(0,0,0,0.2);}

h2.surveyH2 {font-size:22px;padding:50px 20px 50px 20px;line-height:30px;margin-bottom:20px;background-color:#fff;font-weight:normal;border:1px solid #999; border-left:0px; border-right:0px;color:#000;border-radius:0px;}

#jumpDoctorForm {margin:0;padding:0;}
#jumpDoctorForm div.inner {width:300px; margin:0 auto; padding:0;}
#jumpDoctorForm div.inner div {margin:0; }

#progress * {font-size:15px; color:#333;}
#progress_page_number {padding:10px 0px;text-align:right;}
#progress, #progress_page_number {max-width:var(--form-width); width:100%;}
#progress_number {font-size:14px;}
#progress {margin:0px auto 0px auto;}
#progress #progress_status {text-align:left;}
#progress #out_bar {background-color:#fffcd1;width:100%; height:30px; text-align:left; ; box-shadow:0 0 4px rgba(0,0,0,0.2); border-radius:5px;}
#progress #out_bar #inner_bar {background-color:#00afc6; height:100%; width:0; border-radius:5px 0 0 5px;}
#progress_page_number {margin:0 auto;text-align:right;}
#progress .flex_display {display:flex; justify-content: space-between;}



#confirm_ans_data {margin:0 auto; max-width:var(--form-width); width:100%; border-collapse: collapse;}
#confirm_ans_data td, #confirm_ans_data th {border:1px solid #ccc; padding:10px;}

.edit_form  {display:flex; justify-content:flex-end; width:calc(100% - 4px);}
.edit_form .btn {padding:10px; width:140px; background:chocolate; border-radius:5px;
    color:#fff; text-align:center; cursor:pointer; text-shadow:none;
    margin-top:5px; }

.confirm_ans {padding:20px 20px; width:calc(100% - 6px); margin:0 auto; box-sizing:border-box;}
.confirm_ans .on {color:#000; font-weight:700; border:1px solid #333; padding:5px; margin:5px 0;}
.confirm_ans .off {color:#ccc; padding:0 5px;}
.confirm_ans .selected {margin:10px 0;}
.confirm_ans .selected:nth-of-type(1) {margin-top:0;}
.confirm_ans .selected:nth-last-of-type(1) {margin-bottom:0;}
.confirm_ans .sa.selected {margin:0;}


.dont_use_browser_bak {padding:20px 20px; border-radius:5px; max-width:var(--form-width); width:100%; font-size:13px; line-height:16px; font-weight:700;
    background:#f0f0f0; text-align:center; margin:20px auto 10px auto; color:#888; text-shadow:none;}
.dont_use_browser_bak div,
.dont_use_browser_bak div * {font-size:14px; line-height:16px;}
.dont_use_browser_bak div br {display: none;}
.dont_use_browser_bak div.line1 {color:darkcyan;}
.dont_use_browser_bak div.line2 {margin-top:5px;}
.dont_use_browser_bak div.line2 .strong {color:darkcyan;}
.dont_use_browser_bak br {/* display:none; */}
.ans_format {text-align:right; margin-top:10px;}



.question_title td.question span {text-decoration:underline;}
.question_title td.question,
.question_title td.question * {font-size:15px;}

/* .question_title td .q_number {border-bottom:1px solid #666; margin: 0 0 10px 0; padding:5px; text-align:left; width:100%; font-size:15px; line-height:30px;} */
.question_title td .q_number {display:inline-block; margin-right:5px;}
/* .question_title td .q_number::after {content:".";} */



.gutaitekini {margin-top:5px; font-size:16px;}

/* ruby */
#mainConentsForm ruby rb {font-size:16px;}
#mainConentsForm ruby rt {font-size:10px; }
.dont_use_browser_bak rt {font-size:10px; }
.footer_text rt  {font-size:10px; }

/* alert */
#alert_background {height:100%; width:100%; background-color:#000; position:fixed; left:0; top:0; z-index:100000;opacity:0.8;padding:0px;display:none;}
#alert_window{padding:40px 10px; background-color:#fff; display:none; z-index:100001; width:360px; position:fixed; top:50%; left:50%; margin-left:-180px; border-radius:5px; box-sizing:border-box;}
#alert_window #alert_message {color:#000;text-align:center;font-size:20px;font-size:15px;line-height:22px;margin-bottom:30px;}
#alert_window #alert_submit {cursor:pointer;color:#fff;width:120px;padding:10px;background-color:teal;text-align:center;margin:50px auto 0px auto;text-shadow:none;}
#alert_window #alert_back {cursor:pointer;color:#fff;width:120px;padding:10px;background-color:teal;text-align:center;margin:10px auto 0px auto;text-shadow:none;}

.ui-radio label {font-size:14px;}
.ui-checkbox label {font-size:14px;}



.option_deeptext {background-color:#f6f6f6; margin:-1px 0 10px 0; padding:0px 20px 0px 20px; border-radius:0 0 5px 5px; border:1px solid #ddd;}
.option_deeptext .text {margin:10px 0 20px 0; padding:0}


/* new q */
.q {width:100%;}
.q .qn {font-size:16px; line-height:22px;}
.q .qs {font-size:16px; line-height:22px; margin:5px 0 0 0;}

/* new 進む、戻るボタン */
.nav_buttons {display:flex; justify-content: space-between; align-items:center; padding:0 0 20px 0; margin:0px auto; max-width:var(--form-width); width:100%;}
.nav_buttons a {width:160px;}
.nav_buttons_first {justify-content: center;}


/* data-role="controlgroup"した場合に角が四角くなってしまうことの解消 */
/*
.ui-controlgroup .ui-first-child {
  border-top-left-radius: 0.5em !important;
  border-top-right-radius: 0.5em !important;
}
.ui-controlgroup .ui-last-child {
  border-bottom-left-radius: 0.5em !important;
  border-bottom-right-radius: 0.5em !important;
}
*/

#debug_data table {border-collapse:collapse; max-width:900px; width:100%; margin:20px auto; word-break:break-word;}
#debug_data table th, #debug_data table td {border:1px solid #ccc; padding:10px;}
#debug_data table th {background-color:#f0f0f0; width:20%;}

.answer_cars_count {border:0px solid #ccc; padding:20px; border-radius:5px; margin-bottom:20px; background-color:cornsilk;}


@media (max-width: 640px) {
    /* 横幅が640px以下の場合に適用するスタイル */
    .header .h1 {font-size:15px !important; text-align:left;}
    #mainConentsForm .forms {box-shadow: 0px 0px 0px rgba(0,0,0,0);border-radius:0px;margin:0px;}
    #progress {padding:0 20px; box-sizing:border-box;background-color:#fff;}
    #progress_page_number {background-color:#fff;}
    
    .dont_use_browser_bak {margin:0 auto; padding:10px 10px 15px 10px;}
    .dont_use_browser_bak br {display:initial;}
    .footer_text {padding:0 20px;}
    .nav_buttons {background-color:#fff; padding:0 20px 20px 20px}


    .dont_use_browser_bak div br {display: initial;}

    #progress * {font-size:13px;}
    #progress .flex_display {display:block;}


}
@media (min-width: 640px) {
/* 横幅が620px以上の場合に適用するスタイル */
}

@media print {
    .edit_form, .dont_use_browser_bak, #jumpDoctorForm, #progress,
    .thanks, .topbtn, #logout_btn, #next_before_btn {display:none}
    #mainConentsForm .forms {box-shadow:none; max-width:100%; width:100%;}
}