@charset "UTF-8";

/* ------------------------------
    共通
------------------------------ */
.secttl {
	margin-bottom: 80px;
}

.secttl span {
	display: inline-block;
	color: #ffe100;
	font-weight: bold;
	font-size: 3.5rem;
	line-height: 1.5;
	letter-spacing: 0.12em;
	text-indent: .1em;
	background-color: #000;
	padding: .2em 0 0;
	text-align: center;
	position: relative;
}

.secttl span::after {
	content: "";
	width: 100%;
	height: 25px;
	background: url(../img/about/secttl_bg.png) repeat-x left top / 70px auto;
	position: absolute;
	left: 0;
	top: 100%;
}

.txt .line {
	padding-bottom: .4em;
	background: linear-gradient(#ffe100, #ffe100) left bottom / 0% 6px no-repeat;
	transition-property: background-size;
	transition-duration: .5s;
}

.txt .line.white {
	background: linear-gradient(#fff, #fff) left bottom / 0% 6px no-repeat;
}

.is-show .txt .line {
	background-size: 100% 6px;
}

.txt .delay1 {
	transition-delay: .5s;
}

.txt .delay2 {
	transition-delay: 1s;
}

.txt .delay3 {
	transition-delay: 1.5s;
}

.bounce.is-show img {
	-webkit-animation: bounce 1.0s linear 0s 1;
	animation: bounce 1.0s linear 0s 1;
}

@-webkit-keyframes bounce {
	0% {
		-webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	40% {
		-webkit-transform: scale(0.95, 1.2) translate(0%, -10%);
	}

	50% {
		-webkit-transform: scale(1.1, 0.9) translate(0%, 5%);
	}

	60% {
		-webkit-transform: scale(0.95, 1.05) translate(0%, -3%);
	}

	70% {
		-webkit-transform: scale(1.05, 0.95) translate(0%, 3%);
	}

	80% {
		-webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	100% {
		-webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
	}
}

@keyframes bounce {
	0% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	40% {
		transform: scale(0.95, 1.2) translate(0%, -10%);
	}

	50% {
		transform: scale(1.1, 0.9) translate(0%, 5%);
	}

	60% {
		transform: scale(0.95, 1.05) translate(0%, -3%);
	}

	70% {
		transform: scale(1.05, 0.95) translate(0%, 3%);
	}

	80% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	100% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}
}



/*IE*/
.ie .secttl span {
	line-height: 1.3;
	padding: .4em 0 0;
}

.ie .txt .line {
	padding-bottom: .1em;
}

@media screen and (max-width: 768px) {
	.secttl {
		margin-bottom: 10vw;
	}

	.secttl span {
		font-size: 4.3vw;
	}

	.secttl span::after {
		height: 3.33vw;
		background: url(../img/about/secttl_bg.png) repeat-x left top -1px / 9.33vw auto;
	}

	.txt .line {
		background: linear-gradient(#ffe100, #ffe100) left bottom / 0% 1vw no-repeat;
	}

	.txt .line.white {
		background: linear-gradient(#fff, #fff) left bottom / 0% 1vw no-repeat;
	}

	.is-show .txt .line {
		background-size: 100% 1vw;
	}
}

/* ------------------------------
    mv
------------------------------ */
#sec_mv {
	background-color: #005578;
	position: static;
	height: auto;
	min-height: 1075px;
	padding: 274px 0 0;
	background-image: url(../img/about/mv_about.png);
	background-size: 1800px auto;
	background-position: center bottom;
}

.pagettl {
	text-align: right;
	padding-right: 74px;
}

@media screen and (max-width: 768px) {
	#sec_mv {
		height: 173.33vw;
		min-height: inherit;
		padding: 18vw 0 0;
		background-image: url(../img/about/mv_about_sp.png);
		background-size: cover;
	}

	.pagettl {
		width: 100%;
		padding-right: 0;
	}

}


/* ------------------------------
    intro
------------------------------ */
#sec_intro {
	padding: 70px 0;
	background-image: url(../img/common/bg_dot3.png);
	background-color: #ffe100;
}

#sec_intro .wrap {
	flex-direction: row-reverse;
	align-items: flex-end;
}

#sec_intro .txtwrap {
	width: 700px;
	position: relative;
}

#sec_intro .txtwrap .secttl span {
	width: 560px;
}

#sec_intro .txtwrap .illust02 {
	position: absolute;
	top: -8px;
	right: 25px;
}

#sec_intro .txtwrap .txt {
	font-weight: bold;
	font-size: 1.7rem;
	line-height: 2.23;
	letter-spacing: 0.05em;
}

#sec_intro .txtwrap .txt + .txt {
	margin-top: 1em;
}


#sec_intro .illust01 {
	width: 400px;
	text-align: center;
}


@media screen and (max-width: 768px) {
	#sec_intro {
		padding: 13vw 0;
		background-size: 3vw auto;
	}

	#sec_intro .wrap {
		display: flex !important;
		flex-direction: column;
	}

	#sec_intro .txtwrap {
		width: 100%;
		order: 2;
	}

	#sec_intro .txtwrap .illust01 {
		order: 1;
	}

	#sec_intro .txtwrap .secttl span {
		width: 65.31vw;
	}

	#sec_intro .txtwrap .illust02 {
		width: 16vw;
		top: -8vw;
		right: 0;
	}

	#sec_intro .txtwrap .txt {
		font-size: 3.2vw;
		line-height: 2;
	}

	#sec_intro .illust01 {
		width: 42vw;
		margin: 0 auto 6vw;
	}


}

/* ------------------------------
    staff
------------------------------ */
#sec_staff {
	padding: 140px 0 96px;
	background-color: #005578;
	background-image: url(../img/about/staff_bg02.png);
	background-repeat: no-repeat;
	background-position: center bottom 65px;
	background-size: 1800px auto;
}

#sec_staff::before {
	content: "";
	width: 100%;
	height: 117px;
	background: url(../img/about/staff_bg01.png) repeat-x center top;
	position: absolute;
	left: 0;
	top: 0;
}

#sec_staff::after {
	content: "";
	width: 100%;
	height: 76px;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #000;
}

#sec_staff .secttl span {
	width: 770px;
	letter-spacing: 0.1em;
	text-indent: .5em;
}

#sec_staff .staff_list {
	margin-top: 100px;
}

#sec_staff .staff_list .item {
	width: 537px;
	background: url(../img/about/staff_item_bg.png) no-repeat center / 100% 100%;
	padding: 0 64px 35px;
	position: relative;
}

#sec_staff .staff_list .item:first-child::before {
	content: "";
	width: 84px;
	height: 56px;
	background: url(../img/about/staff_illust01.png) no-repeat center bottom / 100% auto;
	position: absolute;
	left: 24px;
	top: -56px;
}

#sec_staff .staff_list .item .staff_img {
	height: 234px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#sec_staff .staff_list .item .staff_img::before {
	content: "";
	width: 100%;
	height: 4px;
	background: url(../img/common/line.png) repeat-x center bottom / auto 4px;
	position: absolute;
	left: 0;
	bottom: 0;
}

#sec_staff .staff_list .item .txt {
	font-weight: bold;
	font-size: 1.7rem;
	line-height: 2;
	letter-spacing: 0;
	margin-top: 25px;
}

@media screen and (min-width: 769px) {
	#sec_staff .staff_list .item:nth-child(n + 3) {
		margin-top: 18px;
	}
}

@media screen and (max-width: 768px) {
	#sec_staff {
		padding: 18vw 0 16vw;
		background-position: center bottom 10.8vw;
		background-size: 120vw auto;
	}

	#sec_staff::before {
		height: 12vw;
		background: url(../img/about/staff_bg01.png) repeat-x center top / auto 100%;
	}

	#sec_staff::after {
		height: 12.6vw;
	}

	#sec_staff .secttl span {
		width: 74.64vw;
	}

	#sec_staff .staff_list {
		margin-top: 18vw;
	}

	#sec_staff .staff_list .item {
		width: 100%;
		background: url(../img/about/staff_item_bg.png) no-repeat center / 100% 100%;
		padding: 0 11vw 5vw;
	}

	#sec_staff .staff_list .item:first-child::before {
		width: 16vw;
		height: 10.4vw;
		left: 4vw;
		top: -10.4vw;
	}

	#sec_staff .staff_list .item + .item {
		margin-top: 8vw;
	}


	#sec_staff .staff_list .item .staff_img {
		height: 30vw;
	}

	#sec_staff .staff_list .item .staff_img img {
		width: auto;
		height: 17vw;
	}

	#sec_staff .staff_list .item .staff_img::before {
		height: 4px;
		background: url(../img/common/line.png) repeat-x center bottom / auto 2px;
	}

	#sec_staff .staff_list .item .txt {
		font-size: 3.2vw;
		margin-top: 4vw;
	}

}

/* ------------------------------
    about
------------------------------ */
#sec_about .ttlwrap {
	height: 560px;
	padding-top: 90px;
	background-image: url(../img/common/bg_dot3.png), url(../img/about/about_ttl_bg.jpg);
	background-repeat: repeat, no-repeat;
	background-size: 5px auto, cover;
	background-position: center;
}

#sec_about .ttlwrap .secttl {
	width: 1200px;
	margin: 0 auto;
}

#sec_about .ttlwrap .secttl span {
	width: 420px;
}

#sec_about .cnt {
	padding: 100px 0;
	background: url(../img/common/bg_dot2.png);
}

#sec_about .cnt .inner {
	align-items: flex-end;
	margin-bottom: 90px;
}

#sec_about .cnt .inner:first-child {
	flex-direction: row-reverse;
}

#sec_about .cnt .txtwrap {
	width: 714px;
	position: relative;
}

#sec_about .cnt .txtwrap .txt {
	font-weight: bold;
	font-size: 1.7rem;
	line-height: 2.23;
	letter-spacing: 0.05em;
}

#sec_about .cnt .txtwrap .txt + .txt {
	margin-top: 1em;
}

#sec_about .cnt .block02 .logoimg {
	margin-bottom: 24px;
}



#sec_about .cnt .btn_txt {
	text-align: center;
}

#sec_about .cnt .btn_txt span {
	font-weight: bold;
	font-size: 1.8rem;
	letter-spacing: 0.01em;
	line-height: 1.88;
	position: relative;
	display: inline-block;
	margin-bottom: 1em;
}

#sec_about .cnt .btn_txt span::before,
#sec_about .cnt .btn_txt span::after {
	content: "";
	width: 25px;
	height: 55px;
	background: url(../img/about/about_txt.svg) no-repeat right center;
	position: absolute;
	bottom: 0;
}

#sec_about .cnt .btn_txt span::before {
	left: -1.5em;
}

#sec_about .cnt .btn_txt span::after {
	right: -1.5em;
	transform: scale(-1, 1);
}

#sec_about .cnt .btn a {
	min-width: 340px;
}

#sec_about .cnt .btn a:hover {
	background-color: #000;
	color: #FFE100;
}

@media screen and (max-width: 768px) {
	#sec_about {
		padding-top: 50px;
		margin-top: -50px;
	}
	#sec_about .ttlwrap {
		height: 62vw;
		padding: 10vw 8vw 0;
		background-image: url(../img/about/about_ttl_bg_sp.jpg);
		background-repeat: no-repeat;
		background-size: 100%;
	}

	#sec_about .ttlwrap .secttl {
		width: 84vw;
	}

	#sec_about .ttlwrap .secttl span {
		width: 46.65vw;
	}

	#sec_about .cnt {
		padding: 13vw 0;
		background-size: 3vw auto;
	}

	#sec_about .cnt .inner {
		margin-bottom: 12vw;
	}


	#sec_about .cnt .txtwrap {
		width: 100%;
		order: 2;
	}

	#sec_about .cnt .txtwrap .txt {
		font-size: 3.2vw;
		line-height: 2;
	}

	#sec_about .cnt .block01,
	#sec_about .cnt .block02 {
		display: flex !important;
		flex-direction: column !important;
	}

	#sec_about .cnt .block01 .illust {
		width: 42vw;
		margin: 0 auto 6vw;
		order: 1;
	}

	#sec_about .cnt .block02 .logoimg {
		width: 48vw;
		margin: 0 auto 6vw;
	}



	#sec_about .cnt .btn_txt {
		text-align: center;
	}

	#sec_about .cnt .btn_txt span {
		font-size: 4vw;
	}

	#sec_about .cnt .btn_txt span::before,
	#sec_about .cnt .btn_txt span::after {
		width: 6vw;
		height: 13.2vw;
		background: url(../img/about/about_txt.svg) no-repeat right center / 100% auto;
	}

	#sec_about .cnt .btn a {
		min-width: 100%;
	}
}


@media screen and (max-width: 768px) {
	#sec_staff {
		padding: 18vw 0 27vw;
		background: url(../img/about/staff_bg01_sp2.png) no-repeat center top / 100% auto , url(../img/about/staff_bg03_sp.png) no-repeat center bottom / 100% auto, url(../img/about/staff_bg02_sp.png) repeat-y center top / 100% auto;
	}

	#sec_staff::before {
		height: 12vw;
		background: url(../img/about/staff_bg01.png) repeat-x center top / auto 100%;
	}

	#sec_staff::after {
		height: 12.6vw;
	}

	#sec_staff .secttl span {
		width: 74.64vw;
	}

	#sec_staff .staff_list extracted1