@charset "utf-8";

* {
	box-sizing: border-box;
}
.questionnaire2{background: #f6f6f6; padding:40px 60px;}
.questionnaire2 h2{margin-bottom: 20px;}
.questionnaire2 table{background: #fff; border: 1px solid #eaeaea}

.questionnaire2 button{background: #999; color: #fff; padding: 8px 30px; border:none; margin-top: 20px; font-size: 12px;}
.questionnaire2 button:hover{background: #000;}
.questionnaire2 div{text-align: left;}
.questionnaire2_list{display: none;}

@media screen and (max-width:640px) {
header h1,footer h1{font-size: 15px;}
#top .info ul.li_info,#top .report ul.li_report{width: 100%;}
ul.li_info li .data,ul.li_info li h4{float: none; width:100%;}
ul.li_report li i{width: 15%; font-size: 40px;}
ul.li_report li h4{float: right; width: 85%;}
#top .about table th,#top .about table td{text-align: left; padding:10px 20px; display: block;}
#top .about table th{background:#f6f6f6;}
.questionnaire2{padding:30px 20px;}
.questionnaire2 table th{text-align: left;padding:20px 20px 10px 20px;}
.questionnaire2 table td{padding: 0 20px;}
.questionnaire2 table td .wpcf7-list-item {display: block;}
}
h1#form-title {
    position: absolute;
    width: 100%;
    top: 60%;
    left: 0;
    transform: translate(0,-50%);
    font-weight: 700;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 40%);
}
p{
	padding:0 1.6em 1.7em;
}/*
ul,ul > li {
	margin-left: 0.8em;
	margin-bottom: 1.7em;
}*/



@media screen and (max-width:800px){
	body {
		background-size:100% auto;
	}
	h1#form-title {
		font-size:16px;
	}
}
header {
	margin-bottom: 0;
}
.archive_ttl {
	position: absolute;
	width: 100%;
	top: 23%;
}
#header-image {
	width: 100%;
	height: auto;
}


.questionnaire2 .Required {
	position: relative;
	top: -3px;
	color: red;
	font-size: 8px;
	font-Weight: 700;
	border: 1px solid red;
	padding: 5px 4px 2px 5px;
	line-height: 1em;
	margin-right: 10px;
}
.questionnaire2 .inputtitle {
	width: 180px;
	vertical-align: text-bottom;
	padding-top: 18px;
}
.questionnaire2 table {	width:100%;}
.questionnaire2 table th,.questionnaire2 table td {	padding: 10px;}
.questionnaire2 input {
	position: relative;
	top: -3px;
}
.questionnaire2 input:not([type="checkbox"]):not([type="radio"]), .questionnaire2  textarea, .questionnaire2  select {
	border-radius: 7px;
	padding: 2px 7px 2px 7px;
}
.questionnaire2 input:([type="checkbox"]),
.questionnaire2 input:([type="radio"]) {
	margin-bottom: 9px;
}
input[type="email"] {
	width: 100%;
}
textarea {
	width: 100%;
	height: 100px;
}
.questionnaire2 .lefts {
	display: inline-block;
	padding-top: 6px;
}
#Agree {
	border: 1px solid #000;
	padding: 10px;
	border-radius: 10px;
	margin-top: 1.7em;
}
.questionnaire2 *[name="Agree"] + label {
	display: inline-block;
	position: relative;
	overflow: hidden;
	width:84px;
}
.questionnaire2 *[name="Agree"] + label div {
	position: relative;
	display: block;
	top: 7px;
	left: 0;
	transition: 0.5s;
}
.questionnaire2 *[name="Agree"] + label::before {
	content: '同意しました';
	position: absolute;
	top: 14px;
	left: 100%;
	display: block;
	width: 100%;
	transition: 0.5s;
}
.questionnaire2 *[name="Agree"]:checked + label div {
	left: -100%;
}
.questionnaire2 *[name="Agree"]:checked + label::before {
	left:0%;
}
input[name="submit"] {
	cursor: pointer;
	transition: 0.5s;
}
input[disabled] {
	cursor: auto;
	opacity: 0.3;
}
.CheckedOpen {
	height:0;
	overflow:hidden;
}
input:checked + .CheckedOpen,
input:checked + * + .CheckedOpen,
input:checked + * + * + .CheckedOpen ,
input:checked + * + * + * + .CheckedOpen {
	height:auto;
	border-left: 4px solid #AFA;
	padding: 5px 10px;
}


@media screen and (max-width:800px){
	.questionnaire2 .inputtitle {
		width: 100%;
	}
	table,tbody,tr,td,th {
		display: block;
	}
	table,
	.questionnaire2 table {
		border-left  : 2px solid #77FF77;
		border-right : 2px solid #77FF77;
		border-bottom: 2px solid #77FF77;
	}
	th {
		border-top: 2px solid #77FF77;
	}
	td {
		border-top: 1px solid #77FF77;
	}
}