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

	Title: individual.css
	Created: 2025-1-6

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

		common
		movies
		index
		

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

	common

=========================================================== */
#individual .title {
	background-image: url('/assets/img/common/title/title_individual.png');
	align-items: center;
}
#individual.movies .title h1:before {
    content: "";
    display: inline-block;
    width: 120px;
    height: 120px;
    background-image: url(/assets/img/ja/individual/movies-title.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
}
#individual.individual .title h1:before {
    content: "";
    display: inline-block;
    width: 120px;
    height: 120px;
    background-image: url(/assets/img/ja/individual/individual-title.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -24px;
    left: 0;
}
#individual.interview .title h1:before {
    content: "";
    display: inline-block;
    width: 170px;
    height: 170px;
    background-image: url(/assets/img/ja/individual/interview-title.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -24px;
    left: 0;
}
#individual .title h1 {
	position: relative;
	align-items:center;
}
@media screen and (max-width: 1024px) {
	#individual.movies .title h1:before {
	    width: 44px;
	    height: 56px;
	    bottom: -12px;
	}
	#individual.individual .title h1:before {
	    width: 44px;
	    height: 56px;
	    bottom: -12px;
	}
	#individual.interview .title h1:before {
	    width: 80px;
	    height: 52px;
	    bottom: -12px;
	}
}
/* ===========================================================

	movies

=========================================================== */
.movies-container {
	display: flex;
	flex-wrap: wrap;
    gap:  32px 16px;
    margin-bottom: 64px;
}
.movies-box {
	display: flex;
	width: 384px;
	padding: 16px 16px 24px 16px;
	flex-direction: column;
	align-items: center;
	border-radius: 24px;
	background: #FFF;
	box-shadow: 0px 4px 8px 0px rgba(61, 61, 61, 0.14);
}
.movies-box:hover {
	opacity: .8;
}
.movies-box a {
	text-decoration: none;
	width: 100%;
}
.movies-img img {
	border-radius: 16px;
	width: 100%;
	margin-bottom: 16px;
}
.movies-info {
	display: flex;
	align-itmes: center;
	margin-bottom: 24px;
}
.movies-category1 {
	text-align: center;
	width: 96px;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	border-radius: 100px;
	background: #BDD9ED;
	color: #292929;
}
.movies-category2 {
	text-align: center;
	width: 96px;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	border-radius: 100px;
	background: #FFDFE2;
	color: #292929;
}
.movies-category3 {
	text-align: center;
	width: 96px;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	border-radius: 100px;
	background: #FDF1AB;
	color: #292929;
}
.movies-category4 {
	text-align: center;
	width: 96px;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	border-radius: 100px;
	background: #1277be;
	color: #fff;
}
.movies-category5 {
	text-align: center;
	width: 96px;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	border-radius: 100px;
	background: #a2a2a2;
	color: #fff;
}
.movies-date {
	color: #656565;
	font-size: 14px;
	line-height: 24px;
	margin-left: 8px;
}
.movies-title {
	text-align: center;
	color: #292929;
	font-size: 20px;
}
.pagination {
	display: flex;
	justify-content: center;
	gap: 0 16px;
}
.pagination a {
	text-decoration: none;
	color: #292929;
}
.pagination i {
	position: relative;
}
.pagination li {
	position: relative;
	width: 48px;
	height: 48px;
    text-align: center;
    line-height: 48px;
}
.pagination li.navi-active {
	color: #fff;
	background-color: #E30C1F;
	border-radius: 50%;
}
.pagination li.navi-active a {
	color: #fff;
	transtion: all .3s;
}
.pagination i:before,
.pagination i:after {
	content: "";
	position: absolute;
	top: calc(50% - 0px);
	width: 10px;
	height: 1px;
	border-radius: 9999px;
	background-color: #292929;
	transform-origin: calc(100% - 0px) 50%;
}
.fa-angle-double-left:before {
  transform: rotate(135deg);
  left: -32px;
}
.fa-angle-double-left:after {
  transform: rotate(-135deg);
  left: -32px;
}
.fa-angle-left:before {
  transform: rotate(135deg);
  left: -16px;
}
.fa-angle-left:after {
  transform: rotate(-135deg);
  left: -16px;
}
.fa-angle-double-right:before {
  transform: rotate(45deg);
  right: -24px;
}
.fa-angle-double-right:after {
  transform: rotate(-45deg);
  right: -24px;
}
.fa-angle-right:before {
  transform: rotate(45deg);
  right: 16px;
}
.fa-angle-right:after {
  transform: rotate(-45deg);
  right: 16px;
}

@media screen and (max-width: 1200px) {
	.movies-box {
		width: 100%;
	}
	.pagination {
		gap: 0 4px;
	}
	.pagination li {
		width: 32px;
		height: 32px;
	    line-height: 32px;
	}

}

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

	index

=========================================================== */
.indent-table.feature-table {
	width: max-content;
	margin: 0 auto;
}
.individual-pagelink {
	display: flex;
	flex-wrap: wrap;
	width: 876px;
	gap: 32px 24px;
	margin: 0 auto;
	padding: 96px 0 64px;
}
.individual-pagelink a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 276px;
	padding: 16px 30px;
	border-radius: 16px;
	background: #FFF;
	box-shadow: 0px 4px 12px 0px rgba(61, 61, 61, 0.16);
	color: var(--Gallery-950, #292929);
	text-align: center;
	font-family: "M PLUS 1p";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.32px;
	text-decoration: none;
}
.individual-pagelink a:hover {
	opacity: .8;
}
.individual-pagelink a img {
	display: block;
	margin-bottom: 12px;
	width: auto;
	height: 96px;
}
.individual-pagelink a span {
	display: block;
	margin-bottom: 24px;
}
.individual-pagelink a.link1:after {
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	border-bottom: solid 2px #E30C1F;
	border-right: solid 2px #E30C1F;
	transform: rotate(45deg) translateX(-50%);
	position: absolute;
	bottom: 16px;
	margin: auto;
}
.individual-pagelink a.link2:after {
  display: block;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  bottom: 8px;
  right: 8px;
  border-left: 15px solid transparent;
  border-bottom: 15px solid #E30C1F;
  border-radius: 2px;
}
.indevidual-feature {
	display: flex;
	padding: 16px 24px;
	justify-content: center;
	align-items: center;
	color: #fff;
	border-radius: 16px;
	background: var(--Alizarin-Crimson-600, #E30C1F);
	font-size: 24px;
	line-height: 100%; /* 24px */
	letter-spacing: 0.48px;
	width: max-content;
	margin: 0 auto 32px;
}
.indevidual-feature span {
	font-size: 32px;
	line-height: 100%; /* 32px */
	letter-spacing: 0.64px;
	margin-left: 8px;
}
.indevidual-feature2 {
	display: flex;
	padding: 32px 64px;
	justify-content: center;
	align-items: center;
	color: #fff;
	border-radius: 16px;
	background: var(--Alizarin-Crimson-600, #E30C1F);
	font-size: 24px;
	line-height: 100%; /* 24px */
	letter-spacing: 0.48px;
	width: max-content;
	margin: 0 auto 32px;
}

.indevidual-feature2 em {
	color: #FFF;
	font-family: Poppins;
	font-size: 64px;
	font-style: normal;
	font-weight: 500;
	margin-left: 16px;
}
.indevidual-read {
	color: var(--Thunderbird-700, #E00312);
	text-align: center;
	font-size: 32px;
	font-style: normal;
	font-weight: 500;
	line-height: 160%; /* 51.2px */
	letter-spacing: 3.2px;
	margin-bottom: 48px;
}
.column__cell.indevidual-cell {
	padding: 0 48px;
}
.column__cell.indevidual-cell p {
	margin: 16px 0 32px;
}
.column__cell.indevidual-cell a {
	text-decoration: none;
}
.column__cell.indevidual-cell h5 {
	position: relative;
	display: inline-block;
}
.column__cell.indevidual-cell h5:after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('/assets/img/common/ic/ic_blank_a.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -24px;
}
.indevidual-data {
	display: flex;
	gap: 32px;
}
.indevidual-data .data-box {
	text-align: center;
	display: flex;
	padding: 16px 16px 24px 16px;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	flex: 1 0 0;
	border-radius: 24px;
	background: #FFF;
	box-shadow: 0px 4px 8px 0px rgba(61, 61, 61, 0.08);
}
.data-box .data-title {
	padding: 8px 0px;
	width: 100%;
	border-radius: 100px;
	background: var(--Alizarin-Crimson-600, #E30C1F);
	color: var(--white, #FFF);
	line-height: 140%; /* 22.4px */
}
.data-box p {
	margin-bottom: 0;
}
.data-txt {
	display: flex;
	align-items: center;
}
.data-txt img {
	margin-right: 24px;
}
.faq dt {
	position: relative;
	font-size: 24px;
	padding: 0 0 24px 72px;
	margin-bottom: 32px;
	border-bottom: 1px solid #BDBDBD;
}
.faq dt:before {
    content: "";
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url('/assets/img/ja/individual/faq-icon.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -6px;
    left:0;
}
.faq dd p {
	margin-bottom: 32px;
}
.faq dd p a + a {
	margin-left: 16px;
}
.index-portfoliodata-area {
	display: flex;
	align-items: center;
	gap: 48px;
}
.portfoliodata-area-text {
	text-align: left;
}
.portfoliodata-area-text dl {
	display: flex;
	margin-bottom: 12px;
	padding-left: 32px;
	position: relative;
}
.portfoliodata-area-text dl:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 4px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -6px;
}
.portfoliodata-area-text dl.area1:before {
	background-color: #FF9AA3;
}
.portfoliodata-area-text dl.area2:before {
	background-color: #ABE560;
}
.portfoliodata-area-text dl.area3:before {
	background-color: #59A0D1;
}
.portfoliodata-area-text dl.area4:before {
	background-color: #FFC800;
}
.portfoliodata-area-text dt {
	width: 3em;
	margin-right: 12px;
}
.portfoliodata-area-text dd {
	width: 50px;
	text-align: right;
}
.index-portfoliodata-asset {
	display: flex;
    align-items: center;
	gap: 24px;
	height: 100%;
}
.portfoliodata-asset-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-weight: 500;
}
.asset-box-title {
	color:#E30C1F;
	border-bottom: 1px solid #E30C1F;
	padding: 0 12px 8px;
}
.asset-box-data {
	font-size: 24px;
	padding: 0 12px;
}
.asset-box-data span {
	font-family: Poppins;
	font-size: 32px;
}
.asset-box-date {
	font-size: 12px;
}
@media screen and (max-width: 1024px) {
.indent-table.feature-table {
	width: auto;
}

.individual-pagelink {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 16px 12px;
	margin: 0 auto 64px;
	padding: 0;
}
.individual-pagelink a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 16px 30px;
	border-radius: 16px;
	background: #FFF;
	box-shadow: 0px 4px 12px 0px rgba(61, 61, 61, 0.16);
	color: var(--Gallery-950, #292929);
	text-align: center;
	font-family: "M PLUS 1p";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.32px;
	text-decoration: none;
}
	.column__cell.indevidual-cell {
		padding: 0;
	}
	.indevidual-feature2 {
		padding: 16px 32px;
	}
	
	.indevidual-feature2 em {
		font-size: 48px;
	}
	.indevidual-data {
		flex-direction:column;
	}
	.index-portfoliodata-area {
		flex-direction: column;
		gap: 32px;
	}
	.index-portfoliodata-asset {
		gap: 8px;
	}
	.asset-box-img {
		width: 50px;
		height: 25px;
	}
}

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

	interview

=========================================================== */
.interview {
	font-size: 18px;
} 
.interview-list {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 24px;
	background: #FFF;
	box-shadow: 0px 4px 8px 0px rgba(61, 61, 61, 0.14);
	padding: 32px;
	gap: 32px;
	cursor: pointer;
}
.interview-list:hover {
	opacity: .7;
}
.interview-list:link {
	color: #292929;
	text-decoration: none;
}
.interview-list + .interview-list {
	margin-top: 32px;
}
.interview-list-img img {
	width: 368px;	
}
.interview-list-text {
	padding-right: 52px;
	position: relative;
}
.interview-list:after {
  content: '';
  width: 30px;
  height: 30px;
  border: 0;
  border-top: solid 2px #E30C1F;
  border-right: solid 2px #E30C1F;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 32px;
  bottom: 0;
  margin: auto;
}
.interview-list-text:before {
  transform: rotate(45deg);
}

.interview-list-text:after {
  transform: rotate(-45deg);
}
.interview-text-read {
	color: var(--Gallery-950, #292929);
	font-family: "M PLUS 1p";
	font-size: 20px;
	font-weight: 500;
	/*padding-bottom: 16px;*/
	/*border-bottom: 1px solid #BDBDBD;*/
	/*margin-bottom: 16px;*/
}
.interview-list-text p {
	margin-bottom: 0;
	color: #292929;
}
.interview-list-text p a {
	margin-bottom: 0;
	color: #292929;
}
.interview-members {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-bottom: 96px;
}
.interview-members img {
	width: 820px;
}
.members-list {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	flex: 1;
}
.members-list > div {
	padding: 16px 24px;
}
.members-photo {
	width: 416px;
    margin-bottom: -52px;
    position: relative;
    z-index: 2;
}
.members-data {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-grow: 1;
	padding: 74px 32px 32px 32px;
	border-radius: 24px;
	background: #FFF;
	box-shadow: 0px 4px 8px 0px rgba(61, 61, 61, 0.14);
}
.members-post {
	color: var(--Gallery-600, #656565);
	font-size: 16px;
	font-weight: 500;
	line-height: 140%; /* 22.4px */
	border-bottom: 1px solid #BDBDBD;
	padding-bottom: 8px;
	margin-bottom: 8px;
}
.members-name {
	color: var(--Gallery-950, #292929);
	font-size: 18px;
	line-height: 140%;
}
.members-name span {
	font-size: 28px;
}
.name-color1 {
	color: #1277BE;
}
.name-color2 {
	color: #E85439;
}
.name-color3 {
	color: #EC8E1A;
}
.name-color4 {
	color: #69AD33;
}
.name-color5 {
	color: #9A5CB0;
}
.name-color6 {
	color: #E86A60;
}
.icon-head {
	background-image: url('/assets/img/ja/individual/interview-head-icon.png');
	background-size: 48px;
	background-repeat: no-repeat;
	background-position: 16px;
	padding-left: 80px;
}
.photo-column {
	display: flex;
	gap: 32px;
	margin-bottom: 32px;
}
.photo-column img {
	width: 402px;
}
.photo-column2 {
	display: flex;
	gap: 32px;
	margin-bottom: 32px;
}
.photo-column2 img {
	width: 678px;
}

.talk-list {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-bottom: 32px;
}
.talk-list dt {
	line-height: 105%;
	width: 46px;
}
.talk-list dd {
	width: calc(100% - 78px);
}
@media screen and (max-width: 1200px) {
	.interview-list {
	    flex-direction: column;
	    align-items: center;
	}
	.interview-list:after {
		content: none;
	}
	.interview-list-text:after {
	  content: '';
	  width: 30px;
	  height: 30px;
	  border: 0;
	  border-top: solid 2px #E30C1F;
	  border-right: solid 2px #E30C1F;
	  transform: rotate(45deg);
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  margin: auto;
	}
	.icon-head {
		padding-left: 64px;
		background-size: 32px;
	}
	
	.interview-members {
		flex-direction: column;
		margin-bottom: 0;
	}
	.interview-members img {
		width: 100%;
	}
	.members-list > div {
		padding: 16px 0;
	}

	.members-box {
		width: 100%;
		align-items :center;
	}
	.members-photo {
		width: 100%;
		max-width: 416px;
	}
	.photo-column {
		flex-direction: column;
		align-items: center;
	}
	.photo-column img {
		order: 1;
		width: 100%;
		max-width: 401px;
	}
	.photo-column div {
		order: 2;
	}
	.photo-column p {
		margin-bottom: 16px;
	}
	.photo-column2 {
		flex-direction: column;
		align-items: center;
	}
	.photo-column2 img {
		order: 1;
		width: 100%;
		max-width: 401px;
	}
	.photo-column2 div {
		order: 2;
	}
	.photo-column2 p {
		margin-bottom: 16px;
	}
	.talk-list {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		margin-bottom: 16px;
	}
	.talk-list dt {
		width: 100%;
	}
	.talk-list dd {
		width: 100%;
	}

}