@charset "utf-8";

/*----------------------------------------------------------------
 global styles
----------------------------------------------------------------*/
#contents a{ text-decoration: underline; }
#contents ol li,
#contents ul li{ list-style: none; }

/*-----------------------------------------------------
 section
-----------------------------------------------------*/
#contents .section{ padding: 30px 0 40px 0; }
@media screen and (min-width: 769px) {
#contents .section{ padding: 40px 0 80px 0; }
}

/*-----------------------------------------------------
 title
-----------------------------------------------------*/
#contents .title{ margin: 0 0 30px 0; }
@media screen and (min-width: 769px) {
#contents .title{ margin: 0 0 40px 0; }
}

/*-----------------------------------------------------
 row
-----------------------------------------------------*/
@media screen and (min-width: 769px) {
#contents .row{
	flex-wrap			: wrap;
	justify-content		: space-between;
}
}



/*-----------------------------------------------------
 form-content
-----------------------------------------------------*/
#contents .form-content{ padding: 40px 20px; }
#contents .container>.form-content{ padding-top: 20px;}

#contents .form-content .hints>li:not(:last-child){ margin: 0 0 calc(var(--line-height) * 1em); }
#contents .form-content .hints>li>p{
	padding-left		: 1em;
	text-indent			: -1em;
}
#contents .form-content h2 {
	margin: 0 0 40px 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--text-color);
	text-align: center;
}
#contents .form-content .attention{
	color: #FF0000;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
}

@media screen and (min-width: 769px) {
#contents .form-content{
	margin				: 0 auto;
	width				: 660px;
	padding				: 55px 0;

}
#contents .form-content h2 {
	font-size: 2.6rem;
}
}


/*-----------------------------------------------------
 form
-----------------------------------------------------*/
#contents .form{
	border-radius		: 20px;
	background			: var(--invert-text-color);
	color				: #000;
}
#contents .form dl	{ margin: 0 0 10px 0; }

#contents .form .error{
	color: #000;
	border: 1px solid var(--base-color);
	padding: 15px;
	margin: 20px 0;
	font-size: 0.8em;
}
#contents .form .error ul{
	color: red;
	margin: 15px 0 0 0; 
}
#contents .form .error ul>li::before{
	content: "・";
}
#contents .form dl .error{
	color: red;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	border: 0;
}

@media screen and (min-width: 769px) {
#contents .form		{ border-radius: 50px; }
#contents .form dl	{ margin: 0 0 15px 0; }
}

#contents .form .required{ color: red; }
#contents .form input[type="text"],
#contents .form input[type="email"],
#contents .form input[type="tel"],
#contents .form textarea{
	border				: none;
	width				: 100%;
	padding				: 2px;
	background			: #eeeeee;
	font-size			: 16px;
}
#contents .form input[type="radio"]{ margin: 0 5px 0 0; }

#contents .form .confirm{
	margin: 20px 0;
}
#contents .form .confirm dd{
	border: 1px solid var(--base-color);
	padding: 0.5em;
}

#contents .form .submit{ margin: 50px 0 20px 0; }
#contents .form .return{
	margin: 20px 0 50px 0;
}
#contents .form .return .btn{ background: var(--text-color); }
#contents .form .note{
	margin				: 0 0 20px 0;
	font-size			: calc(var(--font-size) * 0.9);
}


/*-----------------------------------------------------
 google-form
-----------------------------------------------------*/
#contents .google-form{
	border-radius		: 20px;
	background			: var(--invert-text-color);
	text-align: center;
	color				: #000;
	padding: 10px 0;
}
#contents .google-form iframe{
	max-width: 640px;
	width: 100%;
}

@media screen and (min-width: 769px) {
#contents .google-form{
	border-radius		: 50px;
	padding: 50px 0;
}
}