@charset "UTF-8";
/* =============================================================================

プロとして活躍する卒業生用css

============================================================================= */
.professional-creators {}

@font-face {
	font-family: 'Roboto Bold';
	font-style: normal;
	font-weight: 600;
	src: url('/common/font/Roboto-Bold.woff') format('woff');
}
.roboto_bold {
	font-family: 'Roboto Bold', sans-serif;
}

/* タブレット以下 */
@media screen and (max-width: 1070px) {

}/* for tablet max-width: 1070px */
/* SP向けレイアウトの指定：～800px */
@media only screen and (max-width: 800px) {
.professional-creators .thiscontents {
	padding: 30px 0;
}
}/* for SP max-width: 800px */

/*===============================================================

	トップページ

===============================================================*/
.professional-creators.top {}
.professional-creators.top .thiscontents {
	padding: 50px 0 70px;
}
/* タブレット以下 */
@media screen and (max-width: 1070px) {

}/* for tablet max-width: 1070px */
/* SP向けレイアウトの指定：～800px */
@media only screen and (max-width: 800px) {
.professional-creators.top .thiscontents {
	padding: 30px 0;
}
}/* for SP max-width: 800px */

/*-------------------------------------------------------------
	メインビジュアル
-------------------------------------------------------------*/
.professional-creators.top #page_mainvisual {}
.professional-creators.top #page_mainvisual .container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../../professional-creators/images/professional-creators_top_mainvisual.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 0;
}
.professional-creators.top #page_mainvisual .container .catch {
	top: 18%;
	font-size: 2.8vw;
	font-weight: normal;
}
.professional-creators.top #page_mainvisual .container .catch .jp {
	display: block;
	font-size: 1.8vw;
	font-weight: bold;
}
/* タブレット以下 */
@media screen and (max-width: 1070px) {

}/* for tablet max-width: 1070px */
/* SP向けレイアウトの指定：～800px */
@media only screen and (max-width: 800px) {
.professional-creators.top #page_mainvisual .container {
	background-image: url("../../professional-creators/images/professional-creators_top_mainvisual_sp.jpg");
}
.professional-creators.top #page_mainvisual .container .catch {
	top: 50%;
	left: 4%;
	font-size: 6.2vw;
	line-height: 1.2;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.professional-creators.top #page_mainvisual .container .catch .jp {
	font-size: 3.8vw;
	line-height: 1.6;
}
}/* for SP max-width: 800px */

/*-------------------------------------------------------------
	インタビューリスト
-------------------------------------------------------------*/
.professional-creators.top .interview_list {}
.professional-creators.top .interview_list li {
	margin-top: 30px;
}
.professional-creators.top .interview_list li:first-child {
	margin-top: 0;
}
.professional-creators.top .interview_list li a {
	display: flex;
	border: 1px solid #000;
	background: #fff;
	box-shadow: 5px 5px 0 0 rgba(0, 0, 0, .1);
}
.professional-creators.top .interview_list li a:hover {
	text-decoration: none;
	box-shadow: 10px 10px 0 0 rgba(0, 0, 0, .05);
	-webkit-transform: translate(-5px, -5px);
	transform: translate(-5px, -5px);
}
.professional-creators.top .interview_list li a .ph {
	width: 52.99625468164794%;
}
.professional-creators.top .interview_list li a .text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 53.08411214953271%;
	background: #fff;
	padding: 25px 50px;
}
.professional-creators.top .interview_list li a .text p {
	text-align: left;
}
.professional-creators.top .interview_list li a .text .no .int {
	display: inline-block;
	font-size: 18px;
	line-height: 1;
}
.professional-creators.top .interview_list li a .text .no .num {
	font-size: 30px;
	margin-left: 0.25em;
}
.professional-creators.top .interview_list li a .text .comment {
	font-size: 22px;
	font-weight: bold;
	padding: 30px 0;
}
.professional-creators.top .interview_list li a .text .name .en {
	font-size: 40px;
	line-height: 1;
}
.professional-creators.top .interview_list li a .text .name .jp {
	font-size: 18px;
	font-weight: bold;
}
.professional-creators.top .interview_list li a .text .name .jp .degree {
	font-size: 20px;
	font-weight: normal;
}
.professional-creators.top .interview_list li.interviwe01 a {
	color: #fa8e2b;
}
.professional-creators.top .interview_list li.interviwe01 a .text .no .int {
	border-bottom: 3px solid #fa8e2b;
}
.professional-creators.top .interview_list li.interviwe02 a {
	color: #dc027d;
}
.professional-creators.top .interview_list li.interviwe02 a .text .no .int {
	border-bottom: 3px solid #dc027d;
}
.professional-creators.top .interview_list li.interviwe03 a {
	color: #69c4f9;
}
.professional-creators.top .interview_list li.interviwe03 a .text .no .int {
	border-bottom: 3px solid #69c4f9;
}
.professional-creators.top .interview_list li.interviwe04 a {
	color: #93c607;
}
.professional-creators.top .interview_list li.interviwe04 a .text .no .int {
	border-bottom: 3px solid #93c607;
}
.professional-creators.top .interview_list li.interviwe05 a {
	color: #b21a7e;
}
.professional-creators.top .interview_list li.interviwe05 a .text .no .int {
	border-bottom: 3px solid #b21a7e;
}
.professional-creators.top .interview_list li.interviwe06 a {
	color: #006dba;
}
.professional-creators.top .interview_list li.interviwe06 a .text .no .int {
	border-bottom: 3px solid #006dba;
}
.professional-creators.top .interview_list li.interviwe07 a {
	color: #01b0a1;
}
.professional-creators.top .interview_list li.interviwe07 a .text .no .int {
	border-bottom: 3px solid #01b0a1;
}
.professional-creators.top .interview_list li.interviwe08 a {
	color: #fe6b64;
}
.professional-creators.top .interview_list li.interviwe08 a .text .no .int {
	border-bottom: 3px solid #fe6b64;
}
.professional-creators.top .interview_list li.interviwe09 a {
	color: #afa1ec;
}
.professional-creators.top .interview_list li.interviwe09 a .text .no .int {
	border-bottom: 3px solid #afa1ec;
}
/* タブレット以下 */
@media screen and (max-width: 1070px) {

}/* for tablet max-width: 1070px */
/* SP向けレイアウトの指定：～800px */
@media only screen and (max-width: 800px) {
.professional-creators.top .interview_list li {
	margin-top: 15px;
}
.professional-creators.top .interview_list li a {
	display: block;
}
.professional-creators.top .interview_list li a .ph {
	width: 100%;
}
.professional-creators.top .interview_list li a .text {
	display: block;
	width: 100%;
	padding: 15px;
}
.professional-creators.top .interview_list li a .text .no .int {
	display: inline-block;
	font-size: 3.8vw;
	line-height: 1;
}
.professional-creators.top .interview_list li a .text .no .num {
	font-size: 5.8vw;
}
.professional-creators.top .interview_list li a .text .comment {
	font-size: 4.4vw;
	padding: 15px 0;
}
.professional-creators.top .interview_list li a .text .name .en {
	font-size: 6.0vw;
}
.professional-creators.top .interview_list li a .text .name .jp {
	font-size: 3.5vw;
}
.professional-creators.top .interview_list li a .text .name .jp .degree {
	font-size: 3.7vw;
}
}/* for SP max-width: 800px */


/*-------------------------------------------------------------
	インタビューリスト
-------------------------------------------------------------*/
.professional-creators.top .after_support {
	margin-top: 50px;
}
.professional-creators.top .after_support .heading {
	text-align: center;
}
.professional-creators.top .after_support .heading .title {
	position: relative;
	display: inline-block;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 20px;
	margin-top: 10px;
}
.professional-creators.top .after_support .heading .title:after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: 50%;
	width: 100px;
	height: 5px;
	background: #000;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.professional-creators.top .after_support .heading .title .icon {
	position: absolute;
	top: 50%;
	width: 50px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.professional-creators.top .after_support .heading .title .icon.left {
	left: -60px;
}
.professional-creators.top .after_support .heading .title .icon.right {
	right: -60px;
}
/* タブレット以下 */
@media screen and (max-width: 1070px) {

}/* for tablet max-width: 1070px */
/* SP向けレイアウトの指定：～800px */
@media only screen and (max-width: 800px) {
.professional-creators.top .after_support {
	margin-top: 30px;
}
.professional-creators.top .after_support .heading .title {
	font-size: 4.8vw;
	padding-bottom: 20px;
}
.professional-creators.top .after_support .heading .title:after {
	bottom: 10px;
	width: 16vw;
	height: 4px;
}
.professional-creators.top .after_support .heading .title .icon {
	width: 11vw;
}
.professional-creators.top .after_support .heading .title .icon.left {
	left: -13vw;
}
.professional-creators.top .after_support .heading .title .icon.right {
	right: -13vw;
}
}/* for SP max-width: 800px */


/* =============================================================================

	インビューページ

============================================================================= */
.professional-creators.second {}
.professional-creators.second .thiscontents {
	padding: 0 0 70px;
}
/* タブレット以下 */
@media screen and (max-width: 1070px) {

}/* for tablet max-width: 1070px */
/* SP向けレイアウトの指定：～800px */
@media only screen and (max-width: 800px) {
.professional-creators.second .thiscontents {
	padding: 15px 0 30px;
}
}/* for SP max-width: 800px */

/*-------------------------------------------------------------
	メインビジュアル
-------------------------------------------------------------*/
.professional-creators.second #page_mainvisual {
	padding: 0;
}
/* タブレット以下 */
@media screen and (max-width: 1070px) {

}/* for tablet max-width: 1070px */
/* SP向けレイアウトの指定：～800px */
@media only screen and (max-width: 800px) {
.professional-creators.second #page_mainvisual {
	/*width: auto;
	margin: 0 -15px;*/
}
}/* for SP max-width: 800px */

/*-------------------------------------------------------------
	インタビュー
-------------------------------------------------------------*/
.professional-creators.second .interview {
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}
.professional-creators.second .interview:nth-child(odd) {
	flex-direction: row-reverse;
}
.professional-creators.second .interview .text {
	width: 50%;
}
.professional-creators.second .interview .text .title {
	font-size: 28px;
}
.professional-creators.second .interview .text p {
	text-align: justify;
	text-justify: inter-ideograph; /* IE */
	margin-top: 15px;
}
.professional-creators.second .interview .ph {
	width: 46%;
}
/* タブレット以下 */
@media screen and (max-width: 1070px) {

}/* for tablet max-width: 1070px */
/* SP向けレイアウトの指定：～800px */
@media only screen and (max-width: 800px) {
.professional-creators.second .interview {
	display: block;
	margin-top: 30px;
}
.professional-creators.second .interview .text {
	width: 100%;
}
.professional-creators.second .interview .text .title {
	font-size: 4.8vw;
}
.professional-creators.second .interview .text p {
	margin-top: 3.8vw;
}
.professional-creators.second .interview .ph {
	width: 100%;
	margin-top: 15px;
}
}/* for SP max-width: 800px */

/*-------------------------------------------------------------
	制作実績
-------------------------------------------------------------*/
.professional-creators.second .works {
	margin-top: 50px;
}
.professional-creators.second .works .balloon {
	position: relative;
	border: 1px solid #000;
	border-radius: 5px;
	padding: 20px;
	margin: 30px 20px 0;
}
.professional-creators.second .works .balloon:before {
	content: "";
	position: absolute;
	top: -20px;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 20px 10px;
	border-color: transparent transparent #000 transparent;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;
}
.professional-creators.second .works .balloon:after {
	content: "";
	position: absolute;
	top: -18px;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 9px 19px 9px;
	border-color: transparent transparent #fff transparent;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 2;
}
.professional-creators.second .works .balloon .title {
	position: relative;
	text-align: center;
	padding-bottom: 20px;
}
.professional-creators.second .works .balloon .title:after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: 50%;
	height: 3px;
	width: 80px;
	background: #000;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.professional-creators.second .works .balloon .comment {
	text-align: center;
}
.professional-creators.second .works .balloon .comment p {
	font-size: 14px;
}

/* タブレット以下 */
@media screen and (max-width: 1070px) {

}/* for tablet max-width: 1070px */
@media only screen and (max-width: 800px) {
.professional-creators.second .works {
	margin-top: 30px;
}
.professional-creators.second .works .balloon {
	padding: 10px;
	margin: 15px 5px 0;
}
.professional-creators.second .works .balloon:before {
	top: -10px;
	border-width: 0 5px 10px 5px;
}
.professional-creators.second .works .balloon:after {
	top: -8px;
	border-width: 0 5px 10px 5px;
}
.professional-creators.second .works .balloon .title:after {
	height: 2px;
	width: 20vw;
}
.professional-creators.second .works .balloon .title {
	font-size: 3.5vw;
}
.professional-creators.second .works .balloon .comment p {
	font-size: 3.2vw;
	text-align: justify;
	text-justify: inter-ideograph; /* IE */
}
}/* for SP max-width: 800px */

/*-------------------------------------------------------------
	banner
-------------------------------------------------------------*/
.professional-creators.second .banner {
	margin-top: 40px;
}
.professional-creators.second .banner .flex_container .item a {
	display: block;
	box-sizing: border-box;
	height: 100%;
	color: #fff;
	text-decoration: none;
	box-shadow: 5px 5px 0 0 rgba(0, 0, 0, .1);
}
.professional-creators.second .banner .flex_container .item .bnr_world_majors a {
	color: #000;
}
.professional-creators.second .banner .flex_container .item a:hover {
	box-shadow: 10px 10px 0 0 rgba(0, 0, 0, .05);
	-webkit-transform: translate(-5px, -5px);
	transform: translate(-5px, -5px);
}
/* タブレット以下 */
@media screen and (max-width: 1070px) {

}/* for tablet max-width: 1070px */
/* SP向けレイアウトの指定：～800px */
@media only screen and (max-width: 800px) {
.professional-creators.second .banner {
	margin-top: 15px;
}
}/* for SP max-width: 800px */

/*===============================================================
	
	Plugin
	
===============================================================*/
.ofi {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;'
}
.ofi_r {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
	font-family: 'object-fit: cover; object-position: center right;'
}
.ofi_l {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center left;
	font-family: 'object-fit: cover; object-position: center left;'
}

/* =============================================================================

	hoge

============================================================================= */
.hoge {}

/*-------------------------------------------------------------
	hogehoge
-------------------------------------------------------------*/

/* タブレット以下 */
@media screen and (max-width: 1070px) {

}/* for tablet max-width: 1070px */
/* SP向けレイアウトの指定：～800px */
@media only screen and (max-width: 800px) {

}/* for SP max-width: 800px */