@charset "utf-8";

/* // base
----------------------------------------------- */
body {
	color:#000;
	font-family: 'Noto Sans Japanese', "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS P Gothic","ＭＳ Ｐゴシック",sans-serif;
}
a {
	color:#555;
	text-decoration:none;
}
a:hover,a:active {
	color:#777;
}
a.pageTop {
	font-size:26px;
	width:60px;
	height:60px;
	right:0;
	bottom:0;
	background-color:#000;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
html:not(.tbsp) a.pageTop:hover {
	background-color:#000;
}
a.btnA {
	background-color:#FFF;
	border:1px solid #333;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	color:#000;
}
a.btnA i {
	color:#000;
	font-size:120%;
}
#Container {
	overflow:hidden;
}
#ContentsWrap {
	transition:0.8s;
	transition-delay:0.4s;
	opacity:1;
	padding-bottom:60px;
}
#ContentsWrap.default {
	opacity:0;
}

/* // common
----------------------------------------------- */
.pageTitle {
	background:#444 url(../img/base_ami_black_10.png);
	padding:18px 0 15px;
	border-bottom:5px solid #686868;
	margin-bottom:50px;
	color: #FFF;
	-webkit-transform: translate3d(0, 0, 0);
}

.pageTitle span {
	display:block;
	text-align:center;
	line-height:1;
}
.pageTitle .en {
	font-weight:700;
	font-size:27px;
	-webkit-transform:scale(1,0.88);
	transform:scale(1,0.88);
	/*margin-bottom:10px;*/
	display: inline-block;
	padding-right: 20px;
	line-height: 30px;
	border-right: 1px solid #fff;
	margin-right: 20px;
	vertical-align: middle;
}
.pageTitle .ja {
	font-weight:200;
	font-size:14px;
	display: inline-block;
	line-height: 30px;
	vertical-align: middle;
}

/* // Header
----------------------------------------------- */
#Header {
	padding:10px 0 5px;
	text-align:center;
	position:relative;
}
#Header .widthFix {
	position:relative;
}
#Header .logo {
	display:inline-block;
	margin-bottom:20px;
}
#Header .logo img,
#Header .logo object {
	width:230px;
	position:relative;
	top:0;
	opacity:1;
	transition:0.8s;
	pointer-events: none;
}
#Header .snsBtn {
	position:absolute;
	top:15px;
	right:50%;
	-webkit-transform: translateX(550px);
	-ms-transform: translateX(550px);
	transform: translateX(550px);
	display: none;
}
#Header .snsBtn.on { display: block; }
#Header .snsBtn li {
	display:inline-block;
	margin-left:7px;
}
#Header .snsBtn li img {
	width:36px;
}
#Header h1{
	font-size: 11px;
	font-weight: 100;
	position: absolute;
	left: -30px;
	top: 0px;
	line-height: 1;
	color: #999;
}

/* // Gnavi
----------------------------------------------- */
#Gnavi {
	text-align:center;
	transition:0.8s;
	transition-delay:0.2s;
	opacity:1;
}
#Gnavi.default {
	opacity:0;
}
#Gnavi ul {
	display:inline-block;
	text-align:center;
	background:url(../img/cmn_gnavi_line_01.png) right center no-repeat;
	background-size:auto 100%;
	padding-right:30px;
	width: 1100px;
}
#Gnavi li {
	float:left;
	display:inline-block;
	background:url(../img/cmn_gnavi_line_01.png) left center no-repeat;
	background-size:auto 100%;
}
#Gnavi li a {
	display:block;
	min-width:160px;
	line-height:1;
	color:#000;
	padding:12px 59px;
	position:relative;
}
#Gnavi li .en,
#Gnavi li .ja {
	display:block;
	text-align:center;
	position:relative;
	left:15px;
}

#Gnavi li .en {
	-webkit-transform: scale(1,0.9);
	-moz-transform: scale(1,0.9);
	transform: scale(1,0.9);
	font-weight:600;
	font-size:19px;
	margin-bottom:6px;
}
#Gnavi li .ja {
	font-size:13px;
}
#Gnavi li a:after {
	position: absolute;
	top:100%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	content:' ';
	display:block;
	height:5px;
	width:0%;
	background-color:#DDD;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
#Gnavi li a:hover:after {
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	width:100%;
}
#Gnavi li.on a:after {
	width:100%;
	background-color:#000;
}


/* // Footer
----------------------------------------------- */
#Footer {
	background:#444 url(../img/base_ami_black_10.png);
	padding: 15px 0;
}
#Footer,
#Footer a{
	color:#efefef;
}

#Footer .menu {
	text-align: center;
	margin-bottom: 20px;
}
#Footer .menu ul{
	display:inline-block;
	text-align:center;
	width: 1100px;

}
#Footer .menu li{
	display:inline-block;
}
#Footer .menu li a {
	display:block;
	min-width:160px;
	line-height:1;
	padding:12px 0;
	position:relative;
}
#Footer .menu li .en,
#Footer .menu li .ja {
	display:block;
	text-align:center;
	position:relative;
}

#Footer .menu li .en {
	-webkit-transform: scale(1,0.9);
	-moz-transform: scale(1,0.9);
	transform: scale(1,0.9);
	font-weight:600;
	font-size:19px;
	margin-bottom:6px;
}
#Footer .menu li .ja {
	font-size:13px;
}
#Footer .bottom .company{
	text-align: center;
	font-size: 14px;
}
#Footer .bottom .company a{
	border-bottom: 1px dotted #ccc;
	display: inline-block;
	line-height: 1.5;
}
#Footer .bottom .copy{
	text-align: center;
	font-size: 12px;
}


/* // InterviewList
----------------------------------------------- */
#InterviewList {
	background-color:#000;
}
#InterviewList.top {
	width:1200px;
	margin:0 auto;
}
#InterviewList .column {
	float:left;
	display:block;
	width:33.3%;
}
#InterviewList.padding {
	background-color:transparent;
	padding:0 10px;
}
#InterviewList.padding .column {
	padding:10px;
}
#InterviewList.col2 .column {
	width:50% !important;
}
#InterviewList.col2 .column .box {
	background-position:center top;
	background-size: 100% auto;
}
#InterviewList.col2 .column .image {
	top: 0%;
	-webkit-transform: translate(-50%, -0%);
	transform: translate(-50%, -0%);
	height:auto;
	width:100%;
}


#InterviewList .column .box {
	display:block;
	height:350px;
	width:100%;
	position:relative;
	color:#FFF;
	overflow:hidden;
	background-position:center center;
	background-repeat:no-repeat;
	background-size: auto 100%;
	transition: 1.3s;
}

/*#OtherArticle #InterviewList .column .box {
	height:320px;
}
#OtherArticle #InterviewList .column .image {
	height:320px;
	width:auto;
}
*/
#InterviewList.wide .column .box {
	background-position:center top;
	background-size: cover;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
#InterviewList .column:nth-child(3n) {
	width:33.4%;
}
#InterviewList .column .image {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display:block;
	height:350px;
	width:auto;
	transition: 0.3s;
	opacity:0;
	display: inline-block;
/*    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
*/}
#InterviewList.wide .column .image {
	top: 0%;
	-webkit-transform: translate(-50%, -0%);
	transform: translate(-50%, -0%);
	height:auto;
	width:100%;
}

#InterviewList .column a:hover .image {
	opacity:1;
	transition: 0.3s;
}


#InterviewList .column .wrap {
	position: absolute;
	left: 50%;
	top: 65%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display:block;
	width:94%;
	text-align:center;
}
#InterviewList .column .box.intro .wrap {
	top: 50%;
}
#InterviewList .column .box.intro .title {
	-webkit-transform: scale(1,0.85);
	transform: scale(1,0.85);
	opacity:0.4;
	font-weight:800;
	font-size:54px;
	margin-bottom:0;
}
#InterviewList .column .box.intro .lead {
	line-height:1.8;
	margin-bottom:20px;
}
#InterviewList .column .box.intro .btn .btnA {
	width:65%;
	padding-top:17px;
	padding-bottom:17px;
	border-width:0;
	text-shadow:  0px 0px 0 rgba(0,0,0,0.6);
}


#InterviewList .column p {
	text-align:center;
	line-height:1.4;
}
#InterviewList .column:not(.intro) p {
	text-shadow:  0px 0px 15px rgba(0,0,0,1);
}

#InterviewList .column .title {
	font-size:24px;
	margin-bottom:20px;
	letter-spacing:0;
}
#InterviewList .column .affiliation {
	font-size:120%;
	margin-bottom:9px;
}
#InterviewList .column .person {
	margin-bottom:15px;
}
#InterviewList .column .link {
	opacity:0;
	font-size:36px;
	position:relative;
	left:-10px;
}
#InterviewList .column a:hover .link {
	opacity:1;
	transition:0.5s;
	left:0;
}
#InterviewList .column .frame span {
	position:absolute;
	display:block;
	background-color:#fff;
	opacity:0.25;
}
#InterviewList .column .frame span.top {
	top:0;
	left:-16px;
	height:16px;
	width:0%;
}
#InterviewList .column .frame span.right {
	top:-16px;
	right:0;
	height:0%;
	width:16px;
}
#InterviewList .column .frame span.bottom {
	bottom:0;
	right:-16px;
	height:16px;
	width:0%;
}
#InterviewList .column .frame span.left {
	bottom:-16px;
	left:0;
	height:0%;
	width:16px;
}
#InterviewList .column a:hover .frame span.top {
	width:100%;
	transition: 0.1s;
	transition-delay: 0s;
}
#InterviewList .column a:hover .frame span.right {
	height:100%;
	transition: 0.1s;
	transition-delay: 0.1s;
}
#InterviewList .column a:hover .frame span.bottom {
	width:100%;
	transition: 0.1s;
	transition-delay: 0.2s;
}
#InterviewList .column a:hover .frame span.left{
	height:100%;
	transition: 0.1s;
	transition-delay: 0.3s;
}
#InterviewList.list{
	width: 1100px;
	margin:0 auto;
	background-color: transparent;
}
#InterviewList.list .column{
	margin-right: 40px;
	width: 340px;
	margin-bottom: 30px;
	position: relative;
	overflow: visible;
}
#InterviewList.list .column:nth-child(3n){
	margin-right: 0;
}
#InterviewList.list .column .box{
	height: 220px;
	background-size: 339px auto;
	background-position: center top;
	/*margin-bottom: 160px;*/
	margin-right: 0;
	overflow: visible;
}
#InterviewList.list .column .imageWrap{
	display: block;
	overflow: hidden;
	height: 220px;
	position: relative;
	overflow: hidden;
}
#InterviewList.list .column .image{
	top: 0;
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
	left: 0;
	width: 100%;
	height: auto;
}
#InterviewList.list .column .wrap{
	position: relative;
	-webkit-transform: translate3d(0, 10px, 0);
	transform: translate3d(0, 10px, 0);
	left: 0;
	top: 0;
	width: 100%;
}
#InterviewList.list .column:not(.intro) p{
	text-shadow: 0 0 0 transparent;
	color: #000;
}
#InterviewList.list .column a .title{
	font-size: 18px;
	font-weight: bold;
	text-align: left;
	line-height: 1.5;
	margin-bottom: 12px;
}
#InterviewList.list .column a .title:after{
	display: block;
	width: 36px;
	height: 1px;
	content: "　";
	background-color: #999;
	margin-top: 8px;
}

#InterviewList.list .column a .affiliation,
#InterviewList.list .column a .person{
	font-size: 13px;
	line-height: 1.7;
	text-align: left;
	margin:0;
}
#InterviewList.list .column a .affiliation{
	margin-bottom: 5px;
}
#InterviewList.list .column a .person{
	margin-bottom: 5px;
}
#InterviewList.list .column a .date{
	font-size: 12px;
	color: #999;
	text-align: left;
}
#InterviewList.list .column .btn{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	font-size: 12px;
	-webkit-transform: translateY(110%);
	-ms-transform: translateY(110%);
	transform: translateY(110%);
	opacity: .7;
}
#InterviewList.list .column .btn a{
	padding: 10px 50px 10px 30px;
}
#InterviewList.list.movie .column{
	padding-bottom: 0;
	margin-bottom: 90px;
}
#InterviewList.list.movie .box:after{
	content: "　";
	width: 50px;
	height: 50px;
	display: block;
	background:url(/_pack/img/movie_icon.png) no-repeat center bottom;
	background-size: contain;
	position: absolute;
	left: 20px;
	bottom:20px;
	z-index: 10;
	/*opacity: .5;*/
	/*transition: all .5s ease;*/
}

/* movie learn */

#InterviewList #Skillup_content .column .box {
	height:450px;
	width:100%;
	position:relative;
	color:#FFF;
	overflow:hidden;
	background-position:center center;
	background-repeat:no-repeat;
	background-size: auto 100%;
	transition: 0s;
}
#InterviewList.list.movie #Skillup_content .column{
	padding-bottom: 0;
	margin-bottom: 30px;
}
#InterviewList.list #Skillup_content .column .box{
	height: 254px;
	/*margin-bottom: 160px;*/
	margin-right: 0;
	overflow: visible;
}
#InterviewList.list #Skillup_content .column .imageWrap{
	display: block;
	overflow: hidden;
	height: 254px;
	position: relative;
	overflow: hidden;
}
#InterviewList.list.movie #Skillup_content .box:after {
	content: none;
}
#InterviewList.list.movie #Skillup_content .imageWrap:after{
	content: "　";
	width: 50px;
	height: 50px;
	display: block;
	background:url(/_pack/img/ico_youtube.png) no-repeat center bottom;
	background-size: contain;
	position: absolute;
	left: 20px;
	bottom:20px;
	z-index: 10;
	/*opacity: .5;*/
	/*transition: all .5s ease;*/
}
#InterviewList.list.color #Skillup_content .column img.image{
	opacity: 1.0;
	-webkit-filter: grayscale(35%);
	-moz-filter: grayscale(35%);
	-ms-filter: grayscale(35%);
	-o-filter: grayscale(35%);
	filter: grayscale(35%);
}
#InterviewList.list.color #Skillup_content .column img.image:hover{
	opacity: 1.0;
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%);
}
/* //movie learn */

#InterviewList.list.color .column .image{
	opacity: 0.7;
}
#InterviewList.list.color .column:hover .image{
	opacity: 1;
}
/*#InterviewList.list.color .column .box{
	background:transparent!important;
}
*/