@charset "utf-8";

/* -------------------------------------------------- */
/* PC*/
/* -------------------------------------------------- */
.pankuzuArea {
	top: 24px !important;
}

#pageTtlWrap {
	margin: 100px auto 0;
}

.aboutTtl {
	background: url(../../img/about/about_mv_bg.jpg) no-repeat center center / cover;
}

#vision {
	margin: 0 auto;
	padding: 178px 0 100px;
	background: #F9F9F9;
}

#visionInner {
	width: 100%;
	max-width: 1400px;
	margin: auto;
	padding: 174px 0 190px 80px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
	background: #FFFFFF;
}

#visionInner:after {
	width: 757px;
	height: 764px;
	content: "";
	position: absolute;
	top: -84px;
	right: -220px;
	background: url(../../img/about/vision_img.png) no-repeat 0 0 / 100%;
}

.mainCatch {
	margin: 0 0 30px;
	font-size: 4.3rem;
	font-weight: 700;
	line-height: 1.0;
	color: #1A1A1A;
}

.subCatch {
	font-size: 2.9rem;
	font-weight: 700;
	line-height: 1.0;
}

.especially {
	color: #AB0106;
}

#credo {
	margin: -20px auto 0;
	position: relative;
}

#credoConts {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.credoBox {
	width: calc(100% / 3);
	padding: 35px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-right: 1px solid #CCCCCC;
}

.credoBox01 {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.credoBox02 {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.credoBox03 {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border: none;
}

.credoHead {
	margin: 0 0 24px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.credoNum,
.credoJp {
	font-weight: 700;
}

.credoNum {
	margin: 0 8px 0 0;
	font-size: 8.0rem;
	color: #AB0106;
}

.credoJp {
	font-size: 2.2rem;
	line-height: 1.4;
}

.credoJp .br_:after {
	content: "\A";
	white-space: pre;
}

.credoTxt {
	font-size: 1.6rem;
	line-height: 1.4;
}

#staff {
	margin: -10px auto 0;
	padding: 110px 0 0
}

.staffList {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.staffList:before,
.staffList:after {
	width: 23.33%;
	content: "";
	display: block;
}

.staffList:before {
	order: 1;
}

.staffBox {
	width: 23.33%;
	margin: 0 0 50px;
}

.staffBoxIn {
	transition: all .3s ease-in-out;
}

.staffBoxIn:hover {
	opacity: 0.7;
}

.thumb {
	margin: 0 0 20px;
	border: 1px solid #D6D6D6;
}

.thumb img {
	width: 100%;
}

.staffName {
	padding: 0 0 0 16px;
	border-left: 2px solid #AB0106;
}

.yaku {
	margin: 0 0 5px;
	font-size: 1.3rem;
}

.namae {
	font-size: 2.0rem;
}

.staffInner {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.staffFigure {
	width: 54.2%;
	border: 1px solid #D6D6D6;
}

.staffFigure img {
	width: 100%;
}

.staffConts {
	width: 41.1%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-top: 1px solid #AB0106;
	border-bottom: 1px solid #AB0106;
}

.position,
.name,
.capacity,
.capaItem {
	line-height: 1.0;
}

.position {
	margin: 0 0 16px;
	font-size: 1.6rem;
}

.name {
	margin: 0 0 40px;
	font-size: 2.4rem;
	font-weight: 700;
}

.capacity {
	margin: 0 0 18px;
	font-size: 1.6rem;
	font-weight: 700;
}

.capacityList {
	margin: 0 0 30px;
}

.capaItem {
	margin: 0 0 16px;
	font-size: 1.6rem;
}

.capaItem:nth-last-of-type(1) {
	margin: 0;
}

.capaItem:before {
	width: 6px;
	height: 6px;
	margin: 0 13px 0 0;
	content: "";
	display: inline-block;
	background: #AB0106;
	border-radius: 50%;
	vertical-align: 2px;
}

.greeting {
	padding: 20px;
	background: #F2F2F2;
	font-size: 1.6rem;
	line-height: 1.4;
}

.btnClose {
	position: absolute;
	top: -140px;
	right: 0;
}

#faq {
	margin: -60px 0 0;
	padding: 110px 0 0;
}

.faqConts {
	margin: 0 0 80px;
}

.faqConts:nth-last-of-type(1) {
	margin: 0;
}

.faqContsTtl {
	margin: 0 0 32px;
	position: relative;
	font-size: 2.4rem;
	font-weight: 700;
	color: #1A1A1A;
}

.faqContsTtl:before {
	width: 50px;
	height: 1px;
	margin: 0 16px 0 0;
	content: "";
	display: inline-block;
	background: #B6B6B6;
	vertical-align: middle;
}

.faqItem {
	margin: 0 0 25px;
	border: 1px solid #ECECEC;
}

.faqItem:nth-last-of-type(1) {
	margin: 0;
}

.faqQ {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.faqQ {
	padding: 30px 80px 30px 30px;
	position: relative;
	background: #F9F9F9;
	cursor: pointer;
}

.faqA {
	padding: 25px 30px;
	display: none;
}

.textQ,
.textA {
	margin: 0 14px 0 0;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.2;
}

.textA {
	width: 1em;
	color: #AB0106;
	float: left;
}

.faqHead,
.faqTxt {
	line-height: 1.4;
}

.faqHead {
	font-size: 2.0rem;
}

.faqTxt {
	width: calc(100% - 3em);
	padding: 6px 0 0;
	font-size: 1.6rem;
	float: right;
}

/*開閉ボタン*/
.faqTrigger {
	position: absolute;
	top: 50%;
	right: 30px;
	width: 30px;
	height: 30px;
	background: #000000;
	transform: translateY(-50%);
}

.faqTrigger span {
	position: absolute;
	top: 50%;
	left: 50%;
	background: #FFFFFF;
	transition: all .3s ease-in-out;
}

.faqTrigger span:nth-of-type(1) {
	width: 1px;
	height: 20px;
	margin: -10px 0 0;
}

.faqTrigger span:nth-of-type(2) {
	width: 20px;
	height: 1px;
	margin: 0 0 0 -10px;
}

.active .faqTrigger span:nth-of-type(1) {
	width: 1px;
	height: 20px;
	margin: -10px 0 0;
	transform: translate(-50%, 0) rotate(450deg);
}

.active .faqTrigger span:nth-of-type(2) {
	opacity: 0;
}


@media screen and (min-width: 1380px) and (max-width: 1660px) {
	#visionInner:after {
		right: 50%;
		margin-right: -58vw;
	}

}


@media screen and (min-width: 1201px) and (max-width: 1379px) {
	#visionInner:after {
		width: 54.85vw;
		height: 55.36vw;
		right: 50%;
		margin-right: -58vw;
	}

}


@media screen and (min-width: 1201px) and (max-width: 1660px) {
	.mainCatch {
		font-size: 2.59vw;
	}

}


@media screen and (min-width: 1025px) and (max-width: 1200px) {
	#visionInner:after {
		/*
		width: 494px;
        height: 501px;
		*/
		width: 41.16vw;
		height: 41.75vw;
		margin: 0 -55vw 0 0;
		top: 50%;
		right: 50%;
		transform: translateY(-50%);
	}

	.mainCatch {
		font-size: 3.2rem;
	}
}

/* -------------------------------------------------- */
/* TAB */
/* -------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.pageTtlJp {
		letter-spacing: 0.05em;
	}

	.pageTtlJp .br_:after {
		content: "\A";
		white-space: pre;
	}

	#vision {
		margin: 0 0 60px;
		padding: 60px 4%;
	}

	#visionInner {
		width: 100%;
		padding: 30px 5% 120vw;
		flex-wrap: wrap;
	}

	#visionInner:after {
		width: 100%;
		height: 93vw;
		top: inherit;
		bottom: 17vw;
		right: -4.5%;
	}

	.mainCatch {
		font-size: 3.4rem;
	}

	#credo {
		width: 100% !important;
	}

	#credoConts {
		flex-wrap: wrap;
	}

	.credoJp .br_:after {
		content: "";
	}

	.credoBox {
		padding: 20px 2%;
	}

	.credoHead {
		margin: 0 0 15px;
	}

	.credoNum {
		font-size: 6.4rem;
	}

	.credoJp {
		font-size: 1.8rem;
		font-feature-settings: "palt";
	}

	.staffBox {
		margin: 0 0 40px;
	}

	.faqConts {
		margin: 0 0 50px;
	}

	.faqContsTtl {
		font-size: 2.0rem;
	}

	.faqQ {
		padding: 16px 62px 16px 4%;
		cursor: inherit;
	}

	.faqA {
		padding: 15px 4%;
		display: none;
	}

	.faqHead {
		font-size: 1.8rem;
	}

	.faqHead br {
		display: none;
	}

	.faqTxt {
		width: calc(100% - 2.5em);
	}

	.faqTrigger {
		right: 4%;
	}

	.modal-content {
		width: 92% !important;
		margin: 0 auto;
		padding: 30px 4% !important;
		top: 50% !important;
		transform: translateY(-50%);
	}

	.staffContsOutline {
		height: 100%;
	}

	.staffInner {
		padding: 0 0 30px;
		align-items: flex-start;
	}

	.staffConts {
		padding: 15px 0;
	}

	.name {
		margin: 0 0 20px;
		font-size: 2.0rem;
	}
}

/* -------------------------------------------------- */
/* SP */
/* -------------------------------------------------- */
@media screen and (max-width: 767px) {
	.aboutTtl {
		background: url(../../img/about/sp_about_mv_bg.jpg) no-repeat center center / cover;
	}

	.pageTtlJp {
		letter-spacing: 0.05em;
	}

	.pageTtlJp .br_:after {
		content: "\A";
		white-space: pre;
	}

	#vision {
		margin: 0 0 60px;
		padding: 60px 4%;
	}

	#visionInner {
		width: 100%;
		padding: 30px 5% 120vw;
		flex-wrap: wrap;
	}

	#visionInner:after {
		width: 100%;
		height: 93vw;
		top: inherit;
		bottom: 17vw;
		right: -4.5%;
	}

	.mainCatch {
		margin: 0 0 15px;
		font-size: 2.6rem;
		line-height: 1.4;
		word-break: break-all;
		letter-spacing: 0.1em;
	}

	.mainCatch03 {
		margin: 0 0 40px;
	}

	.subCatch {
		font-size: 2.4rem;
		line-height: 1.4;
		letter-spacing: 0;
	}

	#credoConts {
		flex-wrap: wrap;
	}

	#credo .secTtl {
		margin: 0 0 15px;
	}

	.credoBox {
		width: 100%;
		padding: 35px 0;
		justify-content: center !important;
		border-right: none;
		border-bottom: 1px solid #CCCCCC;
	}

	.credoHead {
		margin: 0 0 15px;
	}

	.credoNum {
		font-size: 6.4rem;
	}

	.credoJp {
		font-size: 2.0rem;
	}

	.staffBox {
		width: 48.3%;
		margin: 0 0 40px;
	}

	.faqConts {
		margin: 0 0 50px;
	}

	.faqContsTtl {
		font-size: 2.0rem;
	}

	.faqQ {
		padding: 16px 62px 16px 4%;
		cursor: inherit;
	}

	.faqA {
		padding: 15px 4%;
		display: none;
	}

	.faqHead {
		font-size: 1.8rem;
	}

	.faqHead br {
		display: none;
	}

	.faqTxt {
		width: calc(100% - 2.5em);
	}

	.faqTrigger {
		right: 4%;
	}

	.modal-content {
		width: 92% !important;
		height: 80vh !important;
		margin: 0 auto;
		padding: 30px 4% !important;
		top: 50% !important;
		transform: translateY(-50%);
		overflow: scroll;
	}

	.staffContsOutline {
		height: 100%;
	}

	.staffInner {
		padding: 0 0 30px;
	}

	.staffFigure {
		width: 100%;
		margin: 0 0 20px;
	}

	.staffConts {
		width: 100%;
		padding: 15px 0;
	}

	.name {
		margin: 0 0 20px;
		font-size: 2.0rem;
	}

	.btnClose {
		position: absolute;
		top: 0;
		right: 0;
	}

	.btnClose .button-link {
		width: 45px;
		height: 45px;
		display: block;
	}

	.btnClose img {
		width: 100%;
	}

}

@media screen and (max-width: 374px) {

	.textQ,
	.textA {
		margin: 0 6px 0 0;
		font-size: 2.6rem;
		font-weight: 700;
		line-height: 1.2;
	}
}