/*
* creators.css
*
*/
/* --------------------------------

-------------------------------- */
.page_header {
	padding: 20px 20px 30px;
}
@media screen and (min-width: 769px) {
	.page_header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 0 auto;
		padding: 40px 20px;
		max-width: 1120px; 

		-webkit-box-pack: justify; 

		    -ms-flex-pack: justify; 

		        justify-content: space-between;
	}
}

.site_title {
	width: 61.5625%;
}
@media screen and (min-width: 769px) {
	.site_title {
		margin-top: 5px;
		width: 311px;
	}
}

.btn_backtop {
	margin: 25px auto 0;
	width: 146px;
}
@media screen and (min-width: 769px) {
	.btn_backtop {
		margin: 0;
		width: 140px;
	}
}
.btn_backtop a {
	display: block;
	position: relative;
	padding: 11px;
	border: 1px solid #333;
	text-align: center; 
	color: #e1e1e1;
	font-size: 13px;
}
@media screen and (min-width: 769px) {
	.btn_backtop a {
		-webkit-transition: color 0.35s;
		transition: color 0.35s; 
		font-size: 12px;
	}
	.btn_backtop a:hover {
		color: #ed6d01;
	}
	.btn_backtop a:hover:before {
		border-color: #ed6d01;
	}
}
.btn_backtop a:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 15px;
	margin: auto;
	border-bottom: 1px solid #e1e1e1;
	border-left: 1px solid #e1e1e1;
	width: 8px;
	height: 8px;
	-webkit-transition: border 0.35s;
	transition: border 0.35s; 
	-webkit-transform: rotate(45deg); 
	    -ms-transform: rotate(45deg); 
	        transform: rotate(45deg);
}

.btn_detail {
	margin: 25px auto 0;
	width: 100%;
}
@media screen and (min-width: 769px) {
	.btn_detail {
		margin: 20px 0 0;
		width: 196px;
	}
}
.btn_detail a {
	display: block;
	position: relative;
	padding: 11px;
	border: 1px solid #333;
	background-color: #4a4a4a;
	text-align: center; 
	color: #e1e1e1;
	font-family: serif;
	font-size: 13px;
}
@media screen and (min-width: 769px) {
	.btn_detail a {
		padding: 6px 10px;
		-webkit-transition: color 0.35s, background-color 0.35s;
		transition: color 0.35s, background-color 0.35s; 
		text-align: left;
		font-size: 12px;
	}
	.btn_detail a:hover {
		background-color: #ed6d01; 
		color: #e1e1e1;
	}
	.btn_detail a:hover:before {
		border-color: #e1e1e1;
	}
}
.btn_detail a:before {
	content: "";
	position: absolute;
	top: 0;
	right: 15px;
	bottom: 0;
	margin: auto;
	border-top: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	width: 8px;
	height: 8px;
	-webkit-transition: border 0.35s;
	transition: border 0.35s; 
	-webkit-transform: rotate(45deg); 
	    -ms-transform: rotate(45deg); 
	        transform: rotate(45deg);
}

/* --------------------------------
  profile
-------------------------------- */
.creators_profile {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
@media screen and (min-width: 900px) {
	.creators_profile {
		padding: 0 20px;
	}
}
.creators01 .creators_profile {
	background-image: url(/handycam/creators-voice/img/creators01/profile_bg.jpg);
}
@media screen and (min-width: 900px) {
	.creators01 .creators_profile {
		background-image: url(/handycam/creators-voice/img/creators01/profile_bg_lg.jpg);
	}
}
.creators02 .creators_profile {
	background-image: url(/handycam/creators-voice/img/creators02/profile_bg.jpg);
}
@media screen and (min-width: 900px) {
	.creators02 .creators_profile {
		background-image: url(/handycam/creators-voice/img/creators02/profile_bg_lg.jpg);
	}
}
.creators03 .creators_profile {
	background-image: url(/handycam/creators-voice/img/creators03/profile_bg.jpg);
}
@media screen and (min-width: 900px) {
	.creators03 .creators_profile {
		background-image: url(/handycam/creators-voice/img/creators03/profile_bg_lg.jpg);
	}
}
.creators04 .creators_profile {
	background-image: url(/handycam/creators-voice/img/creators04/profile_bg.jpg);
}
@media screen and (min-width: 900px) {
	.creators04 .creators_profile {
		background-image: url(/handycam/creators-voice/img/creators04/profile_bg_lg.jpg);
	}
}
.creators05 .creators_profile {
	background-image: url(/handycam/creators-voice/img/creators05/profile_bg.jpg);
}
@media screen and (min-width: 900px) {
	.creators05 .creators_profile {
		background-image: url(/handycam/creators-voice/img/creators05/profile_bg_lg.jpg);
	}
}
.creators06 .creators_profile {
	background-image: url(/handycam/creators-voice/img/creators06/profile_bg.jpg);
}
@media screen and (min-width: 900px) {
	.creators06 .creators_profile {
		background-image: url(/handycam/creators-voice/img/creators06/profile_bg_lg.jpg);
	}
}
.creators07 .creators_profile {
	background-image: url(/handycam/creators-voice/img/creators07/profile_bg.jpg);
}
@media screen and (min-width: 900px) {
	.creators07 .creators_profile {
		background-image: url(/handycam/creators-voice/img/creators07/profile_bg_lg.jpg);
	}
}

.creators_profile_content {
	position: relative;
	padding: 30px 40px;
}
@media screen and (min-width: 900px) {
	.creators_profile_content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 0 auto;
		padding: 60px 0 60px 15px;
		max-width: 1120px; 

		-webkit-box-pack: center; 

		    -ms-flex-pack: center; 

		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
}

.creators_profile_num {
	position: absolute;
	top: 0;
	left: 18px;
	padding-top: 2.5em;
	font-family: serif;
	font-size: 10px;
	font-style: italic; 
	line-height: 1;

	-webkit-writing-mode: vertical-lr;

	    -ms-writing-mode: tb-lr;

	        writing-mode: vertical-lr;
}
@media screen and (min-width: 900px) {
	.creators_profile_num {
		left: 0;
		font-size: 16px;
	}
}
.creators_profile_num:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
	width: 1px;
	height: 2em;
	background: #e1e1e1;
}

@media screen and (min-width: 900px) {
	.creators_profile_title_wrap {
		margin-right: 10%;
		padding-bottom: 15px;
		width: 42.54545%;
	}
}

.creators_profile_logo {
	margin-bottom: 15px;
	width: 120px;
}
@media screen and (min-width: 900px) {
	.creators_profile_logo {
		margin-bottom: 18px;
		width: 138px;
	}
}

.creators_profile_title {
	font-family: serif; 
	line-height: 2;
}
@media screen and (min-width: 900px) {
	.creators_profile_title {
		font-size: 20px;
	}
}

.creators_profile_detail {
	margin-top: 33px;
}
@media screen and (min-width: 900px) {
	.creators_profile_detail {
		margin-top: 0;
		width: 28.63636%;
	}
}

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

.creators_profile_detail_figure {
	width: 20%;
	max-width: 70px;
}
@media screen and (min-width: 900px) {
	.creators_profile_detail_figure {
		width: 70px;
	}
}

.creators_profile_detail_cont {
	margin-left: 10px;
}

.creators_profile_detail_cont_h {
	width: 50px;
	font-size: 0; 
	line-height: 1;
}
@media screen and (min-width: 900px) {
	.creators_profile_detail_cont_h {
		width: 67px;
	}
}

.creators_profile_detail_cont_job {
	margin-top: 8px;
	font-size: 10px;
}
@media screen and (min-width: 900px) {
	.creators_profile_detail_cont_job {
		margin-top: 12px;
		font-size: 12px;
	}
}

.creators_profile_detail_cont_name {
	margin-top: 4px;
	line-height: 1;
}
@media screen and (min-width: 900px) {
	.creators_profile_detail_cont_name {
		font-size: 20px;
	}
}

.creators_profile_detail_cont_name_en {
	display: inline-block;
	margin-left: 5px;
	font-size: 10px;
}

.creators_profile_detail_content {
	margin-top: 10px;
}
@media screen and (min-width: 900px) {
	.creators_profile_detail_content {
		margin-top: 20px;
	}
}
.creators_profile_detail_content p {
	font-size: 13px;
	line-height: 1.84615;
}
.creators_profile_detail_content p a {
	color: #cfcfcf;
}

/* --------------------------------
  conetents
-------------------------------- */
.creators_section {
	margin: 85px 20px 0;
}
@media screen and (min-width: 641px) and (max-width: 768px) {
	.creators_section {
		margin: 85px auto;
		max-width: 640px;
	}
}
@media screen and (min-width: 769px) {
	.creators_section {
		margin: 144px auto;
		padding: 0 20px;
		max-width: 880px;
	}
}
.page_anchor + .creators_section {
	margin-top: 65px;
}

.creators_section_head {
	margin-bottom: -20px;
	padding: 10px 20px;
}
@media screen and (min-width: 769px) {
	.creators_section_head {
		margin-bottom: -50px;
		padding: 14px 20px;
		text-align: center;
	}
}

.creators_section_head_title {
	font-family: serif; 
	font-size: 20px;
	line-height: 1.8;
}
@media screen and (min-width: 769px) {
	.creators_section_head_title {
		font-size: 30px;
		line-height: 1.8;
	}
}
.creators_section_head_title:before,
.creators_section_head_title:after {
	content: "";
	display: inline-block;
	position: relative;
	width: 14px;
	height: 11px;
	background-image: url(/handycam/creators-voice/img/common/apostrophe.png); 
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
}
@media screen and (min-width: 769px) {
	.creators_section_head_title:before,
	.creators_section_head_title:after {
		width: 21px;
		height: 17px;
	}
}
.creators_section_head_title:before {
	top: -2px;
	left: -5px;
	margin-left: -14px;
	vertical-align: top;
}
@media screen and (min-width: 769px) {
	.creators_section_head_title:before {
		left: -8px;
		margin-left: -21px;
	}
}
.creators_section_head_title:after {
	right: -5px;
	-webkit-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	        transform: rotate(180deg);
	vertical-align: bottom;
}
@media screen and (min-width: 769px) {
	.creators_section_head_title:after {
		right: -8px;
	}
}

.creators_section_movie {
	position: relative;
	z-index: 1;
	margin: 45px 0;
}
@media screen and (min-width: 769px) {
	.creators_section_movie {
		margin: 100px 0;
	}
}
.creators_section_movie:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: -20px;
	width: 100vw;
	height: 100%;
	background: url(/handycam/creators-voice/img/common/movie_shadow.png) center top no-repeat;
	background-size: contain;
}
@media screen and (min-width: 769px) {
	.creators_section_movie:before {
		left: 50%;
		-webkit-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		        transform: translateX(-50%); 
		background: url(/handycam/creators-voice/img/common/movie_shadow_lg.png) center top no-repeat;
		background-size: contain;
	}
}
.creators_section_movie + .creators_section_block {
	z-index: 1;
}

.creators_section_movie_content {
	position: relative;
	padding-top: 56.25%;
}
.creators_section_movie_content iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.creators_section_movie_caption {
	margin-top: 13px;
	text-align: center;
	font-size: 10px;
}
@media screen and (min-width: 769px) {
	.creators_section_movie_caption {
		text-align: right;
		font-size: 12px;
	}
}

.creators_section_block {
	position: relative;
	margin: 45px 0;
}
@media screen and (min-width: 769px) {
	.creators_section_block {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 90px 0; 

		-ms-flex-wrap: wrap; 

		    flex-wrap: wrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	.creators_section_block.layout-A_2,
	.creators_section_block.layout-B_2,
	.creators_section_block.layout-C_2 {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: row-reverse;
		        flex-direction: row-reverse;
	}
}

.creators_section_block_content {
	margin: 20px 0;
}
@media screen and (min-width: 769px) {
	.creators_section_block_content {
		margin-top: -8px;
		margin-bottom: 0;
	}
	.layout-A_1 .creators_section_block_content {
		margin-right: 3.80952%;
		width: 58.09524%;
	}
	.layout-A_2 .creators_section_block_content {
		margin-left: 3.80952%;
		width: 58.09524%;
	}
	.layout-B_1 .creators_section_block_content {
		margin-right: 4.52381%;
		width: 41.66667%;
	}
	.layout-B_2 .creators_section_block_content {
		margin-left: 4.52381%;
		width: 41.66667%;
	}
	.layout-C_1 .creators_section_block_content {
		margin-right: 3.57143%;
		width: 30.95238%;
	}
	.layout-C_2 .creators_section_block_content {
		margin-left: 4.16667%;
		width: 30.35714%;
	}
}

.creators_section_block_heading {
	line-height: 1.625;
}
@media screen and (min-width: 769px) {
	.creators_section_block_heading {
		font-size: 22px;
	}
}

.creators_section_block_txt {
	margin-top: 1em;
	font-size: 13px;
	line-height: 1.92308;
}
@media screen and (min-width: 769px) {
	.creators_section_block_txt {
		margin-top: 1em;
		font-size: 14px;
	}
}
.creators_section_block_txt:first-child {
	margin-top: 0;
}

.creators_section_block_image {
	margin: 20px 0;
	text-align: center;
}
@media screen and (min-width: 769px) {
	.creators_section_block_image {
		margin-top: 0;
		margin-bottom: 0;
	}
	.layout-A_1 .creators_section_block_image,
	.layout-A_2 .creators_section_block_image {
		width: 38.09524%;
		min-width: 280px;
	}
	.layout-B_1 .creators_section_block_image,
	.layout-B_2 .creators_section_block_image {
		width: 53.57143%;
		min-width: 350px;
	}
	.layout-C_1 .creators_section_block_image,
	.layout-C_2 .creators_section_block_image {
		width: 65.47619%;
		min-width: 370px;
	}
}
.creators_section_block_image figure + figure {
	margin-top: 32px;
}

.creators_section_block_image_caption {
	margin-top: 5px;
	text-align: left;
	font-size: 10px;
}
@media screen and (min-width: 769px) {
	.creators_section_block_image_caption {
		margin-top: 10px;
		font-size: 12px;
	}
}
.creators_section_block_image_caption a {
	display: inline-block;
	border-bottom: 1px solid;
	text-decoration: none;
	color: #e1e1e1;
	line-height: 1;
}
.creators_section_block_image_caption a:hover {
	color: #ed6d01;
}

.creators_section_block_note {
	margin-top: 10px;
}
@media screen and (min-width: 769px) {
	.creators_section_block_note {
		margin-top: 25px;
	}
}
.creators_section_block_note li {
	margin-top: 5px;
	padding-left: 1.5em;
	text-indent: -1.5em;
	font-size: 12px;
	line-height: 1.66667;
}

.creators_section_block_fulid {
	width: 100%;
}
@media screen and (min-width: 769px) {
	.creators_section_block_fulid {
		-webkit-box-ordinal-group: 4;
		    -ms-flex-order: 3;
		        order: 3;
	}
}

/* ------------------------
  Other Voice
------------------------ */
.u-medium_container_size {
	max-width: none;
}

@media screen and (max-width: 768px) {
	.other_voice {
		padding: 40px calc(40 / 640 * 100vw);
	}
}

@media screen and (max-width: 768px) {
	.other_voice_list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 25px calc(-20 / 640 * 100vw) 0; 

		-ms-flex-wrap: wrap; 

		    flex-wrap: wrap;
	}
}

@media screen and (min-width: 769px) {
	.other_voice_list {
		margin: 35px -18px 0;
	}
}

@media screen and (max-width: 768px) {
	.other_voice_list li {
		margin: 0 !important;
		padding: 0 calc(16 / 640 * 100vw) 28px; 
		width: 50%;

		-webkit-box-flex: 0;

		    -ms-flex: 0 0 50%;

		        flex: 0 0 50%;
	}
}

@media screen and (min-width: 769px) {
	.other_voice_list li {
		margin: 0 !important;
		padding: 0 18px 40px; 
		width: 33.333%;
		max-width: 33.333%;

		-webkit-box-flex: 0;

		    -ms-flex: 0 0 33.333%;

		        flex: 0 0 33.333%;
	}
}

@media screen and (max-width: 768px) {
	.other_voice_list_person {
		display: block;
		padding: calc(30 / 640 * 100vw) calc(20 / 640 * 100vw) calc(44 / 640 * 100vw) calc(40 / 640 * 100vw); 
		height: 100%;
	}
}

@media screen and (min-width: 769px) {
	.other_voice_list_person {
		display: block;
		padding: 15px 18px 30px 28px;
	}
}

@media screen and (max-width: 768px) {
	.other_voice_list_person_img {
		display: inline-block;
		position: absolute;
		margin: 0; 
		width: calc(54 / 640 * 100vw);
	}
}

@media screen and (min-width: 769px) {
	.other_voice_list_person_img {
		display: inline-block;
		margin: 0; 
		width: 42px;
	}
}

@media screen and (max-width: 768px) {
	.other_voice_list_person_name {
		padding-left: calc(66 / 640 * 100vw);
		width: 100%;
		min-height: calc(54 / 640 * 100vw);
		font-size: calc(18 / 640 * 100vw);
		line-height: 1.1;
	}
}

@media screen and (min-width: 769px) {
	.other_voice_list_person_name {
		position: absolute;
		top: -55px;
		padding-right: 0;
		padding-left: 55px;
		font-size: 14px;
		line-height: 1.1;
	}
}

@media screen and (max-width: 768px) {
	.other_voice_list_person_name_en {
		display: block;
		margin-top: 3px;
		margin-left: 0;
		font-size: calc(14 / 640 * 100vw);
	}
}

@media screen and (min-width: 769px) {
	.other_voice_list_person_name_en {
		display: block;
		margin-top: 6px;
		margin-left: 0;
		font-size: 12px;
		line-height: 1.3;
	}
}

@media screen and (max-width: 768px) {
	.other_voice_list_title_copy {
		margin-top: calc(16 / 640 * 100vw);
		font-size: calc(18 / 640 * 100vw);
		line-height: 1.5;
	}
}

@media screen and (min-width: 769px) {
	.other_voice_list_title_copy {
		font-size: 14px;
		line-height: 1.5;
	}
}

.footer_backtop {
	margin-top: 7px;
}
@media screen and (min-width: 769px) {
	.footer_backtop {
		margin-top: 20px;
	}
}

.creators05 .creators_profile_detail_content a {
	text-decoration: underline;
}

.creators05 .layout-float {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
@media screen and (min-width: 769px) {
	.creators05 .layout-float {
		display: block;
	}
}
@media screen and (min-width: 769px) {
	.creators05 .layout-float .float-right-lg {
		float: right;
		margin-bottom: 50px; 
		margin-left: 3.57143%;
		width: 53.57143%;
	}
}
.creators05 .layout-float .creators_section_block_image {
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
}

.creators05 .creators_section_movie .creators_section_block_content {
	margin: 2em 0;
}

.creators06 .creators_section_block_txt:first-child {
	margin-top: 1em;
}

.creators06 .creators_section_block_fluidimage {
	margin-top: 1em; 
	width: 100%;
}
@media screen and (min-width: 769px) {
	.creators06 .creators_section_block_fluidimage {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;

		-webkit-box-pack: justify;

		    -ms-flex-pack: justify;

		        justify-content: space-between;
	}
}
@media screen and (min-width: 769px) {
	.creators06 .creators_section_block_fluidimage .creators_section_block_image {
		width: 50%;
		max-width: 400px;
	}
}

.creators07 .creators_section {
	position: relative;
	z-index: 1;
}

.creators07 .creators_section_block_txt:first-child {
	margin-top: 1em;
}

.creators07 .creators_section_block_fluidimage {
	margin-top: 1em; 
	width: 100%;
}
@media screen and (min-width: 769px) {
	.creators07 .creators_section_block_fluidimage {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;

		-webkit-box-pack: justify;

		    -ms-flex-pack: justify;

		        justify-content: space-between;
	}
}
@media screen and (min-width: 769px) {
	.creators07 .creators_section_block_fluidimage .creators_section_block_image {
		width: 50%;
		max-width: 400px;
	}
}