@charset "utf-8";
/*-----------------------------------------------
 * sub_page - Characer
-------------------------------------------------*/
.sub-chara {
	position: relative;
	z-index: 2;
}
.sub-chara:before {
	content: "";
	background-color: var(--color-blue-bg);
	border-radius: min(calc(100 / var(--vw-min) * 100vw), 100px) 0 0 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.sub-chara__inner {
	width: var(--common-in-width);
	max-width: var(--common-in-maxwidth);
	margin: 0 auto;
	padding: min(calc(120 / var(--vw-min) * 100vw), 120px) 0;
	position: relative;
	z-index: 1;
}
.sub-chara__cont {
	position: relative;
	z-index: 1;
}
@media screen and (max-width:768px){
	.sub-chara:before {
		border-radius: calc(40 / var(--vw-min) * 100vw) 0 0 0;
	}
	.sub-chara__inner {
		padding: calc(50 / var(--vw-min) * 100vw) 0 calc(60 / var(--vw-min) * 100vw);
	}
}

/*-----------------------------------------------
 * contents
-------------------------------------------------*/
.charaListsWrap {
	margin-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
	position: relative;
	z-index: 1;
}
.charaLists {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: min(calc(60 / var(--vw-min) * 100vw), 60px) min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.charaLists__item {
	position: relative;
}
.charaLists__item > a {
	display: block;
	text-decoration: none;
	position: relative;
}
@media screen and (max-width:768px){
	.charaListsWrap {
		margin-top: calc(24 / var(--vw-min) * 100vw);
	}
	.charaLists { 
		grid-template-columns: repeat(2, 1fr);
		gap: calc(30 / var(--vw-min) * 100vw) calc(8 / var(--vw-min) * 100vw);
	}
}

/* img */
.charaLists__item__img {
	border-radius: min(calc(170 / var(--vw-min) * 100vw), 170px);
	background-color: #fff;
	width: 100%;
	height: min(calc(180 / var(--vw-min) * 100vw), 180px);
	overflow: hidden;
	position: relative;
}
.charaLists__item__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}
.charaLists__item__img:before {
	content: "";
	background: url(../img/common/bg/ptn_2.jpg) repeat 0 0 / min(calc(80 / var(--vw-min) * 100vw), 80px) min(calc(80 / var(--vw-min) * 100vw), 80px);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
@media screen and (hover: hover) and (pointer: fine) {
	.charaLists__item > a:hover .charaLists__item__img:before {
		animation: bgAnim 15s linear infinite;
	}
}
@media screen and (max-width:768px){
	.charaLists__item__img {
		border-radius: calc(80 / var(--vw-min) * 100vw);
		height: calc(86 / var(--vw-min) * 100vw);
	}
	.charaLists__item__img:before {
		background-size: 10vw 10vw;
	}
}

/* name */
.charaLists__item__name {
	border-radius: min(calc(36 / var(--vw-min) * 100vw), 36px);
	background-color: var(--color-black);
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(calc(194 / var(--vw-min) * 100vw), 194px);
	height: min(calc(36 / var(--vw-min) * 100vw), 36px);
	margin: auto;
	position: absolute;
	right: 0;
	bottom: max(-18px, -1.3473vw);
	left: 0;
	z-index: 2;
}
.charaLists__item__name:before,
.charaLists__item__name:after {
	content: "";
	background: url(../img/common/icon_deco/deco_foot_2.svg) no-repeat center / contain;
	width: min(calc(20 / var(--vw-min) * 100vw), 20px);
	height: min(calc(16 / var(--vw-min) * 100vw), 16px);
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
}
.charaLists__item__name:before {
	right: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
.charaLists__item__name:after {
	left: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
.charaLists__item__name span {
	color: #fff;
	font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
}
@media screen and (max-width:768px){
	.charaLists__item__name {
		width: calc(124 / var(--vw-min) * 100vw);
		height: calc(24 / var(--vw-min) * 100vw);
		bottom: calc(-12 / var(--vw-min) * 100vw);
	}
	.charaLists__item__name:before,
	.charaLists__item__name:after {
		width: calc(14 / var(--vw-min) * 100vw);
		height: calc(12 / var(--vw-min) * 100vw);
	}
	.charaLists__item__name:before {
		right: calc(6 / var(--vw-min) * 100vw);
	}
	.charaLists__item__name:after {
		left: calc(6 / var(--vw-min) * 100vw);
	}
	.charaLists__item__name span {
		font-size: calc(12 / var(--vw-min) * 100vw);
	}
}

/* modal */
.modalBox.is-chara {
	background: rgba(122, 140, 239, 0.85);
}
.charaModal__cont {
	width: min(calc(1200 / var(--vw-min) * 100vw), 1200px);
	position: relative;
}
.charaModal__inner {
	background: url(../img/common/bg/ptn.jpg) repeat 0 0 / 545px 545px;
    animation: bgAnim 15s linear infinite;
	border-radius: min(calc(40 / var(--vw-min) * 100vw), 40px);
	display: flex;
	align-items: center;
	width: 100%;
}
@media screen and (max-width:768px){
	.charaModal__cont {
		width: 100%;
		padding:calc(24 / var(--vw-min) * 100vw);
	}
	.charaModal__inner {
		background: url(../img/common/bg/ptn.jpg) repeat 0 0 / 80vw 80vw;
		border-radius: calc(20 / var(--vw-min) * 100vw);
		flex-direction: column;
		padding-bottom: calc(30 / var(--vw-min) * 100vw);
	}
}
.charaModal__img {
	flex-shrink: 0;
	width: min(calc(608 / var(--vw-min) * 100vw), 608px);
}
.charaModal__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.charaModal__textArea {
	padding-right: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
@media screen and (max-width:768px){
	.charaModal__img {
		width: calc(100% + calc(48 / var(--vw-min) * 100vw));
	}
	.charaModal__textArea {
		padding-right: 0;
	}
}
.charaModal__nameWrap {
	position: relative;
}
.charaModal__nameWrap:after {
    content: "";
    background: url(../img/common/icon_deco/deco_dot.svg) repeat-x 0 0 / contain;
    display: block;
    width: 100%;
    height: calc(6 / var(--vw-min) * 100vw);
    margin-top: min(calc(30 / var(--vw-min) * 100vw), 30px);
}
.charaModal__name {
	color: var(--color-blue);	
	font-size: min(calc(46 / var(--vw-min) * 100vw), 46px);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
}
.charaModal__cv {
	display: flex;
	align-items: baseline;
	color: var(--color-black);
	font-size: min(calc(26 / var(--vw-min) * 100vw), 26px);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
	margin-top: .5em;
}
.charaModal__cv::before {
	content: "CV.";
	font-family: var(--font-coiny);
	font-size: min(calc(28 / var(--vw-min) * 100vw), 28px);
	margin-right: .3em;
}
.charaModal__text {
	margin-top: min(calc(24 / var(--vw-min) * 100vw), 24px);
	color: var(--color-black);
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.8;
}
@media screen and (max-width:768px){
	.charaModal__nameWrap:after {
		height: calc(4 / var(--vw-min) * 100vw);
        margin-top: calc(24 / var(--vw-min) * 100vw);
	}
	.charaModal__name {
		font-size: calc(30 / var(--vw-min) * 100vw);
		padding: 0 min(calc(24 / var(--vw-min) * 100vw), 24px);
	}
	.charaModal__cv {
		font-size: calc(20 / var(--vw-min) * 100vw);
		padding: 0 min(calc(24 / var(--vw-min) * 100vw), 24px);
	}
	.charaModal__cv::before {
		font-size: calc(23 / var(--vw-min) * 100vw);
	}
	.charaModal__text {
		font-size: calc(16 / var(--vw-min) * 100vw);
		padding: 0 min(calc(24 / var(--vw-min) * 100vw), 24px);
	}
}

/* pager */
.charaModal__pager {
	background-color: var(--color-black);
	border-radius: 50%;
	display: block;
	width: min(calc(56 / var(--vw-min) * 100vw), 56px);
	height: min(calc(56 / var(--vw-min) * 100vw), 56px);
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
}
.charaModal__pager.is-prev {
	left: max(-28px, -2.0958vw);
}
.charaModal__pager.is-next {
	right: max(-28px, -2.0958vw);
}
@media screen and (hover: hover) and (pointer: fine) {
	.charaModal__pager {
		transition: transform .3s var(--easing-easeinoutback);
	}
	.charaModal__pager:hover {
		transform: scale(1.15);
	}
}
.charaModal__pager:before {
	content: "";
	background-color: #fff;
	-webkit-mask: url(../img/common/icon_deco/icon_arrow.svg) no-repeat center / contain;
	mask: url(../img/common/icon_deco/icon_arrow.svg) no-repeat center / contain;
	width: min(calc(20 / var(--vw-min) * 100vw), 20px);
	height: min(calc(15 / var(--vw-min) * 100vw), 15px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.charaModal__pager.is-prev:before {
	-webkit-mask-image: url(../img/common/icon_deco/icon_arrow_l.svg);
	mask-image: url(../img/common/icon_deco/icon_arrow_l.svg);
}
@media screen and (max-width:768px){
	.charaModal__pager {
		width: calc(40 / var(--vw-min) * 100vw);
		height: calc(40 / var(--vw-min) * 100vw);
	}
	.charaModal__pager.is-prev {
		left: calc(4 / var(--vw-min) * 100vw);
	}
	.charaModal__pager.is-next {
		right: calc(4 / var(--vw-min) * 100vw);
	}
	.charaModal__pager:before {
        width: calc(14 / var(--vw-min) * 100vw);
        height: calc(10 / var(--vw-min) * 100vw);
    }
}