/* Reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

html { font: normal 26px/1em clight, 'Gill Sans', sans-serif; color: #000; }

h1, h3 { font-family: 'Ruda', sans-serif; font-weight: bold; }
strong { font-weight: bold; }

.container { max-width: 1230px; margin: 0 auto; padding: 0 32px; }

header { padding: 40px 0; }
.logo img { max-width: 100%; }

main { position: relative; }
.title { position: relative; z-index: 3; padding: 72px 0; background-color: #ed174b; mix-blend-mode: multiply; }
h1 { max-width: 475px; font-size: 50px; line-height: 1.25em; color: #fff; }

.column { display: inline-block; vertical-align: top; margin-top: 40px; }
.col1 { width: 60%; }
.col2 { width: 34%; float: right; margin-top: 80px; }

form { position: relative; z-index: 2; padding: 40px 32px; background-color: #e1e1e1; border-radius: 16px; text-align: center; }
form h3 { margin-bottom: 24px; font-size: 25px; line-height: 1.25em; }
form input, .link { display: block; margin: 8px 0; width: 100%; padding: 16px; font-size: 18px; box-sizing: border-box; border-radius: 8px; border: 0; }
form input[type=submit], .link { width: 90%; margin: 40px auto 0 auto; font-size: 20px; font-family: 'Ruda', sans-serif; color: #fff; background-color: #ed174b; text-decoration: none; -webkit-appearance: none; }
form label { display: none; }

.form-note .success { background-color: #e1e1e1; }

.content img { position: relative; z-index: 2; max-width: 100%; height: auto; margin-bottom: 44px; }
.content p { max-width: 580px; line-height: 1.25em; }
.content h2 { font-family: cbold, clight, sans-serif; margin: 44px 0 28px 0; color: #ed174b; font-weight: bold; }
.content ul { margin: 0 0 0 26px; list-style-type: disc; color: #ed174b; }
.content li { margin: 12px 0; line-height: 1.15em; }
.content li:last-child { margin: 24px 0 0 -26px; list-style-type: none; }
.content ul span { color: #000; }

.content:after { content: ''; display: block; max-width: 600px; margin: 48px 0; border-bottom: 1px solid #767677; }

.overlay { position: absolute; top: 0; right: 0; z-index: 1; }

footer { margin-bottom: 48px; font-family: Ruda, sans-serif; font-size: 17px; line-height: 1.75em; color: #626262; }
footer strong + a { color: inherit; text-decoration: none; }
footer a { color: #ed174b; }
footer a:first-child { display: block; margin: 12px 0; }

@media all and (max-width: 1340px)
{
	.overlay { width: 60%; }
}

@media all and (max-width: 1200px)
{
}

@media all and (max-width: 1100px)
{
	form input[type=submit], .link { width: 100%; } 
	.overlay { width: 50%; } 
}

@media all and (max-width: 960px)
{
	form h3 { font-size: 2.25vw; }
}

@media all and (max-width: 750px)
{
	header { padding: 24px 0; }
	
	.column { display: block; width: 100%; margin: 0 0 48px 0; }
	form { margin: 0 -32px; border-radius: 0; }
	form h3 { font-size: 6vw; }
	
	.title { background: url(title-bg-mobile.jpg) 100% 0 no-repeat; }
	
	.content img { margin: 24px 0; }

	.overlay { display: none; }
}

@media all and (max-width: 750px)
{
	.title { padding: 48px 0; }
	h1 { max-width: 304px; font-size: 32px; }		
}

@media all and (max-width: 350px)
{
	h1 { max-width: 280px; font-size: 27px; }		
}