@charset "utf-8";
/* CSS Document */
body,h1,h2,h3,h4,h5,p,ul,li,form{
	margin:0;
	padding:0;
	list-style:none;
font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
body{
	margin:0;
	padding:0;
	color:#666;
	background:#F7F7F7;

}
body#login{
	background:#FFF;
}
a {
	color:#427FED;
	text-decoration:none;
}
.att {
  padding-left: 1em;
  text-indent: -1em;
}
label{
	width:100%;
	display:block;
	padding:6px;
	width:48px;
	line-height:1;
}
#wrapper{
	position:relative;
}
#header{
	height:80px;
	background:#FFF;
	border-bottom:1px solid #eee;
}
#login h1{
	text-align:center;
	padding:80px 0 30px 0;;
}
h1{
	text-align:center;
	padding:40px 0 30px 0;;
	font-size: 22px
}

/* ログイン */
#login form{
	background:#F7F7F7;
	width:325px;
	margin:0 auto 50px auto;
	padding:40px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
	border-left:1px solid #eee;
	border-right:1px solid #eee;
	box-shadow: 0px 7px 3px -3px #eee;
	-webkit-box-shadow: 0px 7px 3px -3px  #eee;
	-moz-box-shadow: 0px 7px 3px -3px  #eee;
	font-size:13px;
}
.err{
	color:#D90000 !important;
	padding:10px 0 !important;
}

input#login_btn{
	background-image:-moz-linear-gradient(50% 0% -90deg,rgb(77,144,254) 0%,rgb(48,121,237) 100%); 
	background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(77,144,254)),color-stop(1, rgb(48,121,237)));
	background-image:-webkit-linear-gradient(-90deg,rgb(77,144,254) 0%,rgb(48,121,237) 100%);
	background-image:-ms-linear-gradient(-90deg,rgb(77,144,254) 0%,rgb(48,121,237) 100%);
	background-image:linear-gradient(180deg,rgb(77,144,254) 0%,rgb(48,121,237) 100%);
	width:325px;
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff4d90fe,endColorstr=#ff3079ed,GradientType=0)";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff4d90fe,endColorstr=#ff3079ed,GradientType=0);
	border:none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	color:#FFF;
	font-weight:bold;
	padding:11px;
	line-height:1;
	border:1px solid #3079ED;
	margin-bottom:10px;
	font-size:14px;
}
#login form div input{
	line-height:1;
	padding:8px;
	width:307px;
	font-size:16px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	border:1px solid #ccc;
}


#header{
	height:80px;
}
#header .inner{
	width:1000px;
	position:relative;
	margin:0 auto;
}
#logo{
	position: absolute;
	top: 25px;
	left: 0px;
	width: 435px;
	
}
#logout{
	position:absolute;
	top:25px;
	right:0px;
	width:100px;
	text-align:right;
}
/* フッター */
#footer{
	text-align:center;
	border-top:1px solid #eee;
	font-size:12px;
	width:100%;
	padding:20px 0 10px 0;
	line-height:1;
	line-height: 170%
}
#container{
	width:90%;
	margin:0 5%;
}

.box{
	line-height:180%;
	padding:30px;
	background:#FFF;
	border:1px solid #ccc;
	margin-bottom:20px;
	box-sizing:border-box;
	position:relative;
}
.box2{
	line-height:180%;
	padding:30px;
	background:#FFF;
	border:1px solid #ccc;
	margin-bottom:20px;
	position:relative;
	margin-bottom:30px;
	box-sizing:border-box;
}
.box4{
	line-height:180%;
	padding:30px;
	background:#ECF9FB;
	margin:0 30px 30px 30px;
}
.box h2{
	padding:5px 0 5px 10px;
	margin:0 0 20px 0;
	border-left:4px solid #2AB0C2;
}
.box h2.t2{
	padding:5px 0 5px 10px;
	margin:0 0 20px 0;
	border-left:none;
	text-align:center;
}
#sbox{
	width:600px;
	margin:0 auto 40px auto;
}

#home_btn_area{
	width: 205px;
	position: absolute;
	right: 34px;
	top: 50px;
}
#home_btn_area a{
	display:block;
	text-align:center;
	background:#2AB0C2;
	color:#FFF;
	font-weight:bold;
	line-height:1;
	padding:12px;
    border-radius:25px;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
	border:2px solid #1DABBE;
	cursor: pointer;
}
a.btn{
	display:block;
	line-height:1;
	text-align:center;
	width:120px;
	background:#eee;
	padding:15px;
	border:2px solid #ccc;
}
hr {
   border:solid #ccc 1px;
   border-width:1px 0 0 0;
   height:1px;/* for IE6 */
   clear:both;/* for IE6 */
   margin-bottom:40px;
   margin-top:40px;
}
h3{
	padding:5px 0 5px 10px;
	margin:0 0 10px 0;
	border-left:4px solid #2AB0C2;
	font-size:18px
}
table.ta1{
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	width:100%;
	margin-bottom:40px;
}
table.ta1 th,table.ta1 td{

	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
}
table.ta1 td{

}
td.t2{
	text-align:center;
	width:48px;
	padding:6px;
}
td.ev{

}
.ta1 th{
	background:#EEF9FA;
	line-height:1.2;
	font-size:12px;
	word-break:break-all;
	text-align:center;
	padding:6px 2px 6px 2px !important;
	font-weight:normal;
}
td.sub_q{
	background:#EEF9FA;
	font-weight:bold;
	font-size:14px;
	line-height:1;
	padding:14px 10px !important;
}
input.btn_next{
	text-align:center;
	background:#2AB0C2;
	color:#FFF;
	font-weight:bold;
	line-height:1;
	padding:12px;
    border-radius:25px;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
	border:2px solid #1DABBE;
	cursor: pointer;
	padding:12px 20px;
}


table.ta2{
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	width:98%;
	margin-bottom:40px;
}
table.ta2 th,table.ta2 td{
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	font-size:14px;
}
table.ta1 td{

}


input.btn_gray{
	text-align:center;
	background:#666;
	color:#FFF;
	font-weight:bold;
	line-height:1;
	padding:12px;
    border-radius:25px;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
	border:2px solid #ddd;
	cursor: pointer;
	padding:12px 40px;
}
.back{
	padding:40px 0 20px 0;
	margin-top:30px;
	border-top:1px solid #eee;
	text-align:center;
}
ul.error{
	background:#FAE7E9;
	margin:0 0 25px 0;
	color:#E53B4E;
	padding:15px;
}

.btn1{
	text-align:center;
	background:#2AB0C2;
	color:#FFF;
	font-weight:bold;
	line-height:1;
	padding:12px;
    border-radius:25px;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
	border:2px solid #1DABBE;
	cursor: pointer;
	padding:12px 40px;
}
.ty{
	height:28px;
	text-align:left !important;
	font-size:16px !important;
	font-weight:bold !important;
}


.center{ text-align:center; }
.pt20{ padding-top:20px; }
.pt40{ padding-top:40px; }
.pb3{ padding-bottom:3px; }
.pb5{ padding-bottom:5px; }
.pb10{ padding-bottom:10px; }
.pb15{ padding-bottom:15px; }
.pb20{ padding-bottom:20px; }
.pb30{ padding-bottom:30px; }
.pb40{ padding-bottom:40px; }
.mb5{ margin-bottom:5px; }
.mb10{ margin-bottom:10px; }
.mb15{ margin-bottom:15px; }
.mb20{ margin-bottom:20px; }
.mb30{ margin-bottom:30px; }

#lang{
	padding:15px;
	margin-bottom:50px;
	text-align:center;
}
#lang a{
	color:#666;
	font-size:20px;
}
@media screen and (max-width: 640px) {
   #container { width: 100%; }
   .box, .box2 { padding: 15px; }
   .img-doui { width: 90%; height: auto; }
   #header { height: auto; padding: 10px 0; }
   #header .inner { width: 100%; box-sizing: border-box; padding: 0 15px; height: auto; display: flex; align-items: center; justify-content: space-between; }
   #logo { position: static; width: auto; }
   #logo img { width: auto; max-width: 240px; height: auto; }
   #logout { position: static; width: auto; }
}
@media screen and (min-width: 800px) {
   /* 表示領域が800px以上の場合に適用するスタイル */
   #container { width: 900px; margin:0 auto }
}

/* ラジオボタンカラー */
input[type="radio"] {
    accent-color: #2AB0C2;
}

/* チェック済み行・セルのハイライト (question.php) */
.table-scroll table.ta1 tr:has(input[type="radio"]:checked) td.t1 {
    background: #e2f5f7;
}
.table-scroll table.ta1 td.t2:has(input[type="radio"]:checked) {
    background: #c5eaee;
}

/* 選択済みセルのハイライト (confirm.php) */
.table-scroll table.ta1 td.t2.selected {
    background: #c5eaee;
}
.table-scroll table.ta1 tr:has(td.t2.selected) td.t1 {
    background: #e2f5f7;
}
.check-mark {
    font-size: 18px;
    color: #2AB0C2;
}

/* 回答カウンター */
#answer-counter {
    position: fixed;
    bottom: 20px;
    right: 16px;
    background: #2AB0C2;
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(42,176,194,0.45);
    z-index: 999;
    pointer-events: none;
    transition: background 0.3s;
}
#answer-counter.complete {
    background: #27ae60;
    box-shadow: 0 3px 10px rgba(39,174,96,0.45);
}

/* question.php table scroll wrapper */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}
.table-scroll table.ta1 {
    margin-bottom: 0;
    min-width: 420px;
}

@media screen and (max-width: 640px) {
    /* テーブルをブロック表示に切り替え */
    .table-scroll {
        overflow-x: visible;
    }
    .table-scroll table.ta1 {
        min-width: 0;
        border: none;
        margin-bottom: 0;
    }
    .table-scroll table.ta1,
    .table-scroll table.ta1 tbody {
        display: block;
        width: 100%;
    }

    /* PCヘッダー行は非表示 */
    .table-scroll .header-row {
        display: none !important;
    }

    /* 各質問行をカード化 */
    .table-scroll table.ta1 tr {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        border: 1px solid #ccc;
        border-radius: 8px;
        margin-bottom: 10px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

    /* サブ見出し行はカード不要 */
    .table-scroll .sub-row {
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        margin-bottom: 2px;
        margin-top: 10px;
    }

    /* 質問テキスト：上段に全幅で表示 */
    .table-scroll td.t1 {
        flex: 0 0 100%;
        box-sizing: border-box;
        width: auto;
        font-size: 13px;
        padding: 10px 12px;
        background: #f0f8f9;
        border-bottom: 1px solid #ccc;
        border-right: none;
    }

    /* ラジオボタンセル：4等分・高さ揃え */
    .table-scroll td.t2 {
        flex: 1;
        min-width: 0;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 10px 4px 10px;
        border-right: 1px solid #e8e8e8;
        border-bottom: none;
    }
    .table-scroll td.t2:last-child {
        border-right: none;
    }

    /* ラベルテキスト：flex:1 で上詰め、ラジオを底揃えにする */
    .table-scroll td.t2::before {
        content: attr(data-label);
        display: block;
        width: 100%;
        flex: 1;
        font-size: 10px;
        color: #777;
        text-align: center;
        line-height: 1.4;
        word-break: break-all;
        overflow-wrap: break-word;
        white-space: pre-line;
        margin-bottom: 8px;
    }

    /* ラジオボタン */
    .table-scroll td.t2 label {
        width: auto;
        padding: 2px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .table-scroll td.t2 input[type="radio"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #2AB0C2;
    }

    /* サブ見出しセル */
    .table-scroll td.sub_q {
        flex: 0 0 100%;
        box-sizing: border-box;
        width: auto;
        border-radius: 6px 6px 0 0;
    }
}