@charset "utf-8";

/* Layout
   ========================================================================== */
.division_inner {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 750px) {
  .division {
    padding-right: 11.25%;
    padding-left: 11.25%;
  }
  .division_inner {
    padding-left: 12px;
    padding-right: 12px;
  }
}

img{ width: 100%; height: auto; }

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

@font-face {
	font-family: 'DecimaMonoPro';
	font-weight: normal;
	font-weight: 400;
	src: url('/syscommon/fonts/DecimaMonoPro.woff') format("woff");
}
@font-face {
	font-family: 'DecimaMonoProLt';
	font-weight: normal;
	font-weight: 400;
	src: url('/syscommon/fonts/DecimaMonoProLt.woff') format("woff");
}

/* common */
.hero_header {
	margin: 0 0 48px;
	margin-bottom: 48px;
	width: 100%;
	height: 125vw;
}
.hero_header_inner {
	position: relative;
	height: 100%;
}
.hero_header_content {
	position: relative;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	margin: auto auto 0;
	height: 100%;
}
.hero_header_content_centering {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.hero_header_content_centering > * {
	position: absolute !important;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.hero_header_image {
	height: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
.hero_header_image img {
	display: none;
}

@media (min-width: 750px) {
	.hero_header {
		margin: 0 0 60px;
		height: 41.66666vw;
	}
	.hero_header_image {
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	.hero_header_image img {
		display: none;
	}
}

@media (min-width: 1440px) {
	.hero_header {
		max-height: 600px;
	}
}


.sentence_section {
	*zoom: 1;
	padding: 72px 0 0;
}

@media (min-width: 750px) {
	.sentence_section {
		padding: 60px 0 0;
	}
}


/* override */
#contents {
	margin: 0 auto;
	/*background-color: #F5F5F5;*/
	background: #000;
}
#contents-body {
	padding: 0 0;
	padding-bottom: 1px;
}
#contents-body .section {
	margin: 0 0 40px;
	background-color: #F5F5F5;
}



/* original */
a, a:after {
	color: #555555;
	-moz-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
	-webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
	transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.pc_only {
	display: inherit;
}
.sp_only {
	display: none;
}
.campaign {
	color: #000;
}
.campaign .hero_header {
	margin: 0 0;
}
.campaign .sentence_section {
	background-color: #fff;
	margin: 0 0;
	padding: 60px 0;
	text-align: center;
	font-family: "Noto Sans Japanese";
}
.campaign .questionnaire.answer_no .answer_no, .campaign .questionnaire.answer_yes .answer_yes {
	display: block;
}
.campaign .questionnaire .answer_yes, .campaign .questionnaire .answer_no {
	display: none;
}
.campaign .questionnaire {
	position: relative;
	padding: 50px 0;
}
.campaign .questionnaire .showed .fade {
	-webkit-opacity: 1;
	opacity: 1;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}
.campaign .questionnaire .fade {
	-webkit-opacity: 0;
	opacity: 0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
}
.campaign .questionnaire .fade {
	-moz-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
	-webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.campaign .questionnaire .fade100 {
	-moz-transition-delay: 0.1s;
	-o-transition-delay: 0.1s;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
.campaign .questionnaire .fade200 {
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
.campaign .questionnaire .fade300 {
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
.campaign .questionnaire .fade400 {
	-moz-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
}
.campaign .questionnaire .fade500 {
	-moz-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
.campaign .questionnaire .fade600 {
	-moz-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
.campaign .questionnaire .fade700 {
	-moz-transition-delay: 0.7s;
	-o-transition-delay: 0.7s;
	-webkit-transition-delay: 0.7s;
	transition-delay: 0.7s;
}
.campaign .questionnaire h1 {
	position: relative;
	margin-top: 0;
	margin-bottom: 15px;
	text-align: center;
	font-weight: normal;
	font-size: 36px;
	font-family: "Noto Sans Japanese";
}
.campaign .questionnaire h3 {
	font-size: 18px;
	color: #E60010;
	margin: 0;
	text-align: center;
	font-weight: normal;
	text-transform: uppercase;
	font-family: "DecimaMonoPro";
}
.campaign .division_header {
	position: relative;
	padding: 0 0 35px;
	margin-bottom: 30px;
}
.campaign .division_header:after {
	content: '';
	display: block;
	position: absolute;
	margin-left: -60px;
	left: 50%;
	bottom: 0;
	width: 120px;
	height: 1px;
	background: #999999;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
	opacity: 0.3;
}
.campaign .btn_wrap {
	margin: 50px 0 0;
	text-align: center;
}
.campaign .btn_next {
	display: block;
	width: 210px;
	height: 50px;
	line-height: 46px;
	border: 2px #e20020 solid;
	position: relative;
	font-size: 18px;
	color: #e20020;
	margin: 0 auto;
	text-align: center;
	font-weight: normal;
	text-transform: uppercase;
	font-family: "DecimaMonoPro";
}
.campaign .btn_next:after {
	content: '';
	display: block;
	position: absolute;
	right: 50px;
	top: 50%;
	margin-top: -5px;
	width: 11px;
	height: 11px;
	border-top: 1px solid #e20020;
	border-right: 1px solid #e20020;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.campaign .btn_next:hover {
	color: #fff;
	background-color: #e20020;
}
.campaign .btn_next:hover:after {
	border-color: #fff;
}
.campaign .btn_next.disabled {
	color: #ccc;
	border-color: #ccc;
	background-color: transparent;
	pointer-events: none;
	cursor: pointer;
}
.campaign .btn_next.disabled:after {
	border-color: #ccc;
}
.campaign .btn_next.hide {
	-webkit-opacity: 0;
	opacity: 0;
}
.campaign .questionnaire .slide {
	position: relative;
}
.campaign .questionnaire .slide_inner {
	position: relative;
	height: 400px;
	margin: 0 auto;
}
.campaign .questionnaire .q_section {
	position: absolute;
	background-color: #e9e9e9;
	width: 860px;
	height: 400px;
	text-align: center;
	padding: 30px 35px;
	margin: 0 auto;
	overflow: hidden;
}
.campaign .questionnaire .q_section.hide {
	display: none;
}
.campaign .questionnaire .q_num {
	display: block;
	margin: 0 auto 25px;
	width: 70px;
	height: 70px;
	line-height: 64px;
	text-align: center;
	color: #e20020;
	letter-spacing: -4px;
	-webkit-border-radius: 35px;
	border-radius: 35px;
	border: 2px solid #e20020;
	font-size: 42px;
	text-transform: uppercase;
	font-family: "DecimaMonoProLt";
}
.campaign .questionnaire .q_txt {
	margin: 0 auto 40px;
	font-size: 18px;
	color: #000000;
	font-family: "Noto Sans Japanese";
}
.campaign .questionnaire .q_txt.my_lg {
	margin: 30px auto 60px;
}
.campaign .questionnaire .q_txt.large {
	margin: 0 auto 10px;
	font-size: 40px;
	letter-spacing: -.04em;
	color: #e20020;
	text-transform: uppercase;
	font-family: "Noto Sans Japanese";
}
.campaign .questionnaire .q_select {
	display: inline-block;
	margin: 0;
}
.campaign .questionnaire .q_select > li {
	float: left;
	margin: 0 15px;
}
.campaign .questionnaire .q_select > li a {
	display: block;
	width: 210px;
	height: 120px;
	line-height: 116px;
	border: 2px #626262 solid;
	position: relative;
	font-size: 18px;
	color: #626262;
	margin: 0 auto;
	text-align: center;
	font-weight: normal;
	font-family: "DecimaMonoPro";
}
.campaign .questionnaire .q_select > li a:hover {
	color: #e20020;
	border-color: #e20020;
}
.campaign .questionnaire .q_select.q_sns > li a {
	height: 140px;
	line-height: 1;
	font-size: 13px;
	text-indent: 0;
}
.campaign .questionnaire .q_select.q_sns > li a img {
	width: auto;
	height: 66px;
	margin: 20px auto;
}
.campaign .questionnaire .q_select.q_sns > li a .name {
	display: block;
}
.campaign .questionnaire.answer_no .q_select.q_sns > li a:after {
	content: '';
	display: block;
	position: absolute;
	right: 12px;
	top: 50%;
	margin-top: -5px;
	width: 11px;
	height: 11px;
	border-top: 1px solid #626262;
	border-right: 1px solid #626262;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.campaign .questionnaire.answer_no .q_select.q_sns > li a:hover:after {
	border-color: #e20020;
}
.campaign .questionnaire .q_select > li a.selected {
	/* line-height: 110px; */
	color: #e20020;
	border-color: #e20020;
	border-width: 3px;
}
.campaign .questionnaire.answer_no .q_select.q_sns > li a.selected:after {
	border-color: #e20020;
}
.campaign .questionnaire .wallpapers {
	display: inline-block;
	width: 100%;
	margin: 0;
}
.campaign .questionnaire .wallpapers > li {
	float: left;
	margin: 0;
	width: 50%;
	text-align: left;
	overflow: hidden;
}
.campaign .questionnaire .wallpapers > li .photo {
	float: left;
	margin: 0 20px 0 0;
}
.campaign .questionnaire .wallpapers > li .photo img {
	width: 140px;
	height: 90px;
}
.campaign .questionnaire .wallpapers > li .txt {
	float: left;
	text-align: left;
}
.campaign .questionnaire .wallpapers > li .txt h5 {
	font-size: 15px;
	margin: 0 0 13px;
	color: #000000;
	font-family: "DecimaMonoPro";
}
.campaign .questionnaire .wallpapers > li .txt ul.links {
	margin: 0;
}
.campaign .questionnaire .wallpapers > li .txt ul.links li {
}
.campaign .questionnaire .wallpapers > li .txt ul.links li a {
	position: relative;
	padding-left: 14px;
	text-decoration: underline;
	font-size: 14px;
	font-family: "DecimaMonoProLt";
}
.campaign .questionnaire .wallpapers > li .txt ul.links li a:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -4px;
	width: 7px;
	height: 7px;
	border-top: 1px solid #e20020;
	border-right: 1px solid #e20020;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.hero_header_image{
	background-image: url('/pages/contents/jp/wrc/special/2018/thanks-campaign/images/main.jpg');
}

.outline-area								{ background: #000; color: #fff; }
.outline-area .division_inner				{ padding: 60px 0 0; }
.outline-area .division_inner:after 		{ content: " "; clear: both; display: block; height: 0; }
.outline-area .lead-area					{ float: left; width: 58%; }
.outline-area .lead							{ margin: 0; }
.outline-area .lead p						{ margin-bottom: 2em; }
.outline-area .movie-list:after 			{ content: " "; clear: both; display: block; height: 0; }
.outline-area .movie-list li				{ float: left; width: calc((100% - 40px) / 3); margin: 0 20px 20px 0; }
.outline-area .movie-list li:nth-child(3n)	{ margin-right: 0; }
.outline-area .movie-list li a				{ display: block; position: relative; }
.outline-area .movie-list li a:after		{ content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 50px; margin: -25px 0 0 -13px; background: url("/pages/contents/en/assets/images/common/icon/play_icon_off.png") no-repeat; background-size: 26px 50px; }
.outline-area .movie-list li a:hover		{ opacity: 0.7; }

.outline-area .twitter-area					{ float: right; width: 40%; }

.present			{ margin-top: -145px; border-top: 145px solid #262626; background: #000; color: #fff; }
.present h2			{ padding-top: 60px; position: relative; margin-bottom: 35px; padding-bottom: 30px; line-height: 1.25; text-align: center; }
.present h2:after	{ content: ""; position: absolute; bottom: 0; left: 50%; width: 120px; height: 1px; margin-left: -60px; background: #fff; }
.present .btn		{ box-sizing: border-box; width: 860px; height: 100px; margin: 0 auto; padding: 20px 0; background: #262626; color: #fff; text-align: center; }

@media screen and (max-width: 749px) {
	.pc_only {
		display: none;
	}
	.sp_only {
		display: inherit;
	}
	.campaign .sentence_section {
		padding: 40px 0;
	}
	.campaign .questionnaire {
		padding: 30px 0;
	}
	.campaign .questionnaire h1 {
		margin-bottom: 10px;
		font-size: 28px;
	}
	.campaign .questionnaire h3 {
		font-size: 15px;
	}
	.campaign .division_header {
		padding: 0 0 25px;
		margin-bottom: 25px;
	}
	.campaign .btn_wrap {
		margin: 35px 0 20px;
	}
	.campaign .questionnaire .slide {
		padding: 0 20px;
	}
	.campaign .questionnaire .q_section {
		width: 100%;
		height: auto;
		min-height: 400px;
		padding: 20px 20px;
		margin-bottom: 5px;
	}
	.campaign .questionnaire .q_num {
		margin: 0 auto 15px;
		width: 60px;
		height: 60px;
		line-height: 54px;
		letter-spacing: -4px;
		-webkit-border-radius: 30px;
		border-radius: 30px;
		font-size: 36px;
	}
	.campaign .questionnaire .q_txt {
		margin: 0 auto 20px;
		font-size: 16px;
		line-height: 1.5;
	}
	.campaign .questionnaire .q_txt.my_lg {
		margin: 20px auto 50px;
	}
	.campaign .questionnaire .q_txt.large {
		margin: 0 auto 5px;
		font-size: 30px;
		line-height: 1.2;
	}
	.campaign .questionnaire .q_select {
		width: 100%;
	}
	.campaign .questionnaire .q_select > li {
		float: none;
		margin: 0 0 10px;
	}
	.campaign .questionnaire .q_select > li:last-child {
		margin: 0 0 0;
	}
	.campaign .questionnaire .q_select > li a {
		width: 100%;
		height: 60px;
		line-height: 56px;
		font-size: 18px;
	}
	.campaign .questionnaire .q_select.q_sns > li a {
		width: 100%;
		height: 60px;
		font-size: 14px;
		line-height: 56px;
		text-align: left;
	}
	.campaign .questionnaire .q_select.q_sns > li a img {
		position: absolute;
		width: auto;
		height: 43px;
		margin: -21px 0 0 0;
		top: 50%;
		left: 8px;
	}
	.campaign .questionnaire .q_select.q_sns > li a .name {
		display: inline-block;
		width: 100%;
		text-align: center;
		padding: 0 30px 0 60px;
	}
	.campaign .questionnaire .wallpapers {
		width: auto;
	}
	.campaign .questionnaire .wallpapers > li {
		float: none;
		width: 100%;
	}
	.campaign .questionnaire .wallpapers > li .photo {
		float: none;
		margin: 0;
	}
	.campaign .questionnaire .wallpapers > li .photo img {
		width: 190px;
		height: auto;
	}
	.campaign .questionnaire .wallpapers > li .txt {
		float: none;
	}
	.campaign .questionnaire .wallpapers > li .txt h5 {
		font-size: 16px;
		margin: 10px 0 10px;
	}
	
	.hero_header_image{
		background-image: url('/pages/contents/jp/wrc/special/2018/thanks-campaign/images/main_sp.jpg');
	}
	
	.outline-area .division_inner				{ padding: 0; background: #262626; }
	.outline-area .lead-area					{ float: none; width: auto; }
	.outline-area .lead							{ margin-top: 0; background: #000; padding: 35px 16px 20px; }
	.outline-area .movie-list					{ margin-top: -20px; padding: 0 16px; }
	.outline-area .movie-list li				{ width: calc((100% - 20px) / 2); }
	.outline-area .movie-list li:nth-child(3n)	{ margin-right: 20px; }
	.outline-area .movie-list li:nth-child(2n)	{ margin-right: 0; }
	.outline-area .twitter-area					{ float: none; width: auto; padding: 0 16px; }
	
	.present		{ margin-top: 0; border-top: none; padding: 0 16px 40px; }
	.present h2		{ padding-bottom: 20px; }
	.present .btn	{ width: 100%; height: 80px; }
}

@media screen and (min-width: 750px) {
}