@charset "UTF-8";

/* CSS INFORMATION -================================================= */
/* File name : enquete.css */
/* Description : Tverアンケート */
/* ================================================================== */

/* =====================================================================
*    popup
* =================================================================== */
.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	/*    display: none;*/
}

.popup_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
}

.popup_area {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.popup_inner {
	position: relative;
	width: 89.33%;
	width: calc(670 / 750 * 100%);
	margin: 0 auto;
	padding: 11% 0 0;
}

.popup_close {
	position: absolute;
	width: 100%;
	margin: -30px 0 0;
	/*    margin: -8% 0 0;*/
}

.popup_close::before,
.popup_close::after {
	content: "";
	display: block;
	width: 2px;
	padding-top: 8%;
	background-color: #c9c9c9;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin: 0 3% 0 auto;
}

.popup_close::after {
	position: absolute;
	top: 0;
	right: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.popup_details {
	width: 100%;
	height: 100%;
	padding: 8.96% 4.48%;
	padding: calc(60 / 670 * 100%) calc(30 / 670 * 100%);
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 calc(20 / 750 * 100vw) rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 calc(20 / 750 * 100vw) rgba(0, 0, 0, 0.3);
}

.popup_details_ttl {
	margin: 0 0 4.92%;
	margin: 0 0 calc(30 / 610 * 100%);
}

.popup_details_ttl img {
	width: 35.25%;
	width: calc(215 / 610 * 100%);
	margin: 0 auto 3.28%;
	margin: 0 auto calc(25 / 610 * 100%);
}

.popup_details_ttl p {
	color: #646464;
	font-size: 3.6rem;
	font-weight: 700;
	text-align: center;
}

form > div:last-child {
	padding: 0;
	margin: 6.56% 0 0;
	margin: calc(40 / 610 * 100%) 0 0;
	border-bottom: 0;
}

.form_group {
	padding: 0 0 6.56%;
	padding: 0 0 calc(40 / 610 * 100%);
	margin: 0 0 4.1%;
	margin: 0 0 calc(25 / 610 * 100%);
	border-bottom: 1px solid #eee;
}

.form_group2 {
	padding: 0 0 3%;
}

.form_label {
	display: block;
	margin: 0 0 2.46%;
	margin: 0 0 calc(15 / 610 * 100%);
	color: #f39700;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.5;
}

.form_label_small {
	font-size: 2.4rem;
}

.form_radio {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.form_radio_col2 {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.form_radio input {
	display: none;
}

.form_radio span::before,
.form_radio span::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	width: calc(32 / 750 * 100vw);
	height: 16px;
	height: calc(32 / 750 * 100vw);
	margin: 0 11.43% 0 0;
	margin: 0 calc(32 / 280 * 100%) 0 0;
	border: 2px solid #a1a1a1;
	border-radius: 50%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	top: 0.1em;
	left: 0;
	bottom: 0;
	margin: auto;
}

.form_radio_col2 span::before {
	background-color: #f2f2f2;
}

.form_radio span::after {
	display: none;
	width: 10px;
	width: calc(20 / 750 * 100vw);
	height: 10px;
	height: calc(20 / 750 * 100vw);
	background-color: #f39700;
	border: none;
	border-radius: 50%;
	left: 3px;
	left: calc(6 / 750 * 100vw);
}

.form_radio input:checked + span::before {
	border-color: #f39700;
}

.form_radio input:checked + span::after {
	display: inline-block;
}

.form_radio label {
	display: block;
	width: 45.9%;
	width: calc(280 / 610 * 100%);
	padding: 2.95%;
	padding: calc(18 / 610 * 100%);
	background-color: #f2f2f2;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

#tver_enquete .form_radio {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

#tver_enquete .form_radio label:first-of-type,
#tver_enquete .form_radio label:nth-of-type(2) {
	width: 25%;
	margin-bottom: 3%;
}

#tver_enquete .form_radio label:nth-of-type(3) {
	width: 40%;
	margin-bottom: 3%;
}

#tver_enquete .form_radio label:nth-of-type(4) {
	width: 50%;
}

#tver_enquete .form_radio label span {
	padding: 0 0 0 2em;
}

.form_radio_col2 label {
	width: 50%;
	background-color: transparent;
	border: 0;
}

.form_radio label span {
	padding: 0 0 0 26.64%;
	padding: 0 0 0 calc(65 / 244 * 100%);
	color: #646464;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.2;
}

.form_radio_col2 label span {
	padding: 0 0 0 16%;
	font-size: 2.6rem;
	font-weight: 400;
	display: block;
}

.form_radio input:checked + span {
	color: #333;
}

.form_checkbox {}

.form_checkbox input {
	display: none;
}

.form_checkbox span::before,
.form_checkbox span::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	width: calc(32 / 750 * 100vw);
	height: 16px;
	height: calc(32 / 750 * 100vw);
	margin: 0 11.43% 0 0;
	margin: 0 calc(32 / 280 * 100%) 0 0;
	border: 2px solid #a1a1a1;
	background-color: #f2f2f2;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	top: 0.1em;
	left: 0;
	bottom: 0;
	margin: auto;
}

.form_checkbox span::after {
	display: none;
	width: 12px;
	width: calc(24 / 750 * 100vw);
	height: 6px;
	height: calc(12 / 750 * 100vw);
	border: 0;
	border-left: 2px solid #f2f2f2;
	border-bottom: 2px solid #f2f2f2;
	background-color: transparent;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: -2px;
	top: calc(-4 / 750 * 100vw);
	left: 2px;
	left: calc(4 / 750 * 100vw);
}

.form_checkbox input:checked + span::before {
	border-color: #f39700;
	background-color: #f39700;
}

.form_checkbox input:checked + span::after {
	display: inline-block;
}

.form_checkbox label {
	display: block;
	padding: 2.95% 0;
	padding: calc(18 / 610 * 100%) 0;
}

.form_checkbox label span {
	padding: 0 0 0 9.52%;
	padding: 0 0 0 calc(65 / 683 * 100%);
	color: #8f8f8f;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
}

.form_checkbox input:checked + span {
	color: #333;
}

.form_input input {
	width: 100%;
	padding: 3.11%;
	padding: calc(19 / 610 * 100%);
	background-color: #f2f2f2;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	font-size: 2.8rem;
}

.form_input input::-webkit-input-placeholder {
	color: #a7a7a7;
}

.form_input input:-ms-input-placeholder {
	color: #a7a7a7;
}

.form_input input::placeholder {
	color: #a7a7a7;
}

.form_txt {
	margin: 1.64% 0 -1.64%;
	margin: calc(10 / 610 * 100%) 0 calc(-10 / 610 * 100%);
	color: #a1a1a1;
	font-size: 2.4rem;
	line-height: 1.5;
}

.form_btn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.form_btn li::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin: 4px 0 0;
	margin: calc(8 / 750 * 100vw) 0 0;
}

.form_btn1 {
	width: 26.89%;
	width: calc(164 / 610 * 100%);
}

.form_btn2 {
	width: 68.85%;
	width: calc(420 / 610 * 100%);
}

.form_btn button {
	width: 100%;
	padding: 9px;
	padding: calc(19 / 750 * 100vw);
	color: #fff;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-align: center;
}

.form_btn1 button {
	background-color: #bababa;
}

.form_btn2 button {
	background-color: #f39700;
}

li.form_btn1::before {
	background-color: #dbdbdb;
}

li.form_btn2::before {
	background-color: #fabe00;
}

.form_btn_txt {
	margin: 6.56% 0 0;
	margin: calc(40 / 610 * 100%) 0 0;
	text-align: center;
}

.form_btn_txt a {
	display: inline-block;
	color: #8f8f8f;
	font-size: 2.8rem;
	line-height: 1;
}

.form_btn_txt a::after {
	content: "";
	display: block;
	width: 100%;
	margin: 0.4em 0 0;
	border-bottom: 1px solid #8f8f8f;
}

.form_txt_error {
	color: #E60012;
	display: none;
}

#loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.loading_message img {
	width: 60%;
	width: calc(450 / 750 * 100%);
	margin: 0 auto 3.28%;
	margin: 0 auto calc(20 / 610 * 100%);
}

@media screen and (min-width:768px) {
	.popup_bg {
		cursor: pointer;
	}

	.popup_area {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.popup_inner {
		width: calc(940 / 1100 * 100%);
		max-width: 940px;
		margin: auto;
		padding: calc(60 / 1100 * 100%) 0 0;
		-ms-flex-item-align: start;
		align-self: flex-start;
	}

	.popup_close {
		cursor: pointer;
		margin: -4.5% 0 0;
	}

	.popup_close::before,
	.popup_close::after {
		padding-top: 4.3%;
		margin: 0 1.5% 0 auto;
	}

	.popup_close:hover::before,
	.popup_close:hover::after {
		opacity: 0.7;
	}

	.popup_details {
		padding: calc(15 / 940 * 100%) calc(30 / 940 * 100%);
	}

	.popup_details_inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.popup_details_ttl {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		margin: 0 0 calc(17 / 880 * 100%);
	}

	.popup_details_ttl img {
		width: calc(112 / 880 * 100%);
		margin: 0 calc(20 / 880 * 100%) 0 0;
	}

	.popup_details_ttl p {
		font-size: 1.8rem;
	}

	.form_group {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		/*
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
*/
		padding: 0 0 calc(15 / 800 * 100%);
		margin: 0 0 calc(15 / 800 * 100%);
	}

	.form_group2 {
		padding: 0 0 calc(10 / 800 * 100%);
		margin: 0 0 calc(10 / 800 * 100%);
	}

	form > div:last-child {
		margin: 0;
	}

	.form_label {
		width: calc(115 / 800 * 100%);
		margin: calc(7 / 800 * 100%) 0 0;
		font-size: 1.8rem;
	}

	.form_group2 .form_label {
		width: 50%;
		-ms-flex-item-align: start;
		align-self: flex-start;
		padding: 0 2em;
		line-height: 2;
		margin: auto 0;
	}

	.form_label_small {
		font-size: 1.4rem;
	}

	.form_radio {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		/*        width: calc(685 / 800 * 100%);*/
		width: calc(316 / 800 * 100%);
		margin: 0 calc(15 / 800 * 100%) 0 0;
	}

	.form_radio_col2 {
		width: 50%;
		margin: 0;
	}

	.form_radio label {
		width: calc(147 / 316 * 100%);
		margin: 0 calc(22 / 316 * 100%) 0 0;
		padding: calc(9 / 316 * 100%) calc(15 / 316 * 100%);
		cursor: pointer;
	}

	#tver_enquete .form_radio {
		width: calc(670 / 800 * 100%);
	}

	#tver_enquete .form_radio + .form_txt {
		width: calc(685 / 800 * 100%);
		margin: 0 0 0 auto;
	}

	#tver_enquete .form_radio label {
		margin: 0 calc(22 / 670 * 100%) 0 0;
		padding: calc(9 / 670 * 100%) calc(15 / 670 * 100%);
	}

	#tver_enquete .form_radio label:first-of-type,
	#tver_enquete .form_radio label:nth-of-type(2) {
		width: 15%;
		margin-bottom: 0;
	}

	#tver_enquete .form_radio label:nth-of-type(3) {
		width: 20%;
		margin-bottom: 0;
	}

	#tver_enquete .form_radio label:nth-of-type(4) {
		width: 30%;
	}

	#tver_enquete .form_radio + .form_txt .form_txt_error {
		margin: calc(15 / 800 * 100%) 0 0;
	}

	.form_radio_col2 label {
		width: 50%;
		margin: 0;
		padding: calc(6 / 316 * 100%) 0;
	}

	.form_radio label:last-child {
		margin-right: 0;
	}

	.form_radio label span {
		font-size: 1.6rem;
	}

	.form_radio_col2 label span {
		font-size: 1.3rem;
		padding: 0 0 0 12%;
	}

	.form_radio span::before {
		width: calc(18 / 1100 * 100vw);
		height: calc(18 / 1100 * 100vw);
	}

	.form_radio span::after {
		width: calc(10 / 1100 * 100vw);
		height: calc(10 / 1100 * 100vw);
		left: calc(4 / 1100 * 100vw);
	}

	.form_checkbox {
		width: calc(316 / 800 * 100%);
		margin: 0 calc(15 / 800 * 100%) 0 0;
	}

	.form_checkbox label {
		width: calc(147 / 316 * 100%);
		padding: calc(9 / 316 * 100%) 0;
		cursor: pointer;
	}

	.form_checkbox label:last-child {
		margin-right: 0;
	}

	.form_checkbox label span {
		padding: 0 0 0 calc(20 / 147 * 100%);
		font-size: 1.6rem;
	}

	.form_checkbox span::before {
		width: calc(18 / 1100 * 100vw);
		height: calc(18 / 1100 * 100vw);
	}

	.form_checkbox span::after {
		width: calc(12 / 1100 * 100vw);
		height: calc(6 / 1100 * 100vw);
		top: 0;
		left: calc(3 / 1100 * 100vw);
	}

	.form_input {
		width: calc(316 / 800 * 100%);
		margin: 0 calc(15 / 800 * 100%) 0 0;
	}

	.form_input input {
		padding: calc(8 / 316 * 100%) calc(12 / 316 * 100%);
		font-size: 1.6rem;
	}

	.form_txt {
		width: calc(340 / 800 * 100%);
		margin: 0;
		font-size: 1.6rem;
	}

	.form_group2 .form_txt {
		width: 50%;
		margin: 0.5em 0 0 auto;
		font-size: 1.4rem;
	}

	.form_radio_col2 .form_txt {
		width: 100%;
	}

	.form_btn {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 100%;
	}

	.form_btn1 {
		width: calc(100 / 800 * 100%);
		margin: 0 calc(13 / 800 * 100%) 0 0;
	}

	.form_btn2 {
		width: calc(234 / 800 * 100%);
	}

	.form_btn button {
		padding: calc(10 / 1100 * 100vw);
		font-size: 1.6rem;
		top: 0;
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.form_btn button:hover {
		top: 0.455vw;
	}

	.form_btn li::before {
		margin: calc(4 / 1100 * 100vw) 0 0;
	}

	.form_btn_txt {
		width: 100%;
		margin: calc(30 / 800 * 100%) 0 0;
	}

	.form_btn_txt a {
		font-size: 1.4rem;
	}

	.form_btn_txt a::after {
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.form_btn_txt a:hover::after {
		opacity: 0;
	}
}

@media screen and (min-width:1100px) {
	.popup_inner {
		padding: 60px 0 0;
	}

	.popup_close_inner {
		padding-top: 80px;
	}

	.form_radio span::before {
		width: 18px;
		height: 18px;
	}

	.form_radio span::after {
		width: 10px;
		height: 10px;
		left: 4px;
	}

	.form_checkbox span::before {
		width: 18px;
		height: 18px;
	}

	.form_checkbox span::after {
		width: 12px;
		height: 6px;
		left: 3px;
	}

	.form_btn button {
		padding: 10px;
	}

	.form_btn button:hover {
		top: 5px;
	}

	.form_btn li::before {
		margin: 4px 0 0;
	}
}