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

page-staff.css　スタッフ紹介用css

********************************************************************************/

/*######################################################################
 一覧
######################################################################*/
/*============================================================
 メインビジュアル
*============================================================*/
#page-staff-list #mainvisual {
	background-image: url(../images/staff/mainvisual-bg.jpg);
}

/*============================================================
 セクション共通
*============================================================*/
#page-staff-list .section {
}


/*######################################################################
 詳細
######################################################################*/
#page-staff #main-contents .inner {
	max-width: var(--common-inner-max-width);
}

/*============================================================
 メインビジュアル
*============================================================*/
#page-staff #mainvisual {
}
#page-staff #mainvisual .tags {
	display: none;
}

/*============================================================
 セクション共通
*============================================================*/
#page-staff .section {
    margin-bottom: 0;
}

/*============================================================
 他のスタッフ
*============================================================*/
#page-staff #sec-other {
	background: var(--common-color-background2);
	padding: 64px 0;
	margin-top: 80px;
}
#page-staff #sec-other .block {
	gap: 150px;
}
#page-staff #sec-other .block .item {
	width: calc((100% - 150px) / 2);
	gap: 36px;
	align-items: center;
	transition: all .3s;
	margin-bottom: 0;
}
#page-staff #sec-other .block .item:hover {
	opacity: 0.7;
}
#page-staff #sec-other .block .item .image {
	width: 128px;
	overflow: hidden;
}
#page-staff #sec-other .block .item .image img {
	border-radius: 50%;
}
#page-staff #sec-other .block .item .info {
	width: calc(100% - 164px);
}
#page-staff #sec-other .block .item .info .position {
	font-size: 14px;
	color: #747474;
	line-height: 1;
	padding-bottom: 8px;
	border-bottom: 1px solid #8E7A73;
	margin-bottom: 8px;
	font-family: var(--common-font-family-serif);
}
#page-staff #sec-other .block .item .info .title {
	font-size: 24px;
	position: relative;
	font-family: var(--common-font-family-mincho);
}
#page-staff #sec-other .block .item .info .title:before {
	content: "";
    position: absolute;
    background: url(../images/common/icon-arrow.svg) no-repeat center center / contain;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translatey(-50%);
    right: 8px;
}


/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1128px) {
    /*######################################################################
     一覧
    ######################################################################*/
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-staff-list #mainvisual {
    }

    /*######################################################################
     詳細
    ######################################################################*/
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-staff #mainvisual {
    }
	
	/*============================================================
	 他のスタッフ
	*============================================================*/
	#page-staff #sec-other .block {
		gap: 40px;
	}
	#page-staff #sec-other .block .item {
		width: calc((100% - 40px) / 2);
		gap: 20px;
	}
	#page-staff #sec-other .block .item .info {
		width: calc(100% - 148px);
	}
}


/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
    /*######################################################################
     一覧
    ######################################################################*/
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-staff-list #mainvisual {
    }

    /*######################################################################
     詳細
    ######################################################################*/
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-staff #mainvisual {
    }
	
	/*============================================================
	 他のスタッフ
	*============================================================*/
	#page-staff #sec-other {
		padding: 40px 0;
		margin-top: 64px;
	}
	#page-staff #sec-other .block {
		gap: 32px;
	}
	#page-staff #sec-other .block .item {
		width: 100%;
		gap: 24px;
	}
	#page-staff #sec-other .block .item .info {
		width: calc(100% - 152px);
	}

}